/* =========================================================================
   Fic-Bank — Design system premium (SaaS fintech)
   Inter + tabular figures · light/dark · ombres douces · 8px grid
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Marque */
    --brand:        #EA580C;
    --brand-600:    #EA580C;
    --brand-700:    #C2410C;
    --brand-soft:   #FFF7ED;
    --accent:       #059669;
    --accent-soft:  #ECFDF5;

    /* Surfaces (clair) */
    --bg:           #F6F8FC;
    --surface:      #FFFFFF;
    --surface-2:    #FBFCFE;
    --muted:        #F1F5F9;
    --border:       #E6EBF3;
    --border-strong:#D5DDEA;

    /* Texte */
    --fg:           #0F172A;
    --fg-soft:      #475569;
    --fg-muted:     #94A3B8;

    /* Sémantique */
    --danger:       #DC2626;
    --danger-soft:  #FEF2F2;
    --warn:         #D97706;
    --warn-soft:    #FFFBEB;
    --ok:           #059669;
    --ok-soft:      #ECFDF5;
    --info:         #0EA5E9;

    /* Élévation */
    --sh-xs: 0 1px 2px rgba(15,23,42,.06);
    --sh-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --sh-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --sh-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
    --sh-xl: 0 24px 60px rgba(15,23,42,.20);

    /* Rayons */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 999px;

    --ring: 0 0 0 3px rgba(234,88,12,.28);
    --tap: cubic-bezier(.2,.7,.3,1);
}

html[data-theme="dark"] {
    --brand:        #FB923C;
    --brand-600:    #F97316;
    --brand-700:    #EA580C;
    --brand-soft:   #2A1B0F;
    --accent:       #34D399;
    --accent-soft:  #0E2A22;

    --bg:           #0A0F1C;
    --surface:      #111A2E;
    --surface-2:    #0E1626;
    --muted:        #1A2438;
    --border:       #223047;
    --border-strong:#2C3D58;

    --fg:           #E8EEF8;
    --fg-soft:      #AAB7CC;
    --fg-muted:     #6B7C97;

    --danger:       #F87171;
    --danger-soft:  #2A1517;
    --warn:         #FBBF24;
    --warn-soft:    #2A2110;
    --ok:           #34D399;
    --ok-soft:      #0E2A22;

    --sh-xs: 0 1px 2px rgba(0,0,0,.4);
    --sh-sm: 0 1px 3px rgba(0,0,0,.45);
    --sh-md: 0 6px 16px rgba(0,0,0,.5);
    --sh-lg: 0 16px 40px rgba(0,0,0,.6);
    --sh-xl: 0 28px 70px rgba(0,0,0,.7);
    --ring: 0 0 0 3px rgba(251,146,60,.35);
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours masquer, même quand une règle de classe
   force un `display` (ex. .doc-reclass-row{display:flex}). Sans ce garde-fou,
   les styles auteur l'emportent sur la règle navigateur [hidden]{display:none}. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
    transition: background .3s var(--tap), color .3s var(--tap);
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; color: var(--fg); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Topbar ---------- */
.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 16px;
    padding: 0 24px; height: 64px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.brand {
    display: flex; align-items: center; gap: 11px;
    font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
}
.brand .logo {
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
    box-shadow: var(--sh-sm);
}
.brand .logo svg { width: 19px; height: 19px; }
.brand-sub { color: var(--fg-muted); font-weight: 500; font-size: .82rem; }
.topbar .sep { width: 1px; height: 26px; background: var(--border); }
.topbar .spacer { flex: 1; }
.back {
    display: inline-grid; place-items: center; width: 36px; height: 36px;
    border-radius: 10px; color: var(--fg-soft); transition: .15s var(--tap);
}
.back:hover { background: var(--muted); color: var(--fg); }

/* ---------- Layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 24px 80px; }
.wrap.two-col { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .wrap.two-col { grid-template-columns: 1fr; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .sub { color: var(--fg-soft); margin-top: 4px; font-size: .92rem; }

/* ---------- Panels / cards ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: var(--sh-sm);
    margin-bottom: 20px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.panel.sticky { position: sticky; top: 88px; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; font: inherit; font-weight: 600; font-size: .9rem;
    color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
    transition: transform .12s var(--tap), box-shadow .15s var(--tap), background .15s var(--tap), border-color .15s;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { box-shadow: var(--sh-sm); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-700) 40%, transparent);
}
.btn-primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-700) 45%, transparent); }
.btn-light { background: var(--muted); border-color: transparent; }
.btn-light:hover { background: var(--border); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-soft); }
.btn-ghost:hover { background: var(--muted); color: var(--fg); }
.btn-danger { color: var(--danger); border-color: transparent; background: var(--danger-soft); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 14%, var(--danger-soft)); }
.btn-block { width: 100%; }
.btn-mini { height: 32px; padding: 0 12px; font-size: .82rem; border-radius: 7px; }
.icon-btn {
    width: 38px; height: 38px; padding: 0; border-radius: 9px;
    background: transparent; border: 1px solid transparent; color: var(--fg-soft);
    display: inline-grid; place-items: center; cursor: pointer; transition: .15s var(--tap);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: var(--muted); color: var(--fg); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Champs ---------- */
.input, input[type="text"], input[type="search"], textarea, select {
    width: 100%; height: 42px; padding: 0 14px; font: inherit; font-size: .92rem;
    color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r-sm); transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 11px 14px; resize: vertical; min-height: 90px; line-height: 1.5; }
select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.input:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--fg-muted); }
.field-label { display: block; font-size: .8rem; font-weight: 600; color: var(--fg-soft); margin: 0 0 6px; }

.search-wrap { position: relative; flex: 1; max-width: 360px; }
.search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--fg-muted); }
.search-wrap input { padding-left: 40px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 16px 18px; box-shadow: var(--sh-xs);
    cursor: pointer; transition: transform .15s var(--tap), box-shadow .16s var(--tap), border-color .16s;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.stat:focus-visible { outline: none; box-shadow: var(--ring); }
.stat.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--sh-sm); }
.stat.active .val { color: var(--brand); }
.stat .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 10px; }
.stat .ico svg { width: 18px; height: 18px; }
.stat .ico.b { background: var(--brand-soft); color: var(--brand); }
.stat .ico.g { background: var(--ok-soft); color: var(--ok); }
.stat .ico.o { background: var(--warn-soft); color: var(--warn); }
.stat .ico.n { background: var(--muted); color: var(--fg-soft); }
.stat .val { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--fg-soft); font-size: .82rem; margin-top: 5px; }

/* ---------- Cartes dossiers ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 18px; box-shadow: var(--sh-xs); cursor: pointer;
    transition: transform .16s var(--tap), box-shadow .18s var(--tap), border-color .16s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--border-strong); }
.card:focus-within { box-shadow: var(--ring); }
.card-top { display: flex; align-items: flex-start; gap: 12px; }
.avatar {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: grid; place-items: center; font-weight: 700; font-size: .95rem; color: #fff;
    background: linear-gradient(135deg, var(--brand-600), #6366F1);
}
.card-title { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { color: var(--fg-muted); font-size: .8rem; margin-top: 2px; }
.card .menu { margin-left: auto; flex: none; }
.card-top .menu-btn { margin: -6px -6px 0 0; }
.card-meta { display: flex; align-items: center; gap: 10px; color: var(--fg-soft); font-size: .82rem; font-variant-numeric: tabular-nums; }
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-muted); }

/* ---------- Barre de progression ---------- */
.progress { height: 8px; border-radius: var(--r-full); background: var(--muted); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .5s var(--tap); }
.progress.full > span { background: linear-gradient(90deg, var(--ok), var(--accent)); }
.progress-row { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; color: var(--fg-soft); margin-bottom: 6px; font-variant-numeric: tabular-nums; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
    font-size: .75rem; font-weight: 600; border-radius: var(--r-full); white-space: nowrap;
}
.badge svg { width: 13px; height: 13px; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-info { background: var(--brand-soft); color: var(--brand); }
.badge-muted { background: var(--muted); color: var(--fg-soft); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

/* Statut (pastille colorée) */
.statut { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; }
.statut::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.statut.nouveau { color: var(--fg-muted); }
.statut.en_cours { color: var(--info); }
.statut.complet { color: var(--ok); }
.statut.envoye { color: #8B5CF6; }

/* ---------- Tableau des pièces ---------- */
#pieces { overflow-x: auto; }
.pieces-table { width: 100%; border-collapse: collapse; }
.pieces-table th {
    text-align: left; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--fg-muted); padding: 0 12px 10px; border-bottom: 1px solid var(--border);
}
.pieces-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: .88rem; vertical-align: middle; }
.pieces-table tr:last-child td { border-bottom: 0; }
.pieces-table tbody tr { transition: background .12s; }
.pieces-table tbody tr:hover { background: var(--surface-2); }
.file-cell { display: flex; align-items: center; gap: 10px; max-width: 280px; }
.file-cell .ft { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; }
.file-cell .ft svg { width: 16px; height: 16px; }
.ft.pdf { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(220,38,38,.12); }
.ft.img { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px rgba(234,88,12,.12); }
.file-cell a { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-cell a:hover { color: var(--brand); }
.conf { font-size: .74rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.type-select { height: 34px; font-size: .82rem; width: 100%; min-width: 190px; max-width: 260px; }
.err-text { color: var(--danger); font-weight: 600; font-size: .82rem; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.cell-date { font-variant-numeric: tabular-nums; }

/* ---------- Pièces classées par catégorie (vue premium) ---------- */
/* Bandeau récapitulatif + bascule de vue au-dessus des catégories. */
.pieces-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 0 2px 13px; margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.pieces-summary.anim { animation: fb-slide-down .4s var(--tap); }
.ps-stats { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; min-width: 0; }
.ps-stat { font-size: .82rem; color: var(--fg-soft); display: inline-flex; align-items: center; gap: 6px; }
.ps-stat b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.ps-warn { color: var(--warn); }
.ps-warn b { color: var(--warn); }
.ps-warn svg { width: 14px; height: 14px; }

/* Segmented control : Catégories / Personnes / Grille / Liste. */
.view-toggle {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--muted); border: 1px solid var(--border); border-radius: var(--r-full);
}
.vt-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border: 0; background: transparent; cursor: pointer;
    font-size: .8rem; font-weight: 600; color: var(--fg-soft); border-radius: var(--r-full);
    transition: background .18s var(--tap), color .18s, box-shadow .18s, transform .18s var(--tap);
}
.vt-btn svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--tap); }
.vt-btn:hover { color: var(--fg); }
.vt-btn:hover svg { transform: scale(1.12); }
.vt-btn:active { transform: scale(.95); }
.vt-btn.on { background: var(--surface); color: var(--brand); box-shadow: var(--sh-sm); }
.vt-btn.on svg { transform: scale(1.05); }
/* Sous ~560px (et avec 4 vues), on passe en icônes seules pour ne pas déborder. */
@media (max-width: 560px) {
    .vt-lbl { display: none; }
    .vt-btn { padding: 7px 11px; }
}

.cat-groups { display: flex; flex-direction: column; gap: 13px; }

/* Vue « Grille » : mosaïque responsive en colonnes (type « masonry »).
   On utilise des colonnes CSS plutôt que `grid` : les cartes ont des hauteurs
   très variables (selon le nombre de pièces) et `grid` alignerait chaque ligne
   sur la carte la plus haute, laissant de gros espaces vides. Les colonnes
   empilent les cartes au plus serré. Le nombre de colonnes s'adapte tout seul. */
.cat-groups.grille {
    display: block;
    column-width: 340px;
    column-gap: 13px;
}
.cat-groups.grille .cat {
    width: 100%;
    margin: 0 0 13px;
    break-inside: avoid;            /* une carte n'est jamais coupée entre 2 colonnes */
    -webkit-column-break-inside: avoid;
}

/* Vue « Liste » : toutes les pièces à plat, en lignes-cartes compactes. */
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-list .doc-row {
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--sh-xs);
    padding: 11px 14px;
    transition: background .16s var(--tap), box-shadow .18s var(--tap),
                border-color .18s var(--tap), transform .18s var(--tap);
}
.doc-list .doc-row:hover {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: var(--sh-sm);
    transform: translateY(-1px);
}
/* L'accent latéral au survol reprend le liseré coloré des cartes. */
.doc-list .doc-row::before { border-radius: var(--r-md) 0 0 var(--r-md); }
.doc-list .doc-row:hover::before { width: 3px; }
/* Apparition en cascade des lignes au premier rendu / changement de vue. */
.cat-groups.anim .dl-row {
    opacity: 0;
    animation: fb-rise .42s var(--tap) forwards;
    animation-delay: calc(var(--i, 0) * 28ms);
}

.cat {
    --cat:      hsl(var(--cat-hue) 48% 52%);
    --cat-deep: hsl(var(--cat-hue) 46% 38%);
    /* Tout le contour reprend la couleur de la catégorie (comme l'icône),
       légèrement adouci pour rester élégant ; liseré gauche en couleur pleine. */
    border: 1px solid color-mix(in srgb, var(--cat) 55%, var(--border));
    border-left: 3px solid var(--cat);          /* repère couleur de la catégorie, pleine hauteur */
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    position: relative;
    transition: box-shadow .22s var(--tap), border-color .22s var(--tap), transform .22s var(--tap);
}
/* Voile neutre très léger révélé au survol. */
.cat::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(120% 90% at 0% 0%, hsl(var(--cat-hue) 22% 55% / .05), transparent 62%);
    transition: opacity .3s var(--tap);
}
.cat:hover::after { opacity: 1; }
.cat:hover {
    box-shadow: var(--sh-md);
    border-color: var(--cat);                    /* contour intensifié à la couleur de la catégorie */
    transform: translateY(-2px);
}
html[data-theme="dark"] .cat:hover { border-color: var(--cat); }

.cat-head {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 16px;
    position: relative; z-index: 1;
    cursor: default;
    /* Lavis de couleur très discret depuis la gauche : identité de la catégorie
       sans surcharge — l'essentiel du code couleur passe par le liseré et la tuile. */
    background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 7%, var(--surface)) 0%, var(--surface) 58%);
}
html[data-theme="dark"] .cat-head {
    background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 14%, var(--surface)) 0%, var(--surface) 60%);
}

/* Tuile d'icône pleine, façon icône produit : couleur de la catégorie, glyphe blanc. */
.cat-ic {
    width: 42px; height: 42px; border-radius: 11px; flex: none;
    display: grid; place-items: center;
    position: relative; overflow: hidden;       /* clippe le reflet glossy */
    color: #fff;
    background: linear-gradient(155deg, var(--cat) 0%, var(--cat-deep) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 0 0 1px hsl(var(--cat-hue) 45% 36% / .4),
        0 2px 6px hsl(var(--cat-hue) 42% 40% / .28);
    transition: transform .25s var(--tap), box-shadow .25s var(--tap);
}
/* Reflet lumineux discret qui balaie l'icône au survol de la carte. */
.cat-ic::before {
    content: ""; position: absolute; inset: -1px; pointer-events: none;
    background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.35) 50%, transparent 64%);
    transform: translateX(-130%);
    transition: transform .7s var(--tap);
}
.cat:hover .cat-ic::before { transform: translateX(130%); }
html[data-theme="dark"] .cat-ic {
    color: #fff;
    background: linear-gradient(155deg, hsl(var(--cat-hue) 44% 47%) 0%, hsl(var(--cat-hue) 46% 33%) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.06), 0 3px 9px rgba(0,0,0,.4);
}
.cat:hover .cat-ic {
    transform: scale(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        inset 0 0 0 1px hsl(var(--cat-hue) 45% 36% / .5),
        0 6px 14px hsl(var(--cat-hue) 42% 40% / .34);
}
.cat-ic svg { position: relative; z-index: 1; width: 21px; height: 21px; transition: transform .25s var(--tap); }
.cat:hover .cat-ic svg { transform: scale(1.04); }

.cat-info { min-width: 0; flex: 1; }
.cat-title { font-size: .96rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.cat-count { font-size: .76rem; color: var(--fg-muted); font-weight: 500; }
.cat-exp { color: var(--fg-muted); opacity: .8; }

/* Pastille de comptage (ou coche de complétude). */
.cat-badge {
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--fg-soft);
    background: var(--muted);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    transition: transform .2s var(--tap);
}
html[data-theme="dark"] .cat-badge { color: var(--fg-soft); }
.cat:hover .cat-badge { transform: scale(1.08); }
.cat-badge.done {
    color: #fff;
    background: linear-gradient(145deg, hsl(152 42% 44%), hsl(152 46% 34%));
    box-shadow: 0 2px 6px hsl(152 40% 40% / .3);
    animation: fb-glow 3s ease-in-out infinite;
}
.cat-badge.done svg { width: 14px; height: 14px; }
/* La complétude est signalée par la pastille verte ✓ ; le contour reste à la
   couleur de la catégorie (cf. demande : contour = couleur de l'icône). */

.cat-toggle { color: var(--fg-muted); transition: transform .28s var(--tap), background .15s; }
.cat-toggle:hover { color: var(--fg-soft); }
.cat.collapsed .cat-toggle { transform: rotate(-90deg); }
.cat .cat-body { overflow: hidden; }
.cat.collapsed .cat-body {
    max-height: 0 !important;
    opacity: 0;
    transition: max-height .3s var(--tap), opacity .2s;
}

/* ----- Animations ----- */
@keyframes fb-rise {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@keyframes fb-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fb-pop {
    0% { transform: scale(.6); opacity: 0; }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes fb-glow {
    0%, 100% { box-shadow: 0 2px 6px hsl(152 40% 40% / .3); }
    50%      { box-shadow: 0 2px 11px hsl(152 44% 42% / .45); }
}
.cat-groups.anim .cat {
    opacity: 0;
    animation: fb-rise .5s var(--tap) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
.cat-groups.anim .cat .cat-ic,
.cat-groups.anim .cat .person-av {
    animation: fb-pop .5s var(--tap) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}

.cat-body {
    border-top: 1px solid var(--border);
    max-height: 2400px;
    transition: max-height .35s var(--tap), opacity .25s;
}
.doc-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center; column-gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    transition: background .16s var(--tap), box-shadow .16s, opacity .16s;
    position: relative;
}
.doc-row:last-child { border-bottom: 0; }

/* ----- Glisser-déposer d'une pièce ----- */
.doc-row[draggable="true"] { cursor: grab; }
.doc-row[draggable="true"]:active { cursor: grabbing; }
/* Poignée de glissement, révélée au survol de la ligne (à gauche, sur la marge). */
.doc-grip {
    position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 14px;
    color: var(--fg-muted); opacity: 0; pointer-events: none;
    transition: opacity .15s var(--tap);
}
.doc-row:hover .doc-grip { opacity: .55; }
.doc-row.dragging { opacity: .45; }
/* Carte mise en avant quand on survole une cible de dépôt valide. */
.cat.drop-target {
    border-color: var(--cat);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat) 55%, transparent), var(--sh-md);
    transform: translateY(-2px);
}
.cat.drop-target .cat-head { background: color-mix(in srgb, var(--cat) 12%, var(--surface-2)); }
/* Pendant un glissement, on atténue les cibles non concernées pour guider l'œil. */
.dnd-active .cat:not(.drop-target) { opacity: .82; }
.dnd-active .doc-row.dragging { opacity: .45; }
.doc-row::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: var(--border-strong); border-radius: 0 2px 2px 0;
    transition: width .18s var(--tap);
}
.doc-row:hover { background: var(--surface-2); }
.doc-row:hover::before { width: 3px; }
.doc-row .ft {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    display: grid; place-items: center;
    transition: transform .18s var(--tap);
}
.doc-row:hover .ft { transform: scale(1.08); }
.doc-row .ft svg { width: 16px; height: 16px; }
/* Dans une carte de catégorie, l'icône du fichier reprend la couleur de la
   catégorie (comme l'icône premium .cat-ic) pour un rendu homogène et pro. */
.cat .doc-row .ft.pdf,
.cat .doc-row .ft.img {
    color: var(--fg-soft);
    background: var(--surface-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px var(--border-strong);
}
html[data-theme="dark"] .cat .doc-row .ft.pdf,
html[data-theme="dark"] .cat .doc-row .ft.img {
    color: var(--fg-soft);
    background: var(--surface-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px var(--border);
}
.doc-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.doc-name {
    font-weight: 600; font-size: .87rem; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-name:hover { color: var(--brand); }
.doc-sub { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.doc-meta { font-size: .76rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-date { font-size: .76rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }

/* Étiquette de catégorie (vue par personne). */
.doc-cat {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0;
    max-width: 220px; padding: 2px 9px 2px 7px; border-radius: var(--r-full);
    font-size: .72rem; font-weight: 600; color: var(--fg-soft);
    background: var(--muted);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-cat svg { width: 12px; height: 12px; flex: none; }
html[data-theme="dark"] .doc-cat { color: var(--fg-soft); background: var(--muted); }

/* Badge « doublon suspect » : pièces qui semblent être le même document. */
.doc-dup {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 2px 9px 2px 7px; border: 0; border-radius: var(--r-full);
    font-size: .72rem; font-weight: 600; line-height: 1.2; cursor: pointer;
    color: var(--warn); background: var(--warn-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent);
    transition: transform .2s var(--tap), box-shadow .2s var(--tap);
}
.doc-dup:hover { box-shadow: inset 0 0 0 1px var(--warn); transform: translateY(-1px); }
.doc-dup svg { width: 12px; height: 12px; flex: none; }

/* Mise en évidence des pièces du même groupe au clic sur le badge. */
.doc-row.dup-flash {
    background: var(--warn-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent);
    animation: dup-flash 2.4s ease;
}
@keyframes dup-flash {
    0%, 100% { background: var(--warn-soft); }
    20%, 60% { background: color-mix(in srgb, var(--warn) 18%, transparent); }
}

/* Avatar initiales d'une personne (en-tête de la vue par personne). */
.person-av {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: .9rem; font-weight: 700; letter-spacing: .02em; color: #fff;
    /* Couleur stable et sobre dérivée du nom (teinte portée par --cat-hue),
       même registre que les tuiles de catégorie : identité sans saturation criarde. */
    background: linear-gradient(145deg, hsl(var(--cat-hue) 30% 50%), hsl(var(--cat-hue) 32% 39%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 8px hsl(var(--cat-hue) 25% 35% / .3);
    transition: transform .25s var(--tap), box-shadow .25s var(--tap);
}
.cat:hover .person-av { transform: scale(1.06); }
.person-av svg { width: 19px; height: 19px; }
.person-inconnu .person-av {
    color: var(--fg-muted);
    background: var(--muted);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}
.person-multi .person-av {
    color: #fff;
    background: linear-gradient(145deg, hsl(262 60% 60%), hsl(262 55% 48%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px hsl(262 50% 45% / .3);
}

/* Préfixe civilité dans le nom + sélecteur M./Mme. */
.civ-pre { color: var(--fg-muted); font-weight: 800; }
.civ-toggle { display: inline-flex; padding: 2px; gap: 2px; background: var(--muted); border-radius: var(--r-full); flex: none; }
.civ-toggle button {
    border: 0; background: transparent; cursor: pointer;
    padding: 3px 9px; font-size: .74rem; font-weight: 700; color: var(--fg-soft);
    border-radius: var(--r-full); transition: background .15s, color .15s;
}
.civ-toggle button:hover { color: var(--fg); }
.civ-toggle button.on { background: var(--surface); color: var(--brand); box-shadow: var(--sh-xs); }

/* Bloc d'actions à droite : confiance + reclasser + télécharger + supprimer. */
.doc-side { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.doc-side .conf {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 600; color: var(--fg-soft);
    background: var(--muted); padding: 3px 9px 3px 7px; border-radius: var(--r-full);
    margin-right: 4px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.conf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); flex: none; }
.conf-hi  { color: var(--ok); background: var(--ok-soft); }
.conf-hi .conf-dot  { background: var(--ok); box-shadow: 0 0 0 3px hsl(152 70% 45% / .15); }
.conf-mid { color: var(--fg-soft); }
.conf-lo  { color: var(--warn); background: var(--warn-soft); }
.conf-lo .conf-dot  { background: var(--warn); box-shadow: 0 0 0 3px hsl(38 90% 50% / .15); }
.doc-side .icon-btn { transition: transform .16s var(--tap), background .15s, color .15s; }
.doc-side .icon-btn:hover { transform: translateY(-1px); }
.doc-side .icon-btn:active { transform: scale(.9); }
.doc-reclass.on, .doc-move.on { color: var(--brand); background: var(--brand-soft); transform: rotate(0); }
.doc-reclass.on svg, .doc-move.on svg { animation: fb-pop .35s var(--tap); }

/* Lignes repliées (reclassement / rattachement personne) sous la ligne du document. */
.doc-reclass-row, .doc-move-row {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px;
    margin: 8px 0 2px; padding: 8px 10px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
.doc-reclass-row:not([hidden]), .doc-move-row:not([hidden]) { animation: fb-slide-down .26s var(--tap); }
.reclass-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--fg-soft); white-space: nowrap; }
.doc-reclass-row .type-select, .doc-move-row .person-select { height: 34px; font-size: .82rem; flex: 1; min-width: 0; max-width: 320px; }

@media (max-width: 560px) {
    .doc-reclass-row, .doc-move-row { flex-direction: column; align-items: stretch; }
    .doc-reclass-row .type-select, .doc-move-row .person-select { max-width: 100%; }

    /* Sur mobile, les boutons d'action passent sous le nom du fichier : sinon
       ils écrasent la colonne centrale et le nom est tronqué à quasi rien. */
    .doc-row { grid-template-columns: 30px minmax(0, 1fr); row-gap: 2px; }
    .doc-side {
        grid-column: 1 / -1;
        justify-content: flex-start; flex-wrap: wrap; gap: 6px;
        margin-top: 2px;
    }
}

/* Respect des préférences d'accessibilité : on coupe les animations. */
@media (prefers-reduced-motion: reduce) {
    .cat, .cat-ic, .cat-ic svg, .cat::after, .cat-badge,
    .doc-row, .doc-row .ft, .doc-side .icon-btn { transition: none; }
    .cat-groups.anim .cat, .cat-groups.anim .cat .cat-ic, .pieces-summary.anim,
    .doc-reclass-row:not([hidden]), .doc-move-row:not([hidden]),
    .doc-reclass.on svg, .doc-move.on svg, .cat-badge.done { animation: none; }
    .cat-groups.anim .cat { opacity: 1; }
    .cat-ic::before { display: none; }
}

/* ---------- Dropzone ---------- */
.dropzone {
    border: 2px dashed var(--border-strong); border-radius: var(--r-md);
    padding: 34px 20px; text-align: center; color: var(--fg-soft);
    background: var(--surface-2); transition: .18s var(--tap); cursor: pointer;
}
.dropzone .dz-ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px;
    background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.dropzone .dz-ico svg { width: 26px; height: 26px; }
.dropzone strong { color: var(--fg); }
.dropzone.over { border-color: var(--brand); background: var(--brand-soft); transform: scale(1.005); }
.dropzone .link { color: var(--brand); font-weight: 600; cursor: pointer; }
.dropzone .hint { font-size: .8rem; color: var(--fg-muted); margin: 8px 0 0; }
.dropzone-actions { margin-top: 14px; }
.checkbox { display: inline-flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--fg-soft); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--brand); }

/* ---------- File d'envoi ---------- */
.queue { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.queue:empty { display: none; }
.queue li { display: flex; flex-direction: column; gap: 8px;
    padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: .85rem; }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-status { font-size: .8rem; color: var(--fg-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-status.ok { color: var(--ok); } .q-status.err { color: var(--danger); } .q-status.warn { color: var(--warn); }

/* Barre de progression : masquée par défaut, visible pendant l'envoi/l'analyse. */
.q-bar {
    display: none; position: relative; overflow: hidden;
    height: 6px; border-radius: var(--r-full); background: var(--muted);
}
.q-uploading .q-bar, .q-busy .q-bar { display: block; }
.q-bar-fill {
    display: block; height: 100%; width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-600), var(--brand));
    transition: width .25s var(--tap);
}
/* Reflet animé qui balaie la barre tant qu'un transfert est en cours. */
.q-uploading .q-bar-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-100%);
    animation: q-shine 1.1s var(--tap) infinite;
}
/* État indéterminé (analyse IA) : barre pleine qui pulse et défile. */
.q-busy .q-bar-fill {
    width: 100%;
    background: linear-gradient(90deg, var(--brand-soft), var(--brand), var(--brand-soft));
    background-size: 200% 100%;
    animation: q-indeterminate 1.2s linear infinite;
}
@keyframes q-shine { to { transform: translateX(100%); } }
@keyframes q-indeterminate { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .q-uploading .q-bar-fill::after, .q-busy .q-bar-fill { animation: none; }
}

/* ---------- Complétude ---------- */
.comp-ring { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ring { --p: 0; width: 76px; height: 76px; flex: none; border-radius: 50%;
    background: conic-gradient(var(--brand) calc(var(--p)*1%), var(--muted) 0);
    display: grid; place-items: center; }
.ring.full { background: conic-gradient(var(--ok) calc(var(--p)*1%), var(--muted) 0); }
.ring b { width: 58px; height: 58px; border-radius: 50%; background: var(--surface); display: grid; place-items: center;
    font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.comp-ring .ci .t { font-weight: 700; }
.comp-ring .ci .s { color: var(--fg-soft); font-size: .84rem; margin-top: 2px; }
.comp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.comp-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); font-size: .86rem; }
.comp-list li:hover { background: var(--surface-2); }
.comp-list .ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.comp-list .ic svg { width: 13px; height: 13px; }
.comp-list li.ok .ic { background: var(--ok-soft); color: var(--ok); }
.comp-list li.miss .ic { background: var(--danger-soft); color: var(--danger); }
.comp-list li.opt .ic { background: var(--muted); color: var(--fg-muted); }
.comp-list li.miss { color: var(--fg); }
.comp-list .cnt { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--fg-soft); background: var(--muted); padding: 1px 8px; border-radius: var(--r-full); font-variant-numeric: tabular-nums; }
.comp-list .tag { font-size: .68rem; color: var(--fg-muted); border: 1px solid var(--border); padding: 0 6px; border-radius: var(--r-full); }

/* ---------- États vides ---------- */
.vide, .empty { text-align: center; color: var(--fg-muted); padding: 40px 20px; }
.empty .ei { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 16px; background: var(--muted); color: var(--fg-muted); display: grid; place-items: center; }
.empty .ei svg { width: 30px; height: 30px; }
.empty h3 { color: var(--fg); margin-bottom: 6px; }

/* ---------- Menu déroulant ---------- */
.menu { position: relative; }
.menu-pop {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 190px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: var(--sh-lg); padding: 6px; opacity: 0; transform: translateY(-6px) scale(.98);
    pointer-events: none; transition: .16s var(--tap);
}
.menu.open .menu-pop { opacity: 1; transform: none; pointer-events: auto; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: none;
    font: inherit; font-size: .87rem; font-weight: 500; color: var(--fg); border-radius: var(--r-sm); cursor: pointer; text-align: left; }
.menu-item svg { width: 16px; height: 16px; color: var(--fg-soft); }
.menu-item:hover { background: var(--muted); }
.menu-item.danger { color: var(--danger); } .menu-item.danger svg { color: var(--danger); }
.menu-sep { height: 1px; background: var(--border); margin: 5px 0; }
.corbeille-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; }
/* Dans le bouton de la barre du haut, le badge suit le libellé (pas de poussée). */
#btn-corbeille-dossiers .corbeille-badge { margin-left: 2px; }
#btn-corbeille-dossiers .corbeille-badge[hidden] { display: none; }

/* ---------- Corbeille (liste de récupération) ---------- */
.trash-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.trash-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.trash-info { min-width: 0; flex: 1; }
.trash-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trash-meta { color: var(--fg-soft); font-size: .78rem; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trash-row .btn { flex: none; }
.trash-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Vignettes d'aperçu dans la corbeille */
.trash-thumb { flex: none; width: 46px; height: 58px; border-radius: 6px; object-fit: cover;
    background: var(--muted); border: 1px solid var(--border); display: block; }
canvas.trash-thumb { opacity: 0; transition: opacity .25s; object-fit: contain; }
canvas.trash-thumb.is-ready { opacity: 1; }
.trash-thumb-ph, .trash-thumb-av { display: flex; align-items: center; justify-content: center;
    color: var(--fg-soft); }
.trash-thumb-av { font-weight: 700; font-size: .9rem; color: var(--fg);
    background: var(--accent-soft, var(--muted)); }
.trash-thumb-btn { flex: none; padding: 0; border: 0; background: none; cursor: pointer;
    border-radius: 6px; line-height: 0; }
.trash-thumb-btn:hover .trash-thumb { border-color: var(--accent, var(--fg-soft)); }
.trash-thumb-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.trash-pieces { color: var(--fg-soft); font-size: .76rem; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Onglets de la corbeille (liste / historique) */
.trash-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.trash-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
    background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
    color: var(--fg-soft); font-size: .86rem; font-weight: 600; margin-bottom: -1px; }
.trash-tab svg { width: 15px; height: 15px; }
.trash-tab:hover { color: var(--fg); }
.trash-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Journal des mouvements de corbeille */
.hist-list { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow: auto; }
.hist-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px;
    border-bottom: 1px solid var(--border); }
.hist-row:last-child { border-bottom: 0; }
.hist-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; background: var(--muted); color: var(--fg-soft); }
.hist-ic svg { width: 15px; height: 15px; }
.hist-row.hist-suppr   .hist-ic { background: var(--danger-soft); color: var(--danger); }
.hist-row.hist-purge   .hist-ic { background: var(--danger-soft); color: var(--danger); }
.hist-row.hist-restaure .hist-ic { background: var(--accent-soft); color: var(--accent); }
.hist-info { min-width: 0; flex: 1; }
.hist-line { font-size: .86rem; }
.hist-line b { font-weight: 700; }
.hist-meta { color: var(--fg-soft); font-size: .76rem; margin-top: 1px; }

/* ---------- Modal ---------- */
.modal-scrim {
    position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.55);
    backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity .2s var(--tap);
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
    width: 100%; max-width: 460px; max-height: min(88vh, 720px); background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-xl); padding: 24px;
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(12px) scale(.97); transition: transform .22s var(--tap);
}
.modal-scrim.open .modal { transform: none; }
.modal h3 { font-size: 1.15rem; margin-bottom: 6px; flex: none; }
.modal .m-sub { color: var(--fg-soft); font-size: .88rem; margin-bottom: 18px; flex: none; }
.modal .m-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; margin: -2px -2px 0; padding: 2px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex: none; }
.modal:has([data-marker="email-modal-marker"]) { max-width: 560px; }

/* ---------- Fiche banque (modale plein écran) ---------- */
.fiche-scrim {
    position: fixed; inset: 0; z-index: 120; background: rgba(15,23,42,.6);
    backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px;
    opacity: 0; pointer-events: none; transition: opacity .2s var(--tap);
}
.fiche-scrim.open { opacity: 1; pointer-events: auto; }
.fiche-modal {
    width: 100%; max-width: 880px; height: 92vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-xl); overflow: hidden;
    transform: translateY(14px) scale(.98); transition: transform .22s var(--tap);
}
.fiche-scrim.open .fiche-modal { transform: none; }
.fiche-bar {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px;
    border-bottom: 1px solid var(--border); background: var(--surface-2); flex: none;
}
.fiche-bar .spacer { flex: 1; }
.fiche-title { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .98rem;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-title svg { flex: none; color: var(--brand-600); }
.fiche-body { flex: 1; min-height: 0; background: #fff; }
.fiche-frame { width: 100%; height: 100%; border: 0; display: block; }
/* Aperçu PDF : toutes les pages empilées et défilables. */
.fiche-body.pdf-body { overflow: auto; background: var(--muted); }
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; }
.pdf-pages .pdf-page { max-width: 100%; height: auto; background: #fff;
    border-radius: 6px; box-shadow: var(--sh-md); }
.pdf-loading { display: inline-flex; align-items: center; gap: 8px; padding: 28px;
    color: var(--fg-muted); font-weight: 600; }
.fiche-body.media-body { background: var(--muted); overflow: auto; display: grid; place-items: center; padding: 18px; }
.media-img { width: 100%; }
.media-img img { display: block; max-width: 100%; margin: 0 auto; border-radius: 6px; background: #fff; box-shadow: var(--sh-md); }
@media (max-width: 640px) { .fiche-modal { height: 96vh; max-width: none; } }

/* ---------- Dossier banque (regroupements) ---------- */
.bank-modal { max-width: 720px; }
.bank-body { background: var(--bg); overflow: auto; padding: 18px; }
.bank-intro { font-size: .84rem; color: var(--fg-soft); margin: 0 2px 14px; }
.bank-intro b { color: var(--fg); }
#bank-list { display: flex; flex-direction: column; gap: 10px; }
.bank-item {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 14px; background: var(--surface);
    border: 1px solid var(--border); border-left: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--sh-xs);
    transition: box-shadow .15s, border-color .15s;
}
.bank-item:hover { box-shadow: var(--sh-sm); }
.bank-item .cat-ic {
    width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
    color: hsl(var(--cat-hue) 46% 40%);
    background: linear-gradient(145deg, hsl(var(--cat-hue) 42% 97%), hsl(var(--cat-hue) 40% 95%));
}
html[data-theme="dark"] .bank-item .cat-ic { background: hsl(var(--cat-hue) 28% 18%); color: hsl(var(--cat-hue) 42% 74%); }
.bank-item .cat-ic svg { width: 20px; height: 20px; }
.bank-info { min-width: 0; flex: 1; }
.bank-titre { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.bank-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 3px; font-size: .76rem; }
.bank-count { color: var(--fg-muted); font-weight: 600; }
.bank-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; }
.bank-ok svg { width: 13px; height: 13px; }
.bank-warn { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 600; }
.bank-warn svg { width: 13px; height: 13px; }
.bank-iso { color: var(--fg-muted); font-style: italic; }
.bank-item.bank-working { border-color: var(--brand); box-shadow: var(--ring); }
.bank-item.bank-done { border-left-color: var(--ok); }
.bank-item.bank-done .bank-titre::after { content: " ✓"; color: var(--ok); }
.bank-item.bank-fail { border-left-color: var(--danger); }
@media (max-width: 560px) {
    .bank-item { flex-wrap: wrap; }
    .bank-item .btn { width: 100%; justify-content: center; }
}

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
    display: flex; align-items: center; gap: 11px; min-width: 260px; max-width: 380px;
    padding: 13px 15px; background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--brand); border-radius: var(--r-md); box-shadow: var(--sh-lg);
    font-size: .88rem; font-weight: 500;
    animation: toast-in .28s var(--tap);
}
.toast.ok { border-left-color: var(--ok); } .toast.ok .ti { color: var(--ok); }
.toast.err { border-left-color: var(--danger); } .toast.err .ti { color: var(--danger); }
.toast.info .ti { color: var(--brand); }
.toast .ti { flex: none; } .toast .ti svg { width: 19px; height: 19px; }
.toast.hide { animation: toast-out .25s var(--tap) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ---------- Bouton + historique des notifications ---------- */
#notif-btn { position: relative; overflow: visible; }
.notif-count {
    position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: var(--danger); color: #fff;
    font-size: .64rem; font-weight: 800; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface); pointer-events: none;
}
.notif-modal { width: min(560px, 94vw); }
.notif-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.notif-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.notif-toolbar .chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px; cursor: pointer;
    background: var(--muted); border: 1px solid transparent; color: var(--fg-soft);
    font-size: .78rem; font-weight: 600; transition: .14s var(--tap);
}
.notif-toolbar .chip:hover { color: var(--fg); }
.notif-toolbar .chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.notif-toolbar .chip .chip-n { font-size: .68rem; font-weight: 700; opacity: .8; }
.notif-toolbar .chip svg { width: 14px; height: 14px; }
.notif-sort { margin-left: auto; }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.notif-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--brand);
    border-radius: var(--r-md); background: var(--surface); font-size: .85rem;
}
.notif-item.ok { border-left-color: var(--ok); } .notif-item.ok .ni-ic { color: var(--ok); }
.notif-item.err { border-left-color: var(--danger); } .notif-item.err .ni-ic { color: var(--danger); }
.notif-item.warn { border-left-color: var(--warn); } .notif-item.warn .ni-ic { color: var(--warn); }
.notif-item.info .ni-ic { color: var(--brand); }
.notif-item .ni-ic { flex: none; margin-top: 1px; }
.notif-item .ni-msg { flex: 1; font-weight: 500; word-break: break-word; }
.notif-item .ni-time { flex: none; color: var(--fg-soft); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.notif-empty { padding: 18px; text-align: center; color: var(--fg-soft); font-size: .88rem; }

/* ---------- Notes ---------- */
.notes-save { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.save-hint { font-size: .78rem; color: var(--fg-muted); margin-right: auto; }

/* ---------- Assistant IA ---------- */
.ai-panel { border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); }
.ai-panel .panel-head h2 { display: flex; align-items: center; gap: 8px; }
.ai-spark {
    display: inline-grid; place-items: center; width: 30px; height: 30px;
    border-radius: 9px; color: #fff;
    background: linear-gradient(135deg, var(--brand-600), #7C3AED);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-700) 40%, transparent);
}
.ai-loading {
    display: flex; align-items: center; gap: 9px; color: var(--fg-soft);
    font-size: .9rem; padding: 10px 2px;
}
.ai-loading svg { color: var(--brand-600); animation: ai-pulse 1.1s ease-in-out infinite; }
@keyframes ai-pulse { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }

.ai-synthese {
    font-size: .92rem; line-height: 1.55; color: var(--fg);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 12px 14px; margin-top: 4px;
}
.ai-profil {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem; color: var(--fg-soft); margin-top: 10px;
}
.ai-profil svg { flex: none; color: var(--brand-600); }

.ai-block { margin-top: 16px; }
.ai-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ai-block-head h3 { margin: 0; }
.ai-block h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); margin: 0 0 8px; }

.ai-vig { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ai-vig li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: .86rem; line-height: 1.45; color: var(--fg);
    padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--border);
}
.ai-vig .vig-ic { flex: none; margin-top: 1px; }
.vig-info       { background: color-mix(in srgb, var(--info) 9%, transparent); border-color: color-mix(in srgb, var(--info) 30%, var(--border)); }
.vig-info .vig-ic       { color: var(--info); }
.vig-attention  { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.vig-attention .vig-ic  { color: var(--warn); }
.vig-alerte     { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.vig-alerte .vig-ic     { color: var(--danger); }

.ai-ok {
    display: flex; align-items: center; gap: 8px; margin-top: 14px;
    font-size: .86rem; color: var(--ok); font-weight: 600;
    background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border));
    border-radius: var(--r-sm); padding: 9px 11px;
}
.ai-relance {
    width: 100%; resize: vertical; font: inherit; font-size: .86rem; line-height: 1.5;
    color: var(--fg); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 12px;
}
.ai-relance:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); }

/* ---------- Directives à l'IA (note de synthèse) ---------- */
.note-directives { margin: 8px 0 4px; }
.note-directives > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: .82rem; color: var(--fg-muted); list-style: none; user-select: none;
}
.note-directives > summary::-webkit-details-marker { display: none; }
.note-directives > summary:hover { color: var(--fg); }
.note-directives[open] > summary { margin-bottom: 8px; }
.note-directives textarea { width: 100%; min-height: 64px; font-size: .86rem; }

/* ---------- Analyse financière ---------- */
.ai-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--brand-700); background: var(--brand-soft);
    border-radius: var(--r-full); padding: 3px 9px;
}
.ai-tag svg { color: var(--brand-600); }

/* Jauge du taux d'endettement (centrée, lisible en colonne étroite) */
.fin-hero {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    border-radius: var(--r-md); padding: 18px 16px; margin-bottom: 16px;
    border: 1px solid var(--border); background: var(--surface-2);
}
.fin-gauge { display: flex; flex-direction: column; align-items: center; }
.fin-taux { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fin-lib { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); margin-top: 6px; }
.fin-verdict {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: var(--r-full);
}
.fin-verdict::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fin-ok      { border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); background: var(--ok-soft); }
.fin-ok .fin-taux      { color: var(--ok); }
.fin-ok .fin-verdict   { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.fin-limite  { border-color: color-mix(in srgb, var(--warn) 38%, var(--border)); background: var(--warn-soft); }
.fin-limite .fin-taux    { color: var(--warn); }
.fin-limite .fin-verdict { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.fin-alerte  { border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); background: var(--danger-soft); }
.fin-alerte .fin-taux    { color: var(--danger); }
.fin-alerte .fin-verdict { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.fin-na .fin-taux { color: var(--fg-muted); }
.fin-na .fin-verdict { color: var(--fg-muted); background: var(--muted); }

.fin-rows { list-style: none; margin: 0; padding: 0; }
.fin-rows li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 8px 2px; font-size: .88rem; border-bottom: 1px solid var(--border);
}
.fin-rows li:last-child { border-bottom: none; }
.fin-rows li > span { color: var(--fg-soft); min-width: 0; }
.fin-rows li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-rows .fin-sub > span { color: var(--fg-muted); font-size: .8rem; padding-left: 12px; }
.fin-rows .fin-sub > b { color: var(--fg-muted); font-weight: 600; }
.fin-rows .fin-simu > b { color: var(--warn); }
.fin-reste { margin-top: 2px; padding-top: 11px !important; border-top: 1px solid var(--border-strong); }
.fin-reste > span { color: var(--fg) !important; font-weight: 600; }
.fin-reste > b { color: var(--brand-700); font-size: 1.05rem; }
.fin-note { font-size: .75rem; color: var(--fg-muted); margin: 12px 0 0; line-height: 1.45; }

/* Paramètres avancés (édition du tableau de bord) */
.fin-params { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 4px; }
.fin-params > summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-size: .82rem; font-weight: 600; color: var(--brand-700);
    padding: 9px 2px; user-select: none; border-radius: var(--r-sm);
}
.fin-params > summary:hover { color: var(--brand-600); }
.fin-params > summary::-webkit-details-marker { display: none; }
.fin-params > summary svg { color: var(--brand-600); }
.fin-fields {
    display: flex; flex-direction: column; gap: 2px; margin-top: 6px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 6px 12px;
}
.fin-field {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.fin-field:last-child { border-bottom: none; }
.fin-flabel { font-size: .84rem; color: var(--fg-soft); flex: 1; min-width: 0; line-height: 1.3; }
.fin-input { position: relative; flex: none; width: 116px; }
.fin-input input {
    width: 100%; height: 36px; padding: 0 28px 0 10px; font: inherit; font-size: .9rem;
    text-align: right; font-variant-numeric: tabular-nums;
    color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    -moz-appearance: textfield;
}
.fin-input input::-webkit-outer-spin-button,
.fin-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fin-input input:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); }
.fin-input .unit {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: .82rem; color: var(--fg-muted); pointer-events: none;
}
.fin-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

/* Sous-titre dans les paramètres (séparateur « Projet »). */
.fin-subhead {
    margin: 14px 0 2px; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--fg-muted); font-weight: 700;
}
/* Sélecteur (type d'opération) aligné sur les champs numériques. */
.fin-input select {
    width: 100%; height: 36px; padding: 0 8px; font: inherit; font-size: .85rem;
    color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
}
.fin-input select:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); }
.fin-input:has(select) { width: 150px; }

/* ---------- Analyse méthodologique (déterministe) ---------- */
.ana-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.ana-block:first-child { margin-top: 14px; }
.ana-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); font-weight: 700;
}
.ana-head svg { color: var(--brand-600); }
.ana-head .ai-tag { margin-left: auto; }
.ana-plan .fin-reste > b { color: var(--brand-700); }
.ana-dpe { margin: 12px 0 0; font-size: .85rem; font-weight: 600; }
.ana-dpe.ok { color: var(--ok, #16a34a); }
.ana-dpe.warn { color: var(--warn, #d97706); }

/* ---------- Plan de financement (barres empilées + légende) ---------- */
.pf { margin-top: 2px; }
/* Variante centrée : titre et lignes de total alignés au centre. */
.ana-head-c { justify-content: center; text-align: center; }
.pf-centered .pf-row { flex-direction: column; align-items: center; gap: 3px; }
.pf-grp { margin-bottom: 16px; }
.pf-grp:last-child { margin-bottom: 0; }
.pf-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pf-row > span { color: var(--fg-soft); font-size: .85rem; }
.pf-row > b { font-variant-numeric: tabular-nums; font-size: .98rem; white-space: nowrap; }
.pf-bar {
    display: flex; height: 16px; border-radius: 999px; overflow: hidden;
    background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
}
.pf-seg { height: 100%; transition: width .35s ease; }
.pf-seg + .pf-seg { box-shadow: inset 1px 0 0 var(--surface); }
.pf-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pf-legend li { display: flex; align-items: center; gap: 9px; font-size: .83rem; }
.pf-legend li > span { color: var(--fg-soft); flex: 1; min-width: 0; }
.pf-legend li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* Palette des segments (emplois c1–c4, ressources r1–r2). */
.pf-c1 { background: #3b82f6; }   /* prix — bleu */
.pf-c2 { background: #06b6d4; }   /* notaire — cyan */
.pf-c3 { background: #8b5cf6; }   /* garantie — violet */
.pf-c4 { background: #f59e0b; }   /* dossier + honoraires — ambre */
.pf-r1 { background: #10b981; }   /* apport — vert */
.pf-r2 { background: #6366f1; }   /* prêt — indigo */
/* Encart mensualité. */
.pf-pret {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--brand-600) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-600) 22%, transparent);
}
.pf-pret-lib { display: block; font-weight: 700; font-size: .9rem; }
.pf-pret-sub { display: block; font-size: .76rem; color: var(--fg-muted); margin-top: 2px; }
.pf-pret-val { font-size: 1.32rem; font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-pret-val span { font-size: .8rem; font-weight: 600; color: var(--fg-muted); margin-left: 2px; }

/* Cartes-statistiques du plan de financement. */
.pf-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.pf-kpi {
    display: flex; flex-direction: column; gap: 3px; padding: 13px 12px;
    align-items: center; text-align: center;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
.pf-k-lib { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--fg-muted); }
.pf-k-val { font-size: 1.12rem; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.15; }
.pf-k-val small { font-size: .72rem; font-weight: 600; color: var(--fg-muted); margin-left: 1px; }
.pf-k-sub { font-size: .74rem; color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.pf-kpi-accent {
    background: color-mix(in srgb, var(--brand-600) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand-600) 26%, transparent);
}
.pf-kpi-accent .pf-k-val { color: var(--brand-700); }

/* ---------- Statistiques du portefeuille (analytics) ---------- */
.analytics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .analytics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .analytics { grid-template-columns: 1fr; } }
.an-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; }
.an-card.an-donut { display: flex; align-items: center; gap: 14px; }
.an-card.an-wide { grid-column: span 3; }
@media (max-width: 860px) { .an-card.an-wide { grid-column: span 2; } }
@media (max-width: 560px) { .an-card.an-wide { grid-column: span 1; } }
.an-donut .ring { width: 84px; height: 84px; flex: none; }
.an-donut .ring b { width: 64px; height: 64px; font-size: 1.05rem; }
.an-meta .t { font-weight: 700; font-size: .95rem; }
.an-meta .s { color: var(--fg-soft); font-size: .8rem; margin-top: 3px; }
.ring.end-limite { background: conic-gradient(var(--warn) calc(var(--p)*1%), var(--muted) 0); }
.ring.end-alerte { background: conic-gradient(var(--danger) calc(var(--p)*1%), var(--muted) 0); }
.ring.end-ok { background: conic-gradient(var(--ok) calc(var(--p)*1%), var(--muted) 0); }
.ring.end-na { background: conic-gradient(var(--fg-muted) calc(var(--p)*1%), var(--muted) 0); }

/* Jauge d'endettement (anneau) du bloc méthodologie. */
.endt { display: flex; align-items: center; gap: 16px; margin: 6px 0 14px; }
.endt .ring { width: 96px; height: 96px; }
.endt .ring b { width: 72px; height: 72px; font-size: 1.18rem; }
.endt-side { flex: 1; min-width: 0; }
.endt-verdict { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.endt-verdict.v-ok { color: var(--ok); }
.endt-verdict.v-limite { color: var(--warn); }
.endt-verdict.v-alerte { color: var(--danger); }
.endt-meta { margin-top: 7px; font-size: .82rem; color: var(--fg-soft); line-height: 1.45; }
.endt-meta b { color: var(--fg); font-variant-numeric: tabular-nums; }
.an-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; margin-bottom: 14px; color: var(--fg); }
.an-title svg { color: var(--fg-soft); }
.an-empty { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: .86rem; font-weight: 500; }
.an-foot { font-size: .76rem; color: var(--fg-muted); margin: 12px 0 0; }

.barlist { display: flex; flex-direction: column; gap: 11px; }
.barline { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 12px; }
@media (max-width: 560px) { .barline { grid-template-columns: 110px 1fr auto; } }
.bl-label { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-track { height: 9px; border-radius: var(--r-full); background: var(--muted); overflow: hidden; }
.bl-track > span { display: block; height: 100%; border-radius: var(--r-full); transition: width .9s var(--tap); }
.bl-val { font-size: .8rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-ok { background: linear-gradient(90deg, var(--ok), var(--accent)); }
.bar-info { background: linear-gradient(90deg, var(--info), var(--brand)); }
.bar-violet { background: linear-gradient(90deg, #8B5CF6, #6366F1); }
.bar-muted { background: var(--border-strong); }
.bar-warn { background: linear-gradient(90deg, var(--warn), var(--danger)); }

/* La barre de progression des cartes profite aussi de la transition de largeur. */
.progress > span.js-bar { transition: width .9s var(--tap); }

/* ---------- Animations d'entrée ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; animation: fadeUp .5s var(--tap) forwards; }
.stats .reveal:nth-child(1) { animation-delay: .04s; }
.stats .reveal:nth-child(2) { animation-delay: .10s; }
.stats .reveal:nth-child(3) { animation-delay: .16s; }
.stats .reveal:nth-child(4) { animation-delay: .22s; }
.cards .reveal:nth-child(1) { animation-delay: .05s; }
.cards .reveal:nth-child(2) { animation-delay: .10s; }
.cards .reveal:nth-child(3) { animation-delay: .15s; }
.cards .reveal:nth-child(4) { animation-delay: .20s; }
.cards .reveal:nth-child(5) { animation-delay: .25s; }
.cards .reveal:nth-child(6) { animation-delay: .30s; }
.cards .reveal:nth-child(n+7) { animation-delay: .34s; }
.an-card { animation: fadeUp .5s var(--tap) both; }
.analytics .an-card:nth-child(1) { animation-delay: .06s; }
.analytics .an-card:nth-child(2) { animation-delay: .12s; }
.analytics .an-card:nth-child(3) { animation-delay: .18s; }
.analytics .an-card:nth-child(4) { animation-delay: .24s; }
.analytics .an-card:nth-child(5) { animation-delay: .30s; }

/* ---------- Panneau statistiques repliable (compact) ---------- */
.stats-panel { padding: 14px 18px; margin-bottom: 16px; }
.collapsible-head {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: none; border: 0; padding: 4px 0; margin: 0; cursor: pointer;
    font: inherit; color: var(--fg); text-align: left;
}
.collapsible-head h2 { font-size: 1rem; display: flex; align-items: center; gap: 9px; }
.collapsible-head h2 svg { color: var(--brand); }
.collapsible-head .chev { margin-left: auto; color: var(--fg-soft); display: inline-grid; place-items: center; transition: transform .3s var(--tap); }
.stats-panel.open .collapsible-head .chev { transform: rotate(180deg); }
.collapsible-head:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.stats-mini { display: flex; align-items: center; gap: 9px; color: var(--fg-soft); font-size: .82rem; }
.stats-mini b { color: var(--fg); font-variant-numeric: tabular-nums; }
.stats-mini .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-muted); }
@media (max-width: 720px) { .stats-mini { display: none; } }

.collapsible-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--tap); }
.stats-panel.open .collapsible-body { grid-template-rows: 1fr; }
.collapsible-inner { overflow: hidden; min-height: 0; }
.stats-panel.open .collapsible-inner { padding-top: 16px; }

/* Donuts un peu plus compacts dans le panneau */
.an-donut .ring { width: 72px; height: 72px; }
.an-donut .ring b { width: 54px; height: 54px; font-size: .95rem; }

/* ---------- Petites tuiles KPI (statistiques compactes) ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .kpis { grid-template-columns: 1fr; } }
.kpi {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 15px 17px 19px; box-shadow: var(--sh-xs);
    transition: transform .15s var(--tap), box-shadow .16s var(--tap), border-color .16s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.k-lbl { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-muted); }
.k-lbl svg { width: 13px; height: 13px; }
.k-lbl .statut { gap: 0; }
.k-val { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin-top: 9px; line-height: 1; font-variant-numeric: tabular-nums; }
.k-sub { font-size: .76rem; color: var(--fg-soft); margin-top: 6px; }
.k-extra { font-size: .73rem; color: var(--fg-muted); margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border); }
.k-extra b { color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.k-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--muted); }
.k-bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .9s var(--tap); }

.kpi-wide { grid-column: span 2; }
@media (max-width: 560px) { .kpi-wide { grid-column: span 1; } }
.kpi-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.kpi-list li { display: grid; grid-template-columns: 1fr 72px 26px; align-items: center; gap: 10px; font-size: .82rem; }
.kl-label { color: var(--fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-track { height: 7px; border-radius: var(--r-full); background: var(--muted); overflow: hidden; }
.kl-track > span { display: block; height: 100%; width: 0; border-radius: var(--r-full); transition: width .9s var(--tap); }
.kl-val { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.kpi-ok { display: flex; align-items: center; gap: 7px; color: var(--ok); font-size: .84rem; font-weight: 500; margin: 10px 0 0; }
.kpi-ok svg { width: 14px; height: 14px; }

/* Endettement : couleur selon le niveau de risque */
.kpi-end-ok     .k-val { color: var(--ok); }     .kpi-end-ok     .bar-end { background: linear-gradient(90deg, var(--ok), var(--accent)); }
.kpi-end-limite .k-val { color: var(--warn); }   .kpi-end-limite .bar-end { background: linear-gradient(90deg, #F59E0B, var(--warn)); }
.kpi-end-alerte .k-val { color: var(--danger); } .kpi-end-alerte .bar-end { background: linear-gradient(90deg, var(--warn), var(--danger)); }
.kpi-end-na     .bar-end { background: var(--border-strong); }

/* Stagger d'entrée des tuiles */
.kpis .kpi:nth-child(1){animation-delay:.04s}.kpis .kpi:nth-child(2){animation-delay:.08s}
.kpis .kpi:nth-child(3){animation-delay:.12s}.kpis .kpi:nth-child(4){animation-delay:.16s}
.kpis .kpi:nth-child(5){animation-delay:.20s}.kpis .kpi:nth-child(6){animation-delay:.24s}
.kpis .kpi:nth-child(7){animation-delay:.28s}.kpis .kpi:nth-child(8){animation-delay:.32s}
.kpis .kpi:nth-child(n+9){animation-delay:.36s}

/* ---------- Barre compacte d'indicateurs (statbar) ---------- */
.stats-wrap { margin-bottom: 18px; }

/* Bouton plier/déplier — accordéon premium */
.stats-toggle {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 12px 16px; border: 1px solid var(--border);
    background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-xs);
    cursor: pointer; font: inherit; color: var(--fg); text-align: left;
    transition: box-shadow .16s var(--tap), border-color .16s, background .16s;
}
.stats-toggle:hover { box-shadow: var(--sh-sm); border-color: var(--border-strong); }
.stats-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.st-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); }
.st-ico svg { width: 19px; height: 19px; }
.st-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-title { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.st-sub { font-size: .8rem; color: var(--fg-muted); }
.st-chev { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: grid; place-items: center; background: var(--muted); color: var(--fg-soft);
    transition: transform .3s var(--tap), background .16s, color .16s; }
.st-chev svg { width: 18px; height: 18px; }
#stats-panel.open .stats-toggle { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); background: var(--brand-soft); }
#stats-panel.open .st-chev { transform: rotate(180deg); background: var(--brand); color: #fff; }
@media (max-width: 560px) { .st-sub { display: none; } }
.statbar {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 7px; box-shadow: var(--sh-xs);
}
.sb-item {
    display: flex; align-items: center; gap: 9px; padding: 7px 13px;
    border: 0; background: none; border-radius: var(--r-sm); cursor: pointer;
    font: inherit; color: var(--fg); transition: background .15s var(--tap);
}
.sb-item:hover { background: var(--muted); }
.sb-item:focus-visible { outline: none; box-shadow: var(--ring); }
.sb-item.active { background: var(--brand-soft); }
.sb-item.active .sb-num { color: var(--brand); }
.sb-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.sb-ico svg { width: 16px; height: 16px; }
.sb-ico.b { background: var(--brand-soft); color: var(--brand); }
.sb-ico.g { background: var(--ok-soft); color: var(--ok); }
.sb-ico.o { background: var(--warn-soft); color: var(--warn); }
.sb-ico.n { background: var(--muted); color: var(--fg-soft); }
.sb-num { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.sb-lbl { font-size: .84rem; color: var(--fg-soft); }
.sb-toggle {
    margin-left: auto; display: flex; align-items: center; gap: 7px;
    padding: 8px 13px; border: 1px solid var(--border); background: var(--surface);
    border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
    color: var(--fg-soft); transition: .15s var(--tap);
}
.sb-toggle svg { width: 16px; height: 16px; }
.sb-toggle:hover { background: var(--muted); color: var(--fg); }
.sb-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.sb-toggle .chev { display: inline-grid; place-items: center; transition: transform .3s var(--tap); }
#stats-panel.open .sb-toggle { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); background: var(--brand-soft); }
#stats-panel.open .sb-toggle .chev { transform: rotate(180deg); }
#stats-panel.open .collapsible-body { grid-template-rows: 1fr; }
#stats-panel.open .collapsible-inner { padding-top: 12px; }
@media (max-width: 600px) {
    .sb-item { padding: 6px 9px; gap: 7px; }
    .sb-lbl, .sb-toggle-txt { display: none; }
}

/* ---------- Visite guidée animée (onboarding) ---------- */
.tour { position: fixed; inset: 0; z-index: 300; opacity: 0; pointer-events: none; transition: opacity .3s var(--tap); }
.tour.show { opacity: 1; pointer-events: auto; }
.tour-spot {
    position: fixed; top: 50%; left: 50%; width: 0; height: 0; border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(15,23,42,.66);
    outline: 2px solid var(--brand); outline-offset: 2px;
    transition: top .4s cubic-bezier(.4,0,.2,1), left .4s cubic-bezier(.4,0,.2,1),
                width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
html[data-theme="dark"] .tour-spot { box-shadow: 0 0 0 9999px rgba(0,0,0,.72); }
.tour-spot::after {
    content: ""; position: absolute; inset: -2px; border-radius: 14px;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent);
    animation: tour-pulse 1.8s ease-out infinite;
}
@keyframes tour-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); }
    70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); }
}
.tour-pop {
    position: fixed; width: 330px; max-width: calc(100vw - 24px);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--sh-xl); padding: 18px 18px 14px; z-index: 301;
    transition: top .4s var(--tap), left .4s var(--tap), opacity .25s;
    animation: tour-pop-in .35s var(--tap) both;
}
@keyframes tour-pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.tour-pop::before {
    content: ""; position: absolute; width: 14px; height: 14px; background: var(--surface);
    border: 1px solid var(--border); transform: rotate(45deg); left: 50%; margin-left: -7px;
}
.tour-pop[data-arrow="top"]::before    { top: -8px; border-right: none; border-bottom: none; }
.tour-pop[data-arrow="bottom"]::before { bottom: -8px; border-left: none; border-top: none; }
.tour-pop[data-arrow="none"]::before   { display: none; }
.tour-step { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-600); margin-bottom: 6px; }
.tour-title { font-size: 1.08rem; margin-bottom: 6px; }
.tour-text { color: var(--fg-soft); font-size: .9rem; line-height: 1.5; margin: 0 0 14px; }
.tour-nav { display: flex; align-items: center; gap: 10px; }
.tour-skip { background: none; border: none; color: var(--fg-muted); font: inherit; font-size: .82rem; cursor: pointer; padding: 4px 2px; }
.tour-skip:hover { color: var(--fg); }
.tour-dots { display: flex; gap: 6px; margin: 0 auto; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: .2s var(--tap); }
.tour-dot.on { background: var(--brand-600); transform: scale(1.25); }
.tour-btns { display: flex; gap: 8px; }

/* Tuiles financières (sans barre de %) : accent premium en bas pour rester homogène */
.kpi-plain::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent)); opacity: .45;
}
.kpi-plain .k-val { color: var(--brand-700); }

/* ---------- Collaboratif : présence en direct ---------- */
/* Pastille sur une carte du tableau de bord (quelqu'un consulte ce dossier). */
.card-presence {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums;
}
.card-presence svg { opacity: .9; }
.card-presence::before {
    content: ""; width: 3px; height: 3px; border-radius: 50%;
    background: var(--fg-muted); margin-right: 4px;
}
.card-meta > .card-presence:first-child::before { display: none; }

/* Bandeau de présence en haut d'un dossier ouvert. */
.presence-pill {
    display: inline-flex; align-items: center; gap: 8px;
    margin: -8px 0 20px; padding: 8px 14px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--r-md); font-size: .88rem; font-weight: 600;
    animation: presence-in .25s var(--tap);
}
.presence-pill b { font-weight: 800; }
.presence-pill svg { flex: none; }
@keyframes presence-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Compteur global « N en ligne » dans la barre du haut. */
.online-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums;
    white-space: nowrap; animation: presence-in .25s var(--tap);
}
.online-pill svg { flex: none; }

/* Toast collaboratif cliquable (ouvre le dossier). */
.toast.clickable { cursor: pointer; }
.toast.clickable:hover { border-color: var(--accent); box-shadow: var(--sh-lg), 0 0 0 1px var(--accent); }
.toast .tm { flex: 1; }
.toast .tgo { flex: none; color: var(--fg-muted); }
.toast .tgo svg { transform: rotate(-90deg); }

/* ---------- Réduction de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .reveal, .an-card, .kpi { opacity: 1 !important; }
}

/* =========================================================================
   Responsive / mobile — garde-fous globaux
   On regroupe ici les adaptations transverses (topbar, conteneurs, barres
   d'actions) pour que l'app reste utilisable jusqu'à ~360px de large. Les
   media queries propres à un composant restent à côté de leur bloc.
   ========================================================================= */

/* Évite tout débordement horizontal global. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }

/* ---- Tablette & en dessous ---- */
@media (max-width: 720px) {
    /* Topbar : on resserre et on masque le sous-titre/​séparateur de marque. */
    .topbar { gap: 10px; padding: 0 14px; height: 58px; }
    .brand { font-size: .98rem; gap: 8px; }
    .brand .brand-sub, .brand .sep { display: none; }
    .brand .logo { width: 30px; height: 30px; }

    /* Conteneurs : on réduit les marges latérales. */
    .wrap { padding: 20px 16px 64px; }
    .wrap.two-col { gap: 18px; }
    .panel { padding: 18px 16px; }
    .panel.sticky { position: static; top: auto; }

    h1 { font-size: 1.4rem; }

    /* Barres d'actions (page-head, dossier…) : tout passe à la ligne. */
    .page-head { align-items: stretch; }
    .head-actions { flex-wrap: wrap; }
}

/* ---- Téléphone ---- */
@media (max-width: 560px) {
    /* Boutons à libellé de la topbar → icône seule, pour ne pas déborder. */
    .topbar .btn { font-size: 0; padding: 0; width: 38px; height: 38px; gap: 0; }
    .topbar .btn svg { width: 19px; height: 19px; }

    /* Barre d'actions du dossier : les boutons s'étirent sur la largeur. */
    .head-actions { width: 100%; gap: 8px; }
    .head-actions > .btn { flex: 1 1 calc(50% - 4px); }
    .head-actions #statut-select { flex: 1 1 100%; width: 100%; }

    /* Tableaux larges : défilement horizontal plutôt que casse de la mise en page. */
    table.inv, #pieces table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Modales : on resserre les marges du fond pour gagner de la largeur utile. */
    .modal-scrim, .fiche-scrim { padding: 12px; }
    .modal { padding: 20px 18px; }
    .modal-actions { gap: 8px; }
    .modal-actions .btn { flex: 1; }

    /* Barre d'une modale fiche : le titre tronque, les actions ne débordent pas. */
    .fiche-bar { padding: 10px 10px 10px 14px; gap: 8px; }
    .fiche-modal, .bank-modal { height: 100%; max-width: none; border-radius: 12px; }
}