/* ============================================================
   Horizontal navigation — full-width MEGA menu (design 12).
   Desktop (>=992px) : pill bar + full-width mega panel on hover.
   Mobile  (<992px)  : hamburger + accordions (.is-open).
   Font sizes: NIV1 12px · NIV2 11px · NIV3+ 10px.
   ============================================================ */

.topnav {
  grid-area: topnav;
  /* Bandeau foncé (indigo/violet) — cohérent avec le tiroir violet, fait ressortir le logo */
  background: linear-gradient(180deg, #201a4a, #17112f);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 50;
  position: relative; /* containing block for the full-width mega panel */
}

/* Jamais de soulignage au survol — nav + sous-menus inclus */
.topnav a,
.topnav a:hover,
.topnav a:focus {
  text-decoration: none;
}

.topnav__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1rem;
  padding: 0.18rem 1.25rem; /* bandeau plus fin */
  width: 100%;
  min-width: 0;
}

.topnav__brand {
  display: flex;
  align-items: center;
  height: 34px;
  margin-right: 0.75rem;
  flex: 0 0 auto;
}

/* Logo mis en valeur : plus grand + léger contraste sur le fond foncé */
.topnav__brand img {
  height: 30px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Sur le bandeau foncé, toujours la version claire (blanche) du logo, quel que soit le thème */
.topnav .sidebar__logo-light { display: block !important; }
.topnav .sidebar__logo-dark { display: none !important; }

/* Toggler (hamburger) — hidden on desktop */
.topnav__toggler {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.topnav__toggler .material-symbols-outlined {
  font-size: 22px;
}

/* The per-item mobile expander button — hidden on desktop */
.topnav__expander {
  display: none;
}

.topnav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Static so the mega panel anchors to the whole nav, not the item */
.topnav__item {
  position: static;
}

/* ===== Level 1 (NIV1) : pill links — 12px ===== */
.topnav__link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.74); /* texte clair sur bandeau foncé */
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  border: 1px solid transparent; /* reserved so the active chip doesn't shift */
}

.topnav__link .material-symbols-outlined {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.74);
  opacity: 1;
}

.topnav__caret {
  font-size: 15px !important;
  transition: transform 0.2s ease;
}

/* Hover : léger voile clair + texte blanc */
.topnav__link:hover,
.topnav__item:focus-within > .topnav__link {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.topnav__link:hover .material-symbols-outlined,
.topnav__item:focus-within > .topnav__link .material-symbols-outlined {
  color: #fff;
  opacity: 1;
}

/* Actif NIV1 = chip blanc, texte violet — ressort fortement sur le bandeau foncé */
.topnav__link.active,
.topnav__item.active > .topnav__link {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  color: #5b21b6;
  font-weight: 600;
}

.topnav__item.active > .topnav__link .material-symbols-outlined {
  color: #5b21b6;
  opacity: 1;
}

/* ============================================================
   Trigger button (ouvre un tiroir, ne navigue pas) — hérite de .topnav__link
   ============================================================ */
.topnav__trigger {
  background: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.topnav__link-label {
  white-space: nowrap;
}

.topnav__item--drawer.is-open > .topnav__trigger .topnav__caret {
  transform: rotate(180deg);
}

/* ============================================================
   PANNEAU PLEIN ÉCRAN « cartes + arborescence » (design validé m23).
   Il s'ouvre SOUS la barre (top posé par topnav.js) — la barre reste
   visible et cliquable. Fond sombre uniforme ; accent par section via
   --dom (couleur du type de contact, ambre Ressources, bleu ciel Biblio).
   ============================================================ */
.topnav__drawer {
  position: fixed;
  inset: 0;
  top: 48px; /* recalé au pixel par topnav.js (hauteur réelle de la barre) */
  z-index: 1000;
  --dom: #6d28d9;                /* accent par défaut (violet) */
  /* compat : l'arbre/flat existants utilisent --ev-primary comme accent */
  --ev-primary: var(--dom);
  --ev-primary-rgb: 109, 40, 217;
}

/* Fallbacks en dur : un root.css périmé en cache navigateur ne doit JAMAIS rendre
   le panneau transparent (vécu au premier déploiement — root.css sans cache-buster). */
.topnav__drawer--ressources { --dom: var(--ev-nav-ress, #f59f00); }

.topnav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 24, 0.55);
}

.topnav__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  background: var(--ev-nav-dark, #17112f);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: topnavSlide 0.2s ease;
}

@keyframes topnavSlide {
  from { transform: translateY(10px); opacity: 0.4; }
  to   { transform: none; opacity: 1; }
}

/* Barre titre : icône + titre + actions (Stat, Fermer) sur la même ligne. Sticky. */
.topnav__panel-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
  background: var(--ev-nav-dark, #17112f);
}

.topnav__panel-ic {
  font-size: 21px !important;
  color: var(--dom);
}

.topnav__panel-bar strong {
  font-size: 14px;
  color: #fff;
}

.topnav__panel-close {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 9px;
  cursor: pointer;
}

.topnav__panel-close:hover { background: rgba(255, 255, 255, 0.2); }

/* Onglet « Stat » (EF31/D43) — bascule NON persistante des tampons vers les stats du type. */
.topnav__stat-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 10px;
  cursor: pointer;
}
.topnav__stat-toggle + .topnav__panel-close { margin-left: 8px; }
.topnav__stat-toggle .material-symbols-outlined { font-size: 16px; }
.topnav__stat-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.topnav__stat-toggle.is-active {
  background: #fff;
  color: var(--dom, #206bc4);
  border-color: #fff;
}
/* Feedback renforcé du mode Stat actif (ARB-04=A) : coche sur le bouton + bandeau explicite. */
.topnav__stat-toggle.is-active::after { content: '✓'; margin-left: 3px; font-weight: 700; }
.topnav__panel.is-stat-mode .topnav__panel-bar::after {
  content: 'Mode statistiques — les tampons mènent aux stats du type';
  flex: 1 1 100%;
  order: 99;
  margin-top: 4px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
}

/* Mode Stat actif : courbe décorative (SVG, aucune donnée — D43c) en fond des tampons. */
.topnav__panel.is-stat-mode .topnav__dcard {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 32 L20 24 L40 28 L60 12 L80 18 L100 6 L120 14' fill='none' stroke='%23206bc4' stroke-width='2' stroke-opacity='0.18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 60% 45%;
}

/* Onglets de types (pastille couleur du type) — réutilisé par les puces de filtre de la
   palette de recherche (topnav.js, groupes dynamiques). Le drawer Ressources n'utilise plus
   ces onglets (blocs empilés à la place, cf. .topnav__resblock). */
.topnav__typetabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.topnav__typetab {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.topnav__typetab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dom);
  flex: 0 0 auto;
}

/* Pastille de couleur du type devant chaque entrée de nav « type de contact »
   (Salarié/Client/Fournisseur…) — cf. topnav.html.twig, accès direct par type. */
.topnav__ctype-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dom, currentColor);
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.topnav__item--ctype .topnav__link { gap: 7px; }

.topnav__typetab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); }

.topnav__typetab.is-active {
  background: color-mix(in srgb, var(--dom) 24%, transparent);
  border-color: var(--dom);
  color: #fff;
}

/* Ressources : blocs par famille (Année scolaire, Niveau…) empilés, toujours tous visibles —
   plus de bascule par onglet (cf. topnav.html.twig, `.topnav__resblocks`). */
.topnav__resblocks {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.topnav__resblock + .topnav__resblock { border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* Un seul NIV1 (la famille elle-même) par bloc : pas besoin du flux masonry multi-colonnes
   pensé pour de nombreuses cartes (contact/objet) — 1 colonne pleine largeur. */
.topnav__resblock .topnav__deck-cats { column-width: auto; column-count: 1; }

/* Zone cartes : colonne fixe « Tous les X » + catégories en masonry */
.topnav__deck {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px 24px;
}

.topnav__deck-all { flex: 0 0 300px; max-width: 300px; }

.topnav__deck-cats {
  flex: 1;
  min-width: 0;
  column-width: 280px;
  column-gap: 14px;
}

/* Carte : GRILLE — icône en gouttière (2 lignes), titre à droite,
   arbre collé sous le titre (niv2 aligné sur le titre). */
.topnav__dcard {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 13px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 5px;
  align-items: start;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 12px;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.topnav__dcard:hover { border-color: color-mix(in srgb, var(--dom) 50%, transparent); }

/* Icône de type en « tampon administratif » — cohérent avec entity_header.css
   (.objet-hd-icon). Le drawer est sur fond sombre #17112f → encre = couleur du
   type (--dom) éclaircie à 62 %. Double cadre (plein + pointillé intérieur),
   légère inclinaison. Couvre types de contact/objet + Ressources (même cardDeck). */
.topnav__dcard-ic {
  --stamp-ink: color-mix(in srgb, var(--dom, #6d28d9) 62%, #fff);
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stamp-ink);
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--stamp-ink) 82%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dom, #6d28d9) 22%, transparent);
  transform: rotate(-4deg);
}
.topnav__dcard-ic::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px dashed color-mix(in srgb, var(--stamp-ink) 55%, transparent);
  border-radius: 8px;
  pointer-events: none;
}

.topnav__dcard-ic .material-symbols-outlined {
  font-size: 30px;
  color: var(--stamp-ink);
  opacity: 1;
}

.topnav__dcard-head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.topnav__dcard-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

a.topnav__dcard-title:hover,
.topnav__dcard-title.active { color: var(--dom); }

.topnav__dcard-sub {
  grid-column: 2;
  grid-row: 2;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
}

.topnav__dcard-go {
  margin-left: auto;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.35);
}

.topnav__dcard-tree { grid-column: 2; grid-row: 2; }

/* 1re carte « Tous les X » : accent plein du domaine */
.topnav__dcard--all {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dom) 28%, transparent),
    color-mix(in srgb, var(--dom) 10%, transparent));
  border-color: color-mix(in srgb, var(--dom) 40%, transparent);
  cursor: pointer;
}

.topnav__dcard--all .topnav__dcard-ic {
  --stamp-ink: #fff;
  background: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10);
}
.topnav__dcard--all .topnav__dcard-ic .material-symbols-outlined { color: #fff; }

/* Carte / entrée verrouillée (RBAC) */
.topnav__dcard.is-locked { opacity: 0.5; }
.topnav__dcard.is-locked .topnav__dcard-ic { --stamp-ink: #98a2b3; box-shadow: 0 0 0 3px rgba(152, 162, 179, 0.14); }
.topnav__dcard.is-locked .topnav__dcard-ic .material-symbols-outlined { color: #98a2b3; }
.topnav__dcard.is-locked .topnav__dcard-title { font-style: italic; cursor: default; }

/* Bouton annuaire (renvoie vers la liste du contact_type) */
.topnav__annuaire {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #4c1d95); /* violet foncé */
  flex: 0 0 auto;
}

.topnav__annuaire .material-symbols-outlined {
  font-size: 24px;
  color: #fff;
  opacity: 1;
}

/* Icône de tête (les X personnes) agrandie pour occuper la hauteur du bouton annuaire */
.topnav__annuaire .topnav__annuaire-ic {
  font-size: 40px;
  flex: 0 0 auto;
}

.topnav__annuaire-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topnav__annuaire-txt strong { font-size: 15px; }
.topnav__annuaire-txt small { font-size: 11.5px; opacity: 0.85; }
.topnav__annuaire-go { margin-left: auto; }
.topnav__annuaire:hover { filter: brightness(0.95); }

/* Texte annuaire toujours blanc sur le violet foncé (bat les règles de lien génériques). */
.topnav__drawer .topnav__annuaire,
.topnav__drawer .topnav__annuaire strong,
.topnav__drawer .topnav__annuaire small,
.topnav__drawer .topnav__annuaire .material-symbols-outlined {
  color: #fff;
}

/* Corps : 2 colonnes (NIV1 | détail) ou 1 colonne (liste plate) */
.topnav__cols {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.topnav__cols--single .topnav__col-left { display: none; }

.topnav__col-left {
  width: 216px;
  flex: 0 0 auto;
  /* violet clair — même paramètre de dégradé que les cartes (135deg) */
  background: linear-gradient(135deg, rgba(var(--ev-primary-rgb), 0.16), rgba(var(--ev-primary-rgb), 0.08));
  border-right: 1px solid rgba(var(--ev-primary-rgb), 0.14);
  padding: 10px;
  overflow: auto;
}

.topnav__col-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ev-body-color);
  opacity: 0.7;
  padding: 4px 10px 8px;
}

.topnav__niv1 { list-style: none; margin: 0; padding: 0; }

.topnav__niv1-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: none;
  padding: 10px;
  border-radius: 9px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ev-body-color);
  cursor: pointer;
  text-align: left;
}

.topnav__niv1-ic { font-size: 19px; opacity: 0.75; flex: 0 0 auto; }
.topnav__niv1-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topnav__niv1-caret { font-size: 18px; opacity: 0.4; flex: 0 0 auto; }
.topnav__niv1-btn:hover { background: rgba(255, 255, 255, 0.6); } /* pastille blanche sur la colonne violette */

/* NIV1 feuille (sans sous-niveau) = lien direct : flèche violette + état "courant" */
.topnav__niv1-btn--leaf .topnav__niv1-caret { color: var(--ev-primary); opacity: 0.75; }
.topnav__niv1-btn--leaf.is-current {
  background: #fff;
  color: var(--ev-primary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.topnav__niv1-btn--leaf.is-current .topnav__niv1-ic { color: var(--ev-primary); opacity: 1; }

/* Tiroir dont aucun NIV1 n'a de sous-niveau : la liste occupe toute la largeur (pas de colonne détail) */
.topnav__cols--leaves .topnav__col-right { display: none; }
.topnav__cols--leaves .topnav__col-left { width: 100%; border-right: 0; }

.topnav__niv1-btn.is-active {
  background: #fff;
  color: var(--ev-primary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.topnav__niv1-btn.is-active .topnav__niv1-ic,
.topnav__niv1-btn.is-active .topnav__niv1-caret { color: var(--ev-primary); opacity: 1; }

/* NIV1 grisé (droit indirect) : sélectionnable mais visuellement verrouillé */
.topnav__niv1-btn.is-locked { color: #98a2b3; }
.topnav__niv1-btn.is-locked .topnav__niv1-ic { opacity: 0.5; }
.topnav__niv1-btn.is-locked .topnav__niv1-lbl { font-style: italic; }

.topnav__lock { font-size: 15px !important; opacity: 0.7; flex: 0 0 auto; }

.topnav__col-right {
  flex: 1 1 auto;
  min-width: 0;
  /* violet très clair — même dégradé que les cartes, intensité moindre que la colonne 1 */
  background: linear-gradient(135deg, rgba(var(--ev-primary-rgb), 0.06), rgba(var(--ev-primary-rgb), 0.025));
  padding: 12px 14px 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.topnav__drawer-back {
  display: none;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--ev-primary);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 2px 0 4px;
  cursor: pointer;
}

.topnav__detail { display: none; flex-direction: column; gap: 6px; }
.topnav__detail.is-active { display: flex; }

.topnav__detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ev-body-color);
  padding: 8px;
  border-radius: 8px;
  background: rgba(var(--ev-primary-rgb), 0.05);
}
.topnav__detail-head .material-symbols-outlined { font-size: 19px; color: var(--ev-primary); }
.topnav__detail-head:hover { background: rgba(var(--ev-primary-rgb), 0.12); color: var(--ev-primary); }
.topnav__detail-head.is-locked {
  color: #98a2b3;
  background: #f2f4f7;
  cursor: default;
  font-style: italic;
}
.topnav__detail-head.is-locked .material-symbols-outlined { color: #98a2b3; }

.topnav__detail-empty {
  font-size: 12.5px;
  color: var(--ev-body-color);
  opacity: 0.7;
  font-style: italic;
  margin: 4px 8px;
}

/* Arborescence indentée (droite) */
.topnav__tree { list-style: none; margin: 0; padding: 0; }
.topnav__tree-children {
  margin-left: 9px;
  border-left: 1px solid var(--ev-border-color);
  padding-left: 6px;
}
.topnav__tree-li { position: relative; }

.topnav__tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ev-body-color);
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 7px;
}
.topnav__tree-node:hover { background: rgba(var(--ev-primary-rgb), 0.10); color: var(--ev-primary); }
.topnav__tree-node.is-strong { font-weight: 600; }
.topnav__tree-node.active { color: var(--ev-primary); font-weight: 600; }
.topnav__tree-node.is-locked { color: #98a2b3; cursor: default; font-style: italic; }
.topnav__tree-node.is-locked:hover { background: none; }

.topnav__tree-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ev-border-color); flex: 0 0 auto; }
.topnav__tree-dot.has { background: var(--ev-primary); }
.topnav__tree-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Liste plate (Bibliothèque, Paramétrage) */
.topnav__flat { list-style: none; margin: 0; padding: 0; }
.topnav__flat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ev-body-color);
  font-size: 13.5px;
  padding: 9px 10px;
  border-radius: 8px;
}
.topnav__flat-link .material-symbols-outlined { font-size: 19px; color: var(--ev-primary); opacity: 0.9; }
.topnav__flat-link:hover { background: rgba(var(--ev-primary-rgb), 0.08); color: var(--ev-primary); }
.topnav__flat-link.active {
  background: #fff;
  color: var(--ev-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.topnav__flat-sub { list-style: none; margin: 2px 0 4px; padding-left: 30px; }
.topnav__flat-link--sub { font-size: 12.5px; padding: 6px 8px; }

/* ============================================================
   Panneau sombre : recolorisation de l'arbre (dans les cartes) et
   des listes plates (Bibliothèque, Paramétrage).
   ============================================================ */
.topnav__panel .topnav__tree-node { color: rgba(255, 255, 255, 0.72); }
.topnav__panel .topnav__tree-node:hover {
  background: color-mix(in srgb, var(--dom) 14%, transparent);
  color: #fff;
}
.topnav__panel .topnav__tree-node.is-strong { color: rgba(255, 255, 255, 0.9); }
.topnav__panel .topnav__tree-node.active { color: var(--dom); }
.topnav__panel .topnav__tree-node.is-locked { color: #98a2b3; }
.topnav__panel .topnav__tree-node.is-locked:hover { background: none; }
.topnav__panel .topnav__tree-dot { background: rgba(255, 255, 255, 0.3); }
.topnav__panel .topnav__tree-dot.has { background: var(--dom); }
.topnav__panel .topnav__tree-children { border-left-color: rgba(255, 255, 255, 0.12); }

.topnav__panel .topnav__cols--single .topnav__col-right { background: none; padding: 14px 16px; }
.topnav__panel .topnav__flat-link { color: rgba(255, 255, 255, 0.78); border-radius: 10px; }
.topnav__panel .topnav__flat-link .material-symbols-outlined { color: var(--dom); }
.topnav__panel .topnav__flat-link:hover {
  background: color-mix(in srgb, var(--dom) 14%, transparent);
  color: #fff;
}
.topnav__panel .topnav__flat-link.active {
  background: color-mix(in srgb, var(--dom) 24%, transparent);
  color: #fff;
  box-shadow: none;
}

/* ============================================================
   RECHERCHE GLOBALE — loupe (barre) + palette type Cmd+K.
   La palette réutilise .topnav__drawer (plein écran sous la barre).
   ============================================================ */
.topnav__search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.42rem 0.8rem;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.topnav__search-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.topnav__search-btn .material-symbols-outlined { font-size: 18px; }

.topnav__search-kbd {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
}

.topnav__cmd {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 92%;
  max-height: calc(100% - 48px);
  background: var(--ev-nav-dark, #17112f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
}

.topnav__cmd-in {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topnav__cmd-in .material-symbols-outlined { color: rgba(255, 255, 255, 0.5); }

.topnav__cmd-close {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  padding: 4px;
  cursor: pointer;
}

.topnav__cmd-close:hover { color: #fff; }
.topnav__cmd-close .material-symbols-outlined { font-size: 18px !important; }

.topnav__cmd-input {
  background: none;
  border: 0;
  outline: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  flex: 1;
  min-width: 0;
}

.topnav__cmd-input::placeholder { color: rgba(255, 255, 255, 0.4); }

.topnav__cmd-filters {
  display: flex;
  gap: 6px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

/* puce de filtre — même gabarit que les onglets de types */
.topnav__cmd-filters .topnav__typetab { --dom: #fff; }

.topnav__cmd-res { overflow-y: auto; padding: 6px 8px 10px; }

.topnav__cmd-gh {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  padding: 12px 10px 5px;
}

.topnav__cmd-gh .topnav__typetab-dot { width: 7px; height: 7px; }

.topnav__cmd-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  cursor: pointer;
}

.topnav__cmd-row .topnav__cmd-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--dom) 18%, transparent);
}

.topnav__cmd-row .topnav__cmd-ic .material-symbols-outlined { font-size: 17px; color: var(--dom); }

.topnav__cmd-lbl { flex: 1; min-width: 0; }

.topnav__cmd-lbl b {
  display: block;
  font-weight: 600;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav__cmd-lbl small { font-size: 11px; color: rgba(255, 255, 255, 0.45); }

.topnav__cmd-row mark {
  background: color-mix(in srgb, var(--dom) 40%, transparent);
  color: #fff;
  border-radius: 3px;
  padding: 0 2px;
}

.topnav__cmd-go { font-size: 16px !important; color: rgba(255, 255, 255, 0.3); }

.topnav__cmd-row.is-sel {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--dom);
}

.topnav__cmd-empty {
  padding: 26px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}

.topnav__cmd-ft {
  display: flex;
  gap: 15px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  flex-wrap: wrap;
}

@media (width < 992px) {
  /* Panneau/palette ouvert en mobile : la barre se replie ENTIÈREMENT —
     tout l'écran pour la structure. « Fermer » (ou Échap) la restaure.
     ⚠️ PAS de display:none : le tiroir (position:fixed) est un DESCENDANT de la
     barre — un display:none le masquerait aussi. Hauteur 0 + overflow:hidden :
     le contenu de barre est replié, le panneau fixed échappe au clipping. */
  .topnav--panel-open .topnav__bar {
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  .topnav--panel-open { border-bottom: 0; }

  .topnav__search-lbl,
  .topnav__item--search .topnav__search-kbd { display: none; }
  .topnav__search-btn { padding: 0.42rem 0.55rem; }
  .topnav__cmd {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

/* Responsive du panneau cartes : « Tous les X » puis catégories empilées. */
@media (width < 992px) {
  .topnav__deck { flex-direction: column; }
  .topnav__deck-all { flex: 0 0 auto; max-width: none; width: 100%; }
  .topnav__deck-cats { column-width: auto; column-count: 1; width: 100%; }
  .topnav__dcard-ic { width: 52px; height: 52px; }
  .topnav__dcard-ic .material-symbols-outlined { font-size: 30px; }
}

/* ============================================================
   Responsive: hamburger + accordions
   ============================================================ */
@media (width < 992px) {
  .topnav__toggler {
    display: inline-flex;
    align-items: center;
  }

  /* Barre mobile : on garde le bouton LiveEdit (Lecture/édition) visible à côté
     du hamburger ; les liens de navigation (et profil/paramétrage) se replient
     dans le menu. Le bouton LiveEdit n'a pas de menu déroulant → sûr à exposer. */
  .topnav__toggler { order: 3; }
  .topnav__list {
    order: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    gap: 4px;
    margin: 0 4px 0 auto;
  }
  .topnav:not(.topnav--open) .topnav__list > .topnav__item:not(.topnav__item--actions) {
    display: none;
  }
  .topnav:not(.topnav--open) .topnav__list > .topnav__item--actions {
    width: auto;
  }

  /* ---- REFONTE 2026-07-18 : les 2 actions de barre = boutons PLEINE HAUTEUR
     collés au bord droit — [Modif (crayon)] [Menu (burger)], séparés par un
     filet clair, sans arrondi ni bordure flottante. ---- */
  .topnav__bar { padding-top: 0; padding-bottom: 0; padding-right: 0; column-gap: 0; }
  .topnav__brand { height: 44px; margin-right: 0; }
  .topnav__toggler {
    align-self: stretch;
    margin: 0;
    padding: 0 15px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
  }
  .topnav:not(.topnav--open) .topnav__list {
    align-self: stretch;
    align-items: stretch;
    gap: 0;
    margin: 0 0 0 auto;
    flex: 0 0 auto;   /* sans grow : le margin-left auto colle [crayon][menu] à droite */
  }
  /* Barre fermée : TOUT est replié sauf les actions — y compris les <li> qui
     ne portent pas .topnav__item (en-têtes .topnav__mnav-h → filet fantôme). */
  .topnav:not(.topnav--open) .topnav__list > :not(.topnav__item--actions) {
    display: none;
  }
  .topnav:not(.topnav--open) .topnav__list > .topnav__item--actions {
    display: flex;
    width: auto;
    flex: 0 0 auto;   /* compact : ne pas hériter du width:100% des items mobiles */
    margin: 0;
    padding: 0;       /* colle le crayon au filet du burger (li paddé de 8px sinon) */
  }
  .topnav:not(.topnav--open) .topnav__item--actions .tab-actions { display: flex; height: 100%; flex: 0 0 auto; }
  .topnav:not(.topnav--open) .live-mode-btn {
    width: auto;
    height: 100%;
    padding: 0 15px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
  }
  .topnav:not(.topnav--open) .live-mode-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .topnav:not(.topnav--open) .live-mode-btn.is-live { background: var(--ev-primary); color: #fff; }
  /* Icône « Modif » = CRAYON en permanence (le JS bascule lock/edit : on masque
     la ligature réelle et on rend « edit » via ::before ; l'état LiveEdit reste
     signalé par le fond violet is-live). */
  .topnav:not(.topnav--open) .live-mode-btn .material-symbols-outlined { font-size: 0; }
  .topnav:not(.topnav--open) .live-mode-btn .material-symbols-outlined::before { content: "edit"; font-size: 22px; }

  .topnav.topnav--open .topnav__list {
    order: 4;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 0;
    margin: 0.5rem 0 0;
  }

  .topnav__item {
    width: 100%;
  }

  .topnav__link {
    padding: 0.7rem 0.6rem;
    border-radius: 8px;
  }

  /* Déclencheurs de tiroir : pleine largeur, TEXTE ALIGNÉ À GAUCHE, chevron à droite */
  .topnav__trigger {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
  .topnav__link-label { flex: 1 1 auto; text-align: left; }
  .topnav__trigger .topnav__caret { margin-left: auto; display: inline-flex; }

  /* Tiroir plein écran sur mobile */
  .topnav__panel {
    width: 100%;
    max-width: none;
    border-right: 0;
    box-shadow: none;
    animation: none;
  }
  .topnav__scrim { display: none; }
  .topnav__panel-bar { display: flex; }

  /* 2 colonnes empilées + drill-down : liste NIV1 → arbre plein écran + Retour */
  .topnav__cols { flex-direction: column; }
  .topnav__col-left {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ev-border-color);
  }
  .topnav__niv1-btn { padding: 14px 12px; }
  .topnav__col-right { display: none; }
  .topnav__cols.is-drilled .topnav__col-left { display: none; }
  .topnav__cols.is-drilled .topnav__col-right { display: flex; }
  .topnav__drawer-back { display: flex; }

  /* Tiroir 1 colonne (Bibliothèque, Paramétrage) : la liste reste visible (pas de drill-down) */
  .topnav__cols--single .topnav__col-right { display: flex; }

  .topnav__item--profile {
    margin-left: 0;
  }

  .topnav__profile-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    min-width: 0;
    padding: 0 0 0 1rem;
  }
}

/* ============================================================
   User profile — moved into the nav, right side
   ============================================================ */
.topnav__item--actions {
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
}

/* Cluster aligné à droite : actions (optionnel) → paramétrage (optionnel, admin)
   → profil. Seul le PREMIER élément présent porte la marge auto, sinon l'espace
   libre serait partagé entre plusieurs marges et créerait des trous. */
.topnav__item--search,
.topnav__item--actions,
.topnav__item--settings,
.topnav__item--profile {
  margin-left: auto;
}
.topnav__item--search ~ .topnav__item--actions,
.topnav__item--search ~ .topnav__item--settings,
.topnav__item--search ~ .topnav__item--profile,
.topnav__item--actions ~ .topnav__item--settings,
.topnav__item--actions ~ .topnav__item--profile,
.topnav__item--settings ~ .topnav__item--profile {
  margin-left: 0;
}

.topnav__item--profile {
  position: relative; /* anchor its own (non full-width) dropdown */
}

.topnav__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #6d28d9; /* violet — visible sur le bandeau foncé */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.topnav__profile-trigger {
  padding: 0.3rem;
}

.topnav__profile-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 270px;
  padding: 12px;
  background: var(--ev-topbar-bg);
  border: 1px solid var(--ev-border-color);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 60;
}

.topnav__item--profile:hover > .topnav__profile-menu,
.topnav__item--profile:focus-within > .topnav__profile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* bridge so the menu stays open while moving the cursor down into it */
.topnav__profile-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

/* name + e-mail in a card, "comme tous les clients" */
.topnav__profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ev-border-color);
  border-radius: 10px;
  background: #fff;
}

.topnav__avatar--lg {
  width: 42px;
  height: 42px;
  font-size: 15px;
  flex: 0 0 auto;
}

.topnav__profile-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topnav__profile-info strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-body-color);
}

.topnav__profile-mail {
  font-size: 13px;
  color: var(--ev-body-color);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Switch rapide 3 icônes (Jour/Sombre/Atténué) dans le menu profil */
.topnav__theme-switch {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.topnav__theme-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid var(--ev-border-color);
  border-radius: 8px;
  background: #fff;
  color: var(--ev-body-color);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.topnav__theme-btn .material-symbols-outlined {
  font-size: 19px;
}

.topnav__theme-btn:hover {
  background: rgba(var(--ev-primary-rgb), 0.08);
  border-color: var(--ev-primary);
  color: var(--ev-primary);
}

.topnav__theme-btn.is-active {
  background: var(--ev-primary);
  border-color: var(--ev-primary);
  color: #fff;
}

.topnav__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ev-danger-color, #f4212e);
  border: 1px solid var(--ev-border-color);
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.topnav__logout:hover {
  background: rgba(244, 33, 46, 0.08);
  border-color: rgba(244, 33, 46, 0.4);
}

.topnav__logout .material-symbols-outlined {
  font-size: 18px;
}

/* Lien "Apparence" dans le menu profil (même gabarit que la déconnexion) */
.topnav__profile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ev-body-color);
  border: 1px solid var(--ev-border-color);
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.topnav__profile-link:hover {
  background: rgba(16, 24, 40, 0.04);
  border-color: var(--ev-primary);
  color: var(--ev-primary);
}

.topnav__profile-link .material-symbols-outlined {
  font-size: 18px;
}

/* ============================================================
   Liens icône seule (Accueil) + bulle Paramétrage façon avatar
   ============================================================ */
.topnav__link--icon {
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

/* Accueil (icône seule) actif : simple voile clair, pas de gros disque blanc —
   pour ne pas concurrencer le logo. */
.topnav__link--icon.active,
.topnav__item.active > .topnav__link--icon {
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
  box-shadow: none;
}
.topnav__link--icon.active .material-symbols-outlined,
.topnav__item.active > .topnav__link--icon .material-symbols-outlined {
  color: #fff;
}

.topnav__link--bubble,
.topnav__item--settings.active > .topnav__link--bubble,
.topnav__link--bubble:hover {
  padding: 0.3rem;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Bulle Paramétrage : même forme que l'avatar profil, couleur dédiée */
.topnav__avatar--admin {
  background: var(--ev-secondary, #6c5ce7);
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.topnav__avatar--admin .material-symbols-outlined {
  font-size: 18px;
  color: #fff;
  opacity: 1;
}

.topnav__item--settings:hover .topnav__avatar--admin,
.topnav__avatar--admin.active {
  filter: brightness(0.92);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
}

/* ============================================================
   Page top line (heading + bulk-edit toolbar) — replaces the old topbar
   ============================================================ */
.page-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-topline > .page-heading {
  margin-bottom: 0.75rem;
}

/* ============================================================
   MENU MOBILE DÉPLIÉ — design 20 validé (2026-07-18) :
   recherche en tête, sections Naviguer/Outils, cartes à carré
   d'icône teintées par domaine, profil épinglé en pied.
   Ces règles viennent APRÈS le bloc responsive historique et
   le remplacent visuellement dans l'état .topnav--open.
   ============================================================ */
.topnav__mnav-h,
.topnav__mnav-lbl,
.topnav__item--mprofile { display: none; }

@media (width < 992px) {
  /* le bandeau déplié devient un fond sombre uniforme (même valeur que le panneau) */
  .topnav.topnav--open { background: var(--ev-nav-dark, #17112f); }

  .topnav.topnav--open .topnav__list {
    order: 4;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 7px;
    margin: 8px 0 0;
    padding: 0 2px 12px;
    /* le profil se colle en bas : le menu occupe l'écran restant */
    min-height: calc(100dvh - 96px);
  }

  /* ---- ordre visuel : recherche > Naviguer > entrées > Outils > … > profil ---- */
  .topnav--open .topnav__item--search { order: -2; }
  .topnav--open .topnav__mnav-h { order: 0; }
  .topnav--open .topnav__item--mprofile { order: 98; margin-top: auto; }

  /* ---- en-têtes de section ---- */
  .topnav--open .topnav__mnav-h {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.38);
    padding: 8px 6px 0;
  }

  /* ---- recherche en tête, façon champ ---- */
  .topnav--open .topnav__item--search { width: 100%; }
  .topnav--open .topnav__search-btn {
    width: 100%;
    justify-content: flex-start;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 13px;
    color: rgba(255, 255, 255, 0.5);
  }
  .topnav--open .topnav__search-lbl { display: inline; }

  /* ---- entrées = cartes à carré d'icône (vocabulaire du panneau) ---- */
  .topnav--open .topnav__link {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    padding: 8px 11px;
    gap: 11px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 13px;
    width: 100%;
  }
  .topnav--open .topnav__mnav-lbl { display: inline; }
  .topnav--open .topnav__link-label { flex: 1 1 auto; text-align: left; }

  /* carré d'icône : neutre par défaut… */
  .topnav--open .topnav__link > .material-symbols-outlined:first-child {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 20px;
    flex: 0 0 auto;
  }
  /* …teinté par domaine */
  .topnav--open .topnav__item--crm .topnav__link > .material-symbols-outlined:first-child {
    background: rgba(109, 40, 217, 0.22);
    color: #a78bfa;
  }
  .topnav--open .topnav__item--crm .topnav__link {
    background: rgba(109, 40, 217, 0.12);
    border-color: rgba(109, 40, 217, 0.4);
  }
  .topnav--open .topnav__item--ressources .topnav__link > .material-symbols-outlined:first-child {
    background: rgba(245, 159, 0, 0.18);
    color: var(--ev-nav-ress, #f59f00);
  }
  .topnav--open .topnav__item--biblio .topnav__link > .material-symbols-outlined:first-child {
    background: rgba(56, 189, 248, 0.16);
    color: var(--ev-nav-biblio, #38bdf8);
  }

  /* l'état actif ne redevient pas un chip blanc : simple accent violet */
  .topnav--open .topnav__link.active,
  .topnav--open .topnav__item.active > .topnav__link {
    background: rgba(109, 40, 217, 0.18);
    border-color: rgba(109, 40, 217, 0.45);
    color: #fff;
    box-shadow: none;
  }
  .topnav--open .topnav__item.active > .topnav__link .material-symbols-outlined { color: #c4b5fd; }

  /* Paramétrage : la bulle devient le carré d'icône de sa carte */
  .topnav--open .topnav__link--bubble {
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
  }
  .topnav--open .topnav__avatar--admin {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.08);
  }

  /* ---- profil épinglé en pied : avatar + nom + actions inline ---- */
  .topnav--open .topnav__item--profile { display: none; }
  .topnav--open .topnav__item--mprofile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 6px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .topnav--open .topnav__item--mprofile .topnav__avatar { width: 32px; height: 32px; }
  .topnav__mprofile-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topnav__mprofile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
  }
  .topnav__mprofile-btn .material-symbols-outlined { font-size: 18px; }
  .topnav__mprofile-btn--logout { color: #f87171; }
}