/* ═══════════════════════════════════════════════════════════════════════
   CONCERTO — charte graphique officielle
   - Fonds : blanc pur
   - Texte / primaire sobre : bleu nuit #111f2a
   - Accent (call-to-action, état actif) : rouge logo #EC4758
   - Typo : stack système natif (perf + rendu cross-OS optimal, à la cambatani)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── Charte Concerto : sobre, 2 tons body, rouge utilisé avec parcimonie ──
       L'app est avant tout navy sur fond gris très léger.
       Le rouge `#EC4758` ne sert QUE pour : bouton primaire CTA, état actif,
       indicateurs de dépassement / refus, animation pulse. */

    /* Accent (call-to-action uniquement) */
    --accent:           #EC4758;
    --accent-hover:     #d63a4a;
    --accent-active:    #b82e3a;
    --accent-soft:      rgba(236, 71, 88, 0.10);
    --accent-ring:      rgba(236, 71, 88, 0.28);

    /* Surfaces — body blanc pur, cards avec border pour hiérarchie */
    --bg-page:          #ffffff;   /* body sans background gris */
    --bg-surface:       #ffffff;   /* cards / panneaux : blanc pur */
    --bg-surface-2:     #f8fafc;   /* zones secondaires (table headers, hover) */
    --bg-elevated:      #ffffff;
    --bg-input:         #ffffff;
    --bg-dark:          #111f2a;

    /* Lignes */
    --line:             #e2e6ea;
    --line-soft:        #eef1f4;
    --line-strong:      #cdd3da;

    /* Text — hiérarchie sobre, contrast renforcé */
    --ink:              #111f2a;   /* texte principal */
    --ink-soft:         #344052;   /* sous-titres lisibles (avant : #2a3b4d trop sombre) */
    --muted:            #64748b;   /* texte secondaire / dates */
    --muted-2:          #94a3b8;   /* placeholders / désactivé */

    /* Statuts — minimalistes, sans saturation excessive */
    --ok:               #2d6b5d;
    --ok-soft:          rgba(45, 107, 93, 0.08);
    --warn:             #b45309;
    --warn-soft:        rgba(180, 83, 9, 0.08);
    --danger:           var(--accent);
    --danger-soft:      var(--accent-soft);
    --neutral:          var(--muted);
    --neutral-soft:     #eef1f4;

    /* Surfaces navy étendues
       — gradient mono navy (deux tons proches), pas de mix navy→rouge boueux.
       Le rouge apparaît en accent séparé sur l'élément (éclat radial, ou rien). */
    --notification-bg:  linear-gradient(160deg, #0a1721 0%, #142639 60%, #1d3a5f 100%);
    --navy-splash:      radial-gradient(120% 80% at 110% -10%, rgba(236, 71, 88, 0.18), rgba(236, 71, 88, 0) 55%),
                        linear-gradient(160deg, #0a1721 0%, #142639 55%, #1d3a5f 100%);

    /* Shadows à la cambatani (plus subtiles) */
    --shadow-sm: 0 1px 2px rgba(17, 31, 42, .04), 0 1px 1px rgba(17, 31, 42, .03);
    --shadow-md: 0 4px 12px rgba(17, 31, 42, .06), 0 2px 4px rgba(17, 31, 42, .04);
    --shadow-lg: 0 16px 40px rgba(17, 31, 42, .08), 0 4px 12px rgba(17, 31, 42, .06);

    /* Bootstrap overrides */
    --bs-body-bg:        var(--bg-page);
    --bs-body-color:     var(--ink);
    --bs-primary:        var(--accent);
    --bs-primary-rgb:    236, 71, 88;
    --bs-link-color:     var(--ink);
    --bs-link-hover-color: var(--accent);
    --bs-border-color:   var(--line);

    /* iManage list-view : namespace privé du composant — variables --lv-* déclarées globalement */
    --lv-ink:    var(--ink);
    --lv-mute:   var(--muted);
    --lv-line:   var(--line);
    --lv-surf:   var(--bg-surface);
    --lv-soft:   var(--bg-surface-2);
    --lv-softer: var(--neutral-soft);
    --lv-cyan:   var(--accent);
    --lv-accent: var(--accent);

    /* Rayons */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;

    /* Police système — pas de Google Fonts, perf maximale, rendu natif iOS/macOS/Windows/Android */
    --font-stack:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body:    var(--font-stack);
    --font-display: var(--font-stack);
}

/* list-view redéfinit --lv-* dans .lv-root (spécificité > :root) → override */
.lv-root {
    --lv-ink:    var(--ink);
    --lv-mute:   var(--muted);
    --lv-line:   var(--line);
    --lv-surf:   var(--bg-surface);
    --lv-soft:   var(--bg-surface-2);
    --lv-softer: var(--neutral-soft);
    --lv-cyan:   var(--accent);
    --lv-accent: var(--accent);
}

html, body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.content-title {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Les liens par défaut prennent la couleur du texte — le rouge est réservé aux CTA.
   Seuls les liens explicites (.link-accent ou bouton) déclenchent l'accent. */
a            { color: var(--ink);        text-decoration: none; }
a:hover      { color: var(--accent); }
.link-muted  { color: var(--muted) !important; }
.link-muted:hover { color: var(--ink) !important; }
::selection  { background: var(--accent-soft); color: var(--ink); }

/* ─── Logo Concerto ──────────────────────────────────────────── */
.concerto-logo { color: var(--ink); display: inline-flex; align-items: center; }
.concerto-logo svg { display: block; }
.concerto-logo-img { display: block; height: 22px; width: auto; }
.brand-divider { width: 1px; height: 16px; background: var(--line-strong); margin: 0 8px; }
.brand-sub {
    color: var(--ink-soft) !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 600;
    font-family: var(--font-display);
}

/* ─── Navbar ──────────────────────────────────────────────────── */
.navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
}
.navbar .container { max-width: 100%; padding-left: 20px; padding-right: 20px; }
.navbar .nav-link {
    color: var(--ink-soft) !important;
    font-weight: 500;
    font-family: var(--font-display);
    font-size: 13.5px;
    letter-spacing: .01em;
    display: inline-flex; align-items: center; gap: 7px;
}
.navbar .nav-link .fa-solid, .navbar .nav-link .fa-regular { font-size: 13px; color: var(--muted); }
.navbar .nav-link:hover .fa-solid, .navbar .nav-link.active .fa-solid { color: var(--accent); }
.navbar .dropdown-item .fa-solid, .navbar .dropdown-item .fa-regular {
    color: var(--muted); width: 16px; text-align: center; margin-right: 4px;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--accent) !important; }
.navbar .dropdown-menu {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius);
    padding: 6px;
}
.navbar .dropdown-item { color: var(--ink-soft); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: var(--accent-soft); color: var(--accent); }
.navbar .dropdown-divider { border-color: var(--line); }

.bureau-badge {
    background: var(--ink);
    color: #fff;
    border: none;
    font-weight: 600;
    font-family: var(--font-display);
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 4px;
}

/* Breadcrumb : pilule plus discrète */
#breadcrumb .breadcrumb-item,
.breadcrumb a, .breadcrumb-item {
    background: transparent !important;
    color: var(--muted) !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    border: 0 !important;
}
.breadcrumb-item.active { color: var(--ink) !important; font-weight: 600; }
.breadcrumb { padding: 0 !important; background: transparent !important; }

/* ─── Boutons ─────────────────────────────────────────────────── */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-family: var(--font-display);
    transition: all .15s ease-out;
    letter-spacing: .01em;
}
.btn-sm { font-size: 12.5px; padding: 5px 12px; }

.btn-primary, .btn-primary:focus {
    background-color: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 1px 2px rgba(55, 143, 208, 0.20);
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    box-shadow: 0 4px 12px rgba(55, 143, 208, 0.28);
}
.btn-outline-primary {
    color: var(--accent); border-color: var(--accent); background: transparent;
}
.btn-outline-primary:hover {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-secondary {
    background: var(--bg-surface); border-color: var(--line-strong); color: var(--ink-soft);
}
.btn-secondary:hover { background: var(--bg-surface-2); border-color: var(--muted-2); color: var(--ink); }

.btn-success { background: var(--ok); border-color: var(--ok); color: var(--ink); }
.btn-warning { background: var(--warn); border-color: var(--warn); color: #ffffff; }
.btn-danger  { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ─── Cards & surfaces — body blanc + card avec border = hiérarchie sans bg gris ─── */
.card, .panel {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    box-shadow: none; /* pas de shadow sur fond blanc — on s'appuie sur la border */
    transition: box-shadow .18s ease-out, border-color .18s ease-out;
}
.card:hover, .panel:hover { box-shadow: var(--shadow-sm); }
.card .card-header {
    background: var(--bg-surface);
    border-color: var(--line-soft);
    padding: 14px 18px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    font-size: 13.5px;
}
.card .card-footer {
    background: var(--bg-surface-2);
    border-color: var(--line-soft);
}

/* ─── Forms ───────────────────────────────────────────────────── */
.form-control, .form-select {
    background-color: var(--bg-input);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-family: var(--font-body);
}
.form-control:focus, .form-select:focus {
    background-color: var(--bg-input);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    color: var(--ink);
}
.form-control::placeholder { color: var(--muted-2); }
.form-label, .form-label.small {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.input-group-text { background: var(--bg-surface-2); border-color: var(--line-strong); color: var(--ink-soft); }

/* ─── Tables (list-view + tables custom) — alternance subtile ── */
.table, .table > :not(caption) > * > * {
    color: var(--ink);
    background: transparent;
    border-color: var(--line-soft);
}
.table thead th {
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 10.5px;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
}
.table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s ease-out; }
.table tbody tr:nth-child(even) > td { background: var(--bg-surface-2); }
.table tbody tr:hover > td { background: #eef1f4; }

/* Zebra dans la list-view iManage */
.lv-root .lv-table tbody tr:nth-child(even) > td { background: var(--bg-surface-2); }
.lv-root .lv-table tbody tr:hover > td { background: #eef1f4; }

/* ─── Badges — minimalistes (juste bordure + texte coloré) ──────── */
.badge {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: .02em;
    padding: 4px 8px;
    font-size: 10.5px;
    border-radius: 4px;
}
.badge.bg-primary    { background-color: var(--accent) !important; color: #fff; }
.badge.bg-success    { background-color: var(--ok) !important;     color: #fff; }
.badge.bg-warning    { background-color: var(--warn) !important;   color: #fff; }
.badge.bg-danger     { background-color: var(--danger) !important; color: #fff; }
.badge.bg-secondary  { background-color: var(--neutral-soft) !important; color: var(--ink-soft); border: 1px solid var(--line); }

/* Statuts — minimalistes : fond très clair + bordure + texte couleur sémantique */
.badge.status-draft       { background: var(--neutral-soft); color: var(--muted);     border: 1px solid var(--line); }
.badge.status-submitted,
.badge.status-in_review,
.badge.status-requested,
.badge.status-cash_visa,
.badge.status-active,
.badge.status-CLIENT      { background: var(--neutral-soft); color: var(--ink-soft);  border: 1px solid var(--line-strong); }
.badge.status-regional_validated,
.badge.status-group_validated,
.badge.status-partially_approved,
.badge.status-INTERNE     { background: var(--warn-soft);    color: var(--warn);      border: 1px solid var(--warn); }
.badge.status-approved,
.badge.status-paid,
.badge.status-refacturated,
.badge.status-collected,
.badge.status-completed   { background: var(--ok-soft);      color: var(--ok);        border: 1px solid var(--ok); }
.badge.status-rejected,
.badge.status-cancelled,
.badge.status-suspended,
.badge.status-closed      { background: var(--danger-soft);  color: var(--danger);    border: 1px solid var(--danger); }

/* ─── Page chrome — body transparent, pas de bg ─── */
html { background: #ffffff; }
body { background: transparent; }

/* Conteneurs principaux : exploiter toute la largeur dispo */
#page_content > .container,
#breadcrumb_bar > .container,
#page_header > .container,
#page_footer > .container { max-width: 100% !important; padding-left: 24px; padding-right: 24px; }
#page_header, #breadcrumb_bar {
    background: transparent;
    border-bottom: 1px solid var(--line);
}
#page_content   { background: transparent; padding-top: 16px; padding-bottom: 32px; }
#requested_content { background: transparent; }

/* iManage donne un fond gris au .content-title — on l'aplatit pour rester sobre */
.content-title {
    background: transparent !important;
    padding: 0 !important;
    margin: 4px 0 4px !important;     /* resserré : le sous-titre suit immédiatement */
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.content-title .small { color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: 13px; }
/* Plus d'icône dans le titre — convention décidée le 2026-05-21 (UX sobre).
   Si un .fa-* survit dans un titre, on le neutralise. */
.content-title .fa-solid, .content-title .fa-regular { display: none !important; }

/* Sous-titre : ligne distincte sous le titre, en gris léger */
.content-subtitle {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 22px;            /* espace avant le contenu */
}
.content-subtitle strong { color: var(--ink); font-weight: 600; }
.content-subtitle:empty { display: none; }

#page_footer {
    background: var(--bg-dark);
    color: #d6d8da;
    border-top: none;
}
#page_footer a { color: #fff; }
.footer-sep { color: var(--muted); margin: 0 6px; }

/* ─── Modal / Form container / Toast (light) ─────────────────── */
.modal-content, #form_container, #confirm_box, #login_box, #notification_box {
    background: var(--bg-surface);
    color: var(--ink);
    border: 1px solid var(--line);
}
.modal-header, .modal-footer { border-color: var(--line); }

/* ─── Login box : override de la police Caveat (cursive) d'iManage ─────── */
/* iManage charge Caveat Bold (manuscrit) à 6.5rem 700.
   On force la même police système que partout dans l'app + taille raisonnable. */
#login_greeting_wrap,
#login_greeting_wrap span,
.lb-greeting-animated {
    font-family: var(--font-stack) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-size: 2.4rem !important;
    letter-spacing: -.02em !important;
    color: var(--ink) !important;
    text-shadow: none !important;
    line-height: 1.1 !important;
}

/* Sidebar login_box : navy mono + éclat rouge subtil en haut-droite,
   pas de blend boueux. */
#login_box .lb-sidebar {
    background: var(--navy-splash) !important;
    color: #fff;
}
#login_box .lb-sidebar-logo-img {
    max-width: 180px;
    height: auto;
    margin-bottom: 14px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
#login_box .lb-sidebar-name {
    font-family: var(--font-display);
    letter-spacing: .04em;
}
#login_box .lb-sidebar-tagline {
    color: rgba(255,255,255,0.7);
    font-weight: 300;
}
#login_box .lb-sidebar-time {
    color: rgba(255,255,255,0.85);
    font-feature-settings: 'tnum';
}
#login_box .modal-content { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }

/* Notification (toast en haut) : pas de gradient — juste un fond uni accentué.
   Plus reposant qu'un dégradé qui distrait. */
#notification_box .alert-success { background: #2d6b5d !important; color: #fff !important; border: 0; }
#notification_box .alert-warning { background: var(--warn) !important; color: #fff !important; border: 0; }
#notification_box .alert-danger,
#notification_box .alert-error   { background: var(--accent) !important; color: #fff !important; border: 0; }
#notification_box .alert-info    { background: var(--ink) !important; color: #fff !important; border: 0; }

/* ─── Z-index & overlays ────────────────────────────────────── */
/* Le content_loader doit rester derrière le modal */
#content_loader { z-index: 1040; }
#form_container, .modal-backdrop { z-index: 1050; }
#confirm_box    { z-index: 1060; }
#notification_box { z-index: 1080; }

/* Indicateur de scroll dans modal Vue Dossier */
.form-panel-overlay .form-panel-body { scroll-behavior: smooth; }
.form-panel-overlay .form-panel-body::-webkit-scrollbar { width: 8px; }
.form-panel-overlay .form-panel-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.form-panel-overlay .form-panel-body::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ═════════════════════════════════════════════════════════════════════
   VUE DOSSIER v3 — timeline 5 phases + heatmap 6 mois + marge cible/réelle
   ═════════════════════════════════════════════════════════════════════ */

/* ─── KPI vedette : Marge cible vs réelle — teintes légères, sans bordure grasse ─── */
.marge-card { padding: 18px 20px; height: 100%; }
.marge-card.is-ok      { background: rgba(45, 107, 93, 0.05); border-color: rgba(45, 107, 93, 0.18); }
.marge-card.is-danger  { background: rgba(236, 71, 88, 0.05); border-color: rgba(236, 71, 88, 0.18); }
.marge-card.is-neutral { background: var(--bg-surface-2); }

.marge-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.marge-lbl { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.marge-delta {
    font-size: 13px; font-weight: 700; font-feature-settings: 'tnum';
    padding: 3px 10px; border-radius: 4px; background: var(--bg-surface-2);
}
.marge-card.is-ok      .marge-delta { background: var(--ok-soft);     color: var(--ok); }
.marge-card.is-danger  .marge-delta { background: var(--accent-soft); color: var(--accent); }

.marge-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.marge-bloc { display: flex; flex-direction: column; min-width: 76px; }
.marge-bloc-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.marge-bloc-val { font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; font-feature-settings: 'tnum'; margin-top: 6px; }
.marge-arrow { color: var(--muted-2); font-size: 20px; }
.marge-meta {
    margin-left: auto; display: flex; flex-direction: column; gap: 4px;
    font-size: 11.5px; color: var(--muted); border-left: 1px solid var(--line-soft); padding-left: 14px;
}
.marge-meta strong { color: var(--ink); font-feature-settings: 'tnum'; font-weight: 600; }

/* Layout v4 — quand la marge-card est dans une colonne 1/3, le bloc meta
   passe sous les chiffres (cible/réelle) au lieu de rester à droite,
   pour préserver la lisibilité dans une largeur contrainte. */
@media (max-width: 1199.98px), (min-width: 992px) {
    .col-lg-4 .marge-card .marge-meta {
        margin-left: 0; margin-top: 12px; padding-left: 0;
        border-left: 0; border-top: 1px solid var(--line-soft); padding-top: 10px;
        flex-basis: 100%;
    }
    .col-lg-4 .marge-card .marge-bloc-val { font-size: 26px; }
}

/* ─── Timeline 5 phases ──────────────────────────────────────── */
.tl-card { padding-bottom: 16px; height: 100%; }
.tl-body {
    padding: 18px 20px 6px;
    display: flex; align-items: flex-start; justify-content: space-between;
    overflow-x: auto;
}
.tl-step { display: flex; flex-direction: column; align-items: center; min-width: 80px; flex: 0 0 auto; }
.tl-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bg-surface); border: 2px solid var(--line-strong);
    color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; transition: all .2s;
}
.tl-step.is-done .tl-dot   { background: var(--ok); border-color: var(--ok); color: #fff; }
.tl-step.is-current .tl-dot{ background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-step.is-pending .tl-dot{ background: var(--bg-surface); border-style: dashed; }
.tl-lbl {
    margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--ink);
    text-transform: uppercase; letter-spacing: .05em;
}
.tl-step.is-pending .tl-lbl { color: var(--muted); }
.tl-meta { font-size: 10.5px; color: var(--muted); margin-top: 3px; text-align: center; max-width: 100px; }
.tl-when { font-size: 10px; color: var(--muted-2); margin-top: 2px; font-feature-settings: 'tnum'; }
.tl-link {
    flex: 1; height: 2px; background: var(--line);
    margin: 14px -4px 0; align-self: flex-start; min-width: 24px;
}

/* ─── Heatmap calendrier 6 mois ──────────────────────────────── */
.hm-card { margin-bottom: 16px; }
.hm-card .card-header { display: flex; align-items: center; gap: 10px; }
.hm-card .card-header .fa-solid { color: var(--muted); }
.hm-cap { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
.hm-cap strong { color: var(--ink); font-feature-settings: 'tnum'; }

.hm-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--line-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.hm-month {
    background: var(--bg-surface);
    padding: 14px 10px 12px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 4px;
    transition: background .15s;
}
.hm-month:hover { background: var(--bg-surface-2); }
.hm-bar {
    height: 70px; width: 32px; display: flex; flex-direction: column-reverse;
    align-items: stretch; gap: 1px; position: relative;
}
.hm-fill {
    background: var(--ink);
    border-radius: 2px 2px 0 0;
    width: 100%;
}
.hm-month.is-low   .hm-fill { background: var(--muted-2); }
.hm-month.is-mid   .hm-fill { background: var(--warn); }
.hm-month.is-high  .hm-fill { background: var(--ink); }
.hm-month.is-over  .hm-fill { background: var(--accent); }
.hm-refact { background: var(--ok); border-radius: 0 0 2px 2px; width: 100%; }
.hm-month.is-empty .hm-fill { background: var(--line-strong); }
.hm-lbl  { font-family: var(--font-stack); font-size: 11px; font-weight: 600; color: var(--ink); margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; }
.hm-val  { font-size: 11px; color: var(--muted); font-feature-settings: 'tnum'; white-space: nowrap; }
.hm-pct  { font-size: 13px; font-weight: 700; color: var(--ink); font-feature-settings: 'tnum'; }
.hm-month.is-over .hm-pct { color: var(--accent); }
.hm-month.is-empty .hm-pct, .hm-month.is-empty .hm-val { color: var(--muted-2); }

.hm-legend {
    display: flex; gap: 14px; padding: 10px 16px;
    font-size: 11px; color: var(--muted); align-items: center;
}
.hm-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.hm-leg-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.hm-leg-fill   { background: var(--ink); }
.hm-leg-refact { background: var(--ok); }
.hm-leg-thresh { display: inline-block; width: 12px; height: 2px; background: var(--accent); }
.ms-auto { margin-left: auto; }

/* ═════════════════════════════════════════════════════════════════════
   VUE DOSSIER v2 — design simplifié 3 milestones + refacturation badge
   ═════════════════════════════════════════════════════════════════════ */

/* ─── En-tête dossier ───────────────────────────────────────── */
.dossier-head {
    display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap;
    padding: 20px 22px;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;     /* layout v4 : la rangée bootstrap gère l'espacement (mb-3) */
    height: 100%;         /* aligne en hauteur avec la marge-card voisine en row 2/3 + 1/3 */
}
.dossier-head .dh-id { flex: 1 1 240px; min-width: 240px; }
.dossier-head .dh-code {
    font-family: var(--font-display); font-size: 24px; font-weight: 700;
    color: var(--ink); letter-spacing: -.02em; line-height: 1;
}
.dossier-head .dh-name { color: var(--muted); margin-top: 4px; font-size: 13px; }
.dossier-head .dh-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.dossier-head .dh-metrics { display: flex; gap: 28px; flex-wrap: wrap; }
.dossier-head .dh-metrics > div { display: flex; flex-direction: column; min-width: 110px; }
.dossier-head .dh-lab {
    font-size: 10px; color: var(--muted); text-transform: uppercase;
    letter-spacing: .1em; font-weight: 600; font-family: var(--font-display);
}
.dossier-head .dh-val {
    font-size: 15px; font-weight: 600; color: var(--ink);
    font-feature-settings: 'tnum'; font-family: var(--font-display); margin-top: 2px;
}
.dossier-head .dh-val.over { color: var(--accent); }

/* ═════════════════════════════════════════════════════════════════════
   MODE NUIT — override des tokens Concerto pour un contraste lisible
   ═════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Surfaces — body très sombre, cards distinctement plus claires */
    --bg-page:          #0c0e16;
    --bg-surface:       #181a26;    /* cards : nettement plus claires que le body */
    --bg-surface-2:     #21243a;    /* secondaires : encore un palier au-dessus */

    /* Textes — ink clair, muted lisible (≥ 4.5:1 sur bg-surface) */
    --ink:              #f1f3ff;
    --ink-soft:         #c8cce0;
    --muted:            #9aa0b4;
    --muted-2:          #6f748a;

    /* Lignes : claires sur fond sombre, plus visibles que ce qu'iManage propose */
    --line:             rgba(255, 255, 255, 0.10);
    --line-soft:        rgba(255, 255, 255, 0.06);
    --line-strong:      rgba(255, 255, 255, 0.18);

    /* Statuts — fonds plus saturés en dark pour rester perceptibles */
    --ok:               #4cb89e;
    --ok-soft:          rgba(76, 184, 158, 0.16);
    --warn:             #f6a85a;
    --warn-soft:        rgba(246, 168, 90, 0.16);
    --accent-soft:      rgba(236, 71, 88, 0.22);
    --accent-ring:      rgba(236, 71, 88, 0.40);
    --info-soft:        rgba(255, 255, 255, 0.08);
    --neutral-soft:     rgba(255, 255, 255, 0.06);
    --danger-soft:      rgba(236, 71, 88, 0.22);

    /* Notification gradient — bleu très profond pour contraster */
    --notification-bg:  linear-gradient(160deg, #060814 0%, #0d1228 55%, #1a2247 100%);
    --navy-splash:      radial-gradient(120% 80% at 110% -10%, rgba(236, 71, 88, 0.22), transparent 55%),
                        linear-gradient(160deg, #060814 0%, #0d1228 55%, #1a2247 100%);

    /* Aliases pour iManage (partagés) */
    --paper:  var(--bg-surface);
    --canvas: var(--bg-page);
}

/* HTML / body en dark : fond uniforme, plus de overlay 2-tons agressif */
html[data-theme="dark"] { background: var(--bg-page) !important; }
html[data-theme="dark"] body { background: transparent !important; --body-tone-overlay: rgba(255, 255, 255, 0.02); }

/* Cards en dark : bordure plus visible pour délimiter sur fond très sombre */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .ln-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .marge-card,
[data-theme="dark"] .dossier-head {
    background: var(--bg-surface) !important;
    border-color: var(--line-strong) !important;
    color: var(--ink);
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .ln-card:hover,
[data-theme="dark"] .kpi-card:hover { border-color: rgba(255,255,255,0.28) !important; }
[data-theme="dark"] .card .card-header { background: rgba(255,255,255,0.03); border-bottom-color: var(--line-strong); color: var(--ink); }

/* États colorés en dark : on garde la teinte mais on intensifie le fond */
[data-theme="dark"] .kpi-card.is-danger,
[data-theme="dark"] .ln-card.is-rejected,
[data-theme="dark"] .marge-card.is-danger {
    background: rgba(236, 71, 88, 0.10) !important;
    border-color: rgba(236, 71, 88, 0.35) !important;
}
[data-theme="dark"] .kpi-card.is-warn {
    background: rgba(246, 168, 90, 0.10) !important;
    border-color: rgba(246, 168, 90, 0.32) !important;
}
[data-theme="dark"] .kpi-card.is-ok,
[data-theme="dark"] .ln-card.is-paid,
[data-theme="dark"] .marge-card.is-ok {
    background: rgba(76, 184, 158, 0.10) !important;
    border-color: rgba(76, 184, 158, 0.32) !important;
}

/* Tables zebra en dark — striping visible sans saturation */
[data-theme="dark"] .table thead th { color: var(--muted); border-bottom-color: var(--line-strong); }
[data-theme="dark"] .table tbody td { border-bottom-color: var(--line-soft); color: var(--ink); }
[data-theme="dark"] .table tbody tr:nth-child(even) > td { background: rgba(255,255,255,0.025) !important; }
[data-theme="dark"] .table tbody tr:hover > td { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .lv-root .lv-table tbody tr:nth-child(even) > td { background: rgba(255,255,255,0.025) !important; }
[data-theme="dark"] .lv-root .lv-table tbody tr:hover > td { background: rgba(255,255,255,0.06) !important; }

/* Inputs / search en dark */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .lv-search-input {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--line-strong) !important;
    color: var(--ink) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .lv-search-input::placeholder { color: var(--muted-2); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* Badges en dark : adaptation des status pills */
[data-theme="dark"] .badge.status-active,
[data-theme="dark"] .badge.status-CLIENT,
[data-theme="dark"] .badge.status-requested,
[data-theme="dark"] .badge.status-cash_visa {
    background: rgba(255,255,255,0.08); color: var(--ink); border-color: var(--line-strong);
}
[data-theme="dark"] .badge.bg-secondary {
    background: rgba(255,255,255,0.10) !important; color: var(--ink-soft) !important; border-color: var(--line-strong);
}
[data-theme="dark"] .ln-by-chip,
[data-theme="dark"] .lines-count { background: rgba(255,255,255,0.08); color: var(--ink-soft); }

/* Étiquettes de statut sur les lignes */
[data-theme="dark"] .ln-status-progress { background: rgba(255,255,255,0.08); color: var(--ink); border-color: var(--line-strong); }
[data-theme="dark"] .ln-status-wait     { background: rgba(246,168,90,0.16); color: var(--warn); border-color: var(--warn); }
[data-theme="dark"] .ln-status-ok       { background: rgba(76,184,158,0.16); color: var(--ok); border-color: var(--ok); }
[data-theme="dark"] .ln-status-danger   { background: rgba(236,71,88,0.20); color: #ff7a85; border-color: var(--accent); }

/* Refacturation badges */
[data-theme="dark"] .refact-badge.refact-interne      { background: rgba(255,255,255,0.06); color: var(--muted); border-color: var(--line-strong); }
[data-theme="dark"] .refact-badge.refact-a_refacturer { background: rgba(246,168,90,0.16); color: var(--warn); border-color: var(--warn); }
[data-theme="dark"] .refact-badge.refact-refacturee   { background: rgba(255,255,255,0.10); color: var(--ink); border-color: var(--line-strong); }
[data-theme="dark"] .refact-badge.refact-encaissee    { background: rgba(76,184,158,0.16); color: var(--ok); border-color: var(--ok); }

/* Timeline en dark */
[data-theme="dark"] .tl-dot { background: var(--bg-surface); border-color: var(--line-strong); color: var(--muted); }
[data-theme="dark"] .tl-step.is-done .tl-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
[data-theme="dark"] .tl-step.is-current .tl-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="dark"] .tl-link { background: var(--line-strong); }

/* Heatmap mois en dark */
[data-theme="dark"] .hm-grid { background: var(--line-strong); border-color: var(--line-strong); }
[data-theme="dark"] .hm-month { background: var(--bg-surface); }
[data-theme="dark"] .hm-month:hover { background: var(--bg-surface-2); }
[data-theme="dark"] .hm-month.is-empty .hm-fill { background: rgba(255,255,255,0.10); }
[data-theme="dark"] .hm-month.is-low   .hm-fill { background: var(--muted); }
[data-theme="dark"] .hm-month.is-high  .hm-fill { background: var(--ink); }

/* Navbar en dark : transparent pour laisser passer le dégradé top */
[data-theme="dark"] .navbar {
    background: rgba(13, 14, 23, 0.88) !important;
    border-bottom-color: var(--line-strong);
}
[data-theme="dark"] .navbar .nav-link { color: var(--ink-soft) !important; }
[data-theme="dark"] .navbar .nav-link .fa-solid,
[data-theme="dark"] .navbar .nav-link .fa-regular { color: var(--muted); }
[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .nav-link.active { color: var(--ink) !important; }
[data-theme="dark"] .navbar .dropdown-menu {
    background: var(--bg-surface); border-color: var(--line-strong); box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
[data-theme="dark"] .navbar .dropdown-item { color: var(--ink-soft); }
[data-theme="dark"] .navbar .dropdown-item:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
[data-theme="dark"] .bureau-badge { background: rgba(255,255,255,0.12); color: var(--ink); }

/* Breadcrumb iManage en dark */
[data-theme="dark"] #breadcrumb_bar { border-bottom-color: var(--line-strong); }
[data-theme="dark"] .breadcrumb-item { color: var(--muted) !important; }
[data-theme="dark"] .breadcrumb-item.active { color: var(--ink) !important; }
[data-theme="dark"] #breadcrumb .breadcrumb-item,
[data-theme="dark"] .breadcrumb a { background: rgba(255,255,255,0.06) !important; color: var(--ink-soft) !important; }

/* Bottom-nav en dark (mobile/PWA) */
[data-theme="dark"] #main_menu {
    background: var(--bg-surface) !important;
    border-top-color: var(--line-strong) !important;
    box-shadow: 0 -1px 6px rgba(0,0,0,0.45);
}

/* Modal / form-container en dark */
[data-theme="dark"] .modal-content,
[data-theme="dark"] #form_container,
[data-theme="dark"] #confirm_box,
[data-theme="dark"] #login_box,
[data-theme="dark"] #notification_box {
    background: var(--bg-surface);
    color: var(--ink);
    border-color: var(--line-strong);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--line-strong); }
[data-theme="dark"] .form-panel { background: var(--bg-surface); color: var(--ink); }

/* Dossier metric values */
[data-theme="dark"] .dh-lab, [data-theme="dark"] .dat-lbl, [data-theme="dark"] .kpi-label,
[data-theme="dark"] .dp-bar-label, [data-theme="dark"] .hm-lbl,
[data-theme="dark"] .ml3-label, [data-theme="dark"] .tl-lbl { color: var(--muted); }
[data-theme="dark"] .dh-val, [data-theme="dark"] .dat-num, [data-theme="dark"] .kpi-value,
[data-theme="dark"] .dp-bar-count, [data-theme="dark"] .hm-pct,
[data-theme="dark"] .ln-amount, [data-theme="dark"] .marge-bloc-val { color: var(--ink); }

/* Progress bars (dossier-progress) en dark */
[data-theme="dark"] .dp-bar-track { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .dp-bar:nth-child(1) .dp-bar-fill { background: var(--muted); }
[data-theme="dark"] .dp-bar:nth-child(2) .dp-bar-fill { background: var(--ink); }
[data-theme="dark"] .dp-bar:nth-child(3) .dp-bar-fill { background: var(--ok); }
[data-theme="dark"] .dp-divider { background: var(--line-strong); }

/* ═════════════════════════════════════════════════════════════════════
   RESPONSIVE & PWA
   - Mobile (≤ 768px) OU PWA standalone : menu en bas (bottom-nav natif)
   - Tablette : navbar top compactée
   - Desktop : layout normal
   ═════════════════════════════════════════════════════════════════════ */

/* Tablette (≤ 992px) */
@media (max-width: 992px) {
    .navbar .nav-link .nav-label { font-size: 12.5px; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .dossier-head { gap: 18px; }
    .dossier-head .dh-metrics { gap: 18px; }
}

/* Mobile et PWA standalone : bottom navigation */
@media (max-width: 768px), (display-mode: standalone) {

    /* Désactiver backdrop-filter sur la navbar — il crée un containing block
       qui empêche position:fixed des descendants de se référer au viewport. */
    .navbar {
        padding: 6px 0;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .navbar .container { padding: 0 12px; }
    .navbar-brand { gap: 6px !important; }
    .concerto-logo-img { height: 18px; }
    .brand-divider, .brand-sub { display: none; }
    .navbar-toggler { display: none !important; }

    /* On déploie le menu en barre fixe en bas, façon app native */
    #main_menu {
        display: block !important;
        position: fixed; left: 0; right: 0; bottom: 0;
        background: var(--bg-surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -1px 4px rgba(17,31,42,.06);
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
        z-index: 1030;
    }
    #user_menu {
        display: flex !important;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        margin: 0; padding: 0; width: 100%;
    }
    #user_menu .nav-item {
        flex: 1 1 0; text-align: center; min-width: 0;
    }
    #user_menu .nav-link {
        display: flex !important; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 3px !important; padding: 6px 4px !important;
        font-size: 10.5px !important;
        white-space: nowrap;
    }
    #user_menu .nav-link .fa-solid,
    #user_menu .nav-link .fa-regular {
        font-size: 18px !important; color: var(--ink-soft) !important;
    }
    #user_menu .nav-link.active,
    #user_menu .nav-link:active { color: var(--accent) !important; }
    #user_menu .nav-link.active .fa-solid,
    #user_menu .nav-link:active .fa-solid { color: var(--accent) !important; }

    /* Dropdowns en bottom-nav : se déploient vers le haut */
    #user_menu .dropdown-menu {
        position: absolute; bottom: 100%; left: 8px; right: 8px;
        margin-bottom: 8px;
        border-radius: 12px;
        box-shadow: 0 -4px 16px rgba(17,31,42,.12);
        animation: slide-up .2s ease-out;
    }
    @keyframes slide-up {
        from { transform: translateY(6px); opacity: 0; }
        to   { transform: translateY(0);   opacity: 1; }
    }

    /* User avatar : compact en haut à droite */
    #user_account_trigger {
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    }
    .ua-name, .ua-job { display: none; }   /* juste l'avatar */
    .bureau-badge { display: none; }

    /* Espace bottom pour le contenu (pour ne pas être sous la nav) */
    body { padding-bottom: 70px; }
    #page_footer { display: none; }

    /* Conteneurs : utiliser tout l'horizontal */
    .container, .navbar .container,
    #page_content > .container, #breadcrumb_bar > .container { padding: 0 12px !important; }

    /* KPI grid : 2 colonnes max sur mobile */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-card { padding: 14px 14px; }
    .kpi-card .kpi-value { font-size: 24px; }

    /* Dossier header empilé en colonne */
    .dossier-head { flex-direction: column; gap: 14px; align-items: stretch; padding: 16px; }
    .dossier-head .dh-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Timeline : scroll horizontal */
    .tl-body { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px 12px; }
    .tl-step { min-width: 74px; }
    .tl-link { min-width: 16px; }

    /* Heatmap : conserve 6 colonnes mais cells réduites */
    .hm-month { padding: 10px 4px; }
    .hm-bar   { width: 22px; height: 50px; }
    .hm-lbl   { font-size: 10px; }
    .hm-val   { font-size: 9.5px; }
    .hm-pct   { font-size: 11.5px; }

    /* Cards de ligne — empiler montant+statut sous le contenu */
    .ln-row    { flex-direction: column; gap: 10px; }
    .ln-right  { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .ln-actions { flex-wrap: wrap; }

    /* Lines header (titre + filtres + bouton) */
    .lines-header { flex-direction: column; align-items: stretch; }
    .lines-actions { justify-content: space-between; }

    /* Tables : permettre scroll horizontal au lieu d'écraser */
    .card .table-responsive, .card > .table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: 600px; }
    .table thead th, .table tbody td { padding: 10px 12px; font-size: 12px; }

    /* Form container overlay : full-screen sur mobile */
    .form-panel-overlay, .form-panel-overlay-lg {
        max-width: 100% !important; width: 100% !important;
        max-height: calc(100vh - 70px) !important;   /* laisse place à la bottom-nav */
        border-radius: 14px 14px 0 0 !important;
    }
    .form-panel-body { padding: 14px !important; }

    /* Drill-down "Dossiers à traiter" : 1 colonne */
    .dat-card { padding: 12px; }
}

/* Très petit mobile (< 380px) */
@media (max-width: 379px) {
    #user_menu .nav-link { font-size: 9.5px !important; padding: 6px 2px !important; }
    #user_menu .nav-link .fa-solid { font-size: 16px !important; }
    .kpi-grid { grid-template-columns: 1fr; }   /* 1 colonne sur très petit écran */
}

/* ─── Diagramme d'avancement agrégé ─────────────────────────── */
.dossier-progress { margin-bottom: 16px; }
.dossier-progress .card-header { display: flex; align-items: center; gap: 8px; }
.dossier-progress .card-header .fa-solid { color: var(--muted); }
.dossier-progress .dp-total {
    margin-left: auto; font-size: 12px; color: var(--muted);
    font-weight: 400; font-family: var(--font-body);
}
.dossier-progress .dp-body { padding: 16px 18px; }
.dp-bar {
    display: grid; grid-template-columns: 120px 1fr 70px;
    gap: 12px; align-items: center; padding: 6px 0;
}
.dp-bar-label {
    font-family: var(--font-display); font-size: 12px; font-weight: 500;
    color: var(--ink-soft);
}
.dp-bar-track {
    height: 8px; background: var(--neutral-soft);
    border-radius: 6px; overflow: hidden; position: relative;
}
.dp-bar-fill {
    height: 100%; background: var(--ink);
    border-radius: 6px; transition: width .4s ease-out;
}
.dp-bar:nth-child(1) .dp-bar-fill { background: var(--muted); }       /* Soumises */
.dp-bar:nth-child(2) .dp-bar-fill { background: var(--ink); }         /* Validées */
.dp-bar:nth-child(3) .dp-bar-fill { background: var(--ok); }          /* Payées */
.dp-bar:nth-child(5) .dp-bar-fill { background: var(--warn); }        /* Refacturées */
.dp-bar:nth-child(6) .dp-bar-fill { background: var(--ok); }          /* Encaissées */
.dp-bar.is-rejected .dp-bar-fill,
.dp-bar:last-child .dp-bar-fill   { background: var(--accent); }      /* Refusées */
.dp-bar-count {
    text-align: right; font-family: var(--font-display); font-weight: 600;
    color: var(--ink); font-feature-settings: 'tnum'; font-size: 13px;
}
.dp-bar-total { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.dp-divider { height: 1px; background: var(--line-soft); margin: 10px 0; }

/* ─── Cards Dossiers à traiter (drill-down depuis KPI dashboard) ─── */
.dat-card { color: var(--ink); transition: border-color .15s, transform .15s; }
.dat-card:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
.dat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dat-code { font-family: var(--font-stack); font-weight: 700; font-size: 16px; color: var(--ink); }
.dat-name { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.dat-metrics { display: flex; gap: 18px; }
.dat-metric { display: flex; flex-direction: column; }
.dat-num { font-size: 22px; font-weight: 700; color: var(--ink); font-feature-settings: 'tnum'; line-height: 1; }
.dat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: 2px; }

/* ─── Header de la liste des lignes — titre + actions ──────── */
.lines-header {
    display: flex; align-items: center; justify-content: space-between;
    margin: 22px 0 10px;
    gap: 12px; flex-wrap: wrap;
}
.lines-title {
    font-family: var(--font-stack);
    font-size: 14px; font-weight: 600; color: var(--ink);
    margin: 0; display: flex; align-items: center; gap: 8px;
}
.lines-count {
    background: var(--neutral-soft); color: var(--muted);
    padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600;
}
.lines-todo {
    background: var(--warn-soft); color: var(--warn);
    padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600;
    margin-left: 4px;
}
.lines-actions { display: flex; gap: 8px; }

/* ─── Cards de ligne — design épuré, teintes légères ───────── */
.lines-list { display: flex; flex-direction: column; gap: 8px; }
.ln-card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 18px;
    transition: border-color .15s, background .15s;
}
.ln-card:hover { border-color: var(--line-strong); }
/* teintes douces selon l'état — sans bordure grasse */
.ln-card.is-rejected { background: rgba(236, 71, 88, 0.04); border-color: rgba(236, 71, 88, 0.18); }
.ln-card.is-paid     { background: rgba(45, 107, 93, 0.04); border-color: rgba(45, 107, 93, 0.18); }

.ln-row { display: flex; align-items: flex-start; gap: 18px; }
.ln-main { flex: 1; min-width: 0; }
.ln-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    white-space: nowrap;
}
.ln-actions { display: flex; gap: 6px; margin-top: 2px; }
.ln-actions .btn { font-size: 11.5px; padding: 4px 10px; }
.ln-actions .btn-success {
    background: var(--ok); border-color: var(--ok); color: #fff;
}
.ln-actions .btn-success:hover { background: #246a52; border-color: #246a52; }
.ln-actions .btn-outline-danger {
    background: transparent; border-color: var(--accent); color: var(--accent);
    padding: 4px 8px;
}
.ln-actions .btn-outline-danger:hover { background: var(--accent); color: #fff; }

.ln-head-meta {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    font-size: 11.5px; color: var(--muted);
}
.ln-ref { font-family: 'SF Mono', Menlo, Consolas, monospace; color: var(--muted); }
.ln-mode { display: inline-flex; align-items: center; gap: 5px; }
.ln-mode .fa-solid { color: var(--muted); }
.ln-by { display: inline-flex; align-items: center; gap: 6px; }
.ln-by-chip {
    background: var(--neutral-soft); color: var(--ink-soft);
    padding: 2px 7px; border-radius: 4px; font-weight: 600; font-size: 10px;
    letter-spacing: .04em;
}
.ln-desc {
    margin: 6px 0 10px;
    color: var(--ink); font-weight: 500; line-height: 1.4;
}

.ln-amount {
    font-size: 17px; font-weight: 700; color: var(--ink);
    font-feature-settings: 'tnum'; letter-spacing: -.01em; line-height: 1;
}

/* Étiquette de statut — moderne, épurée */
.ln-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid;
    line-height: 1.3;
}
.ln-status-wait     { background: var(--warn-soft);    color: var(--warn);   border-color: var(--warn); }
.ln-status-progress { background: var(--neutral-soft); color: var(--ink);    border-color: var(--ink); }
.ln-status-ok       { background: var(--ok-soft);      color: var(--ok);     border-color: var(--ok); }
.ln-status-danger   { background: var(--accent-soft);  color: var(--accent); border-color: var(--accent); }
.ln-status-muted    { background: var(--neutral-soft); color: var(--muted);  border-color: var(--line-strong); }

/* ─── Track 3-milestones (legacy, conservé mais non utilisé dans Vue Dossier v3) ─── */
.ml3-track {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0 4px;
    border-top: 1px dashed var(--line-soft);
}
.ml3-step {
    display: flex; flex-direction: column; align-items: center;
    flex: 0 0 auto; gap: 4px; position: relative; min-width: 80px;
}
.ml3-dot {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--line-strong);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--muted);
    transition: all .2s;
}
.ml3-step.is-done .ml3-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.ml3-step.is-current .ml3-dot {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 0 0 4px var(--accent-soft);
    animation: pulse 2s infinite;
}
.ml3-step.is-rejected .ml3-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.ml3-step.is-pending .ml3-dot  { background: var(--bg-surface); border-color: var(--line-strong); }
.ml3-label {
    font-family: var(--font-display); font-size: 10px;
    color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
    font-weight: 600;
}
.ml3-step.is-done .ml3-label, .ml3-step.is-current .ml3-label { color: var(--ink); }
.ml3-step.is-rejected .ml3-label { color: var(--accent); }
.ml3-sub {
    font-size: 10px; color: var(--muted-2); font-feature-settings: 'tnum';
    white-space: nowrap;
}
.ml3-link {
    flex: 1; height: 2px; background: var(--line);
    margin: 0 -8px;
    margin-bottom: 24px; /* aligne avec le centre des dots */
    z-index: 0;
}

@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 4px var(--accent-soft); }
    50%     { box-shadow: 0 0 0 7px var(--accent-soft); }
}

/* ─── Refacturation badge + flags ───────────────────────────── */
.ln-sub {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 8px;
}
.refact-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 4px;
    font-size: 11px; font-family: var(--font-display); font-weight: 500;
    border: 1px solid var(--line);
}
.refact-badge.refact-interne      { background: var(--neutral-soft); color: var(--muted); }
.refact-badge.refact-a_refacturer { background: var(--warn-soft);    color: var(--warn);    border-color: var(--warn); }
.refact-badge.refact-refacturee   { background: var(--info-soft);    color: var(--ink);     border-color: var(--ink); }
.refact-badge.refact-encaissee    { background: var(--ok-soft);      color: var(--ok);      border-color: var(--ok); }

.ln-flag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 4px;
    font-size: 11px; font-family: var(--font-display); font-weight: 500;
    background: var(--bg-surface-2); color: var(--ink-soft);
    border: 1px solid var(--line);
}
.ln-flag-warn   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn); }
.ln-flag-danger { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.ln-flag-info   { background: var(--neutral-soft); color: var(--ink-soft); }

/* ═════════════════════════════════════════════════════════════════════
   (legacy) MILESTONES GANTT — diagramme évolutif du cycle d'autorisation
   ═════════════════════════════════════════════════════════════════════ */
.ml-board { display: flex; flex-direction: column; gap: 8px; }

.ml-row {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1.5fr 3fr 0.5fr;
    gap: 12px;
    align-items: center;
    transition: border-color .15s, box-shadow .15s;
}
.ml-row:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.ml-row.is-rejected { border-left: 3px solid var(--danger); }
.ml-row.is-paid     { border-left: 3px solid var(--ok); }

.ml-meta { display: flex; flex-direction: column; gap: 2px; }
.ml-meta .ml-ref {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--muted);
}
.ml-meta .ml-desc {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
}
.ml-meta .ml-amount { font-size: 12.5px; color: var(--muted); }
.ml-meta .ml-amount strong { color: var(--ink); font-weight: 700; }

.ml-track {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    position: relative;
    padding: 8px 0;
}

.ml-step {
    text-align: center;
    position: relative;
    padding: 0 4px;
}
.ml-step::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--line);
    z-index: 0;
}
.ml-step:first-child::before { display: none; }

.ml-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--muted);
    position: relative;
    z-index: 1;
    transition: all .2s;
}

.ml-step.is-done .ml-dot {
    background: var(--ok); border-color: var(--ok); color: var(--ink);
    box-shadow: 0 0 0 4px var(--ok-soft);
}
.ml-step.is-done::before { background: var(--ok); }

.ml-step.is-current .ml-dot {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 0 0 4px var(--accent-ring);
    animation: pulse 2s infinite;
}

.ml-step.is-rejected .ml-dot {
    background: var(--danger); border-color: var(--danger); color: #fff;
}

.ml-step.is-skipped .ml-dot {
    background: transparent; border-style: dashed; border-color: var(--muted-2); color: var(--muted-2);
}

.ml-label {
    display: block;
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-top: 6px;
    line-height: 1.2;
    font-weight: 500;
}
.ml-step.is-done   .ml-label,
.ml-step.is-current .ml-label { color: var(--ink); }
.ml-step.is-rejected .ml-label { color: var(--danger); }

.ml-sub {
    display: block;
    font-size: 10px;
    color: var(--muted-2);
    margin-top: 1px;
    font-feature-settings: 'tnum';
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-ring); }
    50%      { box-shadow: 0 0 0 8px var(--accent-ring); }
}

.ml-actions {
    display: flex; flex-direction: column; gap: 4px; align-items: stretch;
}
.ml-actions .btn { font-size: 11px; padding: 4px 8px; }

.ml-legend {
    display: flex; gap: 16px; padding: 10px 14px;
    background: var(--bg-surface); border: 1px solid var(--line);
    border-radius: var(--radius); font-size: 11.5px; color: var(--muted);
    flex-wrap: wrap; margin-bottom: 12px;
}
.ml-legend-item { display: flex; align-items: center; gap: 6px; }
.ml-legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ml-legend-dot.done     { background: var(--ok); }
.ml-legend-dot.current  { background: var(--accent); }
.ml-legend-dot.pending  { background: var(--bg-surface); border: 1.5px solid var(--line-strong); }
.ml-legend-dot.rejected { background: var(--danger); }

/* ─── KPI cards : aérées, teintes légères, sans bordures grasses ──── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.table .text-end strong, .table td.text-end { white-space: nowrap; }
.kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    transition: background .18s, border-color .18s, transform .18s;
    position: relative;
    overflow: hidden;
}
.kpi-card:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
}
.kpi-card.is-clickable { cursor: pointer; }
.kpi-card.is-clickable:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.kpi-card.is-clickable::after {
    content: '→';
    position: absolute; top: 14px; right: 14px;
    color: var(--muted-2); font-size: 13px;
    transition: color .15s, transform .15s;
}
.kpi-card.is-clickable:hover::after { color: var(--accent); transform: translateX(2px); }
.kpi-card .kpi-label {
    color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 600;
}
.kpi-card .kpi-value {
    color: var(--ink); font-size: 30px; font-weight: 600; margin-top: 8px; line-height: 1;
    font-feature-settings: 'tnum'; letter-spacing: -.02em;
}
.kpi-card .kpi-trend { font-size: 11.5px; margin-top: 10px; color: var(--muted); }
/* L'état coloré = teinte douce du fond + nuance du chiffre, sans bordure 3px */
.kpi-card.is-danger { background: rgba(236, 71, 88, 0.05); border-color: rgba(236, 71, 88, 0.18); }
.kpi-card.is-danger .kpi-value { color: var(--danger); }
.kpi-card.is-warn   { background: rgba(180, 83, 9, 0.05);  border-color: rgba(180, 83, 9, 0.18); }
.kpi-card.is-warn   .kpi-value { color: var(--warn); }
.kpi-card.is-ok     { background: rgba(45, 107, 93, 0.05); border-color: rgba(45, 107, 93, 0.18); }
.kpi-card.is-ok     .kpi-value { color: var(--ok); }

/* ─── Dossier summary ───────────────────────────────────────── */
.dossier-header {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 22px;
    display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.dossier-header .dh-code {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600; color: var(--ink);
    letter-spacing: -.01em;
}
.dossier-header .dh-name { color: var(--muted); margin-top: 2px; font-size: 13px; }
.dossier-header .dh-stat { display: flex; flex-direction: column; }
.dossier-header .dh-stat-label {
    color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    font-family: var(--font-display); font-weight: 500;
}
.dossier-header .dh-stat-value {
    color: var(--ink); font-weight: 600; font-size: 15px; font-feature-settings: 'tnum';
    font-family: var(--font-display);
}
.dossier-header .dh-stat-value.over { color: var(--danger); }