/* ════════════════════════════════════════════════════════════════════════
   Tableau de bord Zeendoc — thème « Y'nov'iT » (marine + vert Démat, ECharts).
   Feuille unique, compacte : seuls les composants réellement utilisés.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --bg:       #0d1c31;
    --bg2:      #1e3252;
    --surface:  rgba(19, 33, 54, 0.72);
    --surface2: rgba(255, 255, 255, 0.028);
    --line:     rgba(255, 255, 255, 0.06);
    --line2:    rgba(255, 255, 255, 0.13);
    --text:     #eaedf6;
    --muted:    #7e8699;
    --acc:      #7e9173;
    --acc2:     #86e1a6;
    --acc-soft: rgba(126, 145, 115, 0.20);
    --ok:       #34d399;
    --danger:   #fb7185;
    --shadow:   0 12px 34px rgba(0, 0, 0, 0.55);
    --ease:     cubic-bezier(.22, .61, .36, 1);
    --font:     'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-disp:'Mulish', 'Open Sans', sans-serif;
    --mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* Couleurs thématiques (surchargées en mode clair) */
    --header-bg:     rgba(13, 28, 49, .72);
    --surface-solid: #12233c;
    --brand-grad:    linear-gradient(90deg, #fff, #cfead8 55%, var(--acc2));
    --kpi-grad:      linear-gradient(180deg, #fff, #cdeed9);
    --code-bg:       rgba(255, 255, 255, .07);
    --code-fg:       #b7e3c2;
    --hover:         rgba(255, 255, 255, .06);
    --scroll-thumb:  rgba(255, 255, 255, .14);
    --on-acc:        #fff;
    --aurora:        .42;
}

/* ── Thème clair (jour) : explicite, ou « auto » si le navigateur préfère clair ─ */
:root[data-theme="light"] {
    --bg: #eef2f9; --bg2: #f7f9fd;
    --surface: rgba(255, 255, 255, .9); --surface2: rgba(20, 30, 60, .04);
    --line: rgba(20, 30, 60, .10); --line2: rgba(20, 30, 60, .20);
    --text: #1b2230; --muted: #5b6478;
    --acc-soft: rgba(126, 145, 115, .14);
    --shadow: 0 12px 30px rgba(20, 30, 60, .12);
    --header-bg: rgba(255, 255, 255, .75); --surface-solid: #ffffff;
    --brand-grad: linear-gradient(90deg, #244f00, #7e9173 55%, #006932);
    --kpi-grad: linear-gradient(180deg, #244f00, #7e9173);
    --code-bg: rgba(126, 145, 115, .12); --code-fg: #244f00;
    --hover: rgba(20, 30, 60, .05); --scroll-thumb: rgba(20, 30, 60, .22);
    --aurora: .12;
}
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
        --bg: #eef2f9; --bg2: #f7f9fd;
        --surface: rgba(255, 255, 255, .9); --surface2: rgba(20, 30, 60, .04);
        --line: rgba(20, 30, 60, .10); --line2: rgba(20, 30, 60, .20);
        --text: #1b2230; --muted: #5b6478;
        --acc-soft: rgba(126, 145, 115, .14);
        --shadow: 0 12px 30px rgba(20, 30, 60, .12);
        --header-bg: rgba(255, 255, 255, .75); --surface-solid: #ffffff;
        --brand-grad: linear-gradient(90deg, #244f00, #7e9173 55%, #006932);
        --kpi-grad: linear-gradient(180deg, #244f00, #7e9173);
        --code-bg: rgba(126, 145, 115, .12); --code-fg: #244f00;
        --hover: rgba(20, 30, 60, .05); --scroll-thumb: rgba(20, 30, 60, .22);
        --aurora: .12;
    }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    overflow-x: clip;            /* aucun débordement horizontal (clip ≠ scroll : sticky OK) */
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    background-image:
        radial-gradient(1000px 560px at 10% -10%, rgba(126, 145, 115, .16), transparent 60%),
        radial-gradient(900px 560px at 102% -4%, rgba(134, 225, 166, .10), transparent 55%),
        linear-gradient(180deg, var(--bg2), var(--bg));
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
/* Fond « aurora » : deux halos flous dérivant lentement, derrière tout. */
body::before, body::after {
    content: ""; position: fixed; z-index: -1; border-radius: 50%;
    filter: blur(90px); opacity: var(--aurora); pointer-events: none; will-change: transform;
}
body::before { width: 52vw; height: 52vw; left: -12vw; top: -14vh; background: radial-gradient(circle, var(--acc), transparent 66%); animation: aurora1 24s var(--ease) infinite alternate; }
body::after  { width: 46vw; height: 46vw; right: -14vw; top: 4vh;  background: radial-gradient(circle, var(--acc2), transparent 66%); animation: aurora2 30s var(--ease) infinite alternate; }
@keyframes aurora1 { to { transform: translate(14vw, 16vh) scale(1.18); } }
@keyframes aurora2 { to { transform: translate(-12vw, 20vh) scale(1.12); } }
::selection { background: rgba(126, 145, 115, .35); color: #fff; }
code { background: var(--code-bg); color: var(--code-fg); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 12px; }

/* ── Chrome : header / nav / footer ────────────────────────────────────── */
.portal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px; background: var(--header-bg); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.portal-header__brand {
    font-family: var(--font-disp); font-weight: 800; font-size: 16px; letter-spacing: .04em;
    background: var(--brand-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Le brand est en texte dégradé (color: transparent) : on redonne une couleur
   pleine au « by Ynov'IT », sinon il hérite du remplissage transparent (invisible). */
.portal-header__by { font-size: 12px; font-weight: 600; color: var(--muted); -webkit-text-fill-color: var(--muted); }

/* ── Page de connexion dédiée (centrée, épurée) ───────────────────────── */
.login-screen {
    position: fixed; inset: 0; z-index: 900;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--acc-soft), transparent 60%),
        linear-gradient(180deg, var(--bg2), var(--bg));
}
.login-card {
    width: min(420px, 100%);
    background: var(--surface); backdrop-filter: blur(12px);
    border: 1px solid var(--line2); border-radius: 18px; box-shadow: var(--shadow);
    padding: 30px 28px;
}
.login-brand {
    font-family: var(--font-disp); font-weight: 800; font-size: 22px; letter-spacing: .03em;
    background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-brand span { font-size: 14px; -webkit-text-fill-color: var(--muted); color: var(--muted); }
.login-card .btn[type="submit"] { margin-top: 16px; width: 100%; justify-content: center; }
/* Onglets Espace client / Administration (réutilise le composant .seg). */
.login-tabs { display: flex; margin: 16px 0 14px; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.login-tabs .seg__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; font-size: 12.5px; }
.login-tabs .seg__btn svg.lucide { width: 14px; height: 14px; }
/* Champ mot de passe avec œil (afficher / masquer). */
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 38px; }
.pwd-eye {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
    background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s;
}
.pwd-eye:hover { color: var(--acc); background: var(--acc-soft); }
.pwd-eye svg.lucide { width: 16px; height: 16px; pointer-events: none; }

/* ── Administration des comptes ───────────────────────────────────────── */
.admin-screen { position: fixed; inset: 0; z-index: 850; overflow: auto; padding: 24px;
    background: linear-gradient(180deg, var(--bg2), var(--bg)); }
.admin-box { max-width: 1180px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line2);
    border-radius: 16px; box-shadow: var(--shadow); padding: 20px 24px; }
.admin-box__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.admin-box__head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-disp); }
.admin-box__head h2 svg.lucide { width: 20px; height: 20px; color: var(--acc); }
.admin-box__head .hint { margin: 4px 0 0; }
.admin-box__actions { display: flex; gap: 8px; }
/* Vue d'ensemble : pastilles de comptage. */
.admin-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.admin-stat { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); }
.admin-stat__v { font-family: var(--font-disp); font-size: 20px; font-weight: 700; color: var(--text); }
.admin-stat__l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.admin-stat--ok .admin-stat__v { color: #34d399; }
.admin-stat--ko .admin-stat__v { color: #fb7185; }
.admin-stat--warn .admin-stat__v { color: #fbbf24; }
/* Création d'un compte. */
.admin-create { margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); }
.admin-create h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 7px; font-size: 14px; }
.admin-create h3 svg.lucide { width: 16px; height: 16px; color: var(--acc); }
.admin-create__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.admin-create__field { flex: 2 1 220px; min-width: 180px; }
.admin-create__field--validity { flex: 1 1 130px; min-width: 120px; }
.admin-create__field--date { flex: 1 1 150px; min-width: 140px; }
.admin-create__field .field-label { margin-top: 0; }
.admin-create__submit { flex: 0 0 auto; white-space: nowrap; }
.admin-create > .hint { margin: 10px 0 0; }
/* Table des comptes. */
.admin-login { font-weight: 600; }
.admin-chips .chip { display: inline-block; padding: 2px 8px; margin: 1px 0; border: 1px solid var(--acc); border-radius: 999px; background: var(--acc-soft); color: var(--acc); font-size: 11px; font-weight: 600; }
.admin-chips .chip--all { border-color: var(--line2); background: var(--surface2); color: var(--muted); }
.admin-actions { white-space: nowrap; }
.admin-actions .btn, .admin-actions .btn-remove { padding: 3px 8px; font-size: 12px; }

/* ── Planification du rapport ─────────────────────────────────────────── */
.report-schedule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0; }
.report-schedule select, .report-schedule input[type="number"] { padding: 5px 8px; }
.portal-nav { display: flex; align-items: center; gap: 12px; }
.portal-nav__link { color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 14px; transition: background .15s, color .15s; }
.portal-nav__link:hover { background: var(--surface2); color: var(--text); }
.portal-nav__link.is-active { background: var(--acc-soft); color: var(--text); }
.theme-seg .seg__btn { padding: 5px 10px; font-size: 13px; min-width: 32px; }
.theme-seg .seg__btn.is-active { background: var(--acc); color: var(--on-acc); }
.portal-main { max-width: 1640px; margin: 0 auto; padding: 24px; }
.portal-footer { text-align: center; color: var(--muted); font-size: 12px; padding: 16px; }
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 1200; }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border: 1px solid transparent; border-radius: 8px;
    font: 500 14px/1 var(--font); cursor: pointer; text-decoration: none;
    transition: background .15s var(--ease), border-color .15s, box-shadow .18s, transform .12s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
/* Icônes Lucide : la librairie pose 24px + trait currentColor — on cale la taille au bouton. */
.btn svg.lucide { width: 16px; height: 16px; stroke-width: 2; flex: 0 0 auto; }
.btn-sm svg.lucide { width: 15px; height: 15px; }
.seg__btn svg.lucide { width: 16px; height: 16px; stroke-width: 2; display: block; }
.theme-seg .seg__btn { min-width: 36px; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary {
    color: #fff; background: linear-gradient(180deg, #9db08c, #55684c);
    box-shadow: 0 6px 18px rgba(126, 145, 115, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(126, 145, 115, .5); transform: translateY(-1px); }
.btn-secondary { color: var(--text); background: var(--surface2); border-color: var(--line2); }
.btn-secondary:hover:not(:disabled) { background: var(--hover); }
/* Déconnexion : mise en valeur (rouge) dans l'en-tête. */
.btn-danger { color: #fff; background: linear-gradient(180deg, #fb7185, #e11d48); border-color: transparent; font-weight: 600; box-shadow: 0 4px 14px rgba(225, 29, 72, .35); }
.btn-danger:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(225, 29, 72, .5); transform: translateY(-1px); }
/* Vert jade : rappel du classeur actuel dans la topbar (pas un badge à part —
   même famille .btn que CSV/Excel/Rapport auto). */
.btn-jade { color: #fff; background: linear-gradient(180deg, #34e0b0, #00a878); border-color: transparent; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 168, 120, .35); }
.block { width: 100%; justify-content: center; margin-top: 12px; }

/* ── Champs ────────────────────────────────────────────────────────────── */
input, select {
    width: 100%; padding: 8px 10px; font: 13px var(--font);
    color: var(--text); background: var(--surface2); border: 1px solid var(--line2); border-radius: 9px;
    transition: border-color .15s, box-shadow .18s;
}
input::placeholder { color: #5d6580; }
select option { background: var(--surface-solid); color: var(--text); }
input:focus, select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft), 0 0 18px rgba(126, 145, 115, .25); }

/* ── Statut / badges / hints ───────────────────────────────────────────── */
.status { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; min-height: 18px; }
.status.success { background: rgba(52, 211, 153, .12); color: var(--ok); }
.status.error   { background: rgba(251, 113, 133, .12); color: var(--danger); }
.status.loading { background: var(--acc-soft); color: var(--acc); }
.status.loading::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--acc2); animation: pulse 1s ease-in-out infinite; vertical-align: middle; }
@keyframes pulse { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 10px; }
.badge.connected { background: rgba(52, 211, 153, .14); color: var(--ok); box-shadow: 0 0 12px rgba(52, 211, 153, .4); }
.badge.disconnected { background: rgba(251, 113, 133, .14); color: var(--danger); }
.hint { color: var(--muted); font-size: 12px; }

/* ── Mise en page (volet + rapport) ────────────────────────────────────── */
.pbi-layout {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start;
    transition: grid-template-columns .28s var(--ease);
}
/* Volet masqué (bouton « panneau ») : la colonne se réduit à 0 — effet de
   glissement — et le volet lui-même s'efface (fondu + clip) pour ne jamais
   déborder pendant la transition ; le contenu principal reprend l'espace. */
.pbi-layout.is-side-collapsed { grid-template-columns: 0px minmax(0, 1fr); gap: 0 18px; }
.pbi-side {
    display: flex; flex-direction: column; gap: 12px;
    position: sticky; top: 12px; max-height: calc(100vh - 24px);
    /* Défilement du volet : molette naturelle (pas d'overscroll-behavior:contain,
       qui bloquait la molette quand le volet tenait à l'écran) + barre visible. */
    overflow-y: auto; padding-right: 6px; padding-bottom: 8px;
    scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent;
    opacity: 1; transition: opacity .18s var(--ease);
}
.pbi-layout.is-side-collapsed .pbi-side { overflow: hidden; opacity: 0; pointer-events: none; }
.btn-toggle-side svg.lucide { width: 17px; height: 17px; }
.pbi-side::-webkit-scrollbar { width: 8px; }
.pbi-side::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; }
.pbi-side::-webkit-scrollbar-track { background: transparent; }
.pbi-side > .panel { flex: 0 0 auto; }
.pbi-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pbi-rights { margin: -8px 2px 0; }

/* Surfaces verre dépoli (panneaux, barre, cartes, KPI, drawer) */
.panel, .topbar, .chart-card, .kpi-row, .drawer {
    background: var(--surface); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Panneaux repliables (summary + chevron en pastille, accent à l'ouverture) */
.panel { overflow: hidden; }
.panel > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; font-weight: 700; font-size: 12.5px; letter-spacing: .01em; color: var(--text);
    border-radius: 16px; transition: background .15s, color .15s;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::before {
    content: "›"; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 7px;
    font-size: 15px; line-height: 1; color: var(--muted); background: var(--surface2);
    transition: transform .2s var(--ease), background .15s, color .15s;
}
.panel > summary:hover { background: var(--hover); color: var(--acc); }
.panel > summary:hover::before { color: var(--acc); }
.panel[open] > summary {
    color: var(--acc); border-radius: 16px 16px 0 0;
    box-shadow: inset 0 -1px 0 var(--line);
}
.panel[open] > summary::before { transform: rotate(90deg); background: var(--acc-soft); color: var(--acc); }
.summary-spacer { flex: 1; }
.panel__body { padding: 14px 16px 16px; }
.field-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.field-label:first-child { margin-top: 0; }
.muted-line { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* Barre de rapport */
.topbar {
    position: sticky; top: 12px; z-index: 6;
    display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
    padding: 14px 20px;
}
.topbar__title { min-width: 0; flex: 1 1 auto; }   /* le titre peut rétrécir → les actions wrappent */
.topbar h1 { margin: 0; font-family: var(--font-disp); font-size: 17px; font-weight: 800; letter-spacing: -.01em; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
/* Topbar sur DEUX rangées maîtrisées (via order) : rangée 1 = actions + Accès
   épinglé à droite ; rangée 2 = barre de période pleine largeur. Évite la
   cascade de retours à la ligne (période puis Accès rejetés n'importe où). */
.topbar__actions { order: 1; display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.topbar .topbar__access { order: 2; }
.topbar .period-bar { order: 3; flex: 1 1 100%; }
/* « Actualiser » + sa légende empilés : bouton au-dessus, horodatage en dessous. */
.refresh-group { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.refresh-stamp { font-size: 10px; line-height: 1.2; text-align: center; max-width: 160px; color: var(--muted); }
.refresh-stamp:empty { display: none; }
/* Accès Zeendoc : épinglé en haut à droite, visuellement distinct, ne retombe pas. */
.topbar__access {
    flex: 0 0 auto; align-self: flex-start; white-space: nowrap;
    margin-left: auto; text-decoration: none; font-weight: 600;
    color: var(--acc); background: var(--acc-soft); border: 1px solid var(--acc);
    box-shadow: 0 2px 10px var(--acc-soft);
}
.topbar__access:hover { background: var(--acc); color: var(--on-acc); transform: translateY(-1px); }
/* Classeur actuel : rappel toujours visible (utile volet replié — cf. bouton
   « panneau »), à côté de « Rapport auto » — même gabarit que les autres
   boutons de la topbar (CSV/Excel/Rapport auto), largeur libre (suit le nom). */
.topbar-classeur { cursor: default; white-space: nowrap; }

/* Bandeau KPI à plat — grille auto-ajustée (jamais de carte coupée) */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi-card { display: flex; flex-direction: column; padding: 16px 20px; border-left: 1px solid var(--line); transition: background .2s; min-width: 0; }
.kpi-card:first-child { border-left: 0; }
.kpi-card:hover { background: var(--hover); }
/* Réserve 2 lignes de libellé : tous les nombres s'alignent sur le même axe, quel que soit le libellé. */
.kpi-label { display: flex; align-items: flex-start; gap: 6px; min-height: 2.4em; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.kpi-label svg.lucide { width: 14px; height: 14px; flex: 0 0 auto; margin-top: -1px; color: var(--acc); opacity: .85; }
.kpi-value { display: block; margin-top: 4px; font-family: var(--font-disp); font-size: 1.7rem; font-weight: 700; line-height: 1.1; background: var(--kpi-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
/* Carte fusionnée Payés / Non payés (vert = payés, rouge = non payés) */
.kpi-card--pay .kpi-value { -webkit-text-fill-color: initial; color: var(--text); background: none; font-size: 1.4rem; }
.kpi-card--pay .pay-ok { color: #34d399; -webkit-text-fill-color: #34d399; font-weight: 700; }
.kpi-card--pay .pay-ko { color: #fb7185; -webkit-text-fill-color: #fb7185; font-weight: 700; }

/* Jauge « Taux de règlement » : anneau (piste + arc coloré par sévérité) avec
   la valeur superposée au centre — remplace la tuile chiffrée classique tant
   que le champ de règlement est indisponible (kpi-payrate-empty). */
.kpi-card--meter { align-items: center; text-align: center; }
.meter { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.meter svg { display: block; }
.meter__value { position: absolute; bottom: 2px; left: 0; right: 0; font-family: var(--font-disp); font-size: 1.05rem; font-weight: 800; color: var(--text); }

/* ── Tuiles de métriques (au-dessus des graphes) ───────────────────────── */
.metric-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-bottom: 16px; }
.metric-tiles:empty { display: none; }
.metric-tile {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: rise .35s var(--ease) both;
}
.metric-tile__label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.metric-tile__value { font-family: var(--font-disp); font-size: 1.9rem; font-weight: 700; line-height: 1.1; background: var(--kpi-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric-tile__sub { font-size: 11px; color: var(--muted); }
/* Évolution vs N-1 (année précédente) + mini-courbe de tendance mensuelle. */
.metric-tile__delta { font-size: 12px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.metric-tile__delta.up { color: var(--ok, #34d399); }
.metric-tile__delta.down { color: var(--danger, #fb7185); }
.metric-tile__delta .ref { color: var(--muted); font-weight: 500; }
.metric-tile__spark { display: block; margin-top: 2px; }
/* Tuiles Payés / Non payés (accent gauche coloré) */
.metric-tile.is-paid { border-left: 3px solid var(--ok, #34d399); }
.metric-tile.is-unpaid { border-left: 3px solid var(--danger, #fb7185); }
.metric-tile.is-paid .metric-tile__value { background: linear-gradient(90deg, #34d399, #86e1a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric-tile.is-unpaid .metric-tile__value { background: linear-gradient(90deg, #fb7185, #fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Tuile d'accès Zeendoc (lien) */
a.metric-tile--link { text-decoration: none; cursor: pointer; transition: border-color .15s, transform .12s var(--ease); }
a.metric-tile--link:hover { border-color: var(--acc); transform: translateY(-2px); }
.metric-tile--link .metric-tile__value { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }

/* ── Graphes ───────────────────────────────────────────────────────────── */
.charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.chart-card { padding: 14px 16px 16px; overflow: hidden; transition: border-color .15s, box-shadow .18s var(--ease), transform .12s var(--ease); animation: rise .42s var(--ease) both; }
/* Chargement : graphes atténués (pulsation douce) + icône Actualiser en rotation. */
#charts-grid.is-loading .cv { animation: chart-pulse 1.1s ease-in-out infinite; }
@keyframes chart-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#btn-refresh.is-loading svg.lucide { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chart-card:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: 0 20px 46px rgba(126, 145, 115, .18), inset 0 1px 0 rgba(255, 255, 255, .08); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Conteneur à hauteur fixe → ECharts s'y initialise et le remplit (pas de débordement). */
.cv { position: relative; height: 320px; width: 100%; overflow: hidden; }
.btn-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line2); background: var(--surface2); color: var(--muted); border-radius: 6px; cursor: pointer; font-size: 14px; transition: background .15s, color .15s, border-color .15s; }
.btn-icon:hover { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }

/* Graphe en plein écran (modale) */
.chart-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 3vmin; background: rgba(6, 7, 12, .72); backdrop-filter: blur(4px); animation: fade .2s var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.chart-modal__box { position: relative; width: min(1100px, 94vw); height: min(78vh, 760px); background: var(--surface); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; }
.chart-modal__cv { width: 100%; height: 100%; }
/* Fermeture du plein écran : bouton circulaire dédié, au coin extérieur de la
   fenêtre (n'empiète plus sur la toolbox du graphe). Neutre → rouge au survol. */
.modal-close {
    position: absolute; top: -16px; right: -16px; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    background: var(--surface-solid); color: var(--text);
    border: 1px solid var(--line2); box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
    cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .12s var(--ease);
}
.modal-close svg.lucide { width: 20px; height: 20px; stroke-width: 2.4; pointer-events: none; }
.modal-close:hover { background: var(--danger); color: #fff; border-color: var(--danger); transform: scale(1.06); }
.modal-close:active { transform: scale(.94); }
.chart-config { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chart-config select { flex: 1 1 90px; }
.chart-config .c-field { flex: 2 1 130px; }
.move-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line2); background: var(--surface2); color: var(--muted); border-radius: 6px; cursor: grab; transition: background .15s, color .15s, box-shadow .18s; }
/* L'icône ne doit pas capter le pointeur, sinon le curseur grab/grabbing de la
   poignée « saute » quand on survole le SVG (effet de curseur qui bug). */
.move-btn svg.lucide { width: 18px; height: 18px; display: block; stroke-width: 2; pointer-events: none; }
.move-btn:hover { background: var(--acc); color: var(--on-acc); border-color: var(--acc); box-shadow: 0 0 12px rgba(126, 145, 115, .4); }
.move-btn:active { cursor: grabbing; }
.btn-remove { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line2); background: var(--surface2); color: var(--danger); border-radius: 6px; cursor: pointer; font-size: 15px; transition: background .15s; }
.btn-remove:hover { background: rgba(251, 113, 133, .16); }
/* Lien d'ouverture d'un document dans Zeendoc (panneau de détail). */
.drawer-doclink { color: var(--acc); text-decoration: none; font-weight: 600; }
.drawer-doclink:hover { text-decoration: underline; }

/* Tuile sans données : message explicite (au lieu d'un canvas blanc). */
.cv { position: relative; }
.cv-empty {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    text-align: center; padding: 18px; color: var(--muted);
}
.cv-empty svg.lucide { width: 34px; height: 34px; opacity: .5; }
.cv-empty p { margin: 0; font-size: 13px; font-weight: 600; }
.cv-empty__sub { font-size: 11.5px !important; font-weight: 400 !important; opacity: .8; max-width: 320px; }

/* Carte cible de l'échange (mise en évidence pendant le menu radial). */
.chart-card.swap-target { outline: 2px solid var(--acc2); outline-offset: -2px; box-shadow: 0 0 0 4px rgba(34, 211, 238, .22), 0 0 28px rgba(34, 211, 238, .3); }

/* ── Menu radial (réorganisation des graphes) ──────────────────────────────
   Pas de disque de fond : un pivot central + uniquement les flèches Lucide des
   directions où un échange est possible (voisin existant). Flèche active = accent. */
.radial { position: fixed; z-index: 1200; width: 0; height: 0; pointer-events: none; }
.radial__dot { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 5px var(--acc-soft), 0 0 20px var(--acc); animation: radial-fade .14s var(--ease) both; }
.radial__seg { position: absolute; width: 42px; height: 42px; margin: -21px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-solid); border: 1px solid var(--line2); color: var(--text); box-shadow: 0 8px 20px rgba(0, 0, 0, .42); animation: radial-fade .16s var(--ease) both; transition: background .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s var(--ease); }
.radial__seg svg.lucide { width: 20px; height: 20px; stroke-width: 2.4; pointer-events: none; transition: transform .12s var(--ease); }
.radial__seg.is-active { background: var(--acc); color: #fff; border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft), 0 0 22px var(--acc); }
.radial__seg.is-active svg.lucide { transform: scale(1.22); }
@keyframes radial-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Filtres ───────────────────────────────────────────────────────────── */
.filter-logic-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.seg__btn { border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 12px; padding: 6px 14px; cursor: pointer; transition: background .15s, color .15s; }
.seg__btn + .seg__btn { border-left: 1px solid var(--line2); }
.seg__btn.is-active { background: var(--acc); color: #fff; box-shadow: 0 0 14px rgba(126, 145, 115, .5); }
.view-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.view-row .btn { padding: 6px 9px; }
/* Bornage par période (date du document) : contrôle compact dans la topbar,
   entre les actions et « Accès Zeendoc » (léger, aligné sur les boutons). */
.period-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 5px 10px;
    background: var(--surface2); border: 1px solid var(--line2); border-radius: 10px;
}
.period-bar__label {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--acc);
    padding-right: 8px; margin-right: 1px; border-right: 1px solid var(--line2);
}
.period-bar__label svg.lucide { width: 14px; height: 14px; }
/* Champs date : fond franc (le fond des inputs par défaut est trop translucide
   sur la barre) + sélecteur natif accordé au thème. */
.period-input {
    flex: 0 0 auto; width: auto; padding: 5px 7px; font-size: 12.5px;
    background: var(--surface-solid); border-color: var(--line); border-radius: 8px;
    color-scheme: dark;
}
[data-theme="light"] .period-input { color-scheme: light; }
@media (prefers-color-scheme: light) { [data-theme="auto"] .period-input { color-scheme: light; } }
.period-sep { flex: 0 0 auto; color: var(--muted); font-weight: 600; }
.period-bar .btn { flex: 0 0 auto; padding: 6px 9px; color: var(--muted); }
.period-bar .btn:hover { color: var(--danger); border-color: var(--danger); background: rgba(251, 113, 133, .1); }
/* Raccourcis de période (Ce mois / 30 j / Cette année) : pastilles discrètes. */
.period-presets { display: inline-flex; gap: 4px; margin-left: 2px; }
.period-preset {
    padding: 4px 8px; font: 600 11px var(--font); white-space: nowrap;
    color: var(--muted); background: transparent; border: 1px solid var(--line2); border-radius: 999px;
    cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.period-preset:hover { color: var(--acc); border-color: var(--acc); background: var(--acc-soft); }
/* Plage réelle des dates de dépôt de l'échantillon (min → max), calée à droite. */
.period-range { margin-left: auto; white-space: nowrap; font-size: 10.5px; }
.period-range:empty { display: none; }
.filter-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.filter-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface2); }
.filter-row__top { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.filter-row__bottom { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 6px; }
.metric-row__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.filter-row .btn-remove { width: 28px; height: 28px; }
/* Sous-champs de survol : ventilation par valeur du champ parent (contexte). */
.hover-subs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-left: 8px; border-left: 2px solid var(--acc-soft); }
.hover-subs:empty { margin-top: 0; }
.hover-sub { padding: 6px 8px; background: var(--surface); }
.hover-sub .filter-row__top { grid-template-columns: minmax(0, 1fr) minmax(0, 96px) 28px; }
.hover-add-sub { white-space: nowrap; padding: 6px 10px; font-size: 12px; }

/* ── Bloc « Rapport automatique » (déplié sous la topbar) ──────────────── */
.report-block {
    background: var(--surface); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
    padding: 16px 18px; margin-bottom: 16px; animation: rise .35s var(--ease) both;
}
.report-block__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.report-block__head h2 { font-family: var(--font-disp); font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px 20px; margin: 10px 0; }
.report-col { display: flex; flex-direction: column; gap: 8px; }
.smtp-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 6px; }
#rep_recipients { width: 100%; resize: vertical; }

/* Zone d'import (drag & drop) */
.rep-dropzone {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 12px 14px; border: 1px dashed var(--line2); border-radius: 10px;
    background: var(--surface2); color: var(--muted); font-size: 12px;
    transition: border-color .15s, background .15s, color .15s;
}
.rep-dropzone:hover { border-color: var(--acc); color: var(--text); }
.rep-dropzone.is-drag { border-color: var(--acc); background: rgba(126, 145, 115, .12); color: var(--text); }
.rep-dropzone__icon { font-size: 18px; line-height: 1; }
.rep-dropzone__text u { color: var(--acc); }

/* Portée (classeur + graphes repris) */
.rep-scope {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface2);
}
.rep-scope__summary { margin: 0; flex: 1; min-width: 0; }
.rep-scope .btn { flex: 0 0 auto; white-space: nowrap; }

.rep-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.rep-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
/* Cases à cocher (panneau « Survol ») */
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 5px 0; cursor: pointer; }
.check input { accent-color: var(--acc); }

/* Encart « Σ sélection » du brush, en surimpression dans la tuile du graphe */
.brush-sum {
    position: absolute; top: 8px; left: 8px; z-index: 5; max-width: 70%;
    padding: 8px 12px; border-radius: 10px;
    background: var(--surface-solid); border: 1px solid var(--acc);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none;
}
.brush-sum__t { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.brush-sum__v { font-family: var(--font-disp); font-weight: 700; font-size: 1.2rem; color: var(--acc); }
.brush-sum__s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.report-actions { display: flex; gap: 8px; }
.report-actions .btn { flex: 1; }


/* ── Panneau de détail (drawer drill-down) ─────────────────────────────── */
.drawer-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(5, 8, 16, .55); backdrop-filter: blur(2px); }
.drawer {
    position: fixed; top: 0; right: 0; z-index: 1101; width: min(440px, 92vw); height: 100vh;
    display: flex; flex-direction: column; background: var(--surface-solid); border-left: 1px solid var(--line2);
    border-radius: 0; box-shadow: -20px 0 50px rgba(0, 0, 0, .5); animation: drawer-in .18s var(--ease);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { margin: 0; font-size: 16px; color: var(--text); }
.drawer__head .hint { margin: 4px 0 0; }
.drawer__body { padding: 16px 18px; overflow: auto; flex: 1; }

/* ── Tableaux ──────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td { padding: 8px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.data-table th { background: var(--hover); color: var(--acc2); font-weight: 600; position: sticky; top: 0; }
.data-table tbody tr:hover { background: var(--hover); }
.data-table td.empty { color: var(--muted); font-style: italic; }

/* ── Scrollbars ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(126, 145, 115, .5); background-clip: padding-box; }
* { scrollbar-color: var(--scroll-thumb) transparent; }

/* Entrées animées des panneaux/KPI/barre */
.kpi-row, .panel, .topbar { animation: rise .42s var(--ease) both; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .pbi-layout, .pbi-layout.is-side-collapsed { grid-template-columns: 1fr; }
    .pbi-side { position: static; max-height: none; overflow: visible; }
    /* Volet empilé (pas de 2e colonne à réduire) : masqué en display, sans transition. */
    .pbi-layout.is-side-collapsed .pbi-side { display: none; }
}
@media (max-width: 760px) {
    .portal-main { padding: 14px; }
    .topbar { padding: 12px 14px; }
    .topbar h1 { font-size: 15px; }
    .topbar__actions { width: 100%; }
    #dash-last-update { display: none; }
    .kpi-card { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--line); }
    .kpi-card:first-child { border-top: 0; }
    .cv { height: 260px; }
    .drawer { width: 100vw; }
}
@media (max-width: 460px) {
    .topbar__actions .btn { flex: 1; justify-content: center; }
    .radial { transform: scale(.85); }
}

/* Respecte « animations réduites » */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .chart-card:hover, .btn-primary:hover:not(:disabled) { transform: none; }
}