/* =====================================================================
   LE GARDIEN DES FLAMMES — Site vitrine
   Charte Graphique V4 (juillet 2026) — « La peinture vivante · le halo »

   Ce que la charte impose au CSS :
     LE HALO     le motif sacré est une lueur, jamais une flamme (§1).
     LE CADRE    letterbox 2.39:1, le texte dans les bandes noires et
                 jamais sur la peinture — c'est la classe .bande (§3.6).
     UN ACCENT   une dominante, un seul accent chaud, la braise (§3.3).
     LE SOCLE    palette, typographie et rythme inchangés depuis la V1.

   Ordre du fichier
     01  Jetons        palette, typographie, rythme
     02  Socle         reset, base, accessibilité
     03  Typographie   titres, labels, corps, règles françaises
     04  Primitives    conteneurs, grilles, filets, révélation
     05  Grain         signal artisanal
     06  Navigation
     07  Seuil         voile d'entrée
     08  Hero
     09  Boutons
     10  Le monde
     11  Les sept feux
     12  La carte
     13  Extrait & pages de lecture
     14  La trilogie
     15  L'auteur
     16  Lexique
     17  L'état du feu   chronologie, jauge, formulaires
     18  Voix            preuve sociale
     19  Pied de page
     20  Pages annexes
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  01. Jetons                                                         */
/* ------------------------------------------------------------------ */
/* --- Palette de marque (charte §2) : la source. Les composants ne
   l'emploient pas directement — ils parlent en jetons de ton. --------- */
:root {
  --noir: #070708;
  --ardoise: #101C20;
  --braise: #C4783A;
  --braise-claire: #E6A85F;
  --os: #ECE7DD;
  --cendre: #8D877C;

  /* --- Typographie (charte §3) — trois familles, pas une quatrième --- */
  --titre: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --corps: "EB Garamond", Georgia, serif;
  --label: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle typographique — fluide 380 → 1440 px */
  --pas: clamp(0.68rem, 0.64rem + 0.16vw, 0.76rem);
  --pas-0: clamp(1.02rem, 0.96rem + 0.24vw, 1.16rem);
  --pas-1: clamp(1.16rem, 1.04rem + 0.5vw, 1.42rem);
  --pas-2: clamp(1.3rem, 1.1rem + 0.9vw, 1.85rem);
  --pas-3: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem);
  --pas-4: clamp(2rem, 1.34rem + 2.8vw, 3.6rem);
  --pas-5: clamp(2.9rem, 1.5rem + 6.2vw, 6.6rem);

  --tracking: 0.28em;     /* sur-titres en capitales (charte §3) */
  --tracking-ui: 0.15em;  /* micro-libellés : 0,28 em y devient illisible */

  --mesure: 36rem;
  --large: 74rem;
  --marge: clamp(1.35rem, 5vw, 3.5rem);
  --gap: clamp(4.5rem, 11vh, 9.5rem);
  --marge-tactile: 3rem;

  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.5s var(--sortie);
}

/* --- Jetons de ton — CLAIR par défaut --------------------------------
   Le site est majoritairement lisible sur ivoire ; le noir de marque est
   réservé à l'entrée (le seuil, le hero) et à ce qui doit trancher.
   La braise est assombrie en clair : #C4783A ne tient que 2,87:1 sur
   ivoire, sous le seuil de lisibilité, contre 4,89:1 pour #94551F. --- */
:root {
  --fond:      #EFEAE0;
  --fond-1:    #E9E3D7;
  --fond-2:    #E3DCCD;
  --fond-3:    #DBD3C2;
  --filet:     #C9C0AE;
  --filet-fin: rgba(35, 32, 27, 0.16);

  --texte:   #17181A;
  --texte-2: #56534C;
  --accent:  #834818;   /* tient 4,86:1 jusque sur --fond-3 */
  --accent-vif: #6E3A12;
  --accent-filet: rgba(131, 72, 24, 0.34);
  --accent-voile: rgba(131, 72, 24, 0.07);
  --sur-accent: #EFEAE0;
  --voile: 35, 32, 27;
  color-scheme: light;
}

/* --- Jetons de ton — SOMBRE ------------------------------------------
   Quatre niveaux de surface : sans échelle, tout s'aplatit en un unique
   noir et la page paraît éteinte. ---------------------------------- */
[data-ton="sombre"] {
  --fond:      #070708;
  --fond-1:    #0E1114;
  --fond-2:    #16191D;
  --fond-3:    #1D2126;
  --filet:     #2A2F35;
  --filet-fin: rgba(171, 165, 153, 0.14);

  --texte:   #ECE7DD;
  --texte-2: #A49D91;
  --accent:  #C4783A;
  --accent-vif: #E6A85F;
  --accent-filet: rgba(196, 120, 58, 0.34);
  --accent-voile: rgba(196, 120, 58, 0.09);
  --sur-accent: #070708;
  --voile: 7, 7, 8;
  color-scheme: dark;
}

/* Une section porteuse d'un ton pose aussi son fond et sa couleur. */
[data-ton] { background: var(--fond); color: var(--texte); }


/* ------------------------------------------------------------------ */
/*  02. Socle                                                          */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: var(--pas-0);
  line-height: 1.72;
  letter-spacing: 0.003em;
  /* Chiffres elzéviriens et ligatures : la page se lit comme un livre. */
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  hanging-punctuation: first last;
}

img, svg { max-width: 100%; display: block; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent-vif); }

::selection { background: var(--accent-filet); color: var(--texte); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Lien d'évitement — obligatoire sur une page longue */
.saut {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 999;
  transform: translate(-50%, -140%);
  background: var(--accent);
  color: var(--fond);
  font-family: var(--label);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.8rem 1.4rem;
  transition: transform 0.25s var(--sortie);
}
.saut:focus { transform: translate(-50%, 0); color: var(--fond); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------ */
/*  03. Typographie                                                    */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;             /* charte §3 : laisser le contraste porter */
  line-height: 1.06;
  letter-spacing: -0.008em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}

p { margin: 0 0 1.2em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

em, i { font-style: italic; }  /* charte §3 : italique = EB Garamond seul */

strong, b { font-weight: 500; color: var(--texte); }

.label {
  font-family: var(--label);
  font-weight: 500;
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  color: var(--accent);
  font-feature-settings: "kern" 1;
}
.label--cendre { color: var(--texte-2); }

.lede {
  font-family: var(--corps);
  font-size: var(--pas-1);
  line-height: 1.58;
  font-style: italic;
  color: var(--texte);
}

.mention {
  font-family: var(--label);
  font-size: var(--pas);
  letter-spacing: 0.05em;
  color: var(--texte-2);
}

/* Lettrine — Caslon, la seule occasion où la braise touche le texte */
.lettrine::first-letter {
  font-family: var(--titre);
  float: left;
  font-size: 2.9em;
  line-height: 0.82;
  padding: 0.04em 0.12em 0 0;
  color: var(--accent);
}

/* Composition « livre » : pas d'interligne entre paragraphes, alinéa. */
.livre p { margin: 0; text-indent: 1.5em; }
.livre p:first-of-type { text-indent: 0; }
.livre p + p { margin-top: 0; }
/* Séparateur de scène : trois points espacés, centrés. */
.livre .scene {
  text-align: center;
  text-indent: 0;
  color: var(--texte-2);
  letter-spacing: 1.4em;
  margin: 2.2rem 0 1.8rem;
}

/* Citation d'ouverture */
.exergue {
  font-family: var(--corps);
  font-style: italic;
  font-size: var(--pas-2);
  line-height: 1.42;
  color: var(--texte);
  margin: 0 0 2.2rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--accent-filet);
}

/* ------------------------------------------------------------------ */
/*  04. Primitives de mise en page                                     */
/* ------------------------------------------------------------------ */
.wrap { width: min(100% - var(--marge) * 2, var(--large)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--marge) * 2, var(--mesure)); margin-inline: auto; }

section { padding-block: var(--gap); position: relative; }

/* Tête de section : le sur-titre pend dans la marge sur grand écran. */
.tete {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(2.2rem, 5vh, 3.6rem);
  max-width: 46rem;
}
.tete h1,
.tete h2 { font-size: var(--pas-4); margin: 0; }
.tete .label { margin: 0; }
.tete__note { color: var(--texte-2); font-size: var(--pas-0); margin: 0.4rem 0 0; }

/* Filet de séparation — se dissout aux extrémités */
.filet {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filet) 22%, var(--filet) 78%, transparent);
  margin: 0;
}

/* Révélation au défilement — transform + opacity seulement */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.85s var(--sortie), transform 0.85s var(--sortie);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.07s; }
.reveal[data-delay="2"] { transition-delay: 0.14s; }
.reveal[data-delay="3"] { transition-delay: 0.21s; }
.reveal[data-delay="4"] { transition-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/*  05. Grain — charte §4 « fait main, anti-IA »                        */
/*  Fixe et non peint pendant le défilement : aucun repaint continu.    */
/* ------------------------------------------------------------------ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/*  06. Navigation                                                     */
/* ------------------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem var(--marge);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
/* Le fond de la barre est un calque à part, PAS un filtre posé sur .nav :
   backdrop-filter fait de son élément le bloc conteneur des descendants en
   position fixed — le tiroir de navigation se retrouverait rogné à la
   hauteur de la barre. Sur un pseudo-élément, le piège disparaît. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 7, 8, 0.9);
  backdrop-filter: blur(14px) saturate(120%);
  transition: background var(--transition);
}
.nav.is-stuck { border-bottom-color: var(--filet); }
.nav.is-stuck::before { background: rgba(7, 7, 8, 0.95); }

.nav__marque {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--titre);
  /* Libre Caslon Display est une romaine de TITRAGE : sous ~1,2 rem
     elle devient grêle. La marque reste juste au-dessus du seuil. */
  font-size: 1.24rem;
  color: var(--texte);
  white-space: nowrap;
}
.nav__marque:hover { color: var(--texte); }
.nav__marque em { font-style: normal; color: var(--accent); }

.nav__liens {
  display: flex;
  gap: clamp(1rem, 2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__liens a {
  font-family: var(--label);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--texte-2);
  position: relative;
  padding-block: 0.35rem;
}
.nav__liens a:hover,
.nav__liens a.is-active { color: var(--texte); }
.nav__liens a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--sortie);
}
.nav__liens a.is-active::after { transform: scaleX(1); }

.nav__bascule {
  display: none;
  /* Au-dessus du tiroir : le bouton qui ouvre doit aussi pouvoir fermer. */
  position: relative;
  z-index: 52;
  background: none;
  border: 1px solid var(--filet);
  color: var(--texte);
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  border-radius: 1px;
  font-family: var(--label);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: border-color var(--transition), color var(--transition);
}
.nav__bascule:hover { border-color: var(--accent); color: var(--accent); }

/* Voile derrière le tiroir de navigation : sans lui, le menu flotte
   au-dessus du texte. Créé par le script, donc absent sans JavaScript. */
.nav__fond {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(7, 7, 8, 0.74);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.nav__fond.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 940px) {
  .nav__bascule { display: block; }


  .nav__liens {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 49;   /* sous la barre de nav : le bouton Fermer reste tapable */
    width: min(84vw, 22rem);
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 5.5rem var(--marge) 2rem;
    background: var(--fond-2);
    border-left: 1px solid var(--filet);
    transform: translate3d(100%, 0, 0);
    transition: transform var(--transition);
    overflow-y: auto;
  }
  .nav__liens.is-open { transform: none; }
  /* Une entrée de menu se tape au pouce : pleine largeur, 3 rem de haut. */
  .nav__liens li { width: 100%; }
  .nav__liens a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    width: 100%;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    border-bottom: 1px solid var(--filet);
  }
  .nav__liens a::after { bottom: -1px; }
  .nav__liens li:last-child a { border-bottom: 0; }
}
/*  07. Le seuil — voile d'entrée cinématique                          */
/* ------------------------------------------------------------------ */
html.seuil-ouvert, html.seuil-ouvert body { overflow: hidden; height: 100%; }
/* Tiroir ouvert : la page ne défile plus derrière lui. */
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }

.seuil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.8rem, 5vh, 3.4rem);
  padding-block: clamp(2rem, 6vh, 4rem);
  background: var(--fond);
  overflow: hidden;
  isolation: isolate;
  transition: opacity 1.05s ease, transform 1.05s cubic-bezier(0.7, 0, 0.84, 0);
}
.seuil.is-leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }
.seuil[hidden] { display: none; }

/* La peinture respire lentement — parallaxe 2.5D de la charte §5.3,
   réduite à un mouvement de caméra très lent. */
.seuil__plaque {
  will-change: transform;
  animation: respire 38s ease-in-out infinite alternate;
}
@keyframes respire {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.4%, -0.8%, 0); }
}

/* Le cadre est cinéma (charte §3.6) : la peinture tient dans une bande
   2.39:1, le texte vit dans les bandes noires — jamais sur la peinture. */
.bande {
  position: relative;
  /* .bande est parfois un <figure> : la marge par defaut du navigateur
     (1em 40px) decalerait la peinture hors du cadre. */
  margin: 0;
  width: 100%;
  aspect-ratio: 2.39 / 1;
  max-height: 60svh;
  overflow: hidden;
  background: var(--fond);
}
@media (max-width: 760px) {
  .bande { aspect-ratio: 4 / 3; max-height: 46svh; }
}
.bande img { width: 100%; height: 100%; object-fit: cover; }
/* La photo est en 3:2, la bande en 2.39:1 : le cadrage centré par défaut
   tombe sur le plateau herbeux et jette la brume hors champ. On remonte la
   fenêtre pour garder le ciel, le rocher au large et l'arête de la falaise.
   Au téléphone la bande passe en 4:3, plus haute que large que l'image :
   c'est la largeur qui est rognée, la position verticale n'y joue plus. */
.hero__plaque, .seuil__plaque { object-position: 50% 13%; }
/* Les bords se fondent dans le noir de la page. Volontairement DISCRET :
   ces dégradés avaient été taillés pour une peinture sombre et voulue
   telle. Une photographie non retouchée a son propre ciel — trop de noir
   posé par-dessus se voit pour ce qu'il est, un cache. */
.bande::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7,7,8,0.28), rgba(7,7,8,0) 14%, rgba(7,7,8,0) 84%, rgba(7,7,8,0.42)),
    linear-gradient(to right, rgba(7,7,8,0.22), rgba(7,7,8,0) 10%, rgba(7,7,8,0) 90%, rgba(7,7,8,0.22));
}
/* Crédit photo. La source est cliquable : PAS de `pointer-events: none`
   ici, sinon le crédit devient un texte mort et le lien ne sert à rien.
   Îlot de couleurs en dur, comme la barre : il survole l'image, pas la
   page, et ne doit donc pas suivre les jetons de ton. */
.bande__credit {
  position: absolute;
  right: 0.9rem;
  bottom: 0.6rem;
  z-index: 1;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(236, 231, 221, 0.5);
  text-shadow: 0 1px 3px rgba(7, 7, 8, 0.9);
}
.bande__credit a {
  color: rgba(236, 231, 221, 0.72);
  text-decoration-color: rgba(236, 231, 221, 0.3);
  text-underline-offset: 0.2em;
}
.bande__credit a:hover,
.bande__credit a:focus-visible { color: #fff; text-decoration-color: currentColor; }
@media (max-width: 760px) {
  .bande__credit { right: 0.6rem; bottom: 0.45rem; font-size: 0.6rem; }
}

.seuil__centre {
  position: relative;
  z-index: 2;
  width: min(100% - var(--marge) * 2, var(--large));
  margin-inline: auto;
  max-width: 46rem;
  animation: monte 1.5s var(--sortie) both;
}
@keyframes monte {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}
.seuil__sur { display: inline-block; margin-bottom: 1.3rem; color: var(--accent); }
.seuil__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: var(--pas-5);
  line-height: 0.96;
  margin: 0 0 2rem;
  color: var(--texte);
}
.seuil__indice {
  display: block;
  margin-top: 1.7rem;
  font-family: var(--label);
  font-size: 0.65rem;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: #b3a99c;
}
.seuil__entrer { font-size: 0.8rem; padding: 1.05rem 2.9rem; letter-spacing: 0.3em; }

/* ------------------------------------------------------------------ */
/*  08. Hero — composition asymétrique, le titre pèse en bas à gauche  */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.8rem, 5vh, 3.2rem);
  padding-block: clamp(5rem, 12vh, 8rem) clamp(3rem, 8vh, 5rem);
  overflow: hidden;
}

.hero__inner {
  width: min(100% - var(--marge) * 2, var(--large));
  margin-inline: auto;
  max-width: 46rem;
}
.hero__sur { display: inline-block; margin-bottom: 1.2rem; color: var(--accent); }
.hero__titre {
  font-size: var(--pas-5);
  line-height: 0.95;
  margin: 0;
}
.hero__accroche {
  font-family: var(--corps);
  font-style: italic;
  font-size: var(--pas-1);
  color: var(--texte);
  max-width: 30ch;
  margin: 1.7rem 0 2.2rem;
  line-height: 1.52;
}
.hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.hero__descendre {
  position: absolute;
  bottom: 1.1rem;
  right: var(--marge);
  font-family: var(--label);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--texte-2);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  z-index: 2;
}
.hero__descendre::after {
  content: "";
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(var(--accent), transparent);
  animation: goutte 2.6s ease-in-out infinite;
}
@keyframes goutte {
  0%, 100% { opacity: 0.28; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);    transform-origin: top; }
}
@media (max-height: 780px), (max-width: 700px) { .hero__descendre { display: none; } }

/* ------------------------------------------------------------------ */
/*  09. Boutons                                                        */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--label);
  font-size: 0.73rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.95rem 1.7rem;
  border-radius: 1px;
  border: 1px solid var(--accent);
  color: var(--sur-accent);
  background: var(--accent);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform 0.22s var(--sortie);
}
.btn:hover {
  background: var(--accent-vif);
  border-color: var(--accent-vif);
  color: var(--sur-accent);
  transform: translate3d(0, -2px, 0);
}
.btn:active { transform: translate3d(0, 0, 0) scale(0.985); }

.btn--fantome {
  background: transparent;
  color: var(--texte);
  border-color: var(--filet);
}
.btn--fantome:hover {
  background: transparent;
  color: var(--accent-vif);
  border-color: var(--accent);
}

/* Lien fléché — remplace un bouton quand l'action est secondaire */
.lien-fleche {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.lien-fleche::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--sortie);
}
.lien-fleche:hover::after { width: 2.4rem; }

/* ------------------------------------------------------------------ */
/*  10. Le monde — colonne d'appui à gauche, entrées filetées à droite */
/* ------------------------------------------------------------------ */
.monde__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .monde__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .monde__appui { position: sticky; top: 7rem; }
}
.monde__appui .lede { margin-bottom: 1.4rem; }
.monde__appui p { color: var(--texte-2); }

.piliers { display: grid; }
.pilier {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--filet);
  transition: border-color var(--transition);
}
.pilier:last-child { border-bottom: 1px solid var(--filet); }
.pilier:hover { border-top-color: var(--accent-filet); }
.pilier__glyphe { color: var(--accent); margin-top: 0.25rem; }
.pilier h3 { font-size: var(--pas-2); margin: 0 0 0.35rem; }
.pilier p { font-size: 0.99rem; color: var(--texte-2); line-height: 1.6; margin: 0; }
.pilier__mot {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--corps);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--texte-2);
}

/* ------------------------------------------------------------------ */
/*  11-12. L'atlas — carte interactive                                 */
/*  Les repères sont positionnés en POURCENTAGE de la carte : quand    */
/*  l'image change, seules les valeurs data-x / data-y bougent.        */
/*  Aide au recalage : servir le site avec ?reperes=1 (tools/serve.mjs)*/
/* ------------------------------------------------------------------ */
.atlas {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  .atlas { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* Filtres */
.atlas__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}
.atlas__filtres button {
  font-family: var(--label);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--texte-2);
  background: none;
  border: 1px solid var(--filet);
  border-radius: 1px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.atlas__filtres button:hover { color: var(--texte); border-color: var(--texte-2); }
.atlas__filtres button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent-filet);
  background: var(--accent-voile);
}

/* La carte */
.atlas__carte {
  position: relative;
  margin: 0;
  border: 1px solid var(--filet);
  border-radius: 2px;
  overflow: hidden;
  background: #0b0e10;
  line-height: 0;
}
.atlas__carte img { width: 100%; height: auto; }

.atlas__reperes { position: absolute; inset: 0; }

/* Un repère */
.repere {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.repere[hidden] { display: none; }
.repere__point {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3d3a35;
  box-shadow: 0 0 0 2px rgba(236, 231, 221, 0.55);
  transition: transform 0.3s var(--sortie), background 0.3s var(--sortie);
}
.repere:hover .repere__point,
.repere.is-actif .repere__point { transform: scale(1.6); }
.repere.is-actif { z-index: 4; }

/* Les sept feux : braise, et une aura pour celui qui brûle encore */
.repere--feu .repere__point {
  width: 12px;
  height: 12px;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(7, 7, 8, 0.5), 0 0 16px 4px rgba(196, 120, 58, 0.55);
  animation: braise 5.5s ease-in-out infinite;
}
@keyframes braise { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
.repere--feu.is-eteint .repere__point {
  background: #8a7f70;
  box-shadow: 0 0 0 2px rgba(7, 7, 8, 0.45);
  animation: none;
}
/* Les mers n'ont pas de point : seulement leur nom au survol */
.repere--mer .repere__point {
  width: 7px;
  height: 7px;
  background: rgba(16, 28, 32, 0.55);
  box-shadow: 0 0 0 2px rgba(236, 231, 221, 0.4);
}

.repere__nom {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -0.15rem;
  white-space: nowrap;
  font-family: var(--label);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte);
  background: rgba(7, 7, 8, 0.88);
  padding: 0.2rem 0.4rem;
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--sortie);
}
.repere:hover .repere__nom,
.repere:focus-visible .repere__nom,
.repere.is-actif .repere__nom { opacity: 1; }

/* ---- L'atlas au téléphone -----------------------------------------
   Une carte de 2:3 tombée à 350 px ne se lit pas et ne se tape pas :
   dix-neuf repères y tiendraient dans un timbre-poste. Les MÊMES boutons
   se replient donc en liste sous la carte — mêmes données, même script,
   une présentation par contexte. La carte reste là pour l'oeil, et le
   lien « voir en grand » pour qui veut la détailler. */
@media (max-width: 860px) {
  .atlas__carte { border-radius: 0; }

  .atlas__reperes {
    position: static;
    display: grid;
    border-top: 1px solid var(--filet);
  }

  .repere {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 3.1rem;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--filet);
    border-left: 2px solid transparent;
    background: var(--fond-2);
    transition: background var(--transition), border-color var(--transition);
  }
  .repere:last-child { border-bottom: 0; }
  .repere.is-actif {
    background: var(--accent-voile);
    border-left-color: var(--accent);
  }
  .repere__point { justify-self: center; }
  .repere:hover .repere__point,
  .repere.is-actif .repere__point { transform: scale(1.25); }

  .repere__nom {
    position: static;
    transform: none;
    opacity: 1;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    white-space: normal;
  }
  /* Le rôle est déjà porté par le bouton : on l'affiche sans le dupliquer. */
  .repere::after {
    content: attr(data-role);
    font-family: var(--corps);
    font-size: 0.86rem;
    font-style: italic;
    color: var(--texte-2);
    text-align: right;
    line-height: 1.35;
  }

  .atlas__fiche { min-height: 0; }
}

.atlas__credit {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--texte-2);
}

/* Fiche de lecture */
.atlas__fiche {
  border-top: 1px solid var(--accent-filet);
  padding-top: 1.4rem;
  min-height: 14rem;
}
@media (min-width: 1000px) { .atlas__fiche { position: sticky; top: 6.5rem; } }
.atlas__fiche .label { display: block; margin-bottom: 0.5rem; }
.atlas__fiche h3 { font-size: var(--pas-3); margin: 0 0 0.7rem; }
.atlas__fiche p { color: var(--texte-2); }
.atlas__etat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-2);
  border: 1px solid var(--filet);
  padding: 0.35rem 0.8rem;
  border-radius: 1px;
}
.atlas__etat::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.atlas__etat[data-vif] { color: var(--accent-vif); border-color: var(--accent-filet); }
.atlas__aide {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
  font-size: 0.9rem;
}

/* Aide au recalage des repères (locale, activée par ?reperes=1) */
.reperes-visibles .repere__nom { opacity: 1; }
.reperes-visibles .repere__point { outline: 1px dashed rgba(255, 0, 0, 0.8); }

/*  13. Extrait & pages de lecture                                     */
/* ------------------------------------------------------------------ */
.extrait {
  background: var(--fond-1);
}
.extrait__corps p { color: var(--texte); }
.extrait__suite {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--filet);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.extrait__ref {
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--texte-2);
}

/* Barre de progression de lecture */
.progression {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 999;
  pointer-events: none;
  transform-origin: left;
}

/* ------------------------------------------------------------------ */
/*  14. La trilogie — le tome I porte plus de poids que les deux autres */
/* ------------------------------------------------------------------ */
.tomes { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .tomes { grid-template-columns: 1.35fr 1fr 1fr; align-items: stretch; }
}
.tome {
  border: 1px solid var(--filet);
  border-radius: 2px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--fond-2);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.tome:hover { transform: translate3d(0, -3px, 0); border-color: var(--texte-2); }
.tome--vif { border-color: var(--accent-filet); }
.tome--vif::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 100%;
  background: linear-gradient(var(--accent), transparent 78%);
}
.tome__num {
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--accent);
}
.tome--futur .tome__num { color: var(--texte-2); }
.tome h3 { font-size: var(--pas-3); margin: 0; }
.tome--futur h3 { font-size: var(--pas-2); color: var(--texte-2); }
.tome p { color: var(--texte-2); font-size: 0.99rem; margin: 0; }
.tome--vif p { color: var(--texte); }
.tome__etat {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--texte-2);
}
.tome--vif .tome__etat { color: var(--accent-vif); }

/* ------------------------------------------------------------------ */
/*  15. L'auteur                                                       */
/* ------------------------------------------------------------------ */
.auteur { background: var(--fond-1); }
.auteur__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}
@media (min-width: 800px) {
  .auteur__grille { grid-template-columns: 0.72fr 1.28fr; }
}
.auteur__sceau {
  border: 1px solid var(--filet);
  border-radius: 2px;
  background: var(--fond-2);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
}
.auteur__sceau svg { width: 82%; height: auto; }
.auteur__corps p { color: var(--texte); }
.auteur__signe {
  font-style: italic;
  color: var(--accent-vif);
  margin-top: 1.4rem;
  font-size: var(--pas-1);
}

/* ------------------------------------------------------------------ */
/*  16. Lexique — filtrable                                            */
/* ------------------------------------------------------------------ */
.lex__barre {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.lex__champ {
  flex: 1 1 16rem;
  position: relative;
  display: flex;
  align-items: center;
}
.lex__champ svg { position: absolute; left: 0.85rem; color: var(--texte-2); }
.lex__champ input {
  width: 100%;
  font-family: var(--corps);
  font-size: 1rem;
  color: var(--texte);
  background: rgba(var(--voile), 0.35);
  border: 1px solid var(--filet);
  border-radius: 1px;
  padding: 0.72rem 0.9rem 0.72rem 2.6rem;
  transition: border-color var(--transition), background var(--transition);
}
.lex__champ input::placeholder { color: var(--texte-2); opacity: 0.75; }
.lex__champ input:focus { outline: none; border-color: var(--accent); background: rgba(var(--voile), 0.06); }
.lex__compte {
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--texte-2);
  font-variant-numeric: tabular-nums;
}

.lex { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
.lex__entree {
  padding: 1.4rem 1.3rem;
  border-top: 1px solid var(--filet);
  transition: background var(--transition);
}
.lex__entree:hover { background: var(--fond-2); }
.lex__entree[hidden] { display: none; }
.lex__terme { font-family: var(--titre); font-size: var(--pas-2); color: var(--texte); margin: 0 0 0.1rem; }
.lex__glose {
  font-family: var(--corps);
  font-style: italic;
  font-size: 0.94rem;
  color: var(--texte-2);
  margin: 0 0 0.5rem;
}
.lex__def { font-size: 0.97rem; color: var(--texte-2); line-height: 1.58; margin: 0; }
.lex__vide {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--texte-2);
  font-style: italic;
  border-top: 1px solid var(--filet);
}
.lex__note { margin-top: 1.8rem; color: var(--texte-2); font-size: 0.97rem; }

/* ------------------------------------------------------------------ */
/*  17. L'état du feu                                                  */
/* ------------------------------------------------------------------ */
.etat__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 3.4rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .etat__grille { grid-template-columns: 1.12fr 0.88fr; align-items: start; }
}

/* Jauge d'avancement du manuscrit */
.jauge {
  border: 1px solid var(--filet);
  border-radius: 2px;
  background: var(--fond-2);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 2.4rem;
}
.jauge__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}
.jauge__tete .label { margin: 0; }
.jauge__pct {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--accent-vif);
  font-variant-numeric: tabular-nums;
}
.jauge__piste {
  height: 3px;
  background: var(--filet);
  border-radius: 2px;
  overflow: hidden;
}
.jauge__barre {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-vif));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.6s var(--sortie);
}
.jauge.is-in .jauge__barre { transform: scaleX(var(--part, 0.9)); }
.jauge__chiffres {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0 0;
  padding: 0;
}
.jauge__chiffres dt,
.jauge__chiffres .cle {
  font-family: var(--label);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-2);
  margin-bottom: 0.25rem;
}
.jauge__chiffres .val {
  font-family: var(--titre);
  font-size: var(--pas-2);
  color: var(--texte);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

/* Chronologie */
.chrono { list-style: none; margin: 0; padding: 0; }
.chrono li {
  position: relative;
  padding: 0 0 1.9rem 1.9rem;
  border-left: 1px solid var(--filet);
}
.chrono li:last-child { padding-bottom: 0; border-left-color: transparent; }
.chrono li::before {
  content: "";
  position: absolute;
  left: -5px; top: 0.45rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--filet);
}
.chrono li.is-now::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(196, 120, 58, 0.16);
}
.chrono__date {
  display: block;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.chrono li:not(.is-now) .chrono__date { color: var(--texte-2); }
.chrono__titre { font-family: var(--titre); font-size: var(--pas-2); color: var(--texte); margin: 0 0 0.3rem; }
.chrono p { font-size: 0.97rem; color: var(--texte-2); margin: 0; }

/* Carte d'appel */
.appel {
  border: 1px solid var(--accent-filet);
  border-radius: 2px;
  padding: clamp(1.7rem, 4vw, 2.5rem);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--accent-voile), transparent 60%),
    var(--fond-2);
  position: sticky;
  top: 7rem;
}
@media (max-width: 859px) { .appel { position: static; } }
.appel h3 { font-size: var(--pas-3); margin-bottom: 0.7rem; }
.appel p { color: var(--texte-2); font-size: 0.99rem; }
.appel__fine { font-size: 0.84rem; color: var(--texte-2); margin-top: 1.2rem; }

/* Formulaires */
.form { margin-top: 1.4rem; display: grid; gap: 0.85rem; }
.form__champ { display: grid; gap: 0.32rem; }
.form__champ > span {
  font-family: var(--label);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-2);
}
.form input,
.form textarea {
  font-family: var(--corps);
  font-size: 1rem;
  color: var(--texte);
  background: rgba(var(--voile), 0.35);
  border: 1px solid var(--filet);
  border-radius: 1px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color var(--transition), background var(--transition);
  resize: vertical;
}
.form input::placeholder,
.form textarea::placeholder { color: var(--texte-2); opacity: 0.75; }
.form input:focus,
.form textarea:focus { outline: none; border-color: var(--accent); background: rgba(var(--voile), 0.06); }
.form input[aria-invalid="true"] { border-color: #b3654a; }
.form__envoi { margin-top: 0.3rem; justify-self: start; }
.form__envoi[disabled] { opacity: 0.55; cursor: default; transform: none; }
.form__msg {
  font-family: var(--label);
  font-size: 0.81rem;
  margin: 0;
  padding-top: 0.4rem;
  line-height: 1.5;
}
.form__msg.is-ok { color: var(--accent-vif); }
.form__msg.is-err { color: #d98a6a; }
.form__accord {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--label);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--texte-2);
  cursor: pointer;
}
.form__accord input {
  flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem;
  margin-top: 0.14rem;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Capture e-mail « Rejoindre les veilleurs » */
.veille { padding-block: var(--gap); }
.veille__inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  border: 1px solid var(--filet);
  border-radius: 3px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--accent-voile), transparent 58%),
    var(--fond-2);
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.3rem, 4vw, 3.2rem);
  position: relative;
  overflow: hidden;
}
.veille__inner::before {
  content: "";
  position: absolute;
  top: 0; left: 16%; right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.veille .label { display: inline-block; margin-bottom: 1rem; }
.veille h2 { font-size: var(--pas-4); margin: 0 0 0.9rem; }
.veille__lede { color: var(--texte); font-size: var(--pas-0); max-width: 34rem; margin: 0 auto 1.7rem; }
.veille__lede em { color: var(--accent-vif); }
.veille__form {
  display: flex;
  gap: 0.65rem;
  max-width: 31rem;
  margin-inline: auto;
  flex-wrap: wrap;
  justify-content: center;
}
.veille__form input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--corps);
  font-size: 1.04rem;
  color: var(--texte);
  background: rgba(var(--voile), 0.35);
  border: 1px solid var(--filet);
  border-radius: 1px;
  padding: 0.92rem 1.05rem;
  transition: border-color var(--transition), background var(--transition);
}
.veille__form input[type="email"]::placeholder { color: var(--texte-2); opacity: 0.75; }
.veille__form input[type="email"]:focus { outline: none; border-color: var(--accent); background: rgba(var(--voile), 0.06); }
.veille__fine { font-size: 0.84rem; color: var(--texte-2); margin-top: 1.1rem; }

/* ------------------------------------------------------------------ */
/*  18. Voix — preuve sociale (activée dès les premiers vrais retours) */
/* ------------------------------------------------------------------ */
.voix__grille {
  display: grid;
  gap: 1.3rem;
  margin-top: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.voix {
  border: 1px solid var(--filet);
  border-radius: 2px;
  background: var(--fond-2);
  padding: 1.7rem;
  margin: 0;
}
.voix blockquote {
  margin: 0;
  font-family: var(--corps);
  font-style: italic;
  font-size: var(--pas-1);
  line-height: 1.55;
  color: var(--texte);
}
.voix figcaption {
  margin-top: 1rem;
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-2);
}
.voix figcaption::before { content: "— "; color: var(--accent); }

/* ------------------------------------------------------------------ */
/*  19. Pied de page                                                   */
/* ------------------------------------------------------------------ */
.pied {
  border-top: 1px solid var(--filet);
  padding-block: clamp(3rem, 7vh, 5rem);
  background: var(--fond);
}
.pied__grille {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: start;
}
.pied__marque { font-family: var(--titre); font-size: var(--pas-2); line-height: 1.14; color: var(--texte); }
.pied__marque span {
  display: block;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texte-2);
  margin-top: 0.5rem;
}
.pied__liens { display: grid; gap: 0.65rem; justify-items: start; }
.pied__liens a,
.pied__liens > span {
  font-family: var(--label);
  font-size: 0.77rem;
  letter-spacing: 0.05em;
  color: var(--texte-2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.pied__liens a:hover { color: var(--accent); }
.pied__legal {
  margin-top: 2.6rem;
  font-family: var(--label);
  font-size: 0.67rem;
  letter-spacing: 0.03em;
  color: var(--texte-2);
  opacity: 0.75;
  line-height: 1.7;
}
.pied__legal a { color: var(--texte-2); text-decoration: underline; text-underline-offset: 2px; }
.pied__legal a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ */
/*  20. Pages annexes                                                  */
/* ------------------------------------------------------------------ */
.page { padding: clamp(7rem, 14vh, 9.5rem) 0 clamp(3rem, 8vh, 5rem); }
.page .tete { margin-bottom: 2.6rem; }
.page h1 { font-size: var(--pas-4); }
.page h2 { font-size: var(--pas-2); margin: 2.4rem 0 0.7rem; }
.page p { color: var(--texte); }

.nav--simple { position: static; background: var(--fond); border-bottom: 1px solid var(--filet); }
.nav--simple .nav__liens {
  position: static;
  flex-direction: row;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  transform: none;
}

.centre {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6rem var(--marge);
}

/* Éditions premium (La Forge) */
.editions {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 2.6rem auto 2.2rem;
  max-width: 50rem;
  text-align: left;
}
.edition {
  border: 1px solid var(--filet);
  border-radius: 2px;
  padding: 1.5rem;
  background: var(--fond-2);
}
.edition h3 { font-size: var(--pas-2); margin-bottom: 0.35rem; }
.edition p { font-size: 0.95rem; margin: 0; color: var(--texte-2); }
.edition .label { font-size: 0.6rem; display: block; margin-bottom: 0.7rem; }

.badge {
  font-family: var(--label);
  font-size: 0.64rem;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-filet);
  padding: 0.4rem 1rem;
  border-radius: 1px;
  display: inline-block;
  margin-bottom: 1.8rem;
}

/* ------------------------------------------------------------------ */
/*  21. Téléphone — ce que le grand écran peut se permettre et pas lui */
/* ------------------------------------------------------------------ */
@media (max-width: 760px) {
  :root {
    /* Sur un écran de 390 px, 300 px de noir entre deux sections, ce
       n'est plus de la respiration : c'est du défilement à vide. */
    --gap: clamp(3.2rem, 7vh, 4.6rem);
    --marge: 1.35rem;
  }

  .tete { margin-bottom: 1.8rem; }
  .tete h2 { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.6rem); }

  /* Le hero : la peinture, le titre, l'accroche et les deux boutons
     doivent tenir dans un écran. Pas de hauteur imposée en plus. */
  .hero {
    min-height: 0;
    padding-block: clamp(4.5rem, 11vh, 6rem) clamp(2.4rem, 6vh, 3.4rem);
    gap: 1.6rem;
  }
  .hero__cta { display: grid; gap: 0.7rem; }
  .hero__cta .btn { justify-content: center; }
  .hero__accroche { margin: 1.2rem 0 1.6rem; max-width: none; }

  .seuil { gap: 1.8rem; }
  .seuil__titre { margin-bottom: 1.6rem; }
  .seuil__entrer { padding: 1.05rem 2.2rem; }

  /* Le halo est le sujet : on garde le cadrage qui le montre. */
  .bande img { object-position: 42% 50%; }

  /* Toute cible tapable fait au moins 3 rem de haut. */
  .btn { padding: 1rem 1.5rem; min-height: var(--marge-tactile); }
  .atlas__filtres button,
  .lex__champ input,
  .form input,
  .form textarea,
  .veille__form input[type="email"] { min-height: var(--marge-tactile); }
  .atlas__filtres button { padding-inline: 0.9rem; }

  /* Le formulaire de capture : deux lignes plutôt qu'un champ écrasé. */
  .veille__form { display: grid; gap: 0.7rem; }
  .veille__form .btn { justify-content: center; }
  .form__envoi { justify-self: stretch; justify-content: center; }

  /* Le lexique : une colonne, sans le rembourrage latéral inutile. */
  .lex { grid-template-columns: minmax(0, 1fr); }
  .lex__entree { padding-inline: 0; }
  .lex__barre { gap: 0.6rem; }

  /* La trilogie et les tomes : pleine largeur, plus d'air en moins. */
  .tome { padding: 1.5rem 1.3rem; }

  /* Chronologie et appel : le panneau collant n'a pas de sens ici. */
  .appel { position: static; padding: 1.5rem 1.3rem; }
  .chrono li { padding-left: 1.5rem; padding-bottom: 1.5rem; }

  .pied__grille { gap: 1.8rem; }
  .pied__legal { margin-top: 2rem; }
}

/* Écrans très étroits : on retire le dernier gras superflu. */
@media (max-width: 380px) {
  .atlas__filtres button { font-size: 0.6rem; letter-spacing: 0.1em; }
  .repere::after { display: none; }
}

/* Le lien « voir en grand » est la seule façon de détailler la carte au
   téléphone : il mérite d'être un bouton, pas une note en bas de page. */
.atlas__credit { display: grid; gap: 0.9rem; justify-items: start; }
.atlas__credit span { font-size: 0.9rem; color: var(--texte-2); }
@media (max-width: 760px) {
  .atlas__credit { justify-items: stretch; }
  .atlas__zoom { justify-content: center; }
}

/* Tiroir ouvert : la barre de navigation reste au-dessus et devient opaque,
   sinon le bouton « Fermer » disparaît sous le menu qu'il doit fermer. */
html.menu-ouvert .nav { border-bottom-color: var(--filet); }
html.menu-ouvert .nav::before {
  background: rgba(7, 7, 8, 0.94);
  backdrop-filter: blur(12px) saturate(120%);
}

@media (max-width: 940px) {
  /* La marque et la bascule sont les deux seules cibles de la barre :
     elles font la hauteur d'un pouce. */
  .nav__marque { min-height: var(--marge-tactile); display: inline-flex; align-items: center; }
  .nav__bascule { min-height: var(--marge-tactile); padding-inline: 1.1rem; }
}

/* ------------------------------------------------------------------ */
/*  22. Ton clair — ce qui doit être repris quand le fond s'inverse    */
/* ------------------------------------------------------------------ */
/* Le grain est un voile lumineux : sur ivoire il faut l'inverser,
   sinon il éclaircit un fond déjà clair et disparaît. */


/* La lettrine et l'exergue gardent l'accent, assombri par le jeton. */
.lettrine::first-letter { color: var(--accent); }

/* Le sceau de l'auteur est dessiné pour le noir : on lui rend son fond. */
.auteur__sceau { background: #101215; border-color: #23272c; }

/* Champs de saisie : sur ivoire, un fond enfoncé plutôt qu'un trou noir. */
.form input,
.form textarea,
.lex__champ input,
.veille__form input[type="email"] {
  background: #F7F3EA;
  border-color: var(--filet);
}

/* Le bouton fantôme a besoin d'un trait plus affirmé sur fond clair. */
.btn--fantome { border-color: var(--filet); color: var(--texte); }
.btn--fantome:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------------ */
/*  23. Accueil — les quatre portes                                    */
/* ------------------------------------------------------------------ */
.pitch { background: var(--fond); }

.portes__grille {
  display: grid;
  gap: 1px;
  background: var(--filet);
  border-block: 1px solid var(--filet);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .portes__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .portes__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.porte {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.2rem, 2.4vw, 1.8rem);
  background: var(--fond);
  color: var(--texte);
  transition: background var(--transition), color var(--transition);
}
.porte:hover { background: var(--fond-2); color: var(--texte); }
.porte__num {
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-ui);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.porte h3 { font-size: var(--pas-2); margin: 0; }
.porte p { font-size: 0.97rem; color: var(--texte-2); margin: 0; }
.porte::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  margin-top: 0.5rem;
  background: var(--accent);
  transition: width 0.35s var(--sortie);
}
.porte:hover::after { width: 2.6rem; }

/* ------------------------------------------------------------------ */
/*  24. La barre de navigation est un îlot                             */
/*  Elle survole des sections claires ET sombres : ses couleurs ne      */
/*  peuvent pas suivre les jetons de la page, sinon elle devient        */
/*  illisible à chaque changement de ton. Elle reste noire, toujours.   */
/* ------------------------------------------------------------------ */
.nav, .nav--simple { color: #ECE7DD; }
.nav .nav__marque { color: #ECE7DD; }
.nav .nav__marque em { color: #C4783A; }
.nav .nav__liens a { color: #9C958A; }
.nav .nav__liens a:hover,
.nav .nav__liens a.is-active,
.nav .nav__liens a[aria-current="page"] { color: #ECE7DD; }
.nav .nav__liens a::after,
.nav .nav__liens a[aria-current="page"]::after { background: #C4783A; }
.nav .nav__liens a[aria-current="page"]::after { transform: scaleX(1); }
.nav__bascule { color: #ECE7DD; border-color: #2A2F35; }
.nav__bascule:hover { border-color: #C4783A; color: #C4783A; }
.nav--simple { position: static; background: #070708; border-bottom: 1px solid #2A2F35; }
.nav--simple::before { display: none; }

/* Le tiroir mobile appartient à la barre : même îlot, mêmes couleurs. */
@media (max-width: 940px) {
  .nav__liens { background: #101215; border-left-color: #2A2F35; }
  .nav__liens a { border-bottom-color: #2A2F35; }
}

/* ------------------------------------------------------------------ */
/*  25. Transitions entre les pages                                    */
/*  Le site est multi-pages : sans ça, chaque lien produit un « clac »  */
/*  de rechargement. L'API native fait un fondu croisé ; les            */
/*  navigateurs qui ne la connaissent pas ignorent simplement la règle. */
/* ------------------------------------------------------------------ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: sortie-page 0.28s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: entree-page 0.42s cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes sortie-page { to { opacity: 0; } }
@keyframes entree-page { from { opacity: 0; } }

/* La barre de navigation ne clignote pas d'une page à l'autre : elle est
   la même, elle ne bouge pas. */
.nav { view-transition-name: barre; }
::view-transition-group(barre) { animation-duration: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ------------------------------------------------------------------ */
/*  26. Les repères vivent sur le parchemin                            */
/*  La carte est crème quel que soit le ton de la page : les repères    */
/*  doivent se régler sur ELLE, pas sur les jetons de la page.         */
/* ------------------------------------------------------------------ */
@media (min-width: 861px) {
  .repere__point { background: #4A4034; box-shadow: 0 0 0 2px rgba(239, 234, 224, 0.75); }
  .repere--feu .repere__point {
    background: #C4783A;
    box-shadow: 0 0 0 2px rgba(60, 48, 36, 0.35), 0 0 16px 4px rgba(196, 120, 58, 0.5);
  }
  .repere--feu.is-eteint .repere__point {
    background: #6B6152;
    box-shadow: 0 0 0 2px rgba(239, 234, 224, 0.7);
  }
  .repere--mer .repere__point { background: #5C6B70; box-shadow: 0 0 0 2px rgba(239, 234, 224, 0.7); }
  /* L'étiquette au survol est une bulle posée sur l'image : elle reste
     sombre, sinon elle disparaît dans le parchemin. */
  .repere__nom { background: rgba(7, 7, 8, 0.9); color: #ECE7DD; }
}

/* ------------------------------------------------------------------ */
/*  27. Les lieux du Tome I                                            */
/*  À l'échelle du monde ils sont des têtes d'épingle : on les nomme   */
/*  en liste plutôt que de poser des épingles qui se chevaucheraient.  */
/* ------------------------------------------------------------------ */
.lieux { margin-top: clamp(3.5rem, 8vh, 6rem); }
.lieux .tete { margin-bottom: 1.6rem; }
.lieux h2 { font-size: var(--pas-3); }

.lieux__liste {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--filet);
}
@media (min-width: 720px) { .lieux__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); } }
.lieux__liste > div { padding: 1.1rem 0; border-bottom: 1px solid var(--filet); }

.lieux__liste dt {
  font-family: var(--titre);
  font-size: var(--pas-2);
  color: var(--texte);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.lieux__liste dt span {
  font-family: var(--label);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--accent);
  flex: none;
}
.lieux__liste dd { margin: 0; font-size: 0.97rem; color: var(--texte-2); line-height: 1.6; }