/* ══════════════════════════════════════════════════════════
   BASE — jetons, matières, typographie, navigation.

   Deux matières, rien d'autre :
   · la copie double (papier, réglure Seyès, marge rouge), pour
     le récit et l'effort ;
   · la nuit, pour la signature, les jeux et le soir.
   Le bleu est la main de Samuel (encre, signature, courbe).
   Le rouge est la main du correcteur, et rien d'autre.
   ══════════════════════════════════════════════════════════ */

@font-face { font-family: 'Newsreader Repli'; src: local('Georgia'); size-adjust: 103%; ascent-override: 92%; }

:root {
  --bas: 0px;
  --nuit: #080A12;
  --nuit-2: #0F1322;
  --nuit-3: #171C30;
  --lumiere: #EEF1F8;
  --lumiere-2: #A3ABC0;
  --lumiere-3: #636C86;
  --filet-nuit: rgba(238, 241, 248, .12);

  --papier: #FAFAF7;
  --encre: #15171F;
  --encre-2: #4A4E5B;
  --graphite: #8D919C;
  --reglure: #E0E4F3;
  --reglure-forte: #C3CBEB;
  --marge-c: #EB9AA4;

  --bleu: #1F45FF;
  --bleu-nuit: #7390FF;
  --bleu-pale: #B5C4FF;
  --rouge: #CF343D;

  --bronze: #C98A55;
  --argent: #B9C3D2;
  --or: #E7C35D;

  --serif: 'Newsreader', 'Newsreader Repli', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --R: 32px;                 /* grand carreau */
  --r: 8px;                  /* interligne fin */
  --g: clamp(20px, 4.4vw, 64px);
  --marge-x: clamp(140px, 19vw, 300px);
  --corps-max: 40rem;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);

  --nav-h: 68px;
}
@media (max-width: 700px) {
  :root { --R: 28px; --r: 7px; --marge-x: 38px; --nav-h: 60px; }
}
/* Sur téléphone, les scènes fixes prennent la grande hauteur d'écran (barres
   du navigateur repliées) : sans quoi une bande de la section suivante paraît
   en bas dès que Safari replie ses barres. Ce qui est collé en bas remonte
   de la hauteur des barres quand elles sont déployées. */
@supports (height: 100dvh) {
  :root { --bas: calc(100lvh - 100dvh); }
}

/* ─────────── remise à zéro ─────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;           /* clip et non hidden : l'épinglage casse sinon */
  scroll-behavior: auto;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--nuit);
  color: var(--lumiere);
  font-family: var(--serif);
  font-size: 18px;
  line-height: var(--R);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  hanging-punctuation: first;
}
@media (max-width: 700px) { body { font-size: 16.5px; } }
img, svg, canvas { display: block; max-width: 100%; }
/* sur écran tactile, quand le voyage ou la borne mènent, la page ne glisse plus sous le doigt */
html.defilement-retenu { overflow: hidden; }
/* rien ne dépasse en largeur : sur mobile, un débordement élargirait toute la page */
main { overflow-x: clip; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
abbr[title] { text-decoration: none; }
[hidden] { display: none !important; }
kbd { font-family: var(--sans); font-size: .72em; font-weight: 500; letter-spacing: .02em; padding: .15em .45em; border-radius: 4px; border: 1px solid currentColor; opacity: .6; margin-left: .5em; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--bleu-nuit); outline-offset: 3px; border-radius: 3px; }
.papier :focus-visible { outline-color: var(--bleu); }

::selection { background: var(--bleu); color: #fff; }

.evitement {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  padding: 10px 16px; background: var(--lumiere); color: var(--nuit);
  font-family: var(--sans); font-size: 14px; border-radius: 6px;
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.evitement:focus-visible { transform: none; }

/* ═══════════ LES MATIÈRES ═══════════ */

/* La nuit : un bleu-noir profond et un grain très léger, posés une seule
   fois pour toute la page sur une couche fixe. Les sections de nuit sont
   transparentes : entre deux d'entre elles, il n'y a pas de raccord, et le
   halo coloré d'une scène ne peut jamais être coupé par un bord. */
.nuit { background: transparent; color: var(--lumiere); }
.fond {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-color: var(--nuit);
}
/* le grain passe au-dessus de tout, voiles compris : aucun endroit n'en est privé */
.grain {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  transform: translateZ(0);
}
.fond__halo {
  --fond-rgb: 115, 144, 255;
  position: absolute; inset: 0;
  background: radial-gradient(62% 72% at 72% 44%, rgba(var(--fond-rgb), .22), rgba(var(--fond-rgb), .07) 42%, transparent 72%);
  opacity: 0;
  will-change: opacity;
}
@media (max-width: 860px) {
  .fond__halo { background: radial-gradient(95% 48% at 50% 26%, rgba(var(--fond-rgb), .24), rgba(var(--fond-rgb), .07) 45%, transparent 75%); }
}

/* La copie double grands carreaux. Le motif est dessiné à 32 px et redimensionné
   à la taille du carreau : un grand carreau, trois lignes fines, un filet
   vertical. La marge rouge est posée à part, toujours à la même abscisse. */
.papier {
  position: relative;
  background-color: var(--papier);
  color: var(--encre);
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 8.5h32M0 16.5h32M0 24.5h32' stroke='%23E3E7F4'/%3E%3Cpath d='M.5 0v32' stroke='%23D8DDF1'/%3E%3Cpath d='M0 .5h32' stroke='%23C5CDEC'/%3E%3C/svg%3E");
  background-size: 180px 180px, var(--R) var(--R);
  background-position: 0 var(--phase-b, 0px), var(--marge-x) var(--phase, 0px);
}
.papier::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--marge-x) - 1px);
  width: 1.5px;
  background: var(--marge-c);
  pointer-events: none;
  z-index: 0;
}

/* La mise en page d'une copie : la marge, réservée au correcteur, puis le
   corps du texte, qui commence juste après le trait rouge. */
.copie {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--marge-x) minmax(0, 1fr);
}
.copie__marge {
  padding: 0 calc(var(--R) * .75) 0 var(--g);
  text-align: right;
}
.copie__corps {
  grid-column: 2;             /* même quand la marge est masquée sur mobile */
  padding: 0 var(--g) 0 var(--R);
  min-width: 0;
}
@media (max-width: 700px) {
  .copie__marge { display: none; }
  .copie__corps { padding: 0 var(--g) 0 18px; }
}

/* La main du correcteur : de l'italique rouge, dans la marge. */
.correcteur {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 450;
  font-size: 17px;
  line-height: 1.35;
  color: var(--rouge);
  transform: rotate(-2.2deg);
  transform-origin: right center;
  max-width: 12em;
}
@media (max-width: 700px) { .correcteur { font-size: 15.5px; } }

/* ═══════════ TYPOGRAPHIE ═══════════ */
.titre-copie {
  font-weight: 350;
  font-size: clamp(30px, 4.1vw, 58px);
  line-height: 1.12;
  letter-spacing: -.012em;
  font-variation-settings: 'opsz' 72;
  max-width: 17em;
  text-wrap: balance;
}
.titre-copie--grand {
  font-size: clamp(56px, 10vw, 150px);
  line-height: .95;
  letter-spacing: -.03em;
  font-weight: 300;
}
.rubrique {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  font-variation-settings: 'wdth' 100;
  color: var(--bleu);
  line-height: var(--R);
}

/* ═══════════ BOUTONS ═══════════ */
.bouton {
  --b-fond: transparent;
  --b-texte: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: var(--b-fond);
  color: var(--b-texte);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.bouton:active { transform: scale(.97); }
.bouton--plein { --b-fond: var(--lumiere); --b-texte: var(--nuit); border-color: var(--lumiere); }
.bouton--plein:hover { --b-fond: var(--bleu-pale); border-color: var(--bleu-pale); }
.bouton:not(.bouton--plein):not(.bouton--encre):not(.bouton--lumiere):hover { --b-fond: rgba(128, 140, 180, .14); }
.bouton--encre { --b-fond: var(--bleu); --b-texte: #fff; border-color: var(--bleu); }
.bouton--encre:hover { --b-fond: #1636D6; border-color: #1636D6; }
.bouton--lumiere { --b-fond: var(--lumiere); --b-texte: var(--nuit); border-color: var(--lumiere); font-weight: 600; }
.bouton--lumiere:hover { --b-fond: #fff; }
.bouton--discret { border-color: transparent; opacity: .8; }
.bouton--discret:hover { opacity: 1; }

/* ═══════════ NAVIGATION ═══════════
   Elle ne choisit pas sa couleur : en différence, du blanc devient clair
   sur la nuit et sombre sur la copie. Elle ne bouge pas : ni lien, ni
   raccourci tant que le voyage n'a pas été fait une fois. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--g);
  padding-top: env(safe-area-inset-top);
  color: #fff;
  mix-blend-mode: difference;
  font-family: var(--sans);
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.nav > * { pointer-events: auto; }
html.borne-ouverte :is(.nav, .fil) { opacity: 0; pointer-events: none; }
html.borne-ouverte :is(.nav, .fil) * { pointer-events: none; }

.nav__sig { display: block; width: 58px; height: 34px; }
.nav__sig span {
  display: block; width: 100%; height: 100%;
  background: currentColor;
  -webkit-mask: url(../assets/signature.webp) center / contain no-repeat;
          mask: url(../assets/signature.webp) center / contain no-repeat;
}

.nav__outils { display: flex; align-items: center; gap: 10px; }
.nav__jouer {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px 0 10px;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
html:not(.parcours-fini) .nav__jouer { display: none; }
/* la première fois, rien pour sauter : le sommaire et le fil des chapitres
   n'apparaissent qu'une fois la visite terminée, et restent ensuite */
html:not(.parcours-fini) :is(.nav__menu, .fil) { display: none; }
.nav__jouer:hover { background: #fff; color: #000; }
.nav__jouer svg { width: 20px; height: 20px; transform: rotate(-90deg); }
.nav__jouer .anneau-fond { fill: none; stroke: currentColor; stroke-opacity: .28; stroke-width: 2; }
.nav__jouer .anneau {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 50.27; stroke-dashoffset: 50.27;
  transition: stroke-dashoffset 1s var(--ease);
}
.nav__jouer b { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .7; }

.nav__son, .nav__menu {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%;
}
.nav__son svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav__son svg path:first-child { fill: currentColor; stroke: none; }
.nav__son .barre { display: none; }
.nav__son[aria-pressed="false"] .onde { display: none; }
.nav__son[aria-pressed="false"] .barre { display: block; }
.nav__son:hover, .nav__menu:hover { background: rgba(255, 255, 255, .14); }

.nav__menu { display: none; grid-auto-flow: row; align-content: center; justify-items: center; }
.nav__menu i { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
.nav__menu i + i { margin-top: 5px; }
.nav__menu[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ─────────── le fil des chapitres ───────────
   Une règle graduée sur le bord droit : un trait par chapitre, le chapitre
   lu s'allonge et se nomme. Les chapitres pas encore atteints restent
   pâles et ne répondent pas. */
.fil {
  position: fixed; z-index: 89;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  color: #fff;
  mix-blend-mode: difference;
  font-family: var(--sans);
  transition: opacity .4s var(--ease);
}
.fil ol { display: flex; flex-direction: column; align-items: flex-end; }
.fil button {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  height: 18px; padding-left: 12px;
  color: inherit;
}
.fil button i {
  display: block; width: 9px; height: 1.5px;
  background: currentColor; opacity: .38;
  transition: width .6s var(--ease), opacity .4s var(--ease);
}
.fil button span {
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  opacity: 0; transform: translateX(6px);
  transition: opacity .35s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.fil button[aria-current="step"] i { width: 22px; opacity: 1; }
.fil button:not([aria-disabled="true"]):hover i { width: 16px; opacity: .9; }
.fil button:not([aria-disabled="true"]):hover span,
.fil button:focus-visible span,
.fil.est-parlant button[aria-current="step"] span { opacity: .9; transform: none; }
.fil button[aria-disabled="true"] { cursor: default; }
.fil button[aria-disabled="true"] i { opacity: .13; }
@media (max-width: 860px) {
  .fil { display: none; }
  .nav__menu { display: grid; }
  .nav__jouer b { display: none; }
}

/* ─────────── le sommaire (mobile) ─────────── */
.menu {
  position: fixed; inset: 0; z-index: 85;
  background: var(--nuit);
  color: var(--lumiere);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 28px;
  padding: calc(var(--nav-h) + 24px) var(--g) calc(40px + env(safe-area-inset-bottom));
}
.menu ol { display: flex; flex-direction: column; gap: 2px; counter-reset: ch; }
.menu li { overflow: hidden; }
.menu button {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 9vw, 54px); line-height: 1.14; letter-spacing: -.02em;
  text-align: left;
}
.menu button small { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--lumiere-3); font-variant-numeric: tabular-nums; min-width: 1.6em; }
.menu button[aria-current="step"] { color: var(--bleu-pale); }
.menu button[aria-disabled="true"] { color: rgba(238, 241, 248, .2); cursor: default; }
.menu__note { font-family: var(--sans); font-size: 13.5px; color: var(--lumiere-2); }
html.parcours-fini .menu__note { display: none; }

/* ═══════════ BANDEAU DE DÉFI ═══════════ */
.defi {
  position: fixed; z-index: 95;
  left: 50%; top: calc(var(--nav-h) + 8px);
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 20px;
  border-radius: 18px;
  background: var(--nuit-2);
  color: var(--lumiere);
  border: 1px solid var(--filet-nuit);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  font-family: var(--sans); font-size: 15px; line-height: 1.35;
  animation: defi-in .8s var(--ease) both;
}
.defi p { flex: 1; }
.defi b { font-variation-settings: 'wdth' 112; font-weight: 700; }
.defi .bouton { min-height: 40px; padding: 0 16px; font-size: 14px; }
.defi__x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; opacity: .6; }
.defi__x:hover { opacity: 1; background: rgba(255,255,255,.08); }
.defi__x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; }
@keyframes defi-in { from { opacity: 0; transform: translate(-50%, -14px); } }

/* ═══════════ NOTIFICATION ═══════════ */
.toast {
  position: fixed; z-index: 400;
  left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--lumiere); color: var(--nuit);
  font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .7);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
  white-space: nowrap;
}
.toast.est-la { opacity: 1; transform: translate(-50%, 0); }
.toast i { font-style: normal; display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .5em; vertical-align: -.02em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}