/* =============================================================================
   base.css — reset et éléments HTML nus (charte §11).
   Aucune classe ici : uniquement des sélecteurs d'éléments.
   ============================================================================= */

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

html,
body {
  margin: 0;
}

body {
  font-family: var(--sans);
  font-size: var(--t-16);
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  /* Le corps ne défile JAMAIS horizontalement (charte §4) : les contenus larges
     scrollent dans leur propre conteneur. */
  overflow-x: hidden;
}

/* --- titres : serif, équilibrés ------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 var(--e-12);
}

h1 {
  font-size: var(--t-30);
  line-height: 1.15;
}
h2 {
  font-size: var(--t-24);
}
h3 {
  font-size: var(--t-20);
}
h4 {
  font-size: var(--t-16);
}

p {
  margin: 0 0 var(--e-16);
}

/* Corps de texte confortable : ~65 caractères (charte §3). */
p,
li {
  max-width: 68ch;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* --- champs de saisie ------------------------------------------------------ */
input,
select,
textarea,
button {
  font-family: inherit;
  /* 16 px minimum : en dessous, iOS zoome automatiquement au focus (charte §3). */
  font-size: var(--t-16);
}

/* Montants et tableaux : chiffres de largeur constante. */
table,
[data-chiffres] {
  font-variant-numeric: tabular-nums;
}

/* --- accessibilité --------------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-sm);
}

/* Pas de bloc `prefers-reduced-motion` : le site ne comporte AUCUNE animation
   [DÉCIDÉ 2026-07-30]. Il n'y a donc rien à couper, et le réglage d'accessibilité est
   satisfait par construction (charte §8).
   ⚠️ Si une animation était introduite un jour, il faudrait rouvrir ce point : couper les
   transitions depuis `*` exige `!important` (le sélecteur universel a une spécificité nulle
   et perd contre la moindre classe). */

/* --- masquage par l'attribut `hidden` ---------------------------------------
   ⚠️ **Sans cette règle, `hidden` ne masque rien.** L'attribut est appliqué par la
   feuille de style du **navigateur** (`[hidden] { display: none }`), qui a la priorité la
   plus basse : n'importe quelle règle d'auteur portant un `display` la neutralise.

   C'est arrivé, et ça n'avait rien d'exotique — `.btn { display: inline-flex }` et
   `.stack { display: flex }` suffisaient. Les blocs client 2 et 3, les boutons « Retirer »
   et les champs de la forme non retenue **restaient tous visibles**, bien que marqués
   `hidden` dans le HTML. Le symptôme se lit « le JavaScript ne marche pas » alors que le
   script faisait exactement son travail.

   ⚠️ **Sélecteur doublé, et non `!important`** (charte §11 règle 2, respectée à la lettre).
   `[hidden][hidden]` vaut deux niveaux de spécificité : il l'emporte sur n'importe quelle
   classe simple, **quel que soit l'ordre des fichiers**, sans introduire l'exception que la
   charte interdit — et sans dépendre de l'ordre de chargement, qui est un équilibre fragile.

   ⚠️ Ne pas remplacer par `[hidden] { display: none }` : la spécificité redeviendrait égale
   à celle d'une classe, et la règle ne tiendrait plus que par sa position dans le fichier. */
[hidden][hidden] {
  display: none;
}