/* ============================================================================
   KIT — base.css
   Remise à zéro, typographie et règles de page. Dépend de tokens.css.
   Aucune valeur en dur : uniquement des variables du kit.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Le défilement piloté par les ancres reste doux, sauf préférence contraire. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100dvh;              /* mobile : la barre d'URL ne tronque pas */
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-600);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Le fond change avec le thème : la bascule ne doit pas clignoter. */
  transition: background-color var(--pose) var(--doux), color var(--pose) var(--doux);
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* ── Le grain du lin ────────────────────────────────────────────────────────
   Une trame diagonale à très faible alpha plus un halo laiton en haut à
   droite : la lampe au-dessus de la table. Fixe et non interactif, donc
   aucun repeint pendant le défilement.                                      */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(58deg,  rgba(22, 33, 28, .012) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-58deg, rgba(22, 33, 28, .012) 0 1px, transparent 1px 6px),
    radial-gradient(120% 70% at 80% -8%, var(--laiton-voile), transparent 60%);
}

/* ── Titres ───────────────────────────────────────────────────────────────
   Fraunces est variable : opsz suit la taille, SOFT et WONK arrondissent les
   grands corps. Un titre de jeu prend la douceur d'un couvercle de boîte ;
   un titre de section reste sobre.                                          */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--encre);
}
h1 { font-size: var(--t-1000); letter-spacing: -0.035em; font-variation-settings: "opsz" 120, "SOFT" 30; }
h2 { font-size: var(--t-900);  letter-spacing: -0.028em; font-variation-settings: "opsz" 72,  "SOFT" 18; }
h3 { font-size: var(--t-800);  font-variation-settings: "opsz" 40; }
h4 { font-size: var(--t-700);  font-variation-settings: "opsz" 24; }

p { margin: 0; }
p + p { margin-top: var(--pas-3); }

/* Longueur de ligne confortable pour tout texte suivi. */
.prose { max-width: 65ch; }
.prose p + p { margin-top: var(--pas-4); }

/* ── Liens ──────────────────────────────────────────────────────────────── */
a { color: var(--laiton); text-decoration-color: var(--laiton-trait); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--laiton); }

/* ── Micro-libellés : la voix « technique » du kit ─────────────────────────
   Capitales espacées, chasse fixe. Sert aux étiquettes de section, aux
   en-têtes de colonne, aux légendes.                                        */
.oeil {
  font-family: var(--f-mono);
  font-size: var(--t-100);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--encre-3);
}

/* Les chiffres qui s'alignent : codes de salon, scores, classements. */
.mono, .chiffres {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

code, kbd, samp {
  font-family: var(--f-mono);
  font-size: 0.88em;
  background: var(--fond-creux);
  border-radius: var(--r-xs);
  padding: 0.1em 0.36em;
  color: var(--encre);
}

/* ── Listes : le kit ne décore pas les puces par défaut ─────────────────── */
ul.nu, ol.nu { margin: 0; padding: 0; list-style: none; }

/* ── Focus : visible, toujours, et de la couleur d'accent ────────────────── */
:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Les éléments qui gèrent eux-mêmes leur anneau (boutons, cartes) le disent. */
.focus-propre:focus-visible { outline: none; }

::selection { background: var(--laiton-voile); color: var(--encre); }

/* ── Gabarit ──────────────────────────────────────────────────────────────── */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.enveloppe.etroite { max-width: var(--largeur-etroite); }

/* Une pile verticale à l'espacement réglé par une seule variable. */
.pile { display: flex; flex-direction: column; gap: var(--pas-4); }
.pile.serree { gap: var(--pas-2); }
.pile.aeree  { gap: var(--pas-6); }

/* Une rangée qui passe à la ligne proprement. */
.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas-2); }

/* Tout contenu large défile DANS son cadre, jamais la page. */
.defilant { overflow-x: auto; overscroll-behavior-x: contain; }

/* Accessible aux lecteurs d'écran, invisible à l'œil. */
.lecture-seule {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Le lien d'évitement ──────────────────────────────────────────────────
   Invisible tant qu'on ne l'atteint pas au clavier, puis il se pose en haut
   de l'écran. C'est le premier élément focusable de chaque page : sans lui,
   il faut traverser la barre entière et les filtres — plus de quarante
   tabulations sur l'accueil — avant d'arriver au contenu.

   Posé par ui/barre-haute.js, donc présent partout sans rien à écrire.      */
.evitement {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-120%);
  padding: var(--pas-3) var(--pas-4);
  margin: var(--pas-2);
  background: var(--surface-haute);
  color: var(--encre);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-sm);
  box-shadow: var(--pose-3);
  font-size: var(--t-400);
  font-weight: 550;
  text-decoration: none;
  transition: transform var(--vif) var(--sortie);
}
.evitement:focus-visible,
.evitement:focus {
  transform: none;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--trait);
  margin-block: var(--pas-5);
}