/* ============================================================
   Réinitialisation, typographie et mise en page
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Compense la barre fixe lors d'un saut d'ancre. */
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--wrap-px);
  z-index: 2000;
  padding: 12px 24px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 0; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ----------------------------------------------------------
   Titres
   ---------------------------------------------------------- */

/*
 * Anton n'existe qu'en une seule graisse. Toute tentative de la
 * mettre en gras déclencherait une graisse synthétique baveuse :
 * font-weight reste donc à 400, y compris sur les h1.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.12;
  color: var(--text);
  text-transform: uppercase;
  text-wrap: balance;
}

p { color: var(--text-70); }

/*
 * Interlignage des titres.
 *
 * ⚠️ 1.02 était trop serré pour Anton : ses capitales sont hautes, et les
 * accents des capitales — É, À, Ê — dépassent au-dessus de la hauteur de
 * caractère. Sur un titre de plusieurs lignes en français, ils venaient
 * toucher les jambages de la ligne précédente : « FÉMININ À » mordait sur
 * « QU'UN CLUB ».
 *
 * 1.12 laisse la place aux accents sans délier le bloc typographique, qui
 * doit rester compact — c'est le parti pris du système.
 */
.t-hero  { font-size: var(--fs-hero);   line-height: 1.18; }
.t-page  { font-size: var(--fs-page-h); line-height: 1.18; }
.t-sec   { font-size: var(--fs-sec-h);  line-height: 1.2; }
.t-sub   { font-size: var(--fs-sub-h);  line-height: 1.2; }

/* Surtitre : petit, très espacé, en capitales. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-60);
}
.eyebrow--red { color: var(--red); }

/* Texte d'accompagnement sous un titre de section. */
.lede {
  max-width: 62ch;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.75;
  color: var(--text-70);
}

/* ----------------------------------------------------------
   Mise en page
   ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-px);
}

.sec { padding-block: var(--sec-py); }
.sec--alt { background: var(--bg-alt); }

/* Filet de séparation entre deux sections de même fond. */
.sec--ruled { border-top: 1px solid var(--line); }

/*
 * Colonne étroite pour les textes longs.
 *
 * ⚠️ `.wrap` et `.narrow` sont portées par le MÊME élément. Borner sa
 * largeur à 840px le recentrait dans la fenêtre : sur 1440px, un bloc
 * étroit démarrait à 364px quand ses voisins démarraient à 144px — trois
 * alignements cohabitaient sur la page d'accueil. Annuler la marge le
 * collait à l'inverse au bord gauche de l'écran, à 64px.
 *
 * On borne donc les ENFANTS, pas le conteneur : celui-ci reste centré à
 * 1280px avec sa gouttière, et la longueur de ligne est tenue à l'intérieur.
 * Une seule gouttière gauche sur tout le site, quelle que soit la section.
 */
/*
 * `:where()` a une spécificité NULLE : cette borne ne s'applique donc
 * qu'aux enfants qui n'ont pas déjà la leur. Écrite `.wrap.narrow > *`,
 * elle écrasait le `max-width: 62ch` de .lede et le `68ch` de .prose, et
 * les lignes montaient à 94 caractères — au-delà de la zone de confort
 * de lecture, située entre 65 et 75.
 */
:where(.wrap.narrow) > * { max-width: 840px; }

/* En-tête de section : surtitre, titre, et parfois un lien à droite. */
.sec-head { margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head .lede    { margin-top: 18px; }

/* Variante titre à gauche, lien d'action à droite. */
.sec-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-lg);
  flex-wrap: wrap;
}

/* Lien d'action rejeté après le contenu de la section. */
.sec-foot { margin-top: clamp(28px, 4vw, 44px); }

/* ----------------------------------------------------------
   Utilitaires
   ---------------------------------------------------------- */

.txt-red   { color: var(--red); }
.txt-muted { color: var(--text-50); }

/* Réserve visuelle tant qu'un média n'est pas fourni. */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font: 600 11px/1.5 ui-monospace, Menlo, monospace;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-35);
  background: repeating-linear-gradient(100deg, #1a1a1a, #1a1a1a 12px, #222 12px, #222 24px);
}