/*
═══════════════════════════════════════════════════════════════════
ESSENTIA SCENT — DESIGN SYSTEM v2.0 (2026-05-19)
═══════════════════════════════════════════════════════════════════

Synchronisé avec mockup-home-v1.html (v7.6 design validé 2026-05-19).
Charge automatiquement via le child theme essentia-scent.

Sections :
1. Variables :root (palette Crème + Fraunces + Cacao)
2. Base / reset
3. WordPress / Hello Elementor overrides (margin admin bar, body bg, page-header)
4. Typo, liens, boutons
5. Header sticky (topbar, header transparent→opaque, mega menu, quizbar)
6. Drawer mobile
7. Sections home : hero, valeurs, howto, bestseller, collections, diffusers,
   quickview, reviews, quiz-banner, odorkiller, b2b, newsletter, footer
8. Reveal on scroll
═══════════════════════════════════════════════════════════════════
*/

:root {
  --es-bg: #FAFAF8;
  --es-bg-alt: #F2F0EC;
  --es-bg-chip: #ECEAE4;
  --es-ink: #1A1A1A;
  --es-cacao: #7C6650;
  --es-cacao-dark: #5F4F3D;
  --es-lin: #9C8B6C;
  --es-lin-light: #C5B89C;
  --es-gray: #6B6B6B;
  --es-gray-2: #9C9C9C;
  --es-line: #E5E2DC;
  --es-promo: #C8533E;
  --es-promo-dark: #A8412F; /* survol de --es-promo */
  --es-heart: var(--es-promo); /* coup de cœur : même rouge que la promo */
  --es-heart-dark: var(--es-promo-dark); /* coup de cœur, survol */
  --es-success: #2E7D4F; /* disponibilité, avis vérifié */
  --es-success-bg: #F0F7F3; /* fond des messages de succès */
  --es-star: #C8A45E; /* or des étoiles de notation */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--es-ink); background: var(--es-bg); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { line-height: 1.5; font-size: 16px; overflow-x: clip; }
/* overflow-x: clip sur body (PAS hidden) : clip l'overflow horizontal SANS
   créer de containing block qui casserait position: sticky du header.
   max-width: 100vw sur sections pleines largeur pour garantir qu'aucune
   ne déborde au-delà du viewport. */
section, header, main, footer {
  max-width: 100vw;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 900px) { .container { padding: 0 20px; } }
@media (max-width: 480px) { .container { padding: 0 16px; } }

.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--es-gray); margin-bottom: 16px; }
.num-mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.05em; color: var(--es-gray); }
.serif { font-family: 'Fraunces', 'Times New Roman', serif; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: -0.015em; line-height: 1; }
.serif em { font-style: italic; font-weight: 400; }
p { color: var(--es-gray); }

/* BUTTONS · avec hover/animation */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 0; border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap; text-align: center;
  position: relative; overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.15);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover::after { transform: translateX(0); }
.btn-primary { background: var(--es-ink); color: #fff; border-color: var(--es-ink); }
.btn-primary:hover { background: #000; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.btn-cacao { background: var(--es-cacao); color: #fff; border-color: var(--es-cacao); }
.btn-cacao:hover { background: var(--es-cacao-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124,102,80,0.3); }
.btn-ghost { background: transparent; color: var(--es-ink); border-color: var(--es-ink); }
.btn-ghost:hover { color: var(--es-cacao); border-color: var(--es-cacao); transform: translateY(-1px); }
.btn-ghost::after { display: none; }
.btn-light { background: #fff; color: var(--es-ink); border-color: #fff; }
.btn-light:hover { background: var(--es-bg-alt); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.btn-sm { padding: 12px 22px; font-size: 13px; }
.btn-block { width: 100%; }
.text-link { color: inherit; text-decoration: underline; text-underline-offset: 4px; padding: 12px 4px; font-size: 14px; font-weight: 500; display: inline-block; transition: opacity 0.2s; }
.text-link:hover { opacity: 0.7; }

/* =============== HEADER TRANSPARENT → OPAQUE (scroll OU hover) ===============
   Pattern strict du mockup v7.6, avec overrides Elementor :
   - <header> Elementor est lui-même sticky (mobile reliability)
   - .hero { margin-top: -130px } pour superposer
   - Wrappers Elementor neutralisés (no padding/bg/overflow)
   - TOUS les éléments du header forcés en Inter + colors neutres pour battre
     l'accent typography Cormorant italic ET les hover colors par défaut
     d'Elementor (rose/orange sur button et a).  */
header.elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: transparent !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
  overflow: visible !important;
  width: 100%;
}
.admin-bar header.elementor-location-header { top: 32px !important; }
@media (max-width: 782px) {
  /* WP admin bar passe en position:absolute sur mobile (scrolle avec la page).
     Forcer top: 0 sur le header sticky pour éviter un blanc de 46px sous l'admin
     bar quand on scrolle. Le header recouvre l'admin bar au top — acceptable car
     l'admin bar n'est qu'un outil dev en preview. */
  .admin-bar header.elementor-location-header { top: 0 !important; }
}
header.elementor-location-header > .elementor-element,
header.elementor-location-header .e-con-inner,
header.elementor-location-header .elementor-widget-html,
header.elementor-location-header .elementor-widget-container,
header.elementor-location-header .e-con-full,
header.elementor-location-header .e-con-boxed {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}
/* Tout le contenu : Inter droit, pas d'italique Cormorant qui bleed */
header.elementor-location-header,
header.elementor-location-header *,
header.elementor-location-header *::before,
header.elementor-location-header *::after,
.es-drawer,
.es-drawer * {
  font-style: normal !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* Mega menu / drawer : remettre Fraunces là où le mockup le prévoit */
header.elementor-location-header .es-mega__showcase-label,
header.elementor-location-header .es-drawer__bestseller-name,
header.elementor-location-header .es-drawer__nav > a,
header.elementor-location-header .es-drawer__nav__accordion-trigger,
header.elementor-location-header .es-drawer__nav__col-card-label,
.es-drawer .es-mega__showcase-label,
.es-drawer .es-drawer__bestseller-name,
.es-drawer .es-drawer__nav > a,
.es-drawer .es-drawer__nav__accordion-trigger,
.es-drawer .es-drawer__nav__col-card-label {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
}
/* Tous les liens du header : pas de visited/hover/active color override */
header.elementor-location-header a,
header.elementor-location-header a:link,
header.elementor-location-header a:visited,
header.elementor-location-header a:hover,
header.elementor-location-header a:active,
header.elementor-location-header a:focus,
.es-drawer a,
.es-drawer a:link,
.es-drawer a:visited,
.es-drawer a:hover,
.es-drawer a:active,
.es-drawer a:focus {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  outline: none !important;
}
/* Boutons (Parfums/Diffuseurs mega triggers + burger + icon-btn) :
   pas de bg coloré, pas de border par défaut, pas de hover rose Elementor */
header.elementor-location-header button,
header.elementor-location-header button:hover,
header.elementor-location-header button:focus,
header.elementor-location-header button:active,
.es-drawer button,
.es-drawer button:hover,
.es-drawer button:focus,
.es-drawer button:active {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
/* …sauf les entrées « Parfums d'ambiance » et « Diffuseurs » du menu mobile, qui sont
   des <button> (elles déplient un accordéon) et non des liens.

   Le reset ci-dessus leur imposait font-family: inherit au survol, c'est-à-dire l'Inter
   hérité de « .es-drawer * ». Or la règle qui leur rend Fraunces ne cible que
   .es-drawer .es-drawer__nav__accordion-trigger, soit deux classes (0,2,0), quand
   .es-drawer button:hover en vaut (0,2,1) : au survol, le reset l'emportait et ces deux
   entrées basculaient en sans-serif — les seules du menu, puisque toutes les autres
   sont des <a>. On repasse donc au-dessus, sur tous les états. */
.es-drawer .es-drawer__nav .es-drawer__nav__accordion-trigger,
.es-drawer .es-drawer__nav .es-drawer__nav__accordion-trigger:hover,
.es-drawer .es-drawer__nav .es-drawer__nav__accordion-trigger:focus,
.es-drawer .es-drawer__nav .es-drawer__nav__accordion-trigger:active {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.015em !important;
}
/* Bouton "Espace Pro" : background cacao FORCÉ avec très haute spécificité
   (sinon le reset général des links transparent gagne) */
header.elementor-location-header a.es-topbar__pro,
header.elementor-location-header a.es-topbar__pro:link,
header.elementor-location-header a.es-topbar__pro:visited {
  background: var(--es-cacao) !important;
  background-color: var(--es-cacao) !important;
  color: #fff !important;
  padding: 0 24px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
  transform: none !important;
}
header.elementor-location-header a.es-topbar__pro:hover,
header.elementor-location-header a.es-topbar__pro:focus,
header.elementor-location-header a.es-topbar__pro:active {
  background: var(--es-cacao-dark) !important;
  background-color: var(--es-cacao-dark) !important;
  color: #fff !important;
  transform: none !important;
}
/* === LOCK SIZE / TRANSFORM sur TOUS les hovers du header ===
   Empêche Elementor (et tout autre rule) de faire grossir le texte au hover. */
header.elementor-location-header *:hover,
header.elementor-location-header *:focus,
header.elementor-location-header *:active,
.es-drawer *:hover,
.es-drawer *:focus,
.es-drawer *:active {
  transform: none !important;
  scale: none !important;
}
/* Lock font-size sur tous les liens / boutons de la nav et du mega menu */
header.elementor-location-header .es-nav > a,
header.elementor-location-header .es-nav > a:hover,
header.elementor-location-header .es-nav__mega-trigger,
header.elementor-location-header .es-nav__mega-trigger:hover {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
/* LOCK layout du header pour empêcher Elementor d'étirer la nav */
header.elementor-location-header .es-header__inner {
  display: flex !important;
  align-items: center !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 18px 40px !important;
  gap: 40px !important;
  justify-content: flex-start !important;
  width: 100% !important;
}
/* Mobile : padding latéral réduit pour que le burger ne touche pas l'edge */
@media (max-width: 1100px) {
  header.elementor-location-header .es-header__inner {
    padding: 16px 20px !important;
    gap: 16px !important;
  }
}
@media (max-width: 700px) {
  header.elementor-location-header .es-header__inner {
    padding: 14px 20px !important;
    gap: 0 !important;
  }
  header.elementor-location-header .es-header__actions {
    padding-left: 0 !important;
    margin-left: auto !important;
    gap: 2px !important;
  }
  header.elementor-location-header .es-icon-btn {
    padding: 6px !important;
  }
  header.elementor-location-header .es-icon-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
  /* Le dernier bouton (burger) : pas de padding-right pour ne pas créer
     de "vide" mais le padding 20px du parent assure la marge avec l'edge */
  header.elementor-location-header .es-burger {
    padding: 6px 0 6px 6px !important;
    margin: 0 !important;
  }
}
header.elementor-location-header .es-nav {
  display: flex !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
}
/* Mobile (<1100px) : la nav desktop est cachée, le burger prend le relais */
@media (max-width: 1100px) {
  header.elementor-location-header .es-nav {
    display: none !important;
  }
}
/* Editor Elementor : respecte aussi le mode mobile/tablet sélectionné dans l'éditeur
   (l'iframe ne déclenche pas toujours correctement les media queries) */
body[data-elementor-device-mode="mobile"] header.elementor-location-header .es-nav,
body[data-elementor-device-mode="tablet"] header.elementor-location-header .es-nav,
body[data-elementor-device-mode="mobile_extra"] header.elementor-location-header .es-nav,
body[data-elementor-device-mode="tablet_extra"] header.elementor-location-header .es-nav {
  display: none !important;
}
body[data-elementor-device-mode="mobile"] header.elementor-location-header .es-burger,
body[data-elementor-device-mode="tablet"] header.elementor-location-header .es-burger,
body[data-elementor-device-mode="mobile_extra"] header.elementor-location-header .es-burger,
body[data-elementor-device-mode="tablet_extra"] header.elementor-location-header .es-burger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  background: transparent !important;
  border: 0 !important;
}
/* Margin explicite (22px) entre chaque item + alignement vertical strict.
   Le mix <div>+<a>+<button> avait des baselines différentes (button center-aligned
   vs a baseline-aligned par défaut). On force tous à display:inline-flex avec
   hauteur identique pour que le texte soit sur la même ligne horizontale. */
header.elementor-location-header .es-nav > *,
header.elementor-location-header .es-nav > a,
header.elementor-location-header .es-nav > div,
header.elementor-location-header .es-nav > button,
header.elementor-location-header .es-nav__item-mega,
header.elementor-location-header .es-nav__mega-trigger {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 22px 0 0 !important;
  padding: 4px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: baseline !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: content-box !important;
}
header.elementor-location-header .es-nav > *:last-child,
header.elementor-location-header .es-nav__item-mega:last-child {
  margin-right: 0 !important;
}
/* Le bouton trigger à l'intérieur du wrapper .es-nav__item-mega : pas de margin
   (le wrapper porte la margin de 22px) */
header.elementor-location-header .es-nav__item-mega > .es-nav__mega-trigger {
  margin: 0 !important;
}
header.elementor-location-header .es-mega__col a,
header.elementor-location-header .es-mega__col a:hover,
header.elementor-location-header .es-mega__col a:visited {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--es-gray) !important;
}
header.elementor-location-header .es-mega__col a:hover {
  color: var(--es-cacao) !important;
}
header.elementor-location-header .es-mega__col a.es-mega__shop-all,
header.elementor-location-header .es-mega__col a.es-mega__shop-all:hover {
  color: var(--es-cacao) !important;
  font-weight: 500 !important;
}
header.elementor-location-header .es-mega__col h6 {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--es-ink) !important;
}
header.elementor-location-header .es-mega__showcase-label {
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
}
header.elementor-location-header .es-mega__showcase-link,
header.elementor-location-header .es-mega__showcase-link:hover {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--es-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}
/* Quizbar : dimensions verrouillées, pas de grossissement sur hover */
header.elementor-location-header .es-quizbar,
header.elementor-location-header .es-quizbar:hover {
  padding: 10px 40px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  height: auto !important;
  min-height: 0 !important;
}
header.elementor-location-header .es-quizbar a,
header.elementor-location-header .es-quizbar a:hover,
header.elementor-location-header .es-quizbar a:visited,
header.elementor-location-header .es-quizbar a:focus {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  color: #fff !important;
}
header.elementor-location-header .es-quizbar span,
header.elementor-location-header .es-quizbar span:hover {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  transform: none !important;
}
@media (max-width: 700px) {
  header.elementor-location-header .es-quizbar,
  header.elementor-location-header .es-quizbar:hover {
    padding: 9px 12px !important;
    font-size: 11px !important;
  }
  header.elementor-location-header .es-quizbar a,
  header.elementor-location-header .es-quizbar span {
    font-size: 11px !important;
  }
}
/* Burger mobile : forcé visible <1100px (spécificité boostée pour
   battre toute règle Elementor qui voudrait le masquer) */
@media (max-width: 1100px) {
  header.elementor-location-header .es-burger,
  header.elementor-location-header button.es-burger,
  header.elementor-location-header .es-icon-btn.es-burger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    margin-left: 4px !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
  }
  header.elementor-location-header .es-burger svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    color: inherit !important;
    display: block !important;
  }
}
.es-stickyhead { z-index: 100; transition: background 0.3s ease; }

.es-topbar { background: var(--es-ink); color: #fff; font-size: 12px; display: flex; align-items: center; height: 36px; }
.es-topbar__marquee { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.es-topbar__track { display: flex; gap: 0; white-space: nowrap; width: max-content; animation: marquee 38s linear infinite; }
.es-topbar__track span { padding: 0 28px; opacity: 0.88; letter-spacing: 0.02em; position: relative; }
.es-topbar__track span::before { content: '·'; position: absolute; left: -4px; opacity: 0.45; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.es-topbar__pro { padding: 0 24px; background: var(--es-cacao); height: 100%; display: flex; align-items: center; font-size: 12px; font-weight: 500; color: #fff; letter-spacing: 0.02em; flex-shrink: 0; transition: background 0.2s; }
.es-topbar__pro:hover { background: var(--es-cacao-dark); }

.es-header { background: transparent; color: #fff; border-bottom: 1px solid transparent; position: relative; transition: background 0.3s ease, color 0.3s ease, border-bottom-color 0.3s ease; }
.es-stickyhead.scrolled .es-header { background: var(--es-bg); color: var(--es-ink); border-bottom-color: var(--es-line); }
/* Pages SANS hero image (toutes sauf la home) : header opaque cream par défaut
   (sinon le texte blanc menu est invisible sur fond cream) */
body:not(.home) .es-stickyhead .es-header { background: var(--es-bg); color: var(--es-ink); border-bottom-color: var(--es-line); }
body:not(.home) .es-stickyhead .es-logo__img { filter: none; }
body:not(.home) .es-stickyhead .es-quizbar { background: var(--es-cacao); pointer-events: auto; }
body:not(.home) .es-stickyhead .es-quizbar > * { opacity: 1; }
body:not(.home) .es-stickyhead .es-search input { background: #fff; border-color: var(--es-line); color: var(--es-ink); }
body:not(.home) .es-stickyhead .es-search input::placeholder { color: var(--es-gray-2); }
.es-header__inner { display: flex; align-items: center; max-width: 1320px; margin: 0 auto; padding: 18px 40px; gap: 40px; }
.es-logo { display: flex; align-items: center; color: var(--es-ink); flex-shrink: 0; transition: opacity 0.2s; }
.es-logo:hover { opacity: 0.7; }
/* SVG inline n'a pas de width/height — on calcule depuis viewBox 441.3:60.95
   pour height 22px → width ≈ 159px. Forcé explicitement pour fiabilité cross-browser. */
.es-logo__img { height: 22px; width: 159px; display: block; object-fit: contain; filter: brightness(0) invert(1); transition: filter 0.3s ease; }
.es-stickyhead.scrolled .es-logo__img { filter: none; }
/* Drawer mobile : logo wordmark-noir.png en noir sur fond cream (PAS de filter
   d'inversion comme dans le header transparent) */
.es-drawer .es-logo__img,
header.elementor-location-header .es-drawer .es-logo__img {
  filter: none !important;
}
.es-logo__svg { height: 22px; width: auto; fill: currentColor; display: block; }
.es-nav { display: flex; gap: 22px; flex: 0 0 auto; align-items: center; }
.es-nav > a, .es-nav__mega-trigger { font-size: 14px; font-weight: 400; color: inherit; position: relative; padding: 4px 0; background: transparent; border: 0; font-family: inherit; cursor: pointer; }
.es-nav > a::after, .es-nav__mega-trigger::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.es-nav > a:hover::after, .es-nav__mega-trigger:hover::after, .es-nav__item-mega:hover .es-nav__mega-trigger::after { transform: scaleX(1); }

/* MEGA MENU */
.es-nav__item-mega { position: static; }
.es-mega { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--es-line); border-bottom: 1px solid var(--es-line); box-shadow: 0 24px 40px rgba(0,0,0,0.06); padding: 40px 0; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 99; }
.es-mega.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.es-nav__item-mega:hover .es-mega { opacity: 1; pointer-events: auto; transform: translateY(0); }
.es-mega__inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: 56px; align-items: start; }
.es-mega__col h6 { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--es-ink); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--es-line); }
.es-mega__col ul { list-style: none; }
.es-mega__col li { margin-bottom: 10px; }
.es-mega__col a { font-size: 14px; color: var(--es-gray); transition: color 0.2s; }
.es-mega__col a:hover { color: var(--es-cacao); }
.es-mega__col a.es-mega__shop-all { color: var(--es-cacao); font-weight: 500; }
.es-mega__col-collections ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 14px 24px; }
.es-mega__col-collections ul a { display: flex; align-items: center; gap: 12px; }
.es-mega__col-collections .es-mega__thumb { width: 56px; height: 56px; background-size: cover; background-position: center; background-color: var(--es-bg-chip); flex-shrink: 0; }
.es-mega__showcase { display: block; }
.es-mega__showcase-img { aspect-ratio: 1/1; background-size: cover; background-position: center; background-color: var(--es-bg-chip); margin-bottom: 14px; }
.es-mega__showcase-label { font-family: 'Fraunces', serif; font-size: 22px; line-height: 1.1; margin-bottom: 6px; color: var(--es-ink); }
.es-mega__showcase-link { font-size: 13px; color: var(--es-ink); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
@media (max-width: 1100px) { .es-mega { display: none; } }
.es-search { flex: 1; max-width: 260px; position: relative; margin-left: auto; }
.es-search input { width: 100%; padding: 10px 14px 10px 38px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35); border-radius: 0; font-family: inherit; font-size: 13px; color: #fff; outline: none; transition: all 0.3s ease; }
.es-search input::placeholder { color: rgba(255,255,255,0.75); }
.es-search input:focus { border-color: #fff; }
.es-stickyhead.scrolled .es-search input { background: #fff; border-color: var(--es-line); color: var(--es-ink); }
.es-stickyhead.scrolled .es-search input::placeholder { color: var(--es-gray-2); }
/* Méga-menu ouvert (Parfums d'ambiance / Diffuseurs) → header opaque pour FUSIONNER avec le panneau
   blanc du dropdown (demande Nabila 2026-07-24). Se déclenche UNIQUEMENT sur les items méga (:has),
   pas au survol générique du header. */
.es-stickyhead:has(.es-nav__item-mega:hover) .es-header { background: var(--es-bg); color: var(--es-ink); border-bottom-color: var(--es-line); }
.es-stickyhead:has(.es-nav__item-mega:hover) .es-logo__img { filter: none; }
.es-stickyhead:has(.es-nav__item-mega:hover) .es-search input { background: #fff; border-color: var(--es-line); color: var(--es-ink); }
.es-stickyhead:has(.es-nav__item-mega:hover) .es-search input::placeholder { color: var(--es-gray-2); }
.es-stickyhead:has(.es-nav__item-mega:hover) .es-nav > a.menu-item-quiz { color: var(--es-cacao) !important; }
.es-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: currentColor; opacity: 0.85; }
.es-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-left: 16px; }
.es-icon-btn { background: transparent; border: 0; padding: 8px; display: flex; align-items: center; color: inherit; position: relative; transition: opacity 0.2s; }
.es-icon-btn:hover { opacity: 0.7; }
.es-icon-btn svg { width: 22px; height: 22px; }
.es-cart-count { position: absolute; top: 2px; right: 2px; background: var(--es-ink); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 9px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.es-burger { display: none; margin-left: 8px; }

/* Quizbar : invisible au load, apparaît au scroll (cacao) */
.es-quizbar { background: transparent; padding: 10px 40px; text-align: center; font-size: 13px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; transition: background 0.3s ease; pointer-events: none; }
.es-quizbar > * { opacity: 0; transition: opacity 0.25s ease; }
.es-stickyhead.scrolled .es-quizbar { background: var(--es-cacao); pointer-events: auto; }
.es-stickyhead.scrolled .es-quizbar > * { opacity: 1; transition-delay: 0.1s; }
.es-quizbar__text-mobile { display: none; }
.es-quizbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; flex-shrink: 0; transition: opacity 0.2s; }
.es-quizbar a:hover { opacity: 0.8; }

@media (max-width: 1100px) { .es-nav { display: none; } .es-search { max-width: 100%; margin-left: 0; } .es-burger { display: inline-flex; align-items: center; } }
@media (max-width: 700px) {
  .es-search { display: none; }
  .es-header__inner { padding: 14px 16px; gap: 0; }
  .es-header__actions { padding-left: 16px; margin-left: auto; gap: 4px; }
  .es-logo__svg, .es-logo__img { height: 18px; }
  .es-icon-btn { padding: 6px; }
  .es-icon-btn svg { width: 20px; height: 20px; }
  .es-quizbar { font-size: 11px; padding: 9px 12px; gap: 8px; }
  .es-quizbar__text-desktop { display: none; }
  .es-quizbar__text-mobile { display: inline; }
  .es-topbar__pro { padding: 0 12px; font-size: 11px; }
  .es-topbar { height: 32px; font-size: 11px; }
}

/* DRAWER MOBILE */
.es-drawer { position: fixed; inset: 0; background: var(--es-bg); z-index: 200; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; visibility: hidden; }
.es-drawer.open { transform: translateX(0); visibility: visible; }
.es-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--es-line); }
.es-drawer__close { background: transparent; border: 0; padding: 6px; color: var(--es-ink); display: flex; align-items: center; }
.es-drawer__close svg { width: 24px; height: 24px; }
.es-drawer__body { flex: 1; overflow-y: auto; padding: 24px 20px; }
.es-drawer__search { margin-bottom: 28px; position: relative; }
.es-drawer__search input { width: 100%; padding: 14px 14px 14px 44px; background: #fff; border: 1px solid var(--es-line); border-radius: 0; font-family: inherit; font-size: 14px; outline: none; }
.es-drawer__search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--es-gray); }
.es-drawer__nav { display: flex; flex-direction: column; }
.es-drawer__nav > a, .es-drawer__nav__accordion-trigger { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 400; letter-spacing: -0.015em; color: var(--es-ink); padding: 14px 0; border-bottom: 1px solid var(--es-line); display: flex; align-items: center; justify-content: space-between; background: transparent; border-top: 0; border-left: 0; border-right: 0; width: 100%; text-align: left; cursor: pointer; }
.es-drawer__nav > a::after, .es-drawer__nav__accordion-trigger::after { content: '→'; font-family: 'Inter', sans-serif; font-size: 18px; opacity: 0.5; transition: transform 0.3s; }
.es-drawer__nav__accordion-trigger[aria-expanded="true"]::after { transform: rotate(90deg); opacity: 1; }
.es-drawer__nav__accordion-body { display: none; padding: 16px 0 20px; border-bottom: 1px solid var(--es-line); }
.es-drawer__nav__accordion-body.open { display: block; }
.es-drawer__nav__quicklinks { display: flex; flex-direction: column; margin-bottom: 16px; }
.es-drawer__nav__quicklinks a { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--es-gray); padding: 8px 0; }
.es-drawer__nav__quicklinks a.cacao { color: var(--es-cacao); font-weight: 500; }
.es-drawer__nav__collections { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.es-drawer__nav__col-card { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--es-bg-chip); }
.es-drawer__nav__col-card-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.es-drawer__nav__col-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.6)); display: flex; align-items: flex-end; padding: 10px 12px; }
.es-drawer__nav__col-card-label { font-family: 'Fraunces', serif; font-size: 16px; color: #fff; line-height: 1; }
.es-drawer__bestseller { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--es-line); }
.es-drawer__bestseller-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--es-bg-alt); transition: background 0.2s; }
.es-drawer__bestseller-card:hover { background: var(--es-bg-chip); }
.es-drawer__bestseller-img { width: 80px; height: 80px; background-size: cover; background-position: center; background-color: #fff; flex-shrink: 0; }
.es-drawer__bestseller-info { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.es-drawer__bestseller-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--es-cacao); }
.es-drawer__bestseller-name { font-family: 'Fraunces', serif; font-size: 22px; line-height: 1; color: var(--es-ink); margin-bottom: 2px; }
.es-drawer__bestseller-link { font-size: 12px; color: var(--es-ink); text-decoration: underline; text-underline-offset: 3px; }
.es-drawer__footer { padding: 20px; border-top: 1px solid var(--es-line); display: flex; flex-direction: column; gap: 6px; }
.es-drawer__footer a { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--es-ink); padding: 10px 0; }
.es-drawer__footer a svg { width: 20px; height: 20px; }

/* --- Drawers · menu mobile B2C et Espace Pro --------------------------------
   Les deux menus mobiles avaient chacun leur feuille : le B2C ici, le pro en
   <style> inline dans espace-pro.html. Ils avaient divergé — 24 px contre 22 px,
   filet sous l'entrée contre filet au-dessus, panneau plein écran contre volet
   de 360 px, flèche présente d'un côté seulement. Le pro reprend maintenant la
   peau du B2C, qui fait référence : une seule source pour les deux.

   Les sélecteurs .es-prodrawer__* ne sont que des alias de structure :
     __panel = conteneur   ·   __top = en-tête   ·   __nav = corps   ·   __foot = pied
   ------------------------------------------------------------------------- */
.es-prodrawer { position: fixed; inset: 0; background: var(--es-bg); z-index: 2000; opacity: 1; visibility: hidden; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; }
.es-prodrawer.open { transform: translateX(0); visibility: visible; }
.es-prodrawer__panel { position: static; width: 100%; height: 100%; padding: 0; background: transparent; transform: none; overflow: hidden; display: flex; flex-direction: column; }

/* En-tête : même gabarit que .es-drawer__header */
.es-prodrawer__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; margin-bottom: 0; border-bottom: 1px solid var(--es-line); flex-shrink: 0; }
.es-prodrawer__brand { font-family: 'Fraunces', serif; font-size: 22px; letter-spacing: -0.01em; color: var(--es-ink); }
.es-prodrawer__close { background: transparent; border: 0; padding: 6px; color: var(--es-ink); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; }

/* Corps : même respiration que .es-drawer__body, et entrées au gabarit .es-drawer__nav > a */
.es-prodrawer__nav { flex: 1; overflow-y: auto; padding: 24px 20px; display: flex; flex-direction: column; }
.es-prodrawer__nav a { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 400; letter-spacing: -0.015em; color: var(--es-ink); text-decoration: none; padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--es-line); display: flex; align-items: center; justify-content: space-between; }
/* La flèche du B2C, ajoutée ici — sauf sur les entrées qui écrivent déjà la leur
   dans leur libellé (« Boutique Pro → », « Réserver un diagnostic → »). */
.es-prodrawer__nav a:not(.es-prodrawer__cta)::after { content: '→'; font-family: 'Inter', sans-serif; font-size: 18px; opacity: 0.5; transition: transform 0.25s ease, opacity 0.25s ease; }
.es-prodrawer__nav a.es-prodrawer__cta { color: var(--es-cacao); }

/* Pied : même gabarit que .es-drawer__footer */
.es-prodrawer__foot { margin-top: auto; padding: 20px; border-top: 1px solid var(--es-line); display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.es-prodrawer__account { font-family: 'Inter', -apple-system, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--es-ink); background: none; border: 1px solid var(--es-line); padding: 12px 14px; text-align: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }

@media (hover: hover) {
  .es-prodrawer__nav a:hover { color: var(--es-cacao); }
  .es-prodrawer__nav a:not(.es-prodrawer__cta):hover::after { transform: translateX(4px); opacity: 1; }
  .es-prodrawer__account:hover { border-color: var(--es-cacao); color: var(--es-cacao); }
}
.es-prodrawer__nav a:focus-visible,
.es-prodrawer__account:focus-visible { color: var(--es-cacao); outline: 2px solid var(--es-cacao); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .es-prodrawer,
  .es-prodrawer__nav a::after { transition: none; }
}

/* --- Survol du menu ---------------------------------------------------------
   Le reset plus haut neutralise volontairement les couleurs de lien d'Elementor
   (.es-drawer a:hover { color: inherit !important }), ce qui laissait le menu sans
   aucun retour visuel. On redonne ici un survol explicite.

   Règle du jeu : il ne touche QUE la couleur et la flèche. Jamais la police, le
   corps, la graisse ni l'interlignage — sinon les mots se déforment et la ligne
   se recompose sous le curseur. C'était le défaut d'origine : le kit Elementor
   liait la typographie de survol des liens à la globale « Accent » (Cormorant
   italique 1.25 rem), corrigé à la source par _es-tools/fix-link-hover-typography.php.

   Le survol n'existe pas au doigt : on le limite aux appareils qui pointent, pour
   qu'un tap sur mobile ne laisse pas une entrée colorée derrière lui. */
.es-drawer .es-drawer__nav > a,
.es-drawer .es-drawer__nav__accordion-trigger,
.es-drawer .es-drawer__footer a {
  transition: color 0.2s ease;
}
.es-drawer .es-drawer__nav > a::after,
.es-drawer .es-drawer__nav__accordion-trigger::after {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (hover: hover) {
  .es-drawer .es-drawer__nav > a:hover,
  .es-drawer .es-drawer__nav__accordion-trigger:hover,
  .es-drawer .es-drawer__footer a:hover {
    color: var(--es-cacao) !important;
  }
  /* La flèche avance : repère de survol qui ne décale pas le texte.
     Réservé aux liens simples — sur les accordéons, ::after porte déjà la
     rotation de l'état ouvert, qu'on ne veut pas écraser. */
  .es-drawer .es-drawer__nav > a:hover::after {
    transform: translateX(4px);
    opacity: 1;
  }
}

/* Au clavier, même traitement que le survol : l'entrée focalisée doit se voir. */
.es-drawer .es-drawer__nav > a:focus-visible,
.es-drawer .es-drawer__nav__accordion-trigger:focus-visible,
.es-drawer .es-drawer__footer a:focus-visible {
  color: var(--es-cacao) !important;
  outline: 2px solid var(--es-cacao) !important;
  outline-offset: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  .es-drawer .es-drawer__nav > a,
  .es-drawer .es-drawer__nav__accordion-trigger,
  .es-drawer .es-drawer__footer a,
  .es-drawer .es-drawer__nav > a::after,
  .es-drawer .es-drawer__nav__accordion-trigger::after {
    transition: none;
  }
}

/* =============== 1. HERO =============== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--es-ink);
  /* Full bleed dans Elementor même si la section parente est contrainte */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Mockup v7.6 : pull-up sous le header sticky transparent (header ~130px) */
  margin-top: -130px;
}
.hero__bg { position: absolute; inset: 0; z-index: 1; background: url('/wp-content/themes/essentia-scent/mockup-assets/hero-banner/hero-banner.png') center/cover no-repeat, var(--es-ink); filter: brightness(0.92); }
.hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%); pointer-events: none; }
.hero__inner { position: relative; z-index: 3; padding: 160px 40px 100px; width: 100%; max-width: 1320px; margin: 0 auto; color: #fff; }
/* Override couleurs et fonts — texte hero toujours blanc en Fraunces/Inter */
.hero h1,
.hero h1 em,
.hero .hero__sub,
.hero .hero__cta .text-link,
.hero .hero__cta a:not(.btn) {
  color: #fff;
}
.hero h1,
.hero h1 em {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  font-feature-settings: "ss01", "ss02", "swsh" 1, "salt" 1;
  font-optical-sizing: auto;
  font-size: clamp(72px, 9vw, 144px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.hero h1 em {
  font-weight: 300;
  font-style: italic;
  font-feature-settings: "ss01", "ss02", "swsh" 2, "salt" 1, "calt" 1;
}
.hero h1 { max-width: 1100px; margin: 0; font-style: normal; }
.hero h1 br { display: none; }
@media (max-width: 768px) { .hero h1 br { display: block; } }
/* Eyebrow hero : JetBrains Mono blanc, cohérent avec NOS COLLECTIONS / COMMENT ÇA MARCHE / etc. */
.hero .hero__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
  margin: 0 0 20px;
  line-height: 1;
  text-shadow: 0 1px 14px rgba(0,0,0,0.4);
}
.hero .hero__sub {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  max-width: 540px;
  margin: 24px 0 36px;
  text-shadow: 0 1px 16px rgba(0,0,0,0.5);
}
.hero__cta { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.hero .hero__cta .btn,
.hero .hero__cta .text-link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* Bouton principal : subtle lift + shadow (style Aesop minimal) */
.hero .hero__cta .btn-light {
  background: #fff;
  color: var(--es-ink);
  border: 1px solid #fff;
  padding: 16px 32px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero .hero__cta .btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* Lien secondaire : underline animée + flèche qui glisse */
.hero .hero__cta .text-link {
  position: relative;
  color: #fff;
  text-decoration: none;
  padding: 12px 2px;
  font-size: 14px;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
}
.hero .hero__cta .text-link::before {
  content: '';
  position: absolute;
  left: 2px;
  right: 22px;
  bottom: 8px;
  height: 1px;
  background: #fff;
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero .hero__cta .text-link:hover {
  color: #fff;
}
.hero .hero__cta .text-link:hover::before {
  animation: es-link-wipe 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes es-link-wipe {
  0%   { transform: scaleX(1); transform-origin: right center; }
  50%  { transform: scaleX(0); transform-origin: right center; }
  51%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}
@media (max-width: 900px) {
  .hero .hero__inner,
  section.hero .hero__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (max-width: 700px) {
  .hero .hero__inner,
  section.hero .hero__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 480px) {
  .hero .hero__inner,
  section.hero .hero__inner {
    padding: 130px 20px 72px !important;
  }
  .hero {
    min-height: 80vh;
  }
}

/* =============== 2. VALEURS =============== */
.values { padding: 32px 0; background: var(--es-bg); border-bottom: 1px solid var(--es-line); }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.values__item { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 28px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--es-ink); text-align: left; line-height: 1.3; transition: transform 0.3s ease; }
.values__item + .values__item { border-left: 1px solid var(--es-line); }
.values__item:hover { transform: translateY(-1px); }
.values__icon { flex-shrink: 0; width: 32px; height: 32px; color: var(--es-cacao); transition: color 0.3s ease; }
.values__item:hover .values__icon { color: var(--es-ink); }
.values__strong { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--es-ink); margin-bottom: 3px; }
.values__weak { display: block; font-size: 12px; color: var(--es-gray); font-weight: 400; }
@media (max-width: 900px) {
  .values__grid { grid-template-columns: 1fr; gap: 4px; padding: 0 8px; }
  .values__item { justify-content: flex-start; max-width: 360px; margin: 0 auto; width: 100%; padding: 6px 0; }
  .values__item + .values__item { border-left: 0; border-top: 1px solid var(--es-line); padding-top: 12px; margin-top: 6px; }
}
@media (max-width: 480px) {
  .values__icon { width: 28px; height: 28px; }
  .values__strong { font-size: 11px; }
  .values__weak { font-size: 11px; }
}

/* === Overrides Elementor pour .values : force font-style normal sur la section
       entière (battre l'héritage accent italic Cormorant Garamond) === */
.values,
.values * {
  font-style: normal !important;
}
.values {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.values .values__strong {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.13em !important;
  color: var(--es-ink) !important;
}
.values .values__weak {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--es-gray) !important;
}

/* =============== 3. COMMENT ÇA MARCHE =============== */
.howto { padding: 80px 0; background: var(--es-bg-alt); text-align: center; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.howto__head { max-width: 720px; margin: 0 auto 40px; }
.howto__head .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--es-gray); margin-bottom: 16px; font-style: normal; font-weight: 400; }
.howto__head h2 {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-feature-settings: "ss01", "swsh" 1;
  font-optical-sizing: auto;
  font-size: clamp(44px, 5vw, 72px);
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--es-ink);
  margin-bottom: 12px;
  text-transform: none;
}
.howto__head h2 em { font-style: italic; font-feature-settings: "ss01", "swsh" 2, "calt" 1; }
.howto__head p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  line-height: 1.65;
  color: var(--es-gray);
  text-transform: none;
}
/* Tagline howto : italique Fraunces gris, cohérent avec diffusers__tagline */
.howto .howto__head .howto__tagline,
.howto .howto__head p.howto__tagline {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.45 !important;
  color: var(--es-gray) !important;
  margin: 14px auto 0 !important;
  max-width: 540px !important;
  letter-spacing: -0.005em !important;
}
.howto__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.howto__step { position: relative; cursor: default; width: 100%; }
.howto__step__card { position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden; background: var(--es-bg-chip); display: block; }
.howto__step__visual { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s ease; }
.howto__step:hover .howto__step__visual { transform: scale(1.04); }
.howto__step__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 30%, transparent 45%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85) 100%); pointer-events: none; z-index: 1; }
.howto__step__desc { display: none; }
.howto__step__big-num {
  position: absolute; top: 24px; left: 28px; z-index: 2;
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-feature-settings: "ss01", "ss02", "swsh" 1, "salt" 1;
  font-optical-sizing: auto;
  font-size: clamp(36px, 3.6vw, 60px);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  text-transform: none;
}
.howto__step__caption { position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2; color: #fff; text-align: left; }
.howto__step__caption h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
  color: #fff;
  text-transform: none;
}
.howto__step__caption p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  max-width: 100%;
  margin: 0;
  text-wrap: pretty;
  text-transform: none;
}
/* Bouton primary du Comment ça marche : couvert par le bloc unifié body a.btn.btn-primary
   en fin de fichier (cf. UNIFICATION DES BOUTONS PRIMARY NOIRS). */
@media (max-width: 900px) {
  .howto { padding: 56px 0; }
  .howto__head { margin-bottom: 28px; padding: 0 16px; }
  .howto__steps { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; padding: 0 12px; }
  .howto__step__card { aspect-ratio: 3/4; }
  .howto__step__big-num { font-size: 22px; top: 10px; left: 12px; }
  .howto__step__caption { bottom: 10px; left: 10px; right: 10px; }
  .howto__step__caption h3 { font-size: 16px; margin-bottom: 0; line-height: 1; }
  /* La description interne (overlay sur image) est masquée en mobile */
  .howto__step__caption p { display: none; }
  /* La description externe (sous la card) apparaît en mobile */
  .howto__step__desc {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 11px;
    line-height: 1.4;
    color: var(--es-gray);
    margin-top: 10px;
    padding: 0 4px;
    text-align: left;
    text-transform: none;
  }
}
@media (max-width: 480px) {
  .howto__steps { gap: 6px; padding: 0 10px; }
  .howto__step__big-num { font-size: 18px; top: 8px; left: 8px; }
  .howto__step__caption { bottom: 8px; left: 8px; right: 8px; }
  .howto__step__caption h3 { font-size: 13px; }
  .howto__step__desc { font-size: 10px; margin-top: 8px; padding: 0 2px; }
}

/* =============== 4. BESTSELLER =============== */
.bestseller { padding: 80px 0; }
.bestseller__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.bestseller__visual { position: relative; }
.bestseller__img {
  aspect-ratio: 4/5;
  background-color: var(--es-bg-chip);
  background-image: url('/wp-content/themes/essentia-scent/mockup-assets/senteur/santal-musque-30ml.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease, background-image 0.3s ease;
}
.bestseller__visual:hover .bestseller__img { transform: scale(1.02); }
/* Badge bestseller : strictement aligné sur les labels diffuseurs (.label-soldout)
   Position INSIDE l'image (top-left), même padding, même typo, même proportion d'étoile */
.bestseller__badge { position: absolute; top: 12px; left: 12px; background: var(--es-bg-chip); color: var(--es-cacao); padding: 6px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; line-height: 1; z-index: 2; border-radius: 0; }
.bestseller__badge::before { content: '★'; margin-right: 6px; color: var(--es-cacao); font-size: 1em; line-height: 1; }
.bestseller__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bestseller__rating-stars { color: var(--es-cacao); letter-spacing: 3px; font-size: 13px; }
.bestseller__rating-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--es-gray); letter-spacing: 0.05em; }
.bestseller h2 { font-size: clamp(44px, 5vw, 72px); margin-bottom: 14px; line-height: 1; }
.bestseller__desc { font-size: 15px; line-height: 1.65; margin-bottom: 28px; max-width: 480px; }
.bestseller__notes-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--es-gray); margin-bottom: 10px; }
.bestseller__notes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
/* Pyramide olfactive : 3 colonnes côte à côte, chacune label mono + chip cream */
.bestseller__pyramid { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; }
.bestseller__pyramid-row { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.bestseller__pyramid-level { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--es-gray); }
/* .note-tag = label statique informationnel (pyramide olfactive), pas un bouton.
   Le note-tag contient le nom de la note (Inter normal) et un <small> avec le niveau (mono uppercase).
   flex-direction: column-reverse pour afficher le niveau AU-DESSUS du nom de la note. */
.note-tag { display: inline-flex; flex-direction: column-reverse; align-items: flex-start; gap: 2px; padding: 8px 14px; background: var(--es-bg-chip); color: var(--es-ink); font-size: 13px; font-weight: 400; cursor: default; line-height: 1.2; }
.note-tag:hover { background: var(--es-bg-chip); }
.note-tag__level { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--es-gray); line-height: 1; }
.size-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
.size-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--es-line); cursor: pointer; transition: all 0.2s; }
.size-option:hover { border-color: var(--es-cacao); }
/* Pack Échantillons : « Les 6 collections » = option premium, pleine largeur (2 colonnes) + fond crème pour la mettre en évidence. */
.product-pdp .bestseller--pdp .size-picker .size-option[data-size-slug="6-collections"] { grid-column: 1 / -1; background: #F4EFE6; }
.size-option.active { border-color: var(--es-ink); border-width: 2px; padding: 11px 13px; }
.size-option .radio { width: 14px; height: 14px; border: 1.5px solid var(--es-ink); border-radius: 50%; flex-shrink: 0; position: relative; }
.size-option.active .radio::after { content: ''; position: absolute; inset: 3px; background: var(--es-ink); border-radius: 50%; }
/* Badge ★ Le plus vendu : petit pill cream/cacao en haut à droite du format bestseller */
.size-option--bestseller { position: relative; }
.size-option--bestseller::before {
  content: '★ LE PLUS VENDU';
  position: absolute;
  top: -8px;
  right: -6px;
  background: var(--es-bg-chip);
  color: var(--es-cacao);
  padding: 3px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}
.size-option__label { flex: 1; font-size: 13px; font-weight: 500; display: flex; flex-direction: column; line-height: 1.2; }
.size-option__label small { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400; color: var(--es-gray); margin-top: 2px; }
/* Prix chip — pattern strict pour TOUTES les cards : Fraunces serif 13px 500 ink, contraste typo avec le label Inter. Le prix RESSORT. */
.size-option__price { font-family: 'Fraunces', 'Times New Roman', serif; font-size: 13px; font-weight: 500; color: var(--es-ink); }
/* Prix au ml (fiche produit) — repère d'économie sobre, empilé sous le prix, aligné à droite */
.size-option__pricecol { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; line-height: 1.15; }
.size-option__perml { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400; color: var(--es-gray); letter-spacing: 0; margin-top: 2px; white-space: nowrap; }
@media (max-width: 480px) { .size-option__perml { font-size: 9px; } }
.qty-and-cart { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.qty-picker { display: flex; align-items: center; background: #fff; border: 1px solid var(--es-line); height: 46px; }
.qty-picker button { width: 38px; height: 100%; background: transparent; border: 0; font-size: 16px; color: var(--es-ink); transition: background 0.2s; -webkit-appearance: none; appearance: none; }
.qty-picker button:hover { background: var(--es-bg-alt); color: var(--es-ink); }
/* Fix le rose/magenta hérité de defaults browser/Woo sur focus & active */
.qty-picker button:focus,
.qty-picker button:focus-visible,
.qty-picker button:active { background: var(--es-bg-alt) !important; color: var(--es-ink) !important; outline: none !important; box-shadow: none !important; }
.qty-picker input { width: 36px; text-align: center; border: 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; background: transparent; outline: none; }
.qty-and-cart .btn { height: 46px; flex: 1; min-width: 180px; padding: 0 24px; }
/* Pattern canonique des __secondary : Inter 13px / ink / underline 3px offset / hover cacao.
   Aligné sur .odorkiller__secondary, .b2b__secondary. */
.bestseller__secondary { font-size: 13px; color: var(--es-ink); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.bestseller__secondary:hover { color: var(--es-cacao); }
/* Rating cliquable : underline subtil au hover sur le nb d'avis */
.bestseller__rating a, .bestseller__rating a:visited { color: inherit; text-decoration: none; transition: color 0.2s; }
.bestseller__rating a:hover .bestseller__rating-text { color: var(--es-ink); }
.bestseller__rating-text { transition: color 0.2s; }
/* Bloc trust : 3 signaux de réassurance e-com sous le size-picker.
   Séparation : 1px border-top + padding pour ne pas surcharger visuellement. */
.bestseller__trust { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 4px 0 18px; padding: 14px 0 16px; border-top: 1px solid var(--es-line); }
.bestseller__trust-item { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--es-gray); line-height: 1; }
.bestseller__trust-item::before { content: "✓"; color: var(--es-cacao); font-size: 11px; line-height: 1; }
@media (max-width: 900px) {
  .bestseller__grid { grid-template-columns: 1fr; gap: 24px; }
  .bestseller { padding: 64px 0; }
  .bestseller__visual { max-width: 100%; margin: 0; }
  .bestseller__img { aspect-ratio: 1/1; width: 100%; margin: 0; }
  .bestseller__badge { top: 8px; left: 8px; padding: 5px 9px; font-size: 8px; letter-spacing: 0.16em; }
  .bestseller h2 { font-size: 44px; margin-bottom: 12px; }
  .bestseller__desc { font-size: 14px; margin-bottom: 16px; }
  .bestseller__notes { margin-bottom: 18px; }
  .size-picker { margin-bottom: 16px; }
}
@media (max-width: 480px) { .size-picker { grid-template-columns: 1fr 1fr; gap: 6px; } .size-option { padding: 10px 12px; } .size-option__label { font-size: 12px; } .size-option__price { font-size: 12px; } }

/* === Overrides Elementor pour bestseller (force Inter + couleurs correctes) === */
/* Badge "LE PLUS VENDU" : aligné sur le pattern .label-soldout des diffuseurs */
.bestseller .bestseller__badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  background: var(--es-bg-chip) !important;
  color: var(--es-cacao) !important;
  border-radius: 0 !important;
}
.bestseller .num-mono {
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
}
.bestseller h2,
.bestseller h2 em {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  font-optical-sizing: auto;
  color: var(--es-ink) !important;
  text-transform: none !important;
}
.bestseller h2 { font-style: normal !important; }
.bestseller h2 em { font-style: italic !important; font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important; }
.bestseller .bestseller__rating-stars { font-style: normal !important; }
.bestseller .bestseller__rating-text {
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
}
/* Le nombre d'avis « (344 avis) » est le seul élément en italique de la ligne.
   Il faut passer devant le font-style: normal !important ci-dessus, d'où la classe
   supplémentaire. La face italique de JetBrains Mono est bien chargée : c'est un
   vrai italique, pas un oblique synthétisé par le navigateur. */
.bestseller .bestseller__rating-text .bestseller__rating-count {
  font-style: italic !important;
}
.bestseller .bestseller__desc,
.bestseller .bestseller__desc p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--es-gray) !important;
  text-transform: none !important;
}
.bestseller .bestseller__notes-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  text-transform: uppercase !important;
}
.bestseller .note-tag {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
}
.bestseller .note-tag__level {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--es-gray) !important;
  font-size: 8px !important;
}
.bestseller .bestseller__pyramid-level {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--es-gray) !important;
}
.bestseller .size-option__label,
.bestseller .size-option__label small {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
}
.bestseller .size-option__label small {
  font-weight: 400 !important;
  color: var(--es-gray) !important;
}
.bestseller .size-option__price {
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: var(--es-ink) !important;
}

/* --- Odor Killer · sélecteur de pack en italique ----------------------------
   Choix assumé : aligner ces libellés et ces prix sur les bundles diffuseur, qui
   s'affichent en italique.

   À noter pour la suite : cet italique des bundles n'est pas déclaré, il est
   hérité. Le kit Elementor met le <body> en Cormorant Garamond italique 1.25rem
   (typographie globale « Accent »), et les règles des bundles fixent bien la
   police sans jamais remettre font-style. Odor Killer, lui, est dans .bestseller
   qui remet normal juste au-dessus — d'où l'écart entre les deux blocs. On le
   rattrape donc ici volontairement, à l'endroit du reset qu'on annule.

   Spécificité : les resets ci-dessus valent (0,2,0), on passe à (0,3,0).
   Les vraies faces italiques d'Inter et de Fraunces sont chargées par le site :
   ce n'est pas un oblique synthétisé. */
.bestseller.okh .size-option__label,
.bestseller.okh .size-option__label small,
.bestseller.okh .size-option__price,
.odor-killer-pdp .bestseller .size-option__label,
.odor-killer-pdp .bestseller .size-option__label small,
.odor-killer-pdp .bestseller .size-option__price,
.odor-killer-pdp .size-picker .size-option__label,
.odor-killer-pdp .size-picker .size-option__label small,
.odor-killer-pdp .size-picker .size-option__price {
  font-style: italic !important;
}
/* Couleur : le libellé prend le gris des bundles diffuseur. C'est le seul écart
   qui restait — le prix était déjà en --es-ink des deux côtés, on n'y touche pas. */
.bestseller.okh .size-option__label,
.odor-killer-pdp .bestseller .size-option__label,
.odor-killer-pdp .size-picker .size-option__label {
  color: var(--es-gray) !important;
}
.bestseller .qty-picker input,
.bestseller .qty-picker button {
  font-style: normal !important;
  color: var(--es-ink) !important;
}
/* Qty picker resserré */
.bestseller .qty-and-cart {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 18px !important;
  margin-bottom: 10px !important;
  flex-wrap: nowrap !important;
}
.bestseller .qty-picker {
  display: inline-flex !important;
  align-items: center !important;
  height: 50px !important;
  width: 120px !important;
  flex: 0 0 120px !important;
  background: #fff !important;
  border: 1px solid var(--es-line) !important;
}
.bestseller .qty-picker button {
  width: 38px !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--es-ink) !important;
  cursor: pointer !important;
}
.bestseller .qty-picker input {
  width: 44px !important;
  text-align: center !important;
  border: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  background: transparent !important;
  outline: none !important;
  color: var(--es-ink) !important;
}

/* Override LAYOUT uniquement (hauteur fixe 50px pour matcher le qty-picker à côté
   dans .qty-and-cart). Styles visuels couverts par body a.btn.btn-primary unifié. */
.bestseller a.btn-primary,
.bestseller .btn.btn-primary {
  height: 50px !important;
  flex: 1 1 auto !important;
  min-width: 220px !important;
  max-width: 360px !important;
  padding: 0 28px !important;
}
.bestseller .bestseller__secondary {
  display: inline-block !important;
  margin-top: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 13px !important;
  color: var(--es-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-transform: none !important;
}
.bestseller .bestseller__secondary:hover {
  color: var(--es-cacao) !important;
}
/* Bloc trust : 3 signaux sur UNE seule ligne sous le bouton "Ajouter au panier" */
.bestseller .bestseller__trust {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  margin: 14px 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
}
.bestseller .bestseller__trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1 !important;
}
.bestseller .bestseller__trust-item::before {
  content: "✓" !important;
  color: var(--es-cacao) !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
/* Mobile : reste sur UNE ligne, taille réduite (cohérent avec note-tag__level 8px), centrée */
@media (max-width: 720px) {
  .bestseller .bestseller__trust {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .bestseller .bestseller__trust::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
  .bestseller .bestseller__trust-item {
    font-size: 8px !important;
    letter-spacing: 0.16em !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  .bestseller .bestseller__trust-item::before {
    font-size: 9px !important;
  }
}
/* Rating cliquable : pas d'underline par défaut, hover passe le text en ink */
.bestseller .bestseller__rating a,
.bestseller a.bestseller__rating-link,
.bestseller a.bestseller__rating-link:visited {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: color 0.2s !important;
  cursor: pointer !important;
}
.bestseller a.bestseller__rating-link:hover .bestseller__rating-text {
  color: var(--es-ink) !important;
  text-decoration: none !important;
}

/* === Reset bas (spécificité 0,1,1) puis overrides explicites (spécificité 0,2,0) === */
.bestseller * {
  margin-top: 0 !important;
}
.bestseller p,
.bestseller h2,
.bestseller div {
  margin-bottom: 0 !important;
}
/* Overrides spécifiques — spécificité 0,2,0 > 0,1,1 du reset */
.bestseller .num-mono { margin: 0 0 16px !important; }
.bestseller h2 { margin: 0 0 14px !important; }
.bestseller .bestseller__rating { margin: 0 0 14px !important; }
.bestseller .bestseller__desc { margin: 0 0 20px !important; }
.bestseller .bestseller__notes-label { margin: 0 0 8px !important; display: block !important; }
.bestseller .bestseller__notes { margin: 0 0 20px !important; }
.bestseller .size-picker { margin: 0 0 16px !important; }
.bestseller .qty-and-cart { margin: 0 !important; }
.bestseller .bestseller__secondary { margin: 14px 0 0 !important; }

/* === Overrides Elementor pour .diffusers (cards compactes v2) === */
.diffusers .eyebrow,
.diffusers .diffusers__head .eyebrow,
.diffusers .diffusers__head p.eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  color: var(--es-gray) !important;
  margin: 0 0 16px !important;
  line-height: 1 !important;
}
.diffusers .diffusers__head h2,
.diffusers .diffusers__head h2 em {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  font-optical-sizing: auto;
  color: var(--es-ink) !important;
  text-transform: none !important;
}
.diffusers .diffusers__head h2 { font-style: normal !important; }
.diffusers .diffusers__head h2 em { font-style: italic !important; font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important; }
.diffusers .diffusers__head p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--es-gray) !important;
  text-transform: none !important;
}

/* Filtres text-only avec séparateur · entre boutons */
.diffusers .filter-btn,
.diffusers .filter-btn:focus,
.diffusers .filter-btn:focus-visible {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  color: var(--es-gray) !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: color 0.2s ease !important;
}
.diffusers .filter-btn:hover {
  background: transparent !important;
  color: var(--es-ink) !important;
}
.diffusers .filter-btn.active,
.diffusers .filter-btn.active:hover,
.diffusers .filter-btn.active:focus {
  background: transparent !important;
  color: var(--es-ink) !important;
  border: none !important;
  font-weight: 500 !important;
}

/* Body card : eyebrow + nom + desc + footer */
.diffusers .diff-card__eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  letter-spacing: 0.14em !important;
}
.diffusers .diff-card__name,
.diffusers .diff-card h3 {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}
.diffusers .diff-card__desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--es-gray) !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}
.diffusers .diff-card__price {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
  letter-spacing: 0.02em !important;
}
/* Trust global diffuseurs (sous le CTA) : override Elementor pour battre
   l'accent typography Cormorant italic. Aligné strict sur .bestseller__trust. */
.diffusers .diffusers__trust-item {
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1 !important;
}
.diffusers .diffusers__trust-item::before {
  font-style: normal !important;
  color: var(--es-cacao) !important;
}
.diffusers .diff-card__eyebrow {
  font-size: 10px !important;
  margin-bottom: 10px !important;
}
@media (max-width: 900px) {
  .diffusers .diff-card__name,
  .diffusers .diff-card h3 { font-size: 20px !important; line-height: 1.1 !important; }
  .diffusers .diff-card__price { font-size: 14px !important; }
}
@media (max-width: 480px) {
  .diffusers .diff-card__name,
  .diffusers .diff-card h3 { font-size: 18px !important; }
}
/* Card wrapper en <a> : pas de style de lien (pas d'underline ni couleur cacao) */
.diffusers a.diff-card,
.diffusers a.diff-card:hover,
.diffusers a.diff-card:focus,
.diffusers a.diff-card:visited,
.diffusers a.diff-card:active {
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: none !important;
  outline: none !important;
}

.diffusers .diff-card__cta,
.diffusers a.diff-card__cta,
.diffusers .diff-card__cta:focus,
.diffusers .diff-card__cta:focus-visible {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  color: var(--es-ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--es-ink) !important;
  border-radius: 0 !important;
  padding: 0 0 1px !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
.diffusers .diff-card__cta:hover,
.diffusers a.diff-card__cta:hover {
  color: var(--es-cacao) !important;
  border-bottom-color: var(--es-cacao) !important;
  background: transparent !important;
}

/* Labels Aesop : square, mono uppercase letter-spaced, palette cream/cacao */
.diffusers .label {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.diffusers .label-soldout {
  background: var(--es-bg-chip) !important;
  color: var(--es-cacao) !important;
}
.diffusers .label-stock-low {
  background: var(--es-cacao) !important;
  color: var(--es-bg-chip) !important;
}
.diffusers .label-new {
  background: var(--es-cacao) !important;
  color: #fff !important;
}

/* Bouton "Voir tous les diffuseurs" : couvert par le bloc unifié body a.btn.btn-primary
   en fin de fichier. */

/* === Polish niveau 1+2 : tagline éditoriale, text-link, colors, stock ===
   Spécificité boostée pour battre l'override Elementor .diffusers .diffusers__head p */
.diffusers .diffusers__head .diffusers__tagline,
.diffusers .diffusers__head p.diffusers__tagline {
	font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
	font-weight: 400 !important;
	font-style: italic !important;
	font-size: clamp(17px, 1.5vw, 21px) !important;
	line-height: 1.45 !important;
	color: var(--es-gray) !important;
	margin: 18px auto 0 !important;
	max-width: 540px !important;
	letter-spacing: -0.005em !important;
}

/* Bouton "Voir tous les diffuseurs →" : primary noir, cohérent avec les CTA du site */
.diffusers a.diffusers__seeall-link,
.diffusers a.diffusers__seeall-link:focus,
.diffusers a.diffusers__seeall-link:focus-visible {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px 32px !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-style: normal !important;
	font-variation-settings: normal !important;
	text-transform: none !important;
	letter-spacing: 0.02em !important;
	line-height: 1.2 !important;
	color: #fff !important;
	background: var(--es-ink) !important;
	border: 1px solid var(--es-ink) !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	outline: none !important;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
}
.diffusers a.diffusers__seeall-link:hover {
	background: #000 !important;
	color: #fff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
}

/* Astral pastilles couleurs : petits ronds après le nom */
.diff-card__colors { display: inline-flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.diff-card__colors .color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }


/* =============== 5. COLLECTIONS =============== */
.collections { padding: 80px 0; background: var(--es-bg-alt); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.collections__head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.collections__head h2 { font-size: clamp(44px, 5vw, 72px); margin-bottom: 12px; }
.collections__head p { font-size: 17px; line-height: 1.65; }
/* Tagline collections : italique Fraunces gris, cohérent avec diffusers & howto */
.collections .collections__head .collections__tagline,
.collections .collections__head p.collections__tagline {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.45 !important;
  color: var(--es-gray) !important;
  margin: 14px auto 0 !important;
  max-width: 540px !important;
  letter-spacing: -0.005em !important;
}
.collections__showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.collections__list { display: flex; flex-direction: column; }
.col-item { padding: 22px 0; border-bottom: 1px solid var(--es-line); cursor: pointer; transition: padding 0.3s ease; display: grid; grid-template-columns: 32px 1fr 24px; gap: 16px; align-items: center; }
.col-item__mini-img { display: none; }
.col-item:first-child { padding-top: 0; }
.col-item:last-child { border-bottom: 0; }
.col-item__num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--es-gray); transition: color 0.3s; }
.col-item__title { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1; letter-spacing: -0.015em; color: var(--es-ink); transition: color 0.3s; display: block; }
.col-item__desc { display: none; }
.col-item__arrow { font-size: 16px; color: var(--es-gray); opacity: 0; transition: all 0.3s; transform: translateX(-8px); }
.col-item:hover .col-item__num, .col-item.active .col-item__num { color: var(--es-cacao); }
.col-item:hover .col-item__title, .col-item.active .col-item__title { color: var(--es-cacao); }
.col-item:hover .col-item__arrow, .col-item.active .col-item__arrow { opacity: 1; transform: translateX(0); color: var(--es-cacao); }
.collections__image { position: relative; overflow: hidden; min-height: 0; max-height: none; height: 100%; background: var(--es-bg-chip); display: block; color: inherit; text-decoration: none; }
.collections__image:hover, .collections__image:focus { color: inherit; text-decoration: none; }
.collections__image-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 0.6s ease, transform 0.6s ease; opacity: 1; }
.collections__image:hover .collections__image-bg { transform: scale(1.03); }
.collections__image-bg.fading { opacity: 0; }
.collections__image-label { position: absolute; bottom: 28px; left: 28px; right: 28px; color: #fff; z-index: 2; }
.collections__image-label__num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; opacity: 0.95; margin-bottom: 6px; }
.collections__image-label__title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: -0.015em; margin-bottom: 8px; text-shadow: 0 1px 24px rgba(0,0,0,0.3); }
.collections__image-label__desc { font-size: 14px; line-height: 1.5; opacity: 0.95; max-width: 380px; text-shadow: 0 1px 16px rgba(0,0,0,0.4); }
.collections__image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.78) 100%); }
/* CTA "Trouver ma senteur →" aligné à gauche, sous la colonne de la liste (column 1
   du grid showcase). max-width contraint le bloc à la largeur de la column 1, et
   padding-left: 48px aligne avec les noms (32px col num + 16px gap du col-item). */
.collections__seeall { text-align: left; margin-top: 16px; padding-left: 48px; max-width: calc(50% - 24px); }
@media (max-width: 900px) {
  .collections__seeall { padding-left: 0; max-width: 100%; text-align: center; margin-top: 32px; }
}
/* CTA collections : underline cacao discret (pattern identique à /parfums "Voir tous les parfums").
   Override de .btn.btn-primary pour ce sélecteur spécifique uniquement.
   Spécificité renforcée (.collections + .collections__seeall + a.btn) pour battre le bloc
   unifié `body a.btn.btn-primary` ligne 3090 qui arrive APRÈS dans la cascade. */
body .collections .collections__seeall a.btn.btn-primary.collections__seeall-cta,
body .collections .collections__seeall a.btn.btn-primary.collections__seeall-cta:link,
body .collections .collections__seeall a.btn.btn-primary.collections__seeall-cta:visited,
.collections__seeall-cta,
body a.btn.collections__seeall-cta,
body a.btn.btn-primary.collections__seeall-cta {
  display: inline-block !important;
  padding: 8px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: var(--es-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
  text-decoration-color: var(--es-cacao) !important;
  text-decoration-thickness: 1px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: none !important;
  gap: 0 !important;
  transition: color 0.2s, text-decoration-thickness 0.2s !important;
}
body .collections .collections__seeall a.btn.btn-primary.collections__seeall-cta::after,
.collections__seeall-cta::after,
body a.btn.collections__seeall-cta::after,
body a.btn.btn-primary.collections__seeall-cta::after { display: none !important; content: none !important; }
body .collections .collections__seeall a.btn.btn-primary.collections__seeall-cta:hover,
body .collections .collections__seeall a.btn.btn-primary.collections__seeall-cta:focus,
body .collections .collections__seeall a.btn.btn-primary.collections__seeall-cta:active,
.collections__seeall-cta:hover,
body a.btn.collections__seeall-cta:hover,
body a.btn.btn-primary.collections__seeall-cta:hover {
  color: var(--es-cacao) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-decoration-thickness: 1.5px !important;
  transform: none !important;
}

/* === Overrides Elementor pour .collections (battre l'héritage accent italic) === */
.collections .eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  color: var(--es-gray) !important;
}
.collections .collections__head h2,
.collections .collections__head h2 em {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
}
.collections .collections__head h2 { font-style: normal !important; }
.collections .collections__head h2 em { font-style: italic !important; font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important; }
/* Items collection : noms en Fraunces droit, numéros en mono, desc en Inter */
.collections .col-item,
.collections a.col-item,
.collections a.col-item:hover,
.collections a.col-item:focus,
.collections a.col-item:visited {
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: none !important;
}
.collections .col-item__num {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}
.collections .col-item__title {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
  letter-spacing: -0.015em !important;
  transition: color 0.3s !important;
}
.collections .col-item:hover .col-item__title,
.collections .col-item.active .col-item__title {
  color: var(--es-cacao) !important;
}
.collections .col-item__desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--es-gray) !important;
}
.collections .col-item__arrow {
  font-style: normal !important;
}
/* Label sur l'image : même typo que les items */
.collections .collections__image-label__num {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
}
.collections .collections__image-label__title {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  text-transform: none !important;
  letter-spacing: -0.015em !important;
}
.collections .collections__image-label__desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
}
@media (max-width: 900px) {
  .collections { padding: 72px 0; }
  .collections__showcase { grid-template-columns: 1fr; gap: 0; }
  .collections__image { display: none; }
  .col-item { padding: 14px 0; grid-template-columns: 96px 28px 1fr 20px; gap: 16px; align-items: center; }
  .col-item__mini-img { display: block; width: 96px; height: 96px; background-size: cover; background-position: center; background-color: var(--es-bg-chip); flex-shrink: 0; }
  .col-item__title { font-size: 22px; display: block; }
  .col-item__desc { display: block; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45; color: var(--es-gray); margin-top: 4px; max-height: none; opacity: 1; overflow: visible; }
  .col-item__arrow { opacity: 1; transform: translateX(0); color: var(--es-gray); }
  .col-item:hover .col-item__title, .col-item.active .col-item__title { transform: translateX(0); }
}

/* =============== 6. DIFFUSEURS AVEC FILTRES =============== */
.diffusers { padding: 80px 0; }
.diffusers__head { text-align: center; max-width: 760px; margin: 0 auto 20px; }
.diffusers__head h2 { font-size: clamp(44px, 5vw, 72px); margin-bottom: 12px; }
.diffusers__head p { font-size: 17px; line-height: 1.65; }

/* Filtres text-only avec séparateurs · entre les boutons */
.diff-filters { display: flex; gap: 0; margin-bottom: 56px; justify-content: center; flex-wrap: wrap; align-items: center; }
.filter-btn { background: transparent; border: none; padding: 6px 22px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; color: var(--es-gray); white-space: nowrap; cursor: pointer; transition: color 0.2s; position: relative; }
.filter-btn:hover { color: var(--es-ink); }
.filter-btn.active { color: var(--es-ink); font-weight: 500; }
.filter-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 22px; right: 22px; height: 1px; background: var(--es-ink); }
.filter-btn + .filter-btn::before { content: '·'; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); color: var(--es-line); font-size: 16px; }

/* Grid : 3 colonnes desktop, gap aéré (32px Aesop spacing) */
.diffusers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin-bottom: 32px; }

/* Card compacte : image carrée + body lisible
   La card est un <a> qui pointe vers la fiche produit.
   On force display:block + color inherit + no underline pour que ça se comporte
   comme un bloc cliquable, pas comme un lien texte. */
.diff-card { background: transparent; position: relative; transition: transform 0.3s ease; display: block; color: inherit; text-decoration: none; cursor: pointer; }
.diff-card:hover, .diff-card:focus { color: inherit; text-decoration: none; }
.diff-card:hover { transform: translateY(-4px); }
.diff-card.hidden { display: none; }
.diff-card__img-wrap { position: relative; background: #fff; aspect-ratio: 5/4; overflow: hidden; border: 1px solid var(--es-line); transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.diff-card:hover .diff-card__img-wrap { box-shadow: 0 10px 28px rgba(26, 26, 26, 0.09); border-color: var(--es-cacao); }
.diff-card__img { width: 100%; height: 100%; background-size: 70% auto; background-position: center; background-repeat: no-repeat; transition: background-size 0.4s ease; }
.diff-card:hover .diff-card__img { background-size: 78% auto; }

/* Labels minimal Aesop : pas de pill arrondi, square + mono uppercase letter-spaced
   Posé en top-left, fond cream signature avec texte cacao */
.label { display: inline-flex; align-items: center; padding: 6px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; border-radius: 0; position: absolute; top: 12px; left: 12px; z-index: 2; line-height: 1; }
.label-soldout { background: var(--es-bg-chip); color: var(--es-cacao); }
.label-stock-low { background: var(--es-cacao); color: var(--es-bg-chip); }
.label-new { background: var(--es-cacao); color: #fff; }
.label-promo { background: var(--es-promo); color: #fff; }
.label-bestseller { background: var(--es-ink); color: #fff; }

/* Body : eyebrow m³, nom (Fraunces éditorial dominant), desc, footer prix + lien */
.diff-card__body { padding: 14px 2px 4px; text-align: left; }
.diff-card__eyebrow { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--es-gray); margin-bottom: 6px; }
.diff-card__eyebrow .unit { letter-spacing: 0; margin-left: -1px; }
.diff-card__name { font-family: 'Fraunces', serif; font-weight: 400; font-size: 26px; letter-spacing: -0.015em; margin-bottom: 4px; line-height: 1.1; color: var(--es-ink); }
.diff-card__desc { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; color: var(--es-gray); margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Trust global de la section diffuseurs — sous le CTA "Voir tous les diffuseurs",
   pattern identique au .bestseller__trust (gray + JetBrains Mono uppercase + ✓ cacao). */
.diffusers__trust { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 22px; margin: 22px auto 0; padding: 0; line-height: 1; }
.diffusers__trust-item { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--es-gray); line-height: 1; white-space: nowrap; }
.diffusers__trust-item::before { content: "✓"; font-size: 11px; color: var(--es-cacao); line-height: 1; }
.diff-card__footer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.diff-card__price { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; color: var(--es-ink); letter-spacing: 0.02em; }
.diff-card__cta { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--es-ink); text-decoration: none; border-bottom: 1px solid var(--es-ink); padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; white-space: nowrap; }
.diff-card__cta:hover { color: var(--es-cacao); border-color: var(--es-cacao); }

.diffusers__seeall { text-align: center; margin-top: 56px; }

/* Mobile : layout horizontal compact (image gauche, body droite)
   plus efficace que 2 colonnes quand on a 3 produits par filtre */
@media (max-width: 900px) {
  .diffusers { padding: 56px 0; }
  .diffusers__grid { grid-template-columns: 1fr; gap: 14px; }
  .diff-card { display: grid; grid-template-columns: 38% 1fr; gap: 14px; align-items: center; }
  .diff-card__img-wrap { aspect-ratio: 1; width: 100%; }
  .diff-card__img { background-size: 80% auto; }
  .label { top: 6px; left: 6px; padding: 3px 8px; font-size: 8px; letter-spacing: 0.12em; }
  .diff-card__body { padding: 4px 4px 4px 0; }
  .diff-card__eyebrow { margin-bottom: 4px; font-size: 9px; }
  .diff-card__name { font-size: 20px; margin-bottom: 2px; line-height: 1.1; }
  .diff-card__desc { font-size: 12px; line-height: 1.4; margin-bottom: 0; }
  .diff-card__footer { margin-top: 6px; }
  .diff-card__price { font-size: 14px; }
  /* Mobile : trust global plus compact, taille 8px (= bestseller__trust) +
     scroll horizontal invisible si overflow. Spécificité .diffusers .... pour
     battre l'override Elementor de la base à 10px. */
  .diffusers .diffusers__trust {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 12px !important;
    margin-top: 18px !important;
    padding: 0 16px !important;
  }
  .diffusers .diffusers__trust::-webkit-scrollbar { display: none !important; height: 0 !important; }
  .diffusers .diffusers__trust-item {
    font-size: 8px !important;
    letter-spacing: 0.1em !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
  }
  .diffusers .diffusers__trust-item::before { font-size: 9px !important; }
  .filter-btn { padding: 8px 14px; font-size: 13px; }
  .filter-btn.active::after { left: 14px; right: 14px; }
  .filter-btn + .filter-btn::before { display: none; }
  /* Scroll horizontal sans barre : un seul rang, swipe lateral */
  .diff-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    column-gap: 4px;
    row-gap: 0;
    margin-bottom: 32px;
    padding: 0 16px 4px;
    margin-left: -16px;
    margin-right: -16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .diff-filters::-webkit-scrollbar { display: none; height: 0; }
  .diff-filters .filter-btn { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }
}

@media (max-width: 480px) {
  .diff-card { grid-template-columns: 35% 1fr; gap: 12px; }
  .diff-card__name { font-size: 18px; }
  .diff-card__desc { font-size: 11px; }
}

/* =============== 7. QUICK VIEW =============== */
.quickview-demo { padding: 120px 0; background: var(--es-bg-alt); }
.quickview-demo__intro { text-align: center; margin-bottom: 48px; }
.quickview-demo__intro h2 { font-size: clamp(40px, 4vw, 52px); margin-bottom: 12px; }
.quickview-demo__intro p { font-size: 15px; max-width: 480px; margin: 0 auto; }
.qv-modal { background: #fff; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 24px 80px rgba(0,0,0,0.12); position: relative; overflow: hidden; }
.qv-modal__close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; background: rgba(255,255,255,0.92); border: 1px solid var(--es-line); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--es-ink); z-index: 5; cursor: pointer; transition: all 0.2s; }
.qv-modal__close:hover { background: var(--es-ink); color: #fff; }
.qv-modal__img { aspect-ratio: 1; background-size: cover; background-position: center; background-color: var(--es-bg-alt); transition: background-image 0.3s ease; }
.qv-modal__content { padding: 40px 40px 32px; overflow-y: auto; max-height: 600px; }
.qv-modal__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--es-gray); margin-bottom: 10px; }
.qv-modal h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 16px; }
.qv-modal__notes-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; }
.qv-modal__option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--es-line); margin-bottom: 6px; cursor: pointer; transition: all 0.2s; }
.qv-modal__option:hover { border-color: var(--es-cacao); }
.qv-modal__option.active { border-color: var(--es-ink); border-width: 2px; padding: 11px 13px; }
.qv-modal__option .radio { width: 16px; height: 16px; border: 1.5px solid var(--es-ink); border-radius: 50%; flex-shrink: 0; position: relative; }
.qv-modal__option.active .radio::after { content: ''; position: absolute; inset: 3px; background: var(--es-ink); border-radius: 50%; }
.qv-modal__option-label { flex: 1; font-size: 13px; font-weight: 500; }
.qv-modal__option-price { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; }
.qv-modal__option-sub { font-size: 11px; color: var(--es-gray); margin-top: 2px; }
.qv-modal__cta { margin-top: 14px; }
.qv-modal__saved { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; margin-top: 6px; border: 1px solid var(--es-line); background: transparent; font-size: 13px; font-weight: 500; font-family: inherit; transition: all 0.2s; }
.qv-modal__saved:hover { border-color: var(--es-cacao); color: var(--es-cacao); }
.qv-modal__details { display: block; text-align: center; margin-top: 12px; font-size: 12px; color: var(--es-gray); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .qv-modal { grid-template-columns: 1fr; }
  .qv-modal__img { aspect-ratio: 4/3; max-height: 280px; }
  .qv-modal__content { padding: 20px 18px 24px; max-height: none; }
  .qv-modal h3 { font-size: 22px; margin-bottom: 10px; }
  .qv-modal__notes-row { margin-bottom: 14px; }
  .qv-modal__option { padding: 9px 11px; margin-bottom: 4px; gap: 10px; }
  .qv-modal__option.active { padding: 8px 10px; }
  .qv-modal__option-label { font-size: 12px; }
  .qv-modal__option-sub { font-size: 10px; }
  .qv-modal__option-price { font-size: 13px; }
  .quickview-demo { padding: 72px 0; }
}

/* =============== 8. AVIS =============== */
.reviews { padding: 80px 0; background: var(--es-bg); }
.reviews__head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.reviews__head h2 { font-size: clamp(44px, 5vw, 72px); margin-bottom: 12px; line-height: 1; }
.reviews__head h2 em { font-size: 0.5em; color: var(--es-gray); margin-left: 4px; }
.reviews__head-stars { color: var(--es-cacao); font-size: 18px; letter-spacing: 6px; line-height: 1; }
.reviews__head p { font-size: 17px; color: var(--es-gray); }
/* Tagline reviews : italique Fraunces gris, cohérent avec diffusers/howto/collections */
.reviews .reviews__head .reviews__tagline,
.reviews .reviews__head p.reviews__tagline {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.45 !important;
  color: var(--es-gray) !important;
  margin: 14px auto 0 !important;
  max-width: 540px !important;
  letter-spacing: -0.005em !important;
}
/* Stats éditoriales : note unique centrée + étoiles + supporting line mono */
.reviews__stats { text-align: center; max-width: 720px; margin: 0 auto 56px; background: transparent; border: none; display: block; padding: 0; }
.reviews__stats-rating { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-weight: 300; font-size: clamp(64px, 6.5vw, 96px); line-height: 1; letter-spacing: -0.02em; color: var(--es-ink); margin-bottom: 14px; }
.reviews__stats-rating em { font-style: italic; font-size: 0.5em; color: var(--es-gray); margin-left: 6px; font-weight: 300; }
.reviews__stats-stars { color: var(--es-cacao); font-size: 18px; letter-spacing: 6px; margin-bottom: 18px; }
.reviews__stats-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--es-gray); line-height: 1.6; margin: 0; }
.reviews__stat-value { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.02em; color: var(--es-ink); margin-bottom: 8px; }
.reviews__stat-value em { font-style: italic; }
.reviews__stat-stars { color: var(--es-cacao); font-size: 16px; letter-spacing: 3px; line-height: 1; margin-bottom: 8px; }
.reviews__stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--es-gray); }
@media (max-width: 700px) {
  .reviews__stats { grid-template-columns: repeat(2, 1fr); }
  .reviews__stat { padding: 18px 12px; border-right: 0; }
  .reviews__stat:nth-child(odd) { border-right: 1px solid var(--es-line); }
  .reviews__stat:nth-child(-n+2) { border-bottom: 1px solid var(--es-line); }
  .reviews__stat-value { font-size: 28px; }
  .reviews__stat-stars { font-size: 14px; letter-spacing: 2px; }
  .reviews__stat-label { font-size: 9px; }
}
.reviews__featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; max-width: 1100px; margin: 0 auto 80px; }
.reviews__featured-photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 4/3; }
.reviews__featured-photos > div { background-size: cover; background-position: center; background-color: var(--es-bg-chip); }
.reviews__featured-photos > div:first-child { grid-row: span 2; }
.reviews__featured-product { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--es-cacao); margin-bottom: 16px; }
.reviews__featured-stars { color: var(--es-cacao); letter-spacing: 6px; font-size: 18px; margin-bottom: 24px; }
.reviews__featured-text { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: var(--es-ink); margin-bottom: 28px; letter-spacing: -0.01em; }
.reviews__featured-author { display: flex; flex-direction: column; gap: 4px; }
.reviews__featured-author-name { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; color: var(--es-ink); }
.reviews__featured-author-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--es-gray); }
@media (max-width: 900px) { .reviews { padding: 80px 0; } .reviews__featured { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; } .reviews__featured-photos { aspect-ratio: 4/3; } .reviews__stats { margin-bottom: 48px; } }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto 48px; }
.review-card { background: var(--es-bg-alt); padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.review-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.04); }
.review-card__photo { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--es-bg-chip); margin: -24px -24px 0; }
.review-card__stars { color: var(--es-cacao); letter-spacing: 3px; font-size: 13px; }
.review-card__product { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--es-gray); }
.review-card__text { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: var(--es-ink); flex: 1; }
.review-card__author { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--es-gray); margin-top: auto; }
@media (max-width: 900px) { .reviews__grid { grid-template-columns: 1fr; max-width: 480px; gap: 16px; } }
.reviews__cta { text-align: center; margin-bottom: 0; }
.reviews__module-note { text-align: center; font-size: 11px; color: var(--es-gray); max-width: 520px; margin: 0 auto; line-height: 1.5; }
.reviews__module-note strong { color: var(--es-ink); }

/* === Intro centrée avec juste l'eyebrow === */
.reviews__intro { text-align: center; margin-bottom: 32px; }

/* === Row 3 colonnes : widget + 2 quotes === */
.reviews__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto 40px; align-items: stretch; }

/* === Widget Trustpilot-style : card blanc, hauteur égale aux quotes (stretch) === */
.reviews__widget {
  background: #fff;
  border: 1px solid var(--es-line);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.reviews__widget h2 { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-weight: 400; font-size: clamp(44px, 5vw, 72px); margin: 0 !important; line-height: 1; letter-spacing: -0.015em; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; font-feature-settings: "ss01", "swsh" 1; font-optical-sizing: auto; color: var(--es-ink); }
.reviews__widget h2 em { font-style: italic; font-weight: 400; font-size: 0.5em; color: var(--es-gray); margin-left: 4px; font-feature-settings: "ss01", "swsh" 2, "calt" 1; }
.reviews__widget .reviews__head-stars { margin: 0; }

/* Distribution des notes (mini barres horizontales) compactes */
.reviews__distribution { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 320px; margin: 4px 0; }
.reviews__dist-row { display: grid; grid-template-columns: 24px 1fr 30px; gap: 10px; align-items: center; }
.reviews__dist-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; color: var(--es-gray); }
.reviews__dist-bar { height: 4px; background: var(--es-bg-chip); position: relative; overflow: hidden; }
.reviews__dist-fill { display: block; height: 100%; background: var(--es-cacao); }
.reviews__dist-pct { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; color: var(--es-gray); text-align: right; }

/* Stats dans le widget : JetBrains Mono uppercase (même typo que les noms produits dans les cards) */
.reviews__widget-stats { font-family: 'JetBrains Mono', monospace; font-style: normal; font-weight: 400; font-size: 10px; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: var(--es-gray); margin: 4px 0 0; }

/* Les cartes d'avis n'affichent plus de photo client : la marque n'a pas de visuel
   à publier, et les images servies étaient des photos de banque d'images données
   pour des photos de clients. La règle .review-quote__client-photo qui vivait ici
   a donc été retirée avec le markup.

   La photo occupait un bloc en 4/3 qui remplissait la hauteur de la carte. Sans
   elle, le texte est court et le pied de carte, collé en bas par margin-top: auto,
   laissait un grand vide — les cartes étant étirées sur la hauteur du widget de
   note.

   Réponse : on change la rangée plutôt que d'étirer du vide. Le widget occupe une
   colonne étroite sur deux rangées, les deux avis s'empilent dans la colonne large
   en face — chacun fait donc la moitié de sa hauteur, et l'espace se remplit tout
   seul. Les cartes d'avis reprennent en plus la peau du widget (fond blanc, même
   filet, mêmes marges internes) : trois cartes cohérentes au lieu d'un encadré et
   de deux blocs de texte flottants.

   Portée : uniquement la section d'accueil, .reviews sans .reviews--pdp. Les fiches
   produit partagent .reviews__row mais y placent des cartes .review-quote garnies
   (vignette produit, référence, format) qui remplissent déjà la hauteur — leur
   appliquer cette bascule les casserait. */
.reviews:not(.reviews--pdp) .reviews__row {
  grid-template-columns: minmax(240px, 320px) 1fr;
  align-items: stretch;
}
.reviews:not(.reviews--pdp) .reviews__row .reviews__widget { grid-row: span 2; }

.reviews:not(.reviews--pdp) .review-quote--general {
  background: #fff;
  border: 1px solid var(--es-line);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
/* Le texte occupe l'espace libre entre l'en-tête et le pied plutôt que de laisser
   un trou : le pied reste en bas, la citation se centre dans ce qui reste. */
.reviews:not(.reviews--pdp) .review-quote--general .review-quote__text { margin: auto 0; }

@media (max-width: 900px) {
  /* En colonne unique, plus rien à faire enjamber. */
  .reviews:not(.reviews--pdp) .reviews__row .reviews__widget { grid-row: auto; }
}

/* Mobile : row stack vertical, widget plus compact */
@media (max-width: 900px) {
  .reviews__row { grid-template-columns: 1fr; max-width: 540px; gap: 20px; }
  .reviews__widget { padding: 24px 20px; }
  .reviews__distribution { max-width: 280px; }
}

/* === Trust badge sous les stats === */
.reviews__trust-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; background: var(--es-bg-chip); color: var(--es-cacao); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.reviews__trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--es-cacao); color: var(--es-bg-chip); font-size: 9px; font-weight: 700; }

/* === Grid de quotes compactes : 3 colonnes desktop, stack mobile === */
.reviews__quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto 40px; }

/* Quote = card cliquable vers la fiche produit */
a.review-quote { display: flex; flex-direction: column; background: var(--es-bg-alt); padding: 24px; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s ease; }
a.review-quote:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.06); }
a.review-quote:hover .review-quote__product { color: var(--es-cacao); }

/* Header : avatar + author/verified + stars */
.review-quote__header { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; margin-bottom: 16px; }
.review-quote__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--es-bg-chip); color: var(--es-cacao); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.review-quote__author-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-quote__name { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px; color: var(--es-ink); line-height: 1.2; }
.review-quote__verified { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--es-gray); display: flex; align-items: center; gap: 4px; }
.review-quote__check { display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 10px; border-radius: 50%; background: var(--es-cacao); color: #fff; font-size: 7px; font-weight: 700; }
.review-quote__stars { color: var(--es-cacao); font-size: 12px; letter-spacing: 2px; line-height: 1; }

/* Texte de l'avis avec guillemets typographiques */
.review-quote__text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 1.55; color: var(--es-ink); margin: 0 0 16px; letter-spacing: 0; flex: 1; }

/* Footer : thumbnail + nom produit + date relative */
.review-quote__footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--es-line); margin-top: auto; }
.review-quote__product-wrap { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.review-quote__thumb { display: block; width: 32px; height: 32px; background-color: var(--es-bg-chip); background-size: cover; background-position: center; background-repeat: no-repeat; flex-shrink: 0; }
.review-quote__product { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--es-ink); transition: color 0.2s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-quote__date { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--es-gray); flex-shrink: 0; }

/* CTA double : primary noir + lien secondaire */
.reviews__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reviews .btn-primary.reviews__primary-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 32px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  color: #fff !important;
  background: var(--es-ink) !important;
  border: 1px solid var(--es-ink) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.reviews .btn-primary.reviews__primary-cta:hover {
  background: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25) !important;
}

/* CTA text-link discret (cohérent avec le style Découvrir des cards) */
.reviews a.reviews__seeall-link,
.reviews a.reviews__seeall-link:focus,
.reviews a.reviews__seeall-link:focus-visible {
  display: inline-block !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: var(--es-ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--es-ink) !important;
  border-radius: 0 !important;
  padding: 0 0 2px !important;
  text-decoration: none !important;
  outline: none !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
.reviews a.reviews__seeall-link:hover {
  color: var(--es-cacao) !important;
  border-bottom-color: var(--es-cacao) !important;
}

@media (max-width: 900px) {
  .reviews__quotes { grid-template-columns: 1fr; max-width: 540px; gap: 32px; }
  .review-quote { border-left: none; border-top: 1px solid var(--es-line); padding-left: 0; padding-top: 20px; }
  .review-quote:first-child { border-top: none; padding-top: 0; }
}

/* === Overrides Elementor pour .reviews (battre l'héritage accent italic) === */
.reviews .eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  color: var(--es-gray) !important;
}
.reviews .reviews__head h2,
.reviews .reviews__head h2 em,
.reviews .reviews__widget h2,
.reviews .reviews__widget h2 em {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
}
.reviews .reviews__head h2,
.reviews .reviews__widget h2 { font-style: normal !important; letter-spacing: -0.015em !important; }
.reviews .reviews__head h2 em,
.reviews .reviews__widget h2 em { font-style: italic !important; font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important; font-size: 0.5em !important; color: var(--es-gray) !important; }
.reviews .reviews__head-stars {
  font-family: inherit !important;
  font-style: normal !important;
  color: var(--es-cacao) !important;
}
.reviews .reviews__stat-value {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
}
.reviews .reviews__stat-value em { font-style: italic !important; }
.reviews .reviews__stat-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--es-gray) !important;
}
/* Nouvelle structure stats éditoriale */
.reviews .reviews__stats-rating {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0 !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}
.reviews .reviews__stats-rating em { font-style: italic !important; font-weight: 300 !important; }
.reviews .reviews__stats-stars {
  font-family: inherit !important;
  font-style: normal !important;
  color: var(--es-cacao) !important;
}
.reviews .reviews__stats-meta {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--es-gray) !important;
}
.reviews .reviews__featured-product,
.reviews .reviews__featured-author-meta,
.reviews .review-card__product,
.reviews .review-card__author {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
}
.reviews .reviews__featured-author-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
}
/* Featured text : citation éditoriale, italique Fraunces volontaire */
.reviews .reviews__featured-text {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
}
.reviews .review-card__text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
}
/* Quotes compactes : texte Inter regular (body lisible), meta mono uppercase */
.reviews .review-quote__text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.reviews .review-quote__stars {
  font-family: inherit !important;
  font-style: normal !important;
  color: var(--es-cacao) !important;
}
.reviews .review-quote__name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
}
.reviews .review-quote__meta {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--es-gray) !important;
}
/* 10/10 conversion : trust badge, avatar, verified, footer card, primary CTA */
.reviews .reviews__trust-badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--es-cacao) !important;
}
.reviews .reviews__widget-stats {
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  letter-spacing: 0.14em !important;
  font-size: 10px !important;
}
.reviews a.review-quote,
.reviews a.review-quote:hover,
.reviews a.review-quote:focus,
.reviews a.review-quote:visited,
.reviews a.review-quote:active {
  text-decoration: none !important;
  color: inherit !important;
  border: none !important;
}
.reviews .review-quote__avatar {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--es-cacao) !important;
  letter-spacing: 0.04em !important;
}
.reviews .review-quote__verified,
.reviews .review-quote__product,
.reviews .review-quote__date {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
}
/* Bouton "Voir tous les avis" : ghost noir cohérent avec le branding */
.reviews a.btn,
.reviews a.btn-ghost,
.reviews .btn.btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 28px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  color: var(--es-ink) !important;
  background: transparent !important;
  border: 1px solid var(--es-ink) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
.reviews a.btn-ghost:hover {
  background: var(--es-ink) !important;
  color: #fff !important;
}

/* Réduction de la bande blanche entre la section Avis et le banner quiz sur la home :
   80px → 40px de padding-bottom (laisse une respiration sans grosse bande blanche). */
body.home .reviews,
body.page-id-103 .reviews { padding-bottom: 40px; }

/* =============== 9. QUIZ BANNER =============== */
/* Banner pleine largeur dark (rupture visuelle dans la home, style Aesop "Discover").
   Pattern Essentia : eyebrow JetBrains 11px + h2 Fraunces clamp(44,5vw,72) italique sur <em>
   + tagline italique blanche + CTA primary on-dark + trust line dark variant. */
.quiz-banner { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; background: var(--es-ink); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.quiz-banner__bg { position: absolute; inset: 0; background: url('../img/quiz-banner-bg.jpg') center/cover no-repeat; filter: brightness(0.85); }
.quiz-banner__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55)); }
.quiz-banner__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; padding: 96px 32px; color: #fff; }
.quiz-banner__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 22px; }
.quiz-banner h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.015em; color: #fff; margin-bottom: 18px; }
.quiz-banner h2 em { font-style: italic; }
/* Tagline alignée sur le body Inter (15px / 1.65, comme .bestseller__desc et .odorkiller__desc), couleur blanche translucide pour fond image */
.quiz-banner__tagline { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.8); margin-bottom: 32px; }
/* Bouton CTA en .btn .btn-light, pattern identique à .hero .hero__cta .btn-light :
   fond blanc, texte ink, hover = lift + shadow sans changement de couleur.
   !important nécessaire pour battre Elementor accent hover sur <a>. */
.quiz-banner a.btn.btn-light,
.quiz-banner a.btn.btn-light:link,
.quiz-banner a.btn.btn-light:visited,
.quiz-banner a.btn.btn-light:hover,
.quiz-banner a.btn.btn-light:focus,
.quiz-banner a.btn.btn-light:active {
  background: #fff !important;
  color: var(--es-ink) !important;
  border: 1px solid #fff !important;
  text-decoration: none !important;
  padding: 16px 32px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.quiz-banner a.btn.btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
/* Désactivation de l'overlay slide ::after du .btn global (parasite sur fond blanc) */
.quiz-banner .btn.btn-light::after,
.quiz-banner .btn.btn-light:hover::after { display: none !important; }
.quiz-banner__trust { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: nowrap; margin-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.quiz-banner__trust span:not(.quiz-banner__trust-sep) { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.quiz-banner__trust-check { color: var(--es-cacao); font-weight: 600; }
.quiz-banner__trust-sep { color: rgba(255,255,255,0.3); }
@media (max-width: 700px) {
  .quiz-banner { min-height: 50vh; }
  .quiz-banner__inner { padding: 64px 20px; }
  .quiz-banner h2 { font-size: clamp(36px, 8vw, 48px); }
  .quiz-banner__tagline { font-size: 14px; }
  .quiz-banner__trust { font-size: 8px; gap: 8px; letter-spacing: 0.15em; }
}

/* === Overrides Elementor pour .quiz-banner : battre l'accent typography Cormorant italic === */
.quiz-banner .quiz-banner__eyebrow,
.quiz-banner .quiz-banner__trust,
.quiz-banner .quiz-banner__trust span,
.quiz-banner .quiz-banner__tagline,
.quiz-banner .btn,
.quiz-banner a.btn {
  font-style: normal !important;
  text-decoration: none !important;
}
.quiz-banner h2,
.quiz-banner h2 em {
  font-family: 'Fraunces', serif !important;
}
.quiz-banner h2 { font-style: normal !important; }
.quiz-banner h2 em { font-style: italic !important; }
.quiz-banner .quiz-banner__tagline,
.quiz-banner .btn,
.quiz-banner a.btn { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; }
.quiz-banner .quiz-banner__eyebrow,
.quiz-banner .quiz-banner__trust { font-family: 'JetBrains Mono', monospace !important; }

/* =============== 10. ODOR KILLER =============== */
/* Section split image gauche + contenu droite. Pattern Essentia standard :
   eyebrow JetBrains 11px + H2 Fraunces clamp(44,5vw,72) italique sur <em>
   + tagline italique grise + description + features ✓ + prix + CTA. */
.odorkiller { padding: 80px 0; background: var(--es-bg-alt); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.odorkiller__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.odorkiller__visual { position: relative; width: 100%; display: block; overflow: hidden; text-decoration: none; }
.odorkiller__img { width: 100%; aspect-ratio: 1/1; background: url('../img/odor-killer.jpg') center/cover no-repeat, var(--es-bg-alt); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.odorkiller__visual:hover .odorkiller__img { transform: scale(1.02); }
.odorkiller__badge { position: absolute; top: 12px; left: 12px; background: var(--es-bg-chip); color: var(--es-cacao); padding: 6px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; line-height: 1; z-index: 2; border-radius: 0; }
.odorkiller__badge::before { content: '★'; margin-right: 6px; color: var(--es-cacao); font-size: 1em; line-height: 1; }
.odorkiller h2 { font-size: clamp(44px, 5vw, 72px); margin-bottom: 14px; }
/* Rating bloc identique à .bestseller__rating */
.odorkiller__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.odorkiller__rating-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity 0.2s; }
.odorkiller__rating-link:hover .odorkiller__rating-text { color: var(--es-ink); text-decoration: underline; text-underline-offset: 3px; }
.odorkiller__rating-stars { color: var(--es-cacao); letter-spacing: 3px; font-size: 13px; line-height: 1; }
.odorkiller__rating-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--es-gray); letter-spacing: 0.05em; transition: color 0.2s; }
/* Tagline EXACTEMENT alignée sur .diffusers__tagline (même taille, famille, poids, couleur, line-height, letter-spacing) — tous les !important pour battre Elementor. */
.odorkiller .odorkiller__tagline,
.odorkiller p.odorkiller__tagline {
	font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
	font-weight: 400 !important;
	font-style: italic !important;
	font-size: clamp(17px, 1.5vw, 21px) !important;
	line-height: 1.45 !important;
	color: var(--es-gray) !important;
	margin: 0 0 22px !important;
	max-width: 540px !important;
	letter-spacing: -0.005em !important;
}
/* Description + features alignés EXACTEMENT sur .bestseller__desc :
   Inter 400 normal, couleur var(--es-gray), 15px, line-height 1.65, !important pour battre Elementor. */
.odorkiller .odorkiller__desc,
.odorkiller p.odorkiller__desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--es-gray) !important;
  margin: 0 0 24px !important;
  max-width: 480px !important;
  text-transform: none !important;
}
.odorkiller__features { list-style: none; margin: 0 0 28px; padding: 0; }
.odorkiller .odorkiller__features li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--es-gray) !important;
  text-transform: none !important;
}
.odorkiller__features li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; background: var(--es-cacao); margin-top: 3px; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.odorkiller__price-block { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.odorkiller__price { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 500; color: var(--es-ink); letter-spacing: 0.02em; }
.odorkiller__price-spec { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--es-gray); letter-spacing: 0.08em; text-transform: uppercase; }
.odorkiller__cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.odorkiller__secondary { font-size: 13px; color: var(--es-ink); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; display: inline-block; }
.odorkiller__secondary:hover { color: var(--es-cacao); }
@media (max-width: 900px) {
  .odorkiller { padding: 48px 0; }
  .odorkiller__grid { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }
  .odorkiller__visual { max-width: 280px; width: 100%; margin: 0 auto; }
  .odorkiller__content { max-width: none; }
  .odorkiller h2 { font-size: clamp(34px, 8vw, 44px); margin-bottom: 10px; }
  .odorkiller .odorkiller__tagline,
  .odorkiller p.odorkiller__tagline { font-size: 17px !important; margin-bottom: 16px !important; }
  .odorkiller__desc { font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
  .odorkiller__features { margin-bottom: 20px; }
  .odorkiller__features li { padding: 4px 0; font-size: 13px; }
  .odorkiller__price-block { margin-bottom: 16px; }
  .odorkiller__price { font-size: 22px; }
  .odorkiller__cta { margin-bottom: 12px; }
}

/* === Overrides Elementor pour .odorkiller : battre l'accent typography Cormorant italic === */
.odorkiller .eyebrow,
.odorkiller .odorkiller__desc,
.odorkiller .odorkiller__features,
.odorkiller .odorkiller__features li,
.odorkiller .odorkiller__price,
.odorkiller .odorkiller__price-spec,
.odorkiller .odorkiller__badge,
.odorkiller .btn,
.odorkiller a.btn,
.odorkiller .odorkiller__secondary {
  font-style: normal !important;
}
.odorkiller h2,
.odorkiller h2 em,
.odorkiller .odorkiller__tagline {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
}
.odorkiller h2.serif { font-style: normal !important; font-weight: 400 !important; }
.odorkiller h2 em { font-style: italic !important; font-weight: 400 !important; }
.odorkiller .odorkiller__tagline { font-style: italic !important; }
.odorkiller .eyebrow,
.odorkiller .odorkiller__price,
.odorkiller .odorkiller__price-spec,
.odorkiller .odorkiller__badge { font-family: 'JetBrains Mono', monospace !important; }
.odorkiller .odorkiller__desc,
.odorkiller .odorkiller__features li,
.odorkiller .btn,
.odorkiller .odorkiller__secondary { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; }

/* Bouton primary odorkiller : couvert par le bloc unifié body a.btn.btn-primary
   en fin de fichier. */
/* Secondary link : pattern identique à .bestseller__secondary */
.odorkiller .odorkiller__secondary,
.odorkiller a.odorkiller__secondary,
.odorkiller a.odorkiller__secondary:link,
.odorkiller a.odorkiller__secondary:visited {
  display: inline-block !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 13px !important;
  color: var(--es-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-transform: none !important;
}
.odorkiller a.odorkiller__secondary:hover {
  color: var(--es-cacao) !important;
}

/* Rating : overrides Elementor pour le pattern .odorkiller__rating */
.odorkiller .odorkiller__rating-stars,
.odorkiller .odorkiller__rating-text {
  font-style: normal !important;
}
.odorkiller .odorkiller__rating-stars { font-family: 'Arial', sans-serif !important; color: var(--es-cacao) !important; }
.odorkiller .odorkiller__rating-text { font-family: 'JetBrains Mono', monospace !important; color: var(--es-gray) !important; }
.odorkiller a.odorkiller__rating-link,
.odorkiller a.odorkiller__rating-link:link,
.odorkiller a.odorkiller__rating-link:visited { text-decoration: none !important; color: inherit !important; }

/* Qty picker dans .odorkiller : pattern identique à .bestseller .qty-and-cart */
.odorkiller .qty-and-cart {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 0 14px !important;
  flex-wrap: nowrap !important;
}
.odorkiller .qty-picker {
  display: inline-flex !important;
  align-items: center !important;
  height: 50px !important;
  width: 120px !important;
  flex: 0 0 120px !important;
  background: #fff !important;
  border: 1px solid var(--es-line) !important;
}
.odorkiller .qty-picker button {
  width: 38px !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  color: var(--es-ink) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.odorkiller .qty-picker button:hover { background: var(--es-bg-alt) !important; }
.odorkiller .qty-picker input {
  width: 44px !important;
  text-align: center !important;
  border: 0 !important;
  background: transparent !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  font-style: normal !important;
  color: var(--es-ink) !important;
  outline: none !important;
  padding: 0 !important;
}
.odorkiller .qty-and-cart .btn { height: 50px !important; padding: 0 24px !important; flex: 0 0 auto !important; }

/* =============== 11. B2B + CLIENTS =============== */
/* Section monobloc dense sur fond CACAO (= couleur officielle Espace Pro brand book).
   Signal visuel immédiat « ceci est pour les professionnels ».
   Layout horizontal : pitch + CTA gauche / grille 6 clients droite. */
/* Fond cacao-dark (#5F4F3D, hover officiel du cacao) plutôt que cacao plat (#7C6650),
   pour ne pas se fondre avec le quizbar sticky du header qui est lui en var(--es-cacao). */
.b2b { background: var(--es-cacao-dark); color: #fff; padding: 80px 0; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.b2b__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.b2b__pitch { max-width: 100%; }
.b2b__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin: 0 0 18px; }
.b2b .b2b__title { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-weight: 400; font-size: clamp(36px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.015em; color: #fff; margin: 0 0 18px; text-wrap: balance; }
.b2b__title em { font-style: italic; font-weight: 400; }
.b2b__desc { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 28px; }
.b2b__cta { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--es-cacao); padding: 16px 28px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.4s cubic-bezier(0.2,0.8,0.2,1); }
.b2b__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); }

/* Grille clients droite */
.b2b__clients-wrap { position: relative; }
.b2b__clients-label { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 28px; }
.b2b__clients-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
.b2b__client { color: #fff; }
.b2b__client-name { display: block; font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.1; color: #fff; letter-spacing: 0.01em; }
.b2b__client small { display: block; font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 4px; }

@media (max-width: 900px) {
  .b2b { padding: 56px 0; }
  .b2b__inner { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
  .b2b__pitch { max-width: none; }
  .b2b__title { font-size: clamp(28px, 8vw, 38px); }
  .b2b__desc { font-size: 14px; margin-bottom: 22px; }
  .b2b__clients-label { margin-bottom: 22px; }
  .b2b__clients-grid { gap: 18px 24px; }
  .b2b__client-name { font-size: 17px; }
  .b2b__client small { font-size: 8px; }
}
@media (max-width: 480px) {
  .b2b__clients-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* === Overrides Elementor pour .b2b : tout en blanc/cream sur fond cacao, battre l'accent italic === */
.b2b .b2b__eyebrow,
.b2b .b2b__desc,
.b2b .b2b__clients-label,
.b2b .b2b__cta,
.b2b a.b2b__cta {
  font-style: normal !important;
}
.b2b .b2b__title,
.b2b .b2b__title em,
.b2b .b2b__client-name {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
}
.b2b .b2b__title { font-style: normal !important; font-weight: 400 !important; color: #fff !important; }
.b2b .b2b__title em { font-style: italic !important; font-weight: 400 !important; }
.b2b .b2b__eyebrow,
.b2b .b2b__clients-label,
.b2b .b2b__client small {
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
}
.b2b .b2b__desc,
.b2b .b2b__cta { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; }
.b2b .b2b__client-name { font-style: italic !important; color: #fff !important; }
.b2b .b2b__desc { color: rgba(255,255,255,0.85) !important; }
.b2b .b2b__eyebrow { color: rgba(255,255,255,0.75) !important; }
.b2b .b2b__clients-label { color: rgba(255,255,255,0.6) !important; }
.b2b .b2b__client small { color: rgba(255,255,255,0.7) !important; }

/* Bouton CTA blanc sur fond cacao, hover lift + shadow (PAS de bascule de couleur, comme btn-light hero) */
.b2b a.b2b__cta,
.b2b a.b2b__cta:link,
.b2b a.b2b__cta:visited,
.b2b a.b2b__cta:hover,
.b2b a.b2b__cta:focus,
.b2b a.b2b__cta:active {
  background: #fff !important;
  color: var(--es-cacao-dark) !important;
  border: 1px solid #fff !important;
  text-decoration: none !important;
  padding: 16px 28px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.b2b a.b2b__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* =============== 12. NEWSLETTER =============== */
/* Section pleine largeur ink, texte centré : eyebrow + H2 (.serif italique sur <em>) + tagline + form inline + hint privacy. */
.newsletter { background: var(--es-ink); color: #fff; padding: 88px 0; text-align: center; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.newsletter__inner { max-width: 580px; margin: 0 auto; padding: 0 32px; }
.newsletter__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 0 0 18px; }
.newsletter h2 { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-weight: 400; font-size: clamp(36px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.015em; color: #fff; margin: 0 0 16px; text-wrap: balance; }
.newsletter h2 em { font-style: italic; font-weight: 400; }
.newsletter__tagline { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0 0 32px; }
.newsletter__form { display: flex; gap: 0; max-width: 460px; margin: 0 auto; }
.newsletter__form input { flex: 1; padding: 16px 18px; background: transparent; border: 1px solid rgba(255,255,255,0.3); border-right: 0; color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; outline: none; transition: border-color 0.2s; }
.newsletter__form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter__form input:focus { border-color: #fff; }
.newsletter__form button { padding: 16px 24px; background: #fff; color: var(--es-ink); border: 1px solid #fff; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.4s cubic-bezier(0.2,0.8,0.2,1); }
.newsletter__form button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
.newsletter__privacy { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 20px 0 0; }
@media (max-width: 700px) {
  .newsletter { padding: 64px 0; }
  .newsletter h2 { font-size: clamp(28px, 8vw, 38px); }
  .newsletter__tagline { font-size: 14px; margin-bottom: 24px; }
}
@media (max-width: 480px) {
  .newsletter__form { flex-direction: column; gap: 10px; max-width: 320px; }
  .newsletter__form input { border-right: 1px solid rgba(255,255,255,0.3); }
}

/* === Overrides Elementor pour .newsletter : tout en blanc, battre l'accent italic === */
.newsletter .newsletter__eyebrow,
.newsletter .newsletter__tagline,
.newsletter .newsletter__form,
.newsletter .newsletter__form input,
.newsletter .newsletter__form button,
.newsletter .newsletter__privacy { font-style: normal !important; }
.newsletter h2,
.newsletter h2 em { font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important; }
.newsletter h2 { font-style: normal !important; color: #fff !important; }
.newsletter h2 em { font-style: italic !important; font-weight: 400 !important; }
.newsletter .newsletter__eyebrow,
.newsletter .newsletter__privacy { font-family: 'JetBrains Mono', monospace !important; }
.newsletter .newsletter__tagline,
.newsletter .newsletter__form input,
.newsletter .newsletter__form button { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; }
.newsletter .newsletter__tagline { color: rgba(255,255,255,0.78) !important; }
.newsletter .newsletter__privacy { color: rgba(255,255,255,0.5) !important; }
.newsletter .newsletter__form input { color: #fff !important; }
.newsletter .newsletter__form button { background: #fff !important; color: var(--es-ink) !important; }

/* =============== 13. FOOTER =============== */
.es-footer { background: var(--es-bg-alt); padding: 80px 0 0; }
.es-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; padding: 0 40px; max-width: 1100px; margin: 0 auto 56px; }
.es-footer__col h5 { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--es-ink); margin-bottom: 16px; font-weight: 500; padding-bottom: 12px; border-bottom: 1px solid var(--es-line); }
.es-footer__col ul { list-style: none; }
.es-footer__col li { margin-bottom: 12px; }
.es-footer__col a { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; color: var(--es-gray); transition: color 0.2s; }
.es-footer__col a:hover { color: var(--es-ink); }
.es-footer__utility { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; padding: 0 40px 48px; max-width: 1100px; margin: 0 auto; }
.es-footer__social { display: flex; gap: 18px; align-items: center; }
.es-footer__social a { color: var(--es-gray); display: flex; align-items: center; transition: color 0.2s; }
.es-footer__social a:hover { color: var(--es-cacao); }
.es-footer__social svg { width: 18px; height: 18px; }
.es-footer__lang { display: flex; gap: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.05em; }
.es-footer__lang span { color: var(--es-gray); cursor: pointer; transition: color 0.2s; }
.es-footer__lang span:hover { color: var(--es-ink); }
.es-footer__lang span.active { color: var(--es-ink); }
.es-footer__lang i { color: var(--es-gray); opacity: 0.5; font-style: normal; }
.es-footer__sigle-wrap { text-align: center; padding: 0 40px 24px; max-width: 1100px; margin: 0 auto; }
.es-footer__sigle { width: 40px; height: 40px; margin: 0 auto 16px; }
.es-footer__sigle img { width: 100%; height: 100%; object-fit: contain; display: block; }
.es-footer__copyright { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 13px; color: var(--es-gray); }
.es-footer__bottom { background: var(--es-ink); color: rgba(255,255,255,0.85); padding: 16px 20px; display: flex; justify-content: center; align-items: center; gap: 24px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; flex-wrap: wrap; }
.es-footer__bottom span { opacity: 0.4; }
.es-footer__bottom a { color: rgba(255,255,255,0.85); transition: color 0.2s; }
.es-footer__bottom a:hover { color: #fff; }
@media (max-width: 700px) {
  .es-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 0 20px; }
  .es-footer { padding: 48px 0 0; }
  .es-footer__utility { flex-direction: column; gap: 20px; padding: 0 20px 40px; }
  .es-footer__sigle-wrap { padding: 0 20px 20px; }
  .es-footer__bottom { font-size: 9px; gap: 12px; padding: 14px 16px; }
}
@media (max-width: 480px) {
  .es-footer__bottom { font-size: 8px; gap: 10px; letter-spacing: 0.12em; padding: 12px 14px; }
}

/* === Overrides Elementor pour le footer template natif (#92)
   Cible footer.elementor-location-footer qui wrappe le template footer Elementor entier.
   Force Inter sans italique partout pour battre l'accent typography Fraunces italique du kit. === */
footer.elementor-location-footer,
footer.elementor-location-footer *,
footer.elementor-location-footer *::before,
footer.elementor-location-footer *::after {
  font-style: normal !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* Headings du footer (Service client / À propos / Espace client / Boutique / Restez en contact) */
footer.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--es-ink) !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--es-line) !important;
}
/* H2 spécifique "Restez en contact" garde une présence éditoriale (Fraunces, plus gros, mais PAS italique géant) */
footer.elementor-location-footer .elementor-widget:has(.elementor-heading-title:not([class*="es-footer"])) h2.elementor-heading-title,
footer.elementor-location-footer h2.elementor-heading-title {
  /* Surcharge plus loin pour les headings normaux des colonnes */
}
/* Liens nav-menu (Contact, FAQ, Maison Essentia, etc.) */
footer.elementor-location-footer .elementor-widget-nav-menu .elementor-item,
footer.elementor-location-footer .elementor-widget-nav-menu a,
footer.elementor-location-footer .elementor-widget-nav-menu a.elementor-item:link,
footer.elementor-location-footer .elementor-widget-nav-menu a.elementor-item:visited,
footer.elementor-location-footer .elementor-widget-nav-menu a.elementor-item:active,
footer.elementor-location-footer .elementor-widget-nav-menu a.elementor-item.elementor-item-active,
footer.elementor-location-footer .elementor-widget-nav-menu a.elementor-item.elementor-item-anchor {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--es-gray) !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  padding: 6px 0 !important;
  background: transparent !important;
}
footer.elementor-location-footer .elementor-widget-nav-menu a:hover,
footer.elementor-location-footer .elementor-widget-nav-menu a.elementor-item:hover,
footer.elementor-location-footer .elementor-widget-nav-menu a.elementor-item:focus { color: var(--es-ink) !important; background: transparent !important; }
footer.elementor-location-footer .elementor-widget-nav-menu ul,
footer.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
footer.elementor-location-footer .elementor-widget-nav-menu li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* Text-editor (Restez en contact desc, langues, copyright, bande bottom CGV) */
footer.elementor-location-footer .elementor-widget-text-editor,
footer.elementor-location-footer .elementor-widget-text-editor p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--es-gray) !important;
  font-style: normal !important;
  line-height: 1.55 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Form (newsletter zone Restez en contact) */
footer.elementor-location-footer .elementor-widget-form input[type="email"],
footer.elementor-location-footer .elementor-widget-form input[type="text"] {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}
footer.elementor-location-footer .elementor-widget-form button[type="submit"],
footer.elementor-location-footer .elementor-widget-form .elementor-button {
  background: var(--es-ink) !important;
  color: #fff !important;
  border: 1px solid var(--es-ink) !important;
  border-radius: 0 !important;
  padding: 14px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
footer.elementor-location-footer .elementor-widget-form button[type="submit"]:hover { background: #000 !important; }

/* Site-logo widget du footer : remplace l'image WP custom_logo par le sigle rond Es,
   sans toucher au logo customizer global (qui reste pour le header). */
footer.elementor-location-footer .elementor-widget-theme-site-logo img { display: none !important; }
footer.elementor-location-footer .elementor-widget-theme-site-logo a {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto !important;
  background: url('/wp-content/themes/essentia-scent/mockup-assets/logo/sigle-noir.png') center/contain no-repeat !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}
footer.elementor-location-footer .elementor-widget-theme-site-logo a:hover { opacity: 0.7 !important; }
footer.elementor-location-footer .elementor-widget-theme-site-logo .elementor-widget-container { text-align: center !important; }

/* === Overrides Elementor pour .es-footer (notre wrapper HTML brut si on l'utilise un jour) === */
.es-footer,
.es-footer *,
.es-footer *::before,
.es-footer *::after {
  font-style: normal !important;
}
.es-footer .es-footer__col h5 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--es-ink) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--es-line) !important;
  line-height: 1.2 !important;
}
.es-footer .es-footer__col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.es-footer .es-footer__col li {
  margin: 0 0 12px !important;
  padding: 0 !important;
  list-style: none !important;
}
.es-footer .es-footer__col a,
.es-footer .es-footer__col a:link,
.es-footer .es-footer__col a:visited {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--es-gray) !important;
  text-decoration: none !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}
.es-footer .es-footer__col a:hover { color: var(--es-ink) !important; }
.es-footer .es-footer__lang {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}
.es-footer .es-footer__copyright {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--es-gray) !important;
}
.es-footer .es-footer__bottom,
.es-footer .es-footer__bottom a,
.es-footer .es-footer__bottom span {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.es-footer .es-footer__bottom a,
.es-footer .es-footer__bottom a:link,
.es-footer .es-footer__bottom a:visited { color: rgba(255,255,255,0.85) !important; text-decoration: none !important; }
.es-footer .es-footer__bottom a:hover { color: #fff !important; }

/* Bande bottom : force full-bleed + fond ink + couleur blanche, déborde le container Elementor parent */
.es-footer .es-footer__bottom {
  background: var(--es-ink) !important;
  color: rgba(255,255,255,0.85) !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 16px 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.es-footer .es-footer__bottom span { color: rgba(255,255,255,0.4) !important; }

/* Reset des wrappers Elementor autour du footer pour qu'il prenne toute la largeur */
.elementor-section:has(.es-footer),
.elementor-section:has(.es-footer) > .elementor-container,
.elementor-widget-html:has(.es-footer),
.elementor-widget-html:has(.es-footer) > .elementor-widget-container,
.e-con:has(.es-footer),
.e-con:has(.es-footer) > .e-con-inner,
.elementor-element:has(> .elementor-widget-container > .es-footer) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  --padding-block-start: 0 !important;
  --padding-block-end: 0 !important;
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
}

/* Fade-in au scroll */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].in { opacity: 1; transform: translateY(0); }

.mockup-info { position: fixed; bottom: 16px; right: 16px; background: var(--es-ink); color: #fff; padding: 8px 14px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; z-index: 999; opacity: 0.85; }
section { scroll-margin-top: 80px; }

/* ═══════════════════════════════════════════════════════════════════ */
/* WORDPRESS / HELLO ELEMENTOR OVERRIDES (préservé du child theme v1) */
/* ═══════════════════════════════════════════════════════════════════ */

/* On annule le margin-top que WP force quand l admin bar est rendue */
html { margin-top: 0 !important; }
@media screen and (max-width: 782px) { html { margin-top: 0 !important; } }

/* Hello Elementor (parent) force body{background-color:#fff} dans reset.css.
   On force le fond crème partout pour éviter les bandes blanches. */
body { background-color: var(--es-bg) !important; }
html, body, #content, .site-main, .page-header, .page-content,
.elementor-page, .wp-site-blocks {
  background-color: var(--es-bg) !important;
}

/* Masquage du titre WP par défaut sur toutes les pages.
   Le vrai titre de chaque page sera construit en hero dans Elementor.
   Les articles (post_type=post) gardent leur titre. */
body.page .page-header,
body.page .entry-title {
  display: none !important;
}

/* Le badge .mockup-info du fichier mockup-home-v1.html est masqué en prod. */
.mockup-info { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════ */
/* ELEMENTOR : reset padding/margin sur les wrappers de nos blocs custom */
/* ═══════════════════════════════════════════════════════════════════ */
/* Quand un widget HTML Elementor contient une de nos sections (.hero, .values,
   .howto, .bestseller, .collections, .diffusers, .quickview-demo, .reviews,
   .quiz-banner, .odorkiller, .b2b, .newsletter), on supprime les paddings/marges
   par défaut d'Elementor pour que nos sections s'enchaînent sans gap. */
.elementor-widget-html:has(.hero),
.elementor-widget-html:has(.values),
.elementor-widget-html:has(.howto),
.elementor-widget-html:has(.bestseller),
.elementor-widget-html:has(.collections),
.elementor-widget-html:has(.diffusers),
.elementor-widget-html:has(.quickview-demo),
.elementor-widget-html:has(.reviews),
.elementor-widget-html:has(.quiz-banner),
.elementor-widget-html:has(.odorkiller),
.elementor-widget-html:has(.b2b),
.elementor-widget-html:has(.newsletter) {
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-widget-html:has(.hero) > .elementor-widget-container,
.elementor-widget-html:has(.values) > .elementor-widget-container,
.elementor-widget-html:has(.howto) > .elementor-widget-container,
.elementor-widget-html:has(.bestseller) > .elementor-widget-container,
.elementor-widget-html:has(.collections) > .elementor-widget-container,
.elementor-widget-html:has(.diffusers) > .elementor-widget-container,
.elementor-widget-html:has(.quickview-demo) > .elementor-widget-container,
.elementor-widget-html:has(.reviews) > .elementor-widget-container,
.elementor-widget-html:has(.quiz-banner) > .elementor-widget-container,
.elementor-widget-html:has(.odorkiller) > .elementor-widget-container,
.elementor-widget-html:has(.b2b) > .elementor-widget-container,
.elementor-widget-html:has(.newsletter) > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-section:has(.hero),
.elementor-section:has(.values),
.elementor-section:has(.howto),
.elementor-section:has(.bestseller),
.elementor-section:has(.collections),
.elementor-section:has(.diffusers),
.elementor-section:has(.quickview-demo),
.elementor-section:has(.reviews),
.elementor-section:has(.quiz-banner),
.elementor-section:has(.odorkiller),
.elementor-section:has(.b2b),
.elementor-section:has(.newsletter) {
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-section:has(.hero) > .elementor-container,
.elementor-section:has(.values) > .elementor-container,
.elementor-section:has(.howto) > .elementor-container,
.elementor-section:has(.bestseller) > .elementor-container,
.elementor-section:has(.collections) > .elementor-container,
.elementor-section:has(.diffusers) > .elementor-container,
.elementor-section:has(.quickview-demo) > .elementor-container,
.elementor-section:has(.reviews) > .elementor-container,
.elementor-section:has(.quiz-banner) > .elementor-container,
.elementor-section:has(.odorkiller) > .elementor-container,
.elementor-section:has(.b2b) > .elementor-container,
.elementor-section:has(.newsletter) > .elementor-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
/* Containers Elementor v3+ (nouvelle structure) */
.e-con:has(.hero),
.e-con:has(.values),
.e-con:has(.howto),
.e-con:has(.bestseller),
.e-con:has(.collections),
.e-con:has(.diffusers),
.e-con:has(.quickview-demo),
.e-con:has(.reviews),
.e-con:has(.quiz-banner),
.e-con:has(.odorkiller),
.e-con:has(.b2b),
.e-con:has(.newsletter) {
  padding: 0 !important;
  margin-block: 0 !important;
  gap: 0 !important;
  --padding-block-start: 0 !important;
  --padding-block-end: 0 !important;
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
  --gap: 0 !important;
  --row-gap: 0 !important;
  --column-gap: 0 !important;
}
/* Le e-con-inner aussi (flex enfant qui peut avoir son propre gap).
   NB : margin-inline reste auto pour conserver le centrage Elementor. */
.e-con:has(.hero) > .e-con-inner,
.e-con:has(.values) > .e-con-inner,
.e-con:has(.howto) > .e-con-inner,
.e-con:has(.bestseller) > .e-con-inner,
.e-con:has(.collections) > .e-con-inner,
.e-con:has(.diffusers) > .e-con-inner,
.e-con:has(.quickview-demo) > .e-con-inner,
.e-con:has(.reviews) > .e-con-inner,
.e-con:has(.quiz-banner) > .e-con-inner,
.e-con:has(.odorkiller) > .e-con-inner,
.e-con:has(.b2b) > .e-con-inner,
.e-con:has(.newsletter) > .e-con-inner {
  padding: 0 !important;
  margin-block: 0 !important;
  gap: 0 !important;
  --gap: 0 !important;
  --row-gap: 0 !important;
}
/* Reset margin sur les .elementor-element enfants quand ils contiennent nos sections */
.elementor-element:has(> .elementor-widget-container > .hero),
.elementor-element:has(> .elementor-widget-container > .values),
.elementor-element:has(> .elementor-widget-container > .howto),
.elementor-element:has(> .elementor-widget-container > .bestseller),
.elementor-element:has(> .elementor-widget-container > .collections),
.elementor-element:has(> .elementor-widget-container > .diffusers),
.elementor-element:has(> .elementor-widget-container > .quickview-demo),
.elementor-element:has(> .elementor-widget-container > .reviews),
.elementor-element:has(> .elementor-widget-container > .quiz-banner),
.elementor-element:has(> .elementor-widget-container > .odorkiller),
.elementor-element:has(> .elementor-widget-container > .b2b),
.elementor-element:has(> .elementor-widget-container > .newsletter) {
  margin-block: 0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* UNIFICATION DES BOUTONS PRIMARY NOIRS                                */
/* Tous les .btn .btn-primary du site partagent EXACTEMENT le même     */
/* rendu et le même hover. Ce bloc est placé en fin de fichier pour    */
/* avoir priorité de cascade sur les overrides spécifiques par section */
/* (.bestseller a.btn-primary, .collections a.btn-primary, etc.).      */
/* ═══════════════════════════════════════════════════════════════════ */
body a.btn.btn-primary,
body a.btn.btn-primary:link,
body a.btn.btn-primary:visited {
  background: var(--es-ink) !important;
  color: #fff !important;
  border: 1px solid var(--es-ink) !important;
  text-decoration: none !important;
  padding: 16px 32px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.2s ease !important;
}
body a.btn.btn-primary:hover,
body a.btn.btn-primary:focus,
body a.btn.btn-primary:focus-visible,
body a.btn.btn-primary:active {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}
/* Le span enfant (ex: prix dynamique dans Bestseller "Ajouter au panier · 19,95 €") hérite couleur + style */
body a.btn.btn-primary span { color: inherit !important; font-style: normal !important; font-family: inherit !important; }
/* Suppression de l'overlay slide ::after du .btn global, parasite sur certains rendus */
body a.btn.btn-primary::after,
body a.btn.btn-primary:hover::after { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════ */
/* 14. QUIZ OLFACTIF — Page /quiz/                                       */
/* Single-page app : 8 écrans (intro + Q1-Q7 + résultat), fade trans.   */
/* Cohérent avec brand book section 05 (tokens canoniques)              */
/* ═══════════════════════════════════════════════════════════════════ */

.quiz-page { min-height: 100vh; background: var(--es-bg); padding: 64px 0 96px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); display: flex; align-items: center; justify-content: center; position: relative; overflow-x: hidden; }
.quiz-container { max-width: 880px; margin: 0 auto; padding: 0 24px; width: 100%; position: relative; z-index: 2; }

/* Header quiz : structure miroir exact du .es-header / .es-header__inner de la home
   pour que le logo soit pixel-identique en taille et position.
   On compense aussi le topbar manquant (36px) avec un top offset. */
.quiz-header {
  position: absolute;
  top: 36px; /* compense l'absence du topbar 36px de la home */
  left: 0;
  right: 0;
  z-index: 5;
}
.quiz-header__inner {
  display: flex;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 40px;
}
.quiz-home-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none !important;
  background: transparent !important;
  transition: opacity 0.2s ease;
}
.quiz-home-link:hover { opacity: 0.7; }
.quiz-home-link__img {
  height: 22px !important;
  width: 159px !important;
  max-width: 159px !important;
  display: block !important;
  object-fit: contain !important;
  transition: filter 0.3s ease;
}
/* Intro : image inversée pour rendre le wordmark blanc + drop-shadow pour contraste */
.quiz-page.on-intro .quiz-home-link__img { filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,0.35)); }
/* Admin bar WP : pas besoin d'offset, .quiz-page est dans le flux normal après l'admin bar */
@media (max-width: 1100px) {
  .quiz-header__inner { padding: 18px 24px; }
}
@media (max-width: 600px) {
  .quiz-header { top: 0; }
  .quiz-header__inner { padding: 16px 20px; }
  .quiz-home-link__img { height: 18px !important; width: auto !important; max-width: 140px !important; }
}
/* Image macro Dior soft (même asset que la home quiz-banner) — full bleed, voile sombre très subtil */
.quiz-page.on-intro::before { content: ''; position: absolute; inset: 0; background: url('../img/quiz-intro-bg.webp') center/cover no-repeat; opacity: 1; z-index: 0; pointer-events: none; filter: brightness(0.85); }
.quiz-page.on-intro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55)); z-index: 1; pointer-events: none; }

/* Intro : texte + CTA en blanc sur image macro */
.quiz-page.on-intro .quiz-eyebrow { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.quiz-page.on-intro .quiz-h2 { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,0.18); }
.quiz-page.on-intro .quiz-sub { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.quiz-page.on-intro .btn.btn-primary,
.quiz-page.on-intro a.btn.btn-primary,
.quiz-page.on-intro button.btn.btn-primary { background: #fff !important; color: var(--es-ink) !important; border-color: #fff !important; box-shadow: 0 12px 36px rgba(0,0,0,0.18) !important; }
.quiz-page.on-intro .btn.btn-primary:hover,
.quiz-page.on-intro a.btn.btn-primary:hover,
.quiz-page.on-intro button.btn.btn-primary:hover { background: #fff !important; color: #000 !important; transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0,0,0,0.28) !important; }
/* Body de la page quiz forcé en cream pour supprimer les bandes noires en haut/bas */
body.page-id-44 { background: var(--es-bg) !important; }
/* html : background cream + overflow-x clip (préserve sticky/fixed enfants vs hidden) pour éviter scroll horizontal mobile */
html { background: var(--es-bg); overflow-x: clip; }

/* Progress bar : 7 dots, le point actif s'agrandit, completed = cacao */
.quiz-progress { display: flex; justify-content: center; gap: 10px; margin-bottom: 56px; }
.quiz-progress__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--es-bg-chip); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.quiz-progress__dot.completed { background: var(--es-cacao); }
.quiz-progress__dot.active { width: 28px; border-radius: 4px; background: var(--es-ink); }

/* Screens : display none/block + fade-in animation */
.quiz-screen { display: none; }
.quiz-screen.active { display: block; animation: quiz-fade-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes quiz-fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Head (eyebrow + h2 + sub) — pattern canonique */
.quiz-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.quiz-eyebrow { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--es-gray) !important; margin: 0 0 18px !important; font-style: normal !important; }
.quiz-h2 { font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important; font-weight: 400 !important; font-size: clamp(44px, 5vw, 72px) !important; line-height: 1.02 !important; letter-spacing: -0.015em !important; color: var(--es-ink) !important; margin: 0 0 18px !important; text-wrap: balance; font-style: normal !important; }
.quiz-h2 em { font-style: italic !important; }
.quiz-sub { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--es-gray) !important; margin: 0 !important; }

/* Options grid */
.quiz-options { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.quiz-options--cols-3 { grid-template-columns: repeat(3, 1fr); }
.quiz-options--cols-2 { grid-template-columns: repeat(2, 1fr); }
.quiz-options--chips { grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) {
  /* Q1 (9 options) reste 3 colonnes en mobile pour grille 3×3 plus lisible */
  .quiz-options--cols-3.quiz-options--mobile-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  /* Autres Q3 cols passent à 2 cols en mobile */
  .quiz-options--cols-3:not(.quiz-options--mobile-3) { grid-template-columns: repeat(2, 1fr); }
  .quiz-options--cols-2 { grid-template-columns: 1fr; }
  .quiz-options--chips { grid-template-columns: repeat(2, 1fr); }
}

/* Option card : icon + label + sub, hover lift, hover/selected forcés pour battre Elementor */
.quiz-option,
.quiz-option:link,
.quiz-option:visited,
.quiz-option:hover,
.quiz-option:focus,
.quiz-option:active { background: #fff !important; color: var(--es-ink) !important; }
.quiz-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 18px; border: 1px solid var(--es-line) !important; cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important; text-align: center; font-family: 'Inter', sans-serif; min-height: 150px; border-radius: 0 !important; position: relative; }
.quiz-option:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); border-color: var(--es-cacao) !important; }
/* Cue silencieux : flèche en bas à droite qui apparaît au hover, signale l'auto-advance */
.quiz-option::after { content: '→'; position: absolute; bottom: 12px; right: 14px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--es-cacao); opacity: 0; transform: translateX(-4px); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
.quiz-option:hover::after { opacity: 1; transform: translateX(0); }
.quiz-option.selected::after { content: '✓'; color: #fff; opacity: 1; transform: translateX(0); }
.quiz-option.selected,
.quiz-option.selected:hover,
.quiz-option.selected:focus { background: var(--es-cacao) !important; color: #fff !important; border-color: var(--es-cacao) !important; transform: translateY(-3px); }
.quiz-option__icon { line-height: 1; color: var(--es-ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.quiz-option__icon svg { width: 42px; height: 42px; stroke: currentColor; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.quiz-option:hover .quiz-option__icon svg { transform: scale(1.05); }
.quiz-option.selected .quiz-option__icon { color: #fff; }
/* Pastille collection (Q3) */
.quiz-option__pastille { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.05em; }
.quiz-option.selected .quiz-option__pastille { box-shadow: 0 0 0 3px rgba(255,255,255,0.3); }
.quiz-option__label { font-family: 'Fraunces', 'Times New Roman', serif; font-weight: 400; font-size: 18px; line-height: 1.2; color: inherit; font-style: normal; letter-spacing: -0.01em; }
.quiz-option__num { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; color: var(--es-cacao); display: block; margin-bottom: 4px; }
.quiz-option.selected .quiz-option__num { color: rgba(255,255,255,0.7); }
.quiz-option__sub { font-family: 'Inter', sans-serif; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--es-gray); }
.quiz-option.selected .quiz-option__sub { color: rgba(255,255,255,0.7); }
/* Mobile 3×3 : compacter les options */
@media (max-width: 760px) {
  .quiz-options--mobile-3 .quiz-option { padding: 14px 8px; min-height: 110px; gap: 6px; }
  .quiz-options--mobile-3 .quiz-option__icon svg { width: 30px; height: 30px; }
  .quiz-options--mobile-3 .quiz-option__label { font-size: 13px; }
  .quiz-options--mobile-3 .quiz-option__sub { display: none; }
}

/* Chip option (multi-select Q6) — hover blanc forcé pour battre Elementor */
.quiz-chip,
.quiz-chip:link,
.quiz-chip:visited,
.quiz-chip:hover,
.quiz-chip:focus,
.quiz-chip:active { background: #fff !important; color: var(--es-ink) !important; border-radius: 0 !important; }
.quiz-chip { padding: 14px 16px; border: 1px solid var(--es-line) !important; cursor: pointer; text-align: center; transition: all 0.2s; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; user-select: none; }
.quiz-chip:hover { border-color: var(--es-cacao) !important; }
.quiz-chip.selected,
.quiz-chip.selected:hover,
.quiz-chip.selected:focus { background: var(--es-cacao) !important; color: #fff !important; border-color: var(--es-cacao) !important; }

/* Bottom bar : Précédent + Continuer (hover blanc forcé pour battre Elementor rose) */
.quiz-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; max-width: 760px; margin-left: auto; margin-right: auto; }
.quiz-prev,
.quiz-prev:link,
.quiz-prev:visited,
.quiz-prev:hover,
.quiz-prev:focus,
.quiz-prev:active { background: transparent !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; text-decoration: underline !important; text-underline-offset: 3px !important; cursor: pointer; border: 0 !important; padding: 8px; transition: color 0.2s; font-style: normal !important; box-shadow: none !important; }
.quiz-prev { color: var(--es-gray) !important; }
.quiz-prev:hover { color: var(--es-ink) !important; }
.quiz-prev[disabled] { opacity: 0.3; cursor: not-allowed; }
/* Restart link même override */
.quiz-restart,
.quiz-restart:link,
.quiz-restart:visited,
.quiz-restart:hover,
.quiz-restart:focus,
.quiz-restart:active { background: transparent !important; font-family: 'Inter', sans-serif !important; text-decoration: underline !important; border: 0 !important; box-shadow: none !important; font-style: normal !important; }
.quiz-restart { color: var(--es-gray) !important; }
.quiz-restart:hover { color: var(--es-ink) !important; }
.quiz-continue { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: #fff; background: var(--es-ink); border: 1px solid var(--es-ink); padding: 14px 28px; cursor: pointer; letter-spacing: 0.02em; transition: all 0.3s; }
.quiz-continue:hover { background: #000; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); }
.quiz-continue[disabled] { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* RÉSULTAT — refonte v3 : halo couleur collection + layout 2 colonnes + size-picker bestseller */
.quiz-result-screen { padding-top: 16px; max-width: 1100px; width: 100%; position: relative; }
.quiz-result-screen::before { content: ''; position: absolute; top: -64px; left: 50%; transform: translateX(-50%); width: 720px; height: 720px; max-width: 100%; border-radius: 50%; background: radial-gradient(circle, var(--quiz-result-col, var(--es-cacao)) 0%, transparent 65%); opacity: 0.12; z-index: 0; pointer-events: none; filter: blur(40px); }
.quiz-result-screen > * { position: relative; z-index: 1; }

.quiz-result__eyebrow { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--es-cacao) !important; margin: 0 0 36px !important; text-align: center; font-style: normal !important; }

.quiz-result__main { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; max-width: 920px; margin: 0 auto 64px; padding: 0 24px; }
@media (max-width: 800px) { .quiz-result__main { grid-template-columns: 1fr; gap: 32px; text-align: center; } }

.quiz-result__visual { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
@media (max-width: 800px) { .quiz-result__visual { align-items: center; } }

.quiz-result__mood-circle { width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 500; letter-spacing: 0.05em; box-shadow: 0 16px 48px rgba(0,0,0,0.12); position: relative; }
.quiz-result__mood-circle::before { content: ''; position: absolute; inset: -12px; border: 1px solid var(--quiz-result-col, var(--es-cacao)); border-radius: 50%; opacity: 0.25; }
@media (max-width: 800px) { .quiz-result__mood-circle { width: 140px; height: 140px; font-size: 24px; } }

.quiz-result__col-label { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--es-gray) !important; margin: 8px 0 0 !important; text-align: center; font-style: normal !important; }

.quiz-result__content { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 800px) { .quiz-result__content { align-items: center; text-align: center; } }

.quiz-result__h2 { font-family: 'Fraunces', 'Times New Roman', serif !important; font-weight: 400 !important; font-size: clamp(44px, 5vw, 72px) !important; line-height: 1.02 !important; letter-spacing: -0.015em !important; color: var(--es-ink) !important; margin: 0 !important; font-style: normal !important; }
.quiz-result__h2 em { font-style: italic !important; }

.quiz-result__tagline { font-family: 'Fraunces', 'Times New Roman', serif !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(17px, 1.5vw, 20px) !important; line-height: 1.45 !important; color: var(--es-gray) !important; margin: 0 !important; max-width: 520px; letter-spacing: -0.005em !important; }

.quiz-result__notes { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
@media (max-width: 800px) { .quiz-result__notes { justify-content: center; } }
.quiz-result__note { padding: 6px 12px; background: var(--es-bg-chip); color: var(--es-cacao); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; border: 1px solid transparent; }

.quiz-result__desc { font-family: 'Inter', sans-serif !important; font-style: normal !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--es-gray) !important; max-width: 520px; margin: 12px 0 0 !important; }

/* Size-picker pattern bestseller */
.quiz-result__sizes-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--es-gray); margin: 20px 0 12px; font-weight: 500; }
.quiz-size-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 20px; }
@media (max-width: 600px) { .quiz-size-picker { grid-template-columns: repeat(2, 1fr); } }
.quiz-size { padding: 14px 10px; background: #fff !important; border: 1px solid var(--es-line) !important; cursor: pointer; text-align: center; transition: all 0.2s; display: flex; flex-direction: column; gap: 4px; }
.quiz-size:hover { border-color: var(--es-cacao) !important; }
.quiz-size.active { background: var(--es-ink) !important; border-color: var(--es-ink) !important; color: #fff !important; }
.quiz-size__label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: inherit; }
.quiz-size__sub { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; color: inherit; }
.quiz-size__price { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; margin-top: 2px; opacity: 0.85; color: inherit; }

.quiz-result__cta-row { margin: 8px 0 0; }
@media (max-width: 800px) { .quiz-result__cta-row { display: flex; justify-content: center; } }

/* Section alternatives — refonte v3 avec mood-circles */
.quiz-alt { margin: 32px 0 0; padding: 48px 0 0; border-top: 1px solid var(--es-line); max-width: 920px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.quiz-alt__head { text-align: center; margin: 0 0 32px; }
.quiz-alt__eyebrow { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--es-gray) !important; margin: 0 !important; font-style: normal !important; }
.quiz-alt__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 600px) { .quiz-alt__cards { grid-template-columns: 1fr; } }
.quiz-alt__card { padding: 28px 24px; background: var(--es-bg-alt); cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.quiz-alt__card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.quiz-alt__card-circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }
.quiz-alt__card-col { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--es-gray) !important; margin: 0 !important; font-style: normal !important; }
.quiz-alt__card-name { font-family: 'Fraunces', serif !important; font-weight: 400 !important; font-size: 26px !important; line-height: 1.05 !important; color: var(--es-ink) !important; margin: 0 !important; letter-spacing: -0.015em !important; font-style: normal !important; }
.quiz-alt__card-name em { font-style: italic !important; }
.quiz-alt__card-notes { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.08em !important; color: var(--es-gray) !important; margin: 0 !important; font-style: normal !important; }
.quiz-alt__card-link { font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: var(--es-ink) !important; text-decoration: underline !important; text-underline-offset: 3px !important; font-style: normal !important; margin-top: 4px !important; }

/* Section diffuseur recommandé */
.quiz-diff { margin: 56px 0 0; padding: 48px 0 0; border-top: 1px solid var(--es-line); }
.quiz-diff__head { text-align: center; margin: 0 0 24px; }
.quiz-diff__card { max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; align-items: center; background: var(--es-bg-alt); padding: 24px; }
@media (max-width: 600px) { .quiz-diff__card { grid-template-columns: 1fr; text-align: center; } }
.quiz-diff__img { aspect-ratio: 1/1; background: var(--es-bg-chip); }
.quiz-diff__info { display: flex; flex-direction: column; gap: 6px; }
.quiz-diff__cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--es-cacao); margin: 0; }
.quiz-diff .quiz-diff__name { font-family: 'Fraunces', serif; font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--es-ink); margin: 0; letter-spacing: -0.015em; }
.quiz-diff__spec { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--es-gray); text-transform: uppercase; margin: 4px 0; }
.quiz-diff__price { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 500; color: var(--es-ink); margin: 4px 0; }
.quiz-diff__link { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--es-ink); text-decoration: underline; text-underline-offset: 3px; margin-top: 6px; }
.quiz-diff__link:hover { color: var(--es-cacao); }

/* Restart link en bas */
.quiz-restart { display: block; text-align: center; margin: 64px auto 0; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--es-gray); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; padding: 8px 16px; }
.quiz-restart:hover { color: var(--es-ink); }

/* Override Elementor pour battre l'accent typography sur la page quiz */
.quiz-page,
.quiz-page * {
  font-style: normal !important;
}
.quiz-page .quiz-h2 em,
.quiz-page .quiz-result__h2 em,
.quiz-page .quiz-alt__card-name em { font-style: italic !important; }
.quiz-page .quiz-result__tagline { font-style: italic !important; }

/* Reset wrappers Elementor sur la page quiz */
.elementor-section:has(.quiz-page),
.elementor-section:has(.quiz-page) > .elementor-container,
.elementor-widget-html:has(.quiz-page),
.elementor-widget-html:has(.quiz-page) > .elementor-widget-container,
.e-con:has(.quiz-page),
.e-con:has(.quiz-page) > .e-con-inner {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────────
   Menu : entrée "Quiz olfactif" — distincte par weight + flèche
   - Header transparent (hero) : blanc + bold + flèche
   - Header scrolled (cream)   : cacao + bold + flèche
   - Mobile drawer             : cacao + flèche pleine opacité
   ───────────────────────────────────────────────────────────────── */
/* Desktop : weight 500 + reset complet du ::after natif (underline absolute) */
header.elementor-location-header .es-nav > a.menu-item-quiz,
header.elementor-location-header .es-nav > a.menu-item-quiz:link,
header.elementor-location-header .es-nav > a.menu-item-quiz:visited,
header.elementor-location-header .es-nav > a.menu-item-quiz:hover,
header.elementor-location-header .es-nav > a.menu-item-quiz:focus,
header.elementor-location-header .es-nav > a.menu-item-quiz:active {
  font-weight: 500 !important;
}
/* Reset complet du ::after hérité de .es-nav > a (position absolute underline) */
header.elementor-location-header .es-nav > a.menu-item-quiz::after {
  content: ' →' !important;
  position: static !important;
  display: inline !important;
  background: transparent !important;
  height: auto !important;
  width: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin-left: 4px;
  color: inherit !important;
}
header.elementor-location-header .es-nav > a.menu-item-quiz:hover::after {
  transform: translateX(3px) !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* État scrolled → cacao distinctif (hover header retiré, demande Nabila 2026-07-24 : opaque au scroll seulement) */
.es-stickyhead.scrolled .es-nav > a.menu-item-quiz {
  color: var(--es-cacao) !important;
}
.es-stickyhead.scrolled .es-nav > a.menu-item-quiz:hover {
  color: var(--es-cacao-dark) !important;
}

/* Mobile drawer : on garde le ::after natif (flèche à droite via space-between flex), juste cacao + opacity 1 */
.es-drawer__nav > a.menu-item-quiz,
.es-drawer .es-drawer__nav > a.menu-item-quiz {
  color: var(--es-cacao) !important;
  font-weight: 500 !important;
}
.es-drawer__nav > a.menu-item-quiz::after,
.es-drawer .es-drawer__nav > a.menu-item-quiz::after {
  color: var(--es-cacao) !important;
  opacity: 1 !important;
}

/* Footer : entrée "Quiz olfactif" en cacao + flèche pour la mettre en évidence */
footer.elementor-location-footer a.menu-item-quiz,
footer.elementor-location-footer a.menu-item-quiz:link,
footer.elementor-location-footer a.menu-item-quiz:visited,
footer.elementor-location-footer a.menu-item-quiz:hover,
footer.elementor-location-footer a.menu-item-quiz:focus,
footer.elementor-location-footer a.menu-item-quiz:active {
  color: var(--es-cacao) !important;
  font-weight: 500 !important;
}
footer.elementor-location-footer a.menu-item-quiz::after {
  content: ' →';
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
footer.elementor-location-footer a.menu-item-quiz:hover {
  color: var(--es-cacao-dark) !important;
}
footer.elementor-location-footer a.menu-item-quiz:hover::after {
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 15. PAGE MAISON ESSENTIA SCENT                                       */
/* Timeline immersive avec fil conducteur visuel (ligne cacao centrale) */
/* Structure : hero + intro + timeline 4 actes + engagements + CTA      */
/* ═══════════════════════════════════════════════════════════════════ */

.maison-page { width: 100%; }
.maison-page * { box-sizing: border-box; }

/* Tokens canoniques (alignés sur les sections home : bestseller, diffusers, collections, etc.) */
.maison-eyebrow { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--es-gray) !important; margin: 0 0 16px !important; font-style: normal !important; }
.maison-h2 { font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important; font-weight: 400 !important; font-style: normal !important; font-size: clamp(44px, 5vw, 72px) !important; line-height: 1.02 !important; letter-spacing: -0.015em !important; color: var(--es-ink) !important; text-transform: none !important; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; font-feature-settings: "ss01", "swsh" 1; font-optical-sizing: auto; margin: 0 0 18px; text-wrap: balance; }
.maison-h2 em { font-style: italic !important; font-family: inherit !important; text-transform: none !important; font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important; }
.maison-tagline { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; color: var(--es-gray); margin: 0; max-width: 640px; }
.maison-tagline em { font-style: italic; font-feature-settings: "ss01", "swsh" 2, "calt" 1; }

/* ─── HERO ─── */
.maison-hero { position: relative; min-height: 72vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--es-ink); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.maison-hero::before { content: ''; position: absolute; inset: 0; background: url('../img/quiz-banner-bg.jpg') center/cover no-repeat; filter: brightness(0.78); }
.maison-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.58) 100%); }
.maison-hero__inner { position: relative; z-index: 2; max-width: 760px; padding: 100px 32px; text-align: center; color: #fff; }
.maison-hero__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin: 0 0 28px; }
.maison-hero__h1 { font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important; font-weight: 400 !important; font-style: normal !important; font-size: clamp(56px, 7vw, 96px) !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: #fff !important; text-transform: none !important; margin: 0 0 28px; text-wrap: balance; }
.maison-hero__h1 em { font-style: italic !important; font-family: inherit !important; text-transform: none !important; }
.maison-hero__sub { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; color: rgba(255,255,255,0.88); margin: 0; }

/* ─── INTRO ─── */
.maison-intro { padding: 120px 0 60px; background: var(--es-bg); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.maison-intro--first { padding-top: 140px; }

/* ─── HERO IMAGE — macro Dior iris poudré + voile sombre + fade-out vers cream ─── */
.maison-hero-img { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 90vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--es-ink); }
.maison-hero-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/maison-hero.webp') center/cover no-repeat;
  z-index: 0;
}
/* Voile dégradé : sombre en haut/centre pour lisibilité texte blanc, fade-out vers cream en bas */
.maison-hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.22) 35%,
    rgba(0,0,0,0.18) 55%,
    rgba(250,250,248,0.40) 80%,
    var(--es-bg) 100%
  );
  z-index: 1;
}
.maison-hero-img__inner { position: relative; z-index: 2; max-width: 820px; padding: 100px 32px; text-align: center; }
.maison-hero-img__eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.88) !important;
  margin: 0 0 32px !important;
  font-style: normal !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.maison-hero-img__h1 {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(52px, 6.5vw, 88px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.015em !important;
  color: #fff !important;
  text-transform: none !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-feature-settings: "ss01", "swsh" 1;
  font-optical-sizing: auto;
  margin: 0 0 28px;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,0.22);
}
.maison-hero-img__h1 em { font-style: italic !important; font-family: inherit !important; font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important; }
.maison-hero-img__tagline {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  margin: 0 auto;
  max-width: 620px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.maison-hero-img__tagline em { font-style: italic; font-feature-settings: "ss01", "swsh" 2, "calt" 1; }
/* Le hero se confond avec le cream en bas → transition fluide vers la timeline */
.maison-hero-img + .maison-timeline { padding-top: 40px; }
.maison-intro__inner { max-width: 720px; margin: 0 auto; padding: 0 32px; text-align: center; }
.maison-intro__inner .maison-eyebrow { color: var(--es-cacao); }
.maison-intro__inner .maison-tagline { margin: 18px auto 0; max-width: 580px; }

/* ─── TIMELINE — fil conducteur visuel + 4 actes alternés ─── */
.maison-timeline { padding: 60px 0 120px; background: var(--es-bg); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; overflow: hidden; }
.maison-timeline__inner { max-width: 1100px; margin: 0 auto; padding: 60px 32px; position: relative; --scroll-progress: 0%; }
/* Le rail cacao vertical central — toujours visible à opacité faible */
.maison-timeline__inner::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent 0%, var(--es-cacao) 5%, var(--es-cacao) 95%, transparent 100%); opacity: 0.18; transform: translateX(-50%); z-index: 0; }
/* La ligne progress qui "se remplit" en cacao opaque selon le scroll */
.maison-timeline__inner::after { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: var(--scroll-progress); background: var(--es-cacao); transform: translateX(-50%); z-index: 1; transition: height 0.15s linear; pointer-events: none; }

.maison-act { position: relative; width: 50%; padding: 80px 70px; margin-bottom: 60px; opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.maison-act.is-visible { opacity: 1; transform: translateY(0); }
.maison-act--right { margin-left: 50%; padding-left: 90px; text-align: left; }
.maison-act--left { padding-right: 90px; text-align: right; }

.maison-act__dot { position: absolute; top: 100px; width: 14px; height: 14px; background: var(--es-bg); border: 1.5px solid var(--es-cacao); border-radius: 50%; z-index: 3; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.maison-act--right .maison-act__dot { left: -7px; }
.maison-act--left .maison-act__dot { right: -7px; }
.maison-act.is-visible .maison-act__dot { background: var(--es-cacao); transform: scale(1.4); box-shadow: 0 0 0 6px rgba(124, 102, 80, 0.12); }

/* ─── NUMÉROS ROMAINS — chapitre éditorial dans la moitié vide opposée au texte ─── */
.maison-act__numeral {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(140px, 18vw, 280px);
  line-height: 0.85;
  color: var(--es-cacao);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1;
  font-optical-sizing: auto;
  transition: opacity 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  letter-spacing: -0.03em;
}
.maison-act--right .maison-act__numeral { right: calc(100% + 60px); }
.maison-act--left .maison-act__numeral { left: calc(100% + 60px); }
.maison-act.is-visible .maison-act__numeral { opacity: 0.07; }

/* ─── STAGGER REVEAL — chaque élément du contenu apparait avec un délai séquentiel ─── */
.maison-act__year,
.maison-act__location,
.maison-act__title,
.maison-act__body,
.maison-act__caption {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.maison-act.is-visible .maison-act__year     { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.maison-act.is-visible .maison-act__location { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.maison-act.is-visible .maison-act__title    { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.maison-act.is-visible .maison-act__body     { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.maison-act.is-visible .maison-act__caption  { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }

@media (max-width: 800px) {
  .maison-act__numeral { display: none; }
  /* Mobile : rail + ligne progress repositionnés à gauche (au lieu de centre) */
  .maison-timeline__inner::before,
  .maison-timeline__inner::after { left: 20px !important; transform: none !important; }
}

.maison-act__year { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(80px, 11vw, 160px); line-height: 0.9; letter-spacing: -0.03em; color: var(--es-cacao); margin: 0 0 20px; font-feature-settings: "ss01", "swsh" 2, "calt" 1; font-optical-sizing: auto; }
.maison-act__location { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--es-gray); margin: 0 0 28px; }
.maison-act__title { font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important; font-weight: 400 !important; font-style: normal !important; font-size: clamp(28px, 3.5vw, 44px) !important; line-height: 1.05 !important; letter-spacing: -0.015em !important; color: var(--es-ink) !important; text-transform: none !important; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; font-feature-settings: "ss01", "swsh" 1; font-optical-sizing: auto; margin: 0 0 24px; text-wrap: balance; }
.maison-act__title em { font-style: italic !important; font-family: inherit !important; text-transform: none !important; font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important; }
.maison-act__body { margin: 0 0 28px; }
.maison-act__body p { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.7; color: var(--es-gray); margin: 0 0 14px; }
.maison-act__body p:last-child { margin-bottom: 0; }
.maison-act__body em { font-family: 'Fraunces', serif; font-style: italic; color: var(--es-ink); }
.maison-act__caption { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; color: var(--es-cacao); margin: 0; padding-top: 24px; border-top: 1px solid var(--es-line); }
.maison-act__caption em { font-style: italic; }
.maison-act__caption--final { color: var(--es-ink); font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); }
.maison-act__caption--final em { color: var(--es-cacao); }

@media (max-width: 800px) {
  .maison-timeline__inner::before { left: 20px; transform: none; }
  .maison-act { width: 100%; margin-left: 0 !important; padding: 40px 0 40px 56px !important; text-align: left !important; margin-bottom: 24px; }
  .maison-act__dot { left: 14px !important; right: auto !important; top: 60px; }
  .maison-act__year { font-size: clamp(40px, 9vw, 56px); }
}

/* ─── ENGAGEMENTS — manifesto éditorial : liste verticale, grand numéro italique Fraunces ─── */
.maison-engagements { padding: 100px 0 120px; background: var(--es-bg-alt); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.maison-engagements__head { max-width: 720px; margin: 0 auto 80px; padding: 0 32px; text-align: center; }
.maison-engagements__head .maison-eyebrow { color: var(--es-cacao) !important; }
.maison-engagements__grid { max-width: 940px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; }

/* Chaque pilier : ligne pleine largeur avec grand numéro italique Fraunces cacao à gauche + contenu à droite */
.maison-engagement {
  display: grid;
  grid-template-columns: minmax(80px, 140px) 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 44px 0;
  border-bottom: 1px solid var(--es-line);
  align-items: baseline;
}
.maison-engagement:first-child { border-top: 1px solid var(--es-line); }
.maison-engagement__content { min-width: 0; }

.maison-engagement__num {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 5.5vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--es-cacao);
  font-feature-settings: "ss01", "swsh" 2, "calt" 1;
  font-optical-sizing: auto;
  margin: 0;
  text-align: left;
}

.maison-engagement__title {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-feature-settings: "ss01", "swsh" 1;
  font-optical-sizing: auto;
  margin: 0 0 10px;
  text-wrap: balance;
}
.maison-engagement__body {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--es-gray);
  margin: 0;
  max-width: 620px;
}

@media (max-width: 600px) {
  .maison-engagement { grid-template-columns: 1fr; gap: 12px; padding: 36px 0; }
  .maison-engagement__num { font-size: clamp(42px, 11vw, 56px); }
  .maison-engagement__body { font-size: 14px; }
}

/* ─── CTA FINAL ─── */
.maison-cta { padding: 120px 0; background: var(--es-bg); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); text-align: center; }
.maison-cta__inner { max-width: 720px; margin: 0 auto; padding: 0 32px; }
.maison-cta__inner .maison-eyebrow { color: var(--es-cacao); }
.maison-cta__inner .maison-tagline { margin: 18px auto 36px; max-width: 560px; }
.maison-cta__row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.maison-cta__row .btn { min-width: 220px; }
.maison-cta__row a.btn.btn-light,
.maison-cta__row a.btn.btn-light:link,
.maison-cta__row a.btn.btn-light:visited,
.maison-cta__row a.btn.btn-light:hover,
.maison-cta__row a.btn.btn-light:focus,
.maison-cta__row a.btn.btn-light:active { background: transparent !important; color: var(--es-ink) !important; border: 0 !important; padding: 16px 0 !important; text-decoration: underline !important; text-underline-offset: 6px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; min-width: auto; }
/* Ce CTA est déguisé en lien texte, mais il garde la classe .btn-light : au survol,
   .btn-light:hover lui appliquait encore son ombre portée et son soulèvement de
   1 px. Sur un bouton plein c'est le comportement voulu ; sur un lien texte, ça
   faisait apparaître un rectangle blanc ombré autour des mots. La règle ci-dessus
   remettait à plat le fond, la bordure et les marges, mais pas ces deux
   propriétés-là. */
.maison-cta__row a.btn.btn-light,
.maison-cta__row a.btn.btn-light:link,
.maison-cta__row a.btn.btn-light:visited,
.maison-cta__row a.btn.btn-light:hover,
.maison-cta__row a.btn.btn-light:focus,
.maison-cta__row a.btn.btn-light:active {
  box-shadow: none !important;
  transform: none !important;
}
/* Le survol se marque par la couleur, comme les autres liens texte du site. */
@media (hover: hover) {
  .maison-cta__row a.btn.btn-light:hover { color: var(--es-cacao) !important; }
}


/* ============================================================================
   14. FICHE PRODUIT (PDP) — alignée sur les patterns de la home v1
   ----------------------------------------------------------------------------
   Stratégie : réutiliser au maximum les classes du design system home
   (.serif / .eyebrow / .container / .btn / .size-picker / .size-option /
   .bestseller__rating / .bestseller__desc / .bestseller__trust / .note-tag).
   Les classes .pdp-* ne définissent QUE ce qui n'existe pas déjà sur la home.
   ============================================================================ */

/* ─── 14.0 Hero variant (.bestseller--pdp) ─── */
.bestseller--pdp { padding: 32px 0 48px; }

/* Image PRINCIPALE : carré + cap sur la hauteur du viewport pour que le hero tienne en 1 écran */
.bestseller--pdp .bestseller__img {
  aspect-ratio: 1 / 1;
  background-color: var(--es-bg-chip);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 240px);
  min-height: 420px;
}

/* Sur viewport haut > 1000px, l'image peut être un peu plus généreuse mais limitée */
@media (min-height: 1000px) {
  .bestseller--pdp .bestseller__img { max-height: 720px; }
}

/* Compacter espacements internes colonne info pour rentrer dans 1 viewport */
.bestseller--pdp .bestseller__rating { margin-bottom: 12px; }
.bestseller--pdp .bestseller__desc { margin-bottom: 18px; }
.bestseller--pdp .bestseller__notes { margin-bottom: 16px; }
.bestseller--pdp .bestseller__notes-label { margin-bottom: 8px; }
.bestseller--pdp .size-picker { margin-bottom: 14px; }
.bestseller--pdp .pdp-stock { margin: -2px 0 14px; }
.bestseller--pdp .bestseller__trust { margin-top: 10px; margin-bottom: 12px; padding: 12px 0 12px; }
.bestseller--pdp .pdp-microactions { margin: 8px 0 10px; }
.bestseller--pdp .pdp-payments { margin-top: 8px; }
.bestseller--pdp .pdp-standards-link { margin-top: 10px; }
.product-pdp .bestseller h2 { margin-bottom: 10px; }

/* Thumbs plus compactes pour ne pas exploser la hauteur */
.product-pdp .pdp-thumbs { margin-top: 14px; gap: 10px; }
.product-pdp .pdp-thumb { flex: 0 0 60px; width: 60px; height: 60px; }

/* Empêche le bleed italique Elementor sur la PDP */
.product-pdp em { font-style: italic; font-feature-settings: "ss01", "swsh" 2, "calt" 1; }
.product-pdp h1, .product-pdp h2, .product-pdp h3, .product-pdp h4,
.product-pdp p, .product-pdp span, .product-pdp li, .product-pdp button, .product-pdp a { font-style: normal; }
.product-pdp .serif em, .product-pdp .bestseller__desc em { font-style: italic; }

/* ─── 14.1 Breadcrumb ─── */
.pdp-breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--es-gray);
  margin-bottom: 40px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pdp-breadcrumb a,
.pdp-breadcrumb a:link,
.pdp-breadcrumb a:visited,
.pdp-breadcrumb a:hover,
.pdp-breadcrumb a:focus,
.pdp-breadcrumb a:active {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  color: var(--es-gray);
  transition: color 0.2s;
}
.pdp-breadcrumb a:hover { color: var(--es-ink); }
.pdp-breadcrumb__current { color: var(--es-ink); font-weight: 500; }
.pdp-breadcrumb span:not(.pdp-breadcrumb__current) { color: var(--es-gray-2); }

/* ─── 14.2 Thumbs sous l'image principale (galerie) ─── */
.pdp-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pdp-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  background: transparent;
  border: 1px solid var(--es-line);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.25s ease, opacity 0.25s ease;
  opacity: 0.6;
}
.pdp-thumb:hover { opacity: 1; border-color: var(--es-line); }
.pdp-thumb.is-active { opacity: 1; border-color: var(--es-ink); border-width: 1px; }
.pdp-thumb__inner {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--es-bg-chip);
}
.pdp-thumb__inner--video { background-color: var(--es-bg-chip); }
.pdp-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--es-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding-left: 2px;
  line-height: 1;
}

/* ─── 14.3 Indicateur stock (sous le sélecteur de taille) ─── */
.pdp-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -12px 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pdp-stock__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--es-gray);
}
.pdp-stock[data-status="ok"] .pdp-stock__dot { background: var(--es-success); }
.pdp-stock[data-status="ok"] .pdp-stock__label { color: var(--es-success); }
.pdp-stock[data-status="low"] .pdp-stock__dot { background: var(--es-promo); }
.pdp-stock[data-status="low"] .pdp-stock__label { color: var(--es-promo); }
.pdp-stock[data-status="out"] .pdp-stock__dot { background: var(--es-gray-2); }
.pdp-stock[data-status="out"] .pdp-stock__label { color: var(--es-gray-2); }

/* size-option indisponible — reste cliquable pour pré-commande */
.size-option--out { opacity: 0.65; cursor: pointer; }
.size-option--out:hover { border-color: var(--es-cacao); opacity: 0.85; }
.size-option--out.active { opacity: 1; border-color: var(--es-promo) !important; }
.size-option--out .size-option__label small { color: var(--es-promo) !important; font-weight: 500; }

/* ─── 14.4 Microactions (wishlist + share + sample) ─── */
.pdp-microactions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 4px 0 12px;
  align-items: center;
}
.pdp-microaction {
  background: transparent;
  border: 0;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--es-gray);
  transition: color 0.2s;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp-microaction:hover { color: var(--es-ink); }
.pdp-microaction.is-active { color: var(--es-cacao); }
.pdp-microaction svg { width: 16px; height: 16px; }

/* ─── 14.5 Paiements ─── */
.pdp-payments {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.pdp-payments__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--es-gray-2);
}
.pdp-payments__logos {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pdp-payments__logos img {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.pdp-payments__logos img:hover { opacity: 1; }

/* ============================================================================
   14.10 Sections sous le hero — pattern identique à la home
   ============================================================================ */

.pdp-section { padding: 80px 0; }
.pdp-section--alt { background: var(--es-bg-alt); }
.pdp-section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}
.pdp-section__head h2 {
  font-size: clamp(44px, 5vw, 72px);
  margin-bottom: 12px;
  line-height: 1;
}
.pdp-section__head h2 em { color: inherit; }
.pdp-section__head p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--es-gray);
  margin: 0;
}
.pdp-section__head .pdp-reviews-stars {
  color: var(--es-cacao);
  letter-spacing: 6px;
  font-size: 18px;
  margin: 8px 0;
}

/* ─── 14.11 Prose éditoriale ─── */
.pdp-section__prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--es-ink);
  text-align: left;
}
.pdp-section__prose p { color: var(--es-ink); margin-bottom: 1.2em; }
.pdp-section__prose p:last-child { margin-bottom: 0; }

/* ─── 14.12 Notes olfactives (grille 3 cards) ─── */
.pdp-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 820px) { .pdp-notes-grid { grid-template-columns: 1fr; gap: 18px; } }

.pdp-note-card {
  padding: 32px 0;
  border-top: 1px solid var(--es-line);
  text-align: left;
}
.pdp-note-card__level {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--es-gray);
  margin-bottom: 14px;
}
.pdp-note-card__name {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--es-ink);
  line-height: 1;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pdp-note-card__info {
  width: 22px; height: 22px;
  border: 1px solid var(--es-gray-2);
  border-radius: 50%;
  background: transparent;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--es-gray);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.2s, color 0.2s;
}
.pdp-note-card__info:hover { border-color: var(--es-cacao); color: var(--es-cacao); }
.pdp-note-card__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--es-gray);
  margin: 0;
}

/* ─── 14.13 Vidéo ─── */
.pdp-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--es-bg-alt);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto;
}
.pdp-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--es-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  padding-left: 6px;
  transition: transform 0.2s;
}
.pdp-video:hover .pdp-video__play { transform: translate(-50%, -50%) scale(1.05); }
.pdp-video__caption {
  text-align: center;
  font-size: 10px;
  color: var(--es-gray-2);
  margin-top: 14px;
  letter-spacing: 0.12em;
}

/* ─── 14.14 Mode d'emploi ─── */
.pdp-usage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 980px) { .pdp-usage { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .pdp-usage { grid-template-columns: 1fr; } }
.pdp-usage__card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--es-line);
}
.pdp-usage__card .num-mono {
  font-size: 12px;
  color: var(--es-cacao);
  letter-spacing: 0.08em;
}
.pdp-usage__title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--es-ink);
  margin: 0;
  line-height: 1.15;
}
.pdp-usage__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--es-gray);
  margin: 0;
}

/* ─── 14.15 Diffuseurs compatibles (2 cards) ─── */
.pdp-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 720px) { .pdp-diff-grid { grid-template-columns: 1fr; } }
.pdp-diff-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  background: var(--es-bg);
  border: 1px solid var(--es-line);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pdp-diff-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(124, 102, 80, 0.1); }
@media (max-width: 560px) { .pdp-diff-card { grid-template-columns: 1fr; } }
.pdp-diff-card__img {
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.pdp-diff-card__body { display: flex; flex-direction: column; gap: 6px; }
.pdp-diff-card__body .num-mono { font-size: 11px; letter-spacing: 0.08em; color: var(--es-gray); margin-bottom: 2px; }
.pdp-diff-card__name {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--es-ink);
  margin: 0;
  line-height: 1;
}
.pdp-diff-card__price { font-size: 16px; color: var(--es-ink); margin: 4px 0 8px; }
.pdp-diff-card__cta { font-size: 13px; color: var(--es-ink); text-decoration: underline; text-underline-offset: 3px; }
.pdp-diff-card:hover .pdp-diff-card__cta { color: var(--es-cacao); }

/* ─── 14.16 Bandeau quiz (cacao plein, pattern home quiz-banner) ─── */
.pdp-quizband {
  background: var(--es-cacao);
  color: #fff;
  padding: 96px 0;
}
.pdp-quizband .container { text-align: center; }
.pdp-quizband__inner { max-width: 640px; margin: 0 auto; }
.pdp-quizband h2 {
  font-size: clamp(36px, 4vw, 56px);
  color: #fff;
  margin: 12px 0 14px;
  line-height: 1;
}
.pdp-quizband h2 em { color: #fff; font-style: italic; }
.pdp-quizband__body {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto 32px;
  max-width: 480px;
}
.pdp-quizband .btn-light { font-size: 13px; padding: 16px 32px; }

/* ─── 14.17 Avis ─── */
.pdp-section__head h2 em + .pdp-reviews-stars { /* extra hook si besoin */ }
.pdp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) { .pdp-reviews-grid { grid-template-columns: 1fr; } }
.pdp-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: var(--es-bg);
  border: 1px solid var(--es-line);
}
.pdp-section--alt .pdp-review { background: #fff; }
.pdp-review__stars { color: var(--es-cacao); letter-spacing: 3px; font-size: 13px; }
.pdp-review__quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--es-ink);
  margin: 0;
}
.pdp-review .num-mono { font-size: 10px; color: var(--es-gray); margin-top: auto; }

/* ─── 14.18 Cross-sell huiles similaires ─── */
.pdp-similar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .pdp-similar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .pdp-similar-grid { grid-template-columns: 1fr; } }
.pdp-similar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s;
}
.pdp-similar:hover { transform: translateY(-4px); }
.pdp-similar__img {
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 4px;
}
.pdp-similar .num-mono {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--es-cacao);
}
.pdp-similar__name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--es-ink);
  margin: 0;
  line-height: 1.15;
}
.pdp-similar__price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--es-gray);
}

/* ─── 14.19 Découvrir la Collection ─── */
.pdp-collection-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) { .pdp-collection-block { grid-template-columns: 1fr; gap: 32px; } }
.pdp-collection-block__visual {
  aspect-ratio: 4 / 5;
}
.pdp-collection-block__body h2 {
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  margin: 14px 0;
}
.pdp-collection-block__body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--es-gray);
  margin: 0 0 28px;
  max-width: 480px;
}
.pdp-collection-block__body .btn-primary { padding: 16px 32px; font-size: 13px; }

/* ─── 14.20 FAQ accordéon ─── */
.pdp-faq { max-width: 820px; margin: 0 auto; }
.pdp-faq__item { border-top: 1px solid var(--es-line); }
.pdp-faq__item:last-child { border-bottom: 1px solid var(--es-line); }
.pdp-faq__q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 26px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--es-ink);
  text-align: left;
  transition: color 0.2s;
  line-height: 1.3;
}
.pdp-faq__q:hover { color: var(--es-cacao); }
.pdp-faq__caret {
  width: 16px; height: 16px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.pdp-faq__caret::before, .pdp-faq__caret::after {
  content: '';
  position: absolute;
  background: var(--es-ink);
  transition: opacity 0.3s;
}
.pdp-faq__caret::before { top: 50%; left: 0; width: 100%; height: 1px; }
.pdp-faq__caret::after { left: 50%; top: 0; width: 1px; height: 100%; }
.pdp-faq__item[data-open="true"] .pdp-faq__caret::after { opacity: 0; }
.pdp-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.pdp-faq__item[data-open="true"] .pdp-faq__a { max-height: 600px; }
.pdp-faq__a-inner {
  padding: 0 0 28px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--es-gray);
  max-width: 720px;
}
.pdp-faq__inline-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--es-cacao);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font: inherit;
}

/* ============================================================================
   14.30 Modales (Standards & allergènes, Note olfactive, Partager)
   ============================================================================ */

.pdp-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pdp-modal.is-open { display: flex; }
.pdp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.5);
  cursor: pointer;
  animation: pdpFade 0.2s ease;
}
@keyframes pdpFade { from { opacity: 0; } to { opacity: 1; } }
.pdp-modal__dialog {
  position: relative;
  background: var(--es-bg);
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 56px 56px 48px;
  animation: pdpSlide 0.3s ease;
}
@keyframes pdpSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 600px) { .pdp-modal__dialog { padding: 40px 28px 32px; } }
.pdp-modal__close {
  position: absolute;
  top: 18px; right: 18px;
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  cursor: pointer;
  color: var(--es-gray);
  font-size: 24px;
  line-height: 1;
  transition: color 0.2s;
}
.pdp-modal__close:hover { color: var(--es-ink); }
.pdp-modal__dialog .eyebrow { color: var(--es-cacao); }
.pdp-modal__dialog h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  margin: 0 0 22px;
}
.pdp-modal__intro {
  font-size: 16px;
  line-height: 1.65;
  color: var(--es-gray);
  margin: 0 0 28px;
}
.pdp-modal__checks {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdp-modal__checks li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--es-ink);
}
.pdp-modal__checks li::before {
  content: '✓';
  color: var(--es-cacao);
  font-weight: 500;
  flex-shrink: 0;
}
.pdp-modal__section { margin-bottom: 24px; }
.pdp-modal__section-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--es-ink);
  margin: 0 0 14px;
}
.pdp-modal__nots {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
}
@media (max-width: 600px) { .pdp-modal__nots { grid-template-columns: repeat(2, 1fr); } }
.pdp-modal__nots li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--es-gray);
}
.pdp-modal__nots li::before {
  content: '×';
  color: var(--es-gray-2);
  font-size: 13px;
  flex-shrink: 0;
}
.pdp-modal__allergens {
  font-size: 15px;
  line-height: 1.55;
  color: var(--es-ink);
  margin: 4px 0 8px;
}
.pdp-modal__disclaimer {
  font-size: 12px;
  font-style: italic;
  color: var(--es-gray-2);
  line-height: 1.4;
  margin: 0;
}

.pdp-modal__share {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.pdp-modal__share-btn {
  background: var(--es-bg-alt);
  border: 0;
  padding: 16px 20px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--es-ink);
  text-align: left;
  transition: background 0.2s;
}
.pdp-modal__share-btn:hover { background: var(--es-bg-chip); }
.pdp-modal__share-btn--wide { grid-column: 1 / -1; text-align: center; }
.pdp-modal__copied {
  margin-top: 14px;
  font-size: 11px;
  color: var(--es-cacao);
  opacity: 0;
  transition: opacity 0.3s;
  letter-spacing: 0.12em;
}
.pdp-modal__copied.is-visible { opacity: 1; }

/* ============================================================================
   14.40 Override Elementor pour la PDP (battre l'accent italic Cormorant)
   ============================================================================ */
.product-pdp .pdp-section__head h2,
.product-pdp .pdp-section__head h2 em,
.product-pdp .pdp-quizband h2,
.product-pdp .pdp-quizband h2 em,
.product-pdp .pdp-collection-block__body h2,
.product-pdp .pdp-collection-block__body h2 em,
.product-pdp .pdp-modal__dialog h2,
.product-pdp .pdp-modal__dialog h2 em,
.product-pdp .pdp-note-card__name,
.product-pdp .pdp-similar__name,
.product-pdp .pdp-usage__title,
.product-pdp .pdp-diff-card__name,
.product-pdp .pdp-faq__q,
.product-pdp .pdp-review__quote {
  font-family: 'Fraunces', serif !important;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1;
}
.product-pdp .pdp-section__head h2,
.product-pdp .pdp-quizband h2,
.product-pdp .pdp-collection-block__body h2,
.product-pdp .pdp-modal__dialog h2,
.product-pdp .pdp-note-card__name,
.product-pdp .pdp-similar__name,
.product-pdp .pdp-usage__title,
.product-pdp .pdp-diff-card__name,
.product-pdp .pdp-faq__q { font-style: normal !important; }
.product-pdp .pdp-section__head h2 em,
.product-pdp .pdp-quizband h2 em,
.product-pdp .pdp-collection-block__body h2 em,
.product-pdp .pdp-modal__dialog h2 em,
.product-pdp .pdp-review__quote { font-style: italic !important; }

/* ─── 14.50 Neutralise tout markup PhotoSwipe résiduel (WC native gallery désactivée) ─── */
.pswp, #photoswipe-fullscreen-dialog,
.woocommerce-product-gallery__trigger { display: none !important; }

/* ============================================================================
   14.51 PATCH 2 — Corrections après audit Nabila :
   - Bouton (i) inline dans .note-tag du hero
   - Hover anti-fuchsia sur les boutons custom (Hello Elementor pollue)
   - Lien échantillon = ligne grise underline pleine largeur (pas un bouton)
   ============================================================================ */

/* (i) sur les note-tag du hero — petit cercle cliquable */
.note-tag {
  position: relative;
  padding-right: 32px !important; /* place pour le i */
}
.note-tag__info {
  background: transparent;
  border: 1px solid var(--es-gray-2);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 8px;
  color: var(--es-gray);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.note-tag__info:hover,
.note-tag__info:focus,
.note-tag__info:active {
  border-color: var(--es-cacao);
  color: var(--es-cacao);
  background: transparent;
  outline: none;
}

/* HARD OVERRIDE des boutons custom PDP : pas de bg rose/fuchsia hover.
   Hello Elementor applique des styles agressifs sur <button> que l'on neutralise ici. */
.product-pdp button.pdp-microaction,
.product-pdp button.pdp-microaction:hover,
.product-pdp button.pdp-microaction:focus,
.product-pdp button.pdp-microaction:active,
.product-pdp button.bestseller__secondary,
.product-pdp button.bestseller__secondary:hover,
.product-pdp button.bestseller__secondary:focus,
.product-pdp button.bestseller__secondary:active,
.product-pdp button.note-tag__info,
.product-pdp button.note-tag__info:hover,
.product-pdp button.note-tag__info:focus,
.product-pdp button.note-tag__info:active,
.product-pdp button.pdp-modal__share-btn,
.product-pdp button.pdp-modal__share-btn:hover,
.product-pdp button.pdp-modal__share-btn:focus,
.product-pdp button.pdp-modal__share-btn:active,
.product-pdp button.pdp-modal__close,
.product-pdp button.pdp-modal__close:hover,
.product-pdp button.pdp-modal__close:focus,
.product-pdp button.pdp-modal__close:active,
.product-pdp button.pdp-faq__q,
.product-pdp button.pdp-faq__q:hover,
.product-pdp button.pdp-faq__q:focus,
.product-pdp button.pdp-faq__q:active,
.product-pdp button.pdp-faq__inline-link,
.product-pdp button.pdp-faq__inline-link:hover,
.product-pdp button.pdp-faq__inline-link:focus,
.product-pdp button.pdp-faq__inline-link:active,
.product-pdp button.pdp-note-card__info,
.product-pdp button.pdp-note-card__info:hover,
.product-pdp button.pdp-note-card__info:focus,
.product-pdp button.pdp-note-card__info:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
}

/* Les mêmes composants servent hors fiche produit — la FAQ de /espace-pro/ en
   est faite. N'étant pas dans .product-pdp, ils échappaient à la règle ci-dessus
   et affichaient l'anneau bleu par défaut de Chrome, hors charte.

   On ne recopie pas le « outline: none » sec de la version .product-pdp : il
   prive la navigation au clavier de tout repère. Même convention que le
   sélecteur de contenance — rien au clic, un contour cacao au clavier. */
.pdp-faq__q:focus,
.pdp-faq__inline-link:focus,
.pdp-modal__close:focus {
  outline: none;
}
.pdp-faq__q:focus-visible,
.pdp-faq__inline-link:focus-visible,
.pdp-modal__close:focus-visible {
  outline: 2px solid var(--es-cacao);
  outline-offset: 3px;
}

/* Stabilise la couleur texte des microactions (hover ink, jamais rose) */
.product-pdp .pdp-microaction { color: var(--es-gray) !important; }
.product-pdp .pdp-microaction:hover { color: var(--es-ink) !important; }
.product-pdp .pdp-microaction.is-active { color: var(--es-cacao) !important; }
.product-pdp .pdp-microaction:hover svg path,
.product-pdp .pdp-microaction:hover svg circle { stroke: currentColor; }

/* Lien échantillon : pleine ligne, gris, souligné, italique discret */
.pdp-microaction--sample {
  flex-basis: 100%;
  margin-top: 2px;
  font-style: italic;
  color: var(--es-gray) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp-microaction--sample:hover { color: var(--es-cacao) !important; }

/* Sécurité globale : tout button dans .product-pdp ne doit jamais avoir bg coloré natif */
.product-pdp button:not(.btn):not(.qty-picker button) {
  -webkit-appearance: none;
          appearance: none;
}

/* Trust line : assurer qu'elle est visible juste sous le CTA */
.product-pdp .bestseller__trust { margin-top: 14px; margin-bottom: 18px; }

/* Standards link (bestseller__secondary variant button) */
.pdp-standards-link {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 0 !important;
  cursor: pointer;
  font: inherit;
  font-size: 13px !important;
  color: var(--es-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  margin-top: 14px;
  display: inline-block;
}
.pdp-standards-link:hover { color: var(--es-cacao) !important; }

/* ─── 14.60 PATCH 3 — Force Inter dans toute la modale (battre l'héritage Cormorant italic de Elementor) ─── */
.product-pdp .pdp-modal__dialog,
.product-pdp .pdp-modal__dialog p,
.product-pdp .pdp-modal__dialog li,
.product-pdp .pdp-modal__dialog ul,
.product-pdp .pdp-modal__dialog span,
.product-pdp .pdp-modal__dialog .eyebrow,
.product-pdp .pdp-modal__dialog .pdp-modal__intro,
.product-pdp .pdp-modal__dialog .pdp-modal__checks li,
.product-pdp .pdp-modal__dialog .pdp-modal__section-title,
.product-pdp .pdp-modal__dialog .pdp-modal__nots li,
.product-pdp .pdp-modal__dialog .pdp-modal__allergens {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
}

/* L'eyebrow garde sa Mono */
.product-pdp .pdp-modal__dialog .eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
}

/* Le disclaimer reste en italique discrète */
.product-pdp .pdp-modal__dialog .pdp-modal__disclaimer {
  font-family: 'Inter', sans-serif !important;
  font-style: italic !important;
}

/* H2 modale : Fraunces normal, partie italique sur <em> */
.product-pdp .pdp-modal__dialog h2 {
  font-family: 'Fraunces', serif !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-feature-settings: normal;
}
.product-pdp .pdp-modal__dialog h2 em {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-feature-settings: "ss01", "calt" 1;
}

/* ─── 14.61 PATCH 4 — Popup standards : H2 sobre épuré + croix alignées en haut ─── */

/* H2 popup : plus petit, tout romain, pas d'italique du tout */
.product-pdp .pdp-modal__dialog h2 {
  font-size: 24px !important;
  line-height: 1.2 !important;
  margin: 0 0 22px !important;
  letter-spacing: -0.01em;
}
.product-pdp .pdp-modal__dialog h2 em {
  font-style: normal !important;
  font-feature-settings: normal !important;
}

/* Patch 4 retiré : flex baseline (défini plus haut) gère maintenant l'alignement
   sans qu'on ait besoin d'override align-items / margin-top. */

/* ─── 14.62 PATCH 5 — Modale : align strict sur le pattern home
   eyebrow gris (pas cacao) + H2 Fraunces avec dernier mot italique simple
   ─── */

/* Eyebrow modale : couleur grise comme la home, pas cacao */
.product-pdp .pdp-modal__dialog .eyebrow {
  color: var(--es-gray) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

/* H2 modale : Fraunces sobre, dernier mot italique simple sans swash ornementé */
.product-pdp .pdp-modal__dialog h2 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 30 !important;
  font-feature-settings: normal !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
  margin: 0 0 26px !important;
  color: var(--es-ink) !important;
}
.product-pdp .pdp-modal__dialog h2 em {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-feature-settings: normal !important; /* PAS de swash ornementé */
}

/* Section-title des sous-blocs (Nos huiles ne contiennent pas / Allergènes IFRA)
   → harmoniser avec le pattern eyebrow plutôt que d'avoir une typo Inter forte */
.product-pdp .pdp-modal__section-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  margin: 0 0 14px !important;
}

/* ─── 14.63 PATCH 6 — note-tag entièrement cliquable (PDP) ─── */
.product-pdp .note-tag {
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.product-pdp .note-tag:hover {
  background: var(--es-line);
}
.product-pdp .note-tag:hover .note-tag__info {
  border-color: var(--es-cacao);
  color: var(--es-cacao);
}
.product-pdp .note-tag:focus-visible {
  outline: 2px solid var(--es-cacao);
  outline-offset: 2px;
}

/* PATCH 7 annulé — les notes restent en flex comme la home */

/* ─── 14.65 PATCH 8 — Aligner qty+CTA strictement sur le size-picker ─── */
.product-pdp form.cart,
.product-pdp .pdp-cart-form {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  display: block;
}
.product-pdp .qty-and-cart {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
}
.product-pdp .size-picker {
  width: 100%;
  box-sizing: border-box;
}

/* ─── 14.66 PATCH 9 (v3) — grid auto+1fr pour aligner strictement à droite avec le size-picker ─── */
.product-pdp .qty-and-cart {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 8px !important;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
}
.product-pdp .qty-and-cart .qty-picker {
  width: auto;
  flex: none !important;
  box-sizing: border-box;
}
.product-pdp .qty-and-cart .btn,
.product-pdp .qty-and-cart .btn.btn-primary {
  width: 100%;
  min-width: 0;
  flex: none !important;
  padding: 0 24px;
  box-sizing: border-box;
}
/* Le size-picker doit aussi être strictement 100% avec box-sizing border-box */
.product-pdp .size-picker {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
}
.product-pdp .size-option {
  box-sizing: border-box;
  min-width: 0;
}

/* ─── 14.67 PATCH 10 — Override .bestseller styles home qui plafonnaient le CTA à 360px ─── */
.product-pdp.product-pdp .qty-and-cart > input[type="hidden"] {
  display: none !important;
}
.product-pdp .bestseller--pdp a.btn-primary,
.product-pdp .bestseller--pdp .btn.btn-primary,
.product-pdp .qty-and-cart .btn,
.product-pdp .qty-and-cart .btn.btn-primary {
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  height: 50px !important;
  padding: 0 24px !important;
}
/* Qty-picker : laisser la largeur naturelle (ne pas forcer 120px) */
.product-pdp .bestseller--pdp .qty-picker {
  flex: 0 0 120px !important;
  width: 120px !important;
  height: 50px !important;
}

/* ─── 14.68 PATCH 11 — Cœur wishlist en haut à droite de l'image (style Aromazone) ─── */
.product-pdp .bestseller__visual { position: relative; }
.product-pdp .pdp-heart {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--es-ink);
  transition: transform 0.2s, color 0.2s;
}
.product-pdp .pdp-heart:hover {
  background: transparent !important;
  transform: scale(1.08);
  color: var(--es-cacao);
}
.product-pdp .pdp-heart:focus,
.product-pdp .pdp-heart:active {
  background: transparent !important;
  outline: none;
}
.product-pdp .pdp-heart__icon {
  width: 26px;
  height: 26px;
  display: block;
}
.product-pdp .pdp-heart.is-active {
  color: var(--es-heart);
}
.product-pdp .pdp-heart.is-active .pdp-heart__icon {
  fill: var(--es-heart);
  stroke: var(--es-heart);
}
.product-pdp .pdp-heart.is-active:hover {
  color: var(--es-heart-dark);
  transform: scale(1.08);
}
.product-pdp .pdp-heart.is-active:hover .pdp-heart__icon {
  fill: var(--es-heart-dark);
  stroke: var(--es-heart-dark);
}

/* ─── Wishlist count badge sur l'icône ♡ du header ─── */
.es-wishlist-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}
.es-wishlist-btn:hover { opacity: 0.7; }
.es-wishlist-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--es-heart);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  pointer-events: none;
}
.es-wishlist-count[hidden] { display: none; }

/* ─── 14.69 PATCH 12 — Désactive le hover scale sur l'image PDP (crop bizarre) ─── */
.product-pdp .bestseller--pdp .bestseller__visual:hover .bestseller__img,
.product-pdp .bestseller--pdp .bestseller__visual .bestseller__img {
  transform: none !important;
}

/* ─── 14.70 PATCH 13 — Flèches prev/next sur l'image (apparaissent au hover) ─── */
.product-pdp .pdp-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.25s ease, color 0.2s, transform 0.2s;
  box-shadow: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}
.product-pdp .pdp-gallery-nav svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.4;
}
.product-pdp .pdp-gallery-nav--prev { left: 14px; }
.product-pdp .pdp-gallery-nav--next { right: 14px; }
.product-pdp .bestseller__visual:hover .pdp-gallery-nav { opacity: 0.85; }
.product-pdp .pdp-gallery-nav:hover {
  background: transparent !important;
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0);
  color: #fff;
}
.product-pdp .pdp-gallery-nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.product-pdp .pdp-gallery-nav--next:hover { transform: translateY(-50%) translateX(2px); }
.product-pdp .pdp-gallery-nav:focus,
.product-pdp .pdp-gallery-nav:active {
  background: transparent !important;
  outline: none;
}
.product-pdp .pdp-gallery-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── 14.71 PATCH 14 — Galerie type Aromazone : thumbs en colonne verticale à droite ─── */
.product-pdp .bestseller--pdp .bestseller__visual {
  display: grid;
  grid-template-columns: 1fr 84px;
  gap: 14px;
  align-items: start;
  position: static;
}
.product-pdp .bestseller__img-wrap {
  position: relative;
  grid-column: 1;
}
.product-pdp .bestseller--pdp .pdp-thumbs {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 240px);
}
.product-pdp .bestseller--pdp .pdp-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
}

@media (max-width: 900px) {
  .product-pdp .bestseller--pdp .bestseller__visual {
    grid-template-columns: 1fr;
  }
  .product-pdp .bestseller--pdp .pdp-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    margin-top: 14px !important;
  }
}

/* ─── 14.73 PATCH 16 — Grid PDP : image flexible (1fr) + info fixe (520px) ─── */
.product-pdp .bestseller--pdp .bestseller__grid {
  grid-template-columns: 1fr 520px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1280px) {
  .product-pdp .bestseller--pdp .bestseller__grid {
    grid-template-columns: 1fr 480px;
    gap: 40px;
  }
}
/* Forcer compression du contenu interne des cases (évite débordement à cause de min-content) */
.product-pdp .bestseller--pdp .size-option,
.product-pdp .bestseller--pdp .size-option__label,
.product-pdp .bestseller--pdp .size-option__price,
.product-pdp .bestseller--pdp .size-option__label small {
  min-width: 0 !important;
}
.product-pdp .bestseller--pdp .size-option {
  overflow: hidden;
}
.product-pdp .bestseller--pdp .size-option__label,
.product-pdp .bestseller--pdp .size-option__price {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  .product-pdp .bestseller--pdp .bestseller__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ─── 14.74 PATCH 19 — FINAL : limiter la largeur des blocs interactifs comme sur la home (~500px max) ─── */
.product-pdp .bestseller--pdp .size-picker,
.product-pdp .bestseller--pdp .qty-and-cart,
.product-pdp .bestseller--pdp .pdp-cart-form,
.product-pdp .bestseller--pdp .bestseller__trust,
.product-pdp .bestseller--pdp .pdp-microactions,
.product-pdp .bestseller--pdp .pdp-payments,
.product-pdp .bestseller--pdp .pdp-standards-link,
.product-pdp .bestseller--pdp .pdp-stock {
  max-width: 500px;
}

/* Retire le overflow:hidden hérité du PATCH 16 qui clippait le badge LE PLUS VENDU */
.product-pdp .bestseller--pdp .size-option {
  overflow: visible !important;
}
.product-pdp .bestseller--pdp .size-option__label,
.product-pdp .bestseller--pdp .size-option__price {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ============================================================================
   14.80 PDP HERO 10/10 — Premium micro-interactions
   ============================================================================ */

/* ─── 14.81 Crossfade fluide entre images ─── */
.product-pdp .bestseller--pdp .bestseller__img {
  transition: opacity 0.35s ease, background-image 0s !important;
}
.product-pdp .bestseller--pdp .bestseller__img.is-swapping {
  opacity: 0.3;
}

/* ─── 14.82 Animation cœur : pulse + heartbeat au clic ─── */
@keyframes pdpHeartPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  50%  { transform: scale(1.1); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.product-pdp .pdp-heart.is-pulsing {
  animation: pdpHeartPulse 0.7s ease;
}
.product-pdp .pdp-heart.is-active .pdp-heart__icon {
  filter: drop-shadow(0 2px 6px rgba(230, 57, 70, 0.35));
}

/* ─── 14.83 Colonne info STICKY sur desktop — breakpoint baissé à 901px ─── */
@media (min-width: 901px) {
  .product-pdp .bestseller--pdp .pdp-info-col {
    position: sticky !important;
    top: 100px !important;
    align-self: start !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: visible;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--es-line) transparent;
  }
  .product-pdp .bestseller--pdp .pdp-info-col::-webkit-scrollbar {
    width: 4px;
  }
  .product-pdp .bestseller--pdp .pdp-info-col::-webkit-scrollbar-thumb {
    background: var(--es-line);
    border-radius: 2px;
  }
  .product-pdp .bestseller--pdp .pdp-info-col::-webkit-scrollbar-track {
    background: transparent;
  }
  /* S'assurer que le parent .bestseller__grid n'a pas d'overflow qui casse le sticky */
  .product-pdp .bestseller--pdp .bestseller__grid {
    overflow: visible !important;
  }
  .product-pdp .bestseller--pdp,
  .product-pdp .bestseller--pdp .container {
    overflow: visible !important;
  }
}

/* ─── 14.84 Indicateur de progression galerie ─── */
.product-pdp .pdp-progress {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(26, 26, 26, 0.6);
  padding: 6px 10px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.product-pdp .bestseller__visual:hover .pdp-progress {
  opacity: 1;
}

/* ─── 14.85 Hover micro-interactions premium ─── */
/* Cases size-option : hover lift subtle + cacao border smooth */
.product-pdp .bestseller--pdp .size-option {
  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
.product-pdp .bestseller--pdp .size-option:not(.active):hover {
  transform: translateY(-1px);
  border-color: var(--es-ink) !important;
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.06);
}
.product-pdp .bestseller--pdp .size-option .radio {
  transition: all 0.25s ease;
}

/* Note-tags : hover identique à la home bestseller (fond Lin Patiné, pas blanc) */
.product-pdp .note-tag {
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
.product-pdp .note-tag:hover {
  background: var(--es-line) !important;
  transform: none;
  box-shadow: none;
}
.product-pdp .note-tag:hover .note-tag__info {
  border-color: var(--es-cacao);
  color: var(--es-cacao);
}

/* Bouton "Ajouter au panier" : hover subtil sans changement brutal */
.product-pdp .bestseller--pdp .btn-primary {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.product-pdp .bestseller--pdp .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(26, 26, 26, 0.2);
}

/* ─── 14.86 Aération des blocs colonne info ─── */
.product-pdp .bestseller--pdp .pdp-info-col > .bestseller__rating { margin-bottom: 16px; }
.product-pdp .bestseller--pdp .pdp-info-col > .bestseller__desc { margin-bottom: 22px; }
.product-pdp .bestseller--pdp .pdp-info-col > .bestseller__notes { margin-bottom: 22px; }
.product-pdp .bestseller--pdp .pdp-info-col > .bestseller__notes-label { margin-bottom: 10px; margin-top: 4px; }
.product-pdp .bestseller--pdp .pdp-info-col > .size-picker { margin-bottom: 14px; }

/* Section pricing/cart un peu plus aérée */
.product-pdp .bestseller--pdp .pdp-stock { margin: -6px 0 8px !important; }
.product-pdp .bestseller--pdp .qty-and-cart { margin-bottom: 16px !important; }

/* ─── 14.87 Lightbox plein écran ─── */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(26, 26, 26, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.pdp-lightbox.is-open {
  display: flex;
  animation: pdpFade 0.3s ease;
}
.pdp-lightbox__stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1100px;
  max-height: 100%;
}
.pdp-lightbox__img {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease;
}
.pdp-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}
.pdp-lightbox__close:hover {
  color: #fff;
  transform: scale(1.1);
  background: transparent !important;
}
.pdp-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.pdp-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-50%) scale(1.05);
  color: #fff;
}
.pdp-lightbox__nav svg { width: 22px; height: 22px; }
.pdp-lightbox__nav--prev { left: 32px; }
.pdp-lightbox__nav--next { right: 32px; }
.pdp-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Curseur zoom au hover de l'image principale */
.product-pdp .bestseller--pdp .bestseller__img {
  cursor: zoom-in;
}

/* ─── 14.88 Affinage badge BESTSELLER + LE PLUS VENDU ─── */
.product-pdp .bestseller--pdp .bestseller__badge {
  font-size: 9px !important;
  padding: 7px 11px !important;
  letter-spacing: 0.18em !important;
}

/* ─── 14.89 Smooth scroll-reveal sur les éléments de la colonne ─── */
.product-pdp .bestseller--pdp .pdp-info-col > * {
  animation: pdpRevealUp 0.6s ease backwards;
}
@keyframes pdpRevealUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.product-pdp .bestseller--pdp .pdp-info-col > *:nth-child(1)  { animation-delay: 0.05s; }
.product-pdp .bestseller--pdp .pdp-info-col > *:nth-child(2)  { animation-delay: 0.10s; }
.product-pdp .bestseller--pdp .pdp-info-col > *:nth-child(3)  { animation-delay: 0.15s; }
.product-pdp .bestseller--pdp .pdp-info-col > *:nth-child(4)  { animation-delay: 0.20s; }
.product-pdp .bestseller--pdp .pdp-info-col > *:nth-child(5)  { animation-delay: 0.25s; }
.product-pdp .bestseller--pdp .pdp-info-col > *:nth-child(6)  { animation-delay: 0.30s; }
.product-pdp .bestseller--pdp .pdp-info-col > *:nth-child(7)  { animation-delay: 0.35s; }
.product-pdp .bestseller--pdp .pdp-info-col > *:nth-child(8)  { animation-delay: 0.40s; }
.product-pdp .bestseller--pdp .pdp-info-col > *:nth-child(n+9) { animation-delay: 0.45s; }

/* ─── Bancontact logo (pictogramme + texte, ratio 1.6:1) ─── */
.product-pdp .pdp-payments__logo--bancontact {
  height: 18px !important;
  align-self: center;
  width: auto;
}

/* ─── Bouton "Choisir une taille" disabled au load (avant sélection) ─── */
.product-pdp .bestseller--pdp .btn-primary[disabled],
.product-pdp .bestseller--pdp .btn-primary:disabled {
  background: var(--es-gray-2) !important;
  color: #fff !important;
  cursor: not-allowed !important;
  opacity: 1;
  pointer-events: none;
}
.product-pdp .bestseller--pdp .btn-primary[disabled]:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ─── 14.90 Overlay éditorial sur l'image HERO (notes + description) ─── */
.product-pdp .pdp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 32px;
  background: linear-gradient(to top, rgba(26, 26, 26, 0.78) 0%, rgba(26, 26, 26, 0.4) 35%, transparent 60%);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.product-pdp .pdp-hero-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.product-pdp .pdp-hero-overlay__inner {
  color: #fff;
  width: 100%;
  pointer-events: auto;
}
.product-pdp .pdp-hero-overlay__notes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 16px;
}
.product-pdp .pdp-hero-overlay__notes li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.product-pdp .pdp-hero-overlay__notes li small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 400;
}
.product-pdp .pdp-hero-overlay__notes li span {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1;
}
.product-pdp .pdp-hero-overlay__desc {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 520px;
}

/* Sur petite hauteur viewport : compacter l'overlay */
@media (max-height: 800px) {
  .product-pdp .pdp-hero-overlay { padding: 20px; }
  .product-pdp .pdp-hero-overlay__notes { margin-bottom: 12px; padding-bottom: 12px; gap: 10px; }
  .product-pdp .pdp-hero-overlay__notes li span { font-size: 18px; }
  .product-pdp .pdp-hero-overlay__desc { font-size: 14px; }
}

/* ─── Modale Notification stock + form ─── */
.pdp-notify-form {
  display: flex;
  gap: 10px;
  margin: 18px 0 10px;
}
.pdp-notify-form input {
  flex: 1;
  border: 1px solid var(--es-line);
  background: #fff;
  padding: 13px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--es-ink); /* charbon chaud — style « réponse de formulaire » validé (Espace Pro) */
  outline: none;
  transition: border-color 0.2s;
}
.pdp-notify-form input::placeholder { color: var(--es-gray-2); font-weight: 400; }
.pdp-notify-form input:focus { border-color: var(--es-ink); }
.pdp-notify-form .btn-primary { padding: 0 22px; height: 48px; font-size: 13px; white-space: nowrap; }
.pdp-modal__notify-success {
  background: var(--es-success-bg);
  color: var(--es-success);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
  margin: 14px 0 0;
  border-left: 3px solid var(--es-success);
}

/* Bouton "Être notifié·e" : variant cacao pour différencier du CTA normal */
.product-pdp .bestseller--pdp .btn-primary.is-notify {
  background: var(--es-cacao) !important;
  border-color: var(--es-cacao) !important;
}
.product-pdp .bestseller--pdp .btn-primary.is-notify:hover {
  background: var(--es-cacao-dark) !important;
}

/* ─── Badge "SUR COMMANDE" qui DÉPASSE la case (aligné sur LE PLUS VENDU) ─── */
.product-pdp .bestseller--pdp .size-option { position: relative; overflow: visible !important; }
.product-pdp .bestseller--pdp .size-option__badge {
  position: absolute;
  top: -8px;
  right: -6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--es-promo);
  background: var(--es-bg-chip);
  padding: 3px 8px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}
/* Retirer la couleur rouge sur le secondary label des out (on garde le secondary original) */
.size-option--out .size-option__label small { color: var(--es-gray) !important; font-weight: 400 !important; }

/* ─── Bestseller HOME : bouton "Choisir une taille" disabled au load ─── */
.bestseller .btn-primary[data-disabled="true"],
.bestseller .btn-primary[data-disabled="true"]:hover {
  background: var(--es-gray-2) !important;
  background-color: var(--es-gray-2) !important;
  color: #fff !important;
  border-color: var(--es-gray-2) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* (i) sur les note-tag de la home : link vers PDP #composition */
.bestseller .note-tag { position: relative; padding-right: 32px !important; }
.bestseller .note-tag__info {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 1px solid var(--es-gray-2);
  border-radius: 50%;
  background: transparent !important;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 8px;
  color: var(--es-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none !important;
  line-height: 1;
  transition: border-color 0.2s, color 0.2s;
}
.bestseller .note-tag__info:hover {
  border-color: var(--es-cacao);
  color: var(--es-cacao);
}

/* ─── Badge SUR COMMANDE : style global (s'applique aussi à la home bestseller) ─── */
.bestseller .size-option { position: relative; overflow: visible !important; }
.bestseller .size-option__badge {
  position: absolute;
  top: -8px;
  right: -6px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal !important;
  color: var(--es-promo);
  background: var(--es-bg-chip);
  padding: 3px 8px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* ─── Indicateur stock sur la home (sous le size-picker) ─── */
.bestseller-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bestseller-stock__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--es-success);
}
.bestseller-stock[data-status="ok"] .bestseller-stock__dot { background: var(--es-success); }
.bestseller-stock[data-status="ok"] .bestseller-stock__label { color: var(--es-success); }
.bestseller-stock[data-status="low"] .bestseller-stock__dot { background: var(--es-promo); }
.bestseller-stock[data-status="low"] .bestseller-stock__label { color: var(--es-promo); }
.bestseller-stock[data-status="out"] .bestseller-stock__dot { background: var(--es-gray-2); }
.bestseller-stock[data-status="out"] .bestseller-stock__label { color: var(--es-gray-2); }

/* Case --out sur la home (cliquable mais opacité réduite) */
.bestseller .size-option--out { opacity: 0.65; cursor: pointer; }
.bestseller .size-option--out:hover { border-color: var(--es-cacao); opacity: 0.85; }
.bestseller .size-option--out.active { opacity: 1; border-color: var(--es-promo) !important; }

/* Bouton "Choisir une taille" disabled : gris-2 sombre comme PDP (pas le gris clair) */
.bestseller .btn-primary[data-disabled="true"],
.bestseller .btn-primary[data-disabled="true"]:hover,
.bestseller a.btn-primary[data-disabled="true"],
.bestseller a.btn-primary[data-disabled="true"]:hover {
  background: var(--es-gray-2) !important;
  background-color: var(--es-gray-2) !important;
  color: #fff !important;
  border-color: var(--es-gray-2) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* CTA "Être notifié·e" en cacao */
.bestseller .btn-primary.is-notify,
.bestseller a.btn-primary.is-notify {
  background: var(--es-cacao) !important;
  border-color: var(--es-cacao) !important;
}

/* ─── Override final : CTA "Être notifié·e" cacao (priorité sur UNIFICATION boutons noirs) ─── */
body a.btn.btn-primary.is-notify,
body a.btn.btn-primary.is-notify:link,
body a.btn.btn-primary.is-notify:visited,
body a.btn.btn-primary.is-notify:hover,
body a.btn.btn-primary.is-notify:active,
body a.btn.btn-primary.is-notify:focus,
body .btn.btn-primary.is-notify {
  background: var(--es-cacao) !important;
  background-color: var(--es-cacao) !important;
  border-color: var(--es-cacao) !important;
}
body a.btn.btn-primary.is-notify:hover {
  background: var(--es-cacao-dark) !important;
  background-color: var(--es-cacao-dark) !important;
}

/* Disabled "Choisir une taille" : spécificité maximale aussi */
body a.btn.btn-primary[data-disabled="true"],
body a.btn.btn-primary[data-disabled="true"]:link,
body a.btn.btn-primary[data-disabled="true"]:visited,
body a.btn.btn-primary[data-disabled="true"]:hover {
  background: var(--es-gray-2) !important;
  background-color: var(--es-gray-2) !important;
  border-color: var(--es-gray-2) !important;
  color: #fff !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ─── Modale .pdp-modal : style global (s'applique à la home aussi, pas uniquement PDP) ─── */
.pdp-modal__dialog,
.pdp-modal__dialog p,
.pdp-modal__dialog li,
.pdp-modal__dialog ul,
.pdp-modal__dialog span,
.pdp-modal__intro,
.pdp-modal__disclaimer {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
}
.pdp-modal__dialog .eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--es-gray) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}
.pdp-modal__dialog h2 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 30 !important;
  font-feature-settings: normal !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
  margin: 0 0 26px !important;
  color: var(--es-ink) !important;
}
.pdp-modal__dialog h2 em {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-feature-settings: normal !important;
}
.pdp-modal__intro {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--es-gray) !important;
}
.pdp-modal__disclaimer {
  font-family: 'Inter', sans-serif !important;
  font-style: italic !important;
  font-size: 12px !important;
  color: var(--es-gray-2) !important;
  line-height: 1.4 !important;
}

/* ─── Force italic sur le disclaimer modale (priorité sur le reset font-style normal) ─── */
body .pdp-modal .pdp-modal__dialog .pdp-modal__disclaimer,
body .pdp-modal .pdp-modal__dialog p.pdp-modal__disclaimer {
  font-style: italic !important;
  font-family: 'Inter', sans-serif !important;
}

/* ─── Boutons modale .pdp-modal : pas de hover rose (override Hello Elementor) ─── */
body button.pdp-modal__close,
body button.pdp-modal__close:hover,
body button.pdp-modal__close:focus,
body button.pdp-modal__close:active,
body .pdp-modal button.pdp-modal__close,
body .pdp-modal button.pdp-modal__close:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
body button.pdp-modal__close { color: var(--es-gray) !important; }
body button.pdp-modal__close:hover { color: var(--es-ink) !important; }

/* Aussi les autres boutons modale (share, etc.) */
body button.pdp-modal__share-btn,
body button.pdp-modal__share-btn:focus,
body button.pdp-modal__share-btn:active {
  background: var(--es-bg-alt) !important;
  outline: none !important;
}
body button.pdp-modal__share-btn:hover {
  background: var(--es-bg-chip) !important;
}

/* ─── Harmoniser "Partager" et "Voir standards & allergènes" (même taille, couleur, espacement) ─── */
.product-pdp .pdp-microactions {
  margin: 12px 0 4px !important;
}
.product-pdp .pdp-standards-link {
  margin-top: 4px !important;
  padding: 6px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--es-gray) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  text-transform: none !important;
}
.product-pdp .pdp-standards-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.product-pdp .pdp-standards-link:hover {
  color: var(--es-ink) !important;
}
.product-pdp .pdp-microaction {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--es-gray) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.product-pdp .pdp-microaction svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.product-pdp .pdp-microaction:hover {
  color: var(--es-ink) !important;
}

/* ─── Boutons partage modale : icône + label + hover propre (pas de hover blanc) ─── */
body button.pdp-modal__share-btn,
body button.pdp-modal__share-btn:link,
body button.pdp-modal__share-btn:visited {
  background: var(--es-bg-alt) !important;
  background-color: var(--es-bg-alt) !important;
  color: var(--es-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
body button.pdp-modal__share-btn:hover,
body button.pdp-modal__share-btn:focus,
body button.pdp-modal__share-btn:active {
  background: var(--es-bg-chip) !important;
  background-color: var(--es-bg-chip) !important;
  color: var(--es-ink) !important;
  outline: none !important;
}
body button.pdp-modal__share-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
body button.pdp-modal__share-btn--wide {
  grid-column: 1 / -1 !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ─── "Paiement 100% sécurisé" : même typo que .bestseller__trust-item ─── */
.product-pdp .pdp-payments__label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1 !important;
}

/* ─── Force strict : "PAIEMENT 100% SÉCURISÉ" = IDENTIQUE à .bestseller__trust-item ─── */
body .product-pdp .bestseller--pdp .pdp-payments .pdp-payments__label,
body .product-pdp .pdp-payments span.pdp-payments__label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1 !important;
  font-style: normal !important;
}

/* ─── PAIEMENT 100% SÉCURISÉ : STRICTEMENT identique à .bestseller__trust-item ─── */
body .product-pdp .pdp-payments__label,
body .product-pdp .bestseller--pdp .pdp-payments .pdp-payments__label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1 !important;
  font-style: normal !important;
}
body .product-pdp .pdp-payments__label::before {
  content: '✓';
  color: var(--es-cacao);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}
/* Trust line items : alignés strictement sur .note-tag__level (Tête/Cœur/Fond) */
body .product-pdp .bestseller--pdp .bestseller__trust-item,
body .product-pdp .bestseller--pdp .bestseller__trust--unified .bestseller__trust-item {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1 !important;
  gap: 6px !important;
}
body .product-pdp .bestseller--pdp .bestseller__trust-item::before {
  font-size: 9px !important;
  color: var(--es-cacao) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ========================================================================
   PATCH 25 — Force NON-italique strict sur microcopy + trust unified + payments
   (PDP + home bestseller). Évite tout bleed italique Elementor/Cormorant.
   ======================================================================== */
body .product-pdp .pdp-cta-microcopy,
body .product-pdp .pdp-cta-microcopy *,
body .product-pdp .bestseller__cta-microcopy,
body .product-pdp .bestseller__cta-microcopy *,
body .product-pdp .bestseller__trust--unified,
body .product-pdp .bestseller__trust--unified *,
body .product-pdp .bestseller__trust-payments,
body .product-pdp .bestseller__trust-payments *,
body .product-pdp .bestseller__trust--unified strong,
body .product-pdp .pdp-cta-microcopy strong,
body .product-pdp .bestseller__cta-microcopy strong,
body .bestseller .pdp-cta-microcopy,
body .bestseller .pdp-cta-microcopy *,
body .bestseller .bestseller__cta-microcopy,
body .bestseller .bestseller__cta-microcopy *,
body .bestseller .bestseller__trust--unified,
body .bestseller .bestseller__trust--unified *,
body .bestseller .bestseller__trust-payments,
body .bestseller .bestseller__trust-payments *,
body .bestseller .bestseller__trust--unified strong,
body .bestseller .bestseller__cta-microcopy strong {
  font-style: normal !important;
}

/* ========================================================================
   PATCH 26 — Trust line unifiée : RENDU IDENTIQUE entre PDP et home
   Bordures + padding + 8px/0.16em strict (matche .note-tag__level)
   ======================================================================== */
body .bestseller .bestseller__trust--unified,
body .product-pdp .bestseller__trust--unified {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 14px !important;
  border-top: 1px solid var(--es-line) !important;
  border-bottom: 1px solid var(--es-line) !important;
  padding: 12px 0 !important;
  margin: 12px 0 10px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body .bestseller .bestseller__trust--unified .bestseller__trust-item,
body .product-pdp .bestseller__trust--unified .bestseller__trust-item {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 8px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1 !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
body .bestseller .bestseller__trust--unified .bestseller__trust-item::before,
body .product-pdp .bestseller__trust--unified .bestseller__trust-item::before {
  content: "✓" !important;
  font-size: 9px !important;
  color: var(--es-cacao) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;
}
body .bestseller .bestseller__trust-payments,
body .product-pdp .bestseller__trust-payments {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
body .bestseller .bestseller__trust-payments img,
body .product-pdp .bestseller__trust-payments img {
  height: 12px !important;
  width: auto !important;
  display: block !important;
  opacity: 0.9 !important;
}
body .bestseller .bestseller__trust-payments img.pdp-payments__logo--bancontact,
body .product-pdp .bestseller__trust-payments img.pdp-payments__logo--bancontact {
  height: 11px !important;
}
@media (max-width: 900px) {
  body .bestseller .bestseller__trust--unified,
  body .product-pdp .bestseller__trust--unified {
    justify-content: center !important;
    row-gap: 8px !important;
  }
  body .bestseller .bestseller__trust-payments,
  body .product-pdp .bestseller__trust-payments {
    margin-left: 0 !important;
  }
  body .bestseller .bestseller__trust-payments img,
  body .product-pdp .bestseller__trust-payments img {
    height: 11px !important;
  }
  body .bestseller .bestseller__trust-payments img.pdp-payments__logo--bancontact,
  body .product-pdp .bestseller__trust-payments img.pdp-payments__logo--bancontact {
    height: 10px !important;
  }
}

/* ============================================================================
   PDP MOBILE FIRST — Override final pour mobile (< 900px)
   ============================================================================ */
@media (max-width: 900px) {
  /* Hero : grid 1 colonne, padding réduit */
  .product-pdp .bestseller--pdp {
    padding: 24px 0 48px !important;
  }
  .product-pdp .bestseller--pdp .bestseller__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Visual : image full-width + thumbs en horizontal scroll */
  .product-pdp .bestseller--pdp .bestseller__visual {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .product-pdp .bestseller__img-wrap { width: 100%; }
  .product-pdp .bestseller--pdp .bestseller__img {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    min-height: 0 !important;
    width: 100%;
  }
  .product-pdp .bestseller--pdp .pdp-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .product-pdp .bestseller--pdp .pdp-thumb {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
  }

  /* Colonne info : full width, blocs en 100% (plus de max-width 500px qui contraint) */
  .product-pdp .bestseller--pdp .pdp-info-col {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  .product-pdp .bestseller--pdp .size-picker,
  .product-pdp .bestseller--pdp .qty-and-cart,
  .product-pdp .bestseller--pdp .pdp-cart-form,
  .product-pdp .bestseller--pdp .bestseller__trust,
  .product-pdp .bestseller--pdp .pdp-payments,
  .product-pdp .bestseller--pdp .pdp-standards-link,
  .product-pdp .bestseller--pdp .pdp-stock {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Titre H2 plus petit en mobile */
  .product-pdp .bestseller--pdp h1.serif,
  .product-pdp .bestseller--pdp h2.serif {
    font-size: clamp(32px, 8vw, 44px) !important;
  }

  /* Breadcrumb réduit */
  .product-pdp .pdp-breadcrumb { margin-bottom: 20px !important; font-size: 11px !important; }

  /* Cases size-picker : 2 colonnes, padding compact */
  .product-pdp .bestseller--pdp .size-picker {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .product-pdp .bestseller--pdp .size-option {
    padding: 10px 12px !important;
  }

  /* CTA + qty pleine largeur en row */
  .product-pdp .bestseller--pdp .qty-and-cart {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .product-pdp .bestseller--pdp .qty-picker {
    flex: 0 0 110px !important;
    width: 110px !important;
  }
  .product-pdp .bestseller--pdp .btn-primary {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }

  /* Trust line + paiements : wrap proprement */
  .product-pdp .bestseller--pdp .bestseller__trust {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
  }
  .product-pdp .bestseller--pdp .bestseller__trust-item {
    font-size: 9px !important;
  }
  .product-pdp .bestseller--pdp .pdp-payments {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .product-pdp .bestseller--pdp .pdp-payments__label {
    font-size: 9px !important;
    flex-basis: 100%;
  }

  /* Sections sous le hero : padding réduit */
  .pdp-section { padding: 56px 0 !important; }
  .pdp-section__head h2 { font-size: clamp(32px, 8vw, 48px) !important; }

  /* Flèches galerie : masquées en mobile (touch = swipe natural) */
  .product-pdp .pdp-gallery-nav { display: none !important; }
}

/* Très petits écrans (< 480px) — on garde 2 colonnes pour le size-picker (plus compact) */
@media (max-width: 480px) {
  .product-pdp .bestseller--pdp .size-picker {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .product-pdp .bestseller--pdp .size-option {
    padding: 8px 10px !important;
  }
  .product-pdp .bestseller--pdp .size-option__label { font-size: 12px !important; }
  .product-pdp .bestseller--pdp .size-option__price { font-size: 12px !important; }
  .product-pdp .bestseller--pdp .size-option__label small { font-size: 9px !important; }
  .product-pdp .bestseller--pdp .pdp-thumb { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; }
}

/* ─── Mobile : header en position fixed (sticky cassé sur Safari mobile dans certains contextes) ─── */
@media (max-width: 900px) {
  header.elementor-location-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100% !important;
    z-index: 100;
  }
  /* Le padding-top du header fixed est compensé SEULEMENT par body (135px plus bas)
     pour éviter la double compensation. main.product-pdp ne doit PAS l'ajouter. */
  body main.product-pdp,
  body > main,
  body[class*="page-template"] main,
  body[class*="single-product"] main {
    padding-top: 0;
  }
}
@media (max-width: 480px) {
  body main.product-pdp,
  body > main,
  body[class*="single-product"] main {
    padding-top: 0;
  }
}

/* ============================================================================
   FIX MOBILE HEADER STICKY — version finale propre
   ============================================================================ */
@media (max-width: 900px) {
  /* Header fixed en haut SANS adaptation admin-bar
     (l'admin bar mobile WP scroll avec la page, donc forcer top: 0 toujours
      est plus propre que d'avoir un espace blanc au scroll) */
  html body header.elementor-location-header,
  html body header[data-elementor-type="header"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
  }
  /* Padding-top sur body pour compenser le header fixed (sort du flow) */
  html body {
    padding-top: 135px !important;
  }
}

/* ─── Mobile : CTA + qty doivent rester dans la largeur du container (pas déborder) ─── */
@media (max-width: 900px) {
  .product-pdp .bestseller--pdp .qty-and-cart,
  .product-pdp .bestseller--pdp .pdp-cart-form {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }
  /* Qty-picker mobile : doit contenir 38+44+38 = 120px de boutons internes */
  .product-pdp .bestseller--pdp .qty-picker {
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  .product-pdp .bestseller--pdp .qty-picker button {
    width: 36px !important;
    flex: 0 0 36px !important;
    padding: 0 !important;
  }
  .product-pdp .bestseller--pdp .qty-picker input {
    width: 40px !important;
    flex: 0 0 40px !important;
  }
  .product-pdp .bestseller--pdp .qty-and-cart .btn,
  .product-pdp .bestseller--pdp .qty-and-cart .btn.btn-primary,
  .product-pdp .bestseller--pdp a.btn.btn-primary {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    box-sizing: border-box;
  }
}


/* ─── Mobile : centrer trust + paiements + logos + voir standards ─── */
@media (max-width: 900px) {
  .product-pdp .bestseller--pdp .bestseller__trust {
    justify-content: center !important;
    text-align: center;
  }
  .product-pdp .bestseller--pdp .pdp-payments {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }
  .product-pdp .bestseller--pdp .pdp-payments__label {
    flex-basis: 100%;
    text-align: center;
    justify-content: center !important;
  }
  .product-pdp .bestseller--pdp .pdp-payments__logos {
    justify-content: center !important;
    width: 100%;
  }
  .product-pdp .bestseller--pdp .pdp-standards-link {
    align-self: center;
    justify-self: center;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    display: inline-flex !important;
  }
}

/* ========================================================================
   PATCH 20 — Hero PDP desktop
   - Plus d'espace entre quizbar et breadcrumb
   - Titre sur 1 seule ligne (white-space nowrap + taille un peu réduite)
   - Compaction verticale : tout le hero (CTA + paiement + standards) tient
     dans un viewport standard, plus de scroll forcé.
   ======================================================================== */
@media (min-width: 901px) {
  /* Plus d'air en haut de la section, et un peu moins en bas */
  .bestseller--pdp { padding: 56px 0 32px; }

  /* Breadcrumb : on baisse le margin-bottom global, l'écart au quizbar est
     géré par le padding-top de la section ci-dessus. */
  .product-pdp .pdp-breadcrumb { margin-bottom: 24px; }

  /* Titre : tient dans la colonne info. Noms courts sur 1 ligne ; noms longs
     (ex. « Pack Échantillons huiles parfumées ») passent à la ligne au lieu de déborder. */
  .product-pdp .bestseller--pdp h1.serif,
  .product-pdp .bestseller--pdp h2.serif {
    font-size: clamp(40px, 3.6vw, 56px) !important;
    white-space: normal;
    line-height: 1.05;
    margin-bottom: 8px !important;
  }

  /* Compaction interne pour ramener CTA + trust + paiement sous le pli */
  .product-pdp .bestseller--pdp .num-mono { margin-bottom: 4px !important; }
  .product-pdp .bestseller--pdp .bestseller__rating { margin-bottom: 8px !important; }
  .product-pdp .bestseller--pdp .bestseller__desc { margin-bottom: 14px !important; }
  .product-pdp .bestseller--pdp .bestseller__notes-label { margin-bottom: 6px !important; }
  .product-pdp .bestseller--pdp .bestseller__notes { margin-bottom: 12px !important; }
  .product-pdp .bestseller--pdp .size-picker { margin-bottom: 10px !important; }
  .product-pdp .bestseller--pdp .pdp-stock { margin: -2px 0 10px !important; }
  .product-pdp .bestseller--pdp .bestseller__trust {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding: 10px 0 !important;
  }
  .product-pdp .bestseller--pdp .pdp-payments { margin-top: 6px !important; }
  .product-pdp .bestseller--pdp .pdp-standards-link { margin-top: 8px !important; }

  /* Image légèrement moins haute pour libérer du vertical */
  .bestseller--pdp .bestseller__img {
    max-height: calc(100vh - 280px);
  }
}

/* ========================================================================
   PATCH 21 — Note-tag cliquable sur la home (bestseller hors PDP)
   Réplique l'affordance de bouton de la PDP : cursor pointer + hover +
   focus-visible ring. JS attache le click sur toute la case.
   ======================================================================== */
.bestseller:not(.bestseller--pdp) .note-tag {
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.bestseller:not(.bestseller--pdp) .note-tag:hover {
  background: var(--es-line);
}
.bestseller:not(.bestseller--pdp) .note-tag:hover .note-tag__info {
  border-color: var(--es-cacao);
  color: var(--es-cacao);
}
.bestseller:not(.bestseller--pdp) .note-tag:focus-visible {
  outline: 2px solid var(--es-cacao);
  outline-offset: 2px;
}

/* ========================================================================
   PATCH 22 — Titre bestseller home sur 1 seule ligne en desktop
   « 1.01 Santal Musqué. » ne wrap plus. On garde le clamp pour qu'il
   s'adapte à la largeur de la colonne, et nowrap pour empêcher la coupure.
   En mobile, la règle ne s'applique pas → wrap normal.
   ======================================================================== */
@media (min-width: 901px) {
  .bestseller:not(.bestseller--pdp) h2.serif,
  .bestseller:not(.bestseller--pdp) .bestseller__title {
    font-size: clamp(40px, 3.8vw, 60px) !important;
    white-space: nowrap;
  }
}

/* ========================================================================
   PATCH 23 — 5 polish e-com sur PDP + home bestseller
   1) Badge "Bestseller" sans étoile (★ retiré)
   2) Cœur wishlist en pastille crème 44px + cœur cacao
   3) Microcopy sous le CTA : délai livraison + livraison offerte 100€
   ======================================================================== */

/* 1. Retire le ★ devant "Bestseller" partout (PDP + home + autres sections) */
.bestseller__badge::before { content: '' !important; margin: 0 !important; }

/* 2. Cœur wishlist : pastille BLANCHE circulaire avec cœur cacao (changement 2026-06-24 demande Nabila) */
.product-pdp .pdp-heart,
.bestseller__heart {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff !important;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--es-cacao);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.12);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.product-pdp .pdp-heart:hover,
.bestseller__heart:hover {
  background: #fff !important;
  transform: scale(1.06);
  color: var(--es-cacao);
}
.product-pdp .pdp-heart:focus-visible,
.bestseller__heart:focus-visible {
  outline: 2px solid var(--es-cacao);
  outline-offset: 2px;
}
.product-pdp .pdp-heart__icon,
.bestseller__heart svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: var(--es-cacao);
  fill: none;
}
.product-pdp .pdp-heart.is-active,
.bestseller__heart.is-active {
  background: var(--es-bg-alt) !important;
  color: var(--es-heart);
}
.product-pdp .pdp-heart.is-active .pdp-heart__icon,
.bestseller__heart.is-active svg {
  fill: var(--es-heart);
  stroke: var(--es-heart);
}

/* 3. Microcopy sous le CTA : style Inter standard (revert) */
.pdp-cta-microcopy,
.bestseller__cta-microcopy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 6px;
  max-width: 500px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--es-ink);
  line-height: 1.5;
}
.pdp-cta-microcopy__delivery,
.bestseller__cta-microcopy__delivery {
  font-weight: 500;
  color: var(--es-ink);
}
.pdp-cta-microcopy__delivery strong,
.bestseller__cta-microcopy__delivery strong {
  font-weight: 600;
  color: var(--es-cacao);
}
.pdp-cta-microcopy__shipping,
.bestseller__cta-microcopy__shipping {
  color: var(--es-gray);
  font-size: 11.5px;
}

/* Mobile : centrage cohérent avec le reste du hero */
@media (max-width: 900px) {
  .pdp-cta-microcopy,
  .bestseller__cta-microcopy {
    text-align: center;
    align-items: center;
  }
  .product-pdp .pdp-heart,
  .bestseller__heart {
    width: 40px;
    height: 40px;
    top: 10px;
    right: 10px;
  }
  .product-pdp .pdp-heart__icon,
  .bestseller__heart svg {
    width: 20px;
    height: 20px;
  }
}

/* ========================================================================
   PATCH 24 — Trust line unifiée : En stock · Retours 14j · Paiement · logos
   Sur 1 seule ligne en desktop (nowrap, compact). Wrap propre en mobile.
   S'applique partout (PDP + home bestseller).
   ======================================================================== */
.bestseller__trust--unified {
  display: flex;
  flex-wrap: wrap; /* wrap autorisé : pas de scroll horizontal si trop dense */
  align-items: center;
  gap: 10px 14px;
  border-top: 1px solid var(--es-line);
  border-bottom: 1px solid var(--es-line);
  padding: 12px 0;
  margin: 12px 0 10px;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden; /* sécurité : aucun débordement vers la page */
}
/* Items strictement identiques à .note-tag__level (Tête/Cœur/Fond) */
.bestseller__trust--unified .bestseller__trust-item {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 8px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.bestseller__trust--unified .bestseller__trust-item::before {
  font-size: 9px;
  color: var(--es-cacao);
}
.bestseller__trust-payments {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.bestseller__trust-payments img {
  height: 12px;
  width: auto;
  display: block;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.bestseller__trust-payments img:hover { opacity: 1; }
.bestseller__trust-payments img.pdp-payments__logo--bancontact { height: 11px; }

/* Mobile : centrage explicite */
@media (max-width: 900px) {
  .bestseller__trust--unified {
    justify-content: center;
    row-gap: 8px;
    padding: 10px 0;
  }
  .bestseller__trust-payments { margin-left: 0; }
  .bestseller__trust-payments img { height: 11px; }
  .bestseller__trust-payments img.pdp-payments__logo--bancontact { height: 10px; }
}

/* ========================================================================
   PATCH 27 — Gap CTA → microcopy IDENTIQUE entre home bestseller et PDP
   Sur PDP : qty-and-cart margin-bottom 16px + microcopy margin-top 10px = 26px
   Sur home : qty-and-cart margin 0 + microcopy 10px = 10px → trop serré
   Fix : on aligne via margin-top de la microcopy home à 26px
   ======================================================================== */
body .bestseller .bestseller__cta-microcopy {
  margin-top: 26px !important;
}

/* ========================================================================
   PATCH 28 — Home : le shortcode [essentia_home_bestseller] doit prendre
   la pleine largeur (sinon le container Elementor parent réduit à ~1140px,
   ce qui rétrécit l'image hero par rapport à la PDP).
   On élargit le wrap Elementor qui contient le wrap .product-pdp.
   ======================================================================== */
.elementor-element.elementor-element-f07641a,
.elementor-element.elementor-element-f07641a > .elementor-widget-wrap,
.elementor-element.elementor-element-f07641a > .e-con-inner {
  max-width: none !important;
  width: 100% !important;
}

/* ========================================================================
   PATCH 29 — Rating "Lire les 87 avis →" underline + indicateur sélection
   contenance plus marqué (PDP + home bestseller via shortcode).
   ======================================================================== */

/* Rating : "Lire les X avis →" doit être clairement underline pour signaler
   que c'est un lien — sinon le rating entier semble juste informatif. */
.bestseller__rating-cta {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  color: inherit;
  transition: color 0.2s;
}
.bestseller__rating-link:hover .bestseller__rating-cta,
.bestseller__rating-link:focus-visible .bestseller__rating-cta {
  color: var(--es-cacao);
}

/* Focus du sélecteur de contenance.

   .size-option est un <div role="button" tabindex="0"> : sans style de focus
   propre, Chrome dessine son anneau bleu par défaut, qui jurait avec la charte
   — visible dès qu'on cliquait une contenance. On reprend la convention de
   focus déjà en place ailleurs dans le thème (cacao, outline-offset), et on
   réserve l'anneau au clavier : au clic, l'état sélectionné se lit déjà au
   radio coché et à la bordure encrée, un contour de plus serait du bruit.

   On neutralise :focus plutôt que de tout supprimer, pour ne pas priver la
   navigation au clavier d'un repère visible. */
.size-option:focus {
  outline: none;
}
.size-option:focus-visible {
  outline: 2px solid var(--es-cacao);
  outline-offset: 3px;
}

/* Sélection contenance — minimal : juste un check ✓ dans le radio rempli,
   pas de background crème, pas de gros contour. */
.size-option.active,
.product-pdp .size-option.active,
.bestseller .size-option.active {
  background: #fff !important;
  border-color: var(--es-ink) !important;
  border-width: 1.5px !important;
  padding: 11.5px 13.5px !important;
  box-shadow: none !important;
}
.size-option.active .radio {
  background: var(--es-ink);
  border-color: var(--es-ink);
}
.size-option.active .radio::after {
  content: '✓' !important;
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
}
/* Sur sélection : le label et le prix passent en ink plein (sans gras lourd) */
.size-option.active .size-option__label,
.size-option.active .size-option__price {
  color: var(--es-ink) !important;
}

/* Titre H2 cliquable vers la PDP (home shortcode uniquement) */
.bestseller__title-link {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s;
}
.bestseller__title-link h2.serif,
.bestseller__title-link h2.serif em {
  transition: color 0.2s;
}
.bestseller__title-link:hover h2.serif,
.bestseller__title-link:hover h2.serif em,
.bestseller__title-link:focus-visible h2.serif,
.bestseller__title-link:focus-visible h2.serif em {
  color: var(--es-cacao);
}
.bestseller__title-link:focus-visible {
  outline: 2px solid var(--es-cacao);
  outline-offset: 4px;
}
/* Et tout widget HTML qui contient un .product-pdp sur la home : pleine largeur */
.elementor-widget-html:has(.product-pdp .bestseller--pdp) {
  width: 100% !important;
  max-width: none !important;
}
/* Le .container à l'intérieur du shortcode garde son centrage + max-width 1320px (desktop only) */
@media (min-width: 901px) {
  .product-pdp .bestseller--pdp .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
/* Mobile : .container hérite du padding 0 20px globale, pas d'override */
@media (max-width: 900px) {
  .product-pdp .bestseller--pdp .container {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================================================
   PATCH 30 — PDP : 8 nouvelles sections post-hero + footer sticky mobile
   Architecture orientée conversion (Aesop / Diptyque / Pura).
   §1 Storytelling · §2 Comment utiliser · §3 Unboxing · §4 Reviews
   §5 Pourquoi le choisir · §6 Diffuseurs · §7 Quiz · §8 FAQ + Sticky
   ============================================================================ */

/* Tagline générique sous H2 des sections */
.pdp-section__tagline {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--es-gray);
  margin-top: 14px;
  line-height: 1.4;
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── §1 STORYTELLING ──────────────────────────────────────────────────── */
.pdp-storytelling__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.pdp-storytelling__visual {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: var(--es-bg-chip);
  width: 100%;
}
.pdp-storytelling__body .eyebrow { margin-bottom: 18px; }
.pdp-storytelling__body h2.serif {
  font-size: clamp(36px, 3.6vw, 56px);
  margin-bottom: 28px;
  line-height: 1.1;
}
.pdp-storytelling__body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--es-ink);
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .pdp-storytelling__grid { grid-template-columns: 1fr; gap: 40px; }
  .pdp-storytelling__visual { aspect-ratio: 16 / 11; }
}

/* ─── §2 COMMENT L'UTILISER ────────────────────────────────────────────── */
.pdp-usage__cats {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 56px;
}
.pdp-usage__cat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--es-line);
}
.pdp-usage__cat-icon {
  width: 32px;
  height: 32px;
  color: var(--es-cacao);
  flex-shrink: 0;
}
.pdp-usage__cat-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--es-ink);
  margin: 0;
}
.pdp-usage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.pdp-usage-card {
  background: #fff;
  border: 1px solid var(--es-line);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, transform 0.2s;
}
.pdp-usage-card:hover {
  border-color: var(--es-cacao);
  transform: translateY(-2px);
}
.pdp-usage-card h4 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--es-ink);
  margin: 0;
  line-height: 1.25;
}
.pdp-usage-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--es-gray);
  margin: 0;
}
.pdp-usage-card__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--es-cacao);
  margin-top: auto;
  padding-top: 6px;
}
@media (max-width: 600px) {
  .pdp-usage__grid { grid-template-columns: 1fr; gap: 14px; }
  .pdp-usage-card { padding: 20px 18px; }
}

/* ─── §3 CE QUE VOUS RECEVEZ ───────────────────────────────────────────── */
.pdp-unboxing__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}
.pdp-unboxing__visual {
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-left: auto;
  background-size: cover;
  background-position: center;
  background-color: var(--es-bg-chip);
  width: 100%;
}
.pdp-unboxing__body .eyebrow { margin-bottom: 18px; }
.pdp-unboxing__body h2.serif {
  font-size: clamp(36px, 3.6vw, 56px);
  margin-bottom: 24px;
  line-height: 1.1;
}
.pdp-unboxing__body > p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--es-gray);
  margin-bottom: 24px;
}
.pdp-unboxing__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--es-line);
}
.pdp-unboxing__list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--es-line);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--es-ink);
  position: relative;
  padding-left: 28px;
}
.pdp-unboxing__list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 16px;
  color: var(--es-cacao);
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  line-height: 1.55;
}
.pdp-unboxing__list li strong {
  font-weight: 500;
  color: var(--es-ink);
}
@media (max-width: 900px) {
  .pdp-unboxing__grid { grid-template-columns: 1fr; gap: 40px; }
  .pdp-unboxing__visual { aspect-ratio: 16 / 11; order: -1; }
}

/* ─── §4 REVIEWS ENRICHIES ─────────────────────────────────────────────── */
.pdp-reviews__summary {
  max-width: 480px;
  margin: 40px auto 32px;
  padding: 0;
}
.pdp-reviews__distribution {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdp-reviews__bar {
  display: grid;
  grid-template-columns: 32px 1fr 40px;
  gap: 12px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--es-gray);
}
.pdp-reviews__bar-label { text-align: right; }
.pdp-reviews__bar-track {
  height: 4px;
  background: var(--es-line);
  position: relative;
  overflow: hidden;
}
.pdp-reviews__bar-fill {
  height: 100%;
  background: var(--es-cacao);
  transition: width 0.6s ease;
}
.pdp-reviews__bar-pct {
  font-size: 10px;
  color: var(--es-ink);
}
.pdp-reviews__filters {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.pdp-reviews__filter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--es-line);
  color: var(--es-gray);
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.pdp-reviews__filter:hover {
  border-color: var(--es-cacao);
  color: var(--es-cacao);
}
.pdp-reviews__filter.is-active {
  background: var(--es-ink);
  color: #fff;
  border-color: var(--es-ink);
}
.pdp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-bottom: 40px;
}
.pdp-review {
  background: #fff;
  border: 1px solid var(--es-line);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdp-review__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pdp-review__stars {
  color: var(--es-cacao);
  letter-spacing: 2px;
  font-size: 13px;
  line-height: 1;
}
.pdp-review__verified {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--es-success);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pdp-review__title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--es-ink);
  margin: 4px 0 2px;
  line-height: 1.25;
}
.pdp-review__quote {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--es-ink);
  margin: 0;
}
.pdp-review__meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--es-gray-2);
  margin-top: auto;
  padding-top: 6px;
}
.pdp-reviews__footer {
  text-align: center;
  margin-top: 24px;
}
.pdp-reviews__cta {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--es-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.pdp-reviews__cta:hover { color: var(--es-cacao); }
@media (max-width: 600px) {
  .pdp-reviews-grid { grid-template-columns: 1fr; }
  .pdp-reviews__filters { gap: 6px; }
  .pdp-reviews__filter { padding: 8px 12px; font-size: 9px; }
}

/* ─── §5 POURQUOI LE CHOISIR — 3 piliers ───────────────────────────────── */
.pdp-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 56px;
}
.pdp-pillar {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pdp-pillar__icon {
  width: 40px;
  height: 40px;
  color: var(--es-cacao);
}
.pdp-pillar .pdp-pillar__title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--es-ink);
  margin: 0;
  line-height: 1.3;
}
.pdp-pillar__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--es-gray);
  margin: 0;
  max-width: 280px;
}
@media (max-width: 800px) {
  .pdp-pillars__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ─── §6 DIFFUSEURS RECOMMANDÉS ─────────────────────────────────────────── */
.pdp-diffusers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.pdp-diff-card__pitch {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--es-gray);
  margin: 6px 0 12px;
}
@media (max-width: 900px) {
  .pdp-diffusers__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ─── §8 FAQ — Inline link (bouton standards dans la réponse) ──────────── */
.pdp-faq__inline-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: inherit;
  color: var(--es-cacao);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pdp-faq__inline-link:hover { color: var(--es-ink); }

/* ─── FOOTER STICKY — mobile (2 lignes) + desktop (1 ligne horizontale) ─── */
.pdp-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-top: 1px solid var(--es-line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: block;
}
.pdp-sticky-cta.is-visible { transform: translateY(0); }
.pdp-sticky-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 12px;
  max-width: 1320px;
  margin: 0 auto;
}
/* Ligne 1 : image + 4 pills sur la même ligne */
.pdp-sticky-cta__row1 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-sticky-cta__visual {
  width: 36px;
  height: 36px;
  background-size: cover;
  background-position: center;
  background-color: var(--es-bg-chip);
  flex-shrink: 0;
  border-radius: 2px;
}

/* Sélecteur de contenances : 4 pills horizontales (strict pattern size-option hero) */
.pdp-sticky-cta__sizes {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  min-width: 0;
}
.pdp-sticky-cta__size {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px;
  font-weight: 400;
  font-style: normal !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--es-ink);
  background: #fff;
  border: 1px solid var(--es-line);
  padding: 9px 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  line-height: 1;
}
.pdp-sticky-cta__size:hover {
  border-color: var(--es-cacao) !important;
  background: #fff !important;
  color: var(--es-ink) !important;
}
/* Picker par COLLECTION (Pack Échantillons) : 7 cases sur UNE seule ligne, compactes.
   Double classe + !important pour battre la media query desktop (repeat(4,1fr) max-width:720px). */
.pdp-sticky-cta__sizes.pdp-sticky-cta__sizes--collection { grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important; max-width: 860px !important; }
.pdp-sticky-cta__sizes.pdp-sticky-cta__sizes--collection .pdp-sticky-cta__size { padding: 6px 3px !important; font-size: 10px !important; gap: 5px !important; }
.pdp-sticky-cta__sizes.pdp-sticky-cta__sizes--collection .pdp-sticky-cta__size .radio { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; }
html body .pdp-sticky-cta__sizes.pdp-sticky-cta__sizes--collection .pdp-sticky-cta__size .size-option__label { font-size: 10px !important; letter-spacing: -0.1px !important; }
.pdp-sticky-cta__sizes.pdp-sticky-cta__sizes--collection .pdp-sticky-cta__size .size-option__price { display: none !important; }
/* État actif : ink strict (force ultra-haute pour battre le bleed Elementor rose) */
html body .pdp-sticky-cta__size.is-active,
html body button.pdp-sticky-cta__size.is-active,
html body .pdp-sticky-cta__size.is-active:hover,
html body .pdp-sticky-cta__size.is-active:focus,
html body .pdp-sticky-cta__size.is-active:focus-visible,
html body .pdp-sticky-cta__size.is-active:active {
  background: var(--es-ink) !important;
  background-color: var(--es-ink) !important;
  color: #fff !important;
  border-color: var(--es-ink) !important;
  outline: none !important;
}
/* Focus visible accessibilité */
html body .pdp-sticky-cta__size:focus-visible {
  outline: 2px solid var(--es-cacao) !important;
  outline-offset: 2px !important;
}
.pdp-sticky-cta__size.is-out {
  color: var(--es-gray-2) !important;
  text-decoration: line-through;
  opacity: 0.65;
  cursor: pointer;
  background: var(--es-bg-chip) !important;
}

/* CTA principal pleine largeur — strict pattern .btn.btn-primary du hero */
.pdp-sticky-cta__btn {
  padding: 13px 20px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  background: var(--es-ink) !important;
  color: #fff !important;
  border: 1px solid var(--es-ink) !important;
  border-radius: 0 !important;
  width: 100%;
  line-height: 1.2 !important;
}
.pdp-sticky-cta__btn:hover {
  background: #000 !important;
}
.pdp-sticky-cta__btn:disabled,
.pdp-sticky-cta__btn[disabled] {
  background: var(--es-gray-2) !important;
  color: #fff !important;
  border-color: var(--es-gray-2) !important;
  cursor: default;
}
/* Variant "Être notifié·e" : cacao (strict pattern hero .btn-primary.is-notify) */
.pdp-sticky-cta__btn.is-notify,
.pdp-sticky-cta__btn.is-notify:hover,
.pdp-sticky-cta__btn.is-notify:focus {
  background: var(--es-cacao) !important;
  border-color: var(--es-cacao) !important;
  color: #fff !important;
}

/* Mobile (≤900px) : padding-bottom + nom caché (manque d'espace) */
@media (max-width: 900px) {
  body.product-template-default { padding-bottom: 100px; }
  .pdp-sticky-cta__name { display: none !important; }
}

/* Desktop (≥901px) : layout 1 LIGNE horizontale compact */
@media (min-width: 901px) {
  body.product-template-default { padding-bottom: 76px; }
  .pdp-sticky-cta__inner {
    flex-direction: row !important;
    align-items: center;
    gap: 24px;
    padding: 12px 40px;
    max-width: 1320px;
  }
  .pdp-sticky-cta__row1 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .pdp-sticky-cta__visual {
    width: 40px;
    height: 40px;
  }
  /* Nom du produit visible en desktop seulement */
  .pdp-sticky-cta__name {
    display: inline-block !important;
    flex-shrink: 0;
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 15px !important;
    color: var(--es-ink) !important;
    letter-spacing: -0.005em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
  }
  /* Pills sticky desktop = cases hero compactes (sans secondary ni radio) */
  .pdp-sticky-cta__sizes {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: auto;
    max-width: 720px;
    margin-top: 8px; /* espace pour les badges au-dessus */
  }
  /* Cases sticky : padding/border CONSTANTS, transition retirée pour pas de tremblement */
  html body .pdp-sticky-cta__size,
  html body .pdp-sticky-cta__size.active,
  html body .pdp-sticky-cta__size:hover {
    position: relative !important;
    overflow: visible !important;
    padding: 8px 12px !important;
    border-width: 1px !important;
    gap: 8px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  }
  /* On cache le secondary ET le prix (le prix est déjà dans le CTA) */
  html body .pdp-sticky-cta__size .size-option__label small,
  html body .pdp-sticky-cta__size .size-option__price {
    display: none !important;
  }
  html body .pdp-sticky-cta__size .size-option__label {
    line-height: 1.1 !important;
    font-size: 13px !important;
    flex: 1 !important;
  }
  /* Badge "SUR COMMANDE" : strict pattern hero .size-option__badge */
  .pdp-sticky-cta__size .size-option__badge {
    position: absolute !important;
    top: -7px !important;
    right: -3px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 7px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--es-promo) !important;
    background: var(--es-bg-chip) !important;
    padding: 3px 6px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  /* Badge "★ LE PLUS VENDU" : strict pattern hero (top -8px right -6px) */
  .pdp-sticky-cta__size.size-option--bestseller::before {
    content: '★ LE PLUS VENDU' !important;
    position: absolute !important;
    top: -7px !important;
    right: -3px !important;
    left: auto !important;
    transform: none !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 7px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--es-cacao) !important;
    background: var(--es-bg-chip) !important;
    padding: 3px 6px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
  .pdp-sticky-cta__btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 220px;
    padding: 13px 24px !important;
  }
}

/* Mobile : pills avec RADIO + label (comme desktop), cache juste secondary + prix + badges (manque de place) */
@media (max-width: 900px) {
  .pdp-sticky-cta__size .size-option__label small,
  .pdp-sticky-cta__size .size-option__price,
  .pdp-sticky-cta__size .size-option__badge,
  .pdp-sticky-cta__size.size-option--bestseller::before {
    display: none !important;
  }
  html body .pdp-sticky-cta__size,
  html body .pdp-sticky-cta__size.active,
  html body .pdp-sticky-cta__size:hover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 6px !important;
    gap: 6px !important;
    border-width: 1px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  /* Radio mobile : strict pattern hero (14px) avec flex pour centrer le ✓ naturellement */
  .pdp-sticky-cta__size .radio {
    width: 14px !important;
    height: 14px !important;
    border: 1.5px solid var(--es-ink) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .pdp-sticky-cta__size .size-option__label {
    flex: none !important;
    display: block !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--es-ink) !important;
    line-height: 1 !important;
  }
  /* Pill active : strict pattern HERO = fond blanc + border ink + label ink + radio noir avec ✓ blanc */
  html body .pdp-sticky-cta__size.active,
  html body .pdp-sticky-cta__size.active:hover {
    background: #fff !important;
    background-color: #fff !important;
    border-color: var(--es-ink) !important;
  }
  html body .pdp-sticky-cta__size.active .size-option__label {
    color: var(--es-ink) !important;
    font-weight: 500 !important;
  }
  /* Radio actif mobile : pattern hero (rond ink rempli + ✓ blanc dedans) */
  html body .pdp-sticky-cta__size.active .radio {
    background: var(--es-ink) !important;
    border-color: var(--es-ink) !important;
  }
  html body .pdp-sticky-cta__size.active .radio::after {
    content: '✔' !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    color: #fff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Symbol', sans-serif !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================================================
   PATCH 31 — Corrections critiques de cohérence typo + layout PDP sections
   1) `.pdp-usage` ancien grid 4 colonnes hérite sur la NOUVELLE section §2
      et force le head à se rendre comme une colonne étroite (1 case sur 4).
      → display: block strict.
   2) Tous les titres des nouvelles sections (.pdp-pillar__title,
      .pdp-review__title, .pdp-usage-card h4, .pdp-diff-card__name) doivent
      être en Fraunces serif sans uppercase ni tracking (= matche le brand).
   3) Tailles des H2 sections réduites pour ne pas exploser sur grand écran.
   4) Tagline tagline réduit et meta reviews ramené à la bonne taille.
   ============================================================================ */

/* 1. Fix layout : annule l'ancien grid de la section utilisation */
.product-pdp .pdp-section.pdp-usage,
body .pdp-section.pdp-usage {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* 2. Force Fraunces + non-uppercase + ink sur TOUS les titres de cards/sections */
body .pdp-pillar__title,
body .pdp-review__title,
body .pdp-usage-card h4,
body .pdp-diff-card__name,
body .pdp-usage__cat-title,
body .product-pdp .pdp-pillar__title,
body .product-pdp .pdp-review__title,
body .product-pdp .pdp-usage-card h4,
body .product-pdp .pdp-diff-card__name {
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  color: var(--es-ink) !important;
}
body .pdp-pillar__title { font-size: 20px !important; line-height: 1.3 !important; }
body .pdp-review__title { font-size: 18px !important; line-height: 1.25 !important; }
body .pdp-usage-card h4 { font-size: 18px !important; line-height: 1.25 !important; }
body .pdp-diff-card__name { font-size: 20px !important; line-height: 1.2 !important; }

/* Exception : .pdp-usage__cat-title (TEXTILES / AMBIANCE / MÉNAGE) reste en
   Mono uppercase (c'est un eyebrow de catégorie, pas un titre de card). */
body .pdp-usage__cat-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--es-ink) !important;
}

/* 3. H2 sections : taille canonique HOME = clamp(44, 5vw, 72) STRICT */
body .product-pdp .pdp-section__head h2.serif,
body .pdp-section__head h2.serif {
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  font-optical-sizing: auto !important;
  font-size: clamp(44px, 5vw, 72px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1 !important;
  color: var(--es-ink) !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
}
body .product-pdp .pdp-section__head h2.serif em,
body .pdp-section__head h2.serif em {
  font-style: italic !important;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important;
}
/* Sections split (§1) : H2 plus modeste pour layout 2-cols storytelling */
body .product-pdp .pdp-storytelling__body h2.serif {
  font-size: clamp(36px, 4vw, 56px) !important;
  line-height: 1.05 !important;
}
/* §3 unboxing : H2 strict pattern §2/§4 (clamp 44–72 + SOFT 100 + swsh 1) */
body .product-pdp .pdp-unboxing__body h2.serif {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  font-optical-sizing: auto !important;
  font-size: clamp(44px, 5vw, 72px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1 !important;
  margin-bottom: 28px !important;
  text-transform: none !important;
}
body .product-pdp .pdp-unboxing__body h2.serif em {
  font-style: italic !important;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important;
}

/* Eyebrow : strict pattern home (11px Mono 0.18em uppercase gray) */
body .product-pdp .pdp-section__head .eyebrow,
body .product-pdp .pdp-storytelling__body .eyebrow,
body .product-pdp .pdp-unboxing__body .eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  margin-bottom: 16px !important;
}

/* Body p sous head : Inter 17px line-height 1.65 gray (pattern home) */
body .product-pdp .pdp-section__head > p:not(.pdp-section__tagline):not(.eyebrow) {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.65 !important;
  color: var(--es-gray) !important;
  margin: 0 !important;
}

/* 4. Tagline réduite, max-width plus généreux pour éviter wrap bizarre */
body .pdp-section__tagline {
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--es-gray) !important;
  margin-top: 16px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Meta reviews : ramène à 10px JetBrains Mono pas trop gros */
body .pdp-review__meta {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.08em !important;
  color: var(--es-gray-2) !important;
  text-transform: none !important;
}
body .pdp-review__quote {
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--es-ink) !important;
}

/* Diff card : "Chaleur douce · 10 à 25 m²" num-mono pas trop large + nowrap */
body .pdp-diff-card .num-mono {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: var(--es-gray) !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  display: block !important;
}
body .pdp-diff-card__cta {
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}
body .pdp-diff-card__pitch {
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
}

/* §1 §3 : paragraphes en Inter normal */
body .pdp-storytelling__body p,
body .pdp-unboxing__body > p,
body .pdp-usage-card p,
body .pdp-pillar__body {
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
}

/* §5 piliers : largeur cap reasonable, centrage propre */
body .pdp-pillar {
  max-width: 320px;
  margin: 0 auto;
}

/* Quiz button : pas d'italique sur "Faire le quiz olfactif" */
body .pdp-quizband .btn-light {
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ============================================================================
   PATCH 32 — §2 « Comment l'utiliser » : refonte compact
   Desktop : 3 colonnes côte à côte (Textiles · Ambiance · Ménage), chaque
   colonne = liste de 3-4 méthodes en lignes denses (nom + desc courte + meta).
   Mobile : 3 accordéons empilés, repliés par défaut (click pour déplier).
   ============================================================================ */
body .pdp-usage__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
body .pdp-usage__col {
  display: flex;
  flex-direction: column;
  background: transparent;
}
body .pdp-usage__col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--es-line);
  padding: 0 0 14px;
  margin: 0 0 8px;
  cursor: default;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
body .pdp-usage__col-icon {
  width: 24px;
  height: 24px;
  color: var(--es-cacao);
  flex-shrink: 0;
}
body .pdp-usage__col-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--es-ink);
  flex: 1;
  line-height: 1;
}
body .pdp-usage__col-caret {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--es-cacao);
  display: none; /* Caché desktop, visible mobile */
  transition: transform 0.2s;
  line-height: 1;
}
body .pdp-usage__methods {
  list-style: none;
  padding: 0;
  margin: 0;
}
body .pdp-usage__methods li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--es-line);
}
body .pdp-usage__method-name {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--es-ink);
  line-height: 1.3;
}
body .pdp-usage__method-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--es-gray);
}
body .pdp-usage__method-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--es-cacao);
  margin-top: 4px;
  line-height: 1;
}

/* Mobile : accordéons empilés repliables */
@media (max-width: 900px) {
  body .pdp-usage__cols {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--es-line);
  }
  body .pdp-usage__col {
    border-bottom: 1px solid var(--es-line);
  }
  body .pdp-usage__col-head {
    cursor: pointer;
    padding: 18px 0;
    margin: 0;
    border-bottom: 0;
  }
  body .pdp-usage__col-caret {
    display: block;
  }
  body .pdp-usage__col[data-open="true"] .pdp-usage__col-caret {
    transform: rotate(45deg);
  }
  body .pdp-usage__methods {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  body .pdp-usage__col[data-open="true"] .pdp-usage__methods {
    max-height: 800px;
    padding-bottom: 14px;
  }
}

/* Réutilise pdp-section__head style pour le head de cette section : centré */
body .product-pdp .pdp-section.pdp-usage .pdp-section__head {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto 0 !important;
}

/* ============================================================================
   PATCH 33 — TUE le bleed Elementor/Hello Elementor sur les sections PDP
   Force strict typographie home pattern. Spécificité ULTRA-haute
   (html body .product-pdp X) pour battre toutes les règles Elementor.
   Cible PDP (main.product-pdp) ET home shortcode (div.product-pdp).
   ============================================================================ */

/* 1) TITRES de cards : Fraunces normal case ink (pas Mono uppercase) */
html body .product-pdp .pdp-pillar__title,
html body .product-pdp .pdp-review__title,
html body .product-pdp .pdp-diff-card__name,
html body .product-pdp .pdp-usage__method-name {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-optical-sizing: auto !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  color: var(--es-ink) !important;
  margin: 0 !important;
}
html body .product-pdp .pdp-pillar__title { font-size: 20px !important; line-height: 1.3 !important; }
html body .product-pdp .pdp-review__title { font-size: 18px !important; line-height: 1.25 !important; }
html body .product-pdp .pdp-diff-card__name { font-size: 20px !important; line-height: 1.2 !important; }
html body .product-pdp .pdp-usage__method-name { font-size: 15px !important; line-height: 1.3 !important; }

/* 2) PARAGRAPHES descriptifs : Inter normal (pas Cormorant italique) */
html body .product-pdp .pdp-storytelling__body p,
html body .product-pdp .pdp-unboxing__body > p,
html body .product-pdp .pdp-unboxing__list li,
html body .product-pdp .pdp-pillar__body,
html body .product-pdp .pdp-review__quote,
html body .product-pdp .pdp-diff-card__pitch,
html body .product-pdp .pdp-usage__method-desc,
html body .product-pdp .pdp-quizband__body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body .product-pdp .pdp-storytelling__body p { font-size: 16px !important; line-height: 1.7 !important; color: var(--es-ink) !important; margin-bottom: 18px !important; }
html body .product-pdp .pdp-unboxing__body > p { font-size: 16px !important; line-height: 1.7 !important; color: var(--es-gray) !important; margin-bottom: 24px !important; }
html body .product-pdp .pdp-unboxing__list li { font-size: 14.5px !important; line-height: 1.55 !important; color: var(--es-ink) !important; }
html body .product-pdp .pdp-pillar__body { font-size: 14px !important; line-height: 1.6 !important; color: var(--es-gray) !important; }
html body .product-pdp .pdp-review__quote { font-size: 14.5px !important; line-height: 1.65 !important; color: var(--es-ink) !important; }
html body .product-pdp .pdp-diff-card__pitch { font-size: 13.5px !important; line-height: 1.55 !important; color: var(--es-gray) !important; }
html body .product-pdp .pdp-usage__method-desc { font-size: 13px !important; line-height: 1.5 !important; color: var(--es-gray) !important; }
html body .product-pdp .pdp-quizband__body { font-size: 16px !important; line-height: 1.65 !important; color: rgba(255,255,255,0.85) !important; }

/* 3) BOUTON QUIZ : Mono uppercase strict (pas italique Cormorant) */
html body .product-pdp .pdp-quizband a.btn,
html body .product-pdp .pdp-quizband a.btn-light,
html body .product-pdp .pdp-quizband .btn.btn-light {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  background: #fff !important;
  color: var(--es-ink) !important;
  padding: 18px 36px !important;
  border: 0 !important;
  display: inline-block !important;
  text-decoration: none !important;
}
html body .product-pdp .pdp-quizband a.btn-light:hover {
  background: var(--es-bg-alt) !important;
  color: var(--es-cacao) !important;
}

/* 4) CTAs underline "Découvrir →" / "Lire les avis →" : Inter normal */
html body .product-pdp .pdp-diff-card__cta,
html body .product-pdp .pdp-reviews__cta {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--es-ink) !important;
}

/* 5) FAQ accordéon : questions Fraunces normal, réponses Inter normal */
html body .product-pdp .pdp-faq__q,
html body .product-pdp .pdp-faq__q span {
  font-family: 'Fraunces', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 18px !important;
  color: var(--es-ink) !important;
  line-height: 1.3 !important;
}
html body .product-pdp .pdp-faq__a-inner,
html body .product-pdp .pdp-faq__a-inner * {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--es-ink) !important;
  font-weight: 400 !important;
}
html body .product-pdp .pdp-faq__a-inner strong {
  font-weight: 600 !important;
  color: var(--es-ink) !important;
}

/* 6) "Achat vérifié" badge : Mono petit vert subtil */
html body .product-pdp .pdp-review__verified,
html body .product-pdp .pdp-review__verified * {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--es-success) !important;
}

/* 7) Strong dans les paragraphes : poids 500 ink, pas italique */
html body .product-pdp .pdp-storytelling__body p strong,
html body .product-pdp .pdp-unboxing__list li strong,
html body .product-pdp .pdp-usage__method-desc strong {
  font-weight: 500 !important;
  font-style: normal !important;
  color: var(--es-ink) !important;
}

/* ============================================================================
   PATCH 34 — §2 « Comment l'utiliser » CARROUSEL HORIZONTAL
   Format moderne scroll-snap : 10 méthodes accessibles au swipe (mobile)
   ou aux flèches prev/next (desktop). Pagination dots + compteur.
   ============================================================================ */
body .pdp-usage__carousel {
  position: relative;
  margin-top: 56px;
  padding: 0 60px; /* espace pour les flèches à l'extérieur du track */
}
@media (max-width: 900px) {
  body .pdp-usage__carousel { padding: 0; }
}
body .pdp-usage__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 8px;
  scroll-behavior: smooth;
}
body .pdp-usage__track::-webkit-scrollbar { display: none; }
body .pdp-usage__slide {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--es-line);
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, transform 0.25s ease;
  position: relative;
}
body .pdp-usage__slide:hover {
  border-color: var(--es-cacao);
  transform: translateY(-2px);
}

/* Bouton play en haut-droite : ouvre la modale vidéo tuto (cacao + triangle crème) */
body .pdp-usage__slide-play {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--es-cacao);
  color: var(--es-bg-alt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  z-index: 2;
  opacity: 0.85;
}
body .pdp-usage__slide-play:hover {
  background: var(--es-cacao);
  opacity: 1;
  transform: scale(1.08);
}
body .pdp-usage__slide-play:focus-visible {
  outline: 2px solid var(--es-cacao);
  outline-offset: 2px;
}
body .pdp-usage__slide-play svg {
  width: 10px;
  height: 10px;
  margin-left: 1px; /* compense l'asymétrie visuelle du triangle */
}
body .pdp-usage__slide-visual {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--es-cacao);
  margin-bottom: 4px;
}
/* SVG viewBox 24 dans container 32 = même rendu visuel que home (viewBox 32, contenu serré).
   On affiche le SVG à 75% de la box (= 24px effectif) pour matcher la marge home. */
body .pdp-usage__slide-visual svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.1;
}
body .pdp-usage__slide-cat {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1 !important;
}
/* Titre slide §2 : strict pattern .col-item__title (collections home) */
html body .product-pdp .pdp-usage__slide-name {
  font-family: 'Fraunces', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  letter-spacing: -0.015em !important;
  color: var(--es-ink) !important;
  line-height: 1 !important;
  text-transform: none !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  html body .product-pdp .pdp-usage__slide-name {
    font-size: 22px !important;
  }
}
html body .product-pdp .pdp-usage__slide-desc {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--es-gray) !important;
  text-transform: none !important;
  margin: 0 !important;
  flex: 1;
}
body .pdp-usage__slide-meta {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--es-cacao) !important;
  line-height: 1 !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--es-line);
}

/* Flèches prev/next : juste le chevron cacao, sans rond ni fond */
body .pdp-usage__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--es-cacao);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none !important;
  transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
body .pdp-usage__nav svg {
  width: 24px;
  height: 24px;
  stroke: var(--es-cacao);
  stroke-width: 1.5;
}
body .pdp-usage__nav--prev { left: 12px; }
body .pdp-usage__nav--next { right: 12px; }
body .pdp-usage__nav:hover {
  background: transparent !important;
  color: var(--es-ink);
  transform: translateY(-50%) scale(1.15);
}
body .pdp-usage__nav--prev:hover { transform: translateY(-50%) translateX(-2px) scale(1.15); }
body .pdp-usage__nav--next:hover { transform: translateY(-50%) translateX(2px) scale(1.15); }
body .pdp-usage__nav:focus-visible {
  outline: 2px solid var(--es-cacao);
  outline-offset: 4px;
}
body .pdp-usage__nav:disabled { opacity: 0.25; cursor: default; }

/* Pagination dots supprimés — seul le compteur "X / 10" reste */
body .pdp-usage__dots {
  display: none !important;
}
body .pdp-usage__dots--hidden {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
body .pdp-usage__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--es-line);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
body .pdp-usage__dot.is-active {
  background: var(--es-cacao);
  transform: scale(1.3);
}

/* Compteur "1 / 10" */
body .pdp-usage__counter {
  display: block;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--es-gray);
  letter-spacing: 0.08em;
  margin-top: 8px;
}

/* Mobile : slides plus larges + nav cachée (swipe natif) */
@media (max-width: 900px) {
  body .pdp-usage__slide { flex: 0 0 80%; }
  body .pdp-usage__nav { display: none; }
  body .pdp-usage__track { gap: 12px; padding-left: 4px; padding-right: 20%; }
}
@media (max-width: 600px) {
  body .pdp-usage__slide { flex: 0 0 85%; padding: 24px 20px 20px; }
}

/* ============================================================================
   PATCH 35 — §6 Diffuseurs recommandés : refonte en product cards verticales
   Image grande en haut sur fond crème, body en dessous (eyebrow + nom + pitch
   + CTA). Hover : élévation douce + image légèrement zoom.
   ============================================================================ */
html body .product-pdp .pdp-diffusers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
html body .product-pdp .pdp-diff-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.3s ease !important;
  overflow: hidden;
}
html body .product-pdp .pdp-diff-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: none !important;
}
html body .product-pdp .pdp-diff-card__img {
  aspect-ratio: 4 / 5 !important;
  background-color: var(--es-bg-alt) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 100%;
  margin-bottom: 18px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}
html body .product-pdp .pdp-diff-card:hover .pdp-diff-card__img {
  background-color: var(--es-line) !important;
}
html body .product-pdp .pdp-diff-card__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 4px !important;
}
html body .product-pdp .pdp-diff-card__body .num-mono {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  font-style: normal !important;
  margin: 0 0 4px !important;
  line-height: 1 !important;
}
html body .product-pdp .pdp-diff-card__name {
  font-family: 'Fraunces', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 28px !important;
  letter-spacing: -0.015em !important;
  color: var(--es-ink) !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  margin: 0 !important;
}
html body .product-pdp .pdp-diff-card__pitch {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--es-gray) !important;
  text-transform: none !important;
  margin: 4px 0 8px !important;
  flex: 1;
}
html body .product-pdp .pdp-diff-card__cta {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  transition: color 0.2s !important;
  margin-top: auto !important;
}
html body .product-pdp .pdp-diff-card:hover .pdp-diff-card__cta {
  color: var(--es-cacao) !important;
}

/* Mobile : 1 colonne */
@media (max-width: 900px) {
  html body .product-pdp .pdp-diffusers__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================================
   PATCH 36 — §1 Storytelling : visuel peut être <video> mp4 OU iframe YouTube
   Wrapper en aspect-ratio 4/5. L'iframe YouTube (16/9 natif) est scalé pour
   couvrir le wrapper sans bande noire (object-fit cover hack via transform).
   ============================================================================ */

/* Cas 1 : video mp4 direct — 16/9 paysage = ratio natif vidéo, pas de crop */
html body .product-pdp video.pdp-storytelling__visual {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center !important;
  background-color: var(--es-bg-chip) !important;
  pointer-events: none;
}

/* Cas 2 : iframe YouTube — 16/9 wrapper = même ratio que YouTube natif → fit parfait */
html body .product-pdp .pdp-storytelling__visual--video {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background-color: var(--es-bg-chip) !important;
  overflow: hidden !important;
}
html body .product-pdp .pdp-storytelling__visual--video iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* H2 storytelling : strict pattern HOME (clamp 44, 5vw, 72) — pas réduit */
html body .product-pdp .pdp-storytelling__body h2.serif {
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  font-optical-sizing: auto !important;
  font-size: clamp(44px, 5vw, 72px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1 !important;
  color: var(--es-ink) !important;
  margin-bottom: 16px !important;
  text-transform: none !important;
}
html body .product-pdp .pdp-storytelling__body h2.serif em {
  font-style: italic !important;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important;
}

/* Layout 2-cols : équilibrage avec vidéo plus paysage */
html body .product-pdp .pdp-storytelling__grid {
  align-items: center !important;
}

@media (max-width: 900px) {
  html body .product-pdp video.pdp-storytelling__visual,
  html body .product-pdp .pdp-storytelling__visual--video {
    aspect-ratio: 16 / 9 !important;
  }
}

/* ============================================================================
   PATCH 37 — Body paragraphes PDP alignés STRICT sur pattern home
   Home pattern (.howto__head p / .collections__head p) :
     Inter 17px / line-height 1.65 / color gray / font-style normal
   Override final ultra-spécifique pour battre tous les patches précédents.
   ============================================================================ */
html body .product-pdp .pdp-storytelling__body p,
html body .product-pdp .pdp-unboxing__body > p,
html body .product-pdp .pdp-pillar__body,
html body .product-pdp .pdp-review__quote,
html body .product-pdp .pdp-diff-card__pitch,
html body .product-pdp .pdp-quizband__body,
html body .product-pdp .pdp-section__head > p:not(.pdp-section__tagline):not(.eyebrow) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--es-gray) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Quizband sur fond cacao : garde le gris clair lisible (rgba) */
html body .product-pdp .pdp-quizband__body {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================================
   PATCH 38 — Alignement STRICT sur la home : tagline, rating §4, meta reviews
   ============================================================================ */

/* 1. TAGLINE italique : strict pattern home (.howto__tagline) */
html body .pdp-section__tagline,
html body .product-pdp .pdp-section__tagline {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.005em !important;
  color: var(--es-gray) !important;
  margin: 14px auto 0 !important;
  max-width: 540px !important;
  text-align: center !important;
  text-transform: none !important;
}

/* 2. RATING §4 « 4,9/5 » : strict pattern home (.reviews__stats-rating) */
html body .product-pdp .pdp-reviews .pdp-section__head h2.serif {
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: clamp(64px, 6.5vw, 96px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--es-ink) !important;
  margin-bottom: 14px !important;
  text-transform: none !important;
}
html body .product-pdp .pdp-reviews .pdp-section__head h2.serif em {
  font-style: italic !important;
  font-size: 0.5em !important;
  color: var(--es-gray) !important;
  margin-left: 6px !important;
  font-weight: 300 !important;
}

/* 3. STARS §4 : 18px cacao 6px (déjà OK mais on assure) */
html body .product-pdp .pdp-reviews .pdp-reviews-stars {
  color: var(--es-cacao) !important;
  font-size: 18px !important;
  letter-spacing: 6px !important;
  line-height: 1 !important;
  margin: 8px 0 18px !important;
  font-style: normal !important;
}

/* 4. META §4 « Sur 87 avis » : Mono uppercase strict (.reviews__stats-meta) */
html body .product-pdp .pdp-reviews .pdp-section__head > p:not(.eyebrow):not(.pdp-section__tagline) {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ============================================================================
   PATCH 39 — Body desc 15px + card titles strict pattern home
   ============================================================================ */

/* BODY DESC dans cards / colonnes : strict 15px gray Inter (= .bestseller__desc / .odorkiller__desc) */
html body .product-pdp .pdp-storytelling__body p,
html body .product-pdp .pdp-unboxing__body > p,
html body .product-pdp .pdp-pillar__body,
html body .product-pdp .pdp-quizband__body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--es-gray) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Quote review : 15px mais ink (texte principal de la card) */
html body .product-pdp .pdp-review__quote {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Quizband body : blanc translucide sur fond cacao */
html body .product-pdp .pdp-quizband__body {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* CARD PITCH (très compact) : 13px gray (= .diff-card__desc) */
html body .product-pdp .pdp-diff-card__pitch {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--es-gray) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* CARD TITLES (Fraunces, taille step/card home) */
/* Diffuseur card name = strict .diff-card__name */
html body .product-pdp .pdp-diff-card__name {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
  margin: 0 !important;
}
/* Pillar + Usage slide + Review titles = strict .howto__step__caption h3 */
html body .product-pdp .pdp-pillar__title,
html body .product-pdp .pdp-usage__slide-name,
html body .product-pdp .pdp-review__title {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 100 !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--es-ink) !important;
  text-transform: none !important;
  margin: 0 !important;
}

/* ============================================================================
   PATCH 40 — Force Fraunces sur TOUS les <em> des H2 PDP
   Le bleed Elementor accent typography (Cormorant Garamond italic) écrase
   l'em qui n'a pas de font-family explicite. On force EVERY h2 em PDP.
   ============================================================================ */
html body .product-pdp h2.serif em,
html body .product-pdp .pdp-section__head h2.serif em,
html body .product-pdp .pdp-storytelling__body h2.serif em,
html body .product-pdp .pdp-unboxing__body h2.serif em,
html body .product-pdp .pdp-reviews .pdp-section__head h2.serif em,
html body .product-pdp .pdp-quizband h2.serif em,
html body .product-pdp .pdp-faq-section h2.serif em {
  font-weight: 400 !important;
  font-style: italic !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important;
  font-optical-sizing: auto !important;
  text-transform: none !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}

/* Et idem pour TOUT le h2.serif lui-même (s'assurer Fraunces strict aussi) */
html body .product-pdp h2.serif {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-style: normal !important;
}

/* ============================================================================
   PATCH 41 — Bouton "agrandir" sur la vidéo §1 + modale vidéo plein écran
   ============================================================================ */
html body .product-pdp .pdp-storytelling__media {
  position: relative;
}
html body .product-pdp .pdp-storytelling__expand {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  pointer-events: auto;
  opacity: 0.85;
}
html body .product-pdp .pdp-storytelling__expand svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.4;
}
html body .product-pdp .pdp-storytelling__expand:hover {
  background: transparent !important;
  opacity: 1;
  transform: scale(1.1);
  color: #fff;
}
html body .product-pdp .pdp-storytelling__expand:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
html body .product-pdp .pdp-storytelling__expand svg {
  width: 18px;
  height: 18px;
}

/* Modale vidéo plein écran */
html body .pdp-modal.pdp-modal--video {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
html body .pdp-modal.pdp-modal--video.is-open {
  display: flex;
}
html body .pdp-modal.pdp-modal--video .pdp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
}
html body .pdp-modal--video .pdp-modal__close--video {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff !important;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
}
html body .pdp-modal--video .pdp-modal__close--video:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}
html body .pdp-modal--video .pdp-modal__video-wrap {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 90vh;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Vidéo MP4 locale : prend sa taille naturelle (portrait ou paysage), pas de bandes noires */
html body .pdp-modal--video .pdp-modal__video-wrap video {
  max-width: 92vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  border: 0;
  background: #000;
}
/* Iframe YouTube : reste en 16/9 (ratio natif YouTube) */
html body .pdp-modal--video .pdp-modal__video-wrap iframe {
  width: min(92vw, 1280px);
  aspect-ratio: 16 / 9;
  max-height: 88vh;
  display: block;
  border: 0;
}
@media (max-width: 600px) {
  html body .product-pdp .pdp-storytelling__expand {
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 10px;
  }
  html body .pdp-modal--video .pdp-modal__close--video {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  html body .pdp-modal--video .pdp-modal__video-wrap {
    width: 96vw;
  }
}

/* ============================================================================
   PATCH 42 — Réduit l'espace entre hero PDP et §1 « Une atmosphère »
   Hero a padding-bottom 32-48px + §1 padding-top 80px = ~112px trop.
   §1 storytelling : padding-top serré pour qu'elle suive le hero de près.
   ============================================================================ */
html body .product-pdp .pdp-section.pdp-storytelling {
  padding-top: 40px !important;
}
@media (max-width: 900px) {
  html body .product-pdp .pdp-section.pdp-storytelling {
    padding-top: 24px !important;
  }
}

/* ============================================================================
   PATCH 43 — FINAL : TOUS les paragraphes body PDP = strict pattern hero
   .bestseller__desc : Inter 15px / 1.65 / gray / normal
   Spécificité ULTRA-haute (html body main.product-pdp ...) pour battre tous
   les patches précédents qui mettent 16px / 14.5px / 13.5px / 13px etc.
   ============================================================================ */
html body main.product-pdp .pdp-storytelling__body p,
html body main.product-pdp .pdp-unboxing__body > p,
html body main.product-pdp .pdp-unboxing__list li,
html body main.product-pdp .pdp-pillar__body,
html body main.product-pdp .pdp-review__quote,
html body main.product-pdp .pdp-diff-card__pitch,
html body main.product-pdp .pdp-usage__method-desc,
html body main.product-pdp .pdp-usage__slide-desc,
html body main.product-pdp .pdp-quizband__body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.65 !important;
  color: var(--es-gray) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Exception 1 : review quote en ink (texte principal de la card) */
html body main.product-pdp .pdp-review__quote {
  color: var(--es-ink) !important;
}
/* Exception 2 : quizband body sur fond cacao = blanc translucide */
html body main.product-pdp .pdp-quizband__body {
  color: rgba(255, 255, 255, 0.92) !important;
}
/* Exception 3 : strong dans les paragraphes = ink semi-bold */
html body main.product-pdp .pdp-storytelling__body p strong,
html body main.product-pdp .pdp-unboxing__body > p strong,
html body main.product-pdp .pdp-unboxing__list li strong,
html body main.product-pdp .pdp-pillar__body strong,
html body main.product-pdp .pdp-review__quote strong,
html body main.product-pdp .pdp-diff-card__pitch strong,
html body main.product-pdp .pdp-usage__method-desc strong {
  font-weight: 500 !important;
  color: var(--es-ink) !important;
  font-style: normal !important;
}

/* MOBILE : aligner sur le hero qui descend à 14px (.bestseller__desc mobile) */
@media (max-width: 900px) {
  html body main.product-pdp .pdp-storytelling__body p,
  html body main.product-pdp .pdp-unboxing__body > p,
  html body main.product-pdp .pdp-unboxing__list li,
  html body main.product-pdp .pdp-pillar__body,
  html body main.product-pdp .pdp-review__quote,
  html body main.product-pdp .pdp-diff-card__pitch,
  html body main.product-pdp .pdp-usage__method-desc,
  html body main.product-pdp .pdp-usage__slide-desc,
  html body main.product-pdp .pdp-quizband__body {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}

/* ============================================================================
   PATCH 44 — §4 PDP reviews : fond cream alt + cards blanches (pattern §2)
   ============================================================================ */
html body main.product-pdp .reviews.reviews--pdp {
  background: var(--es-bg-alt) !important;
}
html body main.product-pdp .reviews.reviews--pdp a.review-quote,
html body main.product-pdp .reviews.reviews--pdp .review-quote {
  background: #fff !important;
  border: 1px solid var(--es-line) !important;
}
html body main.product-pdp .reviews.reviews--pdp a.review-quote:hover {
  border-color: var(--es-cacao) !important;
}

/* ============================================================================
   PATCH 45 — §4 PDP reviews : liste compacte révélée au clic
   Format minimal (sans card), divider entre chaque, animation fade-in
   ============================================================================ */
html body main.product-pdp .reviews.reviews--pdp .reviews__expanded {
  max-width: 1180px;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
html body main.product-pdp .reviews.reviews--pdp .reviews__expanded[hidden] {
  display: none;
}
html body main.product-pdp .reviews.reviews--pdp .review-compact {
  padding: 22px 0;
  border-top: 1px solid var(--es-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html body main.product-pdp .reviews.reviews--pdp .review-compact:last-child {
  border-bottom: 1px solid var(--es-line);
}
html body main.product-pdp .reviews.reviews--pdp .review-compact__head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
}
html body main.product-pdp .reviews.reviews--pdp .review-compact__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--es-bg-chip);
  color: var(--es-cacao);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body main.product-pdp .reviews.reviews--pdp .review-compact__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html body main.product-pdp .reviews.reviews--pdp .review-compact__name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--es-ink);
  line-height: 1.2;
}
html body main.product-pdp .reviews.reviews--pdp .review-compact__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--es-gray);
  display: flex;
  align-items: center;
  gap: 4px;
}
html body main.product-pdp .reviews.reviews--pdp .review-compact__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--es-cacao);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
}
html body main.product-pdp .reviews.reviews--pdp .review-compact__stars {
  color: var(--es-cacao);
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 1;
}
html body main.product-pdp .reviews.reviews--pdp .review-compact__text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--es-ink);
  margin: 0;
  padding-left: 44px;
}
@media (max-width: 700px) {
  html body main.product-pdp .reviews.reviews--pdp .review-compact__head {
    grid-template-columns: 32px 1fr;
  }
  html body main.product-pdp .reviews.reviews--pdp .review-compact__stars {
    grid-column: 2;
    margin-top: 4px;
  }
  html body main.product-pdp .reviews.reviews--pdp .review-compact__text {
    padding-left: 0;
  }
}

/* ============================================================================
   PATCH 46 — §4 PDP : layout double CTA (Afficher plus + Réduire)
   ============================================================================ */
html body main.product-pdp .reviews.reviews--pdp .reviews__cta--double {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  flex-wrap: wrap;
}
html body main.product-pdp .reviews.reviews--pdp .reviews__seeall-link--reduce {
  color: var(--es-gray) !important;
  border-bottom-color: var(--es-gray) !important;
}
html body main.product-pdp .reviews.reviews--pdp .reviews__seeall-link--reduce:hover {
  color: var(--es-ink) !important;
  border-bottom-color: var(--es-ink) !important;
}
@media (max-width: 600px) {
  html body main.product-pdp .reviews.reviews--pdp .reviews__cta--double {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* PATCH 47 — Fix : attribut hidden écrasé par display:flex sur .review-compact */
html body main.product-pdp .reviews.reviews--pdp .review-compact[hidden] {
  display: none !important;
}
html body main.product-pdp .reviews.reviews--pdp .reviews__expanded[hidden] {
  display: none !important;
}

/* PATCH 48 — Fix : hidden attribute sur les liens CTA review (battait display:inline-block !important) */
html body main.product-pdp .reviews.reviews--pdp a.reviews__seeall-link[hidden] {
  display: none !important;
}

/* ============================================================================
   PATCH 49 — §5 PDP pillars : alignement strict avec pattern home + autres §
   • Cards blanches avec bordure + hover translateY -2px / border cacao
   • Icônes 32px stroke 1.1 (matche home .values__icon)
   • Titres clamp(24,3vw,32) Fraunces (matche home .col-item__title)
   • Body 15px Inter gray (PATCH 43 pattern, 14px mobile)
   • Tagline italique grise (matche §2 §6 pattern)
   • H2 strict SOFT 100 + swsh 1 (matche §4)
   ============================================================================ */

/* Grid : 3 piliers aérés, SANS cards, séparateur vertical discret */
html body main.product-pdp .pdp-pillars__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 48px !important;
  margin-top: 32px !important;
  align-items: stretch !important;
}
@media (max-width: 900px) {
  html body main.product-pdp .pdp-pillars__grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Pilier : layout centré clean, pas de card, hover sur l'icône uniquement */
html body main.product-pdp .pdp-pillar {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  position: relative !important;
}
/* Séparateur vertical discret entre les piliers (pattern home .values__item) */
html body main.product-pdp .pdp-pillar + .pdp-pillar::before {
  content: "" !important;
  position: absolute !important;
  left: -24px !important;
  top: 12% !important;
  bottom: 12% !important;
  width: 1px !important;
  background: var(--es-line) !important;
}
@media (max-width: 900px) {
  html body main.product-pdp .pdp-pillar + .pdp-pillar::before {
    display: none !important;
  }
}
html body main.product-pdp .pdp-pillar:hover .pdp-pillar__icon {
  color: var(--es-ink) !important;
}

/* Icône 32px stroke 1.1 cacao (matche home .values__icon) */
html body main.product-pdp .pdp-pillar__icon {
  width: 32px !important;
  height: 32px !important;
  color: var(--es-cacao) !important;
  stroke-width: 1.1 !important;
  transition: color 0.3s ease !important;
}

/* Titre clamp(24,3vw,32) Fraunces (matche home .col-item__title) + text-wrap balance */
html body main.product-pdp .pdp-pillar__title {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  font-optical-sizing: auto !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: var(--es-ink) !important;
  margin: 0 !important;
  text-transform: none !important;
  text-wrap: balance !important;
  min-height: 1.4em !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
@media (max-width: 900px) {
  html body main.product-pdp .pdp-pillar__title {
    font-size: 22px !important;
  }
}

/* Body 15px Inter gray (PATCH 43 pattern), max-width 340px */
html body main.product-pdp .pdp-pillar__body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--es-gray) !important;
  margin: 0 !important;
  max-width: 340px !important;
}
@media (max-width: 900px) {
  html body main.product-pdp .pdp-pillar__body {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}

/* ============================================================================
   PATCH 50 — §8 FAQ : alignement strict avec pattern PATCH 43 + autres sections
   • Question : 20px Fraunces (au lieu de 18px)
   • Réponse : Inter 15px GRAY line-height 1.65 (PATCH 43 pattern, au lieu de 14.5px ink)
   • Caret cacao au repos, ink au hover
   • Padding bottom réponse : 36px (au lieu de 28px) pour respirer
   • Background section : cream alt (matche §2 / §4)
   ============================================================================ */

/* Question : 20px au lieu de 18px imposé par PATCH précédent */
html body .product-pdp .pdp-faq__q,
html body .product-pdp .pdp-faq__q span {
  font-size: 20px !important;
  line-height: 1.3 !important;
}
@media (max-width: 700px) {
  html body .product-pdp .pdp-faq__q,
  html body .product-pdp .pdp-faq__q span {
    font-size: 17px !important;
  }
}

/* Réponse : Inter 15px GRAY (pattern PATCH 43 strict) */
html body .product-pdp .pdp-faq__a-inner,
html body .product-pdp .pdp-faq__a-inner * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--es-gray) !important;
  letter-spacing: 0 !important;
}
html body .product-pdp .pdp-faq__a-inner strong {
  color: var(--es-ink) !important;
  font-weight: 500 !important;
}
@media (max-width: 700px) {
  html body .product-pdp .pdp-faq__a-inner,
  html body .product-pdp .pdp-faq__a-inner * {
    font-size: 14px !important;
  }
}

/* Padding bottom réponse + plus de respiration */
html body .product-pdp .pdp-faq__a-inner {
  padding: 0 0 36px !important;
}

/* Caret cacao au repos, ink au hover (matche pattern site) */
html body .product-pdp .pdp-faq__caret::before,
html body .product-pdp .pdp-faq__caret::after {
  background: var(--es-cacao) !important;
  transition: background 0.2s ease, opacity 0.3s ease !important;
}
html body .product-pdp .pdp-faq__q:hover .pdp-faq__caret::before,
html body .product-pdp .pdp-faq__q:hover .pdp-faq__caret::after {
  background: var(--es-ink) !important;
}

/* Lien inline cacao garde son comportement (pas de changement nécessaire) */

/* PATCH 51 — §8 FAQ mobile : fix overflow horizontal (texte question ne wrappait pas) */
@media (max-width: 700px) {
  html body .product-pdp .pdp-faq-section .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body .product-pdp .pdp-faq {
    max-width: 100% !important;
    width: 100% !important;
  }
  html body .product-pdp .pdp-faq__item {
    width: 100%;
    overflow: hidden;
  }
  html body .product-pdp .pdp-faq__q {
    padding: 20px 0 !important;
    gap: 14px !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  html body .product-pdp .pdp-faq__q span:not(.pdp-faq__caret) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  html body .product-pdp .pdp-faq__caret {
    flex-shrink: 0 !important;
    margin-top: 4px !important;
  }
  html body .product-pdp .pdp-faq__a-inner {
    padding: 0 0 24px !important;
    font-size: 14px !important;
  }
}

/* ============================================================================
   PATCH 52 — Footer global : passage en Ink (#1A1A1A) avec texte Cream
   Crée une transition forte entre la dernière section et le footer.
   Le bottom bar reste ink (déjà le cas), continuité visuelle.
   ============================================================================ */

/* Fond ink */
html body .es-footer {
  background: var(--es-ink) !important;
}

/* Titres colonnes : cream signature au lieu d'ink + border discrète */
html body .es-footer__col h5 {
  color: var(--es-bg-alt) !important;
  border-bottom-color: rgba(244, 239, 230, 0.15) !important;
}

/* Liens colonnes : cream 85% — spécificité haute pour battre la règle ligne 2807 */
html body .es-footer .es-footer__col a,
html body .es-footer .es-footer__col a:link,
html body .es-footer .es-footer__col a:visited,
html body .es-footer .es-footer__col li a {
  color: rgba(244, 239, 230, 0.85) !important;
  transition: color 0.2s ease !important;
}
html body .es-footer .es-footer__col a:hover,
html body .es-footer .es-footer__col li a:hover {
  color: var(--es-bg-alt) !important;
}

/* Icônes sociales : cream 85%, hover cacao */
html body .es-footer .es-footer__social a {
  color: rgba(244, 239, 230, 0.85) !important;
}
html body .es-footer .es-footer__social a:hover {
  color: var(--es-cacao) !important;
}

/* Sélecteur langue : tonalités cream montées */
html body .es-footer .es-footer__lang span {
  color: rgba(244, 239, 230, 0.7) !important;
}
html body .es-footer .es-footer__lang span:hover,
html body .es-footer .es-footer__lang span.active {
  color: var(--es-bg-alt) !important;
}
html body .es-footer .es-footer__lang i {
  color: rgba(244, 239, 230, 0.4) !important;
}

/* Copyright : cream 65% — spécificité haute pour battre la règle ligne 2825 */
html body .es-footer .es-footer__copyright {
  color: rgba(244, 239, 230, 0.65) !important;
}

/* Sigle SVG (si stroke/fill explicite) : passer en cream pour qu'il reste visible */
html body .es-footer__sigle img {
  filter: brightness(0) invert(0.92) sepia(0.05);
}

/* Bottom bar reste tel quel (déjà ink) — pas de séparation visible avec le main footer */
html body .es-footer__bottom {
  background: var(--es-ink) !important;
  border-top: 1px solid rgba(244, 239, 230, 0.1) !important;
}

/* ============================================================================
   PATCH 53 — Footer Ink + accents Cacao (option C validée)
   • Border-top épais cacao (3px) → démarquation forte avec section précédente
   • h5 titres colonnes en CACAO (au lieu de cream) → ressortent comme accents premium
   • Sigle ES dans un disque cacao → signature visuelle forte
   ============================================================================ */

/* Démarquation visible : border-top cacao épaisse */
html body .es-footer {
  border-top: 3px solid var(--es-cacao) !important;
}

/* h5 titres colonnes en Lin Patiné Light (#C5B89C) — warm brand visible sur ink
   Spécificité haute pour battre la règle ligne 2785 `.es-footer .es-footer__col h5`
   qui force `color: var(--es-ink) !important` (= texte invisible sur fond ink) */
html body .es-footer .es-footer__col h5,
html body footer .es-footer .es-footer__col h5 {
  color: var(--es-lin-light, #C5B89C) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(197, 184, 156, 0.25) !important;
}

/* Sigle ES dans un disque cacao : signature centrale */
html body .es-footer__sigle {
  width: 56px !important;
  height: 56px !important;
  background: var(--es-cacao) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  margin: 0 auto 18px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
html body .es-footer__sigle img {
  width: 100% !important;
  height: 100% !important;
  /* Filter override : sigle en cream contrasté sur le cacao */
  filter: brightness(0) invert(0.94) !important;
}

/* ============================================================================
   PATCH 54 — §6 diffuseurs PDP : fond cream alt pour créer transition avec §5
   La classe product-pdp est sur <main>, PAS sur <body> (vérifié).
   Sur PDP, cream alt = même pattern que §2/§4/§8 → rythme alterné cohérent.
   ============================================================================ */
html body main.product-pdp .diffusers.diffusers--shared,
html body main.product-pdp section.diffusers {
  background: var(--es-bg-alt) !important;
}

/* ============================================================================
   PATCH 55 — Section Espace Pro (B2B CTA juste au-dessus du footer)
   Background : cacao-dark / olive sombre · texte cream · CTA blanc
   Layout : grid 2 colonnes (gauche = titre+CTA, droite = clients en grille)
   ============================================================================ */
.espace-pro {
  background: var(--es-cacao-dark, #5F4F3D);
  padding: 96px 0;
  color: rgba(244, 239, 230, 0.92);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.espace-pro .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.espace-pro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Colonne gauche */
.espace-pro__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.7);
  margin-bottom: 32px;
}
.espace-pro__title {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-feature-settings: "ss01", "swsh" 1;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--es-bg-alt);
  margin-bottom: 24px;
}
.espace-pro__title em {
  font-style: italic;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1;
}
.espace-pro__desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.85);
  margin-bottom: 36px;
  max-width: 480px;
}
.espace-pro__cta,
.espace-pro a.espace-pro__cta {
  display: inline-flex;
  align-items: center;
  padding: 18px 32px;
  background: var(--es-bg-alt);
  color: var(--es-ink);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid var(--es-bg-alt);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.espace-pro a.espace-pro__cta:hover {
  background: transparent;
  color: var(--es-bg-alt);
  transform: translateY(-1px);
}

/* Colonne droite : clients en grille 2x3 */
.espace-pro__clients-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
  margin-bottom: 32px;
}
.espace-pro__clients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
}
.espace-pro__client {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.espace-pro__client-name {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--es-bg-alt);
  font-feature-settings: "ss01", "swsh" 2, "calt" 1;
  margin: 0;
}
.espace-pro__client-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
}

/* Responsive */
@media (max-width: 900px) {
  .espace-pro { padding: 64px 0; }
  .espace-pro .container { padding: 0 24px; }
  .espace-pro__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .espace-pro__desc { max-width: 100%; }
  .espace-pro__clients { gap: 24px 32px; }
}
@media (max-width: 500px) {
  .espace-pro__clients {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================================================
   PATCH 56 — FORCE background ink sur le footer (nuclear fix)
   PATCH 52 ne s'appliquait pas correctement (cause inconnue, peut-être cache).
   On cible TOUTES les wrapping possibles avec spécificité max + !important.
   ============================================================================ */
html body footer.elementor-location-footer,
html body footer.elementor-location-footer > .e-con.es-footer,
html body footer.elementor-location-footer .e-con.es-footer,
html body footer[data-elementor-type="footer"] .es-footer,
html body div.es-footer,
html body section.es-footer,
html body .e-con.es-footer,
html body .elementor-element.es-footer {
  background: var(--es-ink, #1A1A1A) !important;
  background-color: var(--es-ink, #1A1A1A) !important;
}

/* ============================================================================
   PATCH 57 — Footer : force padding-top + créer respiration avec section précédente
   Elementor écrasait le padding-top du footer (les h5 étaient collés en haut).
   ============================================================================ */
html body footer.elementor-location-footer .e-con.es-footer,
html body div.es-footer,
html body .e-con.es-footer {
  padding-top: 96px !important;
  padding-bottom: 0 !important;
}

@media (max-width: 900px) {
  html body footer.elementor-location-footer .e-con.es-footer,
  html body div.es-footer,
  html body .e-con.es-footer {
    padding-top: 56px !important;
  }
}

/* ============================================================================
   PATCH 58 — Footer : override CSS variables Elementor pour le padding
   Elementor utilise --padding-block-start/end sur .e-con (qui battent
   les padding directes via :where(). On force les variables.
   ============================================================================ */
html body footer.elementor-location-footer .e-con.es-footer,
html body .e-con.es-footer,
html body div.es-footer {
  --padding-block-start: 96px !important;
  --padding-block-end: 0 !important;
  --padding-top: 96px !important;
  --padding-bottom: 0 !important;
  padding-block-start: 96px !important;
  padding-block-end: 0 !important;
  padding-top: 96px !important;
  padding-bottom: 0 !important;
}

@media (max-width: 900px) {
  html body footer.elementor-location-footer .e-con.es-footer,
  html body .e-con.es-footer,
  html body div.es-footer {
    --padding-block-start: 56px !important;
    --padding-top: 56px !important;
    padding-block-start: 56px !important;
    padding-top: 56px !important;
  }
}

/* ============================================================================
   PATCH 59 — Transition Espace Pro → Footer
   Border-top cacao se confondait avec le brown de l'Espace Pro.
   On passe en lin patiné light (#C5B89C) qui ressort sur brown ET sur ink.
   ============================================================================ */
html body footer.elementor-location-footer .e-con.es-footer,
html body .e-con.es-footer,
html body div.es-footer {
  border-top: 2px solid rgba(197, 184, 156, 0.35) !important;
}

/* ============================================================================
   PATCH 60 — Force respiration en haut du footer via margin-top sur le contenu
   PATCH 57/58 (padding-top sur container) ne fonctionnait pas — peut-être
   intercepté par Elementor flex. On margin le contenu direct à la place.
   ============================================================================ */
html body .es-footer .es-footer__cols,
html body footer .es-footer .es-footer__cols {
  margin-top: 96px !important;
}

@media (max-width: 900px) {
  html body .es-footer .es-footer__cols,
  html body footer .es-footer .es-footer__cols {
    margin-top: 56px !important;
  }
}

/* ============================================================================
   PATCH 61 — Fix margin collapse du footer (sans casser le flex layout)
   Solution propre : on retire le margin-top de .es-footer__cols (PATCH 60)
   et on met le padding-top directement sur le widget Elementor enfant
   qui contient le shortcode.
   ============================================================================ */
html body .es-footer .es-footer__cols,
html body footer .es-footer .es-footer__cols {
  margin-top: 0 !important;
}
html body .es-footer > .elementor-widget-shortcode,
html body .es-footer > .elementor-element:first-child {
  padding-top: 96px !important;
}
@media (max-width: 900px) {
  html body .es-footer > .elementor-widget-shortcode,
  html body .es-footer > .elementor-element:first-child {
    padding-top: 56px !important;
  }
}

/* ============================================================================
   PATCH 62 — Footer : highlight "Quiz olfactif" link en cacao
   La classe .menu-item-quiz n'existait que pour le header. On l'ajoute au footer.
   ============================================================================ */
html body .es-footer .es-footer__col a.menu-item-quiz,
html body .es-footer .es-footer__col a.menu-item-quiz:link,
html body .es-footer .es-footer__col a.menu-item-quiz:visited,
html body footer .es-footer .es-footer__col li a.menu-item-quiz {
  color: var(--es-cacao, #7C6650) !important;
}
html body .es-footer .es-footer__col a.menu-item-quiz:hover {
  color: var(--es-lin-light, #C5B89C) !important;
}

/* ============================================================================
   PATCH 63 — Footer v2 : newsletter + adresse + payments + tighten spacing
   ============================================================================ */

/* ─── Newsletter signup (en haut du footer) ─── */
html body .es-footer .es-footer__newsletter {
  max-width: 720px;
  margin: 0 auto 64px;
  padding: 0 32px;
  text-align: center;
}
html body .es-footer .es-footer__newsletter-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--es-lin-light, #C5B89C);
  margin-bottom: 18px;
}
html body .es-footer .es-footer__newsletter-title {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-feature-settings: "ss01", "swsh" 1;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--es-bg-alt);
  margin: 0 0 14px;
}
html body .es-footer .es-footer__newsletter-title em {
  font-style: italic;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1;
}
html body .es-footer .es-footer__newsletter-tagline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.7);
  margin: 0 auto 28px;
  max-width: 480px;
}
html body .es-footer .es-footer__newsletter-form {
  display: flex;
  gap: 0;
  max-width: 460px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(244, 239, 230, 0.2);
  transition: border-color 0.2s ease;
}
html body .es-footer .es-footer__newsletter-form:focus-within {
  border-bottom-color: var(--es-bg-alt);
}
html body .es-footer .es-footer__newsletter-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--es-bg-alt);
  outline: none;
}
html body .es-footer .es-footer__newsletter-form input::placeholder {
  color: rgba(244, 239, 230, 0.5);
}
html body .es-footer .es-footer__newsletter-form button {
  background: transparent;
  border: none;
  padding: 14px 4px 14px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--es-lin-light, #C5B89C);
  cursor: pointer;
  transition: color 0.2s ease;
}
html body .es-footer .es-footer__newsletter-form button:hover {
  color: var(--es-bg-alt);
}

/* ─── Contact / atelier (dans utility) ─── */
html body .es-footer .es-footer__contact {
  text-align: center;
  margin-top: 0;
}
html body .es-footer .es-footer__contact-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--es-lin-light, #C5B89C);
  margin: 0 0 8px;
}
html body .es-footer .es-footer__contact-line {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.7);
  margin: 0;
}
html body .es-footer .es-footer__contact-line a {
  color: rgba(244, 239, 230, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 230, 0.2);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
html body .es-footer .es-footer__contact-line a:hover {
  color: var(--es-bg-alt);
  border-bottom-color: var(--es-bg-alt);
}

/* ─── Payments icons (sous le sigle) ─── */
html body .es-footer .es-footer__payments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 12px;
}
html body .es-footer .es-footer__payments img {
  height: 18px;
  width: auto;
  opacity: 0.65;
  filter: grayscale(1) brightness(1.8);
  transition: opacity 0.2s ease;
}
html body .es-footer .es-footer__payments img:hover {
  opacity: 1;
}
/* Bancontact PNG : un peu plus grand pour matcher visuellement les SVG */
html body .es-footer .es-footer__payments img[alt="Bancontact"] {
  height: 22px;
}

/* ─── Tighten spacing : réduction vide entre cols et utility ─── */
html body .es-footer .es-footer__cols {
  margin-bottom: 48px !important;
}
html body .es-footer .es-footer__utility {
  margin-top: 0;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(244, 239, 230, 0.1);
}
html body .es-footer .es-footer__sigle-wrap {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* ─── Layout utility : social + langue + contact en 3 colonnes ─── */
html body .es-footer .es-footer__utility {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px 48px;
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 0 40px 32px;
}

@media (max-width: 900px) {
  html body .es-footer .es-footer__newsletter {
    padding: 0 20px;
    margin-bottom: 48px;
  }
  html body .es-footer .es-footer__newsletter-title {
    font-size: clamp(24px, 6vw, 32px);
  }
  html body .es-footer .es-footer__utility {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    padding: 0 20px 28px;
  }
  html body .es-footer .es-footer__payments {
    flex-wrap: wrap;
  }
  html body .es-footer .es-footer__cols {
    margin-bottom: 32px !important;
  }
}

/* ============================================================================
   PATCH 64 — Footer v2 polish
   • Payments : retirer le grayscale moche, garder couleurs naturelles + smaller
   • ATELIER : compactifier (1 ligne au lieu de 3) pour balance utility
   • Newsletter : réduire vertical spacing
   ============================================================================ */

/* Payments : couleurs naturelles, plus petits, plus serrés */
html body .es-footer .es-footer__payments img {
  height: 22px !important;
  width: auto !important;
  opacity: 0.95 !important;
  filter: none !important;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 6px;
  transition: opacity 0.2s ease, background 0.2s ease !important;
}
html body .es-footer .es-footer__payments img:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.08);
}
html body .es-footer .es-footer__payments img[alt="Bancontact"] {
  height: 22px !important;
}

/* ATELIER : compacter sur 1 ligne avec séparateurs */
html body .es-footer .es-footer__contact {
  text-align: right;
  flex: 0 1 auto;
}
html body .es-footer .es-footer__contact-title {
  display: inline;
  margin: 0;
}
html body .es-footer .es-footer__contact-line {
  display: inline;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
}
html body .es-footer .es-footer__contact-line + .es-footer__contact-line::before,
html body .es-footer .es-footer__contact-title + .es-footer__contact-line::before {
  content: "·";
  margin: 0 8px;
  color: rgba(244, 239, 230, 0.3);
}

/* Newsletter : tighten vertical spacing */
html body .es-footer .es-footer__newsletter {
  margin-bottom: 56px !important;
}
html body .es-footer .es-footer__newsletter-tagline {
  margin-bottom: 24px;
}

/* Mobile : contact passe en stack vertical centré */
@media (max-width: 900px) {
  html body .es-footer .es-footer__contact {
    text-align: center;
  }
  html body .es-footer .es-footer__contact-title,
  html body .es-footer .es-footer__contact-line {
    display: block;
  }
  html body .es-footer .es-footer__contact-line + .es-footer__contact-line::before,
  html body .es-footer .es-footer__contact-title + .es-footer__contact-line::before {
    display: none;
  }
}

/* ============================================================================
   PATCH 65 — Newsletter footer redesign (matche référence visuelle)
   • H2 standard pattern site (Fraunces SOFT 100 + swsh)
   • Input bordered + bouton plein blanc avec texte ink
   • Mention "Désinscription en un clic" Mono uppercase sous le form
   • Bloc Atelier/contact supprimé du shortcode (présent sur page contact)
   ============================================================================ */

/* Eyebrow newsletter : pattern eyebrow standard */
html body .es-footer .es-footer__newsletter-eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--es-lin-light, #C5B89C) !important;
  margin-bottom: 28px !important;
}

/* Title : H2 pattern strict (matche home/§2/§4 etc) */
html body .es-footer .es-footer__newsletter-title {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
  font-optical-sizing: auto !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
  color: var(--es-bg-alt) !important;
  margin: 0 0 20px !important;
  text-transform: none !important;
}
html body .es-footer .es-footer__newsletter-title em {
  font-style: italic !important;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important;
}

/* Tagline */
html body .es-footer .es-footer__newsletter-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.7) !important;
  max-width: 540px !important;
  margin: 0 auto 36px !important;
}

/* Form : input bordered + button plein blanc */
html body .es-footer .es-footer__newsletter-form {
  display: flex !important;
  gap: 0 !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  border-bottom: none !important;
}
html body .es-footer .es-footer__newsletter-form input[type="email"] {
  flex: 1 !important;
  background: transparent !important;
  border: 1px solid rgba(244, 239, 230, 0.3) !important;
  border-right: none !important;
  padding: 16px 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--es-bg-alt) !important;
  outline: none !important;
  border-radius: 0 !important;
  transition: border-color 0.2s ease !important;
}
html body .es-footer .es-footer__newsletter-form input:focus {
  border-color: var(--es-bg-alt) !important;
}
html body .es-footer .es-footer__newsletter-form input::placeholder {
  color: rgba(244, 239, 230, 0.5) !important;
}
html body .es-footer .es-footer__newsletter-form button {
  background: var(--es-bg-alt) !important;
  border: 1px solid var(--es-bg-alt) !important;
  padding: 16px 32px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--es-ink) !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
html body .es-footer .es-footer__newsletter-form button:hover {
  background: transparent !important;
  color: var(--es-bg-alt) !important;
}

/* Mention légale "Désinscription en un clic" sous le form */
html body .es-footer .es-footer__newsletter-legal {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(244, 239, 230, 0.5) !important;
  margin: 20px 0 0 !important;
  text-align: center !important;
}

/* Layout utility : revient à 2 colonnes (social gauche, lang centre) sans contact */
html body .es-footer .es-footer__utility {
  justify-content: center !important;
  gap: 32px !important;
}

@media (max-width: 600px) {
  html body .es-footer .es-footer__newsletter-form {
    flex-direction: column;
    gap: 12px !important;
  }
  html body .es-footer .es-footer__newsletter-form input[type="email"] {
    border: 1px solid rgba(244, 239, 230, 0.3) !important;
  }
}

/* ============================================================================
   PATCH 66 — Newsletter polish : match ré référence Nabila
   • Button : pure blanc (#fff) au lieu de cream
   • Italique em : enlever swsh 2 (trop décoratif), garder calt
   • Titre : opsz 36 pour look plus éditorial classique (moins display)
   ============================================================================ */

html body .es-footer .es-footer__newsletter-title {
  font-variation-settings: "opsz" 36, "SOFT" 30, "WONK" 0 !important;
  font-feature-settings: "ss01" 1 !important;
  font-weight: 400 !important;
}
html body .es-footer .es-footer__newsletter-title em {
  font-style: italic !important;
  font-variation-settings: "opsz" 36, "SOFT" 30, "WONK" 0 !important;
  font-feature-settings: "ss01" 1, "calt" 1 !important;
}

/* Button : pure blanc au lieu de cream */
html body .es-footer .es-footer__newsletter-form button {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--es-ink) !important;
}
html body .es-footer .es-footer__newsletter-form button:hover {
  background: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* ============================================================================
   PATCH 67 — Newsletter (uniquement dans le footer) : bump font-size H2
   Le `.newsletter h2` natif est clamp(36, 4vw, 52) — trop petit dans le footer.
   On force le pattern site standard clamp(44, 5vw, 72) + opsz 144 + swsh 2 sur em.
   ============================================================================ */
/* PATCH 67 désactivé — on garde la taille standard .newsletter h2 de la home */
html body .es-footer .newsletter__inner {
  max-width: 580px !important;
}

/* ============================================================================
   PATCH 68 — Newsletter footer : utiliser Cormorant Garamond (matche réf Nabila)
   La référence utilise un serif classique high-contrast (pas Fraunces).
   On override le H2 du footer newsletter avec Cormorant Garamond Italic.
   Scope strict : .es-footer .newsletter (pas la home).
   ============================================================================ */
/* Revert : Fraunces (référence DevTools) - PATCH 68 Cormorant abandonné */
html body .es-footer .newsletter h2,
html body footer .es-footer .newsletter h2 {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(36px, 4vw, 52px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 0 0 16px !important;
}
html body .es-footer .newsletter h2 em,
html body footer .es-footer .newsletter h2 em {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

@media (max-width: 700px) {
  html body .es-footer .newsletter h2,
  html body footer .es-footer .newsletter h2 {
    font-size: clamp(28px, 8vw, 38px) !important;
  }
}

/* ============================================================================
   PATCH 69 — Cohérence H2 Fraunces : SOFT 100 + swsh sur sections qui héritaient
   du .serif de base (SOFT 30). Affecte bestseller, quiz-banner, odorkiller,
   b2b, newsletter footer.
   ============================================================================ */
html body .bestseller h2,
html body .bestseller .bestseller__title,
html body .quiz-banner h2,
html body .odorkiller h2,
html body .b2b__title,
html body .es-footer .newsletter h2 {
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 1 !important;
}
html body .bestseller h2 em,
html body .bestseller .bestseller__title em,
html body .quiz-banner h2 em,
html body .odorkiller h2 em,
html body .b2b__title em,
html body .es-footer .newsletter h2 em {
  font-style: italic !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-feature-settings: "ss01", "swsh" 2, "calt" 1 !important;
}

/* Bestseller eyebrow : 11px (pattern standard) au lieu de 13px */
html body .bestseller .num-mono.bestseller__rating-eyebrow,
html body .bestseller__rating-eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
}

/* PATCH 70 — §3 Unboxing : tagline italique exactement comme .diffusers__tagline §6
   Même font (Fraunces italic), même taille clamp(17-21), même couleur gris,
   alignement gauche (le layout 2 col du §3 a tout en flush-left). */
html body main.product-pdp .pdp-unboxing__body .pdp-section__tagline,
html body .product-pdp .pdp-unboxing__body p.pdp-section__tagline {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.005em !important;
  color: var(--es-gray) !important;
  text-align: left !important;
  text-transform: none !important;
  margin: 14px 0 28px !important;
  max-width: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH 71 — PDP : suppression de l'espace blanc entre la quizbar
   et le breadcrumb. Cumul des padding-top du parent .site-main,
   wrappers Elementor (.e-con, .elementor-section) et .bestseller--pdp
   créait ~280px de blanc en haut de la fiche. On force tous les
   wrappers à 0 et on garde un padding-top serré sur le hero lui-même.
   ═══════════════════════════════════════════════════════════════════ */
/* Wrappers parents (WP/Elementor) sans padding-top — NE PAS toucher à
   main.product-pdp qui doit garder padding-top: 132-144px (compensateur
   du header fixed mobile, sinon le contenu passe sous le header). */
html body.single-product .site-main,
html body.single-product .site-content,
html body.single-product #content,
html body.single-product .content-area,
html body.single-product .e-con-full,
html body.single-product .e-con,
html body.single-product .elementor-section.elementor-top-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hero PDP : padding-top respiration sous la quizbar sticky.
   Le header desktop est sticky (top:0). Le breadcrumb se retrouvait à la limite
   du header → caché par la bande cacao. On donne de la marge. */
html body main.product-pdp .bestseller--pdp { padding-top: 40px !important; }
@media (max-width: 900px) {
  html body main.product-pdp .bestseller--pdp { padding-top: 20px !important; }
}
@media (max-width: 480px) {
  html body main.product-pdp .bestseller--pdp { padding-top: 16px !important; }
}

/* Breadcrumb : pas de margin-top */
html body main.product-pdp .pdp-breadcrumb { margin-top: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════
   PATCH 72 — SEO : .es-sr-only pour rendre les <img alt="…"> invisibles
   visuellement tout en restant indexables par Google Images.
   Pattern standard accessibility WCAG (visuellement caché, lu par les
   screen-readers et crawlers SEO).
   ═══════════════════════════════════════════════════════════════════ */
.es-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MODALE STANDARDS — blocs « Usage prévu » et « Précautions »
   Ajoutés avec la réécriture du contenu (2026-08-28).

   Le marqueur des précautions est un point cacao, PAS une croix : ces
   lignes sont des consignes d'usage, et « ✗ Aérer la pièce » se lit
   comme une interdiction de ventiler. Inversion de sens sur une
   mention de sécurité, donc marqueur neutre.

   Tout est verrouillé en !important scopé body .pdp-modal : la modale
   s'affiche aussi sur la home, où l'accent typography Elementor
   (Cormorant italic) bave sur les p/li custom.
   ═══════════════════════════════════════════════════════════════════ */

.pdp-modal__usage {
  font-size: 14px;
  line-height: 1.6;
  color: var(--es-gray);
  margin: 0;
}

.pdp-modal__cautions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pdp-modal__cautions li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--es-gray);
}
.pdp-modal__cautions li::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--es-cacao);
  margin-top: 9px;
}

/* Anti-bleed home + cohérence typo */
body .pdp-modal .pdp-modal__dialog .pdp-modal__usage,
body .pdp-modal .pdp-modal__dialog .pdp-modal__cautions,
body .pdp-modal .pdp-modal__dialog .pdp-modal__cautions li {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  font-size: 14px !important;
  color: var(--es-gray) !important;
}
body .pdp-modal .pdp-modal__dialog .pdp-modal__usage { line-height: 1.6 !important; }
body .pdp-modal .pdp-modal__dialog .pdp-modal__cautions li { line-height: 1.55 !important; }

/* Les titres de sous-blocs suivaient le pattern eyebrow sur la fiche produit
   mais restaient en Inter 13px sur la home. Unifié sur les deux. */
body .pdp-modal .pdp-modal__dialog .pdp-modal__section-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--es-gray) !important;
  margin: 0 0 14px !important;
}

/* 3 sous-blocs au lieu d'un : un peu plus d'air entre eux */
body .pdp-modal .pdp-modal__dialog .pdp-modal__section { margin-bottom: 30px !important; }
body .pdp-modal .pdp-modal__dialog .pdp-modal__section:last-child { margin-bottom: 0 !important; }