/* Feuille de style du site de RIFT.
   Autonome : elle ne depend d'aucun fichier du jeu, sauf les deux polices et les images.
   Les couleurs reprennent celles de styles.css pour que le site et le jeu soient le meme
   monde, mais rien n'est importe : le jeu peut changer sans casser le site. */

@font-face{font-family:RiftDisplay;src:url('fonts/Cinzel.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:RiftText;src:url('fonts/Alegreya.ttf') format('truetype');font-weight:400 900;font-display:swap}

:root{
  --ink:#f7f2e8;--muted:#aeb5c9;--gold:#e9c77d;--line:rgba(255,255,255,.12);
  --panel:rgba(18,24,44,.86);--panel2:rgba(25,34,60,.88);
  --sylves:#63c58a;--cendres:#ff795f;--astraux:#79bfff;--faes:#c88bf4;
  --display:RiftDisplay,"Palatino Linotype",Georgia,serif;
  --texte:RiftText,"Palatino Linotype",Georgia,serif;
  --bande:min(1080px,100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--texte);font-size:17px;line-height:1.62;
  background:
    radial-gradient(circle at 14% 12%,rgba(91,104,190,.20),transparent 28%),
    radial-gradient(circle at 84% 20%,rgba(171,95,167,.16),transparent 24%),
    linear-gradient(160deg,#0b1020 0%,#121a31 52%,#10162a 100%) #0c1122;
  overflow-x:hidden;text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(233,199,125,.18);
}
/* Le degrade ne defile pas avec la page, sans `background-attachment:fixed` — que Safari
   iOS repeint a chaque image du defilement, au point de le rendre saccade. */
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 14% 12%,rgba(91,104,190,.20),transparent 28%),
    radial-gradient(circle at 84% 20%,rgba(171,95,167,.16),transparent 24%),
    linear-gradient(160deg,#0b1020 0%,#121a31 52%,#10162a 100%)}
/* height:auto est INDISPENSABLE. Les attributs width et height des balises <img> sont
   des indications de presentation : sans cette ligne, la hauteur ecrite dans le HTML
   l'emporte sur aspect-ratio et les portraits s'affichent etires. Mesure du 21 aout 2026 :
   248 x 799 px au lieu de 248 x 310. Les attributs restent, eux, pour que la page ne
   sursaute pas pendant le chargement. */
img{max-width:100%;display:block;height:auto}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* En-tete et pied, identiques sur les quatre pages */
.barre{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  background:rgba(11,16,32,.86);border-bottom:1px solid var(--line)}
.barre>div{width:var(--bande);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.marque{display:flex;align-items:center;gap:10px;color:var(--ink)}
.marque:hover{text-decoration:none}
.marque img{width:38px;height:38px}
.marque b{font-family:var(--display);font-weight:750;letter-spacing:.2em;font-size:19px}
.menu{display:flex;gap:4px;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none;margin-left:auto;align-items:center}
.menu>a{white-space:nowrap;flex:0 0 auto}
.barre .jouer{white-space:nowrap;flex:0 0 auto}
.menu::-webkit-scrollbar{display:none}
.menu a{font-family:var(--display);font-weight:650;letter-spacing:.08em;font-size:12.5px;
  text-transform:uppercase;color:#cfd6e8;padding:8px 10px;border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.06);text-decoration:none}
.menu a[aria-current=page]{color:var(--gold);background:rgba(233,199,125,.10)}
.jouer{font-family:var(--display);font-weight:750;letter-spacing:.12em;font-size:12.5px;
  text-transform:uppercase;color:#1a1206!important;background:linear-gradient(160deg,#f3d999,#d8ab5c);
  padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 24px rgba(233,199,125,.18)}
.jouer:hover{text-decoration:none;filter:brightness(1.08)}

footer{border-top:1px solid var(--line);margin-top:64px;background:rgba(8,12,24,.55)}
footer>div{width:var(--bande);margin:0 auto;padding:30px 16px 46px;color:var(--muted);font-size:14.5px}
footer nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}

/* Rythme commun */
main{width:var(--bande);margin:0 auto;padding:0 16px}
section{margin:56px 0}
h1,h2,h3{font-family:var(--display);font-weight:650;line-height:1.1;margin:0 0 14px}
h1{font-size:clamp(32px,6.4vw,54px);letter-spacing:-.01em}
h2{font-size:clamp(24px,4.4vw,34px)}
h3{font-size:19px;letter-spacing:.01em}
.sur-titre{font-family:var(--display);font-weight:750;letter-spacing:.18em;text-transform:uppercase;
  font-size:11.5px;color:var(--gold);margin:0 0 10px}
p{margin:0 0 14px;color:#dfe4ef}
p.doux{color:var(--muted)}
.chapeau{font-size:clamp(17px,2.3vw,20px);color:#e7ebf5}

/* Panneaux */
.grille{display:grid;gap:16px}
.grille.deux{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grille.trois{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
/* Les planches n'ont pas toutes le meme rapport : chacune garde sa hauteur propre. */
.grille.hauts-libres{align-items:start}
.carte{border:1px solid var(--line);border-radius:20px;padding:20px;
  background:linear-gradient(150deg,var(--panel2),var(--panel));box-shadow:0 18px 50px rgba(0,0,0,.28)}
.carte p:last-child{margin-bottom:0}
.carte .sigil{font-size:26px;line-height:1;color:var(--gold);margin-bottom:8px}

/* Accueil : la banniere */
/* La banniere sort de la colonne de lecture et occupe toute la largeur de la fenetre.
   body porte overflow-x:hidden, donc la barre de defilement ne cree pas de debordement. */
.banniere{position:relative;margin-inline:calc(50% - 50vw);padding:0;overflow:hidden;
  border-bottom:1px solid var(--line)}
.banniere img.fond{width:100%;height:clamp(280px,52vw,460px);object-fit:cover;object-position:center 42%}
.banniere .voile{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,16,32,.35) 0%,rgba(11,16,32,.10) 40%,rgba(12,17,34,.94) 100%)}
.banniere .dedans{position:absolute;inset:auto 0 0 0;padding:0 16px 26px;text-align:center}
.banniere .dedans>img{width:clamp(96px,17vw,140px);margin:0 auto 8px}
.devise{font-family:var(--display);font-weight:600;letter-spacing:.035em;color:#fff2cf;
  font-size:clamp(19px,4.2vw,30px);margin:0 auto 18px;max-width:660px;line-height:1.16;
  text-shadow:0 2px 18px rgba(6,9,20,.75)}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bouton2{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:12.5px;color:#e9eefb!important;border:1px solid rgba(255,255,255,.24);
  padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.05)}
.bouton2:hover{text-decoration:none;background:rgba(255,255,255,.10)}

/* Les cinq clans */
.clan{border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,var(--panel2),var(--panel));display:flex;flex-direction:column}
.clan>img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%}
.clan .texte{padding:16px 18px 20px;flex:1}
.clan h3{margin-bottom:2px;display:flex;align-items:baseline;gap:9px}
.clan h3 span{font-size:22px;color:var(--teinte,var(--gold))}
.clan .sous{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:10.5px;color:var(--teinte,var(--muted));margin:0 0 10px}
.clan p{font-size:15.5px;margin-bottom:9px}
.clan dl{margin:0;font-size:14.5px;color:var(--muted)}
.clan dt{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:10.5px;color:#cfd6e8;margin-top:8px}
.clan dd{margin:0}

/* Listes de faits, tableaux de combos */
ul.faits{list-style:none;padding:0;margin:0}
ul.faits li{position:relative;padding-left:22px;margin-bottom:10px;color:#dfe4ef}
ul.faits li:before{content:"◆";position:absolute;left:0;top:0;color:var(--gold);font-size:11px;line-height:1.9}
.tableau{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:rgba(12,18,36,.6)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
th{font-family:var(--display);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-size:10.5px;color:var(--gold);white-space:nowrap}
tr:last-child td{border-bottom:0}
td b{color:var(--ink)}

/* Bandeau d'honnetete : ce qui n'est pas encore la */
.avis{border:1px solid rgba(233,199,125,.30);border-left-width:3px;border-radius:14px;
  padding:15px 18px;background:rgba(233,199,125,.06);font-size:15.5px}
.avis b{font-family:var(--display);letter-spacing:.06em;color:var(--gold)}
.avis p:last-child{margin-bottom:0}

/* Journal des nouveautes */
.journal{border-left:1px solid var(--line);padding-left:22px;margin-left:6px}
.entree{position:relative;margin-bottom:34px}
.entree:before{content:"";position:absolute;left:-27px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(233,199,125,.14)}
.entree .date{font-family:var(--display);font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  font-size:11px;color:var(--gold);margin:0 0 4px}
.entree h3{margin-bottom:8px}

/* Editions */
.planche{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(10,15,30,.6)}
.planche img{width:100%}
.planche figcaption{padding:11px 15px;font-family:var(--display);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;font-size:11px;color:var(--muted)}

@media(max-width:620px){
  body{font-size:16.5px}
  .barre>div{padding:8px 12px;gap:7px}
  .marque img{width:34px;height:34px}
  .marque b{font-size:17px}
  /* Cinq entrees ne tiennent pas sur 390 px : elles passaient a la ligne et la barre
     collante du haut mangeait 40 px de plus. Une seule rangee qui glisse au doigt, sans
     barre de defilement visible. Mesure du 21 aout 2026 : 128 px de haut, puis 88. */
  .menu{width:100%;margin-left:0;order:3;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:2px;
    /* Le degrade de droite dit qu'il reste quelque chose a faire glisser. Sans lui, une
       rangee coupee net se lit comme une rangee complete, et la derniere entree n'existe
       pour personne. */
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .menu::-webkit-scrollbar{display:none}
  /* 11 px de haut et de bas : la cible passe de 31 a 41 px, ce qu un pouce atteint sans viser. */
  .menu a{padding:14px 9px;font-size:11.5px;white-space:nowrap;flex:0 0 auto}
  .jouer{margin-left:auto;padding:13px 16px}
  main{padding:0 13px}
  section{margin:42px 0}
  .carte{padding:17px}
  /* Le portrait du clan tient dans moins de hauteur : le visage reste dans le cadre. */
  .clan>img{aspect-ratio:1/1;object-position:center 16%}

  /* AUCUN TABLEAU NE DEFILE LATERALEMENT SUR UN TELEPHONE.
     Mesure du 21 aout 2026 : a 390 px de large, la colonne des combos sortait du cadre et
     la moitie de chaque ligne etait illisible sans faire glisser le tableau. On empile.
     L'en-tete disparait a l'oeil mais reste lu par les lecteurs d'ecran ; les cellules qui
     en avaient besoin portent leur propre libelle dans data-libelle. */
  table{min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  tr{display:block;border-bottom:1px solid rgba(255,255,255,.09)}
  tr:last-child{border-bottom:0}
  td{display:block;border:0;padding:3px 15px}
  td:first-child{padding-top:14px}
  td:last-child{padding-bottom:15px}
  td[data-libelle]:before{content:attr(data-libelle);display:block;font-family:var(--display);
    font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:10px;
    color:var(--gold);margin:3px 0 1px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------------------------------------------------------------------------
   LE TUNNEL — tout ce qui sert a recueillir une adresse.
   Le formulaire revient au bas de chaque page : un visiteur decide rarement au
   premier ecran, et remonter chercher un champ, personne ne le fait.
   --------------------------------------------------------------------------- */
.tunnel{border:1px solid rgba(233,199,125,.28);border-radius:24px;padding:26px 24px 24px;
  background:linear-gradient(150deg,rgba(38,32,58,.92),rgba(16,22,42,.94));
  box-shadow:0 26px 80px rgba(0,0,0,.36)}
.tunnel h2{margin-bottom:8px}
.tunnel .promesses{list-style:none;padding:0;margin:14px 0 20px;display:grid;gap:7px}
.tunnel .promesses li{position:relative;padding-left:24px;color:#e7ebf5;font-size:15.5px}
.tunnel .promesses li:before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:12px}
form.capture .champs{display:flex;gap:9px;flex-wrap:wrap}
.champs>input{flex:1 1 12ch;min-width:0}
.champs>button{flex:0 0 auto;white-space:nowrap}
/* `display:flex` sur une classe l'emporte sur le [hidden] du navigateur : sans cette
   ligne, le champ reste visible apres le depot et laisse croire qu'il faut recommencer.
   Mesure du 21 aout 2026 : `.champs` toujours visible malgre l'attribut pose. */
form.capture .champs[hidden]{display:none}
form.capture input{flex:1 1 220px;min-width:0;padding:13px 15px;border-radius:14px;
  border:1px solid rgba(255,255,255,.20);background:rgba(6,10,22,.72);color:var(--ink);
  font-family:var(--texte);font-size:16px}
form.capture input:focus{outline:2px solid rgba(233,199,125,.55);outline-offset:1px}
form.capture button{font-family:var(--display);font-weight:750;letter-spacing:.11em;
  text-transform:uppercase;font-size:13px;color:#1a1206;cursor:pointer;
  background:linear-gradient(160deg,#f3d999,#d8ab5c);padding:13px 22px;border-radius:14px;
  border:1px solid rgba(255,255,255,.28)}
form.capture button:hover:not(:disabled){filter:brightness(1.08)}
form.capture button:disabled{opacity:.6;cursor:default}
form.capture .etat{min-height:22px;margin:11px 0 0;font-size:15px;color:var(--muted)}
form.capture .etat[data-ton=bon]{color:#9ee7c2}
form.capture .etat[data-ton=mauvais]{color:#ffb0a8}
form.capture .mention{margin:8px 0 0;font-size:13px;color:#8f9ab4;line-height:1.5}

/* Captures du jeu : elles se regardent, elles ne se lisent pas. Cadre discret, pas de
   fond qui ferait croire a une fenetre de plus. */
figure.ecran{margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:#070b16;box-shadow:0 22px 60px rgba(0,0,0,.42)}
figure.ecran>img{width:100%}
/* Une capture de telephone est plus etroite que sa colonne : sans ce cadrage elle laissait
   une bande noire a sa droite, et etiree sur toute la largeur elle devenait une tour de
   1060 px de haut. On la centre et on la borne. */
figure.ecran.portrait{display:flex;flex-direction:column;align-items:center}
figure.ecran.portrait>img{width:auto;max-width:100%;max-height:min(620px,72vh)}
figure.ecran.portrait figcaption{align-self:stretch}
figure.ecran figcaption{padding:11px 16px;font-size:14.5px;color:var(--muted)}
figure.ecran figcaption b{font-family:var(--display);letter-spacing:.06em;color:#dfe4ef}

/* La faction qu'on ne montre pas. Aucun visuel : c'est le sujet. */
.ombre{border:1px dashed rgba(255,255,255,.18);border-radius:20px;padding:26px 22px;
  background:radial-gradient(circle at 50% 0%,rgba(120,96,168,.14),rgba(8,11,22,.9) 70%);
  display:flex;flex-direction:column;justify-content:center;text-align:center}
.ombre .glyphe{font-size:44px;color:rgba(200,180,240,.30);line-height:1;margin-bottom:12px}
.ombre h3{color:#cfd6e8}
.ombre p{color:var(--muted);font-size:15.5px;margin-bottom:0}

/* Les phases d'un tour, numerotees. Trois lignes, dans l'ordre : c'est une sequence, et
   une image ne raconte pas un ordre. */
ol.phases{list-style:none;counter-reset:phase;padding:0;margin:0;display:grid;gap:12px}
ol.phases li{counter-increment:phase;position:relative;padding:15px 18px 15px 62px;
  border:1px solid var(--line);border-radius:16px;background:rgba(16,22,42,.66)}
ol.phases li:before{content:counter(phase);position:absolute;left:18px;top:15px;
  width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(233,199,125,.45);color:var(--gold);font-family:var(--display);
  font-weight:750;font-size:14px}
ol.phases b{font-family:var(--display);letter-spacing:.06em;display:block;margin-bottom:2px}
ol.phases span{color:var(--muted);font-size:15.5px}

.sortie{display:inline-block;font-family:var(--display);font-weight:750;letter-spacing:.16em;
  text-transform:uppercase;font-size:12px;color:#1a1206;background:linear-gradient(160deg,#f3d999,#d8ab5c);
  padding:6px 14px;border-radius:999px;margin-bottom:14px}

@media(max-width:620px){
  .tunnel{padding:22px 18px 20px}
  form.capture button{width:100%}
}

/* ---------------------------------------------------------------------------
   LES CARTES, EN CARTES.
   Une bande d'illustrations decoupee ne dit rien du jeu : c'est la carte entiere
   — cout, rarete, nom, texte, force et vie — qui donne envie de la posseder.
   Aucun `filter`, aucune `opacity`, aucune ombre animee sur ces tuiles : la regle
   vient de l'incident des cartes noires sur WebKit, un calque de composition par
   carte suffit a tout faire tomber.
   --------------------------------------------------------------------------- */
/* Pas de align-items:start : les cartes d une meme rangee doivent avoir la meme hauteur,
   sinon leurs pieds ne s alignent pas et la grille a l air bancale. */
.jeu-de-cartes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.carte-jeu{position:relative;border:1px solid rgba(255,255,255,.14);border-top-color:var(--fc,var(--gold));
  border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(20,27,50,.96),rgba(11,16,32,.98));
  box-shadow:0 16px 44px rgba(0,0,0,.40);display:flex;flex-direction:column}
.carte-jeu .art{position:relative;background:#070b16}
.carte-jeu .art img{width:100%;aspect-ratio:460/409;object-fit:cover}
.carte-jeu .cout{position:absolute;top:9px;left:9px;width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;background:radial-gradient(circle at 34% 28%,#fdf0c8,#c9994a);color:#231703;
  font-family:var(--display);font-weight:750;font-size:16px;border:1px solid rgba(255,255,255,.55)}
.carte-jeu em{display:block;padding:11px 13px 0;font-style:normal;font-family:var(--display);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-size:9.5px;color:var(--fc,var(--muted))}
.carte-jeu h3{margin:3px 13px 5px;font-size:16.5px;letter-spacing:0}
.carte-jeu p{margin:0 13px 13px;font-size:13.5px;line-height:1.45;color:#c3cbdd;flex:1}
.carte-jeu footer{display:flex;justify-content:space-between;padding:9px 13px;
  border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.28)}
.carte-jeu footer b{font-family:var(--display);font-size:14px;font-variant-numeric:tabular-nums;color:#e8edf8}
.carte-jeu.sort footer{justify-content:center}
.carte-jeu.sort footer b{letter-spacing:.14em;font-size:10.5px;color:var(--muted)}
.carte-jeu.doree{border-color:rgba(233,199,125,.62);
  background:linear-gradient(180deg,rgba(52,42,20,.96),rgba(19,15,8,.98));
  box-shadow:0 16px 44px rgba(0,0,0,.40),0 0 0 1px rgba(233,199,125,.22)}
.carte-jeu.doree em{color:var(--gold)}
.carte-jeu.doree footer{background:rgba(233,199,125,.10)}

/* Le carnet — chaque entree est un panneau, pas un paragraphe de plus. */
.entree{border:1px solid var(--line);border-radius:20px;padding:20px 22px 18px;
  background:linear-gradient(150deg,var(--panel2),var(--panel));box-shadow:0 16px 44px rgba(0,0,0,.26)}
.entree:before{left:-33px;top:26px}
.entree .haut{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.entree .date{margin:0}
.entree .jalon{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:9.5px;color:#cfd6e8;border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.entree p:last-child{margin-bottom:0}
.marque-version{margin-top:10px;font-size:13.5px}
.marque-version b{font-family:var(--display);letter-spacing:.08em;color:var(--gold);font-weight:700}

@media(max-width:620px){
  .jeu-de-cartes{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px}
  .carte-jeu h3{font-size:15px}
  .carte-jeu p{font-size:12.5px}
  .journal{padding-left:16px}
  .entree{padding:17px 16px 15px}
  .entree:before{left:-21px}
}

/* ===========================================================================
   L'ACCUEIL — mise en page de vitrine.
   Trois principes : le logo domine, le rythme alterne, et l'inscription reste
   a portee de pouce du debut a la fin.
   =========================================================================== */

/* Le HERO. Hauteur en `svh` et non `vh` : sur iPhone, `vh` compte la barre d'outils
   comme si elle n'existait pas, et le bas du hero passe SOUS elle au premier chargement.
   `svh` mesure la fenetre la plus petite, celle qu'on a vraiment sous les yeux. */
/* margin-block:0 — le hero est un <section> et heritait de ses 56 px de marge, ce qui
   laissait une bande de fond nue entre la barre du haut et l'image. */
.hero{position:relative;margin-inline:calc(50% - 50vw);margin-block:0;overflow:hidden;
  min-height:600px;min-height:min(94svh,940px);display:grid;place-items:end center;
  border-bottom:1px solid var(--line)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%}
.hero .voile{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 78% 58% at 50% 44%,rgba(10,14,28,0),rgba(10,14,28,.50) 72%),
    linear-gradient(180deg,rgba(11,16,32,.50) 0%,rgba(11,16,32,0) 24%,rgba(12,17,34,.86) 76%,#0c1122 100%)}
.hero-dedans{position:relative;width:min(940px,100%);padding:0 20px calc(46px + env(safe-area-inset-bottom));
  text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-logo{width:clamp(168px,26vw,320px);height:auto;margin-bottom:6px;
  filter:drop-shadow(0 18px 46px rgba(0,0,0,.55))}
.hero-kicker{font-family:var(--display);font-weight:750;letter-spacing:.28em;text-transform:uppercase;
  font-size:clamp(10px,1.5vw,12.5px);color:var(--gold);margin:0 0 12px}
.hero h1{font-size:clamp(34px,6.6vw,74px);line-height:.98;letter-spacing:-.015em;margin:0 0 14px;
  color:#fff6e2;text-shadow:0 4px 34px rgba(4,7,16,.8)}
.hero-sous{font-size:clamp(16px,2.1vw,21px);line-height:1.5;color:#e2e8f5;max-width:640px;
  margin:0 auto 26px;text-shadow:0 2px 16px rgba(4,7,16,.7)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.hero-note{margin:0;font-family:var(--display);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  font-size:11px;color:#c2cade;text-shadow:0 2px 12px rgba(4,7,16,.8)}

/* Les boutons de la vitrine. 52 px de haut : c'est la cible qu'un pouce atteint sans viser,
   sur iOS comme sur Android. */
.bouton-or,.bouton-fantome{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;border-radius:999px;font-family:var(--display);font-weight:750;
  letter-spacing:.11em;text-transform:uppercase;font-size:13px;text-decoration:none;
  touch-action:manipulation;transition:transform .18s ease,filter .18s ease}
.bouton-or{color:#1a1206!important;background:linear-gradient(160deg,#f7e2a9,#d5a552);
  border:1px solid rgba(255,255,255,.34);box-shadow:0 14px 38px rgba(214,168,88,.30)}
.bouton-fantome{color:#eef2fb!important;border:1px solid rgba(255,255,255,.34);
  background:rgba(10,14,28,.42);backdrop-filter:blur(6px)}
.bouton-or:hover,.bouton-fantome:hover{text-decoration:none;transform:translateY(-1px);filter:brightness(1.06)}
.bouton-or:active,.bouton-fantome:active{transform:translateY(1px)}

/* Les chiffres, juste sous le hero : ce que le jeu contient, en une ligne. */
.chiffres{margin-inline:calc(50% - 50vw);margin-block:0;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(9,13,26,.86),rgba(13,19,38,.72))}
.chiffres>div{width:var(--bande);margin:0 auto;padding:22px 16px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
.chiffres b{display:block;font-family:var(--display);font-weight:750;color:var(--gold);
  font-size:clamp(26px,4.4vw,42px);line-height:1;font-variant-numeric:tabular-nums}
.chiffres span{display:block;margin-top:5px;font-family:var(--display);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;font-size:10px;color:#aab4cb}

/* Une section pleine largeur, pour casser le rythme de la colonne de lecture. */
.pleine{margin-inline:calc(50% - 50vw);padding:54px 0;
  background:linear-gradient(180deg,rgba(8,12,24,.0),rgba(8,12,24,.62) 22%,rgba(8,12,24,.62) 78%,rgba(8,12,24,0));
  border-block:1px solid rgba(255,255,255,.07)}
.pleine>div{width:var(--bande);margin:0 auto;padding:0 16px}

/* LE BOUTON QUI SUIT. Il n'apparait qu'apres le hero et s'efface des que le formulaire
   est a l'ecran : un bouton qui recouvre le champ qu'il designe est un piege. */
.barre-collante{position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;
  background:rgba(10,14,28,.94);backdrop-filter:blur(14px);
  border-top:1px solid rgba(233,199,125,.26);
  transform:translateY(110%);transition:transform .26s ease;pointer-events:none}
.barre-collante[data-visible]{transform:none;pointer-events:auto}
.barre-collante .dit{flex:1;min-width:0}
.barre-collante b{display:block;font-family:var(--display);font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;font-size:11.5px;color:var(--gold)}
.barre-collante span{display:block;font-size:13.5px;color:#c8d0e2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-collante .bouton-or{min-height:46px;padding:0 20px;font-size:12px;flex:0 0 auto}

@media(max-width:620px){
  .hero{min-height:min(92svh,760px)}
  .hero-dedans{padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  .hero-actions{width:100%;flex-direction:column;gap:10px}
  .hero-actions a{width:100%}
  .chiffres>div{grid-template-columns:repeat(2,1fr);gap:18px 10px;padding:20px 14px}
  .pleine{padding:40px 0}
  .barre-collante span{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .barre-collante{transition:none}
  .bouton-or,.bouton-fantome{transition:none}
}

/* ---------------------------------------------------------------------------
   LES PHASES ET LES COMBOS, COMME DANS LE JEU.
   Une liste a puces ne dit pas qu'un tour est une sequence. Ici chaque phase
   porte la meme pastille numerotee que la colonne du plateau, et la capture
   qui va avec — l'explication situe, l'image prouve.
   --------------------------------------------------------------------------- */
.phases-jeu{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.phase-bloc{border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  box-shadow:0 18px 50px rgba(0,0,0,.30);display:flex;flex-direction:column}
.phase-bloc>img{width:100%;aspect-ratio:390/430;object-fit:cover;object-position:center top;
  border-bottom:1px solid rgba(255,255,255,.08)}
.phase-bloc .dedans{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
/* La pastille du jeu, reproduite : chiffre cercle, libelle en petites capitales espacees. */
.pastille{display:inline-flex;align-items:center;gap:9px;margin-bottom:10px;align-self:flex-start;
  padding:5px 13px 5px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.13);
  background:rgba(8,12,24,.66)}
.pastille i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:var(--fc,var(--gold));color:#1b1305;font-family:var(--display);font-weight:750;font-size:12px}
.pastille b{font-family:var(--display);font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  font-size:10.5px;color:#dfe6f5}
.phase-bloc h3{margin-bottom:6px}
.phase-bloc p{font-size:15px;margin-bottom:0;flex:1}

/* Le combo, presente comme la banniere qui l'annonce en pleine partie. */
.combos-jeu{display:grid;gap:14px}
.combo-jeu{position:relative;border:1px solid rgba(255,255,255,.13);border-left:3px solid var(--fc,var(--gold));
  border-radius:16px;padding:16px 18px;background:
    radial-gradient(ellipse 70% 120% at 0% 50%,color-mix(in srgb,var(--fc,#e9c77d) 14%,transparent),transparent 70%),
    linear-gradient(150deg,rgba(25,33,58,.92),rgba(13,18,36,.95))}
.combo-jeu .clan{margin:0 0 3px;font-family:var(--display);font-weight:750;letter-spacing:.14em;
  text-transform:uppercase;font-size:9.5px;color:var(--fc,var(--muted))}
.combo-jeu h3{margin:0 0 8px;font-size:clamp(19px,2.6vw,24px);color:#fff3d6;letter-spacing:.02em}
.combo-jeu .recette{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.combo-jeu .recette em{font-style:normal;font-family:var(--display);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;font-size:10.5px;color:#e8edf8;
  border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:4px 11px;background:rgba(255,255,255,.05)}
.combo-jeu .recette span{color:var(--gold);font-family:var(--display);font-weight:750;font-size:13px}
.combo-jeu .effet{margin:0;font-size:15px;color:#cfd7e8}

@media(max-width:620px){
  .phase-bloc>img{aspect-ratio:390/300}
  .combo-jeu{padding:14px 15px}
}

/* ---------------------------------------------------------------------------
   LE FACE-A-FACE. Ce qui separe RIFT des grands jeux de cartes, ligne par ligne.
   La colonne de droite est mise en avant : c'est celle qu'on veut faire lire.
   Aucun concurrent n'est nomme — on compare des mecaniques, pas des marques.
   --------------------------------------------------------------------------- */
.face-a-face table{min-width:640px}
.face-a-face th:last-child,.face-a-face td:last-child{background:rgba(233,199,125,.07);
  border-left:1px solid rgba(233,199,125,.22)}
.face-a-face th:last-child{color:var(--gold)}
.face-a-face td:last-child{color:#f4eeda}
.face-a-face td:first-child{font-family:var(--display);font-weight:700;letter-spacing:.05em;
  color:#e8edf8;white-space:nowrap}
.face-a-face td:nth-child(2){color:#98a2ba}
@media(max-width:620px){
  .face-a-face table{min-width:0}
  .face-a-face td:last-child{border-left:0;border-radius:0 0 10px 10px}
  .face-a-face td:first-child{white-space:normal;font-size:17px;color:var(--gold)}
}

/* ---------------------------------------------------------------------------
   LES GENERAUX. Chaque porte de la campagne a un visage et un nom : c'est ce
   qu'aucun des grands jeux de cartes n'offre en solo, et ca se montre.
   --------------------------------------------------------------------------- */
.generaux{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.general{position:relative;border:1px solid var(--line);border-top-color:var(--fc,var(--gold));
  border-radius:18px;overflow:hidden;background:#070b16;box-shadow:0 16px 44px rgba(0,0,0,.34)}
.general>img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center 14%}
.general .plaque{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 13px;
  background:linear-gradient(180deg,rgba(6,9,18,0),rgba(6,9,18,.92) 55%,rgba(6,9,18,.98))}
.general .rang{display:block;font-family:var(--display);font-weight:750;letter-spacing:.16em;
  text-transform:uppercase;font-size:9px;color:var(--fc,var(--gold));margin-bottom:2px}
.general b{display:block;font-family:var(--display);font-weight:650;font-size:15px;color:#fff3d8;line-height:1.15}
@media(max-width:620px){
  .generaux{grid-template-columns:repeat(2,1fr);gap:11px}
  .general b{font-size:13.5px}
}

/* ---------------------------------------------------------------------------
   LE CODEX. Des entrees de monde, pas des fiches de regles : ce qu'on sait,
   ce qu'on rapporte, et ce qui reste scelle.
   --------------------------------------------------------------------------- */
.entree-codex{border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(150deg,var(--panel2),var(--panel));box-shadow:0 18px 50px rgba(0,0,0,.28);
  display:grid;grid-template-columns:minmax(0,240px) 1fr;margin-bottom:18px}
.entree-codex>img{width:100%;height:100%;object-fit:cover;object-position:center 18%;
  border-right:1px solid rgba(255,255,255,.08)}
.entree-codex .corps{padding:22px 24px 24px;min-width:0}
.entree-codex .blason{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.entree-codex .blason span{font-size:24px;color:var(--fc,var(--gold));line-height:1}
.entree-codex h3{margin:0;font-size:clamp(21px,2.8vw,27px)}
.entree-codex .devise-clan{font-family:var(--display);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;font-size:10px;color:var(--fc,var(--muted));margin:2px 0 14px}
.entree-codex blockquote{margin:0 0 14px;padding-left:15px;border-left:2px solid var(--fc,var(--gold));
  font-size:16px;line-height:1.5;color:#e8eefb;font-style:italic}
.entree-codex blockquote cite{display:block;margin-top:5px;font-style:normal;font-family:var(--display);
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:9.5px;color:var(--muted)}
.entree-codex p{font-size:15.5px}
.portes{list-style:none;padding:0;margin:12px 0 0;display:flex;gap:7px;flex-wrap:wrap}
.portes li{font-family:var(--display);font-weight:700;letter-spacing:.05em;font-size:12px;color:#dbe2f2;
  border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:5px 12px;background:rgba(255,255,255,.04)}
.portes li b{color:var(--fc,var(--gold));font-weight:750;margin-right:5px}
.scelle{border-style:dashed;grid-template-columns:1fr;
  background:radial-gradient(circle at 50% 0%,rgba(120,96,168,.13),rgba(8,11,22,.92) 70%)}
.scelle .corps{text-align:center;padding:34px 24px}
.scelle .glyphe{font-size:42px;color:rgba(200,180,240,.28);line-height:1;margin-bottom:10px}
@media(max-width:1024px){
  .entree-codex{grid-template-columns:1fr}
  .entree-codex>img{aspect-ratio:16/9;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .entree-codex .corps{padding:18px 17px 20px}
}

/* ---------------------------------------------------------------------------
   LA NARRATION. Les premiers mots de chaque royaume, tels qu'ils sont dits dans
   le jeu. On ne resume pas une histoire pour donner envie de la lire : on en
   donne le debut, et on s'arrete.
   --------------------------------------------------------------------------- */
/* Deux colonnes, pas trois : quatre recits sur trois colonnes laissent le quatrieme seul
   sur sa ligne, et une citation isolee a l'air d'un oubli. */
.recits{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.recit{position:relative;border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%,color-mix(in srgb,var(--fc,#e9c77d) 12%,transparent),transparent 68%),
    linear-gradient(155deg,rgba(23,31,55,.94),rgba(12,17,34,.96))}
.recit .royaume{margin:0 0 10px;font-family:var(--display);font-weight:750;letter-spacing:.16em;
  text-transform:uppercase;font-size:10px;color:var(--fc,var(--gold))}
.recit .dit{margin:0 0 12px;font-family:var(--texte);font-size:clamp(17px,2.2vw,19.5px);line-height:1.45;
  color:#f2ead9}
.recit .dit:before{content:"«";margin-right:5px;color:var(--fc,var(--gold))}
.recit .dit:after{content:"»";margin-left:5px;color:var(--fc,var(--gold))}
.recit .suite{margin:0;font-size:14px;color:var(--muted)}

/* La Faille comme personnage : deux images cote a cote, la meme chose vue de deux facons. */
.deux-visages{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}
@media(max-width:1024px){.deux-visages{grid-template-columns:1fr}}

/* Les deux visages du jeu, des la premiere section : la 3D est l'accroche, elle ne peut
   pas attendre le milieu de la page. Elle passe devant, le plateau a plat juste apres —
   c'est l'ordre du regard, pas l'ordre d'importance. */
.deux-plateaux{display:grid;gap:14px;margin-top:20px}
.deux-plateaux figure{margin:0}
@media(min-width:900px){
  .deux-plateaux{grid-template-columns:1.28fr 1fr;align-items:start}
}
.etiquette-mode{position:absolute;top:11px;left:11px;z-index:2;
  font-family:var(--display);font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  font-size:10.5px;color:#1a1206;background:linear-gradient(160deg,#f7e2a9,#d5a552);
  padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.34)}
.etiquette-mode.plat{color:#eef2fb;background:rgba(12,17,34,.86);border-color:rgba(255,255,255,.28)}
figure.ecran{position:relative}

/* ---------------------------------------------------------------------------
   LA FAILLE VEILLE.
   Le meme eclat que sur le plateau — un carre de 34 px tourne de 45 degres,
   degrade conique, bord dore, et les deux animations du jeu : `riftCore` qui
   fait le demi-tour, `riftFloat` qui la fait respirer. Les valeurs viennent de
   `styles.css`, relevees et non devinees, pour que ce soit LA MEME chose.

   Elle ne clique pas et ne se lit pas : `pointer-events:none` et masquee aux
   lecteurs d'ecran. Un clin d'oeil qui intercepterait un appui sur le bouton
   d'inscription serait un piege, pas un clin d'oeil.
   --------------------------------------------------------------------------- */
.faille-veille{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:30;pointer-events:none;display:grid;place-items:center;
  width:64px;height:64px;animation:failleFlotte 5.6s ease-in-out infinite}
.faille-veille i{width:30px;height:30px;transform:rotate(45deg);border:2px solid #f5dc9d;
  background:conic-gradient(from 30deg,var(--faes),#fff,var(--sylves),#fff,var(--faes));
  box-shadow:0 0 12px #fff,0 0 35px color-mix(in srgb,var(--sylves) 55%,var(--faes));
  animation:failleCoeur 2.8s ease-in-out infinite}
/* Le halo qui la detache du fond, quelle que soit la section sous elle. */
.faille-veille:before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(150,190,255,.22),transparent 68%)}
@keyframes failleCoeur{50%{transform:rotate(225deg) scale(1.13);filter:brightness(1.4);
  box-shadow:0 0 18px #fff,0 0 48px color-mix(in srgb,var(--sylves) 55%,var(--faes))}}
@keyframes failleFlotte{50%{transform:translateY(-6px)}}

/* Elle monte au-dessus de la barre d'inscription quand celle-ci apparait. */
.barre-collante[data-visible] ~ .faille-veille{bottom:calc(80px + env(safe-area-inset-bottom))}
@media(max-width:620px){
  .faille-veille{width:54px;height:54px;right:12px}
  .faille-veille i{width:25px;height:25px}
  .barre-collante[data-visible] ~ .faille-veille{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .faille-veille,.faille-veille i{animation:none}
}

/* ---------------------------------------------------------------------------
   LES ARTICLES. Du texte long, lu par des humains et par les moteurs.
   Une colonne etroite : au-dela de 70 caracteres par ligne, l'oeil perd la
   ligne suivante en revenant a la marge.
   --------------------------------------------------------------------------- */
.article{width:min(720px,100%);margin:0 auto}
.article h2{margin-top:38px}
.article h3{margin-top:26px;color:var(--gold)}
.article p{font-size:17.5px;line-height:1.72}
.article .exergue{margin:26px 0;padding:18px 22px;border-left:3px solid var(--gold);
  background:rgba(233,199,125,.06);border-radius:0 14px 14px 0;font-size:18.5px;line-height:1.5;
  color:#f3ecdb}
.article .exergue p{margin:0;font-size:inherit;line-height:inherit}
.article figure.ecran{margin:26px 0}
.signature{display:flex;align-items:center;gap:12px;margin:30px 0 0;padding-top:20px;
  border-top:1px solid var(--line);color:var(--muted);font-size:14.5px}
.signature b{font-family:var(--display);letter-spacing:.06em;color:#dfe4ef;font-weight:700}
.fiche-article{display:block;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,var(--panel2),var(--panel));color:inherit}
.fiche-article:hover{text-decoration:none;border-color:rgba(233,199,125,.34)}
.fiche-article img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fiche-article .dedans{padding:16px 18px 18px}
.fiche-article .quand{font-family:var(--display);font-weight:750;letter-spacing:.14em;
  text-transform:uppercase;font-size:9.5px;color:var(--gold);margin:0 0 4px}
.fiche-article h3{margin:0 0 6px;font-size:18px}
.fiche-article p{margin:0;font-size:14.5px;color:var(--muted)}

/* ---------------------------------------------------------------------------
   LE MENU BURGER, SANS UNE LIGNE DE JAVASCRIPT.

   PREMIERE TENTATIVE, ABANDONNEE : un <details> natif. Elegant sur le papier, faux
   en pratique — un <details> FERME cache son contenu quoi qu'on lui dise en CSS, et
   `display:contents` n'y change rien. Resultat : le menu avait disparu sur ordinateur.
   Mes deux verificateurs n'ont rien vu, l'un lisant le TEXTE des liens et l'autre ne
   cherchant que les debordements. C'est une capture d'ecran qui l'a montre.

   Ce qui suit est une case a cocher masquee, pilotee par son <label>. Aucun script,
   et surtout : c'est NOTRE CSS qui decide de tout ce qui s'affiche, a chaque largeur.
   --------------------------------------------------------------------------- */
/* Masquee a l'oeil mais TOUJOURS RENDUE : une case en `display:none` ne recoit plus le
   clic de son label — le burger ne s'ouvrait pas. Et elle doit rester focalisable pour
   qu'on puisse ouvrir le menu au clavier. */
.bascule-menu{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.bouton-menu{display:none}

@media(max-width:1024px){
  /* ⚠ LE BURGER PORTE SON NOM, ET CE N'EST PAS DE L'ORNEMENT.
     « Melanie n'a meme pas vu le menu burger » — 24 aout 2026. Trois traits gris
     sans un mot, poses juste a cote d'un gros bouton dore qui prend tout l'oeil :
     il n'y avait litteralement rien a voir pour qui ne connait pas le code.
     Mesure du meme jour : sur un telephone, le premier ecran de l'accueil
     n'offrait AUCUNE destination lisible — deux boutons d'action, et c'est tout.
     Le mot coute 9 px de haut et rend le menu visible. */
  .bouton-menu{display:grid;place-items:center;gap:3px;width:52px;height:48px;cursor:pointer;
    margin-left:auto;order:2;border:1px solid rgba(233,199,125,.34);border-radius:13px;
    background:rgba(233,199,125,.07);-webkit-tap-highlight-color:transparent}
  .bouton-menu i{font-style:normal;font-family:var(--display);font-weight:750;
    letter-spacing:.1em;font-size:8.5px;color:var(--gold);line-height:1}
  /* Ouvert, les traits deviennent une croix : le mot dirait le contraire de ce
     que fait le bouton. */
  .bascule-menu:checked ~ .bouton-menu i{visibility:hidden}
  /* Les trois barres, dessinees : deux en pseudo-elements, une en <span>. */
  .bouton-menu span,.bouton-menu span:before,.bouton-menu span:after{
    content:"";display:block;width:19px;height:2px;border-radius:2px;background:var(--gold)}
  .bouton-menu span{margin-top:4px}
  .bouton-menu span{position:relative}
  .bouton-menu span:before{position:absolute;top:-6px}
  .bouton-menu span:after{position:absolute;top:6px}
  /* Ouvert : la croix, pour qu'on sache comment refermer. */
  .bascule-menu:checked ~ .bouton-menu span{background:transparent}
  .bascule-menu:checked ~ .bouton-menu span:before{top:0;transform:rotate(45deg)}
  .bascule-menu:checked ~ .bouton-menu span:after{top:0;transform:rotate(-45deg)}
  /* Le clavier doit voir ou il est : la case est masquee, c'est le bouton qui s'entoure. */
  .bascule-menu:focus-visible ~ .bouton-menu{outline:2px solid var(--gold);outline-offset:2px}

  .menu{display:none}
  .bascule-menu:checked ~ .menu{position:absolute;left:0;right:0;top:100%;z-index:25;
    display:block;width:auto;margin:0;padding:6px 10px 12px;overflow:visible;
    background:rgba(10,14,28,.97);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(233,199,125,.24);box-shadow:0 22px 50px rgba(0,0,0,.5);
    -webkit-mask-image:none;mask-image:none}
  .bascule-menu:checked ~ .menu a{display:block;width:auto;padding:15px 12px;font-size:13px;
    border-bottom:1px solid rgba(255,255,255,.07);border-radius:0}
  .bascule-menu:checked ~ .menu a:last-child{border-bottom:0}
  .barre>div{position:relative;flex-wrap:nowrap}
  .marque{flex:0 0 auto}
  .jouer{margin-left:0;order:3}
}
@media(max-width:400px){
  .jouer{padding:13px 12px;font-size:11.5px}
  .marque b{font-size:15px}
}
/* ⚠ SOUS 380 px, LE MOT « RIFT » S'EFFACE ET LE LOGO RESTE.
   La barre debordait deja a 320 px AVANT le mot « MENU » (mesure : elle finissait
   a 341 pour 320 de large) ; le mot l'aurait poussee a 353. On ne deplace pas le
   seuil, on retire le mode de defaillance — c'est la lecon du 24 aout, deux fois
   dans la meme journee.
   Le nom pese 55 px a cote d'un logo qui porte deja l'identite, et le lien reste
   entierement cliquable. Le menu, lui, ne peut pas ceder : c'est justement ce que
   personne ne trouvait. */
@media(max-width:380px){
  .marque b{display:none}
}

/* LE MOT QUE LA FAILLE TIRE A ELLE.
   C'est une COPIE flottante : le mot d'origine reste en place, intact. Elle part en
   accelerant — la courbe est une entree franche, pas un aller-retour doux : on doit
   sentir la traction. Rien ici n'intercepte un clic. */
/* CE QUI PART, C'EST L'AME DU MOT — PAS LE MOT. 24 aout 2026.
   Son retour : « la Faille qui aspire les mots c'est rigolo, mais ca empeche la
   lecture. Est-ce qu'au lieu de ca on pourrait aspirer l'ame des mots en bleu
   translucide, et les mots restent mais grises ou malades, sans empecher la
   lecture ? »
   Il a raison, et le defaut etait dans l'intention meme : le mot d'origine
   devenait TRANSPARENT, donc la page se creusait de trous sous les yeux de qui
   lisait. Un effet de decor n'a pas le droit de couter une phrase.
   La copie qui s'envole n'est donc plus un mot dore : c'est une ame, bleue et
   translucide. On la voit partir sans jamais la confondre avec du texte. */
.mot-happe{position:fixed;z-index:29;pointer-events:none;white-space:nowrap;
  color:rgba(150,205,255,.62);
  text-shadow:0 0 12px rgba(120,190,255,.85),0 0 30px rgba(90,150,255,.5);
  transform-origin:center;opacity:.9;will-change:transform,opacity;
  transition:transform 1.1s cubic-bezier(.42,0,.72,.12),opacity 1.1s cubic-bezier(.6,0,.9,.3)}
/* L'eclat quand elle avale : bref, sinon ca devient un clignotant. */
.faille-veille.avale i{animation:failleAvale .62s ease-out}
@keyframes failleAvale{
  0%{transform:rotate(45deg) scale(1)}
  32%{transform:rotate(135deg) scale(1.55);filter:brightness(2.1);
      box-shadow:0 0 26px #fff,0 0 74px color-mix(in srgb,var(--sylves) 60%,var(--faes))}
  100%{transform:rotate(225deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){.mot-happe{display:none}.faille-veille.avale i{animation:none}}

/* LE TROU LAISSE PAR LE MOT.
   `opacity` et non `display:none` ni une suppression : la place reste occupee au pixel
   pres, donc la ligne ne se reorganise pas et aucun autre mot ne bouge. Un texte qui
   sauterait a chaque mot aspire serait illisible — et l'effet detruirait ce qu'il decore. */
/* LE MOT RESTE, ET IL RESTE LISIBLE. Il ne s'efface plus : il perd sa couleur et
   son contraste, comme s'il avait ete vide de quelque chose. « Grise ou malade,
   mais ils n'empechent pas la lecture. »
   ⚠ 0,70 D'OPACITE, ET LE CHIFFRE VIENT DE LA MESURE DES PIXELS PEINTS.
   `getComputedStyle().color` annonce 11,5:1 de contraste — il ignore l'`opacity`
   du parent. En photographiant chaque mot et en comparant ce qui est REELLEMENT
   peint : 0,52 laissait « Faille » a 3,74:1, sous la norme de lisibilite, et
   0,62 passait de justesse a 4,67. A 0,70 le pire mot tient a 5,99:1, et le mot
   reste tres visiblement affaibli.
   Le seuil est pose au LARGE de la mesure et non au bord : ce projet s'est deja
   fait prendre cinq fois par un seuil pose a la limite. */
.mot-vide{transition:opacity .5s ease-out,filter .5s ease-out}
.mot-vide.parti{opacity:.7;filter:grayscale(1)}

/* L'ONDE. Tous les cinq mots, la Faille deborde : un anneau part d'elle et se dissout. */
.faille-veille:after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;
  margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;opacity:0;
  border:2px solid rgba(245,220,157,.9);
  box-shadow:0 0 24px rgba(150,190,255,.6),inset 0 0 18px rgba(245,220,157,.5)}
.faille-veille.eclat:after{animation:failleOnde 1s cubic-bezier(.15,.7,.3,1)}
.faille-veille.eclat i{animation:failleAvale .9s ease-out}
@keyframes failleOnde{
  0%{opacity:.95;transform:scale(.4)}
  70%{opacity:.35}
  100%{opacity:0;transform:scale(4.6)}
}
@media(prefers-reduced-motion:reduce){
  .mot-vide,.mot-vide.parti{opacity:1;transition:none}
  .faille-veille.eclat:after{animation:none}
}

/* ================================================================
   LE FILM SUR L'ACCUEIL (chantier 23, 22 aout 2026)

   POURQUOI preload="none" ET PAS "metadata" : le film court pese 3,6 Mo. Meme
   `metadata` fait ouvrir une connexion et tirer l'entete du fichier a chaque
   visite, pour une video que la plupart des gens ne lanceront pas. L'image
   d'attente pese 83 Ko et dit deja tout. Rien ne part avant le clic.

   POURQUOI UN BOUTON PAR-DESSUS ALORS QUE `controls` EST DEJA LA : les controles
   natifs sont petits, gris, et ne disent pas ce qu'on va voir. Le bouton annonce
   la duree et l'absence de son AVANT le clic, ce qu'aucun controle natif ne fait.
   Il disparait des la premiere lecture et laisse la main aux vrais controles. */
figure.ecran.film{background:#070b16}
/* LE CADRE, ET POURQUOI IL EXISTE. Le bouton est pose en inset:0. Tant que son parent
   etait la <figure> entiere, il couvrait AUSSI la legende : sur telephone, la plaque du
   libelle debordait par-dessus le texte du figcaption, et sur ordinateur le bouton etait
   centre trop bas, parce que la hauteur de la legende comptait dans son centrage.
   Le cadre borne le bouton a la seule image. */
figure.ecran.film .film-cadre{position:relative;display:block;font-size:0}
figure.ecran.film video{width:100%;display:block;height:auto;background:#070b16}

.film-jouer{
  position:absolute;inset:0;width:100%;border:0;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  font-family:var(--display);font-weight:750;letter-spacing:.12em;text-transform:uppercase;
  font-size:clamp(12px,1.7vw,14.5px);color:#f7f2e8;
  background:linear-gradient(180deg,rgba(7,11,22,0) 38%,rgba(7,11,22,.55) 100%);
  transition:background .25s ease;
}
.film-jouer:hover{background:linear-gradient(180deg,rgba(7,11,22,.12) 38%,rgba(7,11,22,.66) 100%)}
/* LE LIBELLE PORTE SON PROPRE VOILE, ET IL LE FAUT.
   Sur telephone, la capture du 22 aout le montrait a cheval sur les trois cartes du
   clan : lettres claires sur illustrations claires, plus rien de lisible. Un degrade
   pose sur toute la vignette ne peut pas resoudre ca, parce qu'il assombrit aussi
   l'illustration qu'on est venu montrer. Le voile suit donc le texte, et lui seul.
   Pas de .rift-panneau ici : ce composant est opaque et borde d'or, il ferait un
   encadre DANS l'image. La meme main, pas le meme objet. */
.film-titre{display:block;font-weight:750}
.film-dit{display:block;max-width:min(92%,30ch);text-align:center;
  padding:10px 18px 12px;border-radius:12px;
  background:rgba(6,10,20,.72);backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.10);
  text-shadow:0 1px 3px rgba(0,0,0,.85)}
.film-jouer small{display:block;margin-top:6px;font-family:var(--texte);font-weight:400;
  letter-spacing:.06em;text-transform:none;font-size:13.5px;color:#c9d1e4}
/* Le disque et son triangle sont dessines, pas charges : une image de plus pour une
   fleche de lecture serait une requete pour rien. */
.film-triangle{
  width:clamp(58px,7vw,78px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.34);
  background:radial-gradient(circle at 50% 34%,rgba(247,226,169,.30),rgba(12,17,34,.72) 68%);
  box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 30px rgba(233,199,125,.20);
  display:grid;place-items:center;transition:transform .25s ease,box-shadow .25s ease;
}
.film-triangle:after{content:"";border-style:solid;
  border-width:.62em 0 .62em 1.02em;border-color:transparent transparent transparent var(--gold);
  font-size:clamp(15px,1.9vw,19px);margin-left:.22em}
.film-jouer:hover .film-triangle{transform:scale(1.07);box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 44px rgba(233,199,125,.34)}
.film-jouer[hidden]{display:none}


@media(prefers-reduced-motion:reduce){
  .film-jouer,.film-triangle{transition:none}
  .film-jouer:hover .film-triangle{transform:none}
}

/* SUR TELEPHONE, LE LIBELLE CEDE LA PLACE A L'IMAGE.
   Mesure du 22 aout : a 390 px de large, la vignette ne fait que 204 px de haut. Le
   libelle sur deux lignes plus sa duree y couvraient le nom du clan ET ses trois
   cartes, c'est-a-dire tout ce qu'on est venu montrer. Le disque de lecture, lui, se
   comprend sans un mot.
   Le titre n'est pas SUPPRIME mais rendu invisible a l'oeil seulement : il reste le nom
   du bouton pour un lecteur d'ecran, et la duree, plus courte, reste peinte. */
@media(max-width:640px){
  .film-titre{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  /* Le disque reste au centre, la duree descend dans le bas de l'image.
     Au centre elle couvrait la carte du milieu — exactement ce qu'on venait de
     corriger dans le montage en remontant la bande de cartes. */
  .film-dit{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);
    padding:7px 14px 8px;white-space:nowrap}
  .film-jouer small{margin-top:0}
}

/* LA BARRE COLLANTE MANGEAIT LE HAUT DE CHAQUE ANCRE.
   Constate le 22 aout en ouvrant /site/index.html#film : le titre de la section
   arrivait DERRIERE l'en-tete, et on croyait tomber au milieu du contenu. Vaut pour
   toutes les ancres du site, pas seulement celle du film : #le-jeu, #modes, #royaumes
   et #inscription avaient le meme defaut depuis toujours.
   La valeur est prise au large de la barre (mesuree a ~58 px), pas a ras. */
:target{scroll-margin-top:88px}

/* LE 9:16 SUR TELEPHONE.
   film.js pose lui-meme aspect-ratio sur la balise quand il change de source :
   sans ca, les attributs width/height du HTML (1920 x 1080) reserveraient une
   boite en 16:9 pour une video verticale, et la page sauterait au chargement.
   La borne de hauteur evite qu'un 9:16 plein cadre pousse la legende et le
   bouton du trailer sous la ligne de flottaison. */
figure.ecran.film video{max-height:min(78vh,760px);margin:0 auto;object-fit:contain}

/* LES ENCADRES PRENNENT LE PANNEAU DU KIT (chantier 14, 23 aout 2026).
   `.rift-panneau` apporte le trait dore, le lisere sombre en creux et le degrade
   — la meme main que les cartouches. `.tunnel` garde ce qui lui est propre et que
   le kit ne connait pas : le rayon de 24 px, la respiration interieure, et la
   liste a puces en sigils. On ne remplace pas un composant par l'autre, on les
   superpose : le kit donne la matiere, `.tunnel` donne la forme. */
.tunnel.rift-panneau{border-radius:24px;padding:26px 24px 24px}

/* ─── LES CARTES SE RETOURNENT EN CASCADE (chantier 16, 23 août 2026) ──────────
   « Comme pour les boosters : elles apparaissent de dos et se tournent toutes en
   cascade. »

   POURQUOI PAS UN VRAI FLIP EN preserve-3d. La technique classique demande
   `transform-style:preserve-3d` sur la carte et `backface-visibility:hidden` sur
   son contenu. Or `.carte-jeu` est un conteneur flex avec sept enfants : il
   faudrait envelopper tout son contenu dans une face, donc RÉÉCRIRE le HTML des
   sept cartes. Ici le dos est un pseudo-élément opaque qui couvre la carte, et
   qui disparaît AU MOMENT OÙ ELLE EST DE PROFIL — à 50 % de la rotation, quand
   il n'y a rien à voir. Le résultat est le même à l'œil, sans toucher au balisage.

   AMÉLIORATION PROGRESSIVE. Rien de tout ceci ne s'applique sans JavaScript :
   c'est `cartes.js` qui pose `.a-retourner` sur la grille. Sans lui, les cartes
   sont simplement là, face visible — jamais un dos qui ne se retourne pas. */
.jeu-de-cartes.a-retourner,.apercu-cartes.a-retourner{perspective:1400px}

.jeu-de-cartes.a-retourner .carte-jeu,
.apercu-cartes.a-retourner .carte-menue{
  transform:rotateY(180deg);
  animation:carteSeRetourne .72s cubic-bezier(.22,.68,.3,1) forwards;
  animation-delay:var(--retard,0s);
}
/* Le dos. `inset:-1px` couvre la bordure de la carte, sinon un liseré clair
   dépasse pendant toute la rotation et trahit le procédé. */
.jeu-de-cartes.a-retourner .carte-jeu:after,
.apercu-cartes.a-retourner .carte-menue:after{
  content:"";position:absolute;inset:-1px;z-index:3;border-radius:19px;
  background:#070b16 url(/site/img/dos-de-carte.webp) center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(233,199,125,.22);
  animation:dosSeCache .72s linear forwards;
  animation-delay:var(--retard,0s);
}
@keyframes carteSeRetourne{to{transform:rotateY(0deg)}}
/* Il disparaît d'un coup à mi-course : la carte y est de profil, donc invisible.
   Un fondu progressif laisserait voir le dos ET la face en même temps. */
@keyframes dosSeCache{0%,49.9%{opacity:1}50%,100%{opacity:0}}

/* La cascade s'arrête là où elle devient de l'attente : au-delà d'une seconde,
   le visiteur croit que la page est bloquée. */
@media(prefers-reduced-motion:reduce){
  .jeu-de-cartes.a-retourner .carte-jeu,.apercu-cartes.a-retourner .carte-menue{transform:none;animation:none}
  .jeu-de-cartes.a-retourner .carte-jeu:after,.apercu-cartes.a-retourner .carte-menue:after{display:none}
}


/* LES QUATRE SOUVERAINS A TABLE.
   Les illustrations sont DETOUREES : pas de cadre, pas de fond de vignette —
   elles se posent directement sur la nuit de la page, et c'est tout l'interet.
   `minmax(0,1fr)` parce qu'une colonne de grille prend pour minimum la taille de
   son contenu : sans lui, une illustration large repousserait ses voisines hors
   de la page. Ce projet s'est fait prendre deux fois par ce defaut le 22 aout. */
.souverains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.souverains figure{margin:0}
.souverains img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:10px;border:1px solid rgba(201,169,97,.22)}
.souverains figcaption{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--gris);text-align:center}
.souverains figcaption b{display:block;font-size:14px;letter-spacing:.04em}
/* LE BOUTON DE PLEIN ECRAN, sous le film. Il est pose SOUS le lecteur et non
   par-dessus : une commande flottante sur une video masque toujours quelque
   chose, et celle-ci doit rester visible quand la video joue. */
.film-outils{margin:12px 0 0;display:flex;justify-content:center}
.film-grand{font-size:12px}
.film-grand[hidden]{display:none}

/* COMMENT ON JOUE — 24 aout 2026, sur le retour d'un joueur : « j'ai pas compris
   comment ca se joue ». Le site montrait des cartes, des royaumes et deux films,
   et jamais UN TOUR DEROULE. C'est le manque qu'un specialiste voit en premier. */
.chiffres-jeu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.chiffres-jeu div{border:1px solid var(--line);border-radius:16px;padding:20px 18px;text-align:center;
  background:linear-gradient(155deg,rgba(23,31,55,.9),rgba(12,17,34,.94))}
.chiffres-jeu b{display:block;font-family:var(--display);font-weight:750;font-size:42px;
  color:var(--gold);line-height:1}
.chiffres-jeu span{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:var(--gris)}
@media(max-width:640px){.chiffres-jeu{grid-template-columns:1fr}}

/* LES TROIS PHASES. Le numero est le sujet, pas l'ornement : une belle mise en
   page ne dit toujours pas dans quel ordre viennent les phases — c'est la regle
   du 21 aout, et elle tient ici comme dans le grimoire. */
.tour-en-trois-temps{list-style:none;counter-reset:phase;margin:22px 0 0;padding:0;display:grid;gap:14px}
.tour-en-trois-temps li{counter-increment:phase;position:relative;border:1px solid var(--line);
  border-radius:16px;padding:20px 22px 20px 74px;
  background:linear-gradient(155deg,rgba(23,31,55,.9),rgba(12,17,34,.94))}
.tour-en-trois-temps li:before{content:counter(phase);position:absolute;left:22px;top:19px;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(233,199,125,.45);color:var(--gold);
  font-family:var(--display);font-weight:750;font-size:17px}
/* ⚠ LE `>` N'EST PAS DE LA COQUETTERIE. Sans lui, la regle prenait TOUS les
   `<b>` du bloc — y compris ceux qui sont DANS les phrases — et les sortait du
   texte en titres de 19 px : « ames », « six au maximum », « quand », « qui »
   devenaient des lignes a eux seuls, et le paragraphe se lisait en escalier.
   Le titre d'une phase est l'enfant DIRECT de son `li`, jamais un mot souligne. */
.tour-en-trois-temps > li > b{display:block;font-family:var(--display);font-weight:750;
  letter-spacing:.06em;font-size:19px;color:var(--ink);margin-bottom:6px}
.tour-en-trois-temps p{margin:0;font-size:15px;line-height:1.6}
@media(max-width:520px){
  .tour-en-trois-temps li{padding:56px 18px 18px}
  .tour-en-trois-temps li:before{top:16px;left:18px}
}

/* LES SOUVERAINS RACONTES — 24 aout 2026.
   « Il te faudrait des heros pour tes royaumes. » Ils avaient un portrait et une
   attitude de jeu, ils n'avaient pas de nom. Le portrait a maintenant un recit a
   cote, et non plus une legende centree sous lui : quarante mots centres sous une
   colonne de 300 px ne se lisent pas, ils se devinent. */
.souverains-recit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}
.souverains-recit article{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start}
.souverains-recit img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:10px;
  border:1px solid rgba(201,169,97,.22)}
.souverains-recit .rang{margin:0;font-family:var(--display);font-weight:750;letter-spacing:.16em;
  text-transform:uppercase;font-size:10px;color:var(--muted)}
.souverains-recit h3{margin:3px 0 2px;font-size:21px;letter-spacing:.02em}
.souverains-recit .etat{margin:0 0 9px;font-style:italic;font-size:14px;color:var(--gris)}
.souverains-recit p{margin:0 0 8px;font-size:14.5px;line-height:1.55}
.souverains-recit p:last-child{margin-bottom:0}

/* Sous 1024 px, deux souverains cote a cote laissent 190 px au recit : une colonne. */
@media(max-width:1024px){.souverains-recit{grid-template-columns:1fr}}
/* Sous 520 px, le portrait passe au-dessus — a 132 px de large il ne restait plus
   que 180 px au texte, soit trois mots par ligne. */
@media(max-width:520px){
  .souverains-recit article{grid-template-columns:1fr;gap:12px}
  .souverains-recit img{width:132px}
}

/* LES QUATRE SCEAUX GRAVES. Ce sont ceux du jeu, convertis en WebP — aucune
   illustration nouvelle. Ils sont ronds et se posent sur le fond, sans cadre. */
.sceaux{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
.sceaux figure{margin:0;text-align:center}
.sceaux img{width:100%;max-width:104px;height:auto;display:block;margin:0 auto 8px}
.sceaux figcaption{font-size:12px;color:var(--muted);line-height:1.5}
.sceaux figcaption b{display:block;font-family:var(--display);font-weight:750;letter-spacing:.12em;
  text-transform:uppercase;font-size:12.5px;margin-bottom:2px}
@media(max-width:520px){.sceaux{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}

.s-sylves{color:var(--sylves)} .s-cendres{color:var(--cendres)}
.s-astraux{color:var(--astraux)} .s-faes{color:var(--faes)}
/* Sous 900 px, quatre colonnes rendraient chaque souverain illisible : deux
   rangees de deux. Sous 520 px, un seul par ligne — il a alors sa vraie taille. */
@media(max-width:900px){.souverains{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:520px){.souverains{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* LES TROIS ETATS DE L'ECLISTE, en rang. Elles sont carrees et se lisent de
   gauche a droite dans l'ordre du tour. `minmax(0,1fr)` par principe ici : une
   colonne de grille prend pour minimum la taille de son contenu, et ce projet
   s'est deja fait repousser deux fois hors de l'ecran par cet oubli. */
.ecliste-etats>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ecliste-etats img{width:100%;height:auto;display:block;border-radius:8px}
.ecliste-etats .or{color:var(--or-clair,#f4e2b4)}

/* LE SELECTEUR DE LANGUE — DEUX DRAPEAUX, TOUT A DROITE DE LA BARRE.
   Sa demande du 24 aout : « un selecteur avec les drapeaux francais / anglais
   totalement a ma droite ». Il est donc le DERNIER enfant de la barre, apres le
   bouton d'action, et pas glisse entre le menu et lui comme la premiere version.

   ⚠ LES DRAPEAUX SONT DESSINES EN SVG, PAS ECRITS EN EMOJI. Windows ne possede
   aucun glyphe de drapeau : 🇫🇷 y rend deux lettres grises, « FR ». Un selecteur
   annonce en drapeaux doit montrer des drapeaux sur toutes les machines.

   ⚠ ET IL NE POUSSE RIEN HORS DE LA BARRE. C'est le defaut qui a deja mordu ce
   site deux fois — un enfant plus large que sa place repousse ses voisins. Deux
   drapeaux de 22 px, `flex:0 0 auto`, et un rang compact sous 1024 px. */
.choix-langue{display:inline-flex;align-items:center;gap:5px;padding:4px;border-radius:999px;
  border:1px solid rgba(201,169,97,.28);background:rgba(255,255,255,.04);flex:0 0 auto;order:4}
/* ⚠ ON RECONNAIT LES DEUX DRAPEAUX, TOUJOURS. Le premier jet posait l'inactif a
   0,5 d'opacite : sur le bleu de nuit de la barre, le bleu du drapeau francais
   disparaissait dans le fond et il ne restait qu'une tache grise. La mesure
   disait « rien ne deborde » et l'ecran disait « on ne voit pas le drapeau ».
   L'inactif est donc seulement DESATURE, jamais efface — et c'est un CERNE net
   qui designe la langue courante, pas un fondu. A distance un flou se confond
   avec le fond, un contour tient. */
.choix-langue .drapeau{display:block;width:28px;height:19px;border-radius:3px;overflow:hidden;
  filter:saturate(.5) brightness(.82);transition:filter .16s,box-shadow .16s;
  box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.choix-langue .drapeau svg{display:block;width:100%;height:100%}
.choix-langue .drapeau:hover{filter:none}
/* La langue courante reste affichee, elle ne se retire pas : un selecteur qui
   ne montre que l'autre langue ne dit plus dans laquelle on est. */
.choix-langue .drapeau.actuel{filter:none;box-shadow:0 0 0 2px var(--gold)}
.choix-langue .drapeau:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(max-width:1024px){
  /* Sur telephone la barre porte deja la marque, le burger et le bouton
     d'action. Mesure a 390 px avant d'etre pose : le groupe finit a 12 px du
     bord, et ne repousse rien. */
  .choix-langue{gap:3px;padding:3px;order:4}
  .choix-langue .drapeau{width:24px;height:16px}
}

/* LA PASTILLE « FR » sur les liens qui changent de langue. Seul l'accueil est
   traduit : un lien qui bascule sans prevenir est une petite trahison. */
.langue-fr{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:4px;
  border:1px solid rgba(148,163,184,.4);color:var(--gris,#94a3b8);
  font-size:9.5px;letter-spacing:.08em;vertical-align:1px}

/* ─── LES BOUTONS DU CORPS DU SITE, EN PIERRE ───────────────────────────────────────
   24 aout 2026, valide par Jean-Christophe sur une page de comparaison : « c'est
   exactement ce que je veux ».

   La pierre vient du kit livre par Codex pour le jeu (public/rift-buttons.css). On
   EMPLOIE sa recette, on ne la recopie pas : meme decoupe en neuf morceaux
   (border-image), meme trois etats, memes fichiers.

   ⚠ LES IMAGES SONT DANS /site/img/, ET C'EST OBLIGATOIRE. Le kit du jeu les designe
   par /assets/, or middleware.js met tout ce qui n'est pas /site/ derriere le mot de
   passe : mesure le 24 aout, /assets/rift-card-back.jpg rend 401, /site/img/ rend 200.
   Reutiliser le chemin du jeu aurait donne des boutons SANS CADRE pour tous les
   visiteurs, et parfaitement graves pour nous, qui avons le mot de passe. Le defaut
   aurait survecu a chaque verification locale.

   ⚠ ET LE `!important` EST OBLIGATOIRE SUR LA COULEUR : la regle d'origine en pose un
   ligne 375. Aucune specificite ne franchit un !important, seul un autre le peut. */

.bouton-or,.bouton-fantome,form.capture button{
  position:relative;isolation:isolate;
  border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;
  /* La decoupe en biseau du kit : les deux pointes tombent sur la pierre gravee. */
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
  filter:drop-shadow(0 .5rem .9rem rgba(0,0,0,.45));
  transition:color .16s ease,filter .16s ease,transform .12s ease}

/* Le cadre est un ENFANT, jamais un fond etire : c'est ce qui garde les gravures
   nettes quand le libelle s'allonge. Une pierre posee en `background` se deformerait. */
.bouton-or::before,.bouton-fantome::before,form.capture button::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  border-style:solid;border-color:transparent;border-width:12px 30px;
  border-image-source:url("/site/img/pierre-repos.webp");
  border-image-slice:46 120 fill;border-image-width:1;border-image-repeat:stretch}
.bouton-or:hover::before,.bouton-fantome:hover::before,
form.capture button:hover:not(:disabled)::before{border-image-source:url("/site/img/pierre-survol.webp")}
.bouton-or:active::before,.bouton-fantome:active::before,
form.capture button:active:not(:disabled)::before{border-image-source:url("/site/img/pierre-appui.webp")}

/* L'ACTION PRINCIPALE GARDE L'OR. La pierre sur les deux aplatirait la hierarchie que
   ces deux boutons portent depuis toujours : on ne saurait plus lequel compte. */
.bouton-or{color:#e5bd6e!important;background:none;min-height:56px;padding:0 42px}
.bouton-or:hover{color:#f7f0e2!important;transform:none;
  filter:brightness(1.12) drop-shadow(0 .6rem 1.1rem rgba(0,0,0,.5))}
.bouton-fantome{color:#cfd8e6!important;min-height:56px;padding:0 42px}
.bouton-fantome:hover{color:#f7f0e2!important;transform:none;filter:brightness(1.12)}
.bouton-or:active,.bouton-fantome:active,form.capture button:active{transform:translateY(2px)}

/* LE BOUTON DES LISTES D'ATTENTE — seize sur le site, un par page. C'est celui qu'on
   touche le plus, et le seul qui compte vraiment avant la sortie. */
form.capture button{color:#e5bd6e;min-height:50px;padding:0 34px;font-size:12.5px}
form.capture button:hover:not(:disabled){color:#f7f0e2;filter:brightness(1.12)}
form.capture button:disabled{opacity:.4;filter:grayscale(.7)}

/* LA BARRE COLLANTE garde son bouton court — la bande ne fait que 46 px de haut, et un
   cadre calibre pour 56 y deborderait. Meme pierre, cadre resserre. */
.barre-collante .bouton-or{min-height:46px;padding:0 26px}
.barre-collante .bouton-or::before{border-width:9px 22px}

/* Sur telephone la pointe mange la largeur du texte : on l'adoucit, on ne la retire pas. */
@media(max-width:520px){
  .bouton-or,.bouton-fantome,form.capture button{
    padding-inline:30px;clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%)}
}

/* ⚠ REDECLARE APRES LE BLOC : la regle d'accessibilite de la ligne 425 vient AVANT, et
   mon `transition` l'aurait ecrasee sans un mot. Un garde-fou qui se fait annuler par
   une regle posee plus loin ne protege plus personne. */
@media(prefers-reduced-motion:reduce){
  .bouton-or,.bouton-fantome,form.capture button{transition:none}
}

/* ─── ET « ÊTRE PRÉVENU », LE BOUTON DE LA BARRE DU HAUT ────────────────────────────
   Meme pierre que le corps du site. Il est present sur les dix-huit pages, en haut a
   droite, et c'est le premier bouton qu'on voit.

   ⚠ SA LARGEUR NE DOIT PAS BOUGER D'UN PIXEL. La barre debordait deja a 320 px avant
   qu'on y ajoute le mot MENU (mesure : elle finissait a 341 pour 320 de large). Ses
   marges interieures sont donc gardees telles quelles, aux trois paliers.
   Ce qui le permet : le cadre vit sur ::before, en absolu — son epaisseur dessine la
   pierre, elle n'entre jamais dans la boite du bouton. */
.jouer{
  position:relative;isolation:isolate;
  border:0;border-radius:0;background:none;box-shadow:none;
  color:#e5bd6e!important;
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
  filter:drop-shadow(0 .35rem .7rem rgba(0,0,0,.45));
  transition:color .16s ease,filter .16s ease}
.jouer::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  border-style:solid;border-color:transparent;border-width:8px 18px;
  border-image-source:url("/site/img/pierre-repos.webp");
  border-image-slice:46 120 fill;border-image-width:1;border-image-repeat:stretch}
.jouer:hover{color:#f7f0e2!important;filter:brightness(1.12) drop-shadow(0 .4rem .8rem rgba(0,0,0,.5))}
.jouer:hover::before{border-image-source:url("/site/img/pierre-survol.webp")}
.jouer:active::before{border-image-source:url("/site/img/pierre-appui.webp")}

/* Sous 400 px le bouton se resserre deja : le cadre suit, sinon les gravures des coins
   se chevauchent au milieu et la pierre devient une bouillie. */
@media(max-width:400px){
  .jouer{clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%)}
  .jouer::before{border-width:7px 14px}
}
@media(prefers-reduced-motion:reduce){.jouer{transition:none}}

/* ─── LES EMBLEMES DES TROIS PHASES ─────────────────────────────────────────────────
   25 aout 2026. Ce sont les memes signes que le bandeau de phases du jeu : le joueur
   reconnait sur le site ce qu'il verra a l'ecran.
   ⚠ LE NUMERO RESTE. Un embleme dit DE QUOI il s'agit, jamais DANS QUEL ORDRE — c'est la
   lecon du 21 aout, et elle vaut ici autant que dans le grimoire. */
.tour-en-trois-temps>li{position:relative}
.embleme-phase{float:left;width:44px;height:44px;margin:2px 14px 6px 0;object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
@media(max-width:520px){.embleme-phase{width:36px;height:36px;margin-right:11px}}

/* ─── L'INSCRIPTION DE LA PIERRE ────────────────────────────────────────────────────
   Elle n'est pas traduite, et c'est le sujet : on la regarde avant de chercher a la
   lire. Grande, espacee, en capitales de la police d'affichage — comme une gravure. */
.pierre-kron{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(21px,3.4vw,34px);line-height:1.85;letter-spacing:.06em;
  color:var(--gold);text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* ─── LA CARTE ANNOTÉE ─────────────────────────────────────────────────────────────
   La carte au centre, trois étiquettes de chaque côté, reliées par un trait fin. Chacune
   porte l'emblème du jeu : le lecteur reconnaîtra à l'écran ce qu'il a vu ici.
   ⚠ LA RECETTE DE LA CARTE VIENT DE `NORME-CARTES.html` : 272 × 408, rapport 2/3 exact,
   contour à deux traits. Si la norme bouge là-bas, elle bouge ici.
   ⚠ Sous 900 px les étiquettes passent dessous, en liste : un trait de rappel sur un
   téléphone ne relie plus rien. */
.carte-annotee{position:relative;display:grid;grid-template-columns:1fr 272px 1fr;
  grid-template-rows:auto auto auto;gap:20px 34px;align-items:center;
  margin:30px auto 0;max-width:1100px;aspect-ratio:1600/914;
  padding:10% 15% 12%}
/* ⚠ LE LIVRE EST UNE IMAGE, PAS UN FOND. Elle se voit nette, et la carte comme les
   etiquettes se posent dessus — c'est sa demande du 25 aout, apres deux essais ou je
   l'avais mise en `background` assombrie et floutee. */
.carte-livre-fond{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 22px 52px rgba(0,0,0,.6))}
.carte-annotee>*:not(.carte-livre-fond){position:relative;z-index:2}
/* Sur le parchemin, l'encre est sombre : le doré du site y serait illisible. */
.carte-annotee .etiq>b{color:#2e2109;font-weight:700;
  text-shadow:0 1px 0 rgba(247,240,214,.55)}
.carte-annotee .etiq span{color:#3a2b10;font-weight:600;
  text-shadow:0 1px 0 rgba(247,240,214,.5)}
.carte-annotee .etiq>b img{filter:sepia(.85) saturate(.7) brightness(.42) contrast(1.15)}
.carte-annotee .etiq::after{display:none}
.carte-annotee>.rift-carte-modele{grid-column:2;grid-row:1/4;justify-self:center;
  width:272px}
.rift-carte-modele{position:relative;--fc:#5aa86a;width:272px;aspect-ratio:2/3;
  border:3px solid color-mix(in srgb,var(--fc) 66%,#dfc173);border-radius:19px;
  background:linear-gradient(168deg,#141d33,#0a1020);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 20px 48px rgba(0,0,0,.6)}
.rift-carte-modele::after{content:"";position:absolute;inset:6px;z-index:4;pointer-events:none;
  border:1px solid rgba(238,208,128,.38);border-radius:13px}
.rc-art{position:relative;flex:none;height:180px;overflow:hidden;
  border-bottom:2px solid color-mix(in srgb,var(--fc) 60%,#d6bb73)}
.rc-art img{width:100%;height:100%;object-fit:cover;display:block}
.rc-cout{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:3px;
  padding:4px 8px;border-radius:999px;background:rgba(6,10,20,.78);
  font-family:var(--display);font-weight:750;font-size:14px;color:#e8c87a}
.rc-cout img{width:15px;height:15px;object-fit:contain}
.rc-clan{position:absolute;right:0;bottom:9px;padding:3px 9px 3px 12px;border-radius:9px 0 0 9px;
  background:rgba(6,10,20,.74);font-family:var(--display);font-weight:600;font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:#dfe6f2}
.rc-corps{padding:12px 13px 13px;flex:1;display:flex;flex-direction:column}
.rc-titre{display:flex;align-items:center;gap:7px;margin:0 0 5px}
.rc-titre img{width:22px;height:22px;flex:none;object-fit:contain}
.rc-titre b{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.15;color:#f4e6c2}
.rc-txt{margin:0 0 9px;font-style:italic;font-size:13px;line-height:1.42;color:#cfd6e4}
.rc-action{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:auto 0 0}
.rc-st{display:flex;align-items:center;gap:4px;font-family:var(--display);font-weight:700;font-size:17px}
.rc-atk{color:#f0a072}.rc-pv{color:#e8c87a}
.rc-st img{width:21px;height:21px;object-fit:contain}
.rc-jouer{flex:1;min-width:0;height:44px;display:grid;place-items:center;
  border-style:solid;border-color:transparent;border-width:11px 27px;
  border-image-source:url('/site/img/emblemes/pierre.webp');
  border-image-slice:46 120 fill;border-image-width:1;border-image-repeat:stretch;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.18em;color:#f2d99a}

.etiq{position:relative;font-size:15px;line-height:1.5;
  font-family:RiftRegles,Georgia,serif}
/* ⚠ `>` OBLIGATOIRE : sans lui le selecteur prend aussi les gras du texte, et « 5 âmes »
   passait a la ligne au milieu de la phrase. Deja paye le 24 aout sur les trois phases. */
.etiq>b{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:750;
  font-size:15px;color:var(--gold);letter-spacing:.04em;margin-bottom:5px}
.etiq>b img{width:28px;height:28px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.etiq>b:not(:has(img))::before{content:"";width:28px;flex:0 0 auto}
.etiq span{color:#c3cbdd}
.etiq--ht-g,.etiq--ml-g,.etiq--bs-g{grid-column:1;text-align:right}
.etiq--ht-g>b,.etiq--ml-g>b,.etiq--bs-g>b{flex-direction:row-reverse}
.etiq--ht-d,.etiq--ml-d,.etiq--bs-d{grid-column:3}
.etiq--ht-g{grid-row:1}.etiq--ml-g{grid-row:2}.etiq--bs-g{grid-row:3}
.etiq--ht-d{grid-row:1}.etiq--ml-d{grid-row:2}.etiq--bs-d{grid-row:3}
.etiq::after{content:"";position:absolute;top:14px;width:24px;height:1px}
.etiq--ht-g::after,.etiq--ml-g::after,.etiq--bs-g::after{right:-30px;
  background:linear-gradient(270deg,rgba(233,199,125,.5),rgba(233,199,125,0))}
.etiq--ht-d::after,.etiq--ml-d::after,.etiq--bs-d::after{left:-30px;
  background:linear-gradient(90deg,rgba(233,199,125,.5),rgba(233,199,125,0))}
@media(max-width:900px){
  /* Deux pages dans un pouce ne se lisent plus : le livre s'efface, le texte reste. */
  .carte-annotee{grid-template-columns:1fr;gap:18px;aspect-ratio:auto;padding:0}
  .carte-livre-fond{display:none}
  .carte-annotee .etiq>b{color:var(--gold)}
  .carte-annotee .etiq span{color:#c3cbdd}
  .carte-annotee .etiq>b img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
  .etiq{font-family:var(--texte),Georgia,serif;font-size:14.5px}
  .rift-carte-modele{grid-column:1;grid-row:1;margin-bottom:6px}
  .etiq,.etiq--ht-g,.etiq--ml-g,.etiq--bs-g,.etiq--ht-d,.etiq--ml-d,.etiq--bs-d{
    grid-column:1;grid-row:auto;text-align:left}
  .etiq--ht-g>b,.etiq--ml-g>b,.etiq--bs-g>b{flex-direction:row}
  .etiq::after{display:none}
}

/* ─── LE GRIMOIRE : LE LIVRE PORTE LE TEXTE ────────────────────────────────────────
   Sa demande du 25 août : « l'image du grimoire avec les règles écrites dedans ». Un
   panneau habillé n'est pas un grimoire. Le fond est le vrai livre du jeu, 1600 × 914,
   et les deux pages reçoivent le texte.
   ⚠ L'ÉCRITURE EST CELLE DES RÈGLES DU JEU — IM Fell English, gravée en 1680 et dessinée
   pour être lue en petit. C'est ce qui l'a fait choisir : des règles se lisent, elles ne
   se contemplent pas.
   ⚠ Sous 760 px le livre s'efface : deux pages dans un pouce ne se lisent plus. Le texte
   reste, sur le fond du site. */
@font-face{font-family:RiftRegles;src:url('/site/fonts/IMFellEnglish.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:RiftRegles;src:url('/site/fonts/IMFellEnglish-Italic.woff2') format('woff2');
  font-style:italic;font-weight:400;font-display:swap}
.section-grimoire{position:relative;margin-inline:calc(50% - 50vw);width:100vw;
  padding:clamp(30px,5vw,64px) 16px clamp(36px,6vw,74px);overflow:hidden}
/* ⚠ LE GRIMOIRE EN FOND DE LA CARTE, agrandi et assombri : la carte se lit alors comme
   une page posee sur le livre, et ses etiquettes comme des annotations dans la marge.
   C'est ce qu'il demandait — je l'avais d'abord mis derriere les regles. */
.section-grimoire::before{content:"";position:absolute;inset:0;z-index:0;
  background:url('/site/img/grimoire-fond.webp') center/cover no-repeat;
  transform:scale(1.06);filter:brightness(.62) saturate(.85) blur(1px)}
.section-grimoire::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#0a0e1c 0%,rgba(10,14,28,.42) 22%,rgba(10,14,28,.42) 78%,#0a0e1c 100%)}
.section-grimoire>*{position:relative;z-index:2}
.section-grimoire>.sur-titre,.section-grimoire>h2,.section-grimoire>.chapeau{
  width:min(var(--bande,1000px),100%);margin-inline:auto}
.livre-regles{position:relative;z-index:2;margin:26px auto 0;max-width:1000px;aspect-ratio:1600/914;
  background:url('/site/img/grimoire-fond.webp') center/contain no-repeat;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.7))}
.livre-page{overflow:hidden;color:#3a2c18;
  font-family:RiftRegles,Georgia,serif;container-type:inline-size}
/* Mesure sur l'image : parchemin de x 11 % a 90 %, reliure a 49 %, pages de y 7 % a 85 %.
   On ecrit DANS la page, jamais sur la tranche ni sur la reliure. */
.livre-gauche{padding:11% 10% 15% 32%}
.livre-droite{padding:11% 30% 15% 8%}
.livre-page{display:flex;flex-direction:column;justify-content:center}
.livre-page h3{margin:0 0 .5em;color:#3f2f14;font-family:RiftRegles,Georgia,serif;
  font-weight:400;font-size:8.2cqi;line-height:1.06;letter-spacing:.01em}
.livre-intro{margin:0 0 1.1em;font-style:italic;font-size:5.4cqi;line-height:1.4;color:#54401f}
.livre-page dl{margin:0;display:grid;gap:1.15em}
.livre-page dt{font-size:6.6cqi;line-height:1.15;color:#3f2f14;letter-spacing:.02em}
.livre-page dd{margin:.3em 0 0;font-size:5.2cqi;line-height:1.46;color:#4a3719}
@media(max-width:760px){
  .livre-regles{aspect-ratio:auto;background:none;grid-template-columns:1fr;gap:0}
  .livre-page{padding:0;color:#c3cbdd;font-family:var(--texte),Georgia,serif}
  .livre-page h3{color:var(--gold);font-family:var(--display),Georgia,serif;font-size:21px}
  .livre-intro{font-size:15px;color:var(--muted)}
  .livre-page dt{font-size:16px;color:var(--ink);font-family:var(--display),Georgia,serif}
  .livre-page dd{font-size:15px;color:#c3cbdd}
  .livre-droite{margin-top:1em}
}

/* Le bouton de pierre de la carte — il vient de la norme, comme le reste. */
.rc-jouer{flex:1;min-width:0;height:44px;display:grid;place-items:center;
  border-style:solid;border-color:transparent;border-width:11px 27px;
  border-image-source:url('/site/img/emblemes/pierre.webp');
  border-image-slice:46 120 fill;border-image-width:1;border-image-repeat:stretch;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.18em;color:#f2d99a}

/* ─── LE NOM EN KHRON, SOUS LE NOM FRANÇAIS ─────────────────────────────────────────
   Sa demande du 25 août : les héros et les souverains portent leur nom dans la langue.
   ⚠ IL SE POSE SOUS, JAMAIS À LA PLACE. C'est une traduction qu'on montre, pas un
   remplacement : le lecteur garde son point d'appui, et le khron devient un cadeau au
   lieu d'un obstacle. */
.nom-khron{margin:-1px 0 7px;font-family:var(--display);font-style:italic;font-weight:600;
  font-size:14px;letter-spacing:.1em;color:var(--gold);opacity:.78}

/* ─── LE TITRE GRAVÉ EN KHRON ───────────────────────────────────────────────────────
   Il s'affiche en signes, et se dissipe quand on approche — au survol, au clavier, ou
   au contact sur un écran tactile.
   ⚠ LES SIGNES SONT EMPLOYÉS EN MASQUE, jamais en image : ils sont blancs sur noir, et
   un <img> aurait posé un rectangle noir en travers du fond. Le masque en luminance ne
   garde que le tracé, et la couleur vient d'ici. */
.titre-grave{position:relative;cursor:default;outline:none}
.titre-grave .grave,.titre-grave .clair{display:block;transition:opacity .5s ease}
.titre-grave .clair{position:absolute;inset:0;opacity:0;pointer-events:none}
.titre-grave:hover .grave,.titre-grave:focus .grave,.titre-grave.lu .grave{opacity:0}
.titre-grave:hover .clair,.titre-grave:focus .clair,.titre-grave.lu .clair{opacity:1}
.kg{display:inline-block;width:.78em;height:.86em;margin-right:.05em;vertical-align:-.14em;
  background-color:var(--gold);
  -webkit-mask-image:var(--g);mask-image:var(--g);
  -webkit-mask-mode:luminance;mask-mode:luminance;
  -webkit-mask-size:132%;mask-size:132%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.kg-espace{display:inline-block;width:.42em}
/* Un mouvement qu'on n'a pas demandé ne doit pas s'imposer. */
@media(prefers-reduced-motion:reduce){.titre-grave .grave,.titre-grave .clair{transition:none}}

/* ─── L'EMBLÈME DEVANT CHAQUE RÈGLE ────────────────────────────────────────────────
   Ceux du jeu, posés dans l'encre du parchemin plutôt qu'en couleur : un emblème doré
   sur du papier ancien se lit comme une vignette collée, pas comme une gravure. */
.livre-page dt{display:flex;align-items:center;gap:.42em}
.livre-page dt:not(:has(img))::before{content:"";width:1.05em;flex:0 0 auto}
.livre-page dt img{width:1.05em;height:1.05em;object-fit:contain;flex:0 0 auto;
  filter:sepia(.85) saturate(.7) brightness(.42) contrast(1.15)}

/* ─── LE NOM EN KHRON, SOUS LE NOM FRANÇAIS ─────────────────────────────────────────
   Sa demande du 25 août : les héros et les souverains portent leur nom dans la langue.
   ⚠ IL SE POSE SOUS, JAMAIS À LA PLACE. C'est une traduction qu'on montre, pas un
   remplacement : le lecteur garde son point d'appui, et le khron devient un cadeau au
   lieu d'un obstacle. */
.nom-khron{margin:-1px 0 7px;font-family:var(--display);font-style:italic;font-weight:600;
  font-size:14px;letter-spacing:.1em;color:var(--gold);opacity:.78}

/* ─── LE TITRE GRAVÉ EN KHRON ───────────────────────────────────────────────────────
   Il s'affiche en signes, et se dissipe quand on approche — au survol, au clavier, ou
   au contact sur un écran tactile.
   ⚠ LES SIGNES SONT EMPLOYÉS EN MASQUE, jamais en image : ils sont blancs sur noir, et
   un <img> aurait posé un rectangle noir en travers du fond. Le masque en luminance ne
   garde que le tracé, et la couleur vient d'ici. */
.titre-grave{position:relative;cursor:default;outline:none}
.titre-grave .grave,.titre-grave .clair{display:block;transition:opacity .5s ease}
.titre-grave .clair{position:absolute;inset:0;opacity:0;pointer-events:none}
.titre-grave:hover .grave,.titre-grave:focus .grave,.titre-grave.lu .grave{opacity:0}
.titre-grave:hover .clair,.titre-grave:focus .clair,.titre-grave.lu .clair{opacity:1}
.kg{display:inline-block;width:.78em;height:.86em;margin-right:.05em;vertical-align:-.14em;
  background-color:var(--gold);
  -webkit-mask-image:var(--g);mask-image:var(--g);
  -webkit-mask-mode:luminance;mask-mode:luminance;
  -webkit-mask-size:132%;mask-size:132%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.kg-espace{display:inline-block;width:.42em}
/* Un mouvement qu'on n'a pas demandé ne doit pas s'imposer. */
@media(prefers-reduced-motion:reduce){.titre-grave .grave,.titre-grave .clair{transition:none}}

/* ─── TOUT LE LIVRE EST GRAVÉ, ET TOUT S'ÉVAPORE ───────────────────────────────────
   Sa demande du 25 août. Chaque bloc porte ses deux états superposés : la gravure, et
   le texte clair. Approcher fait s'évaporer l'une et lever l'autre.
   ⚠ 89 % du texte seulement : le khron n'a pas de signe pour c, p, q, f, b, x — des sons
   qu'il ne prononce pas. Ces lettres restent en latin, dans la même encre. Les cacher
   demanderait d'inventer six signes, et on n'invente rien.
   ⚠ ON SUPERPOSE, ON NE REMPLACE PAS : les deux états occupent la même boîte, donc la
   page ne bouge pas d'un pixel pendant l'évaporation. Un texte qui saute se lit comme
   un défaut, jamais comme un effet. */
.evapore{position:relative;display:block}
.evapore .grave,.evapore .clair{display:block;transition:opacity .5s ease}
.evapore .clair{position:absolute;inset:0;opacity:0}
.evapore:hover .grave,.evapore:focus .grave,.evapore:focus-within .grave{opacity:0}
.evapore:hover .clair,.evapore:focus .clair,.evapore:focus-within .clair{opacity:1}
.evapore{outline:none;cursor:default}
.livre-page .kg{background-color:#3f2f14;width:.66em;height:.78em;margin-right:.04em;
  vertical-align:-.13em}
.kg-nu{font-style:normal;font-family:RiftRegles,Georgia,serif;opacity:.72}
@media(prefers-reduced-motion:reduce){.evapore .grave,.evapore .clair{transition:none}}
@media(max-width:760px){.livre-page .kg{background-color:var(--gold)}}

/* ─── L'APERÇU DES CARTES, À LA NORME ───────────────────────────────────────────────
   Sa remarque du 25 août : « les cartes ne sont pas normées par rapport à nos règles ».
   Elles le sont maintenant, avec la recette de NORME-CARTES.html, réduites, et il y en
   a douze au lieu de sept.
   ⚠ ON RÉDUIT PAR LA LARGEUR, JAMAIS PAR LES DEUX CÔTÉS. Le rapport 2/3 ne cède pas :
   c'est le piège payé trois fois sur ce projet, le livre du grimoire, ses cartes, et le
   lecteur de carte. Quand une taille doit céder, c'est la largeur. */
.apercu-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:20px;margin-top:24px;justify-items:center}
.carte-menue{width:100%;max-width:212px;font-size:.78em}
.carte-menue .rc-art{height:41%}
.carte-menue .rc-titre b{font-size:13px}
.carte-menue .rc-txt{font-size:11.5px;line-height:1.38}
.carte-menue .rc-corps{padding:10px 11px 11px}
.carte-menue .rc-jouer{height:34px;border-width:8px 21px;font-size:10px;letter-spacing:.14em}
.carte-menue .rc-st{font-size:14px}
.carte-menue .rc-st img{width:17px;height:17px}
.carte-menue .rc-titre img{width:18px;height:18px}
.rc-rarete{position:absolute;top:9px;right:9px;z-index:5;margin:0;padding:3px 9px;
  border-radius:999px;background:rgba(6,10,20,.78);
  font-family:var(--display);font-weight:700;font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#cbd3e4}
/* La carte prophétie : aucun royaume, donc aucune teinte de clan. Et son texte n'est
   pas traduit, c'est tout le sujet. */
.carte-prophetie{--fc:#8a7a5c}
.rc-kron{margin:6px 0 0;font-family:var(--display);font-weight:600;font-size:12.5px;
  line-height:1.6;letter-spacing:.05em;color:var(--gold);text-transform:uppercase}

/* ─── LE KHRON, SUR LA PAGE DU MONDE ────────────────────────────────────────────────
   Sa demande du 25 août : dire que la langue existe, qu'on la parle, qu'elle a une
   écriture, « pour appâter les joueurs ».
   ⚠ LES SEIZE SIGNES SONT MONTRÉS SANS LEUR CORRESPONDANCE. On publie l'écriture, jamais
   la clé : le lecteur voit qu'elle existe, il ne sait pas ce qu'elle dit. */
.khron-signes{margin:26px 0 0;padding:24px 26px;border:1px solid var(--line);
  border-left:3px solid var(--gold);background:rgba(255,255,255,.02);text-align:center}
.khron-sous{margin:0 0 14px;font-family:var(--display);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.khron-ligne{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;
  font-size:34px}
.khron-mots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:2px 20px;margin:12px 0 0}
.khron-mots>div{display:flex;gap:9px;align-items:baseline;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.06)}
.khron-mots dt{font-family:var(--display);font-weight:750;color:var(--gold);min-width:52px}
.khron-mots dd{margin:0;font-size:15px;color:#c3cbdd}
@media(max-width:520px){.khron-ligne{font-size:27px;gap:11px 14px}}

/* LA PAROI DU KHRON. L illustration est la seule chose de cette section qu on regarde
   plutot qu on lise : elle prend toute la largeur du texte et garde son rapport, qui
   vient de ce que le CSS en fait et non d un releve sur le fichier. */
.khron-paroi{margin:26px 0 30px}
.khron-paroi>img{width:100%;height:auto;border-radius:4px;
  box-shadow:0 18px 46px rgba(0,0,0,.55)}
.khron-paroi>figcaption{margin-top:10px;font-size:14px;color:var(--doux);text-align:center}

/* LA PROMO EN FOND DU HEROS. Recette de la couverture du livre : la video passe DEVANT
   l'image de la salle, et l'image reste dessous. Fichier manquant, lecture automatique
   refusee, mouvement non souhaite : on retombe sur `hall.webp`, jamais sur du noir.
   ⚠ Elle est derriere le voile et le logo : elle donne du mouvement, elle ne se regarde
   pas. Celle qui se regarde est en tete de la page du monde, avec ses commandes. */
/* LE FILM D'INTRODUCTION FAIT LE FOND, comme sur la couverture du livre. L'image de la
   salle est retiree : c'est le film qu'on regarde, pas une illustration par-dessus
   laquelle il passerait.
   ⚠ ET LE REPLI RESTE, sinon la section serait VIDE quand la lecture automatique est
   refusee ou quand on a demande moins de mouvement. Ce repli est la premiere image du
   film, posee en fond de la section : le meme plan, immobile. Jamais du noir, et jamais
   une autre image.
   ⚠ Pas de flou ici, a la difference de la promo : ce film ne porte aucun texte, donc
   rien ne vient concurrencer le titre. */
.hero{background:#080b14 url('/site/video/attente-intro-fond.webp') center 44%/cover}
.hero>.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 44%;opacity:.62;filter:saturate(.9)}
@media(prefers-reduced-motion:reduce){.hero>.hero-film{display:none}}

/* LE FILM EN TETE DU MONDE. Il ouvre la page : on lui laisse de l'air au-dessus et on
   remonte le cadre d'un cran, pour qu'il ne se lise pas comme une illustration de plus. */
.film-monde{padding-top:6px}
.film-monde>.film{margin-top:22px}