/* =====================================================================
   LA PRÉSENTATION — *une page pour donner envie, pas pour expliquer.*

   ⚠️ LA CHARTE S'APPLIQUE, MÊME ICI : le bois, l'or, la corde. Pas de
      bleu électrique, pas de néon, pas de gris froid d'interface. La seule
      couleur froide est `--bleu`, et elle dit l'hiver.
   ⚠️ AUCUNE POLICE TÉLÉCHARGÉE : *le jeu tourne sans internet.* La
      calligraphie est DESSINÉE en SVG — *des pleins et des déliés, une
      plume, pas un fichier de plus.*
   ===================================================================== */
:root{
  --nuit:#12100c; --bois:#1a1410; --panneau:#241c15; --panneau2:#2e241b;
  --bord:#4a3d2c; --or:#c9a227; --or-clair:#e8c65a; --texte:#ece3d2;
  --gris:#a3937a; --vert:#7fb069; --rouge:#c1503f; --bleu:#6a9ec4;
  --serif:Georgia,"Palatino Linotype","Book Antiqua",Palatino,
          "Iowan Old Style","Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--nuit);color:var(--texte);
  font-family:var(--serif);font-size:16px;line-height:1.65;
  overflow-x:hidden;
}
/* --- LE GRAIN : *un film de poussière sur la table, et il ne coûte
       aucun fichier* — un `feTurbulence` en data-URI. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.30'/></svg>");
  mix-blend-mode:overlay;
}
/* --- LA LIGNE DE PROGRESSION : *un filet d'or qui se remplit.* */
#fil{position:fixed;top:0;left:0;height:2px;width:0;z-index:100;
     background:linear-gradient(90deg,var(--or),var(--or-clair));
     box-shadow:0 0 12px rgba(201,162,39,.65)}

section{position:relative;padding:9vh 7vw;max-width:1180px;margin:0 auto}
.plein{max-width:none;padding:0}

/* ============================ 1. L'OUVERTURE ============================ */
#ouverture{
  height:100vh;min-height:620px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;padding:0 6vw 96px;
}
#ouverture .fond{
  position:absolute;inset:-6%;
  background:url("img/hero-b-1600px.jpg") center 42%/cover no-repeat;
  filter:brightness(.42) saturate(.85) contrast(1.06);
  animation:derive 46s ease-in-out infinite alternate;
}
@keyframes derive{ from{transform:scale(1.02) translate3d(0,0,0)}
                  to  {transform:scale(1.09) translate3d(0,-1.4%,0)} }
#ouverture .voile{
  position:absolute;inset:0;
  background:
    radial-gradient(75% 65% at 50% 42%, transparent 0, rgba(10,7,4,.55) 62%, rgba(10,7,4,.94) 100%),
    linear-gradient(180deg, rgba(10,7,4,.75) 0, transparent 26%, transparent 62%, rgba(10,7,4,.96) 100%);
}
#ouverture .dedans{position:relative;z-index:2;max-width:900px}

/* --- LA CALLIGRAPHIE : *deux volutes dessinées, pas une police.* --- */
.volute{display:block;width:min(430px,72vw);height:auto;margin:0 auto;
        overflow:visible}
.volute path{fill:none;stroke:var(--or);stroke-width:1.6;
             stroke-linecap:round;stroke-linejoin:round;
             opacity:.85;filter:drop-shadow(0 0 6px rgba(201,162,39,.35))}
.volute .plein{stroke-width:2.6;opacity:.95}

h1.titre{
  font-size:clamp(30px,6.4vw,76px);line-height:1.02;margin:14px 0 4px;
  font-weight:400;font-variant:small-caps;letter-spacing:.14em;
  background:linear-gradient(180deg,#fff6d8 0%,var(--or-clair) 42%,
             var(--or) 72%,#8a6f14 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.85));
}
h1.titre::after{ /* le reflet qui balaie le titre une fois toutes les 9 s */
  content:"";position:absolute;inset:0;
}
.sous-titre{
  font-size:clamp(11px,1.5vw,14px);letter-spacing:.42em;text-transform:uppercase;
  color:var(--gris);margin:0 0 26px;padding-left:.42em;
}
.epigraphe{
  font-size:clamp(15px,2.1vw,22px);line-height:1.55;color:var(--texte);
  font-style:italic;margin:0 auto 8px;max-width:820px;
  text-shadow:0 2px 12px #000,0 0 30px #000;
}
.epigraphe b{color:var(--or-clair);font-style:normal}
.legende{font-size:13px;letter-spacing:.22em;text-transform:uppercase;
         color:var(--gris);margin:0 0 34px}
.appel{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 40px;border:1px solid var(--or);border-radius:2px;
  color:#1a1410;background:linear-gradient(180deg,#f0d374,var(--or) 55%,#a8861d);
  font-size:14px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  text-decoration:none;cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 12px 40px rgba(201,162,39,.22);
  transition:transform .25s, box-shadow .25s;
}
.appel:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 18px 54px rgba(201,162,39,.4)}
.piste{margin:26px auto 0;color:var(--gris);font-size:11px;
       letter-spacing:.3em;text-transform:uppercase;
       animation:respire 2.6s ease-in-out infinite}
.piste span{display:block;width:1px;height:34px;margin:10px auto 0;
            background:linear-gradient(180deg,var(--or),transparent)}
@keyframes respire{0%,100%{opacity:.45}50%{opacity:1}}

/* ============================ COMMUN ============================ */
.bandeau{display:flex;align-items:center;gap:16px;margin:0 0 10px}
.bandeau .trait{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,39,.55),transparent)}
h2{
  font-variant:small-caps;letter-spacing:.16em;color:var(--or-clair);
  font-weight:400;font-size:clamp(20px,3.1vw,32px);margin:0;text-align:center;
  white-space:nowrap;
}
.reg{color:var(--gris);font-style:italic;text-align:center;max-width:780px;
     margin:0 auto 30px;font-size:15px}
.chiffre{font-family:ui-monospace,Consolas,monospace;color:var(--or-clair)}

/* --- l'apparition : *on monte, on s'éclaircit.* --- */
.monte{opacity:0;transform:translateY(26px);
       transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.monte.vu{opacity:1;transform:none}

/* ============================ 2. LA TERRE ============================ */
#terre{background:
  radial-gradient(90% 60% at 50% 0%, rgba(201,162,39,.06), transparent 70%)}
.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0 6px}
.tuile{margin:0;border:1px solid var(--bord);border-radius:4px;overflow:hidden;
       display:flex;flex-direction:column;
       background:radial-gradient(70% 70% at 50% 26%, rgba(201,162,39,.09), transparent 72%),
                  #14100c;
       transition:border-color .35s, transform .35s}
.tuile:hover{border-color:var(--or);transform:translateY(-3px)}
.tuile .vue{height:176px;display:flex;align-items:center;justify-content:center;padding:12px}
.tuile img{max-height:100%;max-width:100%;object-fit:contain;
           filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
/* --- ⚠️ LA FRICHE EST UNE **MATIÈRE**, PAS UN BÂTI : *la charte dit qu'on ne
       mélange pas les deux familles.* Alors on la calme — un peu moins verte,
       un peu plus sombre — au lieu de la faire passer pour un bâtiment. */
.tuile.sol img{filter:saturate(.72) brightness(.88);
               box-shadow:0 0 0 1px rgba(0,0,0,.75),0 10px 22px rgba(0,0,0,.6)}
.tuile figcaption{padding:10px 10px 12px;text-align:center;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--texte);
  border-top:1px solid rgba(74,61,44,.75);background:rgba(10,7,4,.45)}
.tuile b{color:var(--or-clair);font-weight:400}
.terre-faits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.fait{border:1px solid var(--bord);border-radius:3px;padding:16px 14px;text-align:center;
      background:linear-gradient(180deg,rgba(46,36,27,.55),rgba(26,20,16,.35))}
.fait .n{display:block;font-family:ui-monospace,Consolas,monospace;font-size:26px;
         color:var(--or-clair);margin-bottom:2px}
.fait .d{font-size:12px;letter-spacing:.1em;color:var(--gris);text-transform:uppercase}

/* ============================ 3. LES SIX ============================ */
#six{background:
  radial-gradient(70% 50% at 50% 30%, rgba(201,162,39,.07), transparent 72%)}
.grille-six{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.voix{position:relative;text-align:center;padding:18px 12px 16px;
      border:1px solid rgba(74,61,44,.85);border-radius:4px;
      background:linear-gradient(180deg,rgba(36,28,21,.9),rgba(20,16,12,.9));
      transition:transform .35s,border-color .35s,box-shadow .35s}
.voix:hover{transform:translateY(-6px);border-color:var(--or);
            box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(201,162,39,.25) inset}
.voix .medaillon{
  width:132px;height:132px;margin:0 auto 12px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(201,162,39,.45);position:relative;
  box-shadow:0 0 0 5px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.6);
}
.voix .medaillon img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
                     filter:saturate(.95) contrast(1.05);
                     transition:transform .5s ease}
.voix:hover .medaillon img{transform:scale(1.06)}
.voix h3{font-variant:small-caps;letter-spacing:.14em;color:var(--or-clair);
         font-size:19px;font-weight:400;margin:0 0 2px}
.voix .impl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.voix .dogme{color:var(--or);font-size:13px;margin:9px 0 6px;font-style:italic}
.voix .monde{font-size:13px;color:var(--texte);opacity:.92;margin:0 0 10px;min-height:2.9em}
.voix .benie{font-size:11.5px;color:var(--or-clair);border-top:1px solid rgba(74,61,44,.9);
             padding-top:8px;margin-top:auto}

/* ============================ 4. L'HIVER ============================ */
#hiver{position:relative;overflow:hidden;
       background:linear-gradient(180deg,#0d1116,#121a22 45%,#0d1116)}
#hiver::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 40% at 50% 10%, rgba(106,158,196,.20), transparent 70%)}
#hiver .dedans{position:relative;z-index:1}
#hiver h2{color:#cfe0ee}
.hiver-tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 8px}
.hiver-tuiles img{width:100%;border-radius:3px;border:1px solid #2b3a46;
                  filter:brightness(1.06) saturate(.7)}
.hiver-faits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.hiver-faits .fait{border-color:#2b3a46;background:linear-gradient(180deg,rgba(24,36,46,.75),rgba(13,17,22,.6))}
.hiver-faits .n{color:#bcd6e8}
.promesse{text-align:center;font-style:italic;color:#bcd6e8;margin:22px auto 0;max-width:620px;font-size:15px}

/* ============================ 5. LE CIEL ============================ */
#ciel{text-align:center;background:
  radial-gradient(60% 50% at 50% 100%, rgba(201,162,39,.10), transparent 70%)}
.cadenas{font-size:34px;color:var(--or);display:block;margin-bottom:14px;
         filter:drop-shadow(0 0 18px rgba(201,162,39,.45))}
#ciel p{max-width:620px;margin:0 auto 14px}

/* ============================ 6. L'APPEL ============================ */
#appel{text-align:center;padding-bottom:14vh}
#appel .epigraphe{font-size:clamp(17px,2.4vw,25px);margin-bottom:26px}
#appel .legende{margin-bottom:22px}
.pied{max-width:1180px;margin:0 auto;padding:26px 7vw 40px;text-align:center;
      color:#6f6252;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
      border-top:1px solid rgba(74,61,44,.6)}

/* ============================ TÉLÉPHONE ============================ */
@media(max-width:900px){
  .grille-six{grid-template-columns:repeat(2,1fr)}
  .tuiles,.hiver-tuiles{grid-template-columns:repeat(2,1fr)}
  .terre-faits,.hiver-faits{grid-template-columns:1fr}
  section{padding:7vh 5vw}
  h2{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  #ouverture .fond{animation:none}
  .monte{transition:none;opacity:1;transform:none}
}


/* =====================================================================
   LES PAGES DE CONTENU — *du texte, du vrai, et il doit se lire.*
   ⚠️ UNE PAGE D'IMAGES NE SE RÉFÉRENCE PAS : *les moteurs lisent ce qui
      est écrit.* Ces pages existent pour ça — et pour les gens.
   ===================================================================== */
body.page{line-height:1.72}
.entete{position:sticky;top:0;z-index:50;background:rgba(18,16,12,.92);
  border-bottom:1px solid rgba(74,61,44,.7);backdrop-filter:blur(6px)}
.entete .dedans{max-width:1180px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 6vw}
.entete .nom{font-variant:small-caps;letter-spacing:.14em;color:var(--or-clair);
  font-size:15px;text-decoration:none}
.entete nav{display:flex;gap:16px;flex-wrap:wrap}
.entete nav a{color:var(--gris);text-decoration:none;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;padding-bottom:2px;
  border-bottom:1px solid transparent}
.entete nav a:hover,.entete nav a[aria-current]{color:var(--or-clair);border-color:var(--or)}
.garde{max-width:820px;margin:0 auto;padding:8vh 6vw 2vh}
.garde h1{font-size:clamp(25px,4.4vw,44px);line-height:1.1;color:var(--or-clair);
  font-variant:small-caps;letter-spacing:.1em;font-weight:400;margin:0 0 12px}
.garde .chapo{font-style:italic;color:var(--gris);font-size:17px;max-width:620px;margin:0}
article.lire{max-width:820px;margin:0 auto;padding:2vh 6vw 8vh}
article.lire h2{font-variant:small-caps;letter-spacing:.1em;color:var(--or);
  font-size:22px;font-weight:400;margin:42px 0 10px;padding-bottom:8px;
  border-bottom:1px solid rgba(74,61,44,.7);
  /* ⚠️ le h2 de l'accueil est CENTRE : ici, il doit s'aligner sur son texte */
  text-align:left;white-space:normal}
article.lire h3{color:var(--or-clair);font-size:16px;letter-spacing:.06em;
  font-weight:400;margin:24px 0 6px}
article.lire p{margin:0 0 14px}
article.lire ul{margin:0 0 16px;padding-left:22px}
article.lire li{margin:6px 0}
article.lire strong{color:var(--or-clair);font-weight:400}
article.lire table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:14px}
article.lire th{text-align:left;color:var(--or);font-weight:400;letter-spacing:.08em;
  font-variant:small-caps;border-bottom:1px solid var(--bord);padding:8px 10px}
article.lire td{border-bottom:1px solid rgba(74,61,44,.45);padding:8px 10px;vertical-align:top}
.classe{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start;
  margin:30px 0;padding-top:22px;border-top:1px solid rgba(74,61,44,.5)}
.classe .visuel{aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:1px solid rgba(201,162,39,.45)}
.classe .visuel img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.classe h3{margin-top:0;font-size:19px}
.classe .place{color:var(--or);font-size:13px;font-style:italic;margin:2px 0 8px}
.vote{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 10px}
.vote button{padding:12px 10px;background:rgba(46,36,27,.7);border:1px solid var(--bord);
  color:var(--texte);border-radius:3px;font-family:var(--serif);cursor:pointer;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.vote button:hover:not(:disabled){border-color:var(--or);color:var(--or-clair)}
.vote button:disabled{opacity:.4;cursor:default}
.resultat{color:var(--gris);font-style:italic;min-height:1.5em;margin:0 0 6px}
.pied-page{max-width:820px;margin:0 auto;padding:24px 6vw 60px;
  border-top:1px solid rgba(74,61,44,.5);color:#6f6252;font-size:12px}
.pied-page a{color:var(--gris);text-decoration:none}
.pied-page a:hover{color:var(--or-clair)}
@media(max-width:640px){
  .vote{grid-template-columns:repeat(2,1fr)}
  .classe{grid-template-columns:1fr}
  .classe .visuel{max-width:150px}
}

/* --- la navigation du pied, discrete : *elle sert les gens et les moteurs.* */
.pied-nav{max-width:1180px;margin:0 auto;padding:10px 7vw 22px;display:flex;
  gap:26px;justify-content:center;flex-wrap:wrap;
  border-top:1px solid rgba(74,61,44,.4)}
.pied-nav a{color:var(--gris);text-decoration:none;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase}
.pied-nav a:hover{color:var(--or-clair)}