/* iManage — breadcrumb (v1.3.0)
   Fil d'Ariane — barre fine entre #page_header et #page_content.

   Composant auto-contenu : ce fichier porte l'intégralité des styles. Le JS
   (breadcrumb.js) génère le DOM avec les classes .bc-item / .bc-current /
   .bc-sep et toggle .visible sur #breadcrumb_bar pour afficher/masquer.

   v1.1.0 — Refonte visuelle : pill teinté accent + hover subtle.
   v1.2.0 — Refonte "simple et épuré" : texte pur, pas de fond.
   v1.3.0 — Fix distinction parent/courant via CSS :not(:last-child).
     • Le JS rend les items sans click comme bc-current → les non-derniers
       sont stylesés comme des parents (couleur secondaire, weight 400).
     • Seul le dernier bc-current prend la couleur accent + gras.
     • Barre : padding vertical ajusté, alignement vertical centré.
     • Séparateur : opacity 0.45, taille 9px (plus lisible).

   Tokens consommés (canoniques iManage, dark-mode-aware globalement) :
     --bg-surface     : fond de la barre
     --border         : bordure basse
     --text-primary   : libellé courant
     --text-secondary : libellés cliquables + séparateur
     --accent         : couleur du libellé courant

   Le composant fonctionne en light et dark mode sans config additionnelle
   (les tokens sont overridés par theme-toggle.css en [data-theme="dark"]).

   Bénéficie aux 9 projets iManage (cmo, cambatani, ibora, mamiwata, serfin,
   lemai, matissa, archivage_ged, MyQMa).
*/

/* ── Barre — masquée par défaut, déployée par .visible (ajouté par le JS) ── */
#breadcrumb_bar {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: transparent;   /* v1.4.0 — sans fond ni bordure */
    border-bottom: none;
    transition: max-height var(--transition), opacity var(--transition), padding var(--transition);
}
#breadcrumb_bar.visible {
    max-height: 44px;
    opacity: 1;
    padding: 0;
    display: flex;
    align-items: center;
}

/* ── Conteneur nav ─────────────────────────────────────────────────── */
#breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    font-size: 12.5px;
    line-height: 1;
    color: var(--text-secondary);
    font-weight: 400;
    letter-spacing: 0.01em;
    height: 44px;
    overflow: hidden;
    padding: 0 4px;
}

/* ── Item cliquable (bouton — reset Bootstrap) ─────────────────────── */
#breadcrumb .bc-item {
    background: none;
    border: 0;
    padding: 4px 8px;
    margin: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
#breadcrumb .bc-item:hover {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
}
#breadcrumb .bc-item:active { opacity: 0.7; }
#breadcrumb .bc-item:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-xs);
}

/* ── Élément bc-current ──────────────────────────────────────────────
   Le JS rend tous les items sans fonction click comme bc-current, même
   les items parents (section de menu). On distingue visuellement :
   — non-dernier = parent = couleur secondaire muted, weight 400
   — dernier     = page active = couleur accent, weight 600             */
#breadcrumb .bc-current {
    padding: 4px 8px;
    background: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* Parents (non-dernier bc-current) : style muted comme bc-item */
#breadcrumb .bc-current:not(:last-child) {
    color: var(--text-secondary);
    font-weight: 400;
    max-width: 240px;
    letter-spacing: 0;
}

/* Page active (dernier bc-current) */
#breadcrumb .bc-current:last-child {
    color: var(--accent);
    font-weight: 600;
    max-width: 320px;
    letter-spacing: -0.01em;
}

/* ── Séparateur (chevron) ────────────────────────────────────────── */
#breadcrumb .bc-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
    opacity: 0.45;
    font-size: 9px;
    user-select: none;
    line-height: 1;
}
#breadcrumb .bc-sep .fa-solid { font-size: inherit; }

/* ── Mode sombre ─────────────────────────────────────────────────── */
[data-theme="dark"] #breadcrumb .bc-current:last-child  { color: var(--accent); }
[data-theme="dark"] #breadcrumb .bc-current:not(:last-child) { color: var(--text-secondary); }
[data-theme="dark"] #breadcrumb .bc-item:hover { color: var(--text-primary); background: none; }
[data-theme="dark"] #breadcrumb .bc-sep        { opacity: 0.40; }

/* ── Mobile : compacte ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
    #breadcrumb_bar.visible { max-height: 36px; }
    #breadcrumb { font-size: 11.5px; height: 36px; padding: 0 2px; }
    #breadcrumb .bc-item,
    #breadcrumb .bc-current { padding: 3px 6px; }
    #breadcrumb .bc-current:not(:last-child) { max-width: 130px; }
    #breadcrumb .bc-current:last-child       { max-width: 160px; }
    #breadcrumb .bc-sep     { width: 12px; }
}