/*
  1543lab, site grand public : version « Cabinet ».
  Fond blanc, typographie fine, beaucoup d'air. La couleur est réservée aux produits (silhouettes des packs),
  avec un accent rose (rose du Magnésium, #f08e9d) ; la partie méthode est en blanc, bleu et rose du Magnésium. Sections :
  1. base  2. menu et pied de page  3. accueil  4. cartes produits  5. boutique  6. fiche produit
  7. méthode  8. le lab  9. panier, compte, pages simples  10. adaptation aux écrans étroits
*/

/* ===== 1. Base ===== */
:root{
  --ink:#3c3c3b; --ink-2:#55554f; --muted:#77776f; --line:#d6d6d2; --paper:#ffffff;
  --fuchsia:#f08e9d; --mg-blue:#1b2140; --mg-blue-2:#223b80; --rose:#f18e9c; --rose-pale:#e4b1ae; --forest:#1e4a4a; --navy:#1b2140;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
sup{font-size:.62em;line-height:0;vertical-align:.55em}
svg{display:block}
img{max-width:100%}
h1,h2,h3,p,ul,ol,dl,figure{margin-top:0}
.gut{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;z-index:100}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--fuchsia);outline-offset:3px}

.lab{font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-block;background:var(--ink);color:#fff;border:0;padding:15px 28px;font:500 12px var(--display);font-stretch:108%;letter-spacing:.12em;text-transform:uppercase;transition:background .15s}
.btn:hover{background:var(--fuchsia)}
.ln{display:inline-flex;gap:12px;align-items:center;font:500 13px var(--display);font-stretch:108%;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:6px}
.ln:hover{color:var(--fuchsia);border-color:var(--fuchsia)}

/* ===== 2. Menu et pied de page ===== */
.site-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-top:26px;padding-bottom:26px}
.site-header nav{display:flex;gap:30px;font-size:13px;letter-spacing:.02em}
.site-header .r{display:flex;gap:26px;justify-content:flex-end;font-size:13px}
.site-header a:hover{color:var(--fuchsia)}
.site-header nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--fuchsia)}
.site-header nav a[aria-current="page"]:hover{color:var(--fuchsia);box-shadow:inset 0 -2px 0 var(--fuchsia)}
.logo{display:block;line-height:0}
.logo img{display:block;height:30px;width:auto}
.logo:hover{color:var(--ink)!important}

.site-footer{margin-top:110px}
.site-footer .rule{border-top:1px solid var(--ink)}
.site-footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-top:30px;font-size:14px}
.site-footer .cols div{display:grid;gap:6px;align-content:start}
.site-footer .cols b{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.site-footer a:hover{color:var(--fuchsia)}
.site-footer .big{margin-top:50px;line-height:0}
.site-footer .big img{display:block;width:min(100%,760px);height:auto}
.legalrow{display:flex;flex-wrap:wrap;gap:6px 26px;padding-top:18px;padding-bottom:26px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}

/* ===== 3. Accueil ===== */
.hero{display:grid;grid-template-columns:1fr minmax(300px,calc(100vh - 540px));gap:56px;padding-top:28px;padding-bottom:20px;align-items:center}
.hero h1{margin:22px 0 26px;font:300 clamp(40px,5.6vw,84px)/1.02 var(--display);letter-spacing:-.03em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--fuchsia)}
.hero p{max-width:470px;margin:0 0 30px;font-size:17px;line-height:1.55}
.frame{margin:0}
.frame img,.frame .ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 58%}
.frame figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:11.5px/1.4 var(--mono);color:var(--muted);letter-spacing:.03em}
.crest{overflow:hidden}
/* Ligne de crête : proportions toujours respectées (jamais étirée). Sur écran étroit, on voit le centre de la même montagne. */
.crest img{display:block;position:relative;left:50%;transform:translateX(-50%);width:max(100%,1100px);height:auto}
.sec{padding-top:90px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:36px}
.sec-h h2{margin:0;font:300 clamp(26px,3vw,42px)/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.sec p.intro{max-width:620px;font-size:17px;margin:-8px 0 36px}

.idx{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.idx .r{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:14.5px;align-items:baseline}
.idx .r span:first-child{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.idx .r span:last-child{display:flex;flex-wrap:wrap;gap:4px 16px}
.idx em{font-style:normal;display:inline-flex;gap:7px;align-items:center}
.idx em::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.idx a:hover{color:var(--fuchsia)}

.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.quad h3{margin:0 0 8px;font:500 13px var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:.1em}
.quad p{margin:0;font-size:14.5px;color:var(--ink-2)}

.how{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.how h2{margin:0 0 18px;font:300 clamp(28px,3.4vw,50px)/1.05 var(--display);letter-spacing:-.025em}
.how p{max-width:480px;font-size:17px}
.eq{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px}
.eq .c{border:1px solid var(--ink);padding:16px 18px;min-width:168px;flex:1 1 168px;max-width:220px}
.eq .c small{display:block;white-space:nowrap;font:500 11px var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.eq .c big{display:block;font:300 58px/1 var(--display);margin:6px 0 4px;letter-spacing:-.03em}
.eq .c span{display:block;font-size:14px;line-height:1.35}
.eq .op{align-self:center;font:300 34px var(--display);color:var(--fuchsia)}
.eq .res{border-color:var(--fuchsia)}
.eq .res big{color:var(--fuchsia)}

.stmt{padding-top:120px;padding-bottom:20px}
.stmt h2{margin:0;max-width:980px;font:300 clamp(34px,5vw,72px)/1.04 var(--display);letter-spacing:-.03em;text-wrap:balance}
.stmt p{max-width:520px;margin:24px 0 0;font-size:17px}

/* Vitrine de l'accueil : cinq produits, un changement toutes les 5 secondes */
.showcase{position:relative}
.slides{display:grid}
.slide{grid-area:1/1;display:block;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.slide.is-on{opacity:1;visibility:visible;transition:opacity .7s ease}
.slide .ph{position:relative;aspect-ratio:1/1;overflow:hidden;color:var(--fg)}
.slide .ph .jar{position:absolute;right:10%;bottom:5%;height:45%;width:auto;filter:drop-shadow(0 5px 6px rgba(0,0,0,.25))}
.slide .ph .sy{position:absolute;left:8%;bottom:7%;font:300 clamp(24px,2.7vw,40px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.slide .cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:11.5px/1.4 var(--mono);color:var(--muted);letter-spacing:.03em}
.slide .cap .nm{text-transform:uppercase;color:var(--ink)}
.slide:hover .cap .nm{color:var(--fuchsia)}
.dots{display:flex;gap:8px;margin-top:14px}
.dot{flex:1;height:18px;border:0;background:none;position:relative;padding:0}
.dot::before,.dot::after{content:"";position:absolute;left:0;top:8px;height:2px}
.dot::before{right:0;background:var(--line)}
.dot::after{width:0;background:var(--ink)}
.dot.is-on::after{animation:fill 5s linear forwards}
.showcase.paused .dot.is-on::after{animation-play-state:paused}
@keyframes fill{to{width:100%}}

/* ===== 4. Cartes produits (la couleur vit ici) ===== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 28px}
.card{display:block}
.ph,.visual,.cart-line .sw{background-size:auto 100%;background-position:left top;background-repeat:no-repeat}
.card .ph{position:relative;aspect-ratio:1/1;overflow:hidden;color:var(--fg)}
.card .ph .jar{position:absolute;right:10%;bottom:5%;height:45%;width:auto;filter:drop-shadow(0 5px 6px rgba(0,0,0,.25))}
.card .ph .sy{position:absolute;left:8%;bottom:7%;font:300 clamp(24px,2.7vw,40px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.card .ph .cd{position:absolute;right:9%;bottom:10%;font:500 12px var(--mono);letter-spacing:.03em;text-align:right}
.card h3{margin:16px 0 2px;font:500 15px var(--display);font-stretch:110%;letter-spacing:.02em;text-transform:uppercase}
.card .tg{font-size:14px;color:var(--muted)}
.card .row{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font:12.5px var(--mono)}
.card:hover h3{color:var(--fuchsia)}

/* ===== 5. En-têtes de pages, boutique ===== */
.page-h{padding-top:60px;padding-bottom:30px}
.page-h h1{margin:18px 0 0;font:300 clamp(38px,5.2vw,78px)/1.03 var(--display);letter-spacing:-.03em;text-wrap:balance;max-width:20ch;overflow-wrap:anywhere}
.page-h p{max-width:580px;margin:22px 0 0;font-size:18px;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:20px;padding-bottom:36px}
.chips button{border:1px solid var(--line);background:#fff;padding:8px 14px;font:500 12px var(--mono);letter-spacing:.03em}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.empty{padding-top:20px;font-size:17px}

/* ===== 6. Fiche produit ===== */
.crumbs{padding-top:8px;padding-bottom:24px;font:500 12px var(--mono);color:var(--muted)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.pdp{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:start}
.pdp .gal{display:grid;gap:28px}
.pgal .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:0}
.pgal .rail::-webkit-scrollbar{display:none}
.pg-slide{flex:0 0 100%;scroll-snap-align:center;min-width:0}
.pg-photo{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 48%}
.pg-bar{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.pg-dots{display:inline-flex;gap:9px;padding:11px 14px;background:#f1f1ef;border-radius:20px}
.pg-dot{width:7px;height:7px;padding:0;border:0;border-radius:4px;background:#b9b9b4;transition:width .35s cubic-bezier(.2,.7,.2,1),background .25s}
.pg-dot.is-on{width:26px;background:var(--ink)}
.pg-arrows{display:flex;gap:10px}
.pg-nav{width:40px;height:40px;border:0;border-radius:50%;background:#f1f1ef;font:300 24px/1 var(--display);color:var(--ink);padding:0 0 3px;transition:background .2s,color .2s,opacity .2s}
.pg-nav:hover{background:var(--ink);color:#fff}
.pg-nav[disabled]{opacity:.35;pointer-events:none}
.pdp .visual{position:relative;overflow:hidden;color:var(--fg);aspect-ratio:1/1}
.pdp .visual .jar{position:absolute;right:10%;bottom:5%;height:45%;width:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.pdp .visual .sy{position:absolute;left:7%;bottom:6%;font:300 clamp(40px,6vw,96px)/.9 var(--display);letter-spacing:-.035em;white-space:nowrap}
.pdp .visual .rf{position:absolute;right:8%;bottom:9%;display:grid;gap:2px;text-align:right;font:500 14px/1.3 var(--mono)}
.pdp .photo{margin:0}
.pdp .photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.pdp .info{padding-top:6px}
.pdp h1{margin:12px 0 22px;font:300 clamp(34px,4vw,58px)/1.02 var(--display);letter-spacing:-.03em;text-wrap:balance}
.refchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.refchip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:7px 12px;font-size:14px}
.refchip b{font:500 15px var(--display);color:var(--fuchsia)}
.pdp .lead{margin:0 0 30px;font-size:18px;line-height:1.55;max-width:520px}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;padding:22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:24px}
.buy .price{font:300 36px/1 var(--display);letter-spacing:-.02em}
.buy .perday{flex-basis:100%;order:3;font:12.5px var(--mono);letter-spacing:.02em;color:var(--muted);margin-top:-6px}
.qty{display:inline-flex;border:1px solid var(--line)}
.qty button{width:40px;height:46px;border:0;background:#fff;font-size:18px}
.qty button:hover{color:var(--fuchsia)}
.qty input{width:46px;height:46px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font:500 15px var(--mono);background:#fff;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.facts{list-style:none;margin:0;padding:0;font-size:15px}
.facts li{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.facts li:first-child{border-top:0}
.facts b{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.detail{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:56px;padding-top:90px}
.detail h2,.cols3 h2{margin:0 0 16px;padding-top:14px;border-top:1px solid var(--ink);font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.detail table{width:100%;border-collapse:collapse;font-size:14.5px}
.detail th{text-align:left;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 0 8px;border-bottom:1px solid var(--ink)}
.detail td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.detail td:last-child{text-align:right;font-family:var(--mono);font-size:13px;white-space:nowrap;padding-left:14px}
.detail .small{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.detail p{margin:0 0 12px;font-size:15.5px}
.legal{padding-top:36px;font-size:13px;color:var(--ink-2);max-width:900px}
.legal p{margin:0 0 8px}

/* ===== 7. La méthode ===== */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cols2 h3,.cols3 h3{margin:0 0 14px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lvl,.let{list-style:none;margin:0;padding:0}
.lvl li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.lvl li b{font:300 34px/1 var(--display);color:var(--fuchsia)}
.lvl strong{display:block;font:500 12.5px var(--display);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.let{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
.let li{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.let li b{font:500 14px var(--display);color:var(--fuchsia)}
.ex{margin-top:30px}
.ex .pn{margin:0 0 6px;font:500 14px var(--display);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase}
.ex ul{list-style:none;margin:0;padding:0}
.ex li{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.ex li b{font:500 16px var(--display);color:var(--fuchsia)}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.case{border-top:1px solid var(--ink);padding-top:16px}
.case h3{margin:0 0 6px;font:300 26px/1.1 var(--display);letter-spacing:-.02em}
.case .say{margin:0 0 14px;font-size:15px;color:var(--ink-2)}
.case ul{list-style:none;margin:0;padding:0}
.case li{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.case li b{font:500 15px var(--display);color:var(--fuchsia)}
.reftable{width:100%;border-collapse:collapse}
.reftable th{text-align:left;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 12px 10px 0;border-bottom:1px solid var(--ink)}
.reftable td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
.reftable td.n{font:500 14px var(--display);font-stretch:110%;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.reftable td.n i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:10px;vertical-align:-1px}
.reftable .rf{display:grid;gap:4px}
.reftable .rf b{font:500 15px var(--display);color:var(--fuchsia);margin-right:8px}
.reftable a:hover{color:var(--fuchsia)}

/* Partie méthode : fond blanc, écritures en bleu du Magnésium, accents roses */
.meth,.meth p,.meth .intro,.meth h2,.meth h3,.meth li,.meth li span,.meth .eq .c span,.meth .eq .c big{color:var(--mg-blue)}
.meth .eq .res big,.meth .lvl li b,.meth .let li b,.meth .ex li b,.meth .eq .op{color:var(--fuchsia)}
.meth .sec-h{border-color:var(--mg-blue)}
.meth .lab,.meth .eq .c small,.meth .cols2 h3{color:var(--mg-blue);opacity:.7}
.meth .eq .c,.meth .case{border-color:var(--mg-blue)}
.meth .eq .res{border-color:var(--fuchsia)}
.meth .ln{border-color:var(--mg-blue)}
.meth .ln:hover{color:var(--fuchsia);border-color:var(--fuchsia)}
.meth .lvl li,.meth .let li,.meth .ex li{border-color:rgba(27,33,64,.2)}

/* Méthode : le bloc « Où et comment » tient sur un écran */
.fit{min-height:calc(100vh - 20px);padding-top:56px;padding-bottom:56px;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start}
#methode .sec-h{margin-bottom:26px}
#methode .eq{gap:8px}
#methode .eq .c{min-width:0;flex:1 1 120px;padding:12px 14px}
#methode .eq .c big{font-size:46px;margin:4px 0 2px}
#methode .eq .c span{font-size:13px}
#methode .eq .c small{white-space:normal;font-size:10px}
#methode .eq .op{font-size:28px}
#methode .lvl li{padding:11px 0}
html:has(#atomes){scroll-snap-type:y proximity}
#atomes{scroll-snap-align:start}

/* Transitions au défilement (façon Apple) */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .atom.rv{transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .25s,color .25s}
.js .atom.rv.in:hover{transform:translateY(-5px) scale(1.04)}
.atoms.has-sel .atom:not(.is-on):not(.is-hit):hover{opacity:.7}
.js .atoms.has-sel .atom.rv.in.is-on,.js .atoms.has-sel .atom.rv.in.is-hit{transform:scale(1.06)}
.js .crest img{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.3,.6,.2,1)}
.js .crest.in img{clip-path:inset(0 0 0 0)}
.scrub .w{opacity:.16;transition:opacity .25s linear}
.scrub .w.on{opacity:1}
@media (prefers-reduced-motion:reduce){.js .rv,.js .crest img{opacity:1;transform:none;clip-path:none;transition:none}.scrub .w{opacity:1}}

/* Toutes les références : repliées jusqu'au clic */
.refs-d summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:14px;position:relative;padding-right:60px}
.refs-d summary::-webkit-details-marker{display:none}
.refs-d summary h2{margin:0;font:300 clamp(26px,3vw,42px)/1.05 var(--display);letter-spacing:-.02em}
.refs-d .chev{position:absolute;right:0;top:12px;width:40px;height:40px;border-radius:50%;background:#f1f1ef;transition:background .2s,transform .35s cubic-bezier(.2,.7,.2,1)}
.refs-d .chev::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translate(-50%,-70%) rotate(45deg)}
.refs-d summary:hover .chev{background:var(--fuchsia)}
.refs-d[open] .chev{transform:rotate(180deg)}
.refs-d .reftable{margin-top:30px}
.refs-d[open] .reftable{animation:open .5s cubic-bezier(.2,.7,.2,1)}
@keyframes open{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* Tableau des atomes (méthode) */
.atoms{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:8px}
.atom{position:relative;aspect-ratio:1/1;text-align:left;padding:7px 9px 8px;border:0;background:var(--t,#eee);color:var(--tc,var(--mg-blue));display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .25s,color .25s}
.atom i{position:absolute;left:7px;top:5px;font:500 11px var(--mono);font-style:normal;opacity:.65}
.atom em{position:absolute;right:7px;top:5px;font:500 10.5px var(--mono);font-style:normal;opacity:.45}
.atom b{font:300 clamp(18px,2.05vw,36px)/.88 var(--display);letter-spacing:-.04em}
.atom span{display:block;margin-top:2px;font-size:9.5px;line-height:1.05}
.atom:hover{transform:translateY(-5px) scale(1.04);box-shadow:0 14px 28px -12px rgba(27,33,64,.45);z-index:2}
.atoms.has-sel .atom{opacity:.28}
.atoms.has-sel .atom.is-on,.atoms.has-sel .atom.is-hit{opacity:1;background:#fff;color:var(--tl,var(--t));box-shadow:inset 0 0 0 4px var(--t);transform:scale(1.06);z-index:2}
.atoms.has-sel .atom.is-on i,.atoms.has-sel .atom.is-on em,.atoms.has-sel .atom.is-hit i,.atoms.has-sel .atom.is-hit em{color:var(--tl,var(--t));opacity:.8}
.f-s{--t:#f18e9c;--tc:#1b2140}.f-e{--t:#ffe168;--tl:#e0b000;--tc:#1b2140}.f-n{--t:#5090c0;--tc:#1b2140}.f-v{--t:#9db051;--tc:#1b2140}.f-d{--t:#e7304f;--tc:#fff}.f-u{--t:#7b5a8b;--tc:#fff}
.pt{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:44px;align-items:start}
.legend{display:grid;gap:12px;padding-top:4px;font:11.5px/1.35 var(--mono);letter-spacing:.02em}
.legend span{display:flex;align-items:center;gap:10px}
.legend i{flex:none;width:14px;height:14px;background:var(--t)}
.pick{margin-top:30px}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pchip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--mg-blue);background:#fff;color:var(--mg-blue);font:500 12px var(--display);font-stretch:108%;letter-spacing:.06em;text-transform:uppercase}
.pchip i{width:10px;height:10px;border-radius:50%}
.pchip:hover{border-color:var(--fuchsia)}
.pchip.is-on{background:var(--mg-blue);color:#fff}
.mol-out{margin-top:34px;min-height:120px;border-top:1px solid var(--mg-blue);padding-top:22px}
.mol-hint{margin:0;font:12.5px var(--mono);opacity:.65}
.mol-panel h3{margin:0 0 6px!important;font:300 34px/1.1 var(--display)!important;letter-spacing:-.02em;text-transform:none!important;opacity:1!important}
.mol-panel h3 b{font-weight:300;color:var(--fuchsia);margin-right:10px}
.mol-panel ul{list-style:none;margin:16px 0 0;padding:0}
.mol-panel li{display:grid;grid-template-columns:minmax(200px,1.2fr) 1fr 1fr;gap:16px;align-items:center;padding:14px 0;border-top:1px solid rgba(27,33,64,.2);font-size:15px}
.mol-panel .pn{display:flex;align-items:center;gap:10px;font:500 14px var(--display);font-stretch:110%;text-transform:uppercase;letter-spacing:.02em}
.mol-panel .pn i{width:11px;height:11px;border-radius:50%}
.mol-panel .pn:hover{color:var(--fuchsia)}
.mol-panel .mol{font:300 26px/1 var(--display);letter-spacing:-.02em}
.mol-panel .mol span{margin-right:2px;opacity:.45}
.mol-panel .mol span.on{opacity:1;color:var(--fuchsia)}
.mol-panel .lv b{font:300 22px var(--display);color:var(--fuchsia);margin-right:6px}
.mol-panel .decomp li{grid-template-columns:110px 1fr}
.mol-panel .decomp li b{font:300 28px/1 var(--display);color:var(--fuchsia)}
.mol-panel .ln{margin-top:18px}

/* ===== 8. Le lab ===== */
.split{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.split h2{margin:0;font:300 clamp(28px,3.4vw,50px)/1.05 var(--display);letter-spacing:-.025em;text-wrap:balance}
.prose{max-width:680px;font-size:17px;line-height:1.6}
.prose p{margin:0 0 16px}
.models{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.models li{padding:4px 22px 6px;border-left:1px solid var(--line);font-size:14.5px}
.models li:first-child{border-left:0;padding-left:0}
.models h3{margin:0 0 8px;font:500 13px/1.2 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:.06em}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;counter-reset:step}
.steps li{counter-increment:step;padding:16px 0 16px 56px;border-top:1px solid var(--line);position:relative;font-size:15.5px}
.steps li::before{content:counter(step);position:absolute;left:0;top:12px;font:300 32px/1 var(--display);color:var(--fuchsia)}
.steps li b{display:block;font:500 12px var(--display);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pillars h3{margin:0 0 10px;padding-top:14px;border-top:3px solid var(--c);font:300 28px/1.05 var(--display);letter-spacing:-.02em}
.pillars p{margin:0;font-size:15.5px;color:var(--ink-2)}

/* ===== 9. Panier, compte, pages simples ===== */
.cart-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;padding-top:20px;align-items:start}
.cart-line{display:grid;grid-template-columns:84px 1fr auto;gap:18px;padding:18px 0;border-top:1px solid var(--line);align-items:center}
.cart-line:first-child{border-top:1px solid var(--ink)}
.cart-line .sw{border:1px solid var(--line);width:84px;height:104px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:8px;color:var(--fg)}
.cart-line .sw span{position:relative;font:300 15px/1 var(--display);white-space:nowrap}
.cart-line h3{margin:0 0 4px;font:500 15px/1.1 var(--display);font-stretch:110%;text-transform:uppercase}
.cart-line .meta{font:500 12px var(--mono);color:var(--muted)}
.cart-line .end{text-align:right;display:grid;gap:8px;justify-items:end}
.cart-line .rm{border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:13px;padding:0;color:var(--muted)}
.summary{border-top:1px solid var(--ink);padding-top:18px}
.summary h2{margin:0 0 14px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.summary dl{margin:0;display:grid;grid-template-columns:1fr auto;font-size:15px}
.summary dt,.summary dd{padding:8px 0;margin:0;border-bottom:1px solid var(--line)}
.summary dd{text-align:right;font-family:var(--mono)}
.summary .tot{border-bottom:1px solid var(--ink);font-weight:600}
.summary .btn{display:block;text-align:center;margin-top:22px}
.summary .note{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.empty-cart{padding:30px 0;font-size:17px}
.form{display:grid;gap:14px;max-width:420px}
.form h2{margin:0 0 4px;font:300 30px/1.1 var(--display);letter-spacing:-.02em}
.form label{display:grid;gap:6px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.form input{height:46px;border:1px solid var(--line);padding:0 12px;font:400 16px var(--body);background:#fff;color:var(--ink)}
.form input:focus{border-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:14px 22px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ===== 10. Écrans étroits ===== */
@media (max-width:980px){
  .gut{padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
  .site-header{grid-template-columns:1fr auto;padding-top:20px;padding-bottom:20px}
  .site-header nav{display:none}
  .hero,.how,.split,.cols2,.cases,.pdp,.cart-wrap{grid-template-columns:1fr}
  .hero{padding-top:34px;gap:36px}
  .cards{grid-template-columns:repeat(2,1fr);gap:36px 16px}
  .idx,.quad,.steps,.pillars,.models,.detail{grid-template-columns:1fr}
  .idx .r{grid-template-columns:1fr;gap:6px}
  .models li{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:16px}
  .quad{gap:22px}
  .detail{gap:36px}
  .pdp{gap:36px}
  .facts li{grid-template-columns:1fr;gap:4px}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .sec{padding-top:64px}
  .stmt{padding-top:80px}
  .eq .c{max-width:none}
  .pt{grid-template-columns:1fr;gap:22px}
  .legend{grid-template-columns:1fr 1fr}
  .atoms{grid-template-columns:repeat(4,minmax(0,1fr))}
  .atom span{font-size:9.5px;overflow-wrap:anywhere;hyphens:auto}
  .atom{grid-column:auto!important;grid-row:auto!important}
  .mol-panel li{grid-template-columns:1fr}
}
@media (max-width:700px){
  .reftable thead{display:none}
  .reftable,.reftable tbody,.reftable tr,.reftable td{display:block;width:100%}
  .reftable tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .reftable td{border:0;padding:4px 0}
  .let{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.toast,.btn,.slide,.slide.is-on{transition:none}.dot.is-on::after{animation:none;width:100%}}

/* Espace professionnels de la santé : le strict minimum */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pro{min-height:calc(100vh - 340px);display:flex;justify-content:center;align-items:center;padding-top:20px;padding-bottom:20px}
.pro-in{width:100%;max-width:300px}
.pro-p{display:none;gap:22px}
.pro-p:target{display:grid}
.pro:not(:has(:target)) #connexion{display:grid}
.pf label{display:grid;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pf input{height:40px;border:0;border-bottom:1px solid var(--line);padding:0;background:none;font:400 17px var(--body);color:var(--ink);border-radius:0;outline:0;transition:border-color .25s}
.pf input:focus{border-color:var(--ink)}
.pf-b{display:flex;justify-content:flex-end}
.go{width:46px;height:46px;border-radius:50%;border:1px solid var(--ink);background:none;font:300 20px/1 var(--display);color:var(--ink);padding:0 0 2px;transition:background .25s,color .25s}
.go:hover{background:var(--ink);color:#fff}
.pf-l{display:flex;justify-content:space-between;gap:16px;margin:0;font-size:12.5px;color:var(--muted)}
.pf-l a:hover{color:var(--ink)}
.site-header:has(+ main .pro){display:flex;justify-content:center}
.site-header:has(+ main .pro) span{display:none}
.pf select{height:40px;border:0;border-bottom:1px solid var(--line);padding:0;background:none;font:400 17px var(--body);color:var(--ink);border-radius:0;outline:0;transition:border-color .25s}
.pf select:focus{border-color:var(--ink)}
.pf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pf-msg{margin:0;padding:12px 14px;background:#f4f4f2;border-left:3px solid var(--fuchsia);font-size:13.5px;line-height:1.5;color:var(--ink)}
.pf-n{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.pro-home{padding-top:48px;padding-bottom:72px}
.pro-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--ink)}
.pro-h h1{margin:8px 0 0;font:300 clamp(30px,4.4vw,52px)/1.05 var(--display);letter-spacing:-.03em}
.pro-out{display:inline-block;padding-bottom:3px;border-bottom:1px solid var(--ink);font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.pro-out:hover{color:var(--fuchsia);border-color:var(--fuchsia)}
.pro-home .pf-msg{margin-top:32px;max-width:560px}
.pro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.pro-card{border:1px solid var(--line);background:#fff;padding:32px 28px}
.pro-card h2{margin:0 0 18px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fuchsia)}
.pro-card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pro-card li a{display:block;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4}
.pro-card li a:hover{color:var(--fuchsia)}
.pro-card p{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.pro-wide{grid-column:1/-1}
.pro-link{width:100%;max-width:560px;padding:10px 12px;border:1px solid var(--line);background:#fafaf8;font:400 14px var(--mono);color:var(--ink)}
.pro-stats{display:flex;gap:32px;flex-wrap:wrap;margin:0;font-size:15px;color:var(--ink-2)}
.pro-stats strong{font:300 32px var(--display);color:var(--ink);margin-right:6px}
.pro-home .pro-wide{margin-top:20px}
.pro-per{margin:28px 0 0;display:flex;gap:16px;align-items:center}
.pro-per label,.pro-fil label{display:flex;gap:10px;align-items:center;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pro-per select,.pro-fil select{height:36px;border:0;border-bottom:1px solid var(--line);background:none;font:400 15px var(--body);color:var(--ink);letter-spacing:0;text-transform:none;border-radius:0}
.pro-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
.pro-kpi{border:1px solid var(--line);background:#fff;padding:24px 22px;display:grid;gap:6px;align-content:start}
.pro-kpi span{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pro-kpi strong{font:300 clamp(26px,3vw,38px)/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.pro-kpi em{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.pro-copy{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pro-copy .pro-link{flex:1 1 320px}
.pro-copy button.pro-out{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.pro-links{display:flex;gap:28px;flex-wrap:wrap}
.pro-fil{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:0 0 20px}
.pro-tw{overflow-x:auto}
.pro-t{width:100%;border-collapse:collapse;font-size:14px}
.pro-t th{padding:10px 12px;text-align:left;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink);white-space:nowrap}
.pro-t td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
.pro-home .pro-wide{margin-top:20px}
.pro-per{margin:28px 0 0;display:flex;gap:16px;align-items:center}
.pro-per label,.pro-fil label{display:flex;gap:10px;align-items:center;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pro-per select,.pro-fil select{height:36px;border:0;border-bottom:1px solid var(--line);background:none;font:400 15px var(--body);color:var(--ink);letter-spacing:0;text-transform:none;border-radius:0}
.pro-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
.pro-kpi{border:1px solid var(--line);background:#fff;padding:24px 22px;display:grid;gap:6px;align-content:start}
.pro-kpi span{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pro-kpi strong{font:300 clamp(26px,3vw,38px)/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.pro-kpi em{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.pro-copy{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pro-copy .pro-link{flex:1 1 320px}
.pro-copy button.pro-out{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.pro-links{display:flex;gap:28px;flex-wrap:wrap}
.pro-fil{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:0 0 20px}
.pro-tw{overflow-x:auto}
.pro-t{width:100%;border-collapse:collapse;font-size:14px}
.pro-t th{padding:10px 12px;text-align:left;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink);white-space:nowrap}
.pro-t td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
.prg-form{display:grid;gap:22px;margin-top:8px}
.prg-lab{display:grid;gap:8px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);max-width:420px}
.prg-lab input,.prg-lab select,.prg-row select{height:40px;border:0;border-bottom:1px solid var(--line);background:none;font:400 16px var(--body);color:var(--ink);letter-spacing:0;text-transform:none;border-radius:0;outline:0}
.prg-list{border-top:1px solid var(--ink)}
.prg-row{display:grid;grid-template-columns:1fr auto 72px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.prg-pick{display:flex;gap:12px;align-items:center;font-size:16px;color:var(--ink);cursor:pointer}
.prg-pick input{width:18px;height:18px;accent-color:var(--fuchsia)}
.prg-row em{font-style:normal;font-size:14px;color:var(--ink-2)}
.prg-btn{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.prg-small{font-size:12px;padding:6px 8px;min-width:240px}
.prg-act a{color:var(--ink);border-bottom:1px solid var(--line)}
.prg-act a:hover{color:var(--fuchsia);border-color:var(--fuchsia)}
.prg-ok{border-color:var(--fuchsia)}
.prg{padding-top:64px;padding-bottom:96px}
.prg-in{max-width:760px;margin:0 auto}
.prg-in h1{margin:10px 0 8px;font:300 clamp(34px,5vw,56px)/1.05 var(--display);letter-spacing:-.03em;color:var(--ink)}
.prg-by{margin:0 0 36px;font-size:16px;color:var(--ink-2)}
.prg-items{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.prg-items li{display:grid;grid-template-columns:1fr auto 110px;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.prg-items strong{display:block;font:500 18px var(--display);color:var(--ink)}
.prg-items span{display:block;margin-top:6px;font-size:14px;line-height:1.55;color:var(--muted)}
.prg-items em{font-style:normal;font-size:14px;color:var(--ink-2);padding-top:4px}
.prg-items b{font-weight:400;font-size:16px;text-align:right;color:var(--ink)}
.prg-tot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:22px 0 32px;font-size:14px;color:var(--muted)}
.prg-tot strong{font:500 17px var(--display);color:var(--ink)}
.prg-buy{display:grid;gap:18px;padding:28px;background:#f4f4f2;margin-bottom:36px}
.prg-consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--ink-2);cursor:pointer}
.prg-consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--fuchsia);flex:none}
.prg-note{margin:0;font-size:13px;color:var(--muted)}
.prg-buy .prg-btn{justify-self:start}
.prg-legal p{margin:0 0 10px;font-size:12px;line-height:1.6;color:var(--muted)}
@media (max-width:640px){.prg-items li{grid-template-columns:1fr auto}.prg-items b{grid-column:2;text-align:right}.prg-row{grid-template-columns:1fr 72px}.prg-row em{display:none}}
.pro-sub{margin:24px 0 10px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pro-prod{list-style:none;margin:0 0 22px;padding:0;max-width:560px}
.pro-prod li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.pro-prod strong{font-weight:500;color:var(--ink)}
@media (max-width:900px){.pro-grid{grid-template-columns:1fr}.pro-kpis{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pro-kpis{grid-template-columns:1fr}}

/* --- Menu mobile (burger) --- */
.burger{display:none}
@media (max-width:980px){
  .site-header{grid-template-columns:auto 1fr auto;position:relative}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:30px;height:24px;padding:0;border:0;background:none;cursor:pointer}
  .burger span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
  nav#primary-nav{display:none}
  .nav-open nav#primary-nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid #ededed;box-shadow:0 24px 40px rgba(0,0,0,.07);padding:8px 24px 20px;z-index:200}
  .nav-open nav#primary-nav a{padding:15px 2px;border-bottom:1px solid #f1f1ef;font-size:16px;letter-spacing:0}
  .nav-open nav#primary-nav a:last-child{border-bottom:0}
  .nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-open .burger span:nth-child(2){opacity:0}
  .nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-open{overflow:hidden}
}