/* Layout : entrée du magasin (portes) → allée horizontale à rayons (scroll-snap + parallaxe légère) → fiches en tiroir bas → caisse WhatsApp */
:root{
  --nuit:#0A143C; --bleu:#285AF0; --turq:#00B89C;
  --fond:#F4F6FB; --carte:#FFFFFF; --texte:#0A143C; --doux:#5A6488; --trait:#DDE2EE;
  --bois:#C9A27A; --metal:#E7EBF3;
  --f-titre:"Bricolage Grotesque",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --f-texte:"Figtree",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--texte);font:16px/1.5 var(--f-texte);-webkit-tap-highlight-color:transparent}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-family:var(--f-titre);text-wrap:balance;margin:0;letter-spacing:-.01em}

/* ---------- en-tête ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--fond)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;background:rgba(244,246,251,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.top .wrap{display:flex;align-items:center;gap:10px;padding-block:10px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:auto}
.logo img{width:36px;height:36px;border-radius:50%;flex:none}
.logo i{width:34px;height:34px;border-radius:10px;background:var(--nuit);display:flex;align-items:center;justify-content:center;flex:none;color:#fff;font:800 18px var(--f-titre);font-style:normal}
.logo i b{color:var(--turq)}
.logo span{font:800 18px var(--f-titre);white-space:nowrap}
@media (max-width:420px){.logo span{font-size:16px}.logo img{width:36px;height:36px;border-radius:50%;flex:none}
.logo i{width:30px;height:30px}.mode button{padding:7px 10px}.panier-btn{padding:9px 11px}}
.mode{display:flex;background:var(--metal);border-radius:999px;padding:3px}
.mode button{border:0;background:none;padding:7px 12px;border-radius:999px;font-weight:700;font-size:13px;color:var(--doux)}
.mode button[aria-pressed="true"]{background:var(--carte);color:var(--texte);box-shadow:0 1px 3px rgba(10,20,60,.12)}
.panier-btn{border:0;background:var(--nuit);color:#fff;border-radius:999px;padding:9px 14px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
.panier-btn svg{width:18px;height:18px}
.panier-btn .n{background:var(--turq);color:#032a23;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-variant-numeric:tabular-nums}
.panier-btn.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.12)}}

/* ---------- entrée ---------- */
.entree{padding-block:28px 10px}
.vitrine{position:relative;border-radius:28px;overflow:hidden;background:var(--nuit);color:#fff;min-height:330px;display:grid;isolation:isolate}
.vitrine .enseigne{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:var(--turq);color:#032a23;font:800 13px var(--f-titre);letter-spacing:.14em;padding:6px 14px;border-radius:999px;z-index:3;white-space:nowrap}
.vitrine .contenu{position:relative;z-index:1;padding:74px 24px 28px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:640px}
.vitrine h1{font-size:clamp(34px,8vw,64px);line-height:1.02;font-weight:800}
.vitrine h1 em{font-style:normal;color:var(--turq)}
.vitrine p{margin:0;color:#C8D0EE;max-width:46ch}
.vitrine .rayons-vus{display:flex;flex-wrap:wrap;gap:6px}
.vitrine .rayons-vus span{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 10px;font-size:12.5px;color:#DCE3FF}
.porte{position:absolute;top:0;bottom:0;width:50%;z-index:2;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(1px);transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.porte::after{content:"";position:absolute;top:44%;width:6px;height:70px;border-radius:6px;background:rgba(255,255,255,.55)}
.porte.g{left:0}.porte.g::after{right:14px}
.porte.d{right:0}.porte.d::after{left:14px}
.vitrine.ouverte .porte.g{transform:translateX(-101%)}
.vitrine.ouverte .porte.d{transform:translateX(101%)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:14px 20px;font-weight:700;text-decoration:none;font-size:16px}
.btn svg{width:20px;height:20px}
.btn.turq{background:var(--turq);color:#032a23}
.btn.bleu{background:var(--bleu);color:#fff}
.btn.nuit{background:var(--nuit);color:#fff}
.btn.contour{background:none;border:1.5px solid var(--trait);color:var(--texte)}
.vitrine .btn.turq{position:relative;z-index:3}

/* ---------- allée ---------- */
.allee-zone{padding-block:18px 8px}
.plan{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.plan::-webkit-scrollbar{display:none}
.plan button{flex:none;border:1.5px solid var(--trait);background:var(--carte);border-radius:999px;padding:8px 13px;font-weight:700;font-size:13.5px;color:var(--doux);display:flex;align-items:center;gap:7px}
.plan button i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.plan button[aria-current="true"]{border-color:var(--c);color:var(--texte);background:color-mix(in srgb,var(--c) 9%,#fff)}
.allee{position:relative;margin-top:12px;border-radius:26px;overflow:hidden;background:linear-gradient(#FBFCFF,#EEF1F8)}
.decor{position:absolute;inset:0;pointer-events:none;will-change:transform}
.decor .lum{position:absolute;top:0;height:10px;width:120px;border-radius:0 0 12px 12px;background:#fff;box-shadow:0 0 34px 12px rgba(255,255,240,.95)}
.decor .sol{position:absolute;left:0;bottom:0;height:46px;width:100%;background:repeating-linear-gradient(90deg,#E4DED2 0 90px,#D6CEBF 90px 180px)}
.piste{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.piste::-webkit-scrollbar{display:none}
.rayon{flex:0 0 100%;scroll-snap-align:start;padding:22px 18px 64px;display:flex;flex-direction:column;gap:16px;min-width:0}
.panneau{align-self:center;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.panneau .suspente{width:60%;height:14px;border-left:2px solid #AEB6C8;border-right:2px solid #AEB6C8}
.panneau .plaque{background:var(--c);color:#fff;border-radius:14px;padding:10px 18px;box-shadow:0 10px 22px -10px rgba(10,20,60,.5)}
.panneau .plaque small{display:block;font:700 11px var(--f-texte);letter-spacing:.16em;opacity:.8}
.panneau .plaque h2{font-size:clamp(19px,4.6vw,26px);font-weight:800}
.panneau p{margin:8px 0 0;color:var(--doux);font-size:14px}
.etagere{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
@media (min-width:720px){.etagere{grid-template-columns:repeat(4,minmax(0,1fr))}.rayon{padding:28px 32px 70px}}
.case{position:relative;padding-bottom:16px}
.case::after{content:"";position:absolute;left:-8px;right:-8px;bottom:0;height:12px;border-radius:3px;background:linear-gradient(var(--bois),#A9805A);box-shadow:0 6px 8px -4px rgba(0,0,0,.25)}
.article{position:relative;width:100%;border:0;background:var(--carte);border-radius:16px;padding:0 0 12px;text-align:left;box-shadow:0 2px 0 rgba(10,20,60,.06),0 10px 18px -12px rgba(10,20,60,.35);display:flex;flex-direction:column;gap:8px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.article:hover{transform:translateY(-4px)}
.article:active{transform:scale(.98)}
.article .boite{height:92px;border-radius:16px 16px 0 0;background:var(--c);display:grid;place-items:center;position:relative;overflow:hidden}
.article .boite::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:90%;background:rgba(255,255,255,.12);border-radius:50%}
.article .boite svg{width:42px;height:42px;color:#fff;position:relative}
.article b{display:block;padding:0 12px;font:700 15px/1.25 var(--f-titre)}
.article span.c{padding:0 12px;font-size:12.5px;color:var(--doux);line-height:1.35}
.etiquette{position:absolute;top:10px;right:10px;background:#fff;color:var(--nuit);font-weight:700;font-size:11.5px;border-radius:7px;padding:2px 8px;box-shadow:0 2px 6px rgba(0,0,0,.15);font-variant-numeric:tabular-nums}
.etiquette.g{background:var(--turq);color:#032a23}
.fleches{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;pointer-events:none}
.fleches button{pointer-events:auto;border:0;background:var(--nuit);color:#fff;border-radius:999px;padding:9px 14px;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px;box-shadow:0 6px 14px -6px rgba(10,20,60,.6)}
.fleches button svg{width:16px;height:16px}
.fleches button[disabled]{opacity:0;pointer-events:none}
.fleches .pos{font-size:13px;font-weight:700;color:var(--doux);background:rgba(255,255,255,.85);border-radius:999px;padding:5px 10px;font-variant-numeric:tabular-nums}
.astuce{font-size:13px;color:var(--doux);text-align:center;margin:10px 0 0}

/* ---------- liste ---------- */
.liste{padding-block:18px;display:flex;flex-direction:column;gap:28px}
.liste section{display:flex;flex-direction:column;gap:12px}
.liste h2{font-size:22px;display:flex;align-items:center;gap:10px}
.liste h2 i{width:12px;height:12px;border-radius:4px;background:var(--c)}
.liste .grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.liste .article{flex-direction:row;align-items:center;padding:10px;gap:12px}
.liste .article .boite{width:56px;height:56px;flex:none;border-radius:12px}
.liste .article .boite svg{width:28px;height:28px}
.liste .article b,.liste .article span.c{padding:0}
.liste .article .txt{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.liste .article .etiquette{position:static;align-self:flex-start;box-shadow:none;border:1px solid var(--trait)}

/* ---------- bas de page ---------- */
.groupe{margin-block:26px;background:var(--carte);border:1px solid var(--trait);border-radius:24px;padding:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.groupe h3{font-size:20px}
.groupe p{margin:4px 0 0;color:var(--doux);font-size:14.5px}
footer{padding-block:20px calc(90px + env(safe-area-inset-bottom,0px));color:var(--doux);font-size:13.5px;border-top:1px solid var(--trait)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
footer b{color:var(--texte)}

/* ---------- WhatsApp flottant ---------- */
.wa-flot{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:24;background:#25D366;color:#063a1c;border-radius:999px;padding:12px 16px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 10px 24px -8px rgba(7,94,84,.6)}
.wa-flot svg{width:22px;height:22px}

/* ---------- tiroirs ---------- */
.voile{position:fixed;inset:0;background:rgba(5,10,30,.5);z-index:40;opacity:0;pointer-events:none;transition:opacity .3s}
.voile.on{opacity:1;pointer-events:auto}
.tiroir{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--carte);border-radius:26px 26px 0 0;max-height:88%;overflow:auto;overscroll-behavior:contain;transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.8,.2,1);
  padding:12px max(18px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));box-shadow:0 -14px 40px rgba(10,20,60,.22)}
.tiroir.on{transform:none}
.tiroir .in{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.poignee{width:44px;height:5px;border-radius:9px;background:var(--trait);margin:0 auto 4px}
.fermer{position:absolute;top:12px;right:max(14px,env(safe-area-inset-right,0px));border:0;background:var(--metal);width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.fermer svg{width:18px;height:18px}
.fiche-tete{display:flex;gap:14px;align-items:center;padding-right:40px}
.fiche-tete .boite{width:74px;height:74px;border-radius:18px;background:var(--c);display:grid;place-items:center;flex:none}
.fiche-tete .boite svg{width:38px;height:38px;color:#fff}
.fiche-tete small{color:var(--doux);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.fiche-tete h3{font-size:23px;line-height:1.15}
.prix{font:800 20px var(--f-titre);color:var(--bleu);font-variant-numeric:tabular-nums}
.fiche p.desc{margin:0;color:#2B3560}
.reals h4{margin:0 0 8px;font-size:14px;color:var(--doux);font-weight:700}
.reals .rangee{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.reals .cadre{aspect-ratio:9/16;max-width:100%;border-radius:12px;border:1.5px dashed var(--trait);background:var(--fond);display:grid;place-items:center;text-align:center;font-size:11.5px;color:#9AA2BD;padding:6px;overflow:hidden}
.reals .cadre img,.reals .cadre video{width:100%;height:100%;object-fit:cover;border-radius:10px}
.actions{display:flex;flex-direction:column;gap:10px}
.note{margin:0;font-size:12.5px;color:var(--doux)}
.lignes{list-style:none;margin:0;padding:0}
.lignes li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--trait)}
.lignes .boite{width:44px;height:44px;border-radius:12px;background:var(--c);display:grid;place-items:center}
.lignes .boite svg{width:22px;height:22px;color:#fff}
.lignes b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lignes small{color:var(--doux)}
.lignes .retirer{border:0;background:var(--metal);border-radius:10px;padding:7px 10px;font-size:13px;font-weight:700}
.vide{color:var(--doux);text-align:center;padding:26px 6px}
label.champ{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
label.champ textarea,label.champ input{font:15px var(--f-texte);border:1.5px solid var(--trait);border-radius:12px;padding:10px 12px;background:var(--fond);color:var(--texte);resize:vertical}
.msg{margin:0;background:var(--fond);border:1px solid var(--trait);border-radius:14px;padding:12px;font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;max-height:220px;overflow:auto}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:10px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* photos réelles */
.article .boite.photo{background:var(--nuit)}
.article .boite.photo::before{display:none}
.article .boite.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.article .boite{height:150px}
@media (min-width:720px){.article .boite{height:190px}}
.fiche-tete .boite.photo{overflow:hidden;background:var(--nuit)}
.fiche-tete .boite.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.lignes .boite,.liste .article .boite{overflow:hidden}
.liste .article .boite.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.reals .cadre{border:0;padding:0;cursor:zoom-in}
.reals .cadre.vide-c{border:1.5px dashed var(--trait);padding:6px;cursor:default}
.mosaique{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px;opacity:.28;transform:rotate(-6deg) scale(1.25);transform-origin:70% 50%}
.mosaique img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.vitrine .contenu{background:linear-gradient(90deg,rgba(10,20,60,.92) 0%,rgba(10,20,60,.75) 60%,rgba(10,20,60,0) 100%)}
@media (min-width:720px){.mosaique{left:45%;opacity:.9;transform:rotate(-6deg);grid-template-columns:repeat(3,1fr)}.vitrine{min-height:420px}.vitrine .contenu{background:none}}
.zoom{position:fixed;inset:0;z-index:60;background:rgba(5,10,30,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
.zoom video{width:min(100%,420px)}
.zoom img,.zoom video{max-width:100%;max-height:82%;border-radius:14px;object-fit:contain;background:#000}
.zoom span{color:#C8D0EE;font-size:13px}
.reals .cadre.video{position:relative;cursor:pointer}
.reals .cadre .lecture{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:rgba(10,20,60,.75);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.reals .cadre .lecture svg{width:24px;height:24px;margin-left:3px}

/* ---------- version : rayons empilés + étagères qui glissent ---------- */
.plan{position:sticky;top:calc(env(safe-area-inset-top,0px) + 57px);z-index:20;background:var(--fond);padding-block:8px;margin-inline:-4px;padding-inline:4px}
.allee{background:none;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:22px;margin-top:6px}
.astuce{margin:4px 0 0;text-align:left}
.rayon{flex:none;padding:22px 0 18px;border-radius:26px;background:linear-gradient(#FBFCFF,#EEF1F8);gap:14px;scroll-margin-top:130px;overflow:hidden}
.rayon .panneau{padding:0 16px}
.glisse{position:relative}
.etagere{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;padding:6px 18px 4px;scrollbar-width:none;overscroll-behavior-x:contain;grid-template-columns:none}
.etagere::-webkit-scrollbar{display:none}
.etagere .case{flex:0 0 46%;scroll-snap-align:start}
@media (min-width:720px){.etagere .case{flex-basis:calc(25% - 11px)}.rayon{padding:28px 0 22px}.etagere{padding-inline:28px;scroll-padding-inline:28px}.rayon .panneau{padding:0 28px}}
.etagere .case::after{left:-7px;right:-7px}
.nav{position:absolute;top:40%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:var(--nuit);color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(10,20,60,.6);transition:opacity .2s}
.nav svg{width:18px;height:18px}
.nav.g{left:6px}.nav.d{right:6px}
.nav[disabled]{opacity:0;pointer-events:none}
@media (hover:none){.nav{display:none}}
.points{display:flex;justify-content:center;gap:6px}
.points i{width:7px;height:7px;border-radius:9px;background:#C9D0E0;transition:width .25s,background .25s}
.points i.on{width:20px;background:var(--c)}