/* ============================================================
   Le Temps des Cerises — Design System V5 « Éditorial »
   Maquette pré-template WordPress/ACF · Bootscore + Bootstrap 5

   Reprend les acquis validés par la cliente (palette assumée
   ocre/caramel/crème + bordeaux, EB Garamond en casse mixte,
   zéro découpe ondulée) dans l'exécution éditoriale de la V4 :
   échelle typographique magazine, chapitres numérotés, index des
   saveurs, micro-interactions.

   Écart V4 → V5 (croquis client du 18/08) :
   · Ordre des blocs — les best-sellers remontent juste après le
     hero, l'abonnement suit, l'entrée par saveur passe derrière ;
     le fil Instagram remonte avant le journal.
   · Couleurs — les sections marchandes passent en blanc franc et
     deux aplats profonds ancrent la page : bordeaux sur
     l'abonnement, espresso sur le savoir-faire (voir § 4).
   · Le bandeau « Suivez-nous » de pied de page est supprimé : le
     fil Instagram le remplace.
   · Le fil Instagram n'est plus un aperçu de maquette mais le
     widget Elfsight, sous un en-tête centré.
   · Le bandeau défilant des saveurs sous le hero est supprimé :
     le hero enchaîne directement sur les best-sellers.
   · Typographie de labeur remontée de deux crans (retour cliente
     « les textes sont trop petits », puis « encore 1 px ») :
     tout ce qui était sous 16 px gagne 2 px — le corps passe de
     15 à 17 px, les descriptions de cartes de 13 à 15 px, les
     sur-titres et mentions de 11 à 13 px, les badges de 9 à
     11 px. Les titres, les grands numéraux et les glyphes
     d'icônes ne bougent pas : c'est la lisibilité du texte
     courant qui était en cause, pas la hiérarchie.

   Mapping ACF : acf-fields-v5.json
   ============================================================ */

/* 1. FONTS
   ============================================================
   Titres   : EB Garamond (chargée via <link>, à self-hoster en prod)
   Interface : Caviar Dreams (police de marque, self-hosted)
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Caviar Dreams';
  src: url('../uploads/caviar_dreams/CaviarDreams-e0e9896c.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caviar Dreams';
  src: url('../uploads/caviar_dreams/CaviarDreams_Bold-219e9c31.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caviar Dreams';
  src: url('../uploads/caviar_dreams/CaviarDreams_Italic-3ce0522f.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Caviar Dreams';
  src: url('../uploads/caviar_dreams/CaviarDreams_BoldItalic-c660d916.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}



@font-face {
  font-family: 'Hind';
  src: url('../uploads/Hind/Hind-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hind';
  src: url('../uploads/Hind/Hind-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 2. DESIGN TOKENS
   ============================================================ */
:root {
  /* Palette de marque — aplats assumés */
  --color-bordeaux:       #8C1C2E;
  --color-bordeaux-dark:  #6E1424;
  --color-ocre:           #D4A96A;
  --color-ocre-light:     #EDD9A8;
  --color-ocre-dark:      #B8823A;
  /* Caramel : réservé aux petites touches (étoiles, survols, filets).
     Jamais en aplat de section — trop terne sur de grandes surfaces. */
  --color-caramel:        #C98538;

  /* Échelle claire des fonds de section — trois pas très rapprochés,
     pour des démarcations lisibles sans rupture de valeur.
     ivoire (base) → crème → crème alt (le plus soutenu) */
  --color-ivoire:         #FBF7EF;
  --color-creme:          #F5EDD5;
  --color-creme-alt:      #F0E6D0;
  /* Canaux de la crème — sert au voile dégradé posé sur les photos */
  --color-creme-rgb:      245, 237, 213;
  --color-espresso:       #2A1A0E;
  --color-espresso-deep:  #20120A;
  --color-white:          #FFFFFF;

  /* Texte */
  --text-primary:         #2A1A0E;
  --text-secondary:       rgba(42, 26, 14, 0.76);
  --text-muted:           rgba(42, 26, 14, 0.54);
  --text-on-dark:         #F5EDD5;
  --text-on-dark-muted:   rgba(245, 237, 213, 0.68);

  /* Filets */
  --border-hairline:      rgba(42, 26, 14, 0.14);
  --border-warm:          rgba(184, 130, 58, 0.55);
  --border-on-dark:       rgba(245, 237, 213, 0.16);

  /* Typographies */
  --font-title: 'EB Garamond', 'Garamond', Georgia, serif;
  --font-ui:   'Hind' ,'Overpass', 'Gill Sans', 'Helvetica Neue', sans-serif;

  /* Échelle typographique — registre magazine */
  --fs-hero:    clamp(2.75rem, 5.6vw, 5.25rem);
  --fs-display: clamp(2.375rem, 4.6vw, 4.25rem);
  --fs-md:      clamp(1.5rem, 2.4vw, 2rem);
  --fs-sm:      1.3125rem;

  /* Rythme vertical */
  --section-y:    clamp(5rem, 9vw, 8.75rem);
  --section-y-sm: clamp(3.5rem, 6vw, 5.5rem);

  /* Rayons */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* Ombres */
  --shadow-soft:    0 1px 2px rgba(42, 26, 14, 0.04), 0 10px 28px rgba(42, 26, 14, 0.07);
  --shadow-lift:    0 2px 4px rgba(42, 26, 14, 0.05), 0 22px 48px rgba(42, 26, 14, 0.13);
  --shadow-header:  0 1px 0 rgba(42, 26, 14, 0.06), 0 8px 28px rgba(42, 26, 14, 0.07);

  /* Transitions */
  --ease-base: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-slow: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-zoom: 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 3. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  color: var(--text-primary);
  background-color: var(--color-ivoire);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a       { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
img     { max-width: 100%; height: auto; display: block; }
p       { margin-bottom: 0; }

::selection { background-color: var(--color-bordeaux); color: var(--color-white); }

:focus-visible {
  outline: 2px solid var(--color-bordeaux);
  outline-offset: 3px;
}

/* Décalage d'ancre sous le header sticky */
[id] { scroll-margin-top: 6.5rem; }

/* Lien d'évitement */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  background-color: var(--color-espresso);
  color: var(--color-creme);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.875rem 1.25rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--ease-base);
}
.skip-link:focus { top: 0; color: var(--color-creme); }

/* Masquage accessible */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Padding du container aligné sur la plus grande gouttière (g-lg-5) */
.container-xl { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 1200px) {
  .container-xl { max-width: 1288px; }
}

/* 4. SURFACES (→ champ select "background" à l'intégration)
   ============================================================
   V5 — rythme de valeurs demandé par la cliente. Les sections
   marchandes passent en blanc franc (best-sellers, avis, Instagram)
   et deux aplats profonds ancrent la page : bordeaux sur
   l'abonnement, espresso sur le savoir-faire. Entre les deux,
   l'ivoire tient le rôle de respiration (saveurs, blog, newsletter).

     blanc → bordeaux → ivoire → espresso → blanc → espresso →
     blanc → ivoire → ivoire → espresso (pied de page)

   La crème et la crème alt restent au sélecteur de fond mais ne sont
   plus employées sur l'accueil.
   ------------------------------------------------------------ */
.bg-ivoire     { background-color: var(--color-ivoire); }
.bg-creme      { background-color: var(--color-creme); }
.bg-creme-alt  { background-color: var(--color-creme-alt); }
.bg-ocre-light { background-color: var(--color-ocre-light); }
.bg-ocre       { background-color: var(--color-ocre); }
.bg-bordeaux   { background-color: var(--color-bordeaux); }
.bg-espresso   { background-color: var(--color-espresso); }
.bg-white      { background-color: var(--color-white); }

/* Aplats sombres : on bascule les tokens de texte et de filet plutôt
   que de redéclarer les couleurs composant par composant. */
.bg-espresso,
.bg-bordeaux {
  --text-primary:    var(--text-on-dark);
  --text-secondary:  var(--text-on-dark-muted);
  --text-muted:      var(--text-on-dark-muted);
  --border-hairline: var(--border-on-dark);
}

/* Les composants qui portent leur couleur en dur (et non un token)
   ont besoin d'une reprise explicite sur aplat sombre. En V4 seuls le
   bandeau de réassurance et le pied de page étaient sombres, aucun
   n'en contenait ; la V5 y pose l'abonnement et le savoir-faire.
   Le bordeaux de marque disparaît sur ces deux fonds : il cède la
   place à l'ocre, qui reste lisible sur l'un comme sur l'autre. */
.bg-espresso .chapter__num,
.bg-bordeaux .chapter__num   { color: var(--color-ocre); }
.bg-espresso .chapter__label,
.bg-bordeaux .chapter__label { color: var(--text-on-dark); }
.bg-espresso .chapter__line,
.bg-bordeaux .chapter__line  { background-color: var(--border-on-dark); }

.bg-espresso .rule--bordeaux,
.bg-bordeaux .rule--bordeaux { background-color: var(--color-ocre); }

.bg-espresso .link-underline,
.bg-bordeaux .link-underline {
  color: var(--color-ocre);
  border-color: rgba(212, 169, 106, 0.5);
}
.bg-espresso .link-underline:hover,
.bg-espresso .link-underline:focus,
.bg-bordeaux .link-underline:hover,
.bg-bordeaux .link-underline:focus {
  color: var(--text-on-dark);
  border-color: var(--text-on-dark);
}

/* Cercles d'icônes et pastilles : le filet chaud est trop sombre sur
   aplat profond, il passe en ocre translucide. */
.bg-espresso .abo__list-icon,
.bg-bordeaux .abo__list-icon,
.bg-espresso .savoir__certif-icon,
.bg-bordeaux .savoir__certif-icon {
  border-color: rgba(212, 169, 106, 0.45);
  color: var(--color-ocre);
}

/* Sur bordeaux, un bouton bordeaux ne se voit plus : le CTA principal
   bascule en espresso (c'est le rendu du croquis). */
.bg-bordeaux .btn-bordeaux {
  background-color: var(--color-espresso);
  border-color: var(--color-espresso);
  color: var(--color-creme);
}
.bg-bordeaux .btn-bordeaux:hover,
.bg-bordeaux .btn-bordeaux:focus {
  background-color: var(--color-espresso-deep);
  border-color: var(--color-espresso-deep);
  color: var(--color-white);
}

/* Texture « papier kraft » — deux trames de fines rayures verticales
   superposées à l'aplat : une sombre à période 6 px pour la fibre, une
   claire à période 4 px pour le relief. Les deux périodes se déphasent
   et évitent l'effet de rayure régulière. Purement décoratif, la couleur
   de fond reste celle du token.
   Utilitaire à poser explicitement (→ futur champ true_false) : deux
   sections l'emploient par page, pas davantage, sinon la texture prend
   le pas sur le contenu. */
.u-texture {
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 5px, rgba(0, 0, 0, 0.028) 5px, rgba(0, 0, 0, 0.028) 6px),
    repeating-linear-gradient(90deg, transparent 0, transparent 3px, rgba(255, 255, 255, 0.05) 3px, rgba(255, 255, 255, 0.05) 4px);
}

/* Contraste renforcé sur l'aplat ocre soutenu (reste disponible au
   sélecteur de fond, même si aucune section ne l'emploie aujourd'hui) */
.bg-ocre {
  --text-secondary: rgba(42, 26, 14, 0.86);
  --text-muted:     rgba(42, 26, 14, 0.68);
  --border-hairline: rgba(42, 26, 14, 0.22);
}
.bg-ocre .link-underline,
.bg-ocre .rule--bordeaux,
.bg-ocre .chapter__num {
  color: var(--color-bordeaux-dark);
  border-color: var(--color-bordeaux-dark);
}
.bg-ocre .rule--bordeaux { background-color: var(--color-bordeaux-dark); }

/* 5. TYPOGRAPHIE
   ============================================================
   Casse mixte partout — aucun text-transform sur les titres.
   ------------------------------------------------------------ */
.u-title-xl {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.u-title-lg {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.u-title-md {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.u-title-sm {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.28;
  color: var(--text-primary);
}

/* Accent italique bordeaux dans un titre */
.u-title-xl em,
.u-title-lg em,
.u-title-md em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-bordeaux);
}

/* Sur aplat sombre, le bordeaux de l'italique tombe : il passe en ocre.
   La règle vaut aussi bien pour un titre marqué .u-on-dark que pour un
   titre qui hérite simplement du basculement de tokens de .bg-espresso. */
.bg-espresso .u-title-xl em,
.bg-espresso .u-title-lg em,
.bg-espresso .u-title-md em,
.bg-bordeaux .u-title-xl em,
.bg-bordeaux .u-title-lg em,
.bg-bordeaux .u-title-md em { color: var(--color-ocre); }

/* Variantes on-dark */
.u-on-dark,
.u-title-xl.u-on-dark,
.u-title-lg.u-on-dark,
.u-title-md.u-on-dark,
.u-title-sm.u-on-dark { color: var(--text-on-dark) !important; }
.u-on-dark-muted      { color: var(--text-on-dark-muted) !important; }
.u-on-dark em         { color: var(--color-ocre); }

/* Accroche */
.u-lead {
  font-family: var(--font-title);
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-secondary);
}
.u-lead--italic { font-style: italic; }

/* Corps */
.u-body {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--text-secondary);
}
.u-body p + p { margin-top: 1.1em; }

/* Sur-titre hérité (utilisé par les étapes du parcours) */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.eyebrow__line {
  display: inline-block;
  width: 2rem;
  height: 1px;
  background-color: currentColor;
  flex: none;
}
.eyebrow--bordeaux { color: var(--color-bordeaux); }
.eyebrow--on-dark  { color: var(--color-ocre); }
.eyebrow--center   { justify-content: center; }

/* Filet décoratif */
.rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  background-color: var(--color-ocre-dark);
  border: 0;
  opacity: 1;
  margin: 1.5rem 0;
}
.rule--center   { margin-left: auto; margin-right: auto; }
.rule--bordeaux { background-color: var(--color-bordeaux); }
.rule--on-dark  { background-color: var(--color-ocre); }

/* 5b. CHAPITRE — tête de section éditoriale
   ============================================================
   <header class="chapter">
     <span class="chapter__num">01</span>  ← généré à l'intégration
     <span class="chapter__label">…</span> ← ACF: eyebrow (text)
     <span class="chapter__line"></span>
   ============================================================ */
.chapter {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.chapter__num {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-bordeaux);
  flex: none;
}
.chapter__label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-primary);
  flex: none;
}
.chapter__line { flex: 1; height: 1px; background-color: var(--border-warm); }
.chapter--center { justify-content: center; }
.chapter--center .chapter__line { max-width: 5rem; }
.chapter--on-dark .chapter__num   { color: var(--color-ocre); }
.chapter--on-dark .chapter__label { color: var(--text-on-dark); }
.chapter--on-dark .chapter__line  { background-color: var(--border-on-dark); }

/* 6. BOUTONS
   ============================================================ */
.btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  line-height: 1;
  padding: 1.0625rem 2rem;
  border: 1px solid transparent;
  transition:
    background-color var(--ease-base),
    border-color     var(--ease-base),
    color            var(--ease-base),
    transform        var(--ease-base);
}
.btn i { transition: transform var(--ease-base); }
.btn:hover i { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.99); }

.btn-bordeaux {
  background-color: var(--color-bordeaux);
  border-color: var(--color-bordeaux);
  color: var(--color-white);
}
.btn-bordeaux:hover,
.btn-bordeaux:focus {
  background-color: var(--color-bordeaux-dark);
  border-color: var(--color-bordeaux-dark);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-espresso {
  background-color: var(--color-espresso);
  border-color: var(--color-espresso);
  color: var(--color-creme);
}
.btn-espresso:hover,
.btn-espresso:focus {
  background-color: var(--color-espresso-deep);
  border-color: var(--color-espresso-deep);
  color: var(--color-creme);
  transform: translateY(-2px);
}

.btn-outline-brand {
  background-color: transparent;
  border-color: rgba(42, 26, 14, 0.32);
  color: var(--text-primary);
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
  border-color: var(--text-primary);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.btn-outline-cream {
  background-color: transparent;
  border-color: rgba(245, 237, 213, 0.42);
  color: var(--text-on-dark);
}
.btn-outline-cream:hover,
.btn-outline-cream:focus {
  border-color: var(--text-on-dark);
  background-color: rgba(245, 237, 213, 0.08);
  color: var(--text-on-dark);
  transform: translateY(-2px);
}

.btn-cream {
  background-color: var(--color-creme);
  border-color: var(--color-creme);
  color: var(--color-espresso);
}
.btn-cream:hover,
.btn-cream:focus {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-espresso);
  transform: translateY(-2px);
}

.btn-sm-brand {
  font-size: 0.8125rem;
  padding: 0.8125rem 1.25rem;
  letter-spacing: 0.1em;
}

/* Navigation carrousel */
.btn-swiper-nav {
  width: 3rem;
  height: 3rem;
  background-color: transparent;
  border: 1px solid var(--border-warm);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--ease-base), color var(--ease-base), border-color var(--ease-base);
}
.btn-swiper-nav:hover {
  background-color: var(--color-bordeaux);
  border-color: var(--color-bordeaux);
  color: var(--color-white);
}
.btn-swiper-nav.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* 7. LIENS TEXTE
   ============================================================ */
.link-underline {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bordeaux);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--color-bordeaux);
  transition: color var(--ease-base), border-color var(--ease-base), gap var(--ease-base);
}
.link-underline:hover {
  color: var(--color-bordeaux-dark);
  border-color: var(--color-bordeaux-dark);
  gap: 0.8125rem;
}
.link-underline--on-dark { color: var(--color-ocre); border-color: var(--color-ocre); }
.link-underline--on-dark:hover { color: var(--text-on-dark); border-color: var(--text-on-dark); }

/* 8. SECTIONS
   ============================================================ */
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  position: relative;
}
.section--sm { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
.section__header       { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.section__intro        { max-width: 34rem; }
.section__intro--center { margin-left: auto; margin-right: auto; }

/* 9. TOPBAR + SUBBAR
   ============================================================ */
.topbar { padding: 0.6875rem 0; text-align: center; }
.topbar__promo {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ocre);
  margin: 0;
}
.topbar__promo strong { color: var(--color-white); }

.subbar {
  background-color: var(--color-ivoire);
  border-bottom: 1px solid var(--border-hairline);
}
.subbar__inner {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  padding: 0.375rem 0;
}
.subbar__contact { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.subbar__nav     { display: flex; gap: 1.375rem; align-items: center; flex-wrap: wrap; }
.subbar__link {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  transition: color var(--ease-base);
}
.subbar__link:hover { color: var(--color-bordeaux); }
.subbar__social {
  display: inline-flex;
  gap: 0.875rem;
  align-items: center;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border-warm);
}
.subbar__social-link {
  color: var(--text-muted);
  font-size: 0.8125rem;
  transition: color var(--ease-base);
}
.subbar__social-link:hover { color: var(--color-bordeaux); }

/* 10. HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--ease-slow), border-bottom-color var(--ease-slow);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-header);
  border-bottom-color: var(--border-warm);
}
.site-header__inner {
  height: clamp(3.75rem, 6vw, 5.25rem);
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  min-width: 0;
}
.site-header__logo {
  flex: none;
  margin-right: auto;
  height: 100%;
  padding: clamp(0.625rem, 1.1vw, 0.9375rem) 0;
}
.site-header__logo img { width: auto; height: 100%; }
.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.9vw, 0.75rem);
  flex: none;
}
.site-header__icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  color: var(--text-primary);
  position: relative;
  transition: color var(--ease-base), transform var(--ease-base);
}
.site-header__icon:hover { color: var(--color-bordeaux); transform: translateY(-1px); }
.site-header__cart-count {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.0625rem;
  height: 1.0625rem;
  background-color: var(--color-bordeaux);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-family: var(--font-ui);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header__burger {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--text-primary);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: -0.5rem;
  transition: color var(--ease-base);
}
.site-header__burger:hover { color: var(--color-bordeaux); }

@media (max-width: 449.98px) {
  .site-header__logo img { width: 110px; height: auto; }

  .site-header__icon { width: 2rem;}
}

/* 10b. NAVIGATION PRINCIPALE
   ============================================================ */
.main-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.9vw, 1.875rem);
  flex-wrap: nowrap;
}
.main-nav__item { position: relative; display: flex; align-items: center; gap: 0.25rem; }
.main-nav__link {
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 0.98vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
  padding: 0.375rem 0;
  position: relative;
  transition: color var(--ease-base);
}
.main-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-bordeaux);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease-base);
}
.main-nav__link:hover { color: var(--color-bordeaux); }
.main-nav__link:hover::after { transform: scaleX(1); }

/* Abonnement → pastille bordeaux (CTA permanent) */
.main-nav__item--cta .main-nav__link {
  background-color: var(--color-bordeaux);
  color: var(--color-white);
  padding: 0.5625rem 1.125rem;
  border-radius: var(--radius-sm);
}
.main-nav__item--cta .main-nav__link::after { content: none; }
.main-nav__item--cta .main-nav__link:hover {
  background-color: var(--color-bordeaux-dark);
  color: var(--color-white);
}

.main-nav__toggle {
  background: none;
  border: none;
  padding: 0.25rem 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.5rem;
  line-height: 1;
  display: inline-flex;
  flex: none;
  transition: color var(--ease-base), transform var(--ease-base);
}
.main-nav__toggle:hover { color: var(--color-bordeaux); }
.main-nav__item.is-open .main-nav__toggle { transform: rotate(180deg); color: var(--color-bordeaux); }

.main-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 14rem;
  background-color: var(--color-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--ease-base), transform var(--ease-base), visibility var(--ease-base);
  z-index: 120;
}
.main-nav__item:hover > .main-nav__sub,
.main-nav__item:focus-within > .main-nav__sub,
.main-nav__item.is-open > .main-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-nav__sublink {
  display: block;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  transition: color var(--ease-base), background-color var(--ease-base), padding-left var(--ease-base);
}
.main-nav__sublink:hover {
  color: var(--color-bordeaux);
  background-color: rgba(140, 28, 46, 0.04);
  padding-left: 1.5rem;
}

/* 11. MENU MOBILE (offcanvas Bootstrap)
   ============================================================ */
.offcanvas { background-color: var(--color-ivoire); }
.offcanvas-header { padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-warm); }
.offcanvas-header__logo { width: auto; height: 1.875rem; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__group { border-bottom: 1px solid var(--border-warm); }
.mobile-menu__row { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__link {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--text-primary);
  padding: 0.9375rem 0;
  transition: color var(--ease-base);
}
.mobile-menu__link:hover { color: var(--color-bordeaux); }
.mobile-menu__group--cta .mobile-menu__link { color: var(--color-bordeaux); font-style: italic; }
.mobile-menu__toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  transition: color var(--ease-base), transform var(--ease-base);
}
.mobile-menu__group.is-open .mobile-menu__toggle { transform: rotate(180deg); color: var(--color-bordeaux); }
.mobile-menu__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 1rem 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.mobile-menu__sublink {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--text-secondary);
  transition: color var(--ease-base);
}
.mobile-menu__sublink:hover { color: var(--color-bordeaux); }
.js .mobile-menu__sub { display: none; }
.js .mobile-menu__group.is-open .mobile-menu__sub { display: flex; }
.mobile-menu__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-warm);
}
.mobile-menu__secondary-link {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--ease-base);
}
.mobile-menu__secondary-link:hover { color: var(--color-bordeaux); }

/* 12. HERO
   ============================================================ */
.hero-section {
  position: relative;
  overflow: hidden;
}
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 74vh, 45rem);
  padding-top: clamp(3rem, 5.5vw, 6rem);
  padding-bottom: clamp(3.5rem, 6vw, 6.5rem);
  overflow: hidden;
}

/* Visuel de fond — pleine largeur de la slide (ACF sub_field image).
   Le voile dégradé, purement décoratif, garde le texte lisible sans
   changer la teinte du bloc : c'est l'ocre de la section qui est repris. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--color-creme-rgb), 0.96) 0%,
    rgba(var(--color-creme-rgb), 0.9) 40%,
    rgba(var(--color-creme-rgb), 0.55) 66%,
    rgba(var(--color-creme-rgb), 0.14) 100%
  );
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
/* Le hero déborde volontairement la largeur du reste de la page :
   marges latérales réduites pour donner de l'air au titre. */
.hero .container-xl {
  max-width: 1480px;
  padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
  padding-right: clamp(1.5rem, 2.5vw, 2.5rem);
}
.hero__content { position: relative; z-index: 2; }
.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-bordeaux-dark);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
}
.hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 2.25rem;
  height: 1px;
  background-color: currentColor;
  flex: none;
}
.hero__title { margin-bottom: 0; }
.hero__rule  { margin: 2rem 0; }
.hero__lead  { margin-bottom: 1.25rem; max-width: 36rem; }
.hero__text  { max-width: 34rem; margin-bottom: 2.5rem; }
.hero__ctas  { margin-bottom: 0; }

/* Carrousel hero */
.hero-swiper { position: relative; }
.hero-swiper .swiper-slide { height: auto; }
.hero-swiper .hero { height: 100%; }
/* Pagination centrée en pied de slider. */
.hero-swiper .swiper-pagination {
  position: absolute !important;
  left: 0;
  right: 0;
  width: 100%;
  bottom: 1.75rem;
  margin-top: 0 !important;
  text-align: center;
  z-index: 5;
}
/* Flèches centrées verticalement, de part et d'autre du slider. */
.hero-swiper__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border-warm);
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color var(--ease-base), border-color var(--ease-base), color var(--ease-base);
}
.hero-swiper__nav:hover {
  background-color: var(--color-bordeaux);
  border-color: var(--color-bordeaux);
  color: var(--color-white);
}
.hero-swiper__nav--prev { left: clamp(0.75rem, 2vw, 1.75rem); }
.hero-swiper__nav--next { right: clamp(0.75rem, 2vw, 1.75rem); }

/* 13. ENTRÉE PAR SAVEUR — bande de cinq tuiles
   ============================================================
   Une seule ligne pour que la section tienne dans un écran sans
   défilement. La hauteur des tuiles suit la largeur ET la hauteur
   de la fenêtre (min(vw, vh)) : sur un portable bas de plafond,
   les images se rétractent au lieu de pousser la section.
   Chaque tuile = un item du repeater ACF
   (image, name, note, teinte, link).
   ------------------------------------------------------------ */

/* En-tête : titre et lien sur la même ligne, chapô pleine largeur */
.saveurs__head { margin-bottom: clamp(1.75rem, 2.8vw, 2.5rem); }
.saveurs__head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}
.saveurs__intro {
  max-width: none;
  margin-top: 1.125rem;
}

.saveurs__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.625rem, 1vw, 1rem);
}

.saveur {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--radius-md);
  height: clamp(12rem, min(20vw, 30vh), 18rem);
}

.saveur__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease-zoom);
}
.saveur:hover .saveur__img { transform: scale(1.05); }

/* Voile dégradé — garantit la lisibilité du texte sur la photo */
.saveur::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(26, 15, 7, 0.9) 0%,
    rgba(26, 15, 7, 0.5) 42%,
    rgba(26, 15, 7, 0) 78%
  );
  transition: opacity var(--ease-base);
}
.saveur:hover::after { opacity: 0.88; }

.saveur__body {
  width: 100%;
  padding: clamp(1rem, 1.3vw, 1.375rem);
}

/* Filet teinté — code couleur de la saveur */
.saveur__rule {
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-bottom: 0.75rem;
  border-radius: 2px;
}
.saveur--noisette .saveur__rule { background-color: #E3C193; }
.saveur--caramel  .saveur__rule { background-color: #DFA660; }
.saveur--vanille  .saveur__rule { background-color: #F0E2BE; }
.saveur--pistache .saveur__rule { background-color: #CFD5A8; }
.saveur--amande   .saveur__rule { background-color: #E8D3B6; }

.saveur__name {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-creme);
  margin: 0 0 0.25rem;
}
.saveur__note {
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.4;
  color: rgba(245, 237, 213, 0.78);
  margin-bottom: 0.875rem;
}
.saveur__go {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ocre);
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(245, 237, 213, 0.28);
  transition: gap var(--ease-base), color var(--ease-base);
}
.saveur:hover .saveur__go { gap: 0.75rem; color: var(--color-creme); }

/* 14. CARTES PRODUIT — best-sellers
   ============================================================ */
.product-card {
  background-color: var(--color-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.product-card__visual {
  position: relative;
  padding: 2rem 1.5rem 1rem;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 17rem;
  overflow: hidden;
}
.product-card__bag {
  max-height: 15rem;
  width: auto;
  transition: transform var(--ease-slow);
}
.product-card:hover .product-card__bag { transform: scale(1.04) rotate(-1deg); }
.product-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: var(--color-bordeaux);
  color: var(--color-white);
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}
.product-card__fav {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border: 1px solid var(--border-warm);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: color var(--ease-base), border-color var(--ease-base), transform var(--ease-base);
}
.product-card__fav:hover { transform: scale(1.08); }
.product-card__fav:hover,
.product-card__fav[aria-pressed="true"] { color: var(--color-bordeaux); border-color: var(--color-bordeaux); }

.product-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid var(--border-hairline);
}
.product-card__origin {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
}
.product-card__name {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.4375rem;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.product-card__desc {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  flex: 1;
}
.product-card__rating {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.product-card__rating i { color: var(--color-caramel); font-size: 0.75rem; }
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--border-hairline);
}
.product-card__price {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--text-primary);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}
.product-card__weight {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 0.1875rem;
}

/* Pagination du carrousel produits — puces Swiper standard,
   stylées globalement en section 27. */
.produits-swiper .swiper-pagination { margin-top: 2.75rem !important; }
.produits-swiper .swiper-slide { height: auto; }

/* 15. ABONNEMENT (bloc accueil)
   ============================================================ */
.abo__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 0 1.5rem;
}
.abo__visual::before {
  content: '';
  position: absolute;
  width: min(24rem, 86%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 169, 106, 0.26) 0%, rgba(212, 169, 106, 0) 70%);
}
/* Grand « −10 % » filaire derrière le packshot — décor (aria-hidden) */
.abo__discount {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(6rem, 11vw, 10.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-ocre-dark);
  opacity: 0.55;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.abo__img {
  position: relative;
  max-height: 26rem;
  width: auto;
  filter: drop-shadow(0 24px 44px rgba(42, 26, 14, 0.22));
  z-index: 1;
}
.abo__badge {
  position: absolute;
  bottom: 2rem;
  right: 0;
  background-color: var(--color-ocre);
  color: var(--color-espresso);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6875rem 1.125rem;
  border-radius: var(--radius-sm);
  z-index: 2;
}
.abo__list {
  list-style: none;
  margin: 2.25rem 0 2.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.abo__list-item {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.abo__list-icon {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  border: 1px solid var(--border-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ocre-dark);
  font-size: 0.8125rem;
  flex: none;
}
.abo__list-item strong { color: var(--text-primary); font-weight: 700; }
.abo__price {
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-bordeaux);
  margin-bottom: 2rem;
}
.abo__ctas { display: flex; flex-wrap: wrap; gap: 1.125rem; align-items: center; }

/* V5 — le bloc est posé sur l'aplat bordeaux : les éléments qui
   tiraient leur couleur du bordeaux de marque passent en crème/ocre. */
.bg-bordeaux .abo__price      { color: var(--color-ocre-light); }
.bg-bordeaux .abo__discount   {
  -webkit-text-stroke-color: var(--color-ocre-light);
  opacity: 0.6;
}
.bg-bordeaux .abo__visual::before {
  background: radial-gradient(circle, rgba(245, 237, 213, 0.16) 0%, rgba(245, 237, 213, 0) 70%);
}
.bg-bordeaux .abo__img { filter: drop-shadow(0 24px 44px rgba(32, 18, 10, 0.4)); }

/* 16. BANDEAU DE RÉASSURANCE
   ============================================================
   Seule zone sombre du flux : elle sépare le haut commerçant du bas
   éditorial. Les couleurs de texte viennent du basculement de tokens
   posé par .bg-espresso (voir § 4 Surfaces). */
.reassurance { padding: 2.75rem 0; }
.reassurance__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.reassurance__item {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 0.5rem 1.75rem;
  border-left: 1px solid var(--border-hairline);
}
.reassurance__item:first-child { border-left: 0; padding-left: 0; }
/* Sur l'espresso, le bordeaux tombe : les icônes passent en caramel —
   une des touches où la couleur reste employée. */
.reassurance__icon {
  font-size: 1.5rem;
  color: var(--color-caramel);
  flex: none;
}
.reassurance__title {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.reassurance__text {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* 17. AVIS CLIENTS — widget Elfsight Google Reviews
   ============================================================
   Le widget gère sa propre mise en page ; on lui réserve
   simplement la largeur de la colonne et une hauteur minimale
   pour éviter le saut de page pendant son chargement.
   ------------------------------------------------------------ */
.avis-embed { min-height: 20rem; }
/* Le widget porte ses propres marges : on neutralise la dernière
   pour rester sur le rythme vertical des sections. */
.avis-embed > div:last-child { margin-bottom: 0; }

/* 18. SAVOIR-FAIRE
   ============================================================ */
/* Visuels empilés — Swiper « cards ». Le conteneur reprend au pixel
   près l'encombrement de l'ancienne image (largeur de colonne,
   format 4/5) : les cartes se superposent sans décaler la mise en
   page. L'effet pose lui-même overflow: visible sur .swiper-cards
   pour laisser dépasser les cartes du dessous. */
    .savoir-swiper {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Garde-fou : l'effet « cards » fige la largeur et les translations
     des slides en pixels au moment de l'initialisation. Entre un
     redimensionnement et leur recalcul (voir main-v5.js), une carte
     peut dépasser de plusieurs centaines de pixels et étirer toute la
     page. overflow: clip borne ce débordement ; la marge de clip laisse
     passer l'empilement, qui ne dépasse jamais ~4 rem. */
  overflow: clip;
  overflow-clip-margin: 5rem;
}

.savoir-swiper .swiper-slide {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.savoir-swiper .savoir__img-wrap,
.savoir-swiper .savoir__img { height: 100%; }
/* Dans la carte, l'image occupe toute la hauteur du slide : c'est le
   slide qui porte le format, plus l'image. */
.savoir-swiper .savoir__img { aspect-ratio: auto; }

.savoir__img-wrap { position: relative; }
.savoir__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.savoir__caption {
  position: absolute;
  margin: 0;
  left: 1.5rem;
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: rgba(251, 247, 236, 0.94);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.375rem;
}
.savoir__caption-quote {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--text-primary);
  display: block;
}
.savoir__caption-credit {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-bordeaux);
  margin-top: 0.5rem;
}
.savoir__quote {
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.55;
  color: var(--text-primary);
  border-left: 1px solid var(--color-bordeaux);
  padding-left: 1.5rem;
  margin: 0 0 1.75rem;
}
.savoir__certifs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-hairline);
}
.savoir__certif { display: flex; align-items: center; gap: 0.75rem; }
.savoir__certif-icon {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border-warm);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--color-ocre-dark);
  font-size: 0.875rem;
}
.savoir__certif-label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
/* Étapes — grands numéraux éditoriaux */
.savoir__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-top: clamp(2.75rem, 5vw, 4rem);
  border-top: 1px solid var(--border-warm);
}
.savoir__step { display: flex; flex-direction: column; gap: 1rem; }
.savoir__step-num {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(3rem, 4.6vw, 4.25rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-bordeaux);
}
.savoir__step-title { margin: 0; }

/* V5 — le bloc passe sur l'aplat espresso. Le filet et le numéral
   quittent le bordeaux (illisible sur ce fond) pour l'ocre ; le
   cartouche de citation, lui, reste une carte claire : son texte doit
   donc être forcé en espresso, sinon il hérite du crème du fond. */
.bg-espresso .savoir__quote     { border-left-color: var(--color-ocre); }
.bg-espresso .savoir__step-num  { -webkit-text-stroke-color: var(--color-ocre); }
.bg-espresso .savoir__caption-quote { color: var(--color-espresso); }

/* 19. BLOG
   ============================================================ */
.blog-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.blog-card__img-wrap { aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease-zoom); }
.blog-card:hover .blog-card__img { transform: scale(1.05); }
.blog-card__body {
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  flex: 1;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.blog-card__category {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-bordeaux);
}
.blog-card__title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.4375rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}
.blog-card__excerpt {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-muted);
  flex: 1;
}

/* 19b. INSTAGRAM — fil du compte via widget Elfsight
   ============================================================
   V5 : en-tête centré (pastille du compte, titre, accroche) au-dessus
   du fil. Le widget gère son propre rendu et reste dans le container,
   aligné sur les autres sections.
   ------------------------------------------------------------ */
.insta__header {
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
}
.insta__handle {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background-color: var(--color-espresso);
  color: var(--color-creme);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5625rem 1.125rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--ease-base), color var(--ease-base);
}
.insta__handle:hover,
.insta__handle:focus {
  background-color: var(--color-bordeaux);
  color: var(--color-creme);
}
.insta__handle i { font-size: 0.875rem; }
/* Un cran sous l'échelle des autres H2 : le titre doit tenir sur une
   ligne au-dessus du fil, comme au croquis. */
.insta__title {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 3.4vw, 3.125rem);
}
.insta__intro {
  max-width: 34rem;
  margin: 1.125rem auto 0;
}

/* Le fil reste dans le container, aligné sur le reste de la page.
   La hauteur minimale évite le saut de mise en page pendant le
   chargement du widget. */
.insta-embed { min-height: 14rem; }
.insta-embed > div:last-child { margin-bottom: 0; }

/* 20. NEWSLETTER — champ « ligne » éditorial
   ============================================================ */
/* Élargi avec la remontée de l'échelle typographique : à 44rem, l'accroche
   se coupait sur un « Pas plus. » orphelin. */
.newsletter__inner { max-width: 52rem; margin: 0 auto; text-align: center; }
.newsletter__form {
  display: flex;
  gap: 1rem;
  margin-top: 2.75rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
.newsletter__field { flex: 1 1 22rem; min-width: 0; text-align: left; }
.newsletter__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 0.625rem;
}
.input-line {
  width: 100%;
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: var(--text-primary);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(42, 26, 14, 0.45);
  border-radius: 0;
  padding: 0.625rem 0.125rem;
  transition: border-color var(--ease-base);
}
.input-line::placeholder { color: rgba(42, 26, 14, 0.42); font-style: italic; }
.input-line:focus { outline: none; border-bottom-color: var(--color-espresso); border-bottom-width: 2px; }
.newsletter__note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(42, 26, 14, 0.6);
  margin-top: 1.5rem;
}

/* Champ classique (parcours abonnement) */
.form-input {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  padding: 0.9375rem 1.125rem;
  transition: border-color var(--ease-base);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus { outline: none; border-color: var(--color-bordeaux); }

/* 21. FOOTER
   ============================================================ */
.site-footer { padding-top: clamp(4rem, 7vw, 6rem); }
/* Signature éditoriale */
.site-footer__tagline {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border-on-dark);
}
.site-footer__tagline em { font-style: italic; color: var(--color-ocre); }
.site-footer__grid { padding-bottom: 4rem; border-bottom: 1px solid var(--border-on-dark); }
.site-footer__brand { display: flex; flex-direction: column; gap: 1.5rem; }
.site-footer__logo-img { filter: brightness(0) invert(1); }
.site-footer__desc {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-on-dark-muted);
  max-width: 17rem;
}
.site-footer__social { display: flex; gap: 0.625rem; }
.site-footer__social-link {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-on-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 237, 213, 0.6);
  font-size: 0.8125rem;
  transition: background-color var(--ease-base), color var(--ease-base), border-color var(--ease-base);
}
.site-footer__social-link:hover {
  background-color: var(--color-bordeaux);
  border-color: var(--color-bordeaux);
  color: var(--color-white);
}
.site-footer__nav-title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.1875rem;
  color: var(--text-on-dark);
  margin-bottom: 1.375rem;
}
.site-footer__nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer__nav-link {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--text-on-dark-muted);
  transition: color var(--ease-base);
}
.site-footer__nav-link:hover { color: var(--text-on-dark); }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.75rem 0;
}
.site-footer__copyright { font-family: var(--font-ui); font-size: 0.875rem; color: rgba(245, 237, 213, 0.4); }
.site-footer__payments { display: flex; gap: 0.625rem; align-items: center; }
.site-footer__payment { font-size: 1.375rem; color: rgba(245, 237, 213, 0.4); }

/* 22. HERO DE PAGE INTERNE
   ============================================================ */
/* Bandeau réduit au sur-titre et au H1 : le formulaire doit rester
   haut dans la page, on resserre donc le rythme vertical. */
.page-hero { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(2.75rem, 4.5vw, 4rem); }
.page-hero__inner { max-width: 48rem; }
.page-hero__inner--center { margin: 0 auto; text-align: center; }
.page-hero__inner--center .chapter { justify-content: center; }
.page-hero__inner--center .chapter__line { max-width: 5rem; }

/* 23. PARCOURS ABONNEMENT — 7 étapes (document client)
   ============================================================ */
.parcours { max-width: 60rem; margin: 0 auto; }
/* Le retrait haut sépare une étape du filet précédent : la première
   n'en a pas besoin, elle démarre au ras du bandeau. */
.parcours__step { padding-top: 3.75rem; }
.parcours__step:first-child { padding-top: 0; }
.parcours__step + .parcours__step {
  margin-top: 3.75rem;
  border-top: 1px solid var(--border-warm);
}
.parcours__head {
  display: flex;
  align-items: baseline;
  gap: 1.375rem;
  margin-bottom: 0.75rem;
}
.parcours__number {
  font-family: var(--font-title);
  font-weight: 500;
  font-style: italic;
  font-size: 2.375rem;
  line-height: 1;
  color: var(--color-bordeaux);
  flex: none;
}
.parcours__question { margin: 0; }
.parcours__hint {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2rem;
  padding-left: 3.5rem;
}
.parcours__body { padding-left: 3.5rem; }

/* 23a. Tuiles de choix */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.875rem;
}
.choice-grid--wide { grid-template-columns: repeat(2, 1fr); }
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1.25rem 1.25rem 1.125rem;
  background-color: var(--color-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--ease-base), background-color var(--ease-base), transform var(--ease-base);
}
.choice:hover { border-color: var(--color-ocre-dark); transform: translateY(-2px); }
.choice__icon {
  font-size: 1.125rem;
  color: var(--color-ocre-dark);
  transition: color var(--ease-base);
}
.choice__label {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  transition: color var(--ease-base);
}
.choice__note {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-muted);
  transition: color var(--ease-base);
}
.choice[aria-pressed="true"] {
  background-color: var(--color-espresso);
  border-color: var(--color-espresso);
}
.choice[aria-pressed="true"] .choice__icon  { color: var(--color-ocre); }
.choice[aria-pressed="true"] .choice__label { color: var(--color-creme); }
.choice[aria-pressed="true"] .choice__note  { color: var(--text-on-dark-muted); }

/* 23b. Pastilles */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.chip {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-pill);
  padding: 0.6875rem 1.25rem;
  cursor: pointer;
  transition: border-color var(--ease-base), background-color var(--ease-base), color var(--ease-base);
}
.chip:hover { border-color: var(--color-ocre-dark); }
.chip[aria-pressed="true"] {
  background-color: var(--color-espresso);
  border-color: var(--color-espresso);
  color: var(--color-creme);
}

/* 23c. Sélection produits décochable */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background-color: var(--color-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--ease-base), box-shadow var(--ease-base);
}
.pick:hover { border-color: var(--color-ocre-dark); }
.pick[aria-pressed="true"] {
  border-color: var(--color-bordeaux);
  box-shadow: 0 0 0 1px var(--color-bordeaux);
}
.pick__visual {
  position: relative;
  background-color: var(--color-white);
  padding: 1rem 0.75rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9.5rem;
}
.pick__img { max-height: 8rem; width: auto; }
.pick__badge {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  background-color: var(--color-bordeaux);
  color: var(--color-white);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pick__check {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  color: transparent;
  transition: background-color var(--ease-base), border-color var(--ease-base), color var(--ease-base);
}
.pick[aria-pressed="true"] .pick__check {
  background-color: var(--color-bordeaux);
  border-color: var(--color-bordeaux);
  color: var(--color-white);
}
.pick__body {
  padding: 0.875rem 1rem 1.125rem;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.pick__name {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}
.pick__format {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.pick__price {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--text-primary);
  margin-top: 0.25rem;
}

/* 23d. Récapitulatif */
.recap {
  background-color: var(--color-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  padding: 2rem 2rem 2.25rem;
}
.recap__block + .recap__block {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-hairline);
}
.recap__label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.875rem;
}
.recap__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.recap__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--text-secondary);
}
.recap__line-name { color: var(--text-primary); }
.recap__line-qty  { color: var(--text-muted); font-size: 0.875rem; }
.recap__note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 0.75rem;
}
.recap__date { max-width: 16rem; }
.recap__totals { display: flex; flex-direction: column; gap: 0.5rem; }
.recap__total-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--text-secondary);
}
.recap__strike { text-decoration: line-through; color: var(--text-muted); }
.recap__discount { color: var(--color-bordeaux); font-weight: 700; }
.recap__grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-hairline);
}
.recap__grand-label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.recap__grand-value {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 2.125rem;
  line-height: 1;
  color: var(--text-primary);
}

/* 23e. Validation — sortie vers le tunnel WooCommerce
   ------------------------------------------------------------
   Le configurateur ne gère ni la livraison ni le paiement : il
   ajoute l'abonnement au panier et laisse la main au checkout.
   D'où un bloc unique, centré, sans numéro d'étape. */
.parcours__checkout {
  margin-top: 3.75rem;
  padding-top: 3.75rem;
  border-top: 1px solid var(--border-warm);
  text-align: center;
}
.parcours__submit {
  font-size: 1rem;
  padding: 1.25rem 3rem;
}
.parcours__checkout-note {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 34rem;
  margin: 1.25rem auto 0;
}

/* 24. FAQ
   ============================================================ */
.faq { max-width: 46rem; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--border-warm); }
.faq__item h3 { margin: 0; }
.faq__trigger {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.625rem 0;
  cursor: pointer;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--text-primary);
  transition: color var(--ease-base);
}
.faq__trigger:hover { color: var(--color-bordeaux); }
.faq__icon { font-size: 0.75rem; color: var(--color-bordeaux); flex: none; transition: transform var(--ease-base); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__panel {
  padding-bottom: 1.75rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-secondary);
}
.js .faq__panel { display: none; }
.js .faq__item.is-open .faq__panel { display: block; }

/* 25. CTA FINAL
   ============================================================ */
.cta-final { text-align: center; }
.cta-final__inner { max-width: 40rem; margin: 0 auto; }
.cta-final__ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.5rem; }

/* 26. SWIPER — surcharges
   ============================================================ */
.swiper-pagination { position: static !important; margin-top: 2.5rem !important; }
.swiper-pagination-bullet {
  background: rgba(42, 26, 14, 0.25) !important;
  opacity: 1 !important;
  width: 0.5rem !important;
  height: 0.5rem !important;
  transition: transform var(--ease-base);
}
.swiper-pagination-bullet-active { background: var(--color-bordeaux) !important; transform: scale(1.25); }

/* 27. REVEAL — actif uniquement si .js sur <html>
   ============================================================ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.375rem);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* 28. VERSION SWITCHER (outil de maquette — non intégré)
   ============================================================ */
.version-switcher {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.version-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-espresso);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  transition: transform var(--ease-base), background-color var(--ease-base);
}
.version-switcher__btn:hover { transform: translateY(-2px); color: var(--color-white); background-color: var(--color-bordeaux); }
.version-switcher__current {
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background-color: var(--color-creme-alt);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
}

/* 29. RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .main-nav       { gap: 1rem; }
  .main-nav__link { letter-spacing: 0.06em; }
}

@media (max-width: 991.98px) {
  .site-header__nav      { display: none; }
  .savoir__steps         { grid-template-columns: 1fr; gap: 2rem; }
  .reassurance__grid     { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
  .reassurance__item:nth-child(odd) { border-left: 0; padding-left: 0; }

  .hero                  { min-height: clamp(26rem, 62vh, 34rem); padding-top: 2.5rem; padding-bottom: 4.25rem; }
  .hero__rule            { margin: 1.375rem 0; }
  .hero__text            { margin-bottom: 1.75rem; }
  /* Le texte occupe toute la largeur : le voile devient vertical. */
  .hero__veil {
    background: linear-gradient(
      180deg,
      rgba(var(--color-creme-rgb), 0.95) 0%,
      rgba(var(--color-creme-rgb), 0.9) 58%,
      rgba(var(--color-creme-rgb), 0.6) 100%
    );
  }
  .hero-swiper__nav      { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
  .hero-swiper .swiper-pagination { bottom: 1.25rem; }

  .saveurs__row          { grid-template-columns: repeat(3, 1fr); }
  .saveur                { height: clamp(12rem, 30vw, 16rem); }

  .abo__img              { max-height: 20rem; }
  .abo__discount         { font-size: clamp(4.5rem, 14vw, 7rem); }
  

  .pick-grid             { grid-template-columns: repeat(3, 1fr); }
  .parcours__hint,
  .parcours__body        { padding-left: 0; }
  .parcours__number      { font-size: 1.75rem; }
  .parcours__head        { gap: 0.875rem; }
}

@media (max-width: 767.98px) {
  .subbar            { display: none; }
  /* Flèches masquées : la navigation se fait au doigt. */
  .hero-swiper__nav  { display: none; }
  .hero-swiper .swiper-pagination { bottom: 1rem; }
  .avis__stage::before { top: -1.75rem; left: 0; }
  .saveurs__row      { grid-template-columns: repeat(2, 1fr); }
  .saveur            { height: clamp(11rem, 42vw, 14rem); }
  .newsletter__submit { width: 100%; }
  .newsletter__field  { flex: 1 1 100%; }
  .reassurance__grid  { grid-template-columns: 1fr; }
  .reassurance__item  { border-left: 0; padding-left: 0; }
  .product-card__footer { flex-direction: column; align-items: stretch; gap: 0.875rem; }
  .product-card__footer .btn { width: 100%; }

  .pick-grid         { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .choice-grid       { grid-template-columns: repeat(2, 1fr); }
  .choice-grid--wide { grid-template-columns: 1fr; }
  .recap             { padding: 1.5rem 1.25rem 1.75rem; }
  .parcours__submit  { width: 100%; padding: 1.125rem 1.5rem; }
}

/* 30. PREFERS-REDUCED-MOTION
   ============================================================ */
@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;
  }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}