/* =========================================================
   BARRE DE NAV ANIMÉE — fond animé (aurore), contour lumineux qui tourne,
   icônes royales sur mesure, indicateur doré, étincelles au toucher
   3 styles : aurore (assortie au header) · néon · or liquide
   ========================================================= */
.nav{isolation:isolate;border-color:transparent!important;background:#0c0b11!important}
/* le fond, découpé à la forme de la barre */
.nav-fond{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.nav-fond > *{position:absolute}
/* contour : un dégradé conique qui tourne, recouvert au centre par l'intérieur de la barre */
.nf-anneau{left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;animation:nfTourne 7s linear infinite;
  background:conic-gradient(from 0deg,transparent 0deg,#ffd65a 30deg,#fff6d0 42deg,#ffd65a 54deg,transparent 95deg,transparent 180deg,#2aabee 215deg,#9fe0ff 228deg,#2aabee 240deg,transparent 275deg)}
@keyframes nfTourne{to{transform:rotate(360deg)}}
.nf-int{inset:1.5px;border-radius:22.5px;overflow:hidden;background:#0c0b11}
.nf-int > *{position:absolute;inset:0}
.nf-int canvas{width:100%;height:100%;display:block}
/* reflet de verre en haut de la barre */
.nf-int:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(#ffffff14,transparent 40%),linear-gradient(90deg,#0c0b11aa,transparent 30%,transparent 70%,#0c0b11aa)}

/* --- aurore --- */
.nf-aurore{background:radial-gradient(55% 180% at 12% 130%,#f5b40066,transparent 60%),radial-gradient(45% 170% at 88% -40%,#2aabee55,transparent 60%),radial-gradient(40% 160% at 55% 140%,#9b5cff44,transparent 60%),#0c0b11;background-size:170% 170%;animation:nfAurore 10s ease-in-out infinite alternate}
@keyframes nfAurore{0%{background-position:0% 50%,100% 0%,50% 100%}100%{background-position:100% 50%,0% 100%,20% 0%}}
.nf-rayons{background:repeating-linear-gradient(100deg,transparent 0 40px,#ffd65a12 46px 54px,transparent 60px 110px);background-size:220px 100%;animation:nfRayons 8s linear infinite;mix-blend-mode:screen}
@keyframes nfRayons{to{background-position:220px 0}}

/* --- néon --- */
.nav.nv-neon .nf-anneau{animation-duration:4s;background:conic-gradient(from 0deg,#ffd65a,#ff3d8a,#9b5cff,#2aabee,#3ddc84,#ffd65a)}
.nf-halo{position:absolute;inset:-14px;border-radius:34px;z-index:-2;opacity:.55;filter:blur(14px);overflow:hidden;pointer-events:none}
.nf-halo:before{content:"";position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:conic-gradient(from 0deg,#ffd65a,#ff3d8a,#9b5cff,#2aabee,#3ddc84,#ffd65a);animation:nfTourne 4s linear infinite}
.nf-grille{background:linear-gradient(#2aabee1c 1px,transparent 1px) 0 0/100% 12px,linear-gradient(90deg,#9b5cff1a 1px,transparent 1px) 0 0/18px 100%,radial-gradient(80% 140% at 50% 120%,#2aabee33,transparent 70%),#08070d;animation:nfGrille 3s linear infinite}
@keyframes nfGrille{to{background-position:0 12px,18px 0,0 0,0 0}}
.nf-scan{background:linear-gradient(90deg,transparent,#ffffff24,transparent);right:auto!important;width:30%;animation:nfScan 3.6s ease-in-out infinite}
@keyframes nfScan{0%{transform:translateX(-120%)}100%{transform:translateX(420%)}}

/* --- indicateur de l'onglet actif : verre doré, reflet qui passe, étirement quand il glisse --- */
.nav .nav-ind{overflow:hidden;background:linear-gradient(160deg,#f5b40040,#f5b4000d)!important;border-color:#ffd65a88!important;box-shadow:0 0 24px #f5b40044,inset 0 1px 0 #fff4!important}
.nav .nav-ind:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#fff5 50%,transparent 65%);background-size:300% 100%;animation:nfReflet 3.4s ease-in-out infinite}
@keyframes nfReflet{0%,45%{background-position:130% 0}90%,100%{background-position:-130% 0}}
.nav .nav-ind.etire{animation:nfEtire .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes nfEtire{30%{scale:1.35 .8}65%{scale:.92 1.06}}
.nav button.on{color:#ffe28a!important}
.nav button.on svg{stroke:url(#nf-or);filter:drop-shadow(0 0 7px #f5b400cc)}
.nav button .nf-point{position:absolute;bottom:2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:9px;background:#ffd65a;box-shadow:0 0 8px #ffd65a;opacity:0;transform:scale(0);transition:.3s}
.nav button.on .nf-point{opacity:1;transform:none}

/* --- étincelles au toucher --- */
.nf-etincelle{position:fixed;z-index:31;width:5px;height:5px;margin:-2.5px;border-radius:9px;background:#ffd65a;box-shadow:0 0 8px #ffd65a,0 0 2px #fff;pointer-events:none;animation:nfEtincelle .6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes nfEtincelle{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}

/* --- icônes royales sur mesure : contour au repos, or + animation quand l'onglet est actif --- */
.nav button{font-family:Manrope,system-ui,sans-serif!important;font-size:10.5px!important;font-weight:700;letter-spacing:.2px}
.nav svg.nv-ic{width:24px;height:24px;overflow:visible;stroke-width:1.7}
.nav svg.nv-ic .ac{fill:none;stroke:currentColor;transition:fill .3s}
.nav button.on svg.nv-ic .ac{fill:url(#nf-or);stroke:url(#nf-or)}
.nav svg.nv-ic .drapeau{transform-origin:12px 4.5px}
.nav button.on svg.nv-ic .drapeau{animation:nvDrapeau 1.4s ease-in-out infinite}
@keyframes nvDrapeau{50%{transform:skewY(-14deg) scaleX(.8)}}
.nav svg.nv-ic .etincelles .ac{transform-box:fill-box;transform-origin:center}
.nav button.on svg.nv-ic .etincelles .ac{animation:nvScintille 1.6s ease-in-out infinite}
.nav button.on svg.nv-ic .etincelles .ac:nth-child(2){animation-delay:.45s}
.nav button.on svg.nv-ic .etincelles .ac:nth-child(3){animation-delay:.9s}
@keyframes nvScintille{50%{transform:scale(.5) rotate(25deg);opacity:.55}}
.nav svg.nv-ic .couvercle{transform-origin:3.8px 12.2px}
.nav button.on svg.nv-ic .couvercle{animation:nvCouvercle .9s cubic-bezier(.2,1.5,.4,1)}
@keyframes nvCouvercle{40%{transform:rotate(-22deg)}}
.nav svg.nv-ic .sceau{transform-box:fill-box;transform-origin:center}
.nav button.on svg.nv-ic .sceau{animation:nvSceau 2s ease-in-out infinite}
@keyframes nvSceau{50%{transform:scale(1.12)}}
/* l'onglet Jeux : la couronne de la manette brille toujours un peu, même au repos */
.nav .nv-jeux svg.nv-ic .couronne{fill:url(#nf-or);stroke:url(#nf-or);transform-box:fill-box;transform-origin:center bottom;animation:nvCouronne 2.4s ease-in-out infinite;filter:drop-shadow(0 0 3px #f5b40099)}
@keyframes nvCouronne{50%{transform:translateY(-1px) rotate(-7deg)}}
.nav .nv-jeux{color:#d9c792}
/* l'ancienne grosse case dorée du centre (design.css, salle.css, turbo.css) : effacée, l'onglet Jeux est un onglet comme les autres */
.nav .crown-btn.nv-jeux{color:#d9c792;position:relative;align-self:stretch;justify-self:stretch;width:auto;height:auto;margin:0;padding:8px 0;border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;background:none;box-shadow:none;overflow:hidden}
.nav .crown-btn.nv-jeux:before,.nav .crown-btn.nv-jeux:after{content:none;display:none}
.nav .crown-btn.nv-jeux:active{transform:none}
.nav .crown-btn.nv-jeux.on{box-shadow:none}
.nav:has(.crown-btn.nv-jeux.on) .nav-ind{opacity:1}

/* --- le sélecteur pour comparer (temporaire) --- */
.nv-choix{position:fixed;left:50%;bottom:calc(104px + var(--safe-b,0px));translate:-50% 0;z-index:90;display:flex;gap:6px;padding:6px;border-radius:99px;background:#0b0a0fe6;border:1px solid #f5b40055;box-shadow:0 10px 30px #000a}
.nv-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}
.nv-choix button.on{background:linear-gradient(135deg,#fff1b8,#ffd65a 25%,#f5b400 55%,#b07a00);color:#1a1200}

/* sobriété : pause pendant les jeux et les panneaux ; mode léger sans rotation */
body.busy .nav-fond *,body.en-jeu .nav-fond *,body.busy .nav svg.nv-ic *{animation-play-state:paused!important}
body.lite .nf-anneau,body.lite .nf-halo:before,body.lite .nf-rayons,body.lite .nf-scan,body.lite .nav svg.nv-ic *{animation:none!important}
@media (prefers-reduced-motion:reduce){.nav-fond *,.nav svg.nv-ic *,.nav .nav-ind:after{animation:none!important}}