/* =================================================================
   sidebar.css - LA sidebar de reference. Une seule pour tous les
   programmes de Crise et Resilience.

   - 260px deplie / 56px replie. Une seule largeur, pas de variante.
   - Etat persiste via localStorage (gere par ui-sidebar.js)
   - Repli = une colonne VIDE : un cercle en haut, l'heure en bas.
     On replie pour rendre la place a l'ecran, pas pour naviguer.
   - Bord droit = filet de lumiere + ombre (voir plus bas).

   LE GABARIT COMPLET, pret a copier : _SHARED/modele-sidebar.html
   Il contient les 10 blocs, chacun marque OBLIGATOIRE ou optionnel.
   On le copie, on SUPPRIME ce dont l'ecran n'a pas besoin.

   Ordre des blocs (fixe) :
     1 head (OBLIG.)  2 actions   3 note   4 context   5 prog
     6 nav OU record-list (OBLIG., jamais les deux)
     7 spacer   8 stats   9 foot (OBLIG.)

   Structure minimale :
     <aside class="sidebar">
       <div class="sidebar-head">
         <div class="sidebar-logo">XX</div>
         <div class="sidebar-titles">
           <strong>Programme</strong><small>par Crise et Resilience</small>
         </div>
         <button class="sidebar-toggle"></button>
       </div>
       <nav class="sidebar-nav">
         <button class="sidebar-item active" data-id="...">
           <span class="sidebar-icon">&#xE80F;</span>
           <span class="sidebar-label">Texte</span>
         </button>
       </nav>
       <div class="sidebar-foot">
         <div class="sidebar-foot-status"><span class="save-dot ok"></span> <span>Pret</span></div>
       </div>
     </aside>

   ⚠️ Le programme DOIT poser `main { position: relative; z-index: 3 }`
   sinon son contenu passe SOUS le halo de lumiere de la sidebar.
   ================================================================= */

/* Le main doit etre en flex row pour mettre sidebar a gauche et content a droite */
main.has-sidebar {
  display: flex;
  flex-direction: row;
  padding: 0 !important;   /* le padding est gere par .content-panel */
}

/* Couleur de l'ombre portee. Le socle n'expose aucune variable d'ombre
   utilisable ici : les --shadow-* sont des ombres completes et toutes
   VERTICALES. Celle-ci s'allege en theme clair, comme --glass-shadow. */
:root { --sidebar-shadow-color: rgba(0, 0, 0, 0.55); }
body.theme-light { --sidebar-shadow-color: rgba(0, 0, 0, 0.18); }

/* La sidebar est un OBJET pose sur le fond, pas une zone qui s'y fond.
   - degradé vertical : plus clair en haut, plus sombre en bas
   - bord droit = FILET DE LUMIERE : une ligne d'accent qui s'estompe
     en haut et en bas (border-image), et qui diffuse vers la droite
   - l'empilement se lit de gauche a droite : filet, puis l'OMBRE qui
     detache, puis la LUMIERE qui deborde de sous l'ombre, comme si la
     source etait derriere la sidebar. L'ordre des box-shadow compte :
     la premiere est dessinee par-dessus.
   Tout en variables : le theme-picker suit. */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--bg-card-hover) 0%, var(--bg-card) 45%, var(--bg-surface) 100%);
  border-right: 1px solid transparent;
  border-image: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.55) 22%,
    rgba(var(--accent-rgb), 0.55) 78%,
    transparent 100%) 1;
  /* Le filet dore (border-image) + une ombre douce + le halo dore doux,
     resserres dans la gouttiere pour ne pas baver sur le contenu. */
  box-shadow:
    5px 0 12px -3px var(--sidebar-shadow-color),
    9px 0 16px -8px rgba(var(--accent-rgb), 0.45);
  /* PAS de position/z-index ici : la sidebar reste NON positionnee pour
     que le contenu (qui vient apres dans le DOM) passe DEVANT le halo de
     lumiere. Un element positionne passe au-dessus d'un non-positionne,
     donc un z-index ici ferait deborder le halo par-dessus les boites du
     contenu. C'est le fix universel : aucune app n'a a poser de z-index. */
  display: flex;
  flex-direction: column;
  transition: width var(--transition-norm);
  overflow: hidden;
}

.sidebar.collapsed {
  width: 56px;
}

/* Variante grossie : lisible de loin (ecran de station, cockpit).
   Remplace les overrides maison de Station-Evo et de suivi.css. */
.sidebar.large { width: 300px; }
.sidebar.large .sidebar-titles strong { font-size: 19px; }
.sidebar.large .sidebar-item { font-size: 18px; padding: 12px 16px; }
.sidebar.large .sidebar-icon { font-size: 19px; }
.sidebar.large .sidebar-badge { font-size: 16px; }

/* === SIDEBAR HEAD === */
/* TROIS ZONES, PAS SIX BOITES.
   Le trait ne separe que : l'identite (head + actions), le travail, l'etat.
   Les separateurs s'estompent sur les bords au lieu de barrer toute la
   largeur : un trait plein de bord a bord fait administratif. */
.sidebar-sep-fade {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent) 1;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  min-height: 56px;
}

.sidebar-logo {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.sidebar-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Brand title : DORE comme dans Crea-PGC (var --accent, 15px, 700) */
.sidebar-titles strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand sub "par Crise et Resilience" : gris muted, 11px (formulation EXACTE) */
.sidebar-titles small {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variante simple : juste un texte de titre, sans logo */
.sidebar-brand {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Bouton toggle : modele unique .panel-toggle defini dans buttons.css. */
/* En mode collapsed : chevron pivote pour pointer vers la droite (deplie-moi) */
.sidebar.collapsed .sidebar-toggle {
  transform: rotate(180deg);
}

/* =================================================================
   REPLI = UNE COLONNE VIDE. Un cercle en haut, l'heure en bas.
   Decision Alex, 2026-07-17 : « l'interet, c'est quand c'est deplie ».
   On replie pour rendre la place a l'ecran, pas pour naviguer.
   Un logo ne se clique pas, un avatar sans nom ne se lit pas, et des
   icones d'action au-dessus d'icones de nav = on ne sait plus laquelle
   navigue. Donc tout disparait, sauf le toggle et l'heure.
   Ouverture au CLIC seulement (pas d'apercu au survol : retire a sa
   demande le 2026-07-17).
   ================================================================= */
.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .sidebar-titles,
.sidebar.collapsed .sidebar-logo,
.sidebar.collapsed .sidebar-back,
.sidebar.collapsed .sidebar-actions,
.sidebar.collapsed .sidebar-note,
.sidebar.collapsed .sidebar-context,
.sidebar.collapsed .sidebar-prog,
.sidebar.collapsed .sidebar-listhead,
.sidebar.collapsed .sidebar-chips,
.sidebar.collapsed .sidebar-nav,
.sidebar.collapsed > .record-list,
.sidebar.collapsed .sidebar-stats,
.sidebar.collapsed .sidebar-user {
  display: none;
}

/* Le toggle, seul, centre en haut. Pas de trait sous lui : plus rien a separer. */
.sidebar.collapsed .sidebar-head {
  justify-content: center;
  padding: var(--gap-md) 0;
  border-bottom: none;
  border-image: none;
}

/* Plus rien ne s'etire une fois la nav cachee : le spacer reprend son
   role, sinon le pied remonte flotter au milieu. */
.sidebar.collapsed .sidebar-spacer { flex: 1; }

/* === BOUTON RETOUR (optionnel, a gauche du logo) ===
   Remplace 3 versions maison : Crea-PGC .v-back-btn, Arundo
   .sidebar-back-btn, PRI-Simple .sidebar-logo-icon. */
.sidebar-back {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-icon), var(--font);
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition-norm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-back:hover { color: var(--accent); border-color: var(--accent); }

/* === SIDEBAR ACTIONS (toolbar icones juste sous le header)
   Marge verticale FINE (2px) pour faire un trait discret, pattern Crea-PGC */
.sidebar-actions {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 2px var(--gap-md);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent) 1;
  gap: 4px;
}
/* Pas d'actions ? le trait de fin de zone passe sous la tete. */
.sidebar-head:last-of-type,
.sidebar-head:has(+ .sidebar-nav),
.sidebar-head:has(+ .sidebar-note),
.sidebar-head:has(+ .sidebar-context) {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent) 1;
}

/* Boutons actions sidebar : juste les icones (pas de fond, pas de border).
   Decide 2026-05-14 - on veut un look depouille sous le brand. */
.sidebar-action-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition-norm);
  flex-shrink: 0;
  font-family: var(--font-icon), var(--font);
}
.sidebar-action-btn:hover {
  color: var(--accent);
}
.sidebar-action-btn.active {
  color: var(--accent);
}

/* En mode collapsed : les actions passent en colonne verticale */
.sidebar.collapsed .sidebar-actions {
  flex-direction: column;
  padding: 2px 4px;
  gap: 4px;
}

/* =================================================================
   BLOCS OPTIONNELS entre la tete et le corps.
   Chacun existait en version maison dans les apps : remontes ici pour
   etre ecrits UNE fois. Ordre : note, context, prog.
   ================================================================= */

/* NOTE : le texte qui explique l'ecran.
   Maison : Blackout .sidebar-note, Assistant de crise .chat-aide. */
.sidebar-note {
  padding: var(--gap-sm) var(--gap-lg);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}
.sidebar-note b { color: var(--text-dim); }

/* CONTEXTE : le "sur quoi je travaille" (client, exercice, annee, box).
   Si l'ecran entier depend d'un choix, il vit ici et nulle part ailleurs.
   Maison : Crisoscope #selLot, Crea-PGC .v-sidebar-client, BoxManager
   .sb-box, Simple-Compta, PRI-Simple .sidebar-client-logo. */
.sidebar-context {
  padding: var(--gap-md) var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-context-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

/* PROGRESSION. Maison : Archiviste .prog-wrap/.prog-bar/.prog-fill.
   La barre est NEUTRE (gris) : une progression n'est pas une alarme.
   Utiliser <div class="progress thick"><div class="progress-bar">. */
.sidebar-prog {
  padding: var(--gap-md) var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-prog-top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}
.sidebar-prog-top b { color: var(--text-dim); font-weight: 700; }
.sidebar-prog .progress-bar { background: var(--text-dim); }

/* TETE DE LISTE MAITRE : compteurs + recherche + filtre, juste avant
   une .record-list. Maison : CRM .crm-list-head. */
.sidebar-listhead {
  padding: var(--gap-sm) var(--gap-lg) var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-listhead-counts {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}
.sidebar-listhead-counts b { color: var(--text); font-weight: 700; }

/* CHIPS de filtre (dans une .sidebar-section-body).
   Maison : .chips de Station-Evo (archiviste, inventaire). */
.sidebar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px var(--gap-sm) 6px;
}
.sidebar-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: var(--transition-norm);
  font-family: inherit;
}
.sidebar-chip:hover { border-color: var(--accent); color: var(--text); }
/* Chip actif : cercle dore sans aplat. Marque une selection, pas une urgence. */
.sidebar-chip.on {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Pousse le pied en bas quand le corps ne s'etire pas.
   Maison : Compagnon .sidebar-spacer.
   ⚠️ Ne PAS l'utiliser avec un corps en flex:1 (nav ou record-list) :
   ils se battraient pour la place et la liste serait tronquee. */
.sidebar-spacer { flex: 1; }

/* === SIDEBAR NAV === */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Items : une pilule qui flotte, pas un bandeau colle aux bords.
   Le border-left de 3px (vestige de la barre doree abandonnee) a ete
   RETIRE : il decalait tout le contenu pour rien. */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 var(--gap-sm);
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition-norm);
  text-align: left;
  width: auto;
  user-select: none;
}
/* Le survol repond : leger decalage + l'icone s'allume */
.sidebar-item:hover {
  background: var(--bg-card-hover);
  color: var(--text);
  transform: translateX(2px);
}
/* Item actif : fond DEGRADE qui s'estompe vers la droite (pattern image Alex).
   Pas de barre verticale doree. */
.sidebar-item.active {
  background: linear-gradient(to right, rgba(var(--accent-rgb), 0.22) 0%, rgba(var(--accent-rgb), 0.06) 50%, transparent 100%);
  color: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-glow);
  transform: none;
}
/* L'icone suit l'item actif. Avant, le degradé s'allumait autour d'elle
   et elle restait grise. */
.sidebar-item.active .sidebar-icon,
.sidebar-item:hover .sidebar-icon {
  color: var(--accent);
}

/* 16px : en 14px l'icone etait plus faible que son propre label en 13px
   semi-gras, elle subissait le texte au lieu de porter la ligne. */
.sidebar-icon {
  font-family: var(--font-icon), var(--font);
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Numerotation a la place de l'icone : une suite d'etapes (1, 2, 3...) */
.sidebar-num {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--glass-tint);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-icon), var(--font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.sidebar-item.active .sidebar-num,
.sidebar-item:hover .sidebar-num {
  border-color: var(--accent);
  color: var(--accent);
}

.sidebar-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RATIONNEMENT DE L'OR : le badge de comptage est GRIS.
   L'or ne marque que 3 choses : la marque, l'item actif, ce qui urge.
   Avant, un badge "6/10" criait aussi fort qu'une alerte. */
.sidebar-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--glass-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.sidebar-item.active .sidebar-badge { color: var(--text-dim); }

/* Badge variante alerte : le SEUL badge dore. C'est ce qui urge. */
.sidebar-badge.alert {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-base);              /* noir sur dore : WCAG AAA */
  font-weight: 700;
  padding: 2px 7px;
}
.sidebar-item.active .sidebar-badge.alert { color: var(--bg-base); }

/* Triangle pour items avec sous-menu (flyout au hover) */
.sidebar-arrow {
  margin-left: auto;
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.sidebar-item.has-submenu.open .sidebar-arrow {
  transform: rotate(90deg);
}

/* === Section header (cliquable, deroulable, avec chevron)
   11px + --text-dim : en 10px/--text-muted c'etait le texte le plus
   faible de l'ecran, alors que ce sont les reperes de structure. */
.sidebar-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gap-md) 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  user-select: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.sidebar-section:hover { color: var(--text); }
.sidebar-section .section-chevron {
  font-family: var(--font-icon), var(--font);
  font-size: 9px;
  transition: transform 0.2s ease;
}
.sidebar-section.collapsed .section-chevron {
  transform: rotate(-90deg);
}
.sidebar.collapsed .sidebar-section { display: none; }

/* === Section body : container avec trait vertical a gauche (hierarchie visuelle) === */
.sidebar-section-body {
  border-left: 1px solid var(--border);
  margin-left: 20px;
  padding-left: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-section.collapsed + .sidebar-section-body {
  display: none;
}
.sidebar.collapsed .sidebar-section-body {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}

/* === Submenu flyout (positionne par JS, en fin de body pour eviter overflow) === */
.sidebar-submenu {
  display: none;
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  min-width: 220px;
  padding: 4px 0;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-card);
}
.sidebar-submenu.open { display: block; }

.sidebar-subitem {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: var(--transition-fast);
}
.sidebar-subitem:hover {
  background: var(--bg-card-hover);
  color: var(--accent);
}

.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-badge {
  display: none;
}
.sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 10px 0;
}

/* === SIDEBAR FOOT (riche, pattern Crea-PGC) ===
   Structure flexible : status dot + stats + horloge en accent
   En collapsed : tout cache sauf l'heure courte HH:MM */
/* VOLET STATS (optionnel, juste au-dessus du pied).
   Maison : Journal #sidebar-stats. */
.sidebar-stats {
  padding: var(--gap-sm) var(--gap-lg);
  border-top-width: 1px;
  border-top-style: solid;
  border-image: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent) 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}
.sidebar-stat-row b { color: var(--text); font-weight: 600; }

/* BLOC UTILISATEUR dans le pied (avatar + role + deconnexion).
   Maison : PRI-Simple .user-avatar/.user-info/.user-role, Hub #btn-logout. */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 8px;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-nom {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role { font-size: 10px; color: var(--text-muted); }

/* Le pied s'ancre sur un fond legerement plus sombre.
   Son bouton d'action est en GHOST : en or plein pleine largeur, il
   etait l'element le plus voyant de l'ecran, et il est en bas. */
.sidebar-foot {
  padding: var(--gap-md);
  background: var(--glass-tint);
  border-top-width: 1px;
  border-top-style: solid;
  border-image: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent) 1;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-foot .btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-dim);
}
.sidebar-foot .btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-alpha);
}

/* Status (point colore + label : Charge / Sauvegarde / Erreur) */
.sidebar-foot-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 0;
}

/* Point colore qui change selon l'etat (pattern Crea-PGC) */
.save-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.save-dot.idle    { background: var(--text-muted); }
.save-dot.saving  { background: var(--warning); }
.save-dot.ok      { background: var(--success); }
.save-dot.error   { background: var(--error); }

/* Stats text (ex: Processus 8/11, Etapes 5/6 valides) */
.sidebar-foot-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 0;
}
.sidebar-foot-stats strong {
  color: var(--text-dim);
  font-weight: 600;
}

/* Horloge en DORE (var --accent), aligne a droite, font-mono - pattern Crea-PGC */
/* L'heure est GRISE : ce n'est ni la marque, ni ou tu es, ni une urgence.
   Elle etait en --accent et faisait partie des 8 zones dorees. */
.sidebar-foot-clock {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  padding: 2px 0;
  margin-top: 2px;
}
/* En deploye : on montre la version longue HH:MM:SS, on cache la courte */
.sidebar-foot-clock .clock-short { display: none; }
.sidebar-foot-clock .clock-full  { display: inline; }

/* Texte simple optionnel (ex: version) */
.sidebar-foot-text {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 0;
}

/* === Mode collapsed : le pied ne garde QUE l'heure, tout en bas === */
.sidebar.collapsed .sidebar-foot {
  padding: var(--gap-md) 4px;
  background: transparent;
  border-top: none;
  border-image: none;
}
.sidebar.collapsed .sidebar-foot > *:not(.sidebar-foot-clock) {
  display: none;
}
.sidebar.collapsed .sidebar-foot-clock {
  text-align: center;
}
.sidebar.collapsed .sidebar-foot-clock .clock-full  { display: none; }
.sidebar.collapsed .sidebar-foot-clock .clock-short { display: inline; }

/* === CONTENT PANEL === */
.content-panel {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--gap-xl);
  background: transparent;
}

.content-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--border);
}
.content-panel-head h1,
.content-panel-head h2 {
  font-size: 18px;
  color: var(--text);
}

/* === Section "vide" (rien selectionne dans la sidebar) === */
.content-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
  gap: var(--gap-sm);
}
.content-empty .empty-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: var(--gap-md);
}