/* ===========================================================================
   BASE — la mise à zéro et la typographie de page
   ===========================================================================

   À charger APRÈS `tokens.css` et AVANT tout composant. C'est le seul fichier
   du socle qui vise des balises plutôt que des classes.

   Ce qu'il fait, et rien de plus :
     • une mise à zéro minimale, pas un « reset » qui efface tout ;
     • la typographie et les couleurs de page, prises aux jetons ;
     • l'ancre de focus au clavier, posée une fois pour toutes ;
     • le respect de « je préfère moins d'animation ».

   Ce qu'il NE fait PAS : l'ancrage du pied en bas d'écran. Ça vit dans
   `pied-de-page.css`, avec le pied qu'il concerne, et depuis plus longtemps
   que ce fichier.
   =========================================================================== */

/* `border-box` partout. Sans lui, un `padding` sur un champ de formulaire le
   fait déborder de sa colonne, et on passe la journée à retrancher des pixels. */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--iav-police-texte, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif);
  font-size: var(--iav-taille-texte, 14px);
  line-height: var(--iav-interligne, 1.5);
  color: var(--iav-texte-principal, #1B2733);
  background: var(--iav-fond-page, #FFFFFF);
  /* Sur un fond sombre, les traits fins d'une pile système paraissent gras.
     Ces deux lignes les affinent — sans effet visible en mode clair. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--iav-police-titre, Inter, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  line-height: var(--iav-interligne-serre, 1.3);
  color: var(--iav-texte-principal, #1B2733);
  margin: 0 0 var(--iav-espace-moyen, 12px);
}

h1 { font-size: var(--iav-taille-titre-fort, 24px); font-weight: var(--iav-graisse-forte, 700); }
h2 { font-size: var(--iav-taille-titre, 19px);      font-weight: var(--iav-graisse-forte, 700); }
h3 { font-size: var(--iav-taille-intertitre, 16px); font-weight: var(--iav-graisse-semi, 600); }
h4 { font-size: var(--iav-taille-texte, 14px);      font-weight: var(--iav-graisse-semi, 600); }

p { margin: 0 0 var(--iav-espace-moyen, 12px); }

a {
  color: var(--iav-bleu-lien, #2B6CB0);
  text-decoration: none;
}
/* Un lien reste un lien : il se souligne dès qu'on le vise. Le contraste seul
   ne suffit pas — il ne dit rien à qui distingue mal les couleurs. */
a:hover, a:focus { text-decoration: underline; }

small { font-size: var(--iav-taille-secondaire, 12px); }

code, kbd, samp, pre {
  font-family: var(--iav-police-mono, ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace);
  font-size: var(--iav-taille-secondaire, 12px);
}

hr {
  border: 0;
  border-top: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  margin: var(--iav-espace-large, 24px) 0;
}

/* ---------------------------------------------------------------------------
   LE FOCUS AU CLAVIER — posé une fois, jamais retiré
   ---------------------------------------------------------------------------
   `:focus-visible` et non `:focus` : le navigateur ne montre alors l'anneau
   qu'à qui navigue au clavier, et pas à qui vient de cliquer. C'est ce qui a
   fait supprimer l'anneau pendant vingt ans — il se voyait au mauvais moment,
   on le retirait, et la page devenait injouable sans souris.

   `outline` et non `border` ou `box-shadow` : l'outline ne prend aucune place
   dans la mise en page, donc rien ne bouge au moment où le focus arrive.
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--iav-focus, #2B6CB0);
  outline-offset: 2px;
  border-radius: var(--iav-rayon-petit, 4px);
}

/* ---------------------------------------------------------------------------
   MOINS D'ANIMATION, quand la personne l'a demandé au système
   ---------------------------------------------------------------------------
   Ce n'est pas un confort : une transition peut déclencher un malaise chez
   quelqu'un de sensible au mouvement. Le réglage existe dans tous les systèmes
   récents, il suffit de l'écouter.
   --------------------------------------------------------------------------- */
@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;
  }
}

/* ---------------------------------------------------------------------------
   Réservé aux lecteurs d'écran — visible pour eux, invisible à l'écran.
   `display: none` ne conviendrait pas : il retire l'élément de l'arbre, et le
   lecteur d'écran ne l'annonce plus non plus.
   --------------------------------------------------------------------------- */
.iav-lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}