/* ═══════════════════════════════════════════════════════════════════════════
   Barre latérale — encre & or. Autonome (pas de Tailwind, pas de build).
   Repliée au bureau : classe `sb-plie` sur <html>, posée avant le premier
   rendu (script en tête de base.html) pour éviter tout saut à l'affichage.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sb-fond: #16100c;
  --sb-fond-2: #1f1710;
  --sb-survol: rgba(209, 170, 95, .08);
  --sb-actif: rgba(209, 170, 95, .14);
  --sb-trait: rgba(209, 170, 95, .12);
  --sb-or: #d1aa5f;
  --sb-or-vif: #e6c57f;
  --sb-texte: #e9e1d4;
  --sb-texte-2: #b8ad9e;
  --sb-texte-3: #8d8172;
  --sb-large: 264px;
  --sb-etroit: 72px;
}

.sb-largeur { transition: width .22s cubic-bezier(.2, .8, .2, 1); width: var(--sb-large); }
@media (min-width: 768px) { .sb-plie .sb-largeur { width: var(--sb-etroit); } }

.sb {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(209,170,95,.07), transparent 60%),
    linear-gradient(180deg, var(--sb-fond-2) 0%, var(--sb-fond) 40%);
  border-right: 1px solid rgba(209,170,95,.1);
  color: var(--sb-texte);
  display: flex; flex-direction: column; font-family: 'Inter', system-ui, sans-serif;
  height: 100%; min-height: 100%; overflow: hidden; width: 100%;
}
.sb-i { fill: none; flex-shrink: 0; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 18px; }
.sb-i--s { height: 15px; width: 15px; }

/* Tête */
.sb-tete { align-items: center; display: flex; gap: 8px; justify-content: space-between; padding: 16px 14px 12px; }
.sb-marque { align-items: center; color: inherit; display: flex; gap: 11px; min-width: 0; text-decoration: none; }
.sb-monogramme {
  align-items: center; background: linear-gradient(145deg, rgba(209,170,95,.2), rgba(209,170,95,.04));
  border: 1px solid rgba(209,170,95,.55); border-radius: 10px; color: var(--sb-or-vif); display: flex; flex-shrink: 0;
  font: 600 1rem 'Fraunces', Georgia, serif; height: 36px; justify-content: center; width: 36px;
}
.sb-marque-texte { display: flex; flex-direction: column; line-height: 1; }
.sb-marque-texte b { font: 600 1.06rem 'Fraunces', Georgia, serif; color: #f6efe2; }
.sb-marque-texte small { color: var(--sb-or); font-size: .54rem; font-weight: 800; letter-spacing: .3em; margin-top: 5px; text-transform: uppercase; }
.sb-replier {
  align-items: center; background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--sb-texte-3);
  cursor: pointer; display: none; height: 32px; justify-content: center; transition: .15s; width: 32px;
}
.sb-replier:hover { background: var(--sb-survol); border-color: var(--sb-trait); color: var(--sb-or-vif); }
@media (min-width: 768px) { .sb-replier { display: flex; } }

/* Corps */
.sb-nav { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 4px 10px 12px; scrollbar-color: rgba(209,170,95,.2) transparent; scrollbar-width: thin; }
.sb-section + .sb-section { border-top: 1px solid var(--sb-trait); margin-top: 10px; padding-top: 10px; }
.sb-titre { color: var(--sb-or); font-size: .6rem; font-weight: 800; letter-spacing: .2em; margin: 2px 0 6px; padding: 0 10px; text-transform: uppercase; opacity: .85; }

.sb-lien {
  align-items: center; background: transparent; border: 0; border-radius: 10px; color: var(--sb-texte-2); cursor: pointer;
  display: flex; font: 500 .84rem/1.2 'Inter', system-ui, sans-serif; gap: 11px; min-height: 38px; padding: 8px 10px;
  position: relative; text-align: left; text-decoration: none; transition: background .15s, color .15s; width: 100%;
}
.sb-lien .sb-i { color: var(--sb-texte-3); transition: color .15s; }
.sb-lien:hover { background: var(--sb-survol); color: #fff8ec; }
.sb-lien:hover .sb-i { color: var(--sb-or-vif); }
.sb-lien.is-actif, .sb-groupe.is-actif > .sb-lien--groupe { color: #fff8ec; }
.sb-lien.is-actif { background: var(--sb-actif); font-weight: 600; }
.sb-lien.is-actif::before {
  background: var(--sb-or); border-radius: 0 3px 3px 0; content: ''; height: 18px; left: -10px; position: absolute; top: 50%;
  transform: translateY(-50%); width: 3px;
}
.sb-lien.is-actif .sb-i, .sb-groupe.is-actif > .sb-lien--groupe .sb-i { color: var(--sb-or-vif); }
.sb-libelle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-lien:focus-visible, .sb-enfant:focus-visible, .sb-replier:focus-visible, .sb-deconnexion:focus-visible {
  outline: 2px solid var(--sb-or); outline-offset: 1px;
}

/* Lien mis en avant (Dossiers) et lien d'alerte (Maintenance) */
.sb-lien.ton-or { border: 1px solid rgba(209,170,95,.35); color: #fbf1dc; margin: 2px 0 6px; }
.sb-lien.ton-or .sb-i { color: var(--sb-or-vif); }
.sb-lien.ton-or.is-actif { background: linear-gradient(90deg, rgba(209,170,95,.24), rgba(209,170,95,.08)); border-color: rgba(209,170,95,.65); }
.sb-lien.ton-danger { color: #f19b9b; }
.sb-lien.ton-danger .sb-i { color: #e07a7a; }
.sb-lien.ton-danger:hover { background: rgba(224,122,122,.1); }
.sb-pastille { background: rgba(224,122,122,.18); border: 1px solid rgba(224,122,122,.35); border-radius: 5px; color: #f3b0b0; font-size: .56rem; font-weight: 800; letter-spacing: .08em; padding: 2px 5px; }

.sb-badge { background: var(--sb-or); border-radius: 999px; color: #1a120b; flex-shrink: 0; font-size: .64rem; font-weight: 800; line-height: 1; min-width: 19px; padding: 3px 6px; text-align: center; }
.sb-chevron { height: 15px; margin-left: auto; transition: transform .2s; width: 15px; }
.sb-chevron.is-ouvert { color: var(--sb-or); transform: rotate(180deg); }

/* Sous-liens */
.sb-enfants { border-left: 1px solid var(--sb-trait); margin: 2px 0 6px 19px; padding: 2px 0 2px 9px; }
.sb-enfant {
  align-items: center; border-radius: 8px; color: var(--sb-texte-3); display: flex; font-size: .78rem; font-weight: 500; gap: 9px;
  min-height: 32px; padding: 6px 8px; text-decoration: none; transition: .15s;
}
.sb-enfant span:not(.sb-badge):not(.sb-point) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-enfant:hover { background: var(--sb-survol); color: var(--sb-texte); }
.sb-enfant.is-actif { background: var(--sb-actif); color: #fff8ec; font-weight: 600; }
.sb-enfant.is-actif .sb-i { color: var(--sb-or-vif); }
.sb-enfant.ton-or { color: var(--sb-or-vif); }
.sb-point { border-radius: 50%; flex-shrink: 0; height: 7px; margin: 0 4px; width: 7px; }
.ton-session-ok .sb-point { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.15); }
.ton-session-off .sb-point { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
.sb-flottant-titre { display: none; }

/* Pied */
.sb-pied { align-items: center; border-top: 1px solid var(--sb-trait); display: flex; gap: 10px; justify-content: space-between; padding: 10px 14px; }
.sb-version { color: var(--sb-texte-3); font-size: .64rem; white-space: nowrap; }
.sb-deconnexion { align-items: center; background: transparent; border: 1px solid var(--sb-trait); border-radius: 9px; color: var(--sb-texte-3); cursor: pointer; display: flex; height: 32px; justify-content: center; transition: .15s; width: 32px; }
.sb-deconnexion:hover { background: var(--sb-survol); border-color: rgba(209,170,95,.5); color: var(--sb-or-vif); }

/* ── Repliée (bureau uniquement) ──────────────────────────────────────────── */
@media (min-width: 768px) {
  .sb-plie .sb-largeur .sb-texte { display: none !important; }
  .sb-plie .sb-largeur .sb-tete { flex-direction: column; padding: 14px 8px 10px; }
  .sb-plie .sb-largeur .sb-nav { padding: 4px 8px 12px; }
  .sb-plie .sb-largeur .sb-section + .sb-section { margin-top: 8px; padding-top: 8px; }
  .sb-plie .sb-largeur .sb-lien { justify-content: center; padding: 9px 0; }
  .sb-plie .sb-largeur .sb-lien.is-actif::before { left: -8px; }
  .sb-plie .sb-largeur .sb-lien .sb-badge { font-size: .55rem; min-width: 15px; padding: 2px 4px; position: absolute; right: 4px; top: 3px; }
  .sb-plie .sb-largeur .sb-lien.ton-or { margin: 2px 0 4px; }
  .sb-plie .sb-largeur .sb-groupe.is-actif > .sb-lien--groupe { background: var(--sb-actif); }
  .sb-plie .sb-largeur .sb-enfants { display: none !important; }
  .sb-plie .sb-largeur .sb-groupe.is-survol .sb-enfants {
    background: #1f1710; border: 1px solid rgba(209,170,95,.22); border-radius: 12px; box-shadow: 0 18px 40px -10px rgba(0,0,0,.6);
    display: block !important; left: var(--sb-flottant-x, 80px); margin: 0; max-height: 70vh; min-width: 230px; overflow-y: auto;
    padding: 8px; position: fixed; top: var(--sb-flottant-y, 80px); z-index: 70;
  }
  .sb-plie .sb-largeur .sb-flottant-titre { color: var(--sb-or); display: block; font-size: .6rem; font-weight: 800; letter-spacing: .18em; margin: 2px 6px 6px; text-transform: uppercase; }
  .sb-plie .sb-largeur .sb-pied { justify-content: center; padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) { .sb-largeur, .sb-chevron { transition: none; } }
@media (max-width: 767px) { .sb { min-height: 100vh; min-height: 100dvh; } }