/* ============================================================
   TOKENS VOYAGER · source de vérité : docs/design-system/tokens/
   Ne jamais réintroduire de couleur en dur dans les pages :
   toute nouvelle valeur passe par un token ici.
   ============================================================ */
:root {
    /* Marque & encre */
    --ink:#2e2b52;
    --violet:#9269bd;
    --violet-dark:#7a54a4;
    --violet-soft:#f1eaf9;
    --violet-mid:#5d4a7e;
    --teal:#3fa096;
    --teal-dark:#26706a;
    --teal-soft:#e4f4f2;
    --night:#191734;
    --gem:linear-gradient(135deg,#b18ae0 0%,#9269bd 35%,#5e5f9e 62%,#3fa096 100%);
    --gem-2:linear-gradient(135deg,#9269bd,#3fa096);
    --gem-line:linear-gradient(90deg,#9269bd,#3fa096);

    /* Surfaces */
    --bg:#f6f5fa;
    --card:#ffffff;
    --surface-sunk:#faf9fc;
    --surface-head:#fbfafd;
    --surface-inert:#f1f0f6;
    --track:#eceaf4;
    --track-2:#d9d5e6;
    --border:#e8e5f1;
    --border-row:#f0eef7;
    --border-hover:#cfc8e4;

    /* Texte */
    --text:#2e2b52;
    --text-muted:#6f6a8a;   /* AA sur --bg (4,72:1), --card (5,12:1) et --surface-inert (4,52:1) ; #736d90 : 4,48:1 sur --bg (D-107) */
    --text-muted-on-soft:#696484; /* --text-muted de la ligne active du dashboard, seul fond où #6f6a8a tombe à 4,36:1 : 4,76:1 sur --violet-soft (D-174) */
    --text-faint:#8782a3;   /* icônes et décor, jamais du texte : 3,11:1 sur --violet-soft (ligne active du dashboard), 3,48:1 sur --surface-sunk ; #8b85a6 : 2,98:1 (D-166) */
    --text-nav:#726c8e;
    --text-inert:#6f6a8a;
    --text-quote:#4c4770;
    --icon-off:#d9d5e6;
    --chevron:#c9c4dd;

    /* Sémantique (états, jamais décorative) */
    --success:#1fa860;
    --success-ink:#177a48;
    --success-soft:#e8f8ef;
    --success-border:#bfe9d2;
    --danger:#e5484d;
    --danger-ink:#c03538;
    --danger-soft:#fdeeee;
    --danger-border:#e9c9cb;
    --danger-wash:#fffafa;
    --warning:#e8930c;
    --warning-ink:#955904;  /* 5,20:1 sur --warning-soft, 5,66:1 sur --card ; #b26a05 : 3,89 et 4,24:1 (D-107) */
    --warning-soft:#fef4e6;
    --info:#3b82f6;
    --info-ink:#3b5bdb;
    --info-soft:#eef2fe;

    /* Écran Statistiques (www/statistics.php, assets/stats-charts.js) :
       Rampe ORDINALE des étapes d'envoi (une teinte, luminosité croissante),
       sarcelle réservée aux réponses humaines, gris dégradé pour ce qui entre
       dans la boîte sans être une réponse, orange (--warning) réservé au cap
       et au seuil de bounce. Jamais de couleur en dur dans la page. */
    --st-etape-0:#b99ad8;          /* premier contact */
    --st-etape-1:var(--violet);    /* relance 1 */
    --st-etape-2:var(--violet-mid);/* relance 2 */
    --st-reponse:#1fa593;          /* réponse humaine */
    --st-bruit-1:#d9d5e6;          /* refus, absences, « autre »… du plus clair */
    --st-bruit-2:#c1bcd3;
    --st-bruit-3:#a9a3c0;
    --st-bruit-4:#8f88a8;          /* …au plus foncé */
    --st-grille:#ece9f3;           /* lignes de grille des graphiques */
    --st-axe:#cfc8e4;              /* axe de base */
    --st-bande:var(--violet-soft); /* fenêtres de relance (bandes) */

    /* Bandes de score */
    --score-high:#1fa860;
    --score-mid:#e8930c;
    --score-low:#a8a3c0;
    --score-outbound:#3fa096;

    /* Surfaces d'interaction */
    --on-accent:#ffffff;
    --violet-hover-soft:#e7dcf5;
    --hover-nav:#f5f3fa;
    --danger-hover:#d43a3f;
    --danger-wash-hover:#fdf2f2;
    --danger-border-soft:#f6c6c8;
    --success-muted:#4a8f68;
    --teal-border:#bfe0dc;
    --teal-wash:#f6fbfa;
    --toast-bg:#211e3f;
    --scrim:rgba(25,23,52,.45);
    --skeleton:#eceaf4;
    --skeleton-hi:#f4f2f9;

    /* Nuit : murs de logs */
    --night-text:#8fa3c8;
    --night-title:#e6ebf7;
    --night-dim:#8b85a6;    /* 4,95:1 sur --night ; #5a6a8f : 3,21:1 (D-107) */
    --night-ok:#6ee7b7;
    --night-warn:#fbbf24;
    --night-data:#b7c6e0;

    /* Typographie */
    --font-display:'Space Grotesk',system-ui,sans-serif;
    --font-ui:'Inter',system-ui,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,monospace;
    --fs-h1:23px; --fs-h2:18px; --fs-h3:17px; --fs-section:15px;
    --fs-body:14px; --fs-body-strong:14.5px;
    --fs-btn:13.5px; --fs-btn-sm:12.5px;
    --fs-sec:13px; --fs-sec-sm:12.5px; --fs-meta:12px;
    --fs-mono:11.5px; --fs-label:11px; --fs-tag:10.5px; --fs-pill:9.5px;
    --fs-kpi:25px; --fs-kpi-sm:21px; --fs-kpi-mobile:18px;
    --lh-ui:1.5; --lh-prose:1.55; --lh-mono:1.75;
    --ls-display:-.02em; --ls-label:.07em; --ls-tag:.05em;

    /* Espacement & gabarits */
    --gap-grid:10px; --gap-stack:8px; --gap-row:9px;
    --pad-card:13px 15px; --pad-card-lg:18px 20px; --pad-cell:10px 14px;
    --page-max:1280px; --page-max-narrow:1100px; --prose-max:760px;
    --nav-h:54px; --tap-min:44px; --control-h:38px; --control-h-sm:31px;

    /* Formes & ombres */
    --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px;
    --r-xl:13px; --r-2xl:14px; --r-3xl:16px; --r-pill:99px;
    --bw-hairline:1px; --bw-control:1.5px; --bw-underline:2.5px;
    --shadow-card:0 1px 2px rgba(46,43,82,.05);
    --shadow-raise:0 1px 3px rgba(33,30,63,.12);
    --shadow-menu:0 10px 32px rgba(33,30,63,.14);
    --shadow-toast:0 8px 28px rgba(33,30,63,.35);
    --shadow-modal:0 20px 60px rgba(33,30,63,.25);
    --shadow-bbar:0 -6px 24px rgba(33,30,63,.08);
    --shadow-knob:0 1px 3px rgba(0,0,0,.25);
    --focus-ring:0 0 0 3px rgba(146,105,189,.15);

    /* Mouvement */
    --dur-fast:.15s; --dur-toggle:.18s; --dur-move:.22s; --dur-ring:.6s;
    --ease:ease;

    /* Alias de compatibilité (classes historiques, à résorber page par page) */
    --primary:var(--ink);
    --accent:var(--violet);
    --accent-dark:var(--violet-dark);
    --accent-2:var(--teal);
    --text-light:var(--text-muted);
    --border-light:var(--border-row);
    --radius:var(--r-lg);

    /* Refonte UX du profil simple (brief global § 9.3, 24/09/2026). Noms du brief : les jetons
       qui existaient déjà sous un autre nom en sont des alias (valeurs de D2L inchangées) ; les
       nouveaux sont mesurés par tests/test_coquille.php. Thème sombre : bloc plus bas. */
    --border-control:#8f88a8;         /* bordure de champ et de puce : 3,36:1 sur --card, 3,10:1 sur --bg */
    --violet-ink:var(--violet-dark);  /* liens, onglet actif, étiquettes : 5,78:1 sur --card */
    --accent-fill:var(--violet-dark); /* fond du bouton principal, --on-accent dessus : 5,78:1 */
    --teal-ink:var(--teal-dark);      /* étiquettes machine : 5,13:1 sur --teal-soft */
    --badge-rouge:var(--danger-ink);  /* pastille chiffrée des réponses, blanc dessus : 5,52:1 */
    --danger-fill:var(--danger-hover);/* bouton destructif, blanc dessus : 4,69:1 */
    --warning-mark:#bd780b;           /* point et contour ambre (jamais du texte) : 3,59:1 sur --card ; --warning (#e8930c) : 2,44:1 */
    --toast:var(--toast-bg);          /* toast, barre de sélection : blanc dessus 15,88:1 */
    --trait-discret:#8b85a6;          /* croix de fermeture, icônes inertes (jamais du texte) : 3,50:1 sur --card */
    --violet-deep:var(--violet-mid);  /* survol du bouton principal : blanc dessus 7,65:1 */
    /* Barre du haut SOMBRE de niveau 1 (maquette Nav, version 7) et ses pastilles, sur --nuit */
    --nuit:var(--night);              /* fond de la barre : blanc 17,31:1, --nuit-encre 10,24:1 */
    --nuit-filet:#2c2856;             /* filet bas, fond du champ de recherche et de l'entrée survolée */
    --nuit-bord:#4a4578;              /* bord du champ de recherche et de la touche « / » (décor : l'icône et le texte l'identifient) */
    --nuit-encre:#c9c4dd;             /* entrée au repos, icônes : 8,04:1 sur --nuit-filet */
    --nuit-actif:#ffffff;             /* entrée active */
    --nuit-focus:#b18ae0;             /* anneau de focus sur la barre sombre : 6,25:1 sur --nuit */
    --nuit-ambre-fond:#3a2f12;        /* pastille ambre (Prospects, à décider) sur la barre sombre */
    --nuit-ambre-encre:#f2b35a;       /* chiffre de la pastille ambre : 7,13:1 sur --nuit-ambre-fond */
    --nuit-violet-encre:#d7c6ee;      /* chiffre de la pastille violette (Envois, à relire) : 8,54:1 sur --nuit-filet */
    --sur-aplat:#ffffff;              /* texte sur un aplat saturé, les deux thèmes : pastille rouge (5,52:1 ; sombre 4,63:1), bouton destructif (4,69:1 ; sombre 5,04:1) */
    --toast-ok:#63d39c;              /* coche du toast : 8,57:1 sur --toast */
    --toast-erreur:#ff9a9d;           /* croix du toast en erreur : 7,50:1 sur --toast */
    --toast-lien:#c9aaf0;             /* « Annuler » du toast : 7,94:1 sur --toast */
    --gem-trait:linear-gradient(90deg,#b18ae0 0%,#9269bd 35%,#5e5f9e 62%,#3fa096 100%); /* soulignement actif, liseré de la carte principale */
    --anneau-focus:0 0 0 3px rgba(146,105,189,.18);
    --voile-panneau:rgba(25,23,52,.24); /* sous un panneau latéral ; --scrim sous une fenêtre ou une feuille */
    --shadow-hover:0 4px 16px rgba(33,30,63,.08);
    --shadow-feuille:0 -12px 32px rgba(33,30,63,.14);
    --shadow-rond:0 2px 8px rgba(122,84,164,.35);
    /* Thème sombre du profil simple (lot 4, lib/theme.php, docs/ux-simple/theme-sombre.md) : jetons
       ajoutés pour que chaque couleur ait sa valeur sombre. Valeurs claires = celles d'avant (le
       clair ne bouge pas) ; valeurs sombres dans les deux blocs en fin de fichier. */
    --on-toast:#ffffff;               /* texte sur un toast (fond qui reste sombre) : 15,88:1 ; --on-accent devient une encre foncée en sombre */
    --toast-bord:transparent;         /* bord du toast, visible en sombre seulement (le toast ne s'y détache du fond qu'à 1,35:1) */
    --bord-flottant:transparent;      /* bord d'une fenêtre jconfirm, visible en sombre seulement */
    --voile-fenetre:var(--night);     /* voile sous une fenêtre jconfirm (opacité posée par le thème des fenêtres) */
    --info-border:#bfdbfe;
    --warning-border:#fde68a;
    --danger-fill-hover:var(--danger-ink); /* survol du bouton destructif, blanc dessus 5,52:1 */
    --success-fill-hover:#12603a;
    --warning-fill:var(--warning-ink);     /* bouton plein orange des fenêtres, --on-accent dessus 5,66:1 */
    --warning-fill-hover:#7a4903;
    --info-fill-hover:#2f4bbd;
    --ink-fill-hover:var(--night);
    --gem-stop-1:#9269bd; --gem-stop-2:#5e5f9e; --gem-stop-3:#3fa096; /* arrêts du dégradé de l'anneau gemme */
    --st-encre-0:var(--ink);          /* chiffre posé dans un segment des graphiques de Résultats, par état */
    /* Encre choisie selon le fond, 4,5:1 au moins en clair aussi (blanc sur --st-bruit-2 1,84:1, sur
       --st-reponse 3,06:1, sur --danger 3,91:1, sur --st-etape-1 4,22:1 jusqu'au 24/09/2026) :
       --st-encre-1 4,62:1, --st-encre-2 7,65:1, --st-encre-bruit-2 7,20:1, --st-encre-danger 4,98:1,
       --st-encre-reponse 6,37:1. */
    --st-encre-1:#0c0a1e; --st-encre-2:var(--card); --st-encre-bruit-3:var(--ink); --st-encre-bruit-2:var(--ink);
    --st-encre-danger:#0c0a1e; --st-encre-reponse:#0c0a1e;
    --plage-reponse:rgba(31,165,147,.22); /* fourchette d'un taux de réponse (Résultats), décor */
    --shadow-carte-seule:0 1px 2px rgba(46,43,82,.05), 0 12px 32px rgba(33,30,63,.06); /* carte posée seule sur la page (connexion) */
    --anneau-erreur:0 0 0 3px rgba(192,53,56,.18); /* anneau de focus d'un champ en erreur */
    --on-accent-voile:rgba(255,255,255,.35);       /* rail du rond d'attente sur un bouton principal */
}
@keyframes voyager-pulse{50%{opacity:.35}}
@keyframes voyager-toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    line-height: var(--lh-ui);
    font-size: var(--fs-body);
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: var(--ls-display); }
/* Texte violet en --violet-dark : 5,78:1 sur --card (--violet : 4,22:1, D-107) */
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre { font-family: var(--font-mono); }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* === Navigation : coquille des deux profils (lib/coquille.php, assets/pages/coquille.css) ;
   l'ancien menu du profil complet (topnav, barre basse vbar) est retiré (Q-170, 25/09/2026). === */

/* === Container === */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}
.container-fluid {
    max-width: none;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}
.container-fluid.dash-layout {
    padding: 0;
}
h1 { font-size: 1.5rem; margin-bottom: 1.25rem; color: var(--primary); }
h2 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--primary); }

/* === Cards === */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
}
.card-header h3 { font-size: 1.05rem; }
.card-meta { color: var(--text-light); font-size: 0.85rem; }

/* === Badges === */
.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}
.badge-hot { background: var(--danger-soft); color: var(--danger-ink); }
.badge-warm { background: var(--warning-soft); color: var(--warning-ink); }
.badge-mild { background: var(--warning-soft); color: var(--warning-ink); }
.badge-cold { background: var(--info-soft); color: var(--info-ink); }
.badge-muted { background: var(--surface-inert); color: var(--text-muted); }
.badge-success { background: var(--success-soft); color: var(--success-ink); }

/* === Buttons : violet = humain, sarcelle = automatisation === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--r-lg);
    font-family: var(--font-ui);
    font-size: var(--fs-btn);
    font-weight: 600;
    cursor: pointer;
    min-height: var(--control-h);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* Blanc sur --violet-dark : 5,78:1, AA pour du texte de 13 px (--violet ne donnait que 4,22:1, D-084) ;
   mêmes teintes que le bouton CONFIRMER des fenêtres de dialogue (jconfirm-voyager.css). */
.btn-primary { background: var(--violet-dark); color: var(--on-accent); }
.btn-primary:hover { background: var(--violet-mid); }
.btn-primary:active { background: var(--violet-mid); }
/* Boutons pleins : blanc ≥ 4,5:1 (D-107). Sarcelle --teal-dark 5,82:1 (--teal : 3,14:1), vert
   --success-ink 5,37:1 (--success : 3,08:1), rouge --danger-hover 4,69:1 comme le bouton rouge des
   dialogues (--danger : 3,91:1). Aucun jeton plus sombre pour le survol : il fonce par filtre. */
.btn-auto { background: var(--teal-dark); color: var(--on-accent); }
.btn-auto:hover { background: var(--teal-dark); filter: brightness(.9); }
.btn-auto:focus-visible { outline-color: var(--teal); }
.btn-ghost { background: var(--card); border: var(--bw-control) solid var(--border); color: var(--text); font-weight: 500; }
.btn-ghost:hover { background: var(--surface-sunk); }
.btn-soft { background: var(--violet-soft); color: var(--violet-dark); }
/* --violet-dark tombe à 4,39:1 sur le fond de survol : texte --violet-mid (5,81:1) */
.btn-soft:hover { background: var(--violet-hover-soft); color: var(--violet-mid); }
.btn-success { background: var(--success-ink); color: var(--on-accent); }
.btn-danger-ghost { background: transparent; color: var(--danger-ink); border: var(--bw-hairline) solid var(--danger-border-soft); }
.btn-danger-ghost:hover { background: var(--danger-wash-hover); }
.btn-secondary { background: var(--surface-inert); color: var(--text); }
.btn-secondary:hover { background: var(--track); }
.btn-sm { padding: 6px 11px; font-size: var(--fs-btn-sm); min-height: var(--control-h-sm); border-radius: var(--r-md); }
.btn-action { background: var(--teal-dark); color: var(--on-accent); }
.btn-action:hover { background: var(--teal-dark); filter: brightness(.9); }
.btn-action:disabled { opacity: 0.5; cursor: wait; }
.action-bar { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.action-bar .btn { white-space: nowrap; }

/* === Forms === */
input[type="text"], input[type="password"], input[type="email"],
input[type="url"], input[type="number"], input[type="file"],
select, textarea {
    width: 100%;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: inherit;
}
textarea { resize: vertical; min-height: 100px; font-family: 'Consolas', 'Monaco', monospace; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: var(--focus-ring);
}
label { display: block; margin-bottom: 0.35rem; font-weight: 500; font-size: 0.9rem; }
.form-group { margin-bottom: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* === Stats (Dashboard) === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}
.stat-number { font-size: 2rem; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; }

/* === Table === */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); }
th { font-weight: 600; font-size: 0.85rem; color: var(--text-light); text-transform: uppercase; }
tr:hover { background: var(--surface-sunk); }

/* === Counter === */
.counter { font-size: 0.9rem; color: var(--text-light); margin-bottom: 1rem; }

/* === Toast : canal unique de l'asynchrone (bas-droite, fond Nuit) === */
.toast {
    position: fixed;
    bottom: 22px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--toast-bg);
    padding: 11px 16px;
    border-radius: 12px;
    color: var(--on-toast);
    font-size: var(--fs-btn);
    font-weight: 500;
    z-index: 1000;
    box-shadow: var(--shadow-toast), inset 0 0 0 1px var(--toast-bord);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-move) var(--ease), transform var(--dur-move) var(--ease);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast::before {
    content: '✓';
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-size: 11px;
    background: var(--success);
}
.toast-error::before { content: '✕'; background: var(--danger); }
.toast-info::before { content: 'ℹ'; background: var(--info); }

/* Page de connexion : www/assets/pages/connexion.css (préfixe cx-, 24/09/2026). */

/* === Alert === */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.alert-info { background: var(--info-soft); color: var(--info-ink); border: 1px solid var(--info-border); }
.alert-success { background: var(--success-soft); color: var(--success-ink); border: 1px solid var(--success-border); }
.alert-warning { background: var(--warning-soft); color: var(--warning-ink); border: 1px solid var(--warning-border); }
.alert-error { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid var(--danger-border-soft); }

/* === Responsive === */
@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .container { padding: 1rem; }
}

/* === Counter number === */
.counter-number { font-weight: 700; color: var(--primary); }

/* === Word counter === */
.word-count { font-size: 0.8rem; color: var(--text-light); margin-top: 0.25rem; text-align: right; }
.word-count.over-limit { color: var(--danger-ink); font-weight: 600; }

/* === Signal badges === */
.badge-signal { background: var(--violet-soft); color: var(--violet-ink); }

/* === Steps grid (séquence 3 temps) === */
.step-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.25rem; }
/* === Batch Progress Overlay === */
.batch-overlay {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.batch-modal {
    background: var(--card);
    border-radius: var(--radius);
    width: 540px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-modal);
}
.batch-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.batch-header h3 { font-size: 1rem; margin: 0; }
.batch-stats {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
}
.batch-stat { display: flex; align-items: center; gap: 0.3rem; }
.batch-stat-ok { color: var(--success-ink); font-weight: 600; }
.batch-stat-err { color: var(--danger-ink); font-weight: 600; }
.batch-progress-bar {
    height: 6px;
    background: var(--border);
    overflow: hidden;
}
.batch-progress-fill {
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width 0.3s ease;
}
.batch-progress-fill.done { background: var(--success); }
.batch-progress-fill.has-errors { background: var(--warning); }
.batch-current {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--text-light);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.batch-log {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    max-height: 300px;
    font-size: 0.8rem;
    font-family: 'Consolas', 'Monaco', monospace;
}
.batch-log-entry {
    padding: 0.2rem 1.25rem;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}
.batch-log-entry:hover { background: var(--surface-sunk); }
.batch-log-ok { color: var(--success-ink); }
.batch-log-err { color: var(--danger-ink); }
.batch-log-skip { color: var(--text-light); }
.batch-log-num { color: var(--text-light); min-width: 2.5rem; text-align: right; }
.batch-log-name { font-weight: 500; min-width: 140px; }
.batch-log-detail { color: var(--text-light); }
.batch-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.batch-footer .batch-timer { font-size: 0.8rem; color: var(--text-light); }

/* === Prospect Detail Page === */

.p-avatar-wrap {
    position: relative;
    width: 70px; height: 70px;
    flex-shrink: 0;
}
img.p-avatar-photo {
    object-fit: cover; border-radius: 50%; background: var(--track);
    cursor: pointer; position: relative;
    transition: transform 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease;
}
.p-avatar-wrap:hover img.p-avatar-photo,
img.p-avatar-photo:hover {
    z-index: 50;
    transform: scale(2.85);
    transform-origin: top left;
    border-radius: 12px;
    box-shadow: var(--shadow-menu);
}
.p-avatar-delete {
    position: absolute;
    top: 4px; right: 4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--danger-fill);
    color: var(--sur-aplat);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
    box-shadow: var(--shadow-raise);
    z-index: 60;
    pointer-events: none;
}
.p-avatar-wrap:hover .p-avatar-delete {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.p-avatar-delete:hover {
    background: var(--danger-fill-hover);
    transform: scale(1.1);
}
.p-avatar-delete:disabled {
    opacity: 0.5;
    cursor: wait;
}

.p-pipe-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 56px; }

.p-card-body { padding: 20px; }

.p-input {
    width: 100%; padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--border);
    background: var(--card); font-size: 13.5px; font-weight: 500; color: var(--text);
    font-family: inherit; outline: none; box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.p-input:focus { border-color: var(--border-hover); box-shadow: var(--focus-ring); }
.p-input[readonly], .vs-input[readonly] { color: var(--text-muted); cursor: default; }
.p-input-mono { font-family: 'Consolas', 'Monaco', monospace; }
.p-input-link-wrap { display: flex; align-items: center; gap: 6px; }
.p-input-link-wrap .p-input { flex: 1; min-width: 0; }
.p-input-link-icon {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px; background: var(--surface-inert);
    color: var(--info-ink); font-size: 16px; text-decoration: none;
    flex-shrink: 0; transition: background 0.15s, color 0.15s;
}
.p-input-link-icon:hover { background: var(--info-ink); color: var(--on-accent); }
.p-textarea {
    width: 100%; padding: 10px 13px; border-radius: 8px; border: 1.5px solid var(--border);
    background: var(--card); font-size: 13.5px; font-weight: 450; color: var(--text);
    font-family: inherit; outline: none; line-height: 1.7; resize: none; overflow: hidden;
    box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s;
}
.p-textarea:focus { border-color: var(--border-hover); box-shadow: var(--focus-ring); }
.p-textarea-warning { border-color: var(--danger); background: var(--danger-soft); }
.p-textarea-warning:focus { border-color: var(--danger-ink); box-shadow: 0 0 0 3px var(--danger-soft); }

/* Chip Selects */
.chip-group { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 2px; }
.chip {
    padding: 5px 11px; border-radius: 7px; border: 1.5px solid var(--border);
    background: var(--card); color: var(--text-muted); font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap;
}
.chip.active { font-weight: 700; }
.chip.chip-suggested { border-style: dashed; border-color: var(--info-border); background: var(--info-soft); color: var(--info-ink); font-weight: 500; }
.chip.chip-suggested:hover { opacity: 1; }
.chip:hover { border-color: var(--border-hover); }
.chip-more {
    padding: 5px 10px; border-radius: 7px; border: 1.5px dashed var(--border-hover);
    background: var(--surface-sunk); color: var(--text-muted); font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.chip-group .chip-hidden { display: none; }
.chip-group .chip-hidden.active { display: inline-block; }
.chip-group.expanded .chip-hidden { display: inline-block; }

/* Company badge & referent star */
.dash-company-badge {
    display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
    text-align: center; font-size: 11px; font-weight: 700;
    background: var(--violet-soft); color: var(--violet-ink); border-radius: 9px;
    padding: 0 5px; margin-left: 4px; vertical-align: middle;
}
.dash-referent-star { color: var(--warning-ink); font-size: 13px; margin-left: 2px; vertical-align: middle; }

/* Vue entreprise toggle */
.dash-toggle-vue { display: inline-flex; align-items: center; margin-left: 8px; cursor: pointer; }
.dash-toggle-vue input { display: none; }

/* Collapsible chip groups: when collapsed, hide inactive chips and show "..." */
.chip-group.collapsible.collapsed .chip:not(.active) { display: none; }
.chip-group.collapsible.collapsed .chip-more { display: inline-block; }
/* When expanded OR no active selection, show everything */
.chip-group.collapsible.expanded .chip { display: inline-block; }
.chip-group.collapsible.expanded .chip-hidden { display: inline-block; }
/* Hide "..." when no value selected (all visible by default) */
.chip-group.collapsible:not(.collapsed):not(.expanded) .chip-more { display: none; }

/* Chip color variants */
.chip.active[data-color="purple"] { border-color: var(--violet); background: var(--violet-soft); color: var(--violet-mid); }
.chip.active[data-color="cyan"] { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-dark); }
.chip.active[data-color="amber"] { border-color: var(--warning-mark); background: var(--warning-soft); color: var(--warning-ink); }
.chip.active[data-color="violet"] { border-color: var(--violet); background: var(--violet-soft); color: var(--violet-dark); }
.chip.active[data-color="blue"] { border-color: var(--info); background: var(--info-soft); color: var(--info-ink); }
.chip.active[data-color="red"] { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-ink); }

/* Temperature selector */
.temp-selector { display: flex; gap: 6px; }
.temp-btn {
    flex: 1; padding: 9px 6px; border-radius: 10px; border: 1.5px solid var(--border);
    background: var(--card); color: var(--text-muted); font-size: 14px; font-weight: 500;
    cursor: pointer; font-family: inherit; display: flex; align-items: center;
    justify-content: center; gap: 5px; transition: all 0.2s;
}
.temp-btn.active-cold, .temp-btn.active-froid { background: var(--info-soft); border-color: var(--info-border); color: var(--info-ink); font-weight: 700; box-shadow: var(--shadow-card); }
.temp-btn.active-mild, .temp-btn.active-tiede { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-ink); font-weight: 700; box-shadow: var(--shadow-card); }
.temp-btn.active-hot, .temp-btn.active-chaud { background: var(--danger-soft); border-color: var(--danger-border-soft); color: var(--danger-ink); font-weight: 700; box-shadow: var(--shadow-card); }

/* Body padding for sticky bar */
body.has-bottombar { padding-bottom: 70px; }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD V2 · Warm/Light Design
   ═══════════════════════════════════════════════════════════════ */

/* Hide default h1 on dashboard */
.container-fluid > h1:first-child { display: none; }

/* ─── Boutons d'action du dashboard : état désactivé ─── */
.dash-btn-action:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Toolbar (Filters + Actions) ─── */
.dash-toolbar {
    background: var(--card); padding: 12px 32px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    gap: 14px;
}
.dash-toolbar-left {
    display: flex; gap: 8px; align-items: center;
}
.dash-toolbar-right {
    display: flex; gap: 7px; align-items: center;
}
.dash-search-wrap {
    position: relative; flex-shrink: 0;
}
.dash-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 15px; color: var(--text-muted); pointer-events: none;
    display: flex; align-items: center; line-height: 1;
}
.dash-search {
    width: 260px !important; min-width: 180px; padding: 8px 14px 8px 34px !important; border-radius: 8px !important;
    border: 1.5px solid var(--border) !important; background: var(--card) !important;
    font-size: 14px !important; font-weight: 500; color: var(--primary);
    font-family: inherit; outline: none;
}
.dash-search:focus { border-color: var(--border-hover); box-shadow: var(--focus-ring); }
.dash-select {
    padding: 8px 30px 8px 12px; border-radius: 8px; border: 1.5px solid var(--border);
    font-size: 14px; font-weight: 500; color: var(--text-muted);
    font-family: inherit; outline: none; cursor: pointer; background: var(--card);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23c4beb4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.dash-select:focus { border-color: var(--border-hover); }
.dash-reset-btn {
    padding: 8px 14px; border-radius: 8px; border: 1.5px solid var(--border);
    font-size: 13px; font-weight: 600; font-family: inherit; background: var(--card); color: var(--text-muted);
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.dash-reset-btn:hover { border-color: var(--border-hover); text-decoration: none; }

/* Action buttons : colored */
.dash-btn-action {
    padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px;
    text-decoration: none; white-space: nowrap; transition: all 0.15s;
}
.dash-btn-action:hover { text-decoration: none; }
.dash-btn-enrich { background: var(--info-soft); border: 1.5px solid var(--info-border); color: var(--info-ink); }
.dash-btn-score { background: var(--info-soft); border: 1.5px solid var(--info-border); color: var(--info-ink); }
.dash-btn-generate { background: var(--violet-soft); border: 1.5px solid var(--violet-hover-soft); color: var(--violet-ink); }
.dash-btn-verify { background: var(--warning-soft); border: 1.5px solid var(--warning-border); color: var(--warning-ink); }
.dash-btn-action-badge {
    font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 700;
}
.dash-btn-delete-sel {
    padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px;
    background: var(--danger-soft); border: 1.5px solid var(--danger-border-soft); color: var(--danger-ink);
    white-space: nowrap;
}

/* ─── Pending / Import Lists ─── */
/* Ligne « pending » (sourcée, pas encore qualifiée) : fond --bg et nom en --text-quote au lieu
   d'une opacité, qui faisait tomber le texte sous 4,5:1 et l'icône d'une coordonnée absente
   sous 3:1 (D-172). Survol et ligne active gardent leur fond (règles plus spécifiques). */
.dash-row-pending { background: var(--bg); }
.dash-row-pending .dash-td-entreprise { color: var(--text-quote); font-weight: 500; }

/* ─── Table ─── */
.dash-table-wrap {
    background: var(--card); padding: 0 32px; overflow-x: auto;
}
.dash-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.dash-table thead th {
    padding: 12px 10px; text-align: left; font-size: 11px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap; user-select: none;
}
.dash-table thead th.dash-th-active { color: var(--primary); }
.dash-sort-link {
    color: inherit; text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 2px;
}
.dash-sort-link:hover { color: var(--primary); text-decoration: none; }
.dash-table tbody tr { transition: background 0.12s; }
.dash-row { cursor: pointer; }
.dash-row:hover { background: var(--surface-sunk); }
.dash-row.dash-row-active { background: var(--violet-soft); outline: 2px solid var(--violet); outline-offset: -2px; }
.dash-table td { padding: 13px 10px; border-bottom: 1px solid var(--border-row); text-align: left; }
.dash-td-id { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.dash-td-entreprise { font-weight: 600; color: var(--primary); font-size: 14px; }
.dash-td-pipeline { white-space: nowrap; text-align: left; }
.dash-td-coords { white-space: nowrap; text-align: left; }
.pipeline-icon { font-size: 13px; margin: 0 3px; cursor: pointer; transition: background-color .15s, color .15s; }
.pipeline-icon.is-en-cours { cursor: wait; animation: voyager-pulse 1s ease-in-out infinite; } /* action en cours (pipelineAction, app.js) */
.dash-td-contact { color: var(--text-muted); font-size: 14px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-td-poste { color: var(--text-muted); font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-td-score { text-align: left; }
.dash-td-source { color: var(--text-muted); font-size: 13px; }
.dash-td-check { text-align: center; }
.dash-td-date { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.dash-td-error { color: var(--danger-ink); font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-td-retry { text-align: center; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.dash-td-site { color: var(--text-muted); font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-td-actions { white-space: nowrap; text-align: center; }
.dash-th-check { width: 36px; text-align: center; }
.dash-th-check input, .dash-td-check input { cursor: pointer; accent-color: var(--primary); }
.dash-action-btn {
    background: none; border: none; cursor: pointer;
    padding: 4px 8px; font-size: 16px; line-height: 1; transition: all 0.15s;
    color: var(--text-faint);
}
.dash-action-btn:hover { color: var(--text-muted); }
.dash-action-retry:hover { color: var(--info-ink); }
.dash-action-delete:hover { color: var(--danger-ink); }
.dash-empty { padding: 48px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* Secteur badge */
.dash-badge-secteur {
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 5px;
    letter-spacing: 0.05em; white-space: nowrap;
}

/* ─── Pagination ─── */
.dash-pagination {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 12px 0 20px; flex-wrap: wrap;
}
.dash-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--card);
    color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none;
    transition: all .15s;
}
.dash-page-btn:hover:not(.disabled):not(.active) { background: var(--hover-nav); border-color: var(--border-hover); }
.dash-page-btn.active { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); font-weight: 700; }
.dash-page-btn.disabled { opacity: .35; pointer-events: none; }
.dash-page-info { margin-left: 12px; font-size: 12px; color: var(--text-muted); }
.dash-per-page-select {
    margin-left: 12px; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--card); font-size: 12px; color: var(--text);
    cursor: pointer; transition: all .15s; font-family: inherit;
}
.dash-per-page-select:hover { border-color: var(--border-hover); background: var(--hover-nav); }

/* ─── Bottom 3 Cards ─── */
.dash-bottom {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
    padding: 24px 32px; margin-bottom: 0;
}

/* Bar charts */
.dash-bars { display: flex; flex-direction: column; gap: 10px; }
.dash-bar-row { display: flex; align-items: center; gap: 10px; }
.dash-bar-label {
    font-size: 13px; font-weight: 600; width: 95px;
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.dash-bar-label-source {
    color: var(--text-muted); font-weight: 500; width: 110px; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-bar-track {
    flex: 1; height: 6px; border-radius: 3px; background: var(--border-light); overflow: hidden;
}
.dash-bar-fill {
    height: 100%; border-radius: 3px;
}
.dash-bar-count {
    font-size: 14px; font-weight: 700; color: var(--primary); width: 28px; text-align: right;
    flex-shrink: 0;
}

/* ─── Activity ─── */
.dash-activity-list { display: flex; flex-direction: column; gap: 4px; }
.dash-activity-item {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.dash-activity-text { flex: 1; min-width: 0; font-size: 13px; }
.dash-activity-action { font-weight: 500; color: var(--text-muted); }
.dash-activity-sep { color: var(--chevron); }
.dash-activity-name { font-weight: 600; color: var(--primary); text-decoration: none; }
.dash-activity-name:hover { text-decoration: underline; }
span.dash-activity-name { color: inherit; }
span.dash-activity-name:hover { text-decoration: none; }
.dash-activity-extra { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
.dash-activity-time { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

/* ─── Dashboard Responsive ─── */

/* Sous 1800px : toolbar passe en 2 lignes */
@media (max-width: 1800px) {
    .dash-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 24px;
    }
    /* Ligne 1 : bouton recherche avancée + form filtres */
    .dash-toolbar > button:first-child { order: 1; }
    .dash-toolbar-left { order: 2; flex: 1; min-width: 0; }
    /* Ligne 2 : boutons d'action sur toute la largeur */
    .dash-toolbar-right {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 4px;
        border-top: 1px solid var(--border-light);
    }
}

@media (max-width: 1200px) {
    .dash-toolbar { padding: 10px 16px; }
    .dash-toolbar-left { flex-wrap: wrap; gap: 6px; }
    .dash-search { width: 200px !important; }
}

@media (max-width: 1024px) {
    .dash-bottom { grid-template-columns: 1fr; }
    .dash-table-wrap { padding: 0 16px; }
    .dash-bottom { padding: 24px 16px; }
    .dash-search { width: 180px !important; }
    .dash-btn-action { font-size: 12px; padding: 6px 10px; }
}

@media (max-width: 768px) {
    .dash-toolbar-left { width: 100%; }
    .dash-search { width: 100% !important; }
    .dash-search-wrap { width: 100%; }
    .multi-select-dropdown { flex: 1; min-width: 80px; }
    .dash-btn-action { flex: 1; min-width: 120px; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */


/* Prospect header mobile */
@media (max-width: 768px) {
    .container-fluid { padding: 1rem; }
    img.p-avatar-photo { width: 44px; height: 44px; }
    .p-avatar-wrap { width: 44px; height: 44px; }
    .p-avatar-delete { width: 20px; height: 20px; top: 2px; right: 2px; }
}

/* Touch targets */
@media (max-width: 768px) {
    .chip { min-height: 36px; padding: 8px 14px; font-size: 13px; }
    .chip-more { min-height: 36px; padding: 8px 12px; }
    .temp-btn { padding: 12px 8px; font-size: 14px; }
    .btn, .btn-sm { min-height: 44px; }
}

/* Bottom bar mobile */
@media (max-width: 768px) {
    body.has-bottombar { padding-bottom: 110px; }
}

/* Labels stacked on mobile */
@media (max-width: 768px) {
    .p-input { font-size: 14px; padding: 8px 12px; }
    .p-textarea { font-size: 14px; padding: 12px; }
}

/* === Notion-style Dropdown === */
.notion-dropdown {
    position: absolute;
    z-index: 10000;
    background: var(--card);
    border-radius: 8px;
    box-shadow: var(--shadow-menu);
    min-width: 220px;
    max-width: 320px;
    padding: 8px 0;
    animation: notionDropdownIn 0.15s ease;
}

@keyframes notionDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.notion-dropdown-title {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.notion-dropdown-options {
    max-height: 320px;
    overflow-y: auto;
}

.notion-dropdown-option {
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.notion-dropdown-option:hover {
    background: var(--surface-inert);
}

.notion-dropdown-option.selected {
    background: var(--info-soft);
}

.notion-option-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.1s ease;
}

.notion-dropdown-option:hover .notion-option-badge {
    transform: translateX(2px);
}

/* Dropdown batch centrée */
.notion-dropdown-batch {
    min-width: 280px;
    max-width: 400px;
}

.notion-dropdown-batch .notion-dropdown-title {
    font-size: 13px;
    padding: 10px 14px;
}

/* === Barre flottante actions groupées === */
.batch-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--card);
    border-radius: 12px;
    box-shadow: var(--shadow-menu);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    animation: batchBarSlideUp 0.25s ease;
    border: 1px solid var(--border);
}

@keyframes batchBarSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.batch-bar-content {
    display: flex;
    align-items: center;
    gap: 24px;
}

.batch-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 24px;
    border-right: 1px solid var(--border);
}

.batch-bar-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.batch-bar-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
    line-height: 1;
}

.batch-bar-close:hover {
    background: var(--surface-inert);
    color: var(--text);
}

.batch-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-bar-btn {
    background: var(--surface-inert);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.batch-bar-btn:hover {
    background: var(--track);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.batch-bar-btn i {
    font-size: 14px;
}

.batch-bar-btn-danger {
    background: var(--danger-soft);
    border-color: var(--danger-border-soft);
    color: var(--danger-ink);
}

/* Survol : même fond (--danger-ink tombe à 3,81:1 sur #fecaca), la bordure et le soulèvement suffisent */
.batch-bar-btn-danger:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
}

/* Responsive */
@media (max-width: 768px) {
    .batch-bar {
        left: 12px;
        right: 12px;
        transform: none;
        flex-direction: column;
        gap: 12px;
    }

    .batch-bar-content {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .batch-bar-left {
        width: 100%;
        padding-right: 0;
        padding-bottom: 12px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        justify-content: space-between;
    }

    .batch-bar-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .batch-bar-btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
}

/* === Colonne Coordonnées === */
.dash-td-coords {
    padding: 8px 6px !important;
    min-width: 80px;
}

.dash-td-coords i {
    cursor: help;
    transition: transform 0.1s ease;
}

.dash-td-coords i:hover {
    transform: scale(1.2);
}

/* ============================================================
   KIT VOYAGER · composants du design system (préfixe v-)
   Référence : docs/design-system/ (README + ui_kits)
   ============================================================ */

/* Étiquette de section en capitales */
.v-cap {
    font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label);
    color: var(--text-muted); font-weight: 600; margin: 0 0 10px;
}

/* Onglets (role=tablist, soulignement gemme) */
.v-tabs {
    display: flex; gap: 2px; border-bottom: var(--bw-control) solid var(--border);
    overflow-x: auto; scrollbar-width: none;
}
.v-tabs::-webkit-scrollbar { display: none; }
.v-tab {
    padding: 10px 14px; font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-btn);
    color: var(--text-nav); border: none; background: none; cursor: pointer;
    position: relative; white-space: nowrap; flex-shrink: 0; min-height: var(--tap-min);
}
.v-tab .ct {
    margin-left: 5px; font-size: 11.5px; background: var(--surface-inert); color: var(--text-inert);
    border-radius: var(--r-pill); padding: 1.5px 7px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.v-tab:hover { color: var(--ink); }
.v-tab:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.v-tab.on { color: var(--ink); font-weight: 600; }
.v-tab.on::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: calc(-1 * var(--bw-control));
    height: var(--bw-underline); border-radius: 2px; background: var(--gem-line);
    animation: voyager-toast-in var(--dur-move) var(--ease);
}
.v-tab.on .ct { background: var(--violet-soft); color: var(--violet-dark); }
.v-tab.warn .ct { background: var(--danger-soft); color: var(--danger-ink); }
/* Pastille « dû » à côté de l'effectif (relances échues, réponses à traiter, réveils) */
.v-tab .ct.due { margin-left: 3px; background: var(--warning-soft); color: var(--warning-ink); }
/* Profil simple (lot 0, § 4.2) : réponses à traiter en rouge, comme la pastille de Réponses */
.v-tab .ct.due.rouge { background: var(--badge-rouge); color: var(--sur-aplat); }
.v-tabpanel[hidden] { display: none; }

/* Tuiles KPI */
.v-kpis { display: grid; gap: var(--gap-grid); }
.v-kpi {
    background: var(--card); border: var(--bw-hairline) solid var(--border);
    border-radius: var(--r-xl); padding: 11px 13px;
}
.v-kpi .v-kpi-n {
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-kpi-sm);
    font-variant-numeric: tabular-nums; letter-spacing: var(--ls-display);
}
.v-kpi .v-kpi-n small { font-size: var(--fs-meta); color: var(--text-muted); font-weight: 500; }
.v-kpi .v-kpi-t { font-size: 11.5px; color: var(--text-muted); }
.v-kpi.act { border-color: var(--danger-border); background: var(--danger-wash); cursor: pointer; }
.v-kpi.act .v-kpi-t { color: var(--danger-ink); font-weight: 600; }
.v-kpi.talk { border-color: var(--teal-border); background: var(--teal-wash); }
.v-kpi.clickable { cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.v-kpi.clickable:hover { border-color: var(--border-hover); }

/* Tuile « décision du jour » */
.v-today {
    display: flex; align-items: center; gap: 12px;
    background: var(--card); border: var(--bw-hairline) solid var(--border);
    border-radius: var(--r-xl); padding: 13px 16px; cursor: pointer;
    text-decoration: none; color: var(--text);
    transition: border-color var(--dur-fast) var(--ease);
}
.v-today:hover { border-color: var(--border-hover); text-decoration: none; }
.v-today .n { font-family: var(--font-display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }
.v-today .t { font-size: var(--fs-sec-sm); color: var(--text-muted); line-height: 1.3; }
.v-today .t b { display: block; color: var(--ink); font-size: var(--fs-sec); }
.v-today .go { margin-left: auto; color: var(--chevron); }
.v-today.hot { border-color: var(--danger-border); background: var(--danger-wash); }
.v-today.hot .n { color: var(--danger-ink); }

/* Anneau de score (conic), teinte par bande via --c, remplissage via --p */
.v-ring {
    position: relative; display: inline-grid; place-items: center;
    width: 33px; height: 33px; border-radius: 50%;
    font-family: var(--font-display); font-weight: 700; font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.v-ring::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--c, var(--violet)) calc(var(--p, 0) * 1%), var(--track) 0);
}
.v-ring::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--card); }
.v-ring > * { position: relative; z-index: 1; }
.v-ring.gem::before {
    background: conic-gradient(var(--gem-stop-1), var(--gem-stop-2) calc(var(--p, 0) * .6%), var(--gem-stop-3) calc(var(--p, 0) * 1%), var(--track) 0);
}
.v-ring.lg { width: 56px; height: 56px; font-size: 15px; }
.v-ring.lg::after { inset: 5px; }
.v-ring.sm { width: 30px; height: 30px; font-size: 9px; }
.v-ring .cap { position: absolute; z-index: 1; bottom: 4px; font-size: 8px; color: var(--text-muted); font-weight: 500; }
.v-ring.lg .cap { bottom: 9px; }

/* Pastilles de statut pipeline (une classe = une couleur) */
.v-st {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--r-pill);
    font-size: var(--fs-meta); font-weight: 600; white-space: nowrap;
}
.v-st .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.v-st-new { background: var(--info-soft); color: var(--info-ink); }
.v-st-qual { background: var(--violet-soft); color: var(--violet-dark); }
.v-st-cont { background: var(--warning-soft); color: var(--warning-ink); }
.v-st-conv { background: var(--success-soft); color: var(--success-ink); }
.v-st-pause { background: var(--surface-inert); color: var(--text-inert); }
.v-st-err { background: var(--danger-soft); color: var(--danger-ink); }
.v-st-src { background: var(--teal-soft); color: var(--teal-dark); }

/* Tag d'origine (AUTOMATIQUE / MANUEL / neutre) */
.v-origin {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
    border-radius: var(--r-sm); font-size: var(--fs-tag); font-weight: 700;
    letter-spacing: var(--ls-tag); text-transform: uppercase;
}
.v-origin-auto { background: var(--teal-soft); color: var(--teal-dark); }
.v-origin-human { background: var(--violet-soft); color: var(--violet-dark); }
.v-origin-neutral { background: var(--surface-inert); color: var(--text-inert); }

/* Toggle (kill-switch, sarcelle armé, role=switch) */
.v-tg { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; font-size: var(--fs-sec); }
.v-tg input { position: absolute; opacity: 0; }
.v-tg .tg-track { position: relative; width: 40px; height: 23px; border-radius: var(--r-pill); background: var(--track-2); transition: background var(--dur-toggle) var(--ease); flex-shrink: 0; }
.v-tg .tg-track::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--card); transition: transform var(--dur-toggle) var(--ease); box-shadow: var(--shadow-knob);
}
.v-tg input:checked + .tg-track { background: var(--teal); }
.v-tg input:checked + .tg-track::after { transform: translateX(17px); }
.v-tg input:focus-visible + .tg-track { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Flash contextuel (rendu DANS la section modifiée) */
.v-flash {
    display: flex; align-items: center; gap: 9px; padding: 10px 14px;
    border-radius: var(--r-lg); background: var(--success-soft); color: var(--success-ink);
    font-weight: 500; font-size: var(--fs-sec); border: var(--bw-hairline) solid var(--success-border);
    margin-bottom: 10px; animation: voyager-toast-in var(--dur-move) var(--ease);
}
.v-flash small { color: var(--success-ink); font-weight: 400; }
/* Variantes : refus (is-err) et lead mis de côté qui attend un geste (is-warn, D-102). */
.v-flash.is-err { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-border); }
.v-flash.is-warn { background: var(--warning-soft); color: var(--warning-ink); border-color: var(--warning); }
/* Détail à la couleur du message, sans opacité : contraste AA (tests/test_contrastes_aa.php). */
.v-flash.is-err small, .v-flash.is-warn small { color: inherit; }

/* Indicateur d'autosave */
.v-save {
    display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sec-sm);
    color: var(--text-muted); background: var(--card); border: var(--bw-hairline) solid var(--border);
    padding: 6px 12px; border-radius: var(--r-pill);
}
.v-save .p { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.v-save.busy .p { background: var(--warning); animation: voyager-pulse 1s infinite; }
.v-save.err .p { background: var(--danger); }

/* Mur de logs (fond Nuit) */
.v-logwall {
    background: var(--night); border-radius: var(--r-2xl); padding: 14px 16px;
    color: var(--night-text);
}
.v-logwall .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.v-logwall .hd b { color: var(--night-title); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sec); letter-spacing: .02em; }
.v-logwall .hd .meta { font-size: var(--fs-label); color: var(--night-dim); }
.v-logwall .live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.v-logwall pre {
    font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono);
    white-space: pre-wrap; word-break: break-word; margin: 0;
    max-height: 300px; overflow-y: auto;
}

/* Carte-ligne mobile (remplace une ligne de table) */
.v-rowcard {
    background: var(--card); border: var(--bw-hairline) solid var(--border);
    border-radius: var(--r-2xl); padding: 12px 14px;
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
}
.v-rowcard .nm { font-weight: 600; font-size: var(--fs-body-strong); grid-column: 1; grid-row: 1; }
.v-rowcard .sub { color: var(--text-muted); font-size: var(--fs-meta); grid-column: 1; grid-row: 2; }
.v-rowcard .v-ring { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 36px; height: 36px; }
.v-rowcard .foot { display: flex; gap: 7px; align-items: center; margin-top: 8px; grid-column: 1 / -1; flex-wrap: wrap; }
.v-rowcard .go { margin-left: auto; color: var(--violet-dark); font-weight: 600; font-size: var(--fs-sec-sm); text-decoration: none; min-height: var(--tap-min); display: inline-flex; align-items: center; }
.v-rowcard.selected { border-color: var(--violet); background: var(--violet-soft); }
.v-stack { display: flex; flex-direction: column; gap: var(--gap-stack); }

/* Chips (filtres, avis) */
.v-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
    border-radius: var(--r-pill); border: var(--bw-control) solid var(--border); background: var(--card);
    font-size: var(--fs-sec); font-weight: 500; cursor: pointer; color: var(--text-inert);
    font-family: inherit; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.v-chip:hover { border-color: var(--border-hover); }
.v-chip:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.v-chip.on { border-color: var(--violet); background: var(--violet-soft); color: var(--violet-dark); font-weight: 600; }
/* Compteur d'une chip : couleur de la chip, sans opacité (D-175 : .75 le faisait tomber à 3,1:1) ;
   il se distingue du libellé par sa taille et sa graisse. */
.v-chip .ct { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.v-chip.touch { min-height: var(--tap-min); }

/* Contrôle segmenté */
.v-seg { display: inline-flex; background: var(--surface-inert); border-radius: 11px; padding: 3px; }
.v-seg button {
    border: none; background: none; padding: 6px 14px; border-radius: var(--r-md);
    font-family: var(--font-ui); font-size: var(--fs-sec); font-weight: 600;
    color: var(--text-inert); cursor: pointer;
}
.v-seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-raise); }
.v-seg button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* État vide (constat + action suggérée) */
.v-empty {
    background: var(--card); border: var(--bw-hairline) solid var(--border); border-radius: var(--r-2xl);
    padding: 28px 24px; text-align: center;
}
.v-empty h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: 6px; }
.v-empty p { color: var(--text-muted); font-size: var(--fs-sec); max-width: 46ch; margin: 0 auto 16px; }
.v-empty .acts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

/* État d'erreur (cause brute + action corrective) */
.v-error {
    background: var(--card); border: var(--bw-hairline) solid var(--danger-border); border-radius: var(--r-2xl);
    padding: 16px 18px;
}
.v-error .hd { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--danger-ink); margin-bottom: 6px; }
.v-error .at { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-muted); font-weight: 400; }
.v-error .cause {
    font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-quote);
    background: var(--surface-sunk); border-radius: var(--r-md); padding: 8px 11px; margin-bottom: 12px;
    word-break: break-word;
}
.v-error .acts { display: flex; gap: 9px; flex-wrap: wrap; }

/* Carte de contenu générique */
.v-panel {
    background: var(--card); border: var(--bw-hairline) solid var(--border);
    border-radius: var(--r-2xl); box-shadow: var(--shadow-card); padding: var(--pad-card-lg);
}
.v-panel > h2:first-child, .v-panel .panel-hd h2 {
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3);
    letter-spacing: var(--ls-display); margin: 0;
}
.v-panel .panel-hd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.v-panel .panel-hd .meta {
    font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label);
    color: var(--text-muted); font-weight: 600;
}

/* ── Répondre depuis l'interface (lot G, 22/09/2026) ─────────────────────────── */
/* Destinataire d'une réponse (contact de la fiche ou auteur du message, constat 2 du 23/09/2026) */
.v-reply-to select { max-width: 100%; font: inherit; padding: 2px 4px; border: 1px solid var(--border); border-radius: 6px; }
.v-reply-msg { font-size: 12.5px; margin-top: 6px; min-height: 1em; }

/* ── Fil de la fiche (Q-069, 23/09/2026) ──────────────────────────────────────
   Composant lib/conversation_vue.php, comportements www/assets/fil.js : fiche
   (colonne centrale) et écran Réponses (fil ouvert sous une carte). Un message
   par ligne, le plus récent en haut ; le bruit (absences, répondeurs) en gris ;
   un échec d'envoi ou un bounce en rouge sur le message. */
.fil { min-width: 0; }
.fil-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 14px 18px 12px; border-bottom: var(--bw-hairline) solid var(--border-row); }
.fil-hd h2 { font-family: var(--font-display); font-size: var(--fs-section); font-weight: 600; margin: 0; }
.fil-hd .meta { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted); font-weight: 600; }
.fil-sp { flex: 1; }
.fil-box { font-size: var(--fs-meta); color: var(--text-muted); background: var(--surface-sunk); border: var(--bw-hairline) solid var(--border); border-radius: var(--r-md); padding: 4px 8px; max-width: 100%; overflow-wrap: anywhere; }
.fil-mono { font-family: var(--font-mono); font-size: var(--fs-mono); overflow-wrap: anywhere; }
.fil-muted { color: var(--text-muted); }
.fil-late, .fil-rouge { color: var(--danger-ink); }
.fil-alerte { color: var(--warning-ink); }
.fil-note { margin: 0; font-size: var(--fs-sec); color: var(--text-muted); }

/* Tête : prochaine étape ou zone de réponse */
.fil-tete { display: grid; gap: 10px; padding: 14px 18px; border-bottom: var(--bw-hairline) solid var(--border-row); background: var(--card); min-width: 0; }
.fil-tete-label { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.fil-tete-label b { color: var(--violet-dark); }
.fil-seq-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-meta); color: var(--text-muted); }
.fil-seq-meta b { color: var(--text); font-weight: 600; }
.fil-seq-meta .fil-late b { color: var(--danger-ink); }
.fil-step { min-width: 0; }
.fil-fige { display: grid; gap: 6px; padding: 10px 12px; margin-bottom: 8px; border: var(--bw-hairline) solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunk); min-width: 0; }
.fil-fige .fil-addr b { color: var(--text); font-weight: 600; }
.fil-brouillon { margin-bottom: 8px; min-width: 0; }
.fil-brouillon > summary { cursor: pointer; font-size: var(--fs-sec); font-weight: 600; color: var(--text-muted); }
.fil-brouillon[open] > summary { margin-bottom: 8px; }
.fil-repondre { background: var(--card); }
.fil-echec { font-size: var(--fs-meta); color: var(--danger-ink); }
.fil-composer { border: var(--bw-hairline) solid var(--border); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.fil-composer-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; border-bottom: var(--bw-hairline) solid var(--border-row); font-size: var(--fs-sec-sm); color: var(--text-muted); }
.fil-composer-meta b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.fil-composer .fil-composer-objet { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: var(--bw-hairline) solid var(--border-row); border-radius: 0; padding: 8px 12px; font: inherit; font-size: var(--fs-sec); font-weight: 600; color: var(--text); background: transparent; }
.fil-composer .fil-composer-texte { display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 0; resize: vertical; min-height: 110px; padding: 10px 12px; font: inherit; font-size: var(--fs-body); line-height: var(--lh-prose); color: var(--text); background: transparent; }
.fil-composer .fil-composer-objet:focus, .fil-composer .fil-composer-texte:focus { outline: none; box-shadow: inset 0 0 0 2px var(--violet-soft); }
.fil-composer-pied { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface-sunk); border-top: var(--bw-hairline) solid var(--border-row); font-size: var(--fs-meta); color: var(--text-muted); }
.fil-composer-msg { padding: 0 12px; }
.fil-composer-msg:empty { display: none; }

/* Le fil */
.fil-thread { list-style: none; margin: 0; padding: 4px 0; }
.fil-msg { border-bottom: var(--bw-hairline) solid var(--border-row); }
.fil-msg:last-child { border-bottom: 0; }
.fil-row { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 18px; background: transparent; border: 0; border-radius: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.fil-row:hover { background: var(--surface-sunk); }
.fil-row:focus-visible, .fil-quote-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.fil-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sec-sm); color: var(--on-accent); flex-shrink: 0; }
.fil-av.us { background: linear-gradient(135deg, var(--violet-dark), var(--teal-dark)); } /* initiales blanches ≥ 5,78:1 (D-084) */
.fil-av.them { background: var(--teal-dark); }
.fil-av.bot { background: var(--surface-inert); color: var(--text-muted); }
.fil-line { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.fil-name { font-weight: 600; font-size: var(--fs-sec); }
.fil-snip { color: var(--text-muted); font-size: var(--fs-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 160px; min-width: 0; }
.fil-msg.is-open .fil-snip { display: none; }
.fil-date { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-muted); white-space: nowrap; }
.fil-tag { font-size: var(--fs-tag); font-weight: 600; letter-spacing: .03em; line-height: 1; padding: 4px 7px; border-radius: var(--r-sm); white-space: nowrap; }
.fil-tag.seq { background: var(--violet-soft); color: var(--violet-dark); }
.fil-tag.sent { background: var(--teal-soft); color: var(--teal-dark); }
.fil-tag.ext { background: var(--info-soft); color: var(--info-ink); }
.fil-tag.todo { background: var(--warning-soft); color: var(--warning-ink); }
.fil-tag.done { background: var(--success-soft); color: var(--success-ink); }
.fil-tag.fail { background: var(--danger-soft); color: var(--danger-ink); }
.fil-tag.noise, .fil-tag.type, .fil-tag.classee { background: var(--surface-inert); color: var(--text-inert); }
.fil-msg.fil-bruit .fil-name, .fil-msg.fil-bruit .fil-snip { color: var(--text-muted); font-weight: 500; }
.fil-msg.fil-ko { box-shadow: inset 3px 0 0 var(--danger); }
.fil-body { padding: 0 18px 14px 60px; display: grid; gap: 9px; min-width: 0; }
.fil-body[hidden] { display: none; }
.fil-addr { font-size: var(--fs-meta); color: var(--text-muted); overflow-wrap: anywhere; }
.fil-contenu { display: grid; gap: 8px; min-width: 0; }
.fil-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-body); line-height: 1.6; max-width: 68ch; }
.fil-quote-toggle { justify-self: start; border: var(--bw-hairline) solid var(--border); background: var(--surface-sunk); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .1em; line-height: 1; color: var(--text-muted); padding: 4px 9px; cursor: pointer; }
.fil-quote-toggle:hover { border-color: var(--border-hover); }
.fil-quote { border-left: 3px solid var(--border-hover); padding: 2px 0 2px 12px; color: var(--text-quote); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sec); max-width: 68ch; }
.fil-quote[hidden] { display: none; }
.fil-deliv { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-meta); color: var(--success-ink); }
.fil-msg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fil-evt { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 18px; font-size: var(--fs-sec-sm); color: var(--text-muted); }
.fil-evt-alerte .fil-evt-txt { color: var(--danger-ink); font-weight: 600; }
.fil-msg.is-new { animation: fil-arrive 1.2s ease-out; }
@keyframes fil-arrive { from { background: var(--teal-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .fil-msg.is-new { animation: none; } }
.fil-vide { padding: 14px 18px; margin: 0; color: var(--text-muted); font-size: var(--fs-sec); list-style: none; }

/* Étapes non envoyées, repliées en bas */
.fil-plis { display: grid; gap: 8px; padding: 6px 18px 14px; }
.fil-pli { border: var(--bw-hairline) dashed var(--border-hover); border-radius: var(--r-lg); padding: 9px 13px; font-size: var(--fs-sec); color: var(--text-muted); min-width: 0; }
.fil-pli > summary { cursor: pointer; font-weight: 600; }
.fil-pli[open] > summary { margin-bottom: 10px; }
.fil-pli-note { margin: 0; }
.fil-lien { margin: 0; padding: 10px 18px 14px; font-size: var(--fs-sec); border-top: var(--bw-hairline) solid var(--border-row); }

@media (max-width: 560px) {
    .fil-hd, .fil-tete { padding-inline: 14px; }
    .fil-row { grid-template-columns: 30px minmax(0, 1fr); padding: 10px 14px; }
    .fil-row .fil-date { grid-column: 2; }
    .fil-av { width: 30px; height: 30px; }
    .fil-body { padding: 0 14px 14px; }
    .fil-evt { grid-template-columns: 30px minmax(0, 1fr); padding-inline: 14px; }
    .fil-evt .fil-date { grid-column: 2; }
    .fil-plis { padding-inline: 14px; }
    .fil-lien { padding-inline: 14px; }
}

/* ============================================================
   PROFIL SIMPLE · densité et thème sombre (brief global § 9.3, § 9.4, 24/09/2026)
   La coquille (barres, panneaux) et les motifs communs vs-* vivent dans
   assets/pages/coquille.css, chargé par render_header() ; ici seulement ce qui
   touche aux jetons, pour que toute page les lise.
   ============================================================ */

/* Densité confortable (§ 14 n° 15) : classe posée sur <body> par render_header() quand
   ui_simple(). Le profil complet garde sa densité de pilote. */
body.ui-simple {
    --fs-body:15px; --fs-body-strong:15px; --fs-btn:14px; --fs-sec:14px; --fs-meta:13px;
    --control-h:40px; --control-h-sm:32px;
    --pad-card:20px; --pad-card-lg:20px 24px;
    --lh-ui:1.6;
    font-size:15px;
}
@media (max-width: 768px) {
    body.ui-simple { --control-h:44px; --pad-card:16px; --pad-card-lg:16px; font-size:16px; }
}
/* Champs d'écriture du fil (lib/conversation_vue.php) au repos : bordure de contrôle (3:1, WCAG
   1.4.11) au lieu de la bordure décorative --border ; focus violet comme .vs-input. Profil simple
   seulement : les champs du profil complet gardent leur bordure. L'avertissement garde la sienne. */
body.ui-simple .p-input, body.ui-simple .p-textarea { border-color: var(--border-control); }
body.ui-simple .p-input:focus, body.ui-simple .p-textarea:focus { border-color: var(--violet); }
body.ui-simple .p-textarea-warning { border-color: var(--danger); }
body.ui-simple .p-textarea-warning:focus { border-color: var(--danger-ink); }

/* Thème sombre du profil simple (lot 4 du brief, § 9.3 ; lib/theme.php ; docs/ux-simple/theme-sombre.md).
   render_header() pose data-sombre-pret sur <html> en profil simple et sur une page prête
   (THEME_PAGES_SOMBRES), puis data-theme="light"|"dark" d'après le choix du compte (users.theme) ;
   le profil complet n'a jamais l'attribut. DEUX BLOCS IDENTIQUES (« Automatique » : préférence du
   système ; « Sombre » : choix du compte), tenus identiques par tests/test_contrastes_aa.php, qui
   mesure aussi chaque couple en sombre. `screen` : une impression sort toujours en clair.
   Règles : en sombre --on-accent est une encre FONCÉE (les aplats --*-dark, --*-ink, --accent-fill
   deviennent clairs) : texte sur un toast = --on-toast, texte blanc sur un aplat rouge = --sur-aplat ;
   un survol de bouton plein éclaircit ; tout nouveau jeton de couleur a sa valeur ici, ou entre
   dans les invariants nommés du test. */
@media screen and (prefers-color-scheme: dark) {
    :root[data-sombre-pret]:not([data-theme="light"]) {
        /* Surfaces */
        --bg:#13112a; --card:#1c1a37; --surface-sunk:#171530; --surface-inert:#25224a; --surface-head:#171530;
        --track:#2e2a58; --track-2:#3a3668; --skeleton:#25224a; --skeleton-hi:#2e2a58;
        --border:#312d5a; --border-row:#2a2750; --border-hover:#4a4578; --border-control:#7d77a3;
        --hover-nav:#221f42; --violet-hover-soft:#3a2f68;
        /* Texte */
        --text:#eceaf8; --ink:#eceaf8; --text-muted:#a9a4c8; --text-nav:#a9a4c8; --text-inert:#a9a4c8; --text-quote:#cfcbe6;
        --text-muted-on-soft:#b3aed2; --text-faint:#8a84ad; --trait-discret:#8a84ad; --icon-off:#3a3668; --chevron:#5d588c;
        /* Marque */
        --violet:#b18ae0; --violet-dark:#c9aaf0; --violet-ink:#c9aaf0; --violet-soft:#2d2553; --violet-mid:#d7c6ee;
        --accent-fill:#b18ae0; --on-accent:#15122c;
        --teal:#4cc0b3; --teal-dark:#72d6ca; --teal-ink:#72d6ca; --teal-soft:#15393a; --teal-border:#25524f; --teal-wash:#142a2d;
        --nuit:#0c0a1e;
        /* Sémantique */
        --success:#3fbf7c; --success-ink:#63d39c; --success-soft:#123325; --success-border:#245a41; --success-muted:#63d39c; --success-fill-hover:#7ddcae;
        --danger:#f0666b; --danger-ink:#ff9a9d; --danger-soft:#3c1a26; --danger-border:#6a2c38; --danger-border-soft:#5a2a36;
        --danger-wash:#221629; --danger-wash-hover:#2a1a30; --badge-rouge:#d23f45; --danger-fill:#c93a40; --danger-fill-hover:#b3343a;
        --warning:#f0a53a; --warning-ink:#f5bc6b; --warning-soft:#3e3037; --warning-mark:#f0a53a; --warning-border:#574138; /* ambre posé sur la nuit (16 % et 28 % sur --card), plus le marron #3a2912 */
        --warning-fill:#f5bc6b; --warning-fill-hover:#f8cb8a;
        --info:#7b9cff; --info-ink:#a3b6ff; --info-soft:#1d2552; --info-border:#2c3a78; --info-fill-hover:#bcc9ff;
        --ink-fill-hover:#ffffff;
        /* Statistiques et scores : la rampe ordinale s'inverse (l'étape la plus avancée est la plus lumineuse) */
        --st-etape-0:#735ca3; --st-reponse:#4cc0b3; --st-bruit-1:#3a3668; --st-bruit-2:#4d4880; --st-bruit-3:#625c98; --st-bruit-4:#7d77a3;
        --st-grille:#2a2750; --st-axe:#4a4578; --plage-reponse:rgba(76,192,179,.28);
        --score-high:#3fbf7c; --score-mid:#f0a53a; --score-low:#7d77a3; --score-outbound:#4cc0b3;
        --st-encre-0:#f4f3fb; --st-encre-1:#15122c; --st-encre-2:#15122c; --st-encre-bruit-3:#f4f3fb; --st-encre-bruit-2:#f4f3fb;
        --st-encre-danger:#15122c; --st-encre-reponse:#15122c;
        /* Toast, voiles, ombres */
        --toast:#2c2856; --toast-bg:#2c2856; --toast-bord:#4a4578; --on-toast:#f4f3fb; --bord-flottant:#4a4578;
        --voile-fenetre:#000000; --scrim:rgba(0,0,0,.60); --voile-panneau:rgba(0,0,0,.45);
        --shadow-card:0 1px 2px rgba(0,0,0,.40); --shadow-raise:0 1px 3px rgba(0,0,0,.45); --shadow-hover:0 4px 16px rgba(0,0,0,.45);
        --shadow-menu:0 12px 32px rgba(0,0,0,.50); --shadow-toast:0 8px 28px rgba(0,0,0,.55); --shadow-modal:0 20px 60px rgba(0,0,0,.55);
        --shadow-bbar:0 -6px 24px rgba(0,0,0,.40); --shadow-feuille:0 -12px 32px rgba(0,0,0,.50); --shadow-rond:0 2px 8px rgba(0,0,0,.50);
        --shadow-carte-seule:0 1px 2px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.40);
        --focus-ring:0 0 0 3px rgba(177,138,224,.30); --anneau-focus:0 0 0 3px rgba(177,138,224,.30); --anneau-erreur:0 0 0 3px rgba(255,154,157,.30);
        --on-accent-voile:rgba(21,18,44,.35);
        color-scheme: dark;
    }
}
@media screen {
    :root[data-sombre-pret][data-theme="dark"] {
        /* Surfaces */
        --bg:#13112a; --card:#1c1a37; --surface-sunk:#171530; --surface-inert:#25224a; --surface-head:#171530;
        --track:#2e2a58; --track-2:#3a3668; --skeleton:#25224a; --skeleton-hi:#2e2a58;
        --border:#312d5a; --border-row:#2a2750; --border-hover:#4a4578; --border-control:#7d77a3;
        --hover-nav:#221f42; --violet-hover-soft:#3a2f68;
        /* Texte */
        --text:#eceaf8; --ink:#eceaf8; --text-muted:#a9a4c8; --text-nav:#a9a4c8; --text-inert:#a9a4c8; --text-quote:#cfcbe6;
        --text-muted-on-soft:#b3aed2; --text-faint:#8a84ad; --trait-discret:#8a84ad; --icon-off:#3a3668; --chevron:#5d588c;
        /* Marque */
        --violet:#b18ae0; --violet-dark:#c9aaf0; --violet-ink:#c9aaf0; --violet-soft:#2d2553; --violet-mid:#d7c6ee;
        --accent-fill:#b18ae0; --on-accent:#15122c;
        --teal:#4cc0b3; --teal-dark:#72d6ca; --teal-ink:#72d6ca; --teal-soft:#15393a; --teal-border:#25524f; --teal-wash:#142a2d;
        --nuit:#0c0a1e;
        /* Sémantique */
        --success:#3fbf7c; --success-ink:#63d39c; --success-soft:#123325; --success-border:#245a41; --success-muted:#63d39c; --success-fill-hover:#7ddcae;
        --danger:#f0666b; --danger-ink:#ff9a9d; --danger-soft:#3c1a26; --danger-border:#6a2c38; --danger-border-soft:#5a2a36;
        --danger-wash:#221629; --danger-wash-hover:#2a1a30; --badge-rouge:#d23f45; --danger-fill:#c93a40; --danger-fill-hover:#b3343a;
        --warning:#f0a53a; --warning-ink:#f5bc6b; --warning-soft:#3e3037; --warning-mark:#f0a53a; --warning-border:#574138; /* ambre posé sur la nuit (16 % et 28 % sur --card), plus le marron #3a2912 */
        --warning-fill:#f5bc6b; --warning-fill-hover:#f8cb8a;
        --info:#7b9cff; --info-ink:#a3b6ff; --info-soft:#1d2552; --info-border:#2c3a78; --info-fill-hover:#bcc9ff;
        --ink-fill-hover:#ffffff;
        /* Statistiques et scores : la rampe ordinale s'inverse (l'étape la plus avancée est la plus lumineuse) */
        --st-etape-0:#735ca3; --st-reponse:#4cc0b3; --st-bruit-1:#3a3668; --st-bruit-2:#4d4880; --st-bruit-3:#625c98; --st-bruit-4:#7d77a3;
        --st-grille:#2a2750; --st-axe:#4a4578; --plage-reponse:rgba(76,192,179,.28);
        --score-high:#3fbf7c; --score-mid:#f0a53a; --score-low:#7d77a3; --score-outbound:#4cc0b3;
        --st-encre-0:#f4f3fb; --st-encre-1:#15122c; --st-encre-2:#15122c; --st-encre-bruit-3:#f4f3fb; --st-encre-bruit-2:#f4f3fb;
        --st-encre-danger:#15122c; --st-encre-reponse:#15122c;
        /* Toast, voiles, ombres */
        --toast:#2c2856; --toast-bg:#2c2856; --toast-bord:#4a4578; --on-toast:#f4f3fb; --bord-flottant:#4a4578;
        --voile-fenetre:#000000; --scrim:rgba(0,0,0,.60); --voile-panneau:rgba(0,0,0,.45);
        --shadow-card:0 1px 2px rgba(0,0,0,.40); --shadow-raise:0 1px 3px rgba(0,0,0,.45); --shadow-hover:0 4px 16px rgba(0,0,0,.45);
        --shadow-menu:0 12px 32px rgba(0,0,0,.50); --shadow-toast:0 8px 28px rgba(0,0,0,.55); --shadow-modal:0 20px 60px rgba(0,0,0,.55);
        --shadow-bbar:0 -6px 24px rgba(0,0,0,.40); --shadow-feuille:0 -12px 32px rgba(0,0,0,.50); --shadow-rond:0 2px 8px rgba(0,0,0,.50);
        --shadow-carte-seule:0 1px 2px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.40);
        --focus-ring:0 0 0 3px rgba(177,138,224,.30); --anneau-focus:0 0 0 3px rgba(177,138,224,.30); --anneau-erreur:0 0 0 3px rgba(255,154,157,.30);
        --on-accent-voile:rgba(21,18,44,.35);
        color-scheme: dark;
    }
}