/* ============================================================
   admin.css — Chrome admin SOURCE UNIQUE DE VÉRITÉ (B5)
   Layout admin (header full-width + body 2 colonnes sidebar/main) +
   sidebar admin 3 états responsive (drawer mobile < 1024 / collapse
   1024-1279 / étendue ≥ 1280) + tooltips collapse + badges + overlay.

   Extrait des <style> inline divergents de admin/index.html et
   admin/apparence/index.html (bug B5 · titres catégories décalés +
   --actif alpha incohérent). La sidebar PERSISTE en DOM cross-SPA
   (router.js · seul <main> est swappé) → son CSS DOIT être unique.

   Référence canonique = dashboard (version complète 3 états).
   Le CSS page-spécifique (KPI/tickets dashboard · formulaire/pickers
   apparence) reste inline dans chaque page.
   Cohérent DECISIONS §29.11 (badges) + retours utilisateur it1/it2bis.
   ============================================================ */

body { background: var(--background-section); }

.admin-layout {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

/* Header global FULL-WIDTH (row 1, span all cols) */
.admin-header {
  grid-row: 1;
  background: var(--background-card);
  border-bottom: 1px solid var(--border-subtil);
  padding: var(--espacement-sm) var(--espacement-lg);
  display: flex;
  align-items: center;
  gap: var(--espacement-md);
  position: sticky;
  top: 0;
  z-index: var(--z-header-fixe);
  min-height: 64px;
}

/* Brand intégré dans header (au lieu de sidebar) */
.admin-header__brand {
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  text-decoration: none;
  color: var(--text-page);
  padding-right: var(--espacement-md);
  border-right: 1px solid var(--border-subtil);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .admin-header__brand { border-right: none; padding-right: 0; }
}

/* B6 retours4 · vrai blason municipal SVG (au lieu du « F ») · cf. chrome.css */
.admin-header__brand-blason {
  width: 32px;
  height: 32px;
  border-radius: var(--rayon-md);
  background: transparent url("../img/blason-fourques.svg") center / contain no-repeat;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  flex-shrink: 0;
}

/* Retours7 · « Fourques / 66300 » affiché aussi en MOBILE (à côté du
   blason · cohérent tablette + header public · identité commune visible). */
.admin-header__brand-corps { display: block; }

.admin-header__brand-nom {
  font-weight: var(--poids-bold);
  font-size: var(--texte-sm);
  line-height: var(--interligne-tight);
}

.admin-header__brand-sous {
  font-size: var(--texte-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: var(--interligne-tight);
}

.admin-header__fil-ariane {
  display: none;
  align-items: center;
  gap: var(--espacement-sm);
  flex: 1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .admin-header__fil-ariane { display: flex; }
}

.admin-header__fil-ariane-lien {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--texte-sm);
}

.admin-header__fil-ariane-lien:hover { color: var(--commune-primary); }

.admin-header__fil-ariane-courant {
  color: var(--text-page);
  font-weight: var(--poids-semibold);
  font-size: var(--texte-sm);
}

.admin-header__separator { color: var(--text-muted); }

/* Retours10 · recherche TOUJOURS visible (avant : `display:none` <1024 →
   pas de loupe en mobile/tablette · retour utilisateur). Mobile/tablette
   = bouton loupe compact 40×40 (libellé masqué) groupé à droite avec
   notif + avatar · Desktop = barre pleine avec champ. */
.admin-recherche {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;          /* groupe loupe+notif+avatar à droite (mobile/tablette) */
}

@media (min-width: 1024px) {
  .admin-recherche { flex: 1; max-width: 480px; margin-left: 0; }
}

/* R13-3 · le champ ouvert REMPLIT toute la barre `.admin-recherche` :
   `.pc-palette__champ-conteneur` a un `max-width:460px` générique <
   480px du bandeau → il paraissait « plus petit que la barre ». Sans
   cap dans le contexte admin, il occupe exactement la largeur du
   trigger → on a l'impression de « rentrer dans » la barre. */
.admin-recherche .pc-palette__champ-conteneur { max-width: none; }

/* R12-E · mobile/tablette · la recherche ouverte REMPLACE le brand et
   s'étend depuis la GAUCHE. Sans ça `.admin-recherche` (flex-shrink:0 +
   margin-left:auto en mobile) gardait le champ collé à droite → la page
   « s'élargissait » et débordait. :has() réagit à la présence du champ
   relocalisé dans `.admin-recherche` · à la fermeture il repart dans le
   holder → le brand réapparaît (zéro JS · cohérent pattern public). */
@media (max-width: 1023.98px) {
  .admin-header:has(.pc-palette__champ-conteneur) .admin-header__brand { display: none; }
  .admin-header:has(.pc-palette__champ-conteneur) .admin-recherche {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
  }
  /* `.admin-header` est un grid-item de `.admin-layout` (grid-template-
     columns:1fr · min-width:auto par défaut) → sans contrainte il
     s'élargit au min-content du champ ouvert et la page « s'élargit »
     (débordement). min-width:0 le borne à la piste 1fr (= viewport) →
     le flex rétrécit alors le champ · plus de débordement. Scopé :has
     → l'état normal (sans recherche) reste byte-identique (KEYSTONE). */
  .admin-header:has(.pc-palette__champ-conteneur) { min-width: 0; }
}

/* R13-5 · mobile/tablette · la loupe doit être COLLÉE au groupe
   cloche + avatar (à droite), pas centrée entre le brand et la cloche.
   `.admin-recherche` ET `.admin-header__actions` avaient chacun
   `margin-left:auto` → deux marges auto se partagent l'espace libre →
   la loupe finissait au milieu. On retire l'auto de
   `.admin-header__actions` : seule celle de `.admin-recherche` subsiste
   → elle pousse TOUT le cluster droit (loupe + cloche + avatar)
   ensemble à droite, loupe juste à gauche de la cloche. */
@media (max-width: 1023.98px) {
  .admin-header__actions { margin-left: 0; }
}

/* R13-5 · à l'ouverture le champ se RÉVÈLE de gauche à droite (effet
   « progressbar ») · clip-path = zéro distorsion du contenu (vs
   scaleX) · cumulé au fondu générique · rejoué à chaque ouverture
   (le champ est ré-inséré dans `.admin-recherche`). */
@keyframes pc-champ-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.admin-recherche .pc-palette__champ-conteneur {
  animation: pc-palette-fade 130ms ease, pc-champ-reveal 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .admin-recherche .pc-palette__champ-conteneur { animation: none; }
}

.admin-recherche__bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacement-sm);
  width: 40px;
  height: 40px;
  padding: 0;                 /* loupe compacte mobile/tablette */
  background: var(--gris-50);
  border: 1px solid var(--border-subtil);
  border-radius: var(--rayon-md);
  color: var(--text-muted);
  font-size: var(--texte-sm);
  cursor: pointer;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}

.admin-recherche__bouton span { display: none; }

@media (min-width: 1024px) {
  .admin-recherche__bouton {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding: var(--espacement-sm) var(--espacement-md);
  }
  .admin-recherche__bouton span { display: inline; }
}

.admin-recherche__bouton:hover {
  background: var(--background-card);
  border-color: var(--commune-primary);
}

.admin-recherche__bouton:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-header__actions {
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  margin-left: auto;
}

.admin-profil {
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  padding: 4px var(--espacement-sm) 4px 4px;
  background: var(--background-card);
  border: 1px solid var(--border-subtil);
  border-radius: var(--rayon-rond);
  text-decoration: none;
  color: var(--text-page);
  transition: border-color var(--transition-standard);
}

.admin-profil:hover {
  border-color: var(--commune-primary);
  color: var(--text-page);
  text-decoration: none;
}

.admin-profil:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Retours6 · mobile · le corps (nom/rôle) est masqué → padding symétrique
   pour que l'avatar « FS » soit CENTRÉ dans le conteneur (sinon décalé à
   gauche à cause du padding droit prévu pour le texte). */
@media (max-width: 767.98px) {
  .admin-profil { padding: 4px; gap: 0; }
}

.admin-profil__avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--commune-gradient-hero);
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--poids-bold);
  font-size: var(--texte-xs);
  flex-shrink: 0;
  line-height: 1;
}

.admin-profil__corps { display: none; }
@media (min-width: 768px) {
  .admin-profil__corps {
    display: flex;
    flex-direction: column;
  }
}

.admin-profil__nom {
  font-size: var(--texte-sm);
  font-weight: var(--poids-semibold);
  line-height: var(--interligne-tight);
}

.admin-profil__role {
  font-size: var(--texte-xs);
  color: var(--text-muted);
  line-height: var(--interligne-tight);
}

/* ============================================================
   Sidebar admin responsive (N4 it2bis)
   — < 768px (mobile) : drawer hamburger, sidebar pleine étendue
   — 768-1023px (tablet) : drawer + toggle complet/icône dans le drawer
   — ≥ 1024px (desktop) : sidebar permanente, toggle complet/icône
   Persistance toggle : localStorage `pcAdminSidebarCollapsed`.
   ============================================================ */
.admin-body {
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  position: relative;
  transition: grid-template-columns 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
  .admin-body { grid-template-columns: 264px 1fr; }
}

@media (min-width: 1024px) {
  .admin-body--sidebar-collapsed { grid-template-columns: 64px 1fr; }
  /* Retours10 · no-flash AVANT 1er paint : un script inline <head> pose
     `html.pc-admin-collapsed-init` (état réduit persisté) AVANT que le
     CSS s'applique → `.admin-body` calcule directement 64px à la 1ère
     résolution (valeur initiale, AUCUN changement → AUCUNE transition).
     navigation.js ajoute ensuite `.admin-body--sidebar-collapsed`
     (même 64px → toujours aucun changement) puis retire la classe init.
     Le `setTimeout` round-8-suite reposait sur du JS post-paint : le
     snap restait visible · le pré-paint l'élimine vraiment. */
  html.pc-admin-collapsed-init .admin-body { grid-template-columns: 64px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-body { transition: none; }
}

/* Retours8-suite · garde-fou complémentaire (chemin JS) · pas
   d'animation de repli au CHARGEMENT (F5 sur état réduit persisté).
   JS pose .pc-no-anim avant d'appliquer l'état persistant puis le
   retire au 1er frame → seules les actions utilisateur (toggle) animent. */
.admin-body.pc-no-anim,
.admin-body.pc-no-anim .admin-sidebar { transition: none; }

/* Retours8 R8.1 · `.admin-main` (wrapper chrome persistant cross-SPA · HORS
   <main>) CANONIFIÉ ici (SOURCE UNIQUE · cohérent keystone §39.1 · §40.3 · B5).
   Cause racine de la régression centrage dashboard mobile : `.admin-main`
   était défini DIVERGENT en <style> inline (dashboard = flex column sans
   padding · apparence = padding lg/md). Le router ne retire que les
   <style data-spa-injected> : après F5 sur apparence puis retour SPA
   dashboard, le <style> d'origine d'apparence (non marqué) PERSISTE et son
   `.admin-main{padding}` s'unionne au dashboard → le greeting se resserre.
   Règle unique partagée + padding de contenu déplacé sur l'inner page-
   spécifique (apparence = .admin-main__inner · dashboard = .admin-contenu
   inline · pas de collision cross-page). */
.admin-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.admin-main__inner {
  width: 100%;            /* largeur = conteneur (pas le min-content des enfants ·
                             un item flex ne rétrécissait pas → 551px sur 375) */
  max-width: 880px;
  margin: 0 auto;
  padding: var(--espacement-lg) var(--espacement-md);
  overflow-x: hidden;
  min-width: 0;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .admin-main__inner { padding: var(--espacement-xl) var(--espacement-xl); }
}

.admin-sidebar {
  background: var(--background-card);
  border-right: 1px solid var(--border-subtil);
  padding: var(--espacement-md) var(--espacement-sm);
  position: sticky;
  top: 64px;
  align-self: start;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
  padding-bottom: max(var(--espacement-md), env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .admin-sidebar { display: block; }
}

.admin-sidebar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 var(--espacement-md) auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rayon-md);
  color: var(--text-secondaire);
  cursor: pointer;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}

/* Retours6 C1 · le toggle réduire/étendre n'a de sens qu'en DESKTOP
   (rail d'icônes en grille) · en tablette/mobile le drawer est plein
   (ouvert/fermé par le hamburger · pas de rail) → toggle masqué <1024. */
@media (min-width: 1024px) {
  .admin-sidebar__toggle { display: inline-flex; }
}

.admin-sidebar__toggle:hover {
  background: var(--commune-primary-alpha-10);
  color: var(--commune-primary);
}

.admin-sidebar__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* État collapsed · Desktop OU Tablet drawer ouvert avec toggle activé.
   R12-B · clarification utilisateur : (a) l'icône est CENTRÉE dans l'axe
   HORIZONTAL du rail 64px (corrige le « collé gauche » round 11, qui
   était une mauvaise interprétation), (b) le Y de CHAQUE icône + sa
   taille (18px) restent STRICTEMENT IDENTIQUES à l'étendu. Donc au
   collapse on NE touche PAS au rythme vertical : le titre de groupe et
   l'espacement inter-groupes gardent EXACTEMENT la boîte de l'étendu
   (plus de max-height:0 / margin:0 / margin-bottom:0 qui remontaient
   toutes les icônes du dessous · plus de min-height:48px qui allongeait
   chaque lien), seul le TEXTE des libellés/titres devient invisible —
   l'espace vertical qu'il occupe est préservé. */
.admin-body--sidebar-collapsed .admin-sidebar__groupe-titre,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__groupe-titre {
  /* boîte identique à l'étendu (font-size/padding/margin INCHANGÉS) ·
     nowrap+overflow fige la hauteur sur 1 ligne malgré le rail 64px ·
     visibility:hidden masque le texte SANS retirer l'espace vertical. */
  visibility: hidden;
  opacity: 0;
  /* R13-1 · au REpliage, disparaît IMMÉDIATEMENT (délai 0 · début de
     l'anim) · au DÉ-pliage c'est la règle de base (délai 210ms) qui
     reprend la main → apparition seulement sidebar pleinement ouverte. */
  transition: opacity 110ms ease 0s, visibility 0s linear 0s;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.admin-body--sidebar-collapsed .admin-sidebar__lien,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien {
  /* padding VERTICAL = sm = étendu → hauteur du lien (et donc Y de
     l'icône) STRICTEMENT INCHANGÉE · padding HORIZONTAL = 0 pour que
     `justify-content:center` centre l'icône 18px dans toute la largeur
     de contenu du rail (64px − 2× padding `sm` symétrique de
     `.admin-sidebar` = 48px → centre icône à 8+24 = 32px = centre EXACT
     du rail 64px) · AUCUN min-height (l'étendu n'en a pas → en ajouter
     décalerait le Y · consigne R12-B). */
  justify-content: center;
  padding: var(--espacement-sm) 0;
  gap: 0;
}
.admin-body--sidebar-collapsed .admin-sidebar__lien-label,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 120ms ease, max-width 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-sidebar__lien-label {
  max-width: 200px;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 150ms ease 50ms, max-width 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-body--sidebar-collapsed .admin-sidebar__lien-badge,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  margin: 0;
  font-size: 9px;
  padding: 0 4px;
  min-width: 14px;
  line-height: 14px;
}

/* Tickets double badges en collapse · gris "7" exposant + rouge "3" indice */
.admin-body--sidebar-collapsed .admin-sidebar__lien-tickets-double,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien-tickets-double {
  position: absolute;
  top: 2px;
  right: 4px;
  margin: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  align-items: center;
  pointer-events: none;
}
.admin-body--sidebar-collapsed .admin-sidebar__lien-tickets-double .admin-sidebar__lien-badge--urgent,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien-tickets-double .admin-sidebar__lien-badge--urgent {
  grid-row: 2;
}
.admin-body--sidebar-collapsed .admin-sidebar__lien-tickets-double .admin-sidebar__lien-badge:not(.admin-sidebar__lien-badge--urgent),
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien-tickets-double .admin-sidebar__lien-badge:not(.admin-sidebar__lien-badge--urgent) {
  grid-row: 1;
}
.admin-body--sidebar-collapsed .admin-sidebar__lien-tickets-double .admin-sidebar__lien-badge,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien-tickets-double .admin-sidebar__lien-badge {
  position: static;
  font-size: 8px;
  padding: 0 3px;
  min-width: 12px;
  line-height: 12px;
  font-weight: var(--poids-bold);
}

.admin-body--sidebar-collapsed .admin-sidebar__toggle,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__toggle {
  margin: 0 auto var(--espacement-md) auto;
  align-self: center;
}

/* Tooltip révélé au hover/focus en collapse · position fixed (pas d'overflow) */
.admin-body--sidebar-collapsed .admin-sidebar__lien[data-tooltip],
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien[data-tooltip] {
  position: relative;
}
.admin-body--sidebar-collapsed .admin-sidebar__lien[data-tooltip]:hover::after,
.admin-body--sidebar-collapsed .admin-sidebar__lien[data-tooltip]:focus-visible::after,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien[data-tooltip]:hover::after,
.admin-sidebar--collapsed-dans-drawer .admin-sidebar__lien[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: fixed;
  left: 70px;
  transform: translateY(-50%);
  background: var(--gris-900);
  color: var(--text-inverse);
  padding: var(--espacement-xs) var(--espacement-sm);
  border-radius: var(--rayon-md);
  font-size: var(--texte-xs);
  font-weight: var(--poids-medium);
  white-space: nowrap;
  z-index: var(--z-tooltip, 999);
  pointer-events: none;
  box-shadow: var(--ombre-md);
}

/* Drawer overlay mobile + tablet (< 1024px) ·
   Retours4 B5 · démarre SOUS le header (top = hauteur header · 64px ·
   cohérent .admin-sidebar desktop) · ne chevauche plus le header. */
@media (max-width: 1023.98px) {
  .admin-sidebar {
    display: block;
    position: fixed;
    top: 64px;
    left: 0;
    height: calc(100dvh - 64px);
    width: 280px;
    max-width: 85vw;
    max-height: none;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94), width 200ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    box-shadow: var(--ombre-lg);
    padding-top: var(--espacement-lg);
    padding-bottom: max(var(--espacement-lg), env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }
  .admin-sidebar.admin-sidebar--ouverte {
    transform: translateX(0);
  }
}

/* Tablet drawer collapsé · sidebar passe à 64px */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .admin-sidebar.admin-sidebar--collapsed-dans-drawer {
    width: 64px;
    max-width: 64px;
  }
}

/* Mobile pur (< 768px) · Retours4 B5 · l'état collapsé = VRAI rail d'icônes
   64px (cohérent tablette · après navigation SPA le drawer se réduit en
   icônes au lieu de se fermer · avis dev senior + Maire non-tech). Les
   libellés/titres sont masqués par les règles génériques
   .admin-sidebar--collapsed-dans-drawer (non scopées média) ci-dessus. */
@media (max-width: 767.98px) {
  .admin-sidebar__toggle { display: none !important; }
  .admin-sidebar.admin-sidebar--collapsed-dans-drawer {
    width: 64px;
    max-width: 64px;
  }
}

.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;            /* Retours4 B5 · sous le header · hamburger reste accessible */
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  animation: pcAdminOverlayFadeIn 200ms ease-out;
}

.admin-sidebar-overlay--visible { display: block; }

@keyframes pcAdminOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar { transition: none; }
  .admin-sidebar-overlay { animation: none; }
}

/* Hamburger admin-header (mobile + tablet uniquement) */
.admin-header__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rayon-md);
  color: var(--text-secondaire);
  cursor: pointer;
  flex-shrink: 0;
}

.admin-header__hamburger:hover {
  background: var(--commune-primary-alpha-10);
  color: var(--commune-primary);
}

.admin-header__hamburger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (min-width: 1024px) {
  .admin-header__hamburger { display: none; }
}

.admin-sidebar__groupe { margin-bottom: var(--espacement-lg); }

.admin-sidebar__groupe-titre {
  font-size: var(--texte-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--poids-bold);
  padding: 0 var(--espacement-sm);
  margin-bottom: var(--espacement-xs);
  visibility: visible;
  opacity: 1;
  /* R13-1 · au DÉ-pliage le titre n'apparaît qu'une fois la sidebar
     PLEINEMENT déployée : on retarde son apparition de ~210ms (≈ durée
     de l'anim de largeur `.admin-body` 200ms) → plus de titre qui wrappe
     sur 2 lignes pendant que le rail s'élargit (« cafouillage »). Au
     REpliage (règle collapsed ci-dessous) le délai retombe à 0 → il
     disparaît dès le DÉBUT de l'animation. (Aucun impact layout · la
     boîte garde sa hauteur · invariant R12-B préservé.) */
  transition: opacity 130ms ease 210ms, visibility 0s linear 210ms;
}

.admin-sidebar__lien {
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  padding: var(--espacement-sm) var(--espacement-md);
  color: var(--text-secondaire);
  text-decoration: none;
  font-weight: var(--poids-medium);
  font-size: var(--texte-sm);
  border-radius: var(--rayon-md);
  transition: background-color var(--transition-standard), color var(--transition-standard);
  position: relative;
}

.admin-sidebar__lien:hover {
  background: var(--commune-primary-alpha-10);
  color: var(--commune-primary-dark);
  text-decoration: none;
}

/* B1 retours4 · le fond actif se REMPLIT comme une progressbar au clic
   (scaleX 0→1) et celui précédemment actif se VIDE (1→0) · 400ms ·
   géré par un ::before (le fond primary canonique §35.2 est conservé,
   seul le mode d'apparition change). Au chargement direct la barre est
   déjà pleine (pas de transition sur la valeur initiale · aucun flash).
   Le contenu (icône/label/badges) passe AU-DESSUS du fond. */
.admin-sidebar__lien::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--commune-primary);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.admin-sidebar__lien-icone,
.admin-sidebar__lien-label,
.admin-sidebar__lien-badge,
.admin-sidebar__lien-tickets-double {
  position: relative;
  z-index: 1;
}

.admin-sidebar__lien--actif {
  background: transparent;     /* le fond primary est porté par ::before (animable) */
  color: var(--commune-primary-texte);
}

.admin-sidebar__lien--actif::before {
  transform: scaleX(1);
}

.admin-sidebar__lien--actif:hover {
  background: transparent;
  color: var(--commune-primary-texte);
}

.admin-sidebar__lien--actif:hover::before {
  background: var(--commune-primary-dark);
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar__lien::before { transition: none; }
}

.admin-sidebar__lien:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-sidebar__lien-icone {
  width: 18px;
  height: 18px;
  /* R13 · « figer l'icône » pendant l'animation de largeur de la
     sidebar (décision utilisateur · l'icône « passait petite puis
     grande »). flex:0 0 18px = base ET cross-size verrouillées (le
     flex ne la touche JAMAIS pendant que le rail/les libellés
     s'animent). transform:translateZ(0) → couche de composition
     PROPRE : l'icône est peinte indépendamment, pas re-rastérisée /
     mise à l'échelle avec le subtree pendant la transition grid. */
  flex: 0 0 18px;
  min-width: 18px;
  min-height: 18px;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Badges sidebar : gris neutre par défaut, rouge UNIQUEMENT tickets non-lus
   (cohérent DECISIONS §29.11 Q4 + retour utilisateur it1) */
.admin-sidebar__lien-badge {
  margin-left: auto;
  background: var(--gris-300);
  color: var(--gris-800);
  font-size: 11px;
  font-weight: var(--poids-bold);
  padding: 1px 6px;
  border-radius: var(--rayon-rond);
  min-width: 18px;
  text-align: center;
}

.admin-sidebar__lien-badge--urgent {
  background: var(--rouge-erreur);
  color: var(--text-inverse);
}

.admin-sidebar__lien--actif .admin-sidebar__lien-badge {
  background: var(--commune-secondary);
  color: var(--commune-dark);
}

/* Badge urgent quand sidebar lien actif : reste rouge contrasté */
.admin-sidebar__lien--actif .admin-sidebar__lien-badge--urgent {
  background: var(--rouge-erreur);
  color: var(--text-inverse);
}

/* Tickets dans sidebar : 2 chiffres (non-lus rouge + à traiter gris) */
.admin-sidebar__lien-tickets-double {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
}