/* ============================================================================
   nav.css — tiklive.eu « LA RÉGIE » — propriétaire : agent:nav (§5.1)
   Nav sticky 64 px, jamais cachée. Barre de progression 2 px rose (action = aller au bout),
   rail gradué qui apparaît après 8 px de scroll, menu-panneau mobile (< 860 px),
   sélecteur de langue partagé (.tl-lang) réutilisé par le footer.
   Motion : --m (durées) et --mt (translations) → rien à dupliquer en reduced-motion, jamais display:none
   piloté par la media query reduced-motion.
   ========================================================================== */

/* ── Barre ──────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:var(--z-nav);height:var(--nav-h);background:rgba(7,8,12,.94);border-bottom:1px solid var(--line);isolation:isolate}
/* Desktop ET motion complète : verre flouté. Mobile ou réduit : opaque, sans blur (coût GPU au-dessus du canvas). */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  html:not([data-motion="soft"]) .nav{background:rgba(7,8,12,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
@media (min-width:1024px){
  html[data-motion="full"] .nav{background:rgba(7,8,12,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
/* Rail gradué sous la barre : invisible en haut de page, fondu après 8 px de scroll (.is-scrolled posé par nav.js) */
.nav::after{content:'';position:absolute;left:0;right:0;top:100%;height:4px;pointer-events:none;background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 8px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);opacity:0;transition:opacity calc(400ms*var(--m)) var(--ease)}
.nav.is-scrolled::after{opacity:1}

.nav-in{display:flex;align-items:center;gap:10px;height:100%}
@media (min-width:860px){.nav-in{gap:var(--sp-3)}}

/* ── Marque ─────────────────────────────────────────────────────────────────── */
.nav .brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 0;color:var(--txt);border-radius:var(--r-btn);flex:none}
.nav .brand img{width:32px;height:32px;flex:none}
.nav .word{font:800 20px/1 var(--disp);letter-spacing:-.03em;font-variation-settings:"wdth" 100}
@media (max-width:359.98px){.nav .word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* ── Liens (desktop : ligne ; mobile : panneau sous la barre) ───────────────── */
.nav .links{display:flex}
.nav .links>a{position:relative;display:inline-flex;align-items:center;min-height:44px;font:600 14px/1 var(--body);color:var(--dim);white-space:nowrap;transition:color var(--d-fast) var(--ease)}
.nav .links>a:hover,.nav .links>a[aria-current]{color:var(--txt)}
/* Soulignement de section courante (scroll-spy) — trait neutre, ni rose ni cyan */
.nav .links>a::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--line-3);transform:scaleX(0);transform-origin:left center;transition:transform var(--d) var(--ease)}
.nav .links>a[aria-current]::after{transform:scaleX(1)}
.nav .links>a.discord{gap:8px}
.nav .links>a .ico{width:16px;height:16px}
.nav-m{display:none}

@media (min-width:860px){
  .nav .links{gap:var(--sp-3);margin-left:auto}
  .nav .links>a{padding:0 2px}
  .nav .burger{display:none}
}

@media (max-width:859.98px){
  .nav .links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:var(--sp-2) var(--gut) var(--sp-3);max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow:auto;-webkit-overflow-scrolling:touch;background:rgba(7,8,12,.97);border-bottom:1px solid var(--line-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
    /* fermé : opacité + légère translation (translation coupée en réduit via --mt), retiré du focus par visibility */
    opacity:0;visibility:hidden;transform:translateY(calc(-8px*var(--mt)));transition:opacity calc(200ms*var(--m)) var(--ease),transform calc(200ms*var(--m)) var(--ease),visibility 0s linear calc(200ms*var(--m))}
  .nav.is-open .links{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav .links::after{content:'';position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:4px;background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 8px)}
  .nav .links>a{min-height:48px;padding:0 4px;font-size:17px;border-top:1px solid var(--line)}
  .nav .links>a::after{bottom:auto;top:50%;left:auto;right:6px;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--txt);transform:scale(0)}
  .nav .links>a[aria-current]::after{transform:scale(1)}
  .nav-m{display:block}
  .nav-m-cta{padding:0 0 var(--sp-2)}
  .nav-m-cta .btn-p{width:100%}
  .nav-m-cta .btn-sub{text-align:center}
  .nav-m-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line)}
  .nav-m-foot .discord{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 14px/1 var(--body);color:var(--dim);border-radius:var(--r-btn)}
  .nav-m-foot .discord:hover{color:var(--txt)}
  .nav-m-foot .discord .ico{width:16px;height:16px}
  /* sans JS : pas de burger fonctionnel → on n'affiche pas un bouton mort */
  html.no-js .nav .burger{display:none}
}

/* ── Langue (composant partagé nav / footer) ────────────────────────────────── */
/* Globe + menu : 6 langues ne tiennent pas cote a cote dans une barre de 64 px. */
.tl-lang{position:relative;display:inline-flex}
.tl-lang>summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border-radius:var(--r-btn);font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--dim-2);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;transition:color var(--d-fast) var(--ease),background var(--d-fast) var(--ease)}
.tl-lang>summary::-webkit-details-marker{display:none}
.tl-lang>summary::marker{content:''}
.tl-lang>summary:hover,.tl-lang[open]>summary{color:var(--txt);background:rgba(255,255,255,.05)}
.tl-lang>summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.tl-lang .tl-globe{width:16px;height:16px;flex:none}
.tl-lang .tl-chev{width:11px;height:11px;flex:none;transition:transform var(--d-fast) var(--ease)}
.tl-lang[open] .tl-chev{transform:rotate(180deg)}
.tl-lang .tl-flag{display:inline-flex;width:20px;height:14px;overflow:hidden;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);flex:none}
.tl-lang .tl-flag svg{width:100%;height:100%;display:block}
.tl-lang>summary .tl-code{display:none}
@media (min-width:1024px){.tl-lang>summary .tl-code{display:inline}}
/* Le menu */
.tl-lang-pop{position:absolute;z-index:70;top:calc(100% + 8px);right:0;width:436px;max-width:calc(100vw - 24px);max-height:min(72vh,460px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:16px;background:#0e121c;box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.tl-lang-pop .lang{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 4px}
.tl-lang-pop a{display:flex;align-items:center;gap:9px;min-width:0;min-height:38px;padding:0 10px;border-radius:10px;color:var(--dim-2);transition:color var(--d-fast) var(--ease),background var(--d-fast) var(--ease)}
.tl-lang-pop a:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.tl-lang-pop a[aria-current]{color:var(--txt);background:rgba(255,255,255,.09)}
.tl-lang-pop .tl-code{display:inline;flex:none;min-width:20px;font:700 9.5px/1 var(--mono);letter-spacing:.1em;opacity:.55}
.tl-lang-pop .tl-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:13px;line-height:1.2;letter-spacing:0;color:var(--dim)}
.tl-lang-pop a:hover .tl-name,.tl-lang-pop a[aria-current] .tl-name{color:var(--txt)}
/* Trop etroit pour deux colonnes : on repasse sur une seule, avec ascenseur. */
@media (max-width:519.98px){.tl-lang-pop{width:236px}.tl-lang-pop .lang{grid-template-columns:1fr}}
/* Dans le pied de page le menu s'ouvre vers le haut, sinon il sort de la page. */
.ft .tl-lang-pop{top:auto;bottom:calc(100% + 8px);right:0;left:auto}
@media (max-width:519.98px){.ft .tl-lang-pop{right:auto;left:0}}
/* Dans la barre : masqué sur mobile tant que le JS l'a déplacé dans le panneau ; visible si JS absent */
@media (max-width:859.98px){
  html.js .nav-in>.nav-lang{display:none}
  .nav .links .nav-lang{display:inline-flex}
  .nav .links .nav-lang>summary .tl-code{display:inline}
  .nav .links .nav-lang .tl-lang-pop{position:static;width:100%;max-width:none;max-height:none;overflow:visible;min-width:0;padding:4px 0;background:none;box-shadow:none}
}

/* ── CTA compact (toujours visible, même à 375 px) ──────────────────────────── */
.nav .nav-cta{flex:none;margin-left:auto}
.nav .nav-cta .lbl-s{display:none}
@media (min-width:860px){.nav .nav-cta{margin-left:0}}
@media (max-width:479.98px){
  .nav .nav-cta{height:44px;padding:0 14px}
  .nav .nav-cta .lbl{display:none}
  .nav .nav-cta .lbl-s{display:inline;white-space:nowrap}
}
@media (min-width:480px) and (max-width:859.98px){.nav .nav-cta{height:44px}}

/* ── Burger (< 860 px) ──────────────────────────────────────────────────────── */
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:var(--r-btn);color:var(--txt);transition:background var(--d-fast) var(--ease)}
.burger:hover{background:rgba(255,255,255,.05)}
.burger-l{position:relative;width:20px;height:14px;display:block}
.burger-l i{position:absolute;left:0;right:0;height:2px;border-radius:1px;background:currentColor;transition:transform calc(220ms*var(--m)) var(--ease),opacity calc(160ms*var(--m)) var(--ease),top calc(220ms*var(--m)) var(--ease)}
.burger-l i:nth-child(1){top:0}
.burger-l i:nth-child(2){top:6px}
.burger-l i:nth-child(3){top:12px}
.burger[aria-expanded="true"] .burger-l i:nth-child(1){top:6px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-l i:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] .burger-l i:nth-child(3){top:6px;transform:rotate(-45deg)}

/* ── Progression de lecture (2 px rose, scaleX piloté par nav.js) ──────────── */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.progress i{display:block;width:100%;height:100%;background:var(--rose);box-shadow:0 0 12px rgba(255,0,122,.6);transform:scaleX(0);transform-origin:left center;will-change:transform}