/* ============================================================
   SKIN THERAPY — feuille de style du site vitrine
   Réplique exacte des tokens et composants du prototype B validé
   (brand.css + site-b.css), étendue aux pages boutique / produit /
   histoire / contact / mentions / 404 et au parcours WhatsApp.
   ============================================================ */

/* ---- Polices (marque) ---- */
@font-face { font-family:'Cardo'; src:url('assets/fonts/Principal/Cardo-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cardo'; src:url('assets/fonts/Principal/Cardo-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Cardo'; src:url('assets/fonts/Principal/Cardo-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('assets/fonts/Secondaire/HelveticaNeueThin.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('assets/fonts/Secondaire/HelveticaNeueLight.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('assets/fonts/Secondaire/HelveticaNeueRoman.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('assets/fonts/Secondaire/HelveticaNeueMedium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('assets/fonts/Secondaire/HelveticaNeueBold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* palette */
  --st-orange:#ff6f33; --st-blue:#9fd4e2; --st-yellow:#ffc727; --st-violet:#aa9ad8;
  --st-white:#f6f6f6; --st-black:#111111; --st-paper:#ffffff;
  --st-orange-700:oklch(58% 0.18 42);
  --st-orange-soft:#ffe6db; --st-blue-soft:#e4f2f6; --st-yellow-soft:#fff2cf; --st-violet-soft:#ece7f6;

  /* sémantique */
  --fg-1:var(--st-black); --fg-2:#4a4a4a; --fg-3:#8a8a8a;
  --fg-on-dark:var(--st-white); --fg-on-orange:#fff;
  --bg-1:var(--st-white); --bg-2:var(--st-paper); --bg-inverse:var(--st-black); --bg-brand:var(--st-orange);
  --line-1:#e4e2dd; --line-2:#d2cfc8; --line-on-dark:rgba(255,255,255,.16);
  --accent:var(--st-orange); --accent-press:var(--st-orange-700);
  --focus-ring:color-mix(in oklch, var(--st-orange) 55%, white);

  /* typo */
  --font-display:'Cardo','Times New Roman',Georgia,serif;
  --font-body:'Helvetica Neue LT','Helvetica Neue',Helvetica,Arial,sans-serif;
  --text-display:400 clamp(48px,7vw,96px)/0.98 var(--font-display);
  --text-h1:400 clamp(40px,5vw,64px)/1.04 var(--font-display);
  --text-h2:400 clamp(30px,3.4vw,44px)/1.08 var(--font-display);
  --text-h3:400 28px/1.15 var(--font-display);
  --text-title:500 20px/1.3 var(--font-body);
  --text-lead:300 20px/1.55 var(--font-body);
  --text-body:400 16px/1.6 var(--font-body);
  --text-small:400 14px/1.55 var(--font-body);
  --text-caption:500 12px/1.4 var(--font-body);
  --text-eyebrow:500 12px/1.2 var(--font-body);
  --tracking-eyebrow:0.18em; --tracking-tight:-0.01em;

  /* rayons / espacement / ombres */
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(17,17,17,.05);
  --shadow-md:0 6px 24px -8px rgba(17,17,17,.12);
  --shadow-lg:0 24px 60px -20px rgba(17,17,17,.20);
}

/* ---- base ---- */
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--fg-1); background:var(--st-white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

.serif { font-family:var(--font-display); font-weight:400; letter-spacing:-0.01em; }
.eyebrow { font:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--accent); }
.cap { font:var(--text-caption); }
.lead { font:var(--text-lead); color:var(--fg-2); }
.muted { color:var(--fg-3); }
.hairline { border:none; border-top:1px solid var(--line-1); margin:0; }

/* ---- wordmark ---- */
.wordmark { font-family:var(--font-display); letter-spacing:-0.01em; display:inline-flex; align-items:center; line-height:1; color:var(--fg-1); }
.wordmark img { object-fit:contain; display:inline-block; }
.wordmark.light { color:#fff; }

/* ---- boutons ---- */
.btn { display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font:var(--text-small); font-weight:500; border-radius:var(--r-pill);
  padding:13px 28px; border:1.5px solid transparent; white-space:nowrap;
  transition:background .18s cubic-bezier(.2,.6,.2,1), transform .12s ease, color .18s, border-color .18s; }
.btn:active { transform:scale(.98); }
.btn svg { width:17px; height:17px; flex:0 0 auto; }
.btn-primary { background:var(--st-orange); color:#fff; }
.btn-primary:hover { background:var(--st-orange-700); }
.btn-dark { background:var(--st-black); color:#fff; }
.btn-dark:hover { background:#000; }
.btn-outline { background:transparent; border-color:var(--st-black); color:var(--st-black); }
.btn-outline:hover { background:var(--st-black); color:#fff; }
.btn-ghost-light { background:transparent; border-color:rgba(255,255,255,.6); color:#fff; }
.btn-ghost-light:hover { background:#fff; color:var(--st-black); border-color:#fff; }
.btn-block { width:100%; }
.btn-lg { padding:16px 34px; font-size:15px; }
.btn-sm { padding:9px 18px; font-size:13px; }

/* ---- bouton icône ---- */
.iconbtn { width:42px; height:42px; border-radius:var(--r-pill); border:none; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; color:inherit;
  transition:background .15s; position:relative; }
.iconbtn:hover { background:rgba(17,17,17,.07); }
.iconbtn svg { width:21px; height:21px; }

/* ---- entrée (guarded) ---- */
@keyframes fadeUp { from { transform:translateY(12px); } to { transform:none; } }
.fade { opacity:1; }
@media (prefers-reduced-motion: no-preference) {
  .fade { animation:fadeUp .5s cubic-bezier(.2,.6,.2,1) both; }
}

/* ---- nav mobile ---- */
.navtoggle { display:none; width:44px; height:44px; border:none; background:transparent; color:inherit;
  align-items:center; justify-content:center; border-radius:var(--r-pill); transition:background .15s; }
.navtoggle:hover { background:rgba(17,17,17,.07); }
.navtoggle svg { width:24px; height:24px; }
.mnav-scrim { position:fixed; inset:0; background:rgba(17,17,17,.42); z-index:90; opacity:0; pointer-events:none; transition:opacity .22s; }
.mnav-scrim.open { opacity:1; pointer-events:auto; }
.mnav { position:fixed; top:0; left:0; height:100%; height:100dvh; width:min(340px,86vw); background:var(--st-paper); color:var(--fg-1);
  z-index:91; transform:translateX(-100%); transition:transform .26s cubic-bezier(.2,.6,.2,1);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.mnav.open { transform:none; }
.mnav-top { display:flex; align-items:center; justify-content:space-between; padding:18px 18px 18px 22px; border-bottom:1px solid var(--line-1); }
.mnav-links { display:flex; flex-direction:column; padding:12px; gap:2px; flex:1; overflow-y:auto; }
.mnav-links a { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px;
  font:var(--text-title); color:var(--fg-1);
  padding:12px 14px; border-radius:var(--r-sm); transition:background .15s,color .15s; }
.mnav-links a > span { font-family:var(--font-display); font-size:21px; }
.mnav-links a svg { color:var(--fg-3); width:18px; height:18px; }
.mnav-links a:hover, .mnav-links a.on { background:var(--st-orange-soft); color:var(--st-orange); }
.mnav-links a.on svg, .mnav-links a:hover svg { color:var(--st-orange); }
.mnav-foot { padding:18px 20px; border-top:1px solid var(--line-1); }

@media (max-width:760px){
  .navtoggle { display:inline-flex; }
}

/* ===== gabarit site B — éditorial chaleureux ===== */
.sb { min-height:100vh; display:flex; flex-direction:column; background:var(--st-paper); }
.sb .wrap { width:100%; max-width:1280px; margin:0 auto; padding-inline:56px; }
.sb main { flex:1; }

/* header */
.sb-promo { background:var(--st-orange); color:#fff; text-align:center; font-size:12.5px; letter-spacing:.05em; padding:9px 0; }
.sb-head { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line-1); }
.sb-head .bar { height:78px; display:flex; align-items:center; gap:30px; }
.sb-logo { margin-right:auto; background:none; border:none; }
.sb-nav { display:flex; align-items:center; gap:30px; }
.sb-nav a { font:var(--text-small); color:var(--fg-1); padding:6px 0; position:relative; }
.sb-nav a.active, .sb-nav a:hover { color:var(--st-orange); }
.sb-acts { display:flex; gap:6px; align-items:center; }

/* CTA WhatsApp (remplace le panier — décision du 4 août : pas de commande en ligne) */
.btn-wa { gap:9px; }
.btn-wa svg { width:16px; height:16px; }
@media (max-width:920px){ .btn-wa .lbl-long { display:none; } }
.wa-float { position:fixed; right:22px; bottom:22px; z-index:70; width:56px; height:56px; border-radius:var(--r-pill);
  background:var(--st-orange); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); transition:background .18s, transform .12s; }
.wa-float:hover { background:var(--st-orange-700); transform:translateY(-2px); }
.wa-float svg { width:26px; height:26px; }

/* hero pleine largeur */
.sb-hero { position:relative; }
.sb-hero .bg { width:100%; height:600px; object-fit:cover; }
.sb-hero .overlay { position:absolute; inset:0; }
.sb-hero .overlay .wrap { height:100%; display:flex; align-items:center; }
.sb-herocard { background:rgba(255,255,255,.94); border-radius:var(--r-lg); padding:40px 42px; max-width:560px; box-shadow:var(--shadow-md); }
.sb-herocard h1 { font:var(--text-display); font-size:clamp(40px,4.6vw,62px); letter-spacing:var(--tracking-tight); margin:14px 0 16px; }

/* section */
.sb-sec { padding:52px 0; }
.sb-sec.tight { padding:38px 0; }

/* manifeste */
.sb-mani { display:grid; grid-template-columns:0.95fr 1.05fr; gap:72px; align-items:start; }
.sb-mani .big { font:var(--text-h1); font-size:clamp(30px,3.3vw,44px); line-height:1.08; }
.sb-mani p { color:var(--fg-2); line-height:1.75; font-size:16.5px; }
.sb-pills { display:flex; gap:26px; margin-top:26px; flex-wrap:wrap; }
.sb-pill { display:flex; align-items:center; gap:9px; font-weight:500; font-size:14px; }
.sb-pill img { width:15px; height:15px; object-fit:contain; }

/* bandes éditoriales produits */
.sb-band { background:var(--st-orange-soft); border-top:1px solid #f0d8cc; border-bottom:1px solid #f0d8cc; }
.sb-feat { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.sb-feat + .sb-feat { margin-top:42px; }
.sb-feat .img { border-radius:var(--r-lg); overflow:hidden; height:380px; background:var(--st-blue-soft); }
.sb-feat .img img { width:100%; height:100%; object-fit:cover; }
.sb-feat h3 { font:var(--text-h2); margin:10px 0 14px; }
.sb-feat p { color:var(--fg-2); line-height:1.7; margin:0 0 22px; }
.sb-feat .price { font:var(--text-h3); }

/* rituel */
.sb-rit { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; }
.sb-rit .c .img { height:260px; border-radius:var(--r-lg); overflow:hidden; margin-bottom:18px; background:var(--st-blue-soft); }
.sb-rit .c .img img { width:100%; height:100%; object-fit:cover; }
.sb-rit h4 { display:flex; align-items:baseline; gap:12px; margin:0 0 12px; }
.sb-rit h4 .n { font:var(--text-h3); color:var(--st-orange); }
.sb-rit h4 .t { font:var(--text-h3); }
.sb-rit p { color:var(--fg-2); line-height:1.7; margin:0; }

/* témoignage */
.sb-testi { display:grid; grid-template-columns:0.8fr 1.2fr; gap:50px; align-items:center; }
.sb-testi .img { height:340px; border-radius:var(--r-lg); overflow:hidden; background:var(--st-blue-soft); }
.sb-testi .img img { width:100%; height:100%; object-fit:cover; }
.sb-testi blockquote { font:var(--text-h2); line-height:1.15; margin:14px 0 20px; }
.sb-stars { color:var(--st-orange); letter-spacing:3px; font-size:18px; }

/* CTA pleine largeur */
.sb-cta { position:relative; }
.sb-cta .bg { width:100%; height:340px; object-fit:cover; }
.sb-cta .ov { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:rgba(17,17,17,.38); }
.sb-cta h2 { font:var(--text-display); font-size:clamp(34px,4vw,52px); color:#fff; margin:0 0 20px; }

/* carte produit */
.sb-pcard { cursor:pointer; display:block; }
.sb-pcard .img { height:300px; border-radius:var(--r-lg); overflow:hidden; background:var(--st-blue-soft); }
.sb-pcard .img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.sb-pcard:hover .img img { transform:scale(1.04); }
.sb-pcard h3 { font:var(--text-h3); font-size:24px; margin:14px 0 6px; }
.sb-pcard .row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:10px; }
.sb-pcard .price { font-size:18px; font-weight:500; }
.sb-pcard .price.pending { color:var(--fg-3); font-weight:400; font-size:14px; }

/* boutique */
.sb-shop { display:grid; grid-template-columns:230px 1fr; gap:48px; align-items:start; }
.sb-side h5 { font-size:14px; font-weight:600; margin:0 0 12px; }
.sb-side .grp { margin-bottom:26px; }
.sb-side button { display:block; background:none; border:none; color:var(--fg-2); font-size:14.5px; padding:7px 0; text-align:left; }
.sb-side button.on, .sb-side button:hover { color:var(--st-orange); }
.sb-side .count { color:var(--fg-3); font-size:12.5px; margin-left:5px; }
.sb-prods { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.sb-shop-head { display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; padding:60px 56px; }
.sb-shop-head .img { height:230px; border-radius:var(--r-lg); overflow:hidden; background:var(--st-blue-soft); }
.sb-shop-head .img img { width:100%; height:100%; object-fit:cover; }

/* fiche produit */
.sb-crumb { padding:24px 0 4px; font-size:13px; color:var(--fg-3); }
.sb-crumb a:hover { color:var(--st-orange); }
.sb-pdp { display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start; }
.sb-pdp .main { height:540px; border-radius:var(--r-lg); overflow:hidden; background:var(--st-blue-soft); }
.sb-pdp .main img { width:100%; height:100%; object-fit:cover; }
.sb-pdp .thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
.sb-pdp .thumbs .t { height:104px; border-radius:var(--r-sm); overflow:hidden; padding:0; border:2px solid transparent; background:var(--st-blue-soft); }
.sb-pdp .thumbs .t.active { border-color:var(--st-orange); }
.sb-pdp .thumbs .t img { width:100%; height:100%; object-fit:cover; }
.sb-info { position:sticky; top:96px; }
.sb-blocks { margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.sb-blk { border:1px solid var(--line-1); border-radius:var(--r-md); padding:18px 20px; }
.sb-blk h4 { margin:0 0 10px; font-size:15px; font-weight:600; }
.sb-blk p, .sb-blk li { color:var(--fg-2); font-size:14.5px; line-height:1.6; }
.sb-blk ul { margin:0; padding-left:18px; }
.sb-blk p { margin:0; }
.sb-pdp-band { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:56px; }
.sb-pdp-band .img { height:280px; border-radius:var(--r-lg); overflow:hidden; background:var(--st-blue-soft); }
.sb-pdp-band .img img { width:100%; height:100%; object-fit:cover; }

/* placeholder contenu à compléter */
.ph-txt { color:var(--fg-3); font-style:italic; }
.badge-complement { display:inline-flex; align-items:center; gap:7px; background:var(--st-violet-soft); color:#4c3f70;
  border-radius:var(--r-pill); padding:6px 14px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.sb-legal-note { background:var(--st-yellow-soft); border:1px solid #ecd9a0; border-radius:var(--r-md); padding:14px 18px;
  font-size:13.5px; color:#5c4d1e; line-height:1.6; }

/* à propos */
.sb-abouthero { position:relative; }
.sb-abouthero .bg { width:100%; height:520px; object-fit:cover; }
.sb-abouthero .shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,17,17,.08) 30%, rgba(17,17,17,.55) 100%); }
.sb-abouthero .lbl { position:absolute; left:56px; bottom:48px; max-width:640px; color:#fff; }
.sb-abouthero h1 { font:var(--text-display); font-size:clamp(42px,5vw,68px); margin:8px 0 0; color:#fff; }
.sb-chap { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.sb-chap + .sb-chap { margin-top:42px; }
.sb-chap .img { height:300px; border-radius:var(--r-lg); overflow:hidden; background:var(--st-blue-soft); }
.sb-chap .img img { width:100%; height:100%; object-fit:cover; }
.sb-chap h3 { font:var(--text-h2); margin:0 0 16px; }
.sb-chap p { color:var(--fg-2); line-height:1.75; }
.sb-about-cta { text-align:center; padding:64px 56px; }

/* contact */
.sb-csplit { display:grid; grid-template-columns:1fr 1fr; min-height:560px; }
.sb-csplit .ph { min-height:560px; background:var(--st-blue-soft); }
.sb-csplit .ph img { width:100%; height:100%; object-fit:cover; }
.sb-cform { padding:64px 56px; }
.sb-cform h1 { font:var(--text-h1); font-size:46px; margin:12px 0 8px; }
.sb-cform .f { margin-bottom:18px; }
.sb-cform label { display:block; font-size:13px; font-weight:500; margin:0 0 7px; }
.sb-input { width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:12px 14px; font:var(--text-body); font-family:var(--font-body); outline:none; }
.sb-input:focus { border-color:var(--st-orange); }
.sb-wacard { background:var(--st-orange-soft); border:1px solid #f0d8cc; border-radius:var(--r-md); padding:22px 24px; margin:0 0 28px; }
.sb-wacard h3 { font:var(--text-h3); font-size:24px; margin:0 0 8px; }
.sb-wacard p { color:var(--fg-2); font-size:14.5px; margin:0 0 16px; }
.sb-cinfo { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.sb-cinfo .it { display:flex; gap:12px; }
.sb-cinfo .it svg { flex:0 0 auto; }
.sb-cinfo h4 { margin:0 0 3px; font-size:15px; }
.sb-cinfo p { margin:0; color:var(--fg-2); font-size:14px; }
.sb-cinfo-wrap { padding:38px 56px; }

/* mentions légales / pages texte */
.sb-legal { max-width:760px; margin:0 auto; padding:56px 0 80px; }
.sb-legal h1 { font:var(--text-h1); font-size:clamp(34px,4vw,52px); margin:10px 0 30px; }
.sb-legal h2 { font:var(--text-h3); margin:36px 0 12px; }
.sb-legal p, .sb-legal li { color:var(--fg-2); line-height:1.75; font-size:15.5px; }

/* 404 */
.sb-404 { text-align:center; padding:110px 24px 130px; }
.sb-404 .mark { width:64px; height:64px; margin:0 auto 26px; }
.sb-404 h1 { font:var(--text-display); font-size:clamp(60px,10vw,120px); margin:0 0 6px; }
.sb-404 p { color:var(--fg-2); margin:0 0 30px; }

/* footer sombre */
.sb-foot { background:var(--st-black); color:rgba(255,255,255,.78); padding:60px 0 30px; }
.sb-foot .cols { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.sb-foot h5 { color:#fff; font-size:14px; margin:0 0 12px; font-weight:500; }
.sb-foot a { color:rgba(255,255,255,.7); font-size:14px; display:block; padding:5px 0; }
.sb-foot a:hover { color:#fff; }
.sb-foot a.inline { display:inline-flex; gap:8px; align-items:center; }
.sb-foot .bot { display:flex; justify-content:space-between; border-top:1px solid var(--line-on-dark); margin-top:32px; padding-top:16px; font-size:12.5px; color:rgba(255,255,255,.5); }
.sb-foot .bot a { display:inline; padding:0; font-size:12.5px; color:rgba(255,255,255,.5); }
.sb-foot .bot a:hover { color:#fff; }

/* ===== responsive ===== */
/* tablette */
@media (max-width:1024px){
  .sb .wrap { padding-inline:36px; }
  .sb-shop { grid-template-columns:200px 1fr; gap:32px; }
  .sb-prods { grid-template-columns:repeat(2,1fr); }
  .sb-feat,.sb-testi { gap:36px; }
  .sb-hero .bg { height:480px; }
  .sb-shop-head,.sb-pdp-band { gap:36px; padding:48px 36px; }
}
/* mobile */
@media (max-width:760px){
  .sb .wrap { padding-inline:22px; }
  .sb-nav { display:none; }
  .sb-search { display:none; }
  .sb-head .bar { height:62px; gap:14px; }
  .sb-mani,.sb-feat,.sb-rit,.sb-testi,.sb-shop,.sb-pdp,.sb-chap,.sb-csplit,.sb-prods,.sb-cinfo { grid-template-columns:1fr; }
  .sb-sec { padding:38px 0; }
  .sb-hero { display:flex; flex-direction:column; }
  .sb-hero .bg { height:280px; }
  .sb-hero .overlay { position:static; background:var(--st-paper); }
  .sb-hero .overlay .wrap { height:auto; padding:0; }
  .sb-herocard { max-width:none; border-radius:0; padding:32px 22px; box-shadow:none; background:transparent; }
  .sb-herocard h1 { font-size:clamp(30px,8vw,44px); }
  .sb-herocard .cta-row { flex-direction:column; }
  .sb-herocard .cta-row .btn { width:100%; }
  .sb-feat .img,.sb-pcard .img,.sb-chap .img { height:260px; }
  .sb-rit .c .img { height:200px; }
  .sb-testi .img { height:260px; }
  .sb-pdp .main { height:auto; aspect-ratio:1/1; }
  .sb-pdp .thumbs { grid-template-columns:repeat(4,1fr); }
  .sb-pdp .thumbs .t { height:76px; }
  .sb-info { position:static; }
  .sb-csplit { min-height:0; }
  .sb-csplit .ph { min-height:260px; }
  .sb-cform { padding:36px 24px; }
  .sb-cform h1 { font-size:32px; }
  .sb-abouthero .bg { height:340px; }
  .sb-abouthero .lbl { left:24px; right:24px; bottom:32px; }
  .sb-shop-head { grid-template-columns:1fr; gap:24px; padding:36px 22px; }
  .sb-shop-head .img { height:200px; }
  .sb-pdp-band { grid-template-columns:1fr; gap:24px; padding:36px 22px; }
  .sb-pdp-band .img { height:220px; }
  .sb-about-cta { padding:40px 22px; }
  .sb-cinfo-wrap { padding:28px 22px; }
  .sb-promo { font-size:11px; padding:8px 16px; line-height:1.4; }
  .sb-cta .bg { height:280px; }
  .sb-cta h2 { font-size:clamp(28px,7vw,42px); padding:0 16px; }
  .sb-side { display:flex; gap:18px; flex-wrap:wrap; }
  .sb-side .grp { margin-bottom:0; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .sb-side h5 { margin:0 6px 0 0; }
  .sb-side button { padding:6px 14px; border:1px solid var(--line-1); border-radius:var(--r-pill); font-size:13px; }
  .sb-side button.on { background:var(--st-orange-soft); border-color:var(--st-orange); color:var(--st-orange); }
  .wa-float { right:16px; bottom:16px; width:52px; height:52px; }
}
/* petit mobile */
@media (max-width:460px){
  .sb .wrap { padding-inline:16px; }
  .sb-cinfo { gap:18px; }
  .sb-foot .cols { gap:26px; }
  .sb-foot .bot { flex-direction:column; gap:6px; align-items:flex-start; }
}

/* ============================================================
   EXTENSIONS CDC — ajouts uniquement (complément des 7 pages :
   notre approche / conseils / article / FAQ / points de vente /
   commander WhatsApp / politique de confidentialité)
   ============================================================ */

/* nav élargie : 6 entrées — respiration réduite avant le point de bascule mobile */
@media (max-width:1140px){
  .sb-nav { gap:18px; }
  .sb-head .bar { gap:18px; }
  .btn-wa .lbl-long { display:none; }
}

/* en-tête de page simple */
.sb-pagehead { padding:52px 0 10px; max-width:740px; }
.sb-pagehead h1 { font:var(--text-h1); font-size:clamp(36px,4.4vw,58px); letter-spacing:var(--tracking-tight); margin:10px 0 14px; }
.sb-pagehead .lead { margin:0; }

/* étiquette type de peau / thème */
.sb-tag { display:inline-flex; align-items:center; gap:6px; background:var(--st-blue-soft); color:#2b5560;
  border-radius:var(--r-pill); padding:5px 13px; font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.sb-tag.warm { background:var(--st-orange-soft); color:var(--st-orange-700); }
.sb-tag.sun  { background:var(--st-yellow-soft); color:#7a611a; }
.sb-tag.calm { background:var(--st-violet-soft); color:#4c3f70; }

/* filtres par type de peau (réutilise data-filter de st.js) */
.sb-skinfilters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:26px 0 34px; }
.sb-skinfilters button { background:none; border:1px solid var(--line-1); border-radius:var(--r-pill);
  padding:8px 18px; font:var(--text-small); color:var(--fg-2); transition:background .15s,color .15s,border-color .15s; }
.sb-skinfilters button.on, .sb-skinfilters button:hover { background:var(--st-orange-soft); border-color:var(--st-orange); color:var(--st-orange); }
.sb-skinfilters .count { color:var(--fg-3); font-size:13px; margin-left:8px; }

/* cartes d'articles conseils */
.sb-artgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.sb-artcard { display:block; }
.sb-artcard .img { height:235px; border-radius:var(--r-lg); overflow:hidden; background:var(--st-blue-soft); }
.sb-artcard .img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.sb-artcard:hover .img img { transform:scale(1.04); }
.sb-artcard .sb-tag { margin:16px 0 0; }
.sb-artcard h3 { font:var(--text-h3); font-size:23px; margin:10px 0 8px; }
.sb-artcard h3 a:hover, .sb-artcard:hover h3 { color:var(--st-orange); }
.sb-artcard p { color:var(--fg-2); font-size:14.5px; line-height:1.65; margin:0; }

/* page article conseil */
.sb-article { max-width:760px; margin:0 auto; padding:20px 0 70px; }
.sb-article h1 { font:var(--text-h1); font-size:clamp(32px,4vw,50px); letter-spacing:var(--tracking-tight); margin:14px 0 0; }
.sb-article .chapo { font:var(--text-lead); color:var(--fg-2); margin:18px 0 28px; }
.sb-article .cover { height:380px; border-radius:var(--r-lg); overflow:hidden; background:var(--st-blue-soft); margin:6px 0 36px; }
.sb-article .cover img { width:100%; height:100%; object-fit:cover; }
.sb-article h2 { font:var(--text-h3); margin:34px 0 12px; }
.sb-article p, .sb-article li { color:var(--fg-2); line-height:1.8; font-size:16px; }

/* FAQ — accordéons */
.sb-faq { max-width:820px; margin:0 auto; padding-bottom:70px; }
.sb-faq .theme { margin-top:44px; }
.sb-faq .theme > h2 { font:var(--text-h2); font-size:clamp(26px,2.8vw,36px); margin:0 0 6px; }
.sb-qa { border:1px solid var(--line-1); border-radius:var(--r-md); background:var(--bg-2); margin-top:12px; }
.sb-qa summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; font-weight:500; font-size:15.5px; }
.sb-qa summary::-webkit-details-marker { display:none; }
.sb-qa summary .chev { flex:0 0 auto; width:20px; height:20px; color:var(--st-orange); transition:transform .2s; }
.sb-qa[open] summary .chev { transform:rotate(45deg); }
.sb-qa .a { padding:0 20px 18px; color:var(--fg-2); font-size:14.5px; line-height:1.7; }
.sb-qa .a p { margin:0 0 10px; }
.sb-qa .a p:last-child { margin-bottom:0; }

/* points de vente */
.sb-pos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.sb-pos { border:1px solid var(--line-1); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); display:flex; flex-direction:column; }
.sb-pos .map { height:165px; background:var(--st-blue-soft); display:flex; align-items:center; justify-content:center;
  color:#2b5560; font-size:13px; font-style:italic; }
.sb-pos .body { padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sb-pos h3 { font:var(--text-h3); font-size:22px; margin:0; }
.sb-pos .row { display:flex; gap:10px; color:var(--fg-2); font-size:14px; line-height:1.55; }
.sb-pos .row svg { flex:0 0 auto; width:17px; height:17px; margin-top:2px; color:var(--st-orange); }

/* parcours de commande WhatsApp */
.sb-wsteps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.sb-wstep { border:1px solid var(--line-1); border-radius:var(--r-lg); background:var(--bg-2); padding:26px 24px; }
.sb-wstep .n { font:var(--text-h2); font-size:34px; color:var(--st-orange); display:block; margin-bottom:12px; }
.sb-wstep h3 { font:var(--text-h3); font-size:21px; margin:0 0 10px; }
.sb-wstep p { color:var(--fg-2); font-size:14px; line-height:1.65; margin:0; }

/* aperçu de conversation WhatsApp (illustratif) */
.sb-chatdemo { background:var(--st-orange-soft); border:1px solid #f0d8cc; border-radius:var(--r-lg); padding:30px; }
.sb-bubble { background:#fff; border-radius:var(--r-md); border-bottom-left-radius:var(--r-xs); box-shadow:var(--shadow-sm);
  padding:14px 18px; font-size:14.5px; color:var(--fg-1); max-width:420px; line-height:1.6; }
.sb-bubble + .sb-bubble { margin-top:10px; }
.sb-bubble.me { background:var(--st-yellow-soft); border-radius:var(--r-md); border-bottom-right-radius:var(--r-xs); margin-left:auto; }
.sb-bubble .from { display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-bottom:5px; }

/* responsive des extensions */
@media (max-width:1024px){
  .sb-artgrid, .sb-pos-grid { grid-template-columns:repeat(2,1fr); }
  .sb-wsteps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .sb-pagehead { padding:36px 0 6px; }
  .sb-artgrid, .sb-pos-grid, .sb-wsteps { grid-template-columns:1fr; }
  .sb-artcard .img { height:210px; }
  .sb-article .cover { height:240px; }
  .sb-chatdemo { padding:20px; }
}