/* =========================================================
   PANNEAU « PLUS » — toutes les pages de l'app : recherche, accès rapides, sections
   (le panneau monte depuis la barre, fond aurore, entrées en cascade, se ferme en glissant)
   ========================================================= */
.px{position:fixed;inset:0;z-index:85;display:none}
.px.vu{display:block}
.px-voile{position:absolute;inset:0;background:#05050acc;opacity:0;transition:opacity .35s}
.px.on .px-voile{opacity:1}
.px-panneau{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;height:min(86vh,760px);display:flex;flex-direction:column;
  border-radius:28px 28px 0 0;overflow:hidden;isolation:isolate;transform:translate3d(0,104%,0);transition:transform .55s cubic-bezier(.2,1.15,.3,1);
  box-shadow:0 -20px 60px #000c,0 0 0 1px #f5b40040;padding-bottom:var(--safe-b,0px)}
.px.on .px-panneau{transform:none}
.px-panneau.tire{transition:none}
/* le fond : l'aurore du header, plus sombre */
.px-fond{position:absolute;inset:0;z-index:-1;background:#0c0b11}
.px-fond i{position:absolute;inset:0}
.px-aurore{background:radial-gradient(60% 40% at 12% 0%,#f5b40038,transparent 70%),radial-gradient(50% 35% at 92% 8%,#2aabee30,transparent 70%),radial-gradient(60% 40% at 50% 100%,#9b5cff22,transparent 70%);background-size:150% 150%;animation:pxAurore 12s ease-in-out infinite alternate}
@keyframes pxAurore{to{background-position:100% 60%,0% 40%,40% 0%}}
.px-rayons{background:repeating-linear-gradient(100deg,transparent 0 50px,#ffd65a0a 56px 64px,transparent 70px 130px);background-size:260px 100%;animation:pxRayons 10s linear infinite;mix-blend-mode:screen}
@keyframes pxRayons{to{background-position:260px 0}}
.px-fond:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#ffd65a,#fff6d0,#ffd65a,transparent)}
.px-poignee{flex:none;width:44px;height:5px;margin:10px auto 2px;border-radius:9px;background:#ffffff38}
.px-tete{flex:none;display:flex;align-items:center;gap:12px;padding:8px 18px 12px;touch-action:none}
.px-tete small{display:block;font:800 11px Manrope,system-ui,sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:#62d0ff}
.px-tete h2{margin:2px 0 0;font:400 23px "Russo One",system-ui,sans-serif;background:linear-gradient(110deg,#b07a00,#ffd65a 30%,#fff8dc 45%,#ffd65a 60%,#b07a00);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pxBrille 4s linear infinite}
@keyframes pxBrille{from{background-position:120% 0}to{background-position:-130% 0}}
.px-x{margin-left:auto;width:42px;height:42px;border-radius:14px;border:1px solid #ffffff22;background:#ffffff0d;color:#fff;font-size:17px}
.px-cherche{flex:none;display:flex;align-items:center;gap:10px;margin:0 16px 12px;padding:0 14px;height:46px;border-radius:15px;background:#ffffff0c;border:1px solid #ffffff1c}
.px-cherche:focus-within{border-color:#ffd65a88;box-shadow:0 0 0 3px #f5b4001c}
.px-cherche svg{width:19px;height:19px;flex:none;stroke:#bfb69c;fill:none;stroke-width:2;stroke-linecap:round}
.px-cherche input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:#fff;font:600 15px Manrope,system-ui,sans-serif}
.px-cherche input::placeholder{color:#8c887e}
.px-corps{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 26px;-webkit-overflow-scrolling:touch}
.px-sec{margin:16px 0 9px;font:800 11px Manrope,system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#bfb69c;display:flex;align-items:center;gap:10px}
.px-sec:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#ffffff22,transparent)}
.px-sec:first-child{margin-top:4px}
/* accès rapides : tuiles, la page vedette prend toute la largeur */
.px-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.px-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:104px;padding:14px;border-radius:20px;text-align:left;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,#1c1724,#0e0c13);border:1px solid #ffffff16;box-shadow:0 10px 26px #0008,inset 0 1px 0 #ffffff12}
.px-t:active{transform:scale(.97)}
.px-t b{font:400 16px/1.15 "Russo One",system-ui,sans-serif}
.px-t small{font:600 12px/1.3 Manrope,system-ui,sans-serif;color:#bfb69c}
.px-t .px-ic{width:34px;height:34px}
.px-t.vedette{grid-column:1/-1;min-height:118px;flex-direction:row;align-items:center;gap:14px;border-color:#ffd65a77;background:radial-gradient(120% 140% at 0% 0%,#f5b40033,transparent 60%),linear-gradient(135deg,#1f1708,#0e0c13)}
.px-t.vedette .px-ic{width:52px;height:52px;flex:none;filter:drop-shadow(0 0 10px #f5b40088)}
.px-t.vedette b{font-size:20px}
.px-t.vedette:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,#fff3 50%,transparent 62%);background-size:300% 100%;animation:pxReflet 3.6s ease-in-out infinite;pointer-events:none}
@keyframes pxReflet{0%,40%{background-position:130% 0}85%,100%{background-position:-130% 0}}
.px-badge{position:absolute;top:10px;right:10px;padding:3px 8px;border-radius:99px;font:800 10px Manrope,system-ui,sans-serif;letter-spacing:1px;background:linear-gradient(135deg,#fff1b8,#ffd65a 30%,#f5b400 60%,#b07a00);color:#1a1200;box-shadow:0 0 14px #f5b40066}
.px-t .px-n{position:absolute;top:10px;right:10px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font:800 11px Manrope,sans-serif;background:#2aabee;color:#fff}
/* sections : lignes */
.px-l{display:flex;align-items:center;gap:13px;width:100%;padding:12px 12px;border-radius:16px;text-align:left;color:#fff;background:#ffffff07;border:1px solid #ffffff0e;margin-bottom:7px}
.px-l:active{background:#f5b40014}
.px-l .px-ic{width:26px;height:26px;flex:none}
.px-l span{flex:1;min-width:0}
.px-l b{display:block;font:700 14.5px Manrope,system-ui,sans-serif}
.px-l small{display:block;font:600 12px Manrope,system-ui,sans-serif;color:#9c968a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-l em{font-style:normal;color:#ffd65a;font-size:20px;line-height:1}
.px-ic{stroke:url(#nf-or);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.px-ic .ac{fill:url(#nf-or)}
.px-vide{padding:30px 10px;text-align:center;color:#9c968a;font:600 14px Manrope,system-ui,sans-serif}
.px-pied{margin-top:20px;text-align:center;font:700 11px Manrope,system-ui,sans-serif;letter-spacing:1.5px;color:#ffd65a55}
/* entrée en cascade */
.px.on .px-anim{animation:pxEntre .5s cubic-bezier(.2,1.25,.4,1) both;animation-delay:calc(var(--i) * 32ms + 140ms)}
@keyframes pxEntre{from{opacity:0;transform:translateY(18px) scale(.96)}}
/* le bouton « Plus » de la barre : les gemmes tournent quand le panneau est ouvert */
.nav .nv-plus svg.nv-ic .ac{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.2,1.5,.4,1)}
.nav .nv-plus.ouvert svg.nv-ic .ac{transform:rotate(45deg) scale(.82)}
/* transition de page : un voile doré balaie l'écran */
.px-balai{position:fixed;inset:0;z-index:84;pointer-events:none;background:linear-gradient(100deg,transparent 30%,#ffd65a26 45%,#fff6d040 50%,#ffd65a26 55%,transparent 70%);background-size:300% 100%;animation:pxBalai .5s ease-out forwards}
@keyframes pxBalai{from{background-position:120% 0}to{background-position:-120% 0}}
body.lite .px-aurore,body.lite .px-rayons,body.lite .px-t.vedette:after{animation:none}
@media (prefers-reduced-motion:reduce){.px-panneau{transition:none}.px *{animation:none!important}}
/* --- fond animé du panneau (plus-fond.js : trésor, salle du trône, royaume des mini apps) --- */
.px-fond .px-cv{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.px-fond:has(.px-cv) .px-aurore,.px-fond:has(.px-cv) .px-rayons{display:none}
.px-fond:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#0c0b1155,#0c0b1199 30%,#0c0b11c0)}
.px-choix{position:absolute;left:50%;bottom:calc(14px + var(--safe-b,0px));translate:-50% 0;z-index:5;display:flex;gap:6px;padding:6px;border-radius:99px;background:#0b0a0fe6;border:1px solid #f5b40055;box-shadow:0 10px 30px #000a}
.px-choix button{padding:9px 12px;border-radius:99px;font:800 12.5px Manrope,system-ui,sans-serif;color:#e9e1c8;background:transparent;border:0;white-space:nowrap}
.px-choix button.on{background:linear-gradient(135deg,#fff1b8,#ffd65a 25%,#f5b400 55%,#b07a00);color:#1a1200}
/* le décor animé se voit à travers les tuiles et les lignes (verre teinté, sans flou : trop coûteux sur téléphone) */
.px-fond:before{background:linear-gradient(#0c0b1133,#0c0b1166 30%,#0c0b1199)}
.px-t{background:linear-gradient(160deg,#1c1724a6,#0e0c13bf);border-color:#ffffff1f}
.px-t.vedette{background:radial-gradient(120% 140% at 0% 0%,#f5b40033,transparent 60%),linear-gradient(135deg,#1f1708c4,#0e0c13c4)}
.px-l{background:#0c0b1180;border-color:#ffffff14}
.px-cherche{background:#0c0b1199}