/* ═══════════════════════════════════════════════════════════════════════════════════════════
   BARRE LATÉRALE — refonte d'après maquette (2026-09-20).

   Proportions RELEVÉES SUR LA MAQUETTE, pas estimées à l'œil (cf. la règle de projet
   `feedback_maquette_comparer_element_par_element`) :
     largeur 264 · logo 32 px · carte profil (avatar 36, rayon 12) · en-tête de groupe 10 px
     majuscules interlettrées · entrée 34 px, rayon 9, icône 16, écart 11 · pastille active
     violette + point 6 px · pied séparé par un filet.

   POLICE : le design system a `--w-display` (Inter) ; la barre, elle, héritait du `system-ui`
   de Tailwind — c'est l'écart de dessin signalé par le fondateur. On l'aligne ici.

   `!important` assumé : on surcharge des classes Tailwind COMPILÉES et les surcharges
   `html[data-shell]` de `shell-theme.css`, qui en posent déjà. Sans lui, rien ne passe.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.sidebar,
.sidebar input,
.sidebar button,
.sidebar kbd { font-family: var(--w-display), 'Inter', ui-sans-serif, system-ui, sans-serif !important; }

/* ── Entrées de navigation ─────────────────────────────────────────────────────────────── */
.sidebar nav a {
  padding: 7px 12px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -.005em;
  border: 1px solid transparent !important;
  transition: background .12s, color .12s;
}
.sidebar nav a > span:first-child { gap: 11px !important; }
.sidebar nav a svg { width: 16px !important; height: 16px !important; }

/* Entrée active : pastille pleine + POINT à droite (la maquette signale l'état deux fois —
   le fond porte mal seul quand on survole une voisine). */
.sidebar nav a.sidebar-link-active,
.sidebar nav a.is-active {
  font-weight: 650 !important;
  position: relative;
}
.sidebar nav a.sidebar-link-active::after,
.sidebar nav a.is-active::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none; margin-left: auto; opacity: .85;
}

/* ── Groupes ───────────────────────────────────────────────────────────────────────────── */
.sb-group { margin-bottom: 10px; }
.sb-group-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 6px 12px 5px; margin: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--sh-sb-faint, #8b8fa8);
  transition: color .12s;
}
.sb-group-h:hover { color: var(--sh-sb-ink, #191933); }
.sb-group-chev { width: 13px; height: 13px; flex: none; transition: transform .15s; opacity: .7; }
.sb-group-h[aria-expanded="false"] .sb-group-chev { transform: rotate(-90deg); }
.sb-group-items { display: flex; flex-direction: column; gap: 2px; }
.sb-group-h[aria-expanded="false"] + .sb-group-items { display: none; }

/* Un groupe dont TOUS les liens sont fermés par un gate ne doit pas laisser son titre
   orphelin — le cas se produit sur les espaces qui n'ont qu'une partie des modules. */
.sb-group:not(:has(a)) { display: none; }

/* Barre repliée : les titres de groupe n'ont plus de place, les icônes suffisent. */
html.sb-collapsed .sb-group-h,
html.sb-collapsed .sb-reduce { display: none; }

/* ── Pied : « Réduire le menu » + raccourci ────────────────────────────────────────────── */
.sb-reduce {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 24px); margin: 4px 12px 10px; padding: 8px 10px;
  background: none; border: 0; border-top: 1px solid var(--sh-sb-line, var(--w-line));
  border-radius: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--sh-sb-soft, #4b4f6b);
  padding-top: 12px; margin-top: 6px;
}
.sb-reduce:hover { color: var(--sh-sb-ink, #191933); }
.sb-reduce svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.sb-reduce span { flex: 1; text-align: left; }
.sb-kbd {
  font: inherit; font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 5px;
  background: var(--sh-sb-hover, #e3e8f2); color: var(--sh-sb-faint, #8b8fa8);
  border: 1px solid var(--sh-sb-line, var(--w-line)); white-space: nowrap;
}

/* ── Carte profil ──────────────────────────────────────────────────────────────────────── */
.sidebar .sidebar-tenant,
.sidebar .sb-profile { border-radius: 12px !important; }

/* Carte profil : libellé et filet de la maquette. Le séparateur est posé ICI et non dans le
   markup — il sépare deux blocs qui existent déjà, il n’a pas besoin d’un élément à lui. */
.sidebar .sb-profile-label { letter-spacing:.14em !important; font-size:9.5px !important; font-weight:700 !important; }
/* Pas de filet ici : la carte profil en porte DÉJÀ un (`mt-3 pt-3 border-t`, mesuré à y=182).
   En ajouter un second en donnait deux — signalé par le fondateur. */

/* ═══ Retour fondateur (2026-09-20) — relevé sur l'agrandissement de la maquette ═══
   | attribut          | maquette              | mesuré avant        |
   | titre de section  | ~11 px, gras marqué   | 10 px, 45 % d'opacité |
   | retrait entrées   | ~16 px sous le titre  | **1 px** (aucun)      |
   | entrée active     | pastille + barre verticale | pastille seule   |
   Le retrait est porté par `.sb-group-items` : il décale le groupe ENTIER, donc la hiérarchie
   tient même quand un lien est masqué par un gate. */
.sb-group-h {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  padding: 8px 12px 6px !important;
  opacity: 1 !important;
  color: var(--sh-sb-soft, #4b4f6b) !important;
}
.sb-group-chev { width: 15px !important; height: 15px !important; opacity: .55; }
.sb-group { margin-bottom: 16px !important; }

/* Retrait des entrées sous leur titre. */
.sb-group-items { padding-left: 10px !important; }

/* Entrée active : barre verticale à gauche, comme la maquette. Le `::after` porte déjà le point
   à droite — la barre prend le `::before`, libre sur ces liens. */
.sidebar nav a.sidebar-link-active,
.sidebar nav a.is-active { position: relative; }
.sidebar nav a.sidebar-link-active::before,
.sidebar nav a.is-active::before {
  content: "";
  position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: currentColor; opacity: .9;
}

/* ── Netteté et contraste des libellés (retour fondateur : « plus net, peut-être plus foncé ») ──
   Mesuré : les entrées étaient à `--sh-sb-soft` (#4b4f6b), l'encre du thème est `--sh-sb-ink`
   (#191933) — un texte de navigation n'est pas une mention secondaire, il porte l'action.
   Le lissage sous-pixel donne le « plus net » sans toucher à la graisse. */
.sidebar nav a { color: var(--sh-sb-ink, #191933) !important; }
.sidebar, .sidebar nav a, .sb-group-h, .sb-reduce {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Le titre de section reste en retrait du texte des entrées : il classe, il n'appelle pas. */
.sb-group-h { color: var(--sh-sb-faint, #8b8fa8) !important; }
.sb-group-h:hover { color: var(--sh-sb-ink, #191933) !important; }

/* « Distribution & pilotage » demandait 178 px pour 178 disponibles : il repassait à la ligne.
   L'interlettrage cède, pas la taille — c'est lui qui coûtait les 10 px manquants. */
.sb-group-h > span { white-space: nowrap; }
.sb-group[data-group="distribution"] .sb-group-h { letter-spacing: .08em !important; }

/* ⚠ SPÉCIFICITÉ : `shell-theme.css` pose `html[data-shell] .sidebar-link { color:… !important }`
   en (0,2,0). Ma règle `.sidebar nav a` (0,1,1) était MORTE malgré son !important — mesuré :
   couleur restée #4b4f6b. On reprend son armature pour passer devant (0,2,2). */
html[data-shell] .sidebar .sb-group-items a,
html[data-shell] .sidebar .sb-group-items a:hover { color: var(--sh-sb-ink, #191933) !important; }

/* ── Motif de fond (retour fondateur : « le fond a un léger motif ») ──────────────────────
   Semis de points très discret. ⚠ `shell-theme.css` pose `background:` en RACCOURCI sur
   `.sidebar`, ce qui remet `background-image` à `none` : la règle ci-dessous doit donc venir
   APRÈS (elle le fait, sidebar.css est chargée ensuite) et viser `background-image` seul, sans
   toucher à la couleur — c'est la variante de shell qui reste maîtresse du fond.
   Réglages : point de 1 px tous les 14 px, à 4 % d'encre — visible à la loupe, pas à l'écran. */
html[data-shell] .sidebar {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(79, 70, 229, .055) 1px, transparent 0) !important;
  background-size: 14px 14px !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
}
/* La carte profil et l'entrée active restent PLEINES : le motif est un fond, pas une texture
   qu'on laisse traverser les surfaces posées dessus. */
html[data-shell] .sidebar .sidebar-tenant { background-image: none !important; }

/* ── Mode replié : les marques d'état n'ont plus de place ─────────────────────────────────
   Mesuré barre à 76 px : l'icône de l'entrée ACTIVE était 12 px à gauche des autres. Trois
   causes cumulées, toutes neutralisées ici — aucune n'est visible en mode déployé :
     · le retrait de groupe (10 px) s'appliquait encore alors qu'il n'y a plus de titre au-dessus ;
     · le POINT d'état (6 px + marge auto) poussait l'icône vers la gauche ;
     · la BARRE verticale était positionnée sur le retrait disparu.
   En replié, la pastille suffit à dire l'état : le point et la barre sortent. */
html.sb-collapsed .sb-group-items { padding-left: 0 !important; }
html.sb-collapsed .sidebar nav a.sidebar-link-active::after,
html.sb-collapsed .sidebar nav a.is-active::after,
html.sb-collapsed .sidebar nav a.sidebar-link-active::before,
html.sb-collapsed .sidebar nav a.is-active::before { display: none !important; }
/* Toutes les entrées centrent leur icône, active comprise. */
html.sb-collapsed .sidebar nav a { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }
html.sb-collapsed .sidebar nav a > span:first-child { justify-content: center !important; gap: 0 !important; }

/* ═══ Retour fondateur 25/09 : « interlignage réduit, police plus foncée, icônes plus vives » ═══
   Mesuré avant : pas de 38 px par entrée (36 + 2 d'écart), titre → 1re entrée 31 px ; maquette :
   pas de 24 px, titre → 1re entrée 24 px, dernière entrée → titre suivant 36 px (centre à centre).
   Entrée = 18 (ligne) + 2×2 (padding) + 2×1 (bordure) = 24 ; groupe = 12 de marge. */
.sb-group-items { gap: 0 !important; }
.sidebar nav a { padding: 2px 12px !important; line-height: 18px !important; }
.sidebar nav a.sidebar-link-active::before, .sidebar nav a.is-active::before { height: 16px; }
.sb-group-h { padding: 4px 12px 4px !important; line-height: 16px !important; }
.sb-group { margin-bottom: 12px !important; }
/* Libellés : l'encre la plus sombre du thème clair (le texte porte l'action). */
html[data-shell]:not([data-shell="c"]) .sidebar .sb-group-items a,
html[data-shell]:not([data-shell="c"]) .sidebar .sb-group-items a:hover { color: #0f1020 !important; }
/* Icônes : les teintes Tailwind « 400 » sont faites pour un fond SOMBRE — sur la barre claire elles
   paraissent délavées. Thèmes clairs : même teinte en « 600 » (chaque module garde sa couleur).
   Thème nuit (c) : inchangé, les 400 y sont justes. Même mécanisme que la carte profil
   (shell-theme.css, `.sidebar-tenant .text-*-400`). */
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-amber-400   { color: #d97706 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-blue-400    { color: #2563eb !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-cyan-400    { color: #0891b2 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-emerald-400 { color: #059669 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-indigo-400  { color: #4f46e5 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-orange-400  { color: #ea580c !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-pink-400    { color: #db2777 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-purple-400  { color: #9333ea !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-red-400     { color: #dc2626 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-rose-400    { color: #e11d48 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-sky-400     { color: #0284c7 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-teal-400    { color: #0d9488 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-violet-400  { color: #7c3aed !important; }
html[data-shell]:not([data-shell="c"]) .sidebar nav svg.text-yellow-400  { color: #ca8a04 !important; }