/* ════════════════════════════════════════════════════════
   UTILITIES.CSS — Classes utilitaires
   MateXP · Accessibilité, affichage, espacement et helpers
   atomiques. Dernière feuille chargée (priorité de cascade).
   ════════════════════════════════════════════════════════ */

/* ─── Accessibilité : masquage visuel, lisible au lecteur d'écran ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ─── Skip link : premier élément focusable du body ─── */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  transform: translateY(-150%);   /* Hors écran tant que non focalisé */
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
}

/* ─── Affichage ─── */
.hidden       { display: none; }
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

/* ─── Alignement de texte ─── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-balance { text-wrap: balance; }

/* ─── Marges verticales utilitaires ─── */
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mx-auto { margin-inline: auto; }

/* ─── Largeurs ─── */
.w-full   { width: 100%; }
.max-prose { max-width: 60ch; }

/* ─── Curseur & sélection ─── */
.pointer { cursor: pointer; }
.no-select { user-select: none; }

/* ─── Helpers d'état (togglés en JS) ─── */
.is-loading { pointer-events: none; opacity: 0.6; }
.is-disabled { pointer-events: none; opacity: 0.5; }

/* ─── Séparateur fin ─── */
.divider {
  height: 0.5px;
  background: var(--border-1);
  border: none;
  margin-block: var(--sp-6);
}

/* ─── Avatars empilés (preuve sociale) ─── */
.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-stack > * {
  margin-left: -10px;
  border: 1.5px solid var(--bg-1);
  border-radius: var(--r-full);
}
.avatar-stack > *:first-child {
  margin-left: 0;
}

/* ─── Réponses responsive ponctuelles ─── */
.show-md { display: none; }
@media (min-width: 768px) {
  .show-md { display: initial; }
  .hide-md { display: none; }
}