/* ============================================================
   Le Temps des Cerises — Design System V4 « É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, ordre des blocs imposé) dans une exécution
   éditoriale : échelle typographique magazine, chapitres numérotés,
   index des saveurs, bandeau défilant bordeaux, micro-interactions.

   Écart V3 → V4 : le carrousel du hero passe en visuel de fond
   pleine largeur (voile dégradé ocre), flèches centrées
   verticalement de part et d'autre du slider, pagination centrée.

   Mapping ACF : acf-fields-v4.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)
   ============================================================
   La page se lit en clair : les sections alternent ivoire, crème et
   crème alt, trois valeurs proches qui démarquent les blocs sans
   marquer de rupture. Les aplats sombres sont réservés aux zones de
   chrome (top-bar, pied de page) et au bandeau de réassurance.
   ------------------------------------------------------------ */
.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);
}

/* 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: 0.9375rem;
  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.6875rem;
  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.6875rem;
  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.75rem;
  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.6875rem;
  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.75rem;
  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.6875rem;
  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.6875rem;
  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.5625rem;
  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.6875rem, 0.82vw, 0.75rem);
  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.8125rem;
  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: 0.9375rem;
  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.75rem;
  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.6875rem;
  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); }

/* 12b. MARQUEE — bandeau défilant des saveurs (pied du bloc hero)
   ============================================================
   Décor rattaché au hero. ACF: marquee_items (repeater: text).
   Contenu doublé (aria-hidden) pour la boucle ; version texte
   accessible en .u-sr-only dans le HTML.
   ------------------------------------------------------------ */
.marquee {
  overflow: hidden;
  background-color: var(--color-bordeaux);
  padding: 1.125rem 0;
  position: relative;
  z-index: 4;
}
.marquee__track {
  display: flex;
  align-items: baseline;
  gap: 3.25rem;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  line-height: 1.15;
  color: var(--color-creme);
  white-space: nowrap;
  flex: none;
}
.marquee__dot {
  font-size: 0.875em;
  color: var(--color-ocre);
  flex: none;
}
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

/* 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.8125rem, 0.95vw, 0.9375rem);
  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.625rem;
  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.5625rem;
  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.625rem;
  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.8125rem;
  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.6875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.product-card__rating i { color: var(--color-caramel); font-size: 0.625rem; }
.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.6875rem;
  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.6875rem;
  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: 0.9375rem;
  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; }

/* 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.75rem;
  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.75rem;
  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-v4.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.625rem;
  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.75rem;
  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; }

/* 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.6875rem;
  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.8125rem;
  line-height: 1.75;
  color: var(--text-muted);
  flex: 1;
}

/* 19b. INSTAGRAM — fil du compte via widget
   ============================================================
   Le widget gère son propre rendu : on lui réserve la largeur de
   la colonne et une hauteur minimale pour éviter le saut de page
   pendant son chargement (même principe que le bloc avis).
   La grille de tuiles est l'aperçu de maquette : elle disparaît
   à l'intégration, remplacée par le rendu du widget.
   ------------------------------------------------------------ */
.insta-embed { min-height: 14rem; }
.insta-embed > div:last-child { margin-bottom: 0; }
.insta__intro { max-width: 38rem; margin-top: 1.125rem; }

.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.625rem, 1vw, 1rem);
}
.insta-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-creme);
}
.insta-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease-zoom);
}
.insta-tile:hover .insta-tile__img { transform: scale(1.06); }
/* Pastille de rappel du réseau, posée dans l'angle de la vignette */
.insta-tile__icon {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(42, 26, 14, 0.55);
  color: var(--color-creme);
  font-size: 0.8125rem;
}

/* 20. NEWSLETTER — champ « ligne » éditorial
   ============================================================ */
.newsletter__inner { max-width: 44rem; 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.6875rem;
  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.6875rem;
  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: 0.9375rem;
  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. RÉSEAUX SOCIAUX — bandeau compact pleine largeur
   ============================================================
   Une seule ligne sur aplat caramel, entre la newsletter (ocre)
   et le footer (espresso) : la page descend en valeur jusqu'au
   pied. Titre à gauche, compte et icônes à droite. Aucune
   vignette — les icônes viennent du repeater global
   reseaux_sociaux (Options du thème).
   Texte en espresso : le caramel est trop clair pour du crème.
   ------------------------------------------------------------ */
.social-band { padding: clamp(2rem, 3vw, 2.75rem) 0; }
.social-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}
.social-band__text { min-width: 15rem; }
.social-band__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42, 26, 14, 0.6);
  margin-bottom: 0.625rem;
}
.social-band__num { color: var(--color-bordeaux-dark); }
.social-band__title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
  margin: 0;
}
.social-band__title em { font-style: italic; color: var(--color-bordeaux-dark); }

.social-band__aside {
  display: flex;
  align-items: center;
  gap: 1.25rem 1.75rem;
  flex-wrap: wrap;
}
.social-band__handle {
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
  color: rgba(42, 26, 14, 0.78);
  margin: 0;
}
.social-band__links { display: flex; gap: 0.75rem; }
.social-band__link {
  width: 2.875rem;
  height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(42, 26, 14, 0.35);
  border-radius: 50%;
  color: var(--color-espresso);
  font-size: 1rem;
  transition: color var(--ease-base), background-color var(--ease-base),
              border-color var(--ease-base), transform var(--ease-base);
}
.social-band__link:hover {
  color: var(--color-caramel);
  background-color: var(--color-espresso);
  border-color: var(--color-espresso);
  transform: translateY(-2px);
}

/* 22. 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: 0.875rem;
  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.8125rem;
  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.75rem; 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); }

/* 23. 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; }

/* 24. 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.75rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2rem;
  padding-left: 3.5rem;
}
.parcours__body { padding-left: 3.5rem; }

/* 24a. 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: 0.875rem;
  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: 0.875rem;
  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); }

/* 24b. Pastilles */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.chip {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  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);
}

/* 24c. 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.5rem;
  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.0625rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}
.pick__format {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.pick__price {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text-primary);
  margin-top: 0.25rem;
}

/* 24d. 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.6875rem;
  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: 0.875rem;
  color: var(--text-secondary);
}
.recap__line-name { color: var(--text-primary); }
.recap__line-qty  { color: var(--text-muted); font-size: 0.75rem; }
.recap__note {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  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: 0.875rem;
  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.75rem;
  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);
}

/* 24e. 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: 0.875rem;
  padding: 1.25rem 3rem;
}
.parcours__checkout-note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 34rem;
  margin: 1.25rem auto 0;
}

/* 25. 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: 0.875rem;
  line-height: 1.85;
  color: var(--text-secondary);
}
.js .faq__panel { display: none; }
.js .faq__item.is-open .faq__panel { display: block; }

/* 26. 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; }

/* 27. 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); }

/* 28. 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; }

/* 29. 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);
}

/* 30. 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); }

  .insta-grid            { grid-template-columns: repeat(3, 1fr); }

  .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); }
  .insta-grid        { grid-template-columns: repeat(2, 1fr); }
  /* Bandeau réseaux : titre puis icônes, alignés à gauche */
  .social-band__aside { width: 100%; justify-content: flex-start; gap: 1rem 1.25rem; }
  .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; }
}

/* 31. 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;
  }
  .marquee__track   { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}