/* iOS Safari « text autosizing » : gonfle automatiquement le texte des blocs LARGES
           (ex. la colonne « Détail » d'un tableau de rapport), pas celui des colonnes
           étroites → tailles incohérentes vues uniquement sur mobile. On le désactive. */
        html, body {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }
        .message {
            white-space: normal;
        }
        .message h1, .message h2, .message h3, .message h4, .message h5, .message h6 {
            margin: 0.5em 0;
            font-weight: bold;
        }
        .message h1 { font-size: 1.5em; }
        .message h2 { font-size: 1.4em; }
        .message h3 { font-size: 1.3em; }
        .message h4 { font-size: 1.2em; }
        .message h5 { font-size: 1.1em; }
        .message h6 { font-size: 1em; }
        /* Variables de thème (et non couleurs en dur) : en thème sombre, les fonds
           clairs figés (#f0f0f0…) rendaient code/tableaux/citations illisibles. */
        .message code {
            background-color: var(--background-secondary);
            padding: 2px 4px;
            border-radius: 3px;
            font-family: monospace;
        }
        
        /* CSS Variables for theme support */
        :root {
            --primary-color: #6496FF;
            /* Défini ici (bleu foncé cohérent) : sinon il hérite du violet #5B38B3 de
               style_mistral.css → boutons bleus au repos qui viraient VIOLET au survol. */
            --primary-hover: #4d7fe6;
            /* --accent : jamais défini jusqu'ici → les ~14 usages var(--accent, #3b82f6)
               tombaient sur un 3e bleu parasite. On le mappe sur la primaire de marque. */
            --accent: var(--primary-color);
            --background-color: #ffffff;
            --background-secondary: #f8f9fa;
            --text-color: #333333;
            --text-secondary: #666666;
            --border-color: #dddddd;
            --success-color: var(--success);
            --error-color: var(--danger);
            /* La sidebar est toujours sombre → texte clair, indépendamment du thème.
               Variable utilisée partout (titres de conv, dates, boutons) mais qui n'était
               jamais définie : le texte héritait de --text-color (sombre) = invisible. */
            --sidebar-text: #e2e8f0;
            --sidebar-hover: rgba(255,255,255,0.06);
            /* Alias : variables utilisées dans le code mais jamais définies jusqu'ici —
               les messages d'erreur s'affichaient dans la couleur de texte par défaut. */
            --danger-color: var(--error-color);
            --hover-bg: rgba(0,0,0,0.05);
            --bg-secondary: var(--background-secondary);
            /* ── Tokens sémantiques (source unique de vérité) ──
               --primary-rgb : composantes de --primary-color pour les teintes rgba(var(--primary-rgb), α).
               Utilisé ~54× mais JAMAIS défini → beaucoup de teintes rendaient transparent : corrigé ici. */
            --primary-rgb: 100, 150, 255;
            --danger: #dc2626;            /* rouge action destructrice (Supprimer, etc.) */
            --danger-rgb: 220, 38, 38;    /* composantes de --danger pour rgba(var(--danger-rgb), α) */
            --danger-strong: #b91c1c;
            --danger-light: #f87171;      /* rouge clair : erreurs/statut (contraste sur fonds sombres/clairs) */
            --success: #10b981;           /* vert « fait » / validé */
            --warning: #f59e0b;           /* ambre alerte */
            --warning-text: #b45309;      /* ambre texte lisible sur fond clair */
            /* Échelle de rayons & d'ombres (pour les nouveaux composants). */
            --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-pill: 999px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
            --shadow-md: 0 2px 6px rgba(0,0,0,.15);
            --shadow-lg: 0 12px 34px rgba(0,0,0,.16);
            /* Échelle d'espacement (pas de 4px) & typographie nommée : fondation pour migrer
               progressivement les valeurs en dur (76 hex, ~30 tailles de police) vers un
               rythme régulier. Additif — n'impacte rien tant que non consommé. */
            --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
            --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px;
            --lh-tight: 1.2; --lh-base: 1.5;
        }

        /* Icônes SVG du registre icon() : alignées sur la ligne de texte, ne rétrécissent pas. */
        .icn { display: inline-block; vertical-align: -.14em; flex-shrink: 0; }

        /* ── Modales maison (confirmDialog / promptDialog / alertDialog) ── */
        .dlg-overlay {
            /* z-index AU-DESSUS de toutes les modales (portail 9500, classement 9500…) : une
               boîte confirm/prompt ouverte DEPUIS une modale s'affichait DERRIÈRE elle —
               l'utilisateur croyait que « rien ne se passe » (bug envoi d'inventaire). */
            position: fixed; inset: 0; z-index: 10500; display: flex; align-items: center;
            justify-content: center; padding: 20px; background: rgba(15, 23, 42, .55);
            opacity: 0; transition: opacity .15s ease;
        }
        .dlg-overlay.open { opacity: 1; }
        .dlg {
            width: 100%; max-width: 440px; padding: 22px 24px;
            background: var(--background-color); color: var(--text-color);
            border: 1px solid var(--border-color); border-radius: var(--r-lg);
            box-shadow: var(--shadow-lg);
            transform: translateY(8px) scale(.98); transition: transform .15s ease;
        }
        .dlg-overlay.open .dlg { transform: none; }
        .dlg-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
        .dlg-msg { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.5; margin-bottom: 18px; }
        .dlg-input {
            width: 100%; padding: 9px 12px; margin-bottom: 18px; font-size: var(--fs-base);
            font-family: inherit; color: var(--text-color); background: var(--background-secondary);
            border: 1px solid var(--border-color); border-radius: var(--r-md); outline: none;
        }
        .dlg-input:focus { border-color: var(--primary-color); }
        .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; }
        .dlg-btn {
            display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; cursor: pointer;
            font-size: var(--fs-sm); font-weight: 600; font-family: inherit;
            border: 1px solid transparent; border-radius: var(--r-md);
            transition: background .12s, border-color .12s, color .12s;
        }
        .dlg-btn-ghost { background: transparent; border-color: var(--border-color); color: var(--text-secondary); }
        .dlg-btn-ghost:hover { border-color: var(--text-secondary); color: var(--text-color); }
        .dlg-btn-primary { background: var(--primary-color); color: #fff; }
        .dlg-btn-primary:hover { background: var(--primary-hover); }
        .dlg-btn-danger { background: var(--danger); color: #fff; }
        .dlg-btn-danger:hover { background: var(--danger-strong); }
        @media (prefers-reduced-motion: reduce) { .dlg-overlay, .dlg { transition: none; } }

        /* Accessibilité clavier : anneau de focus visible (ne change rien à la souris,
           qui déclenche :focus mais pas :focus-visible). */
        :focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
            border-radius: 3px;
        }

        /* Zones tactiles : sur écran tactile (pointer: coarse), garantir une cible d'au moins
           40 px de haut sur les petits boutons d'action icône (téléchargement, œil, corbeille,
           renommer, barres d'outils). Additif et limité au tactile → aucun impact desktop. */
        @media (pointer: coarse) {
            .ccc-doc-line-actions button, .ccc-item-actions button,
            .ccc-doc-view, .ccc-doc-download, .ccc-doc-rename, .ccc-doc-toggle-dl,
            .ccc-tb-btn, .tr-btn, .rr-tb-btn, .rr-actions-btn {
                min-height: 40px;
            }
        }

        .dark-theme {
            --primary-color: #6496FF;
            --background-color: #1a1a1a;
            --background-secondary: #2a2a2a;
            --text-color: #f0f0f0;
            --text-secondary: #b0b0b0;
            --border-color: #444444;
            --success-color: var(--success);
            --error-color: var(--danger);
            --danger-color: var(--error-color);
            --hover-bg: rgba(255,255,255,0.08);
            --bg-secondary: var(--background-secondary);
            --primary-hover: #4d7fe6;
            /* Variables définies dans style_mistral.css et jamais surchargées ici → elles
               restaient CLAIRES en thème sombre (zone de chat et champs blancs, texte
               sombre sur sombre). On les bascule en valeurs sombres. */
            --chat-background: #1f1f1f;
            --message-bot-bg: #2a2a2a;
            --input-bg: #2a2a2a;
            --text-primary: #f0f0f0;
        }
        .message pre {
            background-color: var(--background-secondary);
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            margin: 10px 0;
            /* Passe à la ligne au lieu de déborder/couper le texte (surtout sur mobile). */
            white-space: pre-wrap;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .message pre code {
            background-color: transparent;
            padding: 0;
        }
        .message blockquote {
            border-left: 3px solid var(--border-color);
            padding-left: 10px;
            margin-left: 10px;
            color: var(--text-secondary);
            font-style: italic;
        }
        .message ul, .message ol {
            margin: 15px 0;
            padding-left: 20px;
        }
        .message li {
            margin: 10px 0;
            line-height: 1.6;
        }
        .message hr {
            border: none;
            border-top: 1px solid var(--border-color);
            margin: 15px 0;
        }
        .message table {
            border-collapse: collapse;
            width: 100%;
            margin: 10px 0;
        }
        .message th, .message td {
            border: 1px solid var(--border-color);
            padding: 8px;
            text-align: left;
        }
        .message th {
            background-color: var(--background-secondary);
        }
        .message a {
            color: var(--primary-color);
            text-decoration: underline;
        }
        /* Lien factice neutralisé (placeholder généré par le modèle) : non cliquable, discret. */
        .md-fake-link {
            color: var(--text-secondary);
            text-decoration: underline dotted;
            text-underline-offset: 2px;
            cursor: help;
        }

        /* Indicateur « réflexion » moderne (points animés) */
        .typing-indicator { display:flex !important; align-items:center; gap:10px; }
        .thinking { display:inline-flex; align-items:center; gap:10px; }
        .thinking-dots { display:inline-flex; gap:5px; }
        .thinking-dots i {
            width:7px; height:7px; border-radius:50%;
            background:var(--primary-color);
            animation:thinking-bounce 1.4s infinite ease-in-out both;
        }
        .thinking-dots i:nth-child(1){ animation-delay:-0.32s; }
        .thinking-dots i:nth-child(2){ animation-delay:-0.16s; }
        @keyframes thinking-bounce {
            0%,80%,100%{ transform:scale(0.55); opacity:0.3; }
            40%{ transform:scale(1); opacity:1; }
        }
        .thinking-label {
            font-size:13px; color:var(--text-secondary); font-weight:500;
            animation:thinking-fade 1.6s infinite ease-in-out;
        }
        @keyframes thinking-fade { 0%,100%{ opacity:0.5; } 50%{ opacity:1; } }

        /* Sidebar scroll fix */
        #conversations-list {
            max-height: clamp(200px, 35vh, 500px);
            overflow-y: auto;
            margin-bottom: 20px;
        }
        
        #folders-list {
            max-height: clamp(200px, 35vh, 500px);
            overflow-y: auto;
        }
        
        /* Ensure sidebar sections don't overflow */
        #folders-section {
            overflow: hidden;
            padding-bottom: 6px;
            border-bottom: 2px solid var(--primary-color);
            margin-bottom: 8px;
        }

        #conversations-list {
            padding-top: 4px;
        }
        
        /* Info icon styles */
        .info-icon {
            margin-left: 8px;
            cursor: pointer;
            color: var(--primary-color);
            font-size: 14px;
            opacity: 0.7;
            position: relative;
        }
        .info-icon:hover { opacity: 1; }
        .info-popover {
            display: none;
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            color: #f1f5f9 !important;
            font-size: 12px;
            line-height: 1.5;
            padding: 8px 12px;
            border-radius: 8px;
            width: 280px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.35);
            z-index: 500;
            white-space: normal;
            pointer-events: none;
        }
        .info-popover::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: #1e293b;
        }
        .info-icon.open .info-popover { display: block; }
        
        /* ── Bouton × suppression conversation ────── */
        .conv-title-wrap {
            flex: 1 1 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            min-width: 0;
            overflow: visible;
            min-height: 20px;
        }
        .conv-title {
            display: block;
            width: 100%;
            min-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgba(226,232,240,0.6);   /* atténué → titres plus discrets */
            font-size: 12px;
            font-weight: 600;   /* semi-gras (inspiré du nom du client .client-center-name) */
        }
        .conv-date {
            font-size: 10px;
            opacity: 0.5;
            color: var(--sidebar-text);
            margin-top: 1px;
        }
        /* Filtre Toutes / Pro / Perso — préfixé .sidebar pour battre .sidebar button */
        #conv-filter-bar { display:flex; gap:2px; margin:2px 0 3px; background:rgba(0,0,0,0.2); border-radius:7px; padding:2px; }
        .sidebar .conv-filter-btn {
            flex:1; font-size:10px; font-weight:600; font-family:inherit; letter-spacing:.02em;
            padding:2px 0; border-radius:5px; border:none; width:auto;
            background:none; color:rgba(226,232,240,0.35); cursor:pointer; transition:all .12s;
        }
        .sidebar .conv-filter-btn:hover { color:rgba(226,232,240,0.6); background:none; }
        .sidebar .conv-filter-btn.active { background:rgba(var(--primary-rgb),0.4); color:rgba(196,181,253,0.9); }

        .conv-personal-badge {
            display: inline-flex; align-items: center; gap: 3px;
            font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
            background: rgba(168,85,247,0.18); color: #c084fc;
            border-radius: 4px; padding: 1px 5px; margin-top: 2px; width: fit-content;
        }

        /* Boutons longueur réponse dans la barre de contexte */
        #length-btns {
            display: flex; align-items: center; gap: 2px; flex-shrink: 0;
            background: var(--background-secondary); border: 1px solid var(--border-color);
            border-radius: 7px; padding: 2px;
        }
        .length-btn {
            font-size: 11px; font-weight: 700; font-family: inherit; letter-spacing: .02em;
            width: 24px; height: 22px; border-radius: 5px; cursor: pointer;
            border: none; background: none; color: var(--text-secondary);
            transition: background .12s, color .12s; line-height: 1;
        }
        .length-btn:hover { color: var(--text-color); }
        .length-btn.active { background: var(--primary-color); color: #fff; }

        #conv-personal-btn {
            display: flex; align-items: center; justify-content: center;
            width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
            border: 1px solid var(--border-color); background: none;
            color: var(--text-secondary); transition: border-color .15s, color .15s, background .15s; flex-shrink: 0;
        }
        #conv-personal-btn:hover { border-color: var(--primary-color); color: var(--primary-color); background: none; }
        #conv-personal-btn.active { border-color: #9333ea; color: #9333ea; background: rgba(168,85,247,0.15); }

        /* Token counter */
        .token-counter {
            font-size: 11px;
            color: var(--text-color);
            opacity: 0.45;
            padding: 2px 8px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            white-space: nowrap;
            align-self: center;
            margin-bottom: 6px;
        }

        .token-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 10px;
            opacity: 0.35;
            color: var(--text-color);
            margin-top: 6px;
            padding: 2px 0;
            transition: opacity 0.15s;
        }

        .bot-message:hover .token-badge {
            opacity: 0.7;
        }

        .token-badge span {
            padding: 1px 5px;
            border-radius: 8px;
            background: var(--border-color);
        }

        .back-to-conversations {
            display: flex !important;
            align-items: center;
            gap: 6px;
            padding: 5px 10px !important;
            margin-bottom: 10px !important;
            font-size: 10px !important;
            font-weight: 600;
            letter-spacing: 0 !important;
            white-space: nowrap;
            color: var(--primary-color) !important;
            background: none !important;
            border: none !important;
            border-bottom: 1px solid var(--border-color) !important;
            border-radius: 0 !important;
            cursor: pointer;
            opacity: 0.85;
            text-transform: uppercase;
        }

        .back-to-conversations:hover {
            opacity: 1;
            background: none !important;
        }

        .sidebar li.conv-item { display:flex; align-items:center; gap:2px; width:100%; box-sizing:border-box; position:relative; padding-right:26px; }
        /* Boutons d'action positionnés en absolu à droite (indépendant du flex) */
        .sidebar li.conv-item .conv-fav-btn { position:absolute; right:6px; top:50%; transform:translateY(-50%); margin:0; }
        .sidebar li.conv-item .conv-delete-btn { position:absolute !important; right:30px; top:50%; transform:translateY(-50%); }
        .sidebar li.conv-item .conv-move-btn { position:absolute !important; right:56px; top:50%; transform:translateY(-50%); }
        .sidebar li.conv-item .conv-export-btn { position:absolute !important; right:82px; top:50%; transform:translateY(-50%); }
        .sidebar li.conv-fav-item { position:relative; }
        .sidebar li.conv-fav-item .conv-fav-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); margin:0; }
        .sidebar li .conv-fav-btn { background:none; border:none; cursor:pointer; padding:2px 3px; color:rgba(226,232,240,0.4); opacity:0; flex-shrink:0; display:inline-flex; width:auto; align-items:center; transition:color .12s; }
        .sidebar li:hover .conv-fav-btn { opacity:1; }
        .sidebar li .conv-fav-btn.is-fav { opacity:1; color:#fbbf24; }
        .sidebar li .conv-fav-btn:hover { color:#fbbf24; }
        /* Section favoris épinglée */
        .sidebar li.conv-fav-header { display:flex; align-items:center; gap:6px; pointer-events:none; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:10px 10px 4px; color:#fbbf24; }
        .sidebar li.conv-fav-item { display:flex; align-items:center; gap:8px; padding:7px 10px; margin:0 4px; border-radius:6px; cursor:pointer; border-left:2px solid rgba(251,191,36,.5); }
        .sidebar li.conv-fav-item:hover { background:rgba(255,255,255,0.06); }
        .sidebar li.conv-fav-item .conv-title-wrap { flex:1 1 100%; width:100%; min-width:0; }
        .sidebar li.conv-fav-item .conv-title { color:var(--sidebar-text); font-size:13px; }
        .sidebar li.conv-fav-item .conv-date { font-size:11px; opacity:.55; }
        .sidebar li.conv-fav-item .conv-fav-btn { opacity:1; color:#fbbf24; }
        .sidebar li.conv-fav-sep { pointer-events:none; height:0; padding:0; margin:8px 8px; border-bottom:1px solid rgba(226,232,240,0.12); }

        /* Boutons d'action d'une conversation (export ⬇, dossier 📁, supprimer ✕) : TAILLE UNIFORME,
           icônes centrées, fond de survol propre et de même gabarit — corrige l'alignement inégal
           et le « cadre » disgracieux autour du ✕. */
        .sidebar li .conv-delete-btn,
        .sidebar li .conv-move-btn,
        .sidebar li .conv-export-btn {
            background: none !important;
            border: none !important;
            color: var(--sidebar-text) !important;
            cursor: pointer;
            width: 22px !important;
            height: 22px !important;
            min-width: 22px;
            padding: 0 !important;
            margin: 0 !important;
            border-radius: 6px;
            font-size: 15px;
            line-height: 1;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            opacity: 0;
            transition: opacity 0.12s, color 0.12s, background-color 0.12s;
        }
        /* Icônes SVG (export/dossier) à la MÊME taille que le ✕ texte → alignement homogène. */
        .sidebar li .conv-delete-btn svg,
        .sidebar li .conv-move-btn svg,
        .sidebar li .conv-export-btn svg { width: 14px; height: 14px; display: block; }

        .sidebar li:hover .conv-delete-btn,
        .sidebar li:hover .conv-move-btn { opacity: 0.45; }
        .sidebar li:hover .conv-export-btn { opacity: 0.6; }

        .sidebar li .conv-delete-btn:hover {
            opacity: 1 !important;
            color: var(--danger) !important;
            background-color: rgba(229, 62, 62, 0.15) !important;
        }
        .sidebar li .conv-move-btn:hover {
            opacity: 1 !important;
            color: #7c5cbf !important;
            background-color: rgba(var(--primary-rgb), 0.15) !important;
        }
        .sidebar li .conv-export-btn:hover {
            opacity: 1 !important;
            color: #2e7d32 !important;
            background-color: rgba(46, 125, 50, 0.14) !important;
        }

        /* ── Puces fichiers attachés (multi) ──────── */
        #file-attachment {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
        }
        .file-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background-color: rgba(var(--primary-rgb), 0.08);
            border: 1px solid rgba(var(--primary-rgb), 0.25);
            border-radius: 20px;
            padding: 4px 8px 4px 10px;
            max-width: 260px;
        }
        .file-chip-name {
            font-size: 12px;
            color: var(--primary-color);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .file-chip-name::before { content: "📄 "; }
        .file-chip.has-img .file-chip-name::before { content: ""; }
        .file-chip-remove {
            background: none !important;
            border: none !important;
            color: var(--primary-color) !important;
            cursor: pointer;
            font-size: 15px;
            padding: 0 !important;
            width: 16px !important;
            height: 16px !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            opacity: 0.55;
            margin: 0 !important;
            flex-shrink: 0;
            line-height: 1;
        }
        .file-chip-remove:hover { opacity: 1 !important; }
        /* ── Layout Plaud ── */
        .rec-plaud-layout { display:flex; flex:1; min-height:0; overflow:hidden; }
        .rec-plaud-item.active { background:rgba(var(--primary-rgb),.13); }
        .rec-plaud-item.active .rec-plaud-item-btns { display:flex; }
        /* Tactile : pas de hover — les actions restent visibles (le padding-right:56px
           du titre leur réservait déjà la place). */
        @media (pointer: coarse) { .rec-plaud-item-btns { display:flex; } }
        .rec-plaud-detail { flex:1; overflow:hidden; padding:0; display:flex; flex-direction:column; }
        #rec-plaud-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--text-secondary); font-size:14px; }
        #rec-detail-ctx-bar { flex-shrink:0; padding:4px 14px; border-bottom:1px solid var(--border-color); background:var(--background-secondary); display:flex; align-items:center; justify-content:space-between; gap:8px; }
        #rec-personal-btn { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; cursor:pointer; border:1px solid var(--border-color); background:none; color:var(--text-secondary); transition:border-color .15s,color .15s,background .15s; flex-shrink:0; }
        #rec-personal-btn:hover { border-color:var(--primary-color); color:var(--primary-color); }
        #rec-personal-btn.active { border-color:#9333ea; color:#9333ea; background:rgba(168,85,247,0.15); }
        #rec-detail-body { flex:1; overflow-y:auto; padding:0; min-height:0; }
        #rec-start-chat-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 22px; border-radius:10px; background:var(--primary-color); color:#fff; border:none; cursor:pointer; font-size:14px; font-weight:600; font-family:inherit; transition:opacity .15s; }
        #rec-start-chat-btn:hover { opacity:.85; }
        #rec-length-btns-rec { display:flex; align-items:center; gap:2px; background:var(--background-color); border:1px solid var(--border-color); border-radius:7px; padding:2px; }
        .rec-plaud-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:12px; color:var(--text-secondary); font-size:14px; }
        .rec-plaud-summary { font-size:14px; line-height:1.75; color:var(--text-color); }
        .rec-plaud-summary h2 { font-size:17px; font-weight:700; margin:28px 0 10px; }
        .rec-plaud-summary ul { margin:6px 0 12px 20px; padding:0; }
        .rec-plaud-summary li { margin-bottom:6px; }
        .rec-plaud-generating { display:flex; align-items:center; gap:10px; color:var(--text-secondary); font-size:13px; padding:24px 0; }
        .rec-sum-title { font-size:18px !important; font-weight:700; margin:0 0 14px !important; }
        /* Sous-titre de LOT dans une synthèse (revue DCE…) : regroupe visuellement les points d'un lot. */
        .rec-sum-lot { font-size:14px; font-weight:700; margin:18px 0 6px; padding:5px 11px; border-left:3px solid var(--primary-color); background:var(--background-secondary); border-radius:0 6px 6px 0; color:var(--text-color); }
        .rec-sum-lot:first-child { margin-top:0; }
        .rec-client-clickable:hover { text-decoration: underline; }
        li.rec-sum-task { list-style:none; margin-left:-18px; padding-left:2px; }
        li.rec-sum-task::before { content:'☐'; margin-right:8px; opacity:.6; }
        .rec-plaud-questions { margin-top:36px; padding-top:28px; border-top:1px solid var(--border-color); }
        .rec-plaud-questions-label { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-secondary); margin-bottom:14px; }
        .rec-plaud-questions-label::before { content:''; display:inline-block; width:3px; height:14px; background:var(--primary-color); border-radius:2px; }
        .rec-plaud-questions-chips { display:flex; flex-direction:column; gap:6px; }
        .rec-plaud-question-chip { display:flex; align-items:center; gap:10px; text-align:left; padding:11px 14px; border-radius:10px; border:1px solid var(--border-color); background:var(--background-color,#fff); cursor:pointer; font-size:13px; font-family:inherit; color:var(--text-color); transition:all .18s; line-height:1.45; }
        .rec-plaud-question-chip::before { content:'?'; flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(var(--primary-rgb),.12); color:var(--primary-color); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .rec-plaud-question-chip::after { content:'→'; flex-shrink:0; margin-left:auto; color:var(--text-secondary); font-size:14px; opacity:0; transition:opacity .15s, transform .15s; transform:translateX(-4px); }
        .rec-plaud-question-chip:hover { border-color:var(--primary-color); background:rgba(var(--primary-rgb),.05); color:var(--primary-color); }
        .rec-plaud-question-chip:hover::before { background:var(--primary-color); color:#fff; }
        .rec-plaud-question-chip:hover::after { opacity:1; transform:translateX(0); color:var(--primary-color); }
        .rec-plaud-generating::before { content:''; width:16px; height:16px; border:2px solid var(--border-color); border-top-color:var(--primary-color); border-radius:50%; animation:spin .7s linear infinite; }
        @keyframes spin { to { transform:rotate(360deg); } }
        /* ══ Rendu « rapport » d'un enregistrement ══ */
        .rrt-wrap { max-width:900px; margin:0 auto; padding:0 36px 48px; }
        .rec-report-header { position:sticky; top:0; z-index:5; background:var(--background-color); margin:0 -36px 22px; padding:16px 36px 13px; border-bottom:1px solid var(--border-color); }
        .rr-head-top { display:flex; align-items:flex-start; gap:16px; }
        .rr-title-wrap { display:flex; align-items:flex-start; gap:11px; flex:1; min-width:0; }
        .rr-title-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
        .rr-title-line { display:flex; align-items:center; gap:6px; min-width:0; }
        .rr-subtitle { font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-width:0; overflow:hidden; }
        .rr-subtitle .rr-sub-client { color:var(--primary-color); font-weight:600; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .rr-subtitle .rr-sub-noclient { color:var(--warning-text); font-weight:600; flex:none; white-space:nowrap; }
        .rr-subtitle .rr-sub-meta { flex:none; white-space:nowrap; }
        .rr-subtitle .rr-sub-dot { opacity:.45; flex:none; }
        .rr-title-ico { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); background:var(--background-secondary); border:1px solid var(--border-color); }
        .rr-title-ico svg { width:19px; height:19px; }
        .rr-title { font-size:21px; font-weight:700; color:var(--text-color); line-height:1.25; margin:0; flex:0 1 auto; min-width:0; letter-spacing:-.2px; }
        .rr-title-edit { flex-shrink:0; background:none; border:none; cursor:pointer; color:var(--text-secondary); padding:6px; border-radius:8px; opacity:.5; transition:opacity .15s,color .15s,background .15s; display:inline-flex; align-items:center; }
        .rr-title-edit:hover { opacity:1; color:var(--primary-color); background:var(--hover-bg,rgba(0,0,0,.05)); }
        .rr-title-edit svg { width:16px; height:16px; }
        .rr-toolbar { display:flex; gap:6px; flex-shrink:0; }
        /* Toolbar enregistrement : boutons icône seule (libellés masqués) → 4 boutons carrés
           discrets, la place gagnée revient au titre + à la date. Le tooltip (title) reste. */
        .rr-toolbar .rr-tb-btn { padding:8px; }
        .rr-toolbar .rr-tb-btn span { display:none; }
        .rr-toolbar .rr-tb-btn svg { width:16px; height:16px; }
        /* Menu « Actions rapides » de la vue enregistrement (regroupe Éditer/Regénérer/Conversation/Supprimer). */
        .rr-actions-dd { position:relative; }
        .rr-actions-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:9px; border:1px solid var(--border-color); background:var(--background-color); color:var(--text-secondary); font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; white-space:nowrap; transition:border-color .15s,color .15s,background .15s; }
        .rr-actions-btn:hover { border-color:var(--primary-color); color:var(--primary-color); background:rgba(var(--primary-rgb),.06); }
        .rr-actions-btn svg { width:15px; height:15px; flex-shrink:0; }
        .rr-actions-menu { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:20; min-width:230px; padding:6px; background:var(--background-color); border:1px solid var(--border-color); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.16); }
        .rr-actions-menu.open { display:block; }
        .rr-menu-item { display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; border:none; border-radius:8px; background:none; color:var(--text-color); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; text-align:left; }
        .rr-menu-item svg { width:15px; height:15px; flex-shrink:0; }
        .rr-menu-item:hover { background:var(--hover-bg, rgba(0,0,0,.05)); }
        .rr-menu-item--danger { color:var(--danger); }
        .rr-menu-item--danger:hover { background:rgba(var(--danger-rgb),.1); }
        /* ── Lecture d'un enregistrement en feuille flottante (comme un mémo/rapport) ── */
        #rec-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9500; display:flex; align-items:flex-start; justify-content:center; padding:24px; }
        /* .rec-sheet ne scrolle PAS (flex column) : c'est .rec-sheet-inner qui scrolle. Ainsi le ×,
           positionné en absolute sur .rec-sheet, reste fixe (comme le header collant). */
        #rec-overlay .rec-sheet { background:var(--background-color); color:var(--text-color); width:min(900px,96vw); max-height:92vh; overflow:hidden; display:flex; flex-direction:column; border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.4); position:relative; }
        #rec-overlay .rec-sheet-inner { padding:0 36px 28px; overflow-y:auto; min-height:0; flex:1; }
        /* Le header collant du détail reprend la pleine largeur de la feuille (annule le padding
           latéral de .rec-sheet-inner via ses marges négatives natives -36px). */
        #rec-overlay .rec-report-header { border-radius:14px 14px 0 0; }
        /* Mobile : feuille plein écran + header empilé (titre pleine largeur, puis les 4 icônes
           en dessous) pour éviter le chevauchement titre/toolbar/×. */
        @media (max-width: 768px) {
            /* Safe-area : le header (titre + boutons + ×) doit démarrer SOUS la barre d'état /
               Dynamic Island, sinon il est masqué et non cliquable. */
            #rec-overlay { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); align-items:stretch; justify-content:stretch; }
            #rec-overlay .rec-sheet { width:100%; max-height:100%; height:100%; border-radius:0; }
            #rec-overlay .rec-sheet-inner { padding:0 5px 20px; }
            #rec-overlay .rec-report-header { margin:0 -5px 16px; padding:14px 8px 12px; border-radius:0; }
            /* Header sur UNE ligne (le dropdown Actions est compact) → place gagnée en hauteur. */
            #rec-overlay .rr-head-top { flex-direction:row; gap:8px; align-items:flex-start; }
            #rec-overlay .rr-title { font-size:18px; }
            #rec-overlay .rr-toolbar { flex-shrink:0; }
            #rec-overlay .rr-actions-btn .rr-actions-lbl { display:none; }   /* icône + caret seuls sur mobile */
            #rec-overlay .rr-actions-btn { padding:7px 9px; }
            /* Cartes de synthèse : padding interne réduit sur mobile → plus de largeur de texte. */
            #rec-overlay .rr-sec-body { padding:12px 10px 14px; }
            #rec-overlay .rr-sec-head { padding:10px 10px; }
            /* Le wrapper « rapport » gardait 36px de padding latéral non réduit sur mobile
               → ~30px perdus de chaque bord. On l'aligne sur les autres conteneurs (5px).
               Le header (.rec-report-header, marge -5px) reste ainsi à fleur du bord. */
            .rrt-wrap { padding-left:5px; padding-right:5px; }
            /* Mêmes resserrages HORS overlay (vue panneau des enregistrements) + listes :
               l'indentation navigateur (40px/niveau) mangeait un cinquième de l'écran. */
            .rec-sheet-inner { padding:0 5px 20px; }
            .rec-report-header { margin:0 -5px 16px; padding:14px 8px 12px; }
            .rr-sec-body { padding:12px 10px 14px; }
            .rr-sec-head { padding:10px 10px; }
            .rec-report ul, .rec-report ol,
            .rr-sec-body ul, .rr-sec-body ol,
            .rr-lead ul, .rr-lead ol { padding-left: 20px; }
            .rec-report ul ul, .rec-report ol ol { padding-left: 16px; }
        }
        /* Socle commun des boutons de toolbar (rr-tb-btn / ccc-tb-btn / client-center-btn),
           dédupliqué : seuls gap/padding/font-size varient (deltas par classe ci-dessous). */
        .rr-tb-btn, .ccc-tb-btn, .client-center-btn {
            display: inline-flex; align-items: center; border-radius: 8px; font-weight: 600;
            cursor: pointer; font-family: inherit; line-height: 1;
            border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-secondary);
            transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
        }
        .rr-tb-btn { gap: 6px; padding: 7px 13px; font-size: 12.5px; white-space: nowrap; }
        .rr-tb-btn svg { width:15px; height:15px; flex-shrink:0; }
        .rr-tb-btn:hover { border-color:var(--primary-color); color:var(--primary-color); background:rgba(var(--primary-rgb),.06); }
        .rr-tb-btn:active { transform:translateY(0.5px); }
        /* Système de boutons unifié : .ccc-tb-btn (secondaire) · .btn-primary · .btn-danger.
           Même forme que la toolbar, remplissage plein pour l'action principale / destructrice. */
        .btn-primary, .btn-danger {
            display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:var(--r-md);
            font-weight:600; font-size:var(--fs-sm); padding:8px 16px; cursor:pointer; font-family:inherit;
            line-height:1; border:1px solid transparent; color:#fff; transition:opacity .15s, box-shadow .15s; }
        .btn-primary { background:var(--primary-color); border-color:var(--primary-color); }
        .btn-danger  { background:var(--danger); border-color:var(--danger); }
        .btn-primary:hover, .btn-danger:hover { opacity:.9; }
        .btn-primary:active, .btn-danger:active { transform:translateY(0.5px); }
        .btn-primary:disabled, .btn-danger:disabled { opacity:.5; cursor:default; }
        /* ── Modale de notation des analyses d'offres (saisie VT/RSE/assistance, prix auto) ── */
        #notation-overlay { position:fixed; inset:0; z-index:10050; background:rgba(0,0,0,.45);
            display:flex; align-items:center; justify-content:center; padding:18px; }
        .nt-dlg { background:var(--background-color); color:var(--text-color); border-radius:var(--r-lg, 12px);
            box-shadow:0 18px 60px rgba(0,0,0,.35); width:min(1060px, 100%); max-height:92vh;
            display:flex; flex-direction:column; overflow:hidden; }
        .nt-head { display:flex; align-items:center; gap:12px; padding:14px 18px;
            border-bottom:1px solid var(--border-color); }
        .nt-title { flex:1; font-size:15px; font-weight:700; min-width:0; }
        .nt-close { background:none; border:none; cursor:pointer; font-size:15px; color:var(--text-secondary);
            padding:4px 8px; border-radius:6px; }
        .nt-close:hover { background:var(--background-secondary); }
        .nt-pond-bar { padding:9px 18px; font-size:12.5px; color:var(--text-secondary);
            border-bottom:1px solid var(--border-color); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
        .nt-pond-item { white-space:nowrap; }
        .nt-pond { width:52px; padding:2px 5px; border:1px solid var(--border-color); border-radius:6px;
            background:var(--background-secondary); color:var(--text-color); font:inherit; text-align:center; }
        .nt-pond-total { margin-left:auto; font-weight:600; }
        .nt-body { overflow:auto; padding:6px 18px 12px; }
        .nt-table { border-collapse:collapse; width:100%; font-size:13px; }
        .nt-table th, .nt-table td { border:1px solid var(--border-color); padding:6px 9px; text-align:center; }
        .nt-table thead th { background:var(--background-secondary); font-weight:700; position:sticky; top:0; z-index:1; }
        .nt-table td.nt-lbl { text-align:left; font-weight:600; background:var(--background-secondary);
            max-width:230px; }
        .nt-max { color:var(--text-secondary); font-weight:400; font-size:11.5px; }
        .nt-hint { cursor:help; color:var(--text-secondary); }
        .nt-table input[type=number], .nt-table input[type=text] { width:76px; padding:4px 6px;
            border:1px solid var(--border-color); border-radius:6px; background:var(--background-color);
            color:var(--text-color); font:inherit; text-align:center; }
        .nt-table input[type=text].nt-cout { width:110px; }
        .nt-ro { color:var(--text-secondary); font-variant-numeric:tabular-nums; }
        tr.nt-sub td { background:var(--background-secondary); font-size:12px; }
        tr.nt-total-row td { font-weight:700; color:var(--text-color); background:var(--background-secondary); }
        tr.nt-rang-row td { font-weight:700; }
        .nt-foot { display:flex; align-items:center; gap:10px; padding:12px 18px;
            border-top:1px solid var(--border-color); }
        .nt-legend { flex:1; font-size:11.5px; color:var(--text-secondary); min-width:0; }
        @media (max-width:640px) {
            #notation-overlay { padding:0; }
            .nt-dlg { max-height:100vh; height:100%; border-radius:0; }
            .nt-legend { display:none; }
            .nt-table td.nt-lbl { max-width:130px; font-size:12px; }
        }

        /* Bouton-logo de l'en-tête (hover en CSS, plus de onmouseover JS). */
        .hdr-logo-btn { background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; gap:10px; transition:opacity .15s; }
        .hdr-logo-btn:hover { opacity:.85; }
        .rr-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; background:var(--background-secondary); border:1px solid var(--border-color); font-size:12px; color:var(--text-secondary); }
        .rr-pill--client { background:rgba(var(--primary-rgb),.12); border-color:transparent; color:var(--primary-color); font-weight:600; }
        .rr-pill--noclient { background:rgba(245,158,11,.12); border-color:transparent; color:var(--warning-text); font-weight:600; }
        .rec-report { font-size:14px; color:var(--text-color); }
        .rr-lead { font-size:14.5px; line-height:1.7; color:var(--text-secondary); margin:0 0 24px; }
        .rr-lead p:last-child { margin-bottom:0; }
        .rr-sec { border:1px solid var(--border-color); border-radius:12px; margin:0 0 16px; overflow:hidden; background:var(--background-color); }
        .rr-sec-head { display:flex; align-items:center; gap:9px; padding:11px 16px; border-bottom:1px solid var(--border-color); background:var(--background-secondary); }
        .rr-sec-ico { width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; background:var(--background-color); }
        .rr-sec-title { font-size:14px; font-weight:700; color:var(--text-color); margin:0; }
        .rr-sec-body { padding:14px 18px 16px; font-size:14px; line-height:1.72; }
        .rr-sec-body h2 { font-size:15px; font-weight:700; margin:16px 0 8px; }
        .rr-sec-body h3 { font-size:13.5px; font-weight:700; margin:16px 0 7px; color:var(--text-color); }
        .rr-sec-body ul { margin:6px 0 12px 20px; padding:0; }
        .rr-sec-body li { margin-bottom:5px; }
        .rr-sec-body p { margin:0 0 10px; }
        .rr-sec-body > :last-child { margin-bottom:0; }
        .rr-sec--pain { border-left:3px solid var(--warning); }
        .rr-sec--pain .rr-sec-ico { background:rgba(245,158,11,.16); }
        .rr-sec--decision, .rr-sec--goal { border-left:3px solid var(--success); }
        .rr-sec--decision .rr-sec-ico, .rr-sec--goal .rr-sec-ico { background:rgba(16,185,129,.16); }
        .rr-sec--task { border-left:3px solid #3b82f6; }
        .rr-sec--task .rr-sec-ico { background:rgba(59,130,246,.16); }
        .rr-sec--suggestion { border-left:3px solid #8b5cf6; }
        .rr-sec--suggestion .rr-sec-ico { background:rgba(139,92,246,.16); }
        .rr-sec--context, .rr-sec--info, .rr-sec--people, .rr-sec--other { border-left:3px solid var(--border-color); }
        .rr-sec--overview { border:1px solid rgba(20,184,166,.35); background:rgba(20,184,166,.05); }
        .rr-sec--overview .rr-sec-head { background:rgba(20,184,166,.1); border-bottom-color:rgba(20,184,166,.2); }
        .rr-sec--overview .rr-sec-ico { background:rgba(20,184,166,.2); }
        /* Section « tâches » : cases à cocher */
        .rr-sec--task .rr-sec-body ul { list-style:none; margin-left:0; padding-left:0; }
        .rr-sec--task .rr-sec-body li { list-style:none; position:relative; padding-left:26px; margin-left:0; margin-bottom:8px; }
        .rr-sec--task .rr-sec-body li::before { content:''; position:absolute; left:0; top:3px; width:15px; height:15px; border:1.6px solid #3b82f6; border-radius:4px; opacity:.7; }
        .rec-dropdown { position:fixed; background:var(--background-color); border:1px solid var(--border-color); border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.12); z-index:9999; min-width:180px; overflow:hidden; padding:4px; }
        .rec-dropdown button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; border:none; background:none; cursor:pointer; font-size:13px; color:var(--text-color); font-family:inherit; border-radius:8px; }
        .rec-dropdown button:hover { background:var(--background-secondary); }
        .rec-dropdown button.danger { color:var(--danger); }
        .rec-dropdown button.danger svg { stroke:var(--danger); }
        /* ── fin Enregistrements ───────────────────────────────── */
        .token-usage-section { margin-top: 24px; }
        .token-kpi-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
        .token-kpi {
            flex: 1; min-width: 90px; background: var(--background-color);
            border: 1px solid var(--border-color); border-radius: 8px;
            padding: 10px 12px; text-align: center;
        }
        .token-kpi-value { font-size: 18px; font-weight: 700; color: var(--primary-color); }
        .token-kpi-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
        .token-chart-wrap {
            background: var(--background-color); border: 1px solid var(--border-color);
            border-radius: 8px; padding: 12px 12px 6px; overflow: hidden;
        }
        .token-chart-wrap svg { display: block; width: 100%; overflow: visible; }
        .token-chart-legend { display: flex; gap: 14px; margin-top: 8px; justify-content: flex-end; flex-wrap: wrap; }
        .token-chart-legend span { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
        .token-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
        .token-period-row { display: flex; gap: 6px; margin-bottom: 10px; }
        .token-period-btn {
            padding: 3px 10px; border-radius: 5px; font-size: 12px; cursor: pointer;
            border: 1px solid var(--border-color); background: var(--background-secondary);
            color: var(--text-secondary); font-family: inherit;
        }
        .token-period-btn.active { background: var(--primary-color); color: white; border-color: transparent; }
        .token-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
        .token-table th { text-align: left; padding: 4px 6px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
        .token-table td { padding: 4px 6px; border-bottom: 1px solid var(--border-color); }
        .token-table tr:last-child td { border-bottom: none; }

        /* ── Export menu ───────────────────────────── */
        .export-menu {
            position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
            background: var(--background-color); border: 1px solid var(--border-color);
            border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15);
            display: flex; flex-direction: column; overflow: hidden; z-index: 200; min-width: 90px;
        }
        .export-menu button {
            padding: 7px 14px; border: none; background: none; cursor: pointer;
            font-size: 13px; text-align: left; font-family: inherit; color: var(--text-color);
            transition: background .1s;
        }
        .export-menu button:hover { background: var(--background-secondary); }

        /* ── Banner détection collectivité ────────── */
        .client-detect-banner {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin: 8px 0 4px;
            padding: 12px 16px;
            border-radius: 10px;
            background: rgba(100, 150, 255, 0.07);
            border: 1px solid rgba(100, 150, 255, 0.25);
            font-size: 13px;
            color: var(--text-color);
            animation: fadeIn .3s ease;
        }
        .client-detect-banner-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
        .client-detect-banner-body { flex: 1; }
        .client-detect-banner-body strong { display: block; margin-bottom: 4px; }
        .client-detect-banner-body p { margin: 0 0 8px; color: var(--text-secondary); font-size: 12px; }
        .client-detect-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .client-detect-banner-actions button {
            padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
            cursor: pointer; border: 1px solid var(--border-color); font-family: inherit;
            background: var(--background-secondary); color: var(--text-color);
            transition: background .12s;
        }
        .client-detect-banner-actions button:hover { background: var(--border-color); }
        .client-detect-banner-actions button.primary {
            background: var(--primary-color); color: white; border-color: transparent;
        }
        .client-detect-banner-actions button.primary:hover { opacity: .88; }
        .client-detect-banner-dismiss {
            background: none; border: none; cursor: pointer; font-size: 16px;
            color: var(--text-secondary); padding: 0; flex-shrink: 0; opacity: .5;
        }
        .client-detect-banner-dismiss:hover { opacity: 1; }

        /* ── Modal lancement skill ────────────────── */
        #skill-launch-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1100;
            display: none;
            align-items: center;
            justify-content: center;
        }
        #skill-launch-modal.open { display: flex; }
        .skill-launch-box {
            background: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            width: 520px;
            max-width: 94vw;
            max-height: 88vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.25);
        }
        .skill-launch-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 18px 20px 14px;
            border-bottom: 1px solid var(--border-color);
        }
        .skill-launch-header-icon { font-size: 22px; }
        .skill-launch-header h3 { margin: 0; font-size: 15px; flex: 1; }
        .skill-launch-header button {
            background: none; border: none; cursor: pointer;
            font-size: 20px; color: var(--text-secondary); padding: 2px 6px;
            border-radius: 6px; line-height: 1;
        }
        .skill-launch-header button:hover { background: var(--border-color); }
        .skill-launch-body {
            padding: 18px 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            overflow-y: auto;
        }
        .skill-launch-dropzone {
            border: 2px dashed var(--border-color);
            border-radius: 10px;
            padding: 28px 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
            color: var(--text-secondary);
            font-size: 13px;
        }
        .skill-launch-dropzone:hover,
        .skill-launch-dropzone.dragover {
            border-color: var(--primary-color);
            background: rgba(100,120,255,0.05);
        }
        .skill-launch-dropzone-icon { font-size: 28px; margin-bottom: 8px; }
        .skill-launch-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            min-height: 0;
            max-height: 220px;
            overflow-y: auto;
            padding-right: 2px;
        }
        .skill-launch-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(var(--primary-rgb),0.08);
            border: 1px solid rgba(var(--primary-rgb),0.25);
            border-radius: 20px;
            padding: 4px 8px 4px 10px;
            font-size: 12px;
            color: var(--primary-color);
            max-width: 240px;
        }
        .skill-launch-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .skill-launch-chip button {
            background: none; border: none; cursor: pointer;
            font-size: 15px; color: var(--primary-color);
            padding: 0; line-height: 1; opacity: 0.6; flex-shrink: 0;
        }
        .skill-launch-chip button:hover { opacity: 1; }
        .skill-launch-instructions textarea {
            width: 100%; box-sizing: border-box;
            padding: 8px 10px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--background-secondary);
            color: var(--text-color);
            font-size: 13px;
            font-family: inherit;
            resize: vertical;
        }
        .skill-launch-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 14px 20px;
            border-top: 1px solid var(--border-color);
        }

        /* ── Settings – sélection skills welcome ── */
        .welcome-skill-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 0;
            background: var(--background-secondary);
            cursor: default;
        }
        .welcome-skill-row.disabled { opacity: 0.5; }
        /* Épinglée sur l'accueil : accent gauche + bordure pour distinguer « activé » de « désactivé ». */
        .welcome-skill-row.is-pinned { border-color: var(--primary-color); box-shadow: inset 3px 0 0 var(--primary-color); }
        .welcome-skill-row-icon { font-size: 16px; flex-shrink: 0; }
        .welcome-skill-row-name { flex: 1; font-size: 13px; }
        .welcome-skill-row-arrows { display: flex; flex-direction: column; gap: 1px; }
        .welcome-skill-row-arrows button {
            background: none; border: none; cursor: pointer; font-size: 11px;
            padding: 1px 4px; border-radius: 3px; color: var(--text-secondary);
            line-height: 1;
        }
        .welcome-skill-row-arrows button:hover { background: var(--border-color); }

        #response-length {
            height: 28px;
            padding: 0 10px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background-color: var(--input-bg);
            color: var(--text-color);
            font-size: 12px;
            cursor: pointer;
            outline: none;
            width: auto;
            flex-shrink: 0;
            transition: border-color 0.15s;
        }

        #response-length:focus {
            border-color: var(--primary-color);
        }

        .input-toggles {
            display: flex;
            gap: 6px;
            flex-wrap: nowrap;
        }

        .toggle-chip {
            display: flex; align-items: center; justify-content: center;
            width: 28px; height: 28px; padding: 0;
            border-radius: 6px; border: 1px solid var(--border-color);
            background: none; color: var(--text-secondary);
            cursor: pointer; flex-shrink: 0;
            transition: opacity .15s, border-color .15s, color .15s, background .15s; opacity: .55;
        }
        .toggle-chip:hover { opacity: 1; border-color: var(--primary-color); color: var(--primary-color); background: none; }
        .toggle-chip.active { border-color: #9333ea; color: #9333ea; background: rgba(168,85,247,.15); opacity: 1; }
        .toggle-chip:disabled { opacity: .2; cursor: not-allowed; }

        /* ── Input row ────────────────────────────── */
        .input-row {
            position: relative;
        }

        /* Textarea auto-resize. Le texte occupe TOUTE la largeur ; les actions sont une
           barre ancrée en bas DANS le champ (padding-bottom réservé) → plus de chevauchement
           du texte multi-ligne par les icônes, et plus de largeur mangée à droite. */
        #input {
            resize: none;
            overflow: hidden;
            max-height: 160px;
            line-height: 1.45;
            box-sizing: border-box;
            width: 100%;
            padding-right: 16px;
            padding-bottom: 44px;
        }

        /* Actions de la barre : OUTILS à gauche, ENVOYER/ARRÊTER à droite (bas du champ). */
        .input-row-actions {
            position: absolute;
            right: 8px;
            bottom: 6px;
            top: auto;
            transform: none;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .input-tools-left {
            position: absolute;
            left: 10px;
            bottom: 6px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Sélecteur de longueur (dans le groupe outils gauche). Masqué par défaut (desktop = bandeau) ;
           affiché sur mobile où le contrôle du bandeau est caché. */
        #length-inline {
            display: none;
            align-items: center; gap: 2px;
            background: var(--background-secondary); border: 1px solid var(--border-color);
            border-radius: 8px; padding: 2px;
        }
        /* Surcharge FORTE : sans ça, .input-row button (fond bleu, min 44px !important sur mobile)
           écrase les .length-btn → 3 gros ronds bleus indistincts. Sélection lisible SANS couleur :
           actif = plein (fond + texte blanc), inactifs = vides (fond transparent, texte gris). */
        #length-inline .length-btn {
            min-width: 0 !important; min-height: 0 !important;
            width: 32px !important; height: 28px !important;
            padding: 0 !important; margin: 0 !important;
            border: none !important; border-radius: 6px !important;
            background: transparent !important; color: var(--text-secondary) !important;
            font-size: 12.5px !important; font-weight: 700; font-family: inherit; line-height: 1;
            box-shadow: none !important; transform: none !important;
        }
        #length-inline .length-btn.active {
            background: var(--primary-color) !important; color: #fff !important;
            box-shadow: inset 0 0 0 1px var(--primary-color) !important;
        }

        .input-row-actions button,
        .input-tools-left > button {
            width: 32px !important;
            height: 32px !important;
            padding: 0 !important;
            border-radius: 50% !important;
            background: none !important;
            color: var(--text-secondary) !important;
            border: none;
            cursor: pointer;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            opacity: 0.55;
            transition: opacity 0.15s, background-color 0.15s;
            font-size: 15px;
            margin-bottom: 0 !important;
        }

        /* Survol : uniquement sur périphériques à vrai survol — sinon l'état « hover »
           reste collé après un tap sur mobile (rond gris fantôme sur le micro). */
        @media (hover: hover) {
            .input-row-actions button:hover,
            .input-tools-left > button:hover {
                opacity: 1;
                background: var(--border-color) !important;
            }
        }

        #send-button {
            background: var(--primary-color) !important;
            color: white !important;
            opacity: 1 !important;
            /* Centrage garanti de l'icône dans le cercle (certaines règles cassaient le flex). */
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        #send-button svg { display: block; }
        /* L'avion en papier a sa masse visuelle en haut-gauche → on le recentre optiquement. */
        #send-button .send-arrow-ico { transform: translate(1px, 1px); }

        #send-button:hover {
            background: var(--primary-hover) !important;
        }

        #send-button:disabled {
            background: #E2E8F0 !important;
            color: #718096 !important;
        }

        #cancel-button {
            background: var(--danger) !important;
            color: white !important;
            opacity: 1 !important;
        }

        #cancel-button:hover {
            background: var(--danger) !important;
        }
        /* ── Bouton UNIQUE Envoyer ⇄ Arrêter ─────────────────────────────
           #cancel-button fusionné dans #send-button → toujours caché. Le #send-button
           prend .generating pendant une réponse : icône carré + fond rouge. */
        #cancel-button { display: none !important; }
        #send-button .send-stop-ico { display: none; }
        #send-button.generating .send-arrow-ico { display: none; }
        #send-button.generating .send-stop-ico { display: inline-block; }
        #send-button.generating { background: var(--danger) !important; }
        #send-button.generating:hover { background: var(--danger) !important; }

        /* ── Bouton de dictée vocale (chat) : états enregistrement / transcription ── */
        #voice-input-button .vib-spinner { display: none; }
        /* Enregistrement en cours : micro rouge + halo pulsé */
        #voice-input-button.recording {
            color: #fff !important;
            background: var(--danger) !important;
            opacity: 1 !important;
            animation: vibPulse 1.4s ease-in-out infinite;
        }
        #voice-input-button.recording:hover { background: var(--danger-strong, var(--danger)) !important; }
        @keyframes vibPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb, 220,38,38), .45); }
            50%      { box-shadow: 0 0 0 5px rgba(var(--danger-rgb, 220,38,38), 0); }
        }
        /* Transcription : on masque le micro et on affiche un petit spinner */
        #voice-input-button.transcribing { opacity: 1 !important; cursor: default; }
        #voice-input-button.transcribing .vib-mic-ico { display: none; }
        #voice-input-button.transcribing .vib-spinner {
            display: inline-block; width: 14px; height: 14px; border-radius: 50%;
            border: 2px solid var(--border-color); border-top-color: var(--primary-color);
            animation: vibSpin .7s linear infinite;
        }
        @keyframes vibSpin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) {
            #voice-input-button.recording { animation: none; }
            #voice-input-button.transcribing .vib-spinner { animation-duration: 1.6s; }
        }

        /* Rating étoiles : visible seulement au survol du message (ou si déjà noté) */
        .rating-stars {
            opacity: 0;
            transition: opacity 0.15s;
            margin-top: 8px;
            font-size: 12px;
        }
        .bot-message:hover .rating-stars,
        .rating-stars.has-note { opacity: 1; }
        /* Tactile : pas de survol — sans cette règle, la notation était INACCESSIBLE
           sur téléphone/tablette (étoiles à opacity:0 à vie). Cibles élargies. */
        @media (hover: none) {
            .rating-stars { opacity: 1; }
            .rating-stars .star { padding: 8px 6px; }
            .follow-up-question-btn { min-height: 40px; }
        }
        .rating-label { color: var(--text-secondary); opacity: .75; margin-right: 6px; }
        .rating-stars-inner { display: inline-flex; gap: 2px; vertical-align: middle; }
        .rating-stars .star {
            cursor: pointer;
            color: var(--border-color);
            font-size: 16px;
            line-height: 1;
            transition: color .1s, transform .1s;
        }
        .rating-stars .star:hover { transform: scale(1.15); }
        .rating-stars .star.active { color: #f5a623; }
        /* Boucle d'amélioration : commentaire sur note basse */
        .rating-loop { margin-top: 8px; max-width: 520px; }
        .rating-loop-title { font-size: 12px; color: var(--text-color); margin-bottom: 5px; font-weight: 600; }
        .rating-comment {
            width: 100%; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 8px;
            padding: 7px 10px; font-size: 12.5px; font-family: inherit; background: var(--background-secondary);
            color: var(--text-color); resize: vertical; outline: none; line-height: 1.5;
        }
        .rating-comment:focus { border-color: var(--primary-color); }
        .rating-loop-actions { display: flex; gap: 8px; margin-top: 6px; }
        .rating-save-comment{
            padding: 4px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer;
            font-family: inherit; border: 1px solid var(--border-color); background: var(--background-secondary);
            color: var(--text-color); transition: all .12s;
        }
        .rating-save-comment { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
        .rating-save-comment:hover{ opacity: .88; }
        .rating-thanks { font-size: 12px; color: var(--success); font-weight: 600; }
        /* Revue « Qualité des réponses » (admin) */
        .ratings-filter-btn {
            padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border-color); background: none;
            color: var(--text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
        }
        .ratings-filter-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
        .rr-card { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--background-secondary); }
        .rr-card.resolved { opacity: .55; }
        .rr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
        .rr-stars { color: #f5a623; font-size: 13px; letter-spacing: 1px; }
        .rr-meta { font-size: 10.5px; color: var(--text-secondary); }
        .rr-q { font-size: 12.5px; font-weight: 600; color: var(--text-color); margin-bottom: 3px; }
        .rr-a { font-size: 12px; color: var(--text-secondary); max-height: 60px; overflow: hidden; line-height: 1.5; }
        .rr-comment { font-size: 12px; color: var(--text-color); background: var(--background-color); border-left: 3px solid #f5a623; padding: 5px 9px; border-radius: 4px; margin-top: 6px; }
        .rr-actions { display: flex; gap: 8px; margin-top: 8px; }
        .rr-actions button {
            padding: 3px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit;
            border: 1px solid var(--border-color); background: none; color: var(--text-color);
        }
        .rr-resolve { background: var(--success) !important; color: #fff !important; border-color: var(--success) !important; }
        .rr-actions button:hover { opacity: .85; }

        /* Écran de bienvenue */
        .welcome-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            gap: 24px;
            padding: 32px;
            text-align: center;
            color: var(--text-color);
        }
        .welcome-screen h2 {
            font-size: 1.4em;
            font-weight: 600;
            opacity: 0.85;
            margin: 0;
        }
        .welcome-screen p {
            font-size: 13px;
            opacity: 0.5;
            margin: 0;
        }

        /* ── Welcome – layout 2 colonnes (enreg. + feed) ───── */
        .welcome-screen {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            gap: 18px !important;
            padding: 24px 28px !important;
            height: 100% !important;
            box-sizing: border-box !important;
            overflow-y: auto !important;
            max-width: 1100px !important;
            margin: 0 auto !important;
        }
        .welcome-dead-filter { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--background-color); color: var(--text-color); font-size: 12px; font-family: inherit; cursor: pointer; outline: none; }
        /* Prochaines échéances : pastille de couleur par urgence. */
        .welcome-dead-row { align-items: flex-start; }
        .welcome-dead-row .wd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-secondary); margin-top: 5px; }
        .welcome-dead-row.soon .wd-dot { background: var(--warning); }
        .welcome-dead-row.late .wd-dot { background: var(--danger); }
        .welcome-dead-row .wd-when { font-size: 11px; color: var(--text-secondary); }
        .welcome-dead-row.soon .wd-when { color: var(--warning-text); font-weight: 600; }
        .welcome-dead-row.late .wd-when { color: var(--danger); font-weight: 700; }
        .welcome-dead-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 2px; }
        .welcome-dead-foot:empty { display: none; }
        .welcome-dead-more { font-size: 11.5px; color: var(--text-secondary); }
        .welcome-dead-plan { border: none; background: none; color: var(--primary-color); cursor: pointer; font-size: 12px; font-family: inherit; font-weight: 600; padding: 4px 8px; border-radius: 7px; }
        .welcome-dead-plan:hover { background: var(--background-secondary); }
        .welcome-cols { display: flex; flex-direction: row; gap: 20px; flex: 1; min-height: 0; width: 100%; }
        @media (max-width: 820px) { .welcome-cols { flex-direction: column; } }
        /* L'accueil remplit toute la hauteur du panneau : le conteneur #chat devient une
           colonne flex et l'écran grandit (flex:1) → les 2 cartes du bas s'étirent pour
           occuper l'espace libre, surtout quand le pipeline est replié. */
        #chat:has(> .welcome-screen) { display: flex; flex-direction: column; }
        #chat > .welcome-screen { flex: 1 1 auto; min-height: 0; }
        /* Accueil sur mobile : tout à la largeur de l'écran, empilé, scroll vertical.
           Sans ça, les flex:1/row du desktop débordaient HORIZONTALEMENT (greeting, boutons
           et cartes coupés à droite) et .welcome-col-left/right (overflow:hidden) clippaient. */
        @media (max-width: 768px) {
            .welcome-screen {
                padding: 16px !important;
                width: 100% !important; max-width: 100% !important;
                overflow-x: hidden !important; box-sizing: border-box !important;
                /* Annule le centrage hérité de la 1re déf .welcome-screen (text-align/align/justify
                   center) qui décalait le greeting et déformait le layout sur mobile. */
                text-align: left !important;
                align-items: stretch !important;
                justify-content: flex-start !important;
            }
            .welcome-cols { flex: 0 0 auto !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; gap: 16px !important; }
            .welcome-col-left, .welcome-col-right { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; }
            .welcome-client-card { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: auto !important; }
            .welcome-hero { width: 100% !important; max-width: 100% !important; }
            /* Landing Enreg. : bouton « Importer une transcription » masqué (déjà dans la barre
               d'outils du contenu) ; on replie le bandeau devenu vide. */
            #rec-landing-import, .rec-landing-top { display: none !important; }

            /* Chat : barre de contexte allégée — seuls réglages utiles au téléphone.
               Une seule chip conservée : recherche web (décision user 05/07) ; streaming/
               suggestions/raisonnement suivent leurs défauts, S/M/L, perso et imprimer masqués. */
            #length-btns, #conv-personal-btn, #conv-print-btn,
            #chip-streaming, #chip-autoscroll, #chip-reasoning { display: none !important; }
            /* …mais on ramène le choix de longueur DANS la barre de saisie (bas-gauche). */
            #length-inline { display: flex; }
            #chip-websearch {
                min-width: 34px; min-height: 34px;
                display: inline-flex; align-items: center; justify-content: center;
            }
            #chip-websearch svg { width: 15px; height: 15px; }
            #client-context-bar { padding: 6px 10px !important; gap: 6px !important; }
            #conv-link-client-btn, #conv-link-label { white-space: nowrap !important; }
            /* Boutons Envoyer / Arrêter : cercles 40px (cible tactile ≥40px — l'action
               principale du chat ne doit pas passer sous le seuil confortable au doigt).
               PAS de !important sur display → on laisse le JS afficher Arrêter UNIQUEMENT
               pendant une génération (sinon les deux ronds s'affichent au repos). */
            #send-button, #cancel-button {
                padding: 0 !important; width: 40px !important; height: 40px !important;
                min-width: 40px !important; min-height: 40px !important; border-radius: 50% !important;
                display: inline-flex; align-items: center; justify-content: center;
            }
            #send-button svg, #cancel-button svg { width: 16px !important; height: 16px !important; }
            /* Le bouton envoi/stop fait 40px (vs 32px pour les autres) : on réserve assez de place
               en bas du champ pour qu'il tienne dans la zone d'actions sans déborder du bord. */
            #input { padding-bottom: 50px !important; }
            .input-tools-left { bottom: 5px; }
            /* Bouton 40px décollé du bord arrondi du champ (sinon il « dépasse » visuellement). */
            .input-row-actions { bottom: 6px; right: 10px; }
            /* Bouton « Nouvelle conversation » de la landing Chat : visible uniquement sur mobile. */
            .cll-new-conv-btn { display: flex !important; }
        }
        /* Phrase d'humour (spark) — panneau discret, légèrement encastré{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 2px 0 7px; }
        /* Ma consommation (tokens & stockage) */
        .welcome-usage { border: 1px solid var(--border-color); border-radius: 12px; background: var(--background-secondary); padding: 12px 14px; }
        .welcome-usage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
        .welcome-usage-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
        .welcome-usage-month { padding: 4px 9px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--background-color); color: var(--text-color); font-size: 12.5px; font-family: inherit; cursor: pointer; outline: none; }
        .welcome-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
        .welcome-usage-cell { padding: 9px 12px; border-radius: 9px; background: var(--background-color); border: 1px solid var(--border-color); }
        .welcome-usage-val { font-size: 17px; font-weight: 800; color: var(--text-color); line-height: 1.1; font-variant-numeric: tabular-nums; }
        .welcome-usage-lbl { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }
        /* Sidebar accueil : rail « santé & usage » — plat, aéré, aligné en bas, couleurs sidebar */
        .hs-rail { display: flex; flex-direction: column; gap: 0; padding: 4px 16px 8px; margin-top: auto; color: var(--sidebar-text); }
        .hs-rail > div { padding: 13px 0; }
        .hs-rail > div:empty { display: none; }
        .hs-rail > div + div { border-top: 1px solid rgba(255,255,255,.09); }
        .hs-card { border: none; border-radius: 0; background: none; }
        .hs-llm-line { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: rgba(226,232,240,.6); }
        .hs-llm-txt { flex: 1; min-width: 0; }
        .hs-llm-txt strong { font-weight: 600; color: var(--sidebar-text); }
        .hs-llm-lat { font-size: 9.5px; color: rgba(226,232,240,.5); font-variant-numeric: tabular-nums; }
        .hs-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .hs-dot--on { background: #34d399; }
        .hs-dot--off { background: var(--danger-light); }
        .hs-dot--wait { background: rgba(226,232,240,.4); }
        /* Cartes conso & « à traiter » dans le rail : sans bordure ni fond, couleurs claires */
        .hs-rail .welcome-usage { border: none; background: none; padding: 0; }
        .hs-rail .welcome-usage-head { margin-bottom: 7px; flex-wrap: nowrap; gap: 6px; }
        .hs-rail .welcome-usage-title { font-size: 10px; letter-spacing: .06em; color: rgba(226,232,240,.68); white-space: nowrap; flex-shrink: 0; }
        .hs-rail .welcome-usage-month { border: none; background: none; padding: 1px 2px; font-size: 10px; color: rgba(226,232,240,.7); cursor: pointer; flex-shrink: 1; min-width: 0; max-width: 100%; }
        .hs-rail .welcome-usage-month:hover { color: var(--sidebar-text); }
        .hs-rail .welcome-usage-grid { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
        .hs-rail .welcome-usage-cell { padding: 0; border: none; background: none; border-radius: 0; }
        .hs-rail .welcome-usage-val { font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--sidebar-text); line-height: 1.1; }
        .hs-rail .welcome-usage-lbl { font-size: 8px; color: rgba(226,232,240,.5); margin-top: 1px; }
        .hs-rail .welcome-usage-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); font-size: 9.5px; color: rgba(226,232,240,.55); }
        .hs-rail .welcome-todo-list { flex-direction: column; gap: 5px; align-items: stretch; }
        .hs-rail .welcome-todo-item { justify-content: flex-start; background: none; border: none; border-left: 2px solid rgba(251,191,36,.6); border-radius: 0; padding: 1px 0 1px 8px; color: rgba(226,232,240,.78); font-weight: 500; font-size: 10.5px; }
        .hs-rail .welcome-todo-item:hover { background: none; color: #fbbf24; }
        /* Widget « Actions à réaliser » (sidebar accueil, thème sombre). */
        .hs-actions-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
        .hs-actions-title { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: rgba(226,232,240,.72); font-weight: 700; white-space: nowrap; }
        .hs-actions-count { font-size: 9.5px; font-weight: 700; color: var(--sidebar-text); background: rgba(255,255,255,.1); border-radius: 20px; padding: 1px 7px; }
        .hs-actions-filter { width: 100%; box-sizing: border-box; margin-bottom: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: var(--sidebar-text); font-size: 10.5px; font-family: inherit; padding: 5px 7px; cursor: pointer; outline: none; }
        .hs-actions-filter option { color: #1a1a1a; }
        .hs-actions-list { display: flex; flex-direction: column; gap: 9px; max-height: 210px; overflow-y: auto; padding-right: 5px; }
        .hs-actions-list::-webkit-scrollbar { width: 5px; }
        .hs-actions-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
        .hs-actions-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }
        .hs-actions-list::-webkit-scrollbar-track { background: transparent; }
        .hs-action-row { cursor: pointer; border-left: 2px solid rgba(var(--primary-rgb),.55); padding: 1px 0 2px 8px; }
        .hs-action-row:hover .hs-action-txt { color: #fff; }
        .hs-action-txt { font-size: 10.5px; line-height: 1.35; color: rgba(226,232,240,.82); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .hs-action-sub { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
        .hs-action-client { font-size: 10px; color: rgba(226,232,240,.68); }
        .hs-action-due { font-size: 9px; color: #fbbf24; font-weight: 600; }
        .hs-actions-empty { font-size: 10px; color: rgba(226,232,240,.5); line-height: 1.45; }
        /* Widget « Actions » collé en haut du sidebar accueil (sous les onglets). */
        .hs-actions-top { padding: 12px 16px 18px; border-bottom: 1px solid rgba(255,255,255,.14); color: var(--sidebar-text); }
        .hs-actions-top:empty { display: none; }
        /* Bouton Planning : pleine largeur discret SOUS la liste (.sidebar .X bat .sidebar button 0-1-1). */
        .sidebar .hs-actions-plan { width: 100%; margin: 10px 0 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: rgba(226,232,240,.88); font-size: 11px; font-weight: 600; font-family: inherit; padding: 7px 12px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
        .sidebar .hs-actions-plan:hover { background: rgba(255,255,255,.14); color: #fff; }
        .sidebar .hs-actions-plan svg { width: 15px; height: 15px; flex-shrink: 0; }
        /* ── Overlay Planning (réutilise .nl-modal) ── */
        .pl-filter { background: var(--background-color); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); font-size: 12px; font-family: inherit; padding: 5px 9px; cursor: pointer; outline: none; max-width: 190px; }
        .pl-section { margin-bottom: 22px; }
        .pl-section:last-child { margin-bottom: 0; }
        .pl-sec-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border-color); }
        .pl-sec-count { font-size: 10px; font-weight: 700; background: var(--background-secondary); color: var(--text-secondary); border-radius: 20px; padding: 1px 7px; }
        .pl-section--overdue .pl-sec-head { color: var(--danger); border-color: rgba(var(--danger-rgb),.3); }
        .pl-section--none .pl-sec-head { opacity: .7; }
        .pl-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 6px; border-radius: 8px; transition: background .12s; }
        .pl-item:hover { background: var(--background-secondary); }
        .pl-check { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; padding: 0; border-radius: 6px; border: 1.5px solid var(--border-color); background: var(--background-color); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; }
        .pl-check::before { content: '✓'; font-size: 13px; font-weight: 700; color: var(--success); opacity: 0; transition: opacity .12s; }
        .pl-check:hover { border-color: var(--success); background: rgba(16,185,129,.1); }
        .pl-check:hover::before { opacity: .9; }
        .pl-item-date { flex-shrink: 0; width: 92px; font-size: 11.5px; font-weight: 600; color: var(--primary-color); padding-top: 2px; }
        .pl-section--overdue .pl-item-date { color: var(--danger); }
        .pl-item-main { flex: 1; min-width: 0; cursor: pointer; border-radius: 6px; }
        .pl-item-txt { font-size: 13.5px; line-height: 1.4; color: var(--text-color); overflow-wrap: anywhere; }
        .pl-item-sub { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
        .pl-item-client { font-size: 11px; font-weight: 600; color: var(--primary-color); }
        .pl-item-resp { font-size: 11px; color: var(--text-secondary); }
        .pl-item-raw { font-size: 10.5px; color: var(--text-secondary); opacity: .7; font-style: italic; }
        @media (max-width: 768px) {
            .pl-item-date { width: 62px; font-size: 11px; }
            /* Cibles tactiles (WCAG 2.5.5) : toolbars icône-seule et cases à cocher. */
            .rr-toolbar .rr-tb-btn, .ccc-tb-actions .ccc-tb-btn, #rec-overlay .rr-actions-btn { min-height: 44px; min-width: 40px; }
            .pl-check, .ccc-action-check { min-width: 32px; min-height: 32px; }
        }
        .welcome-col-left {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
            overflow: hidden;
        }
        .welcome-col-right {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .welcome-client-card {
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex: 1;
            overflow: hidden;
        }
        .welcome-client-list {
            flex: 1;
            overflow-y: auto !important;
            max-height: none !important;
        }
        /* Accueil desktop : la carte « Prochaines échéances » s'arrête à son CONTENU — elle
           s'étirait à la hauteur de la colonne des publications (grand vide), reléguant les liens
           Relances / Calendrier des DLRO / Planning tout en bas. Ils remontent ainsi juste sous
           les échéances. Au-delà de ~10 échéances, la liste scrolle dans la carte. */
        @media (min-width: 821px) {
            .welcome-col-left .welcome-client-card { flex: 0 0 auto; }
            .welcome-col-left .welcome-client-list { max-height: 420px !important; }
        }
        .welcome-skill-btn.active { background: rgba(var(--primary-rgb),0.14); }

        /* ── Desktop : la sidebar ne DUPLIQUE plus la liste affichée au centre (audit D·2/D·4).
           Quand la landing (Conversations / Contacts) est à l'écran, sa liste latérale et les
           doublons (bouton « Nouvelle conversation ») sont masqués — la sidebar garde recherche
           globale et dossiers. Dès qu'on OUVRE une conversation, la landing quitte le DOM et la
           liste latérale REVIENT (navigation rapide entre conversations). ── */
        @media (min-width: 769px) {
            body:has(#chat-landing-body) #sidebar-conversations-view > div:has(#manage-convs),
            body:has(#chat-landing-body) #conv-filter-bar,
            body:has(#chat-landing-body) #conversations-list,
            body:has(#chat-landing-body) #sidebar-bottom-new-chat { display: none; }
            body:has(#contacts-page-list) #contacts-filter-bar,
            body:has(#contacts-page-list) #contacts-sidebar-list,
            body:has(#contacts-page-list) #sidebar-contacts-view .conv-search-wrap,
            body:has(#contacts-page-list) #sidebar-bottom-contacts { display: none; }
        }

        /* ── Welcome – sélecteur client ─────────────────────── */
        .welcome-client-card {
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: var(--background-secondary);
        }
        .welcome-client-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 13px 18px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-color);
            border-bottom: 1px solid var(--border-color);
            background: var(--background-color);
        }
        .welcome-client-card-header svg { opacity: 0.6; flex-shrink: 0; }
        .welcome-client-list { max-height: 260px; overflow-y: auto; }
        .welcome-client-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.12s;
        }
        .welcome-client-row:last-child { border-bottom: none; }
        .welcome-client-row:hover { background: rgba(var(--primary-rgb),0.07); }
        .welcome-client-row-avatar {
            width: 32px; height: 32px; border-radius: 50%;
            background: rgba(var(--primary-rgb),0.15);
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: 700;
            color: var(--primary-color);
            flex-shrink: 0;
        }
        .welcome-client-row-info { flex: 1; overflow: hidden; }
        .welcome-client-row-name { font-size: 13px; font-weight: 600; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .welcome-client-row-sub  { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .welcome-client-row-docs { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
        .welcome-client-empty { padding: 14px 18px; font-size: 13px; color: var(--text-secondary); opacity: 0.6; text-align: center; }

        /* ── Page d'accueil clients ──────────────────────────── */
        .clients-landing {
            display: flex; flex-direction: column; align-items: center;
            padding: 40px 24px 60px; gap: 24px; width: 100%;
        }
        .clients-landing-card {
            width: 100%;
            display: flex; flex-direction: column; gap: 12px;
        }
        .clients-landing-row {
            display: flex; align-items: center; gap: 12px;
            padding: 15px 18px; cursor: pointer;
            background: var(--background-secondary);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            transition: border-color .15s, box-shadow .15s, transform .1s;
        }
        .clients-landing-row:hover {
            border-color: var(--primary-color);
            box-shadow: 0 6px 18px rgba(0,0,0,0.07);
            transform: translateY(-1px);
        }
        .clients-landing-avatar {
            width: 34px; height: 34px; border-radius: 50%;
            background: var(--primary-color);
            color: #fff; font-size: 13px; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; text-transform: uppercase;
        }
        .clients-landing-name {
            flex: 1; font-size: 13px; font-weight: 600;
            color: var(--text-color); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
        }
        .clients-landing-meta {
            font-size: 11px; color: var(--text-secondary); flex-shrink: 0;
        }
        /* Carte client enrichie (2 dernières interactions + dernier rapport) */
        .clients-landing-row.cl-rich { flex-direction: column; align-items: stretch; gap: 8px; }
        .cl-rich-head { display: flex; align-items: center; gap: 12px; }
        .cl-rich-head .clients-landing-name { flex: 1; }
        .cl-rich-activity { display: flex; flex-wrap: wrap; gap: 14px 24px; padding-left: 46px; }
        .cl-act-group { flex: 1 1 220px; min-width: 0; }
        .cl-act-title { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); opacity: .65; margin-bottom: 4px; }
        .cl-act { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-color); padding: 1px 0; }
        .cl-act-ico { flex-shrink: 0; }
        .cl-act-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cl-act-date { flex-shrink: 0; font-size: 11px; color: var(--text-secondary); opacity: .7; }
        .cl-act.cl-empty { color: var(--text-secondary); opacity: .6; font-style: italic; }
        .cl-act-report .cl-act-label { font-weight: 600; }
        .cl-act.cl-clickable { cursor: pointer; border-radius: 5px; margin: 0 -4px; padding: 1px 4px; transition: background .1s, color .1s; }
        .cl-act.cl-clickable:hover { background: var(--background-secondary); color: var(--primary-color); }
        .cl-act.cl-clickable:hover .cl-act-date { color: var(--primary-color); }

        /* ── Contacts sidebar ───────────────────────────────── */
        #contacts-filter-bar {
            display: flex; gap: 2px; margin: 4px 8px 4px; background: rgba(0,0,0,.2);
            border-radius: 7px; padding: 2px;
        }
        .sidebar .contacts-filter-btn {
            flex: 1; font-size: 10px; font-weight: 600; font-family: inherit; letter-spacing: .02em;
            padding: 2px 0; border-radius: 5px; border: none; width: auto;
            background: none; color: rgba(226,232,240,0.35); cursor: pointer; transition: all .12s;
        }
        .sidebar .contacts-filter-btn:hover { color: rgba(226,232,240,0.6); background: none; }
        .sidebar .contacts-filter-btn.active { background: rgba(var(--primary-rgb),0.4); color: rgba(196,181,253,0.9); }
        .contacts-letter-sep {
            padding: 6px 12px 2px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: rgba(226,232,240,.35);
        }
        .contact-sidebar-item {
            display: flex; align-items: center; gap: 9px; padding: 8px 12px;
            cursor: pointer; border-radius: 6px; margin: 1px 4px;
            transition: background .12s; position: relative;
        }
        .contact-sidebar-item:hover { background: rgba(var(--primary-rgb),.08); }
        .cpg-act { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; font-size:14px; line-height:1; padding:5px 7px; border-radius:6px; text-decoration:none; }
        .cpg-act:hover { background:rgba(var(--primary-rgb),.15); }
        .contact-sidebar-avatar {
            width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700; color: #fff;
        }
        .contact-sidebar-body { flex: 1; min-width: 0; }
        .contact-sidebar-name {
            font-size: 12px; font-weight: 600; color: var(--sidebar-text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .contact-sidebar-meta {
            font-size: 10px; color: rgba(226,232,240,.45);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
        }
        .sidebar .contact-sidebar-menu {
            display: none; background: none !important; border: none; cursor: pointer;
            color: rgba(226,232,240,.4); padding: 2px 6px; border-radius: 4px;
            font-size: 14px; line-height: 1; flex-shrink: 0; width: auto !important;
            align-items: center; justify-content: center;
        }
        .contact-sidebar-item:hover .contact-sidebar-menu { display: flex; }
        .sidebar .contact-sidebar-menu:hover { color: rgba(226,232,240,.9) !important; background: rgba(255,255,255,.1) !important; }
        /* Modal contacts */
        #contact-modal-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9000;
            display: flex; align-items: center; justify-content: center;
        }
        #contact-modal {
            background: var(--background-color); border: 1px solid var(--border-color);
            border-radius: 14px; padding: 24px 28px; width: 440px; max-width: 94vw;
            max-height: 90dvh; overflow-y: auto;
            box-shadow: 0 24px 64px rgba(0,0,0,.4);
        }
        #contact-modal h3 { font-size: 15px; font-weight: 700; margin: 0 0 18px; }
        #contact-modal .cm-field { margin-bottom: 12px; }
        #contact-modal .cm-field label { font-size: 11px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .04em; color: var(--text-secondary); display: block; margin-bottom: 5px; }
        #contact-modal input, #contact-modal select {
            width: 100%; padding: 8px 10px; border: 1px solid var(--border-color);
            border-radius: 8px; background: var(--background-secondary); color: var(--text-color);
            font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box;
        }
        #contact-modal input:focus, #contact-modal select:focus { border-color: var(--primary-color); }
        #contact-modal .cm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
        #contact-modal .cm-btn { padding: 8px 18px; border-radius: 9px; border: 1px solid var(--border-color); cursor: pointer;
            font-size: 13px; font-weight: 600; font-family: inherit; transition: border-color .15s, color .15s, background .15s, box-shadow .15s; }
        #contact-modal .cm-btn.secondary { background: var(--background-color); color: var(--text-secondary); }
        #contact-modal .cm-btn.secondary:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb),.06); }
        #contact-modal .cm-btn.primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
        #contact-modal .cm-btn.primary:hover { box-shadow: 0 2px 6px rgba(0,0,0,.15); }
        /* Sélecteur multi-clients (contact rattaché à plusieurs clients) */
        .cmc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
        .cmc-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--background-secondary);
            border: 1px solid var(--border-color); border-radius: 14px; padding: 3px 6px 3px 11px; font-size: 12.5px; }
        .cmc-chip button { background: none; border: none; cursor: pointer; color: var(--text-secondary);
            font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 50%; }
        .cmc-chip button:hover { color: #e5484d; }
        .cmc-picker { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--background-color);
            border: 1px solid var(--border-color); border-radius: 8px; margin-top: 4px; max-height: 210px; overflow-y: auto;
            box-shadow: 0 10px 28px rgba(0,0,0,.18); }
        .cmc-picker div { padding: 8px 11px; cursor: pointer; font-size: 13px; }
        .cmc-picker div:hover { background: var(--background-secondary); }
        /* Détail contact : clients rattachés — pastilles discrètes (même style que le contact
           associé de la fiche enregistrement). */
        .contact-client-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
            background: var(--background-secondary); border: 1px solid var(--border-color); color: var(--text-color);
            border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-family: inherit; cursor: pointer;
            transition: border-color .12s, background .12s; }
        .contact-client-chip:hover { border-color: var(--primary-color); }
        .contact-client-chip .ccc-ico { display: inline-flex; color: var(--text-secondary); flex-shrink: 0; }
        .contact-client-chip .ccc-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* Vue détail d'un contact : bornée à l'écran (#chat est overflow:visible sur mobile,
           donc c'est ce conteneur qui doit clipper les noms de clients longs). */
        .contact-detail-view { padding: 32px; max-width: 580px; margin: 0 auto; width: 100%; box-sizing: border-box; overflow-x: hidden; }
        @media (max-width: 640px) { .contact-detail-view { padding: 18px 16px; max-width: 100vw; } }

        /* ── Modal participants enregistrement ──────────────── */
        #rec-participants-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9100;
            display: flex; align-items: center; justify-content: center;
        }
        #rec-participants-modal {
            background: var(--background-color); border: 1px solid var(--border-color);
            border-radius: 14px; padding: 24px 28px; width: 460px; max-width: 94vw;
            box-shadow: 0 24px 64px rgba(0,0,0,.4); max-height: 80vh; display: flex; flex-direction: column;
        }
        #rec-participants-modal h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
        #rec-participants-modal .rp-subtitle { font-size: 12px; color: var(--text-secondary); margin-bottom: 14px; }
        #rp-search { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color);
            border-radius: 8px; background: var(--background-secondary); color: var(--text-color);
            font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; margin-bottom: 10px; }
        #rp-search:focus { border-color: var(--primary-color); }
        #rp-contact-list { flex: 1; overflow-y: auto; margin: 0 -4px; }
        .rp-contact-row {
            display: flex; align-items: center; gap: 10px; padding: 8px 4px;
            border-radius: 8px; cursor: pointer; transition: background .12s;
        }
        .rp-contact-row:hover { background: var(--hover-color,rgba(var(--primary-rgb),.07)); }
        .rp-contact-check {
            width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border-color);
            flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .12s;
        }
        .rp-contact-row.selected .rp-contact-check { background: var(--primary-color); border-color: var(--primary-color); }
        .rp-contact-row.selected .rp-contact-check::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
        .rp-contact-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
        .rp-contact-name { font-size: 13px; font-weight: 600; }
        .rp-contact-meta { font-size: 11px; color: var(--text-secondary); }
        #rp-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
        #rp-actions button { padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer;
            font-size: 13px; font-weight: 600; font-family: inherit; }
        #rp-skip-btn { background: var(--background-secondary); color: var(--text-color); }
        #rp-skip-btn:hover { background: var(--border-color); }
        #rp-save-btn { background: var(--primary-color); color: #fff; }
        #rp-save-btn:hover { opacity: .9; }

        /* ── Recordings landing page ─────────────────────────── */
        #rec-landing {
            display: flex; flex-direction: column; height: 100%;
            overflow-y: auto; padding: 28px 28px 24px; box-sizing: border-box;
        }
        .rec-landing-item {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 11px 18px; cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            transition: background .12s;
        }
        .rec-landing-item:last-child { border-bottom: none; }
        .rec-landing-item:hover { background: rgba(var(--primary-rgb),.06); }
        .rec-landing-item-icon {
            width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
            background: rgba(var(--primary-rgb),.1); display: flex; align-items: center;
            justify-content: center; color: var(--primary-color); margin-top: 1px;
            overflow: hidden;
        }
        /* Logo du client à la place du micro (quand l'enregistrement est rattaché à un
           client qui a un logo) : remplit la case, fond neutre. */
        .rec-landing-item-icon:has(> .rec-landing-item-logo) { background: var(--background-color); }
        .rec-landing-item-logo { width: 100%; height: 100%; object-fit: cover; display: block; }
        .rec-landing-item-body { flex: 1; min-width: 0; }
        .rec-landing-item-title {
            font-size: 13px; font-weight: 600; color: var(--text-color);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .rec-landing-item-meta {
            font-size: 11px; color: var(--text-secondary); margin-top: 2px;
            display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
        }
        .rec-landing-client-badge {
            display: inline-flex; align-items: center; gap: 3px;
            background: rgba(var(--primary-rgb),.12); color: var(--primary-color);
            border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 600;
        }
        .rec-landing-item-preview {
            font-size: 11px; color: var(--text-secondary); opacity: .65;
            margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .rec-landing-empty {
            padding: 32px 18px; text-align: center;
            font-size: 13px; color: var(--text-secondary); opacity: .55;
        }
        /* Nouvelle landing enregistrements : stats + recherche + regroupement */
        #rec-landing { flex: 1; min-height: 0; overflow-y: auto; }
        /* ── Gabarit commun des landings (Clients / Conversations / Contacts / Enregistrements) ── */
        .landing-scroll { height: 100%; overflow-y: auto; box-sizing: border-box; }
        .landing { max-width: 940px; margin: 0 auto; padding: 22px 26px 60px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
        .landing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
        .landing-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0; display: flex; align-items: center; gap: 10px; }
        .landing-count { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 999px; padding: 1px 10px; font-variant-numeric: tabular-nums; }
        .landing-action { font-size: 12.5px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px; }
        .landing-search { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--background-secondary); color: var(--text-color); font-size: 13.5px; font-family: inherit; outline: none; }
        .landing-search:focus { border-color: var(--primary-color); }
        .landing-filters:empty { display: none; }
        .landing-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
        .landing-body { display: flex; flex-direction: column; gap: 8px; }
        .landing-empty { text-align: center; color: var(--text-secondary); padding: 44px 16px; font-size: 13px; }
        /* Chips de filtre uniformes */
        .landing-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
        .landing-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s, background .12s; }
        .landing-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .landing-chip.on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
        .landing-chip-n { opacity: .7; font-variant-numeric: tabular-nums; }
        .landing-chip.on .landing-chip-n { opacity: .85; }
        @media (max-width: 768px) { .landing { padding: 16px 14px 48px; } }

        .rec-landing-wrap { max-width: 900px; margin: 0 auto; padding: 22px 26px 30px; width: 100%; box-sizing: border-box; }
        .rec-stat-chip { display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--background-secondary); min-width: 80px; }
        .rec-stat-chip[data-act]:hover { border-color: var(--warning); }
        .rec-stat-chip.active { outline: 2px solid rgba(245,158,11,.35); }
        .rec-landing-searchbox { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--background-secondary); color: var(--text-color); font-size: 14px; font-family: inherit; outline: none; margin-bottom: 20px; }
        .rec-landing-sec-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 0 0 10px; }
        /* Bouton « Nouvelle conversation » en tête de la landing Chat — MOBILE UNIQUEMENT
           (autonomie mobile). Sur desktop, la sidebar a déjà « Nouvelle conversation » → masqué
           pour ne pas alourdir (réaffiché dans le @media 768px). */
        .cll-new-conv-btn { display: none; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 11px; margin-bottom: 12px; background: var(--primary-color); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: filter .15s; }
        .cll-new-conv-btn:hover { filter: brightness(1.06); }
        .cll-new-conv-btn:active { transform: translateY(0.5px); }
        /* Carte de localisation des clients (page Clients) */
        .cll-map-card { border: 1px solid var(--border-color); border-radius: 12px; background: var(--background-secondary); overflow: hidden; margin-bottom: 20px; }
        .cll-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; }
        .cll-map-title { font-size: 13px; font-weight: 700; color: var(--text-color); }
        .cll-map-year { padding: 5px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--background-color); color: var(--text-color); font-size: 13px; font-family: inherit; cursor: pointer; outline: none; }
        .cll-map { height: 320px; width: 100%; background: var(--background-color); z-index: 0; }
        .cll-map-empty { display: flex; align-items: center; justify-content: center; height: 100%; opacity: .5; font-size: 13px; }
        .cll-map-note { padding: 8px 14px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-color); }
        .rec-landing-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
        .rec-landing-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 13px 15px; background: var(--background-secondary); cursor: pointer; transition: border-color .15s, background .15s; }
        .rec-landing-card:hover { border-color: var(--primary-color); background: rgba(var(--primary-rgb),.05); }
        .nl-badge { font-size: 10px; padding: 1px 7px; border-radius: 10px; background: var(--background-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); font-weight: 600; }
        .nl-badge--gen { background: rgba(var(--primary-rgb),.14); color: var(--primary-color); border-color: transparent; }
        .nl-badge--err { background: rgba(239,68,68,.12); color: var(--danger-strong); border-color: transparent; }
        .nl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 24px; }
        @media (max-width: 768px) {
            /* Mémo/rapport en plein écran + safe-area : le header (titre + Copier + ×) démarre
               sous la barre d'état / Dynamic Island (sinon masqué et non cliquable). */
            .nl-overlay { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); align-items: stretch; }
            .nl-modal { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
        }
        .nl-modal { background: var(--background-color); border-radius: 14px; width: min(820px, 96vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.3); overflow: hidden; }
        .nl-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
        .nl-modal-title { font-size: 15px; font-weight: 700; color: var(--text-color); flex: 1; min-width: 0; }
        .nl-modal-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .nl-exp { padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border-color); background: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap; }
        .nl-exp:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .nl-close { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-color); background: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; }
        .nl-close:hover { color: var(--text-color); }
        @media (max-width: 768px) {
            /* En-tête mobile : la rangée d'actions ne repliait pas → « Télécharger »
               débordait et poussait la croix HORS ÉCRAN, le titre était laminé mot à
               mot. Empilement : titre + ✕ sur la 1re ligne (croix toujours visible,
               cible 40px, safe-area), exports en 2e ligne repliable. */
            /* L'overlay décale déjà le contenu sous l'encoche (padding safe-area-inset-top) :
               NE PAS le rajouter ici, sinon double marge → gros vide en haut. Header compact. */
            .nl-modal-head { flex-wrap: wrap; padding: 8px 12px; }
            .nl-modal-title { flex: 1 1 0; font-size: 14px; }
            /* flex-basis:100% → la rangée de boutons (Copier / exports) passe TOUJOURS sous
               le titre, jamais sur la même ligne que la croix absolue (sinon « Copier »
               se retrouvait pile sous le × → chevauchement, cas à un seul bouton). */
            .nl-modal-actions { flex-wrap: wrap; flex-basis: 100%; min-width: 0; gap: 5px; row-gap: 5px; margin-top: 3px; }
            .nl-exp { padding: 4px 9px; font-size: 11.5px; }
            .nl-close {
                order: -1; margin-left: auto;
                min-width: 36px; min-height: 36px; font-size: 15px;
                position: absolute; top: 8px; right: 10px;
            }
            .nl-modal { position: relative; }
            .nl-modal-title { padding-right: 46px; }
        }
        .nl-modal-body { padding: 20px 26px 28px; overflow-y: auto; font-size: 14px; line-height: 1.7; color: var(--text-color); }
        .nl-modal-body h1 { font-size: 20px; font-weight: 800; margin: 0 0 14px; }
        .nl-modal-body h2 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
        .nl-modal-body h3 { font-size: 14px; font-weight: 700; margin: 16px 0 6px; }
        .nl-modal-body p { margin: 0 0 11px; }
        /* Texte justifié (aligné à gauche ET à droite) pour la newsletter et les rapports,
           à l'écran comme au PDF. Césure auto pour éviter les grands blancs entre mots. */
        .nl-modal-body p, .nl-modal-body li,
        .rr-sec-body p, .rr-sec-body li, .rr-lead p {
            text-align: justify;
            hyphens: auto;
            -webkit-hyphens: auto;
        }
        /* Tableaux de rapport dans la visionneuse : taille de cellule UNIFORME. La colonne
           « Détail » apparaissait plus grande que le reste (héritage du corps 14px selon le
           rendu). On aligne toutes les cellules sur 12.5px, sans justification (colonnes). */
        .nl-modal-body table { font-size: 12.5px; }
        .nl-modal-body table th, .nl-modal-body table td {
            font-size: 12.5px; line-height: 1.5; text-align: left; hyphens: manual;
        }
        .nl-modal-body a { color: var(--primary-color); }
        .nl-modal-body hr { border: none; border-top: 1px solid var(--border-color); margin: 18px 0; }
        .nl-modal-body ul { margin: 6px 0 12px 20px; }
        /* ── Fiche société / contact (liste enregistrements + conversations) ─────────── */
        .cf-meta { font-size: 12.5px; color: var(--text-secondary); margin: -4px 0 16px; }
        .cf-sec-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
        .cf-count { background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0; }
        .cf-list { display: flex; flex-direction: column; gap: 6px; }
        .cf-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: var(--r-md, 9px); padding: 10px 12px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
        .cf-item:hover { border-color: var(--primary-color); background: rgba(var(--primary-rgb), .06); }
        .cf-item-ico { font-size: 16px; flex-shrink: 0; }
        .cf-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
        .cf-item-title { font-size: 13.5px; font-weight: 600; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cf-item-meta { font-size: 11.5px; color: var(--text-secondary); }
        .cf-item-meta .cf-cl { color: var(--primary-color); }
        .cf-empty { font-size: 12.5px; color: var(--text-secondary); font-style: italic; padding: 6px 2px; }
        .rec-landing-card-head { display: flex; align-items: center; gap: 9px; }
        /* Carte « 1 client = ses 3 derniers enregistrements » (landing enregistrements). */
        .rec-landing-client-card { cursor: default; }
        .rec-landing-client-card:hover { border-color: var(--border-color); background: var(--background-secondary); }
        .rec-landing-client-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .rec-landing-client-title:hover { color: var(--primary-color); }
        .rec-landing-client-recs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
        .rec-landing-mini { padding: 7px 9px; border-radius: 8px; background: var(--background-color); border: 1px solid var(--border-color); cursor: pointer; transition: border-color .12s, background .12s; }
        .rec-landing-mini:hover { border-color: var(--primary-color); background: rgba(var(--primary-rgb),.05); }
        .rec-landing-mini-obj { font-size: 12.5px; color: var(--text-color); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .rec-landing-mini-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
        /* Répertoire client (section « Par client ») : gros logo + nom, enregistrements
           sous-groupés par année en dessous. */
        .rec-client-dir { margin-bottom: 6px; }
        .rec-client-dir-head { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; padding: 10px 6px; cursor: pointer; font-family: inherit; text-align: left; color: var(--text-color); border-bottom: 1px solid var(--border-color); }
        .rec-client-dir-head:hover { background: var(--background-secondary); }
        .rec-client-dir-logo { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--background-secondary); border: 1px solid var(--border-color); }
        .rec-client-dir-logo img { width: 100%; height: 100%; object-fit: cover; }
        .rec-client-dir-logo svg { width: 20px; height: 20px; color: var(--text-secondary); }
        .rec-client-dir-logo--none { font-size: 20px; border: none; background: none; }
        .rec-client-dir-name { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .rec-client-dir-body { padding: 2px 0 8px 14px; }
        .rec-year-block { margin-top: 4px; }
        .rec-year-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); padding: 8px 4px 4px; }
        /* Ligne compacte d'enregistrement dans le répertoire : tout sur une ligne. */
        /* Liste volontairement DISCRÈTE : texte atténué, micro estompé, lignes serrées. */
        .rec-dir-row { align-items: center; gap: 9px; padding: 5px 10px; }
        .rec-dir-row:hover { background: var(--background-secondary); }
        .rec-dir-row-mic { flex-shrink: 0; display: flex; align-items: center; color: var(--text-secondary); opacity: .5; }
        .rec-dir-row-mic svg { width: 14px; height: 14px; }
        .rec-dir-row-obj { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 400; color: var(--text-color); opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* Date décalée vers la gauche (marge avant la croix), la croix reste en bout de ligne. */
        .rec-dir-row-date { font-size: 11px; color: var(--text-secondary); opacity: .85; white-space: nowrap; flex-shrink: 0; margin-right: 14px; }
        /* Croix de suppression PERMANENTE en bout de ligne (plus de survol → aucune variation
           de hauteur). Discrète au repos, rouge au survol. */
        .rec-dir-del { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--text-secondary); cursor: pointer; font-size: 17px; line-height: 1; border-radius: 6px; padding: 0; font-family: inherit; opacity: .55; transition: opacity .12s; }
        .rec-dir-del:hover { color: var(--danger); background: var(--background-secondary); opacity: 1; }
        /* Sur appareil avec survol : croix révélée au survol de la ligne (moins de bruit, pas de
           clic accidentel). Sur tactile (hover: none) elle reste visible pour rester atteignable. */
        @media (hover: hover) {
            .rec-dir-del { opacity: 0; }
            .rec-dir-row:hover .rec-dir-del { opacity: .55; }
            .rec-dir-del:hover { opacity: 1; }
        }
        .rec-landing-noclient-badge { font-size: 10px; padding: 1px 7px; border-radius: 10px; background: #fff3cd; color: #856404; border: 1px solid #ffc107; font-weight: 600; }
        .rec-landing-group-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border-color); padding: 7px 4px; cursor: pointer; font-family: inherit; text-align: left; color: var(--text-color); }
        .rlg-name { flex: 1; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .rlg-count { font-size: 11px; color: var(--text-secondary); background: var(--background-secondary); border-radius: 9px; padding: 1px 8px; flex-shrink: 0; }

        /* ── Welcome – flux automatiques ─────────────────────── */
        .welcome-feed-card {
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            overflow: hidden;
            background: var(--background-secondary);
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex: 1;
        }
        #welcome-feed-list { flex: 1; overflow-y: auto; max-height: none !important; }
        .welcome-feed-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 13px 18px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-color);
            border-bottom: 1px solid var(--border-color);
            background: var(--background-color);
        }
        .welcome-feed-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 10px 18px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background 0.15s;
        }
        .welcome-feed-item:last-child { border-bottom: none; }
        .welcome-feed-item:hover { background: rgba(var(--primary-rgb),0.07); }
        .welcome-feed-title {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Extrait du sujet (début du texte) : 2 lignes max, pour toutes les sources —
           utile surtout quand le nom de fichier ne dit rien (Légifrance…). */
        .welcome-feed-excerpt {
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-secondary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 1px 0 2px;
        }
        .welcome-feed-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: var(--text-secondary);
        }
        .welcome-feed-badge {
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 99px;
            font-weight: 600;
            background: rgba(var(--primary-rgb),0.12);
            color: var(--primary-color);
        }
        /* Badge nom de client : même format discret que le flux, teinte violette pour le distinguer
           du bleu de l'origine du flux. */
        .welcome-client-badge {
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 99px;
            font-weight: 600;
            background: rgba(139,92,246,0.14);
            color: #7c3aed;
        }
        .welcome-feed-empty { padding: 14px 18px; font-size: 13px; color: var(--text-secondary); opacity: 0.6; text-align: center; }
        /* #welcome-feed-list height géré par flex */

        /* ── Skills ─────────────────────────────────────────────── */
        .skill-card {
            display: flex; align-items: center; justify-content: space-between;
            gap: 10px; padding: 10px 14px;
            border: 1px solid var(--border-color); border-radius: 10px;
            background: var(--background-secondary); margin-bottom: 8px;
        }
        .skill-card-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
        .skill-card-icon { font-size: 20px; flex-shrink: 0; }
        .skill-card-name { font-size: 13px; font-weight: 600; color: var(--text-color); }
        .skill-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
        .skill-cmd-badge {
            font-size: 11px; padding: 1px 7px; border-radius: 6px;
            background: rgba(var(--primary-rgb),0.13); color: var(--primary-color);
            font-family: monospace; font-weight: 700; letter-spacing: 0.02em;
        }
        .skill-edit-btn {
            background: none; border: none; cursor: pointer; padding: 4px 6px;
            border-radius: 6px; font-size: 14px; opacity: 0.5; flex-shrink: 0;
        }
        .skill-edit-btn:hover { opacity: 1; background: var(--border-color); }

        /* Skill picker popup */
        #skill-picker-popup {
            position: absolute; bottom: calc(100% + 8px); right: 0;
            width: 280px; max-height: 320px; overflow-y: auto;
            background: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.14);
            z-index: 200;
        }
        .skill-picker-header {
            padding: 9px 14px;
            font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
            text-transform: uppercase; color: var(--text-secondary);
            border-bottom: 1px solid var(--border-color);
        }
        .skill-picker-item {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 14px; cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.1s;
        }
        .skill-picker-item:last-child { border-bottom: none; }
        .skill-picker-item:hover { background: var(--background-secondary); }
        .skill-picker-icon { font-size: 18px; flex-shrink: 0; }
        .skill-picker-info { flex: 1; min-width: 0; }
        .skill-picker-name { font-size: 13px; font-weight: 600; color: var(--text-color); }
        .skill-picker-cmd { font-size: 11px; color: var(--primary-color); font-family: monospace; }

        /* File message styles */
        .file-message {
            background-color: var(--background-secondary);
            border-radius: 8px;
            padding: 12px 16px;
            margin: 10px 0;
            display: flex;
            align-items: center;
            gap: 12px;
            border-left: 3px solid var(--primary-color);
        }
        
        .file-info {
            flex: 1;
        }
        
        .file-name {
            font-weight: 600;
            color: var(--primary-color);
            font-size: 14px;
        }
        
        .file-size {
            font-size: 12px;
            color: var(--text-secondary);
            opacity: 0.8;
        }
        
        .file-actions {
            display: flex;
            gap: 8px;
        }
        
        .download-file-btn {
            background-color: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 12px;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }

        .download-file-btn:hover {
            background-color: var(--background-secondary);
            border-color: var(--primary-color);
        }
        
        /* Response metadata styles */
        .response-info {
            display: block;
            margin-top: 8px;
            font-size: 12px;
            color: var(--text-secondary);
            opacity: 0.8;
            padding: 6px 10px;
            border-radius: 4px;
            background-color: var(--background-secondary);
        }
        
        .response-info small {
            display: block;
            line-height: 1.4;
        }
        
        /* Copy button styles */
        .copy-button {
            display: inline-flex; align-items: center; gap: 4px;
            background: none; border: none;
            color: var(--text-secondary); font-size: 12px;
            cursor: pointer; padding: 3px 7px; border-radius: 5px;
            transition: background .12s, color .12s; font-family: inherit;
        }
        .copy-button:hover { background: var(--background-secondary); color: var(--text-color); }
        .copy-button svg { flex-shrink: 0; }

        .message-actions {
            display: flex; align-items: center;
            margin-top: 6px; gap: 2px; opacity: 0;
            transition: opacity .15s;
        }
        .bot-message:hover .message-actions, .message-actions.visible { opacity: 1; }
        /* Tactile (mobile/tablette) : pas de survol → on affiche toujours les actions
           (copier / exporter / noter), sinon elles restent invisibles. */
        @media (hover: none) { .message-actions { opacity: 1; } }

        /* Vérificateur de chiffres : panneau sous une réponse (montants tracés / à vérifier / introuvables) */
        /* Traçabilité de la doctrine cabinet : puces sous la réponse indiquant les règles mobilisées. */
        .doctrine-trace {
            display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
            margin: 10px 0 2px; padding-top: 8px;
            border-top: 1px dashed var(--border-color);
        }
        .doctrine-trace-lbl { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); opacity: .85; }
        .doctrine-chip {
            font: inherit; font-size: 11.5px; line-height: 1.2; cursor: pointer;
            padding: 3px 9px; border-radius: 999px;
            color: rgba(var(--primary-rgb), .95);
            background: rgba(var(--primary-rgb), .08);
            border: 1px solid rgba(var(--primary-rgb), .28);
            max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            transition: background .12s, border-color .12s;
        }
        .doctrine-chip:hover { background: rgba(var(--primary-rgb), .16); border-color: rgba(var(--primary-rgb), .5); }
        .doctrine-chip:active { transform: translateY(.5px); }

        .figure-check {
            margin: 6px 0 14px; padding: 10px 14px; border-radius: 10px;
            background: var(--background-secondary); border: 1px solid var(--border-color);
            font-size: 12.5px; line-height: 1.5;
        }
        .figure-check .fc-head { font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
        .figure-check .fc-warn { color: var(--warning-text, #b45309); font-weight: 700; }
        .figure-check .fc-miss { color: var(--danger, #dc2626); font-weight: 700; }
        .figure-check .fc-ok { color: var(--success, #10b981); font-weight: 600; }
        .figure-check .fc-list { margin: 6px 0 0; padding-left: 18px; }
        .figure-check .fc-list li { margin: 4px 0; }
        .figure-check .fc-list li.fc-missing { color: var(--danger, #dc2626); }
        .figure-check .fc-list li.fc-mismatch { color: var(--warning-text, #b45309); }
        .figure-check .fc-tag { display: block; font-size: 11px; opacity: .85; font-weight: 400; color: var(--text-secondary); }

        /* Provenance : distinguer ce qui vient de l'enregistrement de l'apport extérieur de l'IA */
        .prov-ctx { border-left: 3px solid #14b8a6; padding-left: 12px; }
        .prov-ctx-tag { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #0d9488; margin-bottom: 6px; }
        .prov-ext { margin-top: 16px; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.06); border-radius: 10px; padding: 11px 14px; }
        .prov-ext-head { display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warning-text); margin-bottom: 8px; }
        .prov-ext-sub { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--text-secondary); }
        .prov-ext-body > :first-child { margin-top: 0; }
        .prov-ext-body > :last-child { margin-bottom: 0; }

        .msg-status-badge {
            display: inline-flex; align-items: center; gap: 5px;
            margin-top: 10px; padding: 4px 10px; border-radius: 20px;
            font-size: 11px; font-weight: 500; font-family: inherit;
        }
        .msg-status-interrupted {
            background: rgba(100,116,139,0.1); color: #64748b;
            border: 1px solid rgba(100,116,139,0.2);
        }
        .msg-status-error {
            background: rgba(239,68,68,0.08); color: var(--danger);
            border: 1px solid rgba(239,68,68,0.18);
        }

        .user-info { display:flex; align-items:center; gap:8px; }

        /* ── Jauge de charge DGX (bandeau, visible partout) ─────────────── */
        .topbar-dgx { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:20px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); margin-right:4px; }
        .topbar-dgx-label { font-size:10px; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,0.55); }
        .topbar-dgx-bar { width:46px; height:5px; border-radius:3px; background:rgba(255,255,255,0.18); overflow:hidden; flex-shrink:0; }
        .topbar-dgx-fill { display:block; height:100%; width:0%; border-radius:3px; background:#34d399; transition:width .4s ease, background .3s; }
        .topbar-dgx-val { font-size:12px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; min-width:32px; text-align:right; }
        /* Mobile : on masque la barre de charge mais on GARDE le label « DGX » — sinon le badge
           n'affiche qu'un « 0% » nu, indéchiffrable. */
        @media (max-width:640px) { .topbar-dgx-bar { display:none; } }
        .topbar-dgx { cursor: pointer; }
        .topbar-dgx:hover { background:rgba(255,255,255,0.12); }
        /* Badge « jobs en cours » sur le chip DGX (compteur de la file d'attente). */
        .topbar-dgx-badge {
            display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px;
            padding:0 4px; margin-left:2px; border-radius:9px; background:var(--primary-color); color:#fff;
            font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1;
        }
        /* Infobulle « générations en cours » au survol de la jauge DGX */
        .dgx-popover { position: fixed; z-index: 10001; min-width: 220px; max-width: 340px; max-height: calc(100dvh - 120px); overflow-y: auto; background: #1f2430; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); padding: 11px 13px; font-size: 12.5px; }
        .dgx-pop-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(226,232,240,0.5); margin-bottom: 8px; }
        .dgx-pop-empty { color: rgba(226,232,240,0.6); font-size: 12px; padding: 2px 0; }
        .dgx-pop-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
        .dgx-pop-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; flex-shrink: 0; animation: dgx-pulse 1.2s ease-in-out infinite; }
        .dgx-pop-ini { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(52,211,153,0.18); color: #6ee7b7; font-size: 9px; font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; }
        @keyframes dgx-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
        .dgx-pop-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dgx-pop-time { flex-shrink: 0; font-size: 11px; color: rgba(226,232,240,0.5); font-variant-numeric: tabular-nums; }
        /* En-tête « Serveur IA » du popover DGX (statut + ping + charge + tokens/s). */
        .dgx-pop-sum { display: flex; align-items: center; gap: 7px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,0.10); font-size: 12px; line-height: 1.3; }
        .dgx-pop-sum strong { color: #e2e8f0; font-weight: 700; }
        .dgx-pop-sum-meta { color: rgba(226,232,240,0.6); }

        /* ── Widget utilisateur header ─────────────── */
        .user-widget {
            display: flex; align-items: center; gap: 8px;
            padding: 5px 10px; border-radius: 10px;
            cursor: pointer; transition: background .15s;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            text-decoration: none; color: inherit;
        }
        .user-widget:hover { background: rgba(255,255,255,0.12); }
        .user-avatar {
            width: 30px; height: 30px; border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), #a855f7);
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; font-weight: 700; color: white;
            flex-shrink: 0; letter-spacing: 0.5px;
        }
        .user-widget-name {
            font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9);
            max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }

        /* ── Trio identité du bandeau (drapeau souverain · compte · DGX) ─────────────
           Desktop : pastilles cohérentes avec libellés. Mobile : compact (drapeau = emoji
           seul, compte = avatar seul, DGX = « DGX x% » sans la jauge) → plus de débordement. */
        #hdr-sovereign {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 4px 10px; border-radius: 999px;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
            font-size: 12px; color: rgba(255,255,255,0.85); white-space: nowrap;
        }
        .hdr-sov-flag { font-size: 14px; line-height: 1; }
        @media (max-width: 640px) {
            .header { gap: 6px !important; }
            #hdr-sovereign { padding: 0; background: none; border: none; }
            .hdr-sov-txt { display: none; }
            .user-widget { padding: 4px; gap: 3px; }
            .user-widget-name { display: none; }
            .topbar-dgx { padding: 4px 9px; gap: 5px; margin-right: 0; }
            .topbar-dgx-label { font-size: 9.5px; }
        }

        /* ── Tableaux markdown ───────────────────── */
        .md-table-wrapper {
            overflow-x: auto;
            margin: 10px 0;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        .md-table {
            border-collapse: collapse;
            width: 100%;
            font-size: 13.5px;
            line-height: 1.5;
        }
        .md-table th {
            background: var(--primary-color);
            color: white;
            padding: 9px 14px;
            text-align: left;
            font-weight: 600;
            font-size: 12.5px;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .md-table th:first-child { border-radius: 7px 0 0 0; }
        .md-table th:last-child  { border-radius: 0 7px 0 0; }
        .md-table td {
            padding: 8px 14px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: top;
        }
        .md-table tr:last-child td { border-bottom: none; }
        .md-table tbody tr:nth-child(even) { background: rgba(var(--primary-rgb),0.04); }
        .md-table tbody tr:hover { background: rgba(var(--primary-rgb),0.08); }

        /* Titres, listes, règle markdown */
        .md-h1,.md-h2,.md-h3,.md-h4 { margin: 12px 0 4px; font-weight: 700; }
        .md-h1 { font-size: 1.3em; }
        .md-h2 { font-size: 1.15em; }
        .md-h3 { font-size: 1.05em; }
        .md-h4 { font-size: 0.95em; }
        .md-ul, .md-ol { margin: 6px 0 6px 20px; padding: 0; }
        .md-ul li, .md-ol li { margin-bottom: 3px; }
        .md-hr { border: none; border-top: 1px solid var(--border-color); margin: 12px 0; }

        /* ── Questions pour approfondir ──────────── */
        /* ── Bloc raisonnement (reasoning) ───────────────────────── */
        /* Bloc raisonnement — carte moderne teintée */
        .reasoning-block { margin: 2px 0 14px; border: 1px solid rgba(var(--primary-rgb),0.22); border-radius: 14px; background: linear-gradient(180deg, rgba(var(--primary-rgb),0.06), var(--background-secondary)); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
        .reasoning-block[open] { border-color: rgba(var(--primary-rgb),0.40); box-shadow: 0 2px 14px rgba(var(--primary-rgb),0.10); }
        .reasoning-summary { cursor: pointer; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 9px; user-select: none; list-style: none; transition: color .15s, background .15s; }
        .reasoning-summary::-webkit-details-marker { display: none; }
        .reasoning-summary::marker { content: ''; }
        .reasoning-summary:hover { color: var(--primary-color); background: rgba(var(--primary-rgb),0.06); }
        .reasoning-ico { flex-shrink: 0; color: var(--primary-color); }
        .reasoning-block[open] .reasoning-ico { animation: reasoning-pulse 1.6s ease-in-out infinite; }
        @keyframes reasoning-pulse { 0%,100% { opacity: .4; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }
        /* Curseur de streaming : clignote en opacity (hauteur constante → pas de saut d'affichage) */
        .stream-caret { display: inline-block; animation: stream-caret-blink 1.1s steps(1, end) infinite; }
        @keyframes stream-caret-blink { 50% { opacity: 0; } }
        /* Croix d'effacement dans les champs de recherche (type=search) — visible clair/sombre */
        input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: none; appearance: none;
            height: 14px; width: 14px; margin-left: 6px; cursor: pointer; opacity: .5;
            background-color: var(--text-secondary);
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 18 18M18 6 6 18' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
                    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 18 18M18 6 6 18' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
        }
        input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
        .reasoning-state { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--primary-color); opacity: .9; text-transform: uppercase; letter-spacing: .05em; }
        .reasoning-chevron { flex-shrink: 0; opacity: .45; transition: transform .25s ease; }
        .reasoning-block[open] .reasoning-chevron { transform: rotate(180deg); }
        .reasoning-content { padding: 11px 16px 14px; margin: 0 12px 12px; border-left: 2px solid rgba(var(--primary-rgb),0.5); border-radius: 0 8px 8px 0; background: rgba(var(--primary-rgb),0.045); font-size: 12.5px; color: var(--text-secondary); white-space: pre-wrap; line-height: 1.6; max-height: 320px; overflow: auto; }

        .follow-up-questions {
            margin-top: 16px;
            max-width: 65%;
            margin-left: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .follow-up-questions-label {
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            opacity: 0.3;
            margin-bottom: 8px;
            color: var(--text-color);
        }

        .follow-up-questions-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: flex-end;
        }

        .follow-up-question-btn {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 12px;
            font-family: inherit;
            color: var(--text-color);
            cursor: pointer;
            opacity: 0.45;
            transition: opacity 0.15s, border-color 0.15s, background-color 0.15s;
            text-align: right;
            line-height: 1.4;
        }

        .follow-up-question-btn:hover {
            opacity: 0.9;
            border-color: var(--primary-color);
            background-color: rgba(var(--primary-rgb), 0.06);
        }
        
        /* ── Agent cards ─────────────────────────── */
        #agents-cards-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* ── Agent modal ──────────────────────────── */
        .agent-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .agent-modal-content {
            background: var(--background-color);
            color: var(--text-color);
            border-radius: 12px;
            width: 90%;
            max-width: 580px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 32px rgba(0,0,0,0.25);
        }

        .agent-modal-header {
            display: flex;
            align-items: center;
            padding: 20px 24px 0;
        }

        .agent-modal-header h3 {
            flex: 1;
            margin: 0;
            font-size: 18px;
        }

        .agent-modal-close {
            background: none;
            border: none;
            font-size: 22px;
            cursor: pointer;
            color: var(--text-secondary);
            padding: 0;
            line-height: 1;
        }

        .agent-modal-close:hover { color: var(--text-color); }

        .agent-modal-body {
            padding: 20px 24px;
            overflow-y: auto;
            flex: 1;
        }

        .agent-modal-footer {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 24px;
            border-top: 1px solid var(--border-color);
        }

        .skill-token-preset {
            padding: 4px 10px; font-size: 12px; border-radius: 6px; cursor: pointer;
            border: 1px solid var(--border-color); background: var(--background-color);
            color: var(--text-secondary); transition: border-color .15s, color .15s, background .15s;
        }
        .skill-token-preset:hover, .skill-token-preset.active {
            border-color: var(--primary-color); color: var(--primary-color);
            background: rgba(var(--primary-rgb),.08);
        }

        /* ── Toast ────────────────────────────────── */
        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(16px);
            background: #1a1a1a;
            color: white;
            padding: 9px 20px;
            border-radius: 20px;
            font-size: 13px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s, transform 0.2s;
            z-index: 9999;
            /* pas de nowrap : un message long débordait de l'écran des deux côtés sur mobile */
            white-space: normal;
            max-width: min(560px, calc(100vw - 48px));
            box-sizing: border-box;
            text-align: center;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Erreur : fond rouge + retour à la ligne (les messages d'erreur sont plus longs) */
        .toast.error {
            background: var(--error-color);
            white-space: normal;
            max-width: min(560px, calc(100vw - 48px));
            text-align: center;
        }

        /* Succès : fond vert (le ✓ manuel n'est plus nécessaire, l'état porte le sens). */
        .toast.success {
            background: var(--success-color, var(--success));
        }

        /* Verrou de scroll : le fond ne défile plus derrière un overlay plein écran ouvert. */
        body.has-nl-overlay { overflow: hidden; }

        /* ── Drag & drop overlay ─────────────────── */
        #chat-drop-overlay {
            display: none;
            position: absolute;
            inset: 0;
            background: rgba(var(--primary-rgb), 0.08);
            border: 2px dashed var(--primary-color);
            border-radius: 8px;
            z-index: 100;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        #chat-drop-overlay.active {
            display: flex;
        }

        #chat-drop-overlay span {
            font-size: 36px;
            line-height: 1;
        }

        #chat-drop-overlay p {
            font-size: 14px;
            font-weight: 500;
            color: var(--primary-color);
            opacity: 0.8;
            margin: 0;
        }

        /* Bouton d'analyse rapide sur pièces jointes (au-dessus de la barre de saisie) */
        #chat-quick-analyze { padding: 2px 2px 8px; }
        #chat-quick-analyze-btn {
            display: inline-flex; align-items: center; gap: 7px;
            padding: 6px 13px; border: 1px solid rgba(99,102,241,0.30);
            border-radius: 9px; background: rgba(99,102,241,0.10); color: #6366f1;
            font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
            transition: background .15s, border-color .15s;
        }
        #chat-quick-analyze-btn:hover { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.5); }

        /* Streaming message styles */
        .streaming-message {
            position: relative;
        }
        
        .streaming-message::after {
            content: '';
            position: absolute;
            right: -10px;
            top: 50%;
            width: 6px;
            height: 6px;
            margin-top: -3px;
            background-color: var(--primary-color);
            border-radius: 50%;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.4; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
            100% { opacity: 0.4; transform: scale(1); }
        }

        /* ── Onglets sidebar ─────────────────────────────────── */
        .sidebar-tabs {
            display: flex;
            padding: 8px 6px 10px;
            gap: 3px;
            flex-shrink: 0;
        }
        /* Spécificité 0-2-0 pour battre .sidebar button (0-1-1) */
        .sidebar-tabs .sidebar-tab-btn {
            /* base auto (pas 0) : chaque onglet part de la largeur de SON libellé —
               sinon largeurs égales et « Contacts » se faisait rogner */
            flex: 1 1 auto;
            min-width: 0;
            width: auto;
            /* Libellé sur UNE ligne (pas de retour à la ligne qui déséquilibrait le rail) */
            white-space: nowrap;
            overflow: hidden;
            padding: 7px 2px 6px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
            color: rgba(226, 232, 240, 0.62);
            font-size: 10px;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 0.02em;
            transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        .sidebar-tabs .sidebar-tab-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
        .sidebar-tabs .sidebar-tab-btn:hover {
            background: rgba(255,255,255,0.09);
            color: rgba(226,232,240,0.7);
            border-color: rgba(255,255,255,0.1);
        }
        #tab-home.active {
            color: #fbbf24;
            background: rgba(251,191,36,0.13);
            border-color: rgba(251,191,36,0.25);
            box-shadow: 0 0 0 0px rgba(251,191,36,0.2);
        }
        #tab-conversations.active {
            color: #60a5fa;
            background: rgba(96,165,250,0.13);
            border-color: rgba(96,165,250,0.25);
        }
        #tab-clients.active {
            color: #34d399;
            background: rgba(52,211,153,0.13);
            border-color: rgba(52,211,153,0.25);
        }
        #tab-home:not(.active):hover { color: #fbbf24; }
        #tab-conversations:not(.active):hover { color: #60a5fa; }
        #tab-clients:not(.active):hover { color: #34d399; }
        #sidebar-conversations-view {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            min-height: 0;
        }
        .conv-search-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.07);
            border-radius: 6px;
            padding: 5px 8px;
            margin-bottom: 10px;
            flex-shrink: 0;
        }
        .conv-search-wrap svg { opacity: 0.4; flex-shrink: 0; color: var(--sidebar-text); }
        .conv-search-wrap input {
            flex: 1;
            background: none;
            border: none;
            outline: none;
            color: var(--sidebar-text);
            font-size: 12px;
            min-width: 0;
        }
        .conv-search-wrap input::placeholder { color: rgba(226,232,240,0.35); }
        #rec-dict-btn:hover { opacity: 1 !important; text-decoration: underline; }
        /* Matrice de couverture DCE (admin) */
        .dcecov-table { border-collapse: collapse; font-size: 12px; width: 100%; }
        .dcecov-table th, .dcecov-table td { border: 1px solid var(--border-color); padding: 6px 8px; text-align: center; white-space: nowrap; }
        .dcecov-table thead th { background: var(--background-secondary); font-weight: 600; }
        .dcecov-table .dcecov-lot { text-align: left; font-weight: 600; }
        .dcecov-table td.dcecov-ok  { background: rgba(16,185,129,.20); font-weight: 600; }
        .dcecov-table td.dcecov-mid { background: rgba(245,158,11,.20); }
        .dcecov-table td.dcecov-gap { color: var(--text-secondary); }
        #sidebar-clients-view {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            min-height: 0;
            gap: 8px;
        }

        /* ── Onglet Enregistrements sidebar ────────────────────── */
        #tab-recordings.active {
            color: #a78bfa;
            background: rgba(167,139,250,0.13);
            border-color: rgba(167,139,250,0.25);
        }
        #tab-recordings:not(.active):hover { color: #a78bfa; }
        #sidebar-home-view { display:flex; flex-direction:column; flex:1; overflow:hidden; min-height:0; }
        #sidebar-recordings-view { display:flex; flex-direction:column; flex:1; overflow:hidden; min-height:0; }
        #rec-folders-section { overflow:hidden; padding-bottom:6px; border-bottom:1px solid rgba(129,140,248,0.35); margin-bottom:8px; }
        #rec-sidebar-list { flex:1; overflow-y:auto; padding:0 0 12px; }

        /* Folder header — prefixé .sidebar pour battre les règles globales */
        .sidebar .rec-sidebar-folder-header {
            display:flex; align-items:center; gap:6px; padding:7px 10px 4px;
            font-size:11px; font-weight:600; color:rgba(226,232,240,0.65);
            cursor:default; user-select:none;
            /* Hauteur fixe : sans ça, l'apparition des boutons d'action (18px) au survol
               agrandissait la ligne et, avec align-items:center, faisait descendre le titre. */
            min-height:30px; box-sizing:border-box;
        }
        .sidebar .rec-sidebar-folder-header .rec-sidebar-folder-icon {
            opacity:.6; font-size:12px;
        }
        /* Boutons TOUJOURS dans le flux (visibility, pas display) : sinon leur apparition au
           survol changeait la hauteur de la ligne → le titre descendait. Invisibles au repos. */
        .sidebar .rec-sidebar-folder-actions { margin-left:auto; display:flex; visibility:hidden; gap:2px; align-items:center; }
        .sidebar .rec-sidebar-folder-header:hover .rec-sidebar-folder-actions { visibility:visible; }

        /* Folder action buttons — spécificité haute pour battre toute règle globale */
        .sidebar .rec-sidebar-folder-btn {
            display:inline-flex; align-items:center; justify-content:center;
            width:18px; height:18px; padding:0;
            border:none; background:none; cursor:pointer;
            border-radius:4px; font-size:11px; line-height:1;
            color:rgba(226,232,240,0.45); transition:all .12s;
            /* reset tout héritage global */
            width:18px !important; min-width:0 !important;
        }
        .sidebar .rec-sidebar-folder-btn:hover {
            background:rgba(226,232,240,0.1) !important; color:rgba(226,232,240,0.9) !important;
        }

        /* Recording item */
        .rec-sidebar-item {
            padding:7px 32px 7px 20px; cursor:pointer; border-radius:6px; margin:1px 6px;
            display:flex; flex-direction:column; gap:2px; position:relative; transition:background .12s;
        }
        .rec-sidebar-item:hover { background:rgba(255,255,255,0.07); }
        .rec-sidebar-item.active { background:rgba(99,102,241,0.2); }
        .rec-sidebar-item-title {
            font-size:12px; font-weight:600; color:rgba(226,232,240,0.88);
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        }
        .rec-sidebar-item-meta { font-size:10px; color:rgba(226,232,240,0.38); margin-top:1px; }
        .rec-sidebar-item-preview { font-size:10px; color:rgba(226,232,240,0.30); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        /* Menu ··· — spécificité haute obligatoire */
        .sidebar .rec-sidebar-item-menu {
            position:absolute !important; right:6px !important; top:50% !important;
            transform:translateY(-50%) !important;
            display:none !important; width:22px !important; height:22px !important;
            align-items:center !important; justify-content:center !important;
            border:none !important; background:none !important;
            color:rgba(226,232,240,0.5) !important; cursor:pointer !important;
            border-radius:4px !important; font-size:15px !important;
            padding:0 !important; line-height:1 !important;
            min-width:0 !important;
        }
        .rec-sidebar-item:hover .rec-sidebar-item-menu,
        .rec-sidebar-item.active .rec-sidebar-item-menu { display:flex !important; }
        .sidebar .rec-sidebar-item-menu:hover {
            background:rgba(255,255,255,0.12) !important; color:#fff !important;
        }

        .rec-sidebar-unfiled-label {
            padding:8px 10px 3px; font-size:10px; font-weight:700;
            text-transform:uppercase; letter-spacing:.07em; color:rgba(226,232,240,0.35);
        }

        /* ── Vue dossier client centrale ───────────────────────── */
        #client-center-content { overflow: hidden; background: var(--background-color); }
        #client-center-content.active { flex-direction: row; }
        .ccc-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

        .client-center-wrap { max-width: 860px; margin: 0 auto; padding: 28px 32px 60px; flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; }
        @media (max-width: 768px) { .client-center-wrap { padding: 16px 12px 60px; } }
        .client-center-wrap::-webkit-scrollbar { width: 6px; }
        .client-center-wrap::-webkit-scrollbar-track { background: transparent; }
        .client-center-wrap::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
        .client-center-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
        .ccc-info-sidebar {
            width: 0; overflow: hidden; flex-shrink: 0;
            border-left: 1px solid var(--border-color);
            background: var(--background-secondary);
            transition: width .22s ease;
        }
        .ccc-info-sidebar.open { width: 300px; overflow-y: auto; }
        .ccc-info-sidebar-inner { padding: 24px 20px; width: 300px; box-sizing: border-box; }
        .ccc-info-sidebar-inner .client-center-grid { grid-template-columns: 1fr; }
        .ccc-info-close { display: none; }   /* visible en tiroir plein écran mobile uniquement */
        @media (max-width: 768px) {
            /* Infos / Contacts : tiroir plein écran (la sidebar 300px inline sortait de l'écran).
               Bords explicites (compat iOS) + hauteur 100dvh + z-index au-dessus de tout. */
            .ccc-info-sidebar.open {
                position: fixed !important; top: 0; right: 0; bottom: 0; left: 0;
                width: auto !important; height: 100dvh; max-width: none !important;
                z-index: 10002; border-left: none; background: var(--background-color);
                display: block; overflow-y: auto;
            }
            .ccc-info-sidebar.open .ccc-info-sidebar-inner { width: 100% !important; box-sizing: border-box; padding-top: 0;
                padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
            .ccc-info-close {
                display: flex; align-items: center; gap: 7px;
                position: sticky; top: 0; z-index: 5;
                width: 100%; box-sizing: border-box; margin: 0 0 4px;
                /* PWA plein écran (viewport-fit=cover) : sans la safe-area, le bouton
                   passe sous la barre de statut iOS et devient intouchable. */
                padding: calc(13px + env(safe-area-inset-top, 0px)) 16px 13px;
                border: none; border-bottom: 1px solid var(--border-color);
                background: var(--background-color); color: var(--text-secondary);
                font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
            }
        }
        /* ── Tablette (iPad 769-1099px) : sidebar 280px + panneau Infos 300px fixes ne
           laissaient que ~230px à la page centrale en portrait (rognée par overflow
           hidden). Le panneau Infos/Contacts devient un TIROIR superposé à droite,
           la page centrale garde toute sa largeur. ── */
        @media (min-width: 769px) and (max-width: 1099px) {
            /* Largeur récupérée sur les colonnes fixes de gauche */
            .sidebar { width: 240px; }
            .rec-plaud-list { width: 240px; }
            .client-center-wrap { padding: 20px 18px 60px; }
            /* Panneau admin : 500px fixes laissaient un demi-écran cliquable derrière
               (sans backdrop) — incohérent avec les autres panneaux, quasi pleins. */
            .admin-panel { width: min(680px, 96vw); }
            /* Cibles tactiles : l'iPad reçoit le layout desktop, ses contrôles 26-28px
               (chips du chat, actions trames/garanties) restent utilisés au doigt. */
            .toggle-chip { min-width: 36px; min-height: 36px; }
            .trame-act, .gar-up, .gar-down { min-width: 36px; min-height: 36px; }
            .ccc-info-sidebar.open {
                position: fixed; top: 0; right: 0; bottom: 0; left: auto;
                width: 400px; max-width: 92vw; height: 100dvh;
                z-index: 10002; overflow-y: auto;
                background: var(--background-color);
                border-left: 1px solid var(--border-color);
                box-shadow: -16px 0 48px rgba(0,0,0,.25);
            }
            .ccc-info-sidebar.open .ccc-info-sidebar-inner { width: 100% !important; box-sizing: border-box; }
            .ccc-info-close {
                display: flex; align-items: center; gap: 7px;
                position: sticky; top: 0; z-index: 5;
                width: 100%; box-sizing: border-box; margin: 0 0 4px; padding: 13px 16px;
                border: none; border-bottom: 1px solid var(--border-color);
                background: var(--background-color); color: var(--text-secondary);
                font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
            }
        }
        /* Formulaire contact DANS la sidebar (étroite) : le champ email/téléphone était
           écrasé à ~6 caractères par le sélecteur de type et le ×. Le champ prend sa
           ligne (pleine largeur), type + suppression passent dessous. !important requis :
           les styles du rang sont inline (générés en JS). */
        #ccc-sidebar-contacts-list .cch-row { flex-wrap: wrap; }
        #ccc-sidebar-contacts-list .cch-row .cch-val { flex: 1 1 100% !important; }

        /* ── Topbar sticky client center ───────────────────────────── */
        #ccc-topbar {
            display: none; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 10px 20px; border-bottom: 1px solid var(--border-color);
            background: var(--background-color); flex-shrink: 0;
        }
        #ccc-topbar.visible { display: flex; }
        .ccc-tb-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
        .ccc-tb-avatar {
            width: 34px; height: 34px; border-radius: 9px; background: var(--primary-color);
            color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center;
            justify-content: center; flex-shrink: 0; text-transform: uppercase; overflow: hidden;
        }
        .ccc-tb-name { font-size: 14px; font-weight: 700; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ccc-tb-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .ccc-tb-btn { gap: 5px; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
        .ccc-tb-btn svg { flex-shrink: 0; }
        .ccc-tb-btn:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb),.06); }
        .ccc-tb-btn:active { transform: translateY(0.5px); }
        /* État sélectionné (toggles : infos, contacts, données publiques) — teinte primaire discrète */
        .ccc-tb-btn.active { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb),.12); }
        /* Action destructrice (suppression) — rouge sobre */
        /* Toolbar fiche client en icônes seules : libellés masqués (tooltip via title), boutons
           compacts. Le badge Contacts et le caret Actions restent visibles. */
        .ccc-tb-actions .ccc-tb-btn { padding: 7px 9px; gap: 4px; }
        .ccc-tb-label { display: none; }
        /* Glisser-déposer de fichiers sur la fiche client */
        .client-center-wrap.ccc-drop-active {
            outline: 2px dashed var(--primary-color); outline-offset: -10px;
            background: rgba(var(--primary-rgb),.05);
        }
        .client-center-wrap.ccc-drop-active::before {
            content: "Déposez les documents ici pour les importer";
            position: sticky; top: 0; display: block; z-index: 5;
            padding: 10px; margin-bottom: 8px; text-align: center;
            font-size: 13px; font-weight: 600; color: var(--primary-color);
            background: var(--chat-background, #fff); border-radius: 8px;
        }
        .pub-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
        .pub-head-t { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); }
        .pub-refresh { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; border:1px solid var(--border-color); background:var(--background-secondary); color:var(--text-secondary); cursor:pointer; flex-shrink:0; transition:.15s; }
        .pub-refresh:hover { color:#14b8a6; border-color:rgba(20,184,166,.4); }
        .pub-refresh.spin svg { animation:pub-spin .8s linear infinite; }
        .pub-copy { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border:1px solid var(--border-color); border-radius:8px; background:var(--background-secondary); color:var(--text-secondary); font-size:11.5px; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap; }
        .pub-copy:hover { color:#14b8a6; border-color:rgba(20,184,166,.4); background:rgba(20,184,166,.06); }
        .pub-badge { white-space:nowrap; }
        @keyframes pub-spin { to { transform:rotate(360deg); } }
        .pub-sec { margin-bottom:16px; }
        .pub-sec-h { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); margin:0 0 7px; display:flex; align-items:center; gap:6px; }
        .pub-sec-h svg { opacity:.6; }
        .pub-card { background:var(--background-secondary); border:1px solid var(--border-color); border-radius:11px; padding:11px 13px; }
        .pub-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:12.5px; line-height:1.45; border-bottom:1px solid var(--border-color); }
        .pub-row:first-child { padding-top:0; }
        .pub-row:last-child { border-bottom:none; padding-bottom:0; }
        .pub-row .k { color:var(--text-secondary); flex-shrink:0; }
        .pub-row .v { color:var(--text-color); font-weight:600; text-align:right; word-break:break-word; }
        .pub-row .v.mono { font-variant-numeric:tabular-nums; letter-spacing:.02em; }
        /* Cadres étroits (Identité, Territoire) : valeur sous le libellé pour gagner en largeur */
        .pub-sec--stack .pub-row { flex-direction:column; align-items:stretch; gap:1px; }
        .pub-sec--stack .pub-row .k { font-size:11px; }
        .pub-sec--stack .pub-row .v { text-align:left; }
        .pub-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; }
        .pub-chips { display:flex; flex-wrap:wrap; gap:6px; }
        /* inline-block + max-width:100% : un libellé long (« Inondations et/ou Coulées de Boue »)
           s'enroule DANS la pastille sans déborder du panneau, et le compteur reste collé au texte
           (l'ancien inline-flex/align-items:center faisait flotter le nombre à droite sur 2 lignes). */
        .pub-chip { display:inline-block; max-width:100%; padding:3px 9px; border-radius:7px; font-size:11px; font-weight:500; line-height:1.35; background:var(--background-primary,var(--background-color)); color:var(--text-color); border:1px solid var(--border-color); }
        .pub-chip .n { font-weight:700; color:var(--text-secondary); white-space:nowrap; }

        /* ── Cartographie des risques par bâtiment ── */
        .rm-recap { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
        .rm-stat { font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:8px; background:var(--background-secondary); border:1px solid var(--border-color); color:var(--text-color); }
        .rm-stat-flood { background:rgba(210,59,47,.10); border-color:rgba(210,59,47,.30); color:#c0392b; }
        .rm-stat-argile { background:rgba(224,139,0,.10); border-color:rgba(224,139,0,.30); color:#c47a00; }
        .rm-stat-mut { color:var(--text-secondary); font-weight:500; }
        .rm-layers { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:10px; font-size:12.5px; color:var(--text-secondary); }
        .rm-layers label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
        #rm-map { height:440px; border-radius:10px; overflow:hidden; border:1px solid var(--border-color); }
        @media (max-width:768px){ #rm-map { height:320px; } }
        /* Icône (emoji ou flèche) rendue à la même taille que les SVG des autres boutons. */
        .ccc-rm-toolbar .ccc-rm-ico { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
        /* Mobile : barre d'outils cartographie en UNE rangée de boutons icône-seule, à parts
           égales et côte à côte (les libellés sont masqués, repris en title/aria-label). */
        @media (max-width: 768px) {
            .ccc-rm-toolbar { width: 100%; gap: 8px; flex-wrap: nowrap; }
            .ccc-rm-toolbar .ccc-tb-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 11px 0; }
            .ccc-rm-toolbar .ccc-rm-lbl { display: none; }
            .ccc-rm-toolbar .ccc-rm-ico { font-size: 17px; }
        }
        .rm-table { width:100%; border-collapse:collapse; font-size:12.5px; }
        .rm-table th, .rm-table td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--border-color); }
        .rm-table th { font-weight:600; color:var(--text-secondary); background:var(--background-secondary); position:sticky; top:0; }
        .rm-table tbody tr:hover { background:var(--background-secondary); }
        .rm-table td:nth-child(3) { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
        .pub-recent { display:flex; flex-direction:column; gap:5px; margin-top:9px; }
        .pub-recent-i { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:11.5px; }
        .pub-recent-i .d { color:var(--text-secondary); font-variant-numeric:tabular-nums; flex-shrink:0; }
        .pub-empty { text-align:center; padding:22px 10px; }
        .pub-empty-ic { width:40px; height:40px; margin:0 auto 12px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(20,184,166,.1); color:#14b8a6; }
        .pub-empty-tx { font-size:12.5px; color:var(--text-secondary); line-height:1.5; margin-bottom:15px; }
        .pub-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:9px; border:1px solid var(--primary-color); background:var(--primary-color); color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.1); transition:box-shadow .15s; }
        .pub-btn:hover { box-shadow:0 2px 6px rgba(0,0,0,.15); }
        .pub-btn.ghost { background:var(--background-color); color:var(--text-secondary); border:1px solid var(--border-color); box-shadow:none; transition:border-color .15s, color .15s, background .15s; }
        .pub-btn.ghost:hover { border-color:var(--primary-color); color:var(--primary-color); background:rgba(var(--primary-rgb),.06); }
        .pub-src { font-size:10.5px; color:var(--text-secondary); opacity:.7; margin-top:4px; text-align:center; }
        .pub-map { width:100%; height:180px; border:1px solid var(--border-color); border-radius:10px; display:block; }
        .pub-loading { display:flex; align-items:center; gap:10px; padding:20px 4px; font-size:12.5px; color:var(--text-secondary); }
        .ccc-tb-badge { display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:currentColor;font-size:10px;font-weight:700;color:#fff;margin-left:1px; }
        .ccc-tb-btn--contacts .ccc-tb-badge { background: var(--success); }
        .ccc-tb-btn--edit { background: var(--primary-color); color: white; border-color: transparent; width: 100%; justify-content: center; padding: 9px 16px; font-size: 13px; border-radius: 9px; }
        .ccc-tb-btn--edit:hover { opacity: .88; }
        /* Sidebar modifier header */
        .ccc-sidebar-edit-zone { padding: 16px 20px 0; }
        /* Actions Contacts : discrètes, sous la liste (petits boutons fantômes, pas de gros bleu). */
        .ccc-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 20px 20px; }
        .ccc-contact-add {
            display: inline-flex; align-items: center; gap: 6px;
            background: transparent; border: 1px solid var(--border-color); border-radius: 8px;
            color: var(--text-secondary); font-family: inherit; font-size: 12.5px; font-weight: 500;
            line-height: 1; padding: 6px 11px; cursor: pointer;
            transition: border-color .15s, color .15s, background .15s;
        }
        .ccc-contact-add svg { flex-shrink: 0; opacity: .75; }
        .ccc-contact-add:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb), .06); }
        .ccc-contact-add:hover svg { opacity: 1; }
        .ccc-contact-add:active { transform: translateY(.5px); }
        /* white-space:nowrap → les libellés (« Corriger le classement », « Saisie manuelle »)
           ne passent plus sur 2 lignes : tous les boutons ont la même hauteur.
           min-height fige la hauteur même pour un bouton icône-seule. */
        .client-center-btn { gap: 6px; padding: 7px 13px; font-size: 12.5px; white-space: nowrap; min-height: 34px; justify-content: center; }
        .client-center-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
        /* Cartes Compréhension / Sinistralité : boutons SECONDAIRES en icône seule (gain de place) ;
           le bouton PRINCIPAL (Générer/Régénérer) garde son libellé. Le titre au survol reste
           informatif (title/aria-label). */
        .ccc-sin-header .client-center-btn:not(.primary) .ccc-sin-lbl { display: none; }
        .ccc-sin-header .client-center-btn:not(.primary) { padding: 7px 10px; gap: 0; }
        .client-center-btn:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb),.06); }
        .client-center-btn:active { transform: translateY(0.5px); }
        .client-center-btn.primary { background: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
        .client-center-btn.primary:hover { background: var(--primary-color); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
        .client-center-btn.danger { color: var(--danger); }
        .client-center-btn.danger:hover { border-color: var(--danger); color: #fff; background: var(--danger); }
        /* ── Bandeau d'aperçu (hero) de la fiche client ── */
        /* Plus de grand cadre coloré : le hero n'est qu'un conteneur, seul le cartouche est encadré. */
        .ccc-hero { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
        .ccc-hero-avatar { width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; background: var(--primary-color); color: #fff; overflow: hidden; }
        .ccc-hero-idbody { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
        .ccc-hero-name { min-width: 0; font-size: 18px; font-weight: 800; color: var(--text-color); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
        .ccc-hero-badges { display: flex; gap: 6px; flex-wrap: wrap; }
        .ccc-hero-badge { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--background-color); border: 1px solid var(--border-color); border-radius: 7px; padding: 2px 9px; }
        .ccc-hero-badge-loc { cursor: pointer; transition: border-color .15s, color .15s; }
        .ccc-hero-badge-loc:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .ccc-hero-risk { font-size: 11px; font-weight: 600; color: var(--warning-text); background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); border-radius: 7px; padding: 2px 9px; }
        .ccc-hero-report { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s; }
        .ccc-hero-report:hover { border-color: var(--primary-color); color: var(--primary-color); }
        /* En-tête du hero : un CARTOUCHE encadré à gauche (logo + nom + caractéristiques dessous)
           et, HORS du cartouche, les 2 boutons d'action à droite. */
        .ccc-hero-top { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
        /* Cartouche : logo (gros) aligné en HAUT, à droite le nom puis les badges en colonne. */
        .ccc-hero-card { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 auto; min-width: 0; padding: 16px 18px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--background-secondary); }
        .ccc-hero-actions { position: relative; }
        /* Actions sur UNE rangée, hors cartouche : « Actions rapides » et « Préparer le dossier »
           côte à côte, en grille 2 colonnes égales → largeurs strictement identiques. */
        /* Boutons EMPILÉS (l'un sur l'autre) : le bloc de droite se rétrécit → le cartouche du nom s'élargit. */
        .ccc-hero-right { flex-shrink: 0; display: grid; grid-template-columns: 1fr; gap: 8px; align-content: start; min-width: 170px; }
        /* Deux boutons STRICTEMENT identiques (style ghost teinté accent) et de même largeur. */
        .ccc-hero-actions-btn, .ccc-prepare-btn {
            display: inline-flex; align-items: center; gap: 6px; width: 100%; cursor: pointer;
            padding: 7px 13px; border-radius: 9px; font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
            border: 1px solid rgba(var(--primary-rgb), .20);
            color: var(--primary-color); background: rgba(var(--primary-rgb), .06);
            transition: background .15s, border-color .15s;
        }
        .ccc-hero-actions-btn:hover, .ccc-prepare-btn:hover { background: rgba(var(--primary-rgb), .11); border-color: rgba(var(--primary-rgb), .38); color: var(--primary-color); }
        .ccc-hero-actions-btn:active, .ccc-prepare-btn:active { background: rgba(var(--primary-rgb), .16); }
        .ccc-prepare-btn:disabled { cursor: default; opacity: .65; background: rgba(var(--primary-rgb), .06); border-color: rgba(var(--primary-rgb), .18); }
        .ccc-prepare-ico { flex-shrink: 0; opacity: .85; }
        /* Accès directs (Préparer / Mémo / Cartographie / Email / Documents) : rangée d'icônes du hero. */
        .ccc-hero-quick { display: flex; flex-wrap: wrap; gap: 8px; }
        .ccc-hero-quick-btn {
            position: relative; flex: 1 1 40px; min-width: 40px; overflow: hidden;
            display: inline-flex; align-items: center; justify-content: center;
            min-height: 34px; padding: 6px; cursor: pointer; font-family: inherit;
            border: 1px solid rgba(var(--primary-rgb), .20); border-radius: 9px;
            color: var(--primary-color); background: rgba(var(--primary-rgb), .06);
            transition: background .15s, border-color .15s, transform .08s;
        }
        .ccc-hero-quick-btn:hover { background: rgba(var(--primary-rgb), .12); border-color: rgba(var(--primary-rgb), .4); }
        .ccc-hero-quick-btn:active { transform: translateY(0.5px); }
        .ccc-hero-quick-btn:disabled { cursor: default; }
        /* Extraction « garanties par lot » en cours : l'icône tourne. */
        .ccc-hero-quick-btn.is-loading { pointer-events: none; opacity: .7; }
        .ccc-hero-quick-btn.is-loading svg { animation: spin .9s linear infinite; }
        @media (prefers-reduced-motion: reduce) { .ccc-hero-quick-btn.is-loading svg { animation: none; } }
        /* « Préparer » en cours : icône pleine + mini barre de progression en bas (remplie selon --prep-pct). */
        .ccc-hero-quick-btn.preparing { opacity: 1; border-color: rgba(var(--primary-rgb), .4); }
        .ccc-hero-quick-btn.preparing .ccc-prepare-ico { animation: ccc-prep-pulse 1.4s ease-in-out infinite; }
        .ccc-hero-quick-btn.preparing::after {
            content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; border-radius: 2px;
            background: linear-gradient(to right, var(--primary-color) calc(var(--prep-pct, 0) * 1%), rgba(var(--primary-rgb), .22) 0);
            transition: background .3s;
        }
        @keyframes ccc-prep-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
        @media (prefers-reduced-motion: reduce) { .ccc-hero-quick-btn.preparing .ccc-prepare-ico { animation: none; } }
        /* Le chevron du menu « Actions rapides » est poussé à droite (pastille pleine largeur). */
        .ccc-hero-actions-btn > svg:last-child { margin-left: auto; }
        /* Icône ✉️ = dropdown (Répondre / Importer un email). */
        .ccc-hero-quick-mailwrap { position: relative; flex: 1 1 40px; min-width: 40px; display: flex; }
        .ccc-hero-quick-mailwrap > .ccc-hero-quick-btn { flex: 1; width: 100%; }
        .ccc-hero-quick-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; min-width: 210px; flex-direction: column; gap: 1px; padding: 5px; background: var(--background-color); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
        .ccc-hero-quick-menu.open { display: flex; }
        .ccc-hero-quick-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; border-radius: 7px; font-size: 13px; font-family: inherit; color: var(--text-color); cursor: pointer; }
        .ccc-hero-quick-menu button:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
        /* Modale « Importer un email ». */
        .ccc-email-dlg { width: min(520px, 94vw); text-align: left; }
        .ccc-email-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; border: 2px dashed var(--border-color); border-radius: 12px; color: var(--text-secondary); text-align: center; }
        .ccc-email-drop.over { border-color: var(--primary-color); background: rgba(var(--primary-rgb), .05); }
        .ccc-email-drop > svg { color: var(--primary-color); opacity: .85; }
        .ccc-email-drop-txt { font-size: 12.5px; line-height: 1.5; }
        .ccc-email-pick { border: none; background: none; color: var(--primary-color); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }
        .ccc-email-fname { font-size: 12px; font-weight: 600; color: var(--text-color); }
        .ccc-email-or { text-align: center; font-size: 11.5px; color: var(--text-secondary); margin: 12px 0 8px; }
        .ccc-email-text { width: 100%; box-sizing: border-box; min-height: 120px; border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text-color); background: var(--background-secondary); outline: none; resize: vertical; }
        .ccc-email-text:focus { border-color: var(--primary-color); }
        .ccc-email-chk { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
        .ccc-email-chk input { margin-top: 2px; accent-color: var(--primary-color); }
        /* Éditeur des dates de marché (réutilise .ccc-lot-form / .ccc-lot-fld). */
        .ccc-marche-dlg { width: min(480px, 94vw); text-align: left; }
        .ccc-marche-relance { margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--primary-color); min-height: 16px; line-height: 1.4; }
        /* ── Calendrier des DLRO (grille mensuelle) ── */
        .dlro-cal-modal { width: min(860px, 96vw); max-width: 860px; }
        .dlro-nav { border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
        .dlro-nav:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .dlro-month { font-size: 14px; font-weight: 700; color: var(--text-color); min-width: 130px; text-align: center; }
        .dlro-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
        .dlro-dow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); text-align: center; padding: 2px 0 4px; }
        .dlro-cell { min-height: 78px; border: 1px solid var(--border-color); border-radius: 9px; padding: 5px 6px; background: var(--background-secondary); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
        .dlro-cell.dlro-empty { border: none; background: none; }
        /* Week-ends : fond distinct (placé AVANT .dlro-today/.dlro-has qui gardent la priorité). */
        .dlro-cell.dlro-weekend { background: rgba(100, 116, 139, .12); }
        .dlro-dow.dlro-dow-we { color: var(--primary-color); }
        .dlro-cell.dlro-past { opacity: .5; }
        .dlro-cell.dlro-today { border-color: var(--primary-color); box-shadow: inset 0 0 0 1px var(--primary-color); }
        .dlro-cell.dlro-has { background: rgba(var(--primary-rgb), .05); }
        .dlro-daynum { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
        .dlro-cell.dlro-today .dlro-daynum { color: var(--primary-color); }
        .dlro-chips { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
        .dlro-chip { display: block; width: 100%; text-align: left; border: none; border-radius: 5px; padding: 2px 6px; font-size: 10.5px; font-weight: 600; font-family: inherit; cursor: pointer; background: var(--danger); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dlro-chip:hover { filter: brightness(1.08); }
        @media (max-width: 640px) { .dlro-cell { min-height: 60px; } .dlro-chip { font-size: 9.5px; } }
        /* Légende du calendrier DLRO : couleur = type de collectivité. */
        .dlro-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; }
        .dlro-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
        .dlro-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
        /* ── Vue « Relances des marchés » (liste + export Excel) ── */
        .rel-xls { border: 1px solid var(--primary-color); background: rgba(var(--primary-rgb), .08); color: var(--primary-color); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
        .rel-xls:hover { background: rgba(var(--primary-rgb), .16); }
        .rel-row { display: flex; gap: 14px; align-items: flex-start; padding: 11px 4px; border-bottom: 1px solid var(--border-color); }
        .rel-row:last-child { border-bottom: none; }
        .rel-date { flex: 0 0 118px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); padding-top: 1px; }
        .rel-row.rel-due .rel-date { color: var(--danger); }
        .rel-pill { display: inline-block; margin-top: 3px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--danger); color: #fff; border-radius: 20px; padding: 1px 7px; }
        .rel-main { flex: 1; min-width: 0; }
        .rel-client { border: none; background: none; padding: 0; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--primary-color); cursor: pointer; text-align: left; }
        .rel-client:hover { text-decoration: underline; }
        .rel-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
        .rel-contacts { font-size: 12px; color: var(--text-color); margin-top: 5px; overflow-wrap: anywhere; }
        .rel-contacts a { color: var(--primary-color); text-decoration: none; }
        .rel-contacts a:hover { text-decoration: underline; }
        /* Groupement des relances par année — replié par défaut. */
        .rel-year-block { border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
        .rel-year-header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; user-select: none; background: var(--bg-subtle, rgba(127,127,127,.05)); }
        .rel-year-header:hover { background: rgba(127, 127, 127, .1); }
        .rel-year-chevron { font-size: 11px; color: var(--text-secondary); transition: transform .15s; }
        .rel-year-header.open .rel-year-chevron { transform: rotate(90deg); }
        .rel-year-label { font-size: 15px; font-weight: 800; color: var(--text-color); }
        .rel-year-count { font-size: 11px; font-weight: 700; color: var(--text-secondary); background: rgba(127, 127, 127, .15); border-radius: 20px; padding: 1px 9px; }
        .rel-year-xls { margin-left: auto; border: 1px solid var(--border-color); background: var(--card-bg, #fff); color: var(--primary-color); font-family: inherit; font-size: 11.5px; font-weight: 700; border-radius: 7px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
        .rel-year-xls:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
        .rel-year-body { display: none; padding: 0 14px; }
        .rel-year-body.open { display: block; }
        /* Carte « Relance du marché » sur la fiche client. */
        .ccc-relance-body { padding: 14px 16px; }
        .ccc-relance-row { display: flex; flex-direction: column; gap: 6px; }
        .ccc-relance-row.due { color: var(--danger); }
        .ccc-relance-date { font-size: 15px; font-weight: 700; color: var(--text-color); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .ccc-relance-row.due .ccc-relance-date { color: var(--danger); }
        .ccc-relance-in { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 20px; padding: 1px 9px; }
        .ccc-relance-txt { font-size: 12.5px; color: var(--text-secondary); }
        .ccc-relance-sub { margin-top: 3px; font-size: 12px; color: var(--text-secondary); opacity: .9; }
        @media (max-width: 768px), (pointer: coarse) {
            /* Mobile : cartouche pleine largeur, puis les 2 boutons pleine largeur dessous. */
            .ccc-hero-top { flex-wrap: wrap; }
            .ccc-hero-card { flex-basis: 100%; }
            .ccc-hero-right { width: 100%; grid-template-columns: 1fr; }
            .ccc-hero-actions-btn, .ccc-prepare-btn { justify-content: flex-start; padding: 11px 16px; }
        }
        .ccc-hero-actions-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 240px; max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; background: var(--background-color); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.16); }
        .ccc-hero-actions-menu.open { display: block; }
        /* En-têtes de section du menu unifié (Documents / Compétences / Autres). */
        .ccc-hero-menu-head { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); padding: 9px 11px 4px; }
        .ccc-hero-menu-head:first-child { padding-top: 4px; }
        /* Les boutons rapport, une fois dans le menu, deviennent des items pleine largeur. */
        .ccc-hero-actions-menu .ccc-hero-report { display: flex; width: 100%; justify-content: flex-start; align-items: center; text-align: left; gap: 9px; padding: 9px 11px; border: none; border-radius: 8px; background: none; color: var(--text-color); font-size: 13px; }
        .ccc-hero-actions-menu .ccc-hero-report > span:first-child { flex-shrink: 0; }
        .ccc-hero-actions-menu .ccc-hero-report:hover { border-color: transparent; color: var(--text-color); background: var(--hover-bg, rgba(0,0,0,.05)); }
        /* Le libellé « Actions rapides » reste visible sur mobile : le bouton y est pleine
           largeur (comme « Préparer le dossier »), un bouton icône seule paraîtrait vide. */
        .client-center-card {
            background: var(--background-secondary); border: 1px solid var(--border-color);
            border-radius: 12px; padding: 16px 20px;
        }
        .client-center-field { margin-bottom: 8px; font-size: 13px; }
        .client-center-field label { color: var(--text-secondary); font-size: 11px; display: block; margin-bottom: 2px; }
        .client-center-field span { color: var(--text-color); }
        /* Statistiques — en-tête repliable discret + tuiles */
        .ccc-stats-toggle {
            display: flex; align-items: center; justify-content: space-between; width: 100%;
            background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit;
            color: var(--text-secondary); font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.07em; transition: color .15s;
        }
        .ccc-stats-toggle:hover { color: var(--text-color); }
        .ccc-stats-toggle .ccc-stats-chev { transition: transform .2s ease; opacity: .55; flex-shrink: 0; }
        .ccc-stats-toggle[aria-expanded="true"] .ccc-stats-chev { transform: rotate(180deg); }
        .ccc-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
        .ccc-stat-tile {
            display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
            background: var(--background-color); border: 1px solid var(--border-color); border-radius: 10px;
        }
        .ccc-stat-val { font-size: 19px; font-weight: 700; color: var(--text-color); line-height: 1.05; font-variant-numeric: tabular-nums; }
        .ccc-stat-val.ccc-stat-date { font-size: 13px; font-weight: 600; }
        .ccc-stat-lbl { font-size: 10px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }

        .client-center-section { margin-bottom: 24px; }
        .client-center-section-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color);
        }
        .client-center-section-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-color); }
        .client-center-section-header span { font-size: 12px; color: var(--text-secondary); } .client-center-contact-item {
            display: flex; align-items: center; gap: 10px; padding: 8px 12px;
            background: var(--background-secondary); border: 1px solid var(--border-color);
            border-radius: 8px; font-size: 13px;
        }
        .client-center-empty { font-size: 13px; color: var(--text-secondary); padding: 8px 0; }

        /* ── Années client ──────────────────────────────────────── */
        .ccc-year-block { margin-bottom: 20px; }
        .ccc-year-header {
            display: flex; align-items: center; gap: 10px; cursor: pointer;
            padding: 10px 14px; border-radius: 10px; background: var(--background-secondary);
            border: 1px solid var(--border-color); user-select: none;
            transition: background .12s;
        }
        .ccc-year-header:hover { background: var(--border-color); }
        .ccc-year-header.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
        .ccc-year-chevron { font-size: 11px; color: var(--text-secondary); transition: transform .2s; }
        .ccc-year-header.open .ccc-year-chevron { transform: rotate(90deg); }
        .ccc-year-label { font-size: 15px; font-weight: 700; color: var(--text-color); flex: 1; }
        .ccc-year-badges { display: flex; gap: 6px; }
        .ccc-year-badge {
            font-size: 11px; padding: 2px 7px; border-radius: 20px;
            background: var(--background-color); color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }
        .ccc-year-delete, .ccc-year-edit, .ccc-year-archive { background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 13px; padding: 2px 4px; border-radius: 4px; font-family: inherit; }
        .ccc-year-delete:hover { color: var(--error-color, var(--danger)); }
        .ccc-year-edit, .ccc-year-archive { opacity: .75; }
        .ccc-year-edit:hover, .ccc-year-archive:hover { color: var(--text-color); opacity: 1; }
        /* Tag « Conserver » (archivage) : cadenas plein = original conservé, ouvert = purgé. */
        .ccc-doc-keep { filter: grayscale(.35); }
        .ccc-doc-keep.on { opacity: 1 !important; filter: none; }
        .ccc-year-body {
            border: 1px solid var(--border-color); border-top: none;
            border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
            overflow: hidden; display: none;
        }
        .ccc-year-body.open { display: block; }
        .ccc-year-sub { padding: 12px 14px; }
        .ccc-year-sub-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: 8px; }
        /* Sous-section repliable (Enregistrements / Conversations / Documents) */
        .ccc-sec-head { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; margin-bottom: 8px; }
        .ccc-sec-head .ccc-year-sub-title { margin-bottom: 0; }
        .ccc-sec-head:hover .ccc-year-sub-title { color: var(--text-primary); }
        .ccc-sec-chevron { font-size: 10px; color: var(--text-secondary); transition: transform .2s; flex-shrink: 0; }
        .ccc-sec-head.open .ccc-sec-chevron { transform: rotate(90deg); }
        .ccc-sec-body { display: none; }
        .ccc-sec-body.open { display: block; }

        .ccc-add-year-row { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
        .ccc-year-input {
            width: 90px; padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 600;
            border: 1px solid var(--border-color); background: var(--background-secondary);
            color: var(--text-color); font-family: inherit;
        }
        .ccc-year-input:focus { outline: none; border-color: var(--primary-color); }

        .ccc-item-row {
            display: flex; align-items: center; gap: 8px; padding: 6px 8px;
            border-radius: 7px; font-size: 13px; transition: background .1s;
        }
        .ccc-item-row:hover { background: var(--background-color); }
        .ccc-item-row.conv { cursor: pointer; }
        .ccc-item-icon { font-size: 15px; flex-shrink: 0; }
        .ccc-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ccc-item-date { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
        .ccc-item-year-sel {
            font-size: 12px; padding: 3px 8px; border-radius: 20px;
            border: 1px solid var(--primary-color); background: var(--background-secondary);
            color: var(--primary-color); cursor: pointer; font-family: inherit; flex-shrink: 0;
            font-weight: 600; appearance: auto;
        }
        .ccc-item-year-sel:hover { background: var(--primary-color); color: white; }
        .ccc-item-actions { display: flex; gap: 2px; flex-shrink: 0; }
        .ccc-item-actions button {
            background: none; border: none; cursor: pointer; padding: 2px 4px;
            border-radius: 4px; color: var(--text-secondary); font-size: 12px;
            transition: background .1s; font-family: inherit;
        }
        .ccc-item-actions button:hover { background: var(--background-secondary); color: var(--text-color); }
        .ccc-doc-view  { color: var(--primary-color) !important; }
        .ccc-doc-download { color: #059669 !important; }
        .ccc-doc-check { width:15px; height:15px; flex-shrink:0; cursor:pointer; accent-color:var(--primary-color); margin-right:2px; }
        .ccc-item-row.selected { background: rgba(var(--primary-rgb),0.09); }
        .ccc-doc-search-bar {
            display:flex; align-items:center; gap:8px;
            padding:6px 4px 10px; margin-bottom:2px;
        }
        .ccc-doc-search-bar input {
            flex:1; padding:6px 10px; border:1px solid var(--border-color);
            border-radius:8px; background:var(--background-secondary);
            color:var(--text-color); font-size:12px; font-family:inherit;
            outline:none;
        }
        .ccc-doc-search-bar input:focus { border-color:var(--primary-color); }
        .ccc-doc-search-count { font-size:11px; color:var(--text-secondary); white-space:nowrap; }
        .doc-search-hidden { display:none !important; }
        .ccc-bulk-bar {
            display:none; position:sticky; top:0; z-index:20;
            align-items:center; gap:10px; flex-wrap:wrap;
            padding:8px 14px; margin-bottom:14px;
            background:var(--primary-color); color:white;
            border-radius:10px; font-size:13px; font-weight:600;
            box-shadow:0 4px 16px rgba(var(--primary-rgb),0.3);
        }
        .ccc-bulk-bar.visible { display:flex; }
        .ccc-bulk-bar select {
            font-size:12px; padding:3px 10px; border-radius:20px;
            border:1px solid rgba(255,255,255,0.45); background:rgba(255,255,255,0.18);
            color:white; cursor:pointer; font-family:inherit; font-weight:600;
        }
        .ccc-bulk-bar select option { background:var(--background-color); color:var(--text-color); }
        .ccc-bulk-btn {
            background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.4);
            color:white; cursor:pointer; padding:3px 12px; border-radius:20px;
            font-size:12px; font-weight:600; font-family:inherit; white-space:nowrap;
        }
        .ccc-bulk-btn:hover { background:rgba(255,255,255,0.28); }
        .ccc-bulk-btn.desel { background:rgba(255,255,255,0.08); }
        .ccc-bulk-btn.del { background:rgba(239,68,68,0.25); }
        .ccc-bulk-btn.del:hover { background:rgba(239,68,68,0.45); }
        /* ── Modale « Toutes les conversations » ──────────────────────────── */
        #cvm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9500; display:flex; align-items:center; justify-content:center; padding:20px; }
        #cvm-modal { background:var(--background-color); color:var(--text-color); border:1px solid var(--border-color); border-radius:14px; width:min(720px,96vw); max-height:88vh; display:flex; flex-direction:column; box-shadow:0 12px 48px rgba(0,0,0,.3); overflow:hidden; }
        .cvm-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border-color); }
        .cvm-header h3 { margin:0; font-size:15px; }
        .cvm-close { background:none; border:none; cursor:pointer; font-size:17px; color:var(--text-secondary); line-height:1; padding:4px 8px; border-radius:6px; }
        .cvm-close:hover { background:var(--background-secondary); color:var(--text-color); }
        .cvm-toolbar { display:flex; gap:10px; align-items:center; padding:12px 18px 8px; flex-wrap:wrap; }
        #cvm-filter-bar { display:flex; gap:2px; background:var(--background-secondary); border-radius:8px; padding:3px; }
        .cvm-filter-btn { border:none; background:none; cursor:pointer; padding:5px 12px; border-radius:6px; font-size:13px; color:var(--text-secondary); font-family:inherit; }
        .cvm-filter-btn.active { background:var(--primary-color); color:#fff; }
        #cvm-search { flex:1; min-width:160px; padding:7px 10px; border:1px solid var(--border-color); border-radius:8px; background:var(--background-color); color:var(--text-color); font-size:13px; font-family:inherit; }
        .cvm-selectall { display:flex; align-items:center; gap:8px; padding:2px 18px 8px; font-size:12px; color:var(--text-secondary); cursor:pointer; }
        .cvm-list { overflow-y:auto; padding:0 10px 10px; flex:1; }
        .cvm-empty { text-align:center; color:var(--text-secondary); padding:34px 10px; font-size:14px; }
        .cvm-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; }
        .cvm-row:hover { background:var(--background-secondary); }
        .cvm-row.selected { background:rgba(100,120,255,.10); }
        .cvm-row-cb { flex-shrink:0; width:16px; height:16px; cursor:pointer; }
        .cvm-row-main { min-width:0; flex:1; }
        .cvm-row-title { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .cvm-row-meta { display:flex; align-items:center; gap:6px; margin-top:3px; flex-wrap:wrap; }
        .cvm-badge { font-size:10px; padding:1px 6px; border-radius:10px; font-weight:600; white-space:nowrap; }
        .cvm-badge.pro { background:rgba(var(--primary-rgb),.15); color:var(--primary-color); }
        .cvm-badge.perso { background:rgba(168,120,255,.15); color:#a878ff; }
        .cvm-badge.folder { background:var(--background-secondary); color:var(--text-secondary); }
        .cvm-badge.client { background:rgba(255,170,80,.18); color:#e0902a; }
        .cvm-badge.fav { background:rgba(251,191,36,.18); color:#d99e00; }
        .cvm-date { font-size:11px; color:var(--text-secondary); margin-left:auto; flex-shrink:0; }
        .cvm-bulk-bar { display:none; align-items:center; justify-content:space-between; gap:10px; padding:11px 18px; border-top:1px solid var(--border-color); background:var(--background-secondary); flex-wrap:wrap; }
        .cvm-bulk-bar.visible { display:flex; }
        #cvm-bulk-count { font-size:12px; color:var(--text-secondary); white-space:nowrap; }
        .cvm-bulk-actions { display:flex; gap:6px; flex-wrap:wrap; }
        .cvm-bulk-btn { border:1px solid var(--border-color); background:var(--background-color); color:var(--text-color); cursor:pointer; padding:5px 10px; border-radius:7px; font-size:12px; font-family:inherit; }
        .cvm-bulk-btn:hover { border-color:var(--primary-color); }
        .cvm-bulk-btn.del { color:var(--danger); border-color:rgba(239,68,68,.4); }
        .cvm-bulk-btn.del:hover { background:rgba(239,68,68,.12); }
        .cvm-folder-menu { position:fixed; z-index:9600; background:var(--background-color); border:1px solid var(--border-color); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.2); padding:4px; min-width:190px; max-height:300px; overflow-y:auto; }
        .cvm-folder-menu button { display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer; padding:7px 10px; border-radius:7px; font-size:13px; color:var(--text-color); font-family:inherit; white-space:nowrap; }
        .cvm-folder-menu button:hover { background:var(--background-secondary); }
        .cvm-menu-empty { padding:7px 10px; font-size:12px; color:var(--text-secondary); }
        /* Sous-blocs type à l'intérieur d'une année */
        .ccc-type-block { margin:4px 0 4px 10px; border-left:2px solid var(--border-color); padding-left:8px; }
        .ccc-subtype-block { margin:4px 0 4px 16px; border-left:2px dashed var(--border-color); opacity:.92; }
        .ccc-type-header { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; color:var(--text-secondary); transition:background .1s; user-select:none; }
        .ccc-type-header:hover { background:var(--background-color); }
        .ccc-type-chevron { font-size:8px; flex-shrink:0; transition:transform .2s; }
        .ccc-type-header.open .ccc-type-chevron { transform:rotate(90deg); }
        .ccc-type-label { flex:1; }
        .ccc-type-body { display:none; }
        .ccc-type-body.open { display:block; }
        /* Gestion des types */

        /* ── Visionneuse document ───────────────────────────── */
        #doc-viewer-modal .agent-modal-body { overflow-y: auto; flex: 1; padding: 0; }
        .doc-viewer-pre {
            white-space: pre-wrap; word-break: break-word;
            font-family: 'Courier New', Courier, monospace; font-size: 13px;
            line-height: 1.6; padding: 20px 24px; margin: 0;
            color: var(--text-color); background: var(--background-secondary);
            border-top: 1px solid var(--border-color); min-height: 200px;
        }
        .doc-viewer-empty {
            text-align: center; padding: 60px 24px;
            color: var(--text-secondary); font-size: 14px;
        }

        /* ── Dossiers clients – liste sidebar ────────────────── */
        .dept-header {
            display: flex; align-items: center; justify-content: flex-start;
            gap: 6px; padding: 8px 10px 4px;
            cursor: pointer; user-select: none;
            border-radius: 6px;
            transition: background .1s;
        }
        .dept-header:hover { background: rgba(255,255,255,0.06); }
        .dept-header-label {
            font-size: 12px; font-weight: 600;
            color: rgba(226,232,240,0.55);
        }
        .dept-header-count {
            font-size: 11px; color: rgba(226,232,240,0.35); margin-left: 4px;
        }
        .dept-chevron {
            font-size: 12px; color: rgba(226,232,240,0.5);
            transition: transform .18s; display: inline-block;
        }
        .dept-header.collapsed .dept-chevron { transform: rotate(-90deg); }
        .dept-group { overflow: hidden; }
        .dept-group.collapsed { display: none; }
        .client-search-bar {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-shrink: 0;
            margin-bottom: 10px;
        }
        /* L'input client réutilise le style unifié .conv-search-wrap (loupe + champ discret) */
        #new-client-btn {
            width: 28px; height: 28px; padding: 0; flex-shrink: 0;
            border-radius: 6px;
            background: rgba(255,255,255,0.07);
            color: var(--sidebar-text); border: none; font-size: 18px; line-height: 1;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            opacity: .75; transition: background .15s, opacity .15s, color .15s;
        }
        #new-client-btn:hover { opacity: 1; background: var(--primary-color); color: #fff; }
        #clients-list {
            list-style: none; padding: 0; margin: 0;
            overflow-y: auto; flex: 1;
        }
        .client-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 7px 10px; border-radius: 8px; cursor: pointer;
            transition: background 0.12s; gap: 8px;
        }
        .client-item:hover { background: var(--sidebar-hover); }
        .client-item.active { background: rgba(var(--primary-rgb),0.25); }
        .client-item-info { flex: 1; overflow: hidden; }
        .client-item-name { font-size: 11px; font-weight: 600; color: var(--sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* ── Panneau client (glisse depuis la droite) ────────── */
        /* Admin panel */
        .admin-panel {
            position: fixed; top: 0; right: 0;
            width: 500px; max-width: 96vw; height: 100vh;
            background: var(--background-color);
            border-left: 1px solid var(--border-color);
            box-shadow: -4px 0 28px rgba(0,0,0,0.18);
            z-index: 1100;
            display: flex; flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.25s ease;
            overflow: hidden;
        }
        .admin-panel.open { transform: translateX(0); }
        .admin-panel-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 20px; border-bottom: 1px solid var(--border-color);
        }
        .admin-panel-header h2 { margin: 0; font-size: 16px; font-weight: 700; }
        .admin-panel-body { flex: 1; overflow-y: auto; padding: 20px; }
        .user-row {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px; border-radius: 8px;
            border: 1px solid var(--border-color); margin-bottom: 8px;
            background: var(--background-color);
        }
        .user-row-info { flex: 1; min-width: 0; }
        .user-row-name { font-size: 13px; font-weight: 600; color: var(--text-color); }
        .user-row-email { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .user-row-badge {
            font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
            text-transform: uppercase; flex-shrink: 0;
        }
        .badge-admin { background: rgba(var(--primary-rgb),0.2); color: #a78bfa; }
        .badge-user  { background: rgba(100,116,139,0.2); color: var(--text-secondary); }
        .badge-pending { background: rgba(245,101,101,0.15); color: #fca5a5; }
        .user-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
        .user-row-actions button {
            padding: 4px 9px; border-radius: 6px; border: none; font-size: 11px;
            font-weight: 600; cursor: pointer; transition: opacity 0.15s;
        }
        .btn-approve { background: #16A34A; color: white; }
        .btn-reject  { background: #64748b; color: white; }
        .btn-toggle-role { background: rgba(var(--primary-rgb),0.18); color: #a78bfa; }
        .btn-del-user { background: rgba(239,68,68,0.12); color: #fca5a5; }
        .admin-empty { font-size: 12px; color: var(--text-secondary); opacity: 0.6; padding: 8px 0; }

        #client-panel {
            position: fixed; top: 0; right: 0;
            width: 520px; max-width: 96vw; height: 100vh;
            background: var(--background-color);
            border-left: 1px solid var(--border-color);
            box-shadow: -4px 0 28px rgba(0,0,0,0.13);
            z-index: 1000;
            display: flex; flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.25s ease;
            overflow: hidden;
        }
        #client-panel.open { transform: translateX(0); }
        .client-panel-header {
            display: flex; align-items: center; gap: 10px;
            padding: 16px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
        }
        .client-panel-header h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 700; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .client-panel-close { background: none; border: none; color: var(--text-secondary); font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1; }
        .client-panel-close:hover { color: var(--text-color); }
        .client-panel-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
        .client-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
        .client-field { margin-bottom: 12px; }
        .client-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
        .client-field input, .client-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--background-color); color: var(--text-color); font-size: 13px; box-sizing: border-box; font-family: inherit; }
        .client-field input:focus, .client-field textarea:focus { outline: none; border-color: var(--primary-color); }
        .client-field textarea { resize: vertical; min-height: 80px; }
        /* Contacts */
        .btn-add-contact { background: none; border: 1px solid var(--primary-color); color: var(--primary-color); border-radius: 6px; padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer; }
        .btn-add-contact:hover { background: var(--primary-color); color: white; }
        .contact-card { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; position: relative; background: var(--background-color); }
        .contact-card-name { font-size: 13px; font-weight: 700; color: var(--text-color); }
        .contact-card-position { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
        .contact-card-info { font-size: 12px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 2px; }
        .contact-card-info a { color: var(--primary-color); text-decoration: none; }
        .contact-card-info a:hover { text-decoration: underline; }
        .contact-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
        .contact-card-actions button { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 4px; border-radius: 6px; line-height: 0; display: flex; align-items: center; justify-content: center; opacity: .45; transition: opacity .15s, background .15s, color .15s; }
        .contact-card:hover .contact-card-actions button { opacity: .8; }
        .contact-card-actions button:hover { background: var(--background-secondary); color: var(--text-color); opacity: 1; }
        .contact-card-actions .cc-del:hover { color: var(--danger); background: rgba(var(--danger-rgb),.1); }
        .contact-form { border: 1px solid var(--primary-color); border-radius: 10px; padding: 12px; margin-bottom: 8px; background: var(--background-color); }
        .contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
        .contact-form-grid .full { grid-column: 1 / -1; }
        .contact-form input { width: 100%; padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--background-color); color: var(--text-color); font-size: 12px; box-sizing: border-box; font-family: inherit; }
        .contact-form input:focus { outline: none; border-color: var(--primary-color); }
        .contact-form input::placeholder { color: var(--text-secondary); opacity: 0.6; }
        .contact-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
        .contact-form-actions button { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; }
        .contact-form-actions .btn-save { background: var(--primary-color); color: white; }
        .contact-form-actions .btn-cancel { background: var(--background-secondary); color: var(--text-secondary); }
        .address-autocomplete { position: relative; }
        .address-suggestions {
            display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
            background: var(--background-color); border: 1px solid var(--primary-color);
            border-top: none; border-radius: 0 0 8px 8px;
            list-style: none; margin: 0; padding: 0;
            max-height: 220px; overflow-y: auto;
            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        }
        .address-suggestions.open { display: block; }
        .address-suggestions li {
            padding: 8px 10px; font-size: 12px; cursor: pointer;
            border-bottom: 1px solid var(--border-color); color: var(--text-color); line-height: 1.35;
        }
        .address-suggestions li:last-child { border-bottom: none; }
        .address-suggestions li:hover { background: var(--background-secondary); }
        .address-suggestions li .sug-ctx { font-size: 11px; color: var(--text-secondary); }
        .client-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
        .btn-client-primary { padding: 8px 16px; background: var(--primary-color); color: #fff; border: 1px solid var(--primary-color); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1)); transition: box-shadow .15s; }
        .btn-client-primary:hover { box-shadow: 0 2px 6px rgba(0,0,0,.15); }
        .btn-client-secondary { padding: 8px 16px; background: var(--background-color); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
        .btn-client-secondary:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb),.06); }
        .btn-client-danger { padding: 8px 16px; background: none; color: var(--danger); border: 1px solid var(--danger); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; margin-left: auto; }
        .btn-client-danger:hover { background: rgba(var(--danger-rgb),0.08); }

        /* ── Documents clients ───────────────────────────────── */
        .doc-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
        /* Liste filtrable des documents (fiche client) */
        .cdl-toolbar { display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
        .cdl-search { flex:1; min-width:160px; padding:7px 10px; border:1px solid var(--border-color); border-radius:8px; background:var(--background-secondary); color:var(--text-color); font-size:13px; font-family:inherit; outline:none; }
        .cdl-type-filter { padding:7px 10px; border:1px solid var(--border-color); border-radius:8px; background:var(--background-secondary); color:var(--text-color); font-size:13px; font-family:inherit; cursor:pointer; max-width:240px; }
        .cdl-table-wrap { overflow-x:auto; border:1px solid var(--border-color); border-radius:8px; }
        .cdl-table { width:100%; border-collapse:collapse; font-size:12.5px; }
        .cdl-table th { text-align:left; padding:8px 10px; background:var(--background-secondary); color:var(--text-secondary); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; white-space:nowrap; border-bottom:1px solid var(--border-color); user-select:none; }
        .cdl-table th:hover { color:var(--text-color); }
        .cdl-table td { padding:7px 10px; border-bottom:1px solid rgba(128,128,128,.12); color:var(--text-color); vertical-align:middle; }
        .cdl-table tbody tr:last-child td { border-bottom:none; }
        .cdl-table tbody tr:hover { background:var(--hover-bg, rgba(0,0,0,.03)); }
        .cdl-table tbody tr.selected { background:rgba(var(--primary-rgb),.12); }
        .cdl-name { max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .cdl-date { white-space:nowrap; color:var(--text-secondary); }
        .cdl-unclassified { color:var(--warning); font-style:italic; }
        .cdl-actions { white-space:nowrap; text-align:right; }
        .cdl-actions button { background:none; border:none; cursor:pointer; font-size:14px; padding:2px 4px; opacity:.6; }
        .cdl-actions button:hover { opacity:1; }
        /* Liste simple des documents (fiche client) */
        .ccc-doc-folder { margin-bottom: 12px; }
        .ccc-doc-folder:last-child { margin-bottom: 0; }
        .ccc-doc-folder-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); padding: 4px 2px 6px; }
        .ccc-doc-folder-count { background: var(--background-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 0 7px; font-size: 10px; font-weight: 600; }
        /* Regroupement hiérarchique (comme la déroulante) : en-tête de parent + sous-dossiers indentés */
        .ccc-doc-group { margin-bottom: 14px; }
        .ccc-doc-group-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
            color: var(--text-color); padding: 2px 2px 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 8px; }
        .ccc-doc-group .ccc-doc-subfolder { margin-left: 14px; }
        .ccc-doc-group .ccc-doc-subfolder .ccc-doc-folder-head { text-transform: none; font-size: 11.5px; color: var(--text-color); }
        .ccc-doc-list { display: flex; flex-direction: column; }
        .ccc-doc-line { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; transition: background .12s; }
        .ccc-doc-line:hover { background: var(--background-color); }
        .ccc-rec-line { cursor: pointer; }
        .ccc-doc-ico { flex-shrink: 0; font-size: 15px; line-height: 1; }
        .ccc-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-color); }
        .ccc-doc-date { flex-shrink: 0; font-size: 11px; color: var(--text-secondary); }
        /* Badge « traitement en cours » (upload async : extraction/OCR de fond). */
        .ccc-doc-proc { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
            font-size: 11px; font-weight: 600; color: var(--primary-color);
            background: rgba(var(--primary-rgb), .1); padding: 1px 8px; border-radius: 20px; white-space: nowrap; }
        .ccc-doc-proc.err { color: var(--danger); background: rgba(var(--danger-rgb),.1); }
        .ccc-doc-proc-spin { width: 10px; height: 10px; border: 2px solid rgba(var(--primary-rgb), .3);
            border-top-color: var(--primary-color); border-radius: 50%; animation: spin .7s linear infinite; }
        .ccc-doc-line-actions { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
        .ccc-doc-line-actions button { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 4px; opacity: .55; }
        .ccc-doc-line-actions button:hover { opacity: 1; }
        /* Renommage intelligent (IA) : ✨ TOGGLE — génère un intitulé parlant, ou rétablit le nom
           d'origine si le document a déjà été renommé. Aucun repère visuel distinctif : une ligne
           renommée est identique à une non renommée (le nom d'origine reste en info-bulle). */
        .ccc-doc-smart { font-size: 13.5px; line-height: 1; }
        /* Bouton « ⋯ » : replie les infos/actions secondaires sur mobile (masqué sur desktop). */
        .ccc-doc-more { display: none; align-items: center; background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 3px 5px; border-radius: 6px; flex-shrink: 0; }
        .ccc-doc-more:hover { background: var(--background-secondary); color: var(--text-color); }
        /* Slots à largeur FIXE pour les boutons-icônes (verrou, œil, télécharger) et leur
           placeholder → date/menu/tags alignés d'une ligne à l'autre, que ces boutons soient
           présents ou non. Les tags TEXTE (Devis/DCE/RAO) gardent leur largeur auto. */
        .ccc-doc-keep, .ccc-doc-view, .ccc-doc-download, .ccc-doc-actslot {
            width: 24px; min-width: 24px; padding-left: 0; padding-right: 0; text-align: center; flex-shrink: 0; box-sizing: border-box; }
        .ccc-doc-actslot { display: inline-block; }
        /* Tags de RÉFÉRENCE cabinet (devis / DCE / RAO) : documents validés par le consultant */
        .ccc-doc-ref { font-size: 10px !important; font-weight: 700; padding: 2px 6px !important;
            border: 1px solid var(--border-color); border-radius: 7px; background: none; color: var(--text-secondary);
            opacity: .6; letter-spacing: .02em; }
        .ccc-doc-ref:hover { opacity: 1; }
        .ccc-doc-ref.on { opacity: 1; background: rgba(37, 99, 235, .13); color: #2563eb; border-color: rgba(37, 99, 235, .4); }
        .ccc-ref-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700;
            line-height: 1; padding: 2px 6px; border-radius: 9px; white-space: nowrap; flex-shrink: 0;
            background: rgba(37, 99, 235, .13); color: #2563eb; border: 1px solid rgba(37, 99, 235, .35); }
        /* Barre « Documents de référence » en tête d'exercice */
        .ccc-ref-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px;
            padding: 8px 10px; border: 1px solid rgba(37, 99, 235, .22); background: rgba(37, 99, 235, .05); border-radius: 10px; }
        /* Libellé sur SA PROPRE ligne (flex-basis 100% dans le strip en flex-wrap) : les chips
           passent en dessous, plus aucun chevauchement possible entre libellé et chips. */
        .ccc-ref-strip-label { font-size: 11px; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: .03em; flex-basis: 100%; margin-bottom: 2px; }
        /* Chip = LIBELLÉ seul (+ ✓ si défini) : plus de nom de fichier en ligne → jamais tronqué.
           Le nom du document est en infobulle ; clic sur un chip rempli = ouverture du document. */
        .ccc-ref-slot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; flex-shrink: 0;
            padding: 3px 11px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--background-color); font-family: inherit; white-space: nowrap; }
        .ccc-ref-slot.filled { cursor: pointer; border-color: rgba(37, 99, 235, .45); background: rgba(37, 99, 235, .10); }
        .ccc-ref-slot.filled:hover { background: rgba(37, 99, 235, .18); }
        .ccc-ref-slot.empty { opacity: .5; }
        .ccc-ref-slot-k { font-weight: 700; color: #2563eb; }
        .ccc-ref-slot.empty .ccc-ref-slot-k { color: var(--text-secondary); font-weight: 600; }
        .ccc-ref-slot-ok { color: #2563eb; flex-shrink: 0; }
        /* Menu des documents quand un type de référence en regroupe plusieurs (DCE). */
        .ccc-ref-menu { position: fixed; z-index: 10001; background: var(--background-color); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 5px; max-width: 340px; display: flex; flex-direction: column; gap: 2px; }
        .ccc-ref-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: none; background: none; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--text-color); text-align: left; width: 100%; }
        .ccc-ref-menu-item:hover { background: var(--background-secondary); }
        .ccc-ref-menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* Modale de partage d'un dossier. */
        .ccc-share-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 10002; padding: 20px; }
        .ccc-share-modal { background: var(--background-color); border-radius: 14px; width: min(460px, 96vw); max-height: 88vh; overflow-y: auto; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.28); }
        .ccc-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
        .ccc-share-head h3 { margin: 0; font-size: 16px; }
        .ccc-share-x { border: none; background: none; cursor: pointer; font-size: 16px; color: var(--text-secondary); line-height: 1; }
        .ccc-share-owner { font-size: 12.5px; color: var(--text-secondary); }
        .ccc-share-sublabel { font-size: 10.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin: 14px 0 6px; }
        .ccc-share-list { display: flex; flex-direction: column; gap: 6px; }
        .ccc-share-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 9px; }
        .ccc-share-ident { flex: 1; min-width: 0; }
        .ccc-share-name { font-weight: 600; font-size: 13px; }
        .ccc-share-mail { font-size: 11.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ccc-share-del { border: none; background: none; cursor: pointer; color: var(--text-secondary); font-size: 14px; flex-shrink: 0; border-radius: 6px; width: 26px; height: 26px; }
        .ccc-share-del:hover { color: var(--danger); background: var(--background-secondary); }
        .ccc-share-empty, .ccc-share-note { font-size: 12.5px; color: var(--text-secondary); padding: 8px 2px; }
        .ccc-share-add { display: flex; gap: 8px; margin-top: 14px; }
        .ccc-share-add select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--background-color); color: var(--text-color); font-size: 13px; font-family: inherit; }
        /* Largeur FIXE (et non max-width) : sinon le menu s'adapte au texte de l'option
           (« Lot PF » vs « Documentation candidats ») et décale les colonnes d'une ligne à l'autre. */
        .ccc-doc-line-type { width: 132px; min-width: 132px; flex-shrink: 0; font-size: 11px !important; padding: 3px 6px !important; }
        .ccc-doc-check { width: 14px; height: 14px; cursor: pointer; accent-color: var(--primary-color); flex-shrink: 0; opacity: 0; transition: opacity .12s; }
        .ccc-doc-line:hover .ccc-doc-check, .ccc-doc-check:checked { opacity: 1; }
        /* File d'attente des rapports */
        #report-queue { position:fixed; bottom:16px; right:16px; width:300px; max-width:calc(100vw - 32px); background:var(--background-color); border:1px solid var(--border-color); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.30); z-index:9000; font-size:12.5px; overflow:hidden; }
        #report-queue .rq-head { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; background:var(--background-secondary); font-weight:600; user-select:none; }
        #report-queue .rq-close { border:none; background:none; color:var(--text-secondary); cursor:pointer; font-size:15px; line-height:1; padding:2px 6px; border-radius:6px; }
        #report-queue .rq-close:hover { background:rgba(128,128,128,.15); color:var(--text-color); }
        #report-queue .rq-dgx { padding:7px 12px; font-size:11.5px; font-weight:600; color:var(--primary-color); background:rgba(var(--primary-rgb),.06); border-bottom:1px solid var(--border-color); font-variant-numeric:tabular-nums; }
        #report-queue .rq-subhead { padding:7px 12px 3px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-secondary); }
        #report-queue .rq-srv { display:flex; align-items:center; gap:8px; padding:6px 12px; border-top:1px solid rgba(128,128,128,.10); }
        #report-queue .rq-srv-ini { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(var(--primary-rgb),.15); color:var(--primary-color); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
        #report-queue .rq-srv-lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        #report-queue .rq-srv-time { flex-shrink:0; color:var(--text-secondary); font-variant-numeric:tabular-nums; font-size:11.5px; }
        #report-queue .rq-empty { padding:16px 12px; color:var(--text-secondary); font-style:italic; text-align:center; }
        #report-queue .rq-list { max-height:300px; overflow-y:auto; }
        #report-queue .rq-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid rgba(128,128,128,.12); }
        #report-queue .rq-ic { flex-shrink:0; }
        #report-queue .rq-running .rq-ic { display:inline-block; animation:rqspin 1.6s linear infinite; }
        @keyframes rqspin { to { transform:rotate(360deg); } }
        #report-queue .rq-done .rq-ic { color:#22c55e; }
        #report-queue .rq-error .rq-ic { color:var(--danger); }
        #report-queue .rq-lbl { flex:1; min-width:0; display:flex; flex-direction:column; }
        #report-queue .rq-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        #report-queue .rq-sub { font-size:11px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        #report-queue .rq-open { background:var(--primary-color); color:#fff; border:none; border-radius:6px; padding:3px 9px; font-size:11px; cursor:pointer; flex-shrink:0; }
        #report-queue .rq-cancel { background:none; border:1px solid rgba(128,128,128,.35); color:var(--text-secondary); border-radius:6px; padding:2px 8px; font-size:12px; line-height:1.4; cursor:pointer; flex-shrink:0; }
        #report-queue .rq-cancel:hover { border-color:var(--danger); color:var(--danger); }
        #report-queue .rq-foot { padding:6px 12px; text-align:right; border-top:1px solid rgba(128,128,128,.12); }
        #report-queue .rq-clear { background:none; border:none; color:var(--text-secondary); font-size:11px; cursor:pointer; text-decoration:underline; }
        #report-queue .rq-pct { font-size:11px; color:var(--primary-color); font-weight:600; }
        #report-queue .rq-elapsed { font-size:11px; color:var(--text-secondary); font-weight:400; font-variant-numeric:tabular-nums; }
        #report-queue .rq-note { padding:5px 12px 7px; font-size:11px; color:var(--text-secondary); font-style:italic; }
        #report-queue .rq-bar { display:block; height:5px; margin-top:5px; background:rgba(128,128,128,.20); border-radius:3px; overflow:hidden; }
        #report-queue .rq-bar-fill { display:block; height:100%; background:var(--primary-color); border-radius:3px; transition:width .5s ease; width:0; }
        #report-queue .rq-bar-indet .rq-bar-fill { width:40%; animation:rqindet 1.3s ease-in-out infinite; }
        @keyframes rqindet { 0% { margin-left:-42%; } 100% { margin-left:100%; } }
        .doc-folder-count {
            font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0;
            background: var(--background-secondary); border-radius: 8px; padding: 1px 6px;
            color: var(--text-secondary);
        }
        /* Badge dossier dans les chips CBM */
        .cbm-chip-folder {
            font-size: 10px; background: rgba(245,158,11,.12); color: #d97706;
            border-radius: 4px; padding: 1px 5px; flex-shrink: 0;
            border: 1px solid rgba(245,158,11,.2);
        }
        .doc-upload-area { border: 2px dashed var(--border-color); border-radius: 10px; padding: 16px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; color: var(--text-secondary); font-size: 13px; }
        .doc-upload-area:hover, .doc-upload-area.drag-over { border-color: var(--primary-color); background: rgba(var(--primary-rgb),0.04); color: var(--primary-color); }

        /* ── Modale classification document ─────────────────────── */
        #classify-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9500;display:flex;align-items:center;justify-content:center; }
        #classify-modal { background:var(--background-color);border:1px solid var(--border-color);border-radius:14px;padding:24px 28px;width:480px;max-width:94vw;max-height:90dvh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.4); }
        #classify-modal h3 { font-size:15px;font-weight:700;margin-bottom:4px; }
        #classify-modal .cm-subtitle { font-size:12px;color:var(--text-secondary);margin-bottom:18px; }
        #classify-modal .cm-filename { font-size:13px;font-weight:600;color:var(--primary-color);word-break:break-all;margin-bottom:16px;padding:8px 12px;background:var(--background-secondary);border-radius:8px; }
        #classify-modal .cm-field { margin-bottom:14px; }
        #classify-modal .cm-field label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);display:block;margin-bottom:6px; }
        #classify-modal select { width:100%;padding:8px 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--background-secondary);color:var(--text-color);font-size:13px;font-family:inherit;cursor:pointer;outline:none; }
        #classify-modal select:focus { border-color:var(--primary-color); }
        #classify-modal .cm-confidence { font-size:11px;margin-top:6px;padding:4px 8px;border-radius:6px;display:inline-block; }
        #classify-modal .cm-confidence.haute { background:rgba(34,197,94,.12);color:#4ade80; }
        #classify-modal .cm-confidence.moyenne { background:rgba(234,179,8,.12);color:#facc15; }
        #classify-modal .cm-confidence.faible { background:rgba(156,163,175,.12);color:var(--text-secondary); }
        #classify-modal .cm-none { color:var(--text-secondary);font-style:italic; }
        #classify-modal .cm-actions { display:flex;gap:10px;justify-content:flex-end;margin-top:22px; }
        #classify-modal .cm-btn { padding:8px 18px;border-radius:9px;border:1px solid var(--border-color);cursor:pointer;font-size:13px;font-weight:600;transition:border-color .15s, color .15s, background .15s, box-shadow .15s; }
        #classify-modal .cm-btn.secondary { background:var(--background-color);color:var(--text-secondary); }
        #classify-modal .cm-btn.secondary:hover { border-color:var(--primary-color);color:var(--primary-color);background:rgba(var(--primary-rgb),.06); }
        #classify-modal .cm-btn.primary { background:var(--primary-color);border-color:var(--primary-color);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1); }
        #classify-modal .cm-btn.primary:hover { box-shadow:0 2px 6px rgba(0,0,0,.15); }
        /* Client picker dans la modale */
        #classify-modal .cm-client-picker { width:100%;padding:8px 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--background-secondary);color:var(--text-color);font-size:13px;font-family:inherit;cursor:pointer;outline:none; }
        #classify-modal .cm-client-picker:focus { border-color:var(--primary-color); }

        /* ── Modal classement par lot ──────────────────────────── */
        /* ── Modale « Répondre à un email client » ──────────────────────────── */
        #client-email-modal { position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9500;display:none;align-items:center;justify-content:center; }
        #client-email-modal.open { display:flex; }
        .cem-box { background:var(--background-color);border:1px solid var(--border-color);border-radius:16px;width:720px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.35); }
        .cem-header { display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border-color);flex-shrink:0; }
        .cem-header-icon { font-size:22px; }
        .cem-header h3 { margin:0;font-size:15px; }
        .cem-client-badge { flex:1;font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
        .cem-client-badge::before { content:"·";margin-right:6px;opacity:.5; }
        .cem-header > button#cem-close { margin-left:auto;background:none;border:none;cursor:pointer;font-size:20px;color:var(--text-secondary);padding:2px 6px;border-radius:6px;line-height:1; }
        .cem-header > button#cem-close:hover { background:var(--border-color); }
        .cem-body { padding:20px 22px;display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto;min-height:0; }
        .cem-field { display:flex;flex-direction:column;gap:6px; }
        .cem-field label { font-size:12px;font-weight:600;color:var(--text-secondary); }
        .cem-field textarea, .cem-field input[type=text], .cem-field select {
            width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--border-color);border-radius:9px;
            background:var(--background-secondary);color:var(--text-color);font-size:13px;font-family:inherit;outline:none;resize:vertical;
        }
        .cem-field textarea { min-height:120px;line-height:1.5; }
        .cem-field textarea:focus, .cem-field input[type=text]:focus, .cem-field select:focus { border-color:var(--primary-color); }
        .cem-grid { display:grid;grid-template-columns:minmax(200px,1fr) minmax(220px,1.4fr);gap:14px; }
        .cem-actions { display:flex;justify-content:flex-end; }
        .cem-btn.primary { background:var(--primary-color);color:#fff;border:none;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit; }
        .cem-btn.primary:hover { filter:brightness(1.06); }
        .cem-btn.primary:disabled { opacity:.6;cursor:default; }
        .cem-result-wrap { display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border-color);padding-top:14px; }
        .cem-result-head { display:flex;align-items:center;justify-content:space-between;gap:10px; }
        .cem-result-head > span { font-size:12px;font-weight:600;color:var(--text-secondary); }
        .cem-result-tools { display:flex;gap:8px; }
        .cem-mini-btn { background:none;border:1px solid var(--border-color);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--text-color);font-family:inherit; }
        .cem-mini-btn:hover { background:var(--border-color); }
        .cem-mini-btn:disabled { opacity:.5;cursor:default; }
        .cem-result { border:1px solid var(--border-color);border-radius:10px;background:var(--background-secondary);padding:14px 16px;font-size:13.5px;line-height:1.6;color:var(--text-color);min-height:60px;overflow-x:auto; }
        .cem-result p { margin:0 0 10px; }
        .cem-result p:last-child { margin-bottom:0; }
        @media (max-width:640px) {
            .cem-grid { grid-template-columns:1fr; }
            .cem-box { width:100%;max-width:100vw;border-radius:0;box-sizing:border-box;
                       height:100vh;height:100dvh;max-height:100dvh; }
            /* Décale l'en-tête sous la barre d'état / l'encoche iOS (sinon le × est intouchable). */
            .cem-header { padding-top:calc(14px + env(safe-area-inset-top));position:sticky;top:0;background:var(--background-color);z-index:2; }
            .cem-body { padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
            /* Cible tactile plus grande pour fermer. */
            .cem-header > button#cem-close { font-size:26px;padding:6px 12px;margin:-4px -6px -4px 0; }
        }

        #classify-batch-modal { position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9500;display:none;align-items:center;justify-content:center; }
        #classify-batch-modal.open { display:flex; }
        .cbm-box { background:var(--background-color);border:1px solid var(--border-color);border-radius:16px;width:680px;max-width:96vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.35); }
        .cbm-header { display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border-color);flex-shrink:0; }
        .cbm-header-icon { font-size:22px; }
        .cbm-header h3 { margin:0;font-size:15px;flex:1; }
        .cbm-header button { background:none;border:none;cursor:pointer;font-size:20px;color:var(--text-secondary);padding:2px 6px;border-radius:6px;line-height:1; }
        .cbm-header button:hover { background:var(--border-color); }
        /* overflow-y:auto ici est safe car .cbm-client-results est en position:fixed */
        .cbm-body { padding:20px 22px;display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto;min-height:0; }
        .cbm-scroll { overflow-y:auto;max-height:320px; }
        #cbm-progress-wrap { padding:8px 22px 4px;flex-shrink:0; }
        #cbm-progress-track { height:5px;background:var(--border-color);border-radius:3px;overflow:hidden; }
        #cbm-progress-bar { height:100%;width:0%;background:var(--primary-color);border-radius:3px;transition:width .25s ease; }
        #cbm-progress-meta { display:flex;justify-content:space-between;margin-top:5px;font-size:11px;color:var(--text-secondary); }
        .cbm-footer { padding:14px 22px;border-top:1px solid var(--border-color);display:flex;gap:10px;justify-content:flex-end;flex-shrink:0; }
        .cbm-dropzone { border:2px dashed var(--border-color);border-radius:10px;padding:24px 20px;text-align:center;cursor:pointer;font-size:13px;color:var(--text-secondary);transition:border-color .15s,background .15s; }
        .cbm-dropzone:hover,.cbm-dropzone.dragover { border-color:var(--primary-color);background:rgba(100,120,255,.05); }
        .cbm-dropzone-icon { font-size:26px;margin-bottom:6px; }
        .cbm-chips { display:flex;flex-wrap:wrap;gap:6px;min-height:0;max-height:220px;overflow-y:auto;padding-right:2px; }
        .cbm-chip { display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--background-secondary);border-radius:20px;font-size:12px;max-width:260px; }
        .cbm-chip span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1; }
        .cbm-chip button { background:none;border:none;cursor:pointer;font-size:14px;color:var(--text-secondary);padding:0;line-height:1;flex-shrink:0; }
        .cbm-chip button:hover { color:var(--text-color); }
        .cbm-bottom-row { display:grid;grid-template-columns:1fr 130px;gap:14px;align-items:start; }
        .cbm-field label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);display:block;margin-bottom:5px; }
        .cbm-field input,.cbm-field select { width:100%;padding:8px 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--background-secondary);color:var(--text-color);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box; }
        .cbm-field input:focus,.cbm-field select:focus { border-color:var(--primary-color); }
        /* Dropdown client — position fixed pour éviter le clipping */
        .cbm-client-results { position:fixed;z-index:9100;background:var(--background-color);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-height:200px;overflow-y:auto; }
        .cbm-client-result { padding:9px 13px;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
        .cbm-client-result:hover { background:var(--background-secondary); }
        /* Badge client détecté */
        .cbm-detect-badge { display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;font-size:13px; }
        .cbm-detect-badge.ok { background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#4ade80; }
        .cbm-detect-badge.warn { background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.25);color:#facc15; }
        .cbm-detect-badge.none { background:var(--background-secondary);border:1px solid var(--border-color);color:var(--text-secondary); }
        .cbm-detect-badge strong { color:var(--text-color); }
        .cbm-detect-badge button { background:none;border:none;cursor:pointer;font-size:11px;color:var(--text-secondary);padding:2px 6px;border-radius:4px;margin-left:auto; }
        .cbm-detect-badge button:hover { background:var(--border-color);color:var(--text-color); }
        .cbm-detecting { font-size:12px;color:var(--text-secondary);padding:6px 0;display:flex;align-items:center;gap:6px; }
        /* Création nouveau client inline */
        .cbm-create-form { border:1px solid var(--border-color);border-radius:8px;padding:12px;background:var(--background-secondary);display:flex;flex-direction:column;gap:8px; }
        .cbm-create-form input { padding:7px 10px;border:1px solid var(--border-color);border-radius:6px;background:var(--background-color);color:var(--text-color);font-size:13px;font-family:inherit;width:100%;box-sizing:border-box;outline:none; }
        .cbm-create-form input:focus { border-color:var(--primary-color); }
        .cbm-create-form-actions { display:flex;gap:8px; }
        .cbm-create-form button { padding:6px 14px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:600; }
        .cbm-create-form .btn-confirm { background:var(--primary-color);color:#fff; }
        .cbm-create-form .btn-cancel  { background:var(--background-color);border:1px solid var(--border-color);color:var(--text-color); }
        .cbm-link-btn { background:none;border:none;cursor:pointer;font-size:12px;color:var(--primary-color);padding:4px 0;text-decoration:underline; }
        /* Table de prévisualisation */
        .cbm-table-wrap { overflow-x:auto;border-radius:8px;border:1px solid var(--border-color); }
        .cbm-table { width:100%;border-collapse:collapse;font-size:12px; }
        .cbm-table th { padding:8px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);background:var(--background-secondary);border-bottom:1px solid var(--border-color); }
        .cbm-table td { padding:8px 12px;border-bottom:1px solid var(--border-color);vertical-align:middle; }
        .cbm-table tr:last-child td { border-bottom:none; }
        .cbm-table select { width:100%;padding:4px 6px;border:1px solid var(--border-color);border-radius:6px;background:var(--background-secondary);color:var(--text-color);font-size:12px;font-family:inherit;outline:none; }
        .cbm-table select:focus { border-color:var(--primary-color); }
        .cbm-table .cbm-status-ok  { color:#4ade80;font-weight:700; }
        .cbm-table .cbm-status-err { color:var(--danger-light);font-weight:700; }
        .cbm-fname { max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500; }
        .cbm-confidence { font-size:10px;padding:2px 6px;border-radius:4px;margin-left:4px; }
        .cbm-confidence.haute { background:rgba(34,197,94,.12);color:#4ade80; }
        .cbm-confidence.moyenne { background:rgba(234,179,8,.12);color:#facc15; }
        .cbm-confidence.faible { background:rgba(156,163,175,.12);color:var(--text-secondary); }
        .cbm-summary-stats { display:flex;gap:20px;padding:14px 0;font-size:13px; }
        .cbm-summary-stat { display:flex;flex-direction:column;align-items:center;gap:2px; }
        .cbm-summary-stat .val { font-size:24px;font-weight:800;line-height:1; }
        .cbm-summary-stat .lbl { font-size:11px;color:var(--text-secondary); }
        .cbm-summary-stat.ok .val { color:#4ade80; }
        .cbm-summary-stat.err .val { color:var(--danger-light); }

        /* ── Conversations liées ─────────────────────────────── */
        .conv-list-small { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
        .conv-list-small li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-color); background: var(--background-secondary); }
        .conv-list-small li:hover { background: var(--border-color); }
        .conv-list-small li:hover .conv-list-actions { opacity: 1; }
        .conv-list-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .conv-list-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; flex-shrink: 0; }
        .conv-list-actions button {
            background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px;
            color: var(--text-secondary); font-size: 12px; display: flex; align-items: center;
            transition: background .1s, color .1s;
        }
        .conv-list-actions button:hover { background: var(--background-color); color: var(--text-color); }

        /* ── Badge client dans le chat ───────────────────────── */
        #client-context-bar { padding: 6px 14px; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-shrink: 0; min-height: 36px; border-bottom: 1px solid var(--border-color); }
        #ctx-toggles { display: flex; gap: 4px; align-items: center; }
        /* En mode nouvelle conversation : cache les éléments client, garde chips/S/M/L/Perso */
        #client-context-bar[data-new-conv] > *:not(#ctx-toggles):not(#length-btns):not(#conv-personal-btn):not(#ctx-client-link-group) { visibility: hidden; }
        .client-context-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; background: rgba(var(--primary-rgb),0.1); border: 1px solid rgba(var(--primary-rgb),0.25); color: var(--primary-color); padding: 3px 10px; border-radius: 20px; min-width: 0; max-width: 100%; }
        #ctx-client-link-group { min-width: 0; }
        .client-context-badge svg { flex-shrink: 0; }
        /* Nom de client long : une seule ligne + ellipsis (évite le pavé sur 4 lignes en mobile). */
        #client-context-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
        #conv-link-client-btn, #rec-folder-link-btn, #rec-add-participant-btn { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; border:1px dashed var(--border-color); background:none; color:var(--text-secondary); cursor:pointer; transition:all .15s; font-family:inherit; }
        #conv-link-client-btn:hover, #rec-folder-link-btn:hover, #rec-add-participant-btn:hover { border-color:var(--primary-color); color:var(--primary-color); background:rgba(var(--primary-rgb),0.07); }
        /* Pile compacte de participants (barre de contexte) */
        .rec-part-stack { display:inline-flex; align-items:center; gap:8px; padding:2px 10px 2px 3px; border:1px solid var(--border-color); border-radius:20px; background:none; cursor:pointer; font-family:inherit; transition:border-color .15s; }
        .rec-part-stack:hover { border-color:var(--primary-color); }
        .rec-part-avs { display:inline-flex; }
        .rec-part-av { width:22px; height:22px; border-radius:50%; background:rgba(var(--primary-rgb),0.16); color:#7c5cc4; border:2px solid var(--background-color); display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; text-transform:uppercase; box-sizing:border-box; }
        .rec-part-avs .rec-part-av + .rec-part-av { margin-left:-8px; }
        .rec-part-av--more { background:var(--background-secondary); color:var(--text-secondary); }
        .rec-part-count { font-size:11px; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
        #conv-unlink-client-btn { background:none; border:none; cursor:pointer; padding:2px 4px; border-radius:4px; color:var(--text-secondary); font-size:12px; margin-left:2px; line-height:1; }
        #conv-unlink-client-btn:hover { color:var(--danger); background:rgba(239,68,68,0.08); }
        /* ── Picker client pour association conversation ── */
        #conv-client-picker { position:absolute; top:100%; left:14px; margin-top:4px; z-index:1001; max-width:calc(100vw - 28px); background:var(--background-color); border:1px solid var(--border-color); border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,0.18); width:300px; padding:8px; display:none; flex-direction:column; gap:6px; }
        #conv-client-picker input { width:100%; box-sizing:border-box; padding:7px 10px; border-radius:7px; border:1px solid var(--border-color); background:var(--background-secondary); color:var(--text-color); font-size:13px; font-family:inherit; outline:none; }
        #conv-client-picker input:focus { border-color:var(--primary-color); }
        #conv-client-picker-list { max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
        .conv-picker-item { padding:7px 10px; border-radius:6px; cursor:pointer; font-size:13px; color:var(--text-color); transition:background .1s; display:flex; align-items:center; gap:7px; }
        .conv-picker-item:hover { background:var(--background-secondary); }
        .conv-picker-item.unlink { color:var(--text-secondary); font-style:italic; font-size:12px; }

        /* ── Modal d'enregistrement ──────────────────────────── */
        #record-modal-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.55);
            z-index: 1100; display: flex; align-items: center; justify-content: center;
        }
        #record-modal {
            background: var(--background-color); border-radius: 16px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.22);
            width: 480px; max-width: 95vw; padding: 28px;
            display: flex; flex-direction: column; gap: 18px;
        }
        .record-modal-title { font-size: 17px; font-weight: 700; color: var(--text-color); margin: 0; }
        .record-mode-row { display: flex; gap: 10px; }
        .record-mode-btn {
            flex: 1; padding: 10px 8px; border-radius: 10px;
            border: 2px solid var(--border-color); background: var(--background-secondary);
            color: var(--text-color); font-size: 12px; font-weight: 600; cursor: pointer;
            text-align: center; transition: border-color 0.15s, background 0.15s;
        }
        .record-mode-btn.selected { border-color: var(--primary-color); background: rgba(var(--primary-rgb),0.1); color: var(--primary-color); }
        .record-mode-btn .mode-icon { font-size: 20px; display: block; margin-bottom: 4px; }
        .record-mode-hint { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
        .record-center {
            display: flex; flex-direction: column; align-items: center; gap: 12px;
            padding: 20px 0;
        }
        #record-big-btn {
            width: 72px; height: 72px; border-radius: 50%;
            background: var(--danger); border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 0 0 rgba(229,62,62,0.4);
            transition: transform 0.1s, box-shadow 0.3s;
        }
        #record-big-btn.recording {
            animation: recordPulse 1.4s ease infinite;
        }
        #record-big-btn:hover { transform: scale(1.06); }
        @keyframes recordPulse {
            0%   { box-shadow: 0 0 0 0 rgba(229,62,62,0.5); }
            70%  { box-shadow: 0 0 0 16px rgba(229,62,62,0); }
            100% { box-shadow: 0 0 0 0 rgba(229,62,62,0); }
        }
        #record-timer { font-size: 26px; font-weight: 700; color: var(--text-color); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
        #record-status { font-size: 13px; color: var(--text-secondary); }
        .record-result-section { display: flex; flex-direction: column; gap: 10px; }
        #record-title-input {
            width: 100%; padding: 8px 10px; border: 1px solid var(--border-color);
            border-radius: 8px; background: var(--background-color); color: var(--text-color);
            font-size: 13px; box-sizing: border-box;
        }
        #record-title-input:focus { outline: none; border-color: var(--primary-color); }
        #record-transcript-preview {
            max-height: 140px; overflow-y: auto; padding: 10px;
            background: var(--background-secondary); border: 1px solid var(--border-color);
            border-radius: 8px; font-size: 12px; color: var(--text-color); line-height: 1.5;
            white-space: pre-wrap; word-break: break-word;
        }
        .record-actions { display: flex; gap: 8px; justify-content: flex-end; }

        /* ── Bibliothèque documentaire ─────────────────────────── */
        .doc-library-panel {
            position: fixed; top: 0; right: 0;
            width: 780px; max-width: 98vw; height: 100vh;
            background: var(--background-color);
            border-left: 1px solid var(--border-color);
            box-shadow: -4px 0 28px rgba(0,0,0,0.18);
            transform: translateX(100%);
            transition: transform 0.25s cubic-bezier(.4,0,.2,1);
            z-index: 1100;
            display: flex; flex-direction: column;
        }
        .doc-library-panel.open { transform: translateX(0); }
        .doc-library-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 20px; border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        .doc-library-header h2 { margin: 0; font-size: 16px; font-weight: 700; }
        /* Livre blanc sur mobile : l'en-tête (titre + année + bascule géo + exports) débordait
           → il passe sur plusieurs lignes, contrôles alignés à gauche, corps moins large. */
        @media (max-width: 768px) {
            #livre-blanc-panel .doc-library-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
            #livre-blanc-panel .doc-library-header > div { margin-left: 0 !important; flex-wrap: wrap; row-gap: 6px; }
            #livre-blanc-panel .doc-library-header h2 { flex: 1 1 100%; }
            #livre-blanc-panel .doc-library-body { padding: 12px 12px !important; }
            #lb-content h3 { font-size: 15px; }
            #lb-content table { font-size: 11.5px; }
            #lb-year { width: 68px !important; }
        }
        .doc-library-body {
            display: flex; flex: 1; overflow: hidden;
        }
        .doc-lib-sidebar {
            width: 190px; flex-shrink: 0;
            border-right: 1px solid var(--border-color);
            display: flex; flex-direction: column;
            padding: 12px 8px;
            overflow-y: auto;
        }
        .doc-lib-folder-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 7px 10px; border-radius: 7px; cursor: pointer;
            font-size: 13px; gap: 6px;
            transition: background 0.12s;
            color: var(--text-color);
        }
        .doc-lib-folder-item:hover { background: var(--background-secondary); }
        .doc-lib-folder-item.active { background: rgba(var(--primary-rgb),0.13); font-weight: 600; }
        .doc-lib-folder-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .doc-lib-folder-count { font-size: 10px; background: var(--background-secondary); border-radius: 9px; padding: 1px 6px; color: var(--text-secondary); flex-shrink: 0; }
        .doc-lib-folder-actions { display: none; align-items: center; gap: 1px; flex-shrink: 0; }
        .doc-lib-folder-item:hover .doc-lib-folder-actions { display: inline-flex; }
        .doc-lib-folder-act { background: none; border: none; cursor: pointer; font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: 5px; opacity: .65; }
        .doc-lib-folder-act:hover { opacity: 1; background: rgba(0,0,0,0.08); }
        .doc-lib-new-folder-btn {
            margin-top: 10px; width: 100%;
            background: none; border: 1px dashed var(--border-color);
            color: var(--text-secondary); border-radius: 7px;
            padding: 7px; font-size: 12px; cursor: pointer;
            transition: border-color 0.12s, color 0.12s;
        }
        .doc-lib-new-folder-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .doc-lib-main {
            flex: 1; overflow-y: auto;
            display: flex; flex-direction: column;
            padding: 16px;
            gap: 14px;
        }
        .doc-lib-dropzone {
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            padding: 28px 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
            flex-shrink: 0;
        }
        .doc-lib-dropzone.drag-over {
            border-color: var(--primary-color);
            background: rgba(var(--primary-rgb),0.06);
        }
        .doc-lib-dropzone-icon { font-size: 28px; margin-bottom: 8px; }
        .doc-lib-dropzone-text { font-size: 13px; color: var(--text-secondary); }
        .doc-lib-dropzone-text label { color: var(--primary-color); cursor: pointer; text-decoration: underline; }
        .doc-lib-progress { display: flex; flex-direction: column; gap: 6px; }
        .doc-lib-progress-item {
            display: flex; align-items: center; gap: 10px;
            font-size: 12px; background: var(--background-secondary);
            border-radius: 7px; padding: 8px 12px;
        }
        .doc-lib-progress-bar-wrap { flex: 1; height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; }
        .doc-lib-progress-bar { height: 100%; background: var(--primary-color); transition: width 0.2s; border-radius: 2px; }
        .doc-lib-doc-row {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 12px; border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: background 0.1s;
        }
        .doc-lib-doc-row:hover { background: var(--background-secondary); }
        .doc-lib-doc-icon { font-size: 20px; flex-shrink: 0; }
        .doc-lib-doc-info { flex: 1; min-width: 0; }
        .doc-lib-doc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .doc-lib-doc-meta { font-size: 11px; color: var(--text-secondary); }
        .doc-lib-doc-folder-select {
            font-size: 12px; padding: 3px 6px; border-radius: 5px;
            border: 1px solid var(--border-color);
            background: var(--background-color);
            color: var(--text-color);
            max-width: 130px;
        }
        .doc-lib-doc-delete {
            background: none; border: none; cursor: pointer;
            color: var(--text-secondary); font-size: 16px; padding: 2px 6px;
            border-radius: 4px; transition: color 0.1s, background 0.1s; flex-shrink: 0;
        }
        .doc-lib-doc-delete:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
        .doc-lib-section-title {
            font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--text-secondary);
            margin-bottom: 6px;
        }
        .doc-lib-empty { font-size: 13px; color: var(--text-secondary); opacity: 0.6; padding: 16px 0; text-align: center; }
        .doc-lib-status { font-size: 10px; font-weight: 700; border-radius: 5px; padding: 2px 7px; flex-shrink: 0; }
        .doc-lib-status.pending  { background: rgba(234,179,8,0.15);  color: #ca8a04; }
        .doc-lib-status.indexing { background: rgba(59,130,246,0.15); color: #2563eb; animation: pulse-status 1s infinite; }
        .doc-lib-status.indexed  { background: rgba(34,197,94,0.15);  color: #16a34a; }
        .doc-lib-status.failed   { background: rgba(239,68,68,0.15);  color: var(--danger); }
        .doc-lib-status.no_text  { background: rgba(156,163,175,0.15); color: #6b7280; }
        .doc-lib-status.duplicate { background: rgba(245,158,11,0.15); color: #d97706; }
        .doc-lib-doc-loc { font-size: 11px; color: var(--text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .doc-lib-doc-row.is-dup { border-left: 3px solid var(--warning); padding-left: 9px; }
        .doc-lib-doc-row.is-dup .doc-lib-doc-loc { color: #d97706; font-weight: 600; }
        .doc-lib-stat-chip { background: var(--background-secondary); border-radius: 8px; padding: 4px 10px; display:flex; align-items:center; gap:5px; }
        .doc-lib-stat-chip.warn { background: rgba(245,158,11,0.12); color: #d97706; }
        .doclib-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
        .doclib-tab.active { border-bottom-color: var(--primary-color); color: var(--primary-color); }
        .source-card { background: var(--background-secondary); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border-color); display:flex; flex-direction:column; gap:6px; }
        .source-card-header { display:flex; align-items:center; gap:8px; }
        .source-card-name { font-weight: 600; font-size: 14px; flex: 1; }
        .source-card-url { font-size: 11px; color: var(--text-secondary); word-break: break-all; }
        .source-card-meta { display:flex; gap:10px; font-size: 11px; color: var(--text-secondary); flex-wrap:wrap; }
        .source-badge { font-size: 10px; border-radius: 5px; padding: 2px 7px; font-weight: 700; }
        .source-badge.rss  { background: rgba(239,68,68,0.12);  color: var(--danger); }
        .source-badge.url  { background: rgba(59,130,246,0.12);  color: #2563eb; }
        .source-badge.json { background: rgba(16,185,129,0.12);  color: #059669; }
        .source-badge.env { background: rgba(245,158,11,0.14); color: var(--warning-text); }
        .source-badge.auth { background: rgba(99,102,241,0.14); color: #4338ca; }
        .source-badge.inactive { background: rgba(156,163,175,0.15); color: #6b7280; }
        @keyframes pulse-status { 0%,100%{opacity:1} 50%{opacity:0.5} }
        #logout:hover { background: rgba(255,255,255,0.1); color: #ffffff; border-color: rgba(255,255,255,0.4); }

        /* ── Panneau Tableau de bord ── */
        .dashboard-panel {
            position: fixed; top: 0; right: 0; width: min(820px, 100vw); height: 100vh;
            background: var(--background-color); border-left: 1px solid var(--border-color);
            z-index: 1000; transform: translateX(100%); transition: transform 0.25s ease;
            display: flex; flex-direction: column;
        }
        .dashboard-panel.open { transform: translateX(0); }
        .dashboard-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
        .dashboard-panel-header h2 { margin: 0; font-size: 16px; font-weight: 700; }
        .dashboard-panel-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 24px; }
        .dash-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
        .dash-stat-card {
            background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 10px;
            padding: 16px; display: flex; flex-direction: column; gap: 4px;
        }
        .dash-stat-value { font-size: 28px; font-weight: 700; color: var(--primary-color); line-height: 1; }
        .dash-stat-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
        .dash-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.45; margin-bottom: 8px; }
        .dash-client-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-color); cursor: pointer; }
        .dash-client-row:last-child { border-bottom: none; }
        .dash-client-row:hover .dash-client-name { color: var(--primary-color); }
        .dash-client-rank { font-size: 11px; font-weight: 700; opacity: 0.35; width: 18px; flex-shrink: 0; }
        .dash-client-name { font-size: 13px; font-weight: 600; flex: 1; }
        .dash-client-badge { font-size: 11px; background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 4px; padding: 2px 7px; color: var(--text-secondary); }
        .btn-briefing-action.primary { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
        .btn-briefing-action.primary:hover { opacity: 0.88; }

        /* ── Export / Print ── */
        .print-btn {
            display: flex; align-items: center; gap: 5px; padding: 6px 12px;
            border: 1px solid var(--border-color); border-radius: 9px; background: var(--background-color);
            color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer;
            transition: border-color .15s, color .15s, background .15s;
        }
        .print-btn:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb),.06); }

        @media print {
            /* Masquer tout sauf le contenu à imprimer */
            .header, .sidebar, #toast, .admin-panel, .doc-library-panel, .dashboard-panel, .usage-panel,
            .client-panel,
            #record-modal, .modal-overlay { display: none !important; }
            body, html { background: #fff !important; color: #000 !important; }
            .container { display: block !important; }
            #chat { overflow: visible !important; height: auto !important; }
            .welcome-screen { padding: 0 !important; }
            /* Conversation print */
            .message { page-break-inside: avoid; }
            .bot-message { background: #f5f5f5 !important; }
        }

        /* ── Settings tabs (segment control) ─────────────── */
        .settings-tabs {
            display: flex;
            gap: 2px;
            margin-bottom: 24px;
            background: var(--hover-bg, rgba(0,0,0,.06));
            padding: 4px;
            border-radius: 12px;
            /* Une SEULE ligne : largeur naturelle des onglets, défilement horizontal discret
               si l'écran est trop étroit (au lieu d'un 2ᵉ niveau étiré et déséquilibré). */
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: none;                 /* Firefox */
            -webkit-overflow-scrolling: touch;
        }
        .settings-tabs::-webkit-scrollbar { display: none; }   /* Safari/Chrome */
        .settings-tab {
            flex: 0 0 auto;                        /* largeur = contenu, ni étirement ni compression */
            padding: 8px 14px;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            border-radius: 9px;
            transition: background .18s ease, color .18s ease, box-shadow .18s ease;
            white-space: nowrap;
            text-align: center;
            letter-spacing: .01em;
        }
        .settings-tab:hover:not(.active) {
            background: rgba(0,0,0,.05);
            color: var(--text-color);
        }
        .settings-tab.active {
            background: var(--bg-color, #fff);
            color: var(--primary-color);
            font-weight: 650;
            box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06);
        }
        [data-theme="dark"] .settings-tab.active,
        .dark-mode .settings-tab.active {
            background: var(--input-bg, #2a2a2a);
            box-shadow: 0 1px 6px rgba(0,0,0,.4);
        }
        .settings-tab-panel { display: none !important; }
        .settings-tab-panel.active { display: block !important; }

        /* ── Panneau usage stats ─────────────────────────── */
        .usage-panel {
            position: fixed; top: 0; right: 0; width: min(960px, 100vw); height: 100vh;
            background: var(--background-color); border-left: 1px solid var(--border-color);
            z-index: 1000; transform: translateX(100%); transition: transform 0.25s ease;
            display: flex; flex-direction: column;
        }
        .usage-panel.open { transform: translateX(0); }
        .usage-panel-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
        }
        .usage-panel-header h2 { margin: 0; font-size: 16px; font-weight: 700; }
        .usage-panel-body { flex: 1; overflow-y: auto; padding: 20px; }
        .usage-month-bar {
            display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .usage-month-bar label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
        .usage-month-bar input[type=month] {
            padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 8px;
            background: var(--input-bg); color: var(--text-color); font-size: 13px; cursor: pointer;
        }
        .usage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .usage-table th {
            text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary);
            border-bottom: 2px solid var(--border-color); white-space: nowrap;
        }
        .usage-table td { padding: 10px 10px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
        .usage-table tr:last-child td { border-bottom: none; }
        .usage-table tr.usage-total-row td {
            font-weight: 700; border-top: 2px solid var(--border-color);
            background: var(--hover-bg); border-bottom: none;
        }
        .usage-table tr:hover:not(.usage-total-row) td { background: var(--hover-bg); }
        .usage-num { font-variant-numeric: tabular-nums; text-align: right; }
        .usage-badge-admin {
            font-size: 10px; padding: 1px 6px; border-radius: 99px;
            background: rgba(109,40,217,.12); color: #7c3aed; font-weight: 700; margin-left: 5px;
        }
        .usage-section-title {
            font-size: 11px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .07em; color: var(--text-secondary); opacity: .7;
            margin: 0 0 12px;
        }

        /* ── Skills dropdown dans la fiche client ───────────── */
        .ccc-skills-dropdown { position: relative; }
        .ccc-skills-btn { display: flex !important; align-items: center; gap: 5px; }
        .ccc-skills-menu {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            background: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 8px 28px rgba(0,0,0,.14);
            min-width: 200px;
            max-height: 280px;
            overflow-y: auto;
            z-index: 200;
            padding: 5px;
        }
        .ccc-skills-menu.open { display: block; }
        .ccc-skill-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: background .1s;
            -webkit-tap-highlight-color: transparent;
        }
        .ccc-skill-menu-item:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
        .ccc-skill-menu-icon { font-size: 15px; flex-shrink: 0; }
        .ccc-skill-menu-name { font-size: 13px; color: var(--text-color); }
        /* En-tête de section dans le menu Actions (Documents / Compétences) */
        .ccc-skill-menu-head {
            font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
            color: var(--text-secondary); padding: 8px 12px 4px;
        }
        .ccc-skill-menu-head + .ccc-skill-menu-item { margin-top: 0; }

        /* ── Dossier client — sections extra ────────────────── */
        .ccc-extra-grid {
            display: grid !important;
            /* minmax(0,1fr) et non 1fr : sinon une carte contenant un élément non-sécable
               (titre de conv/enregistrement en nowrap) empêche la piste de rétrécir et
               déborde l'écran (texte du Résumé IA coupé sur mobile). */
            grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
            gap: 14px !important;
            margin-bottom: 24px !important;
        }
        .ccc-extra-card--full { grid-column: 1 / -1 !important; }
        .ccc-extra-card {
            min-width: 0 !important;
            background: var(--background-color) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 14px !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
        }
        .ccc-extra-card-header {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 11px 14px;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            letter-spacing: .02em;
            text-transform: uppercase;
            border-bottom: 1px solid var(--border-color);
        }
        .ccc-extra-card-header svg { flex-shrink: 0; }
        .ccc-extra-count {
            margin-left: auto;
            font-size: 10px;
            font-weight: 700;
            background: var(--hover-bg, rgba(0,0,0,.06));
            border-radius: 10px;
            padding: 1px 7px;
            color: var(--text-secondary);
        }
        .ccc-extra-save-status {
            margin-left: auto;
            font-size: 10px;
            font-weight: 500;
            color: var(--text-secondary);
            font-style: italic;
            text-transform: none;
            letter-spacing: 0;
        }
        /* Petit ⓘ d'aide dans un en-tête de carte (Contexte, Mémoire IA…) */
        .ccc-hdr-info {
            font-size: 11px;
            color: var(--text-secondary);
            opacity: .65;
            cursor: help;
            margin-left: 2px;
            user-select: none;
        }
        .ccc-hdr-info:hover { opacity: 1; }
        /* Mémoire cabinet (onglet Paramètres) */
        /* Le champ de saisie occupe TOUJOURS sa propre ligne (pleine largeur) ; le thème (extensible)
           et le bouton « Mémoriser » se placent en dessous. Fini la languette « U/n » écrasée par le
           sélecteur (dont la largeur est dictée par ses options longues). Vaut mobile ET desktop. */
        .cabmem-add {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-bottom: 14px;
        }
        .cabmem-add textarea {
            flex: 1 1 100%;
            min-width: 0;
            box-sizing: border-box;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 13px;
            font-family: inherit;
            resize: vertical;
            background: var(--input-bg);
            color: var(--text-color);
        }
        .cabmem-add #cabmem-cat { flex: 1 1 200px; min-width: 0; }
        .cabmem-add .btn-primary { flex: 0 0 auto; white-space: nowrap; }
        .cabmem-list { display: flex; flex-direction: column; gap: 6px; }
        /* Chips de thème (filtre) + badge de thème sur chaque règle */
        .cabmem-chip {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 4px 11px; border-radius: 20px; cursor: pointer;
            border: 1px solid var(--border-color); background: var(--background-secondary);
            color: var(--text-secondary); font-size: 12px; font-weight: 600; font-family: inherit;
            transition: background .12s, color .12s, border-color .12s;
        }
        .cabmem-chip:hover { color: var(--text-color); border-color: var(--primary-color); }
        .cabmem-chip.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
        .cabmem-chip-n { font-size: 10.5px; opacity: .7; font-variant-numeric: tabular-nums; }
        .cabmem-chip.active .cabmem-chip-n { opacity: .85; }
        .cabmem-badge {
            display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 700;
            background: rgba(var(--primary-rgb), .12); color: var(--primary-color); letter-spacing: .01em;
            vertical-align: middle;
        }
        .ccc-note-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
        /* Propositions de mémoire (extraction depuis enregistrements, à valider) */
        .ccc-mem-proposals { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
        .ccc-mem-proposals:empty { display: none; }
        .ccc-mem-prop-head {
            font-size: 11px; font-weight: 600; letter-spacing: .02em;
            color: var(--text-secondary); margin-bottom: 2px;
        }
        .ccc-mem-prop {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 10px; border-radius: 8px;
            background: color-mix(in srgb, var(--accent, #d99b28) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent, #d99b28) 35%, transparent);
        }
        .ccc-mem-prop-text { flex: 1; font-size: 13px; line-height: 1.4; }
        .ccc-mem-prop-actions { display: flex; gap: 6px; flex-shrink: 0; }
        .ccc-mem-accept, .ccc-mem-reject {
            font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
            border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color);
            white-space: nowrap;
        }
        .ccc-mem-accept { border-color: transparent; background: var(--accent, #d99b28); color: #fff; font-weight: 600; }
        .ccc-mem-accept:hover { filter: brightness(1.05); }
        .ccc-mem-reject:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
        .ccc-mem-edit-prop { font-size: 12px; padding: 4px 8px; border-radius: 6px; cursor: pointer;
            border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); }
        .ccc-mem-edit-prop:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
        /* Éditeur inline d'une mémoire */
        .mem-edit-box { display: flex; flex-direction: column; gap: 6px; width: 100%; }
        .mem-edit-input {
            width: 100%; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 6px;
            font-size: 13px; font-family: inherit; resize: vertical; background: var(--input-bg); color: var(--text-color);
        }
        .mem-edit-actions { display: flex; gap: 6px; }
        .mem-edit-save, .mem-edit-cancel {
            font-size: 12px; padding: 4px 12px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color);
        }
        .mem-edit-save { border-color: transparent; background: var(--accent, #d99b28); color: #fff; font-weight: 600; }
        .mem-edit-save:hover { filter: brightness(1.05); }
        .mem-edit-cancel { background: var(--input-bg); color: var(--text-color); }
        .mem-edit-cancel:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
        /* Risques du territoire (POC Géorisques) */
        /* Corps des panneaux « données publiques » : padding aligné sur l'en-tête (14px),
           sinon le contenu et le bouton Copier collent aux bords de la carte. */
        #ccc-territory-body, #ccc-finances-body, #ccc-competences-body,
        #ccc-contrats-body, #ccc-icpe-body, #ccc-water-body { padding: 12px 14px 16px; }
        /* Bandeau à onglets « Données du dossier » */
        .ccc-databand-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
        .ccc-db-chip {
            display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500;
            padding: 7px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
            border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color);
        }
        /* Couleur propre à chaque onglet (--c) : icône teintée, survol léger, actif = pastille pleine. */
        .ccc-db-chip[data-panel="territory"]   { --c: var(--warning); }  /* risques — ambre */
        .ccc-db-chip[data-panel="finances"]    { --c: var(--success); }  /* finances — vert */
        .ccc-db-chip[data-panel="competences"] { --c: #6366f1; }  /* compétences — indigo */
        .ccc-db-chip[data-panel="contrats"]    { --c: #0ea5e9; }  /* assurances — bleu */
        .ccc-db-chip[data-panel="icpe"]        { --c: #ef4444; }  /* ICPE — rouge */
        .ccc-db-chip[data-panel="water"]       { --c: #06b6d4; }  /* eau — cyan */
        .ccc-db-chip svg { opacity: 1; color: var(--c, var(--text-secondary)); }
        .ccc-db-chip:hover { background: var(--hover-bg, rgba(0,0,0,.05)); background: color-mix(in srgb, var(--c, #888) 12%, transparent); border-color: color-mix(in srgb, var(--c, #888) 45%, var(--border-color)); }
        .ccc-db-chip.active { background: var(--c, var(--accent, #3b82f6)); color: #fff; border-color: transparent; }
        .ccc-db-chip.active svg { opacity: 1; color: #fff; }
        .ccc-db-panel { border-top: 1px solid var(--border-color); }
        .ccc-comp-table tfoot td { border-top: 2px solid var(--border-color); padding-top: 8px; }
        /* Mobile : onglets en ICÔNES SEULES, sur une seule ligne */
        @media (max-width: 768px), (pointer: coarse) {
            .ccc-databand-bar { flex-wrap: nowrap; gap: 5px; padding: 10px; }
            .ccc-db-chip { flex: 1; justify-content: center; padding: 10px 0; }
            .ccc-db-chip span { display: none; }
            .ccc-db-chip svg { opacity: .8; width: 17px; height: 17px; }
        }
        .ccc-terr-grid { display: flex; flex-direction: column; gap: 20px; }
        .ccc-terr-k { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
        .ccc-terr-v { font-size: 13px; line-height: 1.5; }
        .ccc-terr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
        /* Chips discrets & modernes : neutre, plat, hairline (thème clair/sombre) */
        .ccc-terr-chip, .ccc-comp-chip {
            font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 8px; white-space: nowrap;
            background: rgba(128, 132, 148, .10); border: 1px solid rgba(128, 132, 148, .18);
            color: var(--text-color); line-height: 1.5;
        }
        .ccc-terr-copy {
            display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; font-weight: 500;
            text-transform: none; letter-spacing: 0; padding: 3px 9px; border-radius: 6px; cursor: pointer;
            border: 1px solid var(--border-color); background: var(--input-bg); color: var(--accent, #3b82f6);
        }
        .ccc-terr-copy:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
        .ccc-terr-cat { display: flex; gap: 10px; font-size: 12.5px; padding: 3px 0; color: var(--text-color); }
        .ccc-terr-cat-d { color: var(--text-secondary); min-width: 82px; font-variant-numeric: tabular-nums; }
        .ccc-terr-inline { display: flex; gap: 28px; flex-wrap: wrap; }
        .ccc-terr-src { margin-top: 10px; font-size: 11px; color: var(--text-secondary); opacity: .85; }
        .ccc-terr-link { color: var(--accent, #3b82f6); text-decoration: none; }
        .ccc-terr-link:hover { text-decoration: underline; }
        .ccc-terr-map { height: 260px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); }
        .ccc-terr-map .leaflet-container { background: var(--input-bg); }
        /* Installations classées (ICPE) */
        .ccc-icpe-ent { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
        .ccc-icpe-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border-color); }
        .ccc-icpe-nom { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
        .ccc-icpe-loc { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
        .ccc-icpe-tag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--accent, #3b82f6) 18%, transparent); color: var(--accent, #3b82f6); vertical-align: middle; }
        .ccc-icpe-reg { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--hover-bg, rgba(0,0,0,.05)); white-space: nowrap; }
        .ccc-icpe-reg[data-r*="autorisation"] { background: color-mix(in srgb, #d99b28 22%, transparent); }
        .ccc-icpe-flag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--hover-bg, rgba(0,0,0,.06)); }
        .ccc-icpe-flag.danger { background: color-mix(in srgb, var(--danger, #dc3545) 20%, transparent); color: var(--danger, #dc3545); }
        .ccc-icpe-more { font-size: 12px; color: var(--text-secondary); padding: 6px 0 0; }
        .ccc-icpe-inst { border-top: 1px solid var(--border-color); padding: 7px 0; }
        .ccc-icpe-inst .ccc-icpe-row { border-top: none; padding: 0; }
        .ccc-icpe-detail { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 5px 0 0 4px; align-items: center; }
        .ccc-icpe-doc {
            font-size: 12px; padding: 3px 8px; border-radius: 6px; text-decoration: none;
            background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent);
            color: var(--accent, #3b82f6); border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 28%, transparent);
        }
        .ccc-icpe-doc:hover { filter: brightness(1.05); text-decoration: none; }
        .ccc-icpe-rub { font-size: 12px; color: var(--text-secondary); }
        .ccc-icpe-rub a { color: var(--accent, #3b82f6); text-decoration: none; }
        .ccc-icpe-rub a:hover { text-decoration: underline; }
        /* Tag « nature du risque » (Déchets, Carrière, Industrie…) déduit des données Géorisques. */
        .ccc-icpe-nature { font-size: 11px; font-weight: 600; color: var(--primary-color); background: rgba(var(--primary-rgb),.10); border: 1px solid rgba(var(--primary-rgb),.28); border-radius: 7px; padding: 1px 8px; }
        /* Adresse / désignation de l'installation (adresse1 = souvent la nature de l'activité). */
        .ccc-icpe-adr { display: flex; align-items: flex-start; gap: 5px; margin: 4px 0 0 4px; font-size: 12.5px; color: var(--text-color); }
        .ccc-icpe-adr svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--text-secondary); }
        /* Rubriques classées (description de l'activité de l'installation). */
        .ccc-icpe-rubs { list-style: none; margin: 5px 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
        .ccc-icpe-rubline { font-size: 12px; color: var(--text-color); line-height: 1.35; }
        .ccc-icpe-rubnum { display: inline-block; min-width: 46px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
        .ccc-icpe-rubreg { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 6px; padding: 0 5px; }
        .ccc-icpe-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
        .ccc-icpe-headbtns { display: flex; gap: 6px; flex-wrap: wrap; }
        /* Synthèse IA assurance des ICPE. */
        .ccc-icpe-synthbox { margin: 6px 0 14px; border: 1px solid rgba(var(--primary-rgb),.22); border-radius: 14px; background: var(--background-color); overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
        .ccc-icpe-synthead { display: flex; align-items: center; gap: 8px; padding: 11px 15px; font-size: 13px; font-weight: 700; color: var(--primary-color); background: rgba(var(--primary-rgb),.06); border-bottom: 1px solid rgba(var(--primary-rgb),.14); cursor: pointer; user-select: none; }
        .ccc-icpe-synthchev { display: inline-flex; color: var(--text-secondary); transition: transform .2s; }
        .ccc-icpe-synthbox.collapsed .ccc-icpe-synthchev { transform: rotate(-90deg); }
        .ccc-icpe-synthbox.collapsed .ccc-icpe-synthead { border-bottom: none; }
        .ccc-icpe-synthbox.collapsed .ccc-icpe-synthbody { display: none; }
        .ccc-icpe-synthead svg { width: 16px; height: 16px; }
        .ccc-icpe-synthsub { font-weight: 500; color: var(--text-secondary); }
        .ccc-icpe-synthpdf { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color); cursor: pointer; transition: border-color .15s, color .15s; }
        .ccc-icpe-synthpdf:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .ccc-icpe-synthpdf svg { width: 14px; height: 14px; }
        .ccc-icpe-synthbody { padding: 4px 16px 14px; font-size: 13px; line-height: 1.55; color: var(--text-color); }
        /* En-tête d'installation : séparateur + accent à gauche. */
        .ccc-icpe-synthbody h2, .ccc-icpe-synthbody h3 { font-size: 13.5px; font-weight: 700; color: var(--text-color); margin: 16px 0 8px; padding: 13px 0 0 11px; border-top: 1px solid var(--border-color); border-left: 3px solid var(--primary-color); }
        .ccc-icpe-synthbody > :is(h2, h3):first-child { border-top: none; margin-top: 8px; padding-top: 3px; }
        /* Sous-titre de catégorie (Activités classées, Prévention…) : #### → h4. */
        .ccc-icpe-synthbody h4 { font-size: 12.5px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 4px; }
        .ccc-icpe-synthbody h4 strong { font-weight: 700; }
        /* Sécurité : un bloc de code résiduel doit s'enrouler, pas déborder/être tronqué. */
        .ccc-icpe-synthbody pre { white-space: pre-wrap; word-break: break-word; background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; font-size: 12px; overflow-x: auto; }
        /* Label de catégorie en tête de puce (Activités classées, Prévention…) coloré. */
        .ccc-icpe-synthbody li > strong:first-child, .ccc-icpe-synthbody p > strong:first-child { color: var(--primary-color); }
        .ccc-icpe-synthbody ul { margin: 5px 0 10px; padding-left: 3px; list-style: none; }
        .ccc-icpe-synthbody li { position: relative; margin: 5px 0; padding-left: 16px; }
        .ccc-icpe-synthbody li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--primary-rgb),.55); }
        .ccc-icpe-synthbody li ul { margin: 4px 0 4px; }
        .ccc-icpe-synthbody p { margin: 5px 0; }
        .ccc-icpe-synthbody table { border-collapse: collapse; width: 100%; margin: 7px 0; font-size: 12px; }
        .ccc-icpe-synthbody th, .ccc-icpe-synthbody td { border: 1px solid var(--border-color); padding: 4px 8px; text-align: left; vertical-align: top; }
        /* En-tête lisible : texte SOMBRE explicite (sinon héritait le « color:white » de .md-table
           sur mon fond gris clair → blanc sur gris = invisible). */
        .ccc-icpe-synthbody th { background: var(--background-secondary); color: var(--text-color); font-weight: 700; }
        .ccc-icpe-dlall {
            font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer;
            border: none; background: var(--accent, #3b82f6); color: #fff; white-space: nowrap;
        }
        .ccc-icpe-dlall:hover { filter: brightness(1.05); }
        .ccc-icpe-dlall:disabled { opacity: .6; cursor: default; }
        /* Finances (OFGL) */
        .ccc-fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 8px; }
        .ccc-fin-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; background: var(--hover-bg, rgba(0,0,0,.04)); }
        .ccc-fin-lbl { font-size: 11px; color: var(--text-secondary); }
        .ccc-fin-val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
        .ccc-fin-val em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--text-secondary); margin-left: 6px; }
        /* Compétences */
        .ccc-comp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
        .ccc-comp-reanalyze {
            font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
            border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); white-space: nowrap;
        }
        .ccc-comp-reanalyze:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
        .ccc-comp-reanalyze:disabled { opacity: .6; cursor: default; }
        .ccc-comp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
        .ccc-comp-chip {
            display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border-radius: 8px;
        }
        .ccc-comp-del-exe {
            border: none; background: none; cursor: pointer; color: var(--text-secondary);
            font-size: 15px; line-height: 1; padding: 0 3px; border-radius: 50%;
        }
        .ccc-comp-del-exe:hover { color: var(--danger, #dc3545); }
        .ccc-comp-addwrap, .ccc-comp-addtr { display: inline-flex; gap: 4px; align-items: center; }
        .ccc-comp-addtr { display: flex; margin-top: 6px; }
        .ccc-comp-inp {
            font-size: 12px; padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 6px;
            background: var(--input-bg); color: var(--text-color); min-width: 120px;
        }
        .ccc-comp-addtr .ccc-comp-inp { flex: 1; }
        .ccc-comp-addbtn {
            font-size: 14px; font-weight: 700; width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
            border: none; background: var(--accent, #3b82f6); color: #fff; flex-shrink: 0;
        }
        .ccc-comp-addbtn:hover { filter: brightness(1.05); }
        /* Tableau récapitulatif des compétences transférées */
        .ccc-comp-tablewrap { overflow-x: auto; margin: 4px 0 8px; }
        .ccc-comp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .ccc-comp-table th {
            text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
            color: var(--text-secondary); padding: 4px 8px; border-bottom: 1px solid var(--border-color); white-space: nowrap;
        }
        .ccc-comp-table td {
            padding: 6px 8px; border-bottom: 1px solid var(--border-color); vertical-align: top; line-height: 1.4;
        }
        .ccc-comp-table tbody tr:last-child td { border-bottom: none; }
        .ccc-comp-table td:nth-child(2) { color: var(--text-secondary); }
        .ccc-comp-table td:last-child { width: 1%; text-align: right; }
        .ccc-comp-na { color: var(--text-secondary); font-style: italic; opacity: .8; }
        /* Tableau Assurances : pastille de couleur par branche + total mis en valeur. */
        .ccc-ct-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: middle; }
        .ccc-ct-table td:nth-child(3) { color: var(--text-color); font-variant-numeric: tabular-nums; }
        .ccc-ct-total { font-weight: 700; color: var(--primary-color); font-variant-numeric: tabular-nums; }
        .ccc-ct-table tfoot tr { background: rgba(var(--primary-rgb), .05); }
        .ccc-comp-del-tr {
            border: none; background: none; cursor: pointer; color: var(--text-secondary);
            font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px;
        }
        .ccc-comp-del-tr:hover { color: var(--danger, #dc3545); }
        /* Synthèse aérée */
        .ccc-comp-synth { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--hover-bg, rgba(0,0,0,.03)); }
        .ccc-comp-synth .ccc-terr-k { margin-bottom: 6px; }
        .ccc-comp-synth p { margin: 0 0 9px; font-size: 13px; line-height: 1.6; }
        .ccc-comp-synth p:last-child { margin-bottom: 0; }
        /* Aération des sections du panneau Compétences */
        #ccc-competences-body .ccc-terr-block { margin-bottom: 20px; }
        #ccc-competences-body .ccc-terr-block:last-child { margin-bottom: 0; }
        #ccc-competences-body .ccc-terr-k { margin-bottom: 10px; }
        .ccc-comp-addtr { margin-top: 10px; }
        .ccc-comp-toggle {
            margin-top: 8px; font-size: 12.5px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
            border: 1px solid var(--border-color); background: var(--input-bg); color: var(--accent, #3b82f6);
        }
        .ccc-comp-toggle:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
        /* Activité */
        .ccc-activity-list { padding: 6px 0 4px; }
        .ccc-activity-list--scroll { max-height: 260px; overflow-y: auto; padding: 4px 0; }
        .ccc-activity-item {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 6px 14px;
            transition: background .1s;
            cursor: default;
        }
        .ccc-activity-item:hover { background: var(--hover-bg, rgba(0,0,0,.04)); }
        .ccc-activity-icon {
            width: 24px; height: 24px;
            border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .ccc-activity-label {
            flex: 1;
            font-size: 12px;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ccc-activity-date {
            font-size: 10px;
            color: var(--text-secondary);
            flex-shrink: 0;
        }
        .ccc-extra-empty {
            padding: 16px 14px;
            font-size: 12px;
            color: var(--text-secondary);
            font-style: italic;
        }
        /* Notes */
        .ccc-notes-list { display: flex; flex-direction: column; }
        .ccc-note-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); }
        .ccc-note-item:last-child { border-bottom: none; }
        .ccc-note-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
        .ccc-note-text { font-size: 13px; line-height: 1.65; color: var(--text-color); word-break: break-word; }
        .ccc-note-text p { margin: 0 0 9px; }
        .ccc-note-text p:last-child { margin-bottom: 0; }
        .ccc-note-text strong { font-weight: 700; color: var(--text-color); }
        .ccc-note-text ul, .ccc-note-text ol { margin: 5px 0 9px; padding-left: 20px; }
        .ccc-note-text li { margin: 2px 0; }
        .ccc-note-text li::marker { color: var(--text-secondary); }
        .ccc-note-text h1, .ccc-note-text h2, .ccc-note-text h3 { font-size: 13.5px; font-weight: 700; margin: 10px 0 5px; }
        .ccc-note-text h1:first-child, .ccc-note-text h2:first-child, .ccc-note-text h3:first-child, .ccc-note-text p:first-child { margin-top: 0; }
        .ccc-note-text a { color: var(--primary-color); text-decoration: none; }
        .ccc-note-text a:hover { text-decoration: underline; }
        .ccc-note-date { font-size: 10.5px; color: var(--text-secondary); opacity: .7; margin-top: 2px; }
        .ccc-note-del { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--text-secondary); opacity: .45; padding: 2px 4px; border-radius: 4px; font-size: 14px; transition: opacity .12s; margin-top: 1px; }
        .ccc-note-del:hover { opacity: 1; color: var(--danger); }
        .ccc-note-form { padding: 10px 14px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 8px; }
        .ccc-note-form textarea { width: 100%; box-sizing: border-box; min-height: 70px; border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--text-color); background: var(--background-secondary); resize: vertical; outline: none; line-height: 1.6; }
        .ccc-note-form textarea:focus { border-color: var(--primary-color); }
        .ccc-note-form-actions { display: flex; gap: 8px; }
        .ccc-note-confirm { padding: 5px 14px; border-radius: 7px; border: none; background: var(--primary-color); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
        /* ── Carte Actions (suivi des tâches issues des enregistrements) ── */
        #ccc-actions-card.collapsed .ccc-actions-body,
        #ccc-actions-card.collapsed .ccc-actions-add { display: none; }
        /* Mémoire IA repliable + liste défilante quand il y en a beaucoup. */
        #ccc-memory-card.collapsed .ccc-mem-proposals,
        #ccc-memory-card.collapsed .ccc-notes-list,
        #ccc-memory-card.collapsed .ccc-note-form { display: none; }
        #ccc-memory-list { max-height: 340px; overflow-y: auto; }
        .ccc-actions-divider { padding: 8px 14px 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); opacity: .7; border-top: 1px solid var(--border-color); background: var(--background-secondary); }
        .ccc-actions-body { display: flex; flex-direction: column; }
        .ccc-action-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); }
        .ccc-action-item:last-child { border-bottom: none; }
        .ccc-action-check { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--border-color); background: var(--background-color); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, border-color .15s; }
        .ccc-action-check:hover { border-color: var(--primary-color); }
        .ccc-action-item.done .ccc-action-check { background: var(--success); border-color: var(--success); }
        .ccc-action-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        .ccc-action-text { font-size: 13px; line-height: 1.5; color: var(--text-color); cursor: text; overflow-wrap: anywhere; }
        .ccc-action-item.done .ccc-action-text { text-decoration: line-through; color: var(--text-secondary); opacity: .7; }
        .ccc-action-meta { display: flex; flex-wrap: wrap; gap: 6px; }
        .ccc-action-resp, .ccc-action-due { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; }
        .ccc-action-resp { background: rgba(139,92,246,.12); color: #7c3aed; }
        .ccc-action-due { background: rgba(245,158,11,.12); color: var(--warning-text); }
        .ccc-action-del { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--text-secondary); opacity: .4; font-size: 13px; padding: 2px 5px; border-radius: 5px; transition: opacity .12s, color .12s; }
        .ccc-action-del:hover { opacity: 1; color: var(--danger); }
        .ccc-action-edit-input { width: 100%; box-sizing: border-box; border: 1px solid var(--primary-color); border-radius: 6px; padding: 5px 8px; font-size: 13px; font-family: inherit; color: var(--text-color); background: var(--background-color); outline: none; }
        .ccc-actions-add { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-color); }
        .ccc-actions-add input { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; color: var(--text-color); background: var(--background-secondary); outline: none; }
        .ccc-actions-add input:focus { border-color: var(--primary-color); }
        .ccc-action-add-btn { flex-shrink: 0; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
        .ccc-action-add-btn:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb),.06); }
        .ccc-note-confirm:hover { opacity: .88; }
        .ccc-note-cancel { padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border-color); background: none; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
        .ccc-add-note-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--primary-color); background: none; color: var(--primary-color); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; text-transform: none; letter-spacing: 0; transition: all .12s; }
        .ccc-add-note-btn:hover { background: var(--primary-color); color: #fff; }
        .ccc-gen-context-wrap { padding: 4px 14px 12px; }
        #ccc-gen-context:disabled { opacity: .6; cursor: default; }
        /* ── Carte Suivi des lots (issue de consultation : attribué / INFRUCTUEUX + relances) ── */
        #ccc-lots-card.collapsed .ccc-lots-body,
        #ccc-lots-card.collapsed .ccc-actions-add { display: none; }
        .ccc-extra-count.ccc-lots-count-alert { background: var(--danger); color: #fff; }
        .ccc-lots-body { display: flex; flex-direction: column; }
        .ccc-lots-year { border-bottom: 1px solid var(--border-color); }
        .ccc-lots-year:last-child { border-bottom: none; }
        .ccc-lots-year-h { padding: 7px 14px 5px; font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: .03em; background: var(--background-secondary); }
        .ccc-lot-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border-color); cursor: pointer; transition: background .12s; }
        .ccc-lot-row:hover { background: rgba(var(--primary-rgb),.05); }
        .ccc-lot-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
        .ccc-lot-name { font-size: 13px; font-weight: 600; color: var(--text-color); overflow-wrap: anywhere; }
        .ccc-lot-num { font-size: 11px; color: var(--text-secondary); }
        .ccc-lot-auto { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 20px; background: rgba(var(--primary-rgb),.1); color: var(--primary-color); }
        .ccc-lot-tags { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
        .ccc-lot-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
        .ccc-lot-attribue { background: rgba(16,185,129,.13); color: #047857; }
        .ccc-lot-infructueux { background: rgba(239,68,68,.14); color: var(--danger-strong); }
        .ccc-lot-sans_suite { background: rgba(107,114,128,.15); color: #4b5563; }
        .ccc-lot-en_cours { background: rgba(245,158,11,.14); color: var(--warning-text); }
        .ccc-lot-relance { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
        .ccc-lot-relance-todo { background: rgba(239,68,68,.1); color: var(--danger-strong); }
        .ccc-lot-relance-mid { background: rgba(245,158,11,.14); color: var(--warning-text); }
        .ccc-lot-relance-ok { background: rgba(16,185,129,.13); color: #047857; }
        /* Éditeur de lot (modale) */
        .ccc-lot-dlg { width: min(560px, 94vw); max-width: 560px; text-align: left; }
        .ccc-lot-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
        .ccc-lot-fld { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
        .ccc-lot-fld--wide { grid-column: 1 / -1; }
        .ccc-lot-fld input, .ccc-lot-fld select, .ccc-lot-fld textarea { box-sizing: border-box; width: 100%; border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; font-weight: 400; color: var(--text-color); background: var(--background-secondary); outline: none; }
        .ccc-lot-fld input:focus, .ccc-lot-fld select:focus, .ccc-lot-fld textarea:focus { border-color: var(--primary-color); }
        .ccc-lot-relance-block { margin-top: 12px; padding: 12px; border: 1px dashed rgba(239,68,68,.35); border-radius: 10px; background: rgba(239,68,68,.04); }
        .ccc-lot-relance-title { font-size: 11.5px; font-weight: 700; color: var(--danger-strong); margin-bottom: 9px; }
        .ccc-lot-actions { margin-top: 16px; display: flex; align-items: center; gap: 8px; }
        /* Résumé IA */
        .ccc-ai-gen-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
            font-size: 11px;
            font-weight: 600;
            background: var(--primary-color);
            color: #fff;
            border: none;
            border-radius: 20px;
            padding: 3px 10px;
            cursor: pointer;
            font-family: inherit;
            text-transform: none;
            letter-spacing: 0;
            transition: opacity .15s;
        }
        .ccc-ai-gen-btn:hover { opacity: .85; }
        .ccc-ai-gen-btn:disabled { opacity: .5; cursor: wait; }
        .ccc-ai-summary-body {
            padding: 18px 20px;
            background: rgba(var(--primary-rgb, 99,102,241), .04);
        }
        .ccc-ai-summary-text {
            font-size: 13.5px;
            color: var(--text-color);
            line-height: 1.85;
            margin: 0 0 10px;
            opacity: .9;
        }
        .ccc-ai-summary-text:last-child { margin-bottom: 0; }
        .ccc-ai-summary-text strong { font-weight: 650; color: var(--text-color); opacity: 1; }
        .ccc-ai-summary-text em { font-style: italic; }
        @media (max-width: 900px) {
            /* Mobile/tablette : on abandonne la grille (dimensionnement de piste récalcitrant qui
               débordait) au profit d'un simple empilement de blocs pleine largeur. Imparable. */
            .ccc-extra-grid { display: block !important; }
            .ccc-extra-grid > .ccc-extra-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin-bottom: 14px !important; }
        }

        /* ── Titre dans le bandeau ──────────────────────────── */
        #content-header-title {
            display: block;
            min-width: 0;
            max-width: 100%;
            white-space: nowrap;      /* jamais de retour à la ligne (salutation/titre entassés) */
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;
            font-weight: 650;
            letter-spacing: -.15px;
        }
        /* Mobile : la date de salutation est masquée pour laisser le PRÉNOM entier (sinon
           « Bonjour Guilhem… » était tronqué faute de place à côté des icônes). */
        @media (max-width: 640px) { .hdr-greet-date { display: none; } }
        /* Cibles tactiles : tout bouton-icône de la barre d'en-tête doit faire ≥ 40px de haut
           (confort iOS, évite les taps ratés type menu ⋯). */
        @media (max-width: 640px) {
            .content-header-settings { min-width: 40px; min-height: 40px; }
        }

        /* ── Rapport sinistralité ──────────────────────────── */
        .ccc-sin-section {
            margin: 0 0 24px 0;
            background: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(0,0,0,.05);
        }
        .ccc-sin-header {
            display: flex;
            align-items: center;
            /* Boutons groupés et SERRÉS à droite : le titre pousse tout à droite (margin-right:auto),
               les boutons ne sont plus étalés par space-between mais espacés d'un petit gap fixe. */
            justify-content: flex-start;
            gap: 6px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            background: var(--background-secondary);
            cursor: pointer;
            user-select: none;
        }
        .ccc-sin-section.collapsed .ccc-sin-body { display: none; }
        .ccc-sin-section.collapsed .ccc-sin-header { border-bottom: none; }
        .ccc-sin-collapse-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 4px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            transition: transform 0.2s;
            margin-left: 8px;
        }
        .ccc-sin-section.collapsed .ccc-sin-collapse-btn { transform: rotate(-90deg); }
        .ccc-sin-title {
            font-size: 14px;
            font-weight: 600;
            margin: 0 auto 0 0;   /* pousse les boutons à droite */
            display: flex;
            align-items: center;
            gap: 7px;
            color: var(--text-color);
        }
        /* Mobile : titre sur sa propre ligne, puis les boutons icône-seule tous sur UNE
           même ligne, à parts égales. Les libellés sont masqués (repris en title/aria-label) ;
           seuls l'icône et l'éventuelle pastille (badge « Corriger le classement ») restent. */
        @media (max-width: 768px) {
            .ccc-sin-header { flex-wrap: wrap; gap: 8px; }
            .ccc-sin-title { flex: 1 1 100%; }
            .ccc-sin-header .client-center-btn {
                flex: 1 1 0; min-width: 0;
                justify-content: center;
                padding: 10px 0; font-size: 12px;
            }
            .ccc-sin-header .ccc-sin-lbl { display: none; }
        }
        .ccc-sin-body {
            padding: 16px;
        }
        .ccc-sin-body.loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 36px 16px;
            color: var(--text-secondary);
            font-size: 13px;
        }
        .ccc-sin-spinner {
            width: 28px; height: 28px;
            border: 3px solid var(--border-color);
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: spin .8s linear infinite;
        }
        .ccc-sin-empty {
            font-size: 13px;
            color: var(--text-secondary);
            text-align: center;
            padding: 20px 0;
        }
        .ccc-sin-report-text {
            font-size: 13.5px;
            line-height: 1.7;
            color: var(--text-color);
            margin-bottom: 20px;
        }
        .ccc-sin-report-text h2, .ccc-sin-report-text h3 {
            font-size: 14px;
            font-weight: 600;
            margin: 18px 0 6px;
            color: var(--text-color);
        }
        .ccc-sin-report-text table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12.5px;
            margin: 10px 0;
        }
        .ccc-sin-report-text th, .ccc-sin-report-text td {
            border: 1px solid var(--border-color);
            padding: 6px 10px;
            text-align: left;
        }
        .ccc-sin-report-text th {
            background: var(--primary-color);
            color: #fff;
            font-weight: 600;
        }
        .ccc-sin-charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
            margin-top: 8px;
        }
        .ccc-sin-chart-card {
            background: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
        }
        /* Sections par lot */
        .ccc-sin-lot-section {
            margin-top: 22px;
            border-top: 1px solid var(--border-color);
            padding-top: 18px;
        }
        .ccc-sin-lot-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            padding-bottom: 7px;
            border-bottom: 1.5px solid var(--border-color);
        }
        .ccc-sin-lot-badge {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .05em;
            padding: 3px 9px;
            border-radius: 6px;
            background: rgba(59,130,246,.12);
            color: #3b82f6;
            border: 1px solid rgba(59,130,246,.25);
            flex-shrink: 0;
        }
        .ccc-sin-lot-label {
            font-size: 16.5px;
            font-weight: 800;
            letter-spacing: -.01em;
            color: var(--text-color);
        }
        .ccc-sin-lot-summary {
            font-size: 13px;
            line-height: 1.65;
            color: var(--text-secondary);
            margin-bottom: 14px;
        }
        /* ── Chat rapport context banner ── */
        .report-chat-banner { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 12px; margin: 12px 16px 0; }
        .report-chat-banner strong { color: var(--text-color); font-weight: 600; }
        /* ── Section Rapports client : bandeau de pastilles compactes ── */
        /* Le menu ⋯ d'une pastille déborde vers le bas : les sections à pastilles (Rapports,
           Analyses des offres) ne doivent PAS le rogner. La collapse se fait via display:none,
           donc overflow:hidden (coins arrondis) n'est pas nécessaire ici. */
        #ccc-reports-section, #ccc-offers-section { overflow: visible; }
        .ccc-reports-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; align-items: stretch; }
        .ccc-report-group-head { flex-basis: 100%; }
        .ccc-rep-tile {
            position: relative; box-sizing: border-box; width: 176px; min-height: 88px;
            display: flex; flex-direction: column; gap: 3px; padding: 11px 12px;
            border: 1px solid var(--border-color); border-radius: 12px; background: var(--background-secondary);
            cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .08s;
        }
        .ccc-rep-tile:hover { border-color: var(--primary-color); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
        .ccc-rep-tile:active { transform: translateY(1px); }
        /* Menu ⋯ ouvert : élève la tuile ET son menu débordant au-dessus des cartes suivantes,
           sinon un tap sur « Supprimer » (qui déborde sur la carte du dessous) atteint cette carte. */
        .ccc-rep-tile.menu-open { z-index: 40; }
        .ccc-rep-tile-icon { font-size: 19px; line-height: 1; }
        .ccc-rep-tile-name { font-size: 12.5px; font-weight: 700; color: var(--text-color); line-height: 1.25; overflow-wrap: anywhere; padding-right: 18px; }
        .ccc-rep-tile-date { font-size: 10.5px; color: var(--text-secondary); margin-top: auto; line-height: 1.3; }
        .ccc-rep-tile-menu-btn {
            position: absolute; top: 5px; right: 5px; width: 24px; height: 22px; padding: 0;
            border: none; background: none; border-radius: 6px; cursor: pointer;
            color: var(--text-secondary); font-size: 17px; line-height: 1; letter-spacing: 1px;
            display: flex; align-items: center; justify-content: center;
        }
        .ccc-rep-tile-menu-btn:hover { background: rgba(var(--primary-rgb), .1); color: var(--primary-color); }
        .ccc-rep-tile-menu {
            display: none; position: absolute; top: 28px; right: 5px; z-index: 20; min-width: 152px;
            flex-direction: column; gap: 1px; padding: 5px;
            background: var(--background-color); border: 1px solid var(--border-color);
            border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18);
        }
        .ccc-rep-tile-menu.open { display: flex; }
        .ccc-rep-tile-menu button {
            display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
            padding: 7px 9px; border: none; background: none; border-radius: 7px;
            font-size: 12.5px; font-family: inherit; color: var(--text-color); cursor: pointer;
        }
        .ccc-rep-tile-menu button:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
        .ccc-rep-tile-menu button[data-act="del"] { color: var(--danger); }
        @media (max-width: 640px) {
            .ccc-rep-tile { width: calc(50% - 5px); }
        }
        /* Ancien rendu carte pleine largeur (conservé pour compat, plus utilisé) */
        .ccc-report-card {
            border-bottom: 1px solid var(--border-color);
        }
        .ccc-report-card:last-child { border-bottom: none; }
        .ccc-report-card-header {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 14px; cursor: pointer; user-select: none;
            transition: background .15s;
        }
        .ccc-report-card-header:hover { background: var(--hover-bg, rgba(0,0,0,.04)); }
        .ccc-report-card-icon {
            width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
            background: rgba(var(--primary-rgb),.12); color: var(--primary-color);
            display: flex; align-items: center; justify-content: center; font-size: 13px;
        }
        .ccc-report-card-meta { flex: 1; min-width: 0; }
        .ccc-report-card-name { font-size: 13px; font-weight: 600; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ccc-report-card-date { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
        .ccc-report-card-actions { display: flex; gap: 4px; align-items: center; }
        .ccc-report-card-toggle {
            width: 22px; height: 22px; border: none; background: none; cursor: pointer;
            color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
            border-radius: 4px; transition: background .15s, color .15s; padding: 0;
        }
        .ccc-report-card-toggle:hover { background: rgba(0,0,0,.06); color: var(--text-color); }
        .ccc-report-card-toggle svg { transition: transform .2s; }
        .ccc-report-card.open .ccc-report-card-toggle svg { transform: rotate(180deg); }
        .ccc-report-card-chat {
            width: 28px; height: 28px; border-radius: 6px; border: none; background: none;
            color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s;
        }
        .ccc-report-card-chat:hover { background: rgba(var(--primary-rgb),.12); color: var(--primary-color); }
        .ccc-report-card-delete {
            width: 22px; height: 22px; border: none; background: none; cursor: pointer;
            color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
            border-radius: 4px; transition: background .15s, color .15s; padding: 0;
        }
        .ccc-report-card-delete:hover { background: rgba(239,68,68,.1); color: var(--danger); }
        .ccc-report-card-dl, .ccc-report-card-pdf {
            width: 22px; height: 22px; border: none; background: none; cursor: pointer;
            color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
            border-radius: 4px; transition: background .15s, color .15s; padding: 0;
        }
        .ccc-report-card-dl:hover, .ccc-report-card-pdf:hover { background: rgba(var(--primary-rgb),.12); color: var(--primary-color); }
        .ccc-report-card-body {
            display: none; padding: 0 16px 16px;
            font-size: 13px; line-height: 1.7; color: var(--text-color);
        }
        .ccc-report-card.open .ccc-report-card-body { display: block; }
        .ccc-report-card-body h2, .ccc-report-card-body h3 { font-size: 13.5px; font-weight: 600; margin: 14px 0 5px; }
        .ccc-report-card-body table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); }
        .ccc-report-card-body th, .ccc-report-card-body td { border-bottom: 1px solid var(--border-color); padding: 7px 10px; vertical-align: top; }
        .ccc-report-card-body th { background: var(--primary-color); color: #fff; font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em; border-bottom: none; }
        .ccc-report-card-body tbody tr:nth-child(even) { background: rgba(var(--primary-rgb),0.04); }
        .ccc-report-card-body tbody tr:last-child td { border-bottom: none; }

        /* Graphiques dans le chat */
        .chat-sin-charts {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }
        .chat-sin-chart-card {
            background: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 12px;
        }

        /* ── Tableaux des rapports rendus par _oamMd (offres / candidatures / audit) ──
           Classe plutôt que styles inline : les styles inline avec var(--…) rendaient
           les bordures invisibles dans le popup d'export PDF (variables absentes). */
        .oam-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12px; }
        .oam-table th, .oam-table td {
            border: 1px solid var(--border-color, #ccc);
            padding: 5px 8px; text-align: left; vertical-align: top;
        }
        .oam-table th { background: var(--background-secondary, #f4f4f6); font-weight: 600; }
        /* Mobile : un tableau Word (aperçu .docx) a souvent plus de colonnes que l'écran —
           il devient scrollable HORIZONTALEMENT (sinon les colonnes de droite sont coupées
           sans aucun moyen de les lire). */
        @media (max-width: 768px) {
            .oam-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
        }

        /* File d'attente : ne pas recouvrir la bottom-nav de la PWA mobile */
        @media (max-width: 768px) {
            #report-queue { bottom: calc(72px + env(safe-area-inset-bottom)); }
        }

        /* Titres des rapports rendus dans la fiche (audit / candidatures / offres) :
           sans ceci ils héritent des tailles navigateur (26 px) sur un corps 13 px. */
        #aud-report-body h1, #cam-report-body h1, #oam-report-body h1 { font-size: 18px; margin: 4px 0 12px; }
        #aud-report-body h2, #cam-report-body h2, #oam-report-body h2 { font-size: 15px; margin: 18px 0 8px; border-bottom: 1px solid var(--border-color); padding-bottom: 4px; }
        #aud-report-body h3, #cam-report-body h3, #oam-report-body h3 { font-size: 13.5px; margin: 14px 0 6px; }

        /* En-têtes de groupes dans la carte Rapports (« Analyses des offres — un rapport par lot ») */
        .ccc-report-group-head {
            font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
            color: var(--text-secondary); margin: 10px 2px 6px; padding-top: 6px;
        }
        .ccc-report-group-head:not(:first-child) { border-top: 1px solid var(--border-color); }

        /* Compteur des groupes de rapports */
        .ccc-report-group-count {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px;
            border-radius: 9px; background: var(--background-secondary);
            border: 1px solid var(--border-color); font-size: 10px;
            color: var(--text-secondary); letter-spacing: 0;
        }

        /* ── Rapports d'analyse : mise en couleur sémantique ─────────────────── */
        /* Titres : accent primaire (lisible dans les deux thèmes) */
        #aud-report-body h1, #cam-report-body h1, #oam-report-body h1,
        #aud-report-body h2, #cam-report-body h2, #oam-report-body h2 {
            color: var(--primary-color);
        }
        #aud-report-body h2, #cam-report-body h2, #oam-report-body h2 {
            border-bottom: 2px solid rgba(var(--primary-rgb), .25);
        }
        #aud-report-body h3, #cam-report-body h3, #oam-report-body h3 {
            color: var(--text-color);
            border-left: 3px solid var(--primary-color);
            padding-left: 8px;
        }
        /* Tableaux : en-tête teinté + zébrage léger */
        .oam-table th {
            background: rgba(var(--primary-rgb), .10);
            color: var(--primary-color);
        }
        .oam-table tr:nth-child(even) td { background: rgba(var(--primary-rgb), .03); }
        .oam-table td:first-child { color: var(--primary-color); }
        /* Sémantique : conforme / exclusions / alertes */
        .oam-ok { color: #0e8a4f; font-weight: 600; }
        .oam-excl { color: #b3261e; }
        .oam-warn {
            background: rgba(245, 158, 11, .12);
            border-left: 3px solid var(--warning);
            padding: 8px 12px; border-radius: 6px;
        }
        .oam-warn-inline { color: var(--warning-text); }
        .dark-theme .oam-ok { color: #4ade80; }
        .dark-theme .oam-excl { color: #f87171; }
        .dark-theme .oam-warn-inline { color: #fbbf24; }
        /* Contraste thème sombre : teintes fixes éclaircies pour tenir AA (audit UX). */
        .dark-theme .ccc-ref-slot-k, .dark-theme .ccc-ref-slot-ok { color: #8ab0ea; }
        .dark-theme .welcome-client-badge { color: #c4b5fd; background: rgba(139,92,246,.20); }
        .dark-theme .welcome-dead-row.soon .wd-when { color: #fbbf24; }
        .dark-theme .rec-landing-noclient-badge { background: rgba(251,191,36,.16); color: #fbbf24; border-color: rgba(251,191,36,.4); }
        /* Focus clavier visible sur les éléments interactifs récents (accessibilité). */
        .rec-dir-row:focus-visible, .rec-landing-mini:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; border-radius: 6px; }
        .rec-dir-del:focus-visible { outline: 2px solid var(--danger); outline-offset: 1px; opacity: 1; }

        /* ── Bouton flottant « aller en bas » du chat ─────────────────── */
        #scroll-bottom-btn {
            position: absolute; right: 22px; bottom: 110px;
            width: 38px; height: 38px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--background-color); color: var(--text-secondary);
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
            cursor: pointer; z-index: 60; padding: 0;
            opacity: 0; visibility: hidden; transform: translateY(6px);
            transition: opacity .18s, transform .18s, visibility .18s;
        }
        #scroll-bottom-btn.visible { opacity: 1; visibility: visible; transform: none; }
        #scroll-bottom-btn:hover { color: var(--text-color); border-color: var(--primary-color); }
        @media (max-width: 768px) {
            #scroll-bottom-btn { right: 14px; width: 42px; height: 42px; }
        }

        /* ── Admin : Trames du cabinet ─────────────────────────────────── */
        .tr-btn {
            padding: 5px 12px; border: 1px solid var(--border-color); border-radius: 7px;
            background: var(--background-secondary); color: var(--text-color);
            font-size: 12px; font-family: inherit; cursor: pointer;
        }
        .tr-btn-primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
        .tr-btn:disabled { opacity: .55; cursor: default; }
        .tr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        #trame-form input, #trame-form select {
            padding: 6px 9px; border: 1px solid var(--border-color); border-radius: 7px;
            background: var(--input-bg, var(--background-color)); color: var(--text-color);
            font-size: 12px; font-family: inherit; box-sizing: border-box; width: 100%;
        }
        #trame-form { border: 1px solid var(--border-color); border-radius: 9px; padding: 10px; margin-bottom: 6px; background: var(--background-secondary); }
        .trame-group { margin-bottom: 12px; }
        .trame-group-head {
            font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
            color: var(--text-secondary); padding: 4px 0 5px; display: flex; align-items: center; gap: 7px;
        }
        .trame-count { font-size: 10px; background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 9px; padding: 0 7px; }
        .trame-row {
            display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
            padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 5px;
        }
        .trame-inactive { opacity: .5; }
        .trame-row-main { min-width: 0; flex: 1; }
        .trame-name { font-size: 13px; font-weight: 600; margin-right: 6px; }
        .trame-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; }
        .trame-badge {
            font-size: 10px; padding: 1px 7px; border-radius: 9px;
            background: var(--background-secondary); border: 1px solid var(--border-color); color: var(--text-secondary);
        }
        .trame-badge-br { background: color-mix(in srgb, var(--primary-color) 12%, transparent); border-color: color-mix(in srgb, var(--primary-color) 35%, transparent); color: var(--primary-color); }
        .trame-badge-warn { color: var(--warning-text); border-color: var(--warning-text); }
        .trame-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .trame-row-actions { display: flex; gap: 3px; flex-shrink: 0; }
        .trame-act {
            width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
            border: none; background: none; border-radius: 6px; cursor: pointer; font-size: 13px; opacity: .7;
        }
        .trame-act:hover { background: var(--background-secondary); opacity: 1; }

        /* Trames : ajout en masse (tableau de vérification) */
        .trame-bulk-row {
            display: flex; align-items: center; gap: 5px;
            padding: 5px 7px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 4px;
        }
        .trame-bulk-row.tb-ok { border-color: #0e8a4f; opacity: .65; }
        .trame-bulk-row.tb-err { border-color: #b3261e; }
        .tb-status { flex-shrink: 0; font-size: 13px; width: 20px; text-align: center; }
        .tb-name {
            flex: 2 1 160px; min-width: 0; padding: 5px 8px; font-size: 12px; font-family: inherit;
            border: 1px solid var(--border-color); border-radius: 6px;
            background: var(--input-bg, var(--background-color)); color: var(--text-color);
        }
        .tb-sel {
            flex: 0 1 auto; max-width: 110px; padding: 5px 4px; font-size: 11px; font-family: inherit;
            border: 1px solid var(--border-color); border-radius: 6px;
            background: var(--input-bg, var(--background-color)); color: var(--text-color);
        }
        @media (max-width: 768px) {
            .trame-bulk-row { flex-wrap: wrap; }
            .tb-name { flex-basis: 100%; }
        }

        /* Trames : filtres (chips catégorie / collectivité) */
        .trame-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
        .trame-chip {
            padding: 4px 11px; border: 1px solid var(--border-color); border-radius: 14px;
            background: var(--background-secondary); color: var(--text-secondary);
            font-size: 11.5px; font-family: inherit; cursor: pointer; line-height: 1.4;
        }
        .trame-chip span { opacity: .65; font-size: 10px; }
        .trame-chip:hover { color: var(--text-color); }
        .trame-chip.active {
            background: var(--primary-color); border-color: var(--primary-color); color: #fff;
        }
        .trame-chip.active span { opacity: .85; }

        /* Barre de progression de la suppression groupée (fiche client) */
        #ccc-bulk-progress {
            flex-basis: 100%; height: 4px; border-radius: 3px;
            background: rgba(255, 255, 255, .28); overflow: hidden; margin-top: 2px;
        }
        #ccc-bulk-progress-fill {
            height: 100%; width: 0; border-radius: 3px;
            background: #fff; transition: width .25s ease;
        }

        /* ── Modale génération DCE ─────────────────────────────────────── */
        #dce-modal { position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9500;display:none;align-items:center;justify-content:center; }
        #dce-modal.open { display:flex; }
        #dce-close { margin-left:auto;background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-color);opacity:.6; }
        #dce-close:hover { opacity:1; }
        .dce-branch-chip { display:flex;align-items:center;gap:6px;border:1px solid var(--border-color);border-radius:8px;padding:5px 10px;font-size:13px;cursor:pointer;user-select:none; }
        .dce-branch-chip input { margin:0; }
        .dce-group-title { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;opacity:.65;margin:14px 0 6px; }
        .dce-values-table { width:100%;border-collapse:collapse;font-size:13px; }
        .dce-values-table td { padding:4px 6px;border-bottom:1px solid var(--border-color);vertical-align:middle; }
        .dce-values-table td:first-child { width:44%;opacity:.9; }
        .dce-values-table input { width:100%;box-sizing:border-box;border:1px solid var(--border-color);border-radius:6px;padding:5px 8px;background:var(--background-color);color:var(--text-color);font-size:13px; }
        .dce-values-table input.dce-empty { border-color:#c77d0a; }
        .dce-badge-ia { font-size:10px;font-weight:700;color:#fff;background:#7c5cff;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px; }
        .dce-result-line { display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--border-color);font-size:13px; }
        .dce-result-line a { cursor:pointer;color:var(--primary-color);text-decoration:underline; }

        /* ── Tactile : pas de survol — les actions révélées au :hover étaient
           inutilisables sur iPhone (impossible de supprimer une conversation,
           d'épingler un favori ou d'ouvrir le menu d'un dossier). ── */
        @media (max-width: 768px), (pointer: coarse) {
            .sidebar .conv-delete-btn { opacity: .45 !important; }
            .sidebar li .conv-fav-btn { opacity: .45 !important; }
            .sidebar .folder-menu-button { opacity: .55 !important; }
            /* Cibles tactiles : boutons ~16px inutilisables au doigt. On grossit la
               ZONE (padding) sans toucher au modèle absolu ni à l'inline-flex (zone
               fragile — voir historique), et on recale les offsets + la gouttière. */
            .sidebar li .conv-fav-btn { padding: 10px 8px; }
            .sidebar li.conv-item .conv-fav-btn { right: 0; }
            .sidebar li.conv-item .conv-delete-btn {
                right: 30px; width: 32px !important; height: 32px !important;
                display: inline-flex; align-items: center; justify-content: center;
            }
            .sidebar li.conv-item { padding-right: 64px; }
        }

        /* ── iPhone : les panneaux en 100vh passaient sous la barre home, et leur
           en-tête sous l'encoche/barre d'état — la croix de fermeture était trop
           haute et inactionnable. ── */
        @media (max-width: 768px) {
            #client-panel, .admin-panel, .doc-library-panel, .dashboard-panel, .usage-panel {
                height: 100dvh;
                padding-top: env(safe-area-inset-top);
                padding-bottom: env(safe-area-inset-bottom);
            }
            /* Cible tactile ≥ 44 px pour la croix de fermeture */
            .client-panel-close {
                min-width: 44px;
                min-height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 26px;
            }
        }

        /* ── Visionneuse DCE : bleu des trames ARIMA pour les titres,
           éclairci en thème sombre pour rester lisible. ── */
        :root { --dce-heading: #002060; }
        [data-theme="dark"] { --dce-heading: #8ab0ea; }

        /* ── Overlay de rapport (file d'attente) : carte + barre Fermer sticky ── */
        #offer-report-overlay .ofr-card {
            background: var(--background-color); color: var(--text-color);
            width: min(900px, 95vw); max-height: 90vh; overflow: auto;
            border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.4); position: relative;
        }
        #offer-report-overlay .ofr-close {
            position: sticky; top: 0; z-index: 6;
            display: flex; align-items: center; gap: 7px;
            width: 100%; box-sizing: border-box; padding: 12px 16px;
            border: none; border-bottom: 1px solid var(--border-color);
            background: var(--background-color); color: var(--text-secondary);
            font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
        }
        @media (max-width: 768px) {
            /* Plein écran : la carte centrée laissait la croix sous la barre iOS. */
            #offer-report-overlay { padding: 0 !important; }
            #offer-report-overlay .ofr-card {
                width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
            }
            #offer-report-overlay .ofr-close {
                padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
            }
            #offer-report-overlay #ofr-body {
                padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
            }
        }

        /* ── Lecture au calme (mobile) : remonter dans le fil efface TOUT le chrome —
           barre de saisie, bandeau, barre d'outils, barre de contexte. Il ne reste que
           le texte et la bottom-nav. Redescendre / approcher du bas / focus → retour.
           max-height animée partout : un transform seul laisserait des cadres vides. ── */
        .input-container { max-height: 240px; transition: transform .22s ease, opacity .22s ease, max-height .22s ease, padding .22s ease; }
        @media (max-width: 768px) {
            .header, .content-header, #client-context-bar {
                transition: max-height .22s ease, opacity .22s ease, padding .22s ease;
                max-height: 140px;
            }
            body.reading-mode .input-container {
                transform: translateY(120%); opacity: 0; pointer-events: none;
                max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important;
                overflow: hidden; border: none;
            }
            body.reading-mode .header,
            body.reading-mode .content-header,
            body.reading-mode #client-context-bar {
                max-height: 0; opacity: 0; pointer-events: none; overflow: hidden;
                padding-top: 0 !important; padding-bottom: 0 !important; border: none;
            }
            /* Le conteneur central récupère la hauteur du bandeau (sa hauteur est
               calculée avec le header : sans override, un vide apparaîtrait en bas). */
            body.reading-mode .container {
                height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px)) !important;
            }
        }

        /* ── Landing conversations (refonte 05/07) ── */
        /* Actions au survol : display (et non opacity) — opacity:0 réservait ~90px
           de largeur invisible, qui écrasait les titres sur mobile. */
        .cll-row .cll-acts { display: none; }
        .cll-row:hover .cll-acts { display: flex; }
        @media (max-width: 768px), (pointer: coarse) {
            /* Tactile : pas de survol — les actions restent masquées (favori/suppression
               accessibles via la sidebar et la modale Toutes les conversations), la
               largeur va aux TITRES. Chip client sous le titre, sur sa propre ligne. */
            .cll-row .cll-acts { display: none !important; }
            .cll-row .cll-line1 { flex-wrap: wrap; }
            .cll-row .cll-title { flex: 1 1 100%; }
            .cll-row .cll-client-chip { max-width: 60vw; }
        }

        /* ── Audit UX 05/07 — MODALES : toast/bottom-nav, plein écran mobile, croix 44px ── */
        @media (max-width: 768px) {
            .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
            /* Modales denses (DCE, chargement de documents, toutes-conversations) :
               plein écran plutôt qu'une carte 96vw — place récupérée, safe-area en tête. */
            #dce-modal .cbm-box, #classify-batch-modal .cbm-box {
                width: 100vw !important; max-width: none; height: 100dvh; max-height: none; border-radius: 0;
            }
            #dce-modal .cbm-header, #classify-batch-modal .cbm-header {
                padding-top: calc(18px + env(safe-area-inset-top, 0px));
            }
            #cvm-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
            .cvm-header { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
            /* Lancement de compétence + visionneuse de document : mêmes cartes denses → plein écran */
            .skill-launch-box, .agent-modal-content {
                width: 100vw !important; max-width: none !important;
                height: 100dvh; max-height: none !important; border-radius: 0;
            }
            .skill-launch-header { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
            .agent-modal-content { padding-top: env(safe-area-inset-top, 0px); }
        }
        @media (max-width: 768px), (pointer: coarse) {
            /* Croix de fermeture des modales : cibles 44px (patron .client-panel-close) */
            #dce-close, .cbm-header button, .skill-launch-header button,
            .agent-modal-close, .cvm-close {
                min-width: 44px; min-height: 44px;
                display: inline-flex; align-items: center; justify-content: center;
            }
        }

        /* ── Audit UX 05/07 — FICHE CLIENT au doigt et à 393px ── */
        @media (max-width: 768px), (pointer: coarse) {
            /* Cibles tactiles ≥ 40px sur les contrôles courants de la fiche (voir/
               télécharger/supprimer/renommer, chevrons, notes, données publiques). */
            .ccc-item-actions button, .ccc-doc-line-actions button,
            .ccc-year-edit, .ccc-year-delete,
            .ccc-report-card-toggle, .ccc-report-card-delete,
            .ccc-report-card-dl, .ccc-report-card-pdf, .ccc-report-card-chat,
            .ccc-note-del, .pub-refresh, .cch-del {
                min-width: 40px; min-height: 40px;
                display: inline-flex; align-items: center; justify-content: center;
            }
            .ccc-type-header, .ccc-sec-head { min-height: 40px; align-items: center; }
        }
        @media (max-width: 768px), (pointer: coarse) {
            /* Lignes documents : la date + le select type + les actions (élargies à 40px
               au tactile, iPad compris) écrasaient le nom → le nom prend sa propre ligne. */
            /* UNE SEULE LIGNE par document (documents du dossier) : case + icône + NOM (tronqué)
               + type + bouton « ⋯ ». Date, tags Devis/DCE/RAO et actions sont masqués et REPLIÉS
               derrière « ⋯ » (lignes dépliées au tap). Scopé aux lignes repliables (les lignes DCE
               et enregistrements, qui n'ont pas de « ⋯ », gardent leur affichage normal). */
            .ccc-doc-line--collapsible { flex-wrap: wrap; column-gap: 6px; row-gap: 5px; }
            .ccc-doc-line--collapsible .ccc-doc-name { flex: 1 1 40px; min-width: 0; }
            .ccc-doc-line--collapsible .ccc-doc-date { display: none; }
            .ccc-doc-line--collapsible .ccc-doc-line-type { flex: 0 1 auto; max-width: 42vw; min-width: 88px; }
            .ccc-doc-line--collapsible .ccc-doc-more { display: inline-flex; }
            .ccc-doc-line--collapsible .ccc-doc-line-actions { display: none; flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; padding: 2px 0 0 26px; }
            .ccc-doc-line--collapsible.expanded .ccc-doc-line-actions { display: flex; }
            .ccc-doc-line--collapsible.expanded .ccc-doc-date { display: inline; order: 9; flex: 1 1 100%; padding-left: 26px; }
            /* Lignes conversations : TOUT sur UNE ligne (demande utilisateur) — le titre se
               tronque, la méta reste compacte (date jj/mm, sélecteur d'année resserré, actions
               collées). Le titre complet reste lisible au toucher (title). */
            .ccc-item-row, .ccc-item-row.conv { flex-wrap: nowrap !important; gap: 6px; }
            .ccc-item-row .ccc-item-name { flex: 1 1 auto !important; min-width: 0; }
            .ccc-item-row .ccc-item-date { font-size: 10.5px; margin-left: 0 !important; }
            .ccc-item-row .ccc-item-year-sel { font-size: 11px; padding: 2px 5px; flex-shrink: 0; }
            .ccc-item-row .ccc-item-actions { gap: 0; margin-left: 0 !important; }
            .ccc-item-row .ccc-item-actions button { padding: 2px 3px; min-width: 34px; }
            /* Cartes « données publiques » (ICPE / Eau) : nom sur sa ligne, commune + puces
               dessous, sans débordement à droite. */
            .ccc-icpe-row { flex-wrap: wrap; row-gap: 4px; }
            .ccc-icpe-row .ccc-icpe-nom { flex: 1 1 100%; }
        }

        /* ── Mobile ET tablette : les TABLEAUX des rapports (récapitulatif, sous-critères…)
           débordaient de l'écran et élargissaient toute la fiche. Ils défilent
           désormais horizontalement dans leur propre cadre. (≤1099px : sur iPad la
           zone centrale fait ~450-530px une fois les panneaux latéraux déduits.) ── */
        @media (max-width: 1099px) {
            .oam-table,
            #mdo-body table,
            #oam-report-body table,
            #cam-report-body table,
            #aud-report-body table,
            #lcr-report table,
            .ccc-report-card-body table {
                display: block;
                max-width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
        }
        @media (max-width: 768px) {
            /* Ceintures de sécurité : aucun conteneur de rapport ne pousse la page */
            #client-center-wrap, .nl-modal-body, .ccc-report-card-body,
            #oam-report-body, #cam-report-body, #aud-report-body, #lcr-report {
                max-width: 100%;
                overflow-x: hidden;
            }
            #mdo-body, #oam-report-body, #cam-report-body, #aud-report-body {
                word-break: break-word;
            }
            /* …mais PAS dans les cellules de tableau : break-word y émiettait les
               en-têtes lettre par lettre (colonnes d'un caractère) pour faire tenir
               le tableau en largeur — au lieu de le laisser défiler dans son cadre.
               min-width garantit que le défilement horizontal s'enclenche. */
            #mdo-body :is(th, td), #oam-report-body :is(th, td),
            #cam-report-body :is(th, td), #aud-report-body :is(th, td),
            #lcr-report :is(th, td), .ccc-report-card-body :is(th, td) {
                word-break: normal;
            }
            .oam-table,
            #mdo-body table, #oam-report-body table, #cam-report-body table,
            #aud-report-body table, #lcr-report table, .ccc-report-card-body table {
                min-width: 560px;
            }
            /* Tables ÉTROITES (2-3 colonnes, ex. FRANCHISES d'un DCE) : elles tiennent dans
               l'écran en laissant le texte passer à la ligne — le min-width 560px envoyait la
               colonne des montants hors écran (elle semblait manquante). */
            table.oam-wrap, #mdo-body table.oam-wrap {
                min-width: 0 !important;
                display: table !important;
                width: 100%;
                table-layout: auto;
            }
            table.oam-wrap :is(th, td), #mdo-body table.oam-wrap :is(th, td) {
                word-break: normal;
                overflow-wrap: anywhere;
                white-space: normal;
            }
            /* ── Audit UX 05/07 : texte des rapports au plus large ──
               Les wrappers de rendu ont des paddings desktop codés en dur dans le JS
               (24-30px/côté) → classe commune rpt-pad, surchargée ici. */
            .rpt-pad { padding: 14px 8px !important; }
            /* Indentation navigateur des listes (40px/niveau) et citations : resserrées
               dans TOUS les corps de rapport (les rapports sont surtout des puces). */
            #lcr-report :is(ul, ol), #ofr-body :is(ul, ol),
            #oam-report-body :is(ul, ol), #cam-report-body :is(ul, ol),
            #aud-report-body :is(ul, ol), #mdo-body :is(ul, ol),
            .ccc-report-card-body :is(ul, ol), .nl-modal-body :is(ul, ol) {
                padding-left: 20px;
            }
            #lcr-report :is(ul, ol) :is(ul, ol), #oam-report-body :is(ul, ol) :is(ul, ol),
            .ccc-report-card-body :is(ul, ol) :is(ul, ol) { padding-left: 16px; }
            #lcr-report blockquote, #ofr-body blockquote, #oam-report-body blockquote,
            #cam-report-body blockquote, #aud-report-body blockquote, #mdo-body blockquote,
            .ccc-report-card-body blockquote, .nl-modal-body blockquote {
                margin: 10px 0; padding-left: 10px;
                border-left: 3px solid var(--border-color);
            }
            .ccc-report-card-body { padding: 0 10px 14px; }
            .nl-modal-body { padding: 16px 12px 24px; }
        }

        /* ── Chat grand écran : colonne de lecture centrée ─────────────────────
           Sur un moniteur large, les bulles s'étalaient d'un bord à l'autre
           (échange utilisateur↔bot illisible). On centre le fil dans une colonne
           de 880px. Le :has(.message) est essentiel : #chat sert AUSSI de
           conteneur aux landings (accueil, contacts…) qui gèrent leur propre
           largeur — on ne contraint que lorsqu'il affiche de vrais messages.
           Media query ≥900px : le mobile garde son comportement pleine largeur. */
        @media (min-width: 900px) {
            /* Fond uniforme de part et d'autre de la colonne (les gouttières
               héritaient sinon du fond du panneau, différent en thème sombre). */
            #chat-content { background-color: var(--chat-background); }
            #chat-content .chat-messages:has(.message) {
                width: 100%;
                max-width: 1180px;
                margin-left: auto;
                margin-right: auto;
                box-sizing: border-box;
            }
            /* La barre de saisie suit la même colonne que les messages
               (elle n'est affichée qu'en mode chat, jamais sur les landings). */
            #chat-content .input-container .input-row,
            #chat-content .input-container #file-attachment,
            #chat-content .input-container #chat-quick-analyze {
                width: 100%;
                max-width: 1180px;
                margin-left: auto;
                margin-right: auto;
                box-sizing: border-box;
            }
        }

        /* ── Très grand écran (≥1600px) : on relève les largeurs de lecture ────
           Les max-width pensés pour un 13-15" laissaient d'énormes marges vides
           sur un 27"+ ; +200px environ sur chaque vue principale.
           Les !important ne servent qu'à battre les styles posés en INLINE par
           le JS (contacts) ou déjà marqués !important (accueil .welcome-screen). */
        @media (min-width: 1600px) {
            .client-center-wrap { max-width: 1100px; }               /* fiche client : 860 → 1100 */
            .settings-container { max-width: 1000px; }               /* réglages : 800 (style_mistral) → 1000 */
            .welcome-screen { max-width: 1300px !important; }        /* accueil : 1100 → 1300 */
            .rec-landing-wrap { max-width: 1100px; }                 /* landing enregistrements : 900 → 1100 */
            .rrt-wrap { max-width: 1100px; }                         /* fiche enregistrement : 900 → 1100 */
            .contacts-landing-wrap { max-width: 920px !important; }  /* landing contacts : 720 → 920 */
            .contacts-page-wrap { max-width: 1080px !important; }    /* liste contacts : 880 → 1080 */
        }

/* Badge « Revue DCE » sur les enregistrements (liste, cartes, en-tête du détail) */
.rec-revue-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; line-height: 1;
    padding: 2px 7px; border-radius: 10px; vertical-align: middle;
    background: rgba(99, 91, 255, .14); color: #6d5ef0;
    border: 1px solid rgba(99, 91, 255, .35); white-space: nowrap;
}
/* Badge « CAO » (Commission d'Appel d'Offres — décisions d'attribution) : ambre, distinct du DCE. */
.rec-cao-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; line-height: 1;
    padding: 2px 7px; border-radius: 10px; vertical-align: middle;
    background: rgba(217, 119, 6, .14); color: #d97706;
    border: 1px solid rgba(217, 119, 6, .38); white-space: nowrap;
}

/* Suppression d'un enregistrement depuis la landing : bouton au survol
   (display, pas opacity : opacity:0 réserverait la place et écraserait les titres). */
.rec-landing-del {
    display: none; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0; align-self: center;
    border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--background-secondary); color: var(--text-secondary);
    cursor: pointer; padding: 0;
}
.rec-landing-del:hover { color: var(--danger); border-color: var(--danger); }
.rec-landing-item:hover .rec-landing-del { display: inline-flex; }
.rec-landing-card { position: relative; }
.rec-landing-card:hover .rec-landing-del--card { display: inline-flex; }
.rec-landing-del--card { position: absolute; top: 10px; right: 10px; background: var(--background-color); }
@media (max-width: 768px) {
    /* Pas de survol au doigt : bouton toujours visible */
    .rec-landing-del, .rec-landing-del--card { display: inline-flex; }
}

/* Plafond d'affichage des listes de documents (10 lignes, puis « Afficher les N autres »).
   .ccc-cap est posé par _capDocList autour des lignes, quel que soit le conteneur
   (dossiers de la fiche, blocs de types de la gestion documentaire). */
.ccc-cap:not(.show-all) .ccc-doc-overflow { display: none; }
/* En recherche, une ligne repliée qui correspond doit ressortir (.doc-search-hidden
   garde la priorité via !important pour celles qui ne correspondent pas) */
.doc-searching .ccc-cap:not(.show-all) .ccc-doc-overflow { display: flex; }
.doc-searching .ccc-doc-more-btn { display: none; }
.ccc-doc-more-btn {
    display: block; width: 100%; margin-top: 2px; padding: 6px 8px;
    border: 1px dashed var(--border-color); border-radius: 8px;
    background: none; color: var(--text-secondary);
    font-size: 12px; font-family: inherit; cursor: pointer;
    transition: color .12s, border-color .12s;
}
.ccc-doc-more-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }

/* ── Pipeline de suivi des consultations (accueil) ─────────────────────────── */
.pipe-wrap { margin: 4px 0 14px; }
.pipe-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
/* Kanban REPLIÉ : les étapes actives, dépliage des dossiers au clic. Colonnes jamais
   écrasées (largeur de lecture préservée) ; une colonne ouverte s'élargit. */
.pipe-cols {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start;
    padding-bottom: 4px;
}
.pipe-col {
    /* Repliée : COMPACTE, ne s'étire pas (on garde de la place) → les colonnes se rangent
       à gauche. Ouverte : s'élargit pour la lecture des cartes. */
    flex: 0 1 auto; min-width: 210px; max-width: 380px;
    background: var(--background-secondary);
    border: 1px solid var(--border-color); border-radius: 12px;
    overflow: hidden;
}
.pipe-col.open { flex: 1 1 320px; min-width: min(300px, 100%); max-width: none; }
.pipe-col-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 11px 12px; border: 0; background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer; transition: background .14s;
}
.pipe-col-head:hover { background: var(--hover-bg, rgba(0,0,0,.04)); }
.pipe-chev { color: var(--text-secondary); flex: none; transition: transform .22s ease; }
.pipe-col.open .pipe-chev { transform: rotate(90deg); }
.pipe-col-label { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pipe-count {
    font-size: 10.5px; font-weight: 800; color: var(--primary-color);
    background: rgba(var(--primary-rgb), .12); border-radius: 9px; padding: 1px 8px;
    flex: none; font-variant-numeric: tabular-nums;
}
.pipe-col-body {
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
    display: flex; flex-direction: column; gap: 6px; padding: 0 9px;
}
.pipe-col.open .pipe-col-body { max-height: 360px; overflow-y: auto; padding: 2px 9px 11px; }
.pipe-card {
    display: flex; align-items: center; gap: 6px;
    background: var(--background-color); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 8px 10px;
    font-size: 12.5px; cursor: pointer; transition: border-color .12s, transform .12s;
}
.pipe-card:hover { border-color: var(--primary-color); transform: translateY(-1px); }
.pipe-rail {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    justify-content: center; padding: 9px 12px;
    border: 1px dashed var(--border-color); border-radius: 12px;
    background: var(--background-secondary); font-size: 11px; color: var(--text-secondary);
}
.pipe-rail-item { white-space: nowrap; opacity: .8; }
.pipe-rail-item b { color: var(--text-color); font-variant-numeric: tabular-nums; }
.pipe-card-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pipe-auto {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-secondary); border: 1px dashed var(--border-color);
    border-radius: 4px; padding: 1px 4px; flex-shrink: 0;
}
.pipe-nav { display: none; gap: 2px; flex-shrink: 0; }
.pipe-card:hover .pipe-nav { display: inline-flex; }
.pipe-move {
    width: 20px; height: 20px; padding: 0; line-height: 1;
    border: 1px solid var(--border-color); border-radius: 5px;
    background: var(--background-secondary); color: var(--text-color);
    font-size: 13px; cursor: pointer;
}
.pipe-move:hover { border-color: var(--primary-color); color: var(--primary-color); }
@media (max-width: 768px) {
    .pipe-nav { display: inline-flex; }   /* pas de survol au doigt */
    .pipe-col, .pipe-col.open { flex: 1 1 100%; min-width: 0; }   /* 1 colonne, pleine largeur */
}

/* Pipeline à grande échelle (300 dossiers/an) : colonnes denses + recherche */
.pipe-head-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.pipe-head-row .pipe-title { margin-bottom: 0; }
.pipe-search {
    flex: 0 1 260px; min-width: 160px; padding: 6px 10px;
    border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--background-secondary); color: var(--text-color);
    font-size: 12.5px; font-family: inherit;
}
.pipe-col-body--full { max-height: 300px; overflow-y: auto; padding-right: 2px; }

/* Total des devis HT de l'étape — aligné à droite dans l'en-tête repliable */
.pipe-col-total {
    margin-left: auto; font-size: 12px; font-weight: 700; color: var(--primary-color);
    white-space: nowrap; font-variant-numeric: tabular-nums; flex: none;
}

/* Veille hebdomadaire dans le sidebar (zone médiane sombre, entre actions et statuts).
   Remplace l'ancien « À traiter » ; occupe l'espace libre et défile si besoin. */
.hs-veille {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    padding: 18px 16px 4px; overflow: hidden;
}
.hs-veille-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(226,232,240,.68); margin-bottom: 8px; flex-shrink: 0;
}
.hs-veille-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Lignes d'édition adaptées au fond sombre du sidebar */
.hs-veille .welcome-client-row {
    padding: 6px 4px; gap: 8px; border-radius: 8px; cursor: pointer;
}
.hs-veille .welcome-client-row:hover { background: var(--sidebar-hover); }
.hs-veille .welcome-client-row-name { color: var(--sidebar-text); font-size: 12px; }
.hs-veille .welcome-client-row [style*="var(--text-secondary)"] { color: rgba(226,232,240,.6) !important; }
.hs-veille .welcome-client-row > div:first-child { background: rgba(255,255,255,.08) !important; }
.hs-veille .welcome-client-empty { color: rgba(226,232,240,.5); font-size: 11.5px; padding: 4px; }
.hs-veille .nl-badge { background: rgba(255,255,255,.12); color: rgba(226,232,240,.85); font-size: 8.5px; padding: 1px 5px; font-weight: 500; }
@media (max-width: 768px) {
    /* Sur mobile le sidebar est un tiroir défilant : chaque section prend sa hauteur
       naturelle et s'empile. La Veille ne doit plus être un bloc flex:1 dont le contenu
       débordait (overflow visible) SUR le rail « Consommation » tiré en bas par margin-top
       auto → chevauchement. On la met en hauteur naturelle et on désactive le margin auto. */
    /* flex: 1 0 auto → remplit la hauteur quand le contenu est court (bouton
       « Nouvelle conversation » en bas), mais GRANDIT avec le contenu quand il
       est long (shrink:0 → pas de débordement par-dessus le pied, le tiroir défile). */
    #sidebar-home-view { flex: 1 0 auto; overflow: visible; }
    .hs-veille { flex: 0 0 auto; overflow: visible; }
    .hs-veille-list { overflow: visible; }
    .hs-rail { margin-top: 0; }
}

/* Bouton « voir plus » de la Veille (sidebar sombre) */
.hs-veille-more {
    display: block; width: 100%; margin-top: 4px; padding: 5px 4px;
    border: 1px dashed rgba(255,255,255,.16); border-radius: 7px;
    background: none; color: rgba(226,232,240,.6);
    font-size: 10.5px; font-family: inherit; cursor: pointer;
}
.hs-veille-more:hover { color: var(--sidebar-text); border-color: rgba(255,255,255,.3); }

/* Accueil (DESKTOP/TABLETTE ≥769px) : les 2 cartes du bas REMPLISSENT la hauteur libre.
   (Avant, elles écrasaient le pipeline en s'étirant ; désormais le pipeline replié a sa
   propre hauteur compacte, donc plus de conflit — l'espace vide du bas est repris.) */
@media (min-width: 769px) {
    .welcome-cols { flex: 1 1 auto !important; align-items: stretch !important; }
    .welcome-col-left, .welcome-col-right { flex: 1 1 0 !important; }
    .welcome-client-card, .welcome-feed-card { flex: 1 1 auto !important; min-height: 0 !important; }
    .welcome-client-list, #welcome-feed-list { max-height: none !important; min-height: 0 !important; }
}
/* Compaction cosmétique (toutes tailles, sans effet de mise en page) */
.welcome-client-card-header, .welcome-feed-header { padding: 9px 14px !important; font-size: 12px !important; }
/* Cap de hauteur des listes SEULEMENT sur mobile (empilé) — sur desktop elles remplissent. */
@media (max-width: 768px) {
    .welcome-client-list, #welcome-feed-list { max-height: 210px !important; overflow-y: auto !important; }
}
.welcome-client-row { padding: 7px 14px !important; }
.welcome-client-row > div:first-child { width: 26px !important; height: 26px !important; }
.welcome-feed-card #welcome-feed-search { padding: 5px 9px !important; }

/* ── Menu de compte (avatar d'en-tête) ─────────────────────────────────────── */
.user-widget-caret { opacity: .6; flex-shrink: 0; margin-left: 2px; }
.account-menu {
    position: fixed; z-index: 10050; min-width: 200px;
    background: var(--background-color); color: var(--text-color);
    border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.28); padding: 6px; overflow: hidden;
}
.account-menu-head {
    font-size: 12px; font-weight: 700; color: var(--text-secondary);
    padding: 8px 10px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-bottom: 1px solid var(--border-color); margin-bottom: 4px;
}
.account-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: none; border-radius: 8px; background: none;
    color: var(--text-color); font-family: inherit; font-size: 13.5px; font-weight: 500;
    cursor: pointer; text-align: left;
}
.account-menu-ico { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.account-menu-item:hover { background: var(--background-secondary); }
.account-menu-item--danger { color: var(--danger); }
.account-menu-item--danger:hover { background: rgba(var(--danger-rgb),.1); }
.account-menu-sep { height: 1px; background: var(--border-color); margin: 4px 2px; }

/* Voile du panneau d'infos client (tablette/mobile ; masqué en desktop où le panneau
   est intégré à la mise en page). Sous le tiroir (z 10002), au-dessus du contenu. */
#ccc-info-backdrop {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,.35); opacity: 0; pointer-events: none;
    transition: opacity .2s;
}
#ccc-info-backdrop.visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1100px) { #ccc-info-backdrop { display: none !important; } }

/* Corrections de transcription propres à un client (panneau fiche) */
.ccc-corr-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--border-color);
    border-radius: 7px; margin-bottom: 5px; background: var(--background-secondary); }
.ccc-corr-txt { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; }
.ccc-corr-del { border: none; background: none; cursor: pointer; color: var(--text-secondary); font-size: 13px; padding: 2px 6px; border-radius: 5px; flex-shrink: 0; }
.ccc-corr-del:hover { color: var(--danger); }

        /* Schémas Mermaid (processus, logigrammes…) rendus dans le chat : présentés dans une
           carte discrète, centrés, défilables horizontalement si le schéma est large. */
        .mermaid-diagram {
            margin: 14px 0; padding: 16px; text-align: center; overflow-x: auto;
            background: var(--background-secondary, #f7f9fc);
            border: 1px solid var(--border-color); border-radius: 12px;
        }
        .mermaid-diagram svg { max-width: 100%; height: auto; }
        /* Arêtes et libellés un peu plus lisibles (indépendant du thème Mermaid). */
        .mermaid-diagram .edgePath .path { stroke-width: 1.6px; }
        .mermaid-diagram .node rect, .mermaid-diagram .node polygon,
        .mermaid-diagram .node circle, .mermaid-diagram .node ellipse { stroke-width: 1.4px; }