/* =========================================================================
   BASE
   ========================================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--gris-fond);
  color: var(--gris-texte);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: 1.45;
  padding-top: var(--hauteur-entete); /* compense l'en-tête fixe */
}
h1, h2, h3, h4 { font-family: var(--police-titre); margin: 0; font-weight: 700; line-height: 1.2; }
/* ⚗ 08/09 — LES FAMILLES DU SOCLE. Deux règles, et le reste hérite.
   Les titres PRINCIPAUX passent en League Gothic, en majuscules, dans sa
   seule graisse : le titre de la page, et les titres de section. Tout autre
   titre est SECONDAIRE et reste en PT Serif 700 par la règle ci-dessus — les
   intertitres d'un article compris.
   ⚠ LES TAILLES NE BOUGENT PAS : League Gothic est condensée et paraît plus
     petite à corps égal. C'est l'étape 5 qui règle ça, pas celle-ci. */
h1, .titre-section {
  font-family: var(--police-affiche);
  font-weight: 400;
  text-transform: uppercase;
}
/* Ce qui n'est pas de la lecture — méta, puces, navigation, boutons, champs —
   parle en Simplon Norm, la police d'interface du site en ligne. Tant que ses
   fichiers ne sont pas dans fonts/, c'est la pile système qui répond : ce que
   ces éléments affichaient déjà. */
.entete, .burger, .pied,
.meta, .puce, .duree, .etiquette, .bouton,
.detail-meta, .detail-ariane, .rail, .pagination,
input, button, select, textarea { font-family: var(--police-meta); }
p { margin: 0; }

/* --- Débordements : deux règles, et la page ne fuit plus ------------------
   1) Un enfant de grille vaut min-width: auto par défaut : il refuse de
      descendre sous la largeur de son contenu, et un titre long pousse alors
      sa colonne hors du conteneur. On remet min-width à 0 sur TOUS les enfants
      directs de grille, ainsi que sur les blocs de texte des entrées
      horizontales — c'est ce qui autorise le titre à revenir à la ligne.
   2) Les mots plus longs qu'une ligne (URL, titres composés) coupent au lieu
      de déborder. */
.grille-une > *,
.grille-4 > *,
.enquetes-cadre > *,
.enquetes-suite > *,
.chroniques-liste > *,
.chroniques-entete > *,
.edition-grille > *,
.pied-grille > *,
.colonne-secondaire > *,
.newsletter-grille > *,
.masterclass-grille > *,
.bandeau-abonnement > *,
.detail-signature > * { min-width: 0; }

h1, h2, h3, h4, p { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }

/* Une image venue de l'éditeur ne déborde jamais de sa colonne. Les images de
   gabarit, elles, remplissent leur boîte grise — voir composants.css. */
img { max-width: 100%; height: auto; }

/* --- Pour les lecteurs d'écran seulement -----------------------------------
   Un texte qui ne s'affiche pas mais qui se lit : le libellé d'un champ dont
   le placeholder ne suffit pas, ce que fait vraiment un « × ». Il reste dans
   le flux (pas de `display: none`, qui le retirerait aussi de la lecture). */
.ecran-lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}