/* iManage — breadcrumb (v1.1.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 :
     • Item courant en pill teinté --accent (signal clair)
     • Hover items en pill subtle teinté contenu (moins criard que l'accent pur)
     • Séparateur chevron dans conteneur largeur fixe → alignement régulier
     • Hiérarchie typographique : 500 (items) / 600 (courant)
     • Touch targets agrandis (4px 10px → confort souris/tactile)

   Tokens consommés (canoniques iManage, dark-mode-aware globalement) :
     --bg-surface     : fond de la barre
     --bg-content     : fond du hover items (légèrement teinté)
     --border         : bordure basse
     --text-primary   : libellé courant + hover items
     --text-secondary : libellés cliquables au repos + séparateur
     --accent         : pill courant + hover focus halo
     --radius-sm      : arrondis

   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: var(--bg-surface, #ffffff);
    border-bottom: 1px solid transparent;
    transition: max-height .25s ease, opacity .2s ease, padding .25s ease, border-color .2s ease;
}
#breadcrumb_bar.visible {
    max-height: 56px;
    opacity: 1;
    padding: 10px 0;
    border-bottom-color: var(--border, rgba(0, 0, 0, 0.08));
}

/* ── Conteneur nav ─────────────────────────────────────────────────── */
#breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary, #6e6e73);
    font-weight: 500;
    letter-spacing: 0.005em;
    min-height: 28px;
}

/* ── Item cliquable (bouton — reset Bootstrap) ─────────────────────── */
#breadcrumb .bc-item {
    background: transparent;
    border: 0;
    padding: 4px 10px;
    margin: 0;
    font: inherit;
    font-weight: 500;
    color: var(--text-secondary, #6e6e73);
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease;
    text-decoration: none;
    white-space: nowrap;
    /* Permet une translation légère au :active sans casser le layout */
    will-change: transform;
}
#breadcrumb .bc-item:hover {
    color: var(--text-primary, #1d1d1f);
    /* Mélange subtil accent → fond contenu pour éviter l'effet "trop branded" */
    background: color-mix(in srgb, var(--accent, #1fb4c5) 7%, var(--bg-content, #f0f0f3));
}
#breadcrumb .bc-item:active {
    transform: translateY(0.5px);
}
#breadcrumb .bc-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #1fb4c5) 30%, transparent);
}

/* ── Élément courant (dernier — non-cliquable) ──────────────────────
   Pill teinté accent : signal visuel fort sans tomber dans la surcharge. */
#breadcrumb .bc-current {
    padding: 4px 12px;
    color: var(--text-primary, #1d1d1f);
    font-weight: 600;
    background: color-mix(in srgb, var(--accent, #1fb4c5) 12%, transparent);
    border-radius: 6px;
    white-space: nowrap;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
}

/* ── Séparateur (chevron) ──────────────────────────────────────────
   Conteneur largeur fixe → l'espace entre items reste régulier quels que
   soient les caractères qui le bordent. */
#breadcrumb .bc-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--text-secondary, #6e6e73);
    opacity: 0.45;
    font-size: 9px;
    flex-shrink: 0;
    user-select: none;
}
#breadcrumb .bc-sep .fa-solid {
    font-size: inherit;
}

/* ── Mode sombre : ajuste l'opacité du chevron et la teinte courant ─
   En dark mode, color-mix avec un accent saturé peut paraître trop vif
   sur fond sombre. On atténue légèrement. */
[data-theme="dark"] #breadcrumb .bc-current {
    background: color-mix(in srgb, var(--accent, #1fb4c5) 18%, transparent);
}
[data-theme="dark"] #breadcrumb .bc-item:hover {
    background: color-mix(in srgb, var(--accent, #1fb4c5) 10%, rgba(255,255,255,0.04));
}
[data-theme="dark"] #breadcrumb .bc-sep {
    opacity: 0.55;
}

/* ── Mobile : compacte ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
    #breadcrumb_bar.visible { padding: 8px 0; max-height: 48px; }
    #breadcrumb { font-size: 12px; gap: 1px; }
    #breadcrumb .bc-item    { padding: 3px 8px; }
    #breadcrumb .bc-current { padding: 3px 10px; max-width: 220px; }
    #breadcrumb .bc-sep     { width: 12px; }
}