/* =========================================================
   DESIGN TOKENS — tokens STRUCTURELS seulement.
   Les couleurs et les familles de polices ne sont PAS ici :
   elles viennent de theme.json (par produit) et sont posées en
   CSS variables par loader.js au chargement. Ne jamais remettre
   de couleur ou de font en dur dans ce fichier.
   ========================================================= */
:root {
  /* Couleurs : définies par loader.js depuis theme.json
     (--ink, --grey, --line, --bg, --sky, --accent, --accent-dark,
      --card-bg, --gold, --success, --placeholder-bg, --tint, --star, --error) */

  /* Layout — un peu plus d'air entre les sections (redesign 2026-09-04) */
  --container: 1400px;
  --section-pad-y: clamp(56px, 8vw, 88px);
  --section-pad-x: clamp(16px, 3vw, 24px);

  /* Rayons — descendus d'un cran pour une allure plus structurée/premium
     (redesign visuel 2026-09-04). --r-pill reste dispo mais n'est plus
     posé que sur les vraies petites puces/badges/dots, jamais sur des
     boutons ou des blocs pleine taille (voir .cta-btn, .qty-stepper,
     .cart-line-qty plus bas, repassés sur --r-sm). */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-pill: 999px;

  /* Ombres — beaucoup plus subtiles qu'avant : le contraste vient des
     couleurs et des bordures fines, pas d'un flou large et doux. */
  --shadow-sm: 0 1px 2px rgba(18, 24, 31, 0.08);
  --shadow-md: 0 4px 12px rgba(18, 24, 31, 0.10);

  /* Mouvement */
  --dur-fast: 0.18s;
  --dur-med: 0.3s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Typographie — familles : définies par loader.js depuis theme.json
     (--font-display, --font-body) */

  /* Échelle de tailles — fluide pour les titres, fixe pour le texte courant.
     Rôles : display (headline émotionnelle) > h1 (titre produit) > h2 (sections)
     > h3 (cartes) > body > sm (texte secondaire) > caption > micro (badges) */
  --fs-display: clamp(32px, 4.2vw, 48px);
  --fs-h1: clamp(27px, 3vw, 36px);
  --fs-h2: clamp(25px, 2.8vw, 33px);
  --fs-h3: 16px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 12px;

  /* Interlignage et tracking par rôle : serré sur les gros titres,
     aéré sur le texte courant, élargi sur les micro-labels en capitales.
     Tracking des titres resserré (redesign 2026-09-04) pour une lecture
     plus dense/affirmée, moins "friendly rounded". */
  --lh-tight: 1.1;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --ls-display: -0.03em;
  --ls-heading: -0.025em;
  --ls-caps: 0.06em;
}

* { box-sizing: border-box; }

/* Page cachée tant que loader.js n'a pas injecté le contenu (content.json)
   et le thème (theme.json) — évite le flash de page vide/non stylée.
   loader.js retire l'attribut une fois tout appliqué (avec failsafe). */
html[data-loading] { visibility: hidden; }

/* Wrapper neutre pour les icônes injectées via data-icon : display:contents
   fait comme si le SVG était un enfant direct du parent (les sélecteurs
   CSS et le layout flex/grid existants continuent de fonctionner). */
.icon-slot { display: contents; }

html {
  overflow-x: clip;
  /* Interdit aux navigateurs mobiles (Chrome Android / Safari iOS) de gonfler
     automatiquement les petits textes ("font boosting") : la taille affichée
     doit rester EXACTEMENT celle du CSS, ex. le label de variante en 12px. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  /* Blanc net par défaut (redesign 2026-09-04) : quelques sections précises
     reprennent --bg (voir .compare, .why-us) pour créer un léger rythme
     blanc / teinté, au lieu du gris-bleu pâle uniforme sur toute la page. */
  background: var(--card-bg);
  line-height: var(--lh-body);
  /* Empêche tout débordement horizontal (trust banner pleine largeur, transforms, etc.) */
  overflow-x: clip;
}

/* Les contrôles de formulaire n'héritent pas de la font par défaut */
button, input, select, textarea { font-family: inherit; }

/* -webkit-touch-callout : sans ça, un appui long sur une image ouvre le menu
   natif iOS/Android (Enregistrer/Partager/Copier), qui prend la main sur le
   toucher pendant que le JS des carousels essaie de gérer le même geste,
   d'où les slides qui buguent pendant un appui long sur une photo. */
img {
  max-width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

h1, h2, h3 { margin: 0 0 12px; text-wrap: balance; }
/* Display face réservée aux gros titres (h1 produit + h2 de sections) ;
   les h3 de cartes restent en body bold, plus lisibles aux petites tailles */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h3 { font-weight: 700; line-height: 1.3; }

section {
  padding: var(--section-pad-y) var(--section-pad-x);
  max-width: var(--container);
  margin: 0 auto;
}

/* Accessibilité clavier : anneau visible uniquement à la navigation clavier */
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* Navbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: transform 0.25s ease;
}
.site-header.nav-hidden { transform: translateY(-100%); }
.announcement-bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent) 42%, var(--sky) 55%, var(--accent-dark));
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Effet lumineux périodique : un reflet balaie la barre pour un rendu plus
   premium, sur le même principe que .checkout-btn::after (checkout-sheen). */
.announcement-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: announcement-glow 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}
@keyframes announcement-glow {
  0% { transform: translateX(-130%); }
  86%, 100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-bar::before { animation: none; display: none; }
}
.announcement-rotator {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 16px;
}
.announcement-msg {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap; /* un message dynamique long ne casse pas la hauteur fixe */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.announcement-msg.is-active { transform: translateY(0); opacity: 1; }
.announcement-msg.is-leaving { transform: translateY(-100%); opacity: 0; }
.announcement-icon { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; }
.logo img { height: 28px; width: auto; display: block; }
.cart-toggle {
  position: relative;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
}
.cart-icon { width: 24px; height: 24px; }
.cart-count-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Boutons — micro-interactions communes */
.cta-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.cta-btn, .add-btn, .checkout-btn {
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.cta-btn:hover { background: var(--accent-dark); }
.cta-btn:active,
.add-btn:not(:disabled):active,
.checkout-btn:not(:disabled):active { transform: scale(0.98); }
@media (hover: hover) {
  .cta-btn:hover,
  .add-btn:not(:disabled):hover,
  .checkout-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
}

/* =========================================================
   PDP — galerie + bloc d'achat (above the fold)
   ========================================================= */
.pdp {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(16px, 3vw, 40px) var(--section-pad-x) clamp(32px, 6vw, 64px);
  align-items: start;
}

/* Galerie */
.gallery-main {
  position: relative;
  background: var(--placeholder-bg);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
/* -ms-overflow-style / scrollbar-width / ::-webkit-scrollbar : masque la
   barre de défilement native qui apparaît en dessous en mobile pendant le
   swipe (overflow-x:auto activé par la media query mobile ci-dessous). */
.gallery-slides {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.gallery-slides::-webkit-scrollbar { display: none; }
.gallery-slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--grey);
  font-size: 14px;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
.gallery-slide.active { display: flex; }
.gallery-slide.zoomed { transform: scale(1.5); cursor: zoom-out; }
/* La vraie photo remplit tout le carré, sans marge — le padding ne sert
   qu'au texte placeholder ci-dessous (tant qu'aucune image n'existe). */
.gallery-slide-fallback { padding: 24px; }
.gallery-slide img { display: none; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
.gallery-slide.has-image img { display: block; }
.gallery-slide.has-image .gallery-slide-fallback { display: none; }
.gallery-zoom-hint {
  position: absolute;
  bottom: 24px;
  right: 12px;
  background: rgba(255,255,255,0.9);
  border-radius: var(--r-pill);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
}
.gallery-zoom-hint svg { width: 15px; height: 15px; }
/* Flèches précédent/suivant — desktop seulement (le swipe natif suffit en
   mobile, voir la media query mobile plus bas). */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: var(--r-pill);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.gallery-arrow svg { width: 18px; height: 18px; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
@media (hover: hover) {
  .gallery-arrow:hover { background: #fff; }
}
.gallery-arrow:active { transform: translateY(-50%) scale(0.94); }
.gallery-thumbs {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
}
.thumb {
  position: relative;
  flex: 1;
  aspect-ratio: 1 / 1; /* carré garanti en pur CSS, aucun layout shift au chargement */
  border-radius: var(--r-sm);
  border: 2px solid var(--line);
  background: var(--placeholder-bg);
  color: var(--grey);
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color var(--dur-fast) ease;
}
.thumb.active { border-color: var(--sky); }
@media (hover: hover) {
  .thumb:hover { border-color: var(--sky); }
}
.thumb img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb.has-image img { display: block; }
.thumb.has-image .thumb-fallback { display: none; }
.thumb-fallback { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; width: 100%; height: 100%; }
.gallery-dots { display: none; justify-content: center; gap: 8px; margin-top: 14px; }

/* Dots communs (galerie + UGC) : le dot actif s'étire en pilule */
.dot, .ugc-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line);
  cursor: pointer;
  transition: width var(--dur-fast) ease, background var(--dur-fast) ease;
}
.dot.active, .ugc-dot.active { background: var(--sky); width: 20px; }

/* Bloc d'achat */
.buybox-sticky { position: sticky; top: 90px; }
.review-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--star);
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.review-badge-text {
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: normal;
}
.hero-eyebrow {
  color: var(--sky);
  font-size: var(--fs-caption);
  font-weight: 700;
  margin: 0 0 6px;
}
.buybox h1 { font-size: var(--fs-h1); }
.buybox-sub { color: var(--grey); font-size: 15px; margin-bottom: 20px; }
.hero-learn { margin: -6px 0 20px; }
.hero-learn-label { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.hero-learn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.hero-learn-grid li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--grey); line-height: 1.3; }
.hero-learn-check { display: inline-block; color: var(--success); font-weight: 700; flex-shrink: 0; transform: translateY(0.13em); }

.price-row { margin-bottom: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-now { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.price-compare { font-size: var(--fs-body); color: var(--grey); text-decoration: line-through; }
.price-badge {
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
}

/* Variantes couleur */
.variant-row { margin-bottom: 20px; }
/* Toujours 3px de moins que le texte normal, peu importe le thème du produit */
.variant-label { font-size: calc(var(--fs-body) - 3px); color: var(--grey); margin-bottom: 10px; }
/* Seule la VALEUR (nom de la couleur) est en gras/foncé — le libellé
   "Color:" reste gris normal (les deux sont des spans injectés par loader.js) */
.variant-label .variant-value { color: var(--ink); font-weight: 700; }
.color-swatches { display: flex; gap: 14px; }
.swatch {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 1px var(--line);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
/* Zone de toucher étendue (~38px) sans grossir le dot visuel — les 22px
   étaient une cible de précision sur un funnel mobile-first */
.swatch::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.variant-sheet-swatches .swatch::after { inset: -4px; }
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--ink); }
.swatch:disabled { opacity: 0.3; cursor: not-allowed; }
/* Press feedback tactile : le dot s'enfonce sous le doigt (transition déjà en place) */
.swatch:not(:disabled):active { transform: scale(0.9); }
@media (hover: hover) {
  .swatch:not(:disabled):hover { transform: scale(1.12); }
}

.qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.qty-row label { font-size: 14px; color: var(--grey); }
.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.qty-btn {
  background: #fff;
  border: none;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.qty-btn:hover { background: var(--bg); }
.qty-stepper input {
  width: 44px;
  border: none;
  text-align: center;
  font-size: 14px;
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.add-btn {
  display: block;
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-md);
  cursor: pointer;
  margin-bottom: 16px;
  /* Élévation très légère au repos, structurée plutôt que "glow" (redesign
     2026-09-04) : contraste net plutôt qu'un halo flou et doux. */
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 25%, transparent);
}
.add-btn:hover { background: #000; }
.add-btn:disabled { background: #cbd5df; cursor: not-allowed; box-shadow: none; }
/* L'appui (tactile ou clic) écrase le bouton dans le sens inverse de son
   élévation : ombre resserrée pendant que le scale(0.98) partagé l'enfonce. */
.add-btn:not(:disabled):active { box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.add-btn.is-added { background: var(--success); box-shadow: 0 2px 6px color-mix(in srgb, var(--success) 28%, transparent); }
/* Pendant l'appel réseau : le bouton reste "vivant" (accent foncé + spinner)
   au lieu du gris disabled qui se lit comme "indisponible" au moment critique */
.add-btn.is-loading:disabled { background: #000; cursor: progress; }

/* Spinner / check injectés par cart.js pendant et après l'ajout.
   Spinner caché par défaut : avec reduced-motion, le texte seul suffit. */
.atc-spinner { display: none; }
.atc-check {
  width: 17px;
  height: 17px;
  margin-right: 7px;
  vertical-align: -3px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Message d'échec d'ajout au panier (créé par cart.js en cas d'erreur réseau) */
.add-error {
  color: var(--error);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin: -6px 0 12px;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.add-error.is-visible { opacity: 1; }

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.trust-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 6px 14px;
  text-align: center;
}
.trust-icon { width: 26px; height: 26px; margin: 0 auto 10px; color: var(--sky); display: block; }
.trust-title { font-weight: 700; font-size: var(--fs-caption); color: var(--ink); line-height: 1.2; }
.trust-sub { font-size: 11px; color: var(--grey); margin-top: 2px; line-height: 1.2; }
.trust-line { width: 22px; height: 2px; background: var(--gold); border-radius: 2px; margin: 8px auto 0; }

/* Accordéons */
.accordions { border-top: 1px solid var(--line); }
.accordion {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.accordion summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+';
  float: right;
  font-weight: 400;
}
.accordion[open] summary::after { content: '−'; }
.accordion-body { color: var(--grey); font-size: 14px; padding-top: 10px; }
.accordion-body ul { margin: 0; padding-left: 18px; }

/* Titres de sections — taille unifiée via token */
.ugc h2, .faq h2, .stats h2, .inside-content h2 {
  text-align: center;
  font-size: var(--fs-h2);
  margin-bottom: 40px;
}
/* Le h2 générique ci-dessus vise un titre suivi direct du contenu (40px
   d'air) ; ugc est le seul des 4 à avoir un sous-titre juste après, donc
   resserré comme .why-title/.hiw-title (16px) pour matcher le pattern. */
.ugc h2 { margin-bottom: 4px; }

/* Agitate */
.agitate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.agitate-text h2 {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-bottom: 24px;
}
.agitate-text p { color: var(--grey); font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
.agitate-text p strong { color: var(--ink); }
.agitate-image { border-radius: var(--r-xl); overflow: hidden; }
.agitate-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.agitate-image-fallback {
  display: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--placeholder-bg);
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}

/* En-têtes de sections centrées — pattern partagé (Why Us / How It Works / Comparatif) */
.why-us, .hiw, .compare, .compare-visual, .stats { text-align: center; }
.why-title, .hiw-title, .compare-title, .compare-visual-title { font-size: var(--fs-h2); max-width: 720px; margin: 0 auto 16px; }
.why-accent, .hiw-accent, .compare-accent, .compare-visual-accent, .who-for-accent, .stats-accent, .ugc-accent, .inside-accent { color: var(--sky); }
.why-sub, .hiw-sub, .compare-sub, .compare-visual-sub, .ugc-sub, .stats-sub { color: var(--grey); font-size: 16px; margin-bottom: 48px; }

/* =========================================================
   RYTHME DE SECTIONS (redesign visuel 2026-09-04, ajusté ensuite)
   La page reste blanche par défaut (body). Quelques sections reçoivent un
   fond légèrement teinté (--bg), noir (--ink) ou bleu (--accent) pour
   créer de la séparation visuelle et du poids "premium", sans transformer
   le site en dark mode. Bande de couleur pleine largeur en gardant le
   contenu interne centré sur --container (box-shadow + clip-path : la
   couleur déborde à l'infini horizontalement, jamais verticalement dans
   les sections voisines).
   Noir : Who It's For, What Makes It Different, Backed By The Science,
   Trust banner, Comparaison, Explore Every Feature. Teinté clair : Why Us. */
.who-for, .hiw, .stats, .compare, .inside {
  position: relative;
  z-index: 0;
}
.who-for { padding-top: calc(var(--section-pad-y) + clamp(32px, 5vw, 64px)); }
.hiw { padding-top: calc(var(--section-pad-y) + clamp(32px, 5vw, 64px)); padding-bottom: calc(var(--section-pad-y) + clamp(32px, 5vw, 64px)); }
.stats { padding-top: calc(var(--section-pad-y) + clamp(24px, 4vw, 48px)); }
.compare { padding-bottom: calc(var(--section-pad-y) + clamp(16px, 3vw, 28px)); }
.who-for::before, .hiw::before, .stats::before, .compare::before, .inside::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vmax;
  right: -100vmax;
  z-index: -1;
  background: var(--ink);
}
/* What Makes It Different : fond noir légèrement éclairci pour se
   distinguer des autres chapitres noirs (nuance, pas un vrai gris). */
.hiw::before { background: color-mix(in srgb, var(--ink) 97%, white 3%); }
.why-us { background: var(--bg); padding-top: calc(var(--section-pad-y) + clamp(24px, 4vw, 48px)); }

/* Texte des chapitres noirs : passe en clair sur le fond --ink. Les
   cartes internes (hiw-step, stat-card, compare-table, faq-item) restent
   blanches/claires par dessus, pour un contraste fort plutôt qu'un dark
   mode complet. */
.inside-content h2, .stats h2 { color: #fff; }
.who-for .agitate-text h2 { color: #fff; }
.who-for .agitate-text p { color: rgba(255, 255, 255, 0.75); }
.who-for .agitate-text p strong { color: #fff; }
.hiw .hiw-title, .compare .compare-title { color: #fff; }
.hiw .hiw-sub, .compare .compare-sub { color: rgba(255, 255, 255, 0.68); }
.stats-sub { color: rgba(255, 255, 255, 0.68); }
/* ugc a moins de contenu entre le sous-titre et le slider que les autres
   sections (pas de grille à respirer) : gap resserré pour rester compact. */
.ugc-sub { margin-bottom: 24px; }

/* How It Works — la grille s'adapte de 2 à 4 étapes automatiquement */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.hiw-step {
  position: relative;
  background: color-mix(in srgb, var(--ink) 82%, white 18%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: 32px 24px 28px;
}
.hiw-step-number {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sky);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sky);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-icon svg { width: 26px; height: 26px; }
.hiw-media {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
}
.hiw-step h3 { font-size: 16px; margin-bottom: 6px; color: #fff; }
.hiw-step p { color: #fff; font-size: 14px; margin: 0; line-height: 1.5; }

/* Comparatif — tableau "nous vs les autres" */
.compare-scroll { overflow-x: auto; }
.compare-table {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 14px;
  table-layout: fixed;
}
.compare-table th, .compare-table td { padding: 14px 16px; text-align: center; }
.compare-table td:first-child { text-align: left; color: #fff; }
.compare-table thead th { font-size: var(--fs-caption); font-weight: 700; background: var(--ink); color: #fff; }
.compare-table thead th.compare-us { background: var(--sky); color: #fff; }
.compare-header-img {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  border-radius: var(--r-sm);
  object-fit: cover;
  border: 2px solid #fff;
}
.compare-table tbody td { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.compare-table td.compare-us { background: var(--tint); }
.compare-feature-col { width: 40%; min-width: 100px; }
.compare-yes { color: #16A34A; font-weight: 800; font-size: 22px; }
.compare-no { color: #E11D2E; font-weight: 800; font-size: 22px; }
.compare-note { color: var(--grey); font-size: var(--fs-micro); font-weight: 700; }

/* Comparatif visuel — 2 cartes photo + liste (nous / eux) */
.cv-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr; /* toujours 2 colonnes, y compris mobile — le VS reste centré entre les 2 */
  gap: 24px;
  max-width: 780px;
  margin: 0 auto;
}

/* Badge VS — centré horizontalement en pur CSS (colonnes symétriques).
   La position verticale exacte (alignée sur le centre des images, dont la
   hauteur varie avec la largeur d'écran et le retour à la ligne du texte)
   est calculée par setupCompareVs() dans cart.js ; le top ci-dessous n'est
   qu'un repli avant que le JS ne s'exécute (badge cocher masqué jusque-là). */
.cv-vs {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
}

.cv-card {
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.cv-card-us { border-color: rgba(47, 102, 144, 0.35); box-shadow: 0 0 0 1px rgba(47, 102, 144, 0.15); }
.cv-card-them { opacity: 0.92; }
.cv-badge {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.cv-badge-us { background: var(--sky); color: #fff; }
.cv-badge-them { background: var(--bg); color: var(--grey); border: 1px solid var(--line); }
.cv-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--placeholder-bg);
  margin-bottom: 16px;
}
.cv-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-media-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--grey);
  font-size: 13px;
}
.cv-media-fallback.is-visible { display: flex; }

/* Points de comparaison — chaque point est sa propre carte discrète,
   avec un fin séparateur flottant dans l'espacement entre deux points. */
.cv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cv-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}
.cv-list li + li::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--ink);
  opacity: 0.06;
}
.cv-yes { color: var(--success); font-weight: 700; flex-shrink: 0; }
.cv-no { color: var(--error); font-weight: 700; opacity: 0.7; flex-shrink: 0; }
.cv-note { color: var(--grey); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); flex-shrink: 0; margin-top: 2px; }
/* Full-bleed override : contrairement aux autres sections (limitées à
   var(--container)), why-us doit utiliser (quasi) toute la largeur du
   viewport — demande explicite de Jo, sinon la colonne d'icônes/texte
   paraît écrasée au milieu d'un grand vide sur les écrans larges. */
.why-us { max-width: 2200px; }
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  text-align: left;
  margin-bottom: 40px;
}
.why-col { display: flex; flex-direction: column; gap: 28px; }
/* Chaque point = une ligne flex 100% de largeur, verticalement centrée.
   2 containers dedans : why-text (flex:1, prend tout l'espace restant,
   texte aligné à gauche) et why-icon-box (taille fixe, icône centrée).
   DOM (mobile/tablette) : colonne gauche = [why-text, why-icon-box],
   colonne droite = [why-icon-box, why-text] (voir why-us.html). Sur
   desktop uniquement, la colonne gauche est visuellement inversée
   (row-reverse ci-dessous) pour coller l'icône près de l'image des deux
   côtés — le DOM ne change pas, donc mobile/tablette restent inchangés. */
.why-item { display: flex; flex-direction: row; align-items: center; width: 100%; gap: 14px; }
.why-text { flex: 1 1 auto; width: 100%; text-align: left; }
.why-icon-box { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.why-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sky);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-icon svg { width: 18px; height: 18px; }
.why-item h3 { font-size: 15px; margin: 0 0 4px; }
.why-item p { color: var(--grey); font-size: 13px; margin: 0; line-height: 1.4; }
.why-center { display: flex; align-items: center; justify-content: center; }
.why-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-xl); }
.why-image-fallback {
  display: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--placeholder-bg);
  border-radius: var(--r-xl);
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}
/* Desktop uniquement : inverse visuellement l'ordre icône/texte de la
   colonne gauche (le DOM reste [why-text, why-icon-box] pour mobile/
   tablette) pour que l'icône colle au bord proche de l'image, comme la
   colonne droite. */
@media (min-width: 1025px) {
  .why-col-left .why-item { flex-direction: row-reverse; }
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-card {
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: 28px 24px;
}
.stat-number { font-family: var(--font-display); font-size: 44px; font-weight: 800; color: var(--gold); line-height: 1; letter-spacing: -0.01em; }
.stat-number .stat-suffix { font-size: 22px; }
.stat-bar { height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; margin: 18px 0; overflow: hidden; }
.stat-bar span { display: block; height: 100%; background: var(--gold); }
.stat-card h3 { font-size: 15px; margin: 0 0 6px; color: #fff; }
.stat-card p { color: #fff; font-size: 13px; margin: 0; }

/* Stats proof — preuve sociale par les chiffres (titre + liste d'anneaux %).
   Composant DISTINCT du stat-grid ci-dessus : titre à gauche, liste de 2-4
   stats à droite avec anneau conic-gradient (pas de count-up JS, pas de
   barre). Usage : "Proven by X Parents" / preuve sociale par pourcentage.
   Données : content.statsProof (titleHtml, items[]: value, ringStyle
   ("--pct: 95%"), html). RÈGLE ABSOLUE : ne jamais inventer un pourcentage. */
.stats-proof-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.stats-proof-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}
.stats-proof-accent { color: var(--sky); }
.stats-proof-list { display: flex; flex-direction: column; }
.stats-proof-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.stats-proof-item:last-child { border-bottom: 1px solid var(--line); }
.stats-proof-ring {
  --pct: 0%;
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--ink) var(--pct), var(--line) 0);
}
.stats-proof-ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--bg);
}
.stats-proof-ring-value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.stats-proof-text { color: var(--grey); font-size: 15px; line-height: 1.5; margin: 0; }
.stats-proof-text strong { color: var(--ink); }
/* Variante "rond plein numeroté" (1-2-3) au lieu de l'anneau % : utilisée
   par How It Works (Set/Wear/Wake), une vraie séquence, pas un pourcentage. */
.how-to-use .stats-proof-ring { background: var(--sky); }
.how-to-use .stats-proof-ring::after { content: none; }
.how-to-use .stats-proof-ring-value { color: #fff; font-size: 20px; }
.how-to-use .stats-proof-title { text-align: center; }
.how-to-use .stats-proof-item { align-items: center; }
.how-to-use .stats-proof-text { flex: 1; text-align: center; }
.how-to-use .stats-proof-text strong { display: block; font-size: 16px; margin-bottom: 4px; }
.how-to-use { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(16px, 3vw, 28px); }
.stats-proof-media-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.stats-proof-video {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stats-proof-video-el { display: block; width: 100%; height: 100%; object-fit: cover; }

/* What's Inside */
.inside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.inside-content .faq-item:first-child { margin-top: 0; }
.inside-content .faq-item {
  background: color-mix(in srgb, var(--ink) 82%, white 18%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.inside-content .faq-question, .inside-content .faq-answer p { color: #fff; }
.inside-content .faq-icon { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.inside-content .faq-chevron { color: #fff; }
.inside-image { border-radius: var(--r-xl); overflow: hidden; }
.inside-image img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.inside-image-fallback {
  display: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--placeholder-bg);
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}

/* Trust banner (pleine largeur) */
.trust-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  /* Blanc : bandeau neutre entre How It Works et Backed By The Science.
     Icônes en bleu pour rester la touche d'accent qui attire l'œil sur ces
     garanties. */
  background: var(--card-bg);
  padding: 28px 32px 80px;
  margin-bottom: clamp(16px, 3vw, 32px);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.trust-banner-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.trust-banner-item svg { width: 30px; height: 30px; color: var(--sky); flex-shrink: 0; }
.trust-banner-item + .trust-banner-item { border-left: 1px solid var(--line); padding-left: 24px; }

/* UGC slider — carrousel multi-cartes, image/vidéo seule */
.ugc { text-align: center; }
/* Slider en pleine largeur d'écran (vrai 100vw, même sortie de conteneur
   que .trust-banner), pas juste un padding interne qui reste coincé dans
   le --container : le ruban de cartes peut vraiment défiler jusqu'aux
   bords de l'écran, à gauche comme à droite. */
.ugc-slider {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  /* La 1re carte s'aligne sur le contenu du reste de la page (pas collée au
     bord de l'écran) ; les cartes suivantes, elles, peuvent défiler jusqu'au
     vrai bord droit puisque le slider est maintenant en pleine largeur. */
  padding: 4px max(var(--section-pad-x), calc((100vw - var(--container)) / 2));
}
/* .ugc-slider porte aussi la classe .swiper (voir sections/ugc.html) : Swiper
   gère l'overflow, le drag/swipe et le transform lui-même via son propre CSS
   (swiper-bundle.min.css, chargé avant style.css pour que nos règles gardent
   la priorité, voir sections/page-shell.html). #ugc-rail est le
   .swiper-wrapper, l'espacement entre cartes passe par l'option spaceBetween
   de Swiper (cart.js), pas par un gap CSS ici. */
/* Vitesse constante d'un bout à l'autre du défilement continu (cart.js,
   autoplay.delay quasi nul + speed) : sans ça, Swiper anime chaque carte
   avec un easing qui accélère/ralentit, ce qui casse l'effet "continu" et
   redonne l'impression d'un slide par slide saccadé. */
.ugc-slider .swiper-wrapper { transition-timing-function: linear; }
.ugc-slide {
  /* 5 cartes visibles max sur desktop : largeur calculée depuis le
     conteneur (100%) moins les 4 espaces de 16px entre elles (spaceBetween
     de Swiper), divisé par 5. Grossit/rapetisse avec la largeur d'écran au
     lieu d'une taille fixe, donc toujours exactement 5 quelle que soit la
     largeur desktop. Écrasé par la media query mobile plus bas (190px fixe). */
  width: calc((100% - 64px) / 5);
  flex-shrink: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  background: var(--placeholder-bg);
}
.ugc-slide img, .ugc-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Caché par défaut, comme .cv-media-fallback/.why-image-fallback : ne
   s'affiche que si le onerror de l'img le bascule en display:flex.
   En absolute/inset:0 pour ne jamais pousser le média à côté (flex row). */
.ugc-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--grey);
  font-size: 13px;
}
/* Dots générés par Swiper (pagination.el = #ugc-dots) : reskin de ses
   classes par défaut pour matcher .dot/.ugc-dot utilisées ailleurs (galerie
   produit), même look, dot actif qui s'étire en pilule. */
.ugc-dots.swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.ugc-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  opacity: 1;
  cursor: pointer;
  transition: width var(--dur-fast) ease, background var(--dur-fast) ease;
}
.ugc-dots .swiper-pagination-bullet-active { background: var(--sky); width: 20px; }

/* FAQ (accordéons natifs) */
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: box-shadow var(--dur-fast) ease;
}
@media (hover: hover) {
  .faq-item:hover { box-shadow: var(--shadow-sm); }
}
.faq-item summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.faq-question { flex: 1; }
.faq-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--grey);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 14px 0 0 42px; }
.faq-answer p { color: var(--grey); font-size: 14px; margin: 0; }

/* Reviews */
.reviews h2 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: 32px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reviews-preview-tag {
  background: #fff4e5;
  color: #b5651d;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 40px;
}
.reviews-score { text-align: center; flex: 0 0 30%; }
.reviews-score-number { font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--sky); }
.reviews-score-number .score-suffix { font-size: 20px; font-weight: 700; color: var(--grey); }
.reviews-score-count { color: var(--grey); font-size: 13px; margin-top: 6px; white-space: nowrap; }
.reviews-bars { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.reviews-bar-row { display: flex; align-items: center; gap: 12px; }
.reviews-bar-label { width: 32px; font-size: 13px; color: var(--grey); flex-shrink: 0; }
.reviews-bar-star { color: var(--star); }
.reviews-bar { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.reviews-bar span { display: block; height: 100%; background: var(--sky); }
.reviews-bar-count { width: 34px; text-align: right; font-size: 13px; color: var(--grey); flex-shrink: 0; }

.reviews-grid {
  margin-bottom: 32px;
  position: relative;
}
/* Masonry positionné par JS (cart.js → layoutMasonry, dans setupReviewsReadMore).
   column-count pur recalcule TOUT le layout à chaque changement de contenu et
   fait sauter les cartes déjà visibles latéralement au clic sur Read More. En
   plaçant chaque carte en absolute via top/left calculés en JS, les cartes
   déjà placées ne bougent plus jamais : seules les nouvelles s'ajoutent.
   Avant l'init JS (classe .js-paged absente), fallback en flux normal. */
.reviews-grid.js-paged .review-card {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0;
}
.review-card {
  margin-bottom: 20px;
}
.reviews-empty {
  display: none;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 48px 24px;
  text-align: center;
}
/* État "no-data" (défaut au lancement d'un produit) : seul le bloc vide
   s'affiche — jamais de faux chiffres ni de previews en production. */
.reviews.no-data .reviews-empty { display: block; }
.reviews.no-data .reviews-summary,
.reviews.no-data .reviews-grid,
.reviews.no-data .reviews-read-more,
.reviews.no-data .reviews-preview-tag { display: none; }
.reviews-empty p { margin: 0; font-weight: 700; }
.reviews-empty-sub { color: var(--grey) !important; font-weight: 400 !important; font-size: 14px; margin-top: 6px !important; }

.review-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.review-photo-btn {
  width: 64px;
  height: 64px;
  padding: 0;
  margin-top: 12px;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out);
}
.review-photo-btn:hover, .review-photo-btn:focus-visible { transform: scale(1.04); }
.review-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lightbox — agrandissement des photos clients au clic */
.review-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 16, 12, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.review-lightbox[hidden] { display: none; }
.review-lightbox-img {
  max-width: min(600px, 92vw);
  max-height: 88vh;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  cursor: default;
}
.review-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}
/* Pagination JS : les cartes au-delà du compteur visible sont masquées.
   Read More ajoute une page (8 desktop / 4 mobile), Read Less remet au défaut. */
.review-card.is-hidden { display: none !important; }
/* Garde-fou avant l'init JS : tant que .js-paged n'est pas posé sur la grille,
   on cache tout au-delà de la 1re page pour éviter un flash de tous les avis. */
.reviews-grid:not(.js-paged) .review-card:nth-child(n+9) { display: none; }
@media (max-width: 860px) {
  .reviews-grid:not(.js-paged) .review-card:nth-child(n+5) { display: none; }
}
.review-stars { color: var(--star); letter-spacing: 2px; margin-bottom: 10px; }
.review-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.review-author { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.review-verified { display: flex; align-items: center; gap: 4px; color: var(--success); font-size: 12px; font-weight: 700; white-space: nowrap; }
.review-date { color: var(--grey); font-size: 12px; margin-bottom: 10px; }
.review-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sky);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.review-text { color: var(--grey); font-size: 14px; margin: 0; overflow-wrap: break-word; }

.reviews-btn-row { display: flex; justify-content: center; gap: 12px; }
.reviews-read-more[hidden], .reviews-read-less[hidden] { display: none; }
.reviews-read-less { background: var(--ink); }
.reviews-read-less:hover { background: #000; }

/* Élévation au survol des cartes (desktop seulement) */
@media (hover: hover) {
  .stat-card, .trust-card, .hiw-step, .cv-card {
    transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  }
  .stat-card:hover, .trust-card:hover, .hiw-step:hover, .cv-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  /* .review-card est dans une mise en page masonry positionnée par JS : un
     transform au survol force Chrome/Safari à rééquilibrer le layout, ce qui
     fait "disparaître/réapparaître" la carte survolée. Shadow seule, sans
     transform, pour rester stable. */
  .review-card {
    transition: box-shadow var(--dur-med) var(--ease-out);
  }
  .review-card:hover {
    box-shadow: var(--shadow-md);
  }
}

.site-footer {
  text-align: center;
  color: var(--grey);
  font-size: 13px;
  padding: 24px 24px 90px;
}

/* Barre sticky mobile */
.mobile-sticky-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 25;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform var(--dur-med) var(--ease-out);
}
.mobile-sticky-bar.is-visible { transform: translateY(0); }
.mobile-sticky-photo { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.mobile-sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mobile-sticky-title {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-sticky-price-row { display: flex; align-items: center; gap: 6px; }
.mobile-sticky-price { font-weight: 800; font-size: 16px; }
.mobile-sticky-badge { font-size: 12px; padding: 2px 5px; border-radius: 4px; }
.mobile-sticky-compare { color: var(--grey); font-size: 12px; text-decoration: line-through; }
.mobile-sticky-bar .add-btn { width: auto; flex-shrink: 0; margin: 0; padding: 12px 20px; }

/* Panneau de choix de couleur (bottom sheet) */
.variant-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 45;
}
.variant-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.variant-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px 24px 28px;
  transform: translateY(100%);
  transition: transform var(--dur-med) var(--ease-out);
  z-index: 46;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
}
.variant-sheet.open { transform: translateY(0); }
.variant-sheet-handle { width: 36px; height: 4px; background: var(--line); border-radius: 2px; margin: 0 auto 16px; }
.variant-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 18px;
}
.variant-sheet-header button { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--grey); }
.variant-sheet-photo {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--r-md);
  margin: 0 auto 16px;
}
.variant-sheet-swatches { display: flex; gap: 14px; justify-content: center; margin-bottom: 10px; }
.variant-sheet-swatches .swatch { width: 38px; height: 38px; }
.variant-sheet-color-name { text-align: center; color: var(--grey); font-size: 13px; margin-bottom: 18px; }

/* Cart panel — drawer latéral, animé sur transform (compositeur, pas de reflow) */
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  transform: translateX(105%);
  transition: transform var(--dur-med) var(--ease-out);
  display: flex;
  flex-direction: column;
  z-index: 40;
}
.cart-panel.open { transform: translateX(0); }
/* Sur desktop, le panier reste un drawer latéral : le produit reste visible derrière */
@media (min-width: 861px) {
  .cart-panel { width: 440px; }
}
.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
.cart-header h2 { font-size: 18px; margin: 0; }
#cart-close { background: none; border: none; font-size: 22px; cursor: pointer; }
.cart-items { flex: 1; overflow-y: auto; padding: 20px; }
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 0;
}
.cart-empty-icon { width: 48px; height: 48px; color: var(--grey); margin-bottom: 12px; }
.cart-empty { color: var(--grey); font-size: 14px; margin: 0; }
.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cart-line-title { font-weight: 700; }
.cart-line-meta { color: var(--grey); font-size: 12px; margin-top: 2px; }
.cart-line-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.cart-line-price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cart-line-price { display: flex; align-items: baseline; gap: 6px; }
.cart-line-price-now { font-weight: 700; font-size: 13px; }
.cart-line-price-compare { color: var(--grey); font-size: 12px; text-decoration: line-through; }
.cart-line-savings { color: var(--success); font-size: 11px; font-weight: 700; }
.cart-line-photo-wrap { flex-shrink: 0; }
.cart-line-photo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.cart-line-remove {
  background: none;
  border: none;
  color: var(--grey);
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  line-height: 0;
  transition: color var(--dur-fast) ease;
}
.cart-line-remove svg { width: 16px; height: 16px; }
.cart-line-remove:hover { color: var(--error); }
.cart-line-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.cart-qty-btn {
  background: #fff;
  border: none;
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-fast) ease;
}
.cart-qty-btn:hover:not(:disabled) { background: var(--bg); }
.cart-qty-btn:disabled { color: var(--line); cursor: not-allowed; }
.cart-qty-value { min-width: 22px; text-align: center; font-size: 13px; font-weight: 700; }
.cart-footer { padding: 20px; border-top: 1px solid var(--line); }
.cart-summary {
  margin-bottom: 14px;
  background: #f6f7f8;
  border-radius: var(--r-md);
  padding: 16px;
}
.cart-summary h3 { font-size: 14px; margin: 0 0 10px; }
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--grey);
  margin-bottom: 8px;
}
.cart-shipping-free { color: var(--success); font-weight: 700; }
.cart-summary-discount span:last-child { color: var(--success); font-weight: 700; }
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-bottom: 16px;
}
.cart-total-right { display: flex; align-items: baseline; gap: 8px; }
.cart-savings-inline { font-size: 12px; font-weight: 700; color: var(--success); }
.cart-savings-inline.is-zero { display: none; }
.checkout-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 14px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 25%, transparent);
}
.checkout-btn:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }
.checkout-btn:not(:disabled):active { box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent); }
/* Sheen périodique : attire l'oeil sur le CTA final sans être une animation
   permanente qui distrait (pause de repos entre deux passages). */
.checkout-btn:not(:disabled)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: checkout-sheen 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}
@keyframes checkout-sheen {
  0% { transform: translateX(-130%); }
  86%, 100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-btn::after { animation: none; display: none; }
}
/* Redirection en cours : le bouton reste sombre avec spinner (cart.js pose la
   classe et l'enlève au pageshow si le client revient du checkout) */
.checkout-btn.is-loading:disabled { background: var(--ink); cursor: progress; }
.checkout-btn.is-loading .checkout-lock-icon { display: none; }
.checkout-lock-icon { width: 20px; height: 20px; filter: brightness(0) invert(1); }

.cart-header, .cart-items, .cart-footer { width: 100%; max-width: 600px; margin: 0 auto; }
.cart-trust-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: color-mix(in srgb, var(--sky) 5%, var(--bg));
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  margin: 16px 20px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 14%, var(--line));
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.cart-trust-item { display: flex; align-items: center; gap: 8px; }
.cart-trust-icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--placeholder-bg);
  border: 1px solid color-mix(in srgb, var(--sky) 22%, var(--line));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-trust-icon { width: 13px; height: 13px; }
.cart-trust-divider {
  width: 1.5px;
  align-self: stretch;
  background: color-mix(in srgb, var(--sky) 25%, var(--line));
  border-radius: 1px;
  flex-shrink: 0;
}
.cart-payment-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.pay-icon {
  height: 26px;
  width: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.cart-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  color: var(--grey);
  font-size: 12px;
  margin: 12px 0 0;
}
.cart-secure-icon { width: 11px; height: 11px; opacity: 0.6; }

.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 35;
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }

/* =========================================================
   ANIMATIONS AU SCROLL
   Les classes .reveal / .reveal-scale sont ajoutées par
   animations.js (jamais dans le HTML) : sans JS ou avec
   prefers-reduced-motion, rien n'est masqué.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Toutes les règles reveal sont scopées sous html.has-reveal, posée par
     animations.js au moment où il ajoute les classes. Garantie anti-cache :
     si un vieux animations.js (qui ne pose pas has-reveal) tourne avec ce
     CSS, aucun contenu n'est masqué. Le failsafe retire juste has-reveal :
     un seul point de coupure pour tout réafficher.

     Mécanisme : ANIMATIONS par keyframes (comme le badge, la galerie et le
     panier — celles qui marchent partout), pas des transitions entre deux
     classes : une keyframe joue toujours quand .is-inview tombe, peu importe
     l'état peint avant. `backwards` tient l'élément invisible pendant le
     délai de cascade (--reveal-delay). */
  .has-reveal .reveal,
  .has-reveal .reveal-scale,
  .has-reveal .reveal-fade,
  .has-reveal .reveal-left,
  .has-reveal .reveal-right { opacity: 0; }

  .has-reveal .reveal.is-inview,
  .has-reveal .reveal-scale.is-inview,
  .has-reveal .reveal-fade.is-inview,
  .has-reveal .reveal-left.is-inview,
  .has-reveal .reveal-right.is-inview {
    opacity: 1;
    animation: reveal-up 0.7s var(--ease-out) backwards;
    animation-delay: var(--reveal-delay, 0ms);
  }
  /* Fade pur, sans mouvement : pour les conteneurs titre + sous-titre */
  .has-reveal .reveal-fade.is-inview { animation-name: reveal-fade-in; animation-timing-function: ease; }
  /* Reveals directionnels : les colonnes gauche/droite de "Why Us" glissent
     chacune depuis leur côté, le texte agitate depuis la gauche, le slider UGC
     depuis la droite — chaque section reçoit un mouvement adapté à sa forme
     au lieu du même fade-up partout. */
  .has-reveal .reveal-scale.is-inview { animation-name: reveal-scale-in; }
  .has-reveal .reveal-left.is-inview { animation-name: reveal-left-in; }
  .has-reveal .reveal-right.is-inview { animation-name: reveal-right-in; }
  /* Sur mobile les distances raccourcissent (40px = 10% de l'écran) mais
     l'alternance gauche/droite est conservée : en 1 colonne, c'est elle
     qui donne le rythme d'une carte à l'autre */
  @media (max-width: 860px) {
    .has-reveal .reveal.is-inview { animation-name: reveal-up-sm; }
    .has-reveal .reveal-left.is-inview { animation-name: reveal-left-sm; }
    .has-reveal .reveal-right.is-inview { animation-name: reveal-right-sm; }
  }

  /* Feedback d'achat : le badge du panier pulse quand la quantité augmente */
  .cart-count-badge.bump { animation: badge-bump 0.4s var(--ease-out); }

  /* Le contenu du panier entre avec un léger décalage quand le drawer s'ouvre */
  .cart-panel.open .cart-items { animation: cart-items-in 0.4s var(--ease-out) 0.1s backwards; }

  /* Galerie : micro-fondu au changement de slide (desktop : les slides
     basculent en display, sur mobile c'est un swipe natif, pas d'animation) */
  @media (min-width: 861px) {
    .gallery-slide.active { animation: gallery-in 0.3s ease; }
  }
  /* Crossfade des images quand la couleur change (has-image est retiré puis
     remis par cart.js une fois la nouvelle image chargée) */
  .gallery-slide.has-image img, .thumb.has-image img { animation: img-in 0.35s ease; }

  /* Les barres de progression se remplissent quand la carte entre à l'écran */
  .has-reveal .stat-card.reveal .stat-bar span {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s var(--ease-out) 0.25s;
  }
  .has-reveal .stat-card.reveal.is-inview .stat-bar span { transform: scaleX(1); }

  /* Ouverture douce des accordéons */
  details[open] .faq-answer, details[open] .accordion-body { animation: accordion-in 0.28s ease; }

  /* Feedback d'achat : spinner pendant l'appel réseau, check dessiné + micro
     pulse du bouton au succès. Sous reduced-motion le spinner reste caché et
     le check apparaît sans dessin (dasharray scopé ici) : le texte suffit. */
  .atc-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: -2px;
    animation: atc-spin 0.7s linear infinite;
  }
  .atc-check path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: atc-check-draw 0.3s var(--ease-out) 0.05s forwards;
  }
  .add-btn.is-added { animation: atc-added-pop 0.4s var(--ease-out); }

  /* L'erreur d'ajout attire l'œil d'un léger shake (en plus du fondu) */
  .add-error.is-visible { animation: add-error-shake 0.3s ease; }

  /* Le chiffre de quantité pope quand on clique +/− */
  .qty-stepper input.qty-pop { animation: qty-pop 0.22s var(--ease-out); }

  /* Le total du panier pulse quand le montant change (même langage que le badge) */
  #cart-total-amount.bump { animation: total-bump 0.35s var(--ease-out); }
}
@keyframes accordion-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes badge-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes cart-items-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes gallery-in {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@keyframes img-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Keyframes des reveals : pas de `to` — l'élément anime vers son état naturel */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(44px); }
}
@keyframes reveal-up-sm {
  from { opacity: 0; transform: translateY(30px); }
}
@keyframes reveal-fade-in {
  from { opacity: 0; }
}
@keyframes reveal-scale-in {
  from { opacity: 0; transform: translateY(28px) scale(0.91); }
}
@keyframes reveal-left-in {
  from { opacity: 0; transform: translateX(-40px); }
}
@keyframes reveal-right-in {
  from { opacity: 0; transform: translateX(40px); }
}
@keyframes reveal-left-sm {
  from { opacity: 0; transform: translateX(-24px); }
}
@keyframes reveal-right-sm {
  from { opacity: 0; transform: translateX(24px); }
}
@keyframes atc-spin {
  to { transform: rotate(360deg); }
}
@keyframes atc-check-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes atc-added-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes add-error-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}
@keyframes qty-pop {
  40% { transform: scale(1.3); }
}
@keyframes total-bump {
  40% { transform: scale(1.12); }
}

/* =========================================================
   TABLETTE (861px – 1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .why-center { grid-column: 1 / -1; grid-row: 1; max-width: 360px; margin: 0 auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-proof-inner { grid-template-columns: 1fr; gap: 16px; max-width: 100%; }
  .stats-proof-title { text-align: center; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 860px) {
  section { padding-top: 32px; padding-bottom: 32px; }
  .pdp {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .gallery-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 100%;
  }
  .gallery-slide {
    display: flex;
    position: relative;
    inset: auto;
    min-width: 100%;
    height: 100%;
    scroll-snap-align: start;
  }
  .gallery-thumbs { display: flex; }
  .thumb { font-size: 12px; }
  .gallery-dots { display: flex; }
  .gallery-zoom-hint { display: none; }
  .gallery-arrow { display: none; }
  .gallery-slide { cursor: default; }
  .buybox-sticky { position: static; }
  .buybox-sub { max-width: 100%; }
  .price-now { font-size: 20px; }
  .price-compare { font-size: var(--fs-sm); }
  /* Bloc d'achat resserré : moins d'air entre description, prix et variantes */
  .buybox-sub { margin-bottom: 12px; }
  .hero-learn { margin: -4px 0 14px; }
  .price-row { margin-bottom: 12px; }
  .price-badge { font-size: 10px; padding: 3px 7px; }
  .why-grid { grid-template-columns: 1fr; gap: 32px; }
  .why-center { grid-column: auto; grid-row: auto; max-width: 320px; margin: 0 auto; }
  .stats-grid { gap: 14px; }
  .stat-card { padding: 20px 16px; }
  .stat-number { font-size: 34px; }
  .stat-number span { font-size: 18px; }
  .inside { grid-template-columns: 1fr; }
  .inside-image { order: -1; max-width: 320px; margin: 0 auto; }
  .agitate { grid-template-columns: 1fr; }
  .agitate-image { order: -1; }
  /* Sur mobile, l'image d'agitate remonte en premier (order:-1) juste après
     ugc : air supplémentaire pour bien séparer les deux sections. */
  .ugc { margin-bottom: 32px; }
  .ugc-slider { padding: 4px 16px; }
  .ugc-slide { width: 190px; }
  .hiw-grid { grid-template-columns: 1fr; gap: 16px; }
  .hiw-step { padding: 28px 18px 24px; }
  .compare-table th, .compare-table td { padding: 12px 10px; font-size: 13px; }
  .compare-feature-col { min-width: 130px; }
  /* Les 2 colonnes restent côte à côte (demande explicite), juste resserrées */
  .cv-grid { gap: 16px; }
  .cv-card { padding: 16px; }
  .cv-vs { width: 46px; height: 46px; font-size: 13px; }
  .trust-banner { gap: 12px; padding: 20px 12px; }
  .trust-banner-item { flex-direction: column; text-align: center; gap: 6px; font-size: 11px; }
  .trust-banner-item svg { width: 24px; height: 24px; }
  .trust-banner-item + .trust-banner-item { border-left: 1px solid var(--line); padding-left: 12px; }
  .stats-proof-item { gap: 14px; padding: 8px 0; }
  .review-card { margin-bottom: 16px; }
  .stats-proof-ring { width: 56px; height: 56px; }
  .stats-proof-ring-value { font-size: 13px; }
  .stats-proof-text { font-size: 14px; }
}

/* Petits téléphones : 2 colonnes du comparatif visuel restent côte à côte
   (demande explicite), on resserre juste espacements et tailles de texte. */
@media (max-width: 520px) {
  .cv-grid { gap: 10px; }
  .cv-card { padding: 12px; }
  .cv-badge { font-size: 10px; padding: 4px 9px; margin-bottom: 10px; }
  .cv-media { margin-bottom: 10px; }
  .cv-list { gap: 10px; }
  .cv-list li { padding: 9px 10px; font-size: 11.5px; gap: 7px; border-radius: var(--r-sm); }
  .cv-list li + li::before { left: 10px; right: 10px; top: -5px; }
  .cv-vs { width: 40px; height: 40px; font-size: 12px; border-width: 2px; }
  .hero-learn-grid { grid-template-columns: 1fr; gap: 7px; }
  .hero-learn-grid li { font-size: 13px; }
}

/* =========================================================
   TRÈS GRAND ÉCRAN (1800px et plus — moniteurs ultra-wide)
   Le --container général (1400px) reste inchangé sur desktop normal.
   Au-delà de 1800px, le tableau comparatif (largeur fixe 860px) et les
   sections sans max-width propre (reviews, why-us, etc. — elles suivent
   déjà le container) paraissaient minuscules/perdues dans le vide.
   ========================================================= */
@media (min-width: 1800px) {
  :root { --container: 1600px; }
  .compare-table { max-width: 1300px; }
}