/* Polices servies depuis le domaine. Plus aucun appel a fonts.googleapis.com
   ni fonts.gstatic.com: la CSP peut rester en style-src/font-src 'self'.
   Cormorant est une fonte variable (un fichier par sous-ensemble, graisse
   continue); Barlow Condensed vient en trois fichiers statiques par graisse.
   font-display:swap fait lire le texte tout de suite, dans la fonte de
   secours, plutot que de le masquer pendant le telechargement. */
@font-face{
  font-family:Cormorant;font-style:normal;font-weight:300 700;
  font-display:swap;src:url(polices/cormorant-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
   U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
   U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:Cormorant;font-style:normal;font-weight:300 700;
  font-display:swap;src:url(polices/cormorant-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
   U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
   U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:300;
  font-display:swap;
  src:url(polices/barlow-condensed-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
   U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
   U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:300;
  font-display:swap;
  src:url(polices/barlow-condensed-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
   U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
   U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:400;
  font-display:swap;
  src:url(polices/barlow-condensed-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
   U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
   U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:400;
  font-display:swap;
  src:url(polices/barlow-condensed-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
   U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
   U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:500;
  font-display:swap;
  src:url(polices/barlow-condensed-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
   U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
   U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:500;
  font-display:swap;
  src:url(polices/barlow-condensed-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
   U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
   U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Sous-ensemble maison: Soleil, Lune, planetes et les douze signes. */
@font-face{
  font-family:'Noto Sans Symbols 2';font-style:normal;font-weight:400;
  font-display:swap;
  src:url(polices/noto-sans-symbols-2-400-astro.woff2) format('woff2');
  unicode-range:U+2609,U+263D-2653;
}

:root{
  --encre:#0b0d1a; --encre2:#12152a; --encre3:#0e1124; --trait:#2a2f4e;
  --laiton:#c9a961; --laiton2:#e3c98a;
  --txt:#c5c8dc; --txt2:#8a8fa8; --txt3:#7c829c; --alerte:#d08a8e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--encre);
  background-image:
    radial-gradient(1px 1px at 18% 24%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 72% 9%,rgba(255,255,255,.22),transparent),
    radial-gradient(1px 1px at 88% 58%,rgba(255,255,255,.26),transparent),
    radial-gradient(1px 1px at 9% 71%,rgba(255,255,255,.18),transparent);
  background-attachment:fixed;
  color:var(--txt);font:400 17px/1.7 Cormorant,Georgia,serif;
  overflow-x:hidden;
}
.page{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

header.site{
  padding:clamp(28px,5vw,46px) 0 clamp(22px,4vw,32px);
  border-bottom:1px solid var(--trait);
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
}
.marque{display:inline-flex;align-items:center;gap:16px;text-decoration:none}
.sceau{width:clamp(42px,9vw,54px);height:auto;flex:none}
.marque .mot{
  font-family:Cormorant,serif;font-weight:300;font-size:clamp(30px,7vw,42px);
  letter-spacing:.3em;text-indent:.3em;color:var(--laiton);line-height:1;
}
.jour{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--txt3);
  text-align:right;
}
.jour b{display:block;color:var(--laiton2);font-weight:400;margin-top:3px}

.hero{display:grid;gap:clamp(26px,5vw,54px);align-items:center;
 padding:clamp(32px,6vw,60px) 0 clamp(24px,4vw,40px)}
@media(min-width:900px){.hero{grid-template-columns:1fr 1.05fr}}
.sur{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--laiton);
  margin-bottom:16px;
}
.accroche{
  font-weight:300;font-size:clamp(27px,4.4vw,42px);line-height:1.26;
  color:var(--txt2);
}
.accroche em{
  font-style:normal;color:#fff;display:inline-block;margin-top:4px;
  border-bottom:1px solid var(--laiton);padding-bottom:3px;
}
.sous{font-size:17px;line-height:1.72;color:var(--txt2);margin-top:24px}
.retenue{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--trait);
  font-size:15px;line-height:1.62;color:var(--txt3);
}
.roue{width:100%;height:auto;display:block}

.bande{
  background:var(--encre3);
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  margin:0 calc(50% - 50vw);
  padding:clamp(22px,4vw,34px) calc(50vw - 50% + clamp(20px,4vw,40px));
}
.frise{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
 background:var(--trait)}
@media(min-width:760px){.frise{grid-template-columns:repeat(10,1fr)}}
.frise div{background:var(--encre3);padding:15px 5px 12px;text-align:center}
.frise .g{display:block;font-size:19px;color:var(--laiton);line-height:1;
 font-family:'Noto Sans Symbols 2','DejaVu Sans',serif;
 font-variant-emoji:text}
.frise .d{display:block;margin-top:6px;font-family:'Barlow Condensed',sans-serif;
 font-size:13px;letter-spacing:.06em;color:var(--txt)}
.frise .s{display:block;font-family:'Barlow Condensed',sans-serif;font-size:12px;
 letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin-top:2px}
.frise .r{color:var(--alerte);font-size:12px}

.titre-sect{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--txt3);
  text-align:center;padding:clamp(32px,6vw,52px) 0 clamp(18px,4vw,28px);
}
.signes{display:grid;gap:clamp(18px,3vw,26px);grid-template-columns:1fr}
@media(min-width:820px){.signes{grid-template-columns:1fr 1fr}}
.signe{
  border:1px solid var(--trait);background:var(--encre2);
  padding:clamp(22px,4vw,32px);
  opacity:1;
  transition:border-color .35s ease,transform .35s ease;
}
.signe:hover,.signe:focus-within{
  border-color:var(--laiton);transform:translateY(-2px);
}
.tete{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.glyphe{
  font-size:clamp(30px,7vw,38px);color:var(--laiton);line-height:1;
  font-family:'Noto Sans Symbols 2','DejaVu Sans',serif;
  font-variant-emoji:text;
}
/* h3 dans la grille des douze, h1 sur la page dediee au signe: meme
   traitement visuel, hierarchie differente. */
.signe h1,.signe h3{font-weight:400;font-size:clamp(23px,5vw,27px);color:#fff;
 letter-spacing:.05em}
.signe h1 a,.signe h3 a{color:#fff;text-decoration:none;
 border-bottom:1px solid transparent}
.signe h1 a:hover,.signe h3 a:hover{border-bottom-color:var(--laiton)}
.periode{
  display:block;margin-bottom:16px;
  font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.18em;color:var(--txt3);
}
.general{font-size:16px;line-height:1.66;color:var(--txt);margin-bottom:20px}
.rubs{display:grid;gap:15px}
.rub h2,.rub h4{
  font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);
  margin-bottom:4px;
}
.rub p{font-size:15px;line-height:1.58;color:var(--txt2)}
.rub.vide h2,.rub.vide h4{color:var(--txt3)}
.rub.vide p{color:var(--txt3);font-style:italic}

footer{
  border-top:1px solid var(--trait);margin-top:clamp(38px,7vw,62px);
  padding:26px 0 70px;text-align:center;
}
.reseaux{margin-bottom:16px}
.reseaux a{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);
  text-decoration:none;margin:0 14px;
}
.mention{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;line-height:1.6;
  letter-spacing:.04em;color:var(--txt3);max-width:440px;margin:0 auto;
}
/* Appel vers la chaine, entre la frise et la grille des douze. */
.chaine-bande{display:flex;justify-content:center;
 padding:clamp(30px,5vw,48px) 0 0}
.chaine{
  display:inline-flex;align-items:center;gap:16px;text-decoration:none;
  border:1px solid var(--trait);background:var(--encre2);
  padding:14px 26px 14px 20px;
  transition:border-color .3s ease,transform .3s ease;
}
.chaine:hover,.chaine:focus-visible{
  border-color:var(--laiton);transform:translateY(-2px);
}
.chaine .yt{width:34px;height:auto;flex:none;display:block}
.chaine .txt{display:flex;flex-direction:column;gap:3px}
.chaine .t1{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);
}
.chaine .t2{font-size:15px;line-height:1.4;color:var(--txt2)}
@media(max-width:480px){
  .chaine{padding:13px 18px;gap:12px}
  .chaine .yt{width:28px}
  .chaine .t2{font-size:14px}
}

.annexes{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px 24px;
  margin-bottom:18px;font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;
}
.annexes a{color:var(--txt3);text-decoration:none;
 border-bottom:1px solid transparent;transition:color .22s,border-color .22s}
.annexes a:hover{color:var(--laiton);border-bottom-color:var(--laiton)}
.annexes span{color:var(--laiton2)}

/* Pages annexes: contact, mentions legales, confidentialite. */
.signes.seul{grid-template-columns:1fr}
.texte{
  max-width:640px;padding:clamp(30px,6vw,56px) 0 clamp(10px,2vw,20px);
}
.texte h1{
  font-weight:300;font-size:clamp(28px,5.4vw,40px);line-height:1.2;
  color:#fff;letter-spacing:.02em;margin-bottom:20px;
}
.texte h2{
  font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--laiton);
  margin:30px 0 8px;
}
.texte p{font-size:16px;line-height:1.72;color:var(--txt2);margin-bottom:12px}
.texte a{color:var(--laiton2);text-decoration:none;
 border-bottom:1px solid var(--trait);transition:border-color .22s}
.texte a:hover{border-bottom-color:var(--laiton)}
.texte .adresse{font-size:19px;margin:18px 0 22px}
.texte .retour{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--trait);
  font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
}
.texte .retour a{color:var(--txt3);border-bottom:none}
.texte .retour a:hover{color:var(--laiton)}
/* frise cliquable */
.frise a,.frise div{
  background:var(--encre3);padding:15px 5px 12px;text-align:center;
  display:block;text-decoration:none;transition:background .22s;
}
.frise a{cursor:pointer}
.frise a:hover,.frise a:focus-visible{background:#161b36}
.frise a:hover .g,.frise a:focus-visible .g{color:var(--laiton2)}

.lexique{
  margin-top:clamp(20px,4vw,30px);padding-top:clamp(18px,3vw,24px);
  border-top:1px solid var(--trait);
  display:grid;gap:clamp(16px,3vw,30px);grid-template-columns:1fr;
}
@media(min-width:780px){.lexique{grid-template-columns:1fr 1.4fr;
  align-items:start}}
.lexique h2{
  font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--laiton);
  margin-bottom:8px;
}
.lexique > p{font-size:15px;line-height:1.65;color:var(--txt2)}
.lexique dl{display:grid;gap:12px}
.lexique dt{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;
  letter-spacing:.14em;color:var(--laiton2);margin-bottom:2px;
}
.lexique dd{font-size:14px;line-height:1.6;color:var(--txt3)}
.lexique dd b{color:var(--txt2);font-weight:400}
.lexique .r{color:var(--alerte);font-size:15px}

.nav-jours{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(32px,6vw,52px) 0 clamp(18px,4vw,28px);
  font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
}
.nav-jours a{color:var(--txt3);text-decoration:none;transition:color .22s}
.nav-jours a:hover{color:var(--laiton)}
.nav-jours .courant{
  color:var(--laiton2);letter-spacing:.3em;font-size:12px;
}
@media(max-width:560px){
  .nav-jours{flex-direction:column;gap:8px}
  .nav-jours .courant{order:-1;margin-bottom:4px}
}

a:focus-visible{outline:1px solid var(--laiton);outline-offset:3px}

/* --- mouvement -----------------------------------------------------------
   Trois couches d'etoiles fixes derriere le contenu, pulsees a des durees
   premieres entre elles avec des retards negatifs : le scintillement ne se
   resynchronise jamais. Sans animation, les couches restent visibles. */
@keyframes scintille{0%,100%{opacity:.3}50%{opacity:1}}

body::before,body::after,.page::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.7;
}
body::before{
  background-image:
    radial-gradient(1px 1px at 33% 17%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 61% 39%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.4px 1.4px at 14% 52%,rgba(227,201,138,.35),transparent),
    radial-gradient(1px 1px at 84% 81%,rgba(255,255,255,.28),transparent);
  animation:scintille 9s ease-in-out infinite;
}
body::after{
  background-image:
    radial-gradient(1px 1px at 46% 68%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.2px 1.2px at 78% 26%,rgba(255,255,255,.32),transparent),
    radial-gradient(1px 1px at 25% 88%,rgba(255,255,255,.24),transparent),
    radial-gradient(1px 1px at 93% 47%,rgba(227,201,138,.3),transparent);
  animation:scintille 13s ease-in-out -4s infinite;
}
.page::before{
  background-image:
    radial-gradient(1px 1px at 7% 33%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.3px 1.3px at 56% 6%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 68% 93%,rgba(255,255,255,.26),transparent);
  animation:scintille 17s ease-in-out -9s infinite;
}

/* Revelation au defilement. La carte est opaque par defaut : les navigateurs
   sans animation-timeline ne voient jamais l'etat initial transparent.
   On anime "translate" et non "transform", que le survol se reserve. */
@keyframes apparition{
  from{opacity:0;translate:0 20px}
  to{opacity:1;translate:0 0}
}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .signe{
      animation:apparition linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
  }
}

/* Roue : un tour en dix minutes. Le trace tient dans le cercle inscrit du
   viewBox (rayon maxi 322 pour un demi-cote de 360), il ne deborde donc
   jamais en tournant. Les textes recoivent la meme animation inversee,
   autour de leur propre boite : ils orbitent sans basculer. Pause au
   survol, les secteurs sont des liens et on ne vise pas une cible mobile. */
@keyframes tour{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:no-preference){
  .roue{animation:tour 600s linear infinite}
  .roue .sg,.roue .sn,.roue .pg,.roue .pd{
    animation:tour 600s linear infinite reverse;
    transform-box:fill-box;transform-origin:50% 50%;
  }
  .roue:hover,.roue:hover *,
  .roue:focus-within,.roue:focus-within *{animation-play-state:paused}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.sf{stroke:none;transition:fill-opacity .25s}
.sh{fill:transparent;stroke:none}
.lk{cursor:pointer;outline:none}
.lk:hover .sf,.lk:focus .sf{fill-opacity:1}
.sg{fill:#c9a961;font-size:22px;text-anchor:middle;dominant-baseline:central;
 font-family:'Noto Sans Symbols 2','DejaVu Sans',serif;
 font-variant-emoji:text;transition:fill .25s}
.lk:hover .sg,.lk:focus .sg{fill:#f0d9a0}
.sn{fill:#6e7490;font-size:12px;letter-spacing:2.4px;text-anchor:middle;
 dominant-baseline:central;font-family:'Barlow Condensed',sans-serif;
 text-transform:uppercase;transition:fill .25s}
.lk:hover .sn,.lk:focus .sn{fill:#e3c98a}
.pg{fill:#e3c98a;font-size:20px;text-anchor:middle;dominant-baseline:central;
 font-family:'Noto Sans Symbols 2','DejaVu Sans',serif;
 font-variant-emoji:text}
.pd{fill:#9aa0ba;font-size:12px;font-weight:500;text-anchor:middle;dominant-baseline:central;
 font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px}