/* =========================================================================
   UTILITIES — Helpers réutilisables (container, grille, a11y, surfaces)
   Faible portée, classes à but unique.
   ========================================================================= */

/* --- Container (CLAUDE.md §2.6 — max 1280px, marges responsives) ------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--margin-tablet); }
}

/* --- Grille fluide mobile-first (4 → 8 → 12 colonnes) ------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter-mobile);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--gutter-tablet);
  }
}

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

/* --- Accessibilité : masquage visuel mais lisible lecteur d'écran ----- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Lien d'évitement (skip link) ------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: calc(var(--z-overlay) + 1);
  padding: var(--space-8) var(--space-16);
  background: var(--color-black);
  color: var(--color-cream);
  border-radius: var(--radius-card);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-cream);
}

/* --- Surfaces de marque (helpers de fond + couleur de texte cohérente)
   Définissent aussi --focus-color contextuel pour respecter §2.2. ------ */
.surface-cream {
  background: var(--color-cream);
  color: var(--color-black);
  --focus-color: var(--color-red);
}

.surface-red {
  background: var(--color-red);
  color: var(--color-cream);
  --focus-color: var(--color-cream);
}

.surface-black {
  background: var(--color-black);
  color: var(--color-cream);
  --focus-color: var(--color-cream);
}

/* --- Section : rythme vertical par défaut ----------------------------- */
.section {
  padding-block: var(--space-64);
}

@media (min-width: 768px) {
  .section { padding-block: var(--space-96); }
}

/* --- Eyebrow / label caps trackées ------------------------------------ */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}