/* ------------------------------------------------------------------ *
 * VITRINE — identité « ENCRE VIVE ». De l'encre, jamais du papier.
 *
 * Fichier de TOKENS UNIQUE des 66 pages du site : il est lié en premier,
 * avant article.css et avant les styles inline des deux accueils et des
 * deux bibliothèques. Ceux-ci ne portent plus que leur mise en page.
 * C'est la fin des quinze blocs de palette dupliqués.
 *
 * Le système tient en peu de choses :
 *   - DEUX NEUTRES ET UN SEUL ACCENT, indigo électrique. L'accent ne sert
 *     qu'au bouton principal, aux liens, au focus et au segment parcouru
 *     d'un fil — jamais en fond de section, jamais en second métal.
 *   - DEUX VOIX TYPOGRAPHIQUES tenues strictement à part : la sans-serif
 *     est l'outil qui parle (barre, nav, boutons, dates, étiquettes,
 *     métadonnées, pied de page), EB Garamond est le RÉCIT (titres,
 *     prose, extraits de chapitres, questions posées à l'auteur).
 *     Jamais l'inverse. Corps minimum de la sans : 12 px.
 *   - UN GRAIN à peine visible pour tuer le plat du plastique, des ombres
 *     douces et FROIDES, des rayons modérés, aucune bordure décorative.
 *
 * Trois états : le jour (`:root`), la nuit système et la veillée. Les
 * DEUX BLOCS DE NUIT SONT JUMEAUX — une media query ne se combine pas à
 * une classe —, et `scripts/verifier.sh` les compare jeton par jeton :
 * toute retouche va dans les deux.
 *
 * Les valeurs viennent de l'app en production (front/src/styles/global.css,
 * lot 7 corrigé AA) : c'est l'app qui est la référence, la vitrine suit.
 * ------------------------------------------------------------------ */
:root {
  /* La sans est l'outil, le serif est le récit. Aucune police à charger
     pour la première : la pile système est déjà là, et elle est juste. */
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'EB Garamond', Georgia, serif;

  --fond: #f7f9fb;
  --surface: #ffffff;
  --encre: #12151c;
  --encre-douce: #5e6a78;
  --accent: #4d59e0;
  --accent-appuye: #3f4ad0;
  --accent-voile: rgba(77, 89, 224, .05);
  --selection: rgba(77, 89, 224, .18);
  --filet: rgba(18, 21, 28, .14);
  --filet-fort: rgba(18, 21, 28, .28);
  --fil: rgba(18, 21, 28, .25);
  --ombre: 18, 21, 28;
  --bouton-fond: var(--accent);
  --bouton-texte: #ffffff;

  --grain-op: .035;
  --grain-blend: multiply;
  --rayon: 12px;
  --rayon-lg: 16px;
  --fondu: 1.4s;
}
/* La nuit — préférence système. Jumelle du bloc `body.veillee` ci-dessous. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0d1118;
    --surface: #131926;
    --encre: #eef2f8;
    --encre-douce: #98a4b3;
    --accent: #7c8cff;
    --accent-appuye: #94a1ff;
    --accent-voile: rgba(124, 140, 255, .10);
    --selection: rgba(124, 140, 255, .28);
    --filet: rgba(255, 255, 255, .14);
    --filet-fort: rgba(255, 255, 255, .28);
    --fil: rgba(255, 255, 255, .20);
    --ombre: 0, 0, 0;
    --bouton-fond: var(--accent);
    --bouton-texte: #0b0f1a;

    --grain-op: .04;
    --grain-blend: screen;
  }
}
/* Jumeau du bloc ci-dessus : la veillée, posée par le script de fin de page
   (18 h → 7 h, l'heure de l'app). Mêmes jetons, mêmes valeurs, même ordre. */
body.veillee {
  --fond: #0d1118;
  --surface: #131926;
  --encre: #eef2f8;
  --encre-douce: #98a4b3;
  --accent: #7c8cff;
  --accent-appuye: #94a1ff;
  --accent-voile: rgba(124, 140, 255, .10);
  --selection: rgba(124, 140, 255, .28);
  --filet: rgba(255, 255, 255, .14);
  --filet-fort: rgba(255, 255, 255, .28);
  --fil: rgba(255, 255, 255, .20);
  --ombre: 0, 0, 0;
  --bouton-fond: var(--accent);
  --bouton-texte: #0b0f1a;

  --grain-op: .04;
  --grain-blend: screen;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--fond);
  color: var(--encre);
  font-family: var(--serif);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* LE GRAIN — juste ce qu'il faut pour tuer le plat, par-dessus le fond et
   sous rien du tout : fixe, plein écran, intraversable au clic. Le SVG est
   embarqué en data-URI (aucun fichier à servir, aucune requête de plus) et
   le mode de fusion change avec le thème : il assombrit le jour, il éclaire
   la nuit — un même bruit, deux lumières. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: var(--grain-op); mix-blend-mode: var(--grain-blend);
  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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* LE FONDU LENT, jour → nuit. Sa lenteur EST la signature : la vitrine ne
   claque pas d'un thème à l'autre, elle s'éteint. Porté par le corps et les
   grandes surfaces seulement — jamais par `*`, qui ferait traîner chaque
   survol de lien et chaque ombre de vignette. */
body, header, footer, main, section, article, aside {
  transition: background-color var(--fondu) ease, color var(--fondu) ease,
              border-color var(--fondu) ease;
}

/* Les liens : l'accent, et un soulignement fin qui ne mange pas les jambages. */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-appuye); text-decoration-color: currentColor; }

/* Le focus se VOIT — c'est la seule façon de traverser le site au clavier. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* La sélection reste dans la famille de l'accent — un jeton dédié, plus dense
   que le voile (à .05 d'alpha, une sélection serait invisible). */
::selection { background: var(--selection); color: var(--encre); }

/* LE FIL — le séparateur de sections. Un trait fin continu, encre à 25 % le
   jour, blanc à 20 % la nuit ; jamais l'accent sur toute sa longueur. Il
   remplace le fleuron ❦ : la classe reste dans les 66 pages, son ornement
   est devenu une ligne. */
.fleuron {
  width: min(10rem, 42%); height: 0;
  margin: clamp(2.6rem, 6vw, 4.4rem) auto;
  border-top: 1.5px solid var(--fil);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* À l'impression, l'encre sur le blanc et rien d'autre : les tokens du jour
   forcés (sans quoi une page imprimée pendant la veillée sortirait en clair
   sur blanc), le grain éteint, les ombres nulles. */
@media print {
  :root, body, body.veillee {
    --fond: #ffffff;
    --surface: #ffffff;
    --encre: #111318;
    --encre-douce: #4b5462;
    --accent: #2f3ab8;
    --accent-appuye: #2f3ab8;
    --accent-voile: transparent;
    --filet: rgba(0, 0, 0, .22);
    --filet-fort: rgba(0, 0, 0, .4);
    --fil: rgba(0, 0, 0, .3);
    --ombre: 0, 0, 0;
    --grain-op: 0;
  }
  body::after { display: none; }
}