/* ============================================================
   OPEN SHOP — Savon au curcuma
   Feuille de style unique. Ordre : polices, tokens, base,
   motion, composants (dans l'ordre de la page), responsive.
   ============================================================ */

/* ── POLICES (locales, aucun appel réseau) ─────────────────── */
@font-face{font-family:'Playfair Display';src:url('vendor/fonts/playfair-display-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('vendor/fonts/playfair-display-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('vendor/fonts/playfair-display-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('vendor/fonts/playfair-display-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('vendor/fonts/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('vendor/fonts/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('vendor/fonts/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ── TOKENS ────────────────────────────────────────────────── */
:root{
  /* Or : décoratif vs texte. --gold-ink est le seul or lisible
     sur crème (4,75:1). --gold reste pour les aplats et bordures. */
  --gold:        #C8860A;
  --gold-lite:   #E09B18;
  --gold-glow:   #F2B830;
  --gold-ink:    #9A6605;
  --gold-soft:   #FDE68A;

  --cream:       #FFFBF2;
  --cream-2:     #FDF3DC;
  --cream-3:     #F5E4B8;
  --white:       #FFFEF9;

  --brown:       #3D2100;
  --brown-2:     #6B3D0A;
  --brown-deep:  #2A1400;

  --ink:         #2D1600;
  --ink-2:       #5C3810;
  --ink-3:       #7A5522;

  --wa:          #25D366;   /* icône seulement */
  --wa-deep:     #0B7A6E;   /* fond de bouton, texte blanc : 5,2:1 */
  --green-ink:   #15803D;   /* texte « vous économisez » : 4,9:1 */
  --red-ink:     #B4322A;

  /* Courbes — jamais les easings natifs, trop mous */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --shadow-sm:   0 2px 8px rgba(90,50,0,.06);
  --shadow-md:   0 8px 28px rgba(90,50,0,.10);
  --shadow-lg:   0 20px 50px rgba(90,50,0,.16);
  --shadow-gold: 0 10px 28px rgba(200,134,10,.30);

  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px;
  --pad-x: clamp(20px, 5vw, 64px);
  --maxw: 1160px;

  --nav-h: 66px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--cream);color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
/* height:auto est indispensable : sans lui, l'attribut height="..." du
   HTML l'emporte et aspect-ratio est ignoré. */
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

/* Grain discret — sous le contenu, jamais au-dessus */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
}

/* Focus visible partout — obligatoire, le site se navigue au clavier */
:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:12px;top:-100px;z-index:1000;
  background:var(--brown);color:#fff;padding:12px 20px;border-radius:0 0 12px 12px;
  font-weight:700;text-decoration:none;transition:top 180ms var(--ease-out);
}
.skip-link:focus{top:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   MOTION — un seul système, réutilisé partout
   ============================================================ */

/* Révélation au scroll. La cascade est locale à chaque groupe
   (--i remis à zéro par groupe), pas globale à la page. */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 55ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* Entrée du hero — animation CSS : tourne hors du thread principal,
   donc reste fluide pendant que le reste de la page charge. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-eyebrow,.hero-title,.hero-desc,.hero-actions,.hero-stats,.hero-visual{
  opacity:0;animation:rise 620ms var(--ease-out) both;
}
.hero-eyebrow{animation-delay:80ms}
.hero-title  {animation-delay:150ms}
.hero-desc   {animation-delay:230ms}
.hero-actions{animation-delay:310ms}
.hero-stats  {animation-delay:390ms}
.hero-visual {animation-delay:200ms;animation-duration:800ms}

/* Le survol n'existe pas au doigt : le tactile déclenche de faux hovers */
@media (hover:hover) and (pointer:fine){
  .lift{transition:transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out)}
  .lift:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
  .zoom img{transition:transform 620ms var(--ease-out)}
  .zoom:hover img{transform:scale(1.045)}
}

/* Appui : le seul retour qui compte au doigt */
.btn,.p-order,.faq-q,.nav-cta{transition:transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease}
.btn:active,.p-order:active,.nav-cta:active{transform:scale(.97)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  [data-reveal]{opacity:1;transform:none;transition:opacity 200ms ease}
  .hero-eyebrow,.hero-title,.hero-desc,.hero-actions,.hero-stats,.hero-visual{opacity:1;animation:none}
  .lift:hover,.zoom:hover img{transform:none}
  .btn:active,.p-order:active,.nav-cta:active{transform:none}
  .blob,.ring{animation:none !important}
  .sticky-bar{transition:opacity 200ms ease}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--nav-h);padding:0 var(--pad-x);
  background:rgba(255,251,242,.82);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid rgba(200,134,10,.12);
  transition:height 240ms var(--ease-out), box-shadow 240ms var(--ease-out), background-color 240ms ease;
}
.nav.is-scrolled{height:58px;box-shadow:0 4px 24px rgba(90,50,0,.10);background:rgba(255,251,242,.94)}

.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;min-height:44px}
.logo-mark{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-lite),var(--gold));
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(200,134,10,.35);
}
.logo-mark svg{width:21px;height:21px;fill:#fff}
.logo-name{font-family:'Playfair Display',Georgia,serif;font-size:21px;font-weight:800;color:var(--brown);letter-spacing:-.01em;line-height:1}
.logo-name span{color:var(--gold-ink)}

.nav-right{display:flex;align-items:center;gap:14px}
.nav-tel{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:14px;font-weight:700;color:var(--brown-2);white-space:nowrap;
}
.nav-tel svg{width:15px;height:15px;fill:var(--wa-deep);flex-shrink:0}
.nav-tel:hover{color:var(--gold-ink)}

.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--gold-glow),var(--gold-lite));
  color:var(--brown-deep);
  font-size:14px;font-weight:700;padding:11px 20px;border-radius:40px;
  box-shadow:var(--shadow-gold);white-space:nowrap;
}
.nav-cta svg{width:16px;height:16px;fill:currentColor}
@media (hover:hover){.nav-cta:hover{box-shadow:0 14px 34px rgba(200,134,10,.42);transform:translateY(-2px)}}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.005em;
  padding:15px 28px;border-radius:50px;text-decoration:none;text-align:center;
  min-height:48px;
}
.btn svg{width:19px;height:19px;fill:currentColor;flex-shrink:0}

/* Or + texte brun foncé : 6,3:1, et bien plus haut de gamme que blanc sur or */
.btn-gold{background:linear-gradient(135deg,var(--gold-glow),var(--gold-lite));color:var(--brown-deep);box-shadow:var(--shadow-gold)}
@media (hover:hover){.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(200,134,10,.45)}}

.btn-wa{background:var(--wa-deep);color:#fff;box-shadow:0 8px 24px rgba(11,122,110,.32)}
@media (hover:hover){.btn-wa:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,122,110,.42)}}

.btn-ghost{border:2px solid var(--cream-3);color:var(--brown-2);background:transparent}
@media (hover:hover){.btn-ghost:hover{border-color:var(--gold-glow);background:rgba(242,184,48,.10)}}

.btn-light{background:var(--white);color:var(--brown);box-shadow:0 10px 30px rgba(0,0,0,.20)}
@media (hover:hover){.btn-light:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.28)}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + 48px) var(--pad-x) 64px;
  display:flex;align-items:center;min-height:min(94vh, 860px);
}
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.blob-1{width:min(720px,90vw);aspect-ratio:1;top:-220px;right:-140px;
  background:radial-gradient(circle,rgba(224,155,24,.16) 0%,transparent 65%);
  animation:drift-1 14s var(--ease-in-out) infinite}
.blob-2{width:min(520px,70vw);aspect-ratio:1;bottom:-140px;left:-60px;
  background:radial-gradient(circle,rgba(200,134,10,.11) 0%,transparent 65%);
  animation:drift-2 18s var(--ease-in-out) infinite}
@keyframes drift-1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-34px,24px,0) scale(1.06)}}
@keyframes drift-2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(26px,-24px,0)}}

.hero-inner{
  position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;
}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(200,134,10,.10);border:1px solid rgba(200,134,10,.24);
  color:var(--gold-ink);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  padding:7px 15px;border-radius:40px;margin-bottom:20px;
}
.hero-eyebrow::before{content:'✦';font-size:12px}

.hero-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(40px,5.6vw,68px);font-weight:800;line-height:1.06;
  letter-spacing:-.02em;color:var(--brown);margin-bottom:20px;
  text-wrap:balance;
}
.hero-title em{font-style:italic;font-weight:700;color:var(--gold-ink);display:block}

.hero-desc{font-size:16.5px;line-height:1.75;color:var(--ink-2);max-width:46ch;margin-bottom:32px}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:38px}

.hero-stats{display:flex;gap:clamp(20px,3vw,34px);flex-wrap:wrap;align-items:center}
.stat-val{font-family:'Playfair Display',Georgia,serif;font-size:30px;font-weight:800;color:var(--brown);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat-label{font-size:11.5px;color:var(--ink-3);margin-top:5px;font-weight:500;line-height:1.35}
.stat-sep{width:1px;align-self:stretch;background:linear-gradient(transparent,var(--cream-3) 30%,var(--cream-3) 70%,transparent)}

.hero-visual{position:relative;display:grid;place-items:center}
.ring{
  position:absolute;width:min(430px,88%);aspect-ratio:1;border-radius:50%;
  border:2px dashed rgba(200,134,10,.26);
  animation:spin 34s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-photo{position:relative;z-index:1;animation:float 8s var(--ease-in-out) infinite}
@keyframes float{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,-14px,0) rotate(1deg)}}
/* Un coin très arrondi plutôt qu'un ovale : l'ovale mangeait le produit
   et ne laissait voir qu'un mur de savon. */
.hero-photo img{
  width:min(400px,82vw);aspect-ratio:1/1.04;object-fit:cover;object-position:center 58%;
  border-radius:34px 34px 34px 110px;
  border:3px solid rgba(200,134,10,.18);
  box-shadow:0 28px 70px rgba(140,75,10,.28), 0 0 0 9px rgba(200,134,10,.06);
}
.hero-badge{
  position:absolute;right:-4px;bottom:4px;z-index:2;
  background:linear-gradient(135deg,var(--gold-glow),var(--gold-lite));color:var(--brown-deep);
  border-radius:18px;padding:11px 16px;font-size:12px;font-weight:700;line-height:1.35;text-align:center;
  box-shadow:0 10px 26px rgba(200,134,10,.42);border:2px solid rgba(255,255,255,.45);
}

/* ============================================================
   BANDEAU CONFIANCE
   ============================================================ */
.trust{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brown) 0%,var(--brown-2) 100%);
  padding:22px 0;   /* pas de marge latérale : la piste doit filer bord à bord */
}
.trust::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(242,184,48,.13) 0%,transparent 70%)}

/* La bande porte data-reveal uniquement pour déclencher le reflet ;
   elle ne doit pas se fondre elle-même, ses items s'en chargent. */
.trust[data-reveal]{opacity:1;transform:none;transition:none}
/* Un reflet doré traverse la bande UNE fois, quand elle entre à l'écran.
   Pas de boucle : une animation qui tourne en continu sur une bande de texte
   se lit mal et oblige à prévoir un bouton pause (WCAG 2.2.2). */
.trust::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transform:translate3d(-115%,0,0);
  background:linear-gradient(104deg,transparent 38%,rgba(242,184,48,.20) 47%,rgba(255,255,255,.13) 53%,transparent 63%);
}
.trust.is-in::after{animation:sheen 950ms var(--ease-in-out) 240ms both}
@keyframes sheen{
  0%{transform:translate3d(-115%,0,0);opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  100%{transform:translate3d(115%,0,0);opacity:0}
}
/* ── Défilement horizontal ──────────────────────────────────
   La piste contient trois copies identiques des garanties et se
   déplace d'exactement une copie (-33.333 %) avant de reboucler :
   le raccord est invisible, il n'y a jamais de trou même sur un
   très large écran. Seule la première copie est lue par les
   lecteurs d'écran, les deux autres sont aria-hidden.
   Un seul transform animé → tout se joue sur le GPU, rien sur le
   thread principal.
   ──────────────────────────────────────────────────────────── */
.trust-viewport{
  position:relative;z-index:1;overflow:hidden;
  /* les items s'effacent aux deux bords au lieu d'être coupés net */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.trust-track{
  display:flex;width:max-content;
  animation:defile 34s linear infinite;
  will-change:transform;
}
@keyframes defile{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-25%,0,0)}   /* 4 copies : on avance d'une seule */
}
.trust-group{display:flex;align-items:center}

/* Une bande qui défile sans fin doit pouvoir s'arrêter : au survol,
   et dès qu'un élément au clavier prend le focus à l'intérieur. */
.trust:hover .trust-track,
.trust:focus-within .trust-track{animation-play-state:paused}

.trust-item{display:flex;align-items:center;gap:11px;flex:0 0 auto;padding:0 26px}
.trust-item + .trust-item{position:relative}
.trust-item + .trust-item::before{
  content:'';position:absolute;left:-2px;top:50%;
  width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:rgba(242,184,48,.42);
}
.trust-icon{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18)}

@media (prefers-reduced-motion: reduce){
  /* Plus de défilement du tout : on revient à une grille fixe et on
     masque les copies, sinon les garanties 3, 4 et 5 resteraient
     hors écran sans aucun moyen d'y accéder. */
  .trust-viewport{-webkit-mask-image:none;mask-image:none}
  .trust-track{animation:none;width:100%;justify-content:center}
  .trust-group{flex-wrap:wrap;justify-content:center;gap:14px 0;max-width:var(--maxw)}
  .trust-group ~ .trust-group{display:none}
  .trust-item + .trust-item::before{display:none}
  .trust.is-in::after{animation:none}
}
.trust-icon svg{width:18px;height:18px;stroke:var(--gold-glow);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trust-title{font-size:13.5px;font-weight:700;color:#fff;line-height:1.25}
.trust-sub{font-size:12px;color:rgba(255,255,255,.72);margin-top:2px;line-height:1.3}

/* ============================================================
   SECTIONS — communs
   ============================================================ */
.section{padding:clamp(64px,9vw,104px) var(--pad-x)}
.section-inner{max-width:var(--maxw);margin:0 auto}
.section-head{max-width:640px;margin:0 auto clamp(40px,5vw,56px);text-align:center}
.section-label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.section-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(28px,3.8vw,44px);font-weight:700;line-height:1.18;letter-spacing:-.015em;
  color:var(--brown);text-wrap:balance;
}
.section-sub{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}

.bg-white{background:var(--white)}
.bg-cream2{background:var(--cream-2)}

/* ============================================================
   LE PRODUIT
   ============================================================ */
.produit{background:var(--cream-2)}
.produit-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center;max-width:var(--maxw);margin:0 auto}
.produit-photo{
  border-radius:var(--r-lg);overflow:hidden;background:var(--cream);
  border:1px solid var(--cream-3);box-shadow:var(--shadow-md);
}
.produit-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center}
.produit-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(24px,3.2vw,34px);font-weight:700;color:var(--brown);line-height:1.2;margin-bottom:16px;letter-spacing:-.015em}
.produit-list{list-style:none;display:grid;gap:13px;margin-top:22px}
.produit-list li{display:flex;gap:12px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.produit-list li::before{
  content:'';flex-shrink:0;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:rgba(200,134,10,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6605' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.produit-list strong{color:var(--ink);font-weight:700}

/* ============================================================
   AVANT / APRÈS
   ============================================================ */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;max-width:900px;margin:0 auto}
.ba-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow-md);background:var(--brown-deep);
}
/* Les avant/après n'ont pas tous exactement le même format. On affiche donc
   chaque photo ENTIÈRE (contain) sur un fond brun : rien n'est rogné, et les
   cadres restent identiques d'une carte à l'autre. Le fond est une couleur,
   pas une image floutée : zéro octet de plus à télécharger. */
.ba-card::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% 45%, #4A2A05 0%, #2A1400 78%);
}
.ba-card img{width:100%;aspect-ratio:4/3;object-fit:contain;object-position:center}
.ba-pill{
  position:absolute;top:12px;left:12px;z-index:2;
  background:rgba(61,33,0,.86);color:var(--gold-glow);
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;backdrop-filter:blur(6px);
  border:1px solid rgba(242,184,48,.3);
}
.ba-overlay{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:34px 18px 16px;
  background:linear-gradient(to top,rgba(30,14,0,.92) 8%,rgba(30,14,0,.6) 55%,transparent 100%);
}
.ba-zone{font-size:14px;font-weight:700;color:#fff;line-height:1.3}
.ba-result{display:flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.88);margin-top:5px;line-height:1.35}
.ba-result::before{
  content:'';flex-shrink:0;width:17px;height:17px;border-radius:50%;
  background:var(--wa-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
.ba-note{
  margin:26px auto 0;max-width:640px;text-align:center;
  font-size:12.5px;line-height:1.65;color:var(--ink-3);
}
.ba-cta{text-align:center;margin-top:36px}
.ba-cta p{font-size:16px;color:var(--ink-2);margin-bottom:20px;line-height:1.65;text-wrap:balance}
.ba-cta strong{color:var(--brown);font-weight:700}

/* ============================================================
   TARIFS
   ============================================================ */
.pricing{position:relative;overflow:hidden}
.pricing::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(900px,140vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(242,184,48,.09) 0%,transparent 60%);
}
.pricing-grid{
  position:relative;z-index:1;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  max-width:940px;margin:0 auto;align-items:stretch;
}
.p-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:2px solid var(--cream-3);border-radius:var(--r-lg);
  text-align:center;box-shadow:var(--shadow-sm);overflow:hidden;
}
/* Le padding vit sur le bloc haut, pas sur la carte : le bandeau des
   cadeaux doit filer d'un bord à l'autre, comme sur la maquette. */
.p-haut{display:flex;flex-direction:column;flex:1 1 auto;padding:30px 26px}

.p-nom{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:800;color:var(--brown);line-height:1.15}
.p-cure{
  display:inline-block;margin:9px auto 0;padding:5px 13px;border-radius:999px;
  background:rgba(21,128,61,.12);color:var(--green-ink);
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.p-offre{margin-top:11px;font-size:14.5px;color:var(--ink-2);line-height:1.4}
.p-offre b{color:var(--gold-ink);font-weight:800}

/* ── Bandeau des cadeaux ───────────────────────────────────────
   En vert, collé au bas de la carte : c'est la dernière chose vue
   avant de cliquer, et ça ne se confond pas avec le prix. */
/* Hauteur identique sur les trois cartes, qu'il y ait un cadeau ou deux :
   sinon les boutons « Commander » se décalent de 60 px d'une carte à
   l'autre et la rangée paraît bâclée. */
.offerts{
  margin-top:auto;background:var(--green-ink);color:#fff;text-align:left;
  min-height:120px;display:flex;flex-direction:column;justify-content:center;
}
/* Les 120 px couvrent un cadeau comme deux : les boutons « Commander ce
   pack » restent sur la même ligne d'une carte à l'autre. */
.offert{display:flex;align-items:center;gap:11px;padding:11px 16px}
.offert + .offert{border-top:1px solid rgba(255,255,255,.2)}
.offert-vign{
  flex-shrink:0;width:38px;height:38px;border-radius:9px;overflow:hidden;
  display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
}
.offert-vign img{width:100%;height:100%;object-fit:cover}
.offert-vign svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linejoin:round}
.offert-nom{flex:1;font-size:13.5px;font-weight:600;line-height:1.3;color:rgba(255,255,255,.95)}
.offert-nom b{font-weight:800;color:#fff}
.offert-prix{flex-shrink:0;font-size:13.5px;font-weight:800;color:rgba(255,255,255,.72);text-decoration-thickness:1.6px}

/* Le pack d'entrée n'a pas de cadeau : le bandeau reste, en creux, et
   dit à partir d'où on en reçoit. Sans lui la carte serait plus courte
   que les deux autres et paraîtrait bâclée. */
.offerts-vide{background:var(--cream-2);border-top:1.5px dashed var(--cream-3)}
.offerts-vide .offert-nom{padding:14px 20px;color:var(--ink-3);font-weight:600;text-align:center;line-height:1.5}
.p-card.is-star{
  border-color:var(--gold);
  background:linear-gradient(165deg,#FFFEF9 0%,#FEF6E2 100%);
  box-shadow:0 12px 40px rgba(200,134,10,.20);
}
.p-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(135deg,var(--gold-glow),var(--gold-lite));color:var(--brown-deep);
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 16px;border-radius:20px;box-shadow:0 6px 16px rgba(200,134,10,.42);
}

/* Compteur de savons : un pictogramme par savon, groupés par lots de trois.
   L'espace plus large entre les lots fait lire « 3, 6, 9 » d'un coup d'œil,
   sans avoir à compter. Les barres sont fines parce qu'il peut y en avoir
   neuf : à 30 px elles débordaient de la carte. */
.p-bars{display:flex;justify-content:center;gap:13px;margin-bottom:18px;min-height:52px;align-items:flex-end}
.p-lot{display:flex;gap:4px;align-items:flex-end}
.p-bar{
  width:22px;height:36px;border-radius:5px;
  background:linear-gradient(150deg,var(--gold-glow) 0%,var(--gold-lite) 55%,var(--gold) 100%);
  box-shadow:0 5px 14px rgba(200,134,10,.32), inset 0 1px 0 rgba(255,255,255,.5);
  position:relative;
  transform:translateY(10px) scale(.86);opacity:0;
  transition:transform 480ms var(--ease-out), opacity 380ms var(--ease-out);
  transition-delay:calc(var(--b) * 90ms);
}
.p-bar::after{content:'';position:absolute;inset:auto 4px 6px 4px;height:8px;border-radius:2px;background:rgba(255,255,255,.72)}
.p-card.is-in .p-bar{transform:none;opacity:1}
@media (prefers-reduced-motion: reduce){.p-bar{opacity:1;transform:none}}

.p-qty{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
/* Le franc CFA est le prix qu'on paie : c'est lui qui est gros. L'euro
   passe dessous, en simple repère pour la diaspora. */
.p-price{font-family:'Playfair Display',Georgia,serif;font-size:40px;font-weight:800;color:var(--brown);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.p-price .cur{font-size:18px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.p-was{display:block;margin-top:7px;font-size:14px;color:var(--ink-3)}
.p-was s{color:var(--red-ink);text-decoration-thickness:1.5px}

/* Le franc juste sous l'euro : plus petit que le prix, mais plus lourd
   que le détail au savon — c'est le montant que la cliente sortira de sa
   poche, il ne doit pas se lire comme une note de bas de page. */
/* La gratuité de la livraison est l'argument qu'on met en avant : elle a
   droit à sa propre pastille verte, pas à une ligne de plus dans une liste. */
.liv-free{
  display:inline-block;margin-top:14px;padding:6px 14px;border-radius:999px;
  background:rgba(21,128,61,.12);color:var(--green-ink);
  font-size:12px;font-weight:800;letter-spacing:.03em;
}
.liv-fee{
  display:inline-block;margin-top:14px;padding:6px 14px;border-radius:999px;
  background:var(--cream-2);color:var(--ink-3);
  font-size:12px;font-weight:700;letter-spacing:.03em;
}
/* Pour les autres pays, la pastille est un vrai lien : c'est la seule
   porte d'entrée, le formulaire n'accepte pas encore ces pays. Elle doit
   donc se toucher confortablement au pouce. */
.liv-wa{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;border:1.5px solid var(--gold-lite);color:var(--brown-2);
  transition:background 180ms var(--ease),border-color 180ms var(--ease)}
@media (hover:hover){.liv-wa:hover{background:rgba(242,184,48,.14);border-color:var(--gold-glow)}}

.pay-chip-free{border-color:rgba(21,128,61,.34);color:var(--green-ink);background:rgba(21,128,61,.08)}
.pay-chip-free svg{fill:var(--green-ink)}

.p-fcfa{margin-top:7px;font-size:14px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.p-unit{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.p-save{
  display:inline-block;margin:16px 0 4px;
  background:rgba(21,128,61,.11);color:var(--green-ink);
  font-size:12px;font-weight:700;padding:5px 13px;border-radius:20px;
}
/* Le pack d'entrée n'offre aucune remise : le badge garde la place et le
   rythme visuel, mais reste neutre — annoncer « vous économisez 0 F » serait
   ridicule, et supprimer le badge décalerait la carte par rapport aux deux
   autres. */
.p-save-neutre{background:var(--cream-2);color:var(--ink-3)}

.p-perks{list-style:none;text-align:left;display:grid;gap:9px;margin:20px 0 24px}
/* La puce est en position absolue, pas en flex : sinon un <b> à l'intérieur
   du <li> devient un deuxième élément flex et la phrase se coupe en deux
   blocs mal alignés (« Livraison offerte » / « à Cotonou & Calavi »). */
.p-perks li{font-size:13.5px;line-height:1.5;color:var(--ink-2);position:relative;padding-left:27px}
.p-perks li::before{
  content:'';position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:rgba(200,134,10,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6605' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
.p-order{
  margin-top:auto;width:100%;min-height:50px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px;border-radius:50px;font-size:14.5px;font-weight:700;
}
.p-order svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.p-order.filled{background:linear-gradient(135deg,var(--gold-glow),var(--gold-lite));color:var(--brown-deep);box-shadow:var(--shadow-gold)}
.p-order.outline{border:2px solid var(--cream-3);color:var(--brown-2)}
@media (hover:hover){
  .p-order.filled:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(200,134,10,.44)}
  .p-order.outline:hover{border-color:var(--gold-glow);background:rgba(242,184,48,.10)}
}

.pay-row{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:38px;flex-wrap:wrap;position:relative;z-index:1}
.pay-label{font-size:13px;font-weight:600;color:var(--ink-3)}
.pay-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--white);border:1.5px solid var(--cream-3);border-radius:30px;
  padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--brown-2);
}
.pay-chip .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.pay-chip svg{width:15px;height:15px;stroke:var(--gold-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   COMMENT COMMANDER
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;max-width:940px;margin:0 auto}
.step{position:relative;padding:28px 24px;border-radius:var(--r-lg);background:var(--cream);border:1.5px solid var(--cream-3)}
.step-n{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,var(--gold-glow),var(--gold-lite));color:var(--brown-deep);
  font-family:'Playfair Display',Georgia,serif;font-size:19px;font-weight:800;
  box-shadow:0 6px 16px rgba(200,134,10,.3);
}
.step-title{font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:700;color:var(--brown);margin-bottom:8px}
.step-desc{font-size:14px;line-height:1.65;color:var(--ink-2)}

/* ============================================================
   BIENFAITS
   ============================================================ */
.ben-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.ben-card{
  background:var(--cream);border:1.5px solid var(--cream-3);border-radius:var(--r-md);
  padding:28px 24px;box-shadow:var(--shadow-sm);
}
@media (hover:hover){.ben-card:hover{border-color:rgba(200,134,10,.3)}}
.ben-icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(224,155,24,.22),rgba(200,134,10,.08));
}
.ben-icon svg{width:23px;height:23px;stroke:var(--gold-ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ben-title{font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:700;color:var(--brown);margin-bottom:9px}
.ben-desc{font-size:14px;line-height:1.7;color:var(--ink-2)}

/* ============================================================
   INGRÉDIENTS (section sombre)
   ============================================================ */
.ingr{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  background:linear-gradient(150deg,var(--brown) 0%,var(--brown-deep) 100%);
}
.ingr::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='4' fill='%23ffffff' fill-opacity='0.025'/%3E%3C/svg%3E");
}
.ingr .section-label{color:var(--gold-glow)}
.ingr .section-title{color:#fff}
.ingr .section-sub{color:rgba(255,255,255,.72)}
.ingr-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:16px;max-width:900px;margin:0 auto}
.ingr-item{
  background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);padding:24px 15px;
  transition:background-color 240ms ease, transform 240ms var(--ease-out);
}
@media (hover:hover){.ingr-item:hover{background:rgba(255,255,255,.11);transform:translateY(-4px)}}
.ingr-emoji{font-size:32px;line-height:1;display:block;margin-bottom:12px}
.ingr-name{font-family:'Playfair Display',Georgia,serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:6px}
.ingr-desc{font-size:12px;line-height:1.55;color:rgba(255,255,255,.72)}

/* ============================================================
   AVIS CLIENTES
   ============================================================ */
/* Des captures WhatsApp brutes plutôt que des citations mises en page :
   dans ce marché, la capture EST la preuve. On ne retouche rien — seules
   la barre d'état du téléphone et la zone de saisie sont recadrées. */
.avis-grid{
  display:grid;gap:20px;max-width:1000px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.avis{
  background:var(--white);border:1.5px solid var(--cream-3);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.avis img{width:100%;height:auto;display:block;background:#111}
.avis-pied{padding:14px 16px 15px;display:flex;flex-direction:column;gap:3px}
.avis-nom{font-size:13px;font-weight:800;color:var(--brown);letter-spacing:.02em}
.avis-mot{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.avis-note{
  max-width:640px;margin:26px auto 0;text-align:center;
  font-size:12.5px;line-height:1.7;color:var(--ink-3);text-wrap:pretty;
}
@media (hover:hover) and (pointer:fine){
  .avis{transition:transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out)}
  .avis:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
}

.avis-glisser{display:none}

/* ── Carrousel sur téléphone ───────────────────────────────────
   Six captures empilées, c'est six écrans de défilement vertical
   avant de revoir le prix. En rangée qui glisse, la cliente en voit
   autant qu'elle veut sans quitter la section.
   La carte suivante dépasse volontairement (78 %) : c'est ce bout
   visible qui dit « ça glisse », sans avoir à l'écrire. */
@media (max-width:760px){
  .avis-glisser{
    display:block;text-align:center;margin:-10px 0 16px;
    font-size:12.5px;font-weight:700;color:var(--gold-ink);letter-spacing:.02em;
  }
  .avis-grid{
    display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* déborde jusqu'aux bords de l'écran, mais le premier et le dernier
       restent alignés sur la marge du texte */
    margin:0 calc(var(--pad-x) * -1);padding:4px var(--pad-x) 10px;
    scroll-padding-inline:var(--pad-x);
    scrollbar-width:none;
  }
  .avis-grid::-webkit-scrollbar{display:none}
  .avis{flex:0 0 78%;scroll-snap-align:center}
  .avis-note{margin-top:18px}
}
@media (prefers-reduced-motion: reduce){
  .avis-grid{scroll-behavior:auto}
}

/* ============================================================
   LIVRAISON
   ============================================================ */
/* minmax à 205px : il faut que les quatre zones tiennent sur une ligne en
   grand écran, sinon la quatrième s'étale seule sur toute la largeur. */
.liv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:18px;max-width:1000px;margin:0 auto}
.liv-card{background:var(--cream);border:1.5px solid var(--cream-3);border-radius:var(--r-md);padding:28px 24px;text-align:center;box-shadow:var(--shadow-sm)}
.liv-flag{font-size:36px;line-height:1;display:block;margin-bottom:14px}
.liv-country{font-family:'Playfair Display',Georgia,serif;font-size:19px;font-weight:700;color:var(--brown);margin-bottom:10px}
.liv-delay{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;
  background:rgba(200,134,10,.12);color:var(--gold-ink);
  font-size:12.5px;font-weight:700;padding:5px 13px;border-radius:20px;
}
.liv-delay svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.liv-detail{font-size:13px;line-height:1.65;color:var(--ink-2)}
.liv-detail strong{color:var(--brown);font-weight:700}

/* ============================================================
   FAQ — <details> natif : accessible et sans JS
   ============================================================ */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:var(--white);border:1.5px solid var(--cream-3);border-radius:var(--r-md);overflow:hidden}
.faq-item[open]{border-color:rgba(200,134,10,.35);box-shadow:var(--shadow-sm)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;cursor:pointer;list-style:none;
  font-size:15.5px;font-weight:700;color:var(--brown);line-height:1.45;
}
.faq-q::-webkit-details-marker{display:none}
@media (hover:hover){.faq-q:hover{background:rgba(242,184,48,.07)}}
.faq-q::after{
  content:'';flex-shrink:0;width:22px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6605' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:transform 240ms var(--ease-out);
}
.faq-item[open] .faq-q::after{transform:rotate(180deg)}
.faq-a{padding:0 22px 20px;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.faq-a strong{color:var(--brown);font-weight:700}

/* Ouverture animée là où le navigateur sait le faire ; ailleurs
   le panneau apparaît d'un coup, ce qui reste parfaitement correct. */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq-item::details-content{
    height:0;overflow:hidden;opacity:0;
    transition:height 280ms var(--ease-out), content-visibility 280ms allow-discrete, opacity 220ms ease;
  }
  .faq-item[open]::details-content{height:auto;opacity:1}
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta{padding:clamp(64px,9vw,104px) var(--pad-x);background:var(--cream);text-align:center}
.cta-box{
  position:relative;overflow:hidden;max-width:740px;margin:0 auto;
  background:linear-gradient(140deg,var(--brown) 0%,var(--brown-2) 62%,var(--gold) 145%);
  border-radius:var(--r-xl);padding:clamp(44px,6vw,64px) clamp(26px,5vw,48px);
  box-shadow:0 28px 68px rgba(90,45,0,.30);
}
.cta-box::before{content:'';position:absolute;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.055);top:-130px;right:-90px}
.cta-box::after{content:'';position:absolute;width:210px;height:210px;border-radius:50%;background:rgba(242,184,48,.12);bottom:-70px;left:30px}
.cta-title{position:relative;z-index:1;font-family:'Playfair Display',Georgia,serif;font-size:clamp(28px,4.2vw,40px);font-weight:800;color:#fff;line-height:1.16;letter-spacing:-.015em;margin-bottom:14px;text-wrap:balance}
.cta-desc{position:relative;z-index:1;font-size:16px;line-height:1.7;color:rgba(255,255,255,.86);margin-bottom:34px;text-wrap:pretty}
.cta-actions{position:relative;z-index:1;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-meta{position:relative;z-index:1;display:flex;justify-content:center;gap:8px 22px;margin-top:26px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9)}
.cta-meta span{display:inline-flex;align-items:center;gap:7px}
/* Au doigt, une cible de 18 px de haut se rate une fois sur deux : le
   numéro est un lien qu'on tape, il lui faut ses 44 px. */
.cta-meta a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.footer p a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.cta-meta svg{width:15px;height:15px;fill:var(--gold-glow)}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.footer{background:var(--brown-deep);color:rgba(255,255,255,.72);padding:44px var(--pad-x) 32px;text-align:center;font-size:14px}
.footer-logo{font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:800;color:#fff;margin-bottom:10px}
.footer-logo span{color:var(--gold-glow)}
.footer p{margin-bottom:8px;line-height:1.65}
.footer a{color:var(--gold-glow);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.footer a:hover{color:var(--gold-soft)}}
.footer-bottom{max-width:var(--maxw);margin:24px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);font-size:12px;color:rgba(255,255,255,.55);line-height:1.65}

/* ============================================================
   BOUTON WHATSAPP FLOTTANT
   ============================================================ */
/* Vert WhatsApp d'origine : c'est un repère que tout le monde
   reconnaît sans lire. Le détourner aux couleurs de la boutique le
   rendrait joli et invisible. */
.wa-flottant{
  position:fixed;right:20px;bottom:20px;z-index:85;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 8px 22px rgba(37,211,102,.38), 0 2px 8px rgba(0,0,0,.18);
  /* Une courte apparition au chargement, puis il reste. Il ne se cache
     plus au défilement : un bouton qu'on doit faire apparaître ne sert
     à rien. */
  opacity:0;transform:translateY(14px) scale(.9);
  transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 200ms ease;
}
.wa-flottant.is-on{opacity:1;transform:none}
.wa-flottant svg{width:28px;height:28px;fill:currentColor}
@media (hover:hover) and (pointer:fine){
  .wa-flottant:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(37,211,102,.46), 0 3px 10px rgba(0,0,0,.2)}
}
.wa-flottant:active{transform:scale(.94)}
.wa-flottant:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* Sur téléphone la barre « Commander » occupe le bas de l'écran :
   le bouton monte au-dessus pour ne rien recouvrir. */
@media (max-width:820px){
  .wa-flottant{right:14px;bottom:calc(82px + env(safe-area-inset-bottom));width:50px;height:50px}
  .wa-flottant svg{width:26px;height:26px}
}
@media (prefers-reduced-motion: reduce){
  .wa-flottant{transition:opacity 160ms ease, visibility 160ms;transform:none}
  .wa-flottant.is-on{transform:none}
  .wa-flottant:hover,.wa-flottant:active{transform:none}
}

/* ============================================================
   BARRE MOBILE COLLANTE
   ============================================================ */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  gap:12px;align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,251,242,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(200,134,10,.2);
  box-shadow:0 -6px 24px rgba(90,50,0,.12);
  transform:translateY(110%);
  transition:transform 320ms var(--ease-out);
}
.sticky-bar.is-up{transform:none}
.sticky-price{flex-shrink:0;line-height:1.15}
.sticky-price b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:19px;font-weight:800;color:var(--brown)}
.sticky-price small{font-size:11px;color:var(--ink-3)}
.sticky-bar .btn{flex:1;padding:13px 18px;font-size:14.5px;min-height:48px}
@media (max-width:820px){.sticky-bar{display:flex}body{padding-bottom:0}}

/* ============================================================
   MODALE DE COMMANDE
   ============================================================ */
/* La <dialog> occupe tout l'écran et ne sert QUE de centreur ;
   le vrai panneau est .order-panel. On centre en grid plutôt
   qu'avec le margin:auto du navigateur : sur téléphone, dès que
   le contenu dépassait la fenêtre, ce margin:auto collait la
   modale en haut de l'écran. */
.order{
  width:100%;max-width:100%;height:100%;max-height:100%;
  inset:0;margin:0;padding:0;border:0;background:transparent;
  color:var(--ink);overflow:visible;
  transition:overlay 300ms allow-discrete, display 300ms allow-discrete;
}
.order[open]{display:grid;place-items:center;padding:14px}
.order::backdrop{
  background:rgba(40,20,0,.58);backdrop-filter:blur(5px);opacity:0;
  transition:opacity 280ms var(--ease-out), overlay 280ms allow-discrete, display 280ms allow-discrete;
}
.order[open]::backdrop{opacity:1}

.order-panel{
  position:relative;display:flex;flex-direction:column;
  width:min(580px,100%);max-height:calc(100svh - 28px);
  background:var(--cream);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 40px 90px rgba(60,30,0,.42);
  opacity:0;transform:scale(.965) translateY(12px);
  transition:opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.order[open] .order-panel{opacity:1;transform:none}
@starting-style{
  .order[open]::backdrop{opacity:0}
  .order[open] .order-panel{opacity:0;transform:scale(.965) translateY(12px)}
}
@media (prefers-reduced-motion: reduce){
  .order-panel{transform:none;transition:opacity 160ms ease}
  .order[open] .order-panel{transform:none}
  @starting-style{.order[open] .order-panel{transform:none}}
}

/* ── En-tête ───────────────────────────────────────────────── */
.order-head{
  flex-shrink:0;padding:15px 26px 14px;color:#fff;
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(226,155,24,.34), transparent 58%),
    linear-gradient(140deg,var(--brown) 0%,var(--brown-2) 100%);
}
.order-title{font-family:'Playfair Display',Georgia,serif;font-size:21px;font-weight:800;line-height:1.2;padding-right:44px}
.order-assur{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;list-style:none}
.order-assur li{
  display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);
  font-size:11px;font-weight:700;color:rgba(255,255,255,.93);line-height:1;
}
.order-assur svg{
  width:13px;height:13px;flex-shrink:0;stroke:var(--gold-glow);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

.order-close{
  position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);
  transition:background-color 200ms ease, transform 160ms var(--ease-out);
}
.order-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
@media (hover:hover){.order-close:hover{background:rgba(255,255,255,.28)}}
.order-close:active{transform:scale(.92)}
.order.is-done .order-close{background:var(--cream-2);color:var(--brown);border-color:var(--cream-3)}
@media (hover:hover){.order.is-done .order-close:hover{background:var(--cream-3)}}

/* ── Commande rapide, à même la page ────────────────────────────
   Une bande sous l'accueil, pas une section : trois champs sur une ligne
   en grand écran, empilés sur téléphone. Elle doit se lire comme un
   prolongement de l'accueil, pas comme une étape de plus — d'où le fond
   crème continu et l'absence de grand titre de section. */
.rapide{
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
  border-bottom:1px solid var(--cream-3);
  padding:26px var(--pad-x) 24px}
.rapide-inner{max-width:1080px;margin:0 auto}
.rapide-mot{text-align:center;margin-bottom:16px}
.rapide-t{
  font-family:var(--serif);font-size:clamp(20px,3.4vw,26px);font-weight:800;
  color:var(--brown-deep);letter-spacing:-.01em;line-height:1.15}
.rapide-sub{
  font-size:13.5px;line-height:1.5;color:var(--ink-2);
  max-width:56ch;margin:6px auto 0}

.rapide-form{
  display:grid;grid-template-columns:1.1fr 1.25fr 1fr auto;gap:10px;align-items:end}
.rf-champ{min-width:0}
.rf-champ label{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.rapide-form .input,.rapide-form .select{min-height:50px}
.rapide-envoi{min-height:50px;white-space:nowrap;padding:0 22px}
.rapide-err{margin-top:10px;text-align:center}
.rapide-err.is-on{display:block}
.rapide-legal{
  font-size:12px;line-height:1.5;color:var(--ink-3);text-align:center;margin-top:12px}

@media (max-width:860px){
  .rapide-form{grid-template-columns:1fr 1fr;gap:9px}
  .rf-tel{grid-column:1 / -1}
  .rapide-envoi{grid-column:1 / -1}
}
@media (max-width:520px){
  /* Sur téléphone la bande fait déjà un demi-écran : on resserre tout ce
     qui peut l'être sans rapetisser les zones à toucher. Les champs
     gardent leurs 50 px, c'est le reste qui maigrit. */
  .rapide{padding:20px var(--pad-x) 18px}
  .rapide-form{grid-template-columns:1fr;gap:7px}
  .rf-tel{grid-column:auto}
  .rapide-mot{margin-bottom:12px}
  .rapide-sub{font-size:12.5px;margin-top:4px}
  .rf-champ label{font-size:10.5px;margin-bottom:3px}
  .rapide-envoi{margin-top:3px}
  .rapide-legal{font-size:11.5px;margin-top:9px}
}

/* ── Les pastilles de pack ──────────────────────────────────────
   Trois pastilles sur une ligne au lieu de trois cartes : elles
   apparaissent après la commande, quand il ne s'agit plus de décider
   mais seulement de préciser. */
/* N'apparaît qu'une fois un pack coché : sans choix, il n'y a rien à
   retirer, et un bouton mort est une question de plus à se poser. */
/* Sur téléphone l'en-tête occupait 270 px : seul le champ « nom »
   restait visible. Les trois pastilles de réassurance et le paragraphe
   d'explication disent ce que le pied répète déjà — on les retire, et
   le nom, le numéro et la ville tiennent à l'écran. */
@media (max-width:560px){
  .order-assur li:not(:first-child){display:none}
  .order-title{font-size:19px}
  .order-head{padding:13px 26px 12px}
}

@media (max-width:420px){
  .pk-c{padding:10px 12px;gap:10px}
  .pk-n{font-size:13.5px}
  .pk-d{font-size:11.5px}
  .pk-p{font-size:15px}
  .done-etape-t{font-size:19px}
}

/* ── Corps : les étapes numérotées ─────────────────────────── */
.order-body{
  flex:1 1 auto;min-height:0;padding:0 26px 20px;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}

/* Le bouton « Valider » vit dans le pied collant : rien ne dit qu'il
   reste deux étapes en dessous. Ce dégradé coupe visiblement le
   contenu tant qu'on n'est pas en bas — c'est ce qui fait comprendre
   qu'il faut faire défiler, sans une ligne de texte de plus. */
.order-fond{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.order-fond::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:56px;
  pointer-events:none;opacity:0;transition:opacity 220ms var(--ease);
  background:linear-gradient(to top,var(--cream) 12%,rgba(255,251,242,0) 100%);
}
.order-fond.a-defiler::after{opacity:1}
.order.is-done .order-fond::after{opacity:0}
.etape{padding:20px 0 6px}
.etape + .etape{border-top:1px solid var(--cream-3)}
.etape-head{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.etape-n{
  flex-shrink:0;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold-glow),var(--gold));color:var(--brown-deep);
  font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 3px 9px rgba(200,134,10,.34);
}
.etape-t{font-family:'Playfair Display',Georgia,serif;font-size:17.5px;font-weight:800;color:var(--brown);line-height:1.2}
.etape-note{
  margin-left:auto;padding:4px 10px;border-radius:999px;
  background:var(--cream-2);border:1px solid var(--cream-3);
  font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap;
}
.etape-fields{border:0}

.field{margin-bottom:16px}
.field:last-child{margin-bottom:2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field > label,.field-legend{
  display:block;font-size:13px;font-weight:700;color:var(--brown);
  margin-bottom:8px;letter-spacing:.01em;
}
.req{color:var(--red-ink)}
.hint{font-weight:400;color:var(--ink-3);font-size:12px}

.input,.select,.textarea{
  width:100%;font:inherit;font-size:15.5px;color:var(--ink);
  background:var(--white);border:1.8px solid var(--cream-3);border-radius:13px;
  padding:13px 15px;min-height:50px;
  transition:border-color 180ms ease, box-shadow 180ms ease;
}
.textarea{min-height:76px;resize:vertical;line-height:1.55}
.input::placeholder,.textarea::placeholder{color:#9A7C50;opacity:1}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,134,10,.16);
}
.input[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--red-ink);box-shadow:0 0 0 4px rgba(180,50,42,.13)}
.select{
  appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5522' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
}
.phone-row{display:grid;grid-template-columns:104px 1fr;gap:9px}
.phone-row .select{padding-left:13px;padding-right:34px;background-position:right 10px center;font-variant-numeric:tabular-nums}

.error{
  display:none;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--red-ink);line-height:1.45;
}
.error.is-on{display:block}

/* ── Pack et paiement : des radios déguisés en cartes ──────── */
.choices{display:grid;gap:10px}
.choices.cols-3{grid-template-columns:repeat(3,1fr)}
.choices.packs{margin-top:11px}   /* de la place pour le ruban */
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.ch{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:84px;padding:14px 9px 12px;text-align:center;cursor:pointer;
  background:var(--white);border:1.8px solid var(--cream-3);border-radius:15px;
  transition:border-color 180ms ease, background-color 180ms ease,
             box-shadow 220ms var(--ease-out), transform 160ms var(--ease-out);
}
.ch-n{font-family:'Playfair Display',Georgia,serif;font-size:15.5px;font-weight:800;color:var(--brown);line-height:1.15}
.ch-p{font-style:normal;font-size:14px;font-weight:800;color:var(--gold-ink);font-variant-numeric:tabular-nums;line-height:1.2}
.ch-u{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-3);line-height:1.3}
.ch-tag{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:3px 9px;border-radius:999px;font-style:normal;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:linear-gradient(150deg,var(--gold-glow),var(--gold));color:var(--brown-deep);
  box-shadow:0 3px 8px rgba(200,134,10,.32);
}
.ch-tag-eco{background:linear-gradient(150deg,#34C77B,#15803D);color:#fff;box-shadow:0 3px 8px rgba(21,128,61,.28)}
.choices.paiements .ch{min-height:66px;gap:2px}
@media (hover:hover) and (pointer:fine){
  .ch:hover{border-color:var(--gold-soft);background:#FFFDF6}
}
.choice input:checked + .ch{
  border-color:var(--gold);background:linear-gradient(160deg,#FFFDF4,#FDF0D6);
  box-shadow:0 6px 18px rgba(200,134,10,.2);
}
.choice input:checked + .ch::after{
  content:"";position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1400' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center/10px no-repeat;
}
.choice input:focus-visible + .ch{outline:3px solid var(--gold-ink);outline-offset:2px}
.ch:active{transform:scale(.975)}

/* ── Pied fixe : total toujours sous les yeux ──────────────── */
.order-foot{
  position:relative;flex-shrink:0;padding:14px 26px 18px;
  background:var(--cream);border-top:1.5px solid var(--cream-3);
  box-shadow:0 -12px 26px rgba(90,50,0,.07);
}
/* Un fondu au-dessus du pied : le formulaire ne s'arrête plus net en
   plein milieu d'une ligne, on voit qu'il reste du contenu à faire défiler. */
.order-foot::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;pointer-events:none;
  background:linear-gradient(to top,var(--cream),rgba(255,251,242,0));
}
.order-foot .error{margin:0 0 10px;text-align:center}
.foot-recap{
  display:block;
  padding:8px 13px;margin-bottom:10px;border-radius:12px;
  background:linear-gradient(160deg,#FFFDF4,#FDF0D6);
  border:1.5px solid rgba(200,134,10,.3);
}
/* Trois lignes courtes plutôt qu'une phrase : la cliente doit pouvoir
   vérifier d'un coup d'œil où, combien et quand. Un séparateur « · »
   finissait en début de ligne dès que le texte passait à la ligne — on
   laisse chaque information sur la sienne. */
.rk{display:block;font-size:13px;font-weight:800;color:var(--brown);line-height:1.4}
.rv{display:block;font-size:12px;font-weight:700;color:var(--ink-3);line-height:1.4}
/* Vert quand c'est offert, neutre sinon : la cliente voit du premier coup
   d'œil s'il y aura quelque chose en plus à sortir au livreur. */
.rv-port{font-weight:800;color:var(--ink-3)}
.rv-port.is-free{color:var(--green-ink)}
.order-submit{width:100%;min-height:56px;font-size:16px;padding:16px 24px}
.order-submit[aria-busy="true"]{opacity:.72;pointer-events:none}
.order-legal{margin-top:9px;font-size:11px;line-height:1.5;color:var(--ink-3);text-align:center}

/* ══ ÉCRAN DE CONFIRMATION ═══════════════════════════════════
   L'écran précédent fêtait la commande sur 300 px — gros rond vert,
   titre en serif, paragraphe centré — puis posait une question dans un
   encadré doré, avant un bouton vert et un troisième encadré pour le
   partage. Quatre blocs, aucune hiérarchie, deux messages qui se
   contredisent.

   Ici l'écran raconte une suite : ce qui est fait (compact, aligné à
   gauche), ce qu'il reste à faire (la seule chose mise en avant), puis
   l'action. Rien n'est centré sauf l'action, parce que c'est le seul
   élément qu'on doit viser.
   ═══════════════════════════════════════════════════════════ */
.done{display:none;padding:26px 24px 26px;text-align:left}
.done.is-on{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.order.is-done .order-head,
.order.is-done .order-form,
.order.is-done .order-foot{display:none}

/* ── L'accusé de réception ────────────────────────────────────
   Une ligne, pas une cérémonie. La commande est passée : le dire
   suffit, l'insister vole la place de ce qui reste à faire. */
.done-recu{display:flex;align-items:flex-start;gap:12px;margin-bottom:22px}
.done-mark{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,122,110,.13);
}
.done-mark svg{width:19px;height:19px;stroke:var(--wa-deep);fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;animation:draw 460ms var(--ease-out) 100ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done-recu-txt{min-width:0}
/* Deux rédactions possibles selon que l'enregistrement a réussi ou non.
   Écrites toutes les deux dans la page, affichées par une classe : pas
   de HTML reconstruit au moment le plus sensible du parcours. */
.si-echec{display:none}
.done.a-echoue .si-ok{display:none}
.done.a-echoue .si-echec{display:inline}
.done.a-echoue .done-mark{background:rgba(200,134,10,.16)}
.done.a-echoue .done-mark svg{stroke:var(--gold-ink)}
.done-recu-t{display:block;font-size:17px;font-weight:800;color:var(--brown);line-height:1.3}
.done-recu-s{display:block;font-size:13px;line-height:1.5;color:var(--ink-3);margin-top:3px;text-wrap:pretty}
.done-recu-s b{color:var(--ink-2);font-weight:700}

/* ── L'étape qui reste ───────────────────────────────────────── */
.done-etape{margin-bottom:22px}
.done-etape-t{
  font-family:'Playfair Display',Georgia,serif;
  font-size:21px;font-weight:800;color:var(--brown-deep);line-height:1.25;
  transition:color 220ms var(--ease)}
.done-etape-s{
  font-size:13px;line-height:1.5;color:var(--ink-3);margin-top:5px;text-wrap:pretty;
  transition:max-height 260ms var(--ease), opacity 180ms ease, margin 260ms var(--ease)}
.done-pack.est-choisi .done-etape-s{max-height:0;opacity:0;overflow:hidden;margin:0}

/* ── Les trois packs, en lignes ────────────────────────────────
   Trois pastilles côte à côte sur 390 px, c'était 110 px par pack :
   le nom passait à la ligne et le contenu devenait illisible. En
   lignes, chaque pack a toute la largeur, la cible fait 60 px de haut
   et le prix s'aligne à droite où on le cherche. */
.pk-liste{display:grid;gap:11px;margin-top:20px;
  transition:max-height 300ms var(--ease), opacity 200ms ease, margin-top 300ms var(--ease)}
.done-pack.est-choisi .pk-liste{max-height:0;opacity:0;overflow:hidden;margin-top:0}
.pk{position:relative;display:block;cursor:pointer}
.pk input{position:absolute;opacity:0;width:0;height:0}
.pk-c{
  position:relative;
  display:flex;align-items:center;gap:12px;min-height:62px;padding:11px 14px;
  border:1.6px solid var(--cream-3);border-radius:14px;background:#fff;
  transition:border-color 160ms var(--ease), background-color 160ms var(--ease),
             box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.pk-rond{
  width:20px;height:20px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--cream-3);background:#fff;
  transition:border-color 160ms var(--ease), border-width 160ms var(--ease)}
.pk-txt{flex:1 1 auto;min-width:0}
.pk-n{display:block;font-size:14.5px;font-weight:800;color:var(--brown-2);line-height:1.25}
.pk-d{display:block;font-size:12px;font-style:normal;color:var(--ink-3);line-height:1.35;margin-top:2px;text-wrap:pretty}
.pk-p{flex-shrink:0;font-size:16px;font-weight:800;color:var(--brown-deep);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-tag{
  position:absolute;top:-8px;left:14px;
  font-size:9.5px;font-style:normal;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brown-deep);white-space:nowrap;
  background:linear-gradient(135deg,var(--gold-glow),var(--gold-lite));
  border-radius:999px;padding:3px 9px;line-height:1;
  box-shadow:0 2px 6px rgba(120,70,0,.14)}
@media (hover:hover){.pk:hover .pk-c{border-color:var(--gold-lite);transform:translateY(-1px)}}
.pk input:checked + .pk-c{
  border-color:var(--gold-glow);background:rgba(242,184,48,.10);
  box-shadow:0 0 0 3px rgba(242,184,48,.18)}
.pk input:checked + .pk-c .pk-rond{border-color:var(--gold-ink);border-width:6px}
.pk input:focus-visible + .pk-c{outline:3px solid var(--gold);outline-offset:2px}
.pk input:disabled + .pk-c{opacity:.5;cursor:progress}

/* ── Le récapitulatif qui remplace les trois lignes ──────────── */
.done-recap[hidden]{display:none}
.done-recap{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:13px;padding:13px 15px;border-radius:14px;
  background:rgba(21,106,58,.07);border:1.5px solid rgba(21,106,58,.26);
  animation:recap-entre 300ms var(--ease-out) both}
@keyframes recap-entre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dr-txt{flex:1 1 150px;min-width:0}
.dr-txt b{display:block;font-size:14.5px;font-weight:800;color:var(--green-ink);line-height:1.25}
.dr-txt i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.dr-prix{flex-shrink:0;font-size:17px;font-weight:800;color:var(--green-ink);font-variant-numeric:tabular-nums}
.dr-modif{
  flex-shrink:0;font-size:12.5px;font-weight:700;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;min-height:36px;padding:0 2px}
.dr-modif:hover{color:var(--brown)}

/* ── L'action ─────────────────────────────────────────────────
   Seul élément centré de l'écran, et le seul en pleine largeur. */
.done .btn{width:100%}
.done-cta{min-height:54px;font-size:16px}
.done-alt{margin-top:11px;font-size:12.5px;color:var(--ink-3);line-height:1.55;text-align:center}
.done-alt a{color:var(--gold-ink);font-weight:700}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  /* Sur téléphone, le premier écran doit contenir les trois choses qui font
     acheter : la promesse, le produit, le bouton — dans cet ordre.
     display:contents fait remonter le texte au niveau du flex parent pour
     pouvoir glisser la photo entre le titre et la description. */
  .hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;max-width:600px}
  .hero-copy{display:contents}
  .hero-eyebrow{order:1;margin-bottom:14px}
  /* Le titre porte maintenant le nom du produit et deux promesses : il
     prend deux lignes de plus qu'avant. On le resserre, sinon la photo
     du savon repasse sous la ligne de flottaison sur téléphone. */
  .hero-title{order:2;margin-bottom:20px;font-size:clamp(29px,7.4vw,40px);line-height:1.08}
  .hero-title em{font-size:.78em;line-height:1.14;margin-top:6px}
  .hero-visual{order:3;margin-bottom:26px}
  .hero-desc{order:4;margin-bottom:28px;margin-left:auto;margin-right:auto;max-width:40ch}
  .hero-actions{order:5;margin-bottom:32px;justify-content:center;width:100%;max-width:430px}
  .hero-stats{order:6;justify-content:center}
  .hero-photo img{width:min(300px,66vw)}
  .ring{width:min(320px,72%)}
  .hero-badge{right:-14px;bottom:-8px;padding:9px 13px;font-size:11px}
  .produit-grid{grid-template-columns:1fr;max-width:560px;text-align:center}
  .produit-list li{text-align:left}
  .produit-photo img{aspect-ratio:4/3}
}
@media (max-width:820px){
  .cta{padding-bottom:calc(clamp(64px,9vw,104px) + 84px)}
  .footer{padding-bottom:100px}
}
@media (max-width:640px){
  :root{--nav-h:62px}
  .nav-tel{display:none}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 34px)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-stats{gap:16px;justify-content:space-between}
  .stat-sep{display:none}
  .stat-val{font-size:25px}
  .p-haut{padding:28px 22px}
  /* Une colonne : au doigt, trois cartes côte à côte deviennent
     illisibles. On repasse la carte en ligne, prix aligné à droite. */
  .choices.cols-3{grid-template-columns:1fr}
  .ch{flex-direction:row;align-items:center;justify-content:flex-start;
      gap:10px;min-height:62px;padding:13px 16px;text-align:left}
  .ch-u{order:2;margin-right:auto}
  .ch-p{order:3;font-size:15px}
  .choices.paiements .ch{min-height:56px}
  /* Assez d'air entre les cartes pour que le ruban d'une carte ne
     morde pas sur celle du dessus. */
  .choices.packs{gap:17px;margin-top:14px}
  .ch-tag{left:14px;top:-9px;transform:none}
  /* La pastille de sélection passe à droite : on lui réserve sa place,
     sinon elle recouvre le prix. */
  .choice input:checked + .ch{padding-right:40px}
  .choice input:checked + .ch::after{top:50%;right:13px;margin-top:-8px}
  .order[open]{padding:9px}
  .order-panel{max-height:calc(100svh - 18px);border-radius:var(--r-lg)}
  .order-head{padding:13px 20px 12px}
  .order-title{font-size:19px}
  .order-body{padding:0 20px 18px}
  .order-foot{padding:12px 20px 16px}
  .done{padding:36px 22px 28px}
  .field-row{grid-template-columns:1fr;gap:0}
  .etape-head{flex-wrap:wrap}
  .etape-note{margin-left:35px;order:3;width:auto}
  .p-fcfa{font-size:15px}
  .cta-actions .btn{width:100%}
}
@media (max-width:400px){
  .phone-row{grid-template-columns:100px 1fr}
  .sticky-bar .btn{font-size:13.5px;padding:13px 12px}
}

@media print{
  .nav,.sticky-bar,.order,.blob,.ring,.wa-flottant{display:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ============================================================
   PARTAGE + BANDEAU DE RETOUR
   ============================================================ */
.done-share{
  margin-top:22px;padding-top:20px;
  border-top:1px dashed rgba(200,134,10,.32);
}
.done-share p{font-size:13px;color:var(--ink-3);margin-bottom:11px;text-align:center}
.done-share .btn{width:100%}

.footer-share{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:4px;padding:9px 18px;border-radius:40px;
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.86);font-size:13px;font-weight:600;
  transition:background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
;min-height:44px}
.footer-share svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.footer-share:hover{background:rgba(255,255,255,.10);border-color:rgba(242,184,48,.55)}}
.footer-share:active{transform:scale(.97)}

/* Message court et non bloquant : lien copié, commande à confirmer… */
.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:200;
  max-width:min(420px,calc(100vw - 32px));
  padding:14px 20px;border-radius:14px;
  background:var(--brown-deep);color:#fff;
  font-size:14px;line-height:1.5;text-align:center;
  box-shadow:0 14px 40px rgba(40,20,0,.35);
  opacity:0;pointer-events:none;
  transform:translate(-50%,14px);
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){.toast{bottom:calc(88px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion: reduce){
  .toast{transform:translate(-50%,0);transition:opacity 180ms ease}
}