/* =========================================================================
   PARFUM DECANT — feuille de style unique
   Aucune image, aucun SVG : icônes et flacons sont dessinés en CSS.
   ========================================================================= */

/* ------------------------------------------------------------ 1. socle */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
details summary::-webkit-details-marker{display:none}

:root{
  --ink:#111111;
  --ink-2:#3d3d3d;
  --muted:#7a7a7a;
  --line:#e4e2df;
  --line-2:#d6d3ce;
  --bg:#ffffff;
  --soft:#f7f6f4;
  --soft-2:#efedea;
  --ok:#1e9e5a;
  --ko:#c0392b;
  --wrap:1280px;
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 28px rgba(0,0,0,.06);
}

body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  /* filet de sécurité : aucun défilement horizontal. `clip` et non `hidden`,
     sinon body devient conteneur de défilement et l'en-tête sticky casse. */
  overflow-x:clip;
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hiddenform{display:none}
.skip{position:absolute;left:-9999px;top:0;background:#111;color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:2px solid #111;outline-offset:2px}

/* -------------------------------------------------------- 2. typographie */
.h1{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:400;letter-spacing:.01em;line-height:1.15}
.h2{font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:400;line-height:1.2}
.h3{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.3;margin-bottom:10px}
.h2--center,.h1--center{text-align:center}
.eyebrow{font-size:11px;letter-spacing:.28em;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
.eyebrow--center{text-align:center}
.lead{color:var(--ink-2);font-size:16px;max-width:62ch}
.lead--center{margin:0 auto;text-align:center}
.rule{display:block;width:56px;height:1px;background:var(--ink);margin:18px 0}
.rule--center{margin:18px auto}
.link{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.link:hover{border-color:var(--ink)}

.section{padding:72px 0}
.section--soft{background:var(--soft)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.pagehead{padding:36px 24px 8px}
.pagehead .lead{margin-top:4px}

/* ------------------------------------------------------------ 3. boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:13px 26px;font-size:12px;letter-spacing:.16em;font-weight:600;
  text-transform:uppercase;transition:background .15s,color .15s;
}
.btn:hover{background:#000;border-color:#000}
.btn--lg{padding:16px 32px}
.btn--sm{padding:9px 16px;letter-spacing:.1em}
.btn--block{display:flex;width:100%}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.4;pointer-events:none}
.linkbtn{background:none;border:0;padding:0;font-size:12px;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid transparent}
.linkbtn:hover{color:var(--ink);border-color:var(--ink)}

.arrow{display:inline-block;width:16px;height:1px;background:currentColor;position:relative}
.arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

.chip{display:inline-block;padding:6px 14px;border:1px solid var(--line-2);font-size:12px;letter-spacing:.05em;color:var(--ink-2)}
.chip:hover{border-color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

.tag{
  position:absolute;top:16px;left:16px;z-index:4;
  background:var(--ink);color:#fff;font-size:10px;letter-spacing:.18em;padding:6px 12px;
}
.tag--stage{top:20px;left:20px}

/* ------------------------------------------------- 4. icônes dessinées */
.ico{
  display:inline-block;position:relative;flex:none;vertical-align:middle;
  width:1em;height:1em;font-size:20px;color:currentColor;
}
.ico::before,.ico::after{content:"";position:absolute;box-sizing:border-box}
.ico--lg{font-size:28px}

/* loupe */
.ico-search::before{width:.68em;height:.68em;border:.09em solid currentColor;border-radius:50%;top:.04em;left:.04em}
.ico-search::after{width:.34em;height:.09em;background:currentColor;right:.02em;bottom:.12em;transform:rotate(45deg);transform-origin:100% 50%}
/* silhouette */
.ico-user::before{width:.38em;height:.38em;border:.09em solid currentColor;border-radius:50%;top:.06em;left:.31em}
.ico-user::after{width:.72em;height:.34em;border:.09em solid currentColor;border-bottom:0;border-radius:.4em .4em 0 0;bottom:.1em;left:.14em}
/* sac / panier */
.ico-bag::before{width:.78em;height:.62em;border:.09em solid currentColor;border-radius:.05em;bottom:.08em;left:.11em}
.ico-bag::after{width:.38em;height:.26em;border:.09em solid currentColor;border-bottom:0;border-radius:.3em .3em 0 0;top:.1em;left:.31em}
/* coeur plein */
.ico-heart::before,.ico-heart::after{width:.5em;height:.72em;background:currentColor;border-radius:.25em .25em 0 0;top:.1em}
.ico-heart::before{left:.5em;transform:rotate(-45deg);transform-origin:0 100%}
.ico-heart::after{left:0;transform:rotate(45deg);transform-origin:100% 100%}
/* camion */
.ico-truck{background-image:radial-gradient(circle .1em at 27% 84%,currentColor 99%,transparent 100%),radial-gradient(circle .1em at 74% 84%,currentColor 99%,transparent 100%)}
.ico-truck::before{width:.54em;height:.46em;border:.09em solid currentColor;left:.02em;top:.16em}
.ico-truck::after{width:.36em;height:.32em;border:.09em solid currentColor;right:.02em;top:.3em;border-radius:0 .12em .02em 0}
/* bouclier */
.ico-shield::before{width:1em;height:1em;background:currentColor;clip-path:polygon(50% 0,100% 18%,100% 54%,50% 100%,0 54%,0 18%);top:0;left:0}
.ico-shield::after{width:.3em;height:.16em;border-left:.08em solid #fff;border-bottom:.08em solid #fff;transform:rotate(-45deg);top:.34em;left:.34em}
/* carte bancaire */
.ico-card::before{width:.92em;height:.66em;border:.09em solid currentColor;border-radius:.06em;top:.17em;left:.04em}
.ico-card::after{width:.92em;height:.13em;background:currentColor;top:.31em;left:.04em}
/* diamant */
.ico-diamond::before{width:1em;height:1em;background:currentColor;clip-path:polygon(50% 100%,0 38%,22% 4%,78% 4%,100% 38%);top:0;left:0}
.ico-diamond::after{width:1em;height:.02em;background:rgba(255,255,255,.55);top:.38em;left:0}
/* casque support */
.ico-headset{background:linear-gradient(currentColor,currentColor) no-repeat right .1em bottom .12em/.2em .34em}
.ico-headset::before{width:.8em;height:.42em;border:.09em solid currentColor;border-bottom:0;border-radius:.4em .4em 0 0;top:.1em;left:.1em}
.ico-headset::after{width:.2em;height:.34em;background:currentColor;left:.1em;bottom:.12em}
/* vaporisateur */
.ico-spray::before{width:.56em;height:.58em;border:.09em solid currentColor;border-radius:.04em;bottom:.03em;left:.07em}
.ico-spray::after{width:.24em;height:.2em;border:.09em solid currentColor;top:.12em;left:.23em}
.ico-spray{background:linear-gradient(currentColor,currentColor) no-repeat left .5em top .16em/.26em .08em}
/* carton */
.ico-box::before{width:.84em;height:.54em;border:.09em solid currentColor;bottom:.06em;left:.08em}
.ico-box::after{width:.84em;height:.22em;border:.09em solid currentColor;top:.18em;left:.08em}
/* cadeau */
.ico-gift::before{width:.86em;height:.6em;border:.09em solid currentColor;bottom:.06em;left:.07em}
.ico-gift::after{width:.09em;height:.6em;background:currentColor;bottom:.06em;left:.455em}
.ico-gift{background:linear-gradient(currentColor,currentColor) no-repeat center top .04em/.5em .1em}
/* coche */
.ico-check::before{width:.5em;height:.26em;border-left:.11em solid currentColor;border-bottom:.11em solid currentColor;transform:rotate(-45deg);top:.24em;left:.24em}
/* croix */
.ico-close::before,.ico-close::after{width:.8em;height:.09em;background:currentColor;top:.46em;left:.1em}
.ico-close::before{transform:rotate(45deg)}
.ico-close::after{transform:rotate(-45deg)}
/* téléphone */
.ico-phone::before{width:.54em;height:.9em;border:.09em solid currentColor;border-radius:.1em;top:.05em;left:.23em}
.ico-phone::after{width:.18em;height:.07em;background:currentColor;bottom:.14em;left:.41em}
/* enveloppe */
.ico-mail::before{width:.9em;height:.64em;border:.09em solid currentColor;top:.18em;left:.05em}
.ico-mail::after{width:.34em;height:.34em;border-right:.09em solid currentColor;border-bottom:.09em solid currentColor;transform:rotate(45deg);top:.16em;left:.33em}
/* épingle */
.ico-pin::before{width:.6em;height:.6em;border:.09em solid currentColor;border-radius:50% 50% 50% 0;transform:rotate(-45deg);top:.06em;left:.2em}
.ico-pin::after{width:.16em;height:.16em;background:currentColor;border-radius:50%;bottom:.02em;left:.42em}
/* bulle */
.ico-chat::before{width:.9em;height:.64em;border:.09em solid currentColor;border-radius:.1em;top:.1em;left:.05em}
.ico-chat::after{width:.2em;height:.2em;border-right:.09em solid currentColor;border-bottom:.09em solid currentColor;transform:rotate(45deg) skew(10deg,10deg);bottom:.06em;left:.24em}
/* point */
.ico-dot::before{width:.34em;height:.34em;background:currentColor;border-radius:50%;top:.33em;left:.33em}

.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot--ok{background:var(--ok)}
.dot--ko{background:var(--ko)}

/* --------------------------------------------------------- 5. bandeaux */
.topbar{background:var(--ink);color:#fff;font-size:12px;letter-spacing:.04em}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px;flex-wrap:wrap}
.topbar__item{display:flex;align-items:center;gap:9px;color:#efefef}
.topbar__item .ico{font-size:16px}

.head{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.head__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:76px}
.head__in > *{min-width:0}
.logo{justify-self:center;text-align:center;min-width:0;overflow:hidden}
.logo__name{font-family:var(--serif);font-size:clamp(18px,2.6vw,28px);letter-spacing:.22em;white-space:nowrap}
.head__tools{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.head__search{justify-self:start}

.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:0;background:none;position:relative;color:var(--ink)}
/* après .iconbtn, sinon la règle générique écrase le display:none */
.head__burger{display:none}
.iconbtn:hover{color:#000;background:var(--soft)}
.iconbtn--cart .pill{
  position:absolute;top:4px;right:2px;min-width:18px;height:18px;border-radius:9px;
  background:var(--ink);color:#fff;font-size:10px;line-height:18px;text-align:center;padding:0 5px;
}

.burger{position:relative;display:block;width:20px;height:2px;background:var(--ink)}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.burger::before{top:-6px}
.burger::after{top:6px}

.searchbar{display:none;border-top:1px solid var(--line);background:var(--soft)}
.search-toggle:checked ~ .head .searchbar{display:block}
.searchbar__in{display:flex;align-items:center;gap:12px;padding:14px 24px}
.searchbar__in input{flex:1;min-width:0;border:1px solid var(--line-2);background:#fff;padding:11px 14px;font-size:14px}

.nav{border-top:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3.4vw,52px);flex-wrap:wrap;min-height:46px}
.nav__link{font-size:12px;letter-spacing:.16em;color:var(--ink-2);padding:12px 0;border-bottom:1px solid transparent}
.nav__link:hover{color:var(--ink)}
.nav__link.is-active{color:var(--ink);border-color:var(--ink)}

/* tiroir mobile */
.drawer-veil{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.drawer-toggle:checked ~ .drawer-veil{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);z-index:61;background:#fff;
  transform:translateX(-102%);transition:transform .25s ease;display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,.18);
}
.drawer-toggle:checked ~ .drawer{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 10px 14px 22px;border-bottom:1px solid var(--line)}
.drawer__title{font-size:12px;letter-spacing:.24em}
.drawer__nav{flex:1;overflow-y:auto;padding:10px 0}
.drawer__nav a{display:block;padding:13px 22px;font-size:14px;border-bottom:1px solid var(--soft-2)}
.drawer__nav a:hover{background:var(--soft)}
.drawer__sep{display:block;height:14px;background:var(--soft)}
.drawer__foot{padding:16px 22px;border-top:1px solid var(--line)}

/* ------------------------------------------- tiroir panier (mini-panier) */
.cartveil{
  position:fixed;inset:0;z-index:64;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
#cart-drawer:checked ~ .cartveil{opacity:1;pointer-events:auto}
.cartdrawer{
  position:fixed;top:0;right:0;bottom:0;width:min(92vw,400px);z-index:65;background:#fff;
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .25s ease;
  box-shadow:0 0 44px rgba(0,0,0,.22);
}
#cart-drawer:checked ~ .cartdrawer{transform:none}
.cartdrawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 10px 14px 22px;border-bottom:1px solid var(--line);flex:none;
}
.cartdrawer__title{font-size:12px;letter-spacing:.2em;font-weight:600}
.cartdrawer__body{flex:1;overflow-y:auto;padding:6px 22px}
.cartdrawer__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px 22px;color:var(--muted);text-align:center}

.dline{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.dline__media{display:flex;align-items:flex-end;justify-content:center;height:64px;background:var(--soft);padding:6px}
.dline__media .flacon{height:100%}
.dline__info{min-width:0}
.dline__brand{font-size:11px;color:var(--muted)}
.dline__name{font-family:var(--serif);font-size:17px;line-height:1.2}
.dline__meta{font-size:12px;color:var(--ink-2);margin-top:2px}
.dline__right{text-align:right}
.dline__sub{font-family:var(--serif);font-size:16px;white-space:nowrap}
.dline__right .linkbtn{margin-top:4px}

.cartdrawer__foot{flex:none;border-top:1px solid var(--line);padding:16px 22px 20px;background:var(--soft)}
.cartdrawer__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0}
.cartdrawer__row--total{border-top:1px solid var(--line-2);margin-top:8px;padding-top:12px;font-family:var(--serif);font-size:20px}
.cartdrawer__hint{font-size:12px;color:var(--ink-2);background:#fff;border:1px dashed var(--line-2);padding:8px 10px;margin-bottom:10px}
.cartdrawer .btn{margin-top:10px}
.cartdrawer__cont{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:12px;cursor:pointer;text-decoration:underline}
.cartdrawer__cont:hover{color:var(--ink)}
.is-free{color:var(--ok);font-weight:600}

.flash{background:#eef7f0;border-bottom:1px solid #cfe6d6;color:#1c6b3f}
.flash .wrap{display:flex;align-items:center;gap:10px;padding:12px 24px;font-size:14px}

/* --------------------------------------------------- 6. flacons en CSS */
.flacon{display:flex;align-items:flex-end;justify-content:center;gap:10px}
.flacon--xs{height:52px}
.flacon--sm{height:84px}
.flacon--md{height:170px}
.flacon--lg{height:220px}
.flacon--xl{height:300px}

.fl{position:relative;display:flex;flex-direction:column;align-items:center;height:100%}
.flacon--xs .fl{width:34px}
.flacon--sm .fl{width:56px}
.flacon--md .fl{width:112px}
.flacon--lg .fl{width:146px}
.flacon--xl .fl{width:196px}

.fl__cap{width:34%;height:13%;background:linear-gradient(180deg,#4a4a4a,#151515);border-radius:2px 2px 1px 1px;position:relative;z-index:2}
.fl__neck{width:20%;height:5%;background:linear-gradient(180deg,#d8d8d8,#a8a8a8)}
.fl__body{
  position:relative;width:100%;flex:1;overflow:hidden;
  background:linear-gradient(155deg,var(--fl) 0%,var(--fl) 45%,var(--fl2) 100%);
  border-radius:6px 6px 9px 9px;
  box-shadow:inset 0 -18px 26px rgba(0,0,0,.22),0 10px 22px rgba(0,0,0,.13);
}
.fl__shine{
  position:absolute;left:11%;top:7%;width:17%;height:64%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  border-radius:50%;filter:blur(1px);
}
.fl__plate{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--serif);color:rgba(255,255,255,.9);letter-spacing:.1em;
  font-size:clamp(11px,26%,34px);text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.flacon--xs .fl__plate,.flacon--sm .fl__plate{font-size:11px}

/* variantes de forme */
.fl--tall .fl__body{width:76%;margin:0 auto;border-radius:3px}
.fl--round .fl__body{border-radius:46% 46% 44% 44%/38% 38% 46% 46%}
.fl--flask .fl__body{clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);border-radius:4px}
.fl--curvy .fl__body{border-radius:34% 34% 26% 26%/16% 16% 12% 12%}
.fl--curvy .fl__cap{width:40%;height:15%;border-radius:50%}
.fl--torso .fl__body{
  width:80%;margin:0 auto;
  border-radius:44% 44% 34% 34%/26% 26% 18% 18%;
  background:repeating-linear-gradient(180deg,var(--fl) 0 9%,#f4f4f2 9% 15%);
}
.fl--heel .fl__body{clip-path:polygon(30% 0,70% 0,70% 58%,100% 100%,0 100%);border-radius:4px}
.fl--heel .fl__cap{width:26%}

/* le décant (petit tube) */
.vial{display:flex;flex-direction:column;align-items:center;height:64%;width:auto}
.vial__cap{width:14px;height:16%;background:linear-gradient(180deg,#2c2c2c,#111);border-radius:2px 2px 0 0}
.vial__tube{
  flex:1;width:14px;border:1px solid #d9d5cd;border-top:0;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,#e6e2db,#ffffff 38%,#dedad2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.vial__txt{writing-mode:vertical-rl;transform:rotate(180deg);font-size:5px;letter-spacing:.16em;color:#6b6b6b;white-space:nowrap}
.vial--xs{height:44px}
.vial--xs .vial__cap,.vial--xs .vial__tube{width:11px}
.vial--big{height:230px}
.vial--big .vial__cap,.vial--big .vial__tube{width:34px}
.vial--big .vial__txt{font-size:9px;letter-spacing:.26em}
.vial--hero{height:250px}
.vial--hero .vial__cap,.vial--hero .vial__tube{width:36px}
.vial--hero .vial__txt{font-size:9px;letter-spacing:.28em}

/* coffret */
.giftbox{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:150px;height:210px;background:linear-gradient(145deg,#232323,#0b0b0b);
  border-radius:2px;box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.giftbox--sm{width:96px;height:136px;gap:8px}
.giftbox__mono{font-family:var(--serif);font-size:46px;color:#d8d8d8;letter-spacing:.05em}
.giftbox--sm .giftbox__mono{font-size:30px}
.giftbox__name{font-family:var(--serif);font-size:9px;letter-spacing:.28em;color:#9a9a9a}
.giftbox--sm .giftbox__name{font-size:7px}

/* --------------------------------------------------------- 7. cartes */
.grid{display:grid;gap:26px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card__media{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  height:250px;padding:26px 20px;background:var(--soft);overflow:hidden;
}
/* le flacon suit la hauteur disponible : pas de débordement sur petit écran */
.card__media .flacon,.cline__media .flacon{height:100%}
.card__body{padding:20px;display:flex;flex-direction:column;gap:3px;flex:1}
.card__brand{font-size:13px;color:var(--muted)}
.card__name{font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.25}
.card__type{font-size:13px;color:var(--muted)}
.card__price{font-size:14px;color:var(--ink-2);margin:10px 0 16px}
.card__price strong{font-weight:600;color:var(--ink)}
.card__body .btn{margin-top:auto}

/* ----------------------------------------------------------- 8. accueil */
.hero{background:linear-gradient(90deg,var(--soft-2) 0%,var(--soft-2) 50%,#e6e3de 50%,#e6e3de 100%)}
.hero__in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;min-height:520px;padding-top:40px;padding-bottom:40px}
.hero__title{font-family:var(--serif);font-size:clamp(40px,6vw,72px);font-weight:400;line-height:1.02;letter-spacing:-.01em}
.hero__lead{color:var(--ink-2);font-size:17px;max-width:38ch;margin-bottom:28px}
.hero .rule{margin:26px 0}
.hero__visual{display:flex;justify-content:center}
.hero__stage{display:flex;align-items:flex-end;gap:34px;padding:26px 0}

/* ---------------------------- bandeau défilant des maisons (accueil) */
.brands{
  background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:20px 0;
}
.brands__track{display:flex;width:max-content;animation:brands-scroll 45s linear infinite}
.brands:hover .brands__track,
.brands:focus-within .brands__track{animation-play-state:paused}
.brands__row{
  display:flex;align-items:center;
  gap:clamp(26px,4.6vw,60px);padding-right:clamp(26px,4.6vw,60px);
}
.brands__row a{
  display:block;font-family:var(--serif);font-size:clamp(14px,1.7vw,19px);
  letter-spacing:.2em;text-transform:uppercase;color:#9b968f;white-space:nowrap;
  transition:color .2s;
}
.brands__row a:hover{color:var(--ink)}
@keyframes brands-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* défilement désactivé si l'utilisateur limite les animations */
@media (prefers-reduced-motion:reduce){
  .brands{overflow-x:auto}
  .brands__track{animation:none}
}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.cat{
  display:flex;flex-direction:column;gap:6px;padding:28px 24px;border:1px solid var(--line);
  background:#fff;transition:background .15s,border-color .15s;
}
.cat:hover{border-color:var(--ink)}
.cat__name{font-family:var(--serif);font-size:22px}
.cat__count{font-size:13px;color:var(--muted)}
.cat__go{margin-top:16px;font-size:11px;letter-spacing:.18em;display:inline-flex;align-items:center;gap:10px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.checklist{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.checklist li{display:flex;align-items:flex-start;gap:12px;color:var(--ink-2)}
.checklist .ico{margin-top:3px;font-size:17px}

.steps{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.step{background:#fff;padding:24px 26px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px}
.step__n{grid-row:span 2;font-family:var(--serif);font-size:34px;color:var(--line-2);line-height:1}
.step__t{font-weight:600;letter-spacing:.02em}
.step__d{color:var(--muted);font-size:14px}

/* --------------------------------------------------- 9. fil, catalogue */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--muted);padding-top:20px}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 24px 26px}
.toolbar__count{font-size:14px;color:var(--ink-2)}
.toolbar__sort{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar__label{font-size:12px;letter-spacing:.1em;color:var(--muted);margin-right:4px}

.empty{padding:40px 0;color:var(--muted);text-align:center}
.empty--box{border:1px solid var(--line);background:var(--soft);padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:16px}
.empty--404{margin:40px auto;max-width:760px}
.code404{font-family:var(--serif);font-size:74px;color:var(--line-2);line-height:1}

/* ------------------------------------------------------- 10. produit */
.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;padding-top:26px;padding-bottom:26px;align-items:start}

.gallery{position:relative;position:sticky;top:118px}
.gal__radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.gal__stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:520px;background:var(--soft);padding:40px;
}
.gal__fav{position:absolute;top:14px;right:14px;color:var(--ink)}
.view{display:none;align-items:flex-end;justify-content:center;gap:34px}
#v0:checked ~ .gal__stage .view--0,
#v1:checked ~ .gal__stage .view--1,
#v2:checked ~ .gal__stage .view--2,
#v3:checked ~ .gal__stage .view--3,
#v4:checked ~ .gal__stage .view--4,
#v5:checked ~ .gal__stage .view--5,
#v6:checked ~ .gal__stage .view--6,
#v7:checked ~ .gal__stage .view--7,
#v8:checked ~ .gal__stage .view--8{display:flex}

.gal__thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.thumb{
  position:relative;display:flex;align-items:flex-end;justify-content:center;gap:6px;
  width:84px;height:88px;padding:10px 8px;background:var(--soft);border:1px solid transparent;cursor:pointer;
}
.thumb:hover{border-color:var(--line-2)}
.thumb .flacon{height:100%}
.thumb__box{width:20px;height:30px;background:linear-gradient(145deg,#232323,#0b0b0b)}
.thumb__notes{font-size:9px;letter-spacing:.2em;color:var(--muted);align-self:center}
#v0:checked ~ .gal__thumbs .thumb:nth-child(1),
#v1:checked ~ .gal__thumbs .thumb:nth-child(2),
#v2:checked ~ .gal__thumbs .thumb:nth-child(3),
#v3:checked ~ .gal__thumbs .thumb:nth-child(4),
#v4:checked ~ .gal__thumbs .thumb:nth-child(5),
#v5:checked ~ .gal__thumbs .thumb:nth-child(6),
#v6:checked ~ .gal__thumbs .thumb:nth-child(7),
#v7:checked ~ .gal__thumbs .thumb:nth-child(8),
#v8:checked ~ .gal__thumbs .thumb:nth-child(9){border-color:var(--ink)}

.notecard{background:#fff;border:1px solid var(--line);padding:28px 30px;max-width:340px}
.notecard__k{font-size:11px;letter-spacing:.2em;color:var(--muted);margin-top:14px}
.notecard__k:first-child{margin-top:0}
.notecard__v{font-family:var(--serif);font-size:17px}
.notecard__rule{display:block;width:40px;height:1px;background:var(--line-2);margin:18px 0}

.pinfo__name{font-family:var(--serif);font-size:clamp(32px,4.4vw,50px);font-weight:400;letter-spacing:.02em;line-height:1.05}
.pinfo__brand{font-size:13px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:6px}

.buyform{margin-top:26px}
.sz__radio{position:absolute;opacity:0;width:0;height:0}
.buy__row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sizes{display:flex;gap:10px;flex-wrap:wrap}
.size{
  display:inline-flex;align-items:center;gap:8px;min-width:74px;justify-content:center;
  padding:12px 14px;border:1px solid var(--line-2);cursor:pointer;font-size:14px;background:#fff;
}
.size:hover{border-color:var(--ink-2)}
.size__check{display:none;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg) translateY(-2px)}
.size--out{opacity:.45;cursor:not-allowed;background:var(--soft)}
.size__out{font-size:10px;letter-spacing:.1em;color:var(--ko)}
#sz0:checked ~ .buy .sizes .size:nth-child(1),
#sz1:checked ~ .buy .sizes .size:nth-child(2),
#sz2:checked ~ .buy .sizes .size:nth-child(3),
#sz3:checked ~ .buy .sizes .size:nth-child(4){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
#sz0:checked ~ .buy .sizes .size:nth-child(1) .size__check,
#sz1:checked ~ .buy .sizes .size:nth-child(2) .size__check,
#sz2:checked ~ .buy .sizes .size:nth-child(3) .size__check,
#sz3:checked ~ .buy .sizes .size:nth-child(4) .size__check{display:block}

.price{font-family:var(--serif);font-size:30px;white-space:nowrap}

/* .pv--N : valeur liée à la contenance cochée (prix, format…). Une seule est
   affichée à la fois, dans la colonne d'achat comme dans la popup. */
.pv{display:none}
#sz0:checked ~ .buy .pv--0,
#sz1:checked ~ .buy .pv--1,
#sz2:checked ~ .buy .pv--2,
#sz3:checked ~ .buy .pv--3,
#sz0:checked ~ .modalwrap .pv--0,
#sz1:checked ~ .modalwrap .pv--1,
#sz2:checked ~ .modalwrap .pv--2,
#sz3:checked ~ .modalwrap .pv--3,
#sz0:checked ~ .stickybuy .pv--0,
#sz1:checked ~ .stickybuy .pv--1,
#sz2:checked ~ .stickybuy .pv--2,
#sz3:checked ~ .stickybuy .pv--3{display:inline}

.stockline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin:20px 0}
.stockline .ico{font-size:17px}
.stockline__sep{width:1px;height:16px;background:var(--line-2)}

.qty{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qty__label{font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.qty__input{width:74px;padding:10px 12px;border:1px solid var(--line-2);text-align:center}
.buy .btn{margin-bottom:10px}
.buy__hint{text-align:center;margin-top:4px}

/* --------------------------- barre d'achat fixe (mobile uniquement) */
.stickybuy{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(0,0,0,.10);
}
.stickybuy__info{min-width:0}
.stickybuy__name{font-family:var(--serif);font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybuy__price{font-size:14px;font-weight:600;white-space:nowrap}
.stickybuy__ml{color:var(--muted);font-weight:400}
.stickybuy .btn{flex:none;padding:13px 22px}

/* ------------------------------------- popup de commande express (sans JS) */
.modal-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.modalwrap{display:none;position:fixed;inset:0;z-index:80;align-items:center;justify-content:center;padding:18px}
#buy-modal:checked ~ .modalwrap{display:flex}
.modal__veil{position:absolute;inset:0;background:rgba(17,17,17,.55);cursor:pointer}
.modal{
  position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.modal__head{position:relative;display:flex;align-items:center;justify-content:center;padding:20px 60px;border-bottom:1px solid var(--line)}
.modal__title{font-family:var(--serif);font-size:22px;font-weight:400}
.modal__x{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--soft);cursor:pointer;
}
.modal__x:hover{background:var(--soft-2)}
.modal__x .ico{font-size:15px}
.modal__body{padding:20px 24px 24px}
.modal__prod{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.modal__thumb{display:flex;align-items:flex-end;justify-content:center;width:58px;height:62px;padding:6px;background:var(--soft)}
.modal__thumb .flacon{height:100%}
.modal__pname{font-size:14px;line-height:1.4}
.modal__pml{font-size:12px;color:var(--muted)}
.modal__pprice{font-family:var(--serif);font-size:19px;white-space:nowrap}
.modal .field{margin-bottom:14px}
.req{color:var(--ko)}
.msum{background:var(--soft);padding:16px 18px;margin:18px 0}
.msum__box{display:none}
#sz0:checked ~ .modalwrap .mb--0,
#sz1:checked ~ .modalwrap .mb--1,
#sz2:checked ~ .modalwrap .mb--2,
#sz3:checked ~ .modalwrap .mb--3{display:block}
.msum__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;padding:4px 0}
.msum__row--total{border-top:1px solid var(--line-2);margin-top:8px;padding-top:10px;font-size:16px;font-weight:600}
.is-free{color:var(--ok);font-weight:600}
.modal__note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--muted);margin-top:12px;text-align:center}
.alert--sm{padding:10px 14px;margin-bottom:16px;font-size:13px}

.assur{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.assur__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}
.assur__t{font-size:13px;font-weight:600}
.assur__d{font-size:12px;color:var(--muted)}

.giftbar{display:flex;align-items:center;gap:16px;border:1px solid var(--line);padding:18px 20px;margin-bottom:22px}
.giftbar__vial{display:flex;align-items:center}
.giftbar__t{font-size:12px;letter-spacing:.16em;font-weight:600}
.giftbar__d{font-size:13px;color:var(--muted)}

.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc__head{
  position:relative;list-style:none;cursor:pointer;padding:18px 34px 18px 0;
  font-size:12px;letter-spacing:.2em;
}
.acc__head::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;
  background:linear-gradient(currentColor,currentColor) no-repeat center/12px 1px,linear-gradient(currentColor,currentColor) no-repeat center/1px 12px}
.acc[open] .acc__head::after{background:linear-gradient(currentColor,currentColor) no-repeat center/12px 1px}
.acc__body{padding:0 0 22px;color:var(--ink-2)}
.notes{display:grid;grid-template-columns:auto 1fr;gap:8px 22px}
.notes dt{font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;padding-top:3px}
.notes dd{margin:0}

/* ---------------------------------------------------- 11. panier / form */
.cartlayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding-bottom:20px}

.cline{display:grid;grid-template-columns:96px 1fr auto auto auto;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.cline__media{display:flex;align-items:flex-end;justify-content:center;height:96px;background:var(--soft);padding:8px}
.cline__brand{font-size:12px;color:var(--muted)}
.cline__name{font-family:var(--serif);font-size:19px;font-weight:400}
.cline__meta{font-size:13px;color:var(--ink-2)}
.cline__unit{font-size:12px;color:var(--muted)}
.cline__sub{font-family:var(--serif);font-size:19px;min-width:96px;text-align:right}
.cartlist__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;flex-wrap:wrap}

.summary{border:1px solid var(--line);background:var(--soft);padding:24px}
.summary__title{font-size:12px;letter-spacing:.2em;font-weight:600;margin-bottom:16px}
.summary__line{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.summary__qty{color:var(--muted)}
.summary__ml{color:var(--muted);font-size:12px}
.summary__amt{white-space:nowrap}
.summary__row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:14px;border-bottom:1px solid var(--line)}
.summary__row--total{border-bottom:0;border-top:1px solid var(--ink);margin-top:6px;padding-top:14px;font-family:var(--serif);font-size:20px}
.summary__hint{font-size:12px;color:var(--ink-2);background:#fff;border:1px dashed var(--line-2);padding:8px 10px;margin:10px 0}
.summary .btn{margin:16px 0 12px}
.summary__note{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:6px}

.form{background:#fff}
.form__title{font-size:12px;letter-spacing:.2em;font-weight:600;margin:26px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.form__title:first-of-type{margin-top:0}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:12px;letter-spacing:.08em;color:var(--ink-2)}
.field input,.field textarea{border:1px solid var(--line-2);padding:12px 14px;font-size:15px;background:#fff;width:100%}
.field input:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field--check{margin:20px 0}
/* pas de flex ici : les segments de texte deviendraient des items séparés */
.field--check label{display:block;position:relative;padding-left:28px;font-size:13px;line-height:1.6;color:var(--ink-2)}
/* width:100% de .field input écraserait la case : on la remet à sa taille */
.field--check input{position:absolute;left:0;top:4px;width:auto;border:0;padding:0}
.field--check a{text-decoration:underline}

.payblock{display:flex;gap:14px;border:1px solid var(--ink);padding:18px 20px;background:var(--soft)}
.payblock__radio{width:16px;height:16px;border:1px solid var(--ink);border-radius:50%;position:relative;flex:none;margin-top:3px}
.payblock__radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.payblock__t{font-weight:600;font-size:14px}
.payblock__d{font-size:13px;color:var(--muted)}

.alert{border:1px solid #e4c3bd;background:#fdf3f1;color:#8f2c1d;padding:16px 20px;margin:0 0 24px}
.alert__t{font-weight:600;margin-bottom:6px}
.alert ul{list-style:disc;padding-left:20px}

.searchpage{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);padding:10px 14px;margin-bottom:30px}
.searchpage input{flex:1;min-width:0;border:0;outline:none;font-size:16px;padding:8px 0}

/* --------------------------------------------------- 12. merci, article */
.thanks{max-width:820px;padding-top:40px;padding-bottom:20px;text-align:center}
.thanks__mark{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#eef7f0;color:var(--ok);margin-bottom:20px}
.recap{border:1px solid var(--line);text-align:left;padding:22px 24px;margin-top:26px}
.recap__title{font-size:12px;letter-spacing:.2em;font-weight:600;margin-bottom:12px}
.recap__line{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.recap__line--total{border-bottom:0;border-top:1px solid var(--ink);margin-top:6px;padding-top:14px;font-family:var(--serif);font-size:19px}
.recap__addr{font-size:14px;color:var(--ink-2);line-height:1.7}
.thanks__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

.article{max-width:820px;padding-bottom:20px}
.article__block{margin-bottom:34px}
.article__block p{margin-bottom:12px;color:var(--ink-2)}
.contactlist{display:flex;flex-direction:column;gap:12px}
.contactlist li{display:flex;align-items:center;gap:12px}
.contactlist a:hover{text-decoration:underline}

/* -------------------------------------------------- 13. bas de page */
.features{border-top:1px solid var(--line);background:var(--soft)}
.features__in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:44px 24px}
.feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.feature__title{font-size:12px;letter-spacing:.16em;font-weight:600}
.feature__text{font-size:13px;color:var(--muted)}

.foot{background:var(--ink);color:#cfcfcf;padding:56px 0 26px;font-size:14px}
.foot__brand{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:40px;border-bottom:1px solid #2b2b2b}
.foot__logo{font-family:var(--serif);font-size:26px;letter-spacing:.22em;color:#fff}
.foot__rule{width:52px;height:1px;background:#4a4a4a}
.foot__tag{font-size:10px;letter-spacing:.28em;color:#9b9b9b}
.foot__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:40px 0}
.foot__col--about p{color:#a9a9a9;max-width:38ch}
.foot__ct{font-size:11px;letter-spacing:.2em;color:#fff;margin-bottom:14px;font-weight:600}
.foot__list li{margin-bottom:10px}
.foot__list a:hover{color:#fff;text-decoration:underline}
.foot__list--contact li{display:flex;align-items:center;gap:10px}
.foot__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid #2b2b2b;font-size:12px;color:#8d8d8d}
.foot__pay{display:flex;align-items:center;gap:8px}

/* ------------------------------------------------------- 14. responsive */
@media (max-width:1180px){
  .product{grid-template-columns:1fr;gap:34px}
  .gallery{position:static}
  .gal__stage{min-height:420px}
}
@media (max-width:1024px){
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:34px}
  .cartlayout{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr 1fr;gap:28px}
  .hero__in{min-height:auto}
}
@media (max-width:860px){
  /* barre d'achat fixe : visible sur la fiche produit seulement */
  .page-product .stickybuy{display:flex}
  body.page-product{padding-bottom:78px}
  /* elle passerait sous le voile de la popup : on la retire quand elle s'ouvre */
  #buy-modal:checked ~ .stickybuy{display:none}

  /* burger | loupe | logo | panier */
  .head__in{grid-template-columns:auto auto 1fr auto;min-height:64px}
  .head__burger{display:inline-flex}
  .head__search{display:inline-flex}
  .nav{display:none}
  /* la barre de recherche n'apparait qu'au clic sur la loupe (regle globale
     .search-toggle:checked ~ .head .searchbar) */
  .searchbar{border-top:1px solid var(--line)}
  .topbar__in{justify-content:center;gap:14px;font-size:11px;padding-top:8px;padding-bottom:8px}
  .topbar__item:nth-child(2){display:none}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .features__in{grid-template-columns:repeat(2,1fr);gap:28px}
  .assur{grid-template-columns:repeat(2,1fr)}
  .hero{background:var(--soft-2)}
  .hero__in{grid-template-columns:1fr;text-align:left;padding-top:34px}
  .hero__visual{order:-1}
  .section{padding:48px 0}
  .cline{grid-template-columns:76px 1fr;grid-template-areas:"media info" "qty sub" "rm rm";gap:12px 16px}
  .cline__media{grid-area:media;height:78px}
  .cline__info{grid-area:info}
  .cline__qty{grid-area:qty}
  .cline__sub{grid-area:sub;text-align:right}
  .cline .linkbtn{grid-area:rm;justify-self:start}
}
@media (max-width:620px){
  .wrap{padding:0 16px}
  /* en-tête : le logo doit tenir à côté du burger et du panier */
  .head__in{gap:8px;min-height:58px}
  .logo__name{font-size:17px;letter-spacing:.12em}
  .iconbtn{width:38px;height:38px}
  .searchbar__in{padding:12px 16px;gap:8px}
  .searchbar__in .ico{display:none}
  .gal__thumbs{gap:8px}
  .thumb{width:68px;height:74px;padding:8px 6px}
  .grid--3,.grid--4{grid-template-columns:1fr 1fr;gap:16px}
  .card__media{height:190px;padding:16px}
  .card__body{padding:14px}
  .card__name{font-size:18px}
  .cats{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .buy__row{flex-direction:column;align-items:flex-start;gap:14px}
  .gal__stage{min-height:340px;padding:24px}
  .flacon--xl{height:230px}
  .flacon--xl .fl{width:150px}
  .vial--big{height:180px}
  .toolbar{padding:16px 16px 20px}
  .topbar__item:nth-child(3){display:none}
}
@media (max-width:420px){
  .grid--3,.grid--4{grid-template-columns:1fr}
  .assur{grid-template-columns:1fr}
  .features__in{grid-template-columns:1fr}
}

/* ------------------------------------------- 15. photos produit (uploads) */
.pphoto{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.pphoto__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pphoto--xs{height:52px}
.pphoto--sm{height:84px}
.pphoto--lg{height:220px}
.pphoto--xl{height:300px}
.card__media .pphoto,.cline__media .pphoto,.dline__media .pphoto,.modal__thumb .pphoto,.thumb .pphoto{height:100%}
.gallery--photo .view{align-items:center;width:100%;height:100%}
.gallery--photo .gal__stage{padding:26px;background:#fff;border:1px solid var(--line)}
.pphoto--stage{max-height:460px}
.pphoto--stage .pphoto__img{max-height:460px}

/* ------------------------------------------- 16. texte riche (Markdown) */
.rt{color:var(--ink-2)}
.rt > :first-child{margin-top:0}
.rt p{margin:0 0 12px}
.rt h2,.rt h3,.rt h4{font-family:var(--serif);font-weight:400;line-height:1.3;color:var(--ink);margin:22px 0 8px}
.rt h2{font-size:22px}
.rt h3{font-size:18px}
.rt h4{font-size:16px}
.rt ul,.rt ol{margin:0 0 14px;padding-left:20px}
.rt ul{list-style:disc}
.rt ol{list-style:decimal}
.rt li{margin:4px 0;padding-left:2px}
.rt a{text-decoration:underline;text-underline-offset:3px}
.rt a:hover{color:var(--muted)}
.rt strong{color:var(--ink)}
.rt img{max-width:100%;height:auto;margin:0 auto}
.rt__fig,.rt figure{margin:16px 0}
.rt__q,.rt blockquote{margin:16px 0;padding:8px 16px;border-left:3px solid var(--line-2);color:var(--muted);font-style:italic}
.rt__hr,.rt hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.rt code{background:var(--soft);padding:1px 6px;font-size:.92em}
@media (max-width:860px){
  .pphoto--stage,.pphoto--stage .pphoto__img{max-height:330px}
  .rt h2{font-size:20px}
}

/* ----------------------------- 17. commander sur WhatsApp (lien suivi) */
/* Un bouton par contenance : seul celui de la taille cochee est affiche. */
.wabtn{display:none}
#sz0:checked ~ .buy .wabtn--0,
#sz1:checked ~ .buy .wabtn--1,
#sz2:checked ~ .buy .wabtn--2,
#sz3:checked ~ .buy .wabtn--3,
#sz4:checked ~ .buy .wabtn--4,
#sz5:checked ~ .buy .wabtn--5{display:flex}
.btn--wa{
  background:#1faa54;border-color:#1faa54;color:#fff;gap:9px;
  align-items:center;justify-content:center;margin-top:10px;
}
.btn--wa:hover{background:#188e46;border-color:#188e46;color:#fff}
.btn--wa .ico{font-size:18px}