/* Habbom : menu principal (icônes, indicateur, menus déroulants au survol) et fil d'Ariane.
   Chargé après le thème : les couleurs viennent des variables du thème (--panel, --text, --neon…). */

/* accent : la couleur du thème (certains thèmes ont un --neon sombre, --neon-rgb reste la couleur vive) */
:root{--nav-acc:rgb(var(--neon-rgb))}

/* ---------------------------------------------------------------- Onglets */
.tabs-v2 .tabs-in{position:relative}
.tabs-v2 .tabs-in>a{display:inline-flex;align-items:center;gap:7px;position:relative}
.tabs-v2 .tab-ic{display:inline-grid;place-items:center;flex:none;opacity:.75;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.tabs-v2 .tab-ic .pix-ic{display:block}
.tabs-v2 .tabs-in>a:hover .tab-ic,.tabs-v2 .tabs-in>a.on .tab-ic,.tabs-v2 .tabs-in>a.ouvert .tab-ic{opacity:1;transform:translateY(-1px)}
.tabs-v2 .tab-car{display:inline-block;width:7px;height:7px;margin-left:1px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.45;transition:transform .25s,opacity .2s}
.tabs-v2 .tabs-in>a.ouvert .tab-car{transform:translateY(1px) rotate(225deg);opacity:.9}
.tabs-v2 .badge{order:9}
/* barre trop étroite pour tout montrer (nav.js) : d'abord plus serré, puis sans les icônes */
.tabs-v2.serre .tabs-in>a,.tabs-v2.serre .tabs-in>.tab-off{padding-left:8px;padding-right:8px;gap:5px}
.tabs-v2.serre .tab-car{display:none}
.tabs-v2.sans-ic .tab-ic{display:none}
.tabs-v2.sans-ic .tabs-in>.tab-off small{display:none}
.pix-ic{display:inline-block;vertical-align:middle;flex:none;fill:currentColor}
/* indicateur qui glisse sous l'onglet survolé */
.tabs-ind{position:absolute;left:0;bottom:0;width:0;height:3px;border-radius:3px 3px 0 0;background:var(--nav-acc);box-shadow:0 0 12px rgba(var(--neon-rgb),.55);opacity:0;pointer-events:none;
  transition:left .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
.tabs-ind.vu{opacity:1}
/* l'onglet de la page en cours reste souligné par le thème ; la barre glissante passe par-dessus */

/* ---------------------------------------------------------------- Menus déroulants */
.nav-drops{position:fixed;left:0;top:0;width:0;height:0;z-index:1000; /* au-dessus des modules Chat / Radio et de leurs fenêtres */opacity:0;visibility:hidden;pointer-events:none;
  background:var(--panel);border:1px solid var(--line2);border-radius:18px;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.45),0 0 0 1px rgba(var(--neon-rgb),.06),inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(-10px) scale(.97);transform-origin:50% 0;
  transition:opacity .22s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s,
    left .34s cubic-bezier(.2,.8,.2,1),top .34s cubic-bezier(.2,.8,.2,1),width .34s cubic-bezier(.2,.8,.2,1),height .34s cubic-bezier(.2,.8,.2,1)}
.nav-drops::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 0 0,rgba(var(--neon-rgb),.10),transparent 60%)}
.nav-drops.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.nav-drops.net,.nav-drops.net .nav-drop,.nav-drop.net-x{transition:none!important}
.nav-drop{position:absolute;left:0;top:0;width:max-content;opacity:0;visibility:hidden;transform:translateX(0);
  transition:opacity .2s ease,transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s .34s}
.nav-drop.gauche{transform:translateX(-36px)}
.nav-drop.droite{transform:translateX(36px)}
.nav-drop.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav-drop-in{display:grid;grid-template-columns:auto;gap:12px;padding:10px;max-width:calc(100vw - 32px);overflow:auto;scrollbar-width:thin}

/* carte de la rubrique (à gauche) */
.nav-head{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 16px 16px;border-radius:14px;text-decoration:none;color:var(--text);overflow:hidden;
  background:linear-gradient(150deg,rgba(var(--neon-rgb),.22),rgba(var(--neon-rgb),.04) 70%);border:1px solid rgba(var(--neon-rgb),.25);transition:border-color .2s,transform .2s}
.nav-head:hover{border-color:var(--nav-acc)}
.nav-head-ic{display:grid;place-items:center;width:58px;height:58px;margin-bottom:6px;border-radius:16px;background:rgba(var(--neon-rgb),.16);color:var(--nav-acc);box-shadow:inset 0 0 0 1px rgba(var(--neon-rgb),.3)}
.nav-head b{font:800 26px/1 var(--title);letter-spacing:.02em;color:var(--cream)}
.nav-head small{color:var(--muted);font-size:13px;line-height:1.35}
.nav-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;color:var(--nav-acc);font-weight:700;font-size:13px}
.nav-go .pix-ic{transition:transform .2s}
.nav-head:hover .nav-go .pix-ic{transform:translateX(4px)}

/* sous-pages */
.nav-items{display:grid;grid-template-columns:260px;align-content:start;gap:2px}
.nav-items:has(>:nth-child(4)){grid-template-columns:repeat(2,250px)}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 12px 9px 9px;border-radius:12px;color:var(--text);text-decoration:none;transition:background .15s}
.nav-item:hover,.nav-item:focus-visible{background:rgba(var(--neon-rgb),.10)}
.nav-item-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);color:var(--nav-acc);transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s}
.nav-item:hover .nav-item-ic{transform:translateY(-2px) rotate(-4deg);border-color:rgba(var(--neon-rgb),.6);background:rgba(var(--neon-rgb),.14)}
.nav-item-t{display:grid;gap:2px;min-width:0}
.nav-item-t b{font-size:14.5px;font-weight:700;line-height:1.2}
.nav-item-t small{color:var(--muted);font-size:12.5px;line-height:1.3}

/* Administration : tous les outils, rangés par catégorie */
.nav-drop[data-for="administration.php"] .nav-drop-in{grid-template-columns:minmax(0,1fr);width:min(900px,calc(100vw - 32px))}
.nav-cols{column-width:185px;column-gap:14px;padding:4px 2px}
.nav-col{break-inside:avoid;padding:0 0 12px}
.nav-col-t{display:flex;align-items:center;gap:7px;margin:0 0 4px;padding:4px 8px;color:var(--nav-acc);font:700 12px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase}
.nav-mini{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px;color:var(--text);text-decoration:none;font-size:13.5px;line-height:1.2;transition:background .15s,color .15s,padding .2s}
.nav-mini .pix-ic{color:var(--muted);transition:color .15s}
.nav-mini:hover,.nav-mini:focus-visible{background:rgba(var(--neon-rgb),.10);color:var(--nav-acc);padding-left:11px}
.nav-mini:hover .pix-ic{color:var(--nav-acc)}

/* apparition en cascade des éléments */
@keyframes navIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nav-drop.on .nav-item,.nav-drop.on .nav-col,.nav-drop.on .nav-head{animation:navIn .38s cubic-bezier(.2,.8,.2,1) both}
.nav-drop.on .nav-head{animation-delay:.02s}
.nav-drop.on .nav-item:nth-child(1),.nav-drop.on .nav-col:nth-child(1){animation-delay:.05s}
.nav-drop.on .nav-item:nth-child(2),.nav-drop.on .nav-col:nth-child(2){animation-delay:.09s}
.nav-drop.on .nav-item:nth-child(3),.nav-drop.on .nav-col:nth-child(3){animation-delay:.13s}
.nav-drop.on .nav-item:nth-child(4),.nav-drop.on .nav-col:nth-child(4){animation-delay:.17s}
.nav-drop.on .nav-item:nth-child(5),.nav-drop.on .nav-col:nth-child(5){animation-delay:.21s}
.nav-drop.on .nav-item:nth-child(6),.nav-drop.on .nav-col:nth-child(6){animation-delay:.25s}
.nav-drop.on .nav-item:nth-child(n+7),.nav-drop.on .nav-col:nth-child(n+7){animation-delay:.29s}

@media (prefers-reduced-motion:reduce){
  .nav-drops,.nav-drop,.tabs-ind,.tab-car{transition:none!important}
  .nav-drop.on .nav-item,.nav-drop.on .nav-col,.nav-drop.on .nav-head{animation:none}
}

/* ---------------------------------------------------------------- Fil d'Ariane */
.fil{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-width:0}
.fil ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;min-width:0;font-size:13.5px;color:var(--muted)}
.fil li{display:inline-flex;align-items:center;min-width:0}
.fil li+li::before{content:"";width:6px;height:6px;margin:0 10px 0 8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.5}
.fil li a{color:var(--muted);text-decoration:none;border-radius:6px;padding:2px 4px;margin:0 -4px;transition:color .15s,background .15s}
.fil li a:hover{color:var(--nav-acc);background:rgba(var(--neon-rgb),.08)}
.fil li [aria-current]{color:var(--text);font-weight:700;max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-head.no-h1 .fil{justify-self:start}
body.ui-m .fil ol li:not(:last-child):not(:nth-last-child(2)){display:none} /* téléphone : seulement les deux derniers niveaux */
body.ui-m .fil ol li:nth-last-child(2)::before{display:none}