:root{
  --navy:#232048; --blue-night:#394170; --cyan:#27BBE4; --green:#00a882;
  --grey-light:#E6EBF2; --grey-mid:#CCD6E0; --red:#D6544C; --white:#fff;
  --bg:#eef1f7; --surface:#ffffff; --ink:#232048; --ink-soft:#5b6480; --line:#dce2ec;
  --surface-2:#f7f9fc; --hover:#f4f8fd;
}
/* ---------- Thèmes (issue #9) : appliqués via data-theme sur <html> ---------- */
:root[data-theme="sombre"]{
  --navy:#e7e9f0; --blue-night:#c9cee0;
  --bg:#14151a; --surface:#1e2028; --ink:#e7e9f0; --ink-soft:#a2a9bd; --line:#333a48;
  --surface-2:#262932; --hover:#2b2f3a; --grey-light:#2b2f3a; --grey-mid:#3a4150;
}
:root[data-theme="nuit"]{
  --navy:#ecebf6; --blue-night:#c9c7e4;
  --bg:#1b1936; --surface:#232048; --ink:#ecebf6; --ink-soft:#a9a7c8; --line:#3a3768;
  --surface-2:#2b285a; --hover:#332f66; --grey-light:#332f66; --grey-mid:#4a4680;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Le hidden HTML doit toujours l'emporter sur les display des classes (login-view/app-view/nav). */
[hidden]{display:none !important}
body{font-family:'Roboto',system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}
a{color:inherit;text-decoration:none}
.muted{color:var(--ink-soft)}
.mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#27BBE4 0%,#00bfb3 100%);
  display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:18px}
.btn{font-family:inherit;font-weight:600;border-radius:6px;padding:11px 18px;border:none;cursor:pointer;font-size:14px;transition:.15s}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.2)}
/* Boutons primaires : même dégradé cyan->teal que le logo « M » (.mark), texte blanc. */
.btn-primary{background:linear-gradient(135deg,#27BBE4 0%,#00bfb3 100%);color:#fff}
.btn-primary:hover{filter:brightness(1.05)}

/* ---------- Connexion ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#232048 0%,#394170 100%);padding:20px}
.login-card{background:var(--surface);border-radius:14px;padding:34px 30px;width:100%;max-width:360px;
  display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login-logo{display:flex;align-items:center;gap:10px;justify-content:center}
.login-logo b{font-size:22px;color:var(--navy)}
.login-sub{text-align:center;color:var(--ink-soft);font-size:13px;margin-bottom:8px}
.login-card label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500;color:var(--ink-soft)}
.login-card input{font-family:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;color:var(--navy)}
.login-card input:focus{outline:none;border-color:var(--cyan)}
.login-card .btn{margin-top:6px}
.login-error{background:rgba(214,84,76,.12);color:#c0392f;border:1px solid rgba(214,84,76,.3);
  border-radius:8px;padding:9px 12px;font-size:13px;text-align:center}
.login-info{background:rgba(0,168,130,.10);color:#00845f;border:1px solid rgba(0,168,130,.28);
  border-radius:8px;padding:9px 12px;font-size:13px;text-align:center}
.login-link{display:block;text-align:center;margin-top:12px;color:var(--cyan);font-size:13px;font-weight:500;cursor:pointer}
.login-link:hover{text-decoration:underline}

/* ---------- App shell ---------- */
.app{display:flex}
.mobilebar{display:none}         /* barre mobile + hamburger : visibles sous 720px */
.nav-overlay{display:none}
.sidebar{width:230px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);
  padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;
  overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;padding:0 8px 20px}
.logo b{font-size:18px;color:var(--navy)}
/* Clin d'oeil « May the 4th » : le « e » de May4e en exposant, proportionné. */
.logo b sup,.mb-brand b sup,.login-logo b sup{font-size:.62em;font-weight:700;top:-.55em}
/* Le menu DEFILE. La colonne fait `height:100vh` sans debordement : tout ce qui
   depassait la hauteur de la fenetre etait coupe et INATTEIGNABLE. Avec 25 entrees, un
   portable a 768 px de haut, un navigateur avec sa barre de favoris, ou un simple zoom a
   125 % suffisaient a cacher les dernieres lignes, et rien ne laissait deviner qu'il y
   avait quelque chose de plus.
   C'est la LISTE qui defile, pas la colonne entiere : le logo reste en haut, le bloc du
   compte connecte reste en bas, comme dans tout menu lateral. `min-height:0` est
   indispensable dans un conteneur flex, sinon l'enfant refuse de rétrécir et rien ne
   defile malgre l'`overflow`. */
.nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:var(--ink-soft);font-size:14px;font-weight:500}
.nav a .ic{width:18px;text-align:center}
.nav a:hover{background:var(--grey-light);color:var(--navy)}
.nav a.active{background:rgba(39,187,228,.14);color:var(--navy);box-shadow:inset 3px 0 0 var(--cyan)}
/* #125 : séparateurs de groupes dans le menu de gauche */
.nav-sep{height:1px;background:var(--line);margin:8px 10px}
.nav-sep[hidden]{display:none}
.user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 2px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-night);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:13px;flex-shrink:0}
.avatar.has-photo{background:transparent;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}   /* #103 */
/* #102 : historique des modifications */
.hist-ev{padding:8px 0;border-bottom:1px solid var(--line,#eef1f6)}
.hist-h{font-size:12.5px;margin-bottom:4px}
.hist-row{font-size:13px;padding:2px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.hist-f{font-weight:600;min-width:120px}
.hist-o{color:var(--grey,#64748b);text-decoration:line-through}
.hist-n{color:var(--navy,#232048)}
/* #101 : score en tête de fiche contact + logo entreprise dans le rail */
.rec-name .rec-score{font-size:12px;vertical-align:middle;margin-left:4px}
.assoc-logo{width:34px;height:34px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line,#eef1f6);flex:none}
/* #108 : avatar dans la vue Pilotage */
.pil-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.pil-initial{display:inline-flex;align-items:center;justify-content:center;background:var(--blue-night,#394170);color:#fff;font-size:11px;font-weight:600}
.logout{margin-left:auto;background:transparent;border:none;cursor:pointer;color:var(--ink-soft);font-size:18px;padding:4px}
.gbox{margin-top:auto;font-size:12px;color:var(--ink-soft);padding:8px 8px 0}
.gbox .gconnect{cursor:pointer;color:#1596bd;font-weight:500}
.gbox .gon{color:#08795f;font-weight:500}
.gbox a{cursor:pointer}
.gbox + .user{margin-top:8px}
.logout:hover{color:var(--red)}

.main{flex:1;min-width:0;padding:26px 34px 60px}
h1{font-size:28px;font-weight:600;color:var(--navy)}
.subtitle{color:var(--ink-soft);font-size:14px;margin-top:4px}

.placeholder{margin-top:40px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:44px 30px;text-align:center;box-shadow:0 1px 2px rgba(35,32,72,.05)}
.ph-emoji{font-size:44px}
.placeholder h2{font-size:20px;color:var(--navy);margin:12px 0 8px}
.placeholder p{font-size:14.5px;margin:4px 0}
.ph-health{margin-top:20px;display:inline-block;font-size:12px;color:var(--ink-soft);
  background:var(--grey-light);border-radius:20px;padding:5px 14px}

/* ---------- Barre d'action de vue ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:24px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.search{flex:1;min-width:180px;font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;color:var(--navy);background:var(--surface)}
.search:focus{outline:none;border-color:var(--cyan)}
/* Champ de recherche des listes avec croix de réinitialisation (visible seulement si non vide). */
.searchbox{position:relative;display:flex;flex:1;min-width:180px}
.searchbox .search{flex:1;min-width:0;width:100%;padding-right:34px}
.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:none;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.search-clear:hover{background:rgba(0,0,0,.06);color:var(--navy)}
.searchbox.has-value .search-clear{display:flex}
select.filter{font-family:inherit;font-size:13.5px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;color:var(--navy);background:var(--surface)}
/* #181 : « Colonnes » ne doit pas être pris pour un filtre -> style utilitaire (fond transparent, bordure pointillée). */
#cols-btn{background:transparent;border-style:dashed;color:var(--ink-soft)}
#cols-btn:hover{background:var(--hover);color:var(--navy)}
/* #181 : reset des filtres = croix rouge, plus explicite qu'un bouton neutre. */
#clear-filters{color:#D6544C;border-color:#e7b0ab}
#clear-filters:hover{background:#fdecea;border-color:#D6544C;color:#D6544C}
/* #181 : bascule d'affichage des filtres — visible uniquement sur mobile. */
.toolbar-filters-toggle{display:none}
.btn-sm{padding:9px 14px;font-size:13px}
/* Boutons secondaires : fond gris clair (au lieu de blanc) pour être plus visibles. */
.btn-outline{background:var(--grey-light);border:1px solid var(--line);color:var(--ink-soft)}
.btn-outline:hover{background:var(--grey-mid);color:var(--navy);border-color:var(--cyan)}

/* ---------- Table ---------- */
.card-surface{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(35,32,72,.05)}
table.grid{width:100%;border-collapse:collapse;font-size:14px}
table.grid th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);
  font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
table.grid td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--navy)}
table.grid tr:last-child td{border-bottom:none}
table.grid tbody tr{cursor:pointer}
table.grid tbody tr:hover{background:var(--hover)}
table.grid th.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
table.grid th.th-sort:hover{color:var(--navy)}
table.grid th.th-sort.active{color:var(--navy)}
table.grid th.th-sort .sort-ind{margin-left:4px;font-size:10px;opacity:.85}
.seg-chips{display:flex;flex-wrap:wrap;gap:4px}
.seg-chips .chip{cursor:pointer}
/* #176 : tags/segments compacts et colorés (couleur stable par nom, inline) */
.chip.tag{font-size:11px;font-weight:600;padding:1px 8px;border-radius:11px;line-height:1.5;white-space:nowrap}
.chip.tag .lnk{color:inherit;font-weight:600}
.chip.tag .chip-x{color:inherit;opacity:.6}
.chip.tag .chip-x:hover{opacity:1;color:var(--red)}
.sec-email{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.sec-email .se-addr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-email .se-act{font-size:12px;color:var(--brand,#27BBE4);cursor:pointer;white-space:nowrap}
.sec-email .se-del{color:var(--red-accent,#D6544C)}
.add-email{font-size:12.5px;margin:4px 0 2px}
.add-email a{color:var(--brand,#27BBE4);cursor:pointer}
.seg-filter a{cursor:pointer}
a.row-name{color:inherit;text-decoration:none}
a.row-name:hover{text-decoration:none}
/* Liste : le nom tient sur une seule ligne (ellipsis) → hauteur de ligne uniforme quel que soit le tri (issue #144) */
table.grid a.row-name{display:inline-flex;align-items:center;max-width:340px;vertical-align:middle}
table.grid a.row-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Les cellules de liste restent sur une seule ligne ; le conteneur défile horizontalement
   si l'ensemble dépasse, plutôt que de wrapper et faire grandir la ligne (issue #144). */
.card-surface:has(> table.grid){overflow-x:auto}
.card-surface > table.grid td{white-space:nowrap}
/* Colonne des boutons : elle reste COLLÉE à droite quand le tableau déborde. Sans ça, une
   ligne un peu large (une tâche liée à cinq comptes) repoussait les actions hors de l'écran
   et il fallait pousser la barre de défilement horizontale pour les atteindre. */
table.grid th.col-actions,
table.grid td.col-actions{position:sticky;right:0;z-index:2;background:var(--surface);
  box-shadow:-7px 0 8px -7px rgba(35,32,72,.22)}
table.grid th.col-actions{background:var(--surface-2);z-index:3}
table.grid tbody tr:hover td.col-actions{background:var(--hover)}
/* Cellule au contenu long (liste de comptes…) : coupée proprement, texte complet en infobulle,
   pour que le tableau ne s'étire pas sans fin. */
table.grid td.cell-clip{max-width:280px;overflow:hidden;text-overflow:ellipsis}
.rec-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rec-nav{display:inline-flex;align-items:center;gap:6px}
.rec-nav .nav-arrow{padding:1px 10px;font-size:17px;line-height:1.4}
.rec-nav .nav-arrow[disabled]{opacity:.4;cursor:default}
.rec-nav-pos{font-size:12.5px;color:var(--ink-soft);min-width:54px;text-align:center}
.pl-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto}
.pl-stage{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.pl-stage .pl-name{font-weight:600;color:var(--navy)}
.pl-stage .pl-acts{display:inline-flex;gap:2px;flex:none}
.pl-stage .mini-act{font-size:13px}
.csv-skip{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:6px;margin-top:8px;font-size:12.5px;color:var(--red)}
.google-btn{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;margin-top:8px}
.google-btn .g-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#fff;color:#4285F4;font-weight:700;font-family:Arial,sans-serif;font-size:13px;border:1px solid var(--line,#d9dee6)}
.empty-row{padding:26px;text-align:center;color:var(--ink-soft);font-style:italic}
/* Lien cliquable dans une ligne non-cliquable (nom du contact) */
.lnk{cursor:pointer;color:var(--navy)}
.lnk:hover{color:#1596bd;text-decoration:underline}
table.grid td select.cell-status{font-size:12.5px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--navy);cursor:pointer}
table.grid input[type=checkbox]{cursor:pointer;width:16px;height:16px}
/* Barre d'actions groupées (admin) */
.bulkbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;padding:9px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-size:13px}
.bulkbar b{color:var(--navy)}
.btn.bulk-danger{color:#c0392f;border-color:#e6b8b3}
.btn.bulk-danger:hover{background:#fbecea}

/* ---------- Badges ---------- */
.badge{display:inline-block;font-size:11.5px;font-weight:600;border-radius:20px;padding:2px 10px;white-space:nowrap}
.badge.grey{background:var(--grey-light);color:var(--ink-soft)}
.badge.blue{background:rgba(39,187,228,.15);color:#1596bd}
.badge.green{background:rgba(0,168,130,.15);color:#08795f}
.badge.amber{background:rgba(230,165,52,.16);color:#b7791f}
.badge.red{background:rgba(214,84,76,.14);color:#c0392f}
.badge.slate{background:rgba(57,65,112,.14);color:#394170}
.li-delta.up{color:#08795f}.li-delta.down{color:#c0392f}
.badge.brown{background:rgba(150,110,70,.18);color:#8a5a2b}
.badge.purple{background:rgba(124,77,255,.15);color:#6b46c1}
/* #351 : « Partenaire potentiel » = même famille que « Partenaire », en plus clair. */
.badge.lilac{background:rgba(124,77,255,.08);color:#8a7bd0}
.score-dot{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:12.5px}
.score-dot i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---------- Fiche détail ---------- */
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.detail-title{font-size:23px;font-weight:600;color:var(--navy)}
.detail-sub{color:var(--ink-soft);font-size:14px;margin-top:3px}
.back-link{color:var(--ink-soft);font-size:13px;cursor:pointer;display:inline-block;margin-bottom:12px}
.back-link:hover{color:var(--cyan)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media(max-width:820px){.detail-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 1px 2px rgba(35,32,72,.05)}
.panel h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);margin-bottom:12px;font-weight:600}
/* #112 : sélecteur « Responsable » avec libellé dans l'entête d'opportunité */
.hdr-sel{display:inline-flex;align-items:center;gap:6px}
.hdr-sel-lbl{font-size:12px;font-weight:600;color:var(--ink-soft)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink-soft)}
.kv .v{color:var(--navy);font-weight:500;text-align:right}
.mini-list{list-style:none}
.mini-list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;cursor:pointer}
.mini-list li:last-child{border-bottom:none}
.mini-list li:hover{color:var(--cyan)}
.timeline li{list-style:none;padding:10px 0 10px 16px;border-left:2px solid var(--line);position:relative;margin-left:4px}
.timeline li::before{content:"";position:absolute;left:-5px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.timeline .t-sub{font-size:13.5px;color:var(--navy)}
.timeline .t-meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px}

/* ---------- Modale / formulaire ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(35,32,72,.45);display:flex;align-items:flex-start;justify-content:center;padding:60px 16px;z-index:100;overflow:auto}
.modal{background:var(--surface);border-radius:14px;width:100%;max-width:520px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:18px;color:var(--navy)}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink-soft);line-height:1}
.modal-body{padding:20px 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-body .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:12px;font-weight:500;color:var(--ink-soft)}
.field input,.field select,.field textarea{font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;color:var(--navy);background:var(--surface);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan)}
.field textarea{min-height:80px;resize:vertical}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;align-items:center;gap:10px}
.em-track{margin-right:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);cursor:pointer}
.em-track input{margin:0}
/* #135 : avertissement de configuration (ex. Brevo non configuré) */
.warn-box{background:#fff8e6;border:1px solid #f0d48a;color:#7a5b00;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px}
/* #142 : opportunité rattachée à une interaction + sélecteur d'opportunités */
.act-deal{margin-top:5px;font-size:12.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.deal-pick-list{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.deal-pick{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13.5px}
.deal-pick:last-child{border-bottom:none}
.deal-pick:hover{background:var(--bg)}
.deal-pick input{margin-top:3px;flex:none}
/* #133 : destinataire de l'e-mail (non éditable — il vient du contact) */
.em-to{font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink-soft)}
/* #134 : « × » de retrait d'une pièce jointe dans la modale d'envoi */
.att-chip a{color:#c0392f;text-decoration:none;font-weight:600;margin-left:2px}
/* Ligne d'un utilisateur désactivé (Admin > Utilisateurs) : grisée */
.grid tr.row-inactive{opacity:.5}
.grid tr.row-inactive b{font-weight:500}

/* ---------- Cockpit / Plan du jour ---------- */
.summary-box{background:linear-gradient(135deg,rgba(39,187,228,.12),rgba(0,168,130,.10));
  border:1px solid rgba(39,187,228,.28);border-radius:12px;padding:14px 18px;margin:14px 0 6px;
  font-family:'Roboto Slab',serif;font-size:14.5px;color:var(--navy);display:flex;gap:12px;align-items:center}
.obj-row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 4px}
.obj{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:150px;flex:1}
.obj .lbl{font-size:12px;color:var(--ink-soft);text-transform:capitalize}
.obj .val{font-size:16px;font-weight:600;color:var(--navy);margin:3px 0 6px}
.obj .bar{height:6px;background:var(--grey-light);border-radius:4px;overflow:hidden}
.obj .bar i{display:block;height:100%;background:linear-gradient(90deg,#27BBE4,#00a882);border-radius:4px}
.obj.done .bar i{background:var(--green)}

.grp{margin-top:22px}
.grp-h{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.grp-h .cnt{font-size:11px;color:var(--navy);background:var(--grey-mid);border-radius:20px;padding:1px 9px}
.grp.reponse .grp-h{color:#c0392f}.grp.lead_chaud .grp-h{color:#b7791f}
.grp.deal_stagnant .grp-h{color:#2d5bb8}.grp.tache .grp-h{color:#08795f}.grp.hygiene .grp-h{color:var(--ink-soft)}
.grp.seq .grp-h{color:#00a882}
.act.seq-step{border-left:3px solid #00a882}
.act{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:10px;padding:14px 16px;margin-bottom:11px;box-shadow:0 1px 2px rgba(35,32,72,.05);transition:.2s}
.act.reponse{border-left-color:var(--red)}.act.lead_chaud{border-left-color:#e6a534}
.act.deal_stagnant{border-left-color:#3b6fd4}.act.tache{border-left-color:var(--green)}.act.hygiene{border-left-color:var(--grey-mid)}
/* #342 : plan du jour du support (ticket helpdesk, machine cloud, conso IA) */
.grp.ticket .grp-h{color:#c0392f}.grp.serveur .grp-h{color:#2d5bb8}.grp.conso_ia .grp-h{color:#b7791f}
.act.ticket{border-left-color:var(--red)}.act.serveur{border-left-color:#3b6fd4}.act.conso_ia{border-left-color:#e6a534}
.act.done{opacity:.5}.act.gone{display:none}
.act-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.act-who{font-size:14.5px;font-weight:600;color:var(--navy)}
.act-chan{font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
.act-why{font-size:13.5px;color:var(--ink-soft);margin:7px 0}
.act-do{font-size:14px;color:var(--navy);margin-bottom:11px}
.act-do b{color:#1596bd}
.act-btns{display:flex;gap:7px;flex-wrap:wrap}
.draft{margin-top:11px;background:var(--grey-light);border:1px dashed rgba(39,187,228,.4);border-radius:8px;padding:0 13px;max-height:0;overflow:hidden;transition:max-height .28s,padding .28s}
.draft.open{max-height:420px;padding:13px}
.draft .dh{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#1596bd;font-weight:600;margin-bottom:7px}
.draft textarea{width:100%;min-height:110px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--navy);font-family:'Roboto',sans-serif;font-size:13.5px;line-height:1.55;padding:10px;resize:vertical}
.alldone{text-align:center;color:var(--ink-soft);font-style:italic;padding:34px}

/* ---------- Kanban ---------- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.kanban-col{flex:1 0 220px;min-width:220px;background:#f2f5fa;border:1px solid var(--line);border-radius:12px;padding:10px;transition:.15s}
.kanban-col.drop-target{background:rgba(39,187,228,.10);border-color:var(--cyan)}
.kanban-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:var(--navy);padding:2px 4px 10px}
.kanban-sum{font-size:11.5px;color:var(--ink-soft);font-weight:500}
.kanban-drop{min-height:40px;display:flex;flex-direction:column;gap:8px}
.kanban-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:8px;
  padding:10px 12px;cursor:grab;box-shadow:0 1px 2px rgba(35,32,72,.06);transition:.12s}
.kanban-card:hover{box-shadow:0 4px 10px rgba(35,32,72,.12)}
.kanban-card.stagnant{border-left-color:#e8951a}   /* ouvert sans activité récente (à relancer) */
.kanban-card.won{border-left-color:var(--green)}   /* gagné */
.kanban-card.lost{border-left-color:#9aa3b0}       /* perdu (clôturé, neutre) */
/* Vue liste : même code couleur en liseré gauche (issue #54) */
tr.deal-row td:first-child{border-left:3px solid var(--cyan)}
tr.deal-row.stagnant td:first-child{border-left-color:#e8951a}
tr.deal-row.won td:first-child{border-left-color:var(--green)}
tr.deal-row.lost td:first-child{border-left-color:#9aa3b0}
.pipe-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);margin:2px 0 10px}
.pipe-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.kanban-card.dragging{opacity:.45}
.kanban-col-head .col-fold{cursor:pointer;user-select:none}
.kanban-col.collapsed .kanban-drop{display:none}
table.grid tr.grp-row{cursor:pointer;background:var(--surface-2,#f2f5fa)}
table.grid tr.grp-row:hover{background:var(--hover)}
table.grid tr.grp-row .grp-fold{display:inline-block;width:14px;color:var(--ink-soft)}
.kc-title{font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:3px}
.kc-meta{font-size:12px;color:var(--ink-soft)}
.kc-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 8px;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--navy)}
.kc-foot .bant-dots{margin-left:0}   /* dans la carte kanban, pas de marge qui pousse hors cadre (issue #67) */
.kc-exch{font-weight:600;font-size:11.5px;white-space:nowrap;cursor:help}   /* #96 dernier échange */

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--green);color:#fff;
  font-weight:600;font-size:13.5px;padding:11px 22px;border-radius:8px;box-shadow:0 8px 24px rgba(35,32,72,.25);transition:transform .3s;z-index:120}
#toast.show{transform:translateX(-50%) translateY(0)}
/* Bandeau « nouvelle version disponible » (auto-détection de déploiement) */
.update-banner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
  background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;
  box-shadow:0 6px 22px rgba(0,0,0,.28);display:flex;align-items:center;gap:12px;font-size:13.5px;max-width:92vw}

/* ---------- L10 : onglets de liste (Tous / Mes) ---------- */
.list-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.ltab{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-soft);background:none;border:none;
  border-bottom:2px solid transparent;padding:9px 14px;margin-bottom:-1px;cursor:pointer}
.ltab:hover{color:var(--navy)}
.ltab.active{color:var(--navy);border-bottom-color:var(--cyan)}

/* ---------- L10 : fiche en 3 colonnes (façon HubSpot) ---------- */
.rec{display:grid;grid-template-columns:288px minmax(0,1fr) 320px;gap:18px;align-items:start}
.rec-left,.rec-right{display:flex;flex-direction:column;gap:14px}
/* belowContent (ex. Google Chat) : rendu DANS la colonne centrale, sous le contenu. */
.rec-center-below{margin-top:14px;min-width:0}
.rec-center-below>.panel{margin-top:0}
.rec-left .back-link{margin:0 0 2px}
.rec-id{display:flex;gap:12px;align-items:flex-start}
.rec-avatar{width:46px;height:46px;flex-shrink:0;border-radius:12px;background:linear-gradient(135deg,#27BBE4 0%,#00a882 100%);
  color:#fff;font-weight:600;font-size:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rec-avatar.has-fav{background:#fff;border:1px solid var(--line)}
.rec-avatar.has-fav img{width:70%;height:70%;object-fit:contain}
/* Avatar éditable : survol -> voile + 📷 pour changer la photo (compte/contact) */
.rec-avatar.editable{cursor:pointer;position:relative}
.rec-avatar.editable::after{content:"📷";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.42);color:#fff;font-size:16px;opacity:0;transition:opacity .15s}
.rec-avatar.editable:hover::after{opacity:1}
/* Vue « cartes » des listes comptes / contacts */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:2px}
.cards-empty{padding:26px;text-align:center;color:var(--ink-soft)}
.lcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  text-decoration:none;color:inherit;transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}
.lcard:hover{box-shadow:0 8px 22px rgba(35,32,72,.13);border-color:var(--cyan);transform:translateY(-3px)}
.lcard:active{transform:translateY(-1px)}
/* Vue cartes comptes : encadré + fond pastel selon le statut (client=vert, exclu/churné=rouge). */
.lcard.lcard-client{border-color:var(--green);background:rgba(0,168,130,.07)}
.lcard.lcard-client:hover{border-color:var(--green)}
.lcard.lcard-out{border-color:var(--red);background:rgba(226,75,74,.07)}
.lcard.lcard-out:hover{border-color:var(--red)}
.lcard-top{display:flex;gap:10px;align-items:center}
.lcard-av{width:42px;height:42px;flex-shrink:0;border-radius:11px;overflow:hidden;color:#fff;font-weight:600;font-size:17px;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#27BBE4 0%,#00a882 100%)}
.lcard-av.has-img{background:#fff;border:1px solid var(--line)}
.lcard-av.has-img img{width:100%;height:100%;object-fit:contain}
.lcard-av.photo img{object-fit:cover}
.lcard-h{min-width:0;flex:1}
.lcard-name{font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcard-name.is-client{color:#00a882}
.lcard-name.is-partner{color:#8e44ad}
.lcard-sub{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.lcard-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:10px;font-size:12px}
.rec-name{font-size:18px;font-weight:600;color:var(--navy);line-height:1.2}
.rec-sub{font-size:13px;color:var(--ink-soft);margin-top:3px}
.ractions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* Appels à passer (Plan du jour) : en-tête de jour */
.call-day{margin-top:8px}
.call-day-h{font-size:12.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;margin:10px 0 4px}
/* #117 : barre d'actions horizontale de la fiche contact (une seule ligne, extensible) */
.ract-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
/* #123 : pièces jointes des activités e-mail */
.att-list{margin-top:5px;font-size:12.5px;color:var(--ink-soft)}
.att-chip{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin:2px 4px 0 0}
/* #118 : tuiles de statistiques des tickets */
.tk-tiles{display:flex;gap:12px;flex-wrap:wrap}
.tk-tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 18px;min-width:96px;text-align:center}
.tk-num{font-size:26px;font-weight:700;line-height:1.1}
.tk-lbl{font-size:12px;color:var(--ink-soft);margin-top:2px}
.ract{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;cursor:pointer;font-family:inherit;font-size:11.5px;color:var(--ink-soft);font-weight:600;transition:.12s}
.ract:hover{border-color:var(--cyan);color:var(--navy);box-shadow:0 2px 6px rgba(35,32,72,.06)}
.ract .ric{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--grey-light);font-size:15px}
.rec-secondary{display:flex;flex-wrap:wrap;gap:6px}
.rec-secondary .btn{padding:7px 12px;font-size:12.5px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.panel-h h3{margin:0}
.link-sm{background:none;border:none;color:var(--cyan);font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer;padding:0}
.link-sm:hover{text-decoration:underline}
.keyinfo .kv{padding:6px 0}
/* Sous-titres de regroupement dans le bloc « Informations » de la fiche compte */
.info-subh{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);
  font-weight:700;margin:16px 0 4px;padding-bottom:3px;border-bottom:1px solid var(--line)}
.info-subh:first-of-type{margin-top:4px}
/* Édition en ligne des infos clés (issue #8) */
.ikv{cursor:pointer;border-bottom:1px dashed transparent;border-radius:3px}
.li-icon-link{display:inline-flex;align-items:center;line-height:0;opacity:.9;transition:opacity .12s}
.li-icon-link:hover{opacity:1}
table.grid .li-icon-link svg{width:13px;height:13px;vertical-align:-2px}   /* #239 : icône plus discrète dans les listes */
.ikv:hover{border-bottom-color:var(--cyan);background:var(--hover)}
.ikv:focus{outline:none;border-bottom-color:var(--cyan)}
.ikv.editing{cursor:default;border-bottom-color:transparent;background:none}
.ikv-input{font-family:inherit;font-size:13.5px;padding:3px 6px;border:1px solid var(--cyan);border-radius:6px;
  color:var(--navy);background:var(--surface);max-width:170px}
.lc-badge{display:inline-block;background:#fde7d6;color:#b4610f;font-weight:600;font-size:12px;border-radius:6px;padding:2px 9px}
.rec-notes{margin-top:10px;font-size:13.5px;color:var(--navy);white-space:pre-wrap}

.rec-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.rtab{font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-soft);background:none;border:none;
  border-bottom:2px solid transparent;padding:10px 18px;margin-bottom:-1px;cursor:pointer}
.rtab:hover{color:var(--navy)}
.rtab.active{color:var(--navy);border-bottom-color:var(--cyan)}

/* #111 : titres de blocs plus visibles sur les fiches Contact & Compte */
.rec .panel > h3,
.rec .panel > .panel-h > h3{
  font-size:14px;color:var(--ink);font-weight:700;letter-spacing:.2px;
  text-transform:none;padding-bottom:8px;border-bottom:2px solid var(--line);
}
.rec .panel > h3{margin-bottom:12px}
.rec .panel.ai-card > h3,
.rec .panel.ai-card > .panel-h > h3{border-bottom-color:var(--cyan,#27BBE4)}

/* Colonne de droite : cartes d'associations */
.assoc .panel-h h3{font-size:13px}
.assoc-item{padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.assoc-item:last-child{border-bottom:none}
.assoc-item b{color:var(--navy)}
.assoc-item.lnk:hover b{color:var(--cyan);text-decoration:underline}
/* Lien vers Jira sur le titre du ticket (#164) : rendu clairement cliquable */
.jira-link b{color:var(--cyan)}
.jira-link:hover b{text-decoration:underline}
.assoc-empty{color:var(--ink-soft);font-size:13px;font-style:italic;padding:4px 0}

/* Timeline d'activités groupée */
.tl-sect{margin-bottom:20px}
.tl-lbl{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);margin-bottom:10px}
.tl-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.tl-card-h{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--navy)}
.tl-card-h b{font-weight:600}
.tl-ic{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--grey-light);display:flex;align-items:center;justify-content:center;font-size:14px}
.tl-when{margin-left:auto;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.tl-body{margin-top:6px;font-size:13.5px;color:var(--ink-soft);padding-left:34px;white-space:pre-wrap}
/* Interaction repliable : aperçu limité + fondu, « Déplier » pour tout voir */
.tl-body.tl-clamp{max-height:4.6em;overflow:hidden;position:relative}
.tl-body.tl-clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.8em;
  background:linear-gradient(transparent,var(--surface))}
.tl-body.tl-clamp.open{max-height:none}
.tl-body.tl-clamp.open::after{display:none}
.tl-more{display:inline-block;margin:2px 0 0 34px;font-size:12px;color:var(--cyan,#27BBE4);cursor:pointer;user-select:none}
.tl-more:hover{text-decoration:underline}
.tl-empty{color:var(--ink-soft);font-style:italic;padding:20px 0}

/* Ligne de liste entièrement cliquable (issue #3) */
tr.row-click{cursor:pointer}

/* Défilement infini (issue #4) */
.list-sentinel{height:24px}

/* Badge de comptage sur le lien Admin (demandes de propriété) */
.nav-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;
  background:var(--red);color:#fff;border-radius:9px;font-size:11px;font-weight:600;padding:0 5px;margin-left:2px}

/* Doublons (issue #2) */
.dupe-group{margin-bottom:14px}
.dupe-member{padding:8px 0;border-top:1px solid var(--line);font-size:14px;color:var(--navy)}
.dupe-member:first-of-type{border-top:none}
.dupe-member .lnk{cursor:pointer}
.dupe-member .lnk:hover{color:var(--cyan);text-decoration:underline}

/* Fusion de fiches (L13) */
.merge-results{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:8px}
.merge-item{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px;color:var(--navy)}
.merge-item:last-child{border-bottom:none}
.merge-item:hover{background:var(--hover)}

/* Blocs IA (L11) */
.ai-card{border:1px solid var(--line);background:var(--surface-2);border-left:3px solid #a06bd0}
.ai-card h3{color:#9a5fc4}
.ai-body{font-size:14px;line-height:1.5;color:var(--navy)}
.io-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.io-col{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.io-h{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);margin-bottom:8px}
.io-item{font-size:13px;color:var(--navy);padding:5px 0;border-bottom:1px solid var(--line)}
.io-item:last-child{border-bottom:none}
.io-item .tl-ic{width:20px;height:20px;font-size:12px;display:inline-flex;vertical-align:middle}
.io-msg{font-size:12.5px;color:var(--ink-soft);margin:4px 0 2px 26px;white-space:pre-wrap;word-break:break-word}
.fav{width:16px;height:16px;border-radius:3px;vertical-align:-3px;margin-right:6px;object-fit:contain}
/* Google Chat : rendu façon Chat (issue #53) */
.gchat-list{display:flex;flex-direction:column;gap:16px;max-height:360px;overflow:auto;padding:6px 2px}
.gchat-msg{display:flex;gap:10px;align-items:flex-start}
.gchat-av{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase}
.gchat-main{min-width:0;flex:1}
.gchat-head{display:flex;align-items:baseline;gap:8px;line-height:1.2;flex-wrap:wrap}
.gchat-name{font-weight:600;font-size:13.5px;color:var(--ink)}
.gchat-time{font-size:11.5px;color:var(--ink-soft)}
.gchat-text{font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;margin-top:3px;color:var(--ink)}
.gchat-empty{color:var(--ink-soft);font-size:13px;padding:6px 2px}
.gchat-compose{display:flex;gap:6px;align-items:flex-end;margin-top:14px;border:1px solid var(--line);border-radius:22px;padding:5px 5px 5px 15px;background:var(--surface)}
.gchat-compose:focus-within{border-color:var(--cyan)}
.gchat-input{flex:1;border:none;outline:none;resize:none;background:transparent;font-family:inherit;font-size:13.5px;line-height:1.4;max-height:120px;min-height:22px;padding:5px 0;color:var(--ink)}
.gchat-send{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;background:var(--cyan);color:var(--navy);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}
.gchat-send:disabled{opacity:.45;cursor:default}
.kc-chat{height:14px;width:auto;vertical-align:-2px;margin-left:6px;border-radius:2px}
/* Qualification BANT (fiche opportunité) */
.bant-grid{display:flex;flex-direction:column;gap:8px}
.bant-row{display:grid;grid-template-columns:150px 160px 1fr;gap:10px;align-items:center}
.bant-lab{font-size:13.5px;color:var(--ink)}
.bant-note{font-family:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);min-width:0}
.bant-note:focus{outline:none;border-color:var(--cyan)}
@media(max-width:640px){.bant-row{grid-template-columns:1fr;gap:4px}}
.bant-dots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.bant-dots .bd{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:4px;font-size:9.5px;font-weight:700;color:#fff;line-height:1}
.bd.na{background:#c2c8d0}
.bd.ko{background:#d6544c}
.bd.warn{background:#e8951a}
.bd.ok{background:#2aa775}
.row-name.is-client b{color:var(--green)}   /* issue #58 : clients repérables dans la liste */
.row-name.is-partner b{color:#8e44ad}       /* issue #61 : partenaires (violet, comme le badge) */
.row-name.is-out b{color:var(--red)}        /* exclu / a quitté : nom en rouge */
.lcard-name.is-out{color:var(--red)}
/* E-mail coloré selon le statut du contact (liste + cartes) */
.cell-mail.is-client{color:var(--green)}
.cell-mail.is-partner{color:#8e44ad}
.cell-mail.is-out{color:var(--red)}
.chip-x{margin-left:6px;cursor:pointer;color:var(--ink-soft);font-weight:700;font-size:11px}
.chip-x:hover{color:var(--red)}
.cell-mail{cursor:pointer}
.email-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.field textarea.email-body,.email-body{width:100%;min-height:260px;resize:vertical;font-family:inherit;font-size:14px;line-height:1.45;padding:10px;box-sizing:border-box}
.sig-preview{border:1px solid var(--line);border-radius:6px;padding:10px;background:#f7f9fc}
.deal-note-ta{width:100%;min-height:70px;resize:vertical;font-family:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;box-sizing:border-box}
.deal-note{margin-bottom:14px}
.t-body{font-size:13px;color:var(--ink-soft);margin:3px 0;white-space:pre-wrap;word-break:break-word}
.pick-row{padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}
.pick-row:hover{background:#f0f4f8}
/* Densité d'affichage par utilisateur (issue #52) : serré / normal (défaut) / large */
:root[data-density="serre"] table.grid td,:root[data-density="serre"] table.grid th{padding-top:5px;padding-bottom:5px}
:root[data-density="serre"] table.grid td{font-size:12.5px}
:root[data-density="serre"] .io-item,:root[data-density="serre"] .assoc-item,:root[data-density="serre"] .mini-list li{padding-top:3px;padding-bottom:3px;font-size:12.5px}
:root[data-density="large"] table.grid td,:root[data-density="large"] table.grid th{padding-top:16px;padding-bottom:16px}
:root[data-density="large"] table.grid td{font-size:15px}
:root[data-density="large"] .io-item,:root[data-density="large"] .assoc-item,:root[data-density="large"] .mini-list li{padding-top:11px;padding-bottom:11px;font-size:14.5px}
/* #165 : la densité agit aussi sur le menu de gauche (nav + logo + séparateurs). */
:root[data-density="serre"] .nav a{padding:6px 12px;gap:9px;font-size:13px}
:root[data-density="serre"] .nav-sep{margin:4px 10px}
:root[data-density="serre"] .logo{padding-bottom:12px}
:root[data-density="large"] .nav a{padding:13px 12px;font-size:15px}
:root[data-density="large"] .nav-sep{margin:12px 10px}
@media(max-width:1100px){.rec{grid-template-columns:1fr}.rec-right{order:3}.rec-below{grid-column:1;order:4}}
@media(max-width:720px){
  /* Menu mobile : sidebar en tiroir coulissant + hamburger (issue #59) */
  .app{display:block}
  .mobilebar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:45;background:var(--surface);border-bottom:1px solid var(--line);padding:9px 14px}
  .nav-toggle{font-size:22px;line-height:1;background:none;border:none;color:var(--navy);cursor:pointer;padding:2px 8px;border-radius:8px}
  .nav-toggle:active{background:var(--grey-light)}
  .mb-brand{display:flex;align-items:center;gap:8px}
  .mb-brand b{font-size:17px;color:var(--navy)}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:252px;max-width:82vw;z-index:60;transform:translateX(-100%);transition:transform .22s ease;box-shadow:2px 0 18px rgba(0,0,0,.18)}
  .app.nav-open .sidebar{transform:translateX(0)}
  .app.nav-open .nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:55}
  .main{padding:16px 14px 60px}
  h1,.page-head h1{font-size:21px}
  .card-surface{overflow-x:auto}          /* tables scrollables plutôt que rognées */
  .modal-overlay{padding:16px 10px}
  .modal{max-width:96vw}
  .modal-body{grid-template-columns:1fr}
  .ractions{grid-template-columns:repeat(6,1fr)}
  /* #181 : sur mobile, on replie les filtres derrière une bascule ; seule la
     recherche + le bouton « Filtres » restent visibles. */
  .toolbar-filters-toggle{display:inline-flex}
  /* replié : on masque tout sauf la recherche + la bascule (conditionné sur :not(.filters-open)
     pour ne pas battre en spécificité l'état déplié). */
  .toolbar:not(.filters-open) > *:not(.searchbox):not(.toolbar-filters-toggle){display:none}
  /* déplié : filtres empilés, pleine largeur, bascule en tête. */
  .toolbar.filters-open{flex-direction:column;align-items:stretch}
  .toolbar.filters-open > *{width:100%}
  .toolbar.filters-open > .toolbar-filters-toggle{order:-1}
}

/* Sélecteur de thème (issue #9)
   Le bloc tenait sur QUATRE lignes : un intitulé au-dessus de chaque menu déroulant,
   empilés. Or « Dense » et « Français » disent déjà de quoi il s'agit : les mots
   « Affichage » et « Langue » répétaient ce que la valeur montre. Ils restent dans le
   code pour les lecteurs d'écran et la traduction (classe `.sr-only`), et le pictogramme
   garde le repère visuel. Une ligne au lieu de quatre, ~60 px rendus au menu. */
.theme-pick{display:flex;gap:6px;align-items:center;padding:4px 8px 2px;font-size:12px;color:var(--ink-soft)}
.theme-pick label{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px}
.theme-pick select{font-family:inherit;font-size:12.5px;padding:5px 6px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--navy);width:100%;min-width:0;cursor:pointer}
/* Visible des seuls lecteurs d'écran : le texte existe, il ne prend pas de place. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Compteur de liste (issue #16) */
.list-count{font-size:16px;font-weight:500;color:var(--ink-soft)}

/* Zone de collage d'image -> contact (issue #12) */
.paste-zone{min-height:120px;border:2px dashed var(--line);border-radius:10px;padding:16px;
  background:var(--surface-2);color:var(--ink-soft);font-size:13px;text-align:center;outline:none}
.paste-zone:focus{border-color:var(--cyan)}
.paste-zone:empty:before{content:"📋 Cliquez ici puis Ctrl+V pour coller l'image";color:var(--ink-soft)}
.paste-zone img{max-width:100%;max-height:200px}

/* Mini-bouton d'action en ligne dans un tableau (issue #19) */
.mini-act{background:none;border:none;cursor:pointer;font-size:14px;padding:0 2px;opacity:.55}
.mini-act:hover{opacity:1}

/* Répartition par pays / région (issue #20) */
.country-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:inherit;font-size:12.5px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:16px;padding:4px 11px;cursor:pointer}
.chip b{color:var(--navy);font-weight:600}
.chip:hover{border-color:var(--cyan)}
.chip.on{background:rgba(39,187,228,.15);border-color:var(--cyan);color:var(--navy)}
/* #174 : bouton de filtre à bascule en état actif (ex. « Avec tél ») */
.btn-outline.on{background:rgba(39,187,228,.15);border-color:var(--cyan);color:var(--navy)}
/* #177 : posts LinkedIn + signal commercial sur la fiche contact */
.li-signal{background:#fff7e6;border:1px solid #f3d38a;border-radius:8px;padding:9px 11px;margin-bottom:10px}
.li-signal.seen{background:var(--surface-2);border-color:var(--line)}
.li-signal-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.li-signal-reason{font-size:13px;color:var(--navy)}
.li-signal-angle{font-size:12.5px;color:var(--ink-soft);margin-top:5px}
.li-post-list{list-style:none;margin:0;padding:0}
.li-post{font-size:13px;line-height:1.45;padding:8px 0;border-top:1px solid var(--line)}
.li-post:first-child{border-top:none}
button.mini{font:inherit;font-size:11.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--navy);border-radius:6px;padding:2px 8px;cursor:pointer}
button.mini:hover{border-color:var(--cyan)}

/* Choix des colonnes (issue #21) */
.col-opt{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:14px;color:var(--navy);cursor:pointer}
.col-opt input{width:16px;height:16px}

/* ===== Gamification (issue #71) ===== */
.gami-box{--gami-color:#27BBE4;display:flex;align-items:center;gap:9px;width:100%;margin:0 0 8px;padding:8px 10px;
  background:linear-gradient(120deg,rgba(39,187,228,.10),rgba(123,108,255,.10));border:1px solid var(--gami-color);
  border-radius:10px;cursor:pointer;text-align:left;color:inherit;font:inherit;transition:transform .1s,box-shadow .2s}
.gami-box:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(39,187,228,.25)}
.gami-emoji{font-size:22px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.gami-txt{display:flex;flex-direction:column;line-height:1.15}
.gami-txt b{font-size:14px}
.gami-lvl{font-size:11px;opacity:.7}
.gami-hero{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;color:#fff;
  background:linear-gradient(120deg,var(--gami-color),#232048)}
.gami-hero-emoji{font-size:46px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.gami-hero-lvl{font-size:17px;font-weight:600}
.gami-hero-total{font-size:14px;opacity:.9}
.gami-bar{height:10px;border-radius:6px;background:var(--grey-light,#e6ebf2);overflow:hidden;margin:12px 0 2px}
.gami-bar-fill{height:100%;border-radius:6px;transition:width .5s}
.gami-lb td{padding:6px 8px}
tr.gami-me{background:rgba(39,187,228,.12);font-weight:600}

/* Mini-jeu caché « aliens » */
#egg-overlay{position:fixed;inset:0;z-index:9999;overflow:hidden;
  background:linear-gradient(125deg,#12102b,#232048,#3a1d5c,#0b3550);background-size:400% 400%;
  animation:eggBg 6s ease infinite}
@keyframes eggBg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.egg-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 18px;color:#fff;font-weight:700;font-size:16px;text-shadow:0 1px 3px rgba(0,0,0,.5);z-index:2}
#egg-quit{background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer}
#egg-field{position:absolute;inset:0}
.egg-alien{position:absolute;background:none;border:none;cursor:pointer;line-height:1;padding:0;
  filter:drop-shadow(0 0 10px hsl(var(--hue,200) 90% 60%));animation:eggPop .18s ease}
.egg-alien:hover{transform:scale(1.15)}
@keyframes eggPop{from{transform:scale(0)}to{transform:scale(1)}}
.egg-pop{position:absolute;color:#3ddc84;font-weight:800;font-size:20px;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.5);animation:eggFloat .6s ease forwards}
@keyframes eggFloat{to{transform:translateY(-40px);opacity:0}}
.egg-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:13px}
.egg-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center}
.egg-end-emoji{font-size:70px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.egg-end h2{font-size:30px;margin:0}
.egg-earn{color:#3ddc84;font-size:18px;font-weight:700}

/* Open data (annuaire des entreprises) */
.od-card{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px}
.od-card .od-main{min-width:0}
.od-card b{color:var(--navy)}
.od-search{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.od-pick{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer;color:var(--navy)}
.od-pick:hover{border-color:var(--cyan);background:rgba(39,187,228,.06)}
#nc-od-results{max-height:220px;overflow:auto}

/* ---------- Séquences de prospection : page dédiée + éditeur IA (#85) ---------- */
.seq-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.seq-card{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:10px}
.seq-card.off{opacity:.62}
.seq-card-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14.5px}
.seq-flow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-height:26px}
.seq-dot{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 5px;border-radius:6px;background:rgba(0,168,130,.12);color:var(--green);font-size:12px;font-weight:600}
.seq-arrow{color:var(--ink-soft);font-size:11px}
.seq-card-f{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.btn-ai{background:linear-gradient(90deg,#27BBE4 0%,#00bfb3 100%);color:#fff;border:none}
.btn-ai:hover{filter:brightness(1.05)}
.btn-ai:disabled{opacity:.5;cursor:default;filter:none}
.seqe-modal .modal-body{padding-top:6px}
.seqe-active{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);margin:4px 0 10px}

/* #283 : édition d'une séquence en pleine page (au lieu d'une popup). */
.seqp{max-width:1100px;margin:0 auto}
.seqp-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 0 12px;margin-bottom:6px;background:var(--bg);border-bottom:1px solid var(--line)}
.seqp-title{flex:1;min-width:180px}
.seqp-title h1{margin:0;font-size:21px;line-height:1.2}
.seqp-actions{display:flex;gap:8px;align-items:center}
.seqp-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start;margin-top:8px}
.seqp-config{position:sticky;top:64px}
.seqp-config h3,.seqp-steps-h h3{margin:0 0 10px;font-size:15px}
.seqp-gen{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.seqp-gen label{font-size:13px;font-weight:600}
.seqp-gen textarea{width:100%;resize:vertical}
.seqp-steps-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.seqp-empty{border:1px dashed var(--line);border-radius:8px;padding:22px;text-align:center;font-size:13px}
@media (max-width:820px){.seqp-grid{grid-template-columns:1fr}.seqp-config{position:static}}
.seqe-genbar{display:flex;gap:8px;margin:0 0 14px}
.seqe-genbar input{flex:1;min-width:0}
.seqe-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.seqe-step{border:1px solid var(--line);border-left:3px solid var(--green);border-radius:8px;padding:10px;background:var(--bg)}
.seqe-step-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.seqe-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:600;flex:none}
.seqe-chips{display:flex;gap:5px;flex-wrap:wrap}
.seqe-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:16px;padding:3px 11px;font-size:12.5px;cursor:pointer}
.seqe-chip.on{background:rgba(0,168,130,.14);border-color:var(--green);color:var(--green);font-weight:600}
.seqe-day{font-size:12px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:4px}
.seqe-day input{width:56px}
.seqe-move{margin-left:auto;display:flex;gap:3px}
.seqe-ibtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:5px;width:26px;height:26px;cursor:pointer;font-size:11px;line-height:1}
.seqe-ibtn:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.seqe-ibtn:disabled{opacity:.35;cursor:default}
.seqe-ibtn.del:hover{border-color:#D6544C;color:#D6544C}
.seqe-step .se-subj,.seqe-step .se-body{width:100%;margin-bottom:6px}
.seqe-ai{display:flex;gap:6px;justify-content:flex-end}

/* ---------- « Voir en tant que » : bannière lecture seule (admin) ---------- */
.imp-banner{position:fixed;top:0;left:0;right:0;height:34px;z-index:3000;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 14px;background:linear-gradient(90deg,#b7791f 0%,#D6544C 100%);color:#fff;font-size:13px}
.imp-banner b{font-weight:600}
.imp-banner button{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:6px;padding:3px 11px;cursor:pointer;font-size:12.5px;font-weight:500}
.imp-banner button:hover{background:rgba(255,255,255,.34)}
body.imp-on .app{padding-top:34px}
body.imp-on .sidebar{top:34px;height:calc(100vh - 34px)}

/* ---------- Barre latérale : ligne profil (évite le débordement avec le toggle thème) ---------- */
.user{gap:6px}
.user > div:not(.avatar){flex:1 1 auto;min-width:0}
.user #user-name,.user #user-role{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.user .logout{flex-shrink:0;margin-left:0;font-size:16px;padding:3px 2px}

/* ---------- Alias de compte (rapprochement reporting #86) ---------- */
.alias-wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.alias-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(39,187,228,.12);color:#1596bd;border:1px solid rgba(39,187,228,.3);border-radius:16px;padding:4px 6px 4px 12px;font-size:12.5px;font-weight:500}
.alias-x{background:transparent;border:none;color:#1596bd;cursor:pointer;font-size:15px;line-height:1;padding:0 2px;opacity:.7}
.alias-x:hover{opacity:1;color:#c0392f}
/* #97 : bloc alias compact dans la colonne de gauche de la fiche compte */
.rec-aliases{margin-top:12px;padding:10px 12px;border:1px solid var(--line,#e2e8f0);border-radius:10px}
.rec-aliases-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#7b8494;font-weight:700;margin-bottom:8px}
.rec-aliases .alias-wrap{gap:5px}
.rec-aliases .alias-chip{font-size:11px;padding:2px 5px 2px 9px}
.rec-aliases .alias-x{font-size:13px}
.alias-addmini{background:transparent;border:1px solid var(--line,#e2e8f0);border-radius:6px;color:#1596bd;cursor:pointer;font-size:13px;line-height:1;padding:1px 7px;flex:none}
.alias-addmini:hover{border-color:#1596bd}

/* ---------- Playbook SDR : tiroir latéral droit, repliable (iframe /playbook) ---------- */
.pb-drawer{flex:0 0 auto;width:0;overflow:hidden;display:flex;flex-direction:column;
  background:var(--surface);transition:width .2s ease;
  position:sticky;top:0;height:100vh;max-height:100vh}   /* #245 : borné à l'écran -> assistant épinglé en bas */
.pb-drawer.open{width:min(480px,44vw);border-left:1px solid var(--line)}
.pb-drawer__head{flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.pb-drawer__title{font-weight:600;font-size:14px;white-space:nowrap;margin-right:auto;color:var(--ink)}
.pb-drawer__ic{background:transparent;border:none;cursor:pointer;color:var(--ink-soft);
  font-size:18px;line-height:1;text-decoration:none;padding:2px 7px;border-radius:5px}
.pb-drawer__ic:hover{background:var(--grey-light);color:var(--ink)}
.pb-drawer__frame{flex:1;min-height:0;width:100%;border:0;background:#fff}
/* #243 : assistant IA en bas du tiroir */
.pb-ai{flex:0 0 auto;border-top:1px solid var(--line);background:var(--bg,#f6f8fb);padding:8px 10px}
.pb-ai__answer{max-height:180px;overflow:auto;font-size:13px;line-height:1.5;white-space:pre-wrap;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.pb-ai__bar{display:flex;gap:6px}
.pb-ai__bar input{flex:1;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px}
.pb-ai__send{flex:0 0 auto;border:none;border-radius:8px;background:var(--cyan,#27BBE4);color:#fff;
  padding:0 13px;font-size:15px;cursor:pointer}
.pb-ai__send:disabled{opacity:.5;cursor:not-allowed}
.pb-backdrop{display:none}
/* Mobile / tablette : le tiroir passe en panneau superposé venant de la droite (slide),
   avec fond assombri tapable pour fermer. Plein écran sur téléphone. */
@media (max-width:960px){
  .pb-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);
    transform:translateX(100%);transition:transform .22s ease;z-index:70;
    box-shadow:-3px 0 22px rgba(0,0,0,.22)}
  .pb-drawer.open{transform:translateX(0)}
  .app.pb-open .pb-backdrop{display:block;position:fixed;inset:0;background:rgba(15,20,35,.42);z-index:69}
}
@media (max-width:560px){ .pb-drawer{width:100vw} }

/* ---------- #233 : filtre multivalué (bouton + panneau de cases) ---------- */
.msf{position:relative;display:inline-block}
.msf-mount{display:inline-block}
.msf-btn{cursor:pointer;white-space:nowrap}
.msf-btn.msf-on{border-color:var(--cyan,#27BBE4);color:var(--ink);font-weight:600}
.msf-clear{margin-left:3px;font-weight:700;opacity:.65;padding:0 3px;border-radius:3px;line-height:1}
.msf-clear:hover{opacity:1;background:var(--grey-light);color:var(--red)}
.msf-panel{position:absolute;left:0;top:calc(100% + 4px);z-index:40;min-width:190px;max-height:280px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(20,30,50,.14);padding:5px}
.msf-opt{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:6px;font-size:13px;cursor:pointer;white-space:nowrap}
.msf-opt:hover{background:var(--hover)}
.msf-opt input{cursor:pointer}

/* #255 : animation d'entrée du Plan du jour (1re ouverture du jour), ÉLÉMENT PAR
   ÉLÉMENT (titre, résumé, barres, en-têtes de groupe, cartes), en mouvement
   circulaire : chaque item apparaît en tournoyant puis se pose à sa place. */
@keyframes planItemIn{
  0%{opacity:0;transform:rotate(-210deg) scale(.25) translateY(26px)}
  55%{opacity:1;transform:rotate(9deg) scale(1.05)}
  78%{transform:rotate(-3deg) scale(.99)}
  100%{opacity:1;transform:none}
}
.plan-item-in{animation:planItemIn .9s cubic-bezier(.2,.75,.25,1.15) both;transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden}
@media (prefers-reduced-motion: reduce){.plan-item-in{animation:none}}

/* #280 : Plan du jour sur 2 colonnes (masonry responsive : 2 colonnes si l'écran est
   assez large, sinon 1 — via `columns: 2 340px`). Chaque section reste insécable. */
.plan-cols{columns:2 340px;column-gap:16px}
.plan-cols>*{break-inside:avoid;-webkit-column-break-inside:avoid;margin-top:0}
.plan-cols>.grp{margin:0 0 16px}

/* #286 : éditeur de devis en 2 colonnes — le devis (contraint en largeur) + notes internes à droite. */
.qe-layout{display:flex;gap:16px;align-items:flex-start}
.qe-layout .qdoc{flex:1 1 auto;min-width:0}
.qe-notes{flex:0 0 300px;padding:14px;position:sticky;top:16px;display:block}
.qe-notes-h{font-weight:600;font-size:13.5px;margin-bottom:8px}
.qe-notes-h .muted{font-weight:400;font-size:12px}
.qe-notes textarea{width:100%;min-height:260px;resize:vertical;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font:inherit;font-size:13.5px;line-height:1.5;background:#fffdf4;color:var(--ink)}
:root[data-theme="dark"] .qe-notes textarea{background:#2a2740}
@media (max-width:1100px){.qe-layout{flex-direction:column}.qe-notes{flex-basis:auto;width:100%;position:static}.qe-notes textarea{min-height:120px}}

/* #284 : pluie de tirs de blaster (lasers) plein écran pendant l'intro du Plan du jour. */
.laserfx{position:fixed;inset:0;pointer-events:none;z-index:1200;overflow:hidden}
.laserfx .bolt{position:absolute;width:130px;height:4px;border-radius:4px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--c,#ff3b3b) 30%,#fff 50%,var(--c,#ff3b3b) 70%,transparent);
  box-shadow:0 0 12px 2px var(--c,#ff3b3b);will-change:transform,opacity;
  transform:translate(0,0) rotate(var(--r,0deg));
  animation:boltfly var(--d,1s) linear forwards}
@keyframes boltfly{
  0%{opacity:0;transform:translate(0,0) rotate(var(--r,0deg))}
  10%{opacity:1}
  90%{opacity:1}
  100%{opacity:0;transform:translate(var(--x1,100vw),var(--y1,0)) rotate(var(--r,0deg))}}
@media (prefers-reduced-motion:reduce){.laserfx{display:none}}
/* #333 : overlay d'intro « trou noir » (Interstellar) — plein écran, fond noir spatial qui apparaît puis se fond. */
.bhfx{position:fixed;inset:0;pointer-events:none;z-index:1200;background:#03030a;opacity:0;animation:bhfade var(--d,5s) ease forwards}
.bhfx canvas{width:100%;height:100%;display:block}
@keyframes bhfade{0%{opacity:0}8%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.bhfx{display:none}}

/* Contacts : tiroir « Filtres » regroupés + pastilles de filtres actifs (Proposition 1). */
#adv-btn.has{border-color:var(--cyan);color:var(--cyan);font-weight:600}
#adv-btn.open{background:var(--surface-2)}
.adv-panel{margin:8px 0 4px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface)}
.adv-grp{margin-bottom:12px}
.adv-grp:last-child{margin-bottom:0}
.adv-grp-h{font-size:11px;color:var(--ink-soft);margin-bottom:7px;text-transform:uppercase;letter-spacing:.3px}
.adv-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adv-row .country-panel{margin-bottom:0;margin-top:8px;width:100%}
.active-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.active-chips:empty{margin:0}
.fchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 10px;border:1px solid var(--cyan);
  border-radius:14px;background:rgba(39,187,228,.10);color:var(--navy);cursor:pointer}
.fchip .fchip-x{font-weight:700;color:var(--ink-soft);font-size:13px}
.fchip:hover .fchip-x{color:var(--red)}

/* Fiche compte : accent couleur selon le statut (liseré + fond pastel). */
.rec-id[class*="rec-acc-"]{padding:10px 12px;border-radius:10px}
.rec-id.rec-acc-client{border-left:4px solid var(--green);background:rgba(0,168,130,.09)}
.rec-id.rec-acc-partner{border-left:4px solid #7a5cff;background:rgba(122,92,255,.11)}
.rec-id.rec-acc-out{border-left:4px solid var(--red);background:rgba(226,75,74,.09)}
/* « Interactions récentes » : titre de chaque interaction plus lisible. */
.io-head{line-height:1.5}
.io-title{font-weight:600;color:var(--ink);font-size:13.5px}
.io-when{white-space:nowrap}

/* ---- #356 : envois d'e-mails programmés (bandeau sur la fiche contact) ---- */
.em-sched{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.em-sched-item{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  background:rgba(230,165,52,.14);color:#b7791f;border-radius:7px;padding:3px 8px}
.em-sched-item .mini{border-color:transparent;background:transparent;color:inherit}

/* ---- #355 : ordre du menu, rangé à la souris par chaque utilisateur -------- */
.nav-tools{display:flex;flex-direction:column;gap:4px;padding:4px 10px 0}
.nav-reorder{font:inherit;font-size:12px;color:var(--ink-soft);background:none;border:0;
  text-align:left;padding:4px 2px;cursor:pointer;border-radius:6px}
.nav-reorder:hover{color:var(--navy);background:var(--grey-light)}
.nav-reset{color:#c0392f}
/* Mode rangement : les entrées se saisissent, et un clic ne navigue plus. */
.nav.reordering a[data-route]{cursor:grab;outline:1px dashed var(--line);outline-offset:-2px}
.nav.reordering a[data-route]:active{cursor:grabbing}
/* L'entrée déplacée reste visible et suit le curseur : c'est elle qui montre la position
   d'arrivée, il n'y a donc pas de trait d'insertion à interpréter. */
.nav a.nav-dragging{opacity:.5;background:rgba(39,187,228,.14)}
/* Un séparateur devient saisissable en mode rangement : barre étiquetée au lieu d'un
   trait de 1 px, avec les mêmes flèches et une croix pour le retirer. */
.nav.reordering .nav-sep{height:auto;background:none;margin:4px 10px;padding:3px 8px;
  display:flex;align-items:center;gap:6px;border:1px dashed var(--line);border-radius:7px;cursor:grab}
.nav.reordering .nav-sep:active{cursor:grabbing}
.nav-sep-lbl{font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft)}
.nav-sep-del{font:inherit;font-size:10px;line-height:1;padding:3px 5px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:#c0392f;border-radius:5px}
.nav-sep-del:hover{border-color:#c0392f}

/* Flèches ▲▼ : le rangement au clic, pour qui ne veut pas glisser. */
.nav-move{margin-left:auto;display:inline-flex;gap:2px}
.nav-move button{font:inherit;font-size:10px;line-height:1;padding:3px 5px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:5px}
.nav-move button:hover{border-color:var(--cyan);color:var(--navy)}

/* ---- #346 : ordre des colonnes changé à la souris (en-têtes de liste) ------ */
/* Le curseur dit que l'en-tête se saisit ; le tri au clic reste disponible. */
.th-move{cursor:grab}
.th-move:active{cursor:grabbing}
.col-dragging{opacity:.45}
/* Trait d'insertion : la colonne atterrira de ce côté-là. */
.col-drop-l{box-shadow:inset 3px 0 0 0 var(--cyan)}
.col-drop-r{box-shadow:inset -3px 0 0 0 var(--cyan)}

/* ---- #333 : suggestion de destinataires dans la rédaction compta@ --------- */
.cm-pick{position:relative;display:flex;gap:6px;align-items:center}
.cm-pick > input{flex:1;min-width:0}
.cm-sug{position:absolute;top:100%;left:0;right:0;z-index:40;margin-top:3px;max-height:230px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 26px rgba(35,32,72,.16)}
.cm-sug-it{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;background:none;border:0;
  border-bottom:1px solid var(--line);padding:6px 9px;cursor:pointer;color:var(--ink)}
.cm-sug-it:last-child{border-bottom:0}
.cm-sug-it:hover{background:var(--surface-2)}
.cm-sug-empty{padding:8px 9px;font-size:12.5px;color:var(--ink-soft)}

/* ---- Page Documents : vue « Cartes » (une vignette par document) ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px;margin-top:2px}
.doc-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}
.doc-card:hover{box-shadow:0 8px 22px rgba(35,32,72,.13);border-color:var(--cyan);transform:translateY(-3px)}
.doc-thumb{position:relative;display:block;aspect-ratio:4/3;background:var(--surface-2);border-bottom:1px solid var(--line);overflow:hidden}
.doc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Sans vignette : grande icône du type de fichier (data-ph), pour rester repérable. */
.doc-thumb.no-img::before{content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:44px;opacity:.55}
.doc-kind{position:absolute;left:6px;bottom:6px;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  background:rgba(20,22,40,.72);color:#fff;border-radius:5px;padding:2px 6px}
.doc-body{padding:9px 11px 11px;display:flex;flex-direction:column;gap:3px;flex:1}
.doc-name{font-weight:600;color:var(--navy);font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.doc-sub{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-stats{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;margin-top:4px}
.doc-acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:9px}
label.mini{font:inherit;font-size:11.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--navy);
  border-radius:6px;padding:2px 8px;cursor:pointer}
label.mini:hover{border-color:var(--cyan)}

/* #334 : citation d'un e-mail (le message d'origine, déjà archivé) repliée par défaut. */
.io-quoted-wrap{margin:2px 0 2px 26px}
/* Dans le fil d'opportunité, le corps n'est pas décalé : la citation suit l'alignement. */
.timeline .io-quoted-wrap{margin-left:0}
.io-quoted{font-size:12px;color:var(--ink-soft);white-space:pre-wrap;word-break:break-word;
  border-left:2px solid var(--line);padding-left:8px;margin-top:4px;opacity:.85}

/* #365 : disposition des blocs de la page Opportunité, propre à chaque utilisateur.
   Deux COLONNES RÉELLES (deux piles indépendantes), pas une grille à deux colonnes : une
   grille aligne les lignes, donc deux blocs côte à côte de hauteurs différentes laissaient
   sous le plus court un trou de la hauteur de l'autre. Ici chaque colonne se remplit pour
   son compte et les blocs se suivent au plus près.
   Un bloc en pleine largeur coupe la page : ce qui suit repart sur une nouvelle paire. */
.dl-grid{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.dl-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.dl-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.dl-block{min-width:0}                       /* sinon un tableau large déborde de sa colonne */
.dl-block > .panel{margin-top:0}             /* c'est la disposition qui espace, plus les blocs */
/* Barre de placement : invisible hors du mode disposition, pour ne rien ajouter à la
   page de tous les jours. */
.dl-tools{display:none}
.dl-editing .dl-block{outline:1px dashed var(--line);outline-offset:3px;border-radius:12px}
.dl-editing .dl-tools{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.dl-name{font-size:12px;font-weight:700;color:var(--ink-soft);margin-right:auto;
  text-transform:uppercase;letter-spacing:.3px}
.dl-pos{font:inherit;font-size:11.5px;font-weight:600;border:1px solid var(--line);
  background:var(--surface);color:var(--navy);border-radius:6px;padding:2px 8px;cursor:pointer}
.dl-pos:hover{border-color:var(--cyan)}
.dl-pos.on{background:linear-gradient(135deg,#27BBE4 0%,#00bfb3 100%);border-color:transparent;color:#fff}
@media(max-width:820px){
  /* Une seule colonne : la disposition choisie n'a plus de sens, tout s'empile. */
  .dl-row{grid-template-columns:1fr}
}

/* #367 : les blocs « Interactions » (fiche contact, fiche compte, opportunité, plan du
   jour) portent un fond teinté pour se repérer d'un coup d'œil au milieu des panneaux.
   La teinte est posée EN SURIMPRESSION du fond courant, pas en couleur fixe : elle suit
   donc les trois thèmes (clair, sombre, nuit) sans avoir à être redéfinie pour chacun. */
.panel-inter,.grp-inter{
  background:linear-gradient(0deg,rgba(39,187,228,.09),rgba(39,187,228,.09)),var(--surface);
  border-left:3px solid var(--cyan,#27BBE4)}
/* Dans le Plan du jour, une section n'a ni fond ni cadre : il lui faut donc son propre
   creux, sans quoi la teinte collerait au texte. */
.grp-inter{border-radius:12px;padding:12px 14px}
.grp-inter .grp-h{margin-bottom:8px}

/* ---- Espace Sécurité (portage de Grex) ------------------------------------
   Classes préfixées `secu-` : Grex utilisait des noms très génériques (.card,
   .chip, .badge, .stat) qui existent déjà ici avec un autre rendu. */
.secu-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.secu-chip{font:inherit;font-size:12.5px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.secu-chip:hover{background:var(--hover)}
.secu-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.secu-chip .n{font-size:11px;opacity:.7}
.secu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.secu-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;
  display:flex;flex-direction:column;gap:8px}
.secu-card:hover{border-color:var(--cyan);background:var(--hover)}
.secu-card__q{font-weight:600;font-size:14px;line-height:1.35}
/* La réponse est bornée à 4 lignes : une carte de la hauteur d'un écran rendrait
   la grille illisible, le détail s'ouvre au clic. */
.secu-card__a{font-size:13px;color:var(--ink-soft);line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;
  -webkit-box-orient:vertical;overflow:hidden}
.secu-card__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;margin-top:auto}
.secu-badge{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--grey-light);color:var(--ink-soft)}
.secu-badge.ok{background:rgba(0,168,130,.14);color:var(--green)}
.secu-badge.wait{background:rgba(39,187,228,.16);color:#1a86a5}
.secu-badge.bad{background:rgba(214,84,76,.14);color:var(--red)}
.secu-late{color:var(--red);font-weight:500}
.secu-excerpt{max-height:220px;overflow:auto;margin:6px 0 0;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:1.5;white-space:pre-wrap;color:var(--ink-soft)}
/* Questions d'un questionnaire client (une carte par question) */
.secu-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px}
.secu-item__q{font-weight:600;font-size:14px;line-height:1.4}
.secu-item__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;margin:8px 0}
.secu-item__a{width:100%;font-family:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;color:var(--navy);background:var(--surface);resize:vertical;line-height:1.5}
.secu-item__a:focus{outline:none;border-color:var(--cyan)}
.secu-item__act{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* Paires extraites d'un questionnaire rempli, à cocher avant de verser dans la base */
.secu-xlist{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.secu-xpair{display:flex;gap:10px;padding:9px 11px;border-bottom:1px solid var(--line);font-size:13px;
  line-height:1.45;cursor:pointer}
.secu-xpair:last-child{border-bottom:none}
.secu-xpair:hover{background:var(--hover)}
.secu-xpair input{width:auto;margin-top:3px;flex:0 0 auto}
/* Tableau de bord Sécurité : tuiles de chiffres et colonnes de panneaux */
.secu-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.secu-tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.secu-tile .n{font-size:24px;font-weight:600;line-height:1.1;color:var(--navy)}
.secu-tile .l{font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.3}
.secu-tile.ok .n{color:var(--green)}
.secu-tile.wait .n{color:#1a86a5}
.secu-tile.bad .n{color:var(--red)}
.secu-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start}
/* Bandeau d'information de l'espace Sécurité (ex. annuaire non raccordé) : informe
   sans masquer le contenu déjà présent. */
.secu-avis{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:8px;padding:10px 12px;margin:0 0 12px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.secu-avis code{font-size:12px}
/* Lien vers le document d'une procédure, posé à côté du titre : au bout de la ligne il
   sortait de l'écran dès que le tableau dépassait la largeur du volet. */
.secu-lien{text-decoration:none;opacity:.75;font-size:13px}
.secu-lien:hover{opacity:1}

/* ---- Helpdesk : liste des tickets support (#585) ---------------------------
   La liste empilait des lignes séparées par un simple filet, où le client, l'état,
   le responsable, le demandeur et la date se suivaient tous derrière des « · » :
   rien ne ressortait au balayage. Chaque ticket devient une carte, avec un liseré
   coloré par état, des méta étiquetées et ses actions regroupées en bas. */
.hd-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Les titres de panneau sont en capitales (.panel h3) : le compteur, lui, se lit en clair. */
.hd-count{font-weight:400;font-size:12px;text-transform:none;letter-spacing:0;color:var(--ink-soft)}
/* Deux colonnes : les en-tetes de groupe, le vide et les erreurs prennent la
   largeur entiere, seules les cartes se repartissent. Sous 1000 px la place
   manque pour deux sujets de ticket cote a cote, on repasse sur une colonne. */
.hd-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hd-list > :not(.hd-tk){grid-column:1/-1}
@media(max-width:1000px){.hd-list{grid-template-columns:1fr}}
.hd-tk{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--grey-mid);
  border-radius:10px;padding:11px 13px;display:flex;flex-direction:column}
.hd-tk:hover{background:var(--hover)}
.hd-tk[data-tone="amber"]{border-left-color:#e6a534}
.hd-tk[data-tone="red"]{border-left-color:var(--red)}
.hd-tk[data-tone="blue"]{border-left-color:var(--cyan)}
.hd-tk[data-tone="green"]{border-left-color:var(--green)}
.hd-tk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hd-tk-t{font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);text-decoration:none}
.hd-tk-t:hover{text-decoration:underline}
.hd-tk-n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ink-soft);margin-right:6px}
.hd-tk-badges{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;flex:none}
/* Méta étiquetées : l'étiquette en petit, la valeur en pleine encre, pour distinguer
   d'un coup d'œil le responsable du demandeur (les deux sont des noms de personne). */
.hd-tk-meta{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:12.5px;color:var(--ink);margin-top:6px}
.hd-tk-meta .m{display:inline-flex;align-items:baseline;gap:5px}
.hd-tk-meta .m i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft)}
.hd-tk-meta .age{color:var(--ink-soft)}
/* « Non lié » / « Non assigné » sont des absences : elles ne doivent pas peser
   autant qu'un vrai nom de client ou de responsable. */
.hd-tk-meta .m.none{color:var(--ink-soft);font-style:italic}
.hd-tk-msg{margin-top:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.hd-tk-msg-h{font-size:11px;color:var(--ink-soft);margin-bottom:3px}
.hd-tk-msg-h b{color:var(--ink);font-weight:600}
.hd-tk-msg-x{white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hd-tk-msg.open .hd-tk-msg-x{display:block;overflow:visible}
.hd-tk-msg-more{font-size:11px;font-weight:600;color:var(--cyan);margin-top:4px}
.hd-tk-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.hd-act{font:inherit;font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-soft);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.hd-act:hover{background:var(--grey-light);border-color:var(--grey-mid);color:var(--ink)}
.hd-act.warn{background:#fff8e6;border-color:#f0d48a;color:#b7791f}
/* Le ticket dev (Jira) : repere visuel distinct des actions, c'est un LIEN vers
   un autre outil et non une action sur le ticket de support. */
.hd-act.jira{background:rgba(42,95,255,.08);border-color:rgba(42,95,255,.28);color:#2a5fff;font-weight:600}
.hd-act.jira:hover{background:rgba(42,95,255,.16);color:#2a5fff}
/* L'etat du ticket dev se voit sans ouvrir Jira : livre (vert), abandonne (gris).
   « Annule » porte une resolution mais n'est pas un travail livre : le peindre en
   vert ferait croire l'escalade traitee. */
.hd-act.jira.fini{background:rgba(0,168,130,.12);border-color:rgba(0,168,130,.35);color:#08795f}
.hd-act.jira.fini:hover{background:rgba(0,168,130,.22);color:#08795f}
/* Aucun ticket dev encore lie : gris, comme les autres actions. Le bleu et le vert
   sont reserves aux pastilles qui MENENT quelque part. */
.hd-act.jira.vide{background:var(--grey-light);border-color:var(--line);color:var(--ink-soft);font-weight:400}
.hd-act.jira.vide:hover{background:var(--grey-mid);color:var(--ink)}
.hd-act.jira.annule{background:var(--grey-light);border-color:var(--grey-mid);color:var(--ink-soft);text-decoration:line-through}
.hd-act.jira.annule:hover{color:var(--ink)}
.hd-act.jira-off{padding:4px 7px;color:var(--ink-soft)}
/* Une action qui a deja quelque chose a montrer (des commentaires) se distingue
   de celle qui ouvre une page vide. */
.hd-act.on{background:rgba(124,77,255,.10);border-color:rgba(124,77,255,.30);color:#6b46c1;font-weight:600}
.hd-act.on:hover{background:rgba(124,77,255,.18);color:#6b46c1}
/* Fil des commentaires internes d'un ticket */
.hd-comm{border-left:2px solid var(--line);padding:2px 0 8px 10px;margin-bottom:8px}
.hd-comm-h{display:flex;align-items:baseline;gap:8px;font-size:12px;margin-bottom:3px}
.hd-comm-b{font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.hd-grp{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.hd-list > .hd-grp:first-child{margin-top:2px}
.hd-grp .n{font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--grey-light);
  border-radius:999px;padding:1px 9px}
.hd-empty{padding:18px 0;text-align:center;color:var(--ink-soft);font-size:13px}
@media(max-width:700px){
  .hd-tk-top{flex-direction:column}
  .hd-tk-badges{justify-content:flex-start}
}

/* Suivi hebdo des projets : la ligne se lit et se remplit sans quitter le tableau. */
.hb-grid td{vertical-align:top}
.hb-txt{width:100%;min-width:180px;min-height:46px;resize:vertical;border:1px solid var(--line);
  border-radius:6px;padding:5px 7px;font:inherit;font-size:12.5px;background:var(--surface);color:inherit}
.hb-txt:focus{outline:none;border-color:#27BBE4;box-shadow:0 0 0 2px rgba(39,187,228,.15)}
.hb-task{display:flex;gap:6px;align-items:flex-start;font-size:12px;margin-bottom:3px;line-height:1.35}
.hb-task input{width:auto;margin-top:2px;flex:0 0 auto}
.hb-raf{width:74px;text-align:right;border:1px solid var(--line);border-radius:6px;
  padding:4px 6px;font:inherit;font-size:12.5px;background:var(--surface);color:inherit}
.hb-raf:focus{outline:none;border-color:#27BBE4;box-shadow:0 0 0 2px rgba(39,187,228,.15)}
.hb-pill{cursor:pointer}
.hb-pill:hover{filter:brightness(.94)}
.hb-rappel{margin-top:3px;font-size:10.5px;line-height:1.35;color:var(--ink-soft,#64748b);
  border-left:2px solid var(--line);padding-left:6px;white-space:pre-wrap;max-height:44px;overflow:auto}

/* ---- Éditeur enrichi du corps d'un e-mail -------------------------------- */
/* La barre est fine et sans étiquette : elle doit se faire oublier au profit du texte. */
.rich-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px 5px;
  border:1px solid var(--line,#e2e8f0);border-bottom:none;border-radius:8px 8px 0 0;
  background:var(--bg-soft,#f7f9fc)}
.rich-b{border:1px solid transparent;background:none;border-radius:6px;cursor:pointer;
  padding:2px 7px;font-size:13.5px;line-height:1.5;color:var(--ink,#1f2937);min-width:26px}
.rich-b:hover{background:var(--card,#fff);border-color:var(--line,#e2e8f0)}
.rich-b:active{transform:translateY(1px)}
.rich-sw{width:15px;height:15px;border-radius:50%;border:1px solid rgba(120,130,150,.4);
  cursor:pointer;padding:0;margin:0 1px}
.rich-sw:hover{outline:2px solid rgba(39,187,228,.45);outline-offset:1px}
.rich-sep{width:1px;height:17px;background:var(--line,#e2e8f0);margin:0 4px}
.rich-lbl{font-size:11.5px;color:var(--ink-soft,#64748b);margin:0 3px 0 1px}
.rich-ed{width:100%;min-height:260px;max-height:46vh;overflow:auto;box-sizing:border-box;
  padding:10px;border:1px solid var(--line,#e2e8f0);border-radius:0 0 8px 8px;
  background:var(--card,#fff);color:var(--ink,#1f2937);
  font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}
.rich-ed:focus{outline:none;border-color:#27BBE4;box-shadow:0 0 0 2px rgba(39,187,228,.15)}
/* Ce que l'on voit ici doit ressembler à ce qui part : mêmes marges qu'un client mail. */
.rich-ed p,.rich-ed div{margin:0 0 2px}
.rich-ed h1,.rich-ed h2,.rich-ed h3,.rich-ed h4{margin:10px 0 4px;line-height:1.25}
.rich-ed h3{font-size:16px}
.rich-ed ul,.rich-ed ol{margin:4px 0 4px 22px;padding:0}
.rich-ed blockquote{margin:6px 0;padding:2px 0 2px 10px;border-left:3px solid var(--line,#e2e8f0);
  color:var(--ink-soft,#64748b)}
.rich-ed a{color:#1596bd}
.rich-ed:empty::before{content:attr(data-vide);color:var(--ink-soft,#94a3b8)}

/* ---------- Mon accès Claude (clé MCP) ---------- */
/* Les jetons du thème, pas des littéraux : la page existe en clair, sombre et nuit. */
.mcp-url, .mcp-secret {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 4px; padding: 4px 8px; font-size: 13px; overflow-wrap: anywhere;
}
.mcp-secret { display: inline-block; margin-top: 4px; font-size: 12.5px; }
.summary-box.mcp-cle { display: block; border-left: 3px solid #00a882; margin: 4px 0 12px; }
.mcp-liste { margin: 6px 0 16px; padding-left: 20px; font-size: 14px; }
.mcp-liste li { margin: 4px 0; }
.mcp-liste li::marker { color: #00a882; }
.mcp-liste.mcp-non li::marker { color: #D6544C; }

/* ---- Configurateur VisionFab (grille tarifaire) ------------------------- */
/* Les paliers sont des boutons et non des cartes decoratives : on en choisit UN,
   et l'etat choisi doit se lire au premier coup d'oeil. */
.vf-paliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 760px) { .vf-paliers { grid-template-columns: 1fr; } }
.vf-palier { display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 12px 14px; text-align: left; cursor: pointer; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--navy); font: inherit; }
.vf-palier:hover { background: var(--hover); }
.vf-palier.actif { border-color: #00a882; box-shadow: inset 0 0 0 1px #00a882; }
.vf-palier b { font-size: 15px; }
.vf-palier .muted { font-size: 12px; }

.vf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 760px) { .vf-duo { grid-template-columns: 1fr; } }

.vf-option { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px;
  align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.vf-option:last-child { border-bottom: none; }
.vf-opt-nom { color: var(--navy); }
/* Une option que le document de cadrage mentionne SANS prix : visible, mais pas
   selectionnable. La masquer laisserait croire qu'elle n'existe pas. */
.vf-sansprix { opacity: .6; }

.vf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vf-total td { border-top: 1px solid var(--line); }

/* Le message qui dit « ce prix n'est pas valide » : il doit arreter l'oeil, parce
   qu'il empeche de chiffrer. */
.vf-bloquant { border-left: 3px solid #D6544C; background: var(--bg-soft);
  padding: 10px 12px; border-radius: 6px; font-size: 13px; color: var(--navy);
  margin-bottom: 12px; }

/* Un AVERTISSEMENT, pas un blocage : le devis se cree, seul l'export Odoo attendra.
   Couleur distincte de .vf-bloquant pour que les deux ne se confondent pas. */
.vf-avertit { border-left: 3px solid #27BBE4; background: var(--bg-soft);
  padding: 10px 12px; border-radius: 6px; font-size: 13px; color: var(--navy);
  margin-top: 12px; }

/* « reserve aux profils techniques » : une precision de PUBLIC, pas une alerte. Discrete,
   mais lisible, parce qu'elle evite de proposer ce mode a une equipe metier. */
.vf-reserve { font-style: italic; font-size: 11.5px; }