/** Shopify CDN: Minification failed

Line 3960:0 Unexpected "}"

**/
/* ==========================================================================
   Signature — feuille de style unique du thème
   Direction « marque immersive » : la page est un cadre arrondi posé sur une bordure
   de la couleur de marque ; à l'intérieur, une surface crème, des panneaux arrondis
   (doux ou forts), un hero en scène (image ou studio, produit détouré géant, légendes
   et carte vitrées), une navigation en pilules et une typographie d'affichage
   expressive (casse et interlettrage réglables). Un seul bouton d'achat, d'une seule
   couleur ; l'accent colore les liens, la sélection et les pictogrammes.
   Jetons (couleurs, typographie fluide, espacements, rayons, ombres, verre, transitions)
   puis composants et sections. Mobile d'abord.
   Couleurs, polices et rayons viennent de snippets/css-variables.liquid (réglages).
   Aucune apparition au défilement, sauf la séquence facultative du hero en scène (§ 9 b),
   coupée si le visiteur demande moins d'animations ; ailleurs, le mouvement se limite
   aux survols, à l'appui des boutons et à quelques boucles décoratives lentes (§ 21).
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root {
  --gutter: clamp(1.25rem, 0.75rem + 2.2vw, 2.75rem);
  --header-height: 64px;
  --sticky-offset: 0px;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;

  /* 13 px : plus petite taille de texte du thème (mentions, badges, étiquettes). */
  --fs-2xs: 0.8125rem;
  --fs-xs: 0.875rem;
  --fs-s: 0.9375rem;
  --fs-base: calc(1rem * var(--body-scale, 1));
  --fs-l: calc(clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) * var(--body-scale, 1));
  --fs-h4: calc(clamp(1.125rem, 1.06rem + 0.25vw, 1.25rem) * var(--heading-scale, 1));
  --fs-h3: calc(clamp(1.3rem, 1.16rem + 0.55vw, 1.625rem) * var(--heading-scale, 1));
  --fs-h2: calc(clamp(1.9rem, 1.3rem + 2.5vw, 3.5rem) * var(--heading-scale, 1) * var(--case-scale, 1));
  --fs-h1: calc(clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem) * var(--heading-scale, 1));
  --fs-display: calc(clamp(2.1rem, 1.3rem + 3.6vw, 4.4rem) * var(--heading-scale, 1));

  --lh-display: 1.06;
  --lh-heading: 1.14;
  --lh-body: 1.6;
  /* Interlettrage des titres détendu : proche de zéro, plus chaleureux qu'un titre serré. */
  --ls-heading: 0em;
  --ls-display: -0.006em;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 480ms;

  /* Rayons : cartes 24 à 32 px (réglage « Arrondi des cartes »), boutons en pilule ; cadre de page et panneaux
     de section : réglage « Arrondi du cadre et des panneaux » (32 à 48 px), réduit sur mobile. */
  --radius-s: max(10px, calc(var(--radius) * 0.58));
  --radius-m: max(14px, calc(var(--radius) * 0.84));
  --radius-l: var(--radius);
  --radius-xl: calc(var(--radius) * 1.34);
  --radius-panel: min(var(--radius-frame, 40px), 26px);
  --panel-inset: clamp(6px, 0.2rem + 0.8vw, 16px);

  /* Verre dépoli (pilules de l'en-tête, légendes et carte du hero, barre collante) : fond clair presque opaque,
     lisible quelle que soit l'image dessous (texte foncé à 7:1 au moins même sur une image noire). */
  --glass-bg: color-mix(in srgb, var(--main-bg) 84%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--main-bg) 92%, transparent);
  --glass-border: color-mix(in srgb, #FFFFFF 55%, transparent);
  --glass-blur: blur(18px) saturate(1.35);

  /* Ombres douces, teintées de la couleur du texte (jamais un gris neutre ni un filet noir). */
  --shadow-1: 0 1px 2px rgba(var(--main-text-rgb), 0.05), 0 8px 22px -12px rgba(var(--main-text-rgb), 0.22);
  --shadow-2: 0 2px 6px rgba(var(--main-text-rgb), 0.04), 0 22px 46px -24px rgba(var(--main-text-rgb), 0.3);
  --shadow-3: 0 30px 70px -24px rgba(var(--main-text-rgb), 0.35);

  /* Couleurs fixes : surfaces des cartes, étoiles (au moins 3:1 sur les fonds clairs, toujours doublées de la
     note en chiffres), économies et coches, point de stock faible (décoratif, le texte porte l'information). */
  --surface: #FFFFFF;
  --star: #B86E00;
  --success: #0B7150;
  --notice: #E8930C;

  --wave-h: clamp(26px, 3.6vw, 56px);
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 32 C180 6 360 0 540 14 S900 58 1080 56 S1350 30 1440 16 L1440 60 Z'/%3E%3C/svg%3E");
  --wave-mask-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 22 C200 44 420 58 640 44 S1080 0 1260 8 S1400 26 1440 30 L1440 60 Z'/%3E%3C/svg%3E");
  /* Trait dessiné à la main (masque : il prend la couleur « Forme secondaire »). */
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5 C38 3.5 70 3 101 8.5 S162 13.5 197 5' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 6.1 6.6.7-4.9 4.5 1.4 6.5L12 17.1l-5.9 3.3 1.4-6.5-4.9-4.5 6.6-.7z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 749px) {
  :root {
    --header-height: 60px;
  }
}

@media (min-width: 990px) {
  :root {
    --header-height: 76px;
  }
}

@media (min-width: 750px) {
  :root {
    --radius-panel: var(--radius-frame, 40px);
  }
}

/* Déclaré sur la racine : scroll-padding-top (lu sur html) tient compte de l'en-tête collant. */
:root:has(.header--sticky) {
  --sticky-offset: var(--header-height);
}

/* Couleurs dérivées, recalculées dans chaque palette à partir de son fond et de son texte.
   Texte secondaire à 76 % : au moins 4,5:1 sur le fond, les cartes blanches et les fonds doux des trois préréglages.
   Contour des commandes (champs, boutons secondaires, lots non choisis, radios) à 62 % : au moins 3:1. */
:root,
.scheme-main,
.scheme-soft,
.scheme-contrast {
  --c-surface: var(--scheme-surface, var(--surface));
  --c-muted: color-mix(in srgb, var(--c-text) 76%, var(--c-bg));
  --c-control: color-mix(in srgb, var(--c-text) 62%, var(--c-bg));
  --c-field-border: var(--c-control);
  --c-border: color-mix(in srgb, var(--c-text) 11%, var(--c-bg));
  --c-border-strong: color-mix(in srgb, var(--c-text) 22%, var(--c-bg));
  --c-faint: rgba(var(--c-accent-rgb), 0.07);
  --c-tint: rgba(var(--c-accent-rgb), 0.1);
  --c-stars: var(--star);
  --c-focus: var(--c-accent);
  --c-button-hover: color-mix(in srgb, var(--c-button) 86%, var(--c-button-text));
  --c-button-ledge: color-mix(in srgb, var(--c-button) 66%, #000000);
  --c-pastille: var(--scheme-pastille, color-mix(in srgb, var(--shape) 38%, #FFFFFF));
  --c-pastille-alt: color-mix(in srgb, var(--shape-alt) 34%, #FFFFFF);
  --c-pastille-sticker: color-mix(in srgb, var(--sticker) 48%, #FFFFFF);
  /* Aplat foncé (texte clair dessus) : teinte plus légère, pour que les textes posés sur ce fond (économie en vert,
     texte secondaire) gardent 4,5:1. */
  --c-frame: color-mix(in srgb, var(--shape) var(--shape-tint, 22%), color-mix(in srgb, var(--main-bg) 60%, #FFFFFF));
  --c-disabled: color-mix(in srgb, var(--c-text) 9%, var(--c-bg));
}

.scheme-main,
.scheme-soft,
.scheme-contrast {
  background-color: var(--c-bg);
  color: var(--c-text);
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sticky-offset) + 1rem);
}

/* Barre d'achat collante visible : l'élément qui reçoit le focus ou l'ancre ne passe pas dessous. */
html:has(sticky-atc.is-visible) {
  scroll-padding-bottom: 7rem;
}

html.is-locked {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: 0.003em;
  /* Un mot plus long que sa ligne (texte très agrandi) passe à la ligne au lieu de déborder. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Cadre de page : bordure de la couleur de marque (fond du body), page posée dedans en rectangle arrondi.
   overflow: clip (et non hidden) : l'en-tête et la galerie restent collants ; les éléments fixes (barre
   collante, tiroirs) ne sont pas rognés. */
body.has-frame {
  background: var(--frame);
}

.page-frame {
  position: relative;
  min-height: 100vh;
  background: var(--c-bg);
}

.has-frame .page-frame {
  min-height: calc(100vh - 2 * var(--frame-gap));
  margin: var(--frame-gap);
  overflow: clip;
  border-radius: var(--radius-panel);
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
}

p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

/* Grands titres d'affichage (hero, sections, offre finale, manifeste) : casse et interlettrage de la marque
   (Paramètres du thème > Typographie). Le titre du produit, les titres de cartes et le texte restent tels que
   saisis. */
.display-heading,
.hero-scene__title,
.hero__title,
.vtiles__heading,
.section-head__title,
.story__heading,
.figures__heading,
.reviews__heading,
.specs__heading,
.faq__heading,
.guarantee__heading,
.split__heading,
.before-after__heading,
.final-cta__heading,
.rich-text__heading,
.press__heading {
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-tracking);
  line-height: 1.02;
}

/* Spécificité nulle : les marges et retraits propres à chaque liste (classes) s'appliquent. */
:where(ul[role='list'], ol[role='list']) {
  margin: 0;
  padding: 0;
  list-style: none;
}

[hidden]:not([hidden='until-found']) {
  display: none !important;
}

::selection {
  background: color-mix(in srgb, var(--sticker) 70%, #FFFFFF);
  color: var(--main-text);
}

/* Anneau de focus : 3 px, couleur d'accent, décalé de 3 px. Il suit l'arrondi de l'élément
   (aucun border-radius imposé ici : un bouton en pilule le reste au focus). */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.main:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. Utilitaires ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--c-text);
  color: var(--c-bg);
  border-radius: var(--radius-button);
  font-weight: var(--font-body-weight-bold);
  transform: translateY(-200%);
  text-decoration: none;
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(46rem + 2 * var(--gutter));
}

.section {
  padding-top: calc(var(--pt, 96px) * 0.62);
  padding-bottom: calc(var(--pb, 96px) * 0.62);
}

@media (min-width: 750px) {
  .section {
    padding-top: var(--pt, 96px);
    padding-bottom: var(--pb, 96px);
  }
}

/* Deux sections voisines de même palette (aucune vague ne les sépare) : la seconde réduit sa marge haute, pour
   éviter un grand aplat vide entre elles. */
.shopify-section:has(> .section.scheme-main) + .shopify-section > .section.scheme-main,
.shopify-section:has(> .section.scheme-soft) + .shopify-section > .section.scheme-soft,
.shopify-section:has(> .section.scheme-contrast) + .shopify-section > .section.scheme-contrast {
  padding-top: calc(var(--pt, 96px) * 0.35);
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.h1 {
  font-size: var(--fs-h1);
}

.h2 {
  font-size: var(--fs-h2);
}

.editor-hint {
  padding: 1rem 1.25rem;
  border: 2px dashed var(--c-border-strong);
  border-radius: var(--radius-s);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  stroke-width: 2;
}

/* Texte riche */
.rte > * + * {
  margin-top: 0.9em;
}

.rte ul,
.rte ol {
  padding-left: 1.2em;
}

.rte a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.rte strong {
  font-weight: var(--font-body-weight-bold);
}

/* Vagues entre les sections : quand deux sections voisines n'ont pas la même palette, la seconde dessine
   au-dessus d'elle une courbe douce de sa couleur (réglage du thème « Vagues entre les sections »).
   Seuls les éléments .section sont concernés (jamais la barre collante ni un bandeau). */
.has-waves .shopify-section:has(> .scheme-main) + .shopify-section > .section:is(.scheme-soft, .scheme-contrast),
.has-waves .shopify-section:has(> .scheme-soft) + .shopify-section > .section:is(.scheme-main, .scheme-contrast),
.has-waves .shopify-section:has(> .scheme-contrast) + .shopify-section > .section:is(.scheme-main, .scheme-soft),
.has-waves .footer {
  position: relative;
}

.has-waves .shopify-section:has(> .scheme-main) + .shopify-section > .section:is(.scheme-soft, .scheme-contrast)::before,
.has-waves .shopify-section:has(> .scheme-soft) + .shopify-section > .section:is(.scheme-main, .scheme-contrast)::before,
.has-waves .shopify-section:has(> .scheme-contrast) + .shopify-section > .section:is(.scheme-main, .scheme-soft)::before,
.has-waves .footer::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: var(--wave-h);
  background: inherit;
  -webkit-mask: var(--wave-mask) center bottom / 100% 100% no-repeat;
  mask: var(--wave-mask) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.has-waves .shopify-section > .section.scheme-soft::before,
.has-waves .footer::before {
  -webkit-mask-image: var(--wave-mask-alt);
  mask-image: var(--wave-mask-alt);
}

/* Panneaux arrondis (réglage « Séparation des sections » : panneaux) : une section en panneau doux ou fort est
   posée sur la surface, en retrait du cadre et arrondie ; deux sections voisines de même palette forment un seul
   panneau (coins intérieurs droits). */
.has-panels .shopify-section > .section:is(.scheme-soft, .scheme-contrast),
.has-panels .footer:is(.scheme-soft, .scheme-contrast) {
  margin-inline: var(--panel-inset);
  border-radius: var(--radius-panel);
}

.has-panels .shopify-section + .shopify-section > .section:is(.scheme-soft, .scheme-contrast) {
  margin-top: var(--panel-inset);
}

.has-panels .shopify-section:has(> .section.scheme-soft) + .shopify-section > .section.scheme-soft,
.has-panels .shopify-section:has(> .section.scheme-contrast) + .shopify-section > .section.scheme-contrast {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.has-panels .shopify-section:has(> .section.scheme-soft):has(+ .shopify-section > .section.scheme-soft) > .section,
.has-panels .shopify-section:has(> .section.scheme-contrast):has(+ .shopify-section > .section.scheme-contrast) > .section {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.has-panels .footer:is(.scheme-soft, .scheme-contrast) {
  margin-block: var(--panel-inset);
}

/* ---------- 4. Visuel de remplacement (jamais de carré gris) ---------- */
.art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 45%, var(--c-pastille) 0 62%, transparent 63%),
    radial-gradient(28% 26% at 22% 78%, var(--c-pastille-alt) 0 60%, transparent 61%),
    var(--c-frame);
}

.art__monogram {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: clamp(5rem, 20vw, 14rem);
  line-height: 1;
  color: rgba(var(--main-text-rgb), 0.16);
  user-select: none;
}

/* ---------- 5. Liens, boutons et petits composants ---------- */
.link-underline {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--dur-3) var(--ease-out);
}

.link-underline:hover,
a:hover > .link-underline {
  background-size: 100% 2px;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--c-accent);
  font-weight: var(--font-body-weight-bold);
  text-decoration: none;
}

.link .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--dur-2) var(--ease-out);
}

.link:hover .icon {
  transform: translateX(4px);
}

.link--arrow {
  border-bottom: 2px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
}

.link--arrow:hover {
  border-bottom-color: currentColor;
}

/* Boutons : pilule, texte gras. Sans modificateur, un bouton est secondaire (fond blanc, contour de 3:1).
   .button--primary = bouton d'achat, couleur pleine « Bouton d'achat », sans relief : ombre douce, léger
   éclaircissement au survol, léger enfoncement à l'appui. Il est réservé aux actions d'achat.
   .button--brand = mêmes couleurs, pour un lien vers le bloc d'achat (hero sur fond clair).
   .button--light = blanc plein sur une scène sombre (hero), texte foncé. */
.button {
  --btn-bg: var(--c-surface);
  --btn-fg: var(--c-text);
  --btn-border: var(--c-control);
  --press: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 100%;
  min-height: 52px;
  padding: 0.8rem 1.6rem;
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-button);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body-family);
  font-size: 1rem;
  font-weight: var(--font-body-weight-bold);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  transform: translateY(var(--press));
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.button .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.button--primary,
.button--brand {
  --btn-bg: var(--c-button);
  --btn-fg: var(--c-button-text);
  --btn-border: var(--c-button);
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--c-button) 80%, transparent);
}

.button--light {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--main-text);
  --btn-border: #FFFFFF;
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.55);
}

.button--secondary {
  --btn-bg: var(--c-surface);
  --btn-fg: var(--c-text);
  --btn-border: var(--c-control);
}

/* Action importante mais pas d'achat (rétractation) : texte clair sur la couleur du texte. */
.button--strong {
  --btn-bg: var(--c-text);
  --btn-fg: var(--c-bg);
  --btn-border: var(--c-text);
}

@media (hover: hover) {
  .button--primary:hover,
  .button--brand:hover {
    --btn-bg: var(--c-button-hover);
    --btn-border: var(--c-button-hover);
    --press: -1px;
    box-shadow: 0 18px 32px -16px color-mix(in srgb, var(--c-button) 85%, transparent);
  }

  .button--light:hover {
    --btn-bg: color-mix(in srgb, var(--main-bg) 55%, #FFFFFF);
    --btn-border: color-mix(in srgb, var(--main-bg) 55%, #FFFFFF);
    --press: -1px;
  }

  .button:not(.button--primary, .button--brand, .button--light, .button--strong):hover {
    --btn-bg: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface));
    --btn-border: var(--c-accent);
  }

  .button--strong:hover {
    --btn-bg: color-mix(in srgb, var(--c-text) 86%, var(--c-bg));
  }

  .button:hover .icon--bag {
    animation: bag-hop 0.55s var(--ease-out);
  }
}

.button--primary:active,
.button--brand:active,
.button--light:active {
  --press: 1px;
  box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--c-button) 70%, transparent);
  transition-duration: 60ms;
}

.button:not(.button--primary, .button--brand, .button--light):active {
  --press: 2px;
  transition-duration: 60ms;
}

.button--full {
  width: 100%;
}

.button--lg {
  min-height: 58px;
  padding-inline: 2rem;
  font-size: 1.0625rem;
}

.button--sm {
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  font-size: var(--fs-s);
}

/* Bouton inactif (« Épuisé », « Indisponible ») : couleur pleine, texte lisible (4,5:1), sans relief. */
.button:disabled,
.button[aria-disabled='true'] {
  --btn-bg: var(--c-disabled);
  --btn-fg: var(--c-muted);
  --btn-border: var(--c-disabled);
  --press: 0px;
  cursor: not-allowed;
  box-shadow: none;
}

.button:disabled .icon--bag,
.button[aria-disabled='true'] .icon--bag {
  display: none;
}

.button__spinner {
  display: none;
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.button.is-loading .button__label,
.button.is-loading .icon {
  visibility: hidden;
}

.button.is-loading .button__spinner {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bag-hop {
  0%,
  100% {
    translate: 0 0;
  }

  40% {
    translate: 0 -4px;
  }

  70% {
    translate: 0 1px;
  }
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  transition: background-color var(--dur-2) var(--ease-out), opacity var(--dur-2);
}

.icon-button:hover {
  background: var(--c-faint);
}

.icon-button--outline {
  border: 2px solid var(--c-control);
  background: var(--c-surface);
}

.icon-button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Puces de filtre et de choix (avis, comparatif) : la puce choisie prend l'accent (sélection). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.45rem 1.05rem;
  border: 2px solid var(--c-control);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-medium);
  line-height: 1;
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}

.chip:hover {
  border-color: var(--c-accent);
}

.chip .icon {
  width: 0.9rem;
  height: 0.9rem;
}

.chip__count {
  margin-left: 0.15rem;
  font-weight: var(--font-body-weight);
}

.chip.is-active,
.chip[aria-pressed='true'] {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: var(--c-faint);
  font-size: var(--fs-2xs);
  font-weight: var(--font-body-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
}

/* Badge de remise : couleur « Autocollants et badges », texte foncé. */
.badge--accent {
  background: var(--sticker);
  color: var(--main-text);
}

/* Pastilles rondes pour les pictogrammes */
.pastille {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-pastille);
  color: var(--c-accent);
  transition: scale var(--dur-2) var(--ease-bounce);
}

.pastille .icon {
  width: 1.45rem;
  height: 1.45rem;
  stroke-width: 2.1;
}

.pastille--alt {
  background: var(--c-pastille-alt);
  color: var(--success);
}

.pastille--sticker {
  background: var(--c-pastille-sticker);
  color: var(--main-text);
}

/* Autocollants ronds (hero) : texte foncé sur la couleur choisie, légèrement inclinés. */
.sticker {
  display: inline-grid;
  place-content: center;
  width: 6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sticker);
  color: var(--main-text);
  font-family: var(--font-heading-family);
  line-height: 1.05;
  text-align: center;
  box-shadow: 0 0 0 4px var(--surface), 0 14px 26px -14px rgba(var(--main-text-rgb), 0.45);
  rotate: -8deg;
  transition: rotate var(--dur-3) var(--ease-bounce);
}

.sticker--shape {
  background: var(--shape);
  rotate: 6deg;
}

.sticker--shape-alt {
  background: var(--shape-alt);
  rotate: 7deg;
}

.sticker:hover {
  rotate: 0deg;
}

.sticker__small {
  font-size: 0.875rem;
  font-weight: var(--font-heading-weight);
}

.sticker__big {
  font-size: 1.55rem;
  font-weight: var(--font-heading-weight-bold);
  white-space: nowrap;
}

/* Formulaires */
.field {
  display: grid;
  gap: 0.4rem;
}

.field-label {
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-medium);
}

.field-input,
.field-select {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 1rem;
  border: 2px solid var(--c-field-border);
  border-radius: var(--radius-s);
  background-color: var(--c-surface);
}

.field-input:focus-visible,
.field-select:focus-visible {
  border-color: var(--c-accent);
}

.field-select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596B7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
}

.field-select--sm {
  width: auto;
  min-height: 44px;
  padding-block: 0.4rem;
  border-radius: 999px;
  font-size: var(--fs-s);
}

.form-message {
  margin-top: 0.75rem;
  font-size: var(--fs-s);
}

.form-message--error {
  color: var(--c-error);
}

/* Étoiles (masque CSS, remplissage au dixième), toujours accompagnées de la note en chiffres. */
.stars {
  --star-size: 1.05rem;
  display: inline-block;
  flex: none;
  width: calc(var(--star-size) * 5);
  height: var(--star-size);
  background: linear-gradient(90deg, var(--c-stars) calc(var(--rating, 0) / 5 * 100%), color-mix(in srgb, var(--c-text) 20%, #FFFFFF) 0);
  -webkit-mask: var(--star-mask) left center / var(--star-size) var(--star-size) repeat-x;
  mask: var(--star-mask) left center / var(--star-size) var(--star-size) repeat-x;
}

.stars--sm {
  --star-size: 0.95rem;
}

.stars--lg {
  --star-size: 1.45rem;
}

/* ---------- 6. Barre d'annonce ---------- */
/* Courte : une ligne sur ordinateur, une à deux lignes sur mobile (forme courte de l'offre). */
.announcement {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--font-body-weight-medium);
  line-height: 1.35;
}

.announcement__inner {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  /* Hauteur des flèches (44 px) même sans elles : la barre ne grandit pas quand le script active le message de
     l'offre et affiche les flèches (pas de décalage de la page). */
  min-height: 2.75rem;
}

/* Tous les messages occupent la même cellule : la barre garde la hauteur du plus long, sans décalage. */
.announcement__track {
  grid-column: 2;
  display: grid;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.announcement__item {
  grid-area: 1 / 1;
  padding-block: 0.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}

.announcement__item.is-current {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.45s var(--ease-out);
}

.announcement__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.announcement__offer-link {
  text-decoration: none;
}

/* Forme courte de l'offre sur mobile, formulation complète à partir de 750 px. */
.announcement__offer-full {
  display: none;
}

.announcement__offer-short:empty {
  display: none;
}

.announcement__offer-link:has(.announcement__offer-short:empty) .announcement__offer-full {
  display: inline;
}

/* Mobile : deux lignes au plus, marges resserrées (la barre ne repousse pas le bloc d'achat). */
@media (max-width: 749px) {
  .announcement {
    line-height: 1.3;
  }

  .announcement__item {
    padding-block: 0.3rem;
  }
}

@media (min-width: 750px) {
  .announcement__offer-full {
    display: inline;
  }

  .announcement__offer-short {
    display: none;
  }
}

.announcement__clock {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin: 0 0.3em 0 0.45em;
  vertical-align: -0.12em;
}

.announcement__arrow {
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

.announcement__arrow:hover {
  background: rgba(var(--c-text-rgb), 0.08);
}

[data-announcement-prev] {
  grid-column: 1;
}

[data-announcement-next] {
  grid-column: 3;
}

.announcement__arrow .icon {
  width: 1rem;
  height: 1rem;
}

.announcement .countdown {
  font-weight: var(--font-body-weight-bold);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* ---------- 7. En-tête ---------- */
/* En-tête en pilules : logo, liens du menu en pilules (dans une pilule vitrée ou séparées), boutons à
   pictogramme vitrés et bouton panier plein, foncé. Collant : fond de verre dépoli une fois la page défilée.
   Écart borné par la largeur d'écran et nom de marque plafonné (9 vw) : à 320 px avec un texte agrandi à
   200 %, le logo et les pictogrammes tiennent sur la ligne, sans débordement. */
.section-header {
  position: relative;
  z-index: 30;
}

.section-header:has(.header--sticky) {
  position: sticky;
  top: 0;
}

.header {
  display: block;
  transition:
    background-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.header--border {
  box-shadow: inset 0 -1px 0 var(--c-border);
}

.header.is-solid {
  background-color: color-mix(in srgb, var(--c-bg) 86%, transparent);
  box-shadow: 0 12px 30px -26px rgba(var(--main-text-rgb), 0.6);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: min(1rem, 3vw);
  height: var(--header-height);
}

/* Boutons à pictogramme : verre clair, contour blanc translucide ; carrés arrondis ou ronds (réglage). */
.header__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--c-text);
  text-decoration: none;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: background-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}

.header--icons-square .header__icon {
  border-radius: 14px;
}

.header__icon:hover {
  background: var(--c-surface);
}

.header__icon .icon {
  width: 1.3rem;
  height: 1.3rem;
}

/* Panier : bouton plein, foncé (couleur du texte), le seul plein de l'en-tête. */
.header__cart {
  border-color: var(--c-text);
  background: var(--c-text);
  color: var(--c-bg);
}

.header__cart:hover {
  background: color-mix(in srgb, var(--c-text) 84%, var(--c-bg));
}

.header__logo {
  justify-self: start;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  text-decoration: none;
}

.header__logo-image {
  width: calc(var(--logo-width) * 0.8);
  height: auto;
  max-height: calc(var(--header-height) - 20px);
  object-fit: contain;
}

.header__logo-image--inverse {
  display: none;
}

.header__wordmark,
.drawer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight-bold);
  font-size: min(clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem), 9vw);
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-tracking);
  white-space: nowrap;
}

.header__wordmark {
  font-size: min(calc(clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem) * var(--case-scale, 1)), 9vw);
}

/* Marque sans logo : petite pastille (disque d'accent et point de l'aplat de marque), décorative. */
.brand-dot {
  position: relative;
  flex: none;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: var(--main-accent);
}

.brand-dot::after {
  content: '';
  position: absolute;
  right: -0.1em;
  bottom: -0.1em;
  width: 0.46em;
  height: 0.46em;
  border: 2px solid var(--c-bg);
  border-radius: 50%;
  background: var(--shape);
}

.header__nav {
  display: none;
}

.header__icons {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.header__cta {
  display: none;
  align-items: center;
  min-height: 44px;
  margin-right: 0.3rem;
  padding: 0.4rem 1.1rem;
  border: 1.5px solid var(--c-control);
  border-radius: 999px;
  background: var(--glass-bg);
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: border-color var(--dur-2), background-color var(--dur-2);
}

.header__cta:hover {
  border-color: var(--c-text);
  background: var(--c-surface);
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding-inline: 0.3rem;
  border: 2px solid var(--c-text);
  border-radius: 999px;
  background: var(--sticker);
  color: var(--main-text);
  font-size: var(--fs-2xs);
  font-weight: var(--font-body-weight-bold);
  line-height: 1;
}

/* Liens en pilules : groupe vitré (verre clair presque opaque, lisible sur une image) ou pilules séparées. */
.header__menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header--nav-group .header__menu {
  padding: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.header--nav-separate .header__menu {
  gap: 0.5rem;
}

.header__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-medium);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}

.header--nav-separate .header__link {
  border: 1.5px solid color-mix(in srgb, var(--c-text) 22%, transparent);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.header__link::-webkit-details-marker {
  display: none;
}

.header__link:hover {
  background: var(--c-surface);
}

.header__link[aria-current='page'],
.header__link.is-active {
  background: var(--c-surface);
  box-shadow: 0 6px 14px -10px rgba(var(--main-text-rgb), 0.5);
}

.header--nav-separate .header__link[aria-current='page'],
.header--nav-separate .header__link.is-active {
  border-color: var(--c-text);
}

.header__link .icon {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform var(--dur-2);
}

.header__dropdown {
  position: relative;
}

.header__dropdown[open] .header__link .icon {
  transform: rotate(180deg);
}

.header__submenu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -0.5rem;
  min-width: 14rem;
  padding: 0.5rem !important;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  animation: fade-in var(--dur-2) var(--ease-out);
}

.header__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: var(--fs-s);
  text-decoration: none;
}

.header__sublink:hover {
  background: var(--c-faint);
  color: var(--c-accent);
}

@media (min-width: 990px) {
  .header__burger {
    display: none;
  }

  .header__nav {
    display: block;
  }

  .header__cta {
    display: inline-flex;
  }

  .header__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .header--logo-left .header__nav {
    justify-self: center;
  }

  .header--logo-center .header__inner {
    grid-template-areas: 'nav logo icons';
  }

  .header--logo-center .header__nav {
    grid-area: nav;
    justify-self: start;
  }

  .header--logo-center .header__logo {
    grid-area: logo;
    justify-self: center;
  }

  .header--logo-center .header__icons {
    grid-area: icons;
  }

  .header__logo-image {
    width: var(--logo-width);
  }
}

/* En-tête posé sur un « Hero en scène » plein cadre placé en premier : il chevauche le haut de la scène (le hero
   garde sa place, § 9 b). Tant que la page n'a pas défilé, fond transparent ; les pilules et les boutons gardent
   leur verre clair (lisibles sur toute image). Texte du hero clair : nom de marque en blanc, logo pour fonds
   sombres s'il existe. */
.page-frame:has(> main > .shopify-section:first-child .hero-scene--full) .section-header:has(.header--can-overlay) {
  margin-bottom: calc(-1 * var(--header-height));
}

.page-frame:has(> main > .shopify-section:first-child .hero-scene--full) .header--can-overlay:not(.is-solid) {
  background-color: transparent;
  box-shadow: none;
}

.page-frame:has(> main > .shopify-section:first-child .hero-scene--full.hero-scene--light) .header--can-overlay:not(.is-solid) .header__wordmark {
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.page-frame:has(> main > .shopify-section:first-child .hero-scene--full.hero-scene--light) .header--can-overlay:not(.is-solid) .header__logo:has(.header__logo-image--inverse) .header__logo-image {
  display: none;
}

.page-frame:has(> main > .shopify-section:first-child .hero-scene--full.hero-scene--light) .header--can-overlay:not(.is-solid) .header__logo-image--inverse {
  display: block;
}

/* ---------- 8. Tiroirs (menu mobile, panier) ---------- */
.drawer {
  --drawer-pad: clamp(1.25rem, 4vw, 1.75rem);
  position: fixed;
  inset: 0 0 0 auto;
  width: min(28rem, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  flex-direction: column;
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  transition: transform 0.42s var(--ease-out);
}

.drawer[open] {
  display: flex;
}

.drawer.is-open {
  transform: none;
}

.drawer--left {
  inset: 0 auto 0 0;
  transform: translateX(-100%);
}

@media (min-width: 750px) {
  .drawer {
    border-radius: var(--radius-l) 0 0 var(--radius-l);
  }

  .drawer--left {
    border-radius: 0 var(--radius-l) var(--radius-l) 0;
  }
}

.drawer::backdrop {
  background: rgba(var(--main-text-rgb), 0.42);
  opacity: 0;
  transition: opacity 0.42s var(--ease-out);
}

.drawer.is-open::backdrop {
  opacity: 1;
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-height);
  padding: 0.5rem calc(var(--drawer-pad) - 10px) 0.5rem var(--drawer-pad);
  border-bottom: 1px solid var(--c-border);
}

.drawer__title {
  font-family: var(--font-heading-family);
  font-size: var(--fs-h4);
}

.drawer__brand {
  font-size: var(--fs-h4);
}

.drawer__count {
  font-family: var(--font-body-family);
  font-size: var(--fs-s);
  color: var(--c-muted);
}

.drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem var(--drawer-pad);
}

.drawer__footer {
  display: grid;
  gap: 1rem;
  padding: 1.25rem var(--drawer-pad) calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-border);
}

.menu-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font-heading-family);
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 1.85rem);
  line-height: 1.15;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}

.menu-drawer__link::-webkit-details-marker {
  display: none;
}

.menu-drawer__link .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--dur-2);
}

.menu-drawer__details[open] .menu-drawer__link .icon {
  transform: rotate(180deg);
}

.menu-drawer__sublist {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 0 1rem !important;
}

.menu-drawer__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-muted);
  text-decoration: none;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: -10px !important;
}

.social__link {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color var(--dur-2), color var(--dur-2);
}

.social__link:hover {
  background: var(--c-faint);
  color: var(--c-accent);
}

/* ---------- 9. Hero ---------- */
/* Hero clair et chaud : texte à gauche, produit détouré posé sur un cercle à droite (au milieu sur mobile).
   Mobile : note, titre, produit, bouton et prix, puis texte et coches. Le bouton reste dans le premier écran. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1rem, 0.4rem + 2.6vw, 3rem) clamp(2.5rem, 1.6rem + 4vw, 5rem);
}

/* Bandeau de réassurance qui chevauche le bas du hero : le hero garde la place nécessaire. */
.section-hero:has(+ .section-promise-bar .promise-bar--overlap) .hero {
  padding-bottom: calc(clamp(2.5rem, 1.6rem + 4vw, 5rem) + 2.5rem);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'rating'
    'title'
    'visual'
    'buy'
    'text'
    'checks';
  align-items: start;
}

.hero__rating {
  grid-area: rating;
  margin-bottom: 0.25rem;
}

.hero__rating .product-rating__link {
  padding: 0.3rem 0.9rem 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.hero__title {
  grid-area: title;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* Mots soulignés d'un trait dessiné à la main (réglage : quelques mots entre astérisques, gardés sur une ligne). */
.hero__highlight {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}

.hero__highlight::after {
  content: '';
  position: absolute;
  right: -0.05em;
  bottom: -0.1em;
  left: -0.05em;
  z-index: -1;
  height: 0.28em;
  background: var(--shape-alt);
  -webkit-mask: var(--squiggle) center / 100% 100% no-repeat;
  mask: var(--squiggle) center / 100% 100% no-repeat;
}

/* Visuel : toutes les formes se placent par rapport au cercle, dont le diamètre suit la hauteur (--vis-h). */
.hero__visual {
  --vis-h: clamp(240px, 64vw, 340px);
  grid-area: visual;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  height: var(--vis-h);
  margin-top: 0.75rem;
}

.hero__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  height: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--shape);
  translate: -50% -50%;
}

.hero__blob {
  position: absolute;
  bottom: 3%;
  left: max(0px, calc(50% - var(--vis-h) * 0.5));
  z-index: -1;
  width: calc(var(--vis-h) * 0.36);
  aspect-ratio: 1.2;
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
  background: var(--shape-alt);
  opacity: 0.85;
}

.hero__dot {
  position: absolute;
  top: 6%;
  right: calc(50% - var(--vis-h) * 0.44);
  z-index: -1;
  width: calc(var(--vis-h) * 0.09);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sticker);
}

.hero__image {
  position: relative;
  width: auto;
  height: 100%;
  max-width: 88%;
  object-fit: contain;
  filter: drop-shadow(0 22px 22px rgba(var(--main-text-rgb), 0.22));
}

.hero__image--art {
  width: 70%;
  height: 90%;
  min-height: 0;
  border-radius: 50%;
  filter: none;
}

.hero__sticker {
  position: absolute;
  z-index: 1;
  width: 4.9rem;
}

.hero__sticker .sticker__big {
  font-size: 1.2rem;
}

.hero__sticker .sticker__small {
  font-size: var(--fs-2xs);
}

.hero__sticker--1 {
  top: 4%;
  left: max(0px, calc(50% - var(--vis-h) * 0.62));
}

.hero__sticker--2 {
  right: max(0px, calc(50% - var(--vis-h) * 0.62));
  bottom: 8%;
}

.hero__sticker--3 {
  top: 2%;
  right: max(0px, calc(50% - var(--vis-h) * 0.5));
}

.hero__tag {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  translate: -50% 0;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-xs);
  font-weight: var(--font-body-weight-bold);
  white-space: nowrap;
}

.hero__buy {
  grid-area: buy;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
}

.hero__cta {
  flex: 1 1 100%;
}

.hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem 0.6rem;
  width: 100%;
}

.hero__amount {
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: var(--font-heading-weight-bold);
  line-height: 1.1;
}

.hero__amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.5rem;
}

.hero__reference {
  flex-basis: 100%;
  justify-content: center;
}

.hero__shipping {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.hero__text {
  grid-area: text;
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: var(--fs-l);
  color: var(--c-muted);
}

.hero__checks {
  grid-area: checks;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1rem;
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-medium);
}

.hero__checks li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hero__checks .icon {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0.15rem;
  border-radius: 50%;
  background: var(--c-pastille-alt);
  color: var(--success);
  stroke-width: 3;
}

@media (min-width: 600px) {
  .hero__cta {
    flex: 0 0 auto;
  }

  .hero__price {
    display: grid;
    gap: 0.1rem;
    width: auto;
    justify-content: start;
  }

  .hero__amounts,
  .hero__reference {
    justify-content: start;
  }
}

@media (min-width: 750px) {
  .hero__visual {
    --vis-h: clamp(340px, 44vw, 420px);
  }

  .hero__sticker {
    width: 6rem;
  }

  .hero__sticker .sticker__big {
    font-size: 1.5rem;
  }

  .hero__sticker .sticker__small {
    font-size: 0.875rem;
  }
}

@media (min-width: 990px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    grid-template-rows: 1fr repeat(5, auto) 1fr;
    grid-template-areas:
      '. visual'
      'rating visual'
      'title visual'
      'text visual'
      'buy visual'
      'checks visual'
      '. visual';
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }

  .hero__rating {
    margin-bottom: 0.75rem;
  }

  .hero__visual {
    --vis-h: clamp(460px, 40vw, 560px);
    align-self: center;
    margin-top: 0;
  }

  .hero__circle {
    height: 90%;
  }

  .hero__image {
    height: 96%;
  }

  .hero__text {
    margin-top: 1.25rem;
  }

  .hero__buy {
    margin-top: 1.75rem;
  }

  .hero__checks {
    margin-top: 1.5rem;
  }

  .hero__sticker {
    width: 6.75rem;
  }

  .hero__sticker .sticker__big {
    font-size: 1.7rem;
  }

  .hero__tag {
    bottom: 4%;
  }
}

/* ---------- 9 b. Hero en scène ---------- */
/* Scène plein cadre (image avec voile, studio, aplat) ou panneau coloré derrière le produit, produit détouré
   géant avec ombre douce, filigrane géant, titre d'affichage, légendes et carte vitrées, pastille ronde.
   Cadrage « panneau » : posé sur la surface, marges du cadre ; « plein cadre » : l'en-tête est posé dessus.
   Ordinateur : texte d'un côté, produit de l'autre (ou texte centré au-dessus du produit). Mobile : texte, bouton,
   produit, légendes en ligne, carte. Lisibilité : voile côté texte sur une image ; légendes, carte, preuve
   sociale et pilules en verre clair presque opaque. */
.hero-scene {
  --hs-color: var(--shape);
  --hs-fg: var(--c-text);
  --hs-fg-muted: var(--c-muted);
  --hs-accent: var(--c-accent);
  --hs-watermark: var(--shape-alt);
  --hs-pad: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --hs-product-h: clamp(17rem, 60vw, 26rem);
  --hs-veil-dir: to bottom;
  --hs-veil: var(--main-text-rgb);
  position: relative;
}

.hero-scene--inset {
  padding: 0 var(--panel-inset);
}

/* Ton clair (image, studio ou aplat foncés) : texte blanc, mots en couleur « Badges », voile foncé. */
.hero-scene--light {
  --hs-fg: #FFFFFF;
  --hs-fg-muted: rgba(255, 255, 255, 0.9);
  --hs-accent: var(--sticker);
  --hs-watermark: rgba(255, 255, 255, 0.1);
  --hs-veil: var(--main-text-rgb);
}

/* Ton foncé sur un aplat clair : texte de la surface ; voile clair. */
.hero-scene--dark {
  --hs-fg: var(--main-text);
  --hs-fg-muted: color-mix(in srgb, var(--main-text) 82%, transparent);
  --hs-accent: var(--main-accent);
  --hs-veil: var(--main-bg-rgb);
}

.hero-scene--dark:not(.hero-scene--bg-panel) {
  --hs-watermark: color-mix(in srgb, var(--main-text) 9%, transparent);
}

.hero-scene__frame {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: clip;
  border-radius: var(--radius-panel);
  color: var(--hs-fg);
}

.hero-scene--bg-color .hero-scene__frame {
  background: var(--hs-color);
}

.hero-scene--full {
  padding: 0;
}

.hero-scene--full .hero-scene__frame {
  border-radius: 0;
  padding-top: var(--header-height);
}

.hero-scene--h-screen .hero-scene__frame {
  min-height: clamp(34rem, calc(100svh - var(--header-height) - 3.5rem), 56rem);
}

.hero-scene--full.hero-scene--h-screen .hero-scene__frame {
  min-height: clamp(36rem, calc(100svh - 2.75rem), 60rem);
}

/* Fonds (snippet scene-backdrop) */
.scene-backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

.scene-backdrop__picture,
.scene-backdrop__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-backdrop__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--hs-veil-dir),
    rgba(var(--hs-veil), var(--hs-overlay, 0.45)) 0%,
    rgba(var(--hs-veil), calc(var(--hs-overlay, 0.45) * 0.55)) 42%,
    rgba(var(--hs-veil), 0) 78%
  );
}

.scene-backdrop--studio {
  background:
    radial-gradient(120% 95% at 50% 26%, color-mix(in srgb, var(--hs-color) 82%, #FFFFFF) 0%, var(--hs-color) 46%, color-mix(in srgb, var(--hs-color) 72%, #000000) 100%);
}

/* Texte clair sur un studio foncé : halo plus discret, pour que le texte blanc et les mots en couleur gardent leur
   contraste au plus clair de la lumière. */
.hero-scene--light .scene-backdrop--studio,
.vtiles--light .scene-backdrop--studio {
  background:
    radial-gradient(120% 95% at 50% 26%, color-mix(in srgb, var(--hs-color) 91%, #FFFFFF) 0%, var(--hs-color) 46%, color-mix(in srgb, var(--hs-color) 72%, #000000) 100%);
}

.hero-scene--light .scene-backdrop__light,
.vtiles--light .scene-backdrop__light {
  opacity: 0.45;
}

.scene-backdrop__light {
  position: absolute;
  top: -18%;
  left: 50%;
  width: min(72%, 60rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  translate: -50% 0;
}

/* Sol du studio : un plateau elliptique plus clair sous le produit (socle), comme une photo de studio. */
.scene-backdrop__floor {
  position: absolute;
  bottom: -30%;
  left: 50%;
  width: 150%;
  height: 58%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--hs-color) 78%, #FFFFFF) 0%, color-mix(in srgb, var(--hs-color) 88%, #000000) 72%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.9;
  translate: -50% 0;
}

.scene-backdrop--color {
  background: var(--hs-color);
}

/* Textes ajustés à la largeur par le script (filigrane, grand nom du pied de page) : masqués jusqu'au premier
   ajustement (aucun décalage visible) ; sans script, affichés à leur taille de départ. */
.js .hero-scene__watermark:not(.is-fitted),
.js .footer__wordmark:not(.is-fitted) {
  visibility: hidden;
}

/* Filigrane géant (décoratif) : taille ajustée à la largeur par le script (data-fit-text). */
.hero-scene__watermark {
  position: absolute;
  top: 34%;
  right: 0;
  left: 0;
  z-index: -2;
  margin: 0;
  padding-inline: var(--gutter);
  overflow: hidden;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight-bold);
  font-size: min(24vw, 22rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: var(--heading-case);
  white-space: nowrap;
  color: var(--hs-watermark);
  translate: 0 -50%;
  user-select: none;
  pointer-events: none;
}

.hero-scene__watermark span {
  display: inline-block;
}

.hero-scene__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'content'
    'visual'
    'callouts'
    'card';
  align-items: center;
  gap: 1.5rem;
  padding-block: var(--hs-pad);
}

.hero-scene__content {
  grid-area: content;
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 1rem;
  min-width: 0;
  max-width: 40rem;
}

.hero-scene__title {
  max-width: 100%;
  font-size: calc(var(--hs-title) * var(--heading-scale, 1) * var(--case-scale, 1));
  font-weight: var(--font-heading-weight);
  line-height: 0.98;
  overflow-wrap: break-word;
  color: var(--hs-fg);
}

.hero-scene__title--m {
  --hs-title: clamp(2.1rem, 1.1rem + 3.3vw, 4rem);
}

.hero-scene__title--l {
  --hs-title: clamp(2.4rem, 1.15rem + 4.4vw, 5.1rem);
}

.hero-scene__title--xl {
  --hs-title: clamp(2.8rem, 1rem + 6.6vw, 7.25rem);
}

.hero-scene--light .hero-scene__title,
.hero-scene--light .hero-scene__text {
  text-shadow: 0 1px 24px rgba(var(--main-text-rgb), 0.28);
}

.hero-scene__accent {
  color: var(--hs-accent);
}

.hero-scene__text {
  max-width: 32rem;
  font-size: var(--fs-l);
  line-height: 1.55;
  color: var(--hs-fg-muted);
}

.hero-scene__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 0.5rem;
}

.hero-scene__cta {
  min-width: 11rem;
}

.hero-scene__secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  font-weight: var(--font-body-weight-bold);
  color: var(--hs-fg);
  text-decoration: none;
}

.hero-scene__secondary > span:first-child {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.3em;
}

.hero-scene__secondary:hover > span:first-child {
  text-decoration-color: currentColor;
}

.hero-scene__secondary-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background-color var(--dur-2), color var(--dur-2);
}

.hero-scene__secondary-icon .icon {
  width: 0.9rem;
  height: 0.9rem;
}

.hero-scene__secondary:hover .hero-scene__secondary-icon {
  background: var(--hs-fg);
  color: var(--hs-color);
}

.hero-scene--bg-scene .hero-scene__secondary:hover .hero-scene__secondary-icon,
.hero-scene--bg-panel .hero-scene__secondary:hover .hero-scene__secondary-icon {
  color: var(--main-bg);
}

/* Preuve sociale : pile d'avatars et note réelle des avis, dans une pilule vitrée (lisible sur toute image). */
.hero-scene__proof {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  max-width: 100%;
  min-height: 3.25rem;
  padding: 0.35rem 1rem 0.35rem 0.4rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--main-text);
  box-shadow: 0 14px 30px -24px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.hero-scene__proof:not(:has(.avatar-stack)) {
  padding-left: 1rem;
}

/* Sans avis de la boutique, la note est masquée : la pilule ne reste que s'il y a des avatars. */
body:not(:has([data-reviews-summary][data-count])) .hero-scene__proof:not(:has(.avatar-stack, .hero-scene__proof-text)) {
  display: none;
}

.hero-scene__proof .product-rating__link {
  color: var(--main-text);
}

.hero-scene__proof-text {
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
}

.avatar-stack {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.avatar-stack__item {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  overflow: hidden;
  border: 2.5px solid var(--main-bg);
  border-radius: 50%;
  background: var(--shape-alt);
  color: var(--main-text);
}

.avatar-stack__item + .avatar-stack__item {
  margin-left: -0.8rem;
}

.avatar-stack__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-stack__initials {
  font-size: var(--fs-2xs);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: 0.02em;
}

/* Produit détouré : ombre portée douce ; taille réglable. */
.hero-scene__visual {
  grid-area: visual;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: end center;
  min-width: 0;
  min-height: calc(var(--hs-product-h) * var(--hs-product-scale, 1));
}

.hero-scene__product {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(var(--hs-product-h) * var(--hs-product-scale, 1));
  max-width: 100%;
}

.hero-scene__image {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 34px rgba(0, 0, 0, 0.3)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

/* Repli sans détourage : la photo du produit, arrondie, en carte (hauteur réduite pour laisser respirer la scène). */
.hero-scene__image--photo {
  height: 88%;
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
  filter: none;
}

.hero-scene__image--art {
  width: min(22rem, 80vw);
  min-height: 0;
  border-radius: var(--radius-xl);
  filter: none;
}

/* Panneau coloré derrière le produit (sur la surface), comme une carte géante. Le filigrane y est inscrit, d'un
   ton plus clair que le panneau, derrière le produit. */
.hero-scene__panel {
  position: absolute;
  inset: 16% 0 0;
  z-index: -1;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--hs-color);
}

.hero-scene__watermark--panel {
  top: 46%;
  z-index: auto;
  display: block;
  padding-inline: 5%;
  color: color-mix(in srgb, var(--hs-color) 68%, #FFFFFF);
}

/* Pastille ronde « Découvrir » : lien vers le bloc d'achat, couleur d'accent, texte blanc ou foncé calculé. */
.hero-scene__sticker {
  position: absolute;
  bottom: 10%;
  left: 2%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(6.25rem, 5rem + 4vw, 8.75rem);
  aspect-ratio: 1;
  padding: 0.9rem;
  border-radius: 50%;
  background: var(--main-accent);
  color: var(--main-on-accent);
  box-shadow: 0 22px 40px -20px rgba(var(--main-text-rgb), 0.7);
  font-size: clamp(0.8125rem, 0.72rem + 0.35vw, 0.9375rem);
  font-weight: var(--font-body-weight-bold);
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  rotate: -9deg;
  transition: rotate var(--dur-3) var(--ease-bounce), scale var(--dur-2) var(--ease-out);
}

.hero-scene__sticker--right {
  right: 2%;
  left: auto;
  rotate: 8deg;
}

.hero-scene__sticker:hover {
  rotate: 0deg;
  scale: 1.04;
}

/* Légendes vitrées : en ligne sous le produit sur mobile, flottantes (position en %) sur ordinateur. */
.hero-scene__callouts {
  grid-area: callouts;
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.callout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  padding: 0.55rem 0.9rem 0.55rem 0.65rem;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  color: var(--main-text);
  box-shadow: 0 18px 36px -26px rgba(0, 0, 0, 0.7);
  font-size: var(--fs-xs);
  font-weight: var(--font-body-weight-medium);
  line-height: 1.3;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.callout__icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shape) 30%, #FFFFFF);
  color: var(--main-accent);
}

.callout__icon .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.callout__dot {
  display: none;
}

/* Carte produit vitrée : miniature, nom, sous-titre, prix (même règle que la fiche) et bouton rond. */
.hero-scene__card {
  grid-area: card;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  width: min(100%, 26rem);
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: var(--glass-bg-strong);
  color: var(--main-text);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.75);
  text-decoration: none;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.hero-scene__card:hover {
  transform: translateY(-3px);
}

.hero-scene__card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 20px;
  background: color-mix(in srgb, var(--shape) 18%, #FFFFFF);
}

.hero-scene__card-image {
  width: auto;
  height: 86%;
  object-fit: contain;
}

.hero-scene__card-body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.hero-scene__card-title {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: calc(1.05rem * var(--case-scale, 1));
  line-height: 1.1;
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-tracking);
}

.hero-scene__card-subtitle {
  font-size: var(--fs-2xs);
  color: var(--c-muted);
}

.hero-scene__card-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

.hero-scene__card .hero__price {
  display: grid;
  gap: 0;
}

.hero-scene__card .hero__amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.45rem;
}

.hero-scene__card .hero__amount {
  font-size: 1.2rem;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-bold);
}

.hero-scene__card .hero__reference {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
  font-size: var(--fs-2xs);
}

.hero-scene__card .hero__shipping {
  font-size: var(--fs-2xs);
  color: var(--c-muted);
}

.hero-scene__card-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--main-text);
  color: var(--main-bg);
  transition: transform var(--dur-2) var(--ease-out);
}

.hero-scene__card:hover .hero-scene__card-button {
  transform: rotate(-8deg) scale(1.06);
}

/* Mot géant du bas (séquence au défilement, ou immobile) : décoratif. */
.hero-scene__reveal {
  position: absolute;
  right: 0;
  bottom: clamp(0.5rem, 3vw, 2.5rem);
  left: 0;
  z-index: 2;
  margin: 0;
  padding-inline: var(--gutter);
  overflow: hidden;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight-bold);
  font-size: calc(clamp(3rem, 0.8rem + 9vw, 10.5rem) * var(--case-scale, 1));
  line-height: 1;
  text-align: center;
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-tracking);
  white-space: nowrap;
  color: var(--hs-fg);
  pointer-events: none;
  user-select: none;
}

.hero-scene__reveal-char,
.hero-scene__reveal-space {
  display: inline-block;
  white-space: pre;
}

.hero-scene:has(.hero-scene__reveal) .hero-scene__grid {
  padding-bottom: calc(var(--hs-pad) + clamp(2.5rem, 0.6rem + 8vw, 9rem));
}

/* Bandeau de réassurance qui chevauche le bas du hero : la scène garde la place nécessaire. */
.section-hero-scene:has(+ .section-promise-bar .promise-bar--overlap) .hero-scene__grid {
  padding-bottom: calc(var(--hs-pad) + 3rem);
}

@media (max-width: 989px) {
  /* Texte en haut : voile du haut vers le bas. */
  .hero-scene--bg-scene {
    --hs-veil-dir: to bottom;
  }

  .hero-scene--content-center .hero-scene__content {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .hero-scene__actions {
    width: 100%;
  }

  .hero-scene__cta {
    flex: 1 1 12rem;
  }

  .hero-scene--has-card .hero-scene__card {
    justify-self: stretch;
    width: 100%;
  }

  .hero-scene__panel {
    inset: 12% 4% 0;
  }
}

@media (min-width: 750px) {
  .hero-scene {
    --hs-product-h: clamp(24rem, 52vw, 34rem);
  }
}

@media (min-width: 990px) {
  .hero-scene {
    --hs-product-h: clamp(26rem, 40vw, 40rem);
  }

  .hero-scene__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'content visual';
    column-gap: clamp(2rem, 4vw, 5rem);
    min-height: 100%;
  }

  .hero-scene--content-right .hero-scene__grid {
    grid-template-areas: 'visual content';
  }

  .hero-scene--content-left {
    --hs-veil-dir: to right;
  }

  .hero-scene--content-right {
    --hs-veil-dir: to left;
  }

  .hero-scene--content-center {
    --hs-veil-dir: to bottom;
  }

  .hero-scene--content-center .hero-scene__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      'content'
      'visual';
    justify-items: center;
    align-items: start;
    row-gap: 1.25rem;
  }

  .hero-scene--content-center .hero-scene__content {
    justify-items: center;
    max-width: 52rem;
    text-align: center;
  }

  /* Texte centré au-dessus du produit : le produit prend la hauteur qui reste sous le bouton (estimée sur la
     hauteur de l'écran), sans passer sous le texte. */
  .hero-scene--content-center {
    --hs-product-h: clamp(15rem, calc(100svh - 36rem), 30rem);
  }

  .hero-scene__visual {
    align-self: stretch;
  }

  .hero-scene--content-center .hero-scene__visual {
    align-self: end;
  }

  .hero-scene__panel {
    inset: 7% 2% 2%;
  }

  /* Légendes et carte : posées sur la scène (position en % de la scène). */
  .hero-scene__callouts {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .callout {
    position: absolute;
    top: var(--y);
    left: var(--x);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    width: 11.5rem;
    padding: 0.95rem 1rem 1rem;
    border-radius: 20px;
    font-size: var(--fs-s);
    pointer-events: auto;
  }

  /* Point blanc de liaison, relié à la carte par un filet. */
  .callout__dot {
    position: absolute;
    top: 50%;
    display: block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.28), 0 2px 8px rgba(0, 0, 0, 0.3);
    translate: 0 -50%;
  }

  .callout--dot-right .callout__dot {
    left: calc(100% + 2.5rem);
  }

  .callout--dot-left .callout__dot {
    right: calc(100% + 2.5rem);
  }

  .callout--dot-right::after,
  .callout--dot-left::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 2.5rem;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.75);
  }

  .callout--dot-right::after {
    left: 100%;
  }

  .callout--dot-left::after {
    right: 100%;
  }

  .hero-scene__card {
    position: absolute;
    right: var(--hs-pad);
    bottom: var(--hs-pad);
    width: min(25rem, 36%);
  }

  .hero-scene--content-right.hero-scene--has-card .hero-scene__content {
    padding-bottom: 8.5rem;
  }

  .section-hero-scene:has(+ .section-promise-bar .promise-bar--overlap) .hero-scene__card {
    bottom: calc(var(--hs-pad) + 3rem);
  }
}

/* Séquence au défilement (réglage, désactivée par défaut) : la scène reste épinglée pendant que le produit
   descend et que le mot géant monte, lettre par lettre. Seulement si le navigateur sait lier une animation au
   défilement (animation-timeline) et si le visiteur n'a pas demandé à réduire les animations ; sinon, rien
   n'est épinglé et le mot reste affiché, immobile. Uniquement transform et opacity (composés). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-scene--scroll {
      --hs-frame-h: calc(100svh - var(--sticky-offset) - var(--frame-gap) - var(--panel-inset));
      height: calc(var(--hs-frame-h) + var(--hs-scroll-length, 60vh));
      view-timeline: --hero-scene block;
    }

    .hero-scene--scroll.hero-scene--full {
      --hs-frame-h: calc(100svh - var(--frame-gap));
    }

    .hero-scene--scroll .hero-scene__frame {
      position: sticky;
      top: var(--sticky-offset);
      height: var(--hs-frame-h);
      min-height: 0;
    }

    .hero-scene--scroll.hero-scene--full .hero-scene__frame {
      top: 0;
    }

    /* Au repos, le mot géant est encore caché : le produit occupe le bas de la scène ; le mot monte ensuite
       devant lui pendant qu'il descend. */
    .hero-scene.hero-scene--scroll:has(.hero-scene__reveal) .hero-scene__grid {
      padding-bottom: var(--hs-pad);
    }

    .hero-scene--scroll .hero-scene__product {
      animation: hero-scene-descend linear both;
      animation-timeline: --hero-scene;
      animation-range: contain 0% contain 100%;
    }

    .hero-scene--scroll .hero-scene__reveal-char {
      animation: hero-scene-rise linear both;
      animation-timeline: --hero-scene;
      animation-range: contain calc(8% + var(--i, 0) * 3%) contain calc(52% + var(--i, 0) * 3%);
    }
  }
}

@keyframes hero-scene-descend {
  from {
    transform: translateY(-7%) scale(1.04);
  }

  to {
    transform: translateY(12%) scale(0.94);
  }
}

@keyframes hero-scene-rise {
  from {
    opacity: 0;
    transform: translateY(105%);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Note affichée près des titres (hero, bloc d'achat). */
.product-rating {
  display: flex;
  min-height: 1.5rem;
}

.product-rating.is-pending {
  visibility: hidden;
}

/* La place de la note est réservée pendant le chargement (la section Avis, plus bas dans la page, n'est pas
   encore lue au premier affichage : masquer la note à ce moment décalerait le bloc d'achat quand elle apparaît).
   Aucun avis de la boutique sur la page : le script retire la note (attribut hidden). */

/* Texte très agrandi sur petit écran : étoiles, note et nombre d'avis passent à la ligne au lieu de déborder. */
.product-rating__link,
a.product-rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.55rem;
  max-width: 100%;
  min-height: 44px;
  font-size: var(--fs-s);
  text-decoration: none;
}

.product-rating__text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35rem;
  min-width: 0;
}

.product-rating__count {
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 10. Bloc d'achat ---------- */
/* Galerie arrondie à gauche, carte blanche arrondie à droite (en dessous sur mobile), sur le fond crème.
   Carte courte : titre, note, promesse, choix, total et bouton tiennent dans le premier écran d'un ordinateur
   (1280 × 720 compris) ; l'offre datée, le stock, la microcopie et les points forts viennent sous le bouton.
   L'avis mis en avant (.product__aside) est hors de la carte : en bas de la colonne de gauche sur ordinateur,
   sous la galerie collante ; après la carte sur mobile. */
.product {
  display: grid;
  gap: 1.25rem;
}

.product__media {
  min-width: 0;
}

.product__info {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-2);
}

.product__aside {
  min-width: 0;
}

@media (max-width: 989px) {
  .product-section {
    padding-top: 1rem;
  }

  .product__info,
  .product__aside {
    margin-inline: calc(-0.5 * var(--gutter));
  }
}

/* Mobile : carte resserrée (titre plus petit, écarts réduits) ; avec le bandeau de photos, les coloris en
   miniatures et les lots en tuiles, le bouton principal tient dans le premier écran (390 × 844). */
@media (max-width: 749px) {
  .product-section {
    padding-top: 0.75rem;
  }

  .product {
    gap: 0.75rem;
  }

  .product__info {
    gap: 0.6rem;
    padding: 0.9rem 1rem 1.25rem;
  }

  .product__info .product__title {
    font-size: calc(clamp(1.4rem, 1.05rem + 1.4vw, 1.8rem) * var(--heading-scale, 1));
    line-height: 1.08;
  }

  .product__info .product__title + .product-rating,
  .product__info .product__title + product-rating {
    margin-top: -0.3rem;
  }

  .product__info .variant-picker__legend {
    margin-bottom: 0.45rem;
  }
}

/* Tablette (750 à 989 px) : galerie centrée et limitée en largeur (même format, sans recadrage), pour que le
   titre et le prix ne soient pas repoussés sous un écran entier de photo. */
@media (min-width: 750px) and (max-width: 989px) {
  .product__media {
    width: min(100%, 34rem);
    margin-inline: auto;
  }
}

/* Ordinateur : deux colonnes égales. La colonne de gauche prend la hauteur de la carte : la galerie y reste
   collante sous l'en-tête, puis l'avis mis en avant la termine, aligné sur le bas de la carte (la colonne n'est
   jamais vide pendant le défilement). */
@media (min-width: 990px) {
  .product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 1.5rem;
    align-items: start;
  }

  .product__media {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
  }

  .product__info {
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: 0.75rem;
    padding: 1.25rem clamp(1.5rem, 0.6rem + 1.4vw, 2.25rem) 1.75rem;
  }

  /* Variantes sur une ligne : nom de l'option à gauche des pastilles (valeur choisie lue par les lecteurs
     d'écran, déjà visible sur la pastille cochée). Plus de pastilles : elles passent à la ligne, à droite du nom. */
  .product__info .variant-picker__option {
    display: flow-root;
  }

  .product__info .variant-picker__legend {
    float: left;
    align-items: center;
    min-height: 46px;
    margin: 0 1rem 0 0;
  }

  .product__info .variant-picker__selected {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .product__aside {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }

  .product--sticky-media .product__media > .gallery {
    position: sticky;
    top: calc(var(--sticky-offset) + 1.5rem);
  }
}

.product__title {
  font-size: calc(clamp(1.9rem, 1.45rem + 1.6vw, 2.9rem) * var(--heading-scale, 1));
  line-height: 1.06;
  letter-spacing: var(--ls-display);
}

/* Titre plus sobre sur ordinateur : deux lignes au plus pour un titre-bénéfice court. */
@media (min-width: 990px) {
  .product__title {
    font-size: calc(clamp(1.75rem, 0.9rem + 1.3vw, 2.35rem) * var(--heading-scale, 1));
    line-height: 1.08;
  }
}

.product__title a {
  text-decoration: none;
}

.product__title + .product-rating,
.product__title + product-rating {
  margin-top: -0.6rem;
}

/* Note sous le titre : ligne basse, cible de toucher de 44 px conservée par un pseudo-élément. */
.product__info .product-rating {
  min-height: 1.5rem;
}

.product__info .product__title + .product-rating,
.product__info .product__title + product-rating {
  margin-top: -0.45rem;
}

.product__info .product-rating__link,
.product__info a.product-rating {
  position: relative;
  min-height: 1.5rem;
}

.product__info .product-rating__link::after,
.product__info a.product-rating::after {
  content: '';
  position: absolute;
  inset: calc(50% - 22px) 0;
}

.product__text {
  font-size: var(--fs-base);
  color: var(--c-muted);
}

.text--small {
  font-size: var(--fs-s);
}

.text--muted {
  color: var(--c-muted);
  font-size: var(--fs-s);
}

.product-highlights {
  display: grid;
  gap: 0.55rem;
}

.product-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.product-highlights .icon {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.1rem;
  padding: 0.2rem;
  border-radius: 50%;
  background: var(--c-pastille-alt);
  color: var(--success);
  stroke-width: 3;
}

/* Prix */
.price {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.price__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
}

.price__current {
  font-weight: var(--font-body-weight-bold);
  font-variant-numeric: tabular-nums;
}

.price--large .price__current {
  font-family: var(--font-heading-family);
  font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem);
  font-weight: var(--font-heading-weight-bold);
  line-height: 1.05;
}

.price__saving {
  font-size: var(--fs-s);
  color: var(--success);
  font-weight: var(--font-body-weight-bold);
}

.price__tag {
  padding: 0.25em 0.7em;
  border: 2px solid var(--c-border-strong);
  border-radius: 999px;
  font-size: var(--fs-xs);
}

.price__reference {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Libellé du prix barré (« Prix en boutique »…) : même ligne et même taille que le prix barré. */
.price__reference-label {
  font-weight: var(--font-body-weight-medium);
}

.price__compare {
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
}

.price__unit,
.price__shipping {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.product__price .price__shipping {
  margin-top: 0.1rem;
}

/* Avec des lots, chaque carte porte déjà son total, son badge et son prix barré (même règle, snippet
   price-reference) : le bloc prix rappelle seulement le total du lot choisi, juste au-dessus du bouton, sur une
   ligne avec la mention TTC et la livraison (snippet offer-total). */
.offer-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  font-size: var(--fs-s);
  line-height: 1.45;
}

.offer-total__amount {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35rem;
}

.offer-total__value {
  font-variant-numeric: tabular-nums;
}

.offer-total .price__shipping {
  font-size: var(--fs-s);
}

.offer-total .price__shipping::before {
  content: '·';
  margin-right: 0.5rem;
  color: var(--c-muted);
}

/* Avis mis en avant : un avis réel, avec son origine, dans une carte blanche hors de la carte d'achat. */
.featured-review {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.featured-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  min-width: 0;
}

.featured-review__text {
  margin: 0;
  font-size: var(--fs-s);
  line-height: 1.55;
}

.featured-review__text p::before {
  content: '« ';
}

.featured-review__text p::after {
  content: ' »';
}

.featured-review__author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
}

.featured-review__avatar {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--shape);
  color: var(--on-shape);
  font-size: var(--fs-2xs);
  font-weight: var(--font-body-weight-bold);
}

.featured-review .review-origin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.6rem;
}

.featured-review .review-origin__label--imported {
  padding: 0.25rem 0.5rem;
}

/* Compte à rebours */
countdown-timer:not(:defined),
countdown-timer[data-end=''] {
  visibility: hidden;
}

.countdown {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
}

.countdown__value {
  font-weight: var(--font-body-weight-bold);
}

.countdown__label {
  font-size: max(0.9em, var(--fs-2xs));
}

/* Compte à rebours calme : jours et heures ; minutes le dernier jour ; secondes la dernière heure. */
.countdown--calm:not(.is-last-day) [data-unit='minutes'],
.countdown--calm:not(.is-last-hour) [data-unit='seconds'] {
  display: none;
}

.countdown--boxed {
  gap: 0.5rem;
}

.countdown--boxed .countdown__unit {
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 4.4rem;
  padding: 0.75rem 0.8rem 0.65rem;
  border-radius: var(--radius-m);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.countdown--boxed .countdown__value {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1;
}

.countdown--boxed .countdown__label {
  font-size: var(--fs-2xs);
  color: var(--c-muted);
}

/* Une seule ligne d'offre, calme et discrète (sous le bouton, alignée sur la microcopie) : texte, date de fin
   et prix après l'offre, puis le temps restant. */
.offer-timer {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-s);
}

.offer-timer .icon {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--c-accent);
}

.offer-timer__body {
  display: grid;
  gap: 0.05rem;
}

.offer-timer__text {
  font-weight: var(--font-body-weight-medium);
}

.offer-timer__time {
  color: var(--c-muted);
}

.offer-timer__time .countdown {
  margin-left: 0.25rem;
  color: var(--c-text);
}

/* Variantes */
.variant-picker {
  display: grid;
  gap: 1.1rem;
}

.variant-picker__option {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.variant-picker__legend {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  padding: 0;
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
}

.variant-picker__selected {
  color: var(--c-muted);
  font-weight: var(--font-body-weight);
}

.variant-picker__values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 46px;
  padding: 0.45rem 1.1rem 0.45rem 0.8rem;
  border: 2px solid var(--c-control);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-medium);
  cursor: pointer;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
}

.pill:hover {
  border-color: var(--c-accent);
}

.pill__input:checked + .pill {
  border-color: var(--c-accent);
  background: var(--c-faint);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}

.pill__input:focus-visible + .pill {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.pill.is-unavailable {
  color: var(--c-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--c-text-rgb), 0.5);
}

.pill__swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(var(--c-text-rgb), 0.22);
}

/* Puces avec miniature de la variante (réglage « Présentation » du bloc Variantes), comme sur les places de
   marché : image carrée arrondie à gauche, nom à droite. */
.pill--thumb {
  gap: 0.55rem;
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  border-radius: 14px;
}

.pill__thumb {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-frame);
}

.pill__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Valeur épuisée en miniature : image atténuée et barrée d'un trait (en plus du nom barré). */
.pill--thumb .pill__thumb {
  position: relative;
}

.pill--thumb.is-unavailable .pill__thumb-image {
  opacity: 0.5;
}

.pill--thumb.is-unavailable .pill__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(var(--c-text-rgb), 0.7) 50%, transparent calc(50% + 1px));
}

/* Mobile : miniatures seules (le nom de la valeur choisie est écrit à côté du nom de l'option, les autres noms
   restent lus par les lecteurs d'écran), sur une ligne. */
@media (max-width: 749px) {
  .variant-picker--thumbnails .pill--thumb {
    padding: 0.2rem;
  }

  .variant-picker--thumbnails .pill--thumb .pill__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .variant-picker--thumbnails .pill__thumb {
    width: 2.6rem;
    height: 2.6rem;
  }
}

/* Offres de lots : cartes compactes, blanches, contour de 3:1 au moins ; l'offre choisie prend l'accent.
   Une ligne par lot : titre et badge à gauche ; prix barré, total et « -X % » à droite (sur une ligne dès que la
   liste mesure 26 rem). Les détails (sous-titre, prix à l'unité, « Économisez ») ne s'écrivent que sur le lot
   choisi, sur une seconde ligne discrète. */
.offers {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  container-type: inline-size;
}

.offers__legend {
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
}

.offers__list {
  display: grid;
  gap: 0.5rem;
}

.offer {
  position: relative;
}

.offer__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.offer__label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--c-control);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}

.offer__label:hover {
  border-color: var(--c-accent);
}

.offer--highlight .offer__label {
  background: color-mix(in srgb, var(--sticker) 16%, var(--c-surface));
}

.offer__input:checked + .offer__label {
  border-color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface));
  box-shadow: inset 0 0 0 1px var(--c-accent);
}

.offer__input:focus-visible + .offer__label {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

/* Lot au-delà du stock réel : contour en pointillés, mention « Stock insuffisant pour ce lot », non sélectionnable.
   Les textes gardent leur couleur (contraste inchangé). */
.offer__input:disabled + .offer__label {
  border-style: dashed;
  cursor: not-allowed;
}

.offer__input:disabled + .offer__label:hover {
  border-color: var(--c-control);
}

.offer__stock {
  flex-basis: 100%;
  font-size: var(--fs-2xs);
  font-weight: var(--font-body-weight-bold);
}

.offer__radio {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--c-control);
  border-radius: 50%;
  background: var(--c-surface);
}

.offer__radio::after {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--c-accent);
  transform: scale(0);
  transition: transform var(--dur-2) var(--ease-bounce);
}

.offer__input:checked + .offer__label .offer__radio {
  border-color: var(--c-accent);
}

.offer__input:checked + .offer__label .offer__radio::after {
  transform: scale(1);
}

.offer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}

.offer__title {
  font-weight: var(--font-body-weight-bold);
}

/* Badge dans la carte (jamais à cheval sur le bord) : il ne touche pas la carte voisine. */
.offer__badge {
  max-width: 100%;
  padding: 0.2em 0.65em;
  /* Pilule sur une ligne, rectangle arrondi (jamais une ellipse) s'il passe sur plusieurs lignes. */
  border-radius: 0.85em;
  background: var(--sticker);
  color: var(--main-text);
  font-size: var(--fs-2xs);
  font-weight: var(--font-body-weight-bold);
  line-height: 1.35;
}

.offer__subtitle {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.offer__price {
  display: grid;
  justify-items: end;
  gap: 0;
  text-align: right;
}

.offer__amounts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.15rem 0.4rem;
}

.offer__amounts .price__badge {
  padding: 0.15em 0.55em;
}

.offer__total {
  font-weight: var(--font-body-weight-bold);
  font-size: var(--fs-l);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.offer__reference,
.offer__meta {
  font-size: var(--fs-2xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.offer__reference {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 0.3rem;
}

/* Petit écran : la colonne des prix garde sa largeur ; un libellé long passe à la ligne, juste au-dessus du
   prix barré, et le badge du lot reste lisible dans sa carte. */
@media (max-width: 599px) {
  .offer__price {
    max-width: 10rem;
  }
}

/* Détails du lot choisi : ils ne décident pas de la largeur de la colonne des prix (le titre et le badge du lot
   gardent leur place), ils passent à la ligne dans cette colonne. */
.offer__meta {
  display: grid;
  justify-self: stretch;
  justify-items: end;
  contain: inline-size;
}

/* Badge « -X % » et « Économisez » du lot : même règle que le prix du bloc d'achat (snippet price-reference).
   Le badge et le prix barré restent sur chaque lot ; le sous-titre, le prix à l'unité et « Économisez » ne
   s'écrivent que sur le lot choisi (les autres lots tiennent sur une ligne). */
.offer__meta .price__saving {
  font-size: var(--fs-2xs);
}

.offer__input:not(:checked) + .offer__label .offer__subtitle,
.offer__input:not(:checked) + .offer__label .offer__meta {
  display: none;
}

/* Très petit écran (320 px, ou zoom à 400 %) : le prix passe sous le titre du lot, aligné à gauche, pour que
   « 2 unités » et la mention du lot tiennent sur une ligne. */
@media (max-width: 359px) {
  .offer__label {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .offer__price {
    grid-column: 2;
    justify-items: start;
    max-width: none;
    text-align: left;
  }

  .offer__amounts,
  .offer__reference {
    justify-content: flex-start;
  }

  .offer__meta {
    justify-items: start;
  }
}

/* Liste assez large (ordinateur, tablette, grand mobile) : prix barré, total et badge sur une ligne ; les
   détails du lot choisi dessous, à droite. */
@container (min-width: 26rem) {
  .offer__price {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    column-gap: 0.55rem;
    max-width: none;
  }

  .offer__reference {
    order: -1;
  }

  .offer__meta {
    flex-basis: 100%;
  }
}

/* Liste étroite (mobile de 360 à 599 px, colonne étroite d'un petit ordinateur) : les lots deviennent des tuiles
   côte à côte (trois par ligne, deux pour 2 ou 4 lots), comme les coloris en tuiles. Chaque tuile : titre (bouton
   radio dans le coin), total, badge « -X % », prix barré, puis le badge du lot. Le sous-titre et le détail du lot
   choisi (prix à l'unité, « Économisez ») ne s'y écrivent pas, faute de place : le total du lot choisi reste sous
   la liste. Plus étroit encore (320 px) : retour aux lignes. */
@container (min-width: 18rem) and (max-width: 25.99rem) {
  .offers__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .offers__list:not(:has(> .offer:nth-of-type(3))),
  .offers__list:has(> .offer:nth-of-type(4):last-of-type) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offers__list:not(:has(> .offer:nth-of-type(2))) {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer {
    display: grid;
  }

  .offer__label {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.2rem;
    min-height: 0;
    padding: 0.5rem 0.5rem 0.55rem;
    border-radius: 16px;
  }

  .offer__radio {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.1rem;
    height: 1.1rem;
  }

  .offer__radio::after {
    width: 0.5rem;
    height: 0.5rem;
  }

  .offer__main {
    display: contents;
  }

  .offer__title {
    padding-right: 1.35rem;
    font-size: var(--fs-s);
    line-height: 1.3;
  }

  .offer__badge {
    order: 2;
    justify-self: start;
    margin-top: 0.15rem;
  }

  .offer__stock {
    order: 3;
  }

  .offer__subtitle,
  .offer__meta {
    display: none;
  }

  .offer__price {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: none;
    text-align: left;
  }

  .offer__amounts {
    display: contents;
  }

  .offer__reference {
    justify-content: flex-start;
  }

  .offer__total {
    font-size: var(--fs-base);
    line-height: 1.3;
  }

  .offer__amounts .price__badge {
    margin-block: 0.1rem;
  }

  .offer .offer__timer {
    padding: 0.35rem 0.2rem 0;
  }
}

.offer__timer {
    padding: 0.35rem 0.2rem 0;
  }
}

.offer__timer {
  padding: 0.4rem 1rem 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.offer__timer .countdown {
  margin-left: 0.25rem;
  color: var(--c-text);
}

/* Quantité */
.product__quantity {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

.quantity {
  display: inline-flex;
  align-items: center;
  height: 48px;
  border: 2px solid var(--c-field-border);
  border-radius: 999px;
  background: var(--c-surface);
}

.quantity__button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

.quantity__button .icon {
  width: 0.95rem;
  height: 0.95rem;
}

.quantity__input {
  width: 2.75rem;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Stock réel : une ligne sobre (point + texte), barre facultative. */
.stock {
  display: grid;
  gap: 0.45rem;
  font-size: var(--fs-s);
}

.stock__text {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.stock__dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-radius: 50%;
  background: var(--success);
}

.stock.is-low .stock__dot,
.sticky-atc__stock .stock__dot {
  background: var(--notice);
}

.stock__bar {
  display: block;
  width: min(100%, 16rem);
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--c-border);
}

.stock__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-accent);
}

/* Boutons d'achat */
.product-form__error {
  margin-bottom: 0.75rem;
  font-size: var(--fs-s);
  color: var(--c-error);
}

.product-form__express {
  margin-top: 0.75rem;
}

.shopify-payment-button__button {
  width: 100%;
  min-height: 52px !important;
  border-radius: var(--radius-button) !important;
  overflow: hidden;
}

.shopify-payment-button__button--unbranded {
  padding: 0.8rem 1.6rem;
  border: 2px solid var(--c-control) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  font-family: var(--font-body-family);
  font-size: var(--fs-s) !important;
  font-weight: var(--font-body-weight-bold);
  transition: border-color var(--dur-2);
}

.shopify-payment-button__button--unbranded:hover {
  border-color: var(--c-accent) !important;
}

.shopify-payment-button__more-options {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Microcopie sous le bouton : pictogrammes bleus, liens toujours soulignés. */
.product-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-s);
  color: var(--c-muted);
}

.product-note .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  color: var(--c-accent);
}

.product-note__text::first-letter {
  text-transform: uppercase;
}

.product-note__text strong {
  color: var(--c-text);
  font-weight: var(--font-body-weight-bold);
}

.product-note a {
  color: var(--c-text);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--c-control);
  text-underline-offset: 3px;
  background: none;
  transition: text-decoration-color var(--dur-2), color var(--dur-2);
}

.product-note a:hover {
  color: var(--c-accent);
  text-decoration-color: currentColor;
}

.product-note a + a {
  margin-left: 0.9rem;
}

.product-note__text > a:first-of-type {
  margin-left: 0.35rem;
}

.product-note--payment .product-note__text {
  display: grid;
  gap: 0.5rem;
}

/* Filet sous les boutons d'achat quand l'offre, le stock ou la microcopie suivent (sans :has(), pas de filet). */
.product__info > product-form:has(~ :is(.offer-timer, .stock:not([hidden]), .product-note, delivery-estimate, .product-highlights, .product-trust)) {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--c-border);
}

.product-note + .product-note,
delivery-estimate + .product-note,
.product-note + delivery-estimate,
.offer-timer + .stock,
.offer-timer + .product-note,
.offer-timer + delivery-estimate,
.stock + .product-note,
.stock + delivery-estimate {
  margin-top: -0.35rem;
}

/* Stock réel dans la carte : le point s'aligne sur les pictogrammes de la microcopie. */
.product__info > .stock .stock__text {
  gap: 0.75rem;
}

.product__info > .stock .stock__dot {
  margin-inline: 0.325rem;
}

/* Points forts sous la microcopie : séparés d'elle par un filet discret. */
.product__info > :is(.product-note, delivery-estimate, .stock) + .product-highlights {
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-border);
}

.product-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
}

.product-trust__item {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.product-trust__item .icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.6rem;
  border-radius: 50%;
  background: var(--c-pastille);
  color: var(--c-accent);
}

.payment-icons__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.payment-icon {
  width: 2.35rem;
  height: 1.5rem;
}

/* Accordéons */
.accordion {
  display: block;
  border-bottom: 1px solid var(--c-border);
}

.product__info > .accordion:first-of-type,
.product__info > :not(accordion-item) + accordion-item {
  border-top: 1px solid var(--c-border);
}

.accordion__heading {
  font: inherit;
  letter-spacing: normal;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 56px;
  padding: 1rem 0;
  border: 0;
  background: none;
  text-align: left;
  font-weight: var(--font-body-weight-bold);
}

.accordion__trigger:hover {
  color: var(--c-accent);
}

.accordion__title {
  flex: 1;
  min-width: 0;
}

.accordion__icon {
  color: var(--c-accent);
}

.accordion__sign {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--c-pastille);
  color: var(--c-accent);
}

.accordion__sign::before,
.accordion__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 2px;
  margin: -1px 0 0 -0.375rem;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease-out);
}

.accordion__sign::after {
  transform: rotate(90deg);
}

.accordion__trigger[aria-expanded='true'] .accordion__sign::after {
  transform: rotate(0deg);
}

.accordion__panel {
  overflow: hidden;
}

.accordion__content {
  max-width: 46rem;
  padding: 0 0 1.35rem;
  color: var(--c-muted);
}

/* ---------- 11. Galerie ---------- */
.gallery {
  display: grid;
  gap: 0.75rem;
}

.gallery__viewer {
  position: relative;
  min-width: 0;
}

.gallery__track {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border-radius: var(--radius-xl);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  list-style: none;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.gallery__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-frame);
}

.ratio--square .gallery__frame,
.ratio--square .gallery__thumb {
  aspect-ratio: 1;
}

.ratio--landscape .gallery__frame,
.ratio--landscape .gallery__thumb {
  aspect-ratio: 4 / 3;
}

.gallery__image,
.gallery__frame .art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fit--contain .gallery__image {
  object-fit: contain;
}

.gallery__zoom {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.gallery__zoom-hint {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
}

.gallery__zoom:hover .gallery__zoom-hint,
.gallery__zoom:focus-visible .gallery__zoom-hint {
  opacity: 1;
  transform: none;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--dur-2), background-color var(--dur-2);
}

.gallery__arrow--prev {
  left: 1rem;
}

.gallery__arrow--next {
  right: 1rem;
}

.gallery__viewer:hover .gallery__arrow,
.gallery__arrow:focus-visible {
  opacity: 1;
}

.gallery__arrow:disabled {
  opacity: 0 !important;
  pointer-events: none;
}

/* Points de la galerie (mobile) : pastille blanche, points inactifs à 3:1 au moins. */
.gallery__dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  z-index: 2;
  display: flex;
  padding-inline: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%);
}

.gallery__dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
}

.gallery__dot::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--c-control);
  transition: width var(--dur-3) var(--ease-out), background-color var(--dur-2);
}

.gallery__dot[aria-current='true']::before {
  width: 1.3rem;
  background: var(--c-accent);
}

.gallery__thumbs {
  position: relative;
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-m);
  background: var(--c-frame);
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}

.gallery__thumb:hover {
  border-color: var(--c-control);
}

.gallery__thumb[aria-current='true'] {
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 2px var(--c-surface);
}

.gallery__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumb-badge {
  position: absolute;
  inset: auto 0.3rem 0.3rem auto;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--c-surface);
}

.gallery__thumb-badge .icon {
  width: 0.6rem;
  height: 0.6rem;
}

@media (min-width: 990px) {
  .gallery__track {
    scroll-behavior: smooth;
  }

  .gallery__arrow {
    display: grid;
  }

  .gallery__dots {
    display: none;
  }

  .gallery__thumbs {
    display: flex;
    gap: 0.6rem;
  }

  .gallery--thumbs-left {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  /* La colonne de miniatures prend la hauteur de l'image principale et défile au-delà. */
  .gallery--thumbs-left .gallery__thumbs {
    order: -1;
    flex-direction: column;
    align-self: stretch;
    contain: size;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .gallery--thumbs-bottom .gallery__thumbs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .gallery--thumbs-bottom .gallery__thumb-item {
    flex: 0 0 4.75rem;
  }
}

/* Mobile (moins de 750 px) : bandeau de photos de hauteur fixe (un quart de l'écran environ), bord à bord dans le
   cadre, la photo suivante dépasse à droite. Chaque photo garde son format (portrait, carré, paysage) : rien n'est
   recadré. Le bloc d'achat remonte ainsi dans le premier écran. Une seule photo : centrée. */
@media (max-width: 749px) {
  .product__media .gallery {
    --g-h: clamp(180px, 23svh, 300px);
    --g-w: calc(var(--g-h) * 0.8);
  }

  .product__media .ratio--square {
    --g-w: var(--g-h);
  }

  .product__media .ratio--landscape {
    --g-w: calc(var(--g-h) * 4 / 3);
  }

  .product__media .gallery__track {
    gap: 0.5rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    border-radius: 0;
  }

  .product__media .gallery__track:has(> .gallery__slide:only-child) {
    justify-content: center;
  }

  .product__media .gallery__slide {
    flex: 0 0 var(--g-w);
  }

  .product__media .gallery__frame {
    height: var(--g-h);
    border-radius: var(--radius-l);
  }

  /* Commandes : une pilule de verre en bas à droite (sur la photo suivante), « ‹ 1 / 7 › », flèches de 44 px ;
     les points (sept cibles de 44 px) couvriraient le bas des deux photos. */
  .product__media .gallery__dots {
    display: none;
  }

  .product__media .gallery__count {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 1;
    display: block;
    width: calc(88px + 3.25rem);
    height: 44px;
    margin: 0;
    line-height: 44px;
    text-align: center;
    white-space: nowrap;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-1);
    color: #1F1A17;
    font-size: var(--fs-2xs);
    font-weight: var(--font-body-weight-bold);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .product__media .gallery__arrow {
    top: auto;
    bottom: 0.5rem;
    display: grid;
    width: 44px;
    height: 44px;
    background: transparent;
    box-shadow: none;
    color: #1F1A17;
    opacity: 1;
    transform: none;
  }

  .product__media .gallery__arrow--prev {
    right: calc(0.5rem + 44px + 3.25rem);
    left: auto;
  }

  .product__media .gallery__arrow--next {
    right: 0.5rem;
  }
}

.gallery__count {
  display: none;
}

.deferred-media__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}

.deferred-media__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--shadow-2);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-2) var(--ease-out);
}

.deferred-media__poster:hover .deferred-media__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.deferred-media video,
.deferred-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}

/* Visionneuse plein écran */
.zoom {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-bg);
  color: var(--c-text);
}

.zoom[open] {
  display: grid;
  animation: fade-in var(--dur-3) var(--ease-out);
}

.zoom::backdrop {
  background: rgba(var(--main-text-rgb), 0.6);
}

.zoom__stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.zoom__image {
  width: auto;
  height: auto;
  max-width: min(92vw, 1600px);
  max-height: 86vh;
  object-fit: contain;
  cursor: zoom-in;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform 0.5s var(--ease-out);
}

.zoom.is-zoomed .zoom__image {
  transform: scale(2.2);
  cursor: zoom-out;
}

.zoom__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--c-surface);
}

.zoom__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.zoom__nav--prev {
  left: 1rem;
}

.zoom__nav--next {
  right: 1rem;
}

.zoom__counter {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ---------- 12. Barre d'achat collante ---------- */
/* Elle apparaît à l'arrivée sur le bloc d'achat : prix du choix en cours et bouton d'achat chaud. */
sticky-atc {
  position: fixed;
  inset: auto 0 0;
  z-index: 25;
  display: block;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--c-surface);
  box-shadow: none;
  transform: translateY(115%);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

/* Ombre seulement quand la barre est affichée (masquée, elle ne laisse aucun reflet en bas de l'écran). */
sticky-atc.is-visible {
  box-shadow: 0 -14px 34px -20px rgba(var(--main-text-rgb), 0.45);
  transform: none;
}

/* Tiroir ouvert (menu, panier) : la barre s'efface derrière lui (un seul bouton chaud à la fois). */
html.is-locked sticky-atc.is-visible {
  box-shadow: none;
  transform: translateY(115%);
}

/* Une ligne : produit à gauche, bouton à droite. Le bouton ne passe dessous que si le texte est très agrandi. */
/* Hauteur : 64 px au plus, mobile compris (texte à taille normale). */
.sticky-atc__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 0.9rem;
  padding-block: 0.4rem;
}

.sticky-atc__product {
  display: flex;
  flex: 1 1 5rem;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.sticky-atc__image {
  width: 3rem;
  height: 3rem;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-frame);
}

.sticky-atc__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sticky-atc__info {
  display: grid;
  min-width: 0;
}

.sticky-atc__title {
  display: none;
  font-weight: var(--font-body-weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-atc__price .price__current {
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: var(--font-heading-weight-bold);
}

.sticky-atc__price .price {
  gap: 0;
}

.sticky-atc__price .price__main {
  gap: 0.15rem 0.45rem;
}

/* Prix barré et badge « -X % » : même règle que le bloc d'achat. « Économisez » est omis faute de place. */
.sticky-atc__price .price__badge {
  padding: 0.15em 0.55em;
}

.sticky-atc__price .price__reference {
  font-size: var(--fs-2xs);
  line-height: 1.35;
}

.sticky-atc__price .price__shipping,
.sticky-atc__price .price__saving,
.sticky-atc__price .price__unit {
  display: none;
}

/* Petit écran avec un prix barré : la miniature laisse sa place au prix, au badge et au prix barré. */
@media (max-width: 479px) {
  .sticky-atc:has(.price--sale) .sticky-atc__image,
  .sticky-atc:has(.price--sale) .sticky-atc__button .button__icon {
    display: none;
  }
}

.sticky-atc__stock {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-2xs);
  color: var(--c-muted);
}

.sticky-atc__button {
  flex: 0 0 auto;
  min-height: 46px;
  margin-left: auto;
  padding-inline: 1.25rem;
}

/* 320 px : tout reste sur une ligne ; le badge « -X % » s'efface (le prix barré reste). */
@media (max-width: 359px) {
  .sticky-atc__inner {
    gap: 0.6rem;
  }

  .sticky-atc__price .price__badge {
    display: none;
  }

  .sticky-atc__button {
    padding-inline: 1rem;
  }
}

body:has(sticky-atc) .footer {
  padding-bottom: 6rem;
}

/* À partir de 750 px : titre sur une ligne, prix et prix barré côte à côte, sans ligne de stock (elle reste dans
   le bloc d'achat) : barre de 64 px au plus. */
@media (min-width: 750px) {
  .sticky-atc__inner {
    padding-block: 0.4rem;
  }

  .sticky-atc__info {
    line-height: 1.3;
  }

  .sticky-atc__title {
    display: block;
  }

  .sticky-atc__price .price {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
  }

  .sticky-atc__button {
    padding-inline: 1.75rem;
  }
}

@media (min-width: 990px) {
  sticky-atc {
    right: 50%;
    left: auto;
    width: min(calc(100% - 2 * var(--gutter)), 52rem);
    margin-bottom: 1rem;
    border-radius: 999px;
    transform: translate(50%, 140%);
  }

  sticky-atc.is-visible {
    transform: translate(50%, 0);
  }

  html.is-locked sticky-atc.is-visible {
    transform: translate(50%, 140%);
  }

  sticky-atc .sticky-atc__inner {
    padding: 0.4rem 0.45rem 0.4rem 1rem;
  }

  sticky-atc:not(.sticky-atc--desktop) {
    display: none;
  }

  .sticky-atc__button {
    min-width: 15rem;
  }
}

/* ---------- 13. Sections de contenu ---------- */
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head__title,
.story__heading,
.figures__heading,
.reviews__heading,
.specs__heading,
.faq__heading,
.guarantee__heading,
.split__heading,
.before-after__heading {
  font-size: var(--fs-h2);
}

.section-head__text {
  margin-top: 1rem;
  font-size: var(--fs-l);
  color: var(--c-muted);
}

/* Bandeau de réassurance : 4 cartes blanches (2 × 2 sur mobile) ; option défilement continu. */
.promise-bar {
  display: block;
}

.promise-bar--cards {
  padding-block: 1.25rem;
}

.promise-bar__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.promise-bar__cards[data-count='1'] {
  grid-template-columns: minmax(0, 1fr);
}

.promise-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1rem;
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.promise-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.promise-card:hover .pastille {
  scale: 1.08;
}

.promise-card .pastille {
  width: 2.75rem;
  height: 2.75rem;
}

.promise-card:nth-child(4n + 2) .pastille {
  background: var(--c-pastille-alt);
  color: var(--success);
}

.promise-card:nth-child(4n + 3) .pastille {
  background: var(--c-pastille-sticker);
  color: var(--main-text);
}

/* Colonne bornée à la carte : un mot long (texte très agrandi) passe à la ligne au lieu d'élargir la carte. */
.promise-card__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
  max-width: 100%;
}

.promise-card__title {
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
  line-height: 1.3;
}

.promise-card__detail {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-muted);
}

/* Moins de 480 px : une carte par ligne, pastille à gauche, titre et détail à droite (moins haut que 2 × 2). */
@media (max-width: 479px) {
  .promise-bar__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .promise-card {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
  }

  .promise-card .pastille {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
  }

  .promise-card__text {
    gap: 0;
    min-width: 0;
  }
}

/* Chevauchement du hero : les cartes remontent sur le bas du hero (fond transparent). Seulement juste après un
   hero : ailleurs (après les coloris en tuiles, par exemple), le bandeau reste à sa place. */
:is(.section-hero, .section-hero-scene) + .section-promise-bar .promise-bar--overlap {
  position: relative;
  z-index: 2;
  margin-top: -3.25rem;
  padding-top: 0;
  background: transparent;
}

@media (min-width: 750px) {
  .promise-card {
    padding: 1.15rem 1.25rem;
  }
}

@media (min-width: 990px) {
  .promise-bar__cards {
    grid-template-columns: repeat(var(--promises, 4), minmax(0, 1fr));
    gap: 1rem;
  }

  .promise-bar__cards[data-count='2'] {
    --promises: 2;
  }

  .promise-bar__cards[data-count='3'] {
    --promises: 3;
  }

  .promise-bar__cards[data-count='5'] {
    --promises: 5;
  }

  .promise-bar__cards[data-count='6'] {
    --promises: 3;
  }

  .promise-card {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
  }

  .promise-card .pastille {
    width: 3.1rem;
    height: 3.1rem;
  }
}

.promise-bar__viewport {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}

.promise-bar__viewport::-webkit-scrollbar {
  display: none;
}

.promise-bar__list {
  display: flex;
  flex: none;
  align-items: center;
  margin-inline: auto !important;
  padding: 1rem var(--gutter) !important;
}

.promise-bar__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-inline: clamp(1rem, 2.6vw, 2.5rem);
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-medium);
  white-space: nowrap;
}

.promise-bar__item .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--c-accent);
}

.promise-bar__list--clone {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .promise-bar--marquee .promise-bar__viewport {
    overflow: hidden;
  }

  .promise-bar--marquee .promise-bar__list {
    margin: 0 !important;
    padding-inline: 0 !important;
    animation: marquee var(--marquee-duration, 30s) linear infinite;
  }

  .promise-bar--marquee .promise-bar__list--clone {
    display: flex;
  }

  .promise-bar--marquee:hover .promise-bar__list,
  .promise-bar--marquee:focus-within .promise-bar__list {
    animation-play-state: paused;
  }
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

/* Bénéfices : grande tuile image + tuiles blanches à pastille. */
.bento {
  display: grid;
  gap: 0.9rem;
}

.bento__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 12rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.bento__tile:not(.bento__tile--feature):hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.bento__tile:not(.bento__tile--feature):hover .bento__icon {
  scale: 1.08;
  rotate: -6deg;
}

.bento__tile--feature {
  justify-content: flex-end;
  min-height: 26rem;
  padding: 0;
  background: var(--c-frame);
}

.bento__media {
  position: absolute;
  inset: 0;
}

.bento__media .bento__image,
.bento__media .art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}

.bento__tile--feature:hover .bento__image {
  transform: scale(1.03);
}

/* Texte de la grande tuile sur une carte blanche posée sur l'image : lisible quelle que soit la photo. */
.bento__tile--feature .bento__body {
  margin: 0.9rem;
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-2);
}

.bento__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.6rem;
}

.bento__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-pastille);
  color: var(--c-accent);
  transition: scale var(--dur-2) var(--ease-bounce), rotate var(--dur-2) var(--ease-bounce);
}

.bento__tile:nth-child(3n + 3) .bento__icon {
  background: var(--c-pastille-alt);
  color: var(--success);
}

.bento__tile:nth-child(3n + 4) .bento__icon {
  background: var(--c-pastille-sticker);
  color: var(--main-text);
}

.bento__icon .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.bento__title {
  font-size: var(--fs-h4);
  line-height: 1.2;
}

.bento__tile--feature .bento__title {
  max-width: 20ch;
  font-size: var(--fs-h3);
}

.bento__text {
  max-width: 38ch;
  color: var(--c-muted);
}

.bento__thumb {
  margin: calc(-1 * clamp(1.4rem, 2.6vw, 2rem)) calc(-1 * clamp(1.4rem, 2.6vw, 2rem)) 0.4rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.bento__thumb .bento__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 750px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento__tile--feature {
    grid-column: 1 / -1;
  }
}

/* Deux colonnes (750 à 989 px) : avec 2, 4 ou 6 tuiles, la dernière serait seule ; elle prend toute la largeur. */
@media (min-width: 750px) and (max-width: 989px) {
  .bento[data-count='2'] .bento__tile:last-child,
  .bento[data-count='4'] .bento__tile:last-child,
  .bento[data-count='6'] .bento__tile:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 990px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(14rem, auto);
    gap: 1rem;
  }

  .bento__tile--feature {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 0;
  }

  .bento[data-count='1'] .bento__tile--feature {
    grid-column: 1 / -1;
  }

  .bento[data-count='2'] .bento__tile:not(.bento__tile--feature),
  .bento[data-count='3'] .bento__tile:not(.bento__tile--feature) {
    grid-column: span 2;
  }

  .bento[data-count='2'] .bento__tile:not(.bento__tile--feature) {
    grid-row: span 2;
  }

  .bento[data-count='4'] .bento__tile:nth-child(4) {
    grid-column: span 2;
  }

  .bento[data-count='6'] .bento__tile:nth-child(6) {
    grid-column: 1 / -1;
  }
}

/* Démonstration (image fixe, étapes numérotées dans des pastilles) */
.story__grid {
  display: grid;
  gap: 2.25rem;
}

.story__image,
.story__sticky .art {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.story__video {
  height: auto;
  background: #000;
}

.story__intro {
  margin-top: 1rem;
  color: var(--c-muted);
  font-size: var(--fs-l);
}

.story__steps {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem) !important;
}

.story__step {
  max-width: 36rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.story__steps--numbered .story__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
}

.story__steps--numbered .story__step > :not(.story__number) {
  grid-column: 2;
}

.story__number {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--sticker);
  color: var(--main-text);
  font-family: var(--font-heading-family);
  font-size: 1.05rem;
  font-weight: var(--font-heading-weight-bold);
}

.story__title {
  font-size: var(--fs-h4);
  line-height: 1.25;
}

.story__text {
  margin-top: 0.5rem;
  color: var(--c-muted);
}

@media (min-width: 990px) {
  .story__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .story--image-right .story__media {
    order: 2;
  }

  .story__sticky {
    position: sticky;
    top: calc(var(--sticky-offset) + 2rem);
  }

  .story__content {
    padding-block: 1rem 4rem;
  }
}

/* Chiffres clés : nombres fixes (aucun compteur animé), dans des cartes blanches. */
.figures__heading {
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

/* Deux colonnes au plus avant 990 px ; une seule si le texte est très agrandi (cartes de 9 rem au moins). */
.figures__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9rem, calc(50% - 0.375rem))), 1fr));
  gap: 0.75rem;
}

.figure {
  display: grid;
  align-content: start;
  justify-items: center;
  padding: clamp(1.25rem, 2.6vw, 2rem) 0.9rem;
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  text-align: center;
}

.figure__value,
.reviews-summary__average,
.countdown--boxed .countdown__value,
.seal__number,
.not-found__code {
  font-variant-numeric: lining-nums tabular-nums;
}

.figure__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.12em;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: calc(clamp(2.6rem, 1.9rem + 3vw, 4.5rem) * var(--heading-scale, 1));
  line-height: 1;
  letter-spacing: -0.02em;
}

.figure__affix {
  font-size: 0.38em;
  letter-spacing: 0;
  color: var(--c-accent);
}

.figure__label {
  max-width: 100%;
  margin-top: 0.7rem;
  font-size: var(--fs-s);
  line-height: 1.4;
  color: var(--c-muted);
  overflow-wrap: break-word;
}

.figures__source {
  max-width: 48rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

@media (min-width: 990px) {
  .figures__list {
    grid-template-columns: repeat(var(--figures, 4), minmax(0, 1fr));
    gap: 1rem;
  }

  .figures__list[data-count='1'] {
    --figures: 1;
  }

  .figures__list[data-count='2'] {
    --figures: 2;
  }

  .figures__list[data-count='3'] {
    --figures: 3;
  }
}

/* Tableau comparatif : notre colonne en carte blanche, réponses dans des pastilles douces. */
.comparison__switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.comparison__switch-label {
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* position: relative : les textes réservés aux lecteurs d'écran (position absolue) restent dans la zone qui
   défile, au lieu d'élargir la page quand le tableau déborde (texte agrandi). */
.comparison__scroller {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.comparison__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-s);
}

.comparison__table th,
.comparison__table td {
  padding: 0.95rem 0.7rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
  text-align: center;
  vertical-align: middle;
}

.comparison__table thead th {
  padding-top: 1.25rem;
  font-weight: var(--font-body-weight);
  vertical-align: bottom;
}

.comparison__corner,
.comparison__criterion {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 38%;
  min-width: 7.5rem;
  text-align: left !important;
}

.comparison__criterion {
  font-weight: var(--font-body-weight-medium);
  line-height: 1.35;
}

.comparison__name {
  display: block;
  font-family: var(--font-heading-family);
  font-size: calc(1.1rem * var(--heading-scale, 1));
  font-weight: var(--font-heading-weight);
  line-height: 1.2;
}

.comparison__visual img {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 0.5rem;
  object-fit: contain;
}

.comparison__table .comparison__ours {
  background: var(--c-surface);
  border-bottom-color: var(--c-border);
  box-shadow:
    inset 2px 0 0 var(--c-accent),
    inset -2px 0 0 var(--c-accent);
  font-weight: var(--font-body-weight-bold);
}

.comparison__table thead .comparison__ours {
  padding-top: 1.4rem;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  box-shadow:
    inset 2px 0 0 var(--c-accent),
    inset -2px 0 0 var(--c-accent),
    inset 0 2px 0 var(--c-accent);
}

.comparison__table tbody tr:last-child .comparison__ours {
  border-bottom: 0;
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  box-shadow:
    inset 2px 0 0 var(--c-accent),
    inset -2px 0 0 var(--c-accent),
    inset 0 -2px 0 var(--c-accent);
}

.comparison__table tbody tr:last-child > * {
  border-bottom: 0;
}

.comparison__badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--sticker);
  color: var(--main-text);
  font-size: var(--fs-2xs);
  font-weight: var(--font-body-weight-bold);
}

.cmp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cmp .icon {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0.4rem;
  border-radius: 50%;
}

.cmp--yes .icon {
  background: var(--c-pastille-alt);
  color: var(--success);
  stroke-width: 3;
}

.cmp--no .icon {
  background: var(--c-disabled);
  color: var(--c-muted);
  stroke-width: 2.5;
}

.cmp--empty {
  color: var(--c-muted);
}

.cmp--text {
  line-height: 1.35;
}

.comparison__footnote {
  max-width: 62rem;
  margin: 1.5rem auto 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
}

@media (max-width: 749px) {
  .js .comparison__table[data-active-col='1'] [data-col]:not([data-col='1']),
  .js .comparison__table[data-active-col='2'] [data-col]:not([data-col='2']),
  .js .comparison__table[data-active-col='3'] [data-col]:not([data-col='3']) {
    display: none;
  }

  .comparison__table th,
  .comparison__table td {
    padding-inline: 0.5rem;
  }
}

@media (min-width: 750px) {
  .comparison__switch {
    display: none;
  }

  .comparison__scroller {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .comparison__table {
    max-width: 62rem;
    margin-inline: auto;
    table-layout: fixed;
  }

  .comparison__table thead th {
    position: sticky;
    top: var(--sticky-offset);
    z-index: 2;
  }

  .comparison__table thead .comparison__corner {
    z-index: 3;
  }

  .comparison__table th,
  .comparison__table td {
    padding: 1.05rem 1rem;
  }
}

/* Avis */
/* Colonnes bornées (minmax(0, 1fr)) : un mot long d'un titre très agrandi passe à la ligne sans élargir la page. */
.reviews__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.reviews__text {
  margin-top: 1rem;
  color: var(--c-muted);
}

/* Méthode de collecte : toujours visible, en encadré compact. */
.reviews__transparency {
  display: grid;
  gap: 0.4rem;
  max-width: 42rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--c-surface) 70%, transparent);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--c-muted);
}

.reviews__transparency a {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.reviews-summary__score {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.reviews-summary__average {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: calc(clamp(3.25rem, 2.6rem + 2.6vw, 4.75rem) * var(--heading-scale, 1));
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.reviews-summary__max {
  color: var(--c-muted);
}

.reviews-summary__meta {
  display: grid;
  flex: 1 1 10rem;
  gap: 0.4rem;
  min-width: 0;
}

.reviews-summary__count {
  font-size: var(--fs-s);
}

.reviews-summary__note {
  font-size: var(--fs-2xs);
  color: var(--c-muted);
}

.reviews-summary__bars {
  display: grid;
  flex: 1 1 100%;
  gap: 0.1rem;
}

.reviews-summary__bar {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.2rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: var(--fs-xs);
  text-align: left;
  transition: background-color var(--dur-2);
}

.reviews-summary__bar:hover,
.reviews-summary__bar[aria-pressed='true'] {
  background: var(--c-faint);
}

.reviews-summary__bar[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--c-accent);
}

.reviews-summary__bar-label {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.reviews-summary__bar-label .icon {
  width: 0.8rem;
  height: 0.8rem;
}

.reviews-summary__track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--c-border);
}

.reviews-summary__track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-stars);
}

.reviews-summary__bar-count {
  text-align: right;
  color: var(--c-muted);
}

@media (min-width: 990px) {
  .reviews__top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 4rem;
  }
}

.quotes {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.quotes__track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.quotes__track::-webkit-scrollbar {
  display: none;
}

.quote {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.quote__inner {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.quote__media {
  width: 7.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
}

@media (min-width: 990px) {
  .quote__media {
    width: min(100%, 20rem);
    border-radius: var(--radius-xl);
    aspect-ratio: 4 / 5;
  }
}

.quote__media .quote__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote__body {
  display: grid;
  gap: 1.25rem;
  max-width: 48rem;
}

.quote__text p {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: calc(clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) * var(--heading-scale, 1));
  line-height: 1.2;
  text-wrap: pretty;
}

.quote__text p::before {
  content: open-quote;
}

.quote__text p::after {
  content: close-quote;
}

.quote__text {
  quotes: '«\202F' '\202F»';
}

:lang(en) .quote__text {
  quotes: '“' '”';
}

.quote__author {
  display: grid;
  gap: 0.35rem;
  font-size: var(--fs-s);
}

.quote__name {
  font-weight: var(--font-body-weight-bold);
}

@media (min-width: 990px) {
  .quote__inner:has(.quote__media) {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.slider-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.review-photos {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.review-photos__heading {
  margin-bottom: 1rem;
  font-family: var(--font-body-family);
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: normal;
}

.review-photos__list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.review-photos__item {
  display: block;
  width: 7.5rem;
  aspect-ratio: 1;
  flex: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-m);
  cursor: zoom-in;
}

.review-photos__item img,
.review-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.review-photos__item:hover img,
.review-card__photo:hover img {
  transform: scale(1.05);
}

.reviews__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.no-js .reviews__toolbar {
  display: none;
}

.reviews__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.reviews__sort .field-select {
  max-width: 100%;
}

.reviews__sort {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  font-size: var(--fs-s);
  color: var(--c-muted);
}

.reviews__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 750px) {
  .reviews__list--grid .reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .reviews__list--grid .reviews__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.reviews__list--carousel .reviews__grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.reviews__list--carousel .review-card {
  flex: 0 0 min(86%, 24rem);
  scroll-snap-align: start;
}

.review-card__inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.review-card__header {
  display: grid;
  gap: 0.6rem;
}

.review-card__title {
  font-size: var(--fs-h4);
}

.review-card__text {
  line-height: 1.6;
}

.review-card__photo {
  display: block;
  width: 6.5rem;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-m);
  cursor: zoom-in;
}

.review-card__footer {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
}

.review-card__avatar {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 50%;
  background: var(--shape);
  color: var(--on-shape);
  font-size: var(--fs-2xs);
}

.review-card:nth-child(3n + 2) .review-card__avatar {
  background: var(--shape-alt);
  color: var(--main-text);
}

.review-card:nth-child(3n + 3) .review-card__avatar {
  background: var(--sticker);
  color: var(--main-text);
}

/* Origine d'un avis : « Achat vérifié » seulement avec preuve ; avis importé toujours signalé. */
.review-origin {
  display: grid;
  gap: 0.2rem;
  font-size: var(--fs-2xs);
  line-height: 1.45;
  color: var(--c-muted);
}

.review-origin__label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--c-text);
}

.review-origin__label .icon {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--success);
}

.review-origin__label--imported {
  display: block;
  padding: 0.35rem 0.6rem;
  border: 1px dashed var(--c-control);
  border-radius: var(--radius-s);
}

.review-origin__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
}

.review-card__reply {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-m);
  background: var(--c-faint);
  font-size: var(--fs-s);
}

.review-card__reply-title {
  font-weight: var(--font-body-weight-bold);
}

.reviews__empty {
  padding-block: 2rem;
  color: var(--c-muted);
}

.reviews__more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.reviews__app {
  margin-top: 2rem;
}

/* Caractéristiques et conformité */
.specs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.specs__list {
  margin-top: 1.75rem;
  padding: 0.25rem clamp(1.1rem, 2.4vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.specs__row {
  display: grid;
  grid-template-columns: minmax(min(7rem, 40%), 0.9fr) minmax(0, 2fr);
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--c-border);
}

.specs__row:last-child {
  border-bottom: 0;
}

.specs__row dt {
  color: var(--c-muted);
}

.specs__row dd {
  font-weight: var(--font-body-weight-medium);
}

.specs__details {
  margin-top: 1.75rem;
  border-top: 1px solid var(--c-border);
}

.compliance {
  display: grid;
  gap: 1rem;
}

.compliance dt {
  color: var(--c-text);
  font-weight: var(--font-body-weight-bold);
}

.compliance dd {
  margin-top: 0.2rem;
}

.specs__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--c-frame);
}

.specs__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 990px) {
  .specs__grid--image {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}

/* Questions fréquentes : chaque question dans une carte blanche arrondie. */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.faq__text {
  max-width: 28rem;
  margin-top: 1rem;
  color: var(--c-muted);
}

.faq__contact {
  margin-top: 1.5rem;
}

.faq__list {
  display: grid;
  gap: 0.65rem;
}

.faq .accordion {
  padding-inline: clamp(1rem, 2.2vw, 1.5rem);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.faq .accordion__trigger {
  min-height: 64px;
  padding-block: 1.1rem;
  font-family: var(--font-heading-family);
  font-size: var(--fs-h4);
  font-weight: var(--font-heading-weight);
  line-height: 1.3;
}

@media (min-width: 990px) {
  .faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
}

/* Garantie : tampon « 30 jours » rond, légèrement incliné. */
.guarantee__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.guarantee__visual {
  position: relative;
  display: grid;
  place-items: center;
}

.seal {
  position: relative;
  width: min(clamp(12rem, 20vw, 15rem), 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sticker);
  color: var(--main-text);
  box-shadow: 0 0 0 10px var(--c-pastille), var(--shadow-2);
  rotate: -8deg;
}

.seal__ring {
  width: 100%;
  height: 100%;
}

/* Texte circulaire du tampon : au moins 13 px affichés (15 unités du tampon, 12 rem de large au minimum). */
.seal__text {
  font-family: var(--font-body-family);
  font-size: 15px;
  font-weight: var(--font-body-weight-bold);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  fill: currentColor;
}

.seal__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.seal__number {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: clamp(3.25rem, 2.6rem + 2.4vw, 4.75rem);
  line-height: 0.9;
}

.seal__unit {
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
}

.guarantee__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.guarantee__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guarantee__grid--image .seal {
  position: absolute;
  right: -0.5rem;
  bottom: -1.5rem;
  width: clamp(12rem, 16vw, 13rem);
}

.guarantee__text {
  max-width: 36rem;
  margin-top: 1rem;
  font-size: var(--fs-l);
  color: var(--c-muted);
}

.guarantee__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.75rem !important;
}

.guarantee__point {
  display: flex;
  gap: 1rem;
}

.guarantee__point > div {
  min-width: 0;
  overflow-wrap: break-word;
}

.guarantee__point > .icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.65rem;
  border-radius: 50%;
  background: var(--c-pastille);
  color: var(--c-accent);
}

.guarantee__point-title {
  font-family: var(--font-body-family);
  font-size: var(--fs-base);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: normal;
}

.guarantee__point-text {
  font-size: var(--fs-s);
  color: var(--c-muted);
}

.guarantee__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.75rem;
}

@media (min-width: 990px) {
  .guarantee__grid {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(3rem, 7vw, 7rem);
  }
}

/* Appel à l'action final : carte arrondie comme les panneaux. Sans visuel : formes douces en fond (seul le calque
   .final-cta__shapes est rogné, le texte de la carte n'est jamais coupé, même très agrandi). Avec un visuel
   (ordinateur) : carte partagée, le texte sur la surface de la carte, le produit détouré sur un aplat de marque
   qui occupe toute la droite de la carte, sous un halo clair (comme une photo de studio). */
.final-cta__card {
  --fc-pad-y: clamp(2rem, 1.2rem + 3.6vw, 4rem);
  --fc-pad-x: clamp(min(1.25rem, 5vw), 0.6rem + 3vw, 4rem);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding: var(--fc-pad-y) var(--fc-pad-x);
  border-radius: var(--radius-panel, calc(var(--radius) * 1.6));
  background: var(--c-frame);
  text-align: center;
}

.final-cta__shapes {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.final-cta__blob {
  position: absolute;
  z-index: -1;
  top: -22%;
  right: -12%;
  width: clamp(12rem, 34vw, 26rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-pastille);
}

.final-cta__blob--alt {
  top: auto;
  right: auto;
  bottom: -26%;
  left: -10%;
  width: clamp(9rem, 24vw, 18rem);
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
  background: var(--c-pastille-alt);
}

/* Aucun contenu plus large que la carte, même avec un texte très agrandi (la carte ne rogne que ses formes). */
.final-cta__card > * {
  min-width: 0;
}

.final-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.25rem;
  min-width: 0;
}

.final-cta__heading {
  max-width: 18ch;
  overflow-wrap: anywhere;
  font-size: calc(clamp(2.1rem, 1.5rem + 2.6vw, 3.75rem) * var(--heading-scale, 1));
  line-height: 1.05;
  letter-spacing: var(--ls-display);
}

.final-cta__text {
  max-width: 34rem;
  font-size: var(--fs-l);
  color: var(--c-muted);
}

.final-cta__timer {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  max-width: 100%;
}

.final-cta__offer {
  max-width: min(36rem, 100%);
  overflow-wrap: anywhere;
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-medium);
}

.final-cta__button {
  margin-top: 0.25rem;
}

.final-cta__price {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
}

.final-cta__price strong {
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: var(--font-heading-weight-bold);
}

.final-cta__amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.5rem;
}

.final-cta__price .price__reference {
  justify-content: center;
}

.final-cta__visual {
  display: none;
}

@media (min-width: 990px) {
  .final-cta__card--image {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
    text-align: left;
  }

  .final-cta__card--image .final-cta__inner,
  .final-cta__card--image .final-cta__timer,
  .final-cta__card--image .final-cta__price {
    justify-items: start;
  }

  .final-cta__card--image .final-cta__amounts,
  .final-cta__card--image .final-cta__price .price__reference {
    justify-content: start;
  }

  .final-cta__card--image {
    padding-block: 0;
  }

  .final-cta__card--image .final-cta__inner {
    padding-block: var(--fc-pad-y);
  }

  .final-cta__card--image .final-cta__shapes {
    display: none;
  }

  .final-cta__visual {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: end center;
    align-self: stretch;
    min-height: 24rem;
    margin-right: calc(-1 * var(--fc-pad-x));
    padding: 2.5rem 1.5rem 0;
    overflow: hidden;
    border-radius: 0 var(--radius-panel, 40px) var(--radius-panel, 40px) 0;
    background: var(--shape);
  }

  .final-cta__visual::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 8%;
    left: 50%;
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
    translate: -50% 0;
  }

  .final-cta__image {
    position: relative;
    width: auto;
    max-height: min(28rem, 100%);
    margin-bottom: 1.75rem;
    object-fit: contain;
    filter: drop-shadow(0 30px 28px rgba(0, 0, 0, 0.28)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16));
  }
}

/* Texte et manifeste */
/* Débordement coupé à l'horizontale seulement : la vague dessinée au-dessus de la section reste visible. */
.rich-text {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}

.rich-text__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.rich-text__media .rich-text__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rich-text__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--c-bg-rgb), var(--overlay, 0.55));
}

.rich-text__inner {
  display: grid;
  gap: 1.25rem;
}

.rich-text--center .rich-text__inner {
  justify-items: center;
  text-align: center;
}

.rich-text__heading {
  max-width: 22ch;
  font-size: var(--fs-h2);
}

.rich-text--manifesto .rich-text__heading {
  max-width: 20ch;
  font-size: calc(clamp(2rem, 1.3rem + 3vw, 4rem) * var(--heading-scale, 1));
  line-height: 1.08;
  letter-spacing: var(--ls-display);
}

/* Forme douce du manifeste (décorative). Le pseudo-élément ::before reste réservé à la vague. */
.rich-text--manifesto::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  top: 12%;
  left: max(-4rem, -8vw);
  width: clamp(7rem, 16vw, 13rem);
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--shape) 60%, transparent);
}

.rich-text__text {
  max-width: 38rem;
  font-size: var(--fs-l);
  color: var(--c-muted);
}

.signature {
  display: grid;
  justify-items: inherit;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.signature__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: calc(clamp(1.5rem, 1.3rem + 0.8vw, 2rem) * var(--heading-scale, 1));
  line-height: 1;
}

.signature__logo {
  width: 9rem;
  height: auto;
}

.signature__name {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Image avec texte */
.split__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.split__media {
  position: relative;
}

.split__main {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.split__media.ratio--square .split__main {
  aspect-ratio: 1;
}

.split__media.ratio--landscape .split__main {
  aspect-ratio: 4 / 3;
}

.split__image,
.split__main .art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__inset {
  position: absolute;
  right: -0.5rem;
  bottom: -1.75rem;
  width: 38%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 6px solid var(--c-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-2);
}

.split__text {
  margin-top: 1.1rem;
  font-size: var(--fs-l);
  color: var(--c-muted);
}

.split__content .link {
  margin-top: 1.5rem;
}

@media (min-width: 990px) {
  .split__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 7vw, 7rem);
  }

  .split--image-right .split__media {
    order: 2;
  }

  .split__inset {
    right: -2rem;
  }
}

/* Pourquoi nous choisir */
.trust__list {
  display: grid;
  gap: 1rem;
}

.trust__item {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.trust__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-pastille);
  color: var(--c-accent);
}

.trust__title {
  font-size: var(--fs-h4);
}

.trust__text {
  font-size: var(--fs-s);
  color: var(--c-muted);
}

.trust__payment {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

@media (min-width: 750px) {
  .trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 990px) {
  .trust__list[data-count='3'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust__list[data-count='4'] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Ils en parlent */
.press__heading {
  margin-bottom: 1.75rem;
  font-family: var(--font-body-family);
  font-size: var(--fs-xs);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--c-muted);
}

.press__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem clamp(2rem, 6vw, 5rem);
}

.press__item {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  max-width: 14rem;
  text-align: center;
}

.press__logo {
  width: auto;
  height: 1.75rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
}

.press__name {
  font-family: var(--font-heading-family);
  font-size: 1.3rem;
  color: var(--c-muted);
}

.press__quote {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.press__link {
  text-decoration: none;
}

/* Avant / après */
.before-after__grid {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

.before-after__text {
  margin-top: 1rem;
  color: var(--c-muted);
}

.compare {
  display: block;
}

.compare__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-xl);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.compare__image {
  position: absolute;
  inset: 0;
}

.compare__image img,
.compare__image .art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare__image--before {
  clip-path: inset(0 calc(100% - var(--position, 50%)) 0 0);
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position, 50%);
  display: grid;
  place-items: center;
  width: 3px;
  background: #FFFFFF;
  transform: translateX(-50%);
  pointer-events: none;
}

.compare__handle::before {
  content: '';
  position: absolute;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: var(--shadow-2);
}

.compare__handle .icon {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--main-text);
}

.compare__handle .icon + .icon {
  margin-top: -0.9rem;
}

.compare__handle .icon:first-child {
  transform: translateX(-0.45rem);
}

.compare__handle .icon:last-child {
  transform: translateX(0.45rem);
}

.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.compare__frame:has(.compare__range:focus-visible) .compare__handle::before {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
  /* Anneau foncé autour de l'anneau blanc : visible sur une photo claire comme sombre. */
  box-shadow: 0 0 0 8px rgba(var(--main-text-rgb), 0.75);
}

.compare__label {
  position: absolute;
  top: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--main-text);
  font-size: var(--fs-2xs);
  font-weight: var(--font-body-weight-bold);
}

.compare__label--before {
  left: 1rem;
}

.compare__label--after {
  right: 1rem;
}

@media (min-width: 990px) {
  .before-after__grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(3rem, 7vw, 7rem);
  }
}

/* Coloris en tuiles : scène de la couleur de marque, produit de la valeur choisie au centre, nom et prix dans une
   pastille avec un bouton rond (qui sélectionne la valeur dans le bloc d'achat) ; tuiles arrondies inclinées en
   arc autour du produit sur ordinateur, carrousel horizontal sous le produit sur mobile. Titre géant en bas. */
.vtiles {
  --hs-color: var(--shape);
  --vt-fg: var(--main-text);
  --vt-ring: var(--main-text);
  --vt-tile-w: clamp(8rem, 11vw, 12rem);
  display: block;
  padding-inline: var(--panel-inset);
}

.vtiles--light {
  --vt-fg: #FFFFFF;
  --vt-ring: #FFFFFF;
}

.vtiles__frame {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem);
  border-radius: var(--radius-panel);
  color: var(--vt-fg);
}

.vtiles--bg-color .vtiles__frame {
  background: var(--hs-color);
}

.vtiles__inner {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
}

.vtiles__heading {
  order: 2;
  font-size: calc(clamp(2.2rem, 0.9rem + 5.2vw, 5.75rem) * var(--heading-scale, 1) * var(--case-scale, 1));
  line-height: 1;
  text-align: center;
  color: var(--vt-fg);
}

.vtiles__stage {
  position: relative;
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.vtiles__center {
  order: -1;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.vtiles__product {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(15rem, 62vw, 22rem);
}

/* Coins arrondis sans effet sur un détourage (coins transparents) ; ils adoucissent le repli sur une photo. */
.vtiles__image {
  width: auto;
  height: 100%;
  max-width: 100%;
  border-radius: var(--radius-l);
  object-fit: contain;
  filter: drop-shadow(0 28px 28px rgba(0, 0, 0, 0.3));
  transition: opacity var(--dur-2) var(--ease-out);
}

.vtiles__image.is-changing {
  opacity: 0;
}

.vtiles__image--art {
  width: min(16rem, 70vw);
  filter: none;
}

.vtiles__name {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: calc(clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) * var(--case-scale, 1));
  line-height: 1.05;
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-tracking);
  text-align: center;
  color: var(--vt-fg);
}

.vtiles__buy {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  padding: 0.4rem 0.4rem 0.4rem 1.1rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg-strong);
  color: var(--main-text);
  box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.vtiles__price .price {
  gap: 0;
}

.vtiles__price .price__main {
  gap: 0.1rem 0.45rem;
}

.vtiles__price .price__saving,
.vtiles__price .price__shipping,
.vtiles__price .price__unit {
  display: none;
}

.vtiles__price .price__reference {
  font-size: var(--fs-2xs);
}

.vtiles__choose {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  background: var(--main-text);
  color: var(--main-bg);
  transition: transform var(--dur-2) var(--ease-out);
}

.vtiles__choose:hover {
  transform: translateY(2px);
}

/* Tuiles : boutons radio natifs (clavier), étiquette visible sous l'image. */
.vtiles__tiles {
  display: flex;
  gap: 0.9rem;
  min-width: 0;
  margin: 0 calc(-1 * var(--gutter));
  padding: 1rem var(--gutter) 1.4rem;
  overflow-x: auto;
  border: 0;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.vtiles__tiles::-webkit-scrollbar {
  display: none;
}

.vtiles__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.vtiles__tile {
  display: grid;
  flex: 0 0 auto;
  justify-items: center;
  gap: 0.35rem;
  width: 8.5rem;
  padding: 0.8rem 0.6rem 0.7rem;
  border-radius: 28px;
  background: color-mix(in srgb, var(--main-bg) 70%, #FFFFFF);
  color: var(--main-text);
  box-shadow: 0 18px 34px -24px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  rotate: calc(var(--tilt, 0deg) * 0.45);
  scroll-snap-align: center;
  transition: rotate var(--dur-3) var(--ease-bounce), translate var(--dur-3) var(--ease-out), box-shadow var(--dur-2);
}

.vtiles__tile:hover {
  rotate: 0deg;
}

.vtiles__tile-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
}

.vtiles__tile-image {
  width: auto;
  height: 100%;
  border-radius: var(--radius-m);
  object-fit: contain;
}

.vtiles__tile-swatch {
  width: 4.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--swatch, var(--shape));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.vtiles__tile-name {
  font-size: var(--fs-xs);
  font-weight: var(--font-body-weight-bold);
  line-height: 1.25;
  text-align: center;
}

.vtiles__tile-soldout {
  font-weight: var(--font-body-weight);
}

.vtiles__tile.is-unavailable .vtiles__tile-media {
  opacity: 0.55;
}

.vtiles__input:checked + .vtiles__tile {
  box-shadow: 0 0 0 3px var(--vt-ring), 0 22px 40px -24px rgba(0, 0, 0, 0.8);
  rotate: 0deg;
}

.vtiles__input:focus-visible + .vtiles__tile {
  outline: 3px solid var(--vt-ring);
  outline-offset: 5px;
}

@media (min-width: 990px) {
  .vtiles__stage {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: clamp(28rem, 36vw, 36rem);
  }

  .vtiles__center {
    order: 0;
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
  }

  .vtiles__product {
    height: clamp(20rem, 28vw, 28rem);
  }

  /* Arc : la moitié des tuiles à gauche du produit, l'autre à droite ; plus loin du centre, plus bas et plus
     incliné (--col, --drop et --tilt calculés dans la section). */
  .vtiles__tiles {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: repeat(var(--left), var(--vt-tile-w)) minmax(18rem, 1fr) repeat(var(--left), var(--vt-tile-w));
    align-items: center;
    column-gap: clamp(0.75rem, 2vw, 2.25rem);
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .vtiles__tile {
    grid-row: 1;
    grid-column: var(--col);
    width: var(--vt-tile-w);
    padding: 1.1rem 0.8rem 0.9rem;
    border-radius: 34px;
    rotate: var(--tilt, 0deg);
    translate: 0 var(--drop, 0px);
  }

  .vtiles__tile-media {
    height: clamp(7rem, 9vw, 9.5rem);
  }

  .vtiles__input:checked + .vtiles__tile {
    translate: 0 calc(var(--drop, 0px) - 10px);
  }
}

/* ---------- 14. Panier ---------- */
.cart-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.shipping-bar {
  padding: 0.95rem var(--drawer-pad, 1.25rem);
  background: var(--c-frame);
  font-size: var(--fs-s);
}

.shipping-bar.is-complete {
  background: color-mix(in srgb, var(--shape-alt) 22%, var(--c-bg));
}

.cart-page .shipping-bar {
  margin-bottom: 1.5rem;
  border-radius: var(--radius-m);
}

.shipping-bar__text {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.shipping-bar__text .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--c-accent);
}

.shipping-bar__track {
  height: 8px;
  margin-top: 0.65rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-border);
}

.shipping-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-accent);
}

.cart-items {
  display: grid;
  gap: 1.25rem;
}

cart-items.is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--dur-2);
}

.cart-item {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 1rem;
}

.cart-item__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--c-frame);
}

.cart-item__image,
.cart-item__media .art {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.cart-item__media .art__monogram {
  font-size: 2.5rem;
}

.cart-item__top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.cart-item__title {
  font-weight: var(--font-body-weight-bold);
  text-decoration: none;
}

.cart-item__meta {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.cart-item__price {
  display: grid;
  justify-items: end;
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-item__compare {
  font-size: var(--fs-2xs);
  color: var(--c-muted);
}

.cart-item__discount {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: var(--fs-2xs);
  color: var(--success);
}

.cart-item__discount .icon {
  width: 0.9rem;
  height: 0.9rem;
}

.cart-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 0.75rem;
}

/* Cible de 44 px de haut, soulignée au repos (lien discret mais identifiable). */
.cart-item__remove {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.cart-item__remove.link-underline {
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.cart-item__remove.link-underline:hover {
  text-decoration-thickness: 2px;
}

.cart-item__error {
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--c-error);
}

.upsell {
  margin-top: 1.75rem;
  padding: 1rem;
  border-radius: var(--radius-l);
  background: var(--c-faint);
}

.upsell__heading {
  margin-bottom: 0.85rem;
  font-size: var(--fs-xs);
  font-weight: var(--font-body-weight-bold);
  color: var(--c-muted);
}

.upsell__card {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
}

.upsell__media {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-frame);
}

.upsell__media img,
.upsell__media .art {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.upsell__media .art__monogram {
  font-size: 2rem;
}

.upsell__info {
  display: grid;
  gap: 0.15rem;
  font-size: var(--fs-s);
}

.upsell__info .price__reference,
.upsell__info .price__badge,
.upsell__info .price__saving {
  display: none;
}

.upsell__title {
  font-weight: var(--font-body-weight-bold);
  text-decoration: none;
}

.cart-summary {
  display: grid;
  gap: 0.8rem;
}

.cart-summary__discounts {
  display: grid;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--success);
}

.cart-summary__discounts li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cart-summary__discounts li span:last-child {
  margin-left: auto;
}

.cart-summary__discounts .icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* Remise surprise (snippets/cart-surprise.liquid) : carte menthe douce, rendue seulement quand Shopify applique la
   remise. Révélation (classe is-revealing, posée par le script) : fondu et glissement de 4 px (400 ms), puis un
   seul éclaircissement de la ligne de remise et du total (1,2 s). Rien au chargement ni au défilement ; rien si le
   visiteur réduit les animations. */
.cart-surprise {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem 1rem 0.85rem 0.8rem;
  border-radius: var(--radius-m);
  background: var(--c-pastille-alt);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 16%, transparent);
}

.cart-surprise__head {
  --surprise-glow: color-mix(in srgb, var(--c-surface) 85%, transparent);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-radius: var(--radius-s);
  font-weight: var(--font-body-weight-bold);
}

.cart-surprise__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--success);
}

.cart-surprise__icon .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.cart-surprise__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-s);
  line-height: 1.3;
}

.cart-surprise__amount {
  font-family: var(--font-heading-family);
  font-size: var(--fs-h4);
  color: var(--success);
  white-space: nowrap;
}

.cart-surprise__terms,
.cart-surprise__reference {
  padding-left: 2.75rem;
  font-size: var(--fs-2xs);
  line-height: 1.45;
  color: var(--c-muted);
}

/* Remise perdue après une modification du panier : phrase discrète sous les articles, sans couleur d'alerte. */
.cart-surprise-lost {
  margin-top: 1rem;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Tiroir sur un petit écran (ex. 360 × 640) avec le bloc de remise : une ligne d'article complète, le bloc et le
   bouton de paiement tiennent sans faire défiler les articles. Marges resserrées ; les logos de paiement du
   tiroir s'effacent (ils restent sur la page panier et la fiche produit). */
@media (max-width: 749px) and (max-height: 740px) {
  .cart-drawer__content:has(.cart-surprise) .drawer__header {
    min-height: 56px;
  }

  .cart-drawer__content:has(.cart-surprise) .shipping-bar {
    padding-block: 0.6rem 0.7rem;
  }

  .cart-drawer__content:has(.cart-surprise) .shipping-bar__track {
    margin-top: 0.45rem;
  }

  .cart-drawer__content:has(.cart-surprise) .drawer__body {
    padding-block: 0.85rem;
  }

  .cart-drawer__content:has(.cart-surprise) .drawer__footer {
    padding-block: 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  }

  .cart-drawer__content:has(.cart-surprise) .cart-summary {
    gap: 0.5rem;
  }

  .cart-drawer__content:has(.cart-surprise) .cart-summary .payment-icons {
    display: none;
  }

  .cart-drawer__content:has(.cart-surprise) .cart-surprise {
    gap: 0.2rem;
    padding: 0.6rem 0.8rem 0.65rem 0.65rem;
  }

  .cart-drawer__content:has(.cart-surprise) .cart-surprise__icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  .cart-drawer__content:has(.cart-surprise) .cart-surprise__terms,
  .cart-drawer__content:has(.cart-surprise) .cart-surprise__reference {
    padding-left: 2.35rem;
    line-height: 1.35;
  }
}

/* Écran très court (ex. 320 × 568) : la ligne d'article garde son sélecteur de quantité et « Supprimer » à
   l'écran. Titre de l'article sur deux lignes au plus, logos de paiement du tiroir masqués (ils restent sur la
   page panier et la fiche produit). */
@media (max-width: 749px) and (max-height: 600px) {
  .cart-drawer__content .cart-summary .payment-icons {
    display: none;
  }

  .cart-drawer__content .cart-item__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .cart-drawer__content .shipping-bar {
    padding-block: 0.6rem 0.7rem;
  }

  .cart-drawer__content .shipping-bar__track {
    margin-top: 0.45rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cart-surprise.is-revealing {
    animation: surprise-in 400ms var(--ease-out) both;
  }

  .cart-surprise.is-revealing .cart-surprise__head,
  .cart-surprise.is-revealing ~ .cart-summary__total {
    animation: surprise-glow 1.2s ease-out 400ms 1;
  }
}

@keyframes surprise-in {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}

@keyframes surprise-glow {
  30% {
    background-color: var(--surprise-glow);
    box-shadow: 0 0 0 0.35rem var(--surprise-glow);
  }
}

.cart-summary__total {
  --surprise-glow: color-mix(in srgb, var(--shape-alt) 40%, transparent);
  border-radius: var(--radius-s);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: var(--font-body-weight-bold);
}

.cart-summary__amount {
  font-family: var(--font-heading-family);
  font-size: var(--fs-h4);
}

.cart-summary__note {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.cart-summary__checkout .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.cart-summary .payment-icons__list {
  justify-content: center;
}

.cart-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.25rem;
  min-height: 16rem;
  text-align: center;
}

.cart-empty__title {
  font-family: var(--font-heading-family);
  font-size: var(--fs-h3);
}

.cart-page__title {
  margin-bottom: 2rem;
}

.cart-page__grid {
  display: grid;
  gap: 2.5rem;
}

.cart-note {
  display: grid;
  gap: 0.5rem;
  margin-top: 2rem;
}

.cart-page__summary {
  align-self: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-2);
}

@media (min-width: 990px) {
  .cart-page__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 4rem;
  }

  .cart-page__summary {
    position: sticky;
    top: calc(var(--sticky-offset) + 1.5rem);
  }
}

/* ---------- 15. Pages ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
}

@media (min-width: 990px) {
  .product-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }

  .product-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }
}

.card__link {
  display: block;
  text-decoration: none;
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-frame);
}

.card__image,
.card__media .art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out), opacity var(--dur-3) var(--ease-out);
}

.card__image--hover {
  opacity: 0;
}

@media (hover: hover) {
  .card__link:hover .card__image {
    transform: scale(1.035);
  }

  .card__link:hover .card__image--hover {
    opacity: 1;
  }
}

.card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}

.card__body {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.9rem;
}

.card__title {
  font-size: var(--fs-h4);
}

.card__price {
  font-size: var(--fs-s);
}

.collection-page__head,
.search-page__title {
  margin-bottom: 2rem;
}

.collection-page__text {
  max-width: 40rem;
  margin-top: 1rem;
  color: var(--c-muted);
}

.collection-page__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.collection-page__toolbar .field-select {
  width: auto;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 2rem 1.25rem;
}

.collection-tile {
  display: grid;
  gap: 0.6rem;
  text-decoration: none;
}

.collection-tile__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-frame);
}

.collection-tile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-tile__title {
  font-size: var(--fs-h3);
}

.collection-tile__count {
  font-size: var(--fs-s);
  color: var(--c-muted);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 3rem;
}

.pagination__link {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 0.5rem;
  border-radius: 999px;
  text-decoration: none;
}

.pagination__link:hover {
  background: var(--c-faint);
}

.pagination__link.is-current {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.search-form {
  display: flex;
  max-width: 40rem;
  margin-bottom: 3rem;
  padding-left: 1.25rem;
  border: 2px solid var(--c-field-border);
  border-radius: 999px;
  background: var(--c-surface);
}

.search-form__input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  border: 0;
  background: none;
  font-size: var(--fs-l);
}

.search-form__input:focus-visible {
  outline: none;
}

.search-form:focus-within {
  border-color: var(--c-accent);
}

.search-form:has(.search-form__input:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.search-form__submit {
  width: 56px;
  border: 0;
  border-radius: 50%;
  background: none;
}

.search-page__count {
  margin-bottom: 2rem;
  color: var(--c-muted);
}

.search-result__link {
  display: grid;
  gap: 0.5rem;
  text-decoration: none;
}

.search-result__type {
  font-size: var(--fs-2xs);
  color: var(--c-muted);
}

.search-result__title {
  font-size: var(--fs-h4);
}

.search-result__excerpt {
  font-size: var(--fs-s);
  color: var(--c-muted);
}

.page__title,
.withdrawal__title {
  margin-bottom: 2rem;
}

.not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.not-found__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading-family);
  font-size: var(--fs-h4);
  font-weight: var(--font-heading-weight-bold);
}

.not-found__code {
  position: relative;
  z-index: 0;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: calc(clamp(6rem, 3rem + 12vw, 13rem) * var(--heading-scale, 1));
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.not-found__code::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 1.1em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--shape);
  translate: -50% -50%;
}

.not-found__text {
  max-width: 30rem;
  color: var(--c-muted);
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1rem;
}

/* Rétractation en ligne */
.withdrawal__intro {
  margin-bottom: 2.5rem;
  color: var(--c-muted);
}

.withdrawal__step > summary {
  width: fit-content;
  list-style: none;
}

.withdrawal__step > summary::-webkit-details-marker {
  display: none;
}

.withdrawal__step[open] > summary {
  display: none;
}

.withdrawal__fields {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-2);
}

.withdrawal__legend {
  padding: 0;
  font-family: var(--font-heading-family);
  font-size: var(--fs-h4);
  font-weight: var(--font-heading-weight);
}

.withdrawal__receipt {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.withdrawal__receipt > .icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.55rem;
  border-radius: 50%;
  background: var(--c-pastille-alt);
  color: var(--success);
}

.withdrawal__receipt-title {
  margin-bottom: 0.5rem;
  font-size: var(--fs-h4);
}

/* Page mot de passe */
.password-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 4rem var(--gutter);
  text-align: center;
}

.password-page__inner {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  width: min(100%, 34rem);
}

.password-page__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: var(--fs-h3);
}

.password-page__logo {
  width: 12rem;
  height: auto;
}

.password-page__message {
  color: var(--c-muted);
}

.password-page__newsletter,
.password-page__login {
  width: 100%;
}

.password-page__login summary {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  margin-inline: auto;
  font-size: var(--fs-s);
  list-style: none;
  cursor: pointer;
}

.password-page__form {
  margin-top: 1.25rem;
  text-align: left;
}

/* ---------- 16. Pied de page ---------- */
/* Identité du vendeur toujours visible. Débordement coupé à l'horizontale : la vague reste visible. */
.footer {
  display: block;
  padding-top: calc(var(--pt, 96px) * 0.62);
  overflow-x: clip;
}

body:not(.has-waves) .footer {
  border-top: 1px solid var(--c-border);
}

@media (min-width: 750px) {
  .footer {
    padding-top: var(--pt, 96px);
  }
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem 2rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.footer__logo-image {
  width: var(--logo-width);
  height: auto;
}

.footer__wordmark-small {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: var(--fs-h3);
}

.footer__block--brand {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.footer__heading {
  margin-bottom: 0.75rem;
  font-family: var(--font-body-family);
  font-size: var(--fs-s);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: normal;
}

.footer__heading--large {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: var(--fs-h3);
}

.footer__text {
  max-width: 24rem;
  font-size: var(--fs-s);
  color: var(--c-muted);
}

.footer__links {
  display: grid;
  gap: 0;
}

.footer__link {
  display: inline-block;
  padding-block: 0.625rem;
  font-size: var(--fs-s);
  color: var(--c-muted);
  transition: color var(--dur-2);
}

.footer__link:hover {
  color: var(--c-accent);
}

.newsletter__field {
  display: flex;
  margin-top: 1.25rem;
  padding: 0.25rem 0.25rem 0.25rem 1.25rem;
  border: 2px solid var(--c-field-border);
  border-radius: 999px;
  background: var(--c-surface);
  transition: border-color var(--dur-2);
}

.newsletter__field:focus-within {
  border-color: var(--c-accent);
}

/* Le champ n'a pas d'anneau propre : anneau visible autour du champ entier. */
.newsletter__field:has(:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
}

.newsletter__input:focus-visible {
  outline: none;
}

.newsletter__input::placeholder {
  color: var(--c-muted);
}

.newsletter__submit {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--c-text);
  color: var(--c-bg);
}

.newsletter__submit .icon {
  transition: transform var(--dur-2) var(--ease-out);
}

.newsletter__submit:hover .icon {
  transform: translateX(3px);
}

.footer__identity {
  padding: 1.5rem clamp(1.1rem, 2.4vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--c-surface);
}

.footer__identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem 2rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-muted);
}

.footer__identity-grid strong {
  color: var(--c-text);
  font-weight: var(--font-body-weight-bold);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.25rem;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.footer__policies {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.footer__policies a {
  display: inline-block;
  padding-block: 0.7rem;
}

/* Grand nom de marque, coupé net au bas du pied de page : le décalage vers le bas est appliqué au texte, que le
   bloc (overflow: hidden) rogne ; rien ne dépasse du pied de page ni n'allonge la page. */
.footer__wordmark {
  margin: 0;
  padding: 0 var(--gutter);
  overflow: hidden;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-size: min(calc((100vw - 2 * var(--gutter)) / (var(--chars) * 0.56)), 18rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  color: var(--wordmark, var(--shape));
  user-select: none;
}

.footer__wordmark span {
  display: inline-block;
  translate: 0 0.12em;
}

/* Page avec barre collante : le pied de page garde une marge basse pour elle ; le nom reste entier au-dessus. */
body:has(sticky-atc) .footer__wordmark span {
  translate: none;
}

@media (min-width: 750px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 990px) {
  .footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .footer__block {
    grid-column: span 2;
  }

  .footer__block--brand {
    grid-column: span 4;
  }

  .footer__block--newsletter {
    grid-column: 9 / span 4;
  }
}

/* ---------- 20. Accessibilité et conformité ---------- */
/* Liens dans une phrase : zone de toucher agrandie à 44 px de haut (sans changer la mise en page). */
.product-note a,
.reviews__transparency a,
.price__shipping a,
.newsletter__consent a,
.announcement__link,
.footer__identity a,
.cart-summary__note a,
.compliance a,
.shipping-bar a,
.featured-review a {
  position: relative;
}

.product-note a::after,
.reviews__transparency a::after,
.price__shipping a::after,
.newsletter__consent a::after,
.announcement__link::after,
.footer__identity a::after,
.cart-summary__note a::after,
.compliance a::after,
.shipping-bar a::after,
.featured-review a::after {
  content: '';
  position: absolute;
  inset: calc(50% - 22px) -4px;
}

/* Texte agrandi (175 % et plus) sur petit écran : grilles en une colonne, rien n'est coupé.
   Requête en em : elle suit la taille de texte choisie par le visiteur, pas la largeur seule. */
@media (max-width: 22em) {
  .specs__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }


  .promise-bar__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Texte très agrandi (à partir de 200 % environ sur mobile ; pas un écran de 320 px à taille normale) : bouton
   de la barre collante sur toute la largeur, sous le prix. */
@media (max-width: 19em) {
  .sticky-atc__button {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Champs à 16 px minimum sur mobile : Safari iOS ne zoome pas la page au focus. */
@media (max-width: 749px) {
  .field-input,
  .field-select,
  .quantity__input,
  .newsletter__input {
    font-size: max(16px, 1em);
  }

  .field-select--sm {
    font-size: max(16px, var(--fs-s));
  }
}

/* Visionneuse : bouton Agrandir / Réduire (clavier et lecteurs d'écran). */
.zoom__toggle {
  position: absolute;
  top: 1rem;
  right: calc(1rem + 44px + 0.5rem);
  background: var(--c-surface);
}

.zoom__toggle[aria-pressed='true'] {
  background: var(--c-faint);
}

.zoom.is-zoomed .zoom__image {
  touch-action: none;
}

/* Paiements express (élément <shopify-accelerated-checkout> et sa version panier) : mêmes rayon et
   hauteur que le bouton principal, via les variables officielles lues dans leur shadow DOM. */
shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--radius-button);
  --shopify-accelerated-checkout-button-block-size: 52px;
  --shopify-accelerated-checkout-row-gap: 0.65rem;
  --shopify-accelerated-checkout-inline-alignment: center;
}

.cart-summary__express:empty {
  display: none;
}

/* Rétractation : champs obligatoires et récapitulatif de la demande. */
.withdrawal__required {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.withdrawal__summary {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin-block: 0.75rem;
  font-size: var(--fs-s);
}

.withdrawal__summary dt {
  color: var(--c-muted);
}

.withdrawal__receipt > div > * + * {
  margin-top: 0.5rem;
}

/* Lettre d'information : mention de désinscription et lien vers la politique de confidentialité. */
.newsletter__consent {
  margin-top: 0.75rem;
  font-size: var(--fs-2xs);
  color: var(--c-muted);
}

.newsletter__consent a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Page mot de passe : le formulaire englobe le bloc dépliant. */
.password-page__login-form {
  width: 100%;
}

/* ---------- 21. Petites boucles décoratives ----------
   Réglage du thème « Petites animations décoratives » (classe has-loops) : produit du hero qui flotte, formes du
   hero, autocollants, tampon de garantie, formes de l'offre finale. Lentes et de faible amplitude, jamais liées
   au défilement, désactivées si le visiteur demande moins d'animations. Uniquement transform (composé par le
   navigateur) : aucun recalcul de style, de mise en page ni de dessin à chaque image. */
@media (prefers-reduced-motion: no-preference) {
  .has-loops .hero__image:not(.hero__image--art) {
    animation: loop-float-soft 8s var(--ease-in-out) infinite alternate;
  }

  .has-loops .hero__circle {
    animation: loop-breathe 9s var(--ease-in-out) infinite alternate;
  }

  .has-loops .hero__blob,
  .has-loops .final-cta__blob--alt {
    animation: loop-drift 11s var(--ease-in-out) infinite alternate;
  }

  .has-loops .hero__sticker {
    animation: loop-float 7s var(--ease-in-out) infinite alternate;
  }

  .has-loops .hero__sticker--2 {
    animation-duration: 8s;
    animation-delay: -3s;
  }

  .has-loops .hero__sticker--3 {
    animation-delay: -5s;
  }

  .has-loops .seal__ring {
    animation: loop-spin 48s linear infinite;
  }

  .has-loops .final-cta__blob:not(.final-cta__blob--alt) {
    animation: loop-breathe 12s var(--ease-in-out) infinite alternate;
  }
}

/* Images-clés en transform : animations composées par le navigateur (aucun recalcul de style à chaque image,
   contrairement à scale, rotate et translate animés séparément). transform s'ajoute aux propriétés translate et
   rotate déjà posées sur ces éléments (centrage du cercle, inclinaison des autocollants). */
@keyframes loop-breathe {
  to {
    transform: scale(1.035);
  }
}

@keyframes loop-float {
  to {
    transform: translateY(-8px);
  }
}

@keyframes loop-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loop-float-soft {
  to {
    transform: translateY(-6px);
  }
}

/* Forme irrégulière qui tourne et glisse doucement (l'arrondi n'est pas animé : pas de dessin à chaque image). */
@keyframes loop-drift {
  50% {
    transform: translate(6px, -4px) rotate(7deg);
  }

  to {
    transform: translate(-4px, 3px) rotate(-5deg) scale(1.03);
  }
}