/* ==========================================================================
   Lydeo CRM — système de design
   Charte lydeo.com : bleu #146EF5 / #0055D4, encre #141414, filets #DAE2EE,
   fond ivoire, cartes blanches. Titres Epilogue, interface Manrope.

   Cette feuille se charge APRÈS Bootstrap et le surcharge par les jetons
   --bs-* quand c'est possible, par des règles ciblées sinon.
   ========================================================================== */

@font-face {
    font-family: "Epilogue";
    src: url("/assets/fonts/epilogue-var.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-var.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
    --paper: #fbf7f0;
    --surface: #ffffff;
    --surface-2: #f7f9fd;
    --surface-3: #edf2fb;
    --line: #dae2ee;
    --line-2: #c2d0e3;
    --ink: #141414;
    --ink-2: #3f4652;
    --muted: #6b7688;
    --faint: #97a2b4;

    --accent: #146ef5;
    --accent-2: #0055d4;
    --accent-soft: #e5eefb;
    --on-accent: #ffffff;
    --tint: #f0f5fc;

    /* Rampe de statut : évite le bleu, réservé à la marque.
       La prospection va du gris au turquoise, puis les paliers pilotés par
       Partners virent au vert en s'intensifiant jusqu'au client payant. */
    --st-new: #64748b;
    --st-to_contact: #7c4dff;
    --st-contacted: #de8500;
    --st-qualified: #0f9d8f;
    --st-signed: #34a853;
    --st-trial: #22b07d;
    --st-client: #16a34a;
    --st-churned: #94a3b8;
    --st-rejected: #e0424b;

    /* Alias de l'ancien statut « converti ». À conserver : --success-color en
       dépendait, et le supprimer repeindrait tous les boutons de succès. */
    --st-converted: var(--st-client);

    --shadow-1: 0 1px 2px rgba(20, 20, 20, .05), 0 1px 3px rgba(20, 110, 245, .04);
    --shadow-2: 0 8px 24px rgba(20, 20, 20, .08), 0 2px 6px rgba(20, 110, 245, .06);
    --shadow-3: 0 24px 60px rgba(20, 20, 20, .18);

    --r-s: 8px;
    --r-m: 11px;
    --r-l: 16px;

    --rail-w: 232px;

    --display: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --code: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* Alias hérités : les vues pas encore reprises référencent ces noms.
       Les garder évite toute couleur cassée pendant la migration. */
    --primary-color: var(--accent);
    --success-color: var(--st-client);
    --warning-color: var(--st-contacted);
    --danger-color: var(--st-rejected);
    --info-color: var(--accent);

    /* Report des jetons vers Bootstrap 5.3 */
    --bs-primary: #146ef5;
    --bs-primary-rgb: 20, 110, 245;
    --bs-link-color: #146ef5;
    --bs-link-hover-color: #0055d4;
    --bs-link-color-rgb: 20, 110, 245;
    --bs-body-bg: #fbf7f0;
    --bs-body-color: #141414;
    --bs-border-color: #dae2ee;
    --bs-border-radius: 11px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 16px;
    --bs-body-font-family: var(--ui);
    --bs-body-font-size: .9375rem;
    --bs-secondary-color: #6b7688;
    --bs-emphasis-color: #141414;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--ui);
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

code, kbd, samp, pre { font-family: var(--code); }

.text-muted { color: var(--muted) !important; }
.tabular { font-variant-numeric: tabular-nums; }

/* Micro-libellé : Manrope capitales espacées, jamais une chasse fixe. */
.eyebrow {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--faint);
}

/* --------------------------------------------------------------------------
   3. Coquille : rail + barre du haut
   -------------------------------------------------------------------------- */
.app-main {
    margin-left: var(--rail-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail-w);
    z-index: 1040;
    background: var(--tint);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.rail-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--line);
}

/* Logo officiel, jamais redessiné : le fichier de marque tel quel. */
.rail-logo {
    display: block;
    flex: 1;
    min-width: 0;
    line-height: 0;
}

.rail-logo img {
    width: 104px;
    max-width: 100%;
    height: auto;
}

.rail-tag {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: 2px 6px;
}

.rail-nav { padding: 12px 10px; flex: 1; }
.rail-group { margin-bottom: 18px; }
.rail-group:last-child { margin-bottom: 0; }

.rail-label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 0 8px 7px;
}

.rail-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--r-s);
    background: none;
    color: var(--ink-2);
    font-size: .84375rem;
    text-align: left;
    cursor: pointer;
}

.rail-link i { font-size: 15px; color: var(--muted); width: 16px; }
.rail-link:hover { background: var(--surface-3); color: var(--ink); }

.rail-link.active {
    background: var(--surface-3);
    color: var(--ink);
    font-weight: 700;
}

.rail-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.rail-link.active i { color: var(--accent); }

.rail-count {
    margin-left: auto;
    font-size: .6875rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.rail-foot {
    border-top: 1px solid var(--line);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
    background: var(--accent-soft);
    color: var(--accent-2);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
}

/* Photo de profil. Absente, ce sont les initiales qui restent visibles. */
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bloc identité du rail : cliquable, il mène au profil. */
.rail-me {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: var(--r-m);
    color: inherit;
    text-decoration: none;
}

.rail-me:hover, .rail-me.active { background: var(--surface-3); color: inherit; }

.rail-who { font-size: .75rem; line-height: 1.3; min-width: 0; flex: 1; }
.rail-who span { display: block; color: var(--faint); font-size: .65625rem; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    background: var(--tint);
    border-bottom: 1px solid var(--line);
}

.topbar-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.topbar-search {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    color: var(--muted);
}

.topbar-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(20, 110, 245, .14);
}

.topbar-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font-size: .8125rem;
    color: var(--ink);
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Sélecteur de langue
   Il vit dans la topbar : placé dans le rail, son menu était rogné par
   l'overflow-y de celui-ci. Le déclencheur affiche le code courant pour que la
   langue active se lise sans ouvrir le menu. */
.lang-switch { flex: none; }

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: .78125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.lang-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line-2); }
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-btn i { font-size: 14px; }
.lang-code { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.lang-caret { font-size: 10px !important; color: var(--faint); }

.lang-menu { min-width: 190px; padding: 6px; }
.lang-menu .dropdown-header {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 4px 8px 6px;
}
.lang-menu form { margin: 0; }

.lang-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}

.lang-flag { font-size: 15px; line-height: 1; flex: none; }
.lang-name { flex: 1; }

/* La coche ne s'affiche que sur la langue active : elle occupe la place en
   permanence pour que les libellés restent alignés. */
.lang-check { visibility: hidden; font-size: 13px; flex: none; }
.lang-item.active .lang-check { visibility: visible; }
.lang-item.active { font-weight: 700; }

.app-content { flex: 1; padding: 20px 0 40px; }

.rail-toggle { display: none; }

@media (max-width: 991.98px) {
    .app-main { margin-left: 0; }
    .rail { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-3); }
    body.rail-open .rail { transform: none; }
    .rail-toggle { display: inline-grid; }
    .topbar-search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   4. Surcharges Bootstrap
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--r-m);
    font-family: var(--ui);
    font-weight: 600;
    font-size: .84375rem;
}

.btn-sm { --bs-btn-border-radius: var(--r-s); font-size: .78125rem; }

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-2);
    --bs-btn-hover-border-color: var(--accent-2);
    --bs-btn-active-bg: var(--accent-2);
    --bs-btn-active-border-color: var(--accent-2);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-2);
    --bs-btn-border-color: var(--line-2);
    --bs-btn-hover-bg: var(--accent-soft);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-2);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-2);
    --bs-btn-border-color: var(--line-2);
    --bs-btn-hover-bg: var(--surface-3);
    --bs-btn-hover-border-color: var(--line-2);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-border-color: var(--line-2);
}

.btn-outline-danger {
    --bs-btn-color: var(--st-rejected);
    --bs-btn-border-color: var(--line-2);
    --bs-btn-hover-bg: var(--st-rejected);
    --bs-btn-hover-border-color: var(--st-rejected);
}

.btn-light, .btn-secondary {
    --bs-btn-bg: var(--surface-3);
    --bs-btn-border-color: var(--line);
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--line);
    --bs-btn-hover-border-color: var(--line-2);
    --bs-btn-hover-color: var(--ink);
}

.form-control, .form-select {
    border-color: var(--line);
    border-radius: var(--r-s);
    color: var(--ink);
    background-color: var(--surface);
    font-size: .84375rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(20, 110, 245, .14);
}

.form-control::placeholder { color: var(--faint); }

.form-label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: .25rem;
}

.form-check-input { border-color: var(--line-2); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20, 110, 245, .14); }

.card, .modal-content {
    border-color: var(--line);
    border-radius: var(--r-l);
    background: var(--surface);
}

.modal-content { box-shadow: var(--shadow-3); }
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-size: 1.0625rem; }

.dropdown-menu {
    --bs-dropdown-border-color: var(--line-2);
    --bs-dropdown-border-radius: var(--r-m);
    --bs-dropdown-link-active-bg: var(--accent);
    --bs-dropdown-link-hover-bg: var(--surface-3);
    --bs-dropdown-font-size: .84375rem;
    box-shadow: var(--shadow-2);
    padding: 5px;
}

.dropdown-item { border-radius: var(--r-s); }

.table {
    --bs-table-bg: var(--surface);
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-color: var(--ink);
    margin-bottom: 0;
}

.table > thead > tr > th {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    padding: 9px 12px;
}

.table > tbody > tr > td { padding: 9px 12px; vertical-align: middle; }

.progress { background: var(--surface-3); border-radius: 100px; }
.progress-bar { background: var(--accent); }

.alert { border-radius: var(--r-m); border-color: var(--line); }
.toast { border-radius: var(--r-m); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-border-color: var(--line); }

/* --------------------------------------------------------------------------
   5. Composants maison
   -------------------------------------------------------------------------- */
.page-head {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.page-head h1 { margin: 0; font-size: 1.3125rem; }
.page-head p { margin: 3px 0 0; font-size: .8125rem; color: var(--muted); }
.page-head .head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Cartes maison — l.card de Bootstrap reste disponible en parallèle */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-1);
    margin-bottom: 14px;
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
}

.panel-head h2, .panel-head h3 {
    margin: 0;
    font-family: var(--ui);
    font-size: .65625rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--faint);
}

.panel-head .head-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.panel-body { padding: 14px; }

/* Tuiles de synthèse : filet coloré en tête, à la manière de l'app Lydeo */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.tile {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    padding: 16px 15px 12px;
    box-shadow: var(--shadow-1);
}

.tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--tile-color, var(--accent));
}

.tile-k {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--faint);
}

.tile-v {
    font-family: var(--display);
    font-size: 1.6875rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
    color: var(--tile-color, var(--ink));
}

.tile-f { display: flex; align-items: center; gap: 8px; margin-top: 7px; min-height: 20px; }
.tile-note { font-size: .6875rem; color: var(--faint); }

/* Pastilles de statut — toujours accompagnées de leur libellé */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: .71875rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 3px 9px 3px 7px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: var(--surface-3);
    color: var(--ink-2);
    font-family: var(--ui);
    line-height: 1.35;
}

.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
button.pill { cursor: pointer; }

.pill-new { color: var(--st-new); background: rgba(100, 116, 139, .11); border-color: rgba(100, 116, 139, .26); }
.pill-to_contact { color: var(--st-to_contact); background: rgba(124, 77, 255, .11); border-color: rgba(124, 77, 255, .26); }
.pill-contacted { color: var(--st-contacted); background: rgba(222, 133, 0, .12); border-color: rgba(222, 133, 0, .28); }
.pill-qualified { color: var(--st-qualified); background: rgba(15, 157, 143, .12); border-color: rgba(15, 157, 143, .28); }
.pill-rejected { color: var(--st-rejected); background: rgba(224, 66, 75, .11); border-color: rgba(224, 66, 75, .26); }
.pill-churned { color: var(--st-churned); background: rgba(148, 163, 184, .13); border-color: rgba(148, 163, 184, .3); }

/* Paliers Partners en aplat plein : neuf statuts ne se distinguent plus à
   l'œil par la seule teinte. Le remplissage sépare d'un coup ce que le CRM
   pilote (contour) de ce qui est constaté chez Partners (plein), et
   l'intensité croît jusqu'au client payant. */
.pill-signed { color: #fff; background: var(--st-signed); border-color: var(--st-signed); }
.pill-trial { color: #fff; background: var(--st-trial); border-color: var(--st-trial); }
.pill-client { color: #fff; background: var(--st-client); border-color: var(--st-client); }

/* Ancien nom, conservé le temps que les données héritées soient migrées. */
.pill-converted { color: #fff; background: var(--st-client); border-color: var(--st-client); }

/* Marqueur Partners de la liste : un seul signal affiché, le plus urgent.
   La cellule reste sur une ligne, sinon le pictogramme passe sous la pastille. */
.c-status { white-space: nowrap; }
.c-status .dropdown { display: inline-block; vertical-align: middle; }

.p-mark {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    font-size: .8125rem;
    vertical-align: middle;
    cursor: help;
}

.p-mark-warn { color: var(--st-contacted); }
.p-mark-bad { color: var(--st-rejected); }

/* Compteur d'appels de la liste. Vert dès qu'un appel a abouti, gris quand on
   a appelé sans jamais joindre — c'est la distinction qui compte, un prospect
   appelé six fois sans réponse n'est pas un prospect traité. */
.c-calls { white-space: nowrap; }

.c-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78125rem;
    font-weight: 650;
    vertical-align: middle;
    cursor: help;
}

.c-mark-ok { color: var(--st-contacted); }
.c-mark-ko { color: var(--muted); }

/* Point rouge du prospect qui a appelé sans être rappelé : le seul état de
   cette colonne qui réclame une action, donc le seul à porter une couleur
   d'alerte plutôt qu'une nuance de statut. */
.c-back {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--st-rejected);
    vertical-align: middle;
    cursor: help;
}

/* Marqueur d'étape non modifiable dans le stepper de la fiche. */
.step.is-locked { cursor: default; opacity: .82; }
.step.is-locked:hover { background: none; }
.step .s-lock { font-size: .6875rem; opacity: .7; margin-left: .25rem; }

.tag {
    display: inline-block;
    font-size: .71875rem;
    color: var(--ink-2);
    background: var(--surface-3);
    border-radius: var(--r-s);
    padding: 2px 7px;
    white-space: nowrap;
}

.tag-num { font-variant-numeric: tabular-nums; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 3px 6px 3px 10px;
    color: var(--ink-2);
}

.chip b { color: var(--ink); }

.chip .chip-x {
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--muted);
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    padding: 0;
}

.chip .chip-x:hover { background: var(--line-2); color: var(--ink); }

.icon-btn {
    border: 1px solid transparent;
    background: none;
    color: var(--muted);
    width: 30px;
    height: 30px;
    border-radius: var(--r-s);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: 15px;
    flex: none;
    padding: 0;
}

.icon-btn:hover { background: var(--surface-3); color: var(--ink); }

.kbd {
    font-family: var(--code);
    font-size: .625rem;
    color: var(--muted);
    border: 1px solid var(--line-2);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 5px;
    background: var(--surface);
    white-space: nowrap;
}

.empty-state {
    text-align: center;
    padding: 64px 20px;
    color: var(--muted);
}

.empty-state i { font-size: 2.25rem; color: var(--line-2); display: block; margin-bottom: 10px; }
.empty-state p { margin: 8px 0 0; font-size: .84375rem; }

/* Bandeau d'information contextuel */
.banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    margin-bottom: 14px;
    border-radius: var(--r-m);
    font-size: .8125rem;
    border: 1px solid rgba(20, 110, 245, .3);
    background: var(--accent-soft);
    color: var(--ink-2);
}

.banner > i { color: var(--accent); font-size: 1rem; flex: none; }
.banner .banner-act { margin-left: auto; }
.banner-warn { border-color: rgba(224, 66, 75, .32); background: rgba(224, 66, 75, .07); }
.banner-warn > i { color: var(--st-rejected); }

/* Toasts */
.toast-container { position: fixed; right: 16px; bottom: 16px; z-index: 1100; }

.toast-lydeo {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-m);
    padding: 10px 14px;
    font-size: .8125rem;
    box-shadow: var(--shadow-3);
    margin-top: 8px;
    animation: toast-pop .22s cubic-bezier(.2, .8, .3, 1);
}

.toast-lydeo i { color: #48c97a; }
.toast-lydeo.is-error i { color: #f3737b; }

.toast-lydeo button {
    border: 0;
    background: none;
    color: inherit;
    opacity: .65;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    text-decoration: underline;
    padding: 0 0 0 4px;
}

.toast-lydeo button:hover { opacity: 1; }

@keyframes toast-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
}

.min-w-0 { min-width: 0; }