/* ==========================================================================
   Projéta - Base
   --------------------------------------------------------------------------
   Reset léger, typo par défaut, grain papier, accessibilité.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-titre);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--rose); color: var(--paper); }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* --- Titres & texte ------------------------------------------------------ */

h1, h2, h3, h4 { font-family: var(--font-titre); line-height: 1.05; margin: 0 0 .5em; }
h1 { font-weight: 800; font-size: clamp(34px, 5vw, 62px); letter-spacing: -.02em; }
h2 { font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-weight: 700; font-size: 22px; }

p { line-height: 1.5; font-size: 16px; margin: 0 0 1em; }

/* --- Étiquettes mono (labels, kickers, données) --------------------------- */

.kicker {
  font: 400 11px var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bleu);
}

.etiquette {
  font: 700 10px var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .55;
}

.donnee {
  font: 400 13px var(--font-mono);
}

/* --- Grain papier (retirer ce bloc pour un rendu lisse) -------------------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  mix-blend-mode: multiply;
  opacity: .55;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22/><feColorMatrix type=%22saturate%22 values=%220%22/></filter><rect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22 opacity=%220.05%22/></svg>');
}

/* --- Trames ------------------------------------------------------------------
   La trame vit sur un ::before débordant, déplacé en transform (composité
   GPU, pas de repaint) d'exactement une période : la boucle est invisible.
   Couleurs et orientations par classes - à varier d'un usage à l'autre. */

.trame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.trame::before {
  content: "";
  position: absolute;
  inset: calc(var(--trame-pas) * -2);
  z-index: -1;
  background-color: var(--trame-fond, var(--bleu));
  background-image: radial-gradient(
    circle,
    var(--trame-encre, var(--jaune)) calc(var(--trame-pas) * .2),
    transparent calc(var(--trame-pas) * .235)
  );
  background-size: var(--trame-pas) var(--trame-pas);
}

/* Orientations : points (défaut), lignes diagonales, lignes verticales */
.trame--lignes::before {
  background-image: repeating-linear-gradient(
    var(--trame-angle, 45deg),
    var(--trame-encre, var(--jaune)) 0 calc(var(--trame-pas) * .17),
    transparent calc(var(--trame-pas) * .17) var(--trame-pas)
  );
}
.trame--verticales { --trame-angle: 90deg; }

/* Encres : à piocher selon le contexte */
.trame--bleu-jaune { --trame-fond: var(--bleu);  --trame-encre: var(--jaune); }
.trame--rose-bleu  { --trame-fond: var(--rose);  --trame-encre: var(--bleu); }
.trame--jaune-rose { --trame-fond: var(--jaune); --trame-encre: var(--rose); }
.trame--vert-jaune { --trame-fond: var(--vert);  --trame-encre: var(--jaune); }
.trame--encre-rose { --trame-fond: var(--ink);   --trame-encre: var(--rose); }

/* Dérive : translate d'exactement une période (points : une case en
   diagonale ; lignes 45° : une période × √2 en horizontal). */
@keyframes trame-derive {
  to { transform: translate(var(--trame-vec-x, var(--trame-pas)), var(--trame-vec-y, var(--trame-pas))); }
}
.trame--animee::before {
  animation: trame-derive var(--trame-duree, 7s) linear infinite;
}
.trame--lignes.trame--animee::before {
  --trame-vec-x: calc(var(--trame-pas) * 1.4142);
  --trame-vec-y: 0px;
}
.trame--verticales.trame--animee::before {
  --trame-vec-x: var(--trame-pas);
  --trame-vec-y: 0px;
}

/* --- Transitions de pages -------------------------------------------------------
   View Transitions inter-pages (natif, zéro JS - remplace barba.js) :
   fondu court entre les documents, puis le contenu de la nouvelle page
   apparaît en cascade - les titres d'abord, la suite ensuite. */

@view-transition { navigation: auto; }

/* Fondu bref et SYMÉTRIQUE : avec des durées différentes à l'effacement
   et à l'apparition, la somme des opacités passe sous 1 au milieu du
   fondu - toute la page « clignote ». Mêmes durées = luminosité stable. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .2s; }

/* La barre et le pied ont leur propre calque (view-transition-name) :
   on gèle tout - ni fondu, ni déplacement - pour que le menu semble
   rester en place d'une page à l'autre. */
::view-transition-group(barre),
::view-transition-image-pair(barre),
::view-transition-old(barre),
::view-transition-new(barre),
::view-transition-group(pied),
::view-transition-image-pair(pied),
::view-transition-old(pied),
::view-transition-new(pied) { animation: none; }

@keyframes apparait {
  from { opacity: 0; transform: translateY(14px); }
}

.contenu > * { animation: apparait .55s cubic-bezier(.22, .9, .26, 1) backwards; }
.contenu > :nth-child(1) { animation-delay: .05s; }
.contenu > :nth-child(2) { animation-delay: .14s; }
.contenu > :nth-child(3) { animation-delay: .23s; }
.contenu > :nth-child(4) { animation-delay: .32s; }
.contenu > :nth-child(n+5) { animation-delay: .4s; }

/* --- Accessibilité ---------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

.visuallyhidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}