/* ===========================================================================
   Socle : remise à zéro, typographie, accessibilité.
   Mobile d'abord — aucune requête de média n'élargit, elles n'ajoutent que
   du confort au-delà.
   =========================================================================== */

/* Police auto-hébergée. Variable : un seul fichier couvre toutes les graisses.
   font-display: swap — le texte reste lisible pendant le chargement, et rien
   ne dépend de la police pour être compris. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Compense l'en-tête collant lors d'un saut d'ancre : sans cela, la cible
     du focus se retrouve masquée sous l'en-tête (WCAG 2.4.11). */
  scroll-padding-top: 5rem;
  /* Réserve la gouttière de défilement en permanence. Une page courte
     (mentions légales, 404) n'a pas de barre de défilement, une page longue
     si : la zone utile perdait une quinzaine de pixels d'une page à l'autre,
     et tout l'en-tête glissait horizontalement à chaque navigation. */
  scrollbar-gutter: stable;
}

body {
  min-height: 100svh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--t-2xl); letter-spacing: -0.02em; font-weight: 800; }
h2 { font-size: var(--t-xl);  letter-spacing: -0.01em; font-weight: 700; }
h3 { font-size: var(--t-lg);  font-weight: 700; }
p  { text-wrap: pretty; }

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

ul, ol { list-style: none; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }

/* L'attribut hidden ne vient que de la feuille par défaut du navigateur, et
   toute déclaration d'auteur l'emporte sur celle-ci — la spécificité n'entre
   même pas en jeu. `.champ { display: block }` et `.bouton { display:
   inline-flex }` annulaient donc « hidden » : le champ « Chiffre à comparer »
   restait affiché hors du mode comparaison, le bouton de téléchargement
   apparaissait avant qu'il y ait une image, et les commandes du graphique
   s'affichaient sans attendre son activation.

   !important est ici légitime : hidden est une déclaration d'intention
   absolue, aucune règle de présentation ne doit pouvoir la contredire. */
[hidden] { display: none !important; }

/* --- Focus ---------------------------------------------------------------
   Le site n'avait aucun style de focus : la navigation au clavier était
   invisible. Contour épais, décalé, contrasté sur les deux thèmes
   (WCAG 2.4.7, 2.4.11, 2.4.13). Jamais de outline:none sans remplacement. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Cible du focus programmatique (titre de résultat, etc.) : pas de contour,
   le déplacement de vue suffit et le contour serait trompeur. */
[tabindex="-1"]:focus { outline: none; }

/* --- Lien d'évitement ----------------------------------------------------- */
.evitement {
  position: absolute;
  left: var(--e-2);
  top: var(--e-2);
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--accent);
  color: var(--accent-contraste);
  font-weight: 700;
  border-radius: var(--rayon);
  transform: translateY(-200%);
}
.evitement:focus { transform: translateY(0); }

/* --- Contenu réservé aux lecteurs d'écran --------------------------------- */
.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Mouvement -----------------------------------------------------------
   Respecte le réglage système. Les composants coupent aussi leurs propres
   animations en JavaScript : le CSS seul ne suffit pas pour un compteur
   piloté par requestAnimationFrame (WCAG 2.2.2). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Sélection ------------------------------------------------------------ */
::selection { background: var(--accent); color: var(--accent-contraste); }