/*
 * utilities.css — utilitaires courts, à usage ponctuel. Seul fichier du thème où `!important` est autorisé
 * (une utilité doit gagner sur le composant qu'elle corrige). Aucune valeur en dur : tokens uniquement.
 * Chargée en dernier (inc/assets.php : tokens → base → components → utilities).
 * Spec : docs/architecture/15-design-system.md §5 ; .claude/rules/frontend.md.
 */

/* ------------------------------------------------------------------ Accessibilité */

/* Visible pour les lecteurs d'écran uniquement (libellés de section, contexte de lien). */
.spp-u-visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ------------------------------------------------------------------ Mesure et rythme */

/*
 * Borne la longueur de ligne d'un bloc de texte long (lisibilité : 60 à 75 signes).
 * À n'employer que dans un conteneur en flux : dans un conteneur contraint, WordPress centre chaque enfant
 * avec des marges `!important` et donner une largeur différente à un seul élément le désaligne des autres —
 * c'est le conteneur qui fixe la mesure, une fois pour tous ses enfants.
 */
.spp-u-measure {
  max-width: min(62ch, var(--spp-layout-content));
}

.spp-u-measure-wide {
  max-width: min(78ch, var(--spp-layout-max));
}

.spp-u-stack-3 > * + * {
  margin-top: var(--spp-space-3) !important;
}

.spp-u-stack-4 > * + * {
  margin-top: var(--spp-space-4) !important;
}

.spp-u-stack-6 > * + * {
  margin-top: var(--spp-space-6) !important;
}

.spp-u-flush {
  margin: 0 !important;
}

.spp-u-flush-bottom {
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------ Texte */

.spp-u-muted {
  color: var(--spp-fg-muted) !important;
}

.spp-u-tabular {
  font-variant-numeric: tabular-nums !important;
}

.spp-u-nowrap {
  white-space: nowrap !important;
}

.spp-u-balance {
  text-wrap: balance !important;
}

/* ------------------------------------------------------------------ Disposition */

.spp-u-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spp-space-4);
}

.spp-u-between {
  justify-content: space-between;
}

/* Défilement horizontal maîtrisé (tableaux larges, planning) : le corps de page ne défile jamais. */
.spp-u-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------ Visibilité conditionnelle */

@media (max-width: 767px) {
  .spp-u-hide-sm {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .spp-u-hide-md {
    display: none !important;
  }
}

@media print {
  .spp-u-no-print {
    display: none !important;
  }
}