/* ============================================================
   DELF · delf.group
   Structure e-commerce calquée sur DTM Factory, identité propre :
   fond bone chaud, accent vert sapin, or pour les prix.
   Display Archivo, corps Inter Tight.
   ============================================================ */

:root{
  --bg:#ffffff;
  --surface:#F7F3EC;
  --surface-2:#EFE8DB;
  --ink:#17130F;
  --ink-2:#3B342C;
  --muted:#6A6158;
  --line:#E6DFD3;
  --line-2:#D3C8B6;

  --accent:#1F4D3F;          /* vert sapin, couleur du moringa */
  --accent-ink:#153729;
  --accent-soft:#E9F0EB;
  --gold:#A8761C;            /* prix, badges */
  --ok:#1F7A4D;
  --warn:#B4690E;
  --danger:#B4231A;
  --danger-bg:#FDECEA;
  --danger-field:#FDF6F5;
  /* couleurs de marque des moyens de paiement, données et non décor */
  --wave:#1A9BD7;
  --om:#F16E00;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --pad:clamp(18px,4vw,32px);
  --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);

  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Archivo','Inter Tight',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:0}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
h3{font-size:1.12rem;letter-spacing:-.02em}
p{margin:0 0 1em}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent);margin-bottom:9px}
.muted{color:var(--muted)}
.sec{padding-block:clamp(44px,6vw,76px)}
.sec__head{margin-bottom:clamp(22px,3vw,34px);max-width:60ch}
.sec__head p{color:var(--muted);margin:8px 0 0}
.sec__head.head-row{max-width:none}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.head-row>div{max-width:60ch}
.lnk{border-bottom:1.5px solid var(--accent);padding-bottom:2px;font-weight:600;font-size:.94rem}
.lnk:hover{color:var(--accent)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:600;font-size:.95rem;letter-spacing:-.01em;min-height:46px;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-ink)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--surface-2)}
.btn-block{width:100%}
.btn-lg{padding:16px 28px;font-size:1rem;min-height:54px}
.btn-sm{padding:9px 15px;font-size:.88rem;min-height:40px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- barre utilitaire + en-tête ---------- */
.util{background:var(--ink);color:rgba(255,255,255,.82);font-size:.79rem}
.util__in{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:36px;padding-block:8px;text-align:center;flex-wrap:wrap}
.util b{color:#fff;font-weight:600}
.util__sep{opacity:.38;padding-inline:.45em}

.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:66px}
.brand{display:flex;align-items:baseline;gap:8px}
.brand__n{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:.03em;
  font-variation-settings:'wdth' 112}
.brand__s{font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  font-weight:600;white-space:nowrap}
.nav{display:flex;gap:24px;margin-left:auto;font-size:.94rem;font-weight:500}
.nav a{padding-block:6px;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.hdr__act{display:flex;align-items:center;gap:10px;margin-left:20px}
.cart-btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;
  padding:9px 15px;border:1px solid var(--line-2);border-radius:var(--r-pill);min-height:44px}
.cart-btn:hover{border-color:var(--ink)}
.cart-btn b{background:var(--accent);color:#fff;border-radius:var(--r-pill);
  min-width:21px;height:21px;display:grid;place-items:center;font-size:.72rem;padding-inline:5px}
.burger{display:none;width:44px;height:44px;flex-direction:column;place-items:center;gap:5px;
  border:1px solid var(--line-2);border-radius:var(--r-pill)}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);transition:transform .24s var(--ease),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* bandeau de réassurance sous l'en-tête */
.assur{background:var(--surface);border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.assur__in{display:flex;align-items:center;justify-content:center;gap:26px;
  padding-block:11px;flex-wrap:wrap;text-align:center}
.assur span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.assur svg{width:15px;height:15px;color:var(--accent);flex:none}

/* ---------- hero ---------- */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);
  align-items:center;padding-block:clamp(34px,5vw,62px)}
.hero h1{margin-bottom:14px}
.hero__lede{color:var(--ink-2);font-size:1.06rem;max-width:44ch;margin-bottom:22px}
.hero__cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:20px}
.hero__pts{display:grid;gap:8px;font-size:.9rem;color:var(--muted)}
.hero__pts li{display:flex;gap:9px;align-items:center}
.hero__pts{list-style:none;padding:0;margin:0}
.hero__pts svg{width:15px;height:15px;color:var(--ok);flex:none}
.hero__media{border-radius:var(--r-lg);overflow:hidden;background:#fff;aspect-ratio:1/1}
.hero__media img,.hero__vid{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- grille produits ---------- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.pcard{display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r);overflow:hidden}
.pcard__img{position:relative;background:var(--surface);border-radius:var(--r);overflow:hidden;aspect-ratio:1/1}
.pcard__img img{width:100%;height:100%;object-fit:cover}
.pcard__tag{position:absolute;top:10px;left:10px;background:#fff;color:var(--ink);
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:5px 9px;border-radius:var(--r-sm)}
.pcard__body{padding:12px 2px 0;display:flex;flex-direction:column;flex:1}
.pcard__cat{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.pcard__nm{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.02em;margin:5px 0 3px}
.pcard__desc{font-size:.84rem;color:var(--muted);line-height:1.4;margin-bottom:9px}
.pcard__meta{font-size:.78rem;color:var(--muted);margin-bottom:11px}
.pcard__meta b{color:var(--ink);font-weight:600}
.pcard__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-bottom:10px}
.pcard__p small{display:block;font-size:.72rem;color:var(--muted);margin-bottom:2px}
.pcard__p b{font-family:var(--display);font-size:1.16rem;font-weight:700;letter-spacing:-.02em}
/* le geste d'achat doit être évident : bouton plein, libellé explicite */
.pcard__btn{width:100%;min-height:50px;font-size:.94rem;gap:8px}
.pcard__btn svg{width:17px;height:17px;flex:none}
.pcard__more{display:block;text-align:center;font-size:.8rem;color:var(--muted);
  padding:9px 0 2px;text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:3px}
.pcard__more:hover{color:var(--ink)}
.pcard__dot{width:11px;height:11px;border-radius:var(--r-pill);display:inline-block;
  vertical-align:-1px;margin-right:6px}

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.step__n{width:28px;height:28px;border-radius:var(--r-pill);background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:.8rem;font-weight:700;margin-bottom:11px}
.step h3{font-size:1rem;margin-bottom:5px}
.step p{color:var(--muted);font-size:.9rem;margin:0}

/* ---------- bloc surface ---------- */
.panel{background:var(--surface);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,42px)}
.panel h2{margin-bottom:9px}
.panel>p{color:var(--muted);max-width:62ch}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px;font-size:.93rem}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks svg{width:16px;height:16px;color:var(--ok);flex:none;margin-top:3px}

/* ---------- bande sombre ---------- */
.band{background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:clamp(32px,5vw,60px);text-align:center}
.band h2{color:#fff;margin-bottom:10px}
.band p{color:rgba(255,255,255,.72);max-width:52ch;margin:0 auto 22px}
.band__cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

/* ---------- frise de livraison ---------- */
.ship-head{font-weight:600;color:var(--ink);margin:0 0 14px;font-size:.92rem}
.ship-flow{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sf-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;position:relative;padding-top:4px}
.sf-step::before{content:"";position:absolute;top:16px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.sf-step:first-child::before{display:none}
.sf-dot{position:relative;z-index:1;width:26px;height:26px;border-radius:var(--r-pill);
  display:grid;place-items:center;background:#fff;border:2px solid var(--line);
  color:var(--muted);font-size:.78rem;font-weight:700}
.sf-lab{font-size:.76rem;font-weight:600;color:var(--ink);margin-top:3px}
.sf-sub{font-size:.68rem;color:var(--muted);line-height:1.25}
.sf-date{font-size:.7rem;font-weight:600;color:var(--ink)}
.sf-hot .sf-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.sf-hot .sf-date{color:var(--accent)}
.ship-note{font-size:.78rem;color:var(--muted);margin:0}

/* ---------- fiche produit ---------- */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);
  padding-block:clamp(24px,3.4vw,44px);align-items:start}
.pd__media{position:sticky;top:88px;min-width:0}
.pd__main{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);aspect-ratio:1/1}
.pd__main img{width:100%;height:100%;object-fit:cover}
.pd__thumbs{display:flex;gap:9px;margin-top:11px;overflow-x:auto;scrollbar-width:none;min-width:0}
.pd__thumbs::-webkit-scrollbar{display:none}
.pd__thumbs button{width:72px;height:72px;flex:none;border-radius:var(--r-sm);overflow:hidden;
  border:2px solid transparent;opacity:.6;transition:opacity .18s var(--ease),border-color .18s var(--ease)}
.pd__thumbs button[aria-selected="true"]{opacity:1;border-color:var(--ink)}
.pd__thumbs img{width:100%;height:100%;object-fit:cover}
.breadcrumb{font-size:.82rem;color:var(--muted);margin-bottom:12px;display:inline-block}
.breadcrumb:hover{color:var(--ink)}
.pd h1{margin-bottom:6px}
.pd__wolof{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);font-weight:600;display:block;margin-bottom:14px}
.pd__lede{color:var(--ink-2);margin-bottom:20px}
.pd__price{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.pd__price b{font-family:var(--display);font-size:1.75rem;font-weight:700;letter-spacing:-.025em;color:var(--gold)}
.pd__price small{color:var(--muted);font-size:.85rem}

.opts{display:grid;gap:10px;margin-bottom:18px}
.opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;text-align:left;background:#fff;min-height:48px}
.opt:hover{border-color:var(--line-2)}
.opt[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt .radio{width:19px;height:19px;border-radius:var(--r-pill);border:2px solid var(--line-2);
  flex:none;display:grid;place-items:center}
.opt[aria-checked="true"] .radio{border-color:var(--ink)}
.opt[aria-checked="true"] .radio::after{content:"";width:9px;height:9px;border-radius:var(--r-pill);background:var(--accent)}
.opt__n{font-weight:600;font-size:.98rem}
.opt__s{color:var(--muted);font-size:.82rem}
.opt__p{margin-left:auto;font-weight:700;font-family:var(--display);letter-spacing:-.02em;text-align:right}
.badge{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);
  font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:var(--r-sm);margin-left:7px;
  text-transform:uppercase;letter-spacing:.05em}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill)}
.qty button{width:46px;height:46px;font-size:1.15rem;font-weight:600;border-radius:var(--r-pill)}
.qty button:hover{background:var(--surface)}
.qty output{min-width:38px;text-align:center;font-weight:600}
.buyrow{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.buyrow .btn{flex:1;min-width:200px}

.acc{border-top:1px solid var(--line);margin-top:22px}
.acc__it{border-bottom:1px solid var(--line)}
.acc__h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0;font-weight:600;font-size:.98rem;text-align:left}
.acc__h .pm{font-size:1.25rem;font-weight:400;color:var(--muted);transition:transform .22s var(--ease)}
.acc__it.open .acc__h .pm{transform:rotate(45deg)}
.acc__b{max-height:0;overflow:hidden;transition:max-height .28s var(--ease)}
.acc__b .in{padding-bottom:18px;color:var(--muted);font-size:.93rem}
.acc__b dl{margin:0;display:grid;gap:9px}
.acc__b .r{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px}
.acc__b dt{color:var(--muted)}
.acc__b dd{margin:0;color:var(--ink)}

/* ---------- panier ---------- */
.cart-layout{display:grid;gap:26px}
.cline{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line)}
.cline__img{width:92px;height:92px;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.cline__img img{width:100%;height:100%;object-fit:cover}
.cline__nm{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.cline__meta{font-size:.84rem;color:var(--muted);margin-bottom:9px}
.cline__del{font-size:.85rem;color:var(--muted);min-height:44px;
  display:inline-flex;align-items:center;padding-right:8px}
.cline__del span{border-bottom:1px solid var(--line-2)}
.cline__del:hover{color:var(--warn);border-color:var(--warn)}
.cline__p{font-family:var(--display);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.summary{background:var(--surface);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px)}
.summary h3{margin-bottom:14px}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:.93rem;color:var(--muted)}
.sum-row.total{border-top:1px solid var(--line-2);margin-top:8px;padding-top:14px;
  color:var(--ink);font-family:var(--display);font-size:1.28rem;font-weight:700;letter-spacing:-.02em}
.vide{text-align:center;padding-block:clamp(48px,8vw,90px);max-width:44ch;margin-inline:auto}

/* ---------- checkout ---------- */
.co-layout{display:grid;gap:0}
.co-main{padding:0 var(--pad) 40px}
.co-aside{background:var(--surface)}
.co-summary{padding:26px var(--pad)}
.co-steps{display:flex;gap:6px;margin:6px 0 24px;font-size:.78rem;color:var(--muted);
  font-weight:600;letter-spacing:.02em;flex-wrap:wrap}
.co-steps span{display:inline-flex;align-items:center;gap:6px}
.co-steps span.active{color:var(--ink)}
.co-steps .sep{color:var(--line-2)}
.co-section{margin-bottom:30px}
.co-section h3{font-size:1.1rem;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.co-section .n{width:25px;height:25px;border-radius:var(--r-pill);background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:.78rem;font-weight:700;flex:none;font-family:var(--sans)}
.co-section .sub{color:var(--muted);font-size:.86rem;margin:0 0 16px 34px}
.co-fields{display:grid;gap:12px;margin-left:34px}
.co-eta{margin:6px 0 20px 34px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.82rem;font-weight:600;color:var(--ink)}
.field label .opt-txt{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 14px;font-size:16px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field textarea{min-height:78px;resize:vertical}
.field.err input,.field.err select,.field.err textarea{border-color:var(--danger);background:var(--danger-field)}
.field .msg{font-size:.78rem;color:var(--danger)}
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.co-msg{padding:12px 14px;border-radius:var(--r-sm);background:var(--danger-bg);color:var(--danger);
  font-size:.86rem;margin-top:12px;line-height:1.45}
.co-msg.hide{display:none}
.trust-line{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.8rem;margin-top:14px}
.trust-line svg{width:15px;height:15px;color:var(--ok);flex:none}
.mini-line{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.mini-line .mm{width:58px;height:58px;border-radius:9px;overflow:hidden;background:#fff;flex:none;position:relative}
.mini-line .mm img{width:100%;height:100%;object-fit:cover}
.mini-line .mq{position:absolute;top:3px;right:3px;min-width:21px;height:21px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;
  display:grid;place-items:center;border:1.5px solid #fff}
.mini-line .mn{font-size:.9rem;font-weight:600;letter-spacing:-.01em}
.mini-line .mo{font-size:.78rem;color:var(--muted)}
.mini-line .mp{margin-left:auto;font-weight:600;font-size:.9rem;white-space:nowrap}

/* ---------- confirmation ---------- */
.merci{max-width:640px;margin-inline:auto;padding-block:clamp(40px,6vw,80px);text-align:center}
.merci__ic{width:62px;height:62px;border-radius:var(--r-pill);background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;margin:0 auto 20px}
.merci__ic svg{width:30px;height:30px}
.merci__ref{display:inline-block;background:var(--surface);border:1px dashed var(--line-2);
  border-radius:var(--r);padding:12px 20px;font-family:var(--display);font-weight:700;
  font-size:1.2rem;letter-spacing:.02em;margin:14px 0 22px}
.merci__rec{text-align:left;background:var(--surface);border-radius:var(--r-lg);
  padding:22px;margin-top:26px}

/* ---------- pages légales ---------- */
.legal{max-width:74ch;padding-block:clamp(34px,5vw,64px)}
.legal h1{margin-bottom:22px}
.legal h2{font-size:1.25rem;margin:32px 0 10px}
.legal p,.legal li{color:var(--ink-2)}
.legal ul{padding-left:20px}
.legal li{margin-bottom:6px}
.legal__updated{color:var(--muted);font-size:.86rem;margin-bottom:26px}
.legal table{border-collapse:collapse;width:100%;margin:12px 0}
.legal td,.legal th{border-bottom:1px solid var(--line);padding:9px 12px 9px 0;text-align:left;vertical-align:top}
.legal th{font-weight:600;width:34%;color:var(--muted)}

/* ---------- pied ---------- */
.ft{background:var(--ink);color:rgba(255,255,255,.68);padding-block:clamp(38px,5vw,60px);font-size:.9rem;margin-top:clamp(40px,6vw,80px)}
.ft__in{display:grid;grid-template-columns:1.7fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,42px)}
.ft .brand__n{color:#fff}
.ft .brand__s{color:rgba(255,255,255,.5)}
.ft__brand p{margin:12px 0 0;max-width:34ch}
.ft h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;color:#fff;
  font-family:var(--sans);font-weight:600;margin:0 0 13px}
.ft__col a{display:block;padding-block:5px;color:rgba(255,255,255,.68)}
.ft__col a:hover{color:#fff}
.ft__pay{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.ft__pay span{background:rgba(255,255,255,.1);color:#fff;font-size:.68rem;font-weight:700;
  padding:5px 9px;border-radius:5px}
.ft__bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:20px;font-size:.82rem}

/* ---------- divers ---------- */
/* Masquage indépendant de la hauteur du toast. translateY(150%) ne le
   descendait que d'une fois et demie sa propre hauteur, soit environ 69 px :
   il suffisait de remonter le `bottom` pour la barre collante pour qu'il
   réapparaisse à l'écran. Une valeur fixe suffisamment grande ne peut plus
   se faire prendre par un changement d'ancrage. */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(calc(100% + 140px));
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:var(--r);
  font-weight:500;font-size:.9rem;z-index:200;transition:transform .28s var(--ease);
  max-width:calc(100vw - 30px);text-align:center}
.toast.is-on{transform:translateX(-50%) translateY(0)}
.gal{min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.gal::-webkit-scrollbar{display:none}
.gal figure{margin:0;scroll-snap-align:start}
.gal img{border-radius:var(--r);aspect-ratio:3/4;object-fit:cover;width:100%}
.gal h3{margin:12px 0 4px;font-size:1rem}
.gal p{color:var(--muted);font-size:.88rem;margin:0}
.faq{display:grid;gap:0;max-width:80ch}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:900px){
  .cart-layout{grid-template-columns:1.6fr .9fr;align-items:start;gap:40px}
  .summary{position:sticky;top:88px}
  .co-layout{grid-template-columns:1.35fr minmax(0,1fr);min-height:calc(100vh - 66px)}
  .co-main{padding:34px 4vw 60px;max-width:640px;margin-left:auto;width:100%}
  .co-aside{min-height:100%}
  .co-summary{position:sticky;top:0;padding:34px 4vw}
}
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .ft__brand{grid-column:1/-1}
}
@media (max-width:860px){
  .hero__in{grid-template-columns:minmax(0,1fr);padding-block:28px 34px}
  .hero__media{order:-1;aspect-ratio:16/10}
  .pd{grid-template-columns:minmax(0,1fr)}
  .pd__media{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:6px var(--pad) 16px;display:none}
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);min-height:48px;display:flex;align-items:center}
  .nav a:last-child{border-bottom:0}
  .burger{display:flex}
  .burger span{width:20px}
  .hdr__act{margin-left:auto}
  .assur__in{gap:14px;font-size:.74rem}
}
@media (max-width:680px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcard__btn{min-height:46px;font-size:.86rem;padding-inline:12px}
  .pcard__more{font-size:.76rem}
  .cline{grid-template-columns:70px minmax(0,1fr);gap:13px}
  .cline__img{width:70px;height:70px}
  .cline__p{grid-column:2;justify-self:end}
  .f2{grid-template-columns:minmax(0,1fr)}
  .co-section .sub,.co-fields,.co-eta{margin-left:0}
  .acc__b .r{grid-template-columns:minmax(0,1fr);gap:2px}
  .assur span:nth-child(n+3){display:none}
  .ft__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:480px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .ft__in{grid-template-columns:minmax(0,1fr)}
  .buyrow .btn{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* garde-fou DA : jamais d'italique sur les sites DTM */
em,i,h1 em,h2 em,h3 em,blockquote{font-style:normal}
em,h1 em,h2 em,h3 em{font-weight:600}

@media (max-width:860px){ .orig-grid{grid-template-columns:minmax(0,1fr) !important} }

/* ---------- moyens de paiement ---------- */
.paylogos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 20px}
.paylogo{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 11px;font-size:.78rem;font-weight:600;
  background:#fff;color:var(--ink);white-space:nowrap}
.paylogo svg{width:17px;height:17px;flex:none}
.paylogo--wave{color:var(--wave)}
.paylogo--om{color:var(--om)}
.paylogo--cash{color:var(--ok)}
.paylogos__note{font-size:.78rem;color:var(--muted);margin:0 0 20px}
.ft .paylogos{margin:14px 0 0}
.ft .paylogo{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.ft .paylogo--wave,.ft .paylogo--om,.ft .paylogo--cash{color:#fff}

/* ============================================================
   MODALE D'AJOUT AU PANIER
   Boîte centrée, confirmation puis réassurance puis commande.
   Même ossature que DTM Factory, identité DELF.
   ============================================================ */
.up{border:0;padding:0;margin:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;overflow:visible}
.up::backdrop{background:rgba(23,19,15,.55)}
.up__wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:16px;pointer-events:none}
.up__box{pointer-events:auto;position:relative;background:#fff;width:100%;max-width:470px;
  border-radius:var(--r-lg);max-height:calc(100dvh - 32px);
  display:flex;flex-direction:column;overscroll-behavior:contain;
  box-shadow:0 24px 70px rgba(23,19,15,.24);
  transform:translateY(10px) scale(.985);opacity:0;
  transition:transform .24s var(--ease),opacity .24s var(--ease)}
.up[open] .up__box{transform:none;opacity:1}
.up__box:focus{outline:none}

.up__x{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;
  border-radius:var(--r-pill);background:var(--surface);color:var(--muted);
  display:grid;place-items:center;font-size:1.3rem;line-height:1}
.up__x:hover{background:var(--surface-2);color:var(--ink)}

.up__top{text-align:center;padding:15px 24px 0;flex:none}
.up__ok{width:40px;height:40px;border-radius:var(--r-pill);background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;margin:0 auto 7px}
.up__ok svg{width:21px;height:21px}
.up__ttl{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.025em}

.up__body{padding:12px var(--pad) 0;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}

/* la carte de l'article ajouté */
.up__card{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px}
.up__crow{display:flex;align-items:center;gap:11px;padding:10px 12px}
.up__cim{width:52px;height:52px;border-radius:var(--r-sm);overflow:hidden;flex:none;background:var(--surface)}
.up__cim img{width:100%;height:100%;object-fit:cover}
.up__cn{font-weight:600;font-size:.93rem;line-height:1.25}
.up__cs{font-size:.79rem;color:var(--muted)}
.up__cq{margin-left:auto;text-align:right;font-size:.79rem;color:var(--muted);flex:none}
.up__cq b{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin-top:2px}

/* la proposition de complément */
.up__reco{border-top:1px solid var(--line);padding-top:13px;margin-bottom:13px}
.up__eye{display:block;font-size:.69rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.up__cure h3{font-size:1rem;margin-bottom:3px}
.up__cure p{color:var(--muted);font-size:.85rem;margin:0 0 12px}
.up__list{display:grid;gap:9px}
.up__it{display:flex;align-items:center;gap:11px;border:1px solid var(--line);
  border-radius:var(--r);padding:9px}
.up__im{width:52px;height:52px;border-radius:var(--r-sm);overflow:hidden;flex:none;background:var(--surface)}
.up__im img{width:100%;height:100%;object-fit:cover}
.up__cl{min-width:0}
.up__nm{font-weight:600;font-size:.9rem;line-height:1.25}
.up__go{font-size:.76rem;color:var(--muted)}
.up__pr{margin-left:auto;text-align:right;flex:none}
.up__pr b{font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:-.02em;display:block;margin-bottom:4px}
.up__add{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--ink);border-radius:var(--r-pill);padding:0 13px;height:44px;
  font-size:.8rem;font-weight:600;transition:background-color .18s var(--ease),color .18s var(--ease)}
.up__add:hover{background:var(--ink);color:#fff}
.up__add[data-in="1"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

/* totaux */
.up__sums{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:1px}
.up__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.93rem;color:var(--muted);padding:4px 0}
.up__free{color:var(--ok);font-weight:600}
.up__row--tot{border-top:1px solid var(--line);margin-top:7px;padding-top:11px;color:var(--ink);font-weight:600}
.up__row--tot b{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.025em}

/* réassurance */
.up__rea{background:var(--surface);border-radius:var(--r);padding:11px 13px;
  margin-top:12px;display:grid;gap:7px}
.up__rl{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;color:var(--ink-2)}
.up__rl b{font-weight:600;color:var(--ink)}
.up__rl svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:1px}
.up__rl--nudge{color:var(--accent-ink);border-top:1px dashed var(--line-2);padding-top:8px}

/* paiement */
.up__pay{text-align:center;padding:0;display:grid;gap:5px;justify-items:center}
.up__paylab{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted)}
.up__paylab svg{width:13px;height:13px;color:var(--ok);flex:none}
.up__paylogos{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.up__paylogos img{display:block;opacity:.9}
.up__cash{font-size:.7rem;font-weight:700;color:var(--muted);background:var(--surface);
  border-radius:5px;padding:4px 8px;letter-spacing:.02em}

.up__foot{padding:10px var(--pad) calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:grid;gap:8px;flex:none;background:#fff}
.up__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:480px){
  .up__wrap{padding:0;align-items:flex-end}
  .up__box{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:94dvh}
  .up__top{padding-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .up__box,.up[open] .up__box{transition:none;transform:none;opacity:1}
}

/* ============================================================
   TIROIR PANIER
   Panneau latéral sur desktop, plein écran sur mobile.
   ============================================================ */
.dw{border:0;padding:0;margin:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;overflow:visible}
.dw::backdrop{background:rgba(23,19,15,.5)}
.dw__wrap{position:fixed;inset:0;display:flex;justify-content:flex-end;pointer-events:none}
.dw__box{pointer-events:auto;background:#fff;width:100%;max-width:440px;height:100dvh;
  display:flex;flex-direction:column;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .3s var(--ease)}
.dw[open] .dw__box{transform:none}
.dw__box:focus{outline:none}

.dw__head{display:flex;align-items:center;gap:12px;padding:18px var(--pad);
  border-bottom:1px solid var(--line);flex:none}
.dw__head h2{font-size:1.28rem}
.dw__n{font-size:.82rem;color:var(--muted);font-family:var(--sans);font-weight:500}
.dw__x{margin-left:auto;width:44px;height:44px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:1.5rem;color:var(--muted);flex:none}
.dw__x:hover{background:var(--surface);color:var(--ink)}

.dw__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--pad)}
.dw__it{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:13px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line)}
.dw__im{width:72px;height:72px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.dw__im img{width:100%;height:100%;object-fit:cover}
.dw__nm{font-weight:600;font-size:.96rem;line-height:1.3;display:block;margin-bottom:3px}
.dw__go{font-size:.8rem;color:var(--muted);display:block;margin-bottom:9px}
.dw__q{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill)}
.dw__q button{width:44px;height:44px;font-size:1.05rem;font-weight:600;border-radius:var(--r-pill)}
.dw__q button:hover{background:var(--surface)}
.dw__q output{min-width:30px;text-align:center;font-weight:600;font-size:.9rem}
.dw__side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dw__pp{font-family:var(--display);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.dw__del{width:44px;height:44px;display:grid;place-items:center;color:var(--muted);
  font-size:1.2rem;border-radius:var(--r-pill)}
.dw__del:hover{background:var(--surface);color:var(--warn)}

.dw__foot{flex:none;border-top:1px solid var(--line);padding:14px var(--pad)
  calc(16px + env(safe-area-inset-bottom));background:#fff;display:grid;gap:10px}
.dw__row{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;color:var(--muted)}
.dw__row--tot{border-top:1px solid var(--line);padding-top:12px;margin-top:2px;color:var(--ink);
  font-family:var(--display);font-size:1.24rem;font-weight:700;letter-spacing:-.02em}
.dw__eta{display:flex;align-items:flex-start;gap:7px;font-size:.79rem;color:var(--muted)}
.dw__eta svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:1px}

/* franco de port : barre de progression, masquée tant que le seuil n'est pas fixé */
.dw__franco{background:var(--surface);border-radius:var(--r);padding:12px 14px}
.dw__franco p{margin:0 0 8px;font-size:.85rem;font-weight:600}
.dw__franco p b{color:var(--accent)}
.dw__bar{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.dw__bar span{display:block;height:100%;background:var(--accent);border-radius:4px;
  transition:width .3s var(--ease)}
.dw__franco--ok p{color:var(--ok)}
.dw__franco--ok .dw__bar span{background:var(--ok)}

.dw__vide{text-align:center;padding:clamp(40px,10vh,80px) 0;color:var(--muted)}
.dw__vide h3{color:var(--ink);margin-bottom:8px}

@media (max-width:560px){
  .brand__s{display:none}
}
@media (max-width:520px){ .dw__box{max-width:none} }
@media (prefers-reduced-motion:reduce){
  .dw__box,.dw[open] .dw__box{transition:none;transform:none}
}

/* les icônes en ligne doivent être bornées partout où elles sont injectées */
.dw__franco p{display:flex;align-items:center;gap:7px}
.dw__franco svg,.up__row svg,.sum-row svg,.rv__demo svg,.nodata svg{width:15px;height:15px;flex:none}
.up__add svg{width:14px;height:14px}

/* ============================================================
   COMPOSITION ET VALEURS NUTRITIONNELLES
   ============================================================ */
.nut{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:.9rem}
.nut th,.nut td{padding:9px 0;border-bottom:1px solid var(--line);text-align:left}
.nut th{font-weight:500;color:var(--muted)}
.nut td{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.nut caption{text-align:left;font-size:.78rem;color:var(--muted);padding-bottom:8px}
.act{display:grid;gap:9px;margin:14px 0 6px}
.act__it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline}
.act__n{font-size:.9rem;font-weight:500}
.act__v{font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.act__bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.act__bar span{display:block;height:100%;background:var(--accent);border-radius:3px}
.act__dv{font-size:.78rem;color:var(--muted);font-weight:500}
.nodata{background:var(--surface);border-radius:var(--r);padding:14px 16px;font-size:.88rem;color:var(--muted)}

/* ============================================================
   AVIS
   ============================================================ */
.rv{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin-top:26px}
.rv__demo{background:var(--surface);border-bottom:1px solid var(--line);color:var(--muted);
  font-size:.76rem;padding:8px 16px;margin:0}
.rv__head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px}
.rv__score{font-family:var(--display);font-size:2.1rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.rv__hc{display:flex;flex-direction:column;gap:5px}
.rv__word{font-size:.82rem;color:var(--muted)}
.rv__word b{color:var(--ink);font-weight:600}
.rv__stars{display:inline-flex;gap:2px;color:var(--gold)}
.rv__stars svg{width:15px;height:15px}
.rv__stars .off{color:var(--line-2)}
.rv__dist{padding:0 16px 12px;display:grid;gap:6px}
.rv__drow{display:grid;grid-template-columns:30px minmax(0,1fr) 38px;align-items:center;gap:9px}
.rv__dn{display:inline-flex;align-items:center;gap:2px;font-size:.79rem;font-weight:600}
.rv__dn svg{width:11px;height:11px;color:var(--gold)}
.rv__dbar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.rv__dbar span{display:block;height:100%;background:var(--gold);border-radius:3px}
.rv__dp{font-size:.76rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.rv__list{padding:2px 16px 14px}
.rv__it{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.rv__av{width:38px;height:38px;border-radius:var(--r-pill);background:var(--accent-soft);
  color:var(--accent-ink);display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:none}
.rv__cl{flex:1;min-width:0}
.rv__top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rv__name{font-weight:600;font-size:.92rem}
.rv__ok{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;color:var(--ok);
  background:var(--accent-soft);border-radius:var(--r-pill);padding:3px 9px;font-weight:600}
.rv__ok svg{width:12px;height:12px}
.rv__meta{display:flex;align-items:center;gap:9px;margin:5px 0 6px}
.rv__date{font-size:.78rem;color:var(--muted)}
.rv__txt{font-size:.89rem;line-height:1.55;color:var(--ink-2);margin:0}

/* ---------- le parcours d'achat, au point de décision ---------- */
.how{list-style:none;margin:0 0 clamp(20px,3vw,30px);padding:14px 16px;display:grid;gap:10px;
  background:var(--surface);border-radius:var(--r);grid-template-columns:repeat(3,minmax(0,1fr))}
.how li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--ink-2)}
.how b{width:22px;height:22px;border-radius:var(--r-pill);background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:.72rem;font-weight:700;flex:none;font-family:var(--sans)}
@media (max-width:760px){ .how{grid-template-columns:minmax(0,1fr);gap:9px} .how li{font-size:.85rem} }

/* ============================================================
   PANNEAU DE CURE
   Fond encre et accents or : le panneau doit trancher avec le
   reste du panier, c'est une proposition, pas un récapitulatif.
   Pensé en 390 px d'abord.
   ============================================================ */
.cure{background:var(--ink);color:#fff;border-radius:var(--r);padding:15px 14px 14px;margin:14px 0}
.cure__hd{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.cure__nom{font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.02em;color:#fff;margin:0}
.cure__sous{font-size:.83rem;color:rgba(255,255,255,.66);margin:3px 0 0}
.cure__badge{margin-left:auto;flex:none;background:var(--gold);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.86rem;letter-spacing:-.01em;
  padding:6px 12px;border-radius:var(--r-pill)}
.cure__acc{font-size:.83rem;color:rgba(255,255,255,.74);margin:0 0 14px;line-height:1.45}

/* progression */
.cure__bar{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin:0 0 14px;padding:0 2px}
.cure__st{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:6px;text-align:center;padding-top:2px}
.cure__st::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;
  background:rgba(255,255,255,.18);z-index:0}
.cure__st:first-child::before{display:none}
.cure__st.is-lit::before{background:var(--gold)}
.cure__st b{position:relative;z-index:1;width:29px;height:29px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:.8rem;font-weight:700;
  background:var(--ink);border:2px solid rgba(255,255,255,.28);color:rgba(255,255,255,.6)}
.cure__st.is-done b{background:var(--gold);border-color:var(--gold);color:#fff}
.cure__st span{font-size:.71rem;color:rgba(255,255,255,.6);line-height:1.2}
.cure__st.is-done span{color:#fff;font-weight:600}

/* les poudres qui manquent */
.cure__list{display:grid;gap:2px;margin-bottom:14px}
.cure__it{display:flex;align-items:center;gap:11px;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.13)}
.cure__im{width:50px;height:50px;border-radius:var(--r-sm);overflow:hidden;flex:none;background:rgba(255,255,255,.07)}
.cure__im img{width:100%;height:100%;object-fit:cover}
.cure__cl{min-width:0;flex:1}
.cure__role{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--gold);margin-bottom:2px}
.cure__nm{display:block;font-weight:600;font-size:.9rem;line-height:1.25}
.cure__go{display:block;font-size:.75rem;color:rgba(255,255,255,.55);margin-top:1px}
.cure__pr{flex:none;text-align:right}
.cure__pr b{display:block;font-family:var(--display);font-weight:700;font-size:.92rem;
  letter-spacing:-.02em;margin-bottom:6px}
.cure__add{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:44px;padding:0 14px;border-radius:var(--r-pill);
  background:#fff;color:var(--ink);font-size:.8rem;font-weight:600;white-space:nowrap;
  transition:background-color .18s var(--ease)}
.cure__add:hover{background:var(--gold);color:#fff}
.cure__add span{font-size:1.05rem;line-height:1;margin-top:-1px}

.cure__cta{width:100%;min-height:50px;background:var(--gold);color:#fff;
  flex-direction:column;gap:1px;line-height:1.25}
.cure__cta:hover{background:#8E6216}
.cure__cta small{font-size:.72rem;opacity:.8;font-weight:500}

/* dans le tiroir, un peu plus serré */
.cure--compact{padding:13px 12px 12px;margin:10px 0}
.cure--compact .cure__acc{display:none}
.cure--compact .cure__go{display:none}
.cure--compact .cure__it{padding:9px 0}
.cure--compact .cure__bar{margin-bottom:12px}

@media (max-width:420px){
  .cure__st span{font-size:.66rem}
  .cure__it{gap:9px}
  .cure__im{width:44px;height:44px}
  .cure__add{padding:0 10px;font-size:.76rem}
  .cure__pr b{font-size:.86rem}
}

.dw__row--save,.sum-row--save,.up__row--save{color:var(--gold);font-weight:600}

/* ============================================================
   GARDE-FOUS DE LARGEUR
   Un contenu insécable ne doit jamais élargir la page.
   ============================================================ */
img,video,svg,table{max-width:100%}
.pd>*,.hero__in>*,.cart-layout>*,.co-layout>*,.orig-grid>*{min-width:0}
h1,h2,h3,h4,p,dd,dt,li,td,th,figcaption{overflow-wrap:break-word}
.nut{table-layout:fixed}
.nut th{width:auto}

/* ============================================================
   TIROIR DE MENU MOBILE
   ============================================================ */
.nv{border:0;padding:0;margin:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;overflow:visible}
.nv::backdrop{background:rgba(23,19,15,.5)}
.nv__wrap{position:fixed;inset:0;display:flex;justify-content:flex-end;pointer-events:none}
.nv__box{pointer-events:auto;background:#fff;width:min(86vw,340px);height:100dvh;
  display:flex;flex-direction:column;overscroll-behavior:contain;
  box-shadow:-18px 0 50px rgba(23,19,15,.2);
  transform:translateX(100%);transition:transform .28s var(--ease)}
.nv[open] .nv__box{transform:none}
.nv__box:focus{outline:none}
.nv__hd{display:flex;align-items:center;padding:16px var(--pad);border-bottom:1px solid var(--line);flex:none}
.nv__t{font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.02em}
.nv__x{margin-left:auto;width:44px;height:44px;border-radius:var(--r-pill);display:grid;
  place-items:center;font-size:1.5rem;color:var(--muted)}
.nv__x:hover{background:var(--surface);color:var(--ink)}
.nv__links{flex:1 1 auto;overflow-y:auto;padding:6px var(--pad)}
.nv__links a{display:flex;align-items:center;min-height:54px;font-size:1.06rem;font-weight:500;
  border-bottom:1px solid var(--line)}
.nv__links a:last-child{border-bottom:0}
.nv__links a:hover{color:var(--accent)}
.nv__ft{flex:none;padding:14px var(--pad) calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:grid;gap:9px;background:var(--surface)}
.nv__note{font-size:.78rem;color:var(--muted);margin:4px 0 0;line-height:1.45}
@media (prefers-reduced-motion:reduce){ .nv__box,.nv[open] .nv__box{transition:none;transform:none} }

/* pied de modale resserré : la cure doit rester la chose la plus visible */
.up__foot{padding:9px var(--pad) calc(10px + env(safe-area-inset-bottom));gap:6px}
.up__pay{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 0 1px}
.up__pay img{display:block;opacity:.9}
.up__pay em{font-style:normal;font-size:.72rem;color:var(--muted)}
.up__foot .btn{min-height:48px;font-size:.96rem}
.up__cont{min-height:44px;font-size:.85rem;color:var(--muted);font-weight:500;
  text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.up__cont:hover{color:var(--ink)}

/* ---------- écrans étroits : la cure doit tenir sans défilement ---------- */
.up__x{width:44px;height:44px}
@media (max-width:430px){
  .cure__pr{display:flex;align-items:center;gap:9px}
  .cure__pr b{margin-bottom:0;font-size:.84rem}
  .cure__im{width:42px;height:42px}
  .cure__it{padding:8px 0}
  .cure__st span{font-size:.63rem}
  .cure__st b{width:26px;height:26px;font-size:.74rem}
  .cure__st::before{top:12px}
  .cure__nom{font-size:1rem}
  .cure__badge{font-size:.78rem;padding:5px 9px}
  .cure__cta{min-height:48px;font-size:.9rem}
}
/* ---------- écrans courts : la coche passe en ligne ---------- */
@media (max-height:800px){
  .up__top{display:flex;align-items:center;gap:10px;padding:12px var(--pad) 0;text-align:left}
  .up__ok{width:30px;height:30px;margin:0;flex:none}
  .up__ok svg{width:16px;height:16px}
  .up__ttl{font-size:1.02rem}
  .up__x{top:10px;right:10px}
}

/* indice de défilement : la modale peut dépasser sur petit écran */
.up__box.is-scroll .up__body{position:relative}
.up__box.is-scroll::before{content:"";position:absolute;left:0;right:0;height:34px;
  bottom:var(--foot-h,150px);pointer-events:none;z-index:1;
  background:linear-gradient(to top,#fff,rgba(255,255,255,0))}
.up__box.is-scroll .up__foot::before{content:"Faites défiler pour voir la cure entière";
  display:block;text-align:center;font-size:.7rem;color:var(--muted);margin-bottom:2px}

/* ---------- arguments de fiche produit ----------
   Sous la description, avant le prix. Les coches reprennent .checks,
   qui porte déjà le dimensionnement des SVG injectés : sans cette
   règle un SVG sans attributs width/height s'étale sur toute la
   largeur disponible. */
.argus{margin:18px 0 22px}
.checks--pd{margin:0;gap:8px;font-size:.95rem;color:var(--ink-2)}
.checks--pd li{align-items:flex-start}
.checks--pd svg{margin-top:4px}

/* Mention légale d'accompagnement : discrète mais jamais escamotée. */
.argus__note{margin:10px 0 0;font-size:.78rem;line-height:1.45;color:var(--muted)}

.pills{list-style:none;padding:0;margin:14px 0 0;
  display:flex;flex-wrap:wrap;gap:7px}
.pills li{font-size:.76rem;letter-spacing:.01em;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;white-space:nowrap}

/* ---------- barre d'achat collante ----------
   Mobile et tablette seulement. Au-dessus de 860 px la colonne image reste
   accrochée et le bloc d'achat n'est jamais loin : la barre n'y résout rien
   et une bande pleine largeur se lirait comme une promotion. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--bg);border-top:1px solid var(--line);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  transform:translateY(100%);visibility:hidden;
  transition:transform .14s var(--ease)}
.buybar--on{transform:none;visibility:visible}
@media (min-width:861px){ .buybar{display:none} }

.buybar__in{display:flex;gap:10px;align-items:center}
.buybar__seg{display:flex;flex:none;border:1px solid var(--line-2);
  border-radius:999px;overflow:hidden;background:var(--bg)}
.buybar__seg button{min-width:58px;height:46px;padding:0 12px;border:0;
  background:transparent;font:inherit;font-size:.86rem;font-weight:500;
  color:var(--ink-2);cursor:pointer}
/* Sélection en encre, pas en vert : le vert appartient au bouton d'ajout,
   deux verts en compétition sur 336 px brouillent l'action principale. */
.buybar__seg button[aria-checked="true"]{background:var(--ink);color:#fff}
.buybar .btn{flex:1 1 auto;min-width:0;min-height:50px;white-space:nowrap}

/* Sous 360 px on passe à deux lignes plutôt que de rétrécir une cible tactile. */
@media (max-width:359px){
  .buybar__in{flex-wrap:wrap}
  .buybar__seg{flex:1 1 100%}
  .buybar__seg button{flex:1}
  .buybar .btn{flex:1 1 100%}
}

/* Un dialogue ouvert (upsell, panier, menu) : on efface la barre sans la
   sortir du flux. En visibility:hidden ou display:none elle refuserait le
   focus, et la restitution synchrone du focus à la fermeture tomberait
   sur body, éjectant le visiteur clavier en haut de page. */
body:has(dialog[open]) .buybar{opacity:0;pointer-events:none}
.buybar--clavier{opacity:0;pointer-events:none}

@media (max-width:860px){
  /* Réserve de hauteur constante, jamais basculée à l'apparition de la
     barre : un contenu qui saute de 66 px sous le pouce est pire que
     66 px perdus en permanence. Posée sur le pied de page et non sur body,
     sinon une bande blanche apparaît sous le pied sombre. */
  .ft{padding-bottom:calc(clamp(38px,5vw,60px) + 66px + env(safe-area-inset-bottom))}
  /* Le toast ne doit jamais masquer le bouton de la barre. */
  .toast{bottom:calc(24px + 66px + env(safe-area-inset-bottom))}
}
html{scroll-padding-bottom:80px}

/* ---------- description longue de la fiche ---------- */
.fiche{max-width:70ch}
.fiche h2{font-size:clamp(1.15rem,2.4vw,1.45rem);margin:26px 0 8px}
.fiche h2:first-child{margin-top:0}
.fiche p{color:var(--ink-2);line-height:1.7}
.fiche__mentions{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.8rem;line-height:1.55;color:var(--muted)}

/* ---------- note client, sous le titre ---------- */
.note{display:flex;align-items:center;gap:9px;margin:12px 0 16px;flex-wrap:wrap}
/* Deux couches superposées : la grise dessous, l'or dessus rognée au
   pourcentage réel. Une note de 4,7 se lit 4,7, pas 5 arrondi. */
.note__st{position:relative;display:inline-flex;flex:none}
.note__bg{display:inline-flex;gap:2px;color:var(--line-2)}
.note__fg{position:absolute;top:0;left:0;display:inline-flex;gap:2px;
  color:var(--gold);overflow:hidden;white-space:nowrap}
.note__st svg{width:16px;height:16px;flex:none}
.note__v{font-size:1rem;font-weight:700;color:var(--ink)}
.note__d{font-size:.85rem;color:var(--muted);margin-left:-5px}
.note__l{font-size:.85rem;color:var(--muted);text-underline-offset:3px}
.note__l:hover{color:var(--ink)}

/* ---------- durée d'un sachet, par format ---------- */
.duree{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px;margin:14px 0 0}
.duree__c{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:12px;row-gap:2px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.duree__e{grid-row:1/3;font-size:1.6rem;line-height:1}
.duree__g{font-size:1.05rem;color:var(--ink)}
.duree__t{font-size:.88rem;color:var(--muted);line-height:1.4}
.duree__n{margin:12px 0 0;font-size:.88rem;color:var(--muted);line-height:1.6}
@media (max-width:520px){ .duree{grid-template-columns:minmax(0,1fr)} }

/* ============================================================
   Bienfaits — grille de cartes de la fiche produit.

   Reprend la structure qui fonctionne chez le concurrent : grille de
   deux colonnes, contenu centré, fonds colorés qui alternent. Trois
   choses changent.

   1. LA PALETTE. Le concurrent fait tourner huit dégradés Material,
      vert d'eau, rose, lilas, sans aucun lien avec le produit. Ici
      six teintes du monde DELF : sable, sauge, terre, argile, olive,
      ocre. Elles alternent pareil, mais elles appartiennent à la
      marque.
   2. LES TAILLES. Titre à 9 px et texte à 10 px chez eux : illisible
      sur l'Android d'entrée de gamme qui fait le trafic. Ici 11 px
      et 12,5 px, le minimum pour que ça se lise à bout de bras.
   3. PAS DE SURVOL qui soulève, pas d'ombre portée, pas de bandeau
      qui remonte. Leurs cartes ouvrent un chat, les nôtres sont du
      texte : elles ne bougent pas.
   ============================================================ */
.bf-sec{margin-top:clamp(30px,4vw,46px)}
.bf-sec__h{font-size:clamp(1.15rem,2.4vw,1.45rem);margin-bottom:14px}

.bf{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.bf__c{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:6px;text-align:center;min-height:132px;
  padding:16px 12px;border-radius:14px;
  background:var(--bf-bg,var(--surface));
  border:1px solid var(--bf-bd,var(--line))}

/* Six teintes qui alternent, comme chez le concurrent, mais prises
   dans la palette DELF au lieu du nuancier Material. */
.bf__c:nth-child(6n+1){--bf-bg:#F4EEE3;--bf-bd:#E7DCC8}
.bf__c:nth-child(6n+2){--bf-bg:#E9EFE8;--bf-bd:#D5E0D2}
.bf__c:nth-child(6n+3){--bf-bg:#F7E9E1;--bf-bd:#EDD6C7}
.bf__c:nth-child(6n+4){--bf-bg:#EFEAE0;--bf-bd:#DFD6C4}
.bf__c:nth-child(6n+5){--bf-bg:#ECEEE3;--bf-bd:#DCE0CC}
.bf__c:nth-child(6n+6){--bf-bg:#F8F0DF;--bf-bd:#EDE0C2}

.bf__e{font-size:26px;line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}

/* 11 px et non 9 px : en capitales espacées, en dessous de 11 le mot
   se lit lettre à lettre au lieu de se lire d'un coup. */
.bf__t{font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.25}

.bf__x{font-size:12.5px;line-height:1.45;color:var(--ink-2);max-width:26ch}

@media (min-width:768px){
  .bf{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .bf__c{min-height:146px;padding:18px 14px}
  .bf__x{font-size:13px}
}
@media (min-width:1120px){
  .bf{gap:14px}
  .bf__t{font-size:11.5px}
}

/* ---------- précautions d'emploi ----------
   Affiché seulement quand la fiche en porte. Marqué sans être alarmant :
   un encadré rouge ferait fuir sur un produit alimentaire, une note grise
   en bas de page ne serait pas lue. Filet ambre et fond sable. */
.preca{margin:22px 0 0;padding:14px 16px;border-radius:var(--r-sm);
  background:#FBF4E6;border-left:4px solid var(--warn)}
.preca__t{font-family:var(--display);font-size:.92rem;font-weight:700;
  letter-spacing:.02em;color:var(--ink);margin:0 0 5px}
.preca p{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-2)}

/* ============================================================
   Chat de vente.

   La pastille ronde flottante est une exception assumée à la règle maison :
   le client la veut ainsi. En revanche ni pulsation, ni agrandissement au
   survol, ni ombre portée marquée, qui sont les vrais tells.
   Le filet or reprend le liseré du sceau des doypacks : c'est ce qui la
   distingue d'un bouton de chat générique.
   ============================================================ */
.ch__fab{position:fixed;right:16px;bottom:16px;z-index:140;
  width:56px;height:56px;border-radius:50%;border:1.5px solid var(--gold);
  background:var(--accent);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(23,19,15,.18)}
.ch__fab svg{width:24px;height:24px}
.ch__fab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* z-index 140, donc SOUS la barre d'achat à 150 : sur la fiche produit, le
   bouton d'achat prime toujours sur le chat. */
@media (max-width:860px){ .ch__fab{bottom:calc(16px + env(safe-area-inset-bottom))} }
body.ch-on .ch__fab{opacity:0;pointer-events:none}
/* La barre d'achat collante occupe 66 px en bas d'écran et passe au-dessus
   (z-index 150 contre 140). Sans ce décalage, la pastille de chat disparaît
   sous elle dès que la barre s'allume, ce qui arrive désormais sur presque
   toute la fiche produit. */
body:has(.buybar--on) .ch__fab{bottom:calc(16px + 66px + env(safe-area-inset-bottom))}

.ch{position:fixed;right:16px;bottom:84px;z-index:145;
  width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 110px);
  padding:0;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:var(--bg);color:var(--ink);
  box-shadow:0 10px 34px rgba(23,19,15,.22);
  display:none;flex-direction:column}
.ch[open]{display:flex}
.ch::backdrop{background:rgba(23,19,15,.5)}

/* Plein écran sous 481 px. La hauteur vient de visualViewport et non de
   100dvh, qui ne se met pas à jour de façon fiable quand le clavier Android
   s'ouvre : le champ finissait sous le clavier. */
@media (max-width:480px){
  .ch{right:0;left:0;bottom:0;width:100%;max-width:100%;
    height:var(--ch-h,100vh);max-height:var(--ch-h,100vh);border-radius:0;border:0}
}

.ch__hd{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--accent);color:#fff;flex:none}
/* Un sceau, pas un visage : aucune photo d'avatar, aucun point vert de
   disponibilité. Un prénom et une pastille verte, c'est un client qui croit
   écrire à quelqu'un à 23 h. */
.ch__sceau{width:32px;height:32px;border-radius:6px;flex:none;
  display:grid;place-items:center;font-family:var(--display);font-weight:800;
  background:rgba(255,255,255,.12);color:var(--gold);border:1px solid var(--gold)}
.ch__id{flex:1;min-width:0;display:grid}
.ch__t{font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:.01em}
.ch__st{font-size:.74rem;color:rgba(255,255,255,.72)}
.ch__x{width:44px;height:44px;flex:none;border:0;background:transparent;
  color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;border-radius:8px}
.ch__x:hover{background:rgba(255,255,255,.14)}

.ch__fil{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}

/* Les deux bulles se distinguent par la position et le fond, sans recourir à
   deux couleurs criardes. 15 px de corps : en dessous, illisible à bout de
   bras sur un Android d'entrée de gamme. */
.ch__b{max-width:86%;padding:10px 13px;border-radius:12px;
  font-size:15px;line-height:1.5;white-space:normal;overflow-wrap:break-word}
.ch__b--moi{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.ch__b--lui{align-self:flex-start;background:var(--bg);border:1px solid var(--line);
  color:var(--ink);border-bottom-left-radius:4px}
.ch__sys{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center;padding:0 6px}

.ch__wa{display:block;margin-top:10px;padding:9px 12px;border-radius:9px;
  background:#25D366;color:#0B2E13;font-weight:600;font-size:14px;
  text-align:center;text-decoration:none}
.ch__wa:hover{background:#1FBE5A}

.ch__sugg{display:grid;gap:7px;margin-top:2px}
.ch__s{text-align:left;padding:10px 13px;min-height:44px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink-2);
  font:inherit;font-size:14px;cursor:pointer}
.ch__s:hover{border-color:var(--accent);color:var(--ink)}

/* L'attente est une ligne de texte, pas trois points qui sautillent : la
   pulsation est un tell, et elle tourne en continu sur un téléphone lent. */
.ch__att{margin:0;align-self:flex-start;font-size:13.5px;color:var(--muted)}

.ch__form{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--bg)}
.ch__in{grid-column:1;min-height:44px;max-height:96px;resize:none;
  padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;
  font:inherit;font-size:15px;color:var(--ink);background:var(--bg)}
.ch__in:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.ch__go{grid-column:2;min-height:44px;padding:0 16px;border:0;border-radius:10px;
  background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.ch__go[disabled]{opacity:.45;cursor:default}
.ch__cpt{grid-column:1/-1;font-size:12px;color:var(--muted);min-height:1em}
/* La mention machine est permanente et discrète, jamais une bannière qu'on
   ferme et qu'on oublie. */
.ch__note{grid-column:1/-1;font-size:11.5px;line-height:1.4;color:var(--muted)}

/* ============================================================
   Gamme cosmétique : catégories, routines, matériel.
   Réutilise .wrap, .sec, .grid, .pcard et .btn déjà en place.
   ============================================================ */

/* Garde-fou générique. Chaque icône du site était bornée par une règle
   propre à sa classe, et rien ne couvrait un bouton neuf : sans dimension,
   le SVG prend toute la largeur disponible et fait exploser la mise en page.
   Les règles plus spécifiques déjà en place restent prioritaires. */
.btn svg{width:17px;height:17px;flex:none}

.sec__t{font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.sec__s{color:var(--ink-2);margin:0 0 22px;max-width:60ch}

.cat__hd{padding-block:clamp(28px,5vw,52px) 0}
.cat__hd h1{font-size:clamp(1.9rem,6vw,3rem);line-height:1.04;margin:0 0 12px;letter-spacing:-.02em}
.cat__chapo{font-size:clamp(1rem,1.6vw,1.12rem);color:var(--ink-2);max-width:56ch;margin:0}

.fil{padding-top:18px;font-size:.86rem}
.fil a{color:var(--ink-2)}

/* ---- vignettes de routine ---- */
.rtgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.rtcard{display:flex;flex-direction:column;gap:5px;padding:20px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);color:inherit;text-decoration:none}
.rtcard:hover{border-color:var(--line-2)}
.rtcard__cat{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.rtcard__t{font-size:1.16rem;font-weight:600;line-height:1.2}
.rtcard__s{font-size:.92rem;color:var(--ink-2)}
.rtcard__d{font-size:.88rem;color:var(--muted);margin-top:6px;flex:1}
.rtcard__f{font-size:.86rem;font-weight:600;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* ---- page routine ---- */
.rt__hd{padding-block:20px 0;max-width:60ch}
.rt__cat{display:inline-block;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.rt__hd h1{font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.05;margin:0 0 6px;letter-spacing:-.02em}
.rt__sous{font-size:1.05rem;color:var(--ink-2);margin:0 0 14px}
.rt__pour{font-size:1rem;margin:0}

/* Ce qu'il vous faut. Jamais « le kit » : le panier reçoit des articles
   séparés, et le total les compte. */
.besoin{margin-top:26px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);padding:20px}
.besoin__t{font-size:1.1rem;margin:0 0 14px}
.besoin__l{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.besoin__l li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center}
.besoin__l img{width:44px;height:44px;border-radius:var(--r-sm);object-fit:cover;background:var(--surface-2)}
.besoin__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.besoin__n{font-weight:600;min-width:0}
.besoin__v{font-size:.84rem;color:var(--muted)}
.besoin__p{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.besoin__f{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding-top:16px;border-top:1px solid var(--line)}
.besoin__tot{display:flex;flex-direction:column}
.besoin__tot small{font-size:.8rem;color:var(--muted)}
.besoin__tot b{font-size:1.3rem;font-variant-numeric:tabular-nums}
.besoin__f .btn{flex:1 1 240px}
.besoin__inc{margin:14px 0 0;font-size:.88rem;color:var(--ink-2)}

/* ---- les étapes ---- */
.ets{display:flex;flex-direction:column;gap:0;margin-top:34px}
.et{padding:24px 0;border-top:1px solid var(--line)}
.et__hd{display:flex;align-items:baseline;gap:12px}
.et__n{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.8rem;font-weight:600}
.et__t{font-size:1.14rem;margin:0}
.et__r{font-size:.86rem;color:var(--accent);margin:6px 0 14px;padding-left:38px}
.et__ing{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.ing{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto;gap:12px;
  align-items:baseline;padding:9px 12px;border-radius:var(--r-sm);background:var(--surface)}
.ing__d{font-size:.86rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ing__n{font-weight:600;min-width:0}
.ing__p{font-size:.84rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ing--maison{background:transparent;border:1px dashed var(--line-2)}
.ing--absent .ing__n{color:var(--ink-2)}
.et__m{margin:0 0 10px;max-width:62ch}
.et__g{margin:0;font-size:.88rem;color:var(--ink-2)}
.et__g--eau{color:var(--danger);font-weight:600}
.et__note{margin:8px 0 0;font-size:.86rem;color:var(--muted)}

/* ---- pourquoi, précautions ---- */
.pourquoi p{max-width:62ch;margin:0}
.prec{border-top:1px solid var(--line)}
.prec__l{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;max-width:62ch}
.prec__l li{position:relative;padding-left:20px}
.prec__l li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--warn)}
.prec__med{font-size:.88rem;color:var(--ink-2);max-width:62ch;margin:0}

/* ---- matériel ---- */
.mat__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;max-width:70ch}
.mat__l li{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:16px;
  padding:13px 0;border-top:1px solid var(--line)}
.mat__l li span{color:var(--ink-2);font-size:.92rem}

@media (max-width:980px){
  .rtgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .rtgrid{grid-template-columns:minmax(0,1fr)}
  .ing{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .ing__d{grid-column:1/-1;order:-1}
  .mat__l li{grid-template-columns:minmax(0,1fr);gap:3px}
  .besoin__f .btn{flex:1 1 100%}
}

/* ============================================================
   Page routine en mode d'emploi. Elle reçoit du trafic natif : le
   visiteur ne connaît ni la marque ni les poudres. On lit d'abord,
   on achète à la fin. Mesure de lecture volontairement large, rythme
   d'article, images qui portent le geste.
   ============================================================ */

.lp{max-width:760px;margin:0 auto;padding-bottom:40px}
.lp__hd{padding-block:18px 22px}
.lp__cat{display:inline-block;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:10px 0 10px}
.lp__hd h1{font-size:clamp(2rem,6.4vw,3.1rem);line-height:1.03;letter-spacing:-.025em;margin:0 0 12px}
.lp__promesse{font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.4;color:var(--ink-2);margin:0;max-width:32ch}

.lp__video{margin:0 0 22px;padding:0}
/* Les vidéos de routine sont générées en 4:3, format natif de l'outil.
   Un conteneur en 16/9 les rognerait en haut et en bas, c'est-à-dire
   exactement là où se trouvent le bol et les mains. */
.lp__vid{width:100%;aspect-ratio:4/3;display:block;border-radius:var(--r);
  background:var(--surface-2);object-fit:cover}
.lp__video figcaption{margin-top:8px;font-size:.85rem;color:var(--muted)}

.lp__reperes{display:flex;flex-wrap:wrap;gap:0;border-block:1px solid var(--line);margin-bottom:26px}
.lp__reperes span{flex:1 1 140px;display:flex;flex-direction:column;gap:3px;padding:14px 16px 14px 0;
  font-size:.95rem;color:var(--ink-2)}
.lp__reperes span + span{padding-left:16px;border-left:1px solid var(--line)}
.lp__reperes b{font-size:.82rem;color:var(--ink);font-weight:700;line-height:1.2}

.lp__intro{margin-bottom:8px}
.lp__lede{font-size:clamp(1.02rem,1.9vw,1.14rem);line-height:1.6;margin:0 0 14px}
.lp__pour{color:var(--ink-2);margin:0}

/* ---- les étapes ---- */
.pass{display:flex;flex-direction:column;gap:0;margin:30px 0 0}
.pas{padding:32px 0;border-top:1px solid var(--line)}
.pas__hd{margin-bottom:18px}
.pas__n{display:block;font-family:inherit;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.pas__t{font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.15;margin:0 0 6px;letter-spacing:-.015em}
.pas__r{margin:0;color:var(--muted);font-size:.9rem}
.pas__fig{margin:0 0 20px}
.pas__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  background:var(--surface-2);display:block}
.pas__sub{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin:0 0 10px;font-weight:600}
.pas__ings{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:8px}
.pas__ing{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 12px;border-radius:var(--r-sm);background:var(--surface)}
.pas__ing img{width:44px;height:44px;border-radius:var(--r-sm);object-fit:cover;background:var(--surface-2)}
.pas__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);
  border:1px dashed var(--line-2);color:var(--muted);font-size:1.1rem}
.pas__it{display:flex;flex-direction:column;gap:1px;min-width:0}
.pas__in{font-weight:600;min-width:0}
.pas__id{font-size:.84rem;color:var(--muted)}
.pas__ip{font-size:.86rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.pas__ing--maison{background:transparent;border:1px dashed var(--line)}
.pas__ing--absent .pas__in{color:var(--ink-2)}
.pas__m{margin:0 0 12px;font-size:1.02rem;line-height:1.62}
.pas__g{margin:0;font-size:.9rem;color:var(--ink-2);padding:10px 14px;border-radius:var(--r-sm);
  background:var(--surface)}
.pas__g--eau{background:var(--danger-bg);color:var(--danger)}
.pas__note{margin:10px 0 0;font-size:.86rem;color:var(--muted)}

.lp__sec{padding:32px 0;border-top:1px solid var(--line)}
.lp__sec h2{font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.15;margin:0 0 12px;letter-spacing:-.015em}
.lp__sec p{margin:0;font-size:1.02rem;line-height:1.62}

/* ---- l'achat, à la fin ---- */
.achat{margin-top:32px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);padding:24px}
.achat__t{font-size:clamp(1.3rem,3vw,1.7rem);margin:0 0 6px;letter-spacing:-.015em}
.achat__s{margin:0 0 18px;color:var(--ink-2);font-size:.94rem}
.achat__l{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.achat__l li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center}
.achat__l img{width:48px;height:48px;border-radius:var(--r-sm);object-fit:cover;background:var(--surface-2)}
.achat__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.achat__n{font-weight:600;min-width:0}
.achat__v{font-size:.84rem;color:var(--muted)}
.achat__p{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.achat__f{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding-top:18px;border-top:1px solid var(--line)}
.achat__tot{display:flex;flex-direction:column}
.achat__tot small{font-size:.8rem;color:var(--muted)}
.achat__tot b{font-size:1.4rem;font-variant-numeric:tabular-nums}
.achat__f .btn{flex:1 1 220px}
.achat__inc,.achat__liv{margin:14px 0 0;font-size:.88rem;color:var(--ink-2)}

.buybar__lab{flex:1 1 auto;font-size:.92rem;min-width:0}
.buybar__lab b{font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .lp__reperes span{flex:1 1 100%;padding:11px 0;border-left:0}
  .lp__reperes span + span{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .achat__f .btn{flex:1 1 100%}
}

/* ---- fiche produit : à quoi elle sert ---- */
.pd__usages{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 14px}
.usage{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:600;
  background:var(--accent-soft);color:var(--accent-ink);text-decoration:none;border:1px solid transparent}
.usage:hover{border-color:var(--accent)}
.usage--off{background:var(--surface);color:var(--muted);font-weight:400}
.pd__sert{font-size:.9rem;color:var(--ink-2);flex:1 1 100%}
#rt-liees .rtcard__d{font-variant-numeric:tabular-nums;font-size:.86rem}

/* ---- le bandeau d'achat, posé deux fois dans la page ---- */
.cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin:30px 0 8px;padding:22px 24px;border-radius:var(--r-lg);
  background:var(--ink);color:#fff}
.cta__l{display:flex;flex-direction:column;gap:3px;min-width:0}
.cta__t{font-size:1.15rem;font-weight:600;line-height:1.2}
.cta__s{font-size:.92rem;opacity:.78;font-variant-numeric:tabular-nums}
.cta__b{flex:0 0 auto}
@media (max-width:620px){
  .cta{padding:20px}
  .cta__b{flex:1 1 100%}
}

/* ---- le pourquoi de chaque produit, dans l'étape ---- */
.pas__ing{align-items:start}
.pas__iw{font-size:.9rem;line-height:1.5;color:var(--ink-2);margin-top:5px}
.pas__info{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pas__rend{margin:0;font-size:.9rem;color:var(--ink-2);padding:10px 14px;
  border-radius:var(--r-sm);background:var(--accent-soft)}
.pas__rend b,.pas__g b{color:var(--ink)}

/* ---- après la routine : la protection solaire ---- */
.lp__sec p + p{margin-top:14px}
.soleil{background:var(--surface);border-radius:var(--r-lg);padding:26px 24px;margin-top:32px;border-top:0}
.soleil h2{margin-bottom:10px}
.soleil__l{counter-reset:g;list-style:none;margin:18px 0 16px;padding:0;
  display:flex;flex-direction:column;gap:12px}
.soleil__l li{position:relative;padding-left:34px;line-height:1.55}
.soleil__l li::before{counter-increment:g;content:counter(g);position:absolute;left:0;top:1px;
  display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.76rem;font-weight:600}
.soleil__n{margin:0;font-size:.94rem;color:var(--ink-2);padding-top:14px;border-top:1px solid var(--line)}


/* ---- schéma : ce qui se passe sur la peau ---- */
.sch__in{font-size:1.02rem;line-height:1.65;margin:0 0 22px}
.sch__f{margin:0 0 8px;background:var(--bone,#f7f5f2);border:1px solid var(--line);border-radius:6px;
  overflow:hidden}
.sch__f img{display:block;width:100%;height:auto}
.sch__f figcaption{padding:9px 14px;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line)}
.sch__a{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 34px;margin:26px 0 0}
.sch__ac h3{font-size:1.06rem;margin:0 0 3px;letter-spacing:-.01em}
.sch__ac p{margin:0;line-height:1.6}
.sch__r{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  margin:0 0 8px !important}
.sch__av{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.sch__avt{font-size:1.24rem;margin:0 0 16px;letter-spacing:-.015em}
.sch__d{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:16px 0 0}
.sch__d p{margin:0;line-height:1.6;color:var(--ink-2)}
.sch__n{margin:20px 0 0;padding:15px 18px;background:var(--accent-soft);border-radius:6px;
  line-height:1.6}
@media (max-width:640px){
  .sch__a,.sch__d{grid-template-columns:1fr;gap:22px}
}

/* ---- lecteur Wistia : même gabarit que la vidéo locale ---- */
wistia-player.lp__vid{width:100%;display:block;border-radius:var(--r);overflow:hidden}
wistia-player.lp__vid:not(:defined){aspect-ratio:auto}

/* ---- lanceur WhatsApp (remplace la pastille de chat, provisoire) ----
   Reprend .ch__fab pour tout le placement. Le vert est celui de WhatsApp :
   ici la reconnaissance immédiate prime sur la palette maison, c'est elle
   qui dit au visiteur ce qui va s'ouvrir. */
.wa__fab{background:#25D366;border-color:#1da851;color:#fff;text-decoration:none}
.wa__fab svg{width:27px;height:27px}
.wa__fab:focus-visible{outline:2px solid #1da851;outline-offset:3px}

/* ---- pages ingrédient ---- */
.mp{max-width:760px;margin:0 auto;padding:26px 0 40px}
.mp__hd{margin-bottom:22px}
.mp__hd h1{font-size:clamp(1.7rem,4.6vw,2.5rem);line-height:1.1;letter-spacing:-.022em;margin:0 0 12px}
.mp__ch{font-size:clamp(1.02rem,2vw,1.16rem);line-height:1.55;color:var(--ink-2);margin:0}
.mp__f{margin:0 0 26px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.mp__f img{display:block;width:100%;height:auto}
.mp__f figcaption{padding:9px 14px;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line)}

/* la recette que tout le monde connaît : posée en aparté, pas en argument */
.mp__rec{margin:22px 0 0;padding:18px 20px;background:var(--surface-2);
  border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0}
.mp__rec h3{margin:0 0 10px;font-size:1.02rem}
.mp__rec ul{margin:0 0 10px;padding-left:19px}
.mp__rec li{margin-bottom:5px;line-height:1.5}
.mp__recn{margin:0;font-size:.88rem;color:var(--muted)}

/* le tableau des marques : c'est la preuve, il doit se lire d'un coup */
.mp__tw{overflow-x:auto;margin:22px 0}
.mp__t{width:100%;border-collapse:collapse;font-size:.92rem;min-width:460px}
.mp__t th{text-align:left;padding:9px 12px 9px 0;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);font-weight:600}
.mp__t td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.mp__m{font-weight:650;color:var(--ink);white-space:nowrap}
.mp__pays{color:var(--ink-2);white-space:nowrap}

.mp__cmp{margin:24px 0 0;padding:20px 22px;background:var(--accent-soft);border-radius:var(--r)}
.mp__cmp h3{margin:0 0 10px;font-size:1.08rem}
.mp__cmp p{margin:0 0 10px;line-height:1.62}
.mp__cmp p:last-child{margin-bottom:0}

.mp__ter p{font-size:1.04rem;line-height:1.65}

/* actifs et étapes : même gabarit, deux colonnes qui tombent à une sur mobile */
.mp__acs,.mp__ets{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 28px;margin-top:24px}
.mp__ac h3,.mp__et h3{display:flex;align-items:baseline;gap:9px;margin:14px 0 3px;
  font-size:1.08rem;letter-spacing:-.01em}
.mp__no{display:inline-grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.76rem;font-weight:700}
.mp__ro{margin:0 0 8px !important;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}
.mp__ac p,.mp__et p{margin:0;line-height:1.6}
.mp__acs .mp__f,.mp__ets .mp__f{margin:0}

/* barre collante des pages ingrédient : la routine, jamais le sachet seul */
.buybar--ing .buybar__in{gap:12px}
.buybar__im{flex:none;width:46px;height:46px;border-radius:var(--r-sm);object-fit:cover;
  background:var(--surface-2)}
.buybar--ing .buybar__lab{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.buybar--ing .buybar__lab b{font-size:1rem}
.achat__p{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.achat__f{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (max-width:640px){
  .mp__acs,.mp__ets{grid-template-columns:1fr;gap:26px}
  .buybar--ing .buybar__lab{font-size:.86rem}
  .buybar__im{width:40px;height:40px}
}

.pas__il{display:inline-block;margin-top:6px;font-size:.85rem;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px}