/* ============================================================
COM AND SEE · plateforme outils — système de design partagé
Base : les tokens de l'outil Publications (couleurs, tailles,
typographie). Tout module doit s'appuyer sur ces variables.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
:root{
--bg:#F2F4F7; --surface:#FFFFFF; --surface-2:#E9EDF2;
--ink:#1B2430; --ink-2:#5A6675; --ink-3:#8B95A3;
--line:#D8DEE6;
--accent:#2743CF; --accent-soft:#E4E8FB; --accent-ink:#1D33A8;
/* Fixe, jamais redéfini en mode sombre : un badge/bouton à fond plein +
texte blanc a besoin d'un bleu suffisamment saturé pour rester lisible,
contrairement à --accent (éclairci en sombre pour les liens/bordures sur
fond sombre, ce qui casse le contraste une fois réutilisé en fond plein
avec du texte blanc — mesuré à 2,9:1 au lieu de 7,5:1, signalé par Julien
le 18/09/2026 sur .pill-attention). */
--accent-fill:#2743CF; --accent-fill-hover:#1D33A8;
--ok:#1B7A4E; --ok-soft:#DDF0E5; --ok-dot:#3ECE8B;
--warn:#FF6A00; --warn-soft:#FFE7D1;
/* Couleur propre à la campagne « Visuel » : un marron, distinct de l'orange
des états « en attente », qu'il faisait confondre (Julien, 22/09/2026). */
--camp-visuel:#8A5524;
--bad:#B0392E; --bad-soft:#F7E1DE; --bad-strong:#7A1F17;
--info:#6D3FD9; --info-soft:#EDE7FB;
--teal:#0E7C86; --teal-soft:#DCEEF0;
/* Statuts : « Froid / sans suite » en bleu glacé, « Ne répond pas » en bleu
foncé (Julien, 28/09/2026). La palette n'avait ni l'un ni l'autre. */
--glace:#1F5B7A; --glace-soft:#E1EFF7;
--marine:#1F4E79; --marine-soft:#DEE9F3;
--shadow:0 1px 2px rgba(27,36,48,.06),0 8px 24px rgba(27,36,48,.05);
--radius:11px; --radius-s:8px;
--font:"Avenir Next","Helvetica Neue",system-ui,sans-serif;
--font-title:"Bricolage Grotesque","Avenir Next","Helvetica Neue",system-ui,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
html:not(.light){
--bg:#141920; --surface:#1D242E; --surface-2:#242D39;
--ink:#E8ECF1; --ink-2:#9AA5B3; --ink-3:#6C7684;
--line:#303A47;
--accent:#7C90F5; --accent-soft:#2A3355; --accent-ink:#A9B7FA;
--ok:#5BC48E; --ok-soft:#1E3A2C; --ok-dot:#4EDC9B;
--warn:#FF8A3D; --warn-soft:#3D2008;
--camp-visuel:#B07A45;
--bad:#E58579; --bad-soft:#42221E; --bad-strong:#FF6B57;
--info:#B49BF5; --info-soft:#2E2647;
--teal:#4FC3D0; --teal-soft:#173A3D;
--glace:#8FC4DE; --glace-soft:#16303D;
--marine:#8AAFD4; --marine-soft:#152941;
--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
}
html.dark{
--bg:#141920; --surface:#1D242E; --surface-2:#242D39;
--ink:#E8ECF1; --ink-2:#9AA5B3; --ink-3:#6C7684;
--line:#303A47;
--accent:#7C90F5; --accent-soft:#2A3355; --accent-ink:#A9B7FA;
--ok:#5BC48E; --ok-soft:#1E3A2C; --ok-dot:#4EDC9B;
--warn:#FF8A3D; --warn-soft:#3D2008;
--camp-visuel:#B07A45;
--bad:#E58579; --bad-soft:#42221E; --bad-strong:#FF6B57;
--info:#B49BF5; --info-soft:#2E2647;
--teal:#4FC3D0; --teal-soft:#173A3D;
--glace:#8FC4DE; --glace-soft:#16303D;
--marine:#8AAFD4; --marine-soft:#152941;
--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
/* `hidden` doit l'emporter : .btn et consorts déclarent un display et
écrasaient l'attribut, si bien qu'un bouton marqué caché restait visible
(constaté le 22/09/2026 sur « Copier le texte »). */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-title)}
a{color:var(--accent)}
.app{display:flex;min-height:100vh}
svg.i{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ── Colonne contextuelle (niveau 2) ── */
.ctx{width:216px;flex:none;background:var(--surface);border-right:1px solid var(--line);
padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;
overflow:hidden;
transition:width .18s ease,padding .18s ease}
.ctx.folded{width:34px;padding:20px 0;overflow:hidden}
.ctx.folded h2,.ctx.folded .ctx-nav,.ctx.folded .ctx-foot{display:none}
/* Gestion de projet ajoute un second niveau (@stack('ctx-extra')) qui n'existait
pas quand cette règle a été écrite : sans lui, le groupe et ses vues restent
affichés, coupés, dans les 34px repliés (signalé par Julien le 18/09/2026). */
.ctx.folded .sp-ctx-group,.ctx.folded .sp-ctx-sub{display:none}
/* le titre du module s'aligne sur la ligne du monogramme C&S du rail :
20px (padding .ctx) + 4px (gap) - 4px (margin) = 20px, hauteur de ligne identique. */
.ctx h2{font-weight:800;letter-spacing:.14em;font-size:12px;line-height:18px;text-transform:uppercase;padding:0 10px;margin:-4px 0 14px}
/* « Plier » / « Déplier » : un texte cliquable aligné à droite, juste sous la
poignée du rail (Julien, 25/09/2026). Discret comme « Ajouter une base », il
annonce ce que le clic va faire. */
.ctx-plier{all:unset;align-self:flex-end;margin:-6px 10px 6px;color:var(--ink-3);
font-weight:600;font-size:11.5px;cursor:pointer}
.ctx-plier:hover{color:var(--accent-ink);text-decoration:underline}
.ctx-plier:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.ctx.folded .ctx-plier{display:none}
/* Toutes les bases dépliées, la liste dépassait la hauteur de l'écran et son bas
devenait inatteignable : la colonne fait 100vh, rien n'y défilait (Julien,
28/09/2026). C'est ICI que le défilement doit vivre, pour que le titre du
module et le pied de colonne restent en place. */
.ctx-nav{display:flex;flex-direction:column;gap:2px;
flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.ctx-nav::-webkit-scrollbar{width:6px}
.ctx-nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ctx-nav::-webkit-scrollbar-track{background:transparent}
.ctx-item{padding:8px 10px;border-radius:var(--radius-s);color:var(--ink-2);font-weight:600;font-size:13px;text-decoration:none}
.ctx-item:hover{background:var(--surface-2)}
.ctx-item.active{background:var(--accent-soft);color:var(--accent-ink)}
.ctx-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Module Bd (23/09/2026) : la colonne liste des BASES, chacune dépliant ses
sous-onglets. La base de la page ouverte est dépliée ; les autres se replient
et l'état se mémorise (voir layouts/app.blade.php). Le liseré à gauche des
sous-onglets reprend celui du second niveau de Gestion de projet, pour que
les deux modules se lisent pareil. */
/* Hiérarchie resserrée sur trois niveaux (Julien, 23/09/2026) : le nom de
l'outil en tête, la base en dessous, ses sous-onglets rattachés par un filet
qui descend de la flèche.
Alignement : la flèche est posée à 10 px, le filet descend donc pile sous
elle, et 6 px + les 10 px du .ctx-item ramènent le texte des sous-onglets à
28 px, exactement là où commence le nom de la base après sa flèche. Les deux
niveaux s'alignent : le filet dit l'appartenance, un décalage en plus ne
ferait que grignoter la largeur utile d'une colonne de 216 px. */
.ctx-base{display:flex;flex-direction:column;gap:1px}
.ctx-base+.ctx-base{margin-top:2px}
/* Plus léger que le titre du module au-dessus : c'est ce qui distingue le
niveau 1 du niveau 2, sans ajouter de décoration. */
/* Un nom de base est un NOM PROPRE, pas une étiquette de section : ni
majuscules forcées, ni interlettrage, ni corps de 11 px. « Test 25/09 :
Imagerie médicale » tombait sur trois lignes et se lisait mal (Julien,
25/09/2026). Même famille et même graisse que les onglets du dessous ; ce
qui distingue le niveau 1, c'est sa couleur plus franche et son corps. */
/* Exactement la police de « Ajouter une base » (600, 12.5 px), mais en noir :
demande de Julien du 25/09/2026. Ni majuscules forcées, ni interlettrage :
un nom de base est un nom propre, pas une étiquette de section. */
.ctx-base-tete{display:flex;align-items:center;gap:6px;width:100%;padding:7px 10px;border:0;background:none;
border-radius:var(--radius-s);color:var(--ink);font-weight:600;font-size:12.5px;line-height:1.35;
letter-spacing:0;text-transform:none;text-align:left;cursor:pointer}
.ctx-base-tete span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ctx-base-tete:hover{background:var(--surface-2);color:var(--accent-ink)}
.ctx-base-tete:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ctx-base-fleche{width:12px;height:12px;flex:none;color:var(--ink-3);transform:rotate(90deg);transition:transform .15s ease}
.ctx-base.replie .ctx-base-fleche{transform:rotate(0deg)}
.ctx-base-sous{display:flex;flex-direction:column;gap:1px;border-left:2px solid var(--line);
margin:2px 0 0 10px;padding-left:6px}
.ctx-base.replie .ctx-base-sous{display:none}
.ctx-base-sous .ctx-item{font-size:12.5px;padding:7px 10px}
/* « Ajouter une base » est une action, pas une page : un filet la détache de
la liste, sans la déguiser en onglet. */
.ctx-ajouter{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
color:var(--ink-3);font-weight:600;font-size:12.5px}
.ctx-ajouter:hover{color:var(--accent-ink)}
.ctx-foot{margin-top:auto;padding:10px 10px 0;font-size:12px;color:var(--ink-2);border-top:1px solid var(--line)}
.ctx-toggle{position:sticky;top:0;align-self:flex-end;margin-bottom:-22px;right:0;width:22px;height:22px;padding:0;
display:flex;align-items:center;justify-content:center;background:var(--surface);
border:1px solid var(--line);border-radius:6px;color:var(--ink-2);cursor:pointer;z-index:2}
.ctx-toggle:hover{border-color:var(--accent);color:var(--accent)}
.ctx-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctx.folded .ctx-toggle{align-self:center;margin-bottom:0}
.ctx-toggle svg{width:14px;height:14px;transition:transform .18s ease}
.ctx.folded .ctx-toggle svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.ctx{transition:none}}
/* ── Zone principale ── */
.main{flex:1;min-width:0;padding:12px 26px 40px}
.main-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.main-head h1{font-size:20px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.main-head .sub{color:var(--ink-2);margin:0;font-size:13px}
.eyebrow{margin:0 0 6px;font-size:12px}
.eyebrow a{color:var(--ink-2);text-decoration:none;font-weight:600}
.eyebrow a:hover{color:var(--accent)}
.hint{font-size:12px;color:var(--ink-3)}
.mut{color:var(--ink-2)} .small{font-size:12px} .mono{font-family:var(--mono);font-size:12.5px}
/* ── Composants ── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.panel-title{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700}
.panel-empty{text-align:center;padding:40px 20px;color:var(--ink-2)}
.panel-empty h3{margin:0 0 6px;font-size:15px;color:var(--ink)}
.flash{background:var(--ok-soft);color:var(--ok);border:1px solid transparent;border-radius:var(--radius-s);padding:9px 12px;margin-bottom:14px;font-weight:600;font-size:13px}
.flash.bad{background:var(--bad-soft);color:var(--bad)}
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-s);
font-weight:600;font-size:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);line-height:1.2;text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.pri{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.btn.pri:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover);color:#fff}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}
/* compat anciens noms */
.btn-primary{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-s);font-weight:600;font-size:13px;background:var(--accent-fill);color:#fff;text-decoration:none}
.btn-primary:hover{background:var(--accent-fill-hover)}
.btn-ghost{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-s);font-weight:600;font-size:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--bad);padding:3px 8px;border-radius:6px;border:1px solid var(--bad-soft)}
input,select,textarea{font:inherit;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:5px}
.field>label,.lbl{font-weight:600;font-size:13px}
.lbl .req{color:var(--bad)}
.lbl .opt{color:var(--ink-3);font-weight:500}
.inp{display:block;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font-size:14px;line-height:1.4}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.inp{resize:vertical;min-height:90px}
select.inp{padding-right:30px;appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238B95A3'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center;background-size:9px 5px}
.form-grid{display:grid;gap:14px;max-width:560px}
.form-grid.wide{max-width:720px}
.form-grid label{display:grid;gap:5px;font-weight:600;font-size:13px}
.form-grid input,.form-grid select,.form-grid textarea{display:block;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font-size:14px}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.row-2,.row-3{grid-template-columns:1fr}}
.check{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;cursor:pointer}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700;padding:8px 12px;border-bottom:1px solid var(--line)}
.table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--bg)}
.table a{color:var(--ink);text-decoration:none;font-weight:600}
.table a:hover{color:var(--accent)}
.cell-actions{text-align:right}
/* Tableaux du module Bd (23/09/2026) : bouton « Affichage » à DROITE, au-dessus
du tableau et détaché des filtres, son petit menu de colonnes, et la poignée
de redimensionnement sur chaque séparation d'en-tête. Voir bd-tables.js.
Rien ici ne modifie la mise en page des tableaux eux-mêmes. */
.bd-tools{position:relative;display:flex;justify-content:flex-end;margin:0 0 8px}
.bd-btn-aff svg{width:14px;height:14px}
.bd-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:250px;max-height:60vh;overflow-y:auto;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);
box-shadow:0 1px 2px rgba(27,36,48,.08),0 12px 30px rgba(27,36,48,.16);padding:8px}
.bd-menu-titre{margin:2px 6px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
color:var(--ink-3);font-weight:700}
.bd-menu-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:5px 6px;border-radius:6px;font-size:13px}
.bd-menu-ligne:hover{background:var(--surface-2)}
.bd-menu-ligne span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Vert = colonne affichée, rouge = colonne masquée. C'est la forme de l'œil,
ouvert ou fermé, qui porte l'information autant que la couleur : lisible
même pour un daltonien. */
.bd-oeil{all:unset;cursor:pointer;flex:none;width:26px;height:26px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center}
.bd-oeil svg{width:17px;height:17px}
.bd-oeil.on{color:var(--ok)}
.bd-oeil.off{color:var(--bad)}
.bd-oeil:hover{background:var(--surface-2)}
.bd-oeil:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bd-menu-reset{all:unset;display:block;cursor:pointer;margin:6px 6px 2px;padding-top:7px;
border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.bd-menu-reset:hover{color:var(--accent)}
/* Poignée de redimensionnement, ENTIÈREMENT à l'intérieur de l'en-tête.
Elle était à cheval sur la séparation (right:-4px), mais les tableaux de
Flux et consorts posent `overflow:hidden` sur leurs th pour couper les
textes trop longs : la moitié extérieure était rognée et il ne restait que
3 px attrapables, introuvables au survol (constaté par Julien, 23/09/2026).
12 px à l'intérieur, donc rien n'est rogné. */
.table th{position:relative}
.bd-rz{position:absolute;top:0;right:0;width:12px;height:100%;cursor:col-resize;
z-index:3;background:transparent;user-select:none}
.bd-rz::after{content:"";position:absolute;top:4px;bottom:4px;right:2px;width:2px;
background:var(--accent);border-radius:1px;opacity:0;transition:opacity .12s ease}
/* Approcher la ligne d'en-tête révèle les séparations : sans ça, rien n'indique
qu'elles sont saisissables. Franc au survol de la poignée elle-même. */
.table thead tr:hover .bd-rz::after{opacity:.28}
.bd-rz:hover::after{opacity:1;width:3px}
/* Deplacement d une colonne a la souris (Julien, 25/09/2026) : on attrape
l en-tete et on le pose ailleurs. Le trait bleu montre ou il se posera. La
colonne sans intitule (le bouton « Ouvrir ») n est pas deplacable, elle garde
donc le curseur normal. */
.table th[draggable="true"]{cursor:grab}
.table th[draggable="true"]:active{cursor:grabbing}
.table th.bd-th-prise{opacity:.4}
.table th.bd-th-avant{box-shadow:inset 3px 0 0 var(--accent)}
.table th.bd-th-apres{box-shadow:inset -3px 0 0 var(--accent)}
body.bd-rz-actif .table th[draggable="true"]{cursor:col-resize}
/* Pendant le glissement : pas de selection de texte, et le curseur reste le bon
même quand la souris sort de l'en-tête. */
body.bd-rz-actif{cursor:col-resize;user-select:none}
body.bd-rz-actif .bd-rz::after{opacity:1}
.chip,.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.4;white-space:nowrap}
.pill{background:var(--surface-2);color:var(--ink-2)}
/* statuts tickets : palette du plugin, adoucie sur les tokens */
.pill-nouveau{background:var(--accent-fill);color:#fff}
.pill-en_cours{background:var(--warn);color:#fff}
.pill-attente_client{background:var(--info);color:#fff}
.pill-resolu{background:var(--ok);color:#fff}
.pill-ferme{background:var(--ink-3);color:#fff}
.pill-attention{background:var(--accent-fill);color:#fff}.pill-progress{background:var(--warn);color:#fff}.pill-waiting{background:var(--info);color:#fff}.pill-done{background:var(--ok);color:#fff}.pill-closed{background:var(--ink-3);color:#fff}
/* NDD AFNIC : délivrabilité et campagne, classes dédiées (ne pas réutiliser les pill- ci-dessus, partagées avec les statuts de ticket). */
.pill-deliv-ok{background:var(--ok);color:#fff}
.pill-deliv-catch{background:var(--ok-dot);color:#fff}
.pill-deliv-invalid{background:var(--bad);color:#fff}
.pill-deliv-unknown{background:var(--teal);color:#fff}
.pill-camp-visuel{background:var(--camp-visuel);color:#fff}
/* État « en attente » : c'est lui qui porte l'orange, jamais une campagne. */
.pill-attente-orange{background:var(--warn);color:#fff}
.pill-camp-maint{background:var(--info);color:#fff}
.pill-camp-cold{background:var(--accent-fill);color:#fff}
/* Retours en erreur, du plus bénin au plus grave (Julien, 17/09/2026) :
soft bounce orange, hard bounce rouge, plainte pour spam rouge sombre —
une plainte pèse bien plus lourd sur la réputation d'envoi qu'un rebond. */
.pill-bounce-soft{background:var(--warn);color:#fff}
.pill-bounce-hard{background:var(--bad);color:#fff}
.pill-bounce-spam{background:var(--bad-strong);color:#fff}
.pill-mail{background:var(--surface);color:var(--ink);border:1px solid var(--ink)}
.pill-phone{background:var(--ink);color:var(--surface)}
.pill.soft{opacity:.7}
/* Mockups : erreur dédiée (waiting/progress/done déjà génériques ci-dessus) + pastille de tâche en cours + miniature de table (mockup/logo/rendu sur une ligne). */
.pill-mk-error{background:var(--bad);color:#fff}
.spin-dot{display:inline-block;width:7px;height:7px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin-dot 1s linear infinite;margin-right:5px;vertical-align:-1px}
@keyframes spin-dot{to{transform:rotate(360deg)}}
.mk-thumb{display:block;width:64px;height:44px;object-fit:cover;border-radius:6px;background:var(--bg);border:1px solid var(--line)}
.prio{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;white-space:nowrap}
.prio-basse{background:var(--ink-3)}.prio-normale{background:var(--accent-fill)}.prio-haute{background:#E8752F}.prio-critique{background:var(--bad)}
.ref{display:inline-block;font-family:var(--mono);font-size:12.5px;background:var(--surface-2);color:var(--ink-2);padding:3px 8px;border-radius:6px}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);margin-left:6px}
.tag-late{background:var(--bad-soft);color:var(--bad)} .tag-internal{background:var(--warn-soft);color:var(--warn)}
.txt-late{color:var(--bad)}
/* ── Page de connexion ── */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:34px 36px;width:min(400px,calc(100vw - 32px))}
.login-card h1{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0}
.login-card h1 span{color:var(--accent)}
.login-sub{color:var(--ink-3);margin:4px 0 22px;font-size:12px}
.login-card label{display:block;font-weight:600;font-size:13px;margin:12px 0 5px}
.login-card input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font-size:14px}
.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.login-card button{margin-top:18px;width:100%;background:var(--accent-fill);color:#fff;font-weight:600;font-size:14px;padding:10px;border-radius:var(--radius-s);border:none;cursor:pointer;font-family:inherit}
.login-card button:hover{background:var(--accent-ink)}
.login-error{background:var(--bad-soft);color:var(--bad);border-radius:var(--radius-s);padding:9px 12px;font-size:13px;margin:4px 0 10px;font-weight:600}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:14px 0 0;font-size:13px}
.facts dt{color:var(--ink-2)} .facts dd{margin:0}
/* position:relative : contexte de positionnement pour .sp-cols (panneau
Affichage). Sans ça, .sp-cols se cale sur la page entière au lieu de la
barre de filtres et atterrit tout en bas (signalé par Julien le 18/09/2026).
Neutre pour les autres modules : aucun effet visuel sans enfant absolute. */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;position:relative}
.filters .inp{width:auto;min-width:150px;padding:7px 10px;font-size:13px}
.filters input[type=search].inp{min-width:220px}
.filters select.inp{min-width:190px;padding-right:32px}
.filters select.inp[name=jour]{min-width:280px}
.filters select.inp[name=contacte_par]{min-width:210px}
/* ── Module Tickets (agence) ── */
.tk-count{font-size:13px;color:var(--ink-2);margin:0 0 8px}
.tk-table td.tk-title{max-width:340px}
.tk-table .tk-title b{display:block;font-weight:600}
.tk-table .tk-title .site{font-size:12px;color:var(--ink-3)}
.tk-table .client b{display:block;font-weight:500}
.tk-table .client small{color:var(--ink-2);font-size:12px}
.tk-table .client .tk-abo-tag{display:inline-block;margin:3px 0 0;font-size:11px}
.tk-table .tk-ia-col{width:1%;text-align:center;padding-left:6px;padding-right:6px}
.tk-ia{display:inline-flex;color:var(--ink-3);opacity:.55;vertical-align:middle}
.tk-ia.is-done{color:var(--ok);opacity:1}
.tk-archives{margin:18px 0 8px}
.tk-archives summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:2px solid var(--accent);border-radius:var(--radius-s);color:var(--accent-ink);font-weight:700;font-size:13px;user-select:none}
.tk-archives summary::-webkit-details-marker{display:none}
.tk-archives[open] summary{margin-bottom:10px}
.tk-archives .table td{opacity:.85}
/* fiche */
.tk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tk-head h1{font-size:19px;font-weight:700;margin:0 0 10px}
.tk-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin-bottom:14px}
.tk-meta .who{color:var(--ink);font-weight:600}
.tk-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.tk-time{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:5px 10px;font-size:12px;color:var(--ink-2)}
.tk-time b{font-size:14px;color:var(--ink)}
.tk-bill{height:34px;padding:0 30px 0 10px;border-radius:var(--radius-s);border:1px solid var(--line);font-size:13px;font-weight:600;cursor:pointer;appearance:none;-webkit-appearance:none;
background-color:var(--surface-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235A6675'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:9px 5px}
.tk-bill[data-val=facturable]{background-color:var(--warn-soft);border-color:var(--warn)}
.tk-bill[data-val=maintenance]{background-color:var(--accent-soft);border-color:var(--accent)}
.tk-bill[data-val=offert]{background-color:var(--ok-soft);border-color:var(--ok)}
.tk-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600}
.tk-status-row select{width:auto;min-width:170px;padding:7px 30px 7px 10px}
.chat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.chat-area{padding:18px;min-height:336px;max-height:624px;overflow-y:auto;background:var(--bg);display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{padding:11px 14px;border-radius:10px;max-width:78%;font-size:14px;line-height:1.5}
.msg.client{background:var(--surface);border:1px solid var(--line);align-self:flex-start}
.msg.agence,.msg.systeme{background:var(--accent-soft);border:1px solid #CBD3F7;align-self:flex-end}
.msg.note{background:var(--warn-soft);border:1px dashed var(--warn);align-self:flex-end}
.msg-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px;font-size:12px;color:var(--ink-2)}
.msg-head b{color:var(--ink)}
.msg-head time{margin-left:auto;white-space:nowrap}
.msg-body{overflow-wrap:anywhere}
.msg-att{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.msg-att a:not(.msg-thumb){display:inline-flex;align-items:center;gap:6px;font-size:12.5px;background:var(--surface-2);border-radius:6px;padding:4px 9px;color:var(--ink);text-decoration:none}
.msg-att a:not(.msg-thumb):hover{background:var(--line)}
.msg-thumb{display:block;width:140px;height:100px;border-radius:6px;overflow:hidden;flex:none;cursor:zoom-in;border:1px solid var(--line);padding:0}
.msg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.msg-thumb-video{position:relative;background:#111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill='white' fill-opacity='.85'/%3E%3Cpath fill='%23111' d='M18 14v16l13-8z'/%3E%3C/svg%3E") center/38px no-repeat}
/* Visionneuse plein écran : image ou vidéo au centre, fond sombre, actions en haut à droite. */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:1000;display:flex;align-items:center;justify-content:center;padding:40px}
.lightbox[hidden]{display:none}
.lightbox-stage{max-width:90vw;max-height:80vh;display:flex;align-items:center;justify-content:center}
.lightbox-stage img{max-width:90vw;max-height:80vh;object-fit:contain;cursor:zoom-in;border-radius:6px}
.lightbox-stage img.is-zoomed{max-width:none;max-height:none;cursor:zoom-out}
.lightbox-stage video{max-width:90vw;max-height:80vh;border-radius:6px;background:#000}
.lightbox-bar{position:absolute;top:18px;right:22px;display:flex;gap:10px}
.lightbox-btn{all:unset;box-sizing:border-box;cursor:pointer;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff}
.lightbox-btn:hover{background:rgba(255,255,255,.3)}
.lightbox-name{position:absolute;top:26px;left:24px;color:#fff;font-size:13px;opacity:.8;max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lightbox-nav{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff}
.lightbox-nav:hover{background:rgba(255,255,255,.3)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
@media(max-width:640px){.lightbox-nav{width:38px;height:38px}.lightbox-prev{left:8px}.lightbox-next{right:8px}}
.chat-reply{padding:14px;border-top:1px solid var(--line)}
.chat-reply textarea{width:100%;min-height:96px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);font-size:14px;resize:vertical;background:var(--surface)}
.chat-reply textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}
.chat-foot .left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.attach-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--accent-ink);font-size:13px;font-weight:600;padding:6px 11px;border:1px solid var(--accent-soft);border-radius:var(--radius-s);background:var(--accent-soft)}
.attach-btn input{display:none}
.note-toggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;cursor:pointer;color:var(--warn);padding:6px 11px;background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--radius-s);user-select:none}
.side-list{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:13px}
.checklist{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:8px}
.checklist li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px}
.checklist form{margin:0}
.check-btn{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);background:var(--surface);color:var(--ok);font-weight:700;font-size:12px;cursor:pointer;line-height:1;padding:0}
.check-btn.is-done{border-color:var(--ok);background:var(--ok-soft)}
.checklist .done{text-decoration:line-through;color:var(--ink-3)}
.inline-form{display:flex;gap:8px;flex-wrap:wrap}
.inline-form input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);font-size:13px}
.ticket-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media(max-width:1100px){.ticket-grid{grid-template-columns:1fr}}
/* ── Pages client / publiques : bandeau noir + logo, comme le plugin ── */
.pub-page{background:#fff;color:#111;min-height:100vh;display:flex;flex-direction:column}
/* Le contenu pousse le pied de page en bas de l'écran même quand la page est courte. */
.pub-page > .pub-main{flex:1 0 auto;width:100%;box-sizing:border-box}
.pub-page > .pub-footer{flex:0 0 auto;width:100%;box-sizing:border-box;padding-top:24px}
.pub-header{background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:78px;flex:0 0 auto}
.pub-header img{height:36px;width:auto;display:block}
.pub-header h1{font-size:26px;font-weight:700;margin:0;position:absolute;left:50%;transform:translateX(-50%)}
.pub-header{position:relative}
.pub-header .right{display:flex;align-items:center;gap:18px;font-weight:600;font-size:15px}
.pub-header .right a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.pub-header-sep{width:1px;height:20px;background:rgba(255,255,255,.28)}
.pub-main{max-width:760px;margin:0 auto;padding:36px 24px 48px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.pub-main.wide{max-width:1200px}
.pub-main.gp{max-width:1440px}
.pub-footer{max-width:960px;margin:0 auto;padding:0 24px 40px;text-align:center;font-size:11px;line-height:1.7;color:#9ca3af;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.pub-main.wide ~ .pub-footer{max-width:1200px}
.pub-main.gp ~ .pub-footer{max-width:1440px}
.pub-footer a{color:#9ca3af;text-decoration:underline}
.pub-footer a:hover{color:#6b7280}
.pub-banner{display:flex;align-items:center;gap:10px;padding:11px 16px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;margin:0 0 22px;font-size:13px;color:#1e40af}
.pub-banner a{color:#2563eb;font-weight:700}
.pub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:22px}
.pub-field{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.pub-lbl{font-size:13px;font-weight:700;color:#111}
.pub-lbl .req{color:#dc2626}
.pub-lbl .opt{color:#6b7280;font-weight:500}
.pub-inp{display:block;width:100%;padding:10px 14px;border:1.5px solid #d1d5db;border-radius:8px;font-size:15px;color:#111;background:#fff;line-height:1.5}
.pub-inp:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
select.pub-inp{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:9px 5px}
textarea.pub-inp{min-height:150px;resize:vertical}
.pub-counter{text-align:right;font-size:12px;color:#9ca3af;margin-top:4px}
.pub-add{display:inline-block;padding:7px 12px;border:1.5px dashed #9ca3af;border-radius:8px;background:#f3f4f6;font-size:13px;font-weight:600;color:#111;cursor:pointer}
.pub-add:hover{background:#e5e7eb}
.pub-cl-row{display:flex;gap:8px;margin-bottom:8px}
.pub-cl-row input{flex:1}
.pub-cl-row button{border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:0 10px;cursor:pointer;color:#6b7280}
.pub-drop{border:2px dashed var(--line);border-radius:var(--radius);padding:26px 16px;text-align:center;background:var(--surface-2);cursor:pointer;color:var(--ink-2);font-size:14px}
.pub-drop b{color:var(--ink)}
.pub-drop small{display:block;color:var(--ink-2);font-size:12px;margin-top:4px}
.pub-drop.drag-over{border-color:var(--accent);background:var(--accent-soft)}
.pub-drop input{display:none}
.pub-files{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pub-file-chip{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);padding:9px 10px 9px 14px;font-size:14px;max-width:100%}
.pub-file-name{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.pub-file-size{color:var(--ink-3);font-size:12px;white-space:nowrap}
.pub-file-rm{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:var(--ink-3);font-size:12px;line-height:1}
.pub-file-rm:hover{background:var(--bad-soft);color:var(--bad)}
.pub-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px}
.pub-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent-fill);color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.pub-btn:hover{background:var(--accent-fill-hover)}
.pub-btn:disabled{opacity:.5;cursor:default}
.pub-err{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:18px}
.pub-ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:18px}
.pub-success{text-align:center;padding:48px 24px}
.pub-success .ico{font-size:56px;line-height:1;margin-bottom:16px}
.pub-success h2{font-size:24px;color:#111;margin:0 0 12px}
.pub-success p{color:#6b7280;font-size:16px;margin:0 0 20px}
.pub-activate{max-width:420px;margin:0 auto;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.pub-activate h3{margin:0 0 6px;font-size:16px;color:var(--ink)}
.pub-activate p{margin:0 0 14px;color:var(--ink-2);font-size:13px}
.pub-activate label{display:block;margin:0 0 6px;color:var(--ink)}
.pub-activate input{margin-bottom:14px}
.pub-activate-actions{display:flex;align-items:center;gap:10px}
.pub-link{background:#f3f4f6;border-radius:8px;padding:10px 12px;font-size:13px;overflow-wrap:anywhere}
.pub-tabs{display:flex;border-bottom:1px solid #e5e7eb;margin:20px 0 28px}
.pub-tab{flex:1;text-align:center;padding:12px 8px;font-size:14px;font-weight:600;color:#6b7280;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;font-family:inherit;text-decoration:none}
.pub-tab.on{color:#111;border-bottom-color:#111}
.pub-inline{display:flex;gap:10px;align-items:stretch}
.pub-inline .pub-inp{flex:1}
.pub-narrow{max-width:470px;margin:0 auto}
.pub-text{color:#6b7280;font-size:14px;line-height:1.6;margin:0 0 16px}
/* chat client */
.pub-chat{max-width:1200px;margin:0 auto;padding-bottom:100px}
.pub-chat .chat-area{background:#f9fafb}
.pub-chat .msg.agence{background:#dbeafe;border-color:#bfdbfe}
.pub-chat .msg.client{background:#fff;border-color:#e5e7eb}
/* dashboard client */
.pub-dash-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.pub-dash-head h1{margin:0;font-size:22px;font-weight:800;color:#111}
.pub-dash-head p{margin:4px 0 0;font-size:13px;color:#6b7280}
.pub-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.pub-stat{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px}
.pub-stat b{display:block;font-size:24px;font-weight:800;color:#111}
.pub-stat span{font-size:12px;color:#6b7280}
.pub-table{width:100%;border-collapse:collapse;font-size:14px}
.pub-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;padding:10px 12px;border-bottom:1px solid #e5e7eb}
.pub-table td{padding:12px;border-bottom:1px solid #f3f4f6;vertical-align:middle}
.pub-table tr:hover td{background:#f9fafb}
.pub-table a{color:#111;text-decoration:none;font-weight:600}
.pub-logout{background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;color:#374151;font-family:inherit}
.pub-logout:hover{background:#f3f4f6}
/* ── Module NDD AFNIC : tableau compact + panneaux latéraux 50/50 ── */
.ndd-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px}
.ndd-flux-table{table-layout:auto;width:100%}
.ndd-flux-table th,.ndd-flux-table td{padding:6px 7px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ndd-flux-table .pill{padding:2px 7px;font-size:10px;letter-spacing:.02em}
.ndd-flux-table .ndd-open-btn{padding:3px 8px;font-size:11px}
.ndd-flux-table td.ndd-flex,.ndd-flux-table th.ndd-flex{max-width:0}
/* Ville/code postal moins prioritaire, email plus large : la ville est plus courte à lire tronquée que l'email. */
.ndd-flux-table td[data-col=ville],.ndd-flux-table th[data-col=ville]{max-width:70px}
.ndd-flux-table td[data-col=email],.ndd-flux-table th[data-col=email]{max-width:0;min-width:160px}
.ndd-flux-table td.ndd-flex b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-weight:600}
.ndd-flux-table .mini{font-size:11px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ndd-mark{color:var(--accent);font-weight:700;margin-left:2px}
.ndd-open-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:4px 9px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:11.5px}
.ndd-open-btn:hover{border-color:var(--accent);color:var(--accent)}
.ndd-side.ndd-side-compact{width:340px;max-width:90vw}
.ndd-side{position:fixed;top:0;right:0;bottom:0;width:50vw;background:var(--surface);
border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:60;
transform:translateX(100%);transition:transform .2s ease;display:flex;flex-direction:column}
.ndd-side[hidden]{display:none}
.ndd-side.open{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.ndd-side{transition:none}}
.ndd-side-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);flex:none}
.ndd-side-head h2{margin:0;font-size:16px;font-family:var(--font-title)}
.ndd-side-close{all:unset;cursor:pointer;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)}
.ndd-side-close:hover{background:var(--surface-2);color:var(--ink)}
.ndd-side-close svg{width:16px;height:16px}
.ndd-side-body{padding:16px 20px;overflow-y:auto;flex:1}
.ndd-col-row{display:flex;align-items:center;justify-content:space-between;padding:9px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.ndd-col-row:last-child{border-bottom:none}
.ndd-eye{all:unset;cursor:pointer;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.ndd-eye:hover{background:var(--surface-2)}
.ndd-eye.on{color:var(--ok)}
.ndd-eye.off{color:var(--bad)}
.ndd-eye svg{width:18px;height:18px}
/* Sections de la fiche : pastels très légers, juste assez pour séparer les
blocs du regard (Julien, 16/09/2026). Filet de couleur à gauche plutôt qu'un
aplat franc, pour rester sobre en clair comme en sombre. */
.ndd-fiche-section{margin-bottom:16px;padding:12px 14px;border-radius:var(--radius-s);border:1px solid var(--line);border-left:3px solid var(--line)}
.ndd-fiche-section h3{margin-top:0}
.past-entreprise{background:color-mix(in srgb, var(--accent) 5%, transparent);border-left-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.past-contact{background:color-mix(in srgb, var(--teal) 5%, transparent);border-left-color:color-mix(in srgb, var(--teal) 45%, transparent)}
.past-site{background:color-mix(in srgb, var(--ok) 5%, transparent);border-left-color:color-mix(in srgb, var(--ok) 45%, transparent)}
.past-brevo{background:color-mix(in srgb, var(--warn) 5%, transparent);border-left-color:color-mix(in srgb, var(--warn) 45%, transparent)}
.past-phoning{background:color-mix(in srgb, var(--ink-3) 7%, transparent);border-left-color:color-mix(in srgb, var(--ink-3) 45%, transparent)}
@media (max-width:760px){.ndd-fiche-grid{grid-template-columns:1fr}}
.ndd-fiche-section h3{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);margin:0 0 10px;font-weight:700}
.ndd-fiche-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.ndd-fiche-grid.one{grid-template-columns:1fr}
.ndd-fiche-grid label{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ndd-fiche-grid input,.ndd-fiche-grid select,.ndd-fiche-grid textarea{padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font-size:13.5px;font-family:inherit;width:100%}
.ndd-fiche-grid input:disabled,.ndd-fiche-grid select:disabled,.ndd-fiche-grid input:read-only{background:var(--surface-2);color:var(--ink-2)}
.ndd-fiche-grid textarea{resize:vertical;min-height:64px}
.ndd-fiche-note{font-size:11.5px;color:var(--ink-3);margin:2px 0 0}
.ndd-fiche-foot{padding:12px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.ndd-fiche-saved{font-size:12.5px;color:var(--ok);font-weight:600}
/* ── Écran « Suivi Brevo » : onglets de campagnes + intercalaires de liens ── */
.ndd-camp-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ndd-camp-tab{text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--radius-s);font-weight:700;font-size:13.5px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.ndd-camp-tab:hover{color:var(--ink)}
.ndd-camp-tab .dot{width:9px;height:9px;border-radius:50%;flex:none}
.ndd-camp-tab-visuel .dot{background:var(--warn)}
.ndd-camp-tab-maint .dot{background:var(--info)}
.ndd-camp-tab-cold .dot{background:var(--accent)}
.ndd-camp-tab.active.ndd-camp-tab-visuel{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.ndd-camp-tab.active.ndd-camp-tab-maint{background:var(--info-soft);border-color:var(--info);color:var(--info)}
.ndd-camp-tab.active.ndd-camp-tab-cold{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.ndd-lien-tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ndd-lien-tab{text-decoration:none;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink-2);border:1px solid transparent;border-bottom:none;border-radius:var(--radius-s) var(--radius-s) 0 0;margin-bottom:-1px}
.ndd-lien-tab:hover{color:var(--ink)}
.ndd-lien-tab .cnt{background:var(--surface-2);border-radius:999px;padding:1px 8px;font-size:11px;color:var(--ink-3)}
.ndd-lien-tab.active{background:var(--surface);border-color:var(--line)}
.ndd-lien-tab.active .cnt{color:#fff}
.ndd-lien-tabs-visuel .ndd-lien-tab.active{color:var(--warn);border-color:var(--line)}
.ndd-lien-tabs-visuel .ndd-lien-tab.active .cnt{background:var(--warn)}
.ndd-lien-tabs-maint .ndd-lien-tab.active{color:var(--info);border-color:var(--line)}
.ndd-lien-tabs-maint .ndd-lien-tab.active .cnt{background:var(--info)}
.ndd-lien-tabs-cold .ndd-lien-tab.active{color:var(--accent-ink);border-color:var(--line)}
.ndd-lien-tabs-cold .ndd-lien-tab.active .cnt{background:var(--accent-fill)}
.ndd-camp-tab-phoning .dot{background:var(--teal)}
.ndd-camp-tab.active.ndd-camp-tab-phoning{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
/* Statut du prospect : mêmes couleurs partout (select du tableau, badge et
historique de la fiche, en-têtes du Kanban Suivi phoning). */
.pill-statut-a_appeler{background:var(--surface-2);color:var(--ink-2)}
.pill-statut-chaud{background:var(--bad);color:#fff}
.pill-statut-tiede{background:var(--warn);color:#fff}
/* Alignes sur la palette des bases importees (bd-st-*), ou Julien a choisi
ses couleurs : « froid » = bleu glace, « ne repond pas » = bleu fonce,
« agence » = violet (01/10/2026). Avant, « agence » etait turquoise et les
deux precedents partageaient le MEME gris, donc indistinguables. */
.pill-statut-froid{background:var(--glace-soft);color:var(--glace)}
.pill-statut-ne_repond_pas{background:var(--marine);color:#fff}
.pill-statut-rdv_pris{background:var(--ok);color:#fff}
/* « Agence » : violet, comme dans les bases importees. */
.pill-statut-agence{background:var(--info);color:#fff}
/* « Désinscrit » : rouge, mais pâle — c'est un contact hors-jeu, pas une
priorité d'appel comme « Chaud ». */
.pill-statut-desinscrit{background:var(--bad-soft);color:var(--bad)}
select.brevo-statut-select{appearance:none;-webkit-appearance:none;height:30px;padding:0 26px 0 10px;border-radius:var(--radius-s);border:1px solid var(--line);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 6px center;background-size:14px}
select.brevo-statut-select.pill-statut-a_appeler{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6675' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
/* ── Écran « Suivi Brevo » : Kanban vertical du Suivi phoning ── */
.ndd-phoning-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px}
/* Les colonnes se partagent la largeur au lieu d'etre figees a 250 px :
a six, elles faisaient 1570 px et la derniere etait coupee, avec un
defilement de gauche a droite (Julien, 25/09/2026). Elles s'etirent pour
remplir l'ecran et se resserrent quand il y a beaucoup de statuts ;
`overflow-x` reste en secours au-dela du raisonnable. */
.ndd-phoning-col{flex:1 1 200px;min-width:0;background:var(--surface-2);border-radius:var(--radius-s);display:flex;flex-direction:column;max-height:var(--kanban-h, calc(100vh - 320px))}
/* Un titre de colonne long ne pousse plus la colonne : il se coupe. */
.ndd-phoning-col-head>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ndd-phoning-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:var(--radius-s) var(--radius-s) 0 0;font-weight:700;font-size:12.5px;border-bottom:2px solid transparent}
.ndd-phoning-col-head-a_appeler{background:var(--surface);color:var(--ink-2);border-color:var(--ink-3)}
.ndd-phoning-col-head-chaud{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.ndd-phoning-col-head-tiede{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.ndd-phoning-col-head-froid{background:var(--glace-soft);color:var(--glace);border-color:var(--glace)}
.ndd-phoning-col-head-ne_repond_pas{background:var(--marine-soft);color:var(--marine);border-color:var(--marine)}
.ndd-phoning-col-head-rdv_pris{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.ndd-phoning-col-head-agence{background:var(--info-soft);color:var(--info);border-color:var(--info)}
.ndd-phoning-col-head-desinscrit{background:var(--surface);color:var(--bad);border-color:var(--bad-soft)}
.ndd-kcol-count{background:rgba(0,0,0,.08);border-radius:999px;padding:1px 8px;font-size:11px}
.ndd-kcol-empty{margin:6px 2px;font-size:12px;color:var(--ink-3)}
.ndd-phoning-col-body{padding:9px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:60px}
.ndd-phoning-card{cursor:grab;display:flex;flex-direction:column;gap:1px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);padding:7px 10px;font-size:12.5px;box-shadow:0 1px 2px rgba(27,36,48,.05)}
.ndd-phoning-card b{font-size:13px;line-height:1.35}
.ndd-phoning-card .phoning-line{font-size:11.5px}
.ndd-phoning-card:hover{border-color:var(--accent)}
.ndd-phoning-card.dragging{opacity:.4}
.ndd-phoning-card b{font-weight:700}
.ndd-phoning-card .mini{color:var(--ink-2);font-size:11.5px}
.ndd-phoning-card .phoning-line{color:var(--ink-3);margin-top:2px;display:flex;align-items:center;gap:5px}
/* Date de phoning saisissable sur la carte (Julien, 17/09/2026) : un champ
discret, qui ne doit pas transformer la carte en formulaire. */
.ndd-phoning-card .carte-date{flex:1;min-width:0;border:1px solid transparent;background:transparent;border-radius:var(--radius-s);
color:var(--ink-3);font-family:inherit;font-size:11.5px;padding:2px 4px;cursor:pointer}
.ndd-phoning-card .carte-date:hover{border-color:var(--line);background:var(--surface-2)}
.ndd-phoning-card .carte-date:focus{outline:none;border-color:var(--accent);background:var(--surface);color:var(--ink)}
.ndd-phoning-card .carte-date::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
/* Rappel à venir : discret. Rappel du jour ou en retard : mis en avant, c'est
ce qui doit être traité maintenant (Julien, 17/09/2026). */
.ndd-phoning-card .rappel-line{color:var(--info);font-size:11px;margin-top:1px}
.ndd-phoning-card .rappel-line.du{color:var(--bad);font-weight:700}
.rappel-date.du{border-color:var(--bad);color:var(--bad);font-weight:700}
/* Désinscription de l'emailing : une information, pas une alerte de phoning —
d'où une teinte sobre plutôt que le rouge des rappels en retard. */
.pill-desinscrit{background:var(--ink-3);color:#fff;margin-top:3px;display:inline-block}
.ndd-phoning-card .desinscrit-line{color:var(--ink-3);font-size:11px;margin-top:1px}
.ndd-desinscrit{margin:0 0 10px;padding:7px 10px;border-radius:var(--radius-s);
background:var(--surface-2);border-left:3px solid var(--ink-3);color:var(--ink-2);font-size:12.5px}
.ndd-phoning-card .carte-date:hover::-webkit-calendar-picker-indicator{opacity:.8}
/* ── Module Supervision (rail bas + écrans) ── */
.sv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.sv-tile{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.sv-tile:hover{border-color:var(--accent)}
.sv-tile .panel-title{margin-bottom:6px}
.sv-tile .sv-val{font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sv-tile .sv-sub{font-size:12px;color:var(--ink-2);margin-top:4px}
.sv-tile.sv-ok{border-left:4px solid var(--ok)}
.sv-tile.sv-warn{border-left:4px solid var(--warn)}
.sv-tile.sv-bad{border-left:4px solid var(--bad)}
.sv-tile.sv-mut{border-left:4px solid var(--ink-3)}
.sv-tile.sv-info{border-left:4px solid var(--info)}
.pill-sv-ok{background:var(--ok-soft);color:var(--ok)}
.pill-sv-warn{background:var(--warn-soft);color:var(--warn)}
.pill-sv-bad{background:var(--bad-soft);color:var(--bad)}
.pill-sv-mut{background:var(--surface-2);color:var(--ink-2)}
.sv-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.sv-note{font-size:12.5px;color:var(--ink-2);margin:0 0 12px}
.sv-mono{font-family:var(--mono);font-size:12px}
/* ── Comptes : sélection de modules / bases (admin) ── */
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-2)}
.check-grid label{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;cursor:pointer}
.check-grid input[type=checkbox],.form-grid input[type=checkbox]{width:auto;display:inline-block;margin:0}
.check-grid .hint-inline{grid-column:1/-1;font-size:11.5px;color:var(--ink-3)}
.acces-list{display:flex;flex-wrap:wrap;gap:4px}
.acces-list .pill{font-size:10px}
.ndd-base-lock{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600}
.ndd-save-base{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ndd-save-base input{padding:5px 9px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font-size:12.5px;min-width:180px}
/* Formulaire de compte pleine largeur (Réglages → Utilisateurs, création et
modification) : nom+email, puis mot de passe+rôle, puis le bloc d'accès sur
toute la largeur. */
.form-grid.full{max-width:none;grid-template-columns:1fr 1fr;gap:14px 18px;align-items:start}
.form-grid.full .span-2{grid-column:1/-1}
@media (max-width:820px){.form-grid.full{grid-template-columns:1fr}}
.acces-block{display:grid;gap:9px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-2)}
.acces-block .block-label{font-weight:600;font-size:13px}
.acces-block .acces-mode{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.acces-block .acces-mods{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:9px;border-top:1px solid var(--line)}
.acces-block label{display:flex;align-items:center;gap:7px;margin:0;font-weight:500;font-size:13px;cursor:pointer}
.acces-block input[type=checkbox],.acces-block input[type=radio]{width:auto;display:inline-block;margin:0}
.acces-block .hint-inline{font-size:11.5px;color:var(--ink-3)}
/* Compteur de comptes dans le titre d'un groupe d'utilisateurs. */
.panel-title .count{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:11px;letter-spacing:0}
/* Suivi Brevo — tuiles de statistiques cliquables : un clic déroule la liste
des contacts correspondants sous la vue d'ensemble, qui reste visible. */
.ndd-stat-tile{display:block;text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}
.ndd-stat-tile:hover{border-color:var(--accent);transform:translateY(-1px)}
.ndd-stat-tile.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.ndd-stat-sub{margin:4px 0 0;font-size:11.5px;color:var(--ink-3)}
.ndd-stat-sub.bad{color:var(--bad);font-weight:600}
/* Suivi Brevo — état d'une campagne d'un coup d'œil (demande Julien du 16/09/2026) :
vert = en fonctionnement, rouge = arrêtée après un seuil atteint. Une campagne
arrêtée reste affichée et consultable, elle n'est jamais masquée. */
/* La couleur du rond dit l'ÉTAT du scénario, plus son type (Julien, 16/09/2026) :
vert en cours, orange seuil atteint avec des parcours encore en route,
rouge arrêté et terminé. */
/* Onglet de campagne sélectionné : depuis le passage aux couleurs d'état
(16/09/2026), les anciennes règles de sélection ne s'appliquaient plus et
rien ne disait quelle campagne on regardait. Le marquage se fait par le
texte et un soulignement, pour ne pas entrer en conflit avec le fond
coloré des états orange et rouge (Julien, 17/09/2026). */
.ndd-camp-tab.active{color:var(--ink);font-weight:800;box-shadow:inset 0 -3px 0 0 var(--ink-2)}
.ndd-camp-tab.active .dot{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px currentColor}
.ndd-camp-tab.etat-vert .dot{background:var(--ok)}
.ndd-camp-tab.etat-orange .dot{background:var(--warn)}
.ndd-camp-tab.etat-rouge .dot{background:var(--bad)}
.ndd-camp-tab.etat-vert{border-color:var(--ok)}
.ndd-camp-tab.etat-orange{border-color:var(--warn);background:var(--warn-soft)}
.ndd-camp-tab.etat-rouge{border-color:var(--bad);background:var(--bad-soft)}
.ndd-camp-tab .etat-pastille{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:99px;padding:1px 7px}
.ndd-camp-tab .etat-pastille.neutre{background:var(--surface-2);color:var(--ink-2)}
/* légende des couleurs, discrète mais sans ambiguïté */
.ndd-legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-6px 0 14px;font-size:11.5px;color:var(--ink-3)}
.ndd-legende span{display:inline-flex;align-items:center;gap:6px}
.ndd-legende .pt{width:8px;height:8px;border-radius:50%;display:inline-block}
.ndd-legende .pt.vert{background:var(--ok)}
.ndd-legende .pt.orange{background:var(--warn)}
.ndd-legende .pt.rouge{background:var(--bad)}
/* sous-onglets du suivi phoning (vue d'ensemble, types, clics) */
.ndd-phoning-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ndd-phoning-tab{text-decoration:none;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px 14px}
.ndd-phoning-tab:hover{color:var(--ink);border-color:var(--ink-3)}
.ndd-phoning-tab.active{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.ndd-phoning-tab .cnt{font-size:11px;opacity:.75;margin-left:6px}
/* Automatisations : la ligne dit l'état sans qu'on ait à lire la colonne.
Une campagne arrêtée garde toutes ses données, elle est seulement signalée. */
.table tr.ligne-vert td{background:var(--ok-soft)}
.table tr.ligne-orange td{background:var(--warn-soft)}
.table tr.ligne-rouge td{background:var(--bad-soft)}
.table tr.ligne-vert td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.table tr.ligne-orange td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.table tr.ligne-rouge td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
/* Statistiques NDD : cartes compactes plutôt qu'un tableau, pour coller le
chiffre à son libellé et hiérarchiser la lecture (Julien, 16/09/2026).
Les données et les calculs sont inchangés. */
/* Statistiques NDD : un bloc par thème, présenté comme les sections de la
fiche prospect (pastel léger + filet de couleur), avec un tableau compact à
l'intérieur. Les blocs restent étroits pour que le chiffre ne s'éloigne
jamais de son libellé (16/09/2026). */
.stats-blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;align-items:start}
.stats-bloc{padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--radius-s)}
/* Le bloc des indicateurs clés a des libellés longs : il prend deux colonnes,
mais jamais toute la largeur — sinon le chiffre s'éloigne de son libellé. */
.stats-bloc.large{grid-column:span 2;max-width:820px}
@media (max-width:820px){.stats-bloc.large{grid-column:span 1}}
.stats-titre{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700;margin:0 0 8px}
.stats-table{width:100%;border-collapse:collapse}
.stats-table th{text-align:left;font-weight:500;font-size:12.5px;line-height:1.4;color:var(--ink-2);padding:5px 10px 5px 0;border-bottom:1px solid var(--line)}
.stats-table td{text-align:right;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;padding:5px 0;border-bottom:1px solid var(--line)}
.stats-table tr:last-child th,.stats-table tr:last-child td{border-bottom:0}
/* Statistiques : un seul tableau segmenté, sur la moitié de la page
(Julien, 18/09/2026). Chaque thème est un teinté, introduit par un
bandeau ; le filet de couleur à gauche relie ses lignes entre elles. */
.stats-panel{max-width:min(720px,100%);padding:0;overflow:hidden}
.stats-unique{width:100%}
/* Le filet de couleur ne peut pas être porté par le : avec
border-collapse, les navigateurs ne peignent pas ses bordures. On le pose
sur la première cellule de chaque ligne, qui hérite de la teinte du thème. */
.stats-unique tbody th:first-child{border-left:3px solid;border-left-color:inherit}
.stats-unique .stats-section th{border-left:3px solid;border-left-color:inherit}
.stats-unique .stats-section th{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
color:var(--ink-2);font-weight:700;padding:9px 14px;border-bottom:1px solid var(--line)}
.stats-unique tbody tr th:first-child{padding-left:14px}
.stats-unique tbody tr td:last-child{padding-right:14px}
.stats-unique tbody:last-child tr:last-child th,
.stats-unique tbody:last-child tr:last-child td{border-bottom:0}
/* Six teintes franchement distinctes, une par thème (Julien, 18/09/2026).
Chaque porte sa couleur dans --teinte : le fond en reprend une
version très claire, le bandeau de titre une version plus soutenue, et le
titre lui-même la couleur pleine — donc la même couleur que son segment,
en plus foncé. */
.stats-unique tbody{--teinte:var(--accent)}
.stats-unique tbody.past-cles{--teinte:var(--accent)}
.stats-unique tbody.past-emailing{--teinte:var(--teal)}
.stats-unique tbody.past-taille{--teinte:var(--info)}
.stats-unique tbody.past-web{--teinte:var(--ok)}
.stats-unique tbody.past-qualite{--teinte:var(--warn)}
.stats-unique tbody.past-commercial{--teinte:var(--bad)}
.stats-unique tbody{background:color-mix(in srgb, var(--teinte) 9%, transparent)}
.stats-unique tbody th:first-child,
.stats-unique .stats-section th{border-left-color:color-mix(in srgb, var(--teinte) 65%, transparent)}
.stats-unique .stats-section{background:color-mix(in srgb, var(--teinte) 22%, transparent)}
.stats-unique .stats-section th{color:var(--teinte)}
/* Suivi phoning : bascule Kanban / Tableau, disponible sur la vue d'ensemble
comme sur chaque type de campagne (demande Julien du 16/09/2026). */
.ndd-vue-switch{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:99px;overflow:hidden;margin-bottom:12px}
.ndd-vue-switch a{text-decoration:none;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:6px 16px;background:var(--surface)}
.ndd-vue-switch a:hover{color:var(--ink)}
.ndd-vue-switch a.active{background:var(--ink);color:var(--surface)}
/* Suivi phoning : onglets à gauche, choix de l'affichage à droite. */
.ndd-phoning-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.ndd-phoning-head .ndd-phoning-tabs{flex:1 1 auto}
.ndd-phoning-head .ndd-vue-switch{flex:0 0 auto;margin-left:auto}
/* « Suivi phoning » est une section à part entière, pas une campagne de plus :
il porte donc une couleur pleine et distinctive (demande Julien du 16/09/2026).
Le bleu-vert ne se confond ni avec le bleu roi des boutons principaux et des
onglets internes, ni avec le vert / orange / rouge qui disent l'état des
scénarios. */
/* Création d'une base : mise en page d'origine conservée, on n'ajoute que le
dépliage progressif des filtres (Julien, 16/09/2026). `display:grid` et
`display:flex` l'emportent sur [hidden] : ces règles sont indispensables. */
.base-parcours[hidden],.base-champ[hidden],.base-fin[hidden],.base-plus[hidden],.ndd-phoning-head[hidden]{display:none}
.base-parcours{margin-top:4px}
/* Statistiques d'une base : une seule ligne de bulles + jauge (16/09/2026).
Information secondaire : chiffres et libellés à la même taille que le
pourcentage, la couleur suffit à distinguer les trois valeurs. */
/* `overflow-x:auto` faisait défiler les chiffres sur petit écran, mais depuis
que le bouton « Affichage » vit sur cette ligne, il ROGNAIT son menu déroulant :
plus moyen de choisir ses colonnes (Julien, 28/09/2026). On laisse déborder et
on passe à la ligne quand la place manque. */
.ndd-base-stats{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;overflow:visible}
.sbulle{display:inline-flex;align-items:baseline;gap:4px;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.5}
.sbulle b{font-weight:600}
.sbulle small{font-size:12.5px;font-weight:500;opacity:.8}
.sbulle.neutre{background:var(--surface-2);color:var(--ink-2)}
.sbulle.ok{background:var(--ok-soft);color:var(--ok)}
.sbulle.bad{background:var(--bad-soft);color:var(--bad)}
.sjauge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.sjauge b{color:var(--ink-2);font-weight:600}
.sjauge small{font-size:12.5px;font-weight:500;opacity:.8}
.sjauge-piste{display:inline-block;width:120px;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;flex:0 0 120px}
.sjauge-part{display:block;height:100%;border-radius:999px;background:var(--ok);transition:width .3s ease}
@media (prefers-reduced-motion:reduce){.sjauge-part{transition:none}}
.phoning-date.ok-flash{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
/* Statut actuel de la fiche : le sélecteur lui-même, coloré comme les pastilles
du Kanban, pour qu'il se voie et s'utilise sans hésitation (16/09/2026). */
.ndd-fiche-statut{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.ndd-fiche-statut .lib{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ndd-fiche-statut select{padding:6px 12px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;min-width:190px}
.ndd-fiche-statut select:focus{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
/* Confirmation d'enregistrement, commune à tout l'outil (16/09/2026) : bulle
en bas d'écran, jamais bloquante, disparaît d'elle-même. */
.toast-zone{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:60;pointer-events:none}
.toast{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(27,36,48,.18);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.toast.visible{opacity:1;transform:translateY(0)}
.toast-icone{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:12px;font-weight:700}
.toast-ok{background:var(--ok);color:#fff}
.toast-ok .toast-icone{background:rgba(255,255,255,.25)}
.toast-bad{background:var(--bad);color:#fff}
.toast-bad .toast-icone{background:rgba(255,255,255,.25)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* Le bouton « Suivi phoning » reprend le bleu commun à tous les boutons de
l'outil (Julien, 16/09/2026 — la couleur dédiée est abandonnée). */
.ndd-camp-tab.est-phoning{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff;font-weight:700}
.ndd-camp-tab.est-phoning .dot{background:#fff}
.ndd-camp-tab.est-phoning:hover{color:#fff;border-color:var(--accent-fill);filter:brightness(1.1)}
.ndd-camp-tab.est-phoning.active{box-shadow:0 0 0 3px var(--accent-soft)}
/* Recherche rapide d'un prospect, à droite de la ligne de statistiques. */
.ndd-recherche{position:relative;display:inline-flex;align-items:center}
.ndd-recherche .loupe{position:absolute;left:9px;width:14px;height:14px;color:var(--ink-3);pointer-events:none}
.ndd-recherche input{padding:5px 10px 5px 28px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:12.5px;font-family:inherit;width:210px}
.ndd-recherche input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inp.sm{padding:5px 9px;font-size:12.5px}
/* Filtres par colonne : une ligne discrète sous l'entête du tableau. */
.tr-filtres input,.tr-filtres select{width:100%;padding:4px 7px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font-size:12px;font-family:inherit}
/* Les deux bornes de date tiennent dans la largeur de leur colonne : sinon
elles l'élargissent et décalent tout le tableau. */
.tr-filtres input[type=date]{font-size:10.5px;padding:3px 4px;min-width:0}
.tr-filtres td{padding:6px 8px;background:var(--surface-2)}
.tr-filtres .deux{display:flex;gap:4px}
/* Crayon de modification, contre le titre de la base : c'est le contenu de la
base qu'on modifie, pas l'écran (16/09/2026). */
.titre-avec-action{display:flex;align-items:center;gap:8px}
.btn-crayon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink-2);cursor:pointer}
.btn-crayon svg{width:15px;height:15px}
.btn-crayon:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.btn-crayon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
/* ============================================================
Volet latéral (drawer) — mécanique reprise de l'outil Publications
(public/media/publications/assets/app.css), migrée ici pour ne pas la
dupliquer une troisième fois (module Gestion de projet, 17/09/2026).
La copie d'origine dans Publications n'a pas été supprimée : c'est un
outil encore joignable, et la retirer sans certitude qu'il est éteint
pour de bon aurait été une casse silencieuse pour un gain cosmétique.
============================================================ */
.drawer-ov{position:fixed;inset:0;background:rgba(15,20,28,.45);display:none;z-index:60}
.drawer-ov.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:var(--drawer-w,min(880px,94vw));background:var(--surface);
border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(15,20,28,.18);z-index:61;
display:none;flex-direction:column}
.drawer.on{display:flex}
.drawer-grip{position:absolute;left:0;top:0;bottom:0;width:8px;cursor:col-resize;z-index:3}
.drawer-grip::after{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);width:2px;height:38px;border-radius:2px;background:var(--line)}
.drawer-grip:hover::after{background:var(--accent)}
body.drawer-resize{cursor:col-resize;user-select:none}
.drawer .dhead{padding:18px 26px 0;flex:none}
.drawer .dhead .theme{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.drawer .dhead h2{font-size:19px;margin:4px 0 10px;line-height:1.3}
.drawer .meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--ink-2);margin-bottom:12px;flex-wrap:wrap}
.dtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 26px;flex:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
/* Le soulignement (-1px) débordait : barre de défilement verticale sur tous les volets (Julien, 29/09/2026). Défilement horizontal gardé, barre masquée. */
.dtabs::-webkit-scrollbar{display:none}
.dtabs button{all:unset;cursor:pointer;padding:9px 11px;font-size:12.5px;font-weight:600;color:var(--ink-2);
border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.dtabs button.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
.dtabs button:focus-visible{outline:2px solid var(--accent)}
.dbody{flex:1;overflow-y:auto;padding:22px 26px 30px}
.dfoot{flex:none;border-top:1px solid var(--line);padding:14px 26px;background:var(--surface);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Pied de volet client (Phase 3) à deux états, jamais montrés ensemble : une
règle display:flex posée en style inline l'emporte sur [hidden], même
piège déjà rencontré sur .sp-bulk et .base-parcours. */
.d-foot-row{display:flex}
.d-foot-row[hidden]{display:none}
/* ============================================================
Module Gestion de projet (GP) — classes .sp-, reprises telles quelles
de maquettes/suivi-projet-v1.html (comportement et allure de référence).
============================================================ */
.sp-bandeau{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--info-soft);color:var(--info);
border:1px solid var(--info);border-radius:var(--radius-s);padding:8px 14px;margin-bottom:14px;font-size:12.5px;font-weight:600}
.sp-bandeau .btn{padding:4px 10px;font-size:12px}
.sp-bandeau .sp-sep{flex:1}
/* états d'estimation : chaque état porte sa propre couleur sémantique */
.pill-est-chiffre{background:var(--ok);color:#fff}
.pill-est-a_chiffrer{background:var(--ink-3);color:#fff}
.pill-est-a_verifier{background:var(--warn);color:#fff}
.pill-est-stand_by{background:var(--info);color:#fff}
.pill-est-inclus{background:var(--teal);color:#fff}
.pill-est-offert{background:var(--ok-soft);color:var(--ok)}
.pill-est-sans_objet{background:var(--ink-3);color:#fff}
/* Largeurs fixes (colgroup dans la vue) : Point doit dominer, Page/Notes/
Pièces/Fiche n'ont besoin que d'un minimum (Julien, 18/09/2026). Avec
table-layout:auto le navigateur redistribuait la place au contenu le plus
large (souvent Blocage), pas à ce qui mérite le plus de lisibilité. */
.sp-table{table-layout:fixed;width:100%}
.sp-table th,.sp-table td{padding:7px 9px;font-size:12.5px}
.sp-table th{position:relative}
.col-resizer{position:absolute;top:0;right:-4px;bottom:0;width:8px;cursor:col-resize;user-select:none;z-index:2}
.col-resizer::after{content:'';position:absolute;top:0;bottom:0;left:3px;width:2px;background:transparent}
.col-resizer:hover::after,.col-resizer.active::after{background:var(--accent)}
/* Tableau Clients : hauteur de ligne FIXE (demande Julien du 23/09/2026) —
rien ne passe à la ligne, le trop-plein est tronqué (survol = texte complet
via l'attribut title). Sans ça, une cellule à deux lignes (badge, adresse
longue…) agrandissait toute la ligne. */
.c-table td{height:40px;padding-top:0;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-cell{display:flex;align-items:center;gap:9px;min-width:0}
.c-ava{width:24px;height:24px;border-radius:50%;flex:none;object-fit:cover}
span.c-ava{display:flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:700}
.c-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
/* Avis Google en couleurs + menus déroulants « changement rapide » dans la
grille Clients (Julien, 23/09/2026) : vert reçu, noir ne pas demander,
orange relancer, rouge demander, violet à définir. Le select EST la
pastille : même classe de couleur que sa valeur, changée au choix. */
.pill-sv-info{background:var(--info-soft);color:var(--info)}
.pill-sv-noir{background:var(--ink);color:var(--surface)}
.qsel{appearance:none;-webkit-appearance:none;border:none;font-family:inherit;cursor:pointer;max-width:100%;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* .sp-table .pill (plus bas dans le fichier) impose padding:2px 8px : spécificité relevée pour garder la place de la flèche. */
.pill.qsel,.sp-table .pill.qsel{padding-right:22px}
.qsel[hidden]{display:none}
/* Options en majuscules comme la pastille : le menu ouvert reste cohérent avec la valeur affichée. */
.qsel option{font-weight:700;color:var(--ink);background:var(--surface)}
.qsel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.qsel:disabled{opacity:.55;cursor:progress}
.c-toast{position:fixed;right:22px;bottom:22px;z-index:80;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:var(--radius-s);font-size:13px;box-shadow:var(--shadow);max-width:min(420px,90vw)}
/* Historique des échanges d'un client (onglet Échanges de la fiche) */
.ex-list{list-style:none;margin:0;padding:0}
.ex-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.ex-list li:last-child{border-bottom:none}
.ex-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.ex-top time{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
.ex-top .ex-push{flex:1}
.ex-list p{margin:0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.sp-table td.sp-sect{overflow:hidden}
.sp-table td.sp-sect b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-table td.sp-sect span{display:block;color:var(--ink-3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Chiffres et informations calés à GAUCHE, comme le texte (règle générale,
Julien 28/09/2026) : remplace le calage à droite des colonnes numériques et
le centrage de Notes / Pièces (18/09/2026). */
.sp-table td.sp-h{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-table .pill{padding:2px 8px;font-size:10px;letter-spacing:.02em}
.sp-table tr.sp-sel td{background:var(--accent-soft)}
.sp-lot{background:var(--surface-2)}
.sp-lot td{font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);padding:9px 9px}
.sp-lot .sp-mode{text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink-3);margin-left:8px}
.sp-blocage{color:var(--info);font-weight:600}
.sp-nodate{color:var(--bad);font-weight:600}
.sp-cnt{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sp-cnt.on{color:var(--warn);font-weight:700}
/* barre de totaux collante */
.sp-totaux{position:fixed;left:280px;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);
box-shadow:0 -6px 20px rgba(27,36,48,.07);padding:10px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sp-totaux .sp-bloc{display:flex;flex-direction:column;gap:1px}
.sp-totaux .sp-bloc b{font-size:15px;font-variant-numeric:tabular-nums;line-height:1.2}
.sp-totaux .sp-bloc span{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.sp-totaux .sp-vline{width:1px;align-self:stretch;background:var(--line)}
.sp-totaux .sp-push{flex:1}
.sp-totaux .sp-warnv{color:var(--warn)}
.sp-totaux .sp-infov{color:var(--info)}
/* Le JS partagé du layout ne pose jamais body.ctx-folded (seul #ctx reçoit
.folded) : recalé sur un sélecteur de fratrie pur CSS, sans dépendre du JS. */
.ctx.folded ~ .main .sp-totaux{left:98px}
/* Espace client (Gestion de projet) : pas de rail ni de colonne contextuelle,
left:280px laissait un bout de barre non couvert à gauche (Julien, 18/09/2026). */
.pub-page .sp-totaux{left:0}
/* affichage des colonnes, repris du panneau NDD */
.sp-cols{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius-s);box-shadow:var(--shadow);padding:12px 14px;min-width:210px}
.sp-cols label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;cursor:pointer}
.sp-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px;position:relative}
/* volet : sections et pastilles de visibilité */
.sp-vis{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;
text-transform:uppercase;letter-spacing:.04em}
.sp-vis-pub{background:var(--ok-soft);color:var(--ok)}
.sp-vis-int{background:var(--warn-soft);color:var(--warn)}
.sp-sec{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;background:var(--bg)}
.sp-sec h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700}
.sp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.sp-grid2{grid-template-columns:1fr}}
.sp-orphan{border-left:3px solid var(--bad);background:var(--bad-soft);color:var(--bad);padding:8px 12px;border-radius:6px;font-size:12.5px;margin-top:8px}
.sp-src{display:block;margin-top:6px;font-size:11px;color:var(--ink-3);font-style:italic}
.sp-lien{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);margin-bottom:8px;font-size:13px;overflow-wrap:anywhere}
.sp-pj{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sp-pj figure{margin:0;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--surface)}
.sp-pj .sp-ph{height:104px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:12px}
.sp-pj figcaption{padding:7px 9px;font-size:11.5px;color:var(--ink-2)}
.sp-pj img{display:block;width:100%;height:104px;object-fit:cover}
.sp-drop{border:2px dashed var(--line);border-radius:var(--radius);padding:22px 16px;text-align:center;background:var(--surface-2);color:var(--ink-2);font-size:13.5px;margin-top:12px}
.sp-drop b{color:var(--ink)}
.sp-exemple{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
background:var(--bad-soft);color:var(--bad);border-radius:999px;padding:1px 8px;margin-left:6px}
.sp-histo{list-style:none;padding:0;margin:0;display:grid;gap:0}
.sp-histo li{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.sp-histo li:last-child{border-bottom:none}
.sp-histo time{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
@media(max-width:980px){
.sp-totaux{left:64px}
}
.sp-scroll{overflow-x:auto}
/* Hiérarchie de la colonne contextuelle : niveau 1 le module, niveau 2 le
projet ouvert et ses vues. */
.sp-ctx-group{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-3);padding:0 10px;margin:18px 0 6px}
.sp-ctx-sub{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line);margin-left:11px;padding-left:5px}
.sp-ctx-sub .ctx-item{font-size:12.5px}
.sp-ctx-count{float:right;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:700}
.ctx-item.active .sp-ctx-count{color:var(--accent-ink)}
/* Colonne Estimation à gabarit fixe : le « h » tombe toujours au même
endroit, quel que soit le nombre de chiffres (demande Julien du 17/09/2026).
3e colonne à 110px (23/09/2026) : le select d'état mesure ~105px de large à
son gabarit le plus large ("À vérifier"/"Stand-by") une fois converti en
menu déroulant ; 86px le tronquait. */
/* 28/09/2026 : calée à gauche comme le reste ; le chiffre et « h » se suivent
(.sp-est-v), la pastille garde sa colonne fixe pour rester alignée. */
th.sp-estcol,td.sp-estcol{text-align:left}
.sp-est{display:inline-grid;grid-template-columns:58px 110px;align-items:center;gap:5px}
.sp-est-v{white-space:nowrap}
.sp-est-n{font-weight:700;font-variant-numeric:tabular-nums}
.sp-est-u{color:var(--ink-2);font-weight:600}
.sp-est .pill{justify-self:start}
/* Barre d'actions groupées */
.sp-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft);
border-bottom:1px solid var(--accent);padding:9px 26px;margin:-10px -26px 10px;width:calc(100% + 52px)}
/* display:flex l'emporte sur [hidden] (même piège que .base-parcours etc. plus
haut) : sans cette règle, la barre reste visible même sans sélection. */
.sp-bulk[hidden]{display:none}
.sp-bulk .sp-vline{width:1px;height:22px;background:var(--accent);opacity:.4;align-self:center}
.sp-bulk b{color:var(--accent-ink);font-variant-numeric:tabular-nums}
.sp-bulk .inp{width:auto;min-width:0;padding:5px 26px 5px 9px;font-size:12.5px;background:var(--surface)}
.sp-bulk .sp-push{flex:1}
/* Onglet Accès */
.sp-team{display:grid;gap:8px}
.sp-team-row{display:flex;align-items:center;gap:12px;padding:9px 11px;border:1px solid var(--line);
border-radius:var(--radius-s);background:var(--surface)}
.sp-ava{width:32px;height:32px;border-radius:50%;background:var(--accent-fill);color:#fff;display:flex;
align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.sp-ava.cli{background:var(--teal)}
.sp-ava.ext{background:var(--info)}
.sp-team-id{flex:1;min-width:0}
.sp-team-id b{display:block;font-weight:600;overflow-wrap:anywhere;font-size:13.5px}
.sp-team-id span{font-size:12px;color:var(--ink-2)}
/* Actions du point, dans l'en-tête du volet : elles suivent le point, pas
l'onglet ouvert, et ne mangent pas de hauteur sur les autres onglets. */
.sp-dact{display:flex;gap:8px;align-items:center}
.sp-menu{position:relative}
.sp-menu>summary{list-style:none;cursor:pointer}
.sp-menu>summary::-webkit-details-marker{display:none}
.sp-menu-list{position:absolute;right:0;top:calc(100% + 5px);background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius-s);box-shadow:var(--shadow);padding:6px;min-width:215px;z-index:8}
.sp-menu-list button{all:unset;display:block;width:100%;box-sizing:border-box;padding:7px 9px;border-radius:6px;
font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.sp-menu-list button:hover{background:var(--surface-2);color:var(--ink)}
.sp-menu-list button.bad{color:var(--bad)}
.sp-menu-list button.bad:hover{background:var(--bad-soft)}
.sp-menu-sep{height:1px;background:var(--line);margin:5px -6px}
/* Avancement : le cycle de vie du travail, distinct de l'état du chiffrage. */
.pill-av-a_chiffrer{background:var(--surface-2);color:var(--ink-2)}
.pill-av-a_commencer{background:var(--accent-soft);color:var(--accent-ink)}
.pill-av-en_cours{background:var(--warn);color:#fff}
.pill-av-en_recette{background:var(--info);color:#fff}
.pill-av-termine{background:var(--ok);color:#fff}
.pill-av-abandonne{background:var(--ink-3);color:#fff}
.sp-av-bloc{margin-left:5px;opacity:.85}
/* Un point terminé ne doit plus attirer l'œil : le chiffrage passe au gris,
seul « Terminé » garde sa couleur. */
tr.sp-done td{color:var(--ink-3)}
tr.sp-done .sp-est-n,tr.sp-done .sp-sect b{color:var(--ink-3)}
tr.sp-done .sp-est .pill{background:var(--surface-2);color:var(--ink-3)}
tr.sp-done .sp-cnt,tr.sp-done .sp-cnt.on{color:var(--ink-3);font-weight:400}
/* Sélecteur d'avancement dans l'en-tête du volet */
.sp-avsel{width:auto;min-width:0;padding:4px 26px 4px 11px;font-size:11px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;border:none;border-radius:20px;line-height:1.4;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center;background-size:8px 5px;appearance:none;-webkit-appearance:none}
.sp-avsel.pill-av-a_chiffrer,.sp-avsel.pill-av-a_commencer{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235A6675'/%3E%3C/svg%3E")}
.sp-avsel option{text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink);background:var(--surface)}
.sp-avlab{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700}
/* Sélecteur d'état de l'estimation dans l'en-tête du volet (18/09/2026) :
même mécanique que .sp-avsel, pour que changer l'état soit un aller-retour
trivial (choisir une autre valeur) plutôt qu'une paire d'actions à sens
unique comme "mettre/sortir du stand-by" qui pouvait écraser un chiffrage. */
.sp-estsel{width:auto;min-width:0;padding:4px 26px 4px 11px;font-size:11px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;border:none;border-radius:20px;line-height:1.4;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center;background-size:8px 5px;appearance:none;-webkit-appearance:none}
.sp-estsel.pill-est-offert{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231B7A4E'/%3E%3C/svg%3E")}
.sp-estsel option{text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink);background:var(--surface)}
/* Variante compacte : même sélecteur, dans une cellule du tableau plutôt que
l'en-tête du volet (édition en ligne, demande Julien du 23/09/2026). Les
colonnes Avancement/Estimation sont dimensionnées pour loger le libellé le
plus long (voir colgroup de show.blade.php et .sp-est plus haut) ; l'ellipse
ci-dessous ne sert donc que de filet de sécurité si la colonne est
redimensionnée plus étroite à la main. Flèche en blanc à 60% d'opacité
quel que soit l'état, y compris sur les pastilles à fond clair (à chiffrer,
à commencer, offert) où .sp-avsel/.sp-estsel utilisent normalement une
flèche foncée dans l'en-tête du volet — demande explicite de Julien pour
le tableau, malgré le contraste plus faible sur ces trois états. */
.sp-avsel-row,.sp-estsel-row{padding:3px 22px 3px 9px;font-size:10px;max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff' fill-opacity='0.6'/%3E%3C/svg%3E") !important}
/* Chiffre mis en avant dans une tuile. Une seule taille pour toute la
plateforme : ces nombres étaient écrits en style direct dans les vues, à
26 px dans NDD, 24 px dans Supervision et 20 px sur l'accueil (19/09/2026). */
.chiffre{font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* ══════════════════════════════════════════════════════════════════════
ACCUEIL — tous les outils du compte en un écran (19/09/2026)
══════════════════════════════════════════════════════════════════════ */
.ac-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.ac-tuile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.ac-tuile:hover{border-color:var(--accent)}
.ac-lien{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.ac-mono{width:34px;height:34px;flex:none;border-radius:var(--radius-s);background:var(--accent-soft);
color:var(--accent-ink);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.ac-nom{font-family:var(--font-title);font-weight:700;font-size:15px}
.ac-lien:hover .ac-nom{color:var(--accent)}
.ac-desc{margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.55}
/* Le repère chiffré vient de la même source que l'écran du module : il doit se
lire d'un coup d'œil sans devenir le sujet de la tuile. */
.ac-repere{margin:0;display:flex;align-items:baseline;gap:6px}
.ac-repere b{font-size:24px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-repere span{font-size:12px;color:var(--ink-3)}
.ac-sections{margin-top:auto;padding-top:9px;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:4px 6px}
.ac-sections a{font-size:11.5px;font-weight:600;color:var(--ink-2);text-decoration:none;
padding:3px 8px;border-radius:999px;background:var(--surface-2)}
.ac-sections a:hover{background:var(--accent-soft);color:var(--accent-ink)}
.ac-sections a:focus-visible,.ac-lien:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ══════════════════════════════════════════════════════════════════════
RESPONSIVE — socle commun à tous les modules (19/09/2026)
En dessous de 900 px, les deux colonnes de navigation (rail 64 px +
colonne contextuelle 216 px) mangent 280 px : sur un téléphone de
390 px il ne restait que 110 px de contenu, illisible. Elles passent
donc l'une sous l'autre, en barres horizontales défilantes, et le
contenu prend toute la largeur.
══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
/* Colonne contextuelle : rangée d'onglets sous le bandeau. */
.ctx{width:100%;height:auto;padding:0;border-right:0;
border-bottom:1px solid var(--line);position:sticky;top:54px;z-index:4;
flex-direction:row;align-items:center;gap:0;
/* la colonne redevient une rangée : pas de boîte de défilement ici, sinon
le nom du module collé à gauche perdrait son ancrage. */
overflow:visible}
.ctx.folded{width:100%;padding:0;overflow:visible}
.ctx.folded h2,.ctx.folded .ctx-nav{display:flex}
.ctx-toggle,.ctx-foot{display:none}
/* Le nom du module reste collé à gauche pendant que les onglets défilent
dessous, comme dans Publications (demande Julien du 19/09/2026). Fond
opaque et z-index : sans eux, les onglets passeraient par-dessus le mot. */
.ctx h2{margin:0;padding:0 11px;flex:none;align-self:stretch;display:flex;align-items:center;
position:sticky;left:0;z-index:2;background:var(--surface);color:var(--ink-2);
white-space:nowrap;box-shadow:6px 0 6px -6px rgba(27,36,48,.18)}
.ctx-nav{flex-direction:row;flex:1;min-width:0;gap:2px;padding:8px 10px 8px 0;
overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ctx-nav::-webkit-scrollbar{display:none}
.ctx-item{flex:none;white-space:nowrap;padding:7px 11px;font-size:12.5px;line-height:1.2}
/* Second niveau (Gestion de projet) : il ne tient pas dans une rangée,
il reprend sa place sous les onglets. */
.ctx .sp-ctx-group,.ctx .sp-ctx-sub{display:none}
/* Bd : la hiérarchie ne tient pas en colonne ici, elle se met à plat dans la
rangée. `display:contents` laisse le titre de base et ses sous-onglets
devenir des enfants directs de la rangée, donc défiler ensemble ; une base
repliée garde ses onglets masqués, son titre suffit à la rouvrir. */
.ctx-base,.ctx-base-sous{display:contents}
.ctx-base.replie .ctx-base-sous{display:none}
.ctx-base-tete{width:auto;flex:none;white-space:nowrap;padding:7px 10px;border-radius:var(--radius-s);
background:var(--surface-2);font-size:11px}
.ctx-base-sous{border-left:0;margin-left:0;padding-left:0}
.ctx-ajouter{margin-top:0}
.main{padding:14px 14px 32px}
.main-head h1{font-size:18px}
.panel{padding:13px 13px;border-radius:var(--radius-s)}
/* Tout tableau large défile dans sa boîte : c'est la page qui ne doit
jamais partir en travers, pas le tableau qui doit rétrécir à en devenir
illisible. Le cadre qui porte le tableau prend donc le défilement. */
.table{min-width:600px}
.panel:has(>.table),.panel:has(>form>.table),
.panel:has(>table),.card:has(>.table){overflow-x:auto}
.row-2,.row-3{grid-template-columns:1fr}
.form-grid,.form-grid.wide{max-width:none}
.filters .inp,.filters input[type=search].inp{min-width:0;width:100%}
.filters{gap:6px}
.filters>*{flex:1 1 140px}
/* Barres de compteurs et d'actions (NDD) : elles défilaient latéralement sur
une seule ligne, ce qui cachait la recherche et le bouton d'enregistrement.
Sur petit écran, elles s'empilent au lieu de fuir hors de l'écran. */
.ndd-base-stats{flex-wrap:wrap;overflow-x:visible;white-space:normal}
.ndd-base-stats>span[style*="flex"],.filters>span[style*="flex"]{display:none}
.ndd-save-base,.ndd-recherche{width:100%}
.ndd-save-base input{flex:1 1 140px;min-width:0}
.ndd-recherche input{width:100%}
/* Le tableau de phoning en colonnes garde son défilement, mais des colonnes
assez larges pour rester lisibles au doigt. */
.ndd-phoning-col{min-width:240px}
/* Tuiles de chiffres : à 220 px de large minimum, elles tombaient une par
ligne et le moindre écran demandait dix défilements pour lire quatre
nombres. Deux par ligne sur téléphone. */
.pub-grid{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:14px}
.pub-grid .panel{padding:11px 12px}
/* Une tuile qui porte une liste (petit tableau sans en-tête) n'est pas un
chiffre : elle prend la ligne entière et n'hérite pas de la largeur
minimale réservée aux vrais tableaux de données. */
.pub-grid .panel:has(.table){grid-column:1/-1;overflow-x:visible}
.pub-grid .table{min-width:0}
/* Références et dates : elles se coupaient en trois lignes dans une colonne
étroite (TCK–2026–0001). Le tableau défile déjà, autant les garder d'un bloc. */
.table td .ref,.table td code,.ref-chip{white-space:nowrap}
/* Bandeau des pages publiques : le titre était centré en position absolue,
il passait donc par-dessus le logo et le lien sur un écran étroit. */
.pub-header{flex-wrap:wrap;height:auto;padding:12px 14px;gap:8px 12px;row-gap:6px}
.pub-header h1{position:static;transform:none;font-size:17px;order:3;width:100%}
.pub-header img{height:28px}
.pub-header .right{margin-left:auto;font-size:13px}
/* Accueil : une tuile par ligne sur téléphone, deux dès qu'il y a la place. */
.ac-grille{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px}
.ac-tuile{padding:13px 14px}
/* Un grand nombre (48 028) ne doit pas se couper en deux lignes. */
.ac-repere{flex-wrap:wrap;gap:2px 6px}
.ac-repere b,.chiffre,.sv-tile .sv-val{font-size:20px}
/* Espace client et pages publiques : marges resserrées, tableaux qui
défilent dans leur carte plutôt que d'élargir la page. */
.pub-main,.pub-main.wide,.pub-main.gp{max-width:none;padding:20px 14px 32px}
.pub-table{min-width:560px}
/* Cadre de défilement des tableaux client (espace client). */
.pub-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pub-table td:first-child,.pub-table th:first-child{white-space:nowrap}
.pub-card:has(>.pub-table),.pub-card:has(.pub-table){overflow-x:auto}
.pub-btn{display:block;text-align:center}
.pub-form-row,.pub-two{grid-template-columns:1fr}
/* Tiroirs latéraux (fiche prospect NDD, point de projet) : réglés à la
moitié de la fenêtre, ils ne laissaient que 195 px sur un téléphone.
Ils prennent l'écran entier, comme une page. */
.ndd-side,.ndd-side.ndd-side-compact{width:100%;max-width:none}
.ndd-side-head,.ndd-side-body{padding:13px 14px}
.ndd-fiche-grid{grid-template-columns:1fr}
/* Colonnes de détail (ticket, projet) : l'une sous l'autre. */
.ticket-grid{grid-template-columns:1fr}
/* La barre d'outils du ticket (temps passé, statut) sortait de l'écran :
elle tient sur plusieurs lignes et ses champs s'étirent. */
.tk-tools{width:100%}
.tk-tools>form{flex:1 1 100%}
.tk-time{flex-wrap:wrap}
/* Gestion de projet : le tableau des points est à colonnes fixes ; réparti
sur 600 px, chaque colonne tombait à 60 px et les en-têtes se
chevauchaient. Il lui faut sa propre largeur de confort. */
.sp-table{min-width:880px}
/* Les libellés d'en-tête débordaient de leur colonne et se chevauchaient. */
.sp-table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La barre de totaux était calée à 280 px du bord pour laisser la place aux
deux colonnes de menu, qui n'existent plus ici. */
.sp-totaux{left:0;padding:9px 14px;gap:14px}
.sp-totaux .sp-vline{display:none}
.tk-table td.tk-title{max-width:none}
.pub-file-name{max-width:none}
}
/* Téléphone : on resserre encore, et les en-têtes de page passent en pile. */
@media (max-width:560px){
.main{padding:12px 11px 28px}
.main-head{flex-direction:column;align-items:stretch;gap:10px}
.main-head h1{font-size:17px}
.panel{padding:12px 11px}
/* Le nom du module reste visible sur téléphone : c'est le repère qui dit
dans quel outil on se trouve quand les onglets défilent. */
.ctx h2{font-size:11px;padding:0 9px}
.ctx-nav{padding:8px 10px}
}
/* Routines — « Extraction quotidienne » (Julien, 23/09/2026). Le bloc tenait
dans 480 px et laissait les deux tiers de la ligne vides. Mêmes informations,
réparties sur toute la largeur : une case par fait, qui se répartissent
d'elles-mêmes et repassent en colonne quand la place manque. */
.rt-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px}
.rt-fait{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:72px;
padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg)}
.rt-fait-nom{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700}
.rt-fait-val{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3}
/* La pastille d'état garde sa taille : c'est une étiquette, pas un chiffre. */
.rt-fait-val .pill{font-size:11px;font-weight:700}
/* Routines — une carte par campagne (Julien, 22/09/2026).
La séparation se fait par le blanc entre les cartes et par un seul filet de
couleur en haut de chacune. Les lignes restent neutres : seul un liseré à
gauche dit l'état, au lieu d'aplats colorés qui saturaient le tableau. */
.rt-camp{padding:0;overflow:hidden;border-top:3px solid var(--line)}
.rt-camp-visuel{border-top-color:var(--camp-visuel)}
.rt-camp-maint{border-top-color:var(--info)}
.rt-camp-cold{border-top-color:var(--accent-fill)}
.rt-camp-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:13px 16px;border-bottom:1px solid var(--line)}
.rt-camp-sous{font-size:12.5px;color:var(--ink-3)}
.rt-table{margin:0}
.rt-table th{padding:9px 16px;white-space:nowrap}
.rt-table td{padding:11px 16px;vertical-align:top}
.rt-table tbody tr:last-child td{border-bottom:0}
/* Liseré d'état, discret, à la place du fond coloré. */
.rt-ligne td:first-child{box-shadow:inset 3px 0 0 transparent}
.rt-vert td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.rt-orange td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.rt-rouge td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.rt-neutre td:first-child{box-shadow:inset 3px 0 0 var(--line)}
.rt-table tbody tr:hover td{background:var(--bg)}
/* ══════════════════════════════════════════════════════════════════════
NOTIFICATIONS (généralisées le 23/09/2026, nées dans NDD le 22/09/2026)
Un fait à signaler : point rouge en cascade du rail (module) jusqu'à la
colonne contextuelle (section), carte en haut à droite sur la page
concernée. Le rouge est volontaire et ne suit pas la règle de l'orange :
il dit « non lu », pas « en attente ».
══════════════════════════════════════════════════════════════════════ */
.ctx-alerte{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bad);
margin-left:6px;vertical-align:middle;animation:ctxPulse 1.4s ease-in-out infinite}
@keyframes ctxPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.ctx-alerte{animation:none}}
/* ============================================================
Supervision > Maintenance — grille site x mois, carnet de santé.
Réutilise .drawer/.dtabs/.sp-sec/.sp-grid2/.sp-bandeau/.sp-histo/.sv-tile/
.pill/.tag/.btn/.inp déjà définis plus haut ; seuls les composants propres
à cet écran (grille en heatmap, switch, filtres) sont ajoutés ici.
============================================================ */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--surface);gap:2px}
.seg button{all:unset;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:6px 13px;border-radius:999px}
.seg button.on{background:var(--accent-fill);color:#fff}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mx-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin:0 0 14px}
.mx-legend span{display:inline-flex;align-items:center;gap:6px}
.mx-legend i{width:12px;height:12px;border-radius:4px;display:inline-block;flex:none}
.mx-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.mx-table{border-collapse:separate;border-spacing:0;width:100%}
.mx-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700;padding:10px 4px;text-align:center;border-bottom:1px solid var(--line);background:var(--surface)}
.mx-table th.mx-current{color:var(--accent-ink)}
.mx-table th:first-child{text-align:left;padding-left:16px}
.mx-site{position:sticky;left:0;background:var(--surface);z-index:2;padding:9px 16px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:215px}
.mx-site-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;white-space:nowrap}
.mx-site-btn:hover .mx-code{color:var(--accent-ink)}
.mx-code{font-weight:700;font-size:13.5px}
.mx-stack{width:8px;height:8px;border-radius:50%;flex:none}
.mx-stack.wp{background:var(--accent)}
.mx-stack.presta{background:var(--teal)}
td.mx-td{padding:5px;text-align:center;border-bottom:1px solid var(--line);background:var(--surface)}
.mx-cell{all:unset;cursor:pointer;width:28px;height:28px;border-radius:7px;display:inline-block;position:relative;background:var(--surface-2);border:1px solid var(--line)}
.mx-cell:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mx-cell.fait{background:var(--ok);border-color:var(--ok)}
.mx-cell.retard{background:var(--bad);border-color:var(--bad)}
.mx-cell.cours{background:var(--warn);border-color:var(--warn)}
.mx-cell.venir{background:var(--surface-2)}
.mx-cell.incident::after{content:'';position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--info);border:1.5px solid var(--surface)}
.mx-switch{all:unset;cursor:pointer;width:36px;height:19px;border-radius:999px;background:var(--bad);position:relative;display:inline-block;transition:background .15s ease}
.mx-switch:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mx-switch.on{background:var(--ok)}
.mx-switch i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.mx-switch.on i{transform:translateX(17px)}
.tag-h{background:var(--teal-soft);color:var(--teal)}
.tag-u{background:var(--accent-soft);color:var(--accent-ink)}
.tag-hu{background:var(--info-soft);color:var(--info)}
.pill-plug-ok{background:var(--ok-soft);color:var(--ok)}
.pill-plug-todo{background:var(--bad-soft);color:var(--bad)}
.pill-note-incident{background:var(--bad-soft);color:var(--bad)}
.pill-note-client{background:var(--info-soft);color:var(--info)}
.pill-note-note{background:var(--surface-2);color:var(--ink-2)}
.mx-step{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.mx-step:last-child{border-bottom:none}
.mx-step input[type=checkbox]{width:18px;height:18px;margin-top:1px;accent-color:var(--accent-fill);flex:none}
.mx-step label{font-weight:600;font-size:13.5px;cursor:pointer}
.mx-step .mx-step-sub{font-size:12px;color:var(--ink-2);margin-top:2px}
.mx-step .mx-step-ts{font-size:11.5px;color:var(--ok);font-weight:600;margin-top:3px}
.mx-plugin-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.mx-plugin-row:last-child{border-bottom:none}
.mx-presta{text-align:center;padding:26px 10px}
.mx-presta .mx-switch{width:52px;height:28px;margin-bottom:12px}
.mx-presta .mx-switch i{width:22px;height:22px}
.mx-presta .mx-switch.on i{transform:translateX(24px)}
.mx-presta-state{font-weight:700;font-size:14px}
.mx-presta-note{font-size:12.5px;color:var(--ink-2);margin-top:8px;max-width:340px;margin-inline:auto}
.mx-carnet-form{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.mx-carnet-form textarea.inp{resize:vertical;min-height:60px}
.mx-carnet-row{display:flex;gap:8px;align-items:center}
.mx-carnet-row select.inp{width:auto}
.mx-carnet-row .push{flex:1}
.mx-dclose{all:unset;cursor:pointer;color:var(--ink-3);padding:4px;border-radius:6px}
.mx-dclose:hover{background:var(--surface-2);color:var(--ink)}
.mx-dclose svg{width:16px;height:16px}
.c-swatch{all:unset;box-sizing:border-box;width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.c-swatch.on{border-color:var(--ink)}
.c-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:640px){
.mx-toolbar{flex-wrap:wrap}
}
/* ---- Bd · création d'une base (cahier des charges du 24/09/2026) ---- */
.bd-imp-relire{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.bd-imp-relire form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.bd-imp-sep{height:30px;padding:0 8px}
.bd-corr{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px 16px}
.bd-corr-l{display:block}
.bd-corr-t{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.bd-corr-l select{width:100%}
/* Exemple tiré de la première ligne : hauteur réservée pour que la grille ne
sautille pas quand on change de colonne. */
.bd-corr-ex{display:block;min-height:15px;margin-top:3px;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-elts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
/* ── Configurer une base : trois panneaux, un bouton chacun (28/09/2026) ──
Le cadre marqué d'avant faisait « cadre dans cadre » et donnait à cette
section un air de prototype. L'état actif se lit maintenant à la case et au
grisé des vues, pas à une bordure de couleur. */
.bd-cfg-case{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.bd-cfg-nom{font-weight:700;font-size:14px;color:var(--ink)}
.bd-cfg-quoi{margin:7px 0 14px;max-width:104ch}
/* Les vues n'ont de sens que si le suivi est demandé : décoché, elles reculent. */
.bd-cfg:not(.on) .bd-vues{opacity:.42}
.bd-vues label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.bd-cfg-pied{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* Deux actions de même nature, côte à côte, chacune dans sa carte. */
.bd-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.bd-action{display:flex;flex-direction:column;gap:6px;padding:13px 15px;background:var(--surface-2);
border:1px solid var(--line);border-radius:var(--radius-s)}
.bd-action-t{margin:0;font-size:13px;font-weight:700;color:var(--ink)}
.bd-action .hint{margin:0;flex:1}
.bd-action form{margin-top:6px}
.bd-action .btn{background:var(--surface)}
/* ── Sélection de lignes et suppression groupée (28/09/2026) ──
La barre n'apparaît QUE si quelque chose est coché : une barre d'action
permanente et vide occupe la place et n'aide personne. */
.bd-selection-barre{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;
padding:9px 12px;background:var(--accent-soft);border:1px solid var(--accent);
border-radius:var(--radius-s);font-size:13px;font-weight:600;color:var(--accent-ink)}
.bd-col-sel{width:34px;text-align:center;padding-left:6px;padding-right:6px}
.bd-col-sel input{cursor:pointer;margin:0}
.table tr.bd-tr-sel > td{background:var(--accent-soft)}
.btn.bad{color:var(--bad);border-color:var(--bad)}
.btn.bad:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
/* ── Colonnes gardées dans la fiche : modifiables et déplaçables (28/09/2026) ── */
.bf-libre-champ{position:relative;cursor:grab}
.bf-libre-champ:active{cursor:grabbing}
.bf-libre-nom{display:block}
/* Une valeur corrigée à la main se distingue de celle du fichier importé. */
.bf-libre-champ.modifie input{border-color:var(--accent);background:var(--accent-soft)}
.bf-libre-champ.bf-glisse{opacity:.45}
/* Zone d'accueil : discrète au repos, franche quand on survole en glissant. */
.bf-zone{min-height:6px}
.bf-zone.bf-cible{outline:2px dashed var(--accent);outline-offset:3px;border-radius:var(--radius-s)}
.bf-zone:empty{display:none}
.bd-elt{border:1px solid var(--line);border-radius:var(--radius-s);padding:12px 14px;background:var(--surface-2)}
.bd-elt.on{border-color:var(--accent);background:var(--surface)}
.bd-elt-h{display:flex;align-items:center;gap:8px}
.bd-elt-h label{margin:0;cursor:pointer}
.bd-tag-ok{background:var(--ok-soft);color:var(--ok)}
.bd-vues{display:flex;gap:16px;flex-wrap:wrap}
.bd-vues label{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;cursor:pointer}
.bd-vues label:has(input:disabled){opacity:.45;cursor:default}
/* Colonnes du fichier gardees en plus (Julien, 25/09/2026) : une case de la
grille comme les autres. La derniere case sert a en ajouter une, et les
colonnes deja prises y sont grisees. */
.bd-corr-add select{border-style:dashed}
.bd-corr-add[hidden]{display:none}
.bd-corr-libre .bd-corr-t{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.bd-corr-nom{flex:1 1 auto;min-width:0;padding:3px 6px;font-size:12px;font-weight:700;
color:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface)}
.bd-corr-nom:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bd-corr-del{all:unset;cursor:pointer;flex:none;width:18px;height:18px;line-height:16px;
text-align:center;border-radius:50%;color:var(--ink-3);font-size:15px}
.bd-corr-del:hover{background:var(--bad-soft);color:var(--bad)}
.bd-corr-src{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-s);
background:var(--surface-2);color:var(--ink-2);font-size:14px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){ .bd-imp-relire form{margin-left:0} }
/* Apercu d'un fichier importe (Ajouter une base) : memes tableaux que le Suivi
phoning de Suivi Brevo (demande Julien du 25/09/2026). Les colonnes d'un
fichier sont inconnues a l'avance, d'ou une largeur bornee generique. Un
max-width sur un td est ignore en table-layout:auto : la coupure passe par un
element interne, comme .ndd-flux-table le fait avec ses et ses . */
.bd-apercu th{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.bd-ap-c{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;vertical-align:bottom}
/* Crayon de renommage d'une base importée (24/09/2026). Posé SUR la tête et
non dedans : la tête est déjà un