/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  titres.css — grammaire officielle des titres Myweddoo                  ║
   ║  Source de vérité : docs/brandbook/14-titres.md (validée 2026-06-10)    ║
   ║                                                                          ║
   ║  Règle d'or : un titre est DROIT, fin, à pointes nettes (SOFT 0 =       ║
   ║  défaut de l'axe, jamais surchargé) ; il porte UN SEUL <em> italique    ║
   ║  terracotta, toujours +30 en graisse par rapport à sa base.             ║
   ║                                                                          ║
   ║  Cette feuille porte le DESSIN des titres (famille, style, graisse,     ║
   ║  opsz, couleurs d'em). Les feuilles de surface ne gardent que le        ║
   ║  LAYOUT (font-size, line-height, marges, max-width).                    ║
   ║                                                                          ║
   ║  Tokens : utilise --accent/--ink/--mono de la surface si définis,       ║
   ║  sinon les fallbacks canoniques. Ne redéfinit JAMAIS --accent           ║
   ║  (les palettes data-palette de la landing en dépendent).                ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

:root {
  /* Tokens introduits par la spec 14-titres (nouveaux, sans collision) */
  --accent-em-dark: #E8B091;                       /* em sur fond sombre */
  --serif-alt: "Cormorant Garamond", Georgia, serif; /* était utilisée sans définition */
}

/* ── Garde générique : aucun titre n'est italique par défaut ───────────── */
h1, h2, h3 {
  font-family: var(--serif, "Fraunces", "Cormorant Garamond", Georgia, serif);
  font-style: normal;
}

/* ════ Niveau H1 — droit 320 · opsz 144 · em italique 350 ════ */
.display,
.h1,
.hero h1 {
  font-family: var(--serif, "Fraunces", "Cormorant Garamond", Georgia, serif);
  font-style: normal;
  font-weight: 320;
  font-variation-settings: "opsz" 144;
  color: var(--ink, #3A3530);
}
.display em,
.h1 em,
.hero h1 em {
  font-style: italic;
  font-weight: 350;
  color: var(--accent, var(--terracotta, #C26241));
}

/* ════ Niveau H2 — droit 350 · opsz 96 · em italique 380 ════ */
.h2,
.group h2,
.mockup-section h2 {
  font-family: var(--serif, "Fraunces", "Cormorant Garamond", Georgia, serif);
  font-style: normal;
  font-weight: 350;
  font-variation-settings: "opsz" 96;
  color: var(--ink, #3A3530);
}
.h2 em,
.group h2 em,
.mockup-section h2 em {
  font-style: italic;
  font-weight: 380;
  color: var(--accent, var(--terracotta, #C26241));
}

/* H2 sur fond sombre (scène découverte) : même grammaire,
   la couleur de base reste gérée par la feuille de surface,
   l'em passe au terracotta clair lisible sur fond encre. */
.scene-decouverte h2 {
  font-family: var(--serif, "Fraunces", "Cormorant Garamond", Georgia, serif);
  font-style: normal;
  font-weight: 350;
  font-variation-settings: "opsz" 96;
}
.scene-decouverte h2 em {
  font-style: italic;
  font-weight: 380;
  color: var(--accent-em-dark);
}

/* ════ Niveau H3 — droit 380 · em italique 410 ════
   La couleur de base n'est PAS définie ici : elle s'hérite de la surface
   (encre sur fond clair, papier sur les sections sombres). */

/* H3 « larges » (≥ 24px en bas de clamp) : opsz 72, em terracotta plein */
.arg h3,
.diff-card h3,
.form-step h3,
.form-success h3,
.features-callout-title {
  font-family: var(--serif, "Fraunces", "Cormorant Garamond", Georgia, serif);
  font-style: normal;
  font-weight: 380;
  font-variation-settings: "opsz" 72;
}
.arg h3 em,
.diff-card h3 em,
.form-step h3 em,
.form-success h3 em {
  font-style: italic;
  font-weight: 410;
  color: var(--accent, var(--terracotta, #C26241));
}

/* H3 « petits » (clamp descendant sous 24px) : opsz auto (pas de fvs),
   em en terracotta foncé — garde-fou contraste de la spec
   (#C26241 à 3.89:1 est insuffisant sous 24px non-gras). */
.step h3,
.faq-item summary,
.feat-item-title,
.process-step h3,
.pricing-tier-name,
.pricing-options-title,
.atelier-card-title,
.features-card-title,
.pf-title {
  font-family: var(--serif, "Fraunces", "Cormorant Garamond", Georgia, serif);
  font-style: normal;
  font-weight: 380;
}
.step h3 em,
.faq-item summary em,
.feat-item-title em,
.process-step h3 em,
.atelier-card-title em,
.features-card-title em {
  font-style: italic;
  font-weight: 410;
  color: var(--accent-d, var(--terracotta-deep, #8B5A40));
}

/* ════ Eyebrow — Mono 500 · 11px · uppercase · terracotta foncé ════
   Référence : pages features (album-collaboratif). Structure + tiret
   terracotta 24px inclus — les feuilles de surface ne redéfinissent rien. */
.eyebrow,
.hero-eyebrow,
.group-eyebrow,
.section-marker,
.offer-label,
.cdline-label,
.access-panel-title {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-d, var(--terracotta-deep, #8B5A40));
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before,
.section-marker::before,
.offer-label::before,
.cdline-label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent, var(--terracotta, #C26241));
  opacity: .85;
}

/* ════ Skip-link a11y (WCAG 2.4.1) — masqué jusqu'au focus clavier ════ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 1000;
  background: var(--ink, #3A3530);
  color: var(--paper, var(--bg-paper, #FFFBF5));
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 2px;
}
.skip-link:focus {
  left: 12px;
}