/* AION 2 Guides — la direction visuelle, en jetons.
   Rapatrié le 20.08.2026 depuis le premier passage de l'outil de mise en page.
   ⛔ Les valeurs viennent de docs/direction-visuelle.md : 9 couleurs mesurées dans les planches,
      4 accents déclarés et marqués non mesurés. ⛔ Ne pas les faire dériver ici. */

/* POLICES — déclarées à la racine du site : une url() relative se résout depuis l'emplacement
   de la feuille. Les fichiers vivent dans public/fonts/ et sont servis à /fonts/.
   SIL OFL 1.1 — l'auto-hébergement est accordé ; ⛔ les fichiers ne se renomment pas. */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/cinzel-400.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/cinzel-500.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/cinzel-600.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/montserrat-500.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/montserrat-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600.woff2") format("woff2")}

:root{
  /* Les quatre surfaces MESURÉES — 94,7 % de la surface des planches, écart zéro. */
  --ink-canvas:#0D1220;      /* fond global */
  --ink-surface:#151A2B;     /* cartes, panneaux, blocs documentaires */
  --ink-raised:#1F2538;      /* éléments surélevés, états seconds, tableaux */
  --ink-structure:#2B3146;   /* séparateurs importants, champs, désactivé */

  /* Texte — mesurés */
  --fg-1:#E7ECFF;
  --fg-2:color-mix(in oklab,#E7ECFF 78%,#A8B0C6);
  --fg-3:#A8B0C6;
  --fg-4:rgba(168,176,198,.62);

  /* Accents — DÉCLARÉS, non mesurés. Aucune planche n'en porte un aplat. */
  --violet-1:#9B6DFF;
  --steel-1:#9CC8FF;   /* mesuré */
  --steel-2:#5FA8FF;
  --gold-1:#D7B56A;    /* mesuré */
  --gold-light:#F2E6A6;/* mesuré */
  --danger:#FF385C;
  --danger-soft:#EF7A8F;

  /* Exactement TROIS niveaux d'information, et pas un quatrième. */
  --level-confirmed:#34D399;
  --level-reported:#D7B56A;
  --level-unconfirmed:color-mix(in oklab,#9B6DFF 42%,#A8B0C6);

  /* Situationnel, ⛔ PAS un niveau : contenu coréen uniquement. Doré et violet, calme. */
  --kr-only-fill:rgba(215,181,106,.12);
  --kr-only-rule:#9B6DFF;
  --kr-only-text:#F2E6A6;

  /* Les six rubriques — filet de 2 px en tête, rien d'autre. */
  --cat-classes:#5FA8FF;
  --cat-dungeons:#FF385C;
  --cat-zones:#9B6DFF;
  --cat-systems:#9CC8FF;
  --cat-guides:#D7B56A;
  --cat-updates:color-mix(in oklab,#5FA8FF 55%,#9B6DFF);

  /* Échelle de taille — titres Cinzel, interface Montserrat, texte Inter. */
  --text-hero:60px; --text-h1:52px; --text-h2:32px; --text-h3:22px;
  --text-lg:19px; --text-body-size:17px; --leading-body:1.62;
  --weight-display:500;  /* ⛔ Cinzel ne monte pas au-delà de 600 : jamais de gras synthétique */

  /* Bordures et rayons : ⭐ le CONTRASTE sépare, ⛔ pas l'ombre. */
  --hairline:1px solid rgba(160,180,220,.15);
  --border-hairline:rgba(160,180,220,.15);
  --radius-card:8px; --radius-field:8px; --radius-panel:11px;
  --shell-max:1360px;

  /* Voiles de protection : ⛔ un texte ne repose jamais sur une image nue. */
  --scrim-bottom:linear-gradient(to top,rgba(13,18,32,.97) 0%,rgba(13,18,32,.74) 45%,rgba(13,18,32,0) 100%);
  --scrim-left:linear-gradient(to right,rgba(13,18,32,.97) 0%,rgba(13,18,32,.82) 42%,rgba(13,18,32,.18) 100%);

  --font-serif-display:"Cinzel","Trajan Pro","Palatino Linotype",Palatino,"Book Antiqua","Hoefler Text",Didot,"Times New Roman",serif;
  --font-wordmark:"Cinzel","Trajan Pro","Perpetua Titling MT",Copperplate,"Palatino Linotype",Palatino,serif;
  --font-ui:"Montserrat","Avenir Next",Avenir,"Century Gothic","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  /* ⚠️ ÉCART ASSUMÉ, inscrit le 20.08.2026. Les gabarits reçus appellent une CINQUIÈME
     famille — un chasse fixe — pour les nombres et les dates. ⛔ La direction visuelle n'en
     nomme aucune, et aucune planche n'en montre. ⭐ Elle est donc servie par la pile du
     système d'exploitation, ⛔ jamais rapatriée : rapatrier une police que personne n'a
     choisie, c'est décider à la place de l'utilisateur. → docs/direction-visuelle.md § 5 */
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink-canvas);color:var(--fg-3);
  font:var(--text-body-size)/var(--leading-body) var(--font-body)}
p,li,td,th,dd,dt,blockquote,figcaption{font-family:var(--font-body)}
nav,button,label,summary{font-family:var(--font-ui)}
h1,h2,h3,h4{font-family:var(--font-serif-display);letter-spacing:.014em;
  font-weight:var(--weight-display);color:var(--fg-1)}
h1,h2{font-synthesis-weight:none}
a{color:var(--steel-2)}
a:hover{color:var(--steel-1);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--violet-1);outline-offset:2px}
::selection{background:rgba(155,109,255,.32)}
img{max-width:100%;height:auto}

/* Le cadre de page. */
.shell{width:100%;max-width:var(--shell-max);margin:0 auto;padding:0 24px}
.wm{font-family:var(--font-wordmark);letter-spacing:.17em;color:var(--gold-1);white-space:nowrap}
.ico{flex:none;display:inline-block;background:currentColor}

/* En-tête et pied de page — gelés, hérités par toutes les pages. */
.site-head{background:linear-gradient(180deg,#1A2036 0%,#151A2B 100%);border-bottom:var(--hairline)}
.site-head .shell{height:62px;display:flex;align-items:center;gap:32px}
.site-nav{display:flex;align-items:center;gap:26px;margin:0 auto}
.site-nav a{font-family:var(--font-ui);font-size:13.5px;color:var(--fg-3);text-decoration:none}
.site-nav a:hover{color:var(--fg-1);text-decoration:none}
.site-fold{flex:none;font-family:var(--font-ui);font-size:12.5px;color:rgba(168,176,198,.72)}

.crumbs{font-family:var(--font-ui);font-size:12px;color:var(--fg-4)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:14px 0 0}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--fg-4)}
.crumbs a{color:var(--fg-3);text-decoration:none}
.crumbs a:hover{color:var(--steel-1)}

.site-foot{background:linear-gradient(180deg,#151A2B 0%,#12172A 100%);border-top:var(--hairline);margin-top:64px}
.site-foot .band{border-bottom:var(--hairline)}
.site-foot .band .shell{padding:30px 24px;display:flex;gap:17px}
.site-foot h2{font-size:21px;margin:0}
.site-foot .band p{font-size:15px;line-height:1.62;color:#DDE3F5;max-width:74ch;margin:11px 0 0}
.site-foot .links{padding:26px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.site-foot .links a{font-family:var(--font-ui);font-size:13px;text-decoration:none}
.site-foot .links nav{display:flex;flex-wrap:wrap;gap:20px}
.site-foot .base{border-top:var(--hairline);background:var(--ink-canvas)}
.site-foot .base .shell{padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  font-family:var(--font-ui);font-size:11.5px;color:rgba(168,176,198,.72)}

/* Écran étroit. ⛔ Aucune planche ne le montrait : ces règles viennent de l'outil, et
   elles se vérifient sur le gabarit construit, capturé à 390 px. */
@media (max-width:1000px){
  .wide{display:none !important}
  .g6{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  h1{font-size:40px !important}
  /* ⛔ La navigation POUSSAIT la page : `margin:0 auto` dans un parent en ligne lui donne sa
     largeur de contenu, et six libellés ne tiennent pas. ⭐ Mesuré au premier sondage. */
  .site-head .shell{gap:12px}
  .site-nav{margin:0;min-width:0;flex:1 1 auto;gap:14px;overflow-x:auto;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap}
}
@media (max-width:620px){
  .g6{grid-template-columns:minmax(0,1fr) !important}
  h1{font-size:31px !important}
  .site-foot .band .shell{flex-direction:column;gap:12px}
}

/* ============================================================================
   LES COMPOSANTS DE CORPS DE PAGE — rapatriés le 20.08.2026 des cinq gabarits
   restants (accueil, liste de rubrique, fiche, page éditeur).

   ⛔⛔ CE QUI VIT ICI, ET RIEN D'AUTRE : ce qu'au moins DEUX gabarits emploient.
      Ce qui n'appartient qu'à une seule page reste dans le `<style>` de cette page.
      ⚠️ Motif : une classe partagée qui ne sert qu'une fois est une dette — six mois
      après, personne ne sait plus si la toucher casse une autre page.

   ⛔ Ce qui a été JETÉ des gabarits reçus : l'attribut `style-hover`, qui n'est pas
      du CSS et que le navigateur ignore purement et simplement. Chaque survol est
      réécrit en `:hover`. ⚠️ Sans ça, la maquette paraît juste et le site est mort.
   ============================================================================ */

/* --- Les deux marqueurs de service. ⭐ Dérivés de la donnée, jamais posés à la main. --- */
.kr{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:10.5px;
  font-weight:600;letter-spacing:.07em;color:var(--kr-only-text);background:var(--kr-only-fill);
  border:1px solid rgba(215,181,106,.40);border-left:2px solid var(--kr-only-rule);
  border-radius:4px;padding:3px 9px;white-space:nowrap}
.west{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:10.5px;
  font-weight:600;letter-spacing:.07em;color:#9CE8C0;background:rgba(52,211,153,.09);
  border:1px solid rgba(52,211,153,.34);border-radius:4px;padding:3px 9px;white-space:nowrap}
.of{display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:10.5px;
  font-weight:600;letter-spacing:.07em;color:var(--steel-1);
  border:1px solid rgba(156,200,255,.34);border-radius:4px;padding:2px 7px;white-space:nowrap}

/* --- L'en-tête de rubrique : titre en capitales espacées, compte, résumé, « tout voir ». --- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:13px;border-bottom:var(--hairline)}
.head-l{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.lbl{font-family:var(--font-serif-display);font-size:15px;font-weight:600;letter-spacing:.20em;
  text-transform:uppercase;color:var(--fg-1);margin:0}
.lbl a{color:var(--fg-1);text-decoration:none}
.lbl a:hover{color:var(--steel-1)}
.cnt{font-family:var(--font-mono);font-size:12px}
.sub{font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:var(--fg-3);max-width:74ch}
.all{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:13px;
  color:var(--steel-1);text-decoration:none;white-space:nowrap}
.all:hover{color:var(--fg-1);text-decoration:none}
.num{font-family:var(--font-mono);font-size:11.5px;color:rgba(168,176,198,.68)}

/* --- Le bandeau de tête : image, deux voiles, filet de rubrique. --- */
.hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  border-top:var(--hairline);border-bottom:var(--hairline)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.hero .v-b{position:absolute;inset:0;background:var(--scrim-bottom)}
.hero .v-l{position:absolute;inset:0;background:var(--scrim-left)}
.hero .filet{position:absolute;top:0;left:0;right:0;height:2px}
.hero .shell{position:relative}
.hero .credit{position:absolute;right:26px;bottom:9px;font-family:var(--font-ui);font-size:10.5px;
  color:rgba(168,176,198,.62)}
.hero h1{line-height:1.06;margin:0;text-shadow:0 2px 34px rgba(13,18,32,.96)}
.faits{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(231,236,255,.18);max-width:760px}
.fait{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-ui);font-size:12.5px;
  color:rgba(231,236,255,.80)}

/* --- L'avertissement de disponibilité.
   ⛔ Visible et EN TÊTE : c'est le seul bandeau qui se justifie, parce qu'il change ce que
      le lecteur peut faire. --- */
.avert{display:flex;gap:15px;padding:17px 20px;background:rgba(215,181,106,.07);
  border:1px solid rgba(215,181,106,.34);border-left:2px solid var(--kr-only-rule);
  border-radius:var(--radius-card)}
.avert p{margin:0;font-family:var(--font-ui);font-size:15px;line-height:1.55;color:var(--gold-light)}
.avert p+p{margin-top:7px;font-family:var(--font-body);font-size:13.5px;color:var(--fg-3)}

/* --- Le sommaire latéral collant, et le panneau qui l'accompagne. --- */
.rail{position:sticky;top:24px}
.panneau{background:var(--ink-surface);border:var(--hairline);border-radius:var(--radius-panel);padding:18px}
.panneau-t{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--violet-1)}
.panneau-r{width:26px;height:2px;background:var(--violet-1);margin:8px 0 10px}
.toc a{display:flex;align-items:baseline;gap:11px;padding:8px 0;font-family:var(--font-ui);
  font-size:13.5px;color:var(--fg-3);text-decoration:none;
  border-bottom:1px solid rgba(160,180,220,.10)}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--steel-1);text-decoration:none}

/* --- Le corps documentaire : deux colonnes, le texte à gauche, le rail à droite. --- */
.doc{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:56px;align-items:start}
.doc h2{font-size:30px;line-height:1.22;margin:0}
.doc .p{font-family:var(--font-body);font-size:17px;line-height:1.68;color:#DDE3F5;
  max-width:68ch;margin:15px 0 0;text-wrap:pretty}
.doc section{padding-bottom:42px;scroll-margin-top:24px}
.doc .titre-s{display:flex;align-items:baseline;gap:13px}

/* --- Les grilles, nommées par leur nombre de colonnes en écran large.
   ⚠️ `.g6` n'existait ici QUE dans les règles d'écran étroit : sa définition de base vivait
      en portée locale dans la page d'erreur. ⛔ Sur l'accueil, les six rayons se sont donc
      empilés en pleine largeur — attrapé à la capture du 20.08.2026, ⛔ pas à la relecture.
   ⭐ La leçon : une classe citée par deux pages appartient à cette couche, jamais à l'une des deux. */
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}

/* --- La carte-vignette : image, voile, filet coloré, titre en bas. --- */
.card{position:relative;display:block;border:var(--hairline);border-radius:var(--radius-card);
  overflow:hidden;text-decoration:none;transition:border-color .12s ease,box-shadow .18s ease}
.card:hover{text-decoration:none}
.card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .v{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,18,32,.95) 0%,rgba(13,18,32,.46) 48%,rgba(13,18,32,.14) 100%)}
.card .filet{position:absolute;top:0;left:0;right:0;height:2px}
.card .pied{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:10px}
.card .nom{font-family:var(--font-serif-display);font-size:19px;font-weight:500;line-height:1.26;
  color:var(--fg-1);text-shadow:0 2px 16px rgba(13,18,32,.96)}

/* --- La note de substitution d'image.
   ⛔ OBLIGATOIRE partout où un visuel tient lieu d'un autre — le registre des médias
      l'exige, et c'est ce qui distingue un figurant assumé d'une tromperie. --- */
.note-img{font-family:var(--font-body);font-size:13px;line-height:1.6;
  color:rgba(168,176,198,.80);max-width:92ch;margin:14px 0 0}

/* --- La bande de faits, en colonnes séparées par un filet. --- */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:24px;
  padding-top:20px;border-top:var(--hairline);max-width:900px}
.strip>span{display:flex;flex-direction:column;gap:4px;padding:0 22px;
  border-right:1px solid rgba(160,180,220,.15)}
.strip>span:first-child{padding-left:0}
.strip>span:last-child{padding-right:0;border-right:0}
.strip-k{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(168,176,198,.75)}
.strip-v{font-family:var(--font-ui);font-size:14.5px;color:var(--fg-1)}

/* ⛔ Écran étroit — ces règles viennent de l'outil, ⛔ d'aucune planche : le mobile n'a
   jamais été dessiné. ⭐ Elles se vérifient sur le site CONSTRUIT, capturé à 390 px réels. */
@media (max-width:1000px){
  .doc{grid-template-columns:minmax(0,1fr) !important;gap:34px}
  .rail{position:static !important}
  .g5,.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .strip{grid-template-columns:minmax(0,1fr) !important}
  .strip>span{padding:0 !important;border-right:0 !important}
  .strip>span+span{border-top:var(--hairline);padding-top:12px !important}
  .doc h2{font-size:25px}
}
@media (max-width:620px){
  .g5,.g4,.g3,.g2{grid-template-columns:minmax(0,1fr) !important}
  .head{align-items:flex-start}
}

/* ============================================================================
   LE BANDEAU DE CONSENTEMENT — forme tranchée par l'utilisateur le 21.08.2026.

   ⛔⛔ LES DEUX BOUTONS SONT STRICTEMENT IDENTIQUES — même fond, même bordure,
      même taille, même graisse. ⚠️ Ce n'est PAS une préférence esthétique : un
      « refuser » plus discret que « accepter » est un motif trompeur, il rend le
      consentement sans valeur, et un consentement sans valeur est pire que pas de
      mesure du tout. ⛔ Ne jamais « améliorer » ce bloc en mettant l'un en avant.

   ⭐ Sobre, en bas d'écran, sans voile qui bloque la page : le visiteur peut lire
      le site sans répondre. ⛔ Une modale qui prend l'écran forcerait un clic —
      ce n'est plus un choix.
   ============================================================================ */
.consentement{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--ink-surface);border-top:1px solid rgba(160,180,220,.28);
  box-shadow:0 -8px 30px -12px rgba(0,0,0,.7)}
.consentement[hidden]{display:none}
.consentement .shell{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding-top:16px;padding-bottom:16px}
.consentement p{margin:0;font-family:var(--font-body);font-size:14.5px;line-height:1.6;
  color:var(--fg-2);flex:1 1 380px;min-width:0;max-width:82ch}
.consentement .boutons{display:flex;gap:12px;flex:0 0 auto}
.consentement button{font-family:var(--font-ui);font-size:14px;font-weight:600;
  padding:11px 26px;min-width:124px;border-radius:var(--radius-field);
  background:var(--ink-raised);color:var(--fg-1);
  border:1px solid rgba(160,180,220,.34);cursor:pointer}
.consentement button:hover{background:var(--ink-structure);border-color:var(--violet-1)}
.consentement button:focus-visible{outline:2px solid var(--violet-1);outline-offset:2px}

@media (max-width:620px){
  .consentement .shell{gap:14px}
  .consentement .boutons{width:100%}
  /* ⭐ En écran étroit les deux boutons partagent la largeur À ÉGALITÉ — ⛔ jamais
     l'un pleine largeur et l'autre en petit, qui est le motif trompeur le plus courant. */
  .consentement button{flex:1 1 0;min-width:0;padding:12px 10px}
}