/* nav-groups.css — Rubriques en menus déroulants dans la barre de gestion.
 *
 * Range la nav (≈8 rubriques au lieu de ~22 liens). Chaque rubrique = un bouton
 * déclencheur + un panneau déroulant. Ouverture : survol et focus clavier (CSS) +
 * clic/tap (classe .is-open posée par public/js/nav-groups.js). Tout est scopé sous
 * .app-nav → aucun effet ailleurs. Consomme les tokens d'app.css ; variantes dark,
 * mode compact (icônes) et tiroir mobile gérées plus bas.
 */

.app-nav-group { position: relative; display: inline-flex; }

/* Déclencheur de rubrique : même gabarit que les liens de nav. */
.app-nav-grouptrigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--label-secondary);
  font: inherit;
  font-size: 0.875rem;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  /* Une rubrique qui a sa propre page porte un lien : il ne doit pas se souligner ni
     changer de couleur, sinon deux entrees voisines n auraient pas la meme allure. */
  text-decoration: none;
}
.app-nav-grouptrigger:hover { background: var(--fill-quaternary); color: var(--label-primary); }
.app-nav-grouptrigger.active { background: var(--fill-primary); color: var(--label-primary); font-weight: 600; }
.app-nav-admin .app-nav-grouptrigger { color: rgba(255,255,255,0.72); }
.app-nav-admin .app-nav-grouptrigger:hover { background: rgba(255,255,255,0.10); color: #fff; }
.app-nav-admin .app-nav-grouptrigger.active { background: rgba(255,255,255,0.16); color: #fff; }

.app-nav-chev { flex: 0 0 auto; opacity: 0.6; transition: transform 0.15s ease; }
.app-nav-group:hover .app-nav-chev,
.app-nav-group:focus-within .app-nav-chev,
.app-nav-group.is-open .app-nav-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .app-nav-chev { transition: none; } }

/* Panneau déroulant (desktop) : flottant sous le déclencheur. */
.app-nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  max-width: 320px;
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--separator, rgba(60,60,67,0.12));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,37,68,0.16);
  z-index: 1200;
}
.app-nav-group:hover > .app-nav-dropdown,
.app-nav-group:focus-within > .app-nav-dropdown,
.app-nav-group.is-open > .app-nav-dropdown { display: flex; }

/* Pont invisible : évite que le menu se referme dans l'interstice déclencheur↔panneau. */
.app-nav-group:hover > .app-nav-dropdown::before {
  content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
}

.app-nav-dropitem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--label-primary);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}
.app-nav-dropitem:hover { background: var(--fill-quaternary, rgba(0,0,0,0.05)); }
.app-nav-dropitem.active { background: var(--fill-primary, rgba(0,0,0,0.08)); font-weight: 600; }
.app-nav-dropitem .nav-icon { flex: 0 0 auto; }
.app-nav-droplabel { flex: 1 1 auto; min-width: 0; }

/* Thème sombre. */
:root[data-theme="dark"] .app-nav-dropdown { background: #1f2024; border-color: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .app-nav-dropitem { color: rgba(255,255,255,0.9); }
:root[data-theme="dark"] .app-nav-dropitem:hover { background: rgba(255,255,255,0.08); }

/* Mode compact (icônes seules) : on masque le libellé + le chevron du déclencheur,
   comme les liens de nav. Le menu reste accessible au survol/clic. */
.app-nav-inner.nav-compact .app-nav-grouptrigger,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-grouptrigger { font-size: 0; padding: 0.5rem 0.55rem; gap: 0; }
.app-nav-inner.nav-compact .app-nav-grouptrigger .nav-icon,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-grouptrigger .nav-icon { margin-right: 0; }
.app-nav-inner.nav-compact .app-nav-chev,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-chev { display: none; }
/* Le panneau, lui, garde sa taille normale (libellés lisibles). Les items de menu
   sont des <a> DANS .app-nav-links → la règle compacte « font-size:0 » les touche
   aussi ; on la neutralise ici (même spécificité, déclarée après → l'emporte). */
.app-nav-inner.nav-compact .app-nav-dropdown,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-dropdown { font-size: 0.875rem; }
.app-nav-inner.nav-compact .app-nav-dropdown a,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-dropdown a { font-size: 0.875rem; gap: 0.6rem; padding: 0.5rem 0.6rem; }
.app-nav-inner.nav-compact .app-nav-dropdown a .nav-icon,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-dropdown a .nav-icon { margin-right: 0; }

/* Tiroir mobile : le menu n'est plus flottant mais en accordéon dans le flux. */
@media (max-width: 768px) {
  .app-nav-group { display: block; width: 100%; }
  .app-nav-grouptrigger { width: 100%; justify-content: flex-start; font-size: 0.95rem; }
  .app-nav-chev { margin-left: auto; }
  .app-nav-dropdown {
    position: static; display: none; min-width: 0; max-width: none;
    box-shadow: none; border: none; background: transparent; padding: 0.1rem 0 0.3rem 1.4rem;
  }
  /* En mobile : seul le clic (.is-open) ouvre — pas le survol. */
  .app-nav-group:hover > .app-nav-dropdown,
  .app-nav-group:focus-within > .app-nav-dropdown { display: none; }
  .app-nav-group.is-open > .app-nav-dropdown { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYMÉTRIE déclencheur de rubrique ⇆ lien de nav
   ───────────────────────────────────────────────────────────────────────────
   La barre rangée en rubriques a introduit un <button class="app-nav-grouptrigger">
   à côté des <a> de .app-nav-links. Or TOUT le traitement visuel de l'icône (tuile
   colorée iOS, taille 36px, glyphe en trait, état actif) et les restaurations de
   libellé en tiroir étaient scopés à « .app-nav-links a » → le déclencheur n'en
   héritait PAS. Conséquence mesurée au navigateur : son <span class="nav-icon">
   n'a aucune dimension, et comme les SVG ont un viewBox SANS width/height, le glyphe
   se peint en 0×0 — INVISIBLE (surtout en compact, où font-size:0 écrase la taille
   em). Les 6 rubriques devenaient des boutons ~18px vides. On rétablit ici la
   symétrie complète (nav-groups.css est chargé APRÈS app.css → reprend la main). */

/* Icône de rubrique : VISIBLE mais LÉGÈRE (glyphe en trait). On la garde plus
   compacte que la grosse tuile 36px des liens (.app-nav-links a .nav-icon) pour ne
   PAS gonfler la largeur de la barre dépliée — sinon les libellés ne tiendraient
   plus, même sur grand écran. Le point CLÉ : la taille est FIXE en px (pas en em),
   donc immunisée au font-size:0 du mode compact, qui réduisait l'icône à 0×0
   (invisible) faute de dimension propre (les SVG ont un viewBox sans width/height). */
.app-nav-grouptrigger .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  margin-right: 0.45rem;
  border-radius: 7px;
  background: transparent;
  color: var(--label-secondary);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s var(--ease-spring);
}
.app-nav-grouptrigger .nav-icon svg { width: 20px; height: 20px; display: block; stroke: currentColor; }
.app-nav-grouptrigger:hover .nav-icon { transform: scale(1.04); }

/* Non-actif : glyphe en trait, fond transparent (comme un lien non-actif côté
   client). Seule la rubrique ACTIVE reprend un carré PLEIN dans sa couleur. */
html:not(.nav-layout-side) .app-nav:not(.app-nav-admin) .app-nav-grouptrigger:not(.active) .nav-icon {
  background: transparent !important;
  color: color-mix(in srgb, var(--label-primary) 68%, transparent) !important;
  box-shadow: none !important;
}
html:not(.nav-layout-side) .app-nav:not(.app-nav-admin) .app-nav-grouptrigger:not(.active):hover .nav-icon { color: var(--label-primary) !important; }
/* Rubrique ACTIVE : carré plein dans sa couleur (.nav-icon-<X>, !important dans
   app.css → reprend la main quand .active) → repère de la section courante, lisible
   y compris en mode compact (icônes seules). Le glyphe passe en blanc via .nav-icon-<X>. */
.app-nav-grouptrigger.active .nav-icon { width: 30px; height: 30px; box-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.app-nav-grouptrigger.active .nav-icon svg { width: 18px; height: 18px; }
/* Pas de pastille de fond sur le déclencheur actif/survolé côté client (cohérent
   avec .app-nav-links a, demande Julien) : l'icône colorée + le libellé en gras
   suffisent. On neutralise le fond gris défini plus haut pour le grouptrigger. */
.app-nav:not(.app-nav-admin) .app-nav-grouptrigger.active { background: transparent !important; }
.app-nav:not(.app-nav-admin) .app-nav-grouptrigger:hover { background: transparent !important; }

/* ── Tiroir replié (hamburger) : libellés du déclencheur TOUJOURS visibles ──────
   Symétrique à app.css :
     .app-nav.is-collapsed .app-nav-inner.nav-compact .app-nav-links a { font-size:0.95rem }
     .app-nav.is-collapsed .app-nav-links a { ligne pleine largeur verticale }
   Sans équivalent grouptrigger, les rubriques restaient en icône seule (illisibles)
   dans le menu vertical. On les rend, comme les liens, en blocs pleine largeur. */
.app-nav.is-collapsed .app-nav-inner.nav-compact .app-nav-grouptrigger { font-size: 0.95rem; padding: 0.7rem 0.85rem; gap: 0.6rem; }
.app-nav.is-collapsed .app-nav-inner.nav-compact .app-nav-grouptrigger .nav-icon { margin-right: 0.55rem; }
.app-nav.is-collapsed .app-nav-grouptrigger {
  padding: 0.7rem 0.8rem;
  font-size: 0.95rem;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  gap: 0.7rem;
}
/* Chaque rubrique = bloc pleine largeur + menu en accordéon. Le bloc @media ≤768px
   le fait déjà sur mobile ; on l'étend à TOUT tiroir replié (y compris les fenêtres
   étroites >768px où fitNav bascule en hamburger sans être en média mobile). */
.app-nav.is-collapsed .app-nav-group { display: block; width: 100%; }
.app-nav.is-collapsed .app-nav-chev { display: inline-flex; margin-left: auto; }
.app-nav.is-collapsed .app-nav-dropdown {
  position: static; min-width: 0; max-width: none;
  box-shadow: none; border: none; background: transparent; padding: 0.1rem 0 0.3rem 1.4rem;
}
/* Dans le tiroir : seul le clic (.is-open) ouvre — pas le survol/focus (comme ≤768px). */
.app-nav.is-collapsed .app-nav-group:hover > .app-nav-dropdown,
.app-nav.is-collapsed .app-nav-group:focus-within > .app-nav-dropdown { display: none; }
.app-nav.is-collapsed .app-nav-group.is-open > .app-nav-dropdown { display: flex; }