/* ============================================================
   MENUS ET ONGLETS « CAPSULE DE VERRE » — v1.11.0 (14/11/2026)
   Menu principal : capsule translucide, pastille framboise qui glisse vers l'entrée survolée
   et revient sur la page active (assets/nav-glass.js). Onglets des pages : même capsule.
   Chargé après style.css et le thème ; retour arrière : retirer le <link> dans includes/header.php.
   ============================================================ */
:root{
  --ng-glass:rgba(255,255,255,.10);--ng-brd:rgba(255,255,255,.26);--ng-tx:rgba(255,255,255,.86);--ng-tx-on:#fff;
  --ng-hi:rgba(255,255,255,.13);
  --ng-pill:linear-gradient(180deg,#f2395e,#c20f33);
  --ng-pill-shadow:0 6px 18px rgba(220,20,60,.42),inset 0 1px 0 rgba(255,255,255,.38);
  --ng-panel:rgba(13,31,74,.94);
  --ng-ease:cubic-bezier(.3,.9,.3,1.12);
  /* onglets des pages (fond clair par défaut, thème sombre plus bas) */
  --ngt-glass:rgba(31,58,95,.06);--ngt-brd:rgba(31,58,95,.16);--ngt-hi:rgba(31,58,95,.09);
}
/* thème classique : l'en-tête devient blanc au défilement, la capsule passe en verre fumé */
body:not(.th-nov2026) header.scrolled,body:not(.th-nov2026) header.solid{
  --ng-glass:rgba(31,58,95,.07);--ng-brd:rgba(31,58,95,.18);--ng-tx:#1F3A5F;--ng-tx-on:#1F3A5F;--ng-hi:rgba(31,58,95,.10)}
body.th-nov2026{--ngt-glass:rgba(255,255,255,.07);--ngt-brd:rgba(255,255,255,.18);--ngt-hi:rgba(255,255,255,.10)}

/* Le flou de l'en-tête passe sur un calque (::before). Posé sur <header>, il enfermait le tiroir mobile
   (position:fixed) dans la hauteur de l'en-tête dès que celui-ci était opaque : menu coupé à une ligne. */
header.scrolled,header.solid{-webkit-backdrop-filter:none;backdrop-filter:none}
header.scrolled::before,header.solid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#nav .ng-ic{flex:none;display:block}
#nav a:focus-visible,#nav button:focus-visible{outline:2px solid var(--ng-tx-on);outline-offset:2px}
.ng-pill{display:none}
.has-sub.ng-esc .submenu{opacity:0!important;visibility:hidden!important}

/* ---------- Ordinateur : capsule + boutons d'action ---------- */
@media(min-width:1251px){
  header .bar,header .bar.wrap{gap:14px;max-width:1760px}
  .logo{margin-right:0}
  #nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:1;min-width:0}
  #nav ul.ng-main{position:relative;gap:2px;padding:5px;border-radius:999px;
    background:var(--ng-glass);border:1px solid var(--ng-brd);
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px rgba(0,0,0,.20)}
  #nav ul.ng-act{gap:8px}
  #nav .ng-main>li>a{display:inline-flex;align-items:center;padding:8px 11px;border-radius:999px;
    font-size:.74rem;font-weight:700;line-height:1;color:var(--ng-tx);position:relative;z-index:1;transition:color .25s}
  #nav .ng-main>li>a::after{display:none}
  #nav .ng-main>li>a .ng-tx{display:inline-block;margin-left:6px;white-space:nowrap}
  #nav .ng-main>li>a .sub-caret{margin-left:3px;opacity:.7}
  #nav .ng-main>li>a:hover{color:var(--ng-tx-on)}
  /* sans script : la page active porte elle-même la pastille */
  #nav .ng-main:not(.ng-on)>li>a.active{background:var(--ng-pill);box-shadow:var(--ng-pill-shadow);color:#fff}
  /* avec script : une seule pastille, qui glisse */
  #nav .ng-main.ng-on>.ng-pill{display:block;position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;
    background:var(--ng-pill);box-shadow:var(--ng-pill-shadow);opacity:0;pointer-events:none;z-index:0;
    transition:transform .45s var(--ng-ease),width .45s var(--ng-ease),opacity .25s}
  #nav .ng-main.ng-on>li>a.active{color:#fff}
  #nav .ng-main.ng-on.ng-moved>li>a.active{color:var(--ng-tx)}
  #nav .ng-main.ng-on>li>a.ng-hot{color:#fff}

  /* boutons d'action : ronds de verre (recherche, connexion), pastilles (audit, contact) */
  #nav .ng-act a,#nav .ng-act button{font-size:.72rem}
  #nav .ng-act a::after{display:none}
  #nav .ng-act .srch-btn,#nav .ng-act .ng-login,#nav .ng-act .rf-btn{width:36px;height:36px;padding:0;justify-content:center;display:inline-flex;align-items:center;
    border-radius:50%;background:var(--ng-glass);border:1px solid var(--ng-brd);color:var(--ng-tx);
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:background .25s,color .25s,transform .25s}
  #nav .ng-act .srch-btn:hover,#nav .ng-act .ng-login:hover{background:var(--ng-hi);color:var(--ng-tx-on);transform:translateY(-1px)}
  #nav .ng-act .srch-btn span,#nav .ng-act .ng-login .ng-tx,#nav .ng-act .rf-btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  /* REFRESH annonçant une nouvelle version : il garde son fond rouge (style.css .rf-btn.rf-new) */
  #nav .ng-act .rf-btn.rf-new{background:#DC143C;border-color:#DC143C;color:#fff}
  #nav .ng-act .rf-btn.rf-ok{border-color:#2e9e5b;color:#2e9e5b}
  #nav .ng-act .btn-audit,#nav .ng-act .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;line-height:1}
  body.th-nov2026 #nav .ng-act .btn-audit:not(:hover):not(.active){color:#ff7f97!important;border-color:#ff5a78}
  #nav .ng-act .btn-audit .ng-ic,#nav .ng-act .btn .ng-ic{width:14px;height:14px}
  #nav .lang-switch{padding:3px;border-radius:999px;background:var(--ng-glass);border:1px solid var(--ng-brd)}
  #nav .lang-switch a{border-radius:999px;padding:5px 6px;color:var(--ng-tx)}
  #nav .lang-switch a.on{color:#fff}
  /* langues : seule la langue en cours reste visible, les autres s'ouvrent au survol ou au clavier */
  #nav .lang-switch li:not(:has(a.on)){max-width:0;opacity:0;overflow:hidden;transition:max-width .4s var(--ng-ease),opacity .25s}
  #nav .lang-switch:hover li,#nav .lang-switch:focus-within li{max-width:40px;opacity:1}

  /* sous-menus : panneau de verre sombre, entrées en pastilles */
  #nav .submenu{top:calc(100% + 16px);min-width:230px;padding:8px;gap:2px;border-radius:20px;
    background:var(--ng-panel);border:1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14)}
  /* pont invisible entre l'entrée et son panneau : le survol ne se perd pas */
  #nav .submenu::before{top:-22px;left:0;width:100%;height:22px;transform:none;background:none;border:0}
  #nav .submenu a{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;
    font-size:.76rem;font-weight:700;color:rgba(255,255,255,.86)!important;transition:background .2s,color .2s}
  #nav .submenu a:hover{background:rgba(255,255,255,.12);color:#fff!important}
  #nav .submenu a:focus-visible{outline-color:#fff}
  #nav .submenu a.active{background:var(--ng-pill);box-shadow:var(--ng-pill-shadow);color:#fff!important}
  #nav .ng-res .submenu{display:grid;grid-template-columns:1fr 1fr;min-width:460px;left:auto;right:-40px;transform:translateY(8px)}
  #nav .ng-res:hover .submenu,#nav .ng-res:focus-within .submenu{transform:translateY(0)}
}
/* écrans tactiles larges (tablette en paysage) : pas de survol, les langues restent dépliées */
@media(min-width:1251px) and (hover:none){
  #nav .lang-switch li:not(:has(a.on)){max-width:40px;opacity:1}
}
/* ---------- Ordinateur étroit : icônes seules, le libellé s'ouvre sur la page active et au survol ---------- */
@media(min-width:1251px) and (max-width:1799px){
  #nav .ng-main>li>a .ng-tx{max-width:0;margin-left:0;opacity:0;overflow:hidden;
    transition:max-width .4s var(--ng-ease),margin-left .4s var(--ng-ease),opacity .25s}
  #nav .ng-main>li>a.active .ng-tx,#nav .ng-main>li>a:hover .ng-tx,#nav .ng-main>li>a:focus-visible .ng-tx,
  #nav .ng-main>li.has-sub:hover>a .ng-tx,#nav .ng-main>li.has-sub:focus-within>a .ng-tx{max-width:150px;margin-left:6px;opacity:1}
  #nav .ng-main>li>a{padding:9px 11px}
  #nav .ng-main>li>a .ng-ic{width:17px;height:17px}
}

/* ---------- Tablette et mobile : tiroir de verre, entrées en pastilles ---------- */
@media(max-width:1250px){
  nav#nav{background:rgba(13,31,74,.9);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
    border-left:1px solid rgba(255,255,255,.16);padding:84px 16px 32px;padding-top:max(84px,env(safe-area-inset-top))}
  #nav ul.ng-main,#nav ul.ng-act{gap:4px;align-items:stretch;width:100%}
  #nav ul.ng-act{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);gap:8px}
  #nav .ng-main li{width:100%}
  #nav .ng-main a{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:999px;font-size:.9rem;font-weight:700;opacity:1;
    color:rgba(255,255,255,.88);transition:background .2s}
  #nav .ng-main a::after{display:none}
  #nav .ng-main a:hover{background:rgba(255,255,255,.10)}
  #nav .ng-main a.active{background:var(--ng-pill);box-shadow:var(--ng-pill-shadow);color:#fff}
  #nav .ng-main .sub-caret{margin-left:auto}
  #nav .submenu{gap:2px;padding-left:14px}
  #nav .has-sub.open .submenu{max-height:720px;margin-top:4px}
  #nav .submenu a{font-size:.84rem;padding:9px 14px}
  #nav .ng-act a,#nav .ng-act button{font-size:.86rem}
  #nav .ng-act a::after{display:none}
  #nav .ng-act .srch-btn,#nav .ng-act .ng-login,#nav .ng-act .btn-audit,#nav .ng-act .btn{display:flex;align-items:center;gap:12px;width:100%;
    padding:11px 16px;border-radius:999px;justify-content:flex-start}
  #nav .ng-act .srch-btn,#nav .ng-act .ng-login{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
  #nav .lang-li{margin-top:8px}
  /* le bouton burger reste au-dessus du tiroir : il sert aussi à le refermer */
  .burger{position:relative;z-index:130}
  #nav.open~.burger span{background:#fff}
  #nav a:focus-visible,#nav button:focus-visible{outline-color:#fff}
}

/* La règle mobile « nav{position:fixed…} » de style.css visait le menu mais attrapait aussi la barre d'onglets
   RSS / NEWS / GANTT (<nav class="ong3d">), qui sortait de l'écran sous 1250 px. */
@media(max-width:1250px){
  body nav.ong3d,body.th-nov2026 nav.ong3d{position:static;inset:auto;width:auto;transform:none;box-shadow:none;overflow:visible;z-index:auto;
    background:var(--marine-night);padding:14px 0}
}

/* ---------- Onglets des pages : même capsule, onglet actif en pastille ---------- */
.tabs,.tel-tabs,body .wst .wst-tabs{width:fit-content;max-width:100%;padding:6px;gap:4px;border-radius:30px;
  background:var(--ngt-glass);border:1px solid var(--ngt-brd);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.tabs{margin-left:auto;margin-right:auto}
.tab-btn,.tel-tab,body .wst .wst-tab{border:1px solid transparent;background:transparent;color:var(--marine);
  padding:10px 18px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;
  transition:background .25s,color .25s,box-shadow .25s,transform .25s}
.tab-btn:hover,.tel-tab:hover,body .wst .wst-tab:hover{background:var(--ngt-hi);border-color:transparent;color:var(--marine)}
.tab-btn.active,.tel-tab.on,body .wst .wst-tab.on,.tab-btn.active:hover,.tel-tab.on:hover,body .wst .wst-tab.on:hover{
  background:var(--ng-pill);border-color:transparent;color:#fff;box-shadow:var(--ng-pill-shadow)}
.tab-btn:focus-visible,.tel-tab:focus-visible,body .wst .wst-tab:focus-visible{outline:2px solid var(--framboise);outline-offset:2px}

/* rubrique RSS / NEWS / GANTT : les onglets 3D deviennent une capsule */
.ong3d{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ong3d-row{padding-top:0;gap:0;perspective:none;align-items:center}
.ong3d-t{padding:5px 2px;background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}
.ong3d-t:first-child{padding-left:5px;border-left:1px solid rgba(255,255,255,.22);border-radius:999px 0 0 999px}
.ong3d-t:last-child{padding-right:5px;border-right:1px solid rgba(255,255,255,.22);border-radius:0 999px 999px 0}
.ong3d-face,.ong3d-t:hover .ong3d-face,.ong3d-t.on .ong3d-face{transform:none}
.ong3d-face{padding:8px 20px 8px 14px;border-radius:999px;border:0;background:transparent;box-shadow:none;
  transition:background .25s,box-shadow .25s}
.ong3d-t:hover .ong3d-face{background:rgba(255,255,255,.12)}
.ong3d-t.on .ong3d-face{background:var(--ng-pill);box-shadow:var(--ng-pill-shadow)}

@media(max-width:640px){
  .tabs,.tel-tabs,body .wst .wst-tabs{border-radius:22px}
  .tab-btn,.tel-tab,body .wst .wst-tab{padding:9px 13px;font-size:.74rem}
  .ong3d-face{padding:8px 14px 8px 12px}
}
@media (prefers-reduced-motion:reduce){
  #nav .ng-main.ng-on>.ng-pill,#nav .ng-main>li>a .ng-tx,.tab-btn,.tel-tab,.ong3d-face{transition:none}
}