/* ============================================================
   ZAAP MOTION — refonte design du Zaap du Savoir
   Ajouts uniquement : ne remplace aucune règle de données/logique.
   1 écran d'entrée · 2 palette Zaap + logo · 3 ciel selon l'heure
   4 couleur par page · 5 menu & transitions · 6 accueil · 7 donjons
   8 leveling · 9 recherche · 10 vitrine Dofus · 11 carte joueur · 12 sons
   ============================================================ */

/* ---------- 0. variables animables (couleur par page) ---------- */
@property --a1{syntax:'<color>';inherits:true;initial-value:#7ef0ff}
@property --a2{syntax:'<color>';inherits:true;initial-value:#22c3ee}
@property --a3{syntax:'<color>';inherits:true;initial-value:#1d8fe0}
:root{--a1:#7ef0ff;--a2:#22c3ee;--a3:#1d8fe0;--zm-stone:#9fb2c2;--zm-stone-d:#4a5b6a;
  transition:--a1 .8s ease,--a2 .8s ease,--a3 .8s ease}

/* ---------- 1. écran d'entrée ---------- */
html.zm-locked,html.zm-locked body{overflow:hidden!important}
html.zm-pre{background:#060a16}
html.zm-pre body{visibility:hidden}
.zm-gate{position:fixed;inset:0;z-index:100000;background:#060a16;overflow:hidden;isolation:isolate;color:#fff}
.zm-gate .bgb{position:absolute;inset:-8%;background:url(../img/zaap-front.webp) 50% 58%/cover no-repeat;filter:blur(28px) brightness(.55) saturate(130%)}
.zm-gate .scene{position:absolute;transform-origin:50% 58%;will-change:transform}
.zm-gate .scene img{width:100%;height:100%;display:block;max-width:none}
@media (max-aspect-ratio:11/10){.zm-gate .scene img{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 55%,#000 62%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 55%,#000 62%,transparent 100%)}}
.zm-gate .swirl{position:absolute;border-radius:50%;background-repeat:no-repeat;-webkit-mask:radial-gradient(circle,#000 58%,transparent 72%);mask:radial-gradient(circle,#000 58%,transparent 72%);animation:zmSpin 26s linear infinite}
@keyframes zmSpin{to{transform:rotate(-360deg)}}
.zm-gate .glowc{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(220,255,255,.55),rgba(80,220,255,.25) 35%,transparent 65%);mix-blend-mode:screen;animation:zmPulse 3.4s ease-in-out infinite;pointer-events:none}
@keyframes zmPulse{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.zm-gate canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.zm-gate .gtint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;transition:background 1s}
html.t-matin .zm-gate .gtint{background:linear-gradient(180deg,rgba(255,190,140,.5),rgba(255,230,200,.12) 50%,transparent)}
html.t-jour .zm-gate .gtint{background:linear-gradient(180deg,rgba(150,220,255,.55),rgba(255,255,255,.12) 50%,transparent)}
html.t-nuit .zm-gate .gtint{background:linear-gradient(180deg,rgba(10,15,60,.85),rgba(10,15,60,.4) 60%,rgba(0,0,20,.5));mix-blend-mode:multiply}
.zm-gate .vign{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 40%,rgba(4,6,14,.75) 100%),linear-gradient(to bottom,rgba(4,6,14,.55),transparent 28%,transparent 70%,rgba(4,6,14,.75));pointer-events:none}
.zm-gate .tunnel{position:absolute;left:50%;top:50%;width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;border-radius:50%;background:radial-gradient(circle,#0b3a52 0,#08162e 10%,#05070f 28%);opacity:0;pointer-events:none}
.zm-gate .top{position:absolute;left:0;right:0;top:6vh;text-align:center;z-index:3;padding:0 16px}
.zm-gate h1{font-family:Cinzel,serif;font-weight:900;font-size:clamp(32px,6.4vw,78px);line-height:1;margin:0 0 10px;letter-spacing:.02em;filter:drop-shadow(0 4px 24px rgba(0,0,0,.85));color:#fff}
.zm-gate h1 .c{display:inline-block}
.zm-gate h1 .c span{background:linear-gradient(90deg,#ffffff,#bff6ff 40%,#7ee7ff 70%,#5cc8ff);background-size:900% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.zm-gate .top p{margin:0;font-family:Inter,system-ui,sans-serif;font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:#d7ecff;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.zm-gate .bot{position:absolute;left:0;right:0;bottom:6vh;text-align:center;z-index:3}
.zm-enter{position:relative;font-family:Cinzel,serif;font-weight:700;font-size:18px;letter-spacing:.3em;text-transform:uppercase;color:#fff;cursor:pointer;padding:16px 46px 16px 52px;border-radius:999px;border:1px solid rgba(126,231,255,.7);background:rgba(6,14,30,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 30px rgba(34,211,238,.35),inset 0 0 20px rgba(29,143,224,.25);transition:box-shadow .4s,border-color .4s,transform .3s}
.zm-enter::before,.zm-enter::after{content:"";position:absolute;inset:-1px;border-radius:999px;border:1px solid rgba(126,231,255,.6);animation:zmHalo 2.6s ease-out infinite;pointer-events:none}
.zm-enter::after{animation-delay:1.3s}
@keyframes zmHalo{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.35,1.8);opacity:0}}
.zm-enter:hover,.zm-enter:focus-visible{border-color:#bff6ff;box-shadow:0 0 50px rgba(34,211,238,.6),inset 0 0 30px rgba(29,143,224,.4);transform:scale(1.04);outline:none}
.zm-gate .hint{display:block;margin-top:14px;font-family:Inter,system-ui,sans-serif;font-size:12px;color:#c3d4ea;letter-spacing:.1em;text-shadow:0 2px 8px #000}
@media (hover:none){.zm-gate .hint{display:none}}

/* ---------- 2. palette Zaap (mode sombre uniquement) ---------- */
html:not(.light-theme){
  --bg-dark:#040a12;--bg-card:#0a1622;--bg-card-hover:#0f2030;--bg-surface:#07111b;--bg-nav:#06101a;
  --green-primary:#1fa6e6;--green-dark:#1784bd;--green-glow:rgba(34,195,238,.14);--green-glow-strong:rgba(34,195,238,.32);--green-muted:#123a55;
  --text-primary:#e3eef6;--text-secondary:#9db1c2;--text-muted:#5f7586;
  --border-color:#142838;--border-green:rgba(34,195,238,.24);
  --zaap-blue:#1d8fe0;--zaap-cyan:#22d3ee;--zaap-violet:#2f6fd6;
  --zaap-violet-glow:rgba(47,111,214,.18);
  --zaap-gradient:linear-gradient(135deg,#7ef0ff 0%,#22c3ee 45%,#1d8fe0 100%);
  --zaap-gradient-h:linear-gradient(90deg,#7ef0ff 0%,#22c3ee 45%,#1d8fe0 100%);
  --zaap-text-gradient:linear-gradient(90deg,#c9f7ff 0%,#5fdcf5 45%,#3aa8ec 100%);
  --shadow-green:0 0 20px rgba(34,195,238,.12),0 0 42px rgba(29,143,224,.07);
  --shadow-zaap-hover:0 8px 28px rgba(0,0,0,.5),0 0 22px rgba(34,211,238,.16),0 0 46px rgba(29,143,224,.12);
}
/* logo : le Zaap de face */
.logo-icon{background-image:radial-gradient(circle at 50% 50%,rgba(34,211,238,.06),rgba(5,7,15,0) 62%),url('zaap-logo.webp')!important;background-size:100% 100%,cover!important;background-position:center,50% 50%!important;border-color:rgba(126,231,255,.55)!important;box-shadow:0 0 0 3px rgba(34,211,238,.08),0 0 16px rgba(34,211,238,.35),0 0 34px rgba(29,143,224,.2),inset 0 0 10px rgba(5,7,15,.35)!important}
.logo-title{background:linear-gradient(90deg,#e8fbff,#7ee7ff 55%,var(--zm-stone));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- 3. ciel selon l'heure ---------- */
.zm-sky{position:fixed;inset:0;z-index:0;pointer-events:none;transition:background 1.5s ease}
html.t-matin .zm-sky{background:radial-gradient(120% 70% at 20% -10%,rgba(255,170,120,.13),transparent 60%),radial-gradient(90% 60% at 90% 0,color-mix(in srgb,var(--a2) 10%,transparent),transparent 60%)}
html.t-jour .zm-sky{background:radial-gradient(120% 70% at 50% -15%,rgba(120,210,255,.14),transparent 60%),radial-gradient(80% 60% at 100% 10%,color-mix(in srgb,var(--a2) 10%,transparent),transparent 60%)}
html.t-soir .zm-sky{background:radial-gradient(120% 70% at 80% -10%,rgba(255,120,90,.13),transparent 55%),radial-gradient(90% 60% at 10% 0,rgba(140,90,200,.08),transparent 60%)}
html.t-nuit .zm-sky{background:radial-gradient(120% 70% at 50% -20%,rgba(30,50,140,.22),transparent 60%),radial-gradient(70% 50% at 0 100%,color-mix(in srgb,var(--a3) 8%,transparent),transparent 60%)}
html.light-theme .zm-sky{opacity:.5}
.main,.footer,footer{position:relative;z-index:1}

/* ---------- 4. couleur par page ---------- */
.page-title{background:linear-gradient(90deg,color-mix(in srgb,var(--a1) 55%,#fff),var(--a1) 40%,var(--a2) 75%,var(--a3))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--a2) 40%,transparent))!important}
.btn-primary{background:linear-gradient(135deg,var(--a2),var(--a3))!important;border-color:transparent!important;box-shadow:0 6px 22px -8px color-mix(in srgb,var(--a2) 70%,transparent)}
.btn-primary:hover{box-shadow:0 10px 30px -8px color-mix(in srgb,var(--a2) 90%,transparent)}
.section-header h2{position:relative;padding-left:14px}
.section-header h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--a1),var(--a3));box-shadow:0 0 12px var(--a2)}
.dungeon-level,.dq-level,.lvl-ch-lvls{color:var(--a1)!important}
.filter-btn.active{background:color-mix(in srgb,var(--a2) 18%,transparent)!important;border-color:var(--a2)!important;color:#fff!important}

/* ---------- 5. menu, transitions, header ---------- */
.header{position:sticky;top:0;z-index:50;transition:box-shadow .35s ease,background .35s ease}
html.zm-scrolled .header{box-shadow:0 10px 30px -12px rgba(0,0,0,.7),0 1px 0 color-mix(in srgb,var(--a2) 25%,transparent)}
@media (max-width:1024px){.header{position:relative}}
.nav-list{position:relative}
.zm-ind{position:absolute;bottom:0;height:2px;border-radius:2px;left:0;width:0;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));box-shadow:0 0 12px var(--a2);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none;opacity:0}
html.zm-nav .nav-item>a::after{display:none}
@media (max-width:1024px){.zm-ind{display:none}html.zm-nav .nav-item>a::after{display:block}}
.page.active{animation:zmPageIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes zmPageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.zm-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:9000;background:rgba(6,16,26,.92);border:1px solid color-mix(in srgb,var(--a2) 60%,transparent);color:#e8fbff;padding:10px 18px;border-radius:999px;font-size:14px;box-shadow:0 10px 30px -10px rgba(0,0,0,.7),0 0 20px color-mix(in srgb,var(--a2) 30%,transparent);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.zm-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 6. accueil ---------- */
.hero h1 .zm-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.hero h1 .zm-w>span{display:inline-block}
.zm-runes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.zm-rune{position:absolute;font-family:Cinzel,serif;color:#bff6ff;text-shadow:0 0 10px #22d3ee,0 0 22px #22c3ee;font-size:16px;opacity:0}
.almanax-widget{position:relative;isolation:isolate;overflow:hidden}
.almanax-widget::before{content:"";position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 70%,var(--a1) 80%,var(--a2) 88%,transparent 96%);animation:zmSpin2 6s linear infinite}
.almanax-widget::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:inherit;background:var(--bg-card)}
@keyframes zmSpin2{to{transform:rotate(360deg)}}
.almanax-widget img{animation:zmFloat 4s ease-in-out infinite}
@keyframes zmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.zm-cd{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--text-secondary)}
.zm-cd b{font-variant-numeric:tabular-nums;color:var(--a1);font-size:15px;letter-spacing:.04em}
.dofus-card,.dq-card{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;will-change:transform}
.dofus-card:hover,.dq-card:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.8),0 0 26px -4px color-mix(in srgb,var(--a2) 55%,transparent)!important;border-color:color-mix(in srgb,var(--a2) 60%,transparent)!important}
.dofus-card .dofus-icon,.dq-sprite img{transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s}
.dofus-card:hover .dofus-icon,.dq-card:hover .dq-sprite img{transform:translateZ(30px) scale(1.12)}
.zm-burst{position:fixed;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:9500}

/* ---------- 7. donjons ---------- */
.dungeon-card{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.dungeon-card::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-15deg) translateX(-120%);transition:transform .7s ease;pointer-events:none}
.dungeon-card:hover::after{transform:skewX(-15deg) translateX(560%)}
.dungeon-card:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--a2) 55%,transparent);box-shadow:0 0 24px -8px var(--a2)}
.dungeon-boss-sprite img{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s}
.dungeon-card:hover .dungeon-boss-sprite img{transform:scale(1.35) translateY(-6px);filter:drop-shadow(0 8px 14px rgba(0,0,0,.6)) drop-shadow(0 0 10px var(--a2))}
.dungeon-card.zm-in{animation:zmRowIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes zmRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.guide-boss-image{position:relative}
.guide-boss-image::before{content:"";position:absolute;left:50%;top:55%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--a2) 35%,transparent),transparent 65%);filter:blur(10px);z-index:0;animation:zmPulse 3.4s ease-in-out infinite;pointer-events:none}
.guide-boss-image img{position:relative;z-index:1}
.guide-boss-image img.zm-float{animation:zmFloat 4.5s ease-in-out infinite}
.guide-toc a.zm-on{color:var(--a1)!important;text-shadow:0 0 10px color-mix(in srgb,var(--a2) 60%,transparent)}
.zone-cell.zm-wave{opacity:0;transform:scale(.3)}
.zone-cell.zm-lit{opacity:1;transform:none;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1.4)}

/* ---------- 8. leveling ---------- */
.lvl-step-card{transition:opacity .35s,border-color .35s,box-shadow .35s,transform .35s}
.lvl-step-card.done{border-left:3px solid var(--a2)!important}
.lvl-step-card input[type=checkbox]{transition:transform .25s cubic-bezier(.2,.8,.2,1.6)}
.lvl-step-card input[type=checkbox]:checked{transform:scale(1.18)}
.zm-ring{display:flex;align-items:center;gap:14px;margin:4px 0 12px}
.zm-ring svg{width:74px;height:74px;transform:rotate(-90deg);flex-shrink:0}
.zm-ring circle{fill:none;stroke-width:7}
.zm-ring .bg{stroke:rgba(148,163,184,.14)}
.zm-ring .fg{stroke:url(#zmRingGrad);stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 6px var(--a2))}
.zm-ring .lbl{font-family:Cinzel,serif;font-size:20px;font-weight:700;color:var(--a1)}
.zm-ring .lbl small{display:block;font-family:Inter,sans-serif;font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}

/* ---------- 9. recherche Ctrl+K ---------- */
.search-modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.search-modal.active .search-modal-content{animation:zmPop .35s cubic-bezier(.2,.8,.2,1.2)}
@keyframes zmPop{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.search-modal-content{border:1px solid color-mix(in srgb,var(--a2) 40%,transparent)!important;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 40px -10px color-mix(in srgb,var(--a2) 50%,transparent)!important}
.search-results>*{animation:zmRowIn .3s both}
.search-results>*:nth-child(2){animation-delay:.03s}.search-results>*:nth-child(3){animation-delay:.06s}.search-results>*:nth-child(4){animation-delay:.09s}.search-results>*:nth-child(5){animation-delay:.12s}
.zm-kbd{display:inline-flex;align-items:center;gap:3px;margin-right:6px;font:600 11px Inter,sans-serif;color:var(--text-muted);border:1px solid var(--border-color);border-radius:6px;padding:2px 6px;white-space:nowrap;pointer-events:none}
@media (hover:none),(max-width:1024px){.zm-kbd{display:none}}

/* ---------- 10. vitrine des Dofus ---------- */
.dq-card.complete{box-shadow:0 0 0 1px color-mix(in srgb,var(--a2) 50%,transparent),0 0 30px -6px color-mix(in srgb,var(--a2) 70%,transparent)}
.dq-card.complete .dq-sprite img{animation:zmFloat 3.6s ease-in-out infinite;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--a1) 70%,transparent))!important}
.zm-share{display:flex;justify-content:center;margin:18px 0 6px}
.zm-share button{font:600 14px Inter,sans-serif;color:#fff;cursor:pointer;border:0;border-radius:999px;padding:12px 22px;background:linear-gradient(135deg,var(--a2),var(--a3));box-shadow:0 8px 24px -10px var(--a2)}
.zm-modal{position:fixed;inset:0;z-index:9800;background:rgba(2,6,12,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
.zm-modal.on{display:flex}
.zm-modal .box{position:relative;background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:20px;max-width:min(760px,96vw);width:100%;text-align:center;animation:zmPop .35s cubic-bezier(.2,.8,.2,1.2)}
.zm-modal .box img{width:100%;border-radius:10px;margin:12px 0;display:block}
.zm-modal .x{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--text-secondary);font-size:20px;cursor:pointer}
.zm-modal a.dl{display:inline-block;font:600 14px Inter,sans-serif;color:#fff;text-decoration:none;border-radius:999px;padding:11px 20px;background:linear-gradient(135deg,var(--a2),var(--a3))}

/* ---------- 11. carte de joueur ---------- */
.zm-pcard-wrap{display:flex;justify-content:center;margin:0 0 16px;perspective:900px}
.zm-pcard{position:relative;width:200px;aspect-ratio:5/7;border-radius:16px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0,#12324a,#06111b 70%);border:1px solid color-mix(in srgb,var(--a1) 60%,transparent);box-shadow:0 20px 40px -18px rgba(0,0,0,.9),0 0 30px -8px var(--a2);transform-style:preserve-3d;transition:transform .2s ease-out;color:#e8fbff;font-family:Inter,sans-serif}
.zm-pcard .body{position:absolute;left:50%;bottom:22%;height:62%;transform:translateX(-50%);filter:drop-shadow(0 10px 12px rgba(0,0,0,.6))}
.zm-pcard .top{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;align-items:center;font-size:11px}
.zm-pcard .top img{width:30px;height:30px;border-radius:50%;border:1px solid var(--a1);background:#0b1b29}
.zm-pcard .lv{font-family:Cinzel,serif;font-weight:700;color:var(--a1)}
.zm-pcard .bot{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(transparent,rgba(2,8,14,.95) 35%);text-align:center}
.zm-pcard .bot h4{margin:0;font-family:Cinzel,serif;font-size:15px;color:#fff}
.zm-pcard .bot small{color:var(--text-secondary);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.zm-pcard .st{display:flex;justify-content:space-around;margin-top:6px;font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.zm-pcard .st b{display:block;font-size:12px;color:#e8fbff;letter-spacing:0}
.zm-pcard .holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.35;background:linear-gradient(115deg,transparent 20%,rgba(255,0,180,.35) 35%,rgba(0,255,255,.35) 50%,rgba(255,255,0,.3) 65%,transparent 80%);background-size:250% 250%;background-position:var(--hx,50%) var(--hy,50%)}

/* ---------- 12. sons ---------- */
.zm-sound{background:none;border:1px solid var(--border-color);color:var(--text-secondary);border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;flex-shrink:0;transition:border-color .3s,box-shadow .3s}
.zm-sound[aria-pressed=true]{border-color:var(--a2);box-shadow:0 0 12px -2px var(--a2);color:#fff}

/* ---------- accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  .zm-gate{display:none!important}
  .page.active,.almanax-widget::before,.almanax-widget img,.dq-card.complete .dq-sprite img,.guide-boss-image img.zm-float,.guide-boss-image::before{animation:none!important}
  .zone-cell.zm-wave{opacity:1;transform:none}
}
html.overlay-mode .zm-sky,html.overlay-mode .zm-sound{display:none!important}

/* ---------- héros : le Zaap de face remplace l'ancien portail ---------- */
html.zm-hero .zaap-scene>*:not(.zm-hz){display:none!important}
html.zm-hero .zaap-scene{aspect-ratio:1/1;width:440px;perspective:900px}
.zm-hz{position:absolute;inset:0;transform-style:preserve-3d}
.zm-hz img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 0 30px rgba(34,211,238,.35))}
.zm-hz-swirl{position:absolute;border-radius:50%;background-image:url(zaap-hero.webp);background-repeat:no-repeat;-webkit-mask:radial-gradient(circle,#000 58%,transparent 71%);mask:radial-gradient(circle,#000 58%,transparent 71%);animation:zmSpin 30s linear infinite}
.zm-hz-core{position:absolute;left:50%;top:53.1%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(230,255,255,.6),rgba(80,220,255,.22) 40%,transparent 68%);mix-blend-mode:screen;animation:zmPulse 3.4s ease-in-out infinite;pointer-events:none}
.zm-hz-glow{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle at 50% 53%,rgba(34,195,238,.28),transparent 62%);filter:blur(18px)}
@media (prefers-reduced-motion:reduce){.zm-hz-swirl,.zm-hz-core{animation:none}}
.hero h1 .text-green .zm-w>span{background:var(--zaap-text-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- 10b. vitrine en bois : les Dofus posés sur des étagères ---------- */
.zm-cab-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 14px}
.zm-cab-head h3{margin:0;font-family:Cinzel,serif;font-size:1.25rem;color:#f3e2c7;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.zm-cab-count{display:flex;align-items:center;gap:12px;min-width:220px;flex:0 1 340px}
.zm-cab-count b{font-family:Cinzel,serif;color:var(--a1);font-size:1.1rem;white-space:nowrap}
.zm-cab-bar{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.zm-cab-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--a1),var(--a2));box-shadow:0 0 12px var(--a2);transition:width 1s cubic-bezier(.2,.8,.2,1)}
#dofus-parch-grid.zm-shelf{position:relative;row-gap:6px!important;column-gap:18px!important;padding:26px 26px 18px;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% 0,rgba(255,200,130,.10),transparent 60%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 120px),
    linear-gradient(180deg,#2a1a10,#1d120b 60%,#160d08);
  border:10px solid #5a3a22;border-image:linear-gradient(180deg,#8a5a33,#5a3a22 40%,#3e2716) 1;
  box-shadow:inset 0 0 40px rgba(0,0,0,.75),0 20px 50px -20px rgba(0,0,0,.9)}
.zm-shelf .dq-card{background:none!important;border:0!important;box-shadow:none!important;border-radius:0;padding:10px 6px 4px!important;transform:none!important;gap:6px}
.zm-shelf .dq-card:hover{transform:none!important}
.zm-shelf .dq-sprite{position:relative;width:100%;height:110px;align-items:flex-end;padding-bottom:12px}
.zm-shelf .dq-sprite::after{content:"";position:absolute;left:-40px;right:-40px;bottom:0;height:14px;z-index:0;
  background:linear-gradient(180deg,#b07a47 0,#8a5a33 30%,#6b4426 70%,#4a2e1a 100%);
  box-shadow:0 10px 14px -4px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,220,170,.45)}
.zm-shelf .dq-sprite img{position:relative;z-index:1;margin-bottom:4px;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .6s}
.zm-shelf .dq-card:hover .dq-sprite img{transform:translateY(-8px) scale(1.1)}
.zm-shelf .dq-card.complete .dq-sprite::before{content:"";position:absolute;left:50%;bottom:14px;width:80px;height:80px;transform:translateX(-50%);border-radius:50%;z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--a1) 45%,transparent),transparent 70%);filter:blur(6px);animation:zmPulse 3s ease-in-out infinite}
.zm-shelf .dq-card.zm-unknown .dq-sprite img{filter:brightness(0) opacity(.6)!important}
.zm-shelf .dq-card.zm-unknown .dq-sprite::before{content:"?";position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:2;font:900 26px Cinzel,serif;color:rgba(255,230,190,.55);text-shadow:0 0 10px rgba(0,0,0,.8)}
.zm-shelf .dq-name{color:#f3e2c7!important;font-size:.88rem!important;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.zm-shelf .dq-level{background:rgba(0,0,0,.35)!important;border-color:rgba(255,200,130,.25)!important;color:#f0c98f!important}
.zm-shelf .dq-bar{background:rgba(0,0,0,.4)!important}
@media (max-width:600px){#dofus-parch-grid.zm-shelf{padding:18px 12px 12px;border-width:7px;column-gap:8px!important}.zm-shelf .dq-sprite{height:92px}}