/* ===== MIZERIKORD 3D — couche premium ===== */
:root{--mz-or:#f77f00;--mz-gold:#ffc061;--mz-vert:#009e60;--mz-deep:#06231a}
body{background:radial-gradient(1200px 600px at 100% -10%,#f77f0014,transparent 60%),radial-gradient(900px 500px at -10% 20%,#009e6014,transparent 60%),var(--bg)}
[data-theme=dark] body{background:radial-gradient(1200px 600px at 100% -10%,#f77f001f,transparent 60%),radial-gradient(900px 500px at -10% 20%,#009e601f,transparent 60%),var(--bg)}

/* --- Pièce 3D (pile ou face) --- */
.mzcoin{display:inline-block;perspective:900px;flex:none}
.mzcoin-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;animation:mzflip 5s cubic-bezier(.45,.05,.55,.95) infinite}
.mzcoin img{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.mzcoin img.b{transform:rotateY(180deg)}
@keyframes mzflip{0%,18%{transform:rotateY(0)}50%,68%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.mzcoin--sm{width:40px;height:40px}
.mzcoin--sm .mzcoin-in{animation-duration:7s}
.mzcoin--sm img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.mzcoin--xl{width:clamp(190px,26vw,300px);height:clamp(190px,26vw,300px)}
@media (prefers-reduced-motion:reduce){.mzcoin-in{animation:none}}

/* --- En-tête verre + relief --- */
.hdr{backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 #ffffff80 inset,0 10px 30px -18px rgba(0,0,0,.45)}
.hdr .logo b{background:linear-gradient(180deg,#ff9a2e,#c25a00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;letter-spacing:.02em}
[data-theme=dark] .hdr .logo b{background:linear-gradient(180deg,#ffd29a,#f77f00);-webkit-background-clip:text;background-clip:text}

/* --- Vidéo d'accueil --- */
.mzv{position:relative;margin:16px 0 0;border-radius:28px;overflow:hidden;aspect-ratio:16/9;max-height:620px;width:100%;background:#06231a url(/hero-poster.jpg) center/cover;box-shadow:0 2px 0 #ffffff26 inset,0 40px 80px -30px rgba(0,0,0,.6),0 18px 30px -18px rgba(6,35,26,.6);isolation:isolate;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s ease;border-bottom:5px solid var(--mz-or)}
@media (max-width:760px){.mzv{aspect-ratio:4/3;border-radius:22px}}
.mzv-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.mzv-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(3,20,14,.78)),linear-gradient(90deg,rgba(3,20,14,.35),transparent 50%)}
.mzv-cap{position:absolute;left:clamp(14px,3vw,34px);bottom:clamp(30px,4vw,48px);right:clamp(150px,30vw,360px);color:#fff;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mzv-k{font-size:11px;font-weight:800;letter-spacing:.14em;padding:5px 11px;border-radius:999px;background:linear-gradient(180deg,#ff9a2e,#e06f00);box-shadow:0 4px 0 #a34f00,0 10px 18px -6px rgba(0,0,0,.5)}
.mzv-t{font-size:clamp(16px,2.6vw,30px);line-height:1.15;font-weight:850;text-shadow:0 2px 0 rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.6);transition:opacity .45s,transform .45s}
.mzv-t.out{opacity:0;transform:translateY(8px)}
.mzv-dots{position:absolute;left:clamp(14px,3vw,34px);bottom:14px;display:flex;gap:6px}
.mzv-dots i{width:22px;height:4px;border-radius:4px;background:#ffffff59;transition:background .3s,width .3s}
.mzv-dots i.on{background:var(--mz-or);width:36px}
.mzv-logo{position:absolute;right:clamp(14px,3.5vw,44px);top:50%;width:clamp(110px,20vw,230px);height:clamp(110px,20vw,230px);margin-top:calc(clamp(110px,20vw,230px) / -2)}
@media (max-width:760px){.mzv-logo{top:14px;margin-top:0;width:96px;height:96px}.mzv-cap{right:14px;bottom:30px}}

/* --- Bloc texte héros sous la vidéo, en carte 3D --- */
.hero{margin-top:14px;border-top:4px solid var(--mz-or);box-shadow:0 2px 0 #ffffff1f inset,0 30px 60px -28px rgba(0,0,0,.6),0 10px 0 -4px #0b2a1f}
.hero h1{text-shadow:0 2px 0 #062018,0 4px 0 #04150f,0 14px 30px rgba(0,0,0,.45)}
.stage .pk{transform-style:preserve-3d;box-shadow:0 2px 0 #fff inset,0 34px 60px -18px #000a,0 12px 0 -6px #e9e4d8}

/* --- Boutons en relief --- */
.btn{box-shadow:0 4px 0 rgba(0,0,0,.25),0 12px 22px -12px rgba(0,0,0,.5);transform:translateY(0)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.25),0 18px 28px -14px rgba(0,0,0,.55)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25),0 4px 10px -6px rgba(0,0,0,.5)}
.btn.or{background:linear-gradient(180deg,#ff9a2e,#ef7600);box-shadow:0 4px 0 #a84f00,0 14px 24px -12px #f77f00}
.btn.or:hover{box-shadow:0 6px 0 #a84f00,0 20px 30px -12px #f77f00}

/* --- Cartes produits & catégories 3D (inclinaison au toucher/souris) --- */
.grid,.cats,.hs{perspective:1200px}
.card,.cat{transform-style:preserve-3d;will-change:transform;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;box-shadow:0 1px 0 #ffffff inset,0 2px 4px rgba(18,24,22,.06),0 18px 34px -18px rgba(18,24,22,.35),0 6px 0 -3px var(--line)}
.card.mz-t,.cat.mz-t{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0) scale(1.02);box-shadow:0 1px 0 #fff inset,0 30px 50px -22px rgba(18,24,22,.5),0 8px 0 -3px var(--line)}
.card .ph{position:relative;background:radial-gradient(70% 70% at 50% 40%,#fff,#f1ede3)}
[data-theme=dark] .card .ph{background:radial-gradient(70% 70% at 50% 40%,#22302d,#141b19)}
.card .ph img{transition:transform .45s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 14px 14px rgba(0,0,0,.22))}
.card.mz-t .ph img{transform:translateZ(40px) scale(1.07)}
.card .ph:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),#ffffff59,transparent 40%);opacity:0;transition:opacity .3s}
.card.mz-t .ph:after{opacity:1}
.cat img{transition:transform .45s;filter:drop-shadow(0 10px 12px rgba(0,0,0,.25))}
.cat.mz-t img{transform:translateZ(30px) scale(1.08) rotate(-4deg)}

/* --- Titres de section en relief --- */
.sh h2{position:relative;padding-left:14px;text-shadow:0 1px 0 #fff,0 2px 0 #00000014}
[data-theme=dark] .sh h2{text-shadow:0 2px 0 #000}
.sh h2:before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:5px;border-radius:4px;background:linear-gradient(180deg,var(--mz-or),var(--mz-vert));box-shadow:0 2px 6px #f77f0066}

/* --- Bandeau confiance 3D --- */
.mz-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0 6px}
@media(min-width:800px){.mz-trust{grid-template-columns:repeat(4,1fr)}}
.mz-trust div{background:var(--card);border-radius:18px;padding:14px;display:flex;gap:12px;align-items:center;box-shadow:0 1px 0 #fff inset,0 16px 30px -18px rgba(18,24,22,.4),0 6px 0 -3px var(--line)}
.mz-trust b{display:block;font-size:14px}.mz-trust small{color:var(--mut);font-size:12px}
.mz-trust span{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:linear-gradient(145deg,#ffb15c,#f77f00);box-shadow:0 4px 0 #a84f00,0 10px 16px -8px #f77f00,inset 0 1px 0 #ffffff80}
.mz-trust div:nth-child(2n) span{background:linear-gradient(145deg,#33d08a,#009e60);box-shadow:0 4px 0 #006b40,0 10px 16px -8px #009e60,inset 0 1px 0 #ffffff80}

/* --- Pied de page --- */
.foot{background:radial-gradient(800px 400px at 50% 110%,#0f3a2a,#0b1210 70%);border-top:4px solid var(--mz-or)}
.mzfoot{display:flex;flex-direction:column;align-items:center;gap:16px;margin:30px 0 4px;text-align:center}
.mzfoot-c{color:#fff;font-weight:800;font-size:18px;text-decoration:none;letter-spacing:.02em}
.foot .flag{box-shadow:0 3px 0 #00000055}

/* --- Boutons flottants 3D --- */
.fab{box-shadow:0 5px 0 rgba(0,0,0,.28),0 16px 28px -10px rgba(0,0,0,.55)!important}
.fab:active{transform:translateY(3px)}

/* Révélation au défilement */
.mz-rv{opacity:0;transform:perspective(900px) translateY(26px) rotateX(8deg);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.mz-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mz-rv{opacity:1;transform:none}.card.mz-t,.cat.mz-t{transform:none}}
.hero h1 em{text-shadow:none;filter:drop-shadow(0 3px 0 #04150f) drop-shadow(0 10px 18px rgba(0,0,0,.4))}