/* =============================================================================
   utilities.css — petit jeu de LAYOUT, volontairement minimal (charte §11).

   On espace par le layout (flex/grid + gap), pas par des marges au coup par coup.
   Ce fichier ne doit pas devenir un catalogue d'utilitaires : si un motif se répète,
   il devient un composant nommé dans components.css.
   ============================================================================= */

/* Empilement vertical régulier. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--e-16);
}

/* ⚠️ Dans un empilement, l'espacement vient du `gap` — **uniquement**. Les marges verticales
   par défaut des paragraphes (`base.css`) s'y ajoutaient, et un `.hint` apportait en plus son
   `margin-top` : l'écart devenait 30 px au-dessus et 40 px en dessous du même élément. Le
   symptôme se voit sans se comprendre, d'où la règle plutôt que des corrections au cas par cas.

   ⚠️ **Les titres aussi** [ajouté le 2026-08-03] : `h1…h4` portent `margin: 0 0 var(--e-12)` dans
   `base.css`, qui s'ajoutait au `gap` — 28 px sous un titre de carte au lieu de 16. Le défaut
   avait été corrigé pour les paragraphes, puis pour `.field`, et resurgissait pour les titres :
   c'est la même faute, et elle réapparaîtra pour tout élément à marge propre placé dans un
   empilement. La règle est donc énumérative à dessein — un ajout futur doit s'y inscrire. */
.stack > p,
.stack > h1,
.stack > h2,
.stack > h3,
.stack > h4 {
  margin-block: 0;
}
.stack-sm {
  gap: var(--e-8);
}
.stack-lg {
  gap: var(--e-24);
}

/* Alignement horizontal qui passe à la ligne. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-12);
}

/* Grille responsive : une colonne sur mobile, N sur desktop. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-16);
}

/* Contenu large (tableau, diagramme) : il défile DANS son conteneur,
   jamais en faisant défiler la page (charte §4). */
.scroll-x {
  overflow-x: auto;
}

.centre {
  text-align: center;
  /* ⚠️ Centrer le **texte** ne suffit pas : `base.css` borne les paragraphes à 68ch pour le
     confort de lecture, et une boîte plus étroite que son conteneur reste collée à gauche —
     le texte y est alors centré, mais la boîte ne l'est pas. Le symptôme se voit sans se
     comprendre : « c'est centré, mais pas au milieu ». */
  margin-inline: auto;
}

/* Masqué visuellement mais lu par les lecteurs d'écran. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

@media (min-width: 680px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}