:root {
  /* ── Arrondis (fenêtres de dialogue uniquement) ── */
  --radius-dialog:  16px;
  --radius-control: 8px;

  /* ── Bordeaux ── */
  --burgundy:       #6E1F1F;
  --burgundy-deep:  #4A1212;
  --burgundy-soft:  #8A2A2A;

  /* ── Or / Ocre ── */
  --ochre:          #C9A35A;
  --ochre-soft:     #E2C68C;
  --ochre-deep:     #9E7E3D;

  /* ── Neutres chauds ── */
  --bone:           #F5EFE3;
  --bone-warm:      #ECE3D0;
  --paper:          #FBF7EE;
  --ink:            #231A12;
  --ink-soft:       #4A3D2E;

  /* ── Autre ── */
  --olive:          #5B5A3A;

  /* ── Retour de formulaire réussi (vert clair) ── */
  --success:        #2F7A36;
  --success-line:   #3C9A44;

  /* ── Champs de formulaire : fond crème (retour client, nov. 2026) ── */
  --field-bg:       var(--bone);

  /* ── Règles ── */
  --rule:           rgba(35, 26, 18, 0.18);
  --rule-soft:      rgba(35, 26, 18, 0.10);

  /* ── Tailles de lecture (retour client, nov. 2026 : « plus grand ») ──
     Une valeur par famille de texte, utilisée par base.css et les blocs. */
  --fs-body:        clamp(18px, 0.5vw + 16px, 23px);  /* corps de texte (.body-serif) */
  --fs-text:        clamp(18px, 0.4vw + 16px, 21px);  /* textes des cartes, frises, pavés */
  --fs-lede:        clamp(20px, 0.8vw + 17px, 26px);  /* chapeaux (.lede) */
  --fs-caption:     clamp(15px, 0.2vw + 14px, 17px);  /* légendes */
  --fs-small:       clamp(17px, 0.3vw + 15px, 19px);  /* textes en colonnes étroites (vignettes) */
  --fs-eyebrow:     13px;                             /* surtitres Cinzel (.eyebrow) — était 11px */
  --fs-label:       12px;                             /* libellés Cinzel (.caps-label) — était 10px */
  --fs-hero:        clamp(56px, 8.5vw, 132px);        /* titre du hero */
  --fs-numeral:     32px;                             /* années des vignettes */
  --fs-note-title:  20px;                             /* petits titres */
  --fs-notice:      18px;                             /* message de confirmation */
  --fs-support:     17px;                             /* textes d'appoint */
  --fs-note:        16px;                             /* notes, légendes de lettres */
  --fs-detail:      15px;                             /* adresses, détails */
  --fs-fine:        13px;                             /* crédits, annotations */
  --fs-micro:       12px;                             /* mentions minuscules */
  --fs-consent:     19px;                             /* base du bandeau : ses textes en découlent */
  /* Libellés en Cinzel (petites capitales) */
  --fs-label-sm:    11px;                             /* libellés mobiles, étiquettes */
  --fs-caps-lg:     16px;                             /* noms et petits titres en capitales */
  --fs-caps-xl:     18px;                             /* menu burger */
  /* Titres en Cormorant */
  --fs-title-sm:    22px;                             /* événements, vidéos, phases */
  --fs-title-md:    24px;                             /* cartes, navigation des périodes */
  --fs-title-lg:    28px;                             /* frise, rail, niveaux */
  --fs-title-xl:    32px;                             /* nom sur la carte, jour (mobile) */
  /* Chiffres et symboles */
  --fs-figure:      40px;                             /* jour d'événement (liste) */
  --fs-figure-lg:   48px;                             /* jour d'événement (carte) */
  --fs-figure-xl:   72px;                             /* numéro de chapitre (mobile) */
  --fs-ornament:    14px;                             /* ornement ✦ */
  --fs-icon:        22px;                             /* ⇆, ▶, symbole des messages */
  --fs-icon-lg:     36px;                             /* icônes des cartes mission */

  /* ── Typographie ── */
  /* Changer une police : modifier ce token, et fonts.css si elle est auto-hébergée. */
  --serif:          "Cormorant Garamond", Garamond, serif;
  --display:        "Cinzel", "Trajan Pro", serif;
  /* Plus forte graisse de Cormorant auto-hébergée (voir fonts.css). */
  --fw-serif-strong: 600;

  /* ── Liens dans le texte ── */
  --link-color:             var(--burgundy);
  --link-color-hover:       var(--burgundy-deep);
  --link-underline:         var(--ochre);
  --link-underline-width:   1px;
  --link-underline-offset:  3px;

  /* ── Menu : réglages du menu horizontal ── */
  --footer-card-bg:     rgba(245, 239, 227, 0.07);      /* encadré Lettre du pied de page mobile */
  --footer-card-border: rgba(201, 163, 90, 0.35);
  --brand-mark-sm:  40px;                             /* emblème réduit (pied de page mobile) */
  --pager-btn:      52px;                             /* flèches rondes de la pagination mobile */
  --fs-pager-arrow: 32px;
  --scroll-hint-w:  44px;                             /* largeur du dégradé des listes qui défilent */
  --nav-gap:        clamp(16px, 2.2vw, 36px);
  --nav-tracking:   0.22em;
  --header-pad:     48px;
  --header-gap:     32px;

  /* ── Espacement (fluide : rétrécit sur tablette/mobile, plafonné au desktop) ──
     Les valeurs desktop d'origine (70/56/80/40) sont conservées comme plafond ;
     clamp() les réduit progressivement sur petits écrans. */
  --pad-section:    clamp(40px, 8vw, 70px);   /* padding vertical sections */
  --pad-block:      clamp(28px, 5vw, 56px);   /* padding interne blocs */
  --gap-large:      clamp(32px, 6.5vw, 80px); /* gap colonnes larges */
  --gap-medium:     clamp(20px, 4vw, 40px);   /* gap colonnes standards */

  /* ── Layout ── */
  --container-max:  1280px;
  --content-wide:   1080px; /* largeur des grilles de cartes (Soutenir) */
  --header-h:       105px;  /* hauteur du header sticky (80px ≤ 1024px, 64px ≤ 640px) */
  --transition:     0.35s ease;

  /* ── Cible tactile minimale (WCAG 2.5.5 / Apple HIG) ── */
  --tap-min:        44px;
}

/* ─────────────────────────────────────────────────────────────
   Breakpoints officiels du thème — UN seul jeu, à réutiliser partout.
   (Les media queries CSS n'acceptent pas var() ; ces valeurs sont donc
   une convention documentée, écrite en littéral dans chaque fichier.)
     ≤ 1200px  header : menu burger (libellés trop larges pour le menu horizontal)
     ≤ 1024px  tablette large  — grilles multi-colonnes → 2 colonnes
     ≤  768px  tablette portrait — grilles → 1 colonne, header resserré
     ≤  640px  mobile — burger, 1 colonne, typo réduite
     ≤  380px  XS — garde-fou petits téléphones
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) { :root { --header-h: 80px; } }
@media (max-width: 640px)  { :root { --header-h: 64px; } }

/* Le menu reste complet jusqu'au passage au burger (1200px). */
@media (max-width: 1500px) {
  :root { --nav-tracking: 0.14em; --header-pad: 32px; --header-gap: 20px; }
}