:root {
      /* Thème par défaut = Clyo. Couleurs résolues identiques à applyClyoTheme('clyo'),
         écrites en dur ici pour qu'AUCUN flash du thème de base n'apparaisse avant le JS. */
      --brand-primary: #60C0ED;        --brand-primary-soft: #E2F4FC;
      --brand-secondary: #2AA6E0;      --brand-secondary-soft: #D9EFF9;
      --brand-accent: #60C0ED;         --brand-accent-soft: #E2F4FC;
      --brand-dark: #1F2937;           --brand-surface: #F2FAFE;
      --brand-danger: #E2445C;         --brand-danger-soft: #FADDE2;
      /* Titres de section dans les dossiers : fonte + encadré (pilotés par le thème) */
      --title-text: #60C0ED;           --title-frame: #CFEBF9;   --title-frame-soft: #ECF7FD;
      --app-font: 'Work Sans';
      --app-radius: 8px;
    }
    html, body { font-family: var(--app-font), system-ui, sans-serif; background: var(--brand-surface); color: var(--brand-dark); }
    .scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
    .scroll-thin::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
    .scroll-thin::-webkit-scrollbar-track { background: transparent; }

    .sidebar { transition: width 0.25s ease; }
    .sidebar.collapsed .label { opacity: 0; pointer-events: none; }
    .sidebar.collapsed .section-title { opacity: 0; }
    .sidebar.collapsed .sub-list { display: none; }
    .sidebar .label, .sidebar .section-title { transition: opacity 0.15s ease; }

    /* Collapsible sidebar sections */
    .nav-section.collapsed .section-items { display: none; }
    .nav-section.collapsed .section-header .chevron { transform: rotate(-90deg); }
    .nav-section .section-header .chevron { transition: transform 0.15s ease; }
    /* Séparateurs colorés (charte secondary #2AE8B9) entre Accueil / Réception / Production / Confirmé */
    .nav-section + .nav-section { margin-top: .55rem; padding-top: .55rem; position: relative; }
    .nav-section + .nav-section::before {
      content: ''; position: absolute; top: 0; left: .75rem; right: .75rem; height: 2px; border-radius: 2px;
      background: linear-gradient(90deg, rgba(42,232,185,0), rgba(42,232,185,.85), rgba(42,232,185,0));
    }
    /* Titres de section un cran plus gros ; liens un cran plus petits */
    .sidebar .section-header { font-size: 13px; }
    .sidebar .section-title { font-size: 13px; letter-spacing: .05em; }
    .sidebar .nav-link .label { font-size: 13px; }
    .sidebar .nav-link svg { width: 17px; height: 17px; }
    /* Feedback tactile sur tous les boutons (#4) */
    button { transition: transform .06s ease, box-shadow .06s ease, filter .1s ease; }
    button:not(:disabled):active { transform: translateY(1px) scale(.985); filter: brightness(.96); }
    .clyo-saved { background:#10b981 !important; color:#fff !important; border-color:#10b981 !important; }

    li[data-has-children].collapsed .children { display: none; }
    li[data-has-children].collapsed .toggle-children .chevron { transform: rotate(-90deg); }
    li[data-has-children] .toggle-children .chevron { transition: transform 0.15s ease; }

    /* Active state on gradient sidebar */
    /* État actif : pastille blanche + couleur du thème. La règle `:hover` explicite
       empêche l'utilitaire Tailwind `hover:bg-white/15` d'écraser le fond au survol
       (cause des clignotements / éléments qui « disparaissaient » dans le slide). */
    .nav-link.active,
    .nav-link.active:hover { background: rgba(255,255,255,0.95) !important; color: var(--brand-primary) !important; font-weight: 600; }
    .nav-link.active svg { color: var(--brand-primary); }
    .sidebar-filter.active { background: rgba(255,255,255,0.95); color: #00A4B9 !important; font-weight: 600; }

    /* États actifs des filtres — définis en CSS statique (pas en bascule d'utilitaires au runtime)
       pour rester stables même quand le CDN Tailwind régénère ses classes à la volée.
       Avant : applyFilter() ajoutait/retirait bg-brand-dark/text-white… ; le temps que le JIT
       régénère bg-brand-dark, on voyait du texte blanc sur fond blanc (illisible) jusqu'au
       prochain re-render. Ici .active suffit, le rendu est immédiat et fiable. */
    .filter-chip { transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
    .filter-chip.active { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color: #fff !important; }
    /* Même garde-fou pour les chips de filtre Production (mêmes classes Tailwind dynamiques) :
       sans cette règle statique, le texte blanc s'affiche sur fond blanc tant que le JIT
       Tailwind n'a pas régénéré bg-brand-dark → libellé illisible une fois le filtre actif. */
    .prod-chip.active { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color: #fff !important; }
    .prod-chip.active > span[class*="rounded-full"] { box-shadow: 0 0 0 1.5px rgba(255,255,255,.45); }
    .filter-toggle.active { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: #fff !important; }
    .confirme-chip.active { background: var(--brand-primary-soft) !important; border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; }
    .confirme-chip.active-danger { background: #fff1f2 !important; border-color: #fecdd3 !important; color: #e11d48 !important; }

    /* ============================================================
       Espace « Dossiers en cours » — TABLEAU À COLONNES REDIMENSIONNABLES
       Les largeurs par défaut sont ici, mais l'utilisateur les ajuste à la SOURIS
       (glisser les séparateurs de l'en-tête) ; elles sont mémorisées par utilisateur.
       En-tête et lignes partagent la même grille (.conf-grid) → alignement parfait.
       ============================================================ */
    #confirmeBoard {
      --conf-w-nom:      18rem;   /* nom d'établissement + n° CLI + statut (Succès…) */
      --conf-w-commande: 11rem;   /* sorte de commande (Matériel / Borne / Licence…) */
      --conf-w-rattach:  9.5rem;  /* badge « fiche secondaire » */
      --conf-w-satisf:   8rem;    /* satisfaction client */
      --conf-w-vip:      4rem;    /* VIP */
    }
    .conf-grid {
      display: grid;
      grid-template-columns:
        2.5rem var(--conf-w-nom) var(--conf-w-commande) var(--conf-w-rattach)
        minmax(1rem, 1fr) var(--conf-w-satisf) var(--conf-w-vip) auto;
      align-items: stretch;
      column-gap: 0.75rem;
    }
    /* Cellules : centrage vertical + le contenu ne déborde pas de sa colonne. */
    #confirmeBoard .conf-grid > * { display: flex; align-items: center; min-width: 0; }
    /* Trait vertical de délimitation à la fin de la colonne « nom » (et avant satisfaction). */
    #confirmeBoard .conf-grid > *:nth-child(3),
    #confirmeBoard .conf-grid > *:nth-child(6) {
      border-left: 1px solid #eef0f2; padding-left: 0.75rem;
    }
    .conf-h {
      position: relative; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
      font-weight: 600; color: #9ca3af; display: flex; align-items: center;
    }
    .conf-h-end { justify-content: flex-end; }
    /* La poignée de redimensionnement réutilise le style .col-resizer des tableaux. */
    .conf-h .col-resizer { right: -0.5rem; }
    /* La pastille de couleur reste visible sur fond foncé une fois le filtre actif. */
    .filter-chip.active > span[class*="rounded-full"] { box-shadow: 0 0 0 1.5px rgba(255,255,255,.45); }

    .drawer-backdrop { transition: opacity 0.2s ease; }
    .drawer-panel { transition: transform 0.25s ease; }

    .card-lift { transition: transform 0.15s ease, box-shadow 0.15s ease; }
    .card-lift:hover { transform: translateY(-2px); }

    /* When a dossier changes stage, its card disappears from the previous pane */
    .hidden-by-stage { display: none !important; }
    /* Caret rotation when a collapsible block is open */
    .collapse-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }
    .editable { cursor: pointer; position: relative; }
    .editable:hover { box-shadow: 0 0 0 2px rgba(0,164,185,0.25) inset; border-radius: 6px; }
    /* Uniform pill size across all editable cells : taille identique quelle que soit la
       longueur du texte. Largeur FIXE (et non min-width) : en table-layout auto, un texte
       en `nowrap` ferait sinon grandir la cellule → la colonne débordait à droite. Avec une
       largeur fixe + `overflow:hidden`, la pastille ne peut plus élargir sa colonne ; les
       libellés trop longs sont tronqués « … » (texte complet au survol via `title`).
       `max-width:100%` laisse la pastille rétrécir si la colonne est redimensionnée plus
       étroite que cette largeur. */
    .status-pill {
      width: 120px; max-width: 100%;
      display: inline-block; vertical-align: middle;
      text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .popover { animation: popIn 0.12s ease; transform-origin: top left; }
    @keyframes popIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

    .header-gradient { background: linear-gradient(90deg, #00A4B9 0%, #2AE8B9 100%); }

    /* Densité des tableaux — pilotée par body[data-density], survit aux re-renders */
    body[data-density="ultra"]    tbody td, body[data-density="ultra"]    thead th { padding: 2px 8px;  font-size: 12px; line-height: 1.2; }
    body[data-density="compact"]  tbody td, body[data-density="compact"]  thead th { padding: 5px 8px;  font-size: 13px; }
    body[data-density="confort"]  tbody td, body[data-density="confort"]  thead th { padding: 10px 12px; }
    body[data-density="spacious"] tbody td, body[data-density="spacious"] thead th { padding: 16px 12px; }

    /* ===== Thèmes prédéfinis ===== */
    /* Barre du haut : suit les couleurs du thème */
    .header-gradient { background: var(--header-bg, linear-gradient(90deg, #00A4B9 0%, #2AE8B9 100%)); }
    /* Toggle « note de base » : gris → couleur du thème (--brand-accent) quand validé */
    .clyo-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
    .clyo-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
    .clyo-switch-track { width: 36px; height: 20px; border-radius: 9999px; background: #d1d5db; transition: background .2s ease; flex: none; display: inline-block; }
    .clyo-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s ease; }
    .clyo-switch input:checked + .clyo-switch-track { background: var(--brand-accent); }
    .clyo-switch input:checked + .clyo-switch-track::after { transform: translateX(16px); }
    .clyo-switch input:focus-visible + .clyo-switch-track { box-shadow: 0 0 0 3px var(--brand-accent-soft); }
    /* Cartes & tableaux : couleur pilotée (blanches par défaut) */
    body[data-theme] .bg-white { background-color: var(--card-bg, #ffffff) !important; }
    /* Mode sombre : remap des utilitaires clairs codés en dur vers les variables du thème */
    body[data-mode="dark"] .bg-gray-50,
    body[data-mode="dark"] .bg-gray-100  { background-color: var(--surface-alt) !important; }
    body[data-mode="dark"] .text-gray-900 { color: var(--text-strong) !important; }
    body[data-mode="dark"] .text-gray-800,
    body[data-mode="dark"] .text-gray-700,
    body[data-mode="dark"] .text-gray-600 { color: var(--text-soft) !important; }
    body[data-mode="dark"] .text-gray-500,
    body[data-mode="dark"] .text-gray-400 { color: var(--text-muted) !important; }
    body[data-mode="dark"] .border-gray-100,
    body[data-mode="dark"] .border-gray-200,
    body[data-mode="dark"] .border-gray-300 { border-color: var(--border-col) !important; }
    body[data-mode="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
    body[data-mode="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-col) !important; }
    body[data-mode="dark"] .shadow-card, body[data-mode="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35) !important; }
    /* Mode sombre : champs de formulaire lisibles (saisie auparavant noir-sur-noir) */
    body[data-mode="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    body[data-mode="dark"] textarea,
    body[data-mode="dark"] select {
      background-color: var(--brand-surface) !important;
      color: var(--text-strong) !important;
      border-color: var(--border-col) !important;
    }
    body[data-mode="dark"] input::placeholder,
    body[data-mode="dark"] textarea::placeholder { color: var(--text-muted) !important; opacity: 1; }
    body[data-mode="dark"] option { background-color: var(--surface-alt); color: var(--text-strong); }
    /* Mode sombre : surfaces & textes supplémentaires non couverts par les variables */
    body[data-mode="dark"] .bg-gray-200,
    body[data-mode="dark"] .bg-gray-300,
    body[data-mode="dark"] .bg-slate-50,
    body[data-mode="dark"] .bg-slate-100 { background-color: var(--surface-alt) !important; }
    body[data-mode="dark"] .text-gray-300 { color: var(--text-muted) !important; }
    body[data-mode="dark"] .hover\:bg-gray-50:hover,
    body[data-mode="dark"] .hover\:bg-gray-100:hover,
    body[data-mode="dark"] .hover\:bg-brand-surface:hover { background-color: var(--surface-alt) !important; }
    /* Chips & blocs du builder d'automatisation en sombre */
    body[data-mode="dark"] .auto-block { background: var(--surface-alt); border-color: var(--border-col); }
    body[data-mode="dark"] .auto-trigger-chip,
    body[data-mode="dark"] .auto-cond-chip,
    body[data-mode="dark"] .auto-action-chip { background: var(--brand-surface); color: var(--text-soft); border-color: var(--border-col); }
    body[data-mode="dark"] .auto-card-compact,
    body[data-mode="dark"] .auto-card-large { background: var(--card-bg); border-color: var(--border-col); }
    /* Composer email en sombre */
    body[data-mode="dark"] .auto-email-card { background: var(--card-bg); border-color: var(--border-col); }
    body[data-mode="dark"] .auto-email-input,
    body[data-mode="dark"] .auto-email-head { border-color: var(--border-col); }

    /* Galerie de thèmes (panneau Personnalisation) */
    .clyo-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
    @media (min-width: 768px) { .clyo-theme-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
    .clyo-theme-card { cursor: pointer; border: 2px solid #E5E7EB; border-radius: .75rem; padding: .4rem; background: #fff; transition: box-shadow .15s, border-color .15s; text-align: left; }
    .clyo-theme-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }
    .clyo-theme-card.active { border-color: var(--brand-primary); box-shadow: 0 0 0 2px var(--brand-primary-soft); }
    .clyo-theme-swatch { display: flex; height: 46px; border-radius: .5rem; overflow: hidden; }
    .clyo-theme-swatch > div { flex: 1; }
    .clyo-theme-name { font-size: .8rem; font-weight: 600; margin-top: .4rem; color: #374151; display: flex; align-items: center; justify-content: space-between; }
    .clyo-theme-card.active .clyo-theme-name::after { content: '✓'; color: var(--brand-primary); font-weight: 800; }


    .file-pill {
      display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem;
      background: #FBFDFE; border: 1px solid #D5F1F4; border-radius: 0.5rem;
      color: #00A4B9; font-size: 0.8125rem; cursor: pointer; transition: background 0.15s;
    }
    .file-pill:hover { background: #F0FBFC; }

    /* === Notifications === */
    #notifBadge:not(.hidden) { display: inline-flex; }
    .notif-item.unread { background: linear-gradient(90deg, rgba(254,117,74,0.06), transparent 70%); }
    .notif-item.unread::before {
      content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
      width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary);
    }
    .notif-item { position: relative; }

    /* Toast notifications */
    .toast-stack { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; max-width: 380px; pointer-events: none; }
    .toast { pointer-events: auto; background: white; border: 1px solid #e5e7eb; border-left: 4px solid var(--brand-primary);
      border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.04);
      padding: 12px 14px; animation: toastIn 0.25s ease; cursor: pointer; transition: transform 0.15s, opacity 0.2s; }
    .toast:hover { transform: translateY(-2px); }
    .toast.toast-out { animation: toastOut 0.2s forwards; }
    @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

    /* @mention highlight */
    .mention-dropdown { position: fixed; z-index: 60; background: white; border: 1px solid #e5e7eb;
      border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px; min-width: 240px; max-height: 280px; overflow-y: auto; }
    .mention-dropdown .mention-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
    .mention-dropdown .mention-row:hover, .mention-dropdown .mention-row.active { background: var(--brand-surface); }
    .mention-dropdown .mention-row .ava { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex-shrink: 0; }
    .mention-dropdown .mention-row .nm { font-size: 13px; font-weight: 600; color: var(--brand-dark); }
    .mention-dropdown .mention-row .em { font-size: 11px; color: #6b7280; }

    /* Mention channel picker */

    /* Verrou lecture seule du dossier : neutralise les widgets multi-choix pour un
       profil sans droit d'édition (cf. clyoCanEditDossier). Pastilles/champs/footer
       sont gérés ailleurs (clyoBlockEdit + renderFooter). */
    #drawerContent.clyo-ro [data-clyo-multi],
    #drawerContent.clyo-ro [data-clyo-users] { pointer-events: none; opacity: .65; }
    /* Champs de détail réellement verrouillés (et pas seulement annulés au blur) pour un
       profil en lecture seule : on retire les affordances d'édition (survol/focus/curseur). */
    #drawerContent .clyo-ro-field { cursor: default; }
    #drawerContent .clyo-ro-field:hover,
    #drawerContent .clyo-ro-field:focus {
      border-color: transparent !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    /* ============================================================
       COUCHE MOBILE (PWA iPhone) — TOUT est confiné à ce media query.
       Au-dessus de 768px (ordinateur), rien de ceci ne s'applique :
       la version bureau reste strictement identique.
       ============================================================ */
    #clyoNavBackdrop { display: none; }
    @media (max-width: 768px) {
      /* En-tête plus compact */
      header.header-gradient { padding-left: 12px; padding-right: 12px; }
      /* Navigation en tiroir : masquée hors écran, glisse à l'ouverture */
      #sidebar {
        position: fixed; top: 4rem; left: 0; bottom: 0; height: auto;
        z-index: 60; width: 78vw; max-width: 300px;
        transform: translateX(-100%); transition: transform .25s ease;
      }
      body.clyo-nav-open #sidebar { transform: translateX(0); }
      /* Le bouton « réduire » de la sidebar n'a pas de sens en tiroir */
      #sidebarToggle { display: none; }
      /* Fond sombre cliquable derrière le tiroir */
      #clyoNavBackdrop {
        display: block; position: fixed; inset: 4rem 0 0 0; z-index: 55;
        background: rgba(12,58,92,.45); opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
      }
      body.clyo-nav-open #clyoNavBackdrop { opacity: 1; pointer-events: auto; }
      /* Contenu : padding réduit pour gagner de la place */
      main > section.view { padding-left: 12px; padding-right: 12px; padding-top: 14px; }
      /* Le drawer prend déjà tout l'écran (w-full) — rien à changer. */

      /* Anti-débordement horizontal : la page reste cadrée dans l'écran du téléphone */
      html, body { max-width: 100%; overflow-x: hidden; }

      /* Production / Confirmé / Facturation : les tableaux larges deviennent des CARTES
         (nom du dossier + réf), on tape pour ouvrir le détail. Seule la 1re colonne
         (client + réf CLI) reste affichée ; le reste se consulte dans le détail.
         On force `display:block` sur table/tbody/tr/td : sinon le moteur garde la
         largeur « table » et laisse une case vide à droite du nom. */
      [data-clyo-table] { overflow-x: hidden !important; }
      [data-clyo-table] table { display: block !important; min-width: 0 !important; width: 100% !important; }
      [data-clyo-table] thead { display: none !important; }
      [data-clyo-table] tbody { display: block !important; width: 100%; }
      [data-clyo-table] tbody tr { display: block !important; width: 100%; border-bottom: 1px solid #f0f0f0; }
      [data-clyo-table] tbody td { display: none !important; }
      [data-clyo-table] tbody td:first-child {
        display: flex !important; flex-direction: column; align-items: flex-start; gap: 3px;
        white-space: normal !important; padding: 14px !important;
        width: 100% !important; box-sizing: border-box;
      }
      [data-clyo-table] tbody td:first-child > button { font-size: 15px; }
      /* Barre de défilement maître des colonnes : inutile en mode cartes */
      .prod-master-scroll, #prodOnboardingScrollMaster { display: none !important; }
    }

    /* Titres de section des dossiers — bandeau accent moderne, piloté par le thème.
       Barre latérale + fond dégradé léger + texte foncé ; suit le thème (clair/sombre). */
    .clyo-section-title {
      position: relative; display: flex; align-items: center; gap: 7px;
      padding: 6px 12px 6px 13px; margin-bottom: 12px;
      border-left: 3px solid var(--title-frame, var(--brand-primary));
      border-radius: var(--app-radius, 8px);
      background: linear-gradient(90deg, var(--title-frame-soft, var(--brand-primary-soft)), transparent 78%);
      color: var(--title-text, var(--brand-dark)) !important; font-weight: 700; letter-spacing: .04em;
    }
    .clyo-section-title::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--title-text, var(--brand-primary)); flex: 0 0 auto;
    }
    .clyo-section-title .normal-case { letter-spacing: 0; }

    /* @mention dans une note : bleu « lien » lisible (couleur fonctionnelle stable,
       indépendante du thème pour rester bien visible sur fond blanc). */
    .note-mention { color: #2563eb; font-weight: 600; }
    /* Note épinglée : liseré accent + fond très léger pour la faire ressortir en tête. */
    .note-card.pinned { border-color: var(--brand-accent); background: var(--brand-accent-soft, #fff7ed); }
    .note-pin.on { color: var(--brand-accent); }
    .note-pin { color: #9ca3af; }
    .note-pin-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-accent); font-weight: 700; margin-left: 4px; }

    /* Filtre catégorie / sous-catégorie (tableaux Production).
       Rangée 1 = chips de catégorie (.prod-chip, existant) ; rangée 2 = sous-catégories. */
    .clyo-cat-bar { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .clyo-cat-row, .clyo-sub-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .clyo-sub-tab { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
    .clyo-sub-tab:hover { background: #f9fafb; }
    .clyo-sub-tab.active { background: var(--brand-accent-soft); color: var(--brand-accent); border-color: var(--brand-accent); }
    body[data-mode="dark"] .clyo-sub-tab:not(.active) { background: var(--surface-alt); border-color: var(--border-col); color: var(--text-soft); }

    /* Automation cards */
    /* Actions (modifier/dupliquer/supprimer) : TOUJOURS présentes, juste atténuées au
       repos puis pleines au survol. Remplace l'ancien « opacity-0 group-hover » qui les
       faisait disparaître par intermittence (et cassait avec le glisser-déposer). */
    .auto-actions { opacity: .5; transition: opacity .15s; }
    .auto-card-compact:hover .auto-actions, .auto-card-large:hover .auto-actions { opacity: 1; }
    .auto-card-compact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: white; border: 1px solid #e5e7eb; border-radius: 10px; }
    .auto-card-large { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; }
    .auto-toggle { position: relative; display: inline-flex; width: 36px; height: 20px; border-radius: 999px; background: #d1d5db; transition: background 0.2s; cursor: pointer; flex-shrink: 0; }
    .auto-toggle.on { background: var(--brand-accent); }
    .auto-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
    .auto-toggle.on::after { transform: translateX(16px); }

    /* Automation builder chips */
    .auto-block { background: var(--brand-surface); border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; }
    .auto-trigger-chip, .auto-cond-chip, .auto-action-chip {
      display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-weight: 600; font-size: 12px;
      border: 1px dashed #d1d5db; background: white; cursor: pointer; color: var(--brand-dark);
    }
    .auto-trigger-chip.filled { background: var(--brand-primary-soft); color: var(--brand-primary); border: 1px solid var(--brand-primary); border-style: solid; }
    .auto-cond-chip.filled { background: var(--brand-accent-soft); color: var(--brand-accent); border: 1px solid var(--brand-accent); border-style: solid; }
    .auto-action-chip.filled { background: var(--brand-secondary-soft); color: #047857; border: 1px solid var(--brand-secondary); border-style: solid; }
    .auto-chip-x { opacity: 0; transition: opacity 0.15s; margin-left: 2px; padding: 2px; border-radius: 50%; }
    .auto-trigger-chip:hover .auto-chip-x, .auto-cond-chip:hover .auto-chip-x, .auto-action-chip:hover .auto-chip-x { opacity: 1; }
    .auto-chip-x:hover { background: rgba(0,0,0,0.1); }

    /* Variable pill in email composer — couleur du thème (pastille du sélecteur) */
    .var-pill { display: inline-block; padding: 2px 8px; margin: 0 2px; border-radius: 4px; background: var(--brand-accent-soft); color: var(--brand-accent); font-weight: 600; font-size: 12px; cursor: pointer; }
    .var-pill:hover { filter: brightness(0.96); }
    /* Variable insérée dans le corps du mail — chip non éditable, couleur du thème */
    .var-chip { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--brand-accent-soft); color: var(--brand-accent); font-weight: 600; font-size: 0.95em; white-space: nowrap; }

    /* === Badges « Profil » (gestion utilisateurs) — couleurs statiques par profil === */
    .role-badge-admin       { background: #F3E8FF; color: #7E22CE; }  /* violet */
    .role-badge-facturation { background: #DBEAFE; color: #1D4ED8; }  /* bleu */
    .role-badge-csm         { background: #FEE2E2; color: #B91C1C; }  /* rouge */
    .role-badge-onboarding  { background: #FEE2E2; color: #B91C1C; }  /* rouge */
    .role-badge-dev         { background: #FFEDD5; color: #C2410C; }  /* orange */
    .role-badge-commercial  { background: #FEF9C3; color: #A16207; }  /* jaune */
    .role-badge-support     { background: #DCFCE7; color: #15803D; }  /* vert */

    /* === Impression PDF du « Feedback des ventes » === */
    .ventes-print-area { display: none; }
    @media print {
      body.ventes-printing > *:not(.ventes-print-area) { display: none !important; }
      body.ventes-printing .ventes-print-area { display: block !important; padding: 16px; color: #111; }
      body.ventes-printing .ventes-print-area table { width: 100%; border-collapse: collapse; font-size: 12px; }
      body.ventes-printing .ventes-print-area th,
      body.ventes-printing .ventes-print-area td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
      body.ventes-printing .ventes-print-area tfoot td { font-weight: 700; }
    }

    /* ===== Composer email (automatisation) — carte propre & design ===== */
    .auto-email-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
    .auto-email-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: linear-gradient(90deg, var(--brand-primary-soft), transparent 70%); border-bottom: 1px solid #eef0f3; }
    .auto-email-dot { width: 9px; height: 9px; border-radius: 50%; }
    .auto-email-dot:nth-child(1) { background: #ff5f57; }
    .auto-email-dot:nth-child(2) { background: #febc2e; }
    .auto-email-dot:nth-child(3) { background: #28c840; }
    .auto-email-title { font-weight: 700; font-size: 13px; color: var(--brand-dark); margin-left: 8px; }
    .auto-email-frombadge { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--brand-secondary-soft); color: #047857; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .auto-email-frombadge.warn { background: #FEF3C7; color: #B45309; }
    .auto-email-fields { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
    .auto-email-row { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; }
    .auto-email-row > label { font-size: 12px; font-weight: 600; color: var(--text-muted, #6b7280); }
    .auto-email-input { width: 100%; padding: 8px 11px; font-size: 13px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: var(--brand-dark); transition: border-color .15s, box-shadow .15s; }
    .auto-email-input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-accent-soft); }
    .auto-email-to { display: flex; gap: 8px; }
    .auto-email-chipbtn { white-space: nowrap; padding: 0 11px; font-size: 11px; font-weight: 600; border-radius: 9px; background: var(--brand-primary-soft); color: var(--brand-primary); cursor: pointer; border: 0; }
    .auto-email-chipbtn:hover { filter: brightness(.97); }
    .ai-mail-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 5px 11px; font-size: 11px; font-weight: 600; border-radius: 9px; background: #fff; color: var(--brand-accent); border: 1px solid var(--brand-accent); cursor: pointer; transition: background .12s, color .12s; }
    .ai-mail-btn:hover { background: var(--brand-accent); color: #fff; }
    .ai-mail-btn:disabled { opacity: .55; cursor: progress; }
    .auto-email-bodywrap { border-top: 1px solid #eef0f3; }
    .auto-email-vars { display: flex; flex-wrap: wrap; gap: 4px; }

    /* === Resizable tables (auto layout — columns keep natural width unless explicitly resized) === */
    table.resizable th { position: relative; }
    .col-resizer {
      position: absolute; top: 0; right: 0; width: 6px; height: 100%;
      cursor: col-resize; user-select: none; z-index: 5;
    }
    .col-resizer:hover, .col-resizer.dragging { background: rgba(0,164,185,0.35); }
    table.resizable tr.resizable-row { position: relative; }
    .row-resizer {
      position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
      cursor: row-resize; user-select: none; z-index: 4;
    }
    .row-resizer:hover, .row-resizer.dragging { background: rgba(0,164,185,0.35); }
    /* Réordonnancement de colonnes par glisser-déposer (admin / CSM). */
    th[draggable="true"] { cursor: grab; }
    th.col-dragging { opacity: 0.45; }
    th.col-drop-target { box-shadow: inset 3px 0 0 0 var(--brand-accent); background: var(--brand-accent-soft); }
    body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
    body.row-resizing, body.row-resizing * { cursor: row-resize !important; user-select: none !important; }

    /* === Collapsible group header === */
    .group-toggle { cursor: pointer; user-select: none; }
    .group-toggle .group-chevron { transition: transform 0.15s ease; display: inline-block; }
    .group-collapsed .group-chevron { transform: rotate(-90deg); }
    .group-collapsed .group-body { display: none; }

    /* === Cache la scrollbar des 3 tableaux Onboarding === */
    /* (Une seule barre de scroll maîtresse fixe en bas de fenêtre — voir
       #prodOnboardingScrollMaster — qu'on affiche/cache via JS selon l'onglet) */
    .hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    /* Barre maîtresse : posée en bas de la fenêtre (fixed) → toujours visible
       quand on scrolle la page verticalement. */
    .prod-master-scroll {
      position: fixed;
      bottom: 0;
      left: var(--prod-master-left, 0px);
      right: 0;
      height: 16px;
      background: rgba(255, 255, 255, 0.97);
      backdrop-filter: blur(4px);
      border-top: 1px solid #e5e7eb;
      box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
      z-index: 30;
    }
    .prod-master-scroll.is-hidden { display: none; }
    .prod-master-scroll { scrollbar-width: thin; }
    .prod-master-scroll::-webkit-scrollbar { height: 14px; }
    .prod-master-scroll::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 6px; }
    .prod-master-scroll::-webkit-scrollbar-thumb:hover { background: #888; }
    .prod-master-scroll::-webkit-scrollbar-track { background: transparent; }

    /* === Colonne "Client" figée à gauche dans les 3 tableaux Onboarding === */
    /* Quand on scrolle horizontalement, le nom du client reste visible.
       Astuce : sticky sur <td> exige border-collapse: separate (sinon les bordures
       cassent le positionnement dans certains navigateurs). */
    [data-prod-scroll-sync] table {
      border-collapse: separate !important;
      border-spacing: 0;
    }
    [data-prod-scroll-sync] table thead th:first-child,
    [data-prod-scroll-sync] table tbody td:first-child {
      position: sticky !important;
      left: 0;
      z-index: 5;
      min-width: 220px;
      width: 220px;
      box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.12);
    }
    /* Fond opaque obligatoire : sans ça, le contenu qui passe dessous se voit. */
    [data-prod-scroll-sync] table thead th:first-child { background: #f9fafb; z-index: 6; }
    [data-prod-scroll-sync] table tbody td:first-child { background: #ffffff; }
    [data-prod-scroll-sync] table tbody tr:hover td:first-child { background: #f9fafb; }
    /* Restaure la ligne de séparation inter-lignes (perdue avec border-collapse:separate) */
    [data-prod-scroll-sync] table tbody tr td { border-top: 1px solid #f3f4f6; }
    [data-prod-scroll-sync] table tbody tr:first-child td { border-top: none; }

    /* ============================================================
       MODE SOMBRE — couverture complète (audit de tous les composants)
       Objectif : tout le texte passe en clair ; seules les vignettes /
       badges colorés (emerald, danger, amber, bleu, brand-*) gardent leur
       teinte d'origine. Aucune zone blanche/grise résiduelle.
       ============================================================ */
    /* Texte par défaut (éléments sans classe de couleur) → clair */
    body[data-mode="dark"] { color: var(--text-soft); }
    /* Nuances de texte non remappées plus haut → clair */
    body[data-mode="dark"] .text-slate-900,
    body[data-mode="dark"] .text-slate-800,
    body[data-mode="dark"] .text-slate-700,
    body[data-mode="dark"] .text-slate-600,
    body[data-mode="dark"] .text-zinc-900,
    body[data-mode="dark"] .text-zinc-800,
    body[data-mode="dark"] .text-zinc-700,
    body[data-mode="dark"] .text-neutral-900,
    body[data-mode="dark"] .text-neutral-800,
    body[data-mode="dark"] .text-neutral-700,
    body[data-mode="dark"] .text-stone-800,
    body[data-mode="dark"] .text-stone-700 { color: var(--text-soft) !important; }
    body[data-mode="dark"] .text-slate-500,
    body[data-mode="dark"] .text-slate-400,
    body[data-mode="dark"] .text-zinc-500,
    body[data-mode="dark"] .text-neutral-500 { color: var(--text-muted) !important; }
    body[data-mode="dark"] .text-black { color: var(--text-strong) !important; }
    /* Surfaces claires non remappées plus haut → sombres */
    body[data-mode="dark"] .bg-gray-400,
    body[data-mode="dark"] .bg-slate-200,
    body[data-mode="dark"] .bg-zinc-50,  body[data-mode="dark"] .bg-zinc-100,
    body[data-mode="dark"] .bg-neutral-50, body[data-mode="dark"] .bg-neutral-100,
    body[data-mode="dark"] .bg-stone-50,  body[data-mode="dark"] .bg-stone-100 { background-color: var(--surface-alt) !important; }

    /* Colonne « Client » figée (sticky) — était blanche par-dessus le tableau sombre.
       C'est elle qui donnait l'effet « nom du dossier sur bande blanche ». */
    body[data-mode="dark"] [data-prod-scroll-sync] table thead th:first-child { background: var(--surface-alt) !important; }
    body[data-mode="dark"] [data-prod-scroll-sync] table tbody td:first-child { background: var(--card-bg) !important; }
    body[data-mode="dark"] [data-prod-scroll-sync] table tbody tr:hover td:first-child { background: var(--surface-alt) !important; }
    body[data-mode="dark"] [data-prod-scroll-sync] table tbody tr td { border-top-color: var(--border-col) !important; }
    body[data-mode="dark"] .prod-master-scroll { background: rgba(15,18,24,0.95) !important; border-top-color: var(--border-col) !important; }

    /* Composants custom à fond clair codé en dur → surfaces sombres */
    body[data-mode="dark"] .toast,
    body[data-mode="dark"] .mention-dropdown,
    body[data-mode="dark"] .clyo-theme-card,
    body[data-mode="dark"] .popover { background: var(--card-bg) !important; border-color: var(--border-col) !important; color: var(--text-soft); }
    body[data-mode="dark"] .clyo-theme-name { color: var(--text-soft) !important; }
    /* file-pill : vignette accent → fond sombre, texte garde la couleur d'accent */
    body[data-mode="dark"] .file-pill { background: var(--surface-alt) !important; border-color: var(--border-col) !important; color: var(--brand-accent) !important; }
    body[data-mode="dark"] .file-pill:hover { background: var(--card-bg) !important; }
    /* Menus/dropdowns génériques créés en JS sans utilitaire bg → fond sombre */
    body[data-mode="dark"] .mention-dropdown .mention-row:hover,
    body[data-mode="dark"] .mention-dropdown .mention-row.active { background: var(--surface-alt) !important; }
    body[data-mode="dark"] .mention-dropdown .mention-row .nm { color: var(--text-strong) !important; }
    body[data-mode="dark"] .mention-dropdown .mention-row .em { color: var(--text-muted) !important; }

    /* ============================================================
       CHAMP DESTINATAIRES « À » — chips style Gmail (multi-adresses)
       ============================================================ */
    .email-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1;
      min-height: 38px; padding: 5px 8px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; cursor: text; transition: border-color .15s, box-shadow .15s; }
    .email-chips.focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-accent-soft); }
    .email-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 9px; border-radius: 999px;
      background: var(--brand-accent-soft); color: var(--brand-accent); font-size: 12px; font-weight: 600; max-width: 100%; }
    .email-chip.invalid { background: #FEE2E2; color: #B91C1C; }
    .email-chip .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .email-chip .x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
      border-radius: 50%; cursor: pointer; opacity: .7; }
    .email-chip .x:hover { opacity: 1; background: rgba(0,0,0,.12); }
    .email-chips input.chip-input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent;
      font-size: 13px; color: var(--brand-dark); padding: 3px 2px; }
    body[data-mode="dark"] .email-chips { background: var(--brand-surface) !important; border-color: var(--border-col) !important; }
    body[data-mode="dark"] .email-chips input.chip-input { color: var(--text-strong); }

    /* ============================================================
       ÉDITEUR DE TEXTE ENRICHI (mise en forme HTML) — barre d'outils
       ============================================================ */
    .rt-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 7px 10px;
      background: #FAFBFC; border-bottom: 1px solid #eef0f3; }
    .rt-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
      padding: 0 7px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; color: #4b5563;
      font-size: 14px; transition: background .12s, color .12s; }
    .rt-btn:hover { background: var(--brand-primary-soft); color: var(--brand-primary); }
    .rt-btn.active { background: var(--brand-primary-soft); color: var(--brand-primary); }
    .rt-btn b, .rt-btn i, .rt-btn u { font-size: 14px; line-height: 1; }
    .rt-sep { width: 1px; height: 20px; background: #e5e7eb; margin: 0 4px; }
    /* Bouton « Templates » : poussé à droite de la barre RT */
    .rt-tpl-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 30px;
      padding: 0 11px; border: 1px solid var(--brand-accent); border-radius: 8px; background: var(--brand-accent-soft);
      color: var(--brand-accent); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
    .rt-tpl-btn:hover { background: var(--brand-accent); color: #fff; }
    /* Panneau glissant des templates de mail (dans le modal Écrire un mail) */
    .mail-tpl-panel { position: absolute; top: 0; right: 0; height: 100%; width: 320px; max-width: 86%;
      background: #fff; border-left: 1px solid var(--brand-accent); box-shadow: -12px 0 32px -12px rgba(0,0,0,.25);
      transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 10;
      display: flex; flex-direction: column; }
    .mail-tpl-panel.open { transform: translateX(0); }
    .mail-tpl-row { cursor: pointer; transition: background .12s; }
    .mail-tpl-row:hover { background: var(--brand-accent-soft); }
    .mail-tpl-emoji-pick button { width: 34px; height: 34px; font-size: 18px; border-radius: 8px; border: 1px solid transparent;
      background: transparent; cursor: pointer; line-height: 1; transition: background .1s, border-color .1s; }
    .mail-tpl-emoji-pick button:hover { background: var(--brand-surface); }
    .mail-tpl-emoji-pick button.sel { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
    body[data-mode="dark"] .mail-tpl-panel { background: var(--card-bg) !important; border-color: var(--border-col) !important; color: var(--text-soft); }
    body[data-mode="dark"] .mail-tpl-row:hover { background: var(--surface-alt) !important; }
    /* Mini-popup au survol du nom de dossier (lecture seule) */
    .dossier-hover-pop { position: fixed; z-index: 90; width: 290px; max-width: 92vw; padding: 12px 14px;
      background: #fff; border: 1px solid var(--brand-accent); border-radius: 12px;
      box-shadow: 0 14px 40px -10px rgba(0,0,0,.3); pointer-events: none; font-size: 12.5px; color: var(--brand-dark); }
    .dossier-hover-pop .dh-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .dossier-hover-pop .dh-dot.on { background: var(--brand-accent); }
    .dossier-hover-pop .dh-dot.off { background: transparent; border: 1.5px solid #cbd5e1; }
    body[data-mode="dark"] .dossier-hover-pop { background: var(--card-bg) !important; border-color: var(--border-col) !important; color: var(--text-soft); }
    .rt-editor { width: 100%; min-height: 180px; max-height: 360px; overflow-y: auto; padding: 14px;
      font-size: 13.5px; line-height: 1.65; color: var(--brand-dark); background: #fff; outline: 0; }
    .rt-editor:empty:before { content: attr(data-placeholder); color: #9aa4b2; }
    .rt-editor ul { list-style: disc; padding-left: 22px; margin: 6px 0; }
    .rt-editor ol { list-style: decimal; padding-left: 22px; margin: 6px 0; }
    .rt-editor a { color: var(--brand-accent); text-decoration: underline; }
    body[data-mode="dark"] .rt-toolbar { background: var(--surface-alt) !important; border-color: var(--border-col) !important; }
    body[data-mode="dark"] .rt-editor { background: var(--brand-surface) !important; color: var(--text-strong) !important; }
    body[data-mode="dark"] .rt-btn { color: var(--text-soft); }
    /* Sélecteur d'emoji */
    .emoji-pop { position: absolute; z-index: 80; width: 248px; max-height: 210px; overflow-y: auto; padding: 8px;
      background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16);
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .emoji-pop button { border: 0; background: transparent; font-size: 19px; line-height: 1; padding: 5px; border-radius: 7px; cursor: pointer; }
    .emoji-pop button:hover { background: var(--brand-primary-soft); }
    body[data-mode="dark"] .emoji-pop { background: var(--card-bg) !important; border-color: var(--border-col) !important; }

    /* ============================================================
       RÉORGANISATION PAR CLIC PROLONGÉ (long press → glisser-déposer)
       ============================================================ */
    .clyo-drag-active, .clyo-drag-active * { cursor: grabbing !important; user-select: none !important; }
    .clyo-draggable { box-shadow: 0 10px 26px rgba(0,0,0,.20) !important; opacity: .92; position: relative; z-index: 20;
      outline: 2px solid var(--brand-accent); }
    .auto-card-compact.clyo-draggable, .auto-card-large.clyo-draggable { transform: scale(1.015); transition: transform .1s; border-radius: 10px; }
    tr.clyo-draggable td { background: var(--brand-accent-soft) !important; }
    .clyo-press { cursor: grab; }