/* ══════════════════════════════════════════════════════
   HORIZON — Le Triangle des Égarés
   Une station de relevé océanographique, aujourd'hui. L'océan et l'île
   donnent la matière — bleus profonds, lagon, sable ; les instruments
   donnent le ton — étiquettes en chasse fixe, repères d'angle, sonar,
   isobathes. Rien qui ne puisse sortir d'un navire de recherche actuel :
   la science-fiction reste une impression, pas un décor.
   ══════════════════════════════════════════════════════ */

:root{
  --abyss:#020a0f;
  --deep:#041520;
  --sea:#082433;
  --ink:#e6f2f2;
  --muted:#9ab4b9;
  --faint:#5e7d85;
  --lagoon:#3fdccb;
  --aqua:#7eeee2;
  --teal:#2bb8ad;
  --signal:#ff8b3d;       /* l'orange des bouées : réservé à ce qui est vivant ou en alerte */
  --sand:#e8d8b4;
  --line:rgba(126,226,218,.17);
  --line-soft:rgba(126,226,218,.08);

  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* Les repères d'angle des panneaux : quatre traits posés en fond, en
     retrait de 8 px pour ne pas être rognés par l'arrondi. En fond plutôt
     qu'en pseudo-éléments : les cartes et les portes s'en servent déjà. */
  --angles:
    linear-gradient(rgba(126,238,226,.5),rgba(126,238,226,.5)) left 8px top 8px / 14px 1px no-repeat,
    linear-gradient(rgba(126,238,226,.5),rgba(126,238,226,.5)) left 8px top 8px / 1px 14px no-repeat,
    linear-gradient(rgba(126,238,226,.5),rgba(126,238,226,.5)) right 8px bottom 8px / 14px 1px no-repeat,
    linear-gradient(rgba(126,238,226,.5),rgba(126,238,226,.5)) right 8px bottom 8px / 1px 14px no-repeat;
  --panneau:linear-gradient(160deg,rgba(10,44,60,.58),rgba(4,21,32,.42));

  --wrap:1200px;
  --nav-h:70px;
  --rayon:10px;
  --ease:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,.35vw + 14px,16.5px);
  line-height:1.72;
  background:
    radial-gradient(1100px 700px at 85% -5%,rgba(43,184,173,.07),transparent 60%),
    radial-gradient(900px 600px at 0% 100%,rgba(79,210,234,.05),transparent 60%),
    var(--abyss);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* La trame des instruments : un quadrillage à peine visible, qui s'éteint
   en descendant. Il reste derrière tout, y compris les sections pleines. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(126,226,218,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,226,218,.035) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 75%);
}

img,svg,video{display:block;max-width:100%}
[hidden]{display:none !important}   /* doit primer sur la règle svg ci-dessus */
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:-.01em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--aqua)}
/* Sora n'a pas d'italique : le navigateur en fabriquerait un penché. La
   mise en valeur passe par la couleur. */
em{font-style:normal}

::selection{background:rgba(63,220,203,.3);color:#fff}

.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}

/* ── Grain global ─────────────────────────────────── */
.grain{
  position:fixed;inset:-120%;z-index:9;pointer-events:none;opacity:.04;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
}

/* ── Passage d'une page à l'autre ─────────────────────
   Le site est fait de pages séparées : sans rien, chaque clic coupe
   l'image d'un coup. Entre deux pages, l'écran repasse donc par
   l'instrument : la trame de relevé, le halo du sonar, et la ligne
   d'horizon de la marque qui se tend d'un bord à l'autre. Elle se tend
   quand on quitte une page, se rétracte quand la suivante s'ouvre — le
   même geste, poursuivi d'un document à l'autre.

   Le voile est en CSS et non fabriqué par le script : il doit couvrir
   l'écran dès le premier affichage, avant que script.js soit lu, sinon
   la page apparaîtrait nue le temps d'une image. Il se pose par-dessus
   tout, grain et barre compris, et ne reçoit jamais le pointeur. */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% 50%,rgba(63,220,203,.11),transparent 70%),
    linear-gradient(rgba(126,226,218,.05) 1px,transparent 1px) 0 0/88px 88px,
    linear-gradient(90deg,rgba(126,226,218,.05) 1px,transparent 1px) 0 0/88px 88px,
    var(--abyss);
  animation:page-entree .6s var(--ease) forwards;
}
/* L'écran se tient un court instant avant de se lever : sans cette
   retenue, la courbe du site — très rapide au départ — découvre la page
   presque aussitôt et le passage ne se lit pas. */
@keyframes page-entree{0%,18%{opacity:1}100%{opacity:0;visibility:hidden}}

/* La ligne d'horizon. Elle a sa propre couche : le voile se dissipe
   d'un bloc, elle se rétracte vers son centre. */
html::after{
  content:"";position:fixed;left:0;right:0;top:50%;height:1px;
  z-index:61;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lagoon) 22%,var(--aqua),var(--lagoon) 78%,transparent);
  box-shadow:0 0 16px rgba(63,220,203,.55);
  animation:horizon-entree .5s var(--ease) forwards;
}
@keyframes horizon-entree{0%,12%{scale:1 1;opacity:1}100%{scale:0 1;opacity:0;visibility:hidden}}

/* Le script pose `va-partir` sur <html> au clic, et laisse à l'écran le
   temps de se refermer avant de changer de page. */
html.va-partir body::after{animation:page-sortie .36s var(--ease) forwards}
@keyframes page-sortie{from{opacity:0}to{opacity:1}}
html.va-partir::after{animation:horizon-sortie .36s var(--ease) forwards}
@keyframes horizon-sortie{from{scale:0 1;opacity:0}to{scale:1 1;opacity:1}}

/* ══════════ TYPO PARTAGÉE ══════════ */
/* Les étiquettes : le texte des instruments. Un petit carré allumé les
   précède, comme le témoin d'un appareil. */
.overline,.tag{
  display:inline-flex;align-items:center;gap:.7rem;
  margin:0 0 1.2rem;
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon);
}
.overline::before,.tag::before{
  content:"";flex:none;width:7px;height:7px;
  border:1px solid currentColor;box-shadow:0 0 8px rgba(63,220,203,.45);
}
.overline{color:var(--muted)}

.lead{
  font-size:clamp(1.1rem,1.1vw + .75rem,1.36rem);
  line-height:1.6;color:#d4e8e9;font-weight:300;
}

/* Le voyant : ce qui est en cours, en veille ou en alerte. */
.voyant{
  display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 3px rgba(255,139,61,.16),0 0 12px rgba(255,139,61,.7);
  animation:voyant 2.6s ease-in-out infinite;
}
@keyframes voyant{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Boutons ──────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.9rem 1.5rem;border-radius:8px;
  font-family:var(--mono);font-size:.78rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:#022420;background:var(--lagoon);
  border:1px solid var(--lagoon);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{
  transform:translateY(-2px);background:var(--aqua);border-color:var(--aqua);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px -12px rgba(63,220,203,.65);
}
.btn:focus-visible{outline:1px solid var(--aqua);outline-offset:3px}
.btn__ico{width:19px;height:auto;fill:currentColor}
.btn--ghost{
  background:rgba(2,10,15,.45);color:var(--ink);border-color:var(--line);
  box-shadow:none;backdrop-filter:blur(6px);
}
.btn--ghost:hover{
  background:rgba(63,220,203,.08);color:var(--aqua);border-color:rgba(126,238,226,.5);
  box-shadow:none;
}
.btn--sm{padding:.58rem 1.05rem;font-size:.7rem}
.btn--lg{padding:1.05rem 1.9rem;font-size:.84rem}

/* ══════════════════ NAV ══════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;height:var(--nav-h);
  display:flex;align-items:center;gap:2rem;
  padding-inline:clamp(1.3rem,4vw,2.8rem);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),border-color .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(2,10,15,.78);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line-soft);
}
.nav__mark{
  display:flex;align-items:center;gap:.75rem;margin-right:auto;
  font-family:var(--display);font-weight:600;font-size:.98rem;
  letter-spacing:.32em;text-transform:uppercase;
}
/* La marque : un cercle, la ligne d'horizon, et un astre posé dessus. */
.nav__mark svg{width:22px;height:22px;fill:none;stroke:var(--lagoon);stroke-width:1.6}
.nav__astre{fill:var(--lagoon);stroke:none;animation:astre 6s ease-in-out infinite}
@keyframes astre{0%,100%{opacity:1}50%{opacity:.45}}

/* Les liens portent l'écriture des instruments, comme les étiquettes du
   site : chasse fixe, capitales, lettres espacées. */
.nav__links{display:flex;align-items:center;gap:1.9rem}
.nav__links a{
  position:relative;padding-block:.45rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .3s var(--ease);
}
/* Le témoin : un petit carré allumé sous le lien survolé ou ouvert,
   le même que celui qui précède les étiquettes. */
.nav__links a::after{
  content:"";position:absolute;left:50%;bottom:-.3rem;width:5px;height:5px;
  translate:-50% 0;scale:.3;opacity:0;
  background:var(--lagoon);box-shadow:0 0 9px rgba(63,220,203,.6);
  transition:opacity .3s var(--ease),scale .3s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{opacity:1;scale:1}
/* La page ouverte : le lien de la barre, ou le groupe qui contient la page */
.nav__links > a[aria-current="page"],
.nav__groupe:has(.nav__sous [aria-current="page"]) > a{color:var(--ink)}
.nav__links > a[aria-current="page"]::after,
.nav__groupe:has(.nav__sous [aria-current="page"]) > a::after{opacity:1;scale:1}

/* ── Le sous-menu des relevés ──
   Pas de JS : le survol et le focus clavier suffisent. */
.nav__groupe{position:relative;display:flex;align-items:center}
/* Le chevron dit qu'il y a quelque chose dessous. Le sous-menu est en
   position absolue, donc hors du flux : ce repère se pose juste après
   le lien. */
.nav__groupe::after{
  content:"";flex:none;width:4px;height:4px;margin-left:.5rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  rotate:45deg;translate:0 -2px;
  color:var(--faint);transition:color .3s var(--ease);
}
.nav__groupe:hover::after,
.nav__groupe:focus-within::after{color:var(--lagoon)}
.nav__sous{
  position:absolute;top:calc(100% + 18px);left:50%;
  min-width:12.5rem;padding:.45rem;
  /* Un panneau d'instrument : les quatre repères d'angle par-dessus le
     fond, comme sur les cartes et les portes. */
  background:var(--angles),linear-gradient(160deg,rgba(10,44,60,.97),rgba(4,21,32,.97));
  backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:var(--rayon);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;translate:-50% -7px;
  transition:opacity .25s var(--ease),translate .25s var(--ease),visibility 0s .25s;
}
/* Le pont : une zone invisible comble l'écart entre le lien et le menu,
   sinon celui-ci se referme dès que la souris descend vers lui. C'est un
   pseudo-élément et non une bordure : le flou d'arrière-plan couvre les
   bordures et laissait une bande sombre au-dessus du panneau. */
.nav__sous::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav__groupe:hover .nav__sous,
.nav__groupe:focus-within .nav__sous{opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s}
.nav__sous a{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .8rem;border-radius:6px;white-space:nowrap;
  font-size:.72rem;letter-spacing:.11em;
}
/* Un tiret de relevé devant chaque entrée : il s'allume avec elle. */
.nav__sous a::before{
  content:"";flex:none;width:10px;height:1px;
  background:currentColor;opacity:.35;
  transition:background .3s var(--ease),opacity .3s var(--ease);
}
.nav__sous a::after{display:none}
.nav__sous a:hover{color:var(--ink);background:rgba(63,220,203,.07)}
.nav__sous a:hover::before{background:var(--lagoon);opacity:1}
.nav__sous a[aria-current="page"]{color:var(--lagoon)}
.nav__sous a[aria-current="page"]::before{opacity:1}

/* Le bouton de la barre reste en retrait : il se remplit au survol.
   Celui du hero est déjà plein, deux pastilles vives se gêneraient. */
.nav__join{
  background:rgba(63,220,203,.07);color:var(--aqua);
  border-color:rgba(126,238,226,.45);box-shadow:none;
  letter-spacing:.12em;
}
.nav__join:hover{
  background:var(--lagoon);color:#022420;border-color:var(--lagoon);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px -14px rgba(63,220,203,.6);
}

.nav__burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;gap:6px;
  flex-direction:column;width:38px}
.nav__burger span{display:block;height:1.5px;background:var(--ink);transition:transform .35s var(--ease),opacity .3s}
.nav__burger span:first-child{width:22px}
.nav__burger span:last-child{width:14px;margin-left:auto}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{width:22px;transform:translateY(-3.75px) rotate(-45deg)}

/* ══════════════════ HERO ══════════════════ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
  padding-block:calc(var(--nav-h) + 3rem) 9rem;
  background:var(--abyss) url("assets/hero-poster.jpg") center/cover no-repeat;
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;
  transform:scale(1.06);
}
/* Le voile s'épaissit à gauche, où se lit le texte, et laisse la mer
   apparaître à droite. */
.hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(2,10,15,.92) 0%,rgba(2,10,15,.62) 45%,rgba(2,10,15,.22) 100%),
    linear-gradient(180deg,rgba(2,10,15,.7) 0%,transparent 28%,transparent 62%,var(--abyss) 100%);
}

.hero__inner{position:relative;width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.hero__statut{
  display:flex;align-items:center;gap:.8rem;margin:0 0 1.8rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.hero__title{
  margin:0 0 0 -.05em;
  font-family:var(--display);font-weight:200;text-transform:uppercase;
  font-size:clamp(3.1rem,11.5vw,9.6rem);letter-spacing:.14em;line-height:.92;
  background:linear-gradient(180deg,#ffffff 25%,#9fe8df 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(63,220,203,.22));
}
.hero__sous{
  margin:1.2rem 0 1.9rem;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.1rem,1.6vw,1.5rem);letter-spacing:.03em;color:var(--lagoon);
}
.hero__lead{
  max-width:34rem;color:#c9dfe0;
  font-size:clamp(1rem,.5vw + .9rem,1.14rem);line-height:1.75;
}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.4rem}

/* Le relevé de bord, en bas de l'écran : trois lectures tirées du récit
   (position inconnue, communications coupées, boussole affolée). */
.hero__releve{
  position:absolute;left:50%;bottom:1.8rem;translate:-50% 0;
  width:min(100% - 2.6rem,var(--wrap));margin:0;padding:1rem 9rem 0 0;
  display:flex;flex-wrap:wrap;gap:.5rem clamp(1.6rem,4vw,3.4rem);
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
}
.hero__releve div{display:flex;gap:.6rem}
.hero__releve dt{color:var(--faint)}
.hero__releve dd{margin:0;color:var(--ink)}
.hero__releve .hero__alerte{color:var(--signal);animation:voyant 2.6s ease-in-out infinite}

.hero__scroll{
  position:absolute;right:max(1.3rem,calc((100% - var(--wrap)) / 2));bottom:1.8rem;
  display:flex;align-items:center;gap:.7rem;padding-top:1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);transition:color .3s var(--ease);
}
.hero__scroll:hover{color:var(--aqua)}
.hero__scroll-line{width:1px;height:26px;background:var(--line);position:relative;overflow:hidden}
.hero__scroll-line::after{
  content:"";position:absolute;top:0;left:0;width:1px;height:10px;background:var(--aqua);
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{0%{transform:translateY(-12px);opacity:0}30%{opacity:1}100%{transform:translateY(28px);opacity:0}}

/* ── Le sommaire latéral ──
   Il dit où l'on est dans l'univers et permet d'aller ailleurs. Les noms
   n'apparaissent qu'au survol et pour la section en cours. */
.sommaire{
  position:fixed;right:1.6rem;top:50%;transform:translateY(-50%);z-index:8;
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),visibility 0s .6s;
}
.sommaire.is-on{opacity:1;visibility:visible;transition-delay:0s}
.sommaire ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem}
.sommaire a{
  display:flex;align-items:center;justify-content:flex-end;gap:.7rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);transition:color .3s var(--ease);
}
/* Le nom se déploie vers la gauche : la colonne est ancrée à droite, et
   c'est le trait — toujours visible — qui tient l'alignement. */
.sommaire__nom{
  white-space:nowrap;opacity:0;transform:translateX(8px);
  padding:.15rem .45rem;border-radius:4px;background:rgba(2,10,15,.7);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.sommaire__tiret{
  display:block;width:14px;height:1px;background:currentColor;
  transition:width .35s var(--ease),box-shadow .3s var(--ease);
}
.sommaire:hover .sommaire__nom,
.sommaire a:focus-visible .sommaire__nom,
.sommaire .est-ici .sommaire__nom{opacity:1;transform:none}
.sommaire a:hover{color:var(--ink)}
.sommaire a:focus-visible{outline:1px solid rgba(126,238,226,.5);outline-offset:5px;border-radius:2px}
.sommaire .est-ici{color:var(--lagoon)}
.sommaire .est-ici .sommaire__tiret{width:30px;height:2px;box-shadow:0 0 8px rgba(63,220,203,.6)}

/* ══════════════════ SECTIONS ══════════════════ */
.sec{position:relative;padding-block:clamp(5.5rem,10vw,9rem)}
.sec__head{margin-bottom:clamp(2.4rem,5vw,3.8rem);max-width:720px}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__title{
  font-weight:300;font-size:clamp(2.2rem,5vw,3.9rem);
  line-height:1.06;letter-spacing:-.025em;
}
.sec__title em{color:var(--lagoon)}
.sec__sub{margin-top:1.2rem;color:var(--muted);max-width:54ch;font-size:1.04rem}
.sec__head--center .sec__sub{margin-inline:auto}

/* Les sections pleines : un fond un cran plus clair, tenu entre deux
   filets, comme un panneau de l'instrument. */
.sec--traversee,
.sec--ancrage{
  background:var(--deep);
  border-block:1px solid var(--line-soft);
}

/* ── La surface ──
   Deux lignes de houle qui dérivent, en bas des en-têtes et de certaines
   sections : l'océan comme un signal. */
.waves{
  position:absolute;bottom:0;left:0;width:100%;height:clamp(50px,7vw,96px);
  overflow:hidden;line-height:0;pointer-events:none;
}
.waves svg{width:200%;height:100%}
.waves path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.waves__a{stroke:rgba(126,226,218,.16);animation:swell 22s ease-in-out infinite alternate}
.waves__b{stroke:rgba(126,226,218,.08);animation:swell 30s ease-in-out infinite alternate-reverse}
@keyframes swell{from{transform:translateX(0)}to{transform:translateX(-6%)}}

/* ── 01 · La Traversée ────────────────────────────── */
/* La route : trois étapes posées sur une ligne, qui est aussi l'onde
   radio de la traversée (dessinée par script.js). Une étape reste
   estompée tant que le point ne l'a pas atteinte, puis s'allume ; la
   liaison perdue s'allume en orange. */
.route{position:relative;--balise:20px}
.route__onde{
  position:absolute;left:0;right:0;top:0;width:100%;height:40px;overflow:visible;pointer-events:none;
}
.route__onde path{
  fill:none;stroke:rgba(126,238,226,.55);stroke-width:1.3;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(63,220,203,.5));
}
.route__point{
  position:absolute;top:var(--balise);left:calc(var(--p,0) * 100%);
  width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--aqua);box-shadow:0 0 0 4px rgba(63,220,203,.15),0 0 16px rgba(63,220,203,.9);
}
.route__etapes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4.5rem);
}
.route__etape{position:relative;padding-top:calc(var(--balise) + 2.4rem)}
.route__balise{
  position:absolute;left:0;top:var(--balise);width:14px;height:14px;margin-top:-7px;border-radius:50%;
  border:1.5px solid rgba(126,226,218,.35);background:var(--deep);
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.route__quand{
  margin:0 0 1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);transition:color .5s var(--ease);
}
.route__texte{
  margin:0;font-size:clamp(1.02rem,.4vw + .95rem,1.18rem);line-height:1.65;color:var(--muted);
  transition:color .8s var(--ease);
}
.route__citation{margin:1.8rem 0 0}
.route__citation blockquote{
  margin:0;padding-left:1.2rem;border-left:2px solid var(--lagoon);
  font-family:var(--display);font-weight:300;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.3;
  color:var(--aqua);letter-spacing:-.01em;
}
/* l'étape atteinte */
.route__etape.est-atteinte .route__balise{
  border-color:var(--lagoon);background:var(--lagoon);
  box-shadow:0 0 0 4px rgba(63,220,203,.15),0 0 14px rgba(63,220,203,.6);
}
.route__etape.est-atteinte .route__quand{color:var(--lagoon)}
.route__etape.est-atteinte .route__texte{color:var(--ink)}
.route__etape--alerte.est-atteinte .route__balise{
  border-color:var(--signal);background:var(--signal);
  box-shadow:0 0 0 4px rgba(255,139,61,.16),0 0 14px rgba(255,139,61,.7);
}
.route__etape--alerte.est-atteinte .route__quand{color:var(--signal)}

/* La suite : ce que les naufragés ont bâti, après la route. */
.traversee__suite{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);
  margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-soft);color:var(--muted);
}
.traversee__suite p{margin:0}

/* Sur écran étroit, la route devient verticale : un filet à gauche, les
   étapes l'une sous l'autre. L'onde et le point s'effacent ; les étapes
   s'allument toujours dans l'ordre. */
@media (max-width:760px){
  .route__onde,.route__point{display:none}
  .route__etapes{position:relative;grid-template-columns:1fr;gap:2.6rem;padding-left:2rem}
  .route__etapes::before{
    content:"";position:absolute;left:6px;top:.4rem;bottom:.4rem;width:1px;background:rgba(126,226,218,.25);
  }
  .route__etape{padding-top:0}
  .route__balise{left:-2rem;top:.45rem;margin-top:0}
  .traversee__suite{grid-template-columns:1fr;gap:1.2rem}
}

/* La citation en exergue (section des Égarés). */
.quote{margin:0;grid-column:1;align-self:end}
.quote blockquote{
  margin:0;padding-left:1.5rem;border-left:2px solid var(--lagoon);
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.35;color:var(--aqua);
  letter-spacing:-.01em;
}

/* ── 02 · Le Triangle ─────────────────────────────── */
.triangle__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(2rem,6vw,5rem);margin-bottom:clamp(3rem,6vw,4.5rem);flex-wrap:wrap;
}
.triangle__top .sec__head{margin-bottom:0}

.compass{display:flex;flex-direction:column;align-items:center;gap:1rem;flex-shrink:0}
.compass svg{
  width:clamp(150px,17vw,208px);height:auto;border-radius:50%;
  background:radial-gradient(circle,rgba(63,220,203,.08),transparent 70%);
}
.compass__cap{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);
}
.compass__cap::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 10px currentColor;animation:voyant 2.6s ease-in-out infinite;
}
.cmp__ring{fill:none;stroke:var(--line);stroke-width:1}
.cmp__ring--in{
  stroke:rgba(126,226,218,.22);stroke-dasharray:2 6;
  /* une graduation qui tourne lentement, à peine perceptible : elle
     enlève à la boussole son air d'instrument fiable */
  transform-origin:100px 100px;animation:derive 48s linear infinite;
}
@keyframes derive{to{transform:rotate(360deg)}}
.cmp__ticks line{stroke:var(--faint);stroke-width:1}
.cmp__lbl{fill:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-anchor:middle}
.cmp__needle{transform-origin:100px 100px;animation:affole 16s linear infinite}
.cmp__n1{fill:var(--signal)}
.cmp__n2{fill:rgba(154,180,185,.45)}
.cmp__pin{fill:var(--abyss);stroke:var(--aqua);stroke-width:1}
/* L'aiguille cherche, elle ne tourne pas en rond : de petites hésitations,
   deux pertes franches, un faux nord tenu quelques secondes, puis un
   retour qui dépasse avant de se poser. Chaque palier porte sa propre
   courbe — un départ sec, une arrivée qui rebondit — parce qu'une même
   accélération partout donne un mouvement de jouet. */
@keyframes affole{
  0%  {transform:rotate(0deg);    animation-timing-function:cubic-bezier(.6,0,.3,1)}
  5%  {transform:rotate(-7deg);   animation-timing-function:cubic-bezier(.6,0,.3,1)}
  9%  {transform:rotate(4deg);    animation-timing-function:cubic-bezier(.9,0,.1,1)}
  13% {transform:rotate(-2deg);   animation-timing-function:ease-in}
  17% {transform:rotate(-63deg);  animation-timing-function:cubic-bezier(.2,1.4,.4,1)}
  21% {transform:rotate(-38deg);  animation-timing-function:cubic-bezier(.4,0,.3,1)}
  25% {transform:rotate(-49deg);  animation-timing-function:cubic-bezier(.4,0,.3,1)}
  29% {transform:rotate(-44deg);  animation-timing-function:ease-in-out}
  36% {transform:rotate(-47deg);  animation-timing-function:ease-in}
  40% {transform:rotate(122deg);  animation-timing-function:cubic-bezier(.2,1.3,.4,1)}
  44% {transform:rotate(96deg);   animation-timing-function:cubic-bezier(.4,0,.3,1)}
  48% {transform:rotate(110deg);  animation-timing-function:ease-in-out}
  56% {transform:rotate(104deg);  animation-timing-function:ease-in-out}
  62% {transform:rotate(108deg);  animation-timing-function:ease-in}
  66% {transform:rotate(-171deg); animation-timing-function:cubic-bezier(.2,1.2,.4,1)}
  70% {transform:rotate(-152deg); animation-timing-function:ease-in-out}
  76% {transform:rotate(-158deg); animation-timing-function:ease-in-out}
  82% {transform:rotate(-155deg); animation-timing-function:ease-in}
  87% {transform:rotate(14deg);   animation-timing-function:cubic-bezier(.3,1.5,.5,1)}
  91% {transform:rotate(-6deg);   animation-timing-function:cubic-bezier(.4,0,.3,1)}
  95% {transform:rotate(3deg);    animation-timing-function:cubic-bezier(.4,0,.3,1)}
  98% {transform:rotate(-1deg);   animation-timing-function:ease-out}
  100%{transform:rotate(0deg)}
}

/* ── Les trois portes de l'accueil ──
   Chaque porte est un lien entier, pas un titre suivi d'un « en savoir
   plus » — la cible est le panneau tout entier. */
.portes{
  list-style:none;margin:0;padding:0;
  /* sous 340 px de large, une colonne fixée à 300 px ferait déborder la page */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.2rem;
}
.porte{
  position:relative;height:100%;overflow:hidden;
  display:flex;flex-direction:column;gap:.9rem;
  padding:2rem 1.8rem 1.8rem;border-radius:var(--rayon);
  background:var(--angles),var(--panneau);
  border:1px solid var(--line-soft);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.porte::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--lagoon),transparent);
  opacity:0;transition:opacity .5s var(--ease);
}
.porte:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 26px 60px -34px rgba(63,220,203,.45)}
.porte:hover::after{opacity:.9}
.porte:focus-visible{outline:1px solid rgba(126,238,226,.6);outline-offset:3px}
.porte__num{
  display:flex;align-items:center;gap:.8rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--lagoon);
}
.porte__num::after{content:"";flex:1;height:1px;background:var(--line-soft)}
/* L'écran de chaque porte : un aperçu vivant de ce qu'il y a derrière.
   L'univers : l'onde radio de la traversée (script.js). L'île : le vrai
   relevé en vignette, balayé par un sonar. Le journal : la date et le
   titre de la dernière entrée de journal.js (script.js). */
.porte__ecran{
  position:relative;display:block;height:118px;margin:.3rem 0 .2rem;overflow:hidden;
  border-radius:6px;border:1px solid var(--line-soft);background:rgba(2,10,15,.6);
  background-image:linear-gradient(rgba(126,226,218,.05) 1px,transparent 1px);background-size:100% 8px;
  transition:border-color .5s var(--ease);
}
.porte:hover .porte__ecran{border-color:var(--line)}
.porte__etiquette{
  position:absolute;left:.7rem;bottom:.55rem;z-index:2;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:.1rem .35rem;border-radius:3px;background:rgba(2,10,15,.7);
}
.porte__etiquette.est-alerte{color:var(--signal)}

.porte__ecran--onde svg{position:absolute;inset:.6rem .6rem 1.8rem;width:calc(100% - 1.2rem);height:calc(100% - 2.4rem);overflow:visible}
.porte__ecran--onde path{
  fill:none;stroke:var(--aqua);stroke-width:1.3;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(63,220,203,.6));
}

.porte__ecran--ile{background-color:#05222b}
/* le relevé entier, un peu plus haut que l'écran : l'île y tient, le
   cadre et la rose des vents débordent */
.porte__ecran--ile img{
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent);
  position:absolute;left:50%;top:50%;height:165%;width:auto;max-width:none;
  transform:translate(-50%,-47%);opacity:.8;
  transition:transform 1.2s var(--ease),opacity .5s var(--ease);
}
.porte:hover .porte__ecran--ile img{transform:translate(-50%,-47%) scale(1.06);opacity:1}
/* le faisceau : un cône qui tourne autour du centre de l'écran */
.porte__sonar{
  position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(63,220,203,.32),rgba(63,220,203,.08) 40deg,transparent 70deg);
  mix-blend-mode:screen;animation:sonar-tour 5s linear infinite;
}
.porte__sonar::after{
  content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;
  background:var(--aqua);box-shadow:0 0 10px var(--aqua);
}
@keyframes sonar-tour{to{transform:rotate(360deg)}}

.porte__ecran--journal{padding:.9rem .9rem 0}
.porte__ecran--journal::before{
  content:"";position:absolute;inset:0;background:var(--image,none) center/cover;opacity:.28;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%);
  transition:opacity .5s var(--ease);
}
.porte:hover .porte__ecran--journal::before{opacity:.45}
.porte__journal-date{
  position:relative;display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon);
}
.porte__journal-date.est-en-cours::after{
  content:"En cours";display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;color:var(--signal);
}
.porte__journal-titre{
  position:relative;display:block;margin-top:.45rem;max-width:85%;
  font-family:var(--display);font-weight:300;font-size:1.15rem;line-height:1.25;color:var(--ink);
}
/* le curseur au bout du titre, pendant qu'il s'écrit et après */
.porte__journal-titre::after{
  content:"";display:inline-block;width:.5em;height:1em;margin-left:.15rem;vertical-align:-.12em;
  background:var(--lagoon);animation:curseur 1s steps(1) infinite;
}
@keyframes curseur{50%{opacity:0}}

.porte h3{font-size:1.6rem;font-weight:300;letter-spacing:-.015em}
.porte p{margin:0;color:var(--muted);font-size:.95rem}
.porte__aller{
  margin-top:auto;padding-top:.5rem;
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lagoon);
}
.porte__aller::after{content:"→";letter-spacing:0;transition:transform .35s var(--ease)}
.porte:hover .porte__aller{color:var(--aqua)}
.porte:hover .porte__aller::after{transform:translateX(5px)}

/* ── Les quatre constats du Triangle ── */
.cards{
  list-style:none;margin:0;padding:0;
  /* deux par deux : à quatre de front, chaque carte tombait sous les
     280 px et le texte s'y empilait en colonne */
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;
}
.card{
  position:relative;overflow:hidden;
  padding:2.1rem 1.9rem 1.9rem;border-radius:var(--rayon);
  background:var(--angles),var(--panneau);
  border:1px solid var(--line-soft);
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--lagoon),transparent);
  opacity:0;transition:opacity .5s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:var(--line)}
.card:hover::before{opacity:.8}
.card__num{
  display:block;margin-bottom:1rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon);
}
.card__num::before{content:"Constat ";color:var(--faint)}
.card h3{font-size:1.55rem;font-weight:300;margin-bottom:.85rem;letter-spacing:-.015em}
.card p{font-size:.95rem;color:var(--muted)}
.card__note{
  margin-top:1.15rem;padding-top:1.05rem;border-top:1px dashed var(--line);
  font-size:.88rem;color:var(--faint);
}

/* ── 03 · L'Île ───────────────────────────────────── */
.sec--ile{
  background:
    url("assets/isobathes.svg") left -260px center / 1000px auto no-repeat,
    radial-gradient(60% 55% at 22% 55%,rgba(43,184,173,.08),transparent 62%);
}
.ile__grid{
  /* la carte porte beaucoup de détail : elle a besoin de la plus large
     des deux colonnes pour rester lisible */
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center;
}
.map{margin:0}
.map figcaption,
.releve__carte figcaption{
  margin-top:1rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);text-align:center;
}
.ile__text{display:flex;flex-direction:column;gap:1.7rem}
.ile__lien{margin-top:clamp(1.8rem,3.5vw,2.8rem);text-align:center}

/* ── Les volets de la section ──
   Trois catégories, une seule affichée. Un jeu plus discret que les
   onglets des relevés, qui passe à la ligne au lieu de défiler. */
.volets{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
  width:fit-content;max-width:100%;margin:0 auto clamp(2rem,4vw,3.2rem);
  padding:.35rem;border:1px solid var(--line-soft);border-radius:12px;
  background:rgba(2,10,15,.5);
}
.volet{
  position:relative;background:none;border:0;cursor:pointer;
  padding:.6rem 1.1rem;border-radius:8px;
  font-family:var(--sans);font-size:.92rem;font-weight:500;line-height:1.35;
  color:var(--muted);transition:color .3s var(--ease),background .3s var(--ease);
}
.volet:hover{color:var(--ink)}
.volet.is-actif{color:var(--lagoon);background:rgba(63,220,203,.1);box-shadow:inset 0 0 0 1px rgba(63,220,203,.25)}
.volet:focus-visible{outline:1px solid rgba(126,238,226,.6);outline-offset:2px}

/* Sans script, les panneaux se lisent à la suite. Dès que le script prend
   la main il pose .is-empile : les panneaux passent au même endroit, le
   bloc garde la hauteur du plus long, et changer d'onglet ne fait plus
   remonter la carte ni le bouton du dessous. Un panneau fermé garde donc
   sa place — display:none le retirerait du flux. */
.volet__pans:not(.is-empile) > .volet__pan + .volet__pan{margin-top:1.6rem}
.volet__pans.is-empile{display:grid}
.volet__pans.is-empile > .volet__pan{
  grid-area:1 / 1;transition:opacity .4s var(--ease);
}
.volet__pans.is-empile > .volet__pan[hidden]{
  /* !important pour lever le [hidden]{display:none !important} général :
     ici le panneau fermé doit garder sa place. visibility le retire de
     l'affichage comme du lecteur d'écran, ce que faisait display:none. */
  display:block !important;visibility:hidden;pointer-events:none;opacity:0;
}
/* En une seule colonne, la carte passe sous le texte : réserver la
   hauteur du plus long panneau coûterait un écran de vide. */
@media (max-width:980px){
  .volet__pans.is-empile{display:block}
  .volet__pans.is-empile > .volet__pan[hidden]{display:none !important}
}
.volet__pan:focus{outline:none}
.volet__pan p{color:var(--muted);padding-left:1.4rem;border-left:2px solid var(--line)}
.volet__pan p + p{margin-top:1rem}

/* ── 04 · Les Égarés / 05 · L'Ancrage ─────────────── */
.egares__grid{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start;
}
.egares__grid > div > p:not(.lead){color:var(--muted);margin-top:1.4rem}
.egares__side{
  padding:2.2rem;border-radius:var(--rayon);
  border:1px solid var(--line-soft);
  background:var(--angles),var(--panneau);
}
.egares__side p{color:var(--muted);font-size:.95rem;margin-top:1.6rem}
.egares__side .quote blockquote{font-size:clamp(1.3rem,2vw,1.65rem)}

/* La jauge d'ancrage (section 05), en tête du panneau de droite. Deux
   barres superposées : la puissance d'origine, en creux, et ce qu'il en
   reste sur l'île, pleine. Le seuil est un trait vertical ; ce qui le
   dépasse passe en orange le temps de l'écrêtage. Les largeurs et les
   états sont posés par script.js ; les transitions font le mouvement. */
.ancrage{
  margin-bottom:1.9rem;padding-bottom:1.6rem;border-bottom:1px solid var(--line-soft);
  --origine:0;--retenue:0;--seuil:.6;
}
.ancrage__tete{
  display:flex;justify-content:space-between;gap:1rem;margin-bottom:.9rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.ancrage__etat{display:inline-flex;align-items:center;gap:.5rem;color:var(--lagoon);transition:color .3s}
.ancrage__etat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.ancrage.est-ecretee .ancrage__etat{color:var(--signal)}
.ancrage.est-ecretee .ancrage__etat::before{animation:voyant .5s ease-in-out infinite}

.ancrage__piste{
  position:relative;height:22px;border-radius:4px;overflow:visible;
  background:
    repeating-linear-gradient(90deg,rgba(126,226,218,.12) 0 1px,transparent 1px 10%),
    rgba(2,10,15,.55);
  border:1px solid var(--line-soft);
}
.ancrage__origine,.ancrage__retenue{position:absolute;left:0;top:3px;bottom:3px;border-radius:2px}
.ancrage__origine{
  width:calc(var(--origine) * 100%);
  border:1px dashed rgba(126,226,218,.45);background:rgba(126,226,218,.06);
  transition:width 1.6s cubic-bezier(.2,.8,.3,1),border-color .3s,background .3s,opacity .8s;
}
.ancrage.est-ecretee .ancrage__origine{
  border-color:rgba(255,139,61,.8);
  background:linear-gradient(90deg,transparent calc(var(--seuil) / var(--origine) * 100%),rgba(255,139,61,.28) 0);
  animation:ecretage .18s steps(2) infinite;
}
.ancrage.est-retombee .ancrage__origine{opacity:.35}
.ancrage__retenue{
  width:calc(var(--retenue) * 100%);
  background:linear-gradient(90deg,rgba(63,220,203,.55),var(--lagoon));
  box-shadow:0 0 12px rgba(63,220,203,.45);
  transition:width 1.6s cubic-bezier(.2,.8,.3,1);
}
.ancrage__seuil{
  position:absolute;top:-6px;bottom:-6px;left:calc(var(--seuil) * 100%);width:2px;margin-left:-1px;
  background:var(--aqua);box-shadow:0 0 8px rgba(126,238,226,.7);
}
.ancrage.est-ecretee .ancrage__seuil{background:var(--signal);box-shadow:0 0 12px rgba(255,139,61,.9)}
.ancrage__seuil em{
  position:absolute;top:calc(100% + .35rem);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.ancrage__legende{
  display:flex;gap:1.4rem;margin-top:1.9rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.ancrage__cle{display:inline-flex;align-items:center;gap:.5rem}
.ancrage__cle::before{content:"";width:14px;height:8px;border-radius:2px}
.ancrage__cle--origine::before{border:1px dashed rgba(126,226,218,.55)}
.ancrage__cle--retenue::before{background:var(--lagoon)}
.ancrage__cle b{font-weight:500;color:var(--ink);min-width:3.2em}
@keyframes ecretage{50%{opacity:.55}}

/* Les arrivées au port : sous la citation, un Égaré du registre à la
   fois. La jauge du pied se remplit jusqu'au suivant ; les points
   permettent d'en choisir un. */
.egares__droite{display:flex;flex-direction:column;gap:1.2rem}
.arrivees{
  padding:1.2rem 1.4rem 1.1rem;border-radius:var(--rayon);
  border:1px solid var(--line-soft);background:var(--angles),var(--panneau);
}
.arrivees__tete{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.arrivees__tete span{display:inline-flex;align-items:center;gap:.55rem}
.arrivees__tete span::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--lagoon);
  box-shadow:0 0 8px var(--lagoon);animation:voyant 2.6s ease-in-out infinite;
}
.arrivees__lien{color:var(--muted);transition:color .3s var(--ease)}
.arrivees__lien:hover,.arrivees__lien:focus-visible{color:var(--lagoon)}

.arrivees__fiche{
  display:grid;grid-template-columns:78px 1fr;gap:1.1rem;align-items:center;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.arrivees__fiche.est-sortante{opacity:0;transform:translateY(6px)}
.arrivees__portrait{
  position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(160deg,#0b3444,#041520);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:300;font-size:2rem;color:var(--aqua);
}
.arrivees__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.arrivees__infos{margin:0;min-width:0}
.arrivees__nom{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.2;color:var(--ink)}
.arrivees__origine{margin:.2rem 0 .7rem;font-size:.85rem;color:var(--muted)}
.arrivees__origine small{color:var(--faint);font-size:inherit}
.arrivees__champ{margin:0;display:flex;gap:.7rem;align-items:baseline;font-size:.86rem;line-height:1.5}
.arrivees__champ span{
  flex:none;width:8.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.arrivees__champ b{font-weight:500;color:#c9dfe0}

.arrivees__pied{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.arrivees__points{display:flex;gap:.45rem}
.arrivees__points button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(126,226,218,.22);transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.arrivees__points button[aria-current="true"]{background:var(--lagoon);box-shadow:0 0 8px rgba(63,220,203,.6)}
.arrivees__points button:focus-visible{outline:1px solid var(--lagoon);outline-offset:3px}
.arrivees__jauge{flex:1;height:1px;background:var(--line-soft);overflow:hidden}
.arrivees__jauge i{display:block;height:100%;width:100%;background:var(--lagoon);transform-origin:left;transform:scaleX(0)}
.arrivees__jauge i.est-en-cours{animation:jauge var(--duree,6s) linear forwards}
.arrivees:hover .arrivees__jauge i,
.arrivees.est-en-pause .arrivees__jauge i{animation-play-state:paused}
@keyframes jauge{to{transform:scaleX(1)}}
@media (max-width:560px){
  .arrivees__champ{flex-direction:column;gap:0;margin-top:.35rem}
  .arrivees__champ span{width:auto}
}

/* Les cinq règles : des phrases, pas des étiquettes — donc une liste
   lisible, pas des pastilles. */
.regles{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:.7rem}
.regles li{
  position:relative;padding:.85rem 1rem .85rem 2.6rem;
  border:1px solid var(--line-soft);border-radius:8px;background:rgba(2,10,15,.35);
  color:var(--muted);font-size:.96rem;line-height:1.6;
}
.regles li::before{
  content:"";position:absolute;left:1.05rem;top:1.45em;
  width:7px;height:7px;border:1px solid var(--lagoon);
  box-shadow:0 0 8px rgba(63,220,203,.45);
}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:2rem 0 0}
.chips li{
  padding:.42rem .85rem;border:1px solid var(--line);border-radius:6px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.chips li:hover{color:var(--lagoon);border-color:rgba(63,220,203,.4);background:rgba(63,220,203,.06)}

/* ══════════════════ PAGE DES CARTES ══════════════════ */
.sec--releve{
  /* la section s'ouvre sur la barre d'onglets, pas sur un titre : elle a
     besoin de moins d'air au-dessus */
  padding-top:clamp(3rem,5.5vw,4.5rem);
  padding-bottom:clamp(7rem,12vw,10rem);
}
/* le fond bascule avec l'onglet : deux lieux, deux lumières */
.sec--ville{
  background:radial-gradient(70% 55% at 82% 20%,rgba(79,210,234,.07),transparent 62%);
}

/* ── Un onglet par lieu ── */
.onglets{
  /* Centrés quand ils tiennent, défilables quand ils ne tiennent pas.
     C'est pour ça que le centrage passe par les marges auto des deux
     onglets d'extrémité plutôt que par justify-content : combiné à un
     débordement, ce dernier rend le premier onglet inatteignable. */
  display:flex;justify-content:flex-start;gap:clamp(.6rem,2vw,1.2rem);
  margin-bottom:clamp(2rem,4vw,3rem);padding-bottom:1px;
  overflow-x:auto;scrollbar-width:none;
}
.onglets::-webkit-scrollbar{display:none}
.onglet{
  position:relative;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  min-width:11rem;padding:.95rem 1.2rem 1rem;cursor:pointer;
  background:rgba(2,10,15,.45);border:1px solid var(--line-soft);border-radius:var(--rayon);
  text-align:left;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.onglet:first-child{margin-left:auto}
.onglet:last-child{margin-right:auto}
.onglet::after{
  content:"";position:absolute;left:1.2rem;right:1.2rem;bottom:-1px;height:2px;border-radius:2px;
  background:var(--lagoon);box-shadow:0 0 10px rgba(63,220,203,.6);
  transform:scaleX(0);transition:transform .45s var(--ease);
}
.onglet.is-actif{border-color:var(--line);background:var(--panneau)}
.onglet.is-actif::after{transform:scaleX(1)}
.onglet__rang{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
  transition:color .3s var(--ease);
}
.onglet__nom{
  font-family:var(--display);font-weight:300;line-height:1.1;
  font-size:clamp(1.3rem,2.4vw,1.75rem);color:var(--muted);
  transition:color .3s var(--ease);
}
.onglet:hover .onglet__nom{color:var(--ink)}
.onglet.is-actif .onglet__rang{color:var(--lagoon)}
.onglet.is-actif .onglet__nom{color:var(--ink)}
.onglet:focus-visible{outline:1px solid rgba(126,238,226,.6);outline-offset:3px}

/* Sur un téléphone étroit, les trois onglets ne tiennent qu'en resserrant
   tout. Ils restent défilables si ça ne suffit pas — mais un onglet coupé
   au bord ne se voit pas, alors autant qu'ils tiennent. */
@media (max-width:560px){
  .onglets{gap:.4rem}
  .onglet{min-width:0;padding:.7rem .7rem .75rem}
  .onglet__rang{font-size:.5rem;letter-spacing:.06em}
  .onglet__nom{font-size:1.02rem}
}

.panneau:focus{outline:none}
.panneau__intro{
  max-width:54ch;margin:0 auto clamp(1.9rem,3.5vw,2.8rem);
  text-align:center;color:var(--muted);font-size:1.02rem;
}
.note h3{font-size:1.35rem;font-weight:300;margin-bottom:.6rem;color:var(--ink)}
.note p{
  color:var(--muted);font-size:.95rem;
  padding-left:1.2rem;border-left:2px solid var(--line);
}

/* ── Les cartes ──
   Les relevés viennent d'exports des générateurs de Watabou, recolorés aux
   teintes du site puis compactés (voir _source/). Les repères sont des
   éléments HTML posés PAR-DESSUS l'image, en pourcentages — ils suivent
   l'échelle quelle que soit la largeur. `container-type` fait du plan
   l'unité de référence de ses étiquettes : elles rétrécissent avec lui au
   lieu de finir par se chevaucher sur un écran étroit. */
.carte-plan .plan{position:relative;aspect-ratio:960 / 1006;container-type:inline-size}
.carte-plan--carre .plan{aspect-ratio:1}
.carte-plan img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:8px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),0 0 0 6px rgba(2,10,15,.6);
}
.repere{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  padding:.3rem .6rem;
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:600;
  /* 1,55 % de la largeur du plan : la même proportion à toutes les tailles */
  font-size:clamp(8.5px,1.55cqi,13.2px);
  letter-spacing:.04em;color:var(--sand);
  text-shadow:0 1px 5px rgba(2,10,15,.95),0 0 12px rgba(2,10,15,.8);
  transition:color .25s var(--ease);
  white-space:nowrap;
}
/* sur l'univers le relevé n'est qu'un aperçu : les repères y sont de
   simples étiquettes, sans note à afficher */
span.repere{cursor:default}

.repere::before{
  content:"";display:block;width:6px;height:6px;margin:0 auto .3rem;
  border-radius:50%;background:var(--sand);
  box-shadow:0 0 0 4px rgba(2,10,15,.55);
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.repere--pale{color:var(--muted);font-weight:500;font-style:italic}
.repere--pale::before{background:var(--faint)}
.repere--eau{color:var(--aqua)}
.repere--eau::before{background:var(--aqua)}

.repere:hover,
.repere:focus-visible{color:var(--aqua)}
.repere:hover::before,
.repere:focus-visible::before{
  background:var(--aqua);transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(63,220,203,.2),0 0 12px rgba(63,220,203,.7);
}
.repere:focus-visible{outline:1px solid rgba(126,238,226,.6);outline-offset:2px;border-radius:3px}

/* ── Sur écran étroit, la carte se lit autrement ──
   La taille des noms bute sur un plancher de 8,5 px : passé environ 550 px
   de large, le texte cesse de rétrécir alors que la carte continue, et les
   dix-neuf noms du relevé de l'île finissent empilés. On ne garde donc que
   les points ; les noms passent dans une légende fabriquée par script.js
   sous le relevé. Toucher une ligne allume son point et sort sa note. */
.legende{display:none}

@media (max-width:640px){
  .carte-vive .repere{
    /* Le nom reste dans le DOM : le lecteur d'écran le lit, et la légende
       le recopie. Seul son rendu disparaît. */
    font-size:0;letter-spacing:0;
    width:34px;height:34px;padding:0;   /* une cible qu'on vise au doigt */
    display:grid;place-items:center;
  }
  .carte-vive .repere::before{margin:0;width:9px;height:9px}
  .carte-vive .repere.is-vise::before{background:var(--aqua);transform:scale(1.5)}

  /* La bulle prend toute la largeur du plan : limitée à 72 %, une note
     de deux phrases s’étirait en hauteur jusqu’à masquer son point. Le
     sélecteur doit battre la règle .bulle, posée plus bas. */
  .carte-vive .bulle{max-width:calc(100% - 20px)}

  .legende{
    display:flex;flex-wrap:wrap;gap:.45rem;
    list-style:none;margin:1.1rem 0 0;padding:0;
  }
  .legende__item{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.45rem .8rem;border-radius:6px;cursor:pointer;
    background:rgba(8,36,50,.5);border:1px solid var(--line-soft);
    font-family:var(--sans);font-weight:500;font-size:.8rem;
    color:var(--sand);
    transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
  }
  .legende__item::before{
    content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sand);
  }
  .legende__item.eau{color:var(--aqua)}
  .legende__item.eau::before{background:var(--aqua)}
  .legende__item.pale{color:var(--muted);font-style:italic}
  .legende__item.pale::before{background:var(--faint)}
  .legende__item.is-vise{
    border-color:rgba(63,220,203,.55);background:rgba(63,220,203,.12);color:var(--aqua);
  }
  .legende__item.is-vise::before{background:var(--aqua)}
  .legende__item:focus-visible{outline:1px solid rgba(126,238,226,.6);outline-offset:2px}
}

/* ── Les relevés interactifs ──
   L'information est portée par la carte : chaque repère s'allume au survol
   (ou au focus clavier) et sa note sort en bulle, contre lui. */
.releve__carte{margin:0 auto;max-width:860px}
/* les repères d'angle encadrent le plan seul, pas la légende en dessous */
.releve__carte .plan::after{
  content:"";position:absolute;inset:-14px;pointer-events:none;
  background:var(--angles);
}

.bulle{
  position:absolute;z-index:3;width:max-content;max-width:min(300px,72%);
  padding:.75rem .95rem;
  background:rgba(4,21,32,.95);
  border:1px solid var(--line);border-radius:8px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.95);
  /* la bulle ne doit jamais intercepter le survol : elle sort près du
     repère, et sous le curseur elle le ferait clignoter sans fin */
  pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s;
}
.bulle.is-vue{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.bulle b{
  display:block;font-family:var(--display);font-weight:400;font-size:1rem;
  line-height:1.25;color:var(--lagoon);margin-bottom:.25rem;
}
.bulle span{display:block;font-size:.84rem;line-height:1.55;color:var(--muted)}
/* Avec une vue du lieu, la bulle prend sa largeur pleine : en max-content,
   l'image n'aurait aucune largeur sur laquelle se caler. */
.bulle--image{width:min(300px,72%)}
.bulle img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  margin-bottom:.7rem;border-radius:4px;background:rgba(8,36,50,.6);
}
.bulle img[hidden]{display:none}

/* ══════════════════ LE REGISTRE ══════════════════
   Chaque personnage est présenté comme un document délivré au port :
   en-tête, photo d'identité verticale, champs étiquetés, bande de
   lecture. La carte ne fait que mettre en forme ce qui est écrit dans
   personnages.js. */
.sec--registre{
  background:radial-gradient(60% 45% at 15% 10%,rgba(43,184,173,.06),transparent 62%);
}
.fiches{
  display:grid;
  /* `min(420px,100%)` et non `420px` : sur un téléphone de 390 px, une
     colonne à 420 px ne rentre pas, et la fiche débordait. */
  grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));
  gap:1.4rem;
}
/* ── Le carrousel de l'aperçu ──
   Sur l'accueil, les fiches défilent au lieu de remplir une grille. Le
   défilement reste natif ; les flèches ne sont qu'un raccourci, et la
   barre disparaît quand tout tient à l'écran. */
.carrousel{position:relative}
.fiches--piste{
  display:flex;gap:1.4rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  /* Une piste qui défile horizontalement rogne aussi à la verticale : la
     carte survolée, qui monte de 4 px et projette son ombre sous elle,
     était coupée en haut et en bas. La piste s'agrandit donc de la place
     que prennent la montée et l'ombre, et des marges négatives rendent
     cette place à la mise en page : rien ne bouge autour. scroll-padding
     garde les cartes alignées sur le bord du texte. */
  padding:.6rem 1.2rem 3.4rem;
  margin:-.6rem -1.2rem -3.1rem;
  scroll-padding-inline:1.2rem;
}
.fiches--piste::-webkit-scrollbar{display:none}
.fiches--piste > .fiche{
  flex:0 0 clamp(280px,calc(50% - .7rem),460px);
  scroll-snap-align:start;
}
.fiches--piste:focus-visible{
  outline:1px solid rgba(126,238,226,.5);outline-offset:8px;border-radius:var(--rayon);
}
.carrousel__barre{
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  margin-top:1.9rem;
}
.carrousel__fleche{
  width:42px;height:42px;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:8px;
  background:rgba(2,10,15,.45);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease);
}
.carrousel__fleche svg{
  width:15px;height:15px;fill:none;stroke:var(--ink);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.carrousel__fleche:hover{border-color:rgba(126,238,226,.5);background:rgba(63,220,203,.08)}
.carrousel__fleche:disabled{opacity:.25;cursor:default}
.carrousel__fleche:disabled:hover{border-color:var(--line);background:rgba(2,10,15,.45)}
.carrousel__compte{
  min-width:5rem;text-align:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.registre__vide{text-align:center;color:var(--faint)}
.registre__lien{margin-top:2.8rem;text-align:center}

/* ── Intertitres de zone (bestiaire) ──
   Posé dans la grille, l'intertitre en prend toute la largeur et coupe
   la liste avant les fiches de sa zone. */
.fiches__zone{
  grid-column:1/-1;
  display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.2rem);
  margin:clamp(1.4rem,3vw,2.4rem) 0 0;
  font-weight:300;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);
  letter-spacing:-.01em;
}
.fiches__zone:first-child{margin-top:0}
.fiches__zone::after{
  content:"";flex:1;height:1px;align-self:center;
  background:linear-gradient(90deg,var(--line),transparent);
}
.fiches__zone-compte{
  font-family:var(--mono);font-weight:400;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon);
}
/* La note d'une zone (NOTES_ZONES dans bestiaire.js) : sous son intertitre,
   ou en tête de la grille quand la zone est ouverte seule. Le filet orange
   est celui des signaux d'alerte du site. */
.fiches__note{
  grid-column:1/-1;
  max-width:72ch;margin:0;
  padding:.15rem 0 .15rem 1rem;border-left:2px solid var(--signal);
  color:var(--muted);font-size:.95rem;line-height:1.65;
}

/* ── En-tête des pages intérieures ──
   Aligné à gauche, sur les isobathes : la page s'ouvre comme un relevé. */
.page{padding-top:var(--nav-h)}
.page__tete{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(4.8rem,8.5vw,7.5rem);
  background:
    url("assets/isobathes.svg") right -220px center / min(1100px,120vw) auto no-repeat,
    radial-gradient(70% 90% at 10% 0%,rgba(43,184,173,.12),transparent 60%),
    var(--deep);
  border-bottom:1px solid var(--line-soft);
}

/* ── L'en-tête filmé ──
   L'univers ouvre sur une bouée en mer, recadrée en bandeau. Le voile
   s'épaissit à gauche, où le titre se pose. */
.page__tete--film{background:var(--abyss)}
.tete__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;z-index:-2;
}
.tete__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(2,10,15,.9) 0%,rgba(2,10,15,.55) 55%,rgba(2,10,15,.3) 100%),
    linear-gradient(180deg,rgba(2,10,15,.6) 0%,transparent 40%,var(--abyss) 100%);
}

/* ── L'en-tête vivant ──
   Les pages intérieures n'ont pas de vidéo. Deux nappes de lumière animent
   leur fond — l'équivalent en dégradés des caustiques du hero. Elles
   dérivent en sens contraires et à des durées premières entre elles
   (29 s et 41 s), pour que le motif ne se répète pas à l'œil. */
.page__tete--vivant::before,
.page__tete--vivant::after{
  content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
}
.page__tete--vivant::before{
  background:
    radial-gradient(34% 44% at 22% 32%,rgba(43,184,173,.14),transparent 63%),
    radial-gradient(28% 38% at 78% 20%,rgba(79,210,234,.1),transparent 65%);
  animation:remous-a 29s ease-in-out infinite alternate;
}
.page__tete--vivant::after{
  background:
    radial-gradient(44% 50% at 60% 76%,rgba(126,238,226,.07),transparent 66%),
    radial-gradient(26% 34% at 12% 82%,rgba(43,184,173,.08),transparent 64%);
  animation:remous-b 41s ease-in-out infinite alternate;
}
@keyframes remous-a{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-3.5%,2.5%,0) scale(1.1)}
  100%{transform:translate3d(2.5%,-2%,0) scale(1.04)}
}
@keyframes remous-b{
  0%  {transform:translate3d(0,0,0) scale(1.06)}
  50% {transform:translate3d(3%,-2.5%,0) scale(1)}
  100%{transform:translate3d(-2%,2%,0) scale(1.09)}
}

/* La sonde : des échos partent du creux des isobathes, comme un sondeur
   qui interroge le fond. Le point de départ suit le calage du fond
   (right -220px, largeur min(1100px,120vw)) : son centre est à une
   demi-largeur moins 220 px du bord droit. Posée par script.js, qui la
   met aussi dans le bandeau d'appel (voir .cta, plus bas). */
.sonde{
  --iso:min(1100px,120vw);
  position:absolute;z-index:-1;pointer-events:none;
  right:calc(var(--iso) / 2 - 220px);top:50%;width:0;height:0;
}
.sonde__ping{
  position:absolute;left:0;top:0;width:calc(var(--iso) * var(--portee,.64));aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;
  border:1px solid rgba(126,238,226,.55);
  background:radial-gradient(closest-side,transparent 88%,rgba(63,220,203,.07));
  opacity:0;scale:.05;
  animation:ping 9s cubic-bezier(.15,.55,.35,1) infinite both;
}
.sonde__ping:nth-child(1){animation-delay:.7s}
.sonde__ping:nth-child(2){animation-delay:3.7s}
.sonde__ping:nth-child(3){animation-delay:6.7s}
@keyframes ping{
  0%  {scale:.05;opacity:0}
  6%  {opacity:.7}
  100%{scale:1;opacity:0}
}
.sonde__balise{
  position:absolute;left:0;top:0;width:6px;height:6px;translate:-50% -50%;border-radius:50%;
  background:var(--aqua);box-shadow:0 0 0 3px rgba(126,238,226,.12),0 0 14px rgba(126,238,226,.8);
  animation:voyant 3s ease-in-out infinite;
}

/* La neige marine : des particules en suspension qui remontent lentement.
   Dessinée sur un canvas par script.js ; elle glisse un peu à l'opposé
   de la souris pour donner de la profondeur. */
.neige{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -8px);
  transition:translate 1.6s var(--ease);
}

/* L'arrivée : les lignes de l'en-tête montent l'une après l'autre, pendant
   que le voile de passage se lève. */
.page__tete--vivant .wrap > *,
.page__tete--vivant .page__titre em{animation:tete-monte 1s var(--ease) both}
.page__tete--vivant .page__titre em{display:inline-block}
.page__tete--vivant .page__retour{animation-delay:.2s}
.page__tete--vivant .tag{animation-delay:.3s}
.page__tete--vivant .page__titre{animation-delay:.4s}
.page__tete--vivant .page__titre em{animation-delay:.55s}
.page__tete--vivant .page__sous{animation-delay:.7s}
@keyframes tete-monte{from{opacity:0;translate:0 18px;filter:blur(4px)}}

.page__retour{
  display:flex;width:fit-content;align-items:center;gap:.5rem;margin-bottom:2.2rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  transition:color .3s var(--ease);
}
.page__retour:hover{color:var(--aqua)}
.page__tete .tag{display:flex;width:fit-content}
.page__titre{
  font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.04;letter-spacing:-.03em;
}
.page__titre em{color:var(--lagoon)}
.page__sous{margin:1.5rem 0 0;max-width:58ch;color:var(--muted);font-size:1.04rem}
.sec--liste{padding-top:clamp(3rem,6vw,4.5rem)}

/* ── Sélecteur présents / disparus ── */
.barre{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem);
}
.filtres{
  display:inline-flex;gap:.3rem;padding:.3rem;
  border:1px solid var(--line-soft);border-radius:12px;
  background:rgba(2,10,15,.5);
}
.filtre{
  padding:.55rem 1.05rem;border:0;border-radius:8px;cursor:pointer;
  background:none;color:var(--muted);
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.filtre:hover{color:var(--ink)}
.filtre.is-actif{background:rgba(63,220,203,.12);color:var(--lagoon);box-shadow:inset 0 0 0 1px rgba(63,220,203,.25)}
.filtre:focus-visible{outline:1px solid rgba(126,238,226,.6);outline-offset:2px}
.barre__compte{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

/* ── Le sommaire des zones (bestiaire) ──
   Une ligne par région : son nom en étiquette à gauche, ses zones à la
   suite, qui passent à la ligne plutôt que de déborder. La zone ouverte
   se reconnaît à sa couleur et au trait qui la souligne. Le bloc reste
   masqué tant que le script ne l'a pas rempli. */
.zones{
  flex:1 1 100%;padding:.4rem 1.4rem;border-radius:var(--rayon);
  border:1px solid var(--line-soft);background:var(--panneau);
}
.zones[hidden]{display:none}
.zones__region{
  display:grid;grid-template-columns:8.5rem 1fr;gap:.6rem 1.5rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--line-soft);
}
.zones__titre{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon);
}
.zones__liste{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.zones__lien{
  padding:.15rem 0;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:.94rem;font-weight:500;color:var(--muted);
  text-decoration:underline 2px transparent;text-underline-offset:.5em;
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease);
}
.zones__lien:hover{color:var(--ink)}
.zones__lien.is-actif{color:var(--lagoon);text-decoration-color:currentColor}
.zones__lien:focus-visible{outline:1px solid rgba(126,238,226,.6);outline-offset:4px;border-radius:2px}
.zones__compte{
  margin-left:.45em;font-family:var(--mono);font-size:.68rem;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.zones__lien.is-actif .zones__compte{color:inherit;opacity:.7}
.zones__pied{display:flex;justify-content:flex-end;padding:.9rem 0 .6rem}
.zones__lien--tout{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:640px){
  .zones{padding-inline:1rem}
  .zones__region{grid-template-columns:1fr;gap:.55rem}
}

/* ── Fiche d'un personnage disparu ──
   Le document reste au registre, mais la mer a repris la personne :
   photo éteinte et mention portée en travers. */
.fiche--disparu{opacity:.72}
.fiche--disparu:hover{opacity:1}
.fiche--disparu .fiche__portrait img{filter:grayscale(1) brightness(.72)}
.fiche--disparu .fiche__champs dd,
.fiche--disparu .fiche__corps h3{color:var(--muted)}
.fiche__tampon{
  /* posé bas sur la photo : la mention doit se lire sans effacer le visage */
  position:absolute;left:50%;top:74%;z-index:3;
  transform:translate(-50%,-50%) rotate(-14deg);
  padding:.28rem .8rem;
  border:2px solid rgba(255,139,61,.7);border-radius:4px;
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);background:rgba(2,10,15,.6);
  white-space:nowrap;
}

.fiche{
  display:flex;flex-direction:column;border-radius:var(--rayon);overflow:hidden;
  background:var(--panneau);
  border:1px solid var(--line-soft);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.fiche:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 26px 60px -36px rgba(63,220,203,.4)}

/* ── En-tête du document ── */
.fiche__bandeau{
  display:flex;align-items:center;gap:.9rem;
  padding:.7rem 1.15rem;
  background:rgba(2,10,15,.5);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);
}
.fiche__delivre{
  display:inline-flex;align-items:center;gap:.55rem;margin-right:auto;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon);
}
.fiche__delivre::before{
  content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor;
}
.fiche__num{
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);
}
.fiche__exemple{
  padding:.12rem .5rem;border-radius:4px;
  border:1px solid rgba(232,216,180,.35);
  font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);
}

/* ── Photo d'identité + champs ── */
.fiche__corps{display:flex;gap:1.3rem;padding:1.3rem 1.3rem 1.1rem}

.fiche__portrait{
  position:relative;flex:0 0 152px;aspect-ratio:3 / 4;overflow:hidden;
  border:1px solid var(--line);border-radius:6px;
  background:linear-gradient(150deg,#0c3444,#041a24 72%);
}
.fiche__portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}
.fiche__initiale{
  position:absolute;inset:0;display:none;place-items:center;
  font-family:var(--display);font-size:3.4rem;font-weight:200;
  color:rgba(126,238,226,.3);
}
.fiche__portrait.is-vide .fiche__initiale{display:grid}
.fiche__portrait.is-vide::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 55% at 30% 18%,rgba(79,210,234,.14),transparent 70%);
}

.fiche__champs{margin:0;flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-content:flex-start}
.champ{min-width:0;flex:1 1 42%}
.champ--large{flex:1 1 100%}
.fiche__champs dt{
  margin-bottom:.2rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.fiche__champs dd{margin:0;font-size:.94rem;font-weight:500;color:var(--ink);line-height:1.35;overflow-wrap:break-word}
.champ--large:first-child dd{
  font-family:var(--display);font-size:1.4rem;font-weight:300;line-height:1.15;letter-spacing:-.015em;
}
.champ--large:nth-child(2) dd{color:var(--lagoon);font-size:.92rem}
/* L'œuvre d'origine, sous le lieu : présente pour qui la cherche, assez
   discrète pour que la fiche reste celle d'un port et non d'un catalogue. */
.champ__source{
  display:block;margin-top:.12rem;
  font-size:.74rem;font-weight:400;color:var(--faint);
}

/* Le niveau de danger d'une créature, posé en attribut par script.js :
   un voyant et une couleur, du lagon à l'alerte. */
.champ[data-danger] dd{display:inline-flex;align-items:center;gap:.5rem}
.champ[data-danger] dd::before{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:currentColor;box-shadow:0 0 10px currentColor;
}
.champ[data-danger="inoffensif"] dd{color:var(--lagoon)}
.champ[data-danger="prudence"] dd{color:#f2cf6b}
.champ[data-danger="dangereux"] dd{color:var(--signal)}
.champ[data-danger="mortel"] dd{color:#ff5c61}

/* La description : sous la photo et les champs, sur toute la largeur de
   la fiche, séparée d'eux par un filet. */
.fiche__description{
  margin:0 1.3rem 1.2rem;padding-top:1rem;
  border-top:1px solid var(--line-soft);
  font-size:.92rem;line-height:1.62;color:var(--muted);
}
.fiche__description p{margin:0}
.fiche__description p + p{margin-top:.6rem}

/* ── Le récit d'une arrivée ──
   Quand la fiche porte un récit, un bouton qui dit ce qu'il fait l'ouvre,
   sous les champs. Sans récit, pas de bouton : rien ne doit laisser croire
   qu'il y a quelque chose à ouvrir. */
.fiche__lire{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;
  padding:.85rem 1.2rem;border:0;border-top:1px solid var(--line-soft);
  background:none;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lagoon);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.fiche__lire::after{content:"→";letter-spacing:0;transition:transform .35s var(--ease)}
.fiche__lire:hover{background:rgba(63,220,203,.07);color:var(--aqua)}
.fiche__lire:hover::after{transform:translateX(4px)}
.fiche__lire:focus-visible{outline:1px solid rgba(126,238,226,.6);outline-offset:-4px}

/* Un dialogue plutôt qu'une bulle collée à la fiche : le texte fait
   plusieurs paragraphes, et une bulle de cette taille sortirait de la
   carte, se ferait couper par la grille, et n'aurait nulle part où aller
   sur un téléphone. */
.recit{
  width:min(34rem,calc(100vw - 2.4rem));max-height:min(80vh,44rem);
  margin:auto;padding:clamp(1.8rem,4vw,2.6rem);
  background:var(--angles),linear-gradient(165deg,rgba(8,40,54,.98),rgba(4,21,32,.99));
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  color:var(--ink);overflow:auto;
}
.recit::backdrop{background:rgba(2,10,15,.8);backdrop-filter:blur(4px)}
.recit__quand{
  margin:0 0 .6rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lagoon);
}
.recit__nom{
  margin:0 0 1.4rem;font-weight:300;
  font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em;
}
.recit__texte p{
  color:var(--muted);font-size:.98rem;line-height:1.72;
  /* Justifié, avec césure : la colonne est étroite, et sans coupure des
     mots le drapeau droit creuse des trous entre les mots. Le `lang="fr"`
     de la page donne les bonnes règles. */
  text-align:justify;hyphens:auto;
}
.recit__texte p:last-child{margin-bottom:0}
/* Sous 620 px le panneau tombe à une trentaine de caractères par ligne :
   le justifié y troue le texte. On revient au drapeau. */
@media (max-width:620px){
  .recit__texte p{text-align:left}
}
.recit__fermer{
  float:right;margin:-.4rem -.4rem 0 1rem;
  width:36px;height:36px;padding:0;display:grid;place-items:center;
  background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--muted);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.recit__fermer:hover{color:var(--aqua);border-color:rgba(126,238,226,.5)}
.recit__fermer svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6}

/* ── Bande de lecture, à la manière d'un passeport ── */
.fiche__bande{
  margin-top:auto;padding:.6rem 1.15rem;
  background:rgba(2,10,15,.55);
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:.68rem;letter-spacing:.08em;color:rgba(126,238,226,.34);
  white-space:nowrap;overflow:hidden;text-overflow:clip;
  user-select:none;
}
/* La ligne est plus longue que la carte, exprès : elle doit filer jusqu'au
   bord. Coupée net, elle tranchait un chevron en deux et avait l'air d'un
   débordement ; elle s'éteint donc sur son dernier quart. */
.fiche__bande span{
  display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);
          mask-image:linear-gradient(90deg,#000 72%,transparent);
}

/* ── La carte d'un Égaré ──
   Sur l'accueil et le registre, la fiche devient un badge de la station :
   la photo sur toute la hauteur à gauche, cadrée comme une prise de vue
   d'identification, les champs à droite, le statut dans l'en-tête.
   `display:contents` sur le corps range la photo et les champs directement
   dans la grille de la carte. La carte est son propre conteneur : dans le
   carrousel elle descend à 280 px, et c'est sa largeur, pas celle de
   l'écran, qui décide de la mise en page. */
.fiches--egares .fiche{
  container-type:inline-size;
  display:grid;
  grid-template-columns:clamp(118px,36%,180px) minmax(0,1fr);
  grid-template-rows:auto 1fr auto auto;
  grid-template-areas:
    "photo bandeau"
    "photo champs"
    "photo lire"
    "bande bande";
}
.fiches--egares .fiche__corps{display:contents}
.fiches--egares .fiche__bandeau{
  grid-area:bandeau;flex-wrap:wrap;gap:.35rem .7rem;
  padding:.85rem 1.2rem .8rem;background:none;
}
.fiches--egares .fiche__num{order:2}
/* le statut : présent au lagon, disparu à l'orange des signaux */
.fiches--egares .fiche__bandeau::after{
  content:"Présent";order:1;
  padding:.12rem .45rem;border:1px solid rgba(63,220,203,.35);border-radius:4px;
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon);
}
.fiches--egares .fiche--disparu .fiche__bandeau::after{
  content:"Disparu";border-color:rgba(255,139,61,.45);color:var(--signal);
}
.fiches--egares .fiche__portrait{
  grid-area:photo;align-self:stretch;
  aspect-ratio:auto;min-height:clamp(158px,48cqi,240px);
  border:0;border-right:1px solid var(--line);border-radius:0;
}
.fiches--egares .fiche__portrait img{position:absolute;inset:0}
/* les repères de visée, et un voile en bas pour asseoir la photo */
.fiches--egares .fiche__portrait::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--angles),linear-gradient(180deg,transparent 62%,rgba(2,10,15,.6));
}
.fiches--egares .fiche__champs{grid-area:champs;padding:1rem 1.2rem 1.1rem;gap:.85rem 1.2rem}
.fiches--egares .champ--large:first-child dd{font-size:clamp(1.2rem,5cqi,1.55rem)}
.fiches--egares .champ:not(.champ--large){
  flex:1 1 40%;padding-top:.8rem;border-top:1px solid var(--line-soft);
}
.fiches--egares .fiche__lire{grid-area:lire}
.fiches--egares .fiche__description{grid-column:1 / -1}
.fiches--egares .fiche__bande{grid-area:bande}

@container (max-width:400px){
  .fiches--egares .fiche__delivre{display:none}
  .fiches--egares .fiche__bandeau{padding:.75rem 1rem}
  .fiches--egares .fiche__champs{padding:.85rem 1rem .9rem;gap:.7rem 1rem}
  .fiches--egares .champ:not(.champ--large){flex-basis:100%;padding-top:.6rem}
  .fiches--egares .fiche__lire{padding-inline:1rem}
}
/* Plus étroite encore (un téléphone), la photo reste à côté des champs :
   une photo d'identité est verticale, et couchée en bandeau au-dessus
   de la fiche elle n'était plus qu'une tranche de portrait. C'est donc
   la colonne de la photo qui maigrit, pour laisser au texte de quoi
   tenir sur une ligne ou deux.

   Par média et non par conteneur : une requête de conteneur ne peut pas
   retoucher la grille du conteneur lui-même, et c'est bien la largeur
   des colonnes qu'il faut reprendre. */
/* L'en-tête et le bouton de lecture passent aussi sur toute la largeur :
   la photo n'a plus à couvrir que la hauteur des champs, ce qui la garde
   plus proche de son format, et le bouton tient sur une ligne. */
@media (max-width:560px){
  .fiches--egares .fiche{
    grid-template-columns:clamp(108px,36%,150px) minmax(0,1fr);
    grid-template-areas:
      "bandeau bandeau"
      "photo champs"
      "lire lire"
      "bande bande";
  }
}
/* Dans le carrousel, un téléphone montre une carte presque pleine largeur,
   la suivante dépassant au bord : à 280 px de front, la carte n'avait plus
   la place de poser la photo à côté des champs. */
@media (max-width:560px){
  .fiches--piste > .fiche{flex-basis:calc(100% - 2.2rem)}
}

/* ── La carte d'un habitant ──
   Les habitants ne sont pas des arrivants qu'on enregistre : ce sont les
   gens qu'on vient voir en ville. Leur carte ne reprend donc ni le badge
   ni la bande de passeport des Égarés. Le portrait se voit à travers un
   hublot, centré en haut de la carte ; le rôle et le nom viennent dessous,
   puis la description, et l'en-tête du document descend en pied de carte.
   Le sable remplace le lagon : la couleur des gens de la ville, pas celle
   des instruments.
   Le cadre du hublot et ses rivets sont dessinés sur le corps de la carte,
   derrière le portrait : posés sur le portrait lui-même, ils seraient
   rognés par son arrondi. D'où une taille fixe (`--hublot`), que le cadre
   et le portrait partagent. */
.fiches--habitants{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.fiches--habitants .fiche{
  --hublot:168px;
  background:
    radial-gradient(70% 42% at 50% 0%,rgba(232,216,180,.07),transparent 72%),
    var(--panneau);
}
.fiches--habitants .fiche__corps{
  position:relative;flex-direction:column;align-items:center;gap:0;
  padding:2.1rem 1.35rem 0;text-align:center;
}
/* le cadre : un anneau sombre, huit rivets de sable */
.fiches--habitants .fiche__corps::before{
  content:"";position:absolute;left:50%;top:calc(2.1rem - 15px);
  width:calc(var(--hublot) + 30px);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  border:1px solid rgba(232,216,180,.28);
  background:
    radial-gradient(circle at 50% 7.5px,rgba(232,216,180,.75) 1.6px,transparent 2.4px),
    radial-gradient(circle at 50% calc(100% - 7.5px),rgba(232,216,180,.75) 1.6px,transparent 2.4px),
    radial-gradient(circle at 7.5px 50%,rgba(232,216,180,.75) 1.6px,transparent 2.4px),
    radial-gradient(circle at calc(100% - 7.5px) 50%,rgba(232,216,180,.75) 1.6px,transparent 2.4px),
    radial-gradient(circle at calc(50% + (50% - 7.5px) * .7071) calc(50% - (50% - 7.5px) * .7071),rgba(232,216,180,.75) 1.6px,transparent 2.4px),
    radial-gradient(circle at calc(50% - (50% - 7.5px) * .7071) calc(50% - (50% - 7.5px) * .7071),rgba(232,216,180,.75) 1.6px,transparent 2.4px),
    radial-gradient(circle at calc(50% + (50% - 7.5px) * .7071) calc(50% + (50% - 7.5px) * .7071),rgba(232,216,180,.75) 1.6px,transparent 2.4px),
    radial-gradient(circle at calc(50% - (50% - 7.5px) * .7071) calc(50% + (50% - 7.5px) * .7071),rgba(232,216,180,.75) 1.6px,transparent 2.4px),
    linear-gradient(150deg,#164654,#06212b 70%);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.95);
}
.fiches--habitants .fiche__portrait{
  z-index:1;flex:none;width:var(--hublot);aspect-ratio:1;
  border:1px solid rgba(232,216,180,.45);border-radius:50%;
}
.fiches--habitants .fiche__portrait img{transition:transform .8s var(--ease)}
.fiches--habitants .fiche:hover .fiche__portrait img{transform:scale(1.06)}
/* le verre : un bord qui s'assombrit et un reflet en biais */
.fiches--habitants .fiche__portrait::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 38%);
  box-shadow:inset 0 0 0 4px rgba(2,10,15,.35),inset 0 0 22px rgba(2,10,15,.55);
}
.fiches--habitants .fiche__initiale{font-size:3rem}
.fiches--habitants .fiche__tampon{top:72%;font-size:.56rem}

/* Le tampon du bestiaire : même forme que « Disparu », mais dans le bleu
   des repères, car il annonce une créature rare et non une absence. */
.fiche__tampon--unique{
  top:12%;
  border-color:rgba(106,214,224,.7);
  color:var(--lagoon);
}
.fiches--habitants .fiche__champs{
  flex:none;width:100%;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:.4rem;
  margin-top:1.7rem;
}
.fiches--habitants .champ{flex:none}
/* le rôle passe au-dessus du nom ; leurs intitulés restent lus par les
   lecteurs d'écran, mais la carte n'en a pas besoin pour se comprendre */
.fiches--habitants .champ:nth-child(2){order:-1}
.fiches--habitants .champ:nth-child(-n+2) dt{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.fiches--habitants .champ--large:first-child dd{font-size:1.5rem;font-weight:300}
.fiches--habitants .champ--large:nth-child(2) dd{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sand);
}
.fiches--habitants .champ--large:nth-child(2) dd::before,
.fiches--habitants .champ--large:nth-child(2) dd::after{
  content:"";flex:none;width:16px;height:1px;background:currentColor;opacity:.6;
}
.fiches--habitants .fiche__description{
  margin:1.3rem 1.35rem 0;padding:1.1rem 0 1.35rem;
  border-top:1px solid var(--line-soft);font-size:.92rem;
}
.fiches--habitants .fiche__bandeau{
  order:3;margin-top:auto;border-bottom:0;border-top:1px solid var(--line-soft);
  background:rgba(2,10,15,.35);
}
.fiches--habitants .fiche__delivre{color:var(--sand)}
.fiches--habitants .fiche__delivre::before{box-shadow:none}
.fiches--habitants .fiche__num{color:var(--muted)}
.fiches--habitants .fiche__bande{display:none}
.fiches--habitants .fiche:hover{box-shadow:0 26px 60px -36px rgba(232,216,180,.25)}

/* ══════════════════ LE JOURNAL DE BORD ══════════════════
   Un carnet posé sur un bureau, qu'on feuillette. script.js compose les
   pages à partir de journal.js et règle leur taille (`--pw`, `--ph`),
   le corps du texte (`--fs`) et la hauteur d'une ligne (`--ligne`) sur
   la place disponible.

   Chaque feuille tourne autour de la reliure (rotateY de -180°) ; son
   recto et son verso sont deux faces dos à dos. Fermé, le carnet est
   décalé d'une demi-page pour que la couverture soit au centre. */
.masque{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.bureau{
  --papier:#e9ddc3;
  --encre:#22303a;
  --encre-pale:#6a6f6c;
  --stylo:#27467e;
  --tampon:#b8432b;
  --regle:rgba(39,70,126,.15);
  --cuir:#0c2a32;
  --tour:.9s;
  --machine:"Courier Prime","Courier New",ui-monospace,monospace;
  --main:"Caveat","Segoe Print","Bradley Hand",cursive;

  min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;padding:clamp(2rem,6vh,4rem) clamp(.6rem,2.5vw,2rem) clamp(2.6rem,8vh,5rem);
  /* la lampe du bureau : une flaque de lumière chaude sous le carnet */
  background:
    radial-gradient(60% 55% at 50% 45%,rgba(232,216,180,.09),transparent 70%),
    radial-gradient(90% 70% at 50% 120%,rgba(43,184,173,.06),transparent 70%),
    var(--abyss);
}
.bureau__scene{width:100%;display:flex;justify-content:center}

/* ── Le fond qui vit ──
   Deux couches, lentes et pâles, sous le carnet : une carte marine qui
   dérive (les isobathes du site), et de la poussière qui flotte dans la lumière de la lampe (un canvas,
   posé par script.js). Le carnet et ses commandes passent au-dessus. */
.bureau{position:relative;overflow:hidden;isolation:isolate}
.bureau > .bureau__scene,.bureau > .bureau__commandes{position:relative;z-index:2}
.bureau::before{
  content:"";position:absolute;inset:-12%;z-index:-2;pointer-events:none;
  background:
    url("assets/isobathes.svg") 8% 20% / min(900px,90vw) auto no-repeat,
    url("assets/isobathes.svg") 96% 85% / min(700px,70vw) auto no-repeat;
  opacity:.22;
  animation:carte-derive 90s ease-in-out infinite alternate;
}
@keyframes carte-derive{
  from{transform:translate3d(-2%,1.5%,0) rotate(-2deg)}
  to{transform:translate3d(2%,-1.5%,0) rotate(2deg)}
}
.bureau__poussiere{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

/* ── Le carnet ── */
.livre{
  position:relative;width:calc(var(--pw) * 2);height:var(--ph);
  font-size:var(--fs);color:var(--encre);
  transition:translate var(--tour) cubic-bezier(.45,.05,.25,1),opacity .5s ease;
  opacity:0;
}
.livre.est-pret{opacity:1}
/* L'ombre du carnet sur le bureau : large et floue, une sous chaque
   moitié — ::before sous la page de droite, ::after sous celle de
   gauche. Portée par chaque feuille, elle s'empilait sous la couverture
   en un bloc sombre ; d'une seule pièce qu'on élargissait, elle
   paraissait étirée pendant le mouvement. Ici, rien ne change de taille :
   l'ombre de gauche apparaît quand la couverture s'ouvre et s'efface
   quand elle se referme, celle de droite s'efface sous le dos. */
.livre::before,.livre::after{
  content:"";position:absolute;top:2%;bottom:0;z-index:-1;pointer-events:none;
  border-radius:8px;
  box-shadow:0 34px 70px -6px rgba(0,0,0,.6),0 12px 30px -4px rgba(0,0,0,.45);
  transition:opacity var(--tour) ease;
}
.livre::before{left:50%;right:0}
.livre::after{left:0;right:50%;transition-delay:var(--glisse,0s)}
.livre--ferme::after{opacity:0;transition-delay:0s}
.livre--fini::before{opacity:0}
.livre--simple::before{left:0}
.livre--simple::after{display:none}
.livre.sans-anim::before,.livre.sans-anim::after{transition:none !important}
.livre--ferme{translate:calc(var(--pw) * -.5) 0}
.livre--fini{translate:calc(var(--pw) * .5) 0}
/* Ouvrir ou fermer se fait en deux temps, jamais ensemble : le carnet
   glisse à sa place, puis la couverture tourne ; à la fermeture, la
   couverture se rabat, puis le carnet se recentre. Les deux mouvements
   mêlés montraient, à mi-course, l'intérieur de la couverture vu par la
   tranche, en bande claire à côté du cuir. Un délai posé sur l'état
   d'arrivée ne joue que dans ce sens-là. */
.livre:not(.livre--simple){--glisse:.45s;transition:translate var(--glisse) cubic-bezier(.45,.05,.25,1),opacity .5s ease}
.livre--ferme,.livre--fini{transition-delay:var(--tour),0s}
.livre:not(.livre--simple) .feuille.tournee:first-child,
.livre:not(.livre--simple) .feuille:last-child:not(.tournee){transition-delay:var(--glisse)}
.livre:not(.livre--simple) .feuille.tournee:first-child.en-tour .face::before,
.livre:not(.livre--simple) .feuille:last-child:not(.tournee).en-tour .face::before{animation-delay:var(--glisse)}
.livre--simple{width:var(--pw)}
.livre.sans-anim,.livre.sans-anim .feuille{transition:none !important}

/* la feuille de mesure : de la taille des vraies pages, hors de vue */
.livre--mesure{position:absolute;left:-9999px;top:0;visibility:hidden;opacity:1;width:var(--pw);height:auto}
.livre--mesure .pc{position:relative}

.feuille{
  position:absolute;top:0;left:50%;width:var(--pw);height:var(--ph);
  transform-origin:left center;transform-style:preserve-3d;
  /* La perspective est portée par chaque feuille, pas par le carnet :
     dans un espace 3D commun, le navigateur range les feuilles selon
     leur profondeur et ignore leur z-index — près de la reliure, la page
     du dessous passait devant la couverture qui se soulevait. Ici, les
     feuilles restent des plans empilés dans l'ordre voulu. */
  transform:perspective(2000px) rotateY(0deg);
  transition:transform var(--tour) cubic-bezier(.45,.05,.25,1),opacity .2s ease;
  cursor:pointer;
  /* préparée d'avance : sans cela, le premier tour fige le temps que le
     navigateur dessine toutes les pages */
  will-change:transform;
}
/* pendant le tour, une ombre passe sur la page et s'efface : sans elle,
   la feuille qui pivote se lit comme un bloc plat */
.feuille.en-tour .face::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgba(20,12,0,.35),rgba(20,12,0,.08) 55%,transparent);
  animation:ombre-tour var(--tour) ease both;
}
.feuille.en-tour .face--verso::before{background:linear-gradient(270deg,rgba(20,12,0,.35),rgba(20,12,0,.08) 55%,transparent)}
@keyframes ombre-tour{0%,100%{opacity:0}50%{opacity:1}}
.feuille.tournee{transform:perspective(2000px) rotateY(-180deg)}
.livre--simple .feuille{left:0}
/* une page à la fois : la feuille tournée s'efface avant de passer à gauche */
.livre--simple .feuille.tournee{
  opacity:0;
  transition:transform var(--tour) cubic-bezier(.45,.05,.25,1),opacity .25s ease calc(var(--tour) * .45);
}

.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face--verso{transform:rotateY(180deg)}

/* ── Une page ── */
.pc{
  position:absolute;inset:0;width:var(--pw);height:var(--ph);
  display:flex;flex-direction:column;
  padding:7% 8% 5.5% 10%;
  background:
    radial-gradient(120% 60% at 40% 0%,rgba(255,255,255,.3),transparent 60%),
    radial-gradient(80% 50% at 100% 100%,rgba(130,95,40,.16),transparent 70%),
    radial-gradient(closest-side,transparent 75%,rgba(120,85,30,.14)) 50% 50% / 115% 115% no-repeat,
    var(--papier);
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
  overflow:hidden;
}
/* le creux de la reliure : une ombre côté dos de chaque page */
.pc::after{
  content:"";position:absolute;top:0;bottom:0;width:9%;pointer-events:none;
}
.face--recto .pc::after{left:0;background:linear-gradient(90deg,rgba(60,40,10,.32),rgba(60,40,10,.08) 40%,transparent)}
.face--verso .pc::after{right:0;background:linear-gradient(270deg,rgba(60,40,10,.32),rgba(60,40,10,.08) 40%,transparent)}
.face--recto .pc{border-radius:0 6px 6px 0}
.face--verso .pc{border-radius:6px 0 0 6px;padding:7% 10% 5.5% 8%}
/* l'épaisseur du carnet sous la page de droite et sous celle de gauche */
.livre:not(.livre--simple) .face--recto .pc{box-shadow:2px 0 0 #d8cba9,4px 1px 0 #cbbd98,6px 2px 0 #bfb08b}
.livre:not(.livre--simple) .face--verso .pc{box-shadow:-2px 0 0 #d8cba9,-4px 1px 0 #cbbd98,-6px 2px 0 #bfb08b}
.livre--simple .pc{box-shadow:2px 0 0 #d8cba9,4px 1px 0 #cbbd98}

.pc__tete{
  flex:none;padding-bottom:.4em;margin-bottom:.9em;
  border-bottom:1px solid rgba(34,48,58,.4);
  font-family:var(--machine);font-size:.62em;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-pale);text-align:center;
}
.pc__corps{
  position:relative;flex:1;min-height:0;overflow:hidden;
  background:repeating-linear-gradient(180deg,transparent 0 calc(var(--ligne) - 1px),var(--regle) calc(var(--ligne) - 1px) var(--ligne));
}
/* hauteur fixe : les numéros sont posés après la composition, et la
   page mesurée doit avoir la même place que la vraie */
.pc__pied{
  flex:none;height:1.6em;padding-top:.3em;
  font-family:var(--main);font-size:1.25em;line-height:1;color:var(--encre-pale);
}
.face--recto .pc__pied{text-align:right}
.face--verso .pc__pied{text-align:left}
.pc--blanche .pc__tete{visibility:hidden}

/* ── La couverture et le dos : du cuir, un cadre gaufré, un élastique ── */
.pc--couverture,.pc--dos{
  padding:0;
  background:
    radial-gradient(120% 90% at 30% 15%,rgba(63,220,203,.12),transparent 55%),
    radial-gradient(90% 80% at 80% 100%,rgba(0,0,0,.45),transparent 70%),
    repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    var(--cuir);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 40px rgba(0,0,0,.55);
}
.face--recto .pc--couverture{border-radius:4px 10px 10px 4px}
.face--verso .pc--dos{border-radius:10px 4px 4px 10px}
.pc--couverture::after,.pc--dos::after{display:none}
.pc__cadre{
  position:absolute;inset:7%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;
  border:1px solid rgba(232,216,180,.35);
  box-shadow:0 0 0 4px var(--cuir),0 0 0 5px rgba(232,216,180,.18);
  text-align:center;
}
/* l'élastique qui tient le carnet fermé */
.pc--couverture::before{
  content:"";position:absolute;top:0;bottom:0;right:11%;width:.9em;z-index:1;
  background:linear-gradient(90deg,#05161b,#0d2128 45%,#05161b);
  box-shadow:0 0 6px rgba(0,0,0,.6);
}
.pc__embleme{
  width:3.2em;height:3.2em;fill:none;stroke:var(--sand);stroke-width:1.2;opacity:.75;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
.pc--dos .pc__embleme{width:2em;height:2em;opacity:.35}
.pc__titre-couv{
  margin:0;padding:0 8%;font-family:var(--display);font-weight:300;
  font-size:2em;line-height:1.15;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);
  text-shadow:0 1px 0 rgba(0,0,0,.7),0 -1px 0 rgba(255,255,255,.06);
}
.pc__sous-couv{
  margin:0;font-family:var(--mono);font-size:.8em;letter-spacing:.4em;text-transform:uppercase;color:rgba(232,216,180,.7);
}

/* ── La page de garde : un formulaire imprimé ── */
.pc__titre-garde{
  margin:1.4em 0 .4em;text-align:center;
  font-family:var(--machine);font-weight:700;font-size:1.6em;line-height:1.2;letter-spacing:.24em;text-transform:uppercase;
}
.pc__infos{margin:1.4em 0 2em;display:grid;gap:.5em}
.pc__infos div{display:flex;align-items:baseline;gap:.7em}
.pc__infos dt{
  flex:none;width:6.5em;font-family:var(--machine);font-size:.7em;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-pale);
}
.pc__infos dd{
  flex:1;margin:0;padding:0 .3em;border-bottom:1px dotted rgba(34,48,58,.5);
  font-family:var(--main);font-size:1.45em;line-height:1.2;color:var(--stylo);
}
.pc__intro{margin:0;font-family:var(--machine);font-size:.9em;line-height:var(--ligne);color:var(--encre)}
.pc__fin{
  margin:var(--ligne) 0 0;font-family:var(--main);font-size:1.45em;line-height:var(--ligne);color:var(--encre-pale);
}

/* ── Une entrée ── */
.ec-tete{margin-bottom:.6em}
.ec-quand{margin:0;font-family:var(--main);font-weight:600;font-size:1.55em;line-height:1.1;color:var(--stylo)}
.ec-genre{
  margin:.25em 0 0;font-family:var(--machine);font-size:.64em;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-pale);
}
.ec-ligne-titre{display:flex;align-items:center;flex-wrap:wrap;gap:.5em 1.1em;margin-top:.5em}
.ec-titre{
  margin:0;font-family:var(--machine);font-weight:700;font-size:1.2em;line-height:1.3;color:var(--encre);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
}
.ec-tampon{
  display:inline-block;padding:.1em .55em;
  border:2px solid var(--tampon);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(184,67,43,.35);
  font-family:var(--machine);font-weight:700;font-size:.72em;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tampon);opacity:.82;rotate:-7deg;
}
.ec-exemple{
  padding:.1em .5em;border-radius:4px;border:1px dashed rgba(34,48,58,.5);
  font-family:var(--machine);font-size:.6em;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-pale);
}
.ec-texte{margin:0 0 var(--ligne);font-family:var(--machine);font-size:.9em;line-height:var(--ligne);color:var(--encre)}
.ec-suite{
  position:relative;margin:0 0 var(--ligne);padding-left:2.2em;
  font-family:var(--main);font-size:1.3em;line-height:var(--ligne);color:var(--stylo);
}
.ec-suite::before{content:"N.B.";position:absolute;left:0;top:0;font-weight:600}
.ec-fin{margin:0 0 var(--ligne);text-align:center;font-size:1.1em;line-height:var(--ligne);color:var(--encre-pale)}
.ec-acte{
  margin:0 0 var(--ligne);padding:.5em 0;text-align:center;
  border-top:3px double rgba(34,48,58,.6);border-bottom:3px double rgba(34,48,58,.6);
  font-family:var(--machine);font-weight:700;font-size:.8em;letter-spacing:.2em;text-transform:uppercase;
}
/* l'illustration : une photo collée au ruban adhésif, un peu de travers */
.ec-image{
  position:relative;margin:1em .4em calc(var(--ligne) * .8);
  padding:.45em .45em .1em;background:#f7f3ea;
  box-shadow:0 8px 14px -8px rgba(40,25,5,.6),0 0 0 1px rgba(0,0,0,.08);
  rotate:-1.2deg;
}
.ec-image::before{
  content:"";position:absolute;top:-.6em;left:50%;width:4.5em;height:1.3em;translate:-50% 0;rotate:3deg;
  background:rgba(250,244,220,.65);box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.ec-image img{display:block;width:100%;aspect-ratio:2 / 1;object-fit:cover;background:#cbbf9f}
.ec-credit{margin:.1em 0 0;text-align:right;font-family:var(--main);font-size:.95em;line-height:1.5;color:var(--encre-pale)}

/* ── Les commandes, sous le carnet ── */
.bureau__commandes{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem 1rem;
}
.bureau__fleche{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;padding:0;border-radius:50%;
  border:1px solid var(--line);background:rgba(4,21,32,.6);color:var(--aqua);cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease),opacity .25s var(--ease);
}
.bureau__fleche svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bureau__fleche:hover:not(:disabled){border-color:rgba(126,238,226,.55);background:rgba(63,220,203,.1)}
.bureau__fleche:disabled{opacity:.3;cursor:default}
.bureau__fleche:focus-visible,.bureau__ruban:focus-visible{outline:1px solid rgba(126,238,226,.7);outline-offset:3px}
.bureau__pages{
  min-width:12rem;text-align:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
/* le ruban : un marque-page rouge qui mène à la dernière entrée */
.bureau__ruban{
  position:relative;padding:.45rem .9rem .45rem 1.6rem;border:0;border-radius:3px;cursor:pointer;
  background:#8f2f22;color:#f3e3c8;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.8);
  transition:background .25s var(--ease),opacity .25s var(--ease);
}
.bureau__ruban::before{
  content:"";position:absolute;left:.6rem;top:50%;width:.45rem;height:.7rem;translate:0 -50%;
  background:#f3e3c8;clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%);opacity:.85;
}
.bureau__ruban:hover:not(:disabled){background:#a83a2b}
.bureau__ruban:disabled{opacity:.4;cursor:default}
.bureau__sans-script{color:var(--muted);text-align:center}

@media (prefers-reduced-motion:reduce){
  .livre,.feuille{transition:none !important}
  .bureau::before{animation:none}
}

/* ══════════════════ CTA ══════════════════ */
/* Un sonar posé sous le titre : les cercles montent du bas de la section. */
.cta{
  position:relative;text-align:center;overflow:hidden;isolation:isolate;
  padding-block:clamp(6rem,11vw,9.5rem);
  background:
    radial-gradient(60% 90% at 50% 115%,rgba(43,184,173,.2),transparent 65%),
    var(--deep);
  border-top:1px solid var(--line-soft);
}
.cta::before{
  content:"";position:absolute;z-index:-1;left:50%;bottom:-420px;
  width:min(900px,160vw);aspect-ratio:1;translate:-50% 0;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle closest-side,transparent 0 calc(12.5% - 1px),rgba(126,226,218,.13) calc(12.5% - 1px) 12.5%);
  -webkit-mask-image:radial-gradient(circle closest-side,#000 40%,transparent 100%);
          mask-image:radial-gradient(circle closest-side,#000 40%,transparent 100%);
  animation:onde 6s ease-out infinite;
}
@keyframes onde{0%{scale:.96;opacity:.6}60%{opacity:1}100%{scale:1.04;opacity:.6}}
/* La sonde du bandeau part du centre de ces cercles (bottom -420px, rayon
   d'une demi-largeur) et va jusqu'au dernier. La neige y remonte aussi. */
.cta .sonde{
  --iso:min(900px,160vw);--portee:1;
  right:auto;top:auto;left:50%;bottom:calc(var(--iso) / 2 - 420px);
}
/* Le bouton émet son propre écho, en décalé du sonar. */
.cta .btn{position:relative}
.cta .btn::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1px solid var(--lagoon);
  animation:halo 3.2s var(--ease) 1.2s infinite both;
}
@keyframes halo{
  0%      {inset:-1px;opacity:.8}
  70%,100%{inset:-14px -20px;opacity:0}
}
.cta .btn:hover::after{animation:none;opacity:0}
.cta .overline{justify-content:center}
.cta__title{
  font-weight:300;font-size:clamp(2.1rem,5vw,3.8rem);
  line-height:1.12;letter-spacing:-.025em;margin-bottom:2.4rem;
}
.cta__inner{max-width:780px}

/* ══════════════════ FOOTER ══════════════════ */
.footer{background:var(--abyss);border-top:1px solid var(--line-soft);padding-block:2.4rem}
.footer__inner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem 3rem;
}
.footer__marque{display:flex;flex-direction:column;gap:.15rem;font-size:.82rem;color:var(--faint)}
.footer__nom{
  font-family:var(--display);font-weight:600;font-size:.92rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink);
}
.footer__liens{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;
  font-size:.86rem;font-weight:500;color:var(--muted);
}
.footer__liens a{transition:color .3s var(--ease)}
.footer__liens a:hover{color:var(--aqua)}
.footer__coord{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}

/* ══════════════════ RÉVÉLATIONS ══════════════════ */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal[data-delay="3"]{transition-delay:.36s}

/* ══════════════════ RESPONSIVE ══════════════════ */

@media (max-width:1260px) and (min-width:1025px){
  .nav{gap:1.4rem}
  .nav__links{gap:1.35rem}
  .nav__links a{font-size:.68rem;letter-spacing:.1em}
}
@media (max-width:960px){
  .ile__grid,.egares__grid{grid-template-columns:1fr}
  .portes{grid-template-columns:1fr}
  .quote{grid-column:1}
  .cards{grid-template-columns:1fr}
  .ile__grid{gap:3rem}
  .map{order:2}
  .sommaire{display:none}
  .footer__inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .footer__marque{align-items:center}
}

@media (max-width:1024px){
  .nav__burger{display:flex}
  .nav__join{display:none}
  .nav__links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(2,10,15,.97);backdrop-filter:blur(16px);
    border-block:1px solid var(--line-soft);
    max-height:0;overflow:hidden;transition:max-height .5s var(--ease);
  }
  .nav__links.is-open{max-height:620px}
  .nav__links a{padding:1rem clamp(1.3rem,4vw,2.8rem);border-bottom:1px solid var(--line-soft)}
  .nav__links a::after{display:none}
  .nav__links > a[aria-current="page"],
  .nav__groupe:has(.nav__sous [aria-current="page"]) > a{color:var(--lagoon)}
  /* dans le menu déroulant, le sous-menu se déplie à même la liste :
     rien à survoler sur un écran tactile, et plus de chevron à montrer */
  .nav__groupe{display:block;position:static}
  .nav__groupe::after{display:none}
  .nav__sous{
    position:static;translate:none;min-width:0;padding:0;
    border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;
    opacity:1;visibility:visible;
  }
  .nav__sous::before{display:none}   /* plus d'écart à ponter ici */
  .nav__sous a{
    padding-left:calc(clamp(1.3rem,4vw,2.8rem) + 1.4rem);border-radius:0;
    font-size:.68rem;color:var(--faint);
  }
  .nav__sous a::before{display:none}
  .hero__title{letter-spacing:.1em}
  .compass{margin-inline:auto}
  .card{padding:1.8rem 1.5rem}
  .egares__side{padding:1.6rem}
}

@media (max-width:760px){

  /* Le relevé de bord se range sous les boutons au lieu de flotter en bas
     de l'écran. */
  .hero{flex-direction:column;justify-content:center;padding-bottom:3rem}
  .hero__releve{
    position:static;translate:none;width:min(100% - 2.6rem,var(--wrap));
    margin:2.8rem auto 0;padding-right:0;
    flex-direction:column;font-size:.64rem;
  }
  .hero__scroll{display:none}
}

/* Très petits écrans : la photo rétrécit et les champs passent les uns
   sous les autres plutôt que de se serrer sur deux colonnes. */
@media (max-width:480px){
  .fiche__corps{gap:1rem;padding:1.1rem 1.1rem .9rem}
  .fiche__description{margin:0 1.1rem .9rem}
  .fiche__portrait{flex-basis:104px}
  .champ{flex:1 1 100%}
  .fiche__delivre{letter-spacing:.08em}
}

/* Sous 400 px, les boutons en capitales espacées refusent de passer à la
   ligne (`white-space:nowrap`, voulu : un bouton coupé en deux lignes se
   lit mal). On resserre la lettre et le rembourrage. */
@media (max-width:400px){
  .btn{padding-inline:1.05rem;letter-spacing:.05em;font-size:.74rem}
  .btn--lg{padding:.95rem 1.4rem;font-size:.78rem}
  .filtres{gap:.15rem;padding:.2rem}
  .filtre{padding:.5rem .7rem;letter-spacing:.06em;font-size:.68rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  /* La vidéo du hero n'est pas masquée ici : c'est le visuel principal de la
     page, et son mouvement est lent et continu. */
  .hero__video{animation:none}

  /* La boussole ne se fige pas : une aiguille immobile sous « relevé
     instable » dirait le contraire du texte. Elle passe en version calme.
     Rappel : Windows signale « mouvement réduit » dès que « Afficher les
     animations » est décoché, réglage par défaut de beaucoup d'installations. */
  .cmp__needle{animation:derive-aiguille 14s ease-in-out infinite !important}
  .cmp__ring--in{animation:none !important}

  /* Les remous de l'en-tête passent au triple de leur durée : le
     déplacement devient imperceptible, l'en-tête reste vivant. */
  .page__tete--vivant::before{animation:remous-a 90s ease-in-out infinite alternate !important}
  .page__tete--vivant::after{animation:remous-b 124s ease-in-out infinite alternate !important}
  /* Les échos ralentissent aussi ; le texte arrive d'emblée. */
  .sonde__ping{animation:ping 18s cubic-bezier(.15,.55,.35,1) infinite both !important}
  .sonde__ping:nth-child(2){animation-delay:6s !important}
  .sonde__ping:nth-child(3){animation-delay:12s !important}
  .page__tete--vivant .wrap > *,
  .page__tete--vivant .page__titre em{animation:none !important}
}

/* Assez ample pour se voir, assez lent pour ne gêner personne : un
   balancement continu de douze degrés, sans à-coup ni tour complet. */
@keyframes derive-aiguille{
  0%,100%{transform:rotate(-12deg)}
  50%    {transform:rotate(12deg)}
}

/* ── Le bouton du fond sonore (musique.js) ──
   En bas à droite, à l'écart du sommaire. Quatre barres : elles
   s'animent quand la musique joue, restent à plat quand elle est coupée.
   Discret par défaut, il ne s'éclaire qu'au survol. */
.musique{
  position:fixed;z-index:30;
  right:max(1.1rem,env(safe-area-inset-right));bottom:max(1.1rem,env(safe-area-inset-bottom));
  display:grid;place-items:center;width:38px;height:38px;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:rgba(2,10,15,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  cursor:pointer;opacity:.55;
  transition:opacity .3s var(--ease),border-color .3s var(--ease);
}
.musique:hover,.musique:focus-visible{opacity:1;border-color:rgba(126,226,218,.45)}
.musique:focus-visible{outline:1px solid var(--lagoon);outline-offset:3px}
.musique__barres{display:flex;align-items:flex-end;gap:2px;height:12px}
.musique__barres i{width:2px;height:3px;border-radius:1px;background:var(--lagoon);transition:height .4s var(--ease)}
.musique.is-joue .musique__barres i{animation:musique-barre 1.3s ease-in-out infinite alternate}
.musique.is-joue .musique__barres i:nth-child(2){animation-duration:.9s;animation-delay:-.4s}
.musique.is-joue .musique__barres i:nth-child(3){animation-duration:1.6s;animation-delay:-.8s}
.musique.is-joue .musique__barres i:nth-child(4){animation-duration:1.1s;animation-delay:-.2s}
@keyframes musique-barre{from{height:3px}to{height:12px}}

/* Mouvement réduit : les barres ne bougent plus, mais gardent des
   hauteurs inégales tant que la musique joue — sinon « en marche » et
   « coupé » se ressembleraient. */
@media (prefers-reduced-motion:reduce){
  .musique.is-joue .musique__barres i{animation:none !important}
  .musique.is-joue .musique__barres i:nth-child(1){height:6px}
  .musique.is-joue .musique__barres i:nth-child(2){height:11px}
  .musique.is-joue .musique__barres i:nth-child(3){height:8px}
  .musique.is-joue .musique__barres i:nth-child(4){height:4px}
}