/* =========================================================
   VERTANE — système visuel de la boutique
   Couleurs et typographies : charte graphique v1.0 (sept. 2026)
   ========================================================= */
:root{
  /* couleurs de la charte (codes exacts) */
  --vert:#2F7A55;--noir:#16181A;--ivoire:#F3F1EA;--sauge:#8DB89A;--pierre:#55584F;--lin:#C9C4B8;--blanc:#FFFFFF;
  /* états d’interface dérivés */
  --vert-hover:#286A49;--vert-press:#23603F;--noir-2:#1F2224;--noir-3:#2A2E31;--ivoire-2:#EBE8DF;--lin-2:#DEDAD0;
  --danger:#B3261E;
  --display:"Unbounded","Arial",sans-serif;
  --text:"Sora","Helvetica Neue","Helvetica","Arial",sans-serif;
  --r-s:12px;--r-m:18px;--r-l:28px;
  --shell:1120px;--gut:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.28,.11,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--ivoire);color:var(--noir);font:400 17px/1.47 var(--text);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--vert);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:6px}
.sec-dark :focus-visible,.gnav.is-dark :focus-visible{outline-color:var(--sauge)}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shell{width:100%;max-width:calc(var(--shell) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.shell-wide{max-width:calc(1440px + 2*var(--gut))}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--noir);color:var(--ivoire);padding:10px 16px;border-radius:10px}
.skip:focus{top:16px}

/* ---------- typographie ---------- */
.eyebrow{font:500 15px/1.3 var(--display);letter-spacing:.02em;color:var(--vert);margin:0 0 14px}
.sec-dark .eyebrow,.tile.dark .eyebrow{color:var(--sauge)}
.tile.green .eyebrow{color:var(--ivoire)}
.h-hero{font:500 clamp(44px,7.6vw,96px)/1.02 var(--display);letter-spacing:-.035em;margin:0}
.h1{font:500 clamp(36px,5.4vw,64px)/1.06 var(--display);letter-spacing:-.03em;margin:0}
.h2{font:500 clamp(30px,4.2vw,48px)/1.1 var(--display);letter-spacing:-.025em;margin:0}
.h3{font:500 clamp(22px,2.4vw,28px)/1.2 var(--display);letter-spacing:-.015em;margin:0}
.h4{font:500 19px/1.3 var(--display);letter-spacing:-.01em;margin:0}
.lead{font:400 clamp(19px,1.9vw,24px)/1.42 var(--text);letter-spacing:-.015em;color:var(--pierre);margin:0}
.sec-dark .lead{color:#B9BBB2}
.muted{color:var(--pierre)}
.sec-dark .muted{color:#A9ABA3}
.fine{font-size:12px;line-height:1.5;color:var(--pierre)}
.grad{color:var(--vert)}
.sec-dark .grad{color:var(--sauge)}
.center{text-align:center}
.num{font-family:var(--display);font-weight:500;letter-spacing:-.03em}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 22px;border-radius:980px;border:0;background:var(--vert);color:var(--ivoire);font:400 17px/1.2 var(--text);letter-spacing:-.01em;text-decoration:none!important;transition:background .2s var(--ease),transform .2s var(--ease),opacity .2s;white-space:nowrap}
.btn:hover{background:var(--vert-hover)}
.btn:active{background:var(--vert-press);transform:scale(.98)}
.btn[disabled],.btn.is-disabled{background:var(--lin);color:var(--pierre);cursor:not-allowed;transform:none}
.btn-sm{min-height:32px;padding:6px 15px;font-size:14px}
.btn-lg{min-height:52px;padding:14px 30px;font-size:17px}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--vert);box-shadow:inset 0 0 0 1px var(--vert)}
.btn-ghost:hover{background:var(--vert);color:var(--ivoire)}
.btn-dark{background:var(--noir);color:var(--ivoire)}
.btn-dark:hover{background:var(--noir-3)}
.sec-dark .btn{background:var(--sauge);color:var(--noir)}
.sec-dark .btn:hover{background:#9CC4A8}
.sec-dark .btn-ghost{background:transparent;color:var(--sauge);box-shadow:inset 0 0 0 1px var(--sauge)}
.sec-dark .btn-ghost:hover{background:var(--sauge);color:var(--noir)}
.sec-green .btn{background:var(--ivoire);color:var(--vert)}
.sec-green .btn:hover{background:#fff}
.link{display:inline-flex;align-items:center;gap:2px;font-size:17px;color:var(--vert);white-space:nowrap}
.link::after{content:"";width:.5em;height:.5em;border:solid currentColor;border-width:1.6px 1.6px 0 0;transform:rotate(45deg) translate(-1px,1px);margin-left:.25em}
.sec-dark .link,.sec-dark a{color:var(--sauge)}
.sec-green .link,.sec-green a{color:var(--ivoire)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px}
.ctas.left{justify-content:flex-start}

/* ---------- navigation globale : capsule flottante ---------- */
.gnav-wrap{position:fixed;left:0;right:0;top:0;z-index:100;padding:12px var(--gut) 0;pointer-events:none}
.gnav{pointer-events:auto;position:relative;max-width:1060px;margin:0 auto;height:56px;border-radius:999px;background:rgba(243,241,234,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 0 0 1px rgba(201,196,184,.7),0 8px 30px rgba(22,24,26,.06);overflow:hidden;transition:background .4s var(--ease),box-shadow .4s var(--ease),max-width .5s var(--ease),height .4s var(--ease)}
.gnav.is-dark{background:rgba(22,24,26,.72);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 30px rgba(0,0,0,.25);color:var(--ivoire)}
.gnav-layer{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 10px 0 26px;transition:transform .5s var(--ease),opacity .35s var(--ease)}
.gnav-local{transform:translateY(100%);opacity:0;visibility:hidden}
.gnav.show-local .gnav-main{transform:translateY(-100%);opacity:0;visibility:hidden}
.gnav.show-local .gnav-local{transform:none;opacity:1;visibility:visible}
.gnav-logo{display:block;flex:0 0 auto;width:128px;height:16px;margin-right:auto;position:relative}
.gnav-logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s}
.gnav-logo .neg{opacity:0}
.gnav.is-dark .gnav-logo .neg{opacity:1}
.gnav.is-dark .gnav-logo .pos{opacity:0}
.gnav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0 auto;padding:0}
.gnav-links a{display:block;padding:8px 14px;border-radius:999px;color:inherit;font-size:14px;letter-spacing:-.005em;opacity:.86;text-decoration:none;transition:background .2s,opacity .2s}
.gnav-links a:hover{opacity:1;background:rgba(22,24,26,.06)}
.gnav.is-dark .gnav-links a:hover{background:rgba(255,255,255,.08)}
.gnav-links a[aria-current="page"]{opacity:1;font-weight:600}
.gnav-tools{display:flex;align-items:center;gap:2px;margin-left:auto}
.icon-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:0;background:transparent;color:inherit;transition:background .2s}
.icon-btn:hover{background:rgba(22,24,26,.06)}
.gnav.is-dark .icon-btn:hover{background:rgba(255,255,255,.1)}
.icon-btn svg{width:20px;height:20px}
.bag-count{position:absolute;right:4px;bottom:5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--vert);color:var(--ivoire);font:600 10.5px/17px var(--text);text-align:center;transform:scale(0);transition:transform .35s var(--ease-out)}
.gnav.is-dark .bag-count{background:var(--sauge);color:var(--noir)}
.bag-count.on{transform:scale(1)}
.bag-count.bump{animation:bump .5s var(--ease-out)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.menu-btn{display:none}
.gnav-local .l-title{font:500 16px/1 var(--display);letter-spacing:-.01em;margin-right:auto;white-space:nowrap;color:inherit;text-decoration:none!important}
.gnav-local .l-links{display:flex;gap:2px;margin-right:6px}
.gnav-local .l-links a{padding:7px 12px;border-radius:999px;font-size:13.5px;color:inherit;opacity:.78;text-decoration:none}
.gnav-local .l-links a:hover,.gnav-local .l-links a.on{opacity:1;background:rgba(22,24,26,.06)}
.gnav.is-dark .gnav-local .l-links a:hover,.gnav.is-dark .gnav-local .l-links a.on{background:rgba(255,255,255,.1)}
.gnav-local .btn{margin-left:4px}
.gnav.is-dark .gnav-local .btn{background:var(--sauge);color:var(--noir)}

/* menu mobile */
.mnav{position:fixed;inset:0;z-index:99;background:var(--ivoire);padding:96px var(--gut) 40px;overflow:auto;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.mnav.open{opacity:1;visibility:visible}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav li{opacity:0;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mnav.open li{opacity:1;transform:none}
.mnav li a{display:block;padding:10px 0;font:500 28px/1.2 var(--display);letter-spacing:-.02em;color:var(--noir)}
.mnav .mnav-sub a{font:400 17px/1.5 var(--text);color:var(--pierre);padding:6px 0}
.mnav hr{border:0;border-top:1px solid var(--lin);margin:18px 0}

/* panneau panier */
.flyout{position:fixed;z-index:101;top:76px;right:max(var(--gut),calc((100vw - 1060px)/2));width:min(380px,calc(100vw - 2*var(--gut)));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--r-m);box-shadow:0 0 0 1px rgba(201,196,184,.7),0 24px 60px rgba(22,24,26,.16);padding:24px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .25s var(--ease),transform .3s var(--ease-out),visibility .25s}
.flyout.open{opacity:1;visibility:visible;transform:none}
.flyout h2{font:500 20px/1.2 var(--display);margin:0 0 16px;letter-spacing:-.015em}
.fly-items{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px;max-height:260px;overflow:auto}
.fly-items li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;font-size:14px}
.fly-items img{width:52px;height:52px;object-fit:contain;border-radius:10px;background:var(--ivoire)}
.fly-items b{display:block;font-weight:600}
.fly-links{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--lin-2);display:grid;gap:4px}
.fly-links a{display:flex;align-items:center;gap:10px;color:var(--pierre);font-size:14px;padding:4px 0}
.fly-links svg{width:18px;height:18px}
.scrim{position:fixed;inset:0;z-index:98;background:rgba(22,24,26,.18);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.on{opacity:1;visibility:visible}

/* recherche */
.search{position:fixed;z-index:101;left:0;right:0;top:0;padding:12px var(--gut);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.search.open{opacity:1;visibility:visible}
.search-box{max-width:760px;margin:0 auto;background:rgba(255,255,255,.97);border-radius:var(--r-l);box-shadow:0 0 0 1px rgba(201,196,184,.7),0 24px 60px rgba(22,24,26,.16);padding:12px 12px 20px;transform:translateY(-10px);transition:transform .35s var(--ease-out)}
.search.open .search-box{transform:none}
.search-field{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 16px;border-bottom:1px solid var(--lin-2)}
.search-field svg{width:22px;height:22px;flex:0 0 auto;color:var(--pierre)}
.search-field input{flex:1;border:0;background:transparent;font:400 22px/1.3 var(--text);padding:12px 0;outline:0;min-width:0}
.search h3{font:600 12px/1 var(--text);color:var(--pierre);text-transform:uppercase;letter-spacing:.06em;margin:18px 18px 8px}
.search ul{list-style:none;margin:0;padding:0 8px}
.search li a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--noir);font-size:15px;text-decoration:none}
.search li a:hover,.search li a.on{background:var(--ivoire)}
.search li a small{color:var(--pierre);margin-left:auto;font-size:13px}
.search .none{padding:10px 18px;color:var(--pierre);font-size:15px}

/* ---------- sections ---------- */
main{display:block}
.sec{position:relative;padding:clamp(80px,11vw,150px) 0}
.sec-tight{padding:clamp(56px,7vw,90px) 0}
.sec-dark{background:var(--noir);color:var(--ivoire)}
.sec-green{background:var(--vert);color:var(--ivoire)}
.sec-white{background:var(--blanc)}
.sec-head{max-width:820px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.sec-head .lead{margin-top:18px}
.sec-head.left{margin-left:0;text-align:left}
.page-top{padding-top:96px}

/* tuiles (bento) */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.tile{position:relative;grid-column:span 6;background:var(--blanc);border-radius:var(--r-l);padding:clamp(28px,3.4vw,48px);overflow:hidden;min-height:340px;display:flex;flex-direction:column}
.tile.w12{grid-column:span 12}.tile.w8{grid-column:span 8}.tile.w4{grid-column:span 4}.tile.w7{grid-column:span 7}.tile.w5{grid-column:span 5}
.sec-dark .tile{background:var(--noir-2)}
.tile.dark{background:var(--noir);color:var(--ivoire)}
.tile.green{background:var(--vert);color:var(--ivoire)}
.tile .big{font:500 clamp(48px,6vw,84px)/1 var(--display);letter-spacing:-.045em;margin:auto 0 8px}
.tile .big small{font-size:.42em;letter-spacing:-.02em}
.tile p{margin:0}
.tile .t-img{margin:auto -10% -12% auto;width:78%;max-width:440px;pointer-events:none}
@media (max-width:833px){.tile,.tile.w8,.tile.w4,.tile.w7,.tile.w5{grid-column:span 12}.tiles{gap:14px}.tile{min-height:260px}}

/* apparition au défilement */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- formulaires et cartes d’options ---------- */
.choices{display:grid;gap:12px}
.choices.two{grid-template-columns:1fr 1fr}
.choice{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:var(--r-s);background:var(--blanc);box-shadow:inset 0 0 0 1px var(--lin);cursor:pointer;transition:box-shadow .2s var(--ease),background .2s}
.choice:hover{box-shadow:inset 0 0 0 1px var(--pierre)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice.on{box-shadow:inset 0 0 0 2px var(--vert)}
.choice:has(input:focus-visible){outline:2px solid var(--vert);outline-offset:3px}
.choice.dis{cursor:not-allowed;background:transparent;box-shadow:inset 0 0 0 1px var(--lin-2)}
.choice.dis .c-t,.choice.dis .c-d,.choice.dis .c-p{opacity:.45}
.c-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.c-t{font:600 17px/1.3 var(--text);letter-spacing:-.015em}
.c-t small{display:block;font-weight:400;font-size:14px;color:var(--pierre);margin-top:2px}
.c-p{font-size:14px;color:var(--noir);white-space:nowrap;text-align:right}
.c-p small{display:block;color:var(--pierre);font-size:12px}
.c-d{font-size:14px;line-height:1.43;color:var(--pierre)}
.c-why{font-size:13px;color:var(--danger);line-height:1.4;margin-top:4px}
.c-tag{align-self:flex-start;font:600 11px/1 var(--text);letter-spacing:.04em;text-transform:uppercase;color:var(--vert);margin-bottom:4px}
.swatches{display:flex;flex-wrap:wrap;gap:12px}
.sw{position:relative;width:34px;height:34px;border-radius:50%;cursor:pointer;display:block}
.sw input{position:absolute;opacity:0}
.sw span{position:absolute;inset:4px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),inset 0 -3px 6px rgba(0,0,0,.12),inset 0 3px 5px rgba(255,255,255,.28)}
.sw.on{box-shadow:0 0 0 2px var(--vert)}
.sw:hover:not(.on){box-shadow:0 0 0 1px var(--pierre)}
.sw:has(input:focus-visible){outline:2px solid var(--vert);outline-offset:3px}
.field{position:relative;display:block}
.field input,.field select,.field textarea{width:100%;height:56px;padding:22px 16px 6px;border-radius:var(--r-s);border:1px solid var(--lin);background:var(--blanc);font-size:17px;outline:0;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.field textarea{height:auto;min-height:130px;padding-top:28px;resize:vertical}
.field select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355584F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.field label{position:absolute;left:17px;top:17px;font-size:17px;color:var(--pierre);pointer-events:none;transform-origin:left top;transition:transform .2s var(--ease),color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--vert);box-shadow:0 0 0 3px rgba(47,122,85,.18)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field select+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-10px) scale(.72)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--danger);background:#FDF6F5}
.field .msg{display:none;font-size:13px;color:var(--danger);margin:6px 2px 0}
.field.err .msg{display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}.choices.two{grid-template-columns:1fr}}

/* ---------- fenêtre modale ---------- */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;background:rgba(22,24,26,.36);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal.open{opacity:1;visibility:visible}
.modal-box{position:relative;width:min(880px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--blanc);border-radius:var(--r-l);padding:clamp(28px,5vw,64px);transform:translateY(24px) scale(.98);transition:transform .45s var(--ease-out);overscroll-behavior:contain}
.modal.open .modal-box{transform:none}
.modal-close{position:sticky;float:right;top:0;margin:-12px -12px 0 0;width:36px;height:36px;border-radius:50%;border:0;background:var(--ivoire);display:grid;place-items:center;z-index:2}
.modal-close:hover{background:var(--ivoire-2)}
.modal-close svg{width:16px;height:16px}
@media (max-width:600px){.modal{padding:0;place-items:end stretch}.modal-box{border-radius:var(--r-l) var(--r-l) 0 0;max-height:92vh;width:100%}}

/* tableau comparatif */
.cmp{width:100%;border-collapse:collapse;font-size:15px;margin-top:28px}
.cmp th,.cmp td{padding:14px 10px;border-top:1px solid var(--lin-2);text-align:left;vertical-align:top}
.cmp th{font-weight:600;color:var(--pierre);font-size:13px;width:28%}
.cmp thead th{font:500 16px/1.3 var(--display);color:var(--noir);border-top:0;width:auto}

/* message éphémère */
.toast{position:fixed;left:50%;bottom:28px;z-index:160;transform:translate(-50%,20px);background:var(--noir);color:var(--ivoire);padding:12px 20px;border-radius:999px;font-size:15px;opacity:0;visibility:hidden;transition:opacity .3s,transform .4s var(--ease-out),visibility .3s;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- pied de page ---------- */
.foot{background:var(--ivoire-2);color:var(--pierre);font-size:12.5px;line-height:1.55;padding:28px 0 40px}
.foot a{color:var(--noir)}
.foot-notes{padding-bottom:18px;border-bottom:1px solid var(--lin);margin-bottom:22px}
.foot-notes ol{margin:0;padding-left:18px}
.foot-notes p,.foot-notes li{margin:0 0 8px}
.foot-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding-bottom:26px}
.foot-cols h3{font:600 12.5px/1.4 var(--text);color:var(--noir);margin:0 0 10px}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin:0 0 8px}
.foot-cols a{color:var(--pierre)}
.foot-cols a:hover{color:var(--noir)}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-top:18px;border-top:1px solid var(--lin)}
.foot-bottom .mono{width:28px;height:28px}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 0 auto;padding:0}
@media (min-width:1000px){.foot-cols{grid-template-columns:repeat(6,1fr)}}
@media (max-width:833px){.foot-cols{grid-template-columns:1fr 1fr}}

/* ---------- Store : menu déroulant de la capsule ---------- */
.gnav-drop{pointer-events:auto;position:absolute;left:50%;top:76px;width:min(760px,calc(100vw - 2*var(--gut)));transform:translate(-50%,-8px);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--r-l);box-shadow:0 0 0 1px rgba(201,196,184,.7),0 24px 60px rgba(22,24,26,.14);padding:26px 28px 24px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:28px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .35s var(--ease-out),visibility .25s;color:var(--noir)}
.gnav-drop.open{opacity:1;visibility:visible;transform:translate(-50%,0)}
.gnav-drop h3{font:600 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--pierre);margin:0 0 14px}
.gnav-drop .d-cats{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;list-style:none;margin:0;padding:0}
.gnav-drop .d-cats a{display:flex;align-items:center;gap:10px;white-space:nowrap;padding:7px 8px;margin:0 -8px;border-radius:10px;color:var(--noir);font-size:14.5px;text-decoration:none}
.gnav-drop .d-cats a:hover{background:var(--ivoire)}
.gnav-drop .d-cats svg{width:26px;height:26px;flex:0 0 auto;color:var(--pierre)}
.gnav-drop .d-cats small{margin-left:auto;font-size:11px;color:var(--pierre)}
.gnav-drop .d-new{list-style:none;margin:0;padding:0 0 0 24px;border-left:1px solid var(--lin-2);display:grid;gap:4px}
.gnav-drop .d-new a{display:block;padding:5px 0;font:500 17px/1.3 var(--display);letter-spacing:-.015em;color:var(--noir);text-decoration:none}
.gnav-drop .d-new a:hover{color:var(--vert)}
.gnav-drop .d-new a span{display:block;font:400 13px/1.3 var(--text);color:var(--pierre);letter-spacing:0}
.gnav-links .has-drop>a::after{content:"";display:inline-block;width:.38em;height:.38em;border:solid currentColor;border-width:0 1.4px 1.4px 0;transform:translateY(-3px) rotate(45deg);margin-left:7px;opacity:.6}
@media (max-width:900px){.gnav-drop{display:none}}
.mnav .mnav-cats{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:4px 0 8px}
.mnav .mnav-cats a{font:400 16px/1.4 var(--text);color:var(--pierre);padding:6px 0;display:flex;align-items:center;gap:10px}
.mnav .mnav-cats svg{width:24px;height:24px;flex:0 0 auto}

/* ---------- Store : en-tête, rangée de catégories, étagères ---------- */
.store-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;padding-top:128px;padding-bottom:clamp(28px,4vw,48px)}
.store-head .h-hero{font-size:clamp(44px,6.4vw,80px)}
.store-head .h-hero span{color:var(--pierre)}
.store-aside{display:flex;gap:14px;align-items:flex-start;max-width:300px;font-size:14px;color:var(--pierre)}
.store-aside img{width:38px;height:38px;flex:0 0 auto}
.store-aside b{display:block;color:var(--noir);font-weight:600}
.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px max(var(--gut),calc((var(--vw,100vw) - var(--shell))/2)) 14px;margin:0;list-style:none;scroll-snap-type:x proximity}
.cats::-webkit-scrollbar{display:none}
.cats li{flex:0 0 auto;scroll-snap-align:start}
.cat{display:flex;flex-direction:column;align-items:center;gap:10px;width:112px;padding:14px 6px 12px;border-radius:var(--r-m);color:var(--noir);font-size:13.5px;line-height:1.25;text-align:center;text-decoration:none!important;transition:background .2s}
.cat:hover{background:rgba(201,196,184,.3)}
.cat .ci{display:grid;place-items:center;width:78px;height:78px;border-radius:22px;background:var(--blanc);color:var(--noir);transition:transform .35s var(--ease-out)}
.cat:hover .ci{transform:translateY(-3px)}
.cat .ci svg{width:46px;height:46px}
.cat small{font-size:11px;color:var(--pierre);margin-top:-6px}
.cat[aria-current="page"] .ci,.cat[aria-pressed="true"] .ci{background:var(--vert);color:var(--ivoire)}
.cat[aria-current="page"],.cat[aria-pressed="true"]{font-weight:600}
.shelf-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.shelf-h h2{font:500 clamp(24px,2.8vw,32px)/1.2 var(--display);letter-spacing:-.02em;margin:0}
.shelf-h h2 span{color:var(--pierre)}
@media (max-width:600px){.shelf-h{flex-direction:column;align-items:flex-start;gap:10px}.shelf-h h2{font-size:24px}.shelf-h .link{font-size:15px}.store-head{padding-top:108px}.pcard h3{font-size:25px}}
.shelf{position:relative}
.shelf-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:10px max(var(--gut),calc((var(--vw,100vw) - var(--shell))/2)) 34px;scroll-padding:0 max(var(--gut),calc((var(--vw,100vw) - var(--shell))/2))}
.shelf-track::-webkit-scrollbar{display:none}
.shelf-nav{position:absolute;top:50%;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(201,196,184,.7),0 6px 18px rgba(22,24,26,.08);display:grid;place-items:center;color:var(--noir);transform:translateY(-50%);transition:opacity .25s;z-index:2}
.shelf-nav svg{width:18px;height:18px}
.shelf-nav.prev{left:max(12px,calc((var(--vw,100vw) - var(--shell))/2 - 58px))}
.shelf-nav.next{right:max(12px,calc((var(--vw,100vw) - var(--shell))/2 - 58px))}
.shelf-nav[disabled]{opacity:0;pointer-events:none}
@media (hover:none){.shelf-nav{display:none}}
.pcard{position:relative;flex:0 0 min(400px,82vw);min-height:500px;scroll-snap-align:start;border-radius:var(--r-l);background:var(--blanc);color:var(--noir);padding:30px 30px 0;display:flex;flex-direction:column;overflow:hidden;text-decoration:none!important;box-shadow:0 2px 10px rgba(22,24,26,.04);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.pcard:hover{transform:scale(1.012);box-shadow:0 14px 38px rgba(22,24,26,.10)}
.pcard .p-ey{font:600 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--vert);margin:0 0 10px;min-height:12px}
.pcard h3{font:500 28px/1.12 var(--display);letter-spacing:-.025em;margin:0}
.pcard .p-d{margin:10px 0 0;font-size:15px;color:var(--pierre);max-width:32ch}
.pcard .p-pr{margin:12px 0 0;font-size:14px;color:var(--noir)}
.pcard .p-im{position:relative;height:310px;margin:auto -30px 0;flex:none}
.pcard .p-im img{position:absolute;top:28px;height:300px;width:auto;max-width:none;filter:drop-shadow(0 20px 26px rgba(22,24,26,.14));transition:transform .9s var(--ease-out)}
.pcard .p-im .pf{left:calc(50% - 128px)}
.pcard .p-im .pb{left:calc(50% - 12px)}
.pcard .p-im .solo{left:0;right:0;margin:0 auto}
.pcard .p-im .wide{top:10px;height:auto;width:86%;left:7%}
.pcard:hover .p-im .pb,.pcard:hover .p-im .solo,.pcard:hover .p-im .wide{transform:translateY(-8px)}
.pcard:hover .p-im .pf{transform:translateY(-4px)}
.pcard.dark{background:var(--noir);color:var(--ivoire)}
.pcard.dark .p-ey{color:var(--sauge)}.pcard.dark .p-d{color:#B9BBB2}.pcard.dark .p-pr{color:var(--ivoire)}
.pcard.green{background:var(--vert);color:var(--ivoire)}
.pcard.green .p-ey{color:var(--ivoire);opacity:.8}.pcard.green .p-d,.pcard.green .p-pr{color:rgba(243,241,234,.9)}
.pcard.sm{flex-basis:min(300px,76vw);min-height:360px}
.pcard.sm h3{font-size:23px}
.pcard .p-ico{margin:auto auto 40px;width:132px;height:132px;display:grid;place-items:center;border-radius:36px;background:var(--ivoire);color:var(--noir)}
.pcard .p-ico svg{width:78px;height:78px}
.pcard.dark .p-ico{background:var(--noir-3);color:var(--ivoire)}
.pill-soon{display:inline-block;font:600 11px/1 var(--text);letter-spacing:.05em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--ivoire-2);color:var(--pierre)}

/* pourquoi acheter */
.why{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.why-item{background:var(--blanc);border-radius:var(--r-m);padding:26px 22px}
.why-item svg{width:34px;height:34px;color:var(--vert);margin-bottom:14px}
.why-item h3{font:600 16px/1.3 var(--text);margin:0 0 6px}
.why-item p{margin:0;font-size:14px;color:var(--pierre)}
@media (max-width:1000px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why{grid-template-columns:1fr}}

/* ---------- navigation : écrans étroits ---------- */
@media (max-width:900px){
  .gnav-links{display:none}
  .menu-btn{display:grid}
  .gnav-local .l-links{display:none}
  .gnav-layer{padding-left:22px}
}
@media (max-width:480px){.gnav-logo{width:120px;height:15px}.gnav-layer{padding:0 6px 0 20px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ---------- bientôt : panneau et « me prévenir » (catégorie, modules) ---------- */
.soon{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center;background:var(--blanc);border-radius:var(--r-l);padding:clamp(32px,5vw,72px);margin-top:clamp(20px,3vw,36px)}
.soon-art{position:relative;aspect-ratio:1/1;border-radius:var(--r-l);background:radial-gradient(70% 70% at 50% 40%,var(--ivoire),var(--ivoire-2));display:grid;place-items:center;overflow:hidden}
.soon-art svg{width:52%;height:52%;color:var(--noir);stroke-width:1.1}
.soon-art::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:60%;background:radial-gradient(50% 50% at 50% 50%,rgba(141,184,154,.45),transparent 70%)}
.soon .h1{margin:14px 0 0;font-size:clamp(32px,3.8vw,50px)}
.soon .lead{margin-top:18px}
.prin{list-style:none;margin:30px 0;padding:0;display:grid;gap:14px}
.prin li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--pierre)}
.prin li b{color:var(--noir);font-weight:600}
.prin svg{width:22px;height:22px;flex:0 0 auto;color:var(--vert);margin-top:1px}
.notify{display:flex;gap:10px;flex-wrap:wrap}
.notify .field{flex:1 1 240px}
.notify .btn{height:56px}
.notify-ok{display:flex;gap:10px;align-items:center;padding:16px 20px;border-radius:var(--r-s);background:rgba(47,122,85,.08);color:var(--vert);font-weight:600}
.notify-ok svg{width:22px;height:22px}
@media (max-width:833px){.soon{grid-template-columns:minmax(0,1fr)}.soon-art{max-width:420px;width:100%;margin:0 auto}}

button.cat{border:0;background:none;font:inherit;cursor:pointer}

/* =========================================================
   VISION — le site en mode visionOS (oct. 2026)
   Un fond d'écran plein écran derrière (vagues de verdure, style Vertane OS), une grande fenêtre de verre par page,
   des ornements flottants : barre d'outils en haut, onglets à gauche, réglages en bas à droite.
   ========================================================= */
:root{
  /* verre : la fenêtre, les plateaux posés dessus, le verre fumé et le verre vert */
  --glass:rgba(244,243,238,.58);
  --glass-2:rgba(255,255,255,.4);
  --glass-dark:rgba(16,19,18,.62);
  --glass-green:rgba(34,98,66,.74);
  --glass-blur:blur(46px) saturate(1.55);
  --rim:inset 0 1px 0 rgba(255,255,255,.78),inset 0 0 0 1px rgba(255,255,255,.34);
  --rim-dark:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08);
  --lift:0 30px 90px rgba(6,18,10,.32),0 6px 18px rgba(6,18,10,.12);
  /* surfaces de la charte, passées en verre */
  --blanc:rgba(255,255,255,.56);--ivoire-2:rgba(255,255,255,.34);
  --lin:rgba(22,24,26,.16);--lin-2:rgba(22,24,26,.09);--pierre:#4B4E47;
  --r-s:14px;--r-m:22px;--r-l:32px;
  /* la fenêtre : marges latérales, rayon */
  --win-x:clamp(6px,1.6vw,26px);--win-top:10px;--win-r:clamp(26px,3vw,46px);
}
@media (min-width:1200px){:root{--win-x:104px}}
html{background:#1C2A21}
body{background:transparent}

/* ---------- fond d'écran : styles injectés par assets/vision-bg.js ---------- */

/* ---------- la fenêtre ---------- */
main{position:relative;z-index:0;--vw:min(1480px,calc(100vw - 2*var(--win-x)));width:var(--vw);margin:var(--win-top) auto 0;border-radius:var(--win-r);overflow:clip;box-shadow:var(--lift)}
main::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(170deg,rgba(255,255,255,.2),rgba(255,255,255,0) 26%),var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--rim);pointer-events:none}
/* poignée de fenêtre, sous chaque fenêtre */
.win-grab{width:min(140px,30vw);height:6px;border-radius:3px;margin:12px auto 0;background:rgba(255,255,255,.62);box-shadow:0 1px 6px rgba(0,0,0,.18)}
/* sections sombres et vertes : des plateaux de verre fumé ou teinté, posés dans la fenêtre */
.sec-dark,.sec-green,.plate{margin-left:clamp(8px,1.1vw,16px);margin-right:clamp(8px,1.1vw,16px);border-radius:calc(var(--win-r) - 8px)}
.plate+.plate{margin-top:12px}
.plate:last-child{margin-bottom:clamp(8px,1.1vw,16px)}
.sec-dark{background:var(--glass-dark);box-shadow:var(--rim-dark)}
.sec-green{background:var(--glass-green);box-shadow:var(--rim-dark)}
.tile.dark,.pcard.dark{background:var(--glass-dark);box-shadow:var(--rim-dark)}
.tile.green,.pcard.green{background:var(--glass-green);box-shadow:var(--rim-dark)}
.sec-dark .tile{background:rgba(255,255,255,.07);box-shadow:var(--rim-dark)}
.tile,.pcard,.why-item,.soon,.choice{box-shadow:var(--rim)}
.pcard{box-shadow:var(--rim),0 2px 10px rgba(22,24,26,.04)}
.pcard:hover{box-shadow:var(--rim),0 18px 44px rgba(10,24,14,.16)}
.choice:hover{box-shadow:var(--rim),inset 0 0 0 1px var(--pierre)}
.choice.on{box-shadow:inset 0 0 0 2px var(--vert);background:rgba(255,255,255,.72)}
.choice.dis{background:rgba(255,255,255,.18)}
.soon-art{background:radial-gradient(70% 70% at 50% 40%,rgba(255,255,255,.6),rgba(255,255,255,.22))}

/* ---------- boutons : surbrillance au survol, comme le regard dans visionOS ---------- */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:background .2s var(--ease),transform .25s var(--ease-out),box-shadow .25s var(--ease),filter .2s}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 26px rgba(30,90,58,.32)}
.btn-ghost{background:rgba(255,255,255,.42);box-shadow:var(--rim)}
.btn-ghost:hover{box-shadow:var(--rim),0 10px 24px rgba(10,24,14,.14)}
.sec-dark .btn-ghost{background:rgba(255,255,255,.06)}
.btn-dark{background:var(--glass-dark)}
.icon-btn:hover{background:rgba(255,255,255,.55)}

/* ---------- ornement du haut : la barre d'outils ---------- */
.gnav-wrap{padding-top:calc(var(--win-top) + 12px)}
.gnav{background:rgba(250,249,246,.5);-webkit-backdrop-filter:blur(36px) saturate(1.7);backdrop-filter:blur(36px) saturate(1.7);box-shadow:var(--rim),0 14px 40px rgba(6,18,10,.2)}
.gnav.is-dark{background:rgba(18,21,20,.5);box-shadow:var(--rim-dark),0 14px 40px rgba(0,0,0,.3)}
.gnav-links a:hover{background:rgba(255,255,255,.55)}
.gnav-links a[aria-current="page"]{background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.gnav.is-dark .gnav-links a[aria-current="page"]{background:rgba(255,255,255,.16);box-shadow:none}
.gnav-local .l-links a:hover,.gnav-local .l-links a.on{background:rgba(255,255,255,.62)}
/* champ de recherche en capsule, au centre de la barre */
.gnav-ask{display:none;align-items:center;gap:10px;flex:0 1 420px;height:40px;margin:0 auto;padding:0 8px 0 6px;border:0;border-radius:999px;background:rgba(255,255,255,.42);box-shadow:inset 0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);color:var(--pierre);font-size:14px;text-align:left;cursor:text;transition:background .2s}
.gnav-ask:hover{background:rgba(255,255,255,.66)}
.gnav-ask .orb{width:28px;height:28px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 35% 30%,#fff 0 12%,#BFE3CC 24%,#5FA97F 52%,#2F7A55 78%,#1B4A33);box-shadow:0 0 12px rgba(95,169,127,.55)}
.gnav-ask span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnav-ask kbd{font:500 11.5px/1 var(--text);padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.6);color:var(--pierre)}
.gnav.is-dark .gnav-ask{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#C9CBC3}
.gnav.is-dark .gnav-ask kbd{background:rgba(255,255,255,.12);color:#C9CBC3}
@media (min-width:1200px){
  .gnav{max-width:min(1060px,calc(100vw - 2*var(--win-x) - 40px))}
  .gnav-main .gnav-links{display:none}
  .gnav-ask{display:flex}
}

/* ---------- ornement du bas : réglages du fond ---------- */
.orn-b{position:fixed;z-index:95;right:22px;bottom:22px;display:flex;flex-direction:column;gap:10px}
.orn-b button{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;color:var(--noir);background:rgba(250,249,246,.5);-webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);box-shadow:var(--rim),0 12px 34px rgba(6,18,10,.24);transition:transform .25s var(--ease-out),background .2s}
.orn-b button:hover{transform:scale(1.06);background:rgba(255,255,255,.72)}
.orn-b svg{width:22px;height:22px}
@media (max-width:600px){.orn-b{right:12px;bottom:12px}.orn-b button{width:44px;height:44px}}

/* ---------- panneaux flottants en verre ---------- */
.flyout,.gnav-drop,.search-box{background:rgba(248,247,243,.7);-webkit-backdrop-filter:blur(40px) saturate(1.7);backdrop-filter:blur(40px) saturate(1.7);box-shadow:var(--rim),0 28px 70px rgba(6,18,10,.3)}
.gnav-drop .d-cats a:hover,.search li a:hover,.search li a.on{background:rgba(255,255,255,.62)}
.fly-items img{background:var(--glass-2)}
.scrim{background:rgba(8,16,10,.2)}
.mnav{background:rgba(240,239,234,.72);-webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6)}
.modal{background:rgba(8,16,10,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-box{background:rgba(247,246,242,.74);-webkit-backdrop-filter:blur(50px) saturate(1.6);backdrop-filter:blur(50px) saturate(1.6);box-shadow:var(--rim),0 40px 100px rgba(6,18,10,.35)}
.modal-close{background:rgba(255,255,255,.7);box-shadow:var(--rim)}
.modal-close:hover{background:#fff}
.toast{background:rgba(18,21,20,.66);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);box-shadow:var(--rim-dark),0 14px 40px rgba(0,0,0,.25)}
.shelf-nav{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--rim),0 8px 22px rgba(6,18,10,.14)}
.field input,.field select,.field textarea{background:rgba(255,255,255,.62)}
.cat:hover{background:rgba(255,255,255,.4)}
.cat .ci{box-shadow:var(--rim)}

/* ---------- pied de page : une seconde fenêtre, plus petite ---------- */
.foot{position:relative;width:var(--vw,min(1480px,calc(100vw - 2*var(--win-x))));--vw:min(1480px,calc(100vw - 2*var(--win-x)));margin:18px auto 26px;border-radius:var(--win-r);background:rgba(244,243,238,.5);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--rim),var(--lift)}
.foot-notes,.foot-bottom{border-color:var(--lin)}

@media (max-width:600px){:root{--win-r:24px}.sec-dark,.sec-green,.plate{margin-left:6px;margin-right:6px;border-radius:20px}}
@media (prefers-reduced-transparency:reduce){:root{--glass:rgba(244,243,238,.94);--blanc:#fff;--glass-dark:rgba(16,19,18,.95)}}
/* liseré de lumière sur les cartes propres à chaque page (une page qui définit sa propre ombre garde la sienne) */
.mcard,.lc,.acard,.how .card,.need,.gen,.rec,.recap,.viewer,.inc,.side,.order,.help-card,.contact form,.howto li,.dims div,.fix div,.port-row div,.sides figure,.plan,.bays,.bay-plan,.cams figure,.halves .two div,.mat,.model,.fin-view,.gal-card,.resume-in,.spin,.lcard,.filters button{box-shadow:var(--rim)}
.mcard.dark,.lc.dark,.model.dark,.gal-card:not(.light){box-shadow:var(--rim-dark)}
/* barre d'achat : un ornement flottant en bas de la fenêtre, plus une bande pleine largeur */
body .buybar{left:50%;right:auto;bottom:14px;width:min(1080px,calc(100vw - 2*var(--win-x) - 150px));border-radius:30px;transform:translate(-50%,150%);background:rgba(250,249,246,.58);-webkit-backdrop-filter:blur(36px) saturate(1.7);backdrop-filter:blur(36px) saturate(1.7);box-shadow:var(--rim),0 18px 50px rgba(6,18,10,.28)}
body .buybar.on{transform:translate(-50%,0)}
body .buybar .shell{min-height:68px;padding:10px 12px 10px 28px}
@media (max-width:1199px){body .buybar{width:calc(100vw - 2*var(--win-x) - 80px);left:calc(50% - 34px)}}
@media (max-width:600px){body .buybar{width:calc(100vw - 16px);left:50%;bottom:8px;border-radius:24px}body .buybar .shell{padding:8px 8px 8px 18px}body:has(.buybar.on) .orn-b{bottom:96px}}
main>.sec-dark:first-child,main>.sec-green:first-child,main>.plate:first-child{margin-top:clamp(8px,1.1vw,16px)}
@media (max-width:700px){:root{--glass:rgba(247,246,241,.68)}#topBtn{display:none}}
/* appareil lent : verre opaque au lieu du flou en direct (voir assets/vision-bg.js) */
html.vlite{--glass:rgba(238,238,231,.93)}
html.vlite main::before,html.vlite .foot{-webkit-backdrop-filter:none;backdrop-filter:none}
html.vlite .foot{background:rgba(238,238,231,.9)}

/* =========================================================
   VISION v2 (15 oct. 2026) — plus de barre du haut, une fenêtre très transparente,
   une barre de boutons ronds à gauche et une recherche façon Spotlight.
   Fluidité : plus aucun flou en direct sur les grandes surfaces posées sur le fond ;
   seuls les petits boutons gardent le leur.
   ========================================================= */
:root{--glass:rgba(250,249,245,.3);--blanc:rgba(255,255,255,.6);--win-top:22px;--orn-bg:rgba(250,249,246,.52)}
@media (min-width:900px){:root{--win-x:98px}}
.gnav{display:none!important}
html{scroll-padding-top:24px}
main::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(170deg,rgba(255,255,255,.22),rgba(255,255,255,0) 30%),var(--glass)}
.foot{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(250,249,245,.5)}
body .buybar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(250,249,246,.86)}
.sec-dark{background:rgba(14,17,16,.6)}
/* le texte posé directement sur la fenêtre garde du contraste malgré la transparence */
main{text-shadow:0 0 22px rgba(255,255,255,.28)}
.sec-dark,.sec-green,.tile.dark,.pcard.dark,.mcard.dark,.lc.dark,.model.dark{text-shadow:none}
/* sans barre du haut, les en-têtes remontent */
main .store-head{padding-top:clamp(40px,5vw,72px)}
main .page-top{padding-top:48px}
main .cx-hero{padding-top:56px}
main .buy-head{padding-top:52px}
main .co{padding-top:60px}
main .mod-head{padding-top:64px}
main .bag-head{padding-top:72px}

/* ---------- la barre de gauche : des boutons ronds de la taille de ceux de droite ---------- */
.orn{position:fixed;z-index:95;left:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.ob{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--noir);text-decoration:none!important;background:var(--orn-bg);-webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);box-shadow:var(--rim),0 12px 34px rgba(6,18,10,.24);transition:transform .25s var(--ease-out),background .2s}
.ob svg{width:22px;height:22px}
.ob img{width:26px;height:26px}
.ob:hover{transform:scale(1.06);background:rgba(255,255,255,.78)}
.ob[aria-current="page"]{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 12px 34px rgba(6,18,10,.28)}
.ob-sep{display:block;width:22px;height:1px;margin:2px 0;border-radius:1px;background:rgba(255,255,255,.6)}
.ob-l{position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-6px,-50%);white-space:nowrap;padding:9px 15px;border-radius:999px;font:500 14px/1 var(--text);color:var(--noir);background:rgba(250,249,246,.8);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--rim),0 10px 26px rgba(6,18,10,.18);opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease-out)}
.ob:hover .ob-l,.ob:focus-visible .ob-l{opacity:1;transform:translate(0,-50%)}
.ob-l kbd{margin-left:8px;font:500 11px/1 var(--text);padding:3px 6px;border-radius:6px;background:rgba(22,24,26,.08)}
.ob .dot{position:absolute;top:3px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--vert);color:#fff;font:600 10px/17px var(--text);text-align:center}
@media (min-width:900px){.gnav-drop.from-orn{position:fixed;left:96px;top:50%;transform:translate(0,-50%) translateX(-8px)}.gnav-drop.from-orn.open{transform:translate(0,-50%)}}
@media (max-width:899px){
  .orn{left:50%;top:auto;bottom:12px;transform:translateX(-50%);flex-direction:row;gap:8px}
  .ob{width:46px;height:46px}
  .ob[data-logo],.ob-sep,.ob-l{display:none}
  body{padding-bottom:72px}
  .orn-b{top:12px;right:12px;bottom:auto}
  body .buybar{bottom:68px}
  body:has(.buybar.on) .orn-b{bottom:auto}
}

/* ---------- recherche façon Spotlight ---------- */
.search{position:fixed;inset:0;z-index:101;padding:0 16px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.search.open{opacity:1;visibility:visible}
.spot{width:min(740px,100%);margin:20vh auto 0;transform:translateY(-10px) scale(.98);transition:transform .35s var(--ease-out)}
.search.open .spot{transform:none}
.spot-row{display:flex;align-items:center;gap:12px}
.spot-field{flex:1;display:flex;align-items:center;gap:12px;height:58px;padding:0 24px;border-radius:999px;cursor:text;background:rgba(244,247,248,.86);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.45),0 18px 50px rgba(6,18,10,.26)}
.spot-field svg{width:22px;height:22px;flex:0 0 auto;color:#3B4048}
.spot-field input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:400 21px/1.2 var(--text);color:var(--noir);caret-color:var(--vert)}
.spot-field input::placeholder{color:rgba(22,24,26,.48)}
.spot-field input::-webkit-search-cancel-button{display:none}
.spot-quick{display:flex;gap:12px}
.spot-b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:#2B3038;text-decoration:none!important;background:rgba(244,247,248,.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.45),0 18px 50px rgba(6,18,10,.22);transition:transform .25s var(--ease-out),background .2s}
.spot-b:hover{transform:scale(1.07);background:rgba(255,255,255,.82)}
.spot-b svg{width:26px;height:26px}
.search .spot-res{margin-top:12px;padding:8px;border-radius:26px;max-height:56vh;overflow:auto;background:rgba(247,248,246,.88);-webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 24px 60px rgba(6,18,10,.26)}
.search .spot-res ul{list-style:none;margin:0;padding:0}
.search .spot-res li a{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:18px;color:var(--noir);font-size:16px;text-decoration:none}
.search .spot-res li a small{margin-left:auto;color:var(--pierre);font-size:13px}
.search .spot-res li a:hover{background:rgba(255,255,255,.7)}
.search .spot-res li a.on{background:var(--vert);color:#fff}
.search .spot-res li a.on small{color:rgba(255,255,255,.82)}
.search .spot-res .none{margin:0;padding:12px 16px;color:var(--pierre);font-size:15px}
@media (max-width:600px){.spot{margin-top:10vh}.spot-quick{display:none}.spot-field{height:52px}}
body:has(.search.open) .scrim{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* lisibilité sur le fond d'écran : voile clair léger (sans flou), textes secondaires et liens plus foncés */
:root{--glass:rgba(250,249,245,.44);--pierre:#373A34}
main{text-shadow:0 0 16px rgba(255,255,255,.45),0 0 2px rgba(255,255,255,.35)}
main :is(.link,.eyebrow,.grad,.p-ey,.a-tag,.m-tag,.c-tag){color:#1B5639}
main a:not([class]){color:#1B5639}

/* ---------- barre de gauche : une seule capsule de verre, 52 px de large comme les boutons de droite.
   Elle s'élargit au survol et affiche le nom de chaque onglet ---------- */
.orn{gap:4px;padding:4px;border-radius:26px;background:var(--orn-bg);-webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);box-shadow:var(--rim),0 12px 34px rgba(6,18,10,.24);align-items:stretch;transition:box-shadow .3s}
.orn:hover,.orn:focus-within{box-shadow:var(--rim),0 18px 44px rgba(6,18,10,.3)}
.orn .ob{display:flex;align-items:center;justify-content:flex-start;gap:0;width:auto;min-width:44px;height:44px;padding:0 11px;border-radius:22px;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .2s,gap .45s var(--ease-out)}
.orn .ob svg{flex:0 0 auto}
.orn .ob img{flex:0 0 auto;width:24px;height:24px;margin:0 -1px}
.orn .ob:hover{transform:none;background:rgba(255,255,255,.6)}
.orn .ob[aria-current="page"]{background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.orn .ob-l{position:static;transform:none;max-width:0;overflow:hidden;padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:0;font:400 14.5px/1 var(--text);transition:max-width .45s var(--ease-out),opacity .3s var(--ease)}
.orn:hover .ob,.orn:focus-within .ob{gap:12px}
.orn:hover .ob-l,.orn:focus-within .ob-l{max-width:170px;opacity:1;padding-right:6px}
.orn .ob-sep{align-self:center;margin:2px 0}
.orn .ob .dot{top:3px;left:27px;right:auto}
@media (max-width:899px){
  .orn{flex-direction:row;padding:4px;border-radius:26px}
  .orn .ob{height:44px;min-width:44px;padding:0 11px}
  .orn .ob-l,.orn .ob[data-logo],.orn .ob-sep{display:none}
}
@media (min-width:900px){.gnav-drop.from-orn{left:224px}}

/* ---------- Liquid Glass actif (assets/liquid-glass.js) : le verre est dessiné en WebGL,
   on retire le verre CSS et les icônes HTML de la barre (elles sont dessinées dans le verre) ---------- */
html.lg-on .orn.lg{background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lg-on .orn.lg .ob{background:transparent!important;box-shadow:none!important}
html.lg-on .orn.lg .ob>svg,html.lg-on .orn.lg .ob>img{visibility:hidden}
html.lg-on .orn.lg .ob-l{color:transparent!important}
html.lg-on .orn-b button{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.lg-on .orn-b button:hover{transform:none;background:transparent}
html.lg-on .spot{position:relative;z-index:1}
html.lg-on .spot-field,html.lg-on .spot-b,html.lg-on .search .spot-res{background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lg-on .spot-b:hover{transform:none}
html.lg-on .search .spot-res li a:hover{background:rgba(255,255,255,.45)}
.orn .ob:hover .ob-l,.orn .ob:focus-visible .ob-l{transform:none}
/* la fenêtre et le pied de page sont dessinés en Liquid Glass (WebGL) : on retire le voile et l'ombre CSS */
html.lg-win main::before{background:none;box-shadow:none}
html.lg-win main{box-shadow:none}
html.lg-win .foot{background:transparent;box-shadow:none}

/* menu du Store en Liquid Glass */
html.lg-on .gnav-drop{z-index:1;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lg-on .gnav-drop .d-cats a:hover{background:rgba(255,255,255,.5)}

/* texte aurore (d'après Magic UI, Aurora Text) : dégradé animé découpé dans les lettres, aux verts de Vertane */
.aurora{position:relative;display:inline-block}
.aurora>[aria-hidden]{position:relative;display:inline-block;background-image:linear-gradient(135deg,#1F6B47,#29D59C,#2F7A55,#0F4A33,#1F6B47);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;animation:aurora 10s ease-in-out infinite alternate}
@keyframes aurora{0%{background-position:0% 50%;transform:rotate(-5deg) scale(.9)}25%{background-position:50% 100%;transform:rotate(5deg) scale(1.1)}50%{background-position:100% 50%;transform:rotate(-3deg) scale(.95)}75%{background-position:50% 0%;transform:rotate(3deg) scale(1.05)}100%{background-position:0% 50%;transform:rotate(-5deg) scale(.9)}}
@media (prefers-reduced-motion:reduce){.aurora>[aria-hidden]{animation:none}}

/* « M1 » : seulement l'effet de couleur, sans mouvement */
.aurora>[aria-hidden]{animation-name:aurora-c}
@keyframes aurora-c{0%{background-position:0% 50%}25%{background-position:50% 100%}50%{background-position:100% 50%}75%{background-position:50% 0%}100%{background-position:0% 50%}}

/* verre clair (Liquid Glass sombre) : textes et icônes blancs sur les petits verres */
html.lg-on .orn-b button{color:#F4F7F5}
html.lg-on .gnav-drop{color:#F4F7F5;text-shadow:0 1px 3px rgba(0,0,0,.35)}
html.lg-on .gnav-drop h3,html.lg-on .gnav-drop .d-cats svg,html.lg-on .gnav-drop .d-cats small,html.lg-on .gnav-drop .d-new a span{color:rgba(244,247,245,.72)}
html.lg-on .gnav-drop .d-cats a,html.lg-on .gnav-drop .d-new a{color:#F4F7F5}
html.lg-on .gnav-drop .d-new a:hover{color:#5BF0B4}
html.lg-on .gnav-drop .d-cats a:hover{background:rgba(255,255,255,.12)}
html.lg-on .gnav-drop .d-new{border-left-color:rgba(255,255,255,.18)}
html.lg-on .spot-field svg,html.lg-on .spot-field input,html.lg-on .spot-b{color:#F4F7F5}
html.lg-on .spot-field input::placeholder{color:rgba(244,247,245,.55)}
html.lg-on .spot-field input{caret-color:#5BF0B4}
html.lg-on .search .spot-res li a{color:#F4F7F5}
html.lg-on .search .spot-res li a small,html.lg-on .search .spot-res .none{color:rgba(244,247,245,.65)}
html.lg-on .search .spot-res li a:hover{background:rgba(255,255,255,.12)}

/* =========================================================
   THÈME SOMBRE — la fenêtre est un verre fumé transparent (Liquid Glass) sur le fond noir aux bandes vertes :
   textes clairs, cartes et champs en verre sombre, liens et accents vert menthe
   ========================================================= */
:root{color-scheme:dark;
  --noir:#EEF1EC;--pierre:rgba(238,241,236,.68);--blanc:rgba(255,255,255,.075);--ivoire-2:rgba(255,255,255,.08);
  --glass:rgba(14,18,16,.42);--glass-2:rgba(255,255,255,.06);--glass-dark:rgba(0,0,0,.32);
  --lin:rgba(255,255,255,.16);--lin-2:rgba(255,255,255,.09);--mint:#5BF0B4;
  --rim:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08)}
body{color:var(--noir)}
main{text-shadow:none}
main :is(.link,.eyebrow,.grad,.p-ey,.a-tag,.m-tag,.c-tag),main a:not([class]),a.link,.link{color:var(--mint)}
.sec-dark{background:rgba(0,0,0,.3)}
.sec-green,.tile.green,.pcard.green{background:rgba(2,157,105,.32)}
.tile.dark,.pcard.dark,.mcard.dark{background:rgba(0,0,0,.35)}
.btn{background:#029D69;color:#fff}
.btn:hover{background:#04B479}
.btn-ghost{background:rgba(255,255,255,.08);color:var(--mint)}
.btn[disabled],.btn.is-disabled{background:rgba(255,255,255,.12);color:rgba(238,241,236,.5)}
.field input,.field select,.field textarea{background:rgba(255,255,255,.07);color:var(--noir);border-color:var(--lin)}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEF1EC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.choice.on{background:rgba(2,157,105,.18);box-shadow:inset 0 0 0 2px #29D59C}
.choice.dis{background:rgba(255,255,255,.03)}
.sw.on{box-shadow:0 0 0 2px #29D59C}
.cat .ci{background:rgba(255,255,255,.08)}
.cat[aria-current="page"] .ci,.cat[aria-pressed="true"] .ci{background:#029D69;color:#fff}
.pcard:hover{box-shadow:var(--rim),0 18px 44px rgba(0,0,0,.4)}
.pcard .p-im img,.mcard img{filter:drop-shadow(0 20px 26px rgba(0,0,0,.45))}
.modal-box{background:rgba(18,22,20,.86);color:var(--noir)}
.modal-close{background:rgba(255,255,255,.12)}
.flyout,.gnav-drop,.search-box{background:rgba(18,22,20,.86)}
.mnav{background:rgba(14,18,16,.86)}
.mnav li a{color:var(--noir)}
.toast{background:rgba(255,255,255,.14)}
body .buybar{background:rgba(18,22,20,.86)}
.shelf-nav{background:rgba(255,255,255,.12);color:var(--noir)}
.pill-soon{background:rgba(255,255,255,.1)}
.notify-ok{background:rgba(2,157,105,.18);color:var(--mint)}
.win-grab{background:rgba(255,255,255,.35)}
html.lg-on .search .spot-res li a.on{background:#029D69}
/* « M1 » : dégradé vert lumineux, lisible sur fond sombre */
.aurora>[aria-hidden]{background-image:linear-gradient(135deg,#29D59C,#8BFFCF,#029D69,#29D59C)}