/* =========================================================
   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 */
  --container: 1400px;
  --section-pad-y: clamp(48px, 7vw, 72px);
  --section-pad-x: clamp(16px, 3vw, 24px);

  /* Rayons */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Ombres */
  --shadow-sm: 0 2px 8px rgba(42, 51, 82, 0.07);
  --shadow-md: 0 8px 24px rgba(42, 51, 82, 0.14);

  /* 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(27px, 3.4vw, 38px);
  --fs-h1: clamp(25px, 2.8vw, 31px);
  --fs-h2: clamp(23px, 2.6vw, 29px);
  --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 */
  --lh-tight: 1.15;
  --lh-heading: 1.22;
  --lh-body: 1.55;
  --ls-display: -0.005em;
  --ls-heading: 0em;
  --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);
  background: var(--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: 700;
  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 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  overflow: hidden;
}
.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-pill);
  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: 10px;
  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; }
/* La galerie est presque toujours plus courte que le bloc d'achat (FAQ inline
   incluse) : sans sticky, elle termine son scroll avant lui et laisse un vide
   sous elle pendant que le bloc d'achat continue. On la fixe pareil. */
.gallery { position: sticky; top: 90px; }
.review-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--star);
  font-size: 13px;
  margin-bottom: 6px;
}
/* Étoile aux pointes arrondies (injectée par loader.js sur data-stars),
   même famille visuelle que le reste des icônes du site. Chaque étoile est
   un .star-icon-wrap ; une note à mi-chemin (ex: 4.6/5) ajoute une 2e étoile
   pleine par-dessus, coupée à 50% via clip-path, pour un rendu mi-remplie. */
.star-icon-wrap {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.star-icon-wrap:not(:last-child) { margin-right: 1px; }
.star-icon {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.star-icon.is-filled { fill: var(--star); stroke: var(--star); }
.star-icon-half {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
}
.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;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin: 0 0 6px;
}
.buybox h1 { font-size: var(--fs-h1); margin-bottom: 4px; }
.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: 700; line-height: 1.1; }
.price-compare { font-size: var(--fs-body); color: var(--grey); text-decoration: line-through; }
.price-badge {
  background: var(--error);
  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-pill);
  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(--accent);
  color: #fff;
  border: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-md);
  cursor: pointer;
  margin-bottom: 16px;
  /* Légère élévation au repos : le bouton a du volume, pas juste un
     rectangle plat. Couleur dérivée de --accent pour rester correct après
     un re-thémage produit. */
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.add-btn:hover { background: var(--accent-dark); }
.add-btn:disabled { background: #cbd5df; color: var(--ink); 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 2px 6px color-mix(in srgb, var(--accent) 30%, transparent); }
.add-btn.is-added { background: var(--success); box-shadow: 0 4px 14px color-mix(in srgb, var(--success) 45%, 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: var(--accent-dark); color: #fff; 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: 14px;
  padding: 18px 6px 14px;
  text-align: center;
}
.trust-icon {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 9px;
  margin: 0 auto 10px;
  background: var(--badge-sky);
  color: var(--ink);
  border-radius: 50%;
  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: 3px; 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 { 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 { color: var(--sky); }
.why-sub, .hiw-sub, .compare-sub, .compare-visual-sub, .ugc-sub { color: var(--grey); font-size: 16px; margin-bottom: 48px; }
/* 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: 28px;
}
.hiw-step {
  position: relative;
  /* Léger lavis bleu ciel (~4% de --sky dans du blanc) : le bloc se
     détache du fond blanc de la page sans jamais devenir une vraie
     couleur — juste assez pour rappeler la teinte principale du thème. */
  background: color-mix(in srgb, var(--sky) 4%, white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 28px 32px;
  /* Profondeur au repos (pas seulement au survol) : le bloc se détache
     clairement du fond blanc de la page dès l'affichage. */
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
  .hiw-step:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--ink) 18%, var(--line));
    box-shadow: var(--shadow-md);
  }
}
.hiw-step-number {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sky);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--badge-sky);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Chaque pastille porte sa propre ombre : elle se détache du fond de
     carte, pas seulement la carte du fond de page. */
  box-shadow: var(--shadow-sm);
}
.hiw-icon svg { width: 30px; height: 30px; }
/* Chaque carte reçoit sa propre couleur de pastille (rotation à 4 teintes) :
   c'est l'élément signature de l'identité "jouet premium" — un porte-clés
   de couleurs bonbon derrière chaque bénéfice, jamais deux voisines pareilles. */
.hiw-step:nth-child(4n+1) .hiw-icon { background: var(--badge-pink); }
.hiw-step:nth-child(4n+2) .hiw-icon { background: var(--badge-mint); }
.hiw-step:nth-child(4n+3) .hiw-icon { background: var(--badge-yellow); }
.hiw-step:nth-child(4n+4) .hiw-icon { background: var(--badge-sky); }
.hiw-media {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  object-fit: cover;
}
.hiw-step h3 { font-size: 17.5px; margin-bottom: 8px; }
.hiw-step p { color: var(--grey); font-size: 14px; margin: 0; line-height: 1.55; }

/* 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(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 14px;
}
.compare-table th, .compare-table td { padding: 14px 16px; text-align: center; }
.compare-table td:first-child { text-align: left; color: var(--ink); }
.compare-table thead th { font-size: var(--fs-caption); font-weight: 700; background: var(--bg); }
.compare-table thead th.compare-us { background: var(--sky); color: #fff; }
.compare-table tbody td { border-top: 1px solid var(--line); }
.compare-table td.compare-us { background: var(--tint); }
.compare-feature-col { min-width: 160px; }
.compare-yes { color: var(--success); font-weight: 700; font-size: 16px; }
.compare-no { color: var(--error); font-weight: 700; font-size: 16px; opacity: 0.7; }
.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; }
.why-us { max-width: 2200px; margin-bottom: 60px; }
.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: 14px; }
.why-item { display: flex; flex-direction: row; align-items: center; width: 100%; gap: 14px; }
/* Ligne discrète entre chaque point (pas après le dernier de la colonne) —
   14px de padding + 14px de gap = 28px, même rythme qu'avant la ligne. */
.why-item:not(:last-child) {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.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(--badge-sky);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-icon svg { width: 18px; height: 18px; }
/* Même rotation à 3 teintes que .hiw-icon (chaque colonne compte 3 items) */
.why-item:nth-child(3n+1) .why-icon { background: var(--badge-pink); }
.why-item:nth-child(3n+2) .why-icon { background: var(--badge-mint); }
.why-item:nth-child(3n+3) .why-icon { background: var(--badge-yellow); }
.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;
}
@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(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px;
}
.stat-number { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: -0.01em; }
.stat-number .stat-suffix { font-size: 22px; }
.stat-bar { height: 4px; background: var(--line); 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; }
.stat-card p { color: var(--grey); font-size: 13px; margin: 0; }

/* Stats — preuve sociale par les chiffres (titre + liste d'anneaux %) */
.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(--sky) 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); }

/* 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-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 {
  background: var(--tint);
  padding: 28px 32px;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* Conteneur interne (largeur limitée comme le reste du site) : les 3 blocs
   se partagent l'espace à parts égales (flex:1), donc même largeur ET
   même hauteur (align-items:stretch), peu importe la longueur du texte. */
.trust-banner-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.trust-banner-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}
.trust-banner-item svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 9px;
  background: var(--badge-sky);
  color: var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Séparateur purement décoratif (positionné au milieu du gap, sans
   padding/border sur l'élément) : les 3 blocs restent rigoureusement de
   la même largeur, la ligne ne "vole" pas d'espace à un bloc plutôt qu'à
   un autre. */
.trust-banner-item + .trust-banner-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
}

/* UGC slider — carrousel multi-cartes, image/vidéo seule */
.ugc {
  position: relative;
  text-align: center;
  padding-top: 0;
  padding-bottom: clamp(40px, 6vw, 64px);
}
/* Fond de section : bleu ciel très pâle du thème (--sky), pleine largeur
   d'écran (même sortie de conteneur que .ugc-slider) — couleur pleine sur
   toute la section, pas juste une partie. */
.ugc-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--sky) 4%, white);
}
/* Vague décorative qui introduit la section par le haut, poussée juste
   au-dessus du bord de la section (translateY -99%) : même couleur que
   .ugc-bg pour un enchaînement visuel continu depuis la section précédente. */
.ugc-wave-top {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translate(-50%, -99%);
  line-height: 0;
  pointer-events: none;
  z-index: -1;
}
.ugc-wave-top svg { display: block; width: 100%; height: auto; }
.ugc-wave-top path { fill: color-mix(in srgb, var(--sky) 4%, white); }
/* 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 index.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é). #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%;
  background: var(--badge-yellow);
  color: var(--ink);
  font-weight: 700;
  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: 700; 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: 700; line-height: 1; letter-spacing: -0.01em; }
.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 { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.reviews-bar span { display: block; height: 100%; background: var(--ink); }
.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 → layoutReviewsMasonry). column-count
   pur recalculait TOUT le layout à chaque changement de contenu et faisait
   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 {
  /* Même lavis bleu ciel très pâle que les cartes "Why Parents Love It" :
     le bloc se détache du fond blanc sans jamais devenir une vraie couleur. */
  background: color-mix(in srgb, var(--sky) 4%, white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  /* Profondeur au repos (pas seulement au survol) — voir la règle de hover
     dédiée plus bas (shadow seule, sans transform : layout masonry). */
  box-shadow: var(--shadow-sm);
}
.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 des 60 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; }
}
/* Rythme : groupement serré pour l'identité (avatar + nom + verified + date,
   8px de gap), puis une séparation nettement plus généreuse (14px) avant le
   commentaire — avant, les 3 blocs (étoiles/identité/date/texte) avaient le
   même espacement plat (10/4/10), aucun rythme, aucune respiration avant le
   contenu qui compte vraiment. */
.review-stars { margin-bottom: 12px; }
.review-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* Le badge "Verified" vit maintenant à côté du nom qu'il confirme (avant :
   plaqué à l'autre bout de la carte via space-between, déconnecté). */
.review-author { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; 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; flex-shrink: 0; }
.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;
}
/* Le commentaire est ce qui vend la confiance : il doit primer sur le nom
   et la date, pas être relégué au même gris que les métadonnées. */
.review-text { color: var(--ink); 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; }
/* Même couleur que Add To Cart pour les deux (identification rapide), mais
   traitement différent : "Read More" reste plein, "Read Less" passe en
   contour (fond transparent, bordure + texte en accent) pour qu'on ne les
   confonde pas au premier coup d'œil. */
.reviews-read-less {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 14px 26px;
}
.reviews-read-less:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Élévation au survol des cartes (desktop seulement) — .hiw-step a son
   propre hover, plus marqué, défini avec le reste de ses règles plus haut. */
@media (hover: hover) {
  .stat-card, .trust-card, .cv-card {
    transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  }
  .stat-card:hover, .trust-card:hover, .cv-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  /* .review-card est dans une mise en page column-count (masonry) : un
     transform au survol force Chrome/Safari à rééquilibrer les colonnes,
     ce qui fait "disparaître/réapparaître" la carte survolée. Shadow seule,
     sans transform, pour rester dans une mise en page multi-colonnes 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 { font-weight: 800; font-size: 16px; }
.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-pill);
  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(--accent);
  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 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.checkout-btn:hover { background: var(--accent-dark); }
.checkout-btn:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }
.checkout-btn:not(:disabled):active { box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 25%, 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 dans la même couleur 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(--accent-dark); 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; }
  /* Colonnes du masonry avis gérées en JS (cart.js lit ce même breakpoint) */
}

/* =========================================================
   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; }
  .gallery { 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: 18px; }
  .hiw-step { padding: 28px 22px 26px; }
  .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; }
  .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; }
  .trust-banner { padding: 20px 12px; }
  .trust-banner-inner { gap: 12px; }
  .trust-banner-item { flex-direction: column; text-align: center; gap: 6px; font-size: 11px; }
  .trust-banner-item svg { width: 15px; height: 15px; padding: 7px; }
  .trust-banner-item + .trust-banner-item::before { left: -6px; }
}

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