/* Elevora CRM — feuille de style principale.
   Sortie du <style> d'index.html le 17/09/2026, sans une seule règle modifiée.
   Les jetons de thème sont dans :root (sombre) et body.light (clair) ; le reste du
   CRM n'écrit jamais une couleur en dur, il lit ces variables. */

/* ── Charte Elevora (Phase 2) : Bleu Klein (#1B4F8A) = couleur institutionnelle qui porte
   l'interface ; Framboise (#C9266A) = accent réservé à ce qui compte vraiment ; Nuit (#1A1A2E)
   en fond sombre ; Blanc / Gris clair (#F5F5F5) en thème clair. Typo Satoshi (Fontshare).
   En sombre, le Klein est éclairci (#3E7BC2) pour rester lisible ; jamais de framboise en aplat
   dominant — une seule chose audacieuse à la fois. Tous les noms de tokens sont conservés. ── */
/* ── Contraste WCAG 2.2 AA (audit du 18/09/2026, demande de Célian : « rendre le CRM vendable »).
   Seule la luminosité des jetons bouge ; teinte et noms restent. --text3 était à 2,6-3,7:1 dans
   les deux thèmes (452 usages) ; le thème clair n'avait ni vert, ni ambre, ni rouge à lui (1,7 à
   3,3:1 sur blanc) ; en sombre, --accent servait de texte ET de fond sous du blanc, et aucune
   valeur ne tient les deux : --accent-fill porte désormais les aplats sous texte blanc.
   --border-input donne aux contours de champs le 3:1 exigé pour un composant (1.4.11). ── */
:root{--bg:#101020;--bg2:#1A1A2E;--bg3:#24243B;--bg4:#2F2F4A;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);--text:#ECEBF3;--text2:#A6A4BE;--text3:#9896B4;--accent:#5F9DE6;--accent-fill:#3B78BF;--red-fill:#D44044;--border-input:rgba(255,255,255,0.34);--accent2:#2C5C93;--glow:rgba(62,123,194,0.15);--rose:#C9266A;--rose-bg:rgba(201,38,106,0.14);--green:#35b586;--green-bg:rgba(53,181,134,0.1);--amber:#e0a63f;--amber-bg:rgba(224,166,63,0.1);--red:#ED7272;--red-bg:rgba(224,103,103,0.1);--blue:#67A0E4;--blue-bg:rgba(91,147,214,0.12);--pink:#F669AD;--pink-bg:rgba(224,85,154,0.12);--r:10px;--rl:14px;--rs:7px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--font:'Satoshi Centre','Satoshi','Inter',-apple-system,'Segoe UI',sans-serif;--font-display:'Satoshi Centre','Satoshi','Inter',sans-serif;--mono:'DM Mono',ui-monospace,monospace}
body.light{--bg:#F5F5F5;--bg2:#FFFFFF;--bg3:#ECECF1;--bg4:#E0E0EA;--border:rgba(26,26,46,0.09);--border2:rgba(26,26,46,0.17);--text:#1A1A2E;--text2:#474760;--text3:#626279;--accent:#1B4F8A;--accent-fill:#1B4F8A;--red-fill:#AD383D;--border-input:rgba(26,26,46,0.50);--accent2:#143C69;--glow:rgba(27,79,138,0.10);--rose:#C9266A;--rose-bg:rgba(201,38,106,0.10);--blue:#1B4F8A;--blue-bg:rgba(27,79,138,0.08);--pink:#BA0F5E;--pink-bg:rgba(201,38,106,0.10);--green:#01704F;--green-bg:rgba(1,112,79,0.10);--amber:#835B05;--amber-bg:rgba(131,91,5,0.10);--red:#AD383D;--red-bg:rgba(173,56,61,0.10)}
/* ── Un code couleur par type de document (fiche client v3, retour de Célian du 25/09/2026 au
   soir : « dans Contrat, les boutons passent au vert, dans Facture au jaune […] Cahier des
   charges, violet »). Il manquait le violet, et les aplats sous texte des autres teintes (seul le
   bleu et le rouge en avaient). Mesures WCAG sur --bg2, --bg et --bg3, les deux thèmes :
   --violet 6,9:1 (sombre) et 6,9:1 (clair), 5,0:1 au pire sur sa propre teinte --violet-bg ;
   blanc sur --violet-fill 5,5:1 / 6,9:1 ; blanc sur --green-fill 4,95:1 / 6,1:1 ; l'aplat ambre
   porte un texte foncé (--amber-on, 7,9:1) dans les deux thèmes : c'est un aplat « jaune » ; le
   TEXTE ambre, lui, reste foncé en clair (--amber, 6,1:1 sur blanc). --on-fill : le texte des
   autres aplats. ── */
:root{--violet:#B294F4;--violet-bg:rgba(160,125,240,0.14);--violet-fill:#7552CC;--green-fill:#1D7F5B;--amber-fill:#e0a63f;--amber-on:#1A1A2E;--on-fill:#FFFFFF}
body.light{--violet:#6B3FB8;--violet-bg:rgba(107,63,184,0.10);--violet-fill:#6B3FB8;--green-fill:#01704F}
/* ── Le texte au milieu de sa pastille (28/09/2026) ─────────────────────────────────────────
   Retour de Célian : « les mots dans les bulles ne sont pas pile au milieu dans la hauteur » —
   Tâches (Réglages, Assignée à, Type, Étape, Échéance, Liste de travail), onglets de la fiche,
   « et sûrement plein d'autres ». Mesuré dans Chrome (dev/centrage-navigateur.js, ~1 900 boîtes
   sur 29 écrans) : la MISE EN PAGE était juste presque partout — boîte du texte centrée à 0,5 px
   près. La cause est dans la police : le navigateur centre la zone ascendante + descendante
   (Satoshi : 1,010 em au-dessus de la ligne de base, 0,240 em en dessous), ce qui centre les
   CAPITALES ; or un intitulé est fait de minuscules, et la hauteur d'x de Satoshi est petite
   (0,49 em) : leur corps tombe sous le milieu. Écart entre le centre optique (à mi-chemin du
   centre des capitales et de celui des minuscules) et le centre de la pastille, sur les mots
   cités par Célian : +0,5 à +1,0 px (texte trop bas) ; en ligne, en Inter (voir plus bas), pareil.
   Corriger bouton par bouton, c'était des centaines de paddings à décaler d'un demi-pixel.
   La correction est faite une fois, à la source : la même Satoshi, déclarée sous le nom
   « Satoshi Centre » avec des métriques verticales déplacées (ascent-override / descent-override),
   de sorte que le milieu de sa zone tombe 0,35 em au-dessus de la ligne de base au lieu de 0,385.
   Chrome arrondit ces métriques au pixel : selon la taille, le texte remonte de 0 à 1 px dans sa
   ligne. Plus haut (0,31 em), les capitales seules — initiales, chiffres du calendrier —
   passaient à plus d'1 px au-dessus du milieu : 0,35 em tient les deux à 1 px près (mesures
   dans le compte rendu du 28/09/2026). La somme reste 1,25 em : les hauteurs de ligne ne bougent
   pas — boutons, champs, fenêtres et écrans à venir en profitent sans rien écrire de plus.
   Fichiers : ceux que sert Fontshare (mêmes adresses que dans sa feuille). Si l'un disparaissait,
   la pile retombe sur « Satoshi » (Fontshare, métriques d'origine) puis Inter : rien ne casse.
   Le .htaccess autorise cdn.fontshare.com depuis le même jour : sa politique de contenu ne
   laissait passer qu'api.fontshare.com (la feuille), pas les fichiers — en ligne, Satoshi était
   refusée et le CRM s'affichait en Inter depuis la mise en ligne du 25/09/2026. */
@font-face{font-family:'Satoshi Centre';font-style:normal;font-weight:400;font-display:swap;ascent-override:97.5%;descent-override:27.5%;
  src:url('https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2')}
@font-face{font-family:'Satoshi Centre';font-style:normal;font-weight:500;font-display:swap;ascent-override:97.5%;descent-override:27.5%;
  src:url('https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2')}
@font-face{font-family:'Satoshi Centre';font-style:normal;font-weight:700;font-display:swap;ascent-override:97.5%;descent-override:27.5%;
  src:url('https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2')}
@font-face{font-family:'Satoshi Centre';font-style:normal;font-weight:900;font-display:swap;ascent-override:97.5%;descent-override:27.5%;
  src:url('https://cdn.fontshare.com/wf/NHPGVFYUXYXE33DZ75OIT4JFGHITX5PE/PSUTMASCDJTVPERDYJZPN23BVUFUCQIF/J64QX5IPOHK56I2KYUNBQ5M2XWZEYKYX.woff2') format('woff2')}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.6}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.layout{display:flex;min-height:100vh}
.sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;padding:0 0 1.5rem;overflow:hidden}
.logo{padding:1.5rem 1.25rem 1rem;border-bottom:1px solid var(--border);margin-bottom:.75rem}
.logo-mark{display:flex;align-items:center;gap:8px}
.logo-icon{width:28px;height:28px;background:var(--accent-fill);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff}
.logo-name{font-size:18px;font-weight:700;letter-spacing:.2px;font-family:var(--font-display)}
.logo-sub{font-size:10px;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.nav-s{padding:.25rem .75rem;margin-bottom:.25rem;flex:1;min-height:0;overflow-y:auto}
/* Padding égal en haut et en bas (28/09/2026) : ce titre de groupe est un bouton dont le survol
   dessine une pastille, et .5rem .25rem y posait le mot 2 px sous le milieu. */
.nav-l{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;padding:.375rem .5rem}
.nav-group-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:6px;transition:background .12s;user-select:none}
.nav-group-header:hover{background:var(--bg3);color:var(--text2)}
.nav-group-chev{font-size:11px;color:var(--text3);transition:transform .2s;display:inline-block}
.nav-group-header.collapsed .nav-group-chev{transform:rotate(-90deg)}
.nav-group-body{overflow:hidden;transition:max-height .25s ease,opacity .2s,margin .2s;max-height:600px;opacity:1}
.nav-group-body.collapsed{max-height:0;opacity:0;margin:0;pointer-events:none}
.nav-i{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r);cursor:pointer;color:var(--text2);font-size:13.5px;transition:all .15s;user-select:none}
.nav-i:hover{background:var(--bg3);color:var(--text)}
.nav-i.active{background:var(--glow);color:var(--accent);font-weight:500}
.nav-ic{font-size:15px;width:18px;text-align:center;flex-shrink:0}
/* Densité d'affichage (préférence perso, Lot 1) — resserre les tableaux, surtout utile en Comptabilité.
   !important nécessaire : la majorité des cellules du CRM ont leur padding en style inline. */
body.density-compact td,body.density-compact th{padding:4px 8px!important;font-size:12.5px!important}
body.density-compact .nav-i{padding:5px 10px;font-size:12.5px}
/* Brief 09/2026 §25 — « Compact » et « Confortable » ne produisaient aucune différence visible hors
   tableaux. Compact resserre désormais tout : cartes, lignes de documents, tuiles KPI, champs,
   boutons, marges de section. Confortable = valeurs par défaut du thème. */
body.density-compact{--r:6px;--rl:9px}
body.density-compact .cc,body.density-compact .compta-section,body.density-compact .compta-kpi{padding:.8rem 1rem!important}
body.density-compact .compta-kpi-value{font-size:20px}
body.density-compact .di{padding:6px 10px}
body.density-compact .fi,body.density-compact .fsel,body.density-compact .fta{padding:6px 9px;font-size:12.5px}
body.density-compact .btn{padding:6px 11px;font-size:12.5px}
body.density-compact .sec{padding-top:1rem}
body.density-compact .profile-header{padding:1rem 1.2rem}
body.density-compact .compta-hero{gap:10px;margin-bottom:1rem}
body.density-compact .empty-state{padding:1.25rem}
body.density-compact h2{font-size:19px!important}
body.density-compact .doc-folder{padding:7px 10px}
.nav-b{margin-left:auto;background:var(--bg4);color:var(--text3);font-size:10px;font-family:var(--mono);padding:1px 6px;border-radius:20px;border:1px solid var(--border)}
.nav-i.active .nav-b{background:var(--glow);color:var(--accent);border-color:transparent}
.sb-bot{margin-top:auto;padding:.75rem;border-top:1px solid var(--border)}
.sb-stat{background:var(--bg3);border-radius:var(--r);padding:10px 12px}
.sb-stat-l{font-size:10px;color:var(--text3);margin-bottom:4px}
.sb-stat-v{font-size:18px;font-weight:600;font-family:var(--mono)}
.main{margin-left:220px;flex:1;display:flex;flex-direction:column;min-height:100vh}
/* Visible uniquement des lecteurs d écran : sert aux libellés d état (ex. téléchargement
   en cours) qui doivent être annoncés sans occuper de place à l écran. */
/* [V19] 06/10/2026 (audit responsive) : ancré à gauche. Sans « left », un texte pour lecteur d'écran garde sa place
   d'origine : au bout d'un tableau qui défile, son cadre de référence étant hors de la zone qui défile, il
   élargissait toute la page (Tâches : 240 px de trop à 1024 px). */
.sr-only{position:absolute;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.burger-btn{display:none;width:42px;height:42px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);cursor:pointer;align-items:center;justify-content:center;color:var(--text2);transition:all .15s;flex-shrink:0}
.burger-btn:hover{border-color:var(--border2)}
/* ── BARRE DU HAUT — refaite le 25/09/2026 ────────────────────────────────────────────────
   Retour de Célian : « elle fait cheap maintenant comparé au reste du CRM ». Ce qui clochait :
   cinq commandes de cinq hauteurs (42, 42, 32, 18 et 36 px), un interrupteur de thème de 34 px
   perdu entre la recherche et la cloche, un « + » tapé au clavier en guise d'icône, un titre seul
   sans repère, et le filtre de période collé au titre sur les trois pages où il servait.
   Maintenant, trois zones de part et d'autre d'une recherche centrée (les deux côtés ont le même
   flex, la recherche tombe au milieu à toutes les largeurs) : à gauche, où l'on est — le groupe du
   menu en petites capitales au-dessus du titre, comme les titres de groupe de la barre latérale ;
   au centre, la recherche ; à droite, les outils, un filet, puis l'action principale. Une seule
   hauteur de commande, 40 px ; les boutons à icône sont nus au repos et prennent le fond --bg3 au
   survol, comme les entrées du menu. Aucune couleur écrite en dur. */
.topbar{height:64px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 var(--s5);gap:var(--s4);position:sticky;top:0;z-index:40;flex-wrap:nowrap}
.tb-titre{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.tb-contexte{margin:0;font:600 10.5px/1.3 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-contexte[hidden]{display:none}
.tb-title{font:700 19px/1.25 var(--font-display);letter-spacing:-.2px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-search{display:flex;align-items:center;gap:10px;flex:0 1 440px;min-width:200px;height:40px;padding:0 14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);transition:border-color .15s,background-color .15s}
.tb-search:hover{border-color:var(--border2)}
.tb-search:focus-within{border-color:var(--accent);background:var(--bg2)}
.tb-search-ic{display:inline-flex;flex-shrink:0;color:var(--text3)}
.tb-search input{flex:1;min-width:0;height:100%;background:none;border:none;outline:none;color:var(--text);font:400 14px var(--font)}
.tb-search input::placeholder{color:var(--text3)}
/* min-width:max-content : les outils ne rétrécissent jamais sous leur taille — sans lui, à 1 024 px,
   ils débordaient vers la gauche par-dessus la recherche. C'est le titre qui cède (points de
   suspension), puis la recherche. */
.tb-actions{flex:1 1 0;min-width:max-content;display:flex;align-items:center;justify-content:flex-end;gap:var(--s2)}
.tb-icone{position:relative;flex-shrink:0;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--text2);cursor:pointer;font-family:inherit;transition:background-color .15s,color .15s,border-color .15s}
.tb-icone:hover,.tb-icone[aria-expanded="true"]{background:var(--bg3);color:var(--text)}
.tb-icone[aria-expanded="true"]{border-color:var(--border2)}
.tb-cloche{position:relative;flex-shrink:0}
/* Le compteur : son fond (--red-fill, ou la couleur de priorité posée par updateNotifBadge) tient
   4,5:1 sous du blanc ; l'anneau de la couleur de la barre le détache de la cloche. */
.tb-pastille{position:absolute;top:3px;left:21px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red-fill);color:#fff;font:700 10px/1 var(--mono);align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg2);pointer-events:none}
.tb-sep{flex-shrink:0;width:1px;height:24px;margin:0 var(--s1);background:var(--border2)}
.tb-nouveau{flex-shrink:0;height:40px;padding:0 16px 0 13px;gap:7px;font-size:13.5px;font-weight:600}
.tb-nouveau svg{flex-shrink:0}
/* Espace d'un agent commercial : la barre se réduit au thème (voir « L'espace d'un agent
   commercial » plus bas, qui visait l'ancien bouton par .topbar > .btn-p). */
body.espace-agent .tb-nouveau,body.espace-agent .tb-sep,body.espace-agent .tb-contexte{display:none!important}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r);border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:13px;font-family:var(--font);cursor:pointer;transition:all .18s cubic-bezier(.2,.8,.3,1);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn:hover{background:var(--bg3);color:var(--text)}
.btn,.btn-p,.btn-sm,.btn-d,.qk-btn-white,.qk-linkbtn,.qk-iconbtn,.qk-fchip,.pt-cat,.eq-tab{transition:background-color .18s cubic-bezier(.2,.8,.3,1),color .18s cubic-bezier(.2,.8,.3,1),border-color .18s cubic-bezier(.2,.8,.3,1),transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .18s cubic-bezier(.2,.8,.3,1)}
.btn:hover,.btn-p:hover,.btn-sm:hover,.btn-d:hover,.qk-btn-white:hover,.qk-iconbtn:hover,.qk-fchip:hover,.pt-cat:hover{transform:translateY(-1px);box-shadow:0 3px 10px -3px rgba(0,0,0,.28)}
.btn:active,.btn-p:active,.btn-sm:active,.btn-d:active,.qk-btn-white:active,.qk-iconbtn:active,.qk-fchip:active,.pt-cat:active{transform:translateY(0);box-shadow:none}
.btn:disabled:hover,.btn-p:disabled:hover,.btn-sm:disabled:hover{transform:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.btn,.btn-p,.btn-sm,.btn-d,.qk-btn-white,.qk-linkbtn,.qk-iconbtn,.qk-fchip,.pt-cat,.eq-tab{transition:none}.btn:hover,.btn-p:hover,.btn-sm:hover,.btn-d:hover,.qk-btn-white:hover,.qk-iconbtn:hover,.qk-fchip:hover,.pt-cat:hover{transform:none;box-shadow:none}}
.btn-p{background:var(--accent-fill);color:#fff;border-color:transparent;font-weight:500}
.btn-p:hover{background:var(--accent2);color:#fff}
.btn-sm{padding:4px 10px;font-size:12px}
/* 02/10/2026 (points 4, 10 et 14) — une hauteur commune pour les commandes.
   Constat de Célian : deux contrôles côte à côte n'avaient jamais la même taille (bouton 32 px,
   liste 34, petit bouton 25), et les petits boutons étaient trop petits pour être visés.
   --cmd-h donne la hauteur des boutons, champs d'une ligne et listes ; .btn-sm reste un cran plus
   compact quand il est seul (32 px). Dans un groupe, tout s'aligne sur --cmd-h, même taille de
   texte, même bordure : classe partagée .groupe-cmd (règle d'interface du CLAUDE.md), et les
   conteneurs d'actions existants, qui suivent la même règle. */
:root{--cmd-h:36px}
.btn{min-height:var(--cmd-h)}
.btn-sm{min-height:32px;padding:5px 12px;font-size:12.5px}
input.fi,.fsel{min-height:var(--cmd-h)}
.groupe-cmd{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
:is(.groupe-cmd,.tk-fiche-ajout,.cdc-actions,.ech-boutons,.ea-actions,.ea-ligne,.rel-actions,.lc-ajout,.agw-pied,.tk-fenetre-pied,.rel-dates,.comm-champs,.fp-trio,.act-filtres,.tk-outils)>:is(.btn,.fi,.fsel){height:var(--cmd-h);min-height:var(--cmd-h);padding-top:0;padding-bottom:0;font-size:13px;border-width:1px;border-style:solid}
:is(.groupe-cmd,.tk-fiche-ajout,.cdc-actions,.ech-boutons,.ea-actions,.ea-ligne,.rel-actions,.lc-ajout,.agw-pied,.tk-fenetre-pied,.rel-dates,.comm-champs,.fp-trio,.act-filtres,.tk-outils)>:is(.btn,.fi,.fsel):not(textarea){box-sizing:border-box}
.btn-g{border-color:transparent}.btn-g:hover{border-color:var(--border)}
.btn-d:hover{background:var(--red-bg);color:var(--red);border-color:transparent}
.pf-btn{padding:5px 13px;border-radius:7px;font-size:12px;cursor:pointer;color:var(--text2);background:transparent;border:none;font-family:var(--font);transition:all .15s;white-space:nowrap;height:32px;display:flex;align-items:center}
.pf-btn:hover{color:var(--text)}
.pf-btn.active{background:var(--bg2);color:var(--text);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.pf-btn-sm{padding:3px 8px;border-radius:6px;font-size:11px;cursor:pointer;color:var(--text3);background:transparent;border:1px solid var(--border);font-family:var(--font);transition:all .15s}
.pf-btn-sm.active{background:var(--glow);color:var(--accent);border-color:transparent}
/* Bascule de thème (25/09/2026) : une piste de 52 × 28 px, au contour --border-input (3:1, comme
   un champ), dont le curseur porte l'icône du thème actif (#theme-icon, _setThemeIcon) — soleil à
   gauche en clair, lune à droite en sombre. L'ancienne piste de 34 × 18 px n'avait qu'une pastille
   grise, et l'icône flottait à côté. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:40px;padding:0 4px;cursor:pointer;user-select:none}
.theme-toggle input{display:none}
.theme-track{position:relative;flex-shrink:0;width:52px;height:28px;border-radius:14px;background:var(--bg3);border:1px solid var(--border-input);transition:background-color .2s}
.theme-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--bg2);color:var(--text2);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .2s cubic-bezier(.2,.8,.3,1),background-color .2s,color .2s}
.theme-toggle:hover .theme-track{background:var(--bg4)}
.theme-toggle input:checked~.theme-track{background:var(--bg4)}
.theme-toggle input:checked~.theme-track .theme-thumb{transform:translateX(24px);background:var(--accent-fill);color:#fff}
.theme-icon{display:inline-flex;line-height:0}
@media (prefers-reduced-motion:reduce){.theme-thumb,.theme-track{transition:none}}
.content{padding:1.5rem;flex:1}
.sec{display:none}.sec.active{display:block}
/* Entrée orchestrée (Phase 6) : UNE cascade discrète des premiers blocs de la section entrante
   — un seul mouvement, déclenché au bon moment, jamais d'effets dispersés. Les blocs au-delà
   du 6e arrivent ensemble : la cascade guide l'œil, elle ne fait pas attendre. */
.sec.active>*{animation:elv-rise .32s cubic-bezier(.2,.8,.3,1) both}
.sec.active>*:nth-child(1){animation-delay:0s}
.sec.active>*:nth-child(2){animation-delay:.045s}
.sec.active>*:nth-child(3){animation-delay:.09s}
.sec.active>*:nth-child(4){animation-delay:.135s}
.sec.active>*:nth-child(5){animation-delay:.18s}
.sec.active>*:nth-child(6){animation-delay:.225s}
.sec.active>*:nth-child(n+7){animation-delay:.25s}
@keyframes elv-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sec.active>*{animation:none}}
.mg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem}
/* ── GRILLE BENTO DE LA VUE D'ENSEMBLE (lot 1) ──────────────────────────────
   La page était en colonne unique : chaque bloc prenait toute la largeur, l'un sous l'autre,
   d'où « c'est très linéaire, tout en longueur ». 12 colonnes ≥1200px, 8 colonnes ≥1024px,
   une seule en dessous. Chaque bloc déclare sa largeur via --sp (span) aux trois paliers. */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-bottom:1.5rem;align-items:start}
.bento>*{grid-column:span var(--sp,12);min-width:0}
@media(max-width:1199px){.bento{grid-template-columns:repeat(8,1fr)}.bento>*{grid-column:span var(--sp-md,8)}}
@media(max-width:1023px){.bento{grid-template-columns:1fr}.bento>*{grid-column:1/-1}}
/* Tuiles KPI : 132px max, chiffres tabulaires pour que les colonnes s'alignent à l'œil. */
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:.85rem 1rem;
     position:relative;overflow:hidden;max-height:132px;display:flex;flex-direction:column;justify-content:center}
.kpi-l{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;position:relative;z-index:1}
.kpi-v{font-size:24px;font-weight:600;font-family:var(--mono);letter-spacing:-1px;font-variant-numeric:tabular-nums;position:relative;z-index:1;line-height:1.1}
.kpi-s{font-size:11px;color:var(--text3);margin-top:4px;position:relative;z-index:1;line-height:1.35}
.kpi-hero{min-height:132px}
.kpi-hero .kpi-v{font-size:38px;font-weight:900;font-family:var(--font);letter-spacing:-1.5px;color:var(--green,#2dca8c)}
.kpi-spark{position:absolute;left:0;right:0;bottom:0;height:44px;opacity:.5;pointer-events:none;z-index:0}
.kpi-up{color:var(--green,#2dca8c)}.kpi-down{color:var(--red,#e06767)}
.kpi-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.kpi-grid2{grid-template-columns:1fr}}
/* Entonnoir de production — barres horizontales décroissantes, pas un camembert. */
.fun{display:flex;flex-direction:column;gap:7px}
.fun-r{display:grid;grid-template-columns:118px 1fr auto;align-items:center;gap:10px;cursor:pointer}
.fun-r:hover .fun-b{filter:brightness(1.15)}
.fun-l{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fun-t{background:var(--bg4);border-radius:5px;height:22px;overflow:hidden}
.fun-b{height:100%;background:var(--accent);border-radius:5px;transition:width .3s;min-width:2px}
.fun-n{font-family:var(--mono);font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Avancement projet avec repère d'échéance sur le même axe. */
.pj{display:flex;flex-direction:column;gap:11px}
.pj-r{cursor:pointer}
.pj-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.pj-n{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-m{font-size:11px;color:var(--text3);font-family:var(--mono);white-space:nowrap}
.pj-t{position:relative;background:var(--bg4);border-radius:5px;height:18px;overflow:visible}
.pj-b{height:100%;border-radius:5px;background:var(--accent);transition:width .3s}
.pj-b.late{background:var(--red,#e06767)}
.pj-d{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text3);border-radius:1px}
.pj-d.over{background:var(--red,#e06767);width:3px}
.elv-empty{text-align:center;padding:1.5rem .75rem;color:var(--text3);font-size:12.5px;line-height:1.55}
.mc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:1rem 1.1rem;transition:border-color .2s}
.mc:hover{border-color:var(--border2)}
.mc-l{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.mc-v{font-size:26px;font-weight:600;font-family:var(--mono);letter-spacing:-1px}
.mc-s{font-size:11px;color:var(--text3);margin-top:3px}
/* Tuile héro (Phase 6, dashboard) : LE chiffre qui compte — CA réalisé — seul à recevoir
   Satoshi Black + Framboise. Les autres tuiles restent sobres : hiérarchie, pas décoration. */
.mc-hero .mc-v{font-size:34px;font-weight:900;font-family:var(--font);letter-spacing:-1.5px;color:var(--rose)}
.cr{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}
.cc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:1.1rem}
.ct{font-size:13px;font-weight:500;margin-bottom:4px}
.cs{font-size:11px;color:var(--text3);margin-bottom:.75rem}
.leg{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.li{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2)}
.ld{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.tc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.th{padding:.875rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fr{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fs{background:var(--bg3);border:1px solid var(--border-input);border-radius:var(--r);color:var(--text2);font-size:12px;font-family:var(--font);padding:5px 10px;cursor:pointer;outline:none;transition:border-color .15s}
.fs:focus{border-color:var(--accent)}
/* Multi-filter dropdown */
.mf-wrap{position:relative;display:inline-block}
.mf-btn{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text2);font-size:12px;font-family:var(--font);padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:5px;user-select:none;transition:border-color .15s;white-space:nowrap}
.mf-btn:hover,.mf-btn.open{border-color:var(--border2);color:var(--text)}
.mf-btn .mf-count{background:var(--accent-fill);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:0 5px;min-width:16px;text-align:center;display:none}
.mf-btn .mf-count.show{display:inline-block}
.mf-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 4px 20px rgba(0,0,0,.4);z-index:100;min-width:170px;padding:4px;animation:mIn .15s ease}
.mf-wrap.open .mf-dropdown{display:block}
.mf-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--text2);transition:background .1s;user-select:none}
.mf-item:hover{background:var(--bg3);color:var(--text)}
.mf-item.checked{color:var(--accent)}
.mf-cb{width:14px;height:14px;border:1.5px solid var(--border-input);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;transition:all .15s}
.mf-item.checked .mf-cb{background:var(--accent-fill);border-color:var(--accent);color:#fff}
.mf-sep{height:1px;background:var(--border);margin:3px 0}
.mf-clear{font-size:11px;color:var(--text3);padding:5px 10px;cursor:pointer;text-align:center;border-top:1px solid var(--border);margin-top:2px}
.mf-clear:hover{color:var(--accent)}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;padding:9px 14px;font-size:10.5px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s;cursor:pointer}
tbody tr:hover td{background:var(--bg3)}
.pw{min-width:80px}
.pb{height:4px;background:var(--bg4);border-radius:2px;overflow:hidden;margin-bottom:3px}
.pf{height:100%;border-radius:2px;background:var(--accent);transition:width .3s}
.pl{font-size:10px;color:var(--text3);font-family:var(--mono)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.b-n{background:var(--blue-bg);color:var(--blue)}.b-n::before{background:var(--blue)}
.b-c{background:var(--amber-bg);color:var(--amber)}.b-c::before{background:var(--amber)}
.b-e{background:var(--glow);color:var(--accent)}.b-e::before{background:var(--accent)}
.b-a{background:var(--pink-bg);color:var(--pink)}.b-a::before{background:var(--pink)}
.b-l{background:var(--green-bg);color:var(--green)}.b-l::before{background:var(--green)}
.b-p{background:var(--red-bg);color:var(--red)}.b-p::before{background:var(--red)}
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap}
.tag-vip{background:rgba(245,166,35,.15);color:var(--amber);border:1px solid rgba(245,166,35,.25)}
.tag-urgent{background:var(--red-bg);color:var(--red);border:1px solid rgba(245,95,95,.2)}
.tag-pause{background:var(--bg4);color:var(--text3);border:1px solid var(--border)}
.tag-prospect{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(91,163,245,.2)}
.tag-fidele{background:var(--green-bg);color:var(--green);border:1px solid rgba(45,202,140,.2)}
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200;backdrop-filter:blur(4px);align-items:center;justify-content:center}
.ov.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:1.5rem;width:min(560px,95vw);max-height:90vh;overflow-y:auto;box-shadow:0 4px 24px rgba(0,0,0,.5);animation:mIn .18s ease}
@keyframes mIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
.modal-t{font-size:16px;font-weight:600;margin-bottom:1.25rem}
.mf{display:flex;justify-content:flex-end;gap:8px;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border);align-items:center}
.stepper{display:flex;align-items:center;margin-bottom:1.5rem}
.step{display:flex;align-items:center;gap:7px}
.step-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;transition:all .2s;border:2px solid var(--border2);color:var(--text3);background:var(--bg3)}
.step.done .step-num{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.step.active .step-num{background:var(--glow);border-color:var(--accent);color:var(--accent)}
.step-label{font-size:12px;color:var(--text3)}
.step.active .step-label{color:var(--text);font-weight:500}
.step.done .step-label{color:var(--green)}
.step-line{flex:1;height:1px;background:var(--border2);margin:0 8px}
.step-content{display:none}.step-content.active{display:block}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.fgr{display:flex;flex-direction:column;gap:5px}
.fgr.full{grid-column:1/-1}
.fl{font-size:11px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:.05em;min-height:18px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px}
.fi,.fsel,.fta{background:var(--bg3);border:1px solid var(--border-input);border-radius:var(--r);color:var(--text);font-size:13px;font-family:var(--font);padding:8px 11px;transition:border-color .15s;outline:none;width:100%}
/* Dossiers de documents (brief 09/2026 §8) */
.doc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.doc-crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:13px}
.doc-crumb{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:7px;cursor:pointer;color:var(--text2);border:1px dashed transparent}
.doc-crumb:hover{background:var(--bg3)}.doc-crumb.cur{color:var(--text);font-weight:600}.doc-crumb.drag{border-color:var(--accent);background:var(--glow)}
.doc-crumb-sep{color:var(--text3);opacity:.6}
.doc-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:10px}
.doc-folder{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}
.doc-folder:hover{border-color:var(--border2)}.doc-folder.drag{border-color:var(--accent);background:var(--glow)}
.doc-folder-ic{color:var(--amber);display:inline-flex}.doc-folder-nm{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-folder-nb{font-size:11px;color:var(--text3);font-family:var(--mono)}
.doc-folder .drem{opacity:0}.doc-folder:hover .drem{opacity:1}
.doc-move{width:auto;max-width:150px;padding:5px 8px;font-size:11.5px;margin-right:6px}
.dz-import{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;border:1px dashed var(--border2);border-radius:10px;font-size:12.5px;color:var(--text3);cursor:pointer;transition:border-color .15s,background .15s}
.dz-import:hover,.dz-import.drag{border-color:var(--accent);background:var(--glow);color:var(--text2)}
/* Suggestions code postal / ville (API Géo, brief 09/2026 §3) */
.adr-suggest{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.35);overflow:hidden;max-height:240px;overflow-y:auto}
.adr-suggest-item{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 12px;cursor:pointer;font-size:13px;color:var(--text)}
.adr-suggest-item span{font-family:var(--mono);font-size:11.5px;color:var(--text3)}
.adr-suggest-item:hover,.adr-suggest-item.sel{background:var(--bg3)}
.fi::placeholder,.fta::placeholder{color:var(--text3)}
/* Points d'équipe (brief du 07/09/2026, §3) */
.eq-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:1.25rem}
.eq-tab{font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--text3);background:none;border:none;
  border-bottom:2px solid transparent;padding:9px 14px;cursor:pointer;margin-bottom:-1px}
.eq-tab:hover{color:var(--text2)}
.eq-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.pt-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pt-cat{font-family:var(--font);font-size:13px;font-weight:600;color:var(--text2);background:var(--bg3);
  border:1px solid var(--border);border-radius:999px;padding:7px 15px;cursor:pointer}
.pt-cat.on{background:var(--glow);border-color:transparent;color:var(--accent)}
.pt-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:16px 18px}
.pt-hist{display:grid;gap:8px}
.pt-hrow{display:flex;align-items:center;gap:12px;padding:10px 13px;background:var(--bg3);
  border:1px solid var(--border);border-radius:var(--r);cursor:pointer;text-align:left;width:100%;font-family:var(--font)}
.pt-hrow.on{border-color:var(--accent)}
.pt-sec{margin-top:16px}
.pt-sec h4{font-size:13px;font-weight:700;color:var(--text);margin:0 0 7px;text-transform:uppercase;letter-spacing:.05em}
.pt-sec ul{margin:0;padding-left:18px;color:var(--text2);font-size:13px;line-height:1.65}
.pt-tag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:5px;background:var(--glow);color:var(--accent);margin-left:7px}
/* Agrandissement +15 % (retour du 07/09) — même convention que les agrandissements précédents
   du CRM (font-size:115% sur le conteneur, brief 09/2026 §14 et §21) : on pose l'échelle une
   fois sur la page plutôt que de retoucher chaque taille une par une, sinon la moindre ligne
   ajoutée plus tard revient à la taille d'avant sans que personne ne s'en aperçoive. */
#declarations-content,#compta-regles-zone{font-size:115%}
#declarations-content .fi,#declarations-content .fsel,#declarations-content .fta,
#compta-regles-zone .fi,#compta-regles-zone .fsel,#compta-regles-zone .fta{font-size:15px}
#declarations-content .btn,#compta-regles-zone .btn{font-size:1em}
/* N° de TVA intracommunautaire — sélecteur pays + saisie doivent lire comme un seul champ.
   Même hauteur, même police, même taille, même retrait de texte des deux côtés. */
.tva-row>.fsel,.tva-row .fi{height:36px;box-sizing:border-box;font-size:13px;line-height:18px;padding:8px 11px}
.tva-row>.fsel{width:118px;flex-shrink:0;font-family:var(--mono)}
.tva-row .fi{width:100%;font-family:var(--mono);padding-left:38px}
#f-tva-prefix{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:13px;line-height:18px;color:var(--text3);pointer-events:none;user-select:none}
.fi:focus,.fsel:focus,.fta:focus{border-color:var(--accent)}
.fsel option{background:var(--bg3)}
.fta{resize:vertical;min-height:60px;line-height:1.5}
/* 02/10/2026 (point 16) : une zone gérée par js/00k-zones-texte.js grandit avec son texte : pas de barre interne. */
.zt-auto{overflow-y:hidden}
.step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
.ts{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.ts input{opacity:0;width:0;height:0}
.tsl{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--bg4);border-radius:20px;transition:.3s;border:1px solid var(--border-input)}
.tsl::before{content:'';position:absolute;height:14px;width:14px;left:2px;bottom:2px;background:var(--text3);border-radius:50%;transition:.3s}
input:checked+.tsl{background:var(--accent-fill);border-color:var(--accent)}
input:checked+.tsl::before{transform:translateX(16px);background:#fff}
.profile-header{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:1.25rem;margin-bottom:1rem;display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.profile-av{width:52px;height:52px;border-radius:12px;background:var(--glow);color:var(--accent);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:18px;font-weight:600;letter-spacing:-.3px;margin-bottom:4px}
.profile-meta{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prog-hero{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;margin:8px 0 4px}
.prog-hero-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--blue));transition:width .4s}
.ptabs{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rl);padding:4px;margin-bottom:1.25rem;width:fit-content;flex-wrap:wrap}
.ptab{padding:9px 20px;border-radius:var(--r);font-size:13.5px;font-weight:500;cursor:pointer;color:var(--text2);transition:all .15s;user-select:none;white-space:nowrap}
.ptab:hover{color:var(--text)}
.ptab.active{background:var(--bg2);color:var(--text);font-weight:500}
/* Profile action buttons bigger */
.profile-actions .btn-sm{padding:7px 14px;font-size:13px}
/* Avancement slider */
.pct-slider-wrap{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;margin-top:8px}
.pct-slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px;color:var(--text2)}
.pct-val{font-size:16px;font-weight:700;font-family:var(--mono);color:var(--accent)}
input[type=range].pct-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--bg4);outline:none;cursor:pointer}
input[type=range].pct-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg2);box-shadow:0 1px 4px rgba(0,0,0,.3)}
input[type=range].pct-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg2)}
.pct-marks{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-top:4px}
.pct-save-btn{margin-top:8px;width:100%}
.ptab-content{display:none}.ptab-content.active{display:block}
.det-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:1rem}
.det-item{background:var(--bg3);border-radius:var(--r);padding:14px 16px;border:1px solid var(--border)}
.det-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:6px}
.det-value{font-size:14px;font-weight:500;color:var(--text);word-break:break-word}
.det-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.det-value{font-size:13px;font-weight:500}
.hist-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.hist-item:last-child{border-bottom:none}
.hist-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;flex-shrink:0}
.hist-body{flex:1}
.hist-action{font-size:13px}
.hist-time{font-size:11px;color:var(--text3);margin-top:2px}
.pb-board{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;overflow-x:auto;padding-bottom:1rem}
.pb-col{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:10px;min-width:148px}
.pb-ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.pb-cnt{font-size:10px;font-family:var(--mono);background:var(--bg4);color:var(--text3);padding:1px 6px;border-radius:20px}
.pb-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:9px 10px;margin-bottom:7px;cursor:grab;transition:all .15s}
.pb-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
/* Drag&drop pipeline (Phase 6) : feedback minimal — opacité sur la carte tirée, bordure accent
   sur la colonne cible. Un seul moment marqué : l'arrivée en « Livré » (flash Framboise bref). */
.pb-card.dragging{opacity:.45;cursor:grabbing}
.pb-col.drop-hover{border-color:var(--accent);border-style:dashed;background:var(--glow)}
.pb-age{font-size:10px;color:var(--text3);margin-top:5px}
.pb-age.old{color:var(--amber)}
@keyframes pb-livre-flash{0%{box-shadow:0 0 0 0 rgba(201,38,106,.55);border-color:var(--rose)}100%{box-shadow:0 0 0 14px rgba(201,38,106,0);border-color:var(--border)}}
.pb-card.flash-livre{animation:pb-livre-flash .6s ease-out}
@media (prefers-reduced-motion:reduce){.pb-card.flash-livre{animation:none}}
/* Grille horaire calendrier (Phase 6) */
.gcal-ev{transition:opacity .15s}
.gcal-ev.dragging{opacity:.45}
.gcal-rz{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.gcal-rz:hover{background:rgba(255,255,255,.22)}
.gcal-col{cursor:pointer}
.pb-cn{font-size:12px;font-weight:500;margin-bottom:3px}
.pb-m{font-size:11px;color:var(--text3)}
.pb-b{font-size:11px;color:var(--accent);font-family:var(--mono);margin-top:4px}
.dg{display:grid;grid-template-columns:240px 1fr;gap:14px}
.dsl{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;max-height:600px;overflow-y:auto}
.dci{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px;display:flex;align-items:center;justify-content:space-between;transition:background .1s}
.dci:last-child{border-bottom:none}
.dci:hover{background:var(--bg3)}
.dci.active{background:var(--glow);color:var(--accent)}
.dm-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:1.25rem}
.dz{border:1.5px dashed var(--border2);border-radius:var(--rl);padding:1.75rem;text-align:center;cursor:pointer;color:var(--text3);font-size:13px;transition:all .2s;margin-bottom:1rem}
.dz:hover,.dz.drag{border-color:var(--accent);background:var(--glow);color:var(--text2)}
.dl{display:flex;flex-direction:column;gap:7px}
.di{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r)}
.dic{width:32px;height:32px;border-radius:8px;background:var(--glow);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.din{flex:1;min-width:0}
.dn2{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm2{font-size:11px;color:var(--text3)}
.drem{color:var(--text3);background:none;border:none;cursor:pointer;padding:4px;font-size:14px;transition:color .15s}
.drem:hover{color:var(--red)}
.di-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.di-action{background:none;border:1px solid var(--border);color:var(--text2);cursor:pointer;padding:7px 14px;font-size:13px;border-radius:7px;font-weight:600;font-family:var(--font);transition:all .15s;white-space:nowrap}
.di-action:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.di-action.edit{color:var(--accent);border-color:rgba(62,123,194,.3)}
.di-action.edit:hover{background:var(--glow);border-color:var(--accent)}
.di-action.dl{color:var(--blue);border-color:rgba(91,163,245,.3)}
.di-action.dl:hover{background:var(--blue-bg);border-color:var(--blue)}
.di-clickable{cursor:pointer;transition:background .12s}
.di-clickable:hover{background:var(--bg3)}
.di-status-badge{display:inline-block;padding:2px 7px;border-radius:10px;font-size:9.5px;font-weight:600;letter-spacing:.04em;margin-left:6px;vertical-align:middle}
.di-status-draft{background:rgba(245,166,35,.14);color:var(--amber)}
.di-status-sent{background:rgba(45,202,140,.14);color:var(--green)}
/* ─── Onglets de projets (refonte) ─── */
.proj-tabs-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 100%);border:1px solid var(--border);border-radius:14px;padding:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.proj-tab{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text2);background:transparent;border:1px solid transparent;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative;user-select:none}
.proj-tab:hover{background:var(--bg2);color:var(--text)}
.proj-tab:hover .proj-tab-icon{color:var(--accent)}
.proj-tab.active{background:var(--bg);color:var(--text);font-weight:600;border-color:var(--border2);box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 1px rgba(62,123,194,.06)}
.proj-tab.active .proj-tab-icon{color:var(--accent)}
.proj-tab.active::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:32px;height:2px;background:linear-gradient(90deg,var(--accent),var(--blue));border-radius:0 0 2px 2px}
.proj-tab-icon{display:flex;align-items:center;color:var(--text3);transition:color .15s;flex-shrink:0}
.proj-tab-dot{width:7px;height:7px;border-radius:50%;background:var(--dot-color);flex-shrink:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--dot-color) 18%,transparent),0 0 6px color-mix(in srgb,var(--dot-color) 50%,transparent)}
.proj-tab-name{letter-spacing:.005em}
.proj-tab-pct{font-size:11px;font-family:var(--mono);color:var(--text3);background:var(--bg3);padding:2px 7px;border-radius:10px;font-weight:600}
.proj-tab.active .proj-tab-pct{background:var(--glow);color:var(--accent)}
.proj-tab-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:5px;color:var(--text3);display:flex;align-items:center;justify-content:center;line-height:1;margin-left:2px;transition:all .12s}
.proj-tab-close:hover{background:rgba(255,80,80,.15);color:#ff5050}
.proj-tab-add{display:flex;align-items:center;gap:5px;background:transparent;border:1.5px dashed var(--border2);border-radius:10px;padding:8px 13px;cursor:pointer;color:var(--text3);font-size:12.5px;font-weight:500;font-family:var(--font);transition:all .15s;white-space:nowrap}
.proj-tab-add:hover{color:var(--accent);border-color:var(--accent);background:var(--glow);border-style:solid}
.proj-tab-add svg{transition:transform .2s}
.proj-tab-add:hover svg{transform:rotate(90deg)}
/* ─── Aspects (prestations) d'un projet — multi-sélection ─── */
.aspect-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.aspect-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;border:1.5px solid var(--border2);background:var(--bg2);color:var(--text2);font-size:12.5px;font-weight:500;cursor:pointer;user-select:none;transition:all .13s}
.aspect-chip:hover{border-color:var(--accent);color:var(--text)}
.aspect-chip .aspect-box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--border-input);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .13s;color:transparent;font-size:10px;font-weight:800;line-height:1}
.aspect-chip.selected{border-color:var(--accent);background:var(--glow);color:var(--text);font-weight:600}
.aspect-chip.selected .aspect-box{background:var(--accent-fill);border-color:var(--accent);color:#fff}
.aspect-hint{font-size:11px;color:var(--text3);margin-top:8px;line-height:1.4}
.back-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text3);cursor:pointer;transition:color .15s;background:none;border:none;font-family:var(--font);padding:0;margin-bottom:1rem}
.back-btn:hover{color:var(--text)}
.toasts{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:10px 14px;font-size:13px;color:var(--text);box-shadow:0 4px 24px rgba(0,0,0,.4);animation:tIn .2s ease;display:flex;align-items:center;gap:8px}
/* Bandeau de notification (Phase 5) — distinct des toasts de confirmation ci-dessus :
   plus large, cliquable, reste jusqu'à interaction/expiration. Empilé au-dessus. */
#notif-toasts{position:fixed;bottom:calc(1.5rem + 60px);right:1.5rem;z-index:998;display:flex;flex-direction:column-reverse;gap:10px;max-width:360px}
.notif-toast{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);padding:13px 14px;box-shadow:0 12px 40px rgba(0,0,0,.35);display:flex;gap:11px;align-items:flex-start;cursor:pointer;animation:elvSlideUp .22s cubic-bezier(.2,.8,.3,1);transition:transform .15s}
.notif-toast:hover{transform:translateY(-2px)}
.notif-toast .nt-actions{flex-shrink:0;display:flex;flex-direction:column;gap:4px}
.notif-toast .nt-snooze,.notif-toast .nt-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:3px;line-height:1;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.notif-toast .nt-snooze:hover,.notif-toast .nt-close:hover{color:var(--text);background:var(--bg3)}
@media (prefers-reduced-motion:reduce){.notif-toast{animation:none}}
@keyframes tIn{from{opacity:0;transform:translateX(20px)}}
.esending{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text3)}
.sp{width:12px;height:12px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Animation des sous-lignes projets dans la table clients */
@keyframes subRowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.cl-subrow{animation:subRowIn .22s cubic-bezier(.4,0,.2,1) both}
.cl-subrow td{animation:none}
.av{width:28px;height:28px;border-radius:8px;background:var(--glow);color:var(--accent);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text3);font-size:13px}
/* ── BLOC 2: DEVIS / CONTRAT ── */
.gen-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:300;backdrop-filter:blur(6px);align-items:flex-start;justify-content:center;padding:1.5rem 1rem;overflow-y:auto}
.gen-ov.open{display:flex}
.gen-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;width:min(1400px,98vw);box-shadow:0 8px 40px rgba(0,0,0,.6);animation:mIn .18s ease;overflow:visible;margin:auto;display:flex;flex-direction:column;max-height:calc(100vh - 3rem)}
.gen-header{background:var(--bg3);border-bottom:1px solid var(--border);padding:1.1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:18px 18px 0 0;flex-shrink:0}
.gen-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.gen-title-ico{width:28px;height:28px;border-radius:8px;background:var(--glow);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.gen-close{width:28px;height:28px;background:none;border:1px solid var(--border2);border-radius:8px;color:var(--text3);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.gen-close:hover{background:var(--red-bg);color:var(--red);border-color:transparent}
.gen-body{display:grid;grid-template-columns:minmax(380px,1fr) 1.6fr;gap:0;overflow:hidden;flex:1;min-height:0}
.gen-form-side{padding:1.25rem 1.5rem;overflow-y:auto;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.gen-preview-side{padding:1.25rem;overflow-y:auto;background:var(--bg3)}
#devis-ov .gen-body{grid-template-columns:1fr}
#devis-ov .gen-preview-side{display:none}
#devis-ov .gen-form-side>.gen-section:not(#dv-gen-section){display:none}
#devis-ov #dv-sections{display:none}
#devis-ov .gen-modal{width:min(680px,96vw)}
#devis-ov #dv-gen-section{padding:44px 26px}
#devis-ov .gen-footer{display:none}
#devis-ov .gen-form-side{border-right:none}
#devis-ov .gen-body{padding:10px}
#contrat-ov .gen-body{grid-template-columns:1fr}
#contrat-ov .gen-preview-side{display:none}
#contrat-ov .gen-form-side>.gen-section:not(#ct-gen-section){display:none}
#contrat-ov .gen-modal{width:min(680px,96vw)}
#contrat-ov #ct-gen-section{padding:44px 26px}
#contrat-ov .gen-footer{display:none}
#contrat-ov .gen-form-side{border-right:none}
#contrat-ov .gen-body{padding:10px}
.gen-section{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}
.gen-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:8px}
.gen-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
.gen-row.full{grid-template-columns:1fr}
.gen-f{display:flex;flex-direction:column;gap:4px}
.gen-l{font-size:10px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:.04em;min-height:26px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px}
.gen-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;flex-shrink:0;border-radius:0 0 18px 18px}
/* Line items table */
.li-table{width:100%;border-collapse:collapse}
.li-table th{text-align:left;font-size:10px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:5px 6px;border-bottom:1px solid var(--border)}
.li-table td{padding:4px 4px;border-bottom:1px solid var(--border);vertical-align:middle}
.li-table tr:last-child td{border-bottom:none}
.li-inp{background:var(--bg3);border:1px solid var(--border-input);border-radius:6px;color:var(--text);font-size:12px;font-family:var(--font);padding:5px 7px;width:100%;outline:none;transition:border-color .15s}
.li-inp:focus{border-color:var(--accent)}
.li-inp.narrow{width:70px}
.li-inp.med{width:90px}
.li-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:2px 4px;transition:color .15s;border-radius:4px}
.li-del:hover{color:var(--red);background:var(--red-bg)}
.add-line-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--accent);background:var(--glow);border:1.5px solid var(--accent);border-radius:7px;padding:7px 14px;cursor:pointer;transition:all .15s;font-family:var(--font);font-weight:600;margin-top:6px}
.add-line-btn:hover{color:#fff;background:var(--accent-fill);border-color:var(--accent);box-shadow:0 2px 8px rgba(62,123,194,.3);transform:translateY(-1px)}
/* Bouton "Ajouter une section" — encore plus visible (pleine largeur) */
.add-section-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-size:13px;color:#fff;background:var(--accent-fill);border:none;border-radius:8px;padding:11px 16px;cursor:pointer;transition:all .15s;font-family:var(--font);font-weight:600;margin-top:10px;box-shadow:0 2px 6px rgba(62,123,194,.25)}
.add-section-btn:hover{background:var(--accent2);box-shadow:0 4px 12px rgba(62,123,194,.4);transform:translateY(-1px)}
/* Preview pane */
.preview-doc{background:#fff;border-radius:var(--r);padding:28px 24px;color:#111;font-family:var(--font);font-size:12px;line-height:1.6;min-height:500px;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.preview-doc.dark-preview{background:#1a1a1e;color:var(--text)}
.prev-logo{font-size:17px;font-weight:700;color:#3E7BC2;letter-spacing:-.4px;margin-bottom:2px}
.prev-ref{font-size:10px;color:#888;font-family:monospace}
.prev-separator{height:2px;background:linear-gradient(90deg,#3E7BC2,#5ba3f5);border-radius:1px;margin:10px 0}
.prev-parties{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}
.prev-party-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:4px}
.prev-party-name{font-size:13px;font-weight:600;margin-bottom:2px}
.prev-party-info{font-size:11px;color:#555;line-height:1.5}
.preview-doc.dark-preview .prev-party-info{color:var(--text2)}
.prev-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:11px}
.prev-table th{text-align:left;padding:6px 8px;background:#f4f3f8;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#555;border-bottom:1px solid #e0dfea}
.preview-doc.dark-preview .prev-table th{background:var(--bg4);color:var(--text3);border-bottom-color:var(--border)}
.prev-table td{padding:6px 8px;border-bottom:1px solid #f0eff6}
.preview-doc.dark-preview .prev-table td{border-bottom-color:var(--border)}
.prev-table tr:last-child td{border-bottom:none}
.prev-total-row{display:flex;justify-content:flex-end;margin-top:8px}
.prev-total-box{background:#3E7BC2;color:#fff;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600}
.prev-notes{font-size:10.5px;color:#666;line-height:1.7;margin-top:12px;padding-top:10px;border-top:1px solid #eee}
.preview-doc.dark-preview .prev-notes{color:var(--text2);border-top-color:var(--border)}
.prev-sig-box{border:1.5px dashed #ccc;border-radius:8px;padding:14px;text-align:center;color:#999;font-size:11px;margin-top:14px}
.prev-footer-doc{font-size:9.5px;color:#aaa;text-align:center;margin-top:14px;padding-top:10px;border-top:1px solid #f0eff0}
/* Send email modal */
.send-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10100;backdrop-filter:blur(4px);align-items:center;justify-content:center}
/* 02/10/2026 (point 1) — un seul voile pour toutes les fenêtres et fiches au premier plan.
   Demande de Célian : derrière une fiche ouverte, le CRM se floute et s'assombrit légèrement, pour
   que le regard aille à la fiche. Avant : onze voiles différents (de 0,28 à 0,82 d'opacité, flou
   ou pas) et une vingtaine écrits en ligne dans le JS. Ici, une seule règle les reprend tous, y
   compris ceux posés en ligne (d'où !important : le style en ligne l'emporterait sinon).
   Hors règle, volontairement : la présentation plein écran (#present-ov, fond opaque), la
   célébration (sans fond, décision de Célian), le projecteur du guide, le voile du menu mobile. */
:root{--voile-fond:rgba(8,8,16,.55);--voile-flou:blur(6px)}
body.light{--voile-fond:rgba(20,20,40,.32)}
:is(.ov,.gen-ov,.send-ov,.ag-ov,.tk-ov,.rdv-ov,.qk-panel-ov),
body>[id$="-ov"]:not(#present-ov):not(#celebration){background:var(--voile-fond)!important;-webkit-backdrop-filter:var(--voile-flou)!important;backdrop-filter:var(--voile-flou)!important}
.send-ov.open{display:flex}
.send-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:1.5rem;width:min(480px,95vw);box-shadow:0 4px 24px rgba(0,0,0,.5);animation:mIn .18s ease}
/* Doc type badge in profile tabs */
/* [P1] 02/10/2026 : point 12 — même étiquette que les onglets Documents de la fiche client
   (css/fiche-client.css) : contour, texte et fond très léger de la teinte du type, en jetons
   (plus de rgba en dur, qui ne suivait pas le thème clair). Le contrat passe au vert de sa
   catégorie (il était en --accent, bleu des devis) ; texte 5,3:1 au moins, deux thèmes. 10 px
   devenaient illisibles : 11,5 px. */
.doc-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--rs);font:600 11.5px/1.4 var(--font);
  border:1px solid color-mix(in srgb,var(--et,var(--text2)) 55%,transparent);background:var(--et-bg,var(--bg3));color:var(--et,var(--text2))}
.doc-badge-devis{--et:var(--blue);--et-bg:var(--blue-bg)}
.doc-badge-contrat{--et:var(--green);--et-bg:var(--green-bg)}
.doc-badge-doc{--et:var(--text2);--et-bg:var(--bg3)}
/* Actions strip in profile header */
.profile-actions{display:flex;gap:6px;flex-wrap:wrap;align-self:flex-start}
@media(max-width:1100px){.mg{grid-template-columns:repeat(2,1fr)}.pb-board{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.gen-body{grid-template-columns:1fr;max-height:none}.gen-form-side{border-right:none;border-bottom:1px solid var(--border)}}
@media(max-width:768px){.sidebar{display:none;position:fixed;top:0;left:0;bottom:0;width:240px;z-index:300;transform:translateX(-100%);transition:transform .25s ease}.sidebar.mob-open{display:flex;transform:translateX(0)}.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;backdrop-filter:blur(2px)}.mob-overlay.open{display:block}.burger-btn{display:flex!important}.main{margin-left:0}.cr{grid-template-columns:1fr}.dg{grid-template-columns:1fr}.fg{grid-template-columns:1fr}.det-grid{grid-template-columns:1fr}.period-filter{display:none}}

/* ═══════════ FONDATIONS ELEVORA (Phase 2) — composants partagés ═══════════ */
/* Badge unifié — base commune pour tous les badges de statut du CRM */
.elv-badge{display:inline-flex;align-items:center;gap:var(--s1);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px var(--s3);border-radius:20px;white-space:nowrap;line-height:1.5}
.elv-badge.b-accent{background:var(--glow);color:var(--accent)}
.elv-badge.b-green{background:var(--green-bg);color:var(--green)}
.elv-badge.b-amber{background:var(--amber-bg);color:var(--amber)}
.elv-badge.b-red{background:var(--red-bg);color:var(--red)}
.elv-badge.b-blue{background:var(--blue-bg);color:var(--blue)}
.elv-badge.b-muted{background:var(--bg3);color:var(--text3)}
/* Skeletons de chargement — remplacent les "Chargement…" en texte brut */
.skel{position:relative;overflow:hidden;background:var(--bg3);border-radius:var(--s2);min-height:14px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:skel-shimmer 1.4s infinite}
body.light .skel::after{background:linear-gradient(90deg,transparent,rgba(20,20,46,.05),transparent)}
@keyframes skel-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}
/* États vides — bloc icône + message + action au lieu d'un simple texte centré */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s6) var(--s5);text-align:center;color:var(--text3)}
.empty-state .es-icon{width:46px;height:46px;border-radius:var(--s3);background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--text3)}
.empty-state .es-title{font-size:14px;font-weight:600;color:var(--text2)}
.empty-state .es-sub{font-size:12.5px;max-width:360px;line-height:1.55}
/* Barre de chargement fine en haut d'écran (requêtes réseau) */
#top-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:20000;opacity:0;transition:width .35s ease,opacity .3s;box-shadow:0 0 8px var(--glow);pointer-events:none}
/* Barres de progression — généralise la transition de largeur déjà bien faite sur les étapes projet */
.pb>div,.pb-fill{transition:width .6s cubic-bezier(.2,.8,.3,1)}
/* Accessibilité — focus clavier visible partout, sans gêner le clic souris */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 02/10/2026 (point 5) : sur un champ, l'anneau débordait de 4 px autour de la case et recouvrait
   le libellé collé dessous (« Motif » sous « Nouveau taux », fenêtre Changer le taux). Sur les
   champs, l'anneau se pose sur le bord même de la case : il reste aussi épais (2 px, couleur
   d'accent, plus la bordure qui passe à l'accent), mais ne sort plus de la case. Les boutons et
   les liens gardent leur anneau décalé. Et dans les fenêtres, deux blocs qui se suivent ne sont
   plus collés à 0 px. */
:where(input,select,textarea):focus-visible{outline-offset:-1px}
#elv-modal-body>*+*{margin-top:12px}
/* Icônes Lucide inline — dimensionnement homogène dans la nav et les boutons */
.nav-ic svg,.elv-ic svg{width:16px;height:16px;display:block}

/* ══════════════════════════════════════════════════════════════════════════════════════
   VUE D'ENSEMBLE — refonte du 18/09/2026, sur le modèle du tableau de bord de Pennylane
   ══════════════════════════════════════════════════════════════════════════════════════
   Le reproche de l'appel du 13/09 : « trop widget ». Dix tuiles de tailles différentes, chacune
   avec son fond, son titre en capitales espacées, son chiffre en police machine. Ce que Pennylane
   fait à la place, et qui est repris ici :
     · un seul bandeau de chiffres, séparés par des filets, au lieu de cinq tuiles ;
     · une grille deux tiers / un tiers : l'analyse à gauche, ce qui attend une action à droite ;
     · des listes denses — une ligne, un nom, une précision grise, le montant aligné à droite ;
     · des libellés en casse de phrase, des chiffres dans la police du texte en chasse fixe ;
     · une seule couleur d'accent ; le rouge, l'ambre et le vert ne servent qu'aux états.
   Aucun jeton de la charte n'est modifié : tout est lu dans les variables des deux thèmes.
   La grille « bento » et les classes .kpi restent définies plus haut, pour les autres écrans. */

.vd{display:grid;gap:16px}
.vd-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;min-width:0}
.vd-card.vd-flush{padding:0;overflow:hidden}
.vd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.vd-flush .vd-head{padding:18px 20px 0;margin-bottom:10px}
.vd-title{font-size:14.5px;font-weight:600;color:var(--text);margin:0;line-height:1.3;letter-spacing:-.005em}
.vd-sub{font-size:12.5px;color:var(--text3);margin-top:3px;line-height:1.4}
.vd-lien{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;color:var(--accent);background:none;border:0;padding:4px 0;cursor:pointer;font-family:inherit;white-space:nowrap}
.vd-lien:hover{text-decoration:underline;text-underline-offset:3px}
.vd-lien svg{width:13px;height:13px}

/* [P1] 02/10/2026 : point 3 — UN style pour tous les bandeaux de chiffres (.chiffres / .chiffre).
   Bandeaux concernés : Vue d'ensemble, Rapports, Pipeline, Prospection, Agents (« Suivi par
   agent », « Ses chiffres », « Vos chiffres »), Banque. Leurs classes pointent ici (même
   sélecteur) ; un nouveau bandeau prend .chiffres > .chiffre > .chiffre-l / .chiffre-v /
   .chiffre-s, et .chiffre-fort pour le chiffre principal.
   Historique : la boîte découpée par des filets gris de 1 px collés « faisait cheap » (brief du
   01/10, capture 03) ; une première reprise sans aucune séparation a été refusée le 02/10 (« il
   n'y a aucune séparation »). Principe retenu : un long rectangle qui contient des rectangles —
   chaque chiffre a sa case, les cases sont regroupées dans un ensemble — séparées par un vrai
   espace de 8 px, coins arrondis, sans dégradé, sans ombre lourde, sans bordure de côté.
   Variante choisie par Célian le 02/10 entre deux propositions (« la B ») : un plateau
   légèrement teinté, sans bord, qui porte des cases au fond de carte, bordées, avec un relief
   d'un pixel en thème clair (aucune ombre en sombre). L'autre (cadre bordé, cases teintées) a
   été écartée.
   Hiérarchie : le chiffre d'abord, en grand ; le libellé dessous (--text2) ; la précision en
   dernier (--text3, 5,0:1 au moins sur la case la plus teintée, deux thèmes). Le chiffre passe en
   tête par `order` : dans le balisage le libellé reste devant (dt avant dd, lu « Clients signés,
   1 »), et les chiffres d'une rangée restent alignés même quand un libellé voisin tient sur deux
   lignes (capture 03). Grille auto-fit : 5 ou 6 cases par rangée au bureau, 2 sur un téléphone
   de 360 à 430 px (le principal sur toute la rangée), 1 sous 330 px. */
/* Sur body et non :root : un jeton qui en lit un autre se résout là où il est déclaré, et c'est
   body.light qui redéfinit --bg2 / --bg3 (sur :root, le cadre restait sombre en thème clair). */
body{--chf-plateau:var(--bg3);--chf-case:var(--bg2);--chf-relief:none}
body.light{--chf-relief:0 1px 2px color-mix(in srgb,var(--text) 7%,transparent)}
.chiffres,.vd-band,.pc-bd,.pr-bd,.agt-kpis,.cb-comptes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  align-items:stretch;gap:6px;margin:0;padding:6px;list-style:none;overflow:visible;
  background:var(--chf-plateau);border:1px solid transparent;border-radius:var(--rl)}
:is(.chiffres,.vd-band,.pc-bd,.pr-bd,.agt-kpis,.cb-comptes):empty{display:none}
.vd-band > #kpi-reste{display:contents}
.chiffre,.vd-fig,.pc-bd-c,.pr-bd-c,.agt-kpi,.cb-compte{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);min-width:0;margin:0;
  padding:14px 16px;background:var(--chf-case);border:1px solid var(--border2);border-radius:var(--r);box-shadow:var(--chf-relief)}
.chiffre-v,.vd-fig-v,.pc-bd-v,.pr-bd-v,.agt-kpi dd,.cb-compte-v{order:-1;margin:0 0 2px;font:600 26px/1.15 var(--font);letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.chiffre-l,.vd-fig-l,.pc-bd-l,.pr-bd-l,.agt-kpi dt,.cb-compte-nom{margin:0;font:500 12.5px/1.35 var(--font);letter-spacing:0;text-transform:none;color:var(--text2)}
.chiffre-s,.vd-fig-s,.cb-compte-s{font-size:12px;line-height:1.45;color:var(--text3)}
.chiffre-fort .chiffre-v,.vd-fig.vd-principal .vd-fig-v,.cb-compte-global .cb-compte-v{font-size:34px}
body.density-compact :is(.chiffre,.vd-fig,.pc-bd-c,.pr-bd-c,.agt-kpi,.cb-compte){padding:12px 14px}
/* Téléphone : le chiffre principal prend la rangée entière, les autres vont par deux. */
@media (max-width:560px){
  :is(.chiffre,.vd-fig,.pc-bd-c,.pr-bd-c,.agt-kpi,.cb-compte){padding:12px}
  .chiffre-v,.vd-fig-v,.pc-bd-v,.pr-bd-v,.agt-kpi dd,.cb-compte-v{font-size:22px}
  .chiffre-fort,.vd-fig.vd-principal,.cb-compte-global{grid-column:1 / -1}
  .chiffre-fort .chiffre-v,.vd-fig.vd-principal .vd-fig-v,.cb-compte-global .cb-compte-v{font-size:28px}
}
.vd-fig-s b{font-weight:500;color:var(--text2)}
.vd-spark{height:34px;margin-top:6px;position:relative}
.vd-delta{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:5px;font-variant-numeric:tabular-nums;margin-right:4px}
.vd-delta.up{color:var(--green);background:var(--green-bg)}
.vd-delta.down{color:var(--red);background:var(--red-bg)}
.vd-delta.flat{color:var(--text3);background:var(--bg3)}

/* Deux tiers / un tiers */
.vd-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:16px;align-items:start}
.vd-main,.vd-side{display:grid;gap:16px;min-width:0}
/* Un élément de grille garde par défaut la largeur de son contenu le plus long : sans cette
   règle, une ligne de « Et maintenant ? » faisait déborder toute la colonne hors de l'écran. */
.vd-main > *,.vd-side > *{min-width:0}

/* Sélecteur de période du graphique : un groupe segmenté, pas quatre boutons épars */
.vd-seg{display:inline-flex;background:var(--bg3);border-radius:8px;padding:3px;gap:2px}
.vd-seg .pf-btn-sm{border:0;background:transparent;color:var(--text3);font-size:12px;font-weight:500;padding:5px 10px;border-radius:6px}
.vd-seg .pf-btn-sm.active{background:var(--bg2);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Lignes de liste */
.vd-rows{display:flex;flex-direction:column}
.vd-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--border);min-width:0}
.vd-row:first-child{border-top:0;padding-top:2px}
.vd-row.vd-clic{cursor:pointer}
.vd-row.vd-clic:hover .vd-row-n{color:var(--accent)}
.vd-row-c{flex:1;min-width:0}
.vd-row-n{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s}
.vd-row-s{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.vd-num{font-family:var(--font);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);text-align:right}
.vd-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg3);color:var(--text2)}
.vd-ico svg{width:14px;height:14px}
.vd-ini{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg3);color:var(--text2);font-size:11px;font-weight:600}
.vd-pill{display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:6px;white-space:nowrap;line-height:1.5}
.vd-pill.rouge{color:var(--red);background:var(--red-bg)}
.vd-pill.ambre{color:var(--amber);background:var(--amber-bg)}
.vd-pill.vert{color:var(--green);background:var(--green-bg)}
.vd-pill.neutre{color:var(--text2);background:var(--bg3)}
.vd-plus{font-size:12px;color:var(--text3);padding-top:10px}
.vd-plus button{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:500;cursor:pointer}

/* Barres fines : avancement des projets, entonnoir, charge */
.vd-bar{position:relative;height:6px;border-radius:3px;background:var(--bg4);margin-top:8px}
.vd-bar-f{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--accent);min-width:2px}
.vd-bar-f.late{background:var(--red)}
.vd-bar-m{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:1px;background:var(--text3)}
.vd-bar-m.over{background:var(--red)}
.vd-lh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

/* « Et maintenant ? » dans la colonne de droite */
.vd-act{display:flex;align-items:center;gap:6px;flex-shrink:0}
.vd-act .btn{padding:5px 10px;font-size:12px}
.vd-sev{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:1px}

/* Tableau « Derniers clients » */
#sec-dashboard .vd-table table{width:100%}
#sec-dashboard .vd-table thead th{font-size:12px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--text3);padding:10px 20px;border-bottom:1px solid var(--border)}
#sec-dashboard .vd-table tbody td{padding:11px 20px;font-size:13px}
#sec-dashboard .vd-table tbody tr:last-child td{border-bottom:0}

.vd-graph{position:relative;height:230px}
.vd-graph.bas{height:210px}

@media (max-width:1180px){
  .vd-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .vd-card{padding:16px}
  #sec-dashboard .vd-table thead th,#sec-dashboard .vd-table tbody td{padding-left:14px;padding-right:14px}
}
body.density-compact .vd-card{padding:14px 16px}
body.density-compact .vd-row{padding:8px 0}

/* Barre du haut entre 769 et 1439 px — portable de 13 pouces, tablette en paysage (18/09/2026).
   Filtre de période, recherche de 260 px, bascule de thème, cloche et « Nouveau client » ne
   tenaient pas à côté de la barre latérale : la barre du haut poussait toute la page à 1 375 px
   de large pour un écran de 1 024, et chaque écran défilait de côté. La recherche cède sa place
   la première ; .main ne peut plus s'élargir au-delà de l'écran. */
.main{min-width:0}
@media (min-width:769px) and (max-width:1439px){
  .topbar{gap:12px;padding:0 1rem}
  .tb-search{flex:0 1 320px;min-width:160px}
}
@media (min-width:769px) and (max-width:1180px){ .tb-search{flex-basis:240px} }
/* La barre passait sur deux lignes entre 769 et 1 100 px (18/09/2026) : c'était le filtre de
   période qui ne tenait plus. Il a quitté la barre le 25/09/2026 ; titre, recherche et outils
   tiennent sur une ligne jusqu'à 901 px, où le tiroir de navigation prend le relais (mobile.css). */

/* ── Focus visible là où la règle globale perdait (audit du 18/09/2026) ─────────────────────
   Les champs de recherche et le curseur ont un `outline:none` plus spécifique que la règle
   globale ; l'interrupteur cache sa case (0×0 px) ; le bouton de suppression d'un dossier et les
   cases de sélection sont transparents. Chacun reçoit un indicateur qui se voit. */
.tb-search:focus-within,.compta-search:focus-within,.qk-search:focus-within,.qk-pop-search:focus-within{box-shadow:0 0 0 2px var(--accent)}
input[type=range].pct-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ts input:focus-visible+.tsl{outline:2px solid var(--accent);outline-offset:2px}
.theme-toggle input:focus-visible+.theme-track,.theme-toggle:focus-within .theme-track{outline:2px solid var(--accent);outline-offset:2px}
.doc-folder:focus-within .drem{opacity:1}
.qk-cb:focus-visible{opacity:1}
.nav-i.active .nav-b{background:transparent}
.aspect-chip:has(input:focus-visible),.qk-drop-zone:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* Toasts au-dessus des fenêtres (.send-ov 10100, modales 99999) : une erreur levée dans une
   fenêtre s'affichait SOUS son voile, invisible. */
.toasts{z-index:100001}
.toast-err{border-color:var(--red)}
/* Lien d'évitement : invisible jusqu'au premier Tab, puis en haut à gauche au-dessus de tout. */
.lien-evitement{position:fixed;top:8px;left:8px;z-index:100002;padding:10px 16px;border-radius:var(--r);background:var(--accent-fill);color:#fff;font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform .15s}
.lien-evitement:focus{transform:none}
@media (prefers-reduced-motion:reduce){.lien-evitement{transition:none}}
#contenu-principal:focus{outline:none}

/* ════════════════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — socle commun (audit WCAG 2.2 AA du 18/09/2026)
   Compagnon de js/00a-dialogues.js, js/00b-clavier.js et js/00c-etiquettes.js.
   ════════════════════════════════════════════════════════════════════════════════════════ */
/* Défilement : la barre du haut collante (66 px) et les bandeaux du bas ne recouvrent plus
   l'élément qui reçoit le focus (2.4.11). */
html{scroll-padding-top:80px;scroll-padding-bottom:96px}
/* (La marge de 140 px entre 769 et 1 100 px suivait la barre du haut sur deux lignes : elle n'y
   passe plus depuis le 25/09/2026.) */
/* Groupes de menu repliés : invisibles aussi pour le clavier et le lecteur d'écran. */
.nav-group-body.collapsed{visibility:hidden;transition:max-height .25s ease,opacity .2s,margin .2s,visibility 0s .25s}
/* overflow:hidden rognerait l'anneau posé à l'extérieur : il passe à l'intérieur. */
.nav-i:focus-visible,.nav-group-header:focus-visible,.mf-item:focus-visible,.compta-subnav-tab:focus-visible,tr[tabindex]:focus-visible,[data-a11y-clic]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav-i:focus-visible,.nav-group-header:focus-visible{background:var(--bg3);color:var(--text)}
/* Contenus révélés au survol : visibles aussi au focus (1.4.13, 2.4.7). */
#notifs-list [data-notif-id] > button{opacity:.7!important}
#notifs-list [data-notif-id]:hover > button,#notifs-list [data-notif-id]:focus-within > button,#notifs-list button:focus-visible{opacity:1!important}
.qk-table tbody tr:focus-within .qk-cb{opacity:1}
/* Bascule de thème : la case était en display:none, donc ni focusable ni lue. */
.theme-toggle{position:relative}
.theme-toggle input{display:block!important;position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.theme-toggle input:focus-visible~.theme-track{outline:2px solid var(--accent);outline-offset:2px}
/* Taille des cibles (2.5.8) : 24 px au minimum. */
.notif-toast .nt-snooze,.notif-toast .nt-close,.proj-tab-close,.li-del,.drem,#cl-table td>button{min-width:24px;min-height:24px}
.notif-toast .nt-actions{gap:8px}
#notifs-list [data-notif-id] > button{width:28px!important;height:28px!important}
.gcal-rz{height:12px}
.pf-btn-sm{min-height:24px}
/* Reflow (1.4.10) : un tableau trop large défile dans son cadre au lieu d'être coupé. */
.tc:has(> table),.tc > :has(> table),.vd-card.vd-flush > :has(> table){overflow-x:auto}
@media (max-width:768px){
  .topbar{flex-wrap:wrap;height:auto;row-gap:8px;padding:8px 12px;position:static}
  .tb-titre{flex:1 1 0;min-width:0}
  .tb-search{flex:1 1 100%;width:auto}
  #notif-panel{position:fixed!important;left:8px!important;right:8px!important;top:8px!important;width:auto!important}
  #notif-toasts{left:12px;right:12px;max-width:none}
  .qk-pop-cat{min-width:0}
}
/* Mouvement réduit (2.3.3) : toutes les animations et transitions, y compris celles écrites
   en ligne ou injectées par le JS. Le spinner reste, ralenti : il dit qu'un chargement est en cours. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .btn:hover,.pb-card:hover,.notif-toast:hover,.add-line-btn:hover,.add-section-btn:hover,.proj-tab-add:hover svg{transform:none!important}
  .sp{animation:spin 1.6s linear infinite!important;animation-duration:1.6s!important;animation-iteration-count:infinite!important}
}
/* Erreurs de champ affichées en texte, pas seulement en couleur (3.3.1). */
.champ-err{color:var(--red);font-size:11.5px;margin-top:4px;line-height:1.4}

/* ── BLOC A — coquille de l'application et clients (accessibilité 18/09/2026) ────────────
   Compagnon des corrections de fond d'index.html, js/03, js/04, js/05, js/06, js/07, js/08.
   Aucune règle ici ne cherche à changer le rendu : elle rétablit l'apparence d'origine sur des
   éléments qui ont changé de balise (div → button, div → a, div → fieldset) pour devenir
   opérables au clavier. */

/* Navigation latérale : en-têtes de groupe en <button>, entrées en <a>. */
.nav-group-header{width:100%;background:none;border:0;font:inherit;font-size:10px;text-align:left;color:var(--text3);min-height:24px}
a.nav-i{text-decoration:none}

/* Profil en haut de la barre latérale : <button> stylé à l'identique. */
#sb-user{font:inherit;color:inherit;text-align:left}

/* Titre de page : <h1> à l'apparence de l'ancienne div (taille et graisse dans .tb-title). */
h1.tb-title{margin:0}

/* Le filtre de période de la barre du haut (#period-filter) et ses règles d'affichage par page
   ont disparu le 25/09/2026 : chaque page qui en dépend porte le sien, dans la page
   (.per-seg, css/periodes-pipeline.css). */

/* Compteurs des filtres de notification : l'opacité les faisait tomber à 2,6-3,2:1. */
.nf-count{color:inherit;font-weight:600}

/* Filtres multi-sélection : bouton, cases natives masquées visuellement, « Tout effacer » en
   bouton — tous stylés comme les anciennes div. */
button.mf-btn{font:inherit;font-size:12px}
label.mf-item{margin:0}
.mf-item:has(input:focus-visible) .mf-cb{outline:2px solid var(--accent);outline-offset:2px}
button.mf-clear{width:100%;background:none;border:0;border-top:1px solid var(--border);border-radius:0;font:inherit;font-size:11px;color:var(--text3)}
button.mf-clear:hover{color:var(--text)}

/* Tags du formulaire client : boutons à deux états. L'estompage seul ne disait rien (1.4.1) et
   tombait à 1,4:1 ; l'opacité écrite par toggleTag() est neutralisée, et l'état non sélectionné
   se lit à un fond transparent et un contour. */
#tag-sel .tag{font:inherit;font-size:11px;font-weight:500;opacity:1!important;border:1px solid transparent}
#tag-sel .tag[aria-pressed="false"]{background:transparent;color:var(--text2);border-color:var(--border2)}

/* Rubriques de formulaire passées en <fieldset>/<legend> : bordure et marges du navigateur
   remises à zéro, la <legend> reprend exactement la place de l'ancien titre. */
fieldset.form-rubrique,fieldset.gen-section{min-width:0}
fieldset.form-rubrique{border:0;padding:0;margin:0}
fieldset.gen-section{margin:0}
fieldset.form-rubrique>legend,fieldset.gen-section>legend{padding:0;float:left;width:100%}
fieldset.form-rubrique>legend+*,fieldset.gen-section>legend+*{clear:both}
/* Consigne « Les champs marqués * sont obligatoires », placée AVANT les champs. */
.form-consigne{font-size:11px;color:var(--text3);margin:0 0 .75rem}
/* Le fil d'étapes est une liste ordonnée : ni puce ni numéro ajouté. */
ol.stepper{list-style:none}

/* Première cellule des lignes de tableau : un vrai lien, pour que la fiche client s'ouvre au
   clavier. La ligne reste cliquable à la souris (data-a11y-ignorer évite le double arrêt). */
.cl-nom{color:inherit;text-decoration:none;font:inherit}
.cl-nom:hover,.cl-nom:focus-visible{text-decoration:underline;text-underline-offset:2px}

/* En-tête de tri : le <button> dans le <th> ne change rien à l'aspect de l'en-tête. */
th>button.th-tri{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;text-transform:inherit;letter-spacing:inherit;min-height:24px}
th>button.th-tri:hover{color:var(--text)}

/* Onglets de la fiche client et de projet : boutons stylés comme les anciennes div. */
button.ptab,button.proj-tab{background:none;border:1px solid transparent;font:inherit;font-size:13.5px;font-weight:500;color:var(--text2)}
/* La barre des 9 onglets est en `width:fit-content` : combinée au `flex-wrap:nowrap` des petits
   écrans, sa largeur devenait celle de son contenu (961 px mesurés à 320 px de large) et c'est la
   PAGE qui défilait, pas la barre (1.4.10). Plafonnée à son conteneur, elle défile toute seule.
   Sur grand écran la barre est plus étroite que la fiche : `fit-content` gagne, rien ne change. */
.ptabs{max-width:100%}
button.proj-tab{font-size:13px}
.ptab-content:focus-visible,[role="tabpanel"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Menus contextuels (clients, projets, calendrier) : éléments en <button role="menuitem">. */
.ctx-item,.cal-ctx-item{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-size:13.5px;color:var(--text2);padding:10px 14px;border-radius:8px;cursor:pointer}
.cal-ctx-item{font-size:13px;padding:7px 12px}
.ctx-item:hover,.ctx-item:focus-visible{background:var(--glow);color:var(--text)}
.cal-ctx-item:hover,.cal-ctx-item:focus-visible{background:var(--bg3);color:var(--text)}
.ctx-item.danger{color:var(--red)}
/* 28/09/2026 : « Supprimer » pour un membre — désactivé, et dit pourquoi (js/05, js/10b). */
.ctx-item.inactif{color:var(--text2);cursor:default}
.ctx-note{display:block;font-size:11.5px;color:var(--text3)}

/* Étapes du projet et chips de l'historique : boutons à deux états, stylés comme avant. */
button.stage-btn,button.hist-chip{background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left}

/* Sous-lignes de projet du tableau clients : l'opacité .62 faisait passer un texte réel pour
   désactivé (1,9:1). La distinction visuelle passe par la couleur de texte, déjà atténuée. */
tr.cl-subrow{opacity:1!important}

/* Zones défilantes atteignables au clavier (2.1.1) : elles reçoivent tabindex="0" en JS. */
[role="region"][tabindex="0"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Un texte .sr-only écrit dans un tableau qui défile s'échappait de son cadre : posé en absolu
   sans ancêtre positionné, il n'était plus rogné par l'overflow du cadre et ajoutait son
   décalage au défilement horizontal de la PAGE entière — 434 px de large mesurés sur la vue
   d'ensemble à 320 px, pour un texte invisible (1.4.10). Le cadre devient son bloc conteneur.
   Rien d'autre ne change : ces cadres ne contiennent aucun élément positionné volontairement
   par rapport à la page. Mesuré le 20/09/2026 : la vue d'ensemble retombe à 320 px. */
.tc:has(> table),.tc > :has(> table),.vd-card.vd-flush > :has(> table){position:relative}
/* fin du bloc A */

/* ── BLOC B — documents, notifications, signature, rapports (accessibilité 18/09/2026) ── */
/* Tableau de données d'un graphique (graphiqueAccessible(), js/10) : replié, il ne prend que la
   hauteur d'une ligne. C'est l'équivalent en texte d'un <canvas>, donc la seule façon de lire un
   graphique au lecteur d'écran — et de relever une valeur quand deux séries ont la même teinte. */
.graph-donnees{margin-top:8px;font-size:12px}
.graph-donnees>summary{cursor:pointer;color:var(--text3);padding:4px 2px;min-height:24px;display:flex;align-items:center}
.graph-donnees>summary:hover{color:var(--text2)}
.graph-donnees table{width:100%;border-collapse:collapse;margin-top:6px}
.graph-donnees th,.graph-donnees td{padding:5px 8px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
.graph-donnees thead th,.graph-donnees tbody th{text-align:left;color:var(--text3);font-weight:600}
.graph-donnees tbody td{color:var(--text2);font-variant-numeric:tabular-nums}

/* Bandeaux de notification : les boutons « Reporter » et « Fermer » mesuraient environ 19 px et se
   chevauchaient (2.5.8), et ils n'apparaissaient qu'au survol de la souris (1.4.13). */
.notif-toast .nt-snooze,.notif-toast .nt-close{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
.notif-toast .nt-actions{gap:8px}

/* Séparateur redimensionnable des ateliers (devis, contrat, rapport) : au clavier, il faut le voir
   quand il a le focus, sinon les flèches déplacent une poignée invisible. */
.gen-split:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Mode présentation : les commandes s'effacent au bout de 2,5 s. Elles restent tabulables, donc
   elles doivent redevenir visibles quand le focus arrive dessus (2.4.7). */
#present-ov:focus-within .pv-ctl,#present-ov .pv-ctl:focus-visible{opacity:1!important}

/* Zone de dépôt d'un document déjà réalisé (js/09) : c'était une <div onclick>, seule voie pour
   importer au clavier. C'est devenu un <button>, qui doit rendre exactement le même dessin — un
   bouton apporte sa propre police, son fond et son alignement, que .dz-import ne remplaçait pas. */
button.dz-import{width:100%;font-family:inherit;font-size:12.5px;background:none;text-align:left;line-height:1.45}
.dz-import-wrap{display:contents}

/* Pipeline : « Déplacer vers » est la seule voie sans glisser-déposer (2.5.7). Elle reste
   invisible tant qu'elle n'a pas le focus — la planche garde exactement le même dessin — et
   s'affiche sous la carte dès qu'on l'atteint au clavier, sinon on piloterait un contrôle
   qu'on ne voit pas (2.4.7). */
.pb-move{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pb-move:focus{position:static;width:100%;height:auto;margin:-4px 0 10px;padding:5px 8px;overflow:visible;clip:auto;clip-path:none;border:1px solid var(--border-input);border-radius:var(--rs);background:var(--bg2);color:var(--text);font-family:inherit;font-size:12px}
/* fin du bloc B */

/* ── BLOC C — comptabilité, calendrier, équipe, tâches, santé (accessibilité 18/09/2026) ── */

/* Zones de dépôt d'un justificatif (js/22, js/28). Elles étaient des <div> cliquables à la
   souris seule (audit clavier, constat 15) et sont devenues des <label for> qui portent un
   <input type="file"> masqué. Deux conséquences à rattraper ici :
   1. un <label> est un élément EN LIGNE : ses 16 px de marge intérieure débordaient sur ses
      voisins au lieu de les pousser. Il lui faut une boîte.
   2. le champ fichier est masqué À CÔTÉ de l'étiquette, pas dedans : la règle
      `.qk-drop-zone:has(input:focus-visible)` de js/20 ne peut pas le voir. Au clavier, le
      focus était donc invisible (2.4.7). La règle ci-dessous suit le champ frère. */
label.qk-drop-zone{display:block}
.qk-drop-zone:has(~ input[type="file"]:focus-visible){outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);color:var(--accent)}
/* Même montage pour la zone d'images d'une idée (js/34) : le champ est un frère, posé hors écran. */
#aj-img-drop:has(~ #aj-img-file:focus-visible){outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}

/* Panneau de notifications (js/31) : « Supprimer », « Masquer » et « Reporter » sont posés en
   opacité 0 et ne se révèlent qu'au survol de la souris. Les gestionnaires onfocus en ligne les
   rallument déjà, mais une règle CSS ne dépend pas d'eux — au clavier, le focus doit se voir
   (audit clavier, constat 17 ; WCAG 2.4.7). */
#notif-panel button:focus-visible,#all-notifs-ov button:focus-visible{opacity:1 !important;background:var(--bg4) !important}

/* Champs à suggestions d'une tâche (js/35) : la suggestion courante était marquée par la seule
   classe .sel, que le motif combobox double désormais par aria-selected (audit ARIA, constat
   37). Les deux sources disent la même chose à l'écran. */
.adr-suggest-item[aria-selected="true"]{background:var(--bg3)}

/* Reflow à 320 px (WCAG 1.4.10, audit structure). Deux lignes de liste débordaient la fenêtre
   et forçaient un défilement horizontal de la page entière : une ligne d'historique des points
   d'équipe (élément de grille) et une carte de déclaration (conteneur flex). Dans les deux cas
   la cause est la même — `min-width:auto` empêche l'élément de descendre sous la largeur de son
   contenu. Le contenu se replie de lui-même une fois la contrainte levée. */
.pt-hist>.pt-hrow{min-width:0}
.decl-card{min-width:0;flex-wrap:wrap}

/* fin du bloc C */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   AGENDA — V2 (21/09/2026) · sur le modèle de Google Agenda (js/30-calendrier.js)
   Les couleurs viennent des jetons du CRM : l'agenda suit le thème clair et le thème sombre.
   La couleur d'un événement est celle de son agenda Google (--ag-c), comme dans Google.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
#sec-calendrier.active{padding:0}
/* Un élément marqué « hidden » reste caché même quand sa classe lui donne display:flex ou grid
   (constaté au harnais : le champ « Jusqu'au » s'affichait hors journée entière). */
.ag [hidden],.ag-ov [hidden]{display:none!important}
.ag{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:calc(100vh - 140px);background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.ag-rail{padding:10px 12px 24px;border-right:1px solid var(--border);overflow-y:auto;max-height:calc(100vh - 140px);display:flex;flex-direction:column;gap:6px}
.ag-main{display:flex;flex-direction:column;min-width:0}

/* ── Bouton « Créer » et menus ── */
.ag-creer-wrap{position:relative;margin:2px 0 12px}
.ag-creer{display:inline-flex;align-items:center;gap:10px;padding:14px 18px 14px 14px;border-radius:16px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font:600 14px var(--font);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25),0 4px 10px rgba(0,0,0,.12);transition:box-shadow .15s,background .15s}
.ag-creer:hover{box-shadow:0 2px 6px rgba(0,0,0,.3),0 8px 18px rgba(0,0,0,.16);background:var(--bg4)}
.ag-menu{position:absolute;z-index:60;min-width:220px;background:var(--bg2);border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.35);padding:6px 0}
.ag-menu[hidden]{display:none}
.ag-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 16px;border:0;background:transparent;color:var(--text);font:500 13.5px var(--font);cursor:pointer}
.ag-menu button:hover,.ag-menu button:focus-visible{background:var(--glow);outline:none}
/* Audit contraste du 22/09/2026 : la teinte seule ne suffisait pas à montrer le focus (1,2:1). */
.ag-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ag-menu button kbd{margin-left:auto;font:500 11px var(--mono);color:var(--text3);background:none;border:0}
.ag-menu hr{border:0;border-top:1px solid var(--border);margin:6px 0}
.ag-menu .ag-coche{width:16px;color:var(--accent);font-weight:700}
.ag-menu-droite{right:0;top:calc(100% + 6px)}
.ag-creer-wrap .ag-menu{left:0;top:calc(100% + 6px)}
.ag-menu-flottant{position:fixed}

/* ── Mini-calendrier ── */
.ag-mini{padding:0 2px 6px}
.ag-mini-tete{display:flex;align-items:center;gap:2px;padding:4px 2px 6px}
.ag-mini-titre{flex:1;font:600 13.5px var(--font);color:var(--text);padding-left:6px}
.ag-mini-grille{display:flex;flex-direction:column;gap:1px}
.ag-mini-l{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:10.5px;color:var(--text3)}
.ag-mini-sem{grid-template-columns:22px repeat(7,1fr)}
.ag-mini-ns{font:500 10px var(--mono);color:var(--text3);background:var(--bg3);border-radius:4px;display:flex;align-items:center;justify-content:center;margin:1px 2px}
.ag-mini-j{width:26px;height:26px;margin:1px auto;border:0;border-radius:50%;background:transparent;color:var(--text2);font:500 11.5px var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ag-mini-j:hover{background:var(--bg4)}
.ag-mini-j.ag-hors{color:var(--text3);opacity:.7}
.ag-mini-j.ag-sel{background:var(--glow);color:var(--accent);font-weight:700}
.ag-mini-j.ag-auj{background:var(--accent-fill);color:#fff;font-weight:700}
.ag-mini-j.ag-a-evt::after{content:'';position:absolute}
.ag-mini-vide{width:26px;height:26px}

/* ── Blocs du rail ── */
.ag-rail-bloc{padding:6px 2px}
.ag-rail-bloc>summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font:600 13.5px var(--font);color:var(--text);padding:6px 4px;border-radius:8px}
.ag-rail-bloc>summary::-webkit-details-marker{display:none}
.ag-rail-bloc>summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid var(--text3);border-bottom:2px solid var(--text3);transform:rotate(45deg);transition:transform .15s}
.ag-rail-bloc[open]>summary::after{transform:rotate(-135deg)}
.ag-rail-bloc>summary:hover{background:var(--bg3)}
.ag-rail-titre{display:block;font:600 13.5px var(--font);color:var(--text);padding:4px 4px 6px}
.ag-rail-note{font-size:12px;color:var(--text3);line-height:1.5;padding:2px 4px;margin:0}
.ag-recherche{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:0 10px;color:var(--text3)}
.ag-recherche input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:500 13px var(--font);padding:9px 0;outline:none}
.ag-recherche:focus-within{border-color:var(--accent)}
.ag-liste{display:flex;flex-direction:column;gap:1px;padding:2px 0}
.ag-agenda{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text2);position:relative}
.ag-agenda:hover{background:var(--bg3)}
.ag-agenda input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
.ag-case{flex:0 0 18px;height:18px;border-radius:3px;border:2px solid var(--ag-c);display:flex;align-items:center;justify-content:center}
.ag-agenda input:checked+.ag-case{background:var(--ag-c)}
.ag-agenda input:checked+.ag-case::after{content:'';width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ag-agenda input:focus-visible+.ag-case{outline:2px solid var(--accent);outline-offset:2px}
.ag-agenda-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-page{display:flex;align-items:center;gap:4px;border-radius:6px}
.ag-page:hover{background:var(--bg3)}
.ag-page-n{flex:1;display:flex;align-items:center;gap:10px;padding:7px 6px;color:var(--text2);text-decoration:none;font-size:13px;min-width:0}
.ag-util-p{font-size:11.5px;color:var(--text3);padding:2px 4px}
.ag-util-v{font-size:13px;color:var(--text);padding:2px 4px 6px}
.ag-util-barre{height:8px;border-radius:4px;background:var(--bg4);margin:0 4px;overflow:hidden}
.ag-util-barre span{display:block;height:100%;background:var(--accent-fill);border-radius:4px}
.ag-comptes{font-size:12.5px;color:var(--text2);display:flex;flex-direction:column;gap:6px;padding:4px}
.ag-compte-moi{margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ag-comptes-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ag-comptes-l li{display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.ag-pastille-ok{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 8px}
.ag-lien{border:0;background:none;padding:0;color:var(--accent);font:600 12.5px var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ── Barre du haut ── */
.ag-barre{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.ag-auj-btn{padding:8px 18px;border-radius:999px;border:1px solid var(--border2);background:transparent;color:var(--text);font:600 13.5px var(--font);cursor:pointer;margin-right:6px}
.ag-auj-btn:hover{background:var(--bg3)}
.ag-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--text2);font:500 20px var(--font);cursor:pointer;text-decoration:none;flex:0 0 36px}
.ag-ico:hover{background:var(--bg3);color:var(--text)}
.ag-ico-petit{width:26px;height:26px;flex-basis:26px;font-size:17px;margin-left:auto}
.ag-titre{font:500 21px var(--font-display);color:var(--text);margin:0 6px;white-space:nowrap}
.ag-semaine{font:600 11px var(--font);color:var(--text2);background:var(--bg3);border-radius:6px;padding:3px 7px}
.ag-espace{flex:1}
.ag-recherche-barre{width:200px}
/* Barre trop étroite entre la barre latérale du CRM et le rail : la recherche de la barre se
   retire (« Réunion avec… » et la recherche du haut de page la remplacent). */
@media (max-width: 1280px){.ag-recherche-barre{display:none}}
.ag-vue-wrap{position:relative}
.ag-vue-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px 8px 16px;border-radius:999px;border:1px solid var(--border2);background:transparent;color:var(--text);font:600 13.5px var(--font);cursor:pointer}
.ag-vue-btn:hover{background:var(--bg3)}
.ag-rail-btn{display:none}
.ag-bandeau{margin:12px 14px 0;padding:10px 14px;border-radius:8px;background:var(--amber-bg);color:var(--text);font-size:13px;line-height:1.5}

/* ── Vue Mois ── */
.ag-vue{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.ag-mois{flex:1;display:grid;grid-template-rows:repeat(var(--ag-lignes),minmax(118px,1fr));min-height:0}
.ag-mois-sem{display:grid;grid-template-columns:28px repeat(var(--ag-cols),minmax(0,1fr));border-bottom:1px solid var(--border)}
.ag-num-sem{font:500 10.5px var(--mono);color:var(--text3);background:var(--bg3);display:flex;align-items:flex-start;justify-content:center;padding-top:8px}
.ag-mois-case{border-left:1px solid var(--border);padding:4px 4px 6px;display:flex;flex-direction:column;gap:1px;min-width:0;cursor:default;position:relative}
.ag-mois-case.ag-hors{background:color-mix(in srgb,var(--bg) 35%,transparent)}
.ag-mois-case.ag-survol{background:var(--glow)}
.ag-mois-jn{text-align:center;font:600 10.5px var(--font);color:var(--text3);letter-spacing:.04em;padding-top:2px}
.ag-mois-num{align-self:center;min-width:26px;height:26px;padding:0 6px;border:0;border-radius:13px;background:transparent;color:var(--text2);font:600 12.5px var(--font);cursor:pointer;margin-bottom:2px}
.ag-mois-num:hover{background:var(--bg4)}
.ag-hors .ag-mois-num{color:var(--text3)}
.ag-auj .ag-mois-num{background:var(--accent-fill);color:#fff}
.ag-puce{display:flex;align-items:center;gap:6px;width:100%;min-width:0;padding:2px 6px;border:0;border-radius:4px;background:transparent;color:var(--text);font:500 12px var(--font);text-align:left;cursor:pointer;line-height:1.35;touch-action:none}
.ag-puce:hover{background:var(--bg3)}
.ag-puce .ag-point,.ag-plan-evt .ag-point{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--ag-c)}
.ag-puce-h{color:var(--text2);font-weight:500;white-space:nowrap}
.ag-puce-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ag-puce-jour{background:var(--ag-c);color:#fff;font-weight:600}
.ag-puce-jour:hover{background:var(--ag-c);filter:brightness(1.08)}
.ag-puce.ag-passe{opacity:.55}
.ag-puce.ag-fait .ag-puce-t{text-decoration:line-through}
.ag-rond{flex:0 0 10px;width:10px;height:10px;border-radius:50%;border:2px solid currentColor}
.ag-autres{align-self:flex-start;border:0;background:transparent;color:var(--text);font:600 11.5px var(--font);padding:2px 6px;border-radius:4px;cursor:pointer}
.ag-autres:hover{background:var(--bg3)}
.ag-puce.ag-geste,.ag-bloc.ag-geste{z-index:30;opacity:.85;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:grabbing}

/* ── Grille horaire ── */
.ag-grille{display:flex;flex-direction:column;flex:1;min-height:0}
.ag-grille-tete,.ag-grille-jour,.ag-grille-corps{display:grid;grid-template-columns:56px repeat(var(--ag-n),minmax(0,1fr))}
.ag-grille-tete{border-bottom:1px solid var(--border)}
.ag-fuseau{font:500 10px var(--font);color:var(--text3);display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}
.ag-tete-jour{text-align:center;padding:8px 2px 6px}
.ag-tete-jn{font:600 11px var(--font);color:var(--text3);letter-spacing:.05em}
.ag-auj .ag-tete-jn{color:var(--accent)}
.ag-tete-num{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text);font:500 24px var(--font-display);cursor:pointer;margin-top:2px}
.ag-tete-num:hover{background:var(--bg3)}
.ag-auj .ag-tete-num{background:var(--accent-fill);color:#fff}
.ag-grille-jour{border-bottom:1px solid var(--border)}
.ag-journee-l{font-size:10px;color:var(--text3);text-align:right;padding:6px 8px 0 0}
.ag-journee-col{border-left:1px solid var(--border);padding:2px;min-height:26px;display:flex;flex-direction:column;gap:2px}
.ag-defil{flex:1;overflow-y:auto;max-height:calc(100vh - 290px);min-height:360px}
.ag-grille-corps{position:relative}
.ag-heures{position:relative;height:calc(24 * var(--ag-h))}
.ag-heure{position:absolute;right:8px;transform:translateY(-50%);font:500 10.5px var(--mono);color:var(--text3)}
.ag-col{position:relative;height:calc(24 * var(--ag-h));border-left:1px solid var(--border);background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--ag-h) - 1px),var(--border) calc(var(--ag-h) - 1px),var(--border) var(--ag-h));cursor:pointer}
.ag-col.ag-auj{background-color:color-mix(in srgb,var(--glow) 60%,transparent)}
.ag-bloc{position:absolute;box-sizing:border-box;border-radius:6px;background:var(--ag-c);color:#fff;padding:3px 7px;overflow:hidden;cursor:pointer;z-index:2;border:1px solid var(--bg2);touch-action:none;display:flex;flex-direction:column}
.ag-bloc:hover{filter:brightness(1.07)}
.ag-bloc:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.ag-bloc.ag-passe{opacity:.62}
.ag-bloc-t{font:600 12px var(--font);line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.ag-bloc-h{font:500 11px var(--font);opacity:.92;white-space:nowrap}
.ag-bloc.ag-court{flex-direction:row;gap:6px;align-items:center}
.ag-bloc.ag-court .ag-bloc-t{white-space:nowrap}
/* [P3] 02/10/2026 — bug 7 : un agenda de couleur claire (blanc, jaune pâle) porte une encre sombre
   et un contour visible, au lieu d'un texte blanc sur blanc ; même rendu dans les deux thèmes. */
.ag-bloc.ag-encre-sombre,.ag-puce-jour.ag-encre-sombre,.ag-puce-jour.ag-encre-sombre:hover{color:var(--amber-on);border:1px solid color-mix(in srgb,var(--amber-on) 35%,transparent)}
.ag-poignee{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize}
.ag-poignee:hover{background:rgba(255,255,255,.25)}
.ag-maintenant{position:absolute;left:0;right:0;border-top:2px solid #ea4335;z-index:3;pointer-events:none}
.ag-maintenant::before{content:'';position:absolute;left:-6px;top:-7px;width:12px;height:12px;border-radius:50%;background:#ea4335}
.ag-aide{font-size:11px;color:var(--text3);padding:8px 14px;margin:0;border-top:1px solid var(--border)}

/* ── [V20] 06/10/2026 : l'agenda répond tout de suite (document de Célian, §2 et §3) ──
   Un rendez-vous « en cours d'enregistrement » est déjà à sa place : rayures discrètes et contour en pointillé, DOUBLÉS du
   texte « enregistrement… » dans le bloc (jamais la seule apparence, 1.4.1). Les rayures sombres éclaircissent le moins
   possible : le texte blanc des blocs garde son contraste (elles assombrissent) ; sur une couleur claire (encre sombre),
   elles s'éclaircissent. Transitions de 150 ms, coupées sous prefers-reduced-motion. */
.ag-charge{font:500 12px var(--font);color:var(--text2);padding:3px 9px;border-radius:999px;background:var(--bg3);white-space:nowrap}
.ag-charge[hidden]{display:none}
.ag-bloc,.ag-puce{transition:filter .15s}
.ag-bloc.ag-encours{background-image:repeating-linear-gradient(135deg,transparent 0 8px,rgba(0,0,0,.14) 8px 16px);outline:1.5px dashed rgba(255,255,255,.75);outline-offset:-3px;cursor:progress}
.ag-bloc.ag-encours.ag-encre-sombre{background-image:repeating-linear-gradient(135deg,transparent 0 8px,rgba(255,255,255,.3) 8px 16px);outline-color:var(--amber-on)}
.ag-puce.ag-encours{outline:1.5px dashed var(--border-input);outline-offset:-2px;cursor:progress}
.ag-puce-jour.ag-encours{background-image:repeating-linear-gradient(135deg,transparent 0 8px,rgba(0,0,0,.14) 8px 16px)}
.ag-meet-attente{margin:4px 18px 10px 48px;padding:9px 16px;border-radius:999px;background:var(--bg3);color:var(--text2);font:600 13px var(--font);display:inline-block}
.ag-bloc.ag-arme{box-shadow:0 8px 20px rgba(0,0,0,.4);filter:brightness(1.08)}
@media (prefers-reduced-motion:reduce){.ag-bloc,.ag-puce{transition:none}}

/* ── Vue Année ── */
.ag-annee{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px 26px;padding:18px 20px}
.ag-annee-t{border:0;background:none;color:var(--text);font:600 14px var(--font);padding:4px 6px;border-radius:6px;cursor:pointer;margin-bottom:4px}
.ag-annee-t:hover{background:var(--bg3)}
.ag-annee .ag-mini-j.ag-a-evt{box-shadow:inset 0 -2px 0 var(--accent)}

/* ── Vue Planning ── */
.ag-planning{padding:6px 0}
.ag-plan-jour{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--border);padding:8px 14px}
.ag-plan-date{display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--text2);cursor:pointer;text-align:left;padding:4px;border-radius:8px;align-self:start}
.ag-plan-num{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 18px var(--font-display);color:var(--text)}
.ag-plan-date.ag-auj .ag-plan-num{background:var(--accent-fill);color:#fff}
.ag-plan-md{font:600 11px var(--font);text-transform:uppercase;letter-spacing:.04em}
.ag-plan-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ag-plan-evt{display:grid;grid-template-columns:14px 150px 1fr;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--text);font:500 13px var(--font);padding:8px 6px;border-radius:6px;cursor:pointer;text-align:left}
.ag-plan-evt:hover{background:var(--bg3)}
.ag-plan-h{color:var(--text2);font-size:12.5px}
.ag-plan-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-vide{padding:40px 20px;text-align:center;color:var(--text3);font-size:13.5px}

/* ── Fiche d'un événement et fenêtres ── */
.ag-ov{position:fixed;inset:0;z-index:10000;background:rgba(10,8,18,.55);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.ag-ov-leger{background:rgba(10,8,18,.28)}
.ag-carte{width:min(440px,100%);background:var(--bg2);border:1px solid var(--border2);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:8px 8px 18px;font-family:var(--font)}
.ag-carte-barre{display:flex;justify-content:flex-end;gap:2px}
.ag-carte-titre{display:flex;gap:16px;padding:4px 18px 10px}
.ag-carre{flex:0 0 14px;height:14px;border-radius:4px;background:var(--ag-c);margin-top:7px}
.ag-carte-titre h2{font:500 20px var(--font-display);color:var(--text);margin:0;line-height:1.3;overflow-wrap:anywhere}
.ag-carte-titre p{margin:4px 0 0;font-size:13px;color:var(--text2)}
.ag-meet{display:inline-flex;align-items:center;gap:8px;margin:4px 18px 10px 48px;padding:9px 16px;border-radius:999px;background:var(--accent-fill);color:#fff;font:600 13px var(--font);text-decoration:none}
.ag-carte-l{display:flex;gap:16px;padding:7px 18px;font-size:13px;color:var(--text2);line-height:1.5}
.ag-carte-i{flex:0 0 18px;color:var(--text3);padding-top:1px}
.ag-invites{list-style:none;margin:4px 0 0;padding:0}
.ag-rep{color:var(--text3);font-size:12px}
.ag-desc{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}
.ag-carte-actions{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 0}
.ag-carte-jour{width:min(300px,100%)}
.ag-jour-tete{text-align:center;padding:0 0 8px}
.ag-jour-num{font:500 26px var(--font-display);color:var(--text);margin:2px 0 0}
.ag-jour-liste{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.ag-fenetre{width:min(520px,100%);background:var(--bg2);border:1px solid var(--border2);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.5);font-family:var(--font);display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
.ag-fenetre-large{width:min(640px,100%)}
.ag-fen-tete{padding:20px 24px 6px}
.ag-fen-tete h2{font:500 21px var(--font-display);color:var(--text);margin:0 0 4px;overflow-wrap:anywhere}
.ag-fen-tete p{font-size:12.5px;color:var(--text3);margin:0}
.ag-titre-auto{border-bottom:2px solid var(--accent);padding-bottom:6px}
.ag-titre-auto.ag-titre-vide{color:var(--text3);border-bottom-color:var(--border2)}
.ag-onglets{display:flex;gap:4px;flex-wrap:wrap;margin-top:12px}
.ag-onglets [role="tab"]{padding:7px 12px;border-radius:6px;border:0;background:transparent;color:var(--text2);font:600 13px var(--font);cursor:pointer}
.ag-onglets [role="tab"]:hover{background:var(--bg3)}
.ag-onglets [role="tab"][aria-selected="true"]{background:var(--glow);color:var(--accent)}
.ag-fen-corps{padding:10px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.ag-fen-pied{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border);background:var(--bg3);border-radius:0 0 16px 16px}
.ag-champ{display:flex;flex-direction:column;gap:5px;min-width:0}
.ag-champ>label,.ag-radios legend{font:600 12px var(--font);color:var(--text2)}
.ag-champ-coche{justify-content:flex-end}
.ag-champ-coche label{display:flex;align-items:center;gap:8px;font:500 13px var(--font);color:var(--text);cursor:pointer}
.ag-champ-coche input{width:17px;height:17px;accent-color:var(--accent)}
.ag-deux{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ag-trois{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px}
.ag-aide-champ{font-size:11.5px;color:var(--text3);margin:2px 0 0;line-height:1.45}
.ag-leger{font-weight:400;color:var(--text3)}
.ag-err{color:var(--red);font-size:12.5px;padding:0 24px;min-height:0}
.ag-err:empty{display:none}
.ag-radios{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.ag-radios label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}
.ag-radios-ligne{flex-direction:row;flex-wrap:wrap;gap:8px}
.ag-radios-ligne legend{width:100%;margin-bottom:6px}
.ag-pastille{padding:8px 14px;border-radius:999px;border:1px solid var(--border2)}
.ag-pastille:has(input:checked){border-color:var(--accent);background:var(--glow)}

/* ── Créer en glissant (25/09/2026) : le bloc qui suit le pointeur dans la grille horaire.
   Blanc sur --accent-fill, l'aplat prévu pour du texte blanc (4,5:1 dans les deux thèmes).
   Pas de sélection de texte ni de bulle iOS pendant le geste. ── */
.ag-grille-corps{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ag-bloc.ag-apercu{left:1px;width:calc(100% - 3px);z-index:4;background:var(--accent-fill);color:#fff;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.28)}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   FENÊTRE DE CRÉATION DE L'AGENDA — refonte du 25/09/2026 · js/30-calendrier.js
   Retour de Célian : « très brouillon, très peu friendly, tout est un peu pareil, on ne voit pas
   ce qui n'est pas obligatoire ». Sur le modèle de la fenêtre d'événement de Google Agenda :
   titre en grand, une couleur d'accent par nature, lignes « icône + champ », choix en pastilles,
   champs facultatifs en pointillé. Couleurs en jetons uniquement. Chaque texte coloré est vérifié
   à 4,5:1 dans les deux thèmes, sur --bg2 comme sur le fond teinté de sa nature (sombre / clair) :
   --accent 5,1 / 7,0 · --green 5,6 / 5,3 · --pink 5,3 / 5,4 · --amber 6,6 / 5,3. Les bordures en
   pointillé gardent --border-input (3:1, 1.4.11). La fenêtre « Nouveaux horaires » partage
   .ag-fenetre : tout ce bloc est limité à .ag-fen-creer.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.ag-fen-creer{--ag-nat:var(--accent);--ag-nat-bg:var(--glow)}
.ag-fen-creer[data-nature="tache"],.ag-fen-creer .ag-onglets [data-nature="tache"]{--ag-nat:var(--green);--ag-nat-bg:var(--green-bg)}
.ag-fen-creer[data-nature="absence"],.ag-fen-creer .ag-onglets [data-nature="absence"]{--ag-nat:var(--pink);--ag-nat-bg:var(--pink-bg)}
.ag-fen-creer[data-nature="lieu"],.ag-fen-creer .ag-onglets [data-nature="lieu"]{--ag-nat:var(--amber);--ag-nat-bg:var(--amber-bg)}
.ag-fen-creer .ag-onglets [data-nature="evenement"]{--ag-nat:var(--accent);--ag-nat-bg:var(--glow)}
/* Ancrée en haut plutôt qu'au centre : d'un onglet à l'autre, la hauteur change, et centrée, la
   barre d'onglets sautait sous le pointeur à chaque changement. */
@media (min-width: 561px){ #ag-creer-ov{align-items:flex-start} #ag-creer-ov .ag-fen-creer{margin-top:2vh;max-height:calc(98vh - 32px)} }

/* En-tête : le titre en grand, précédé du carré de couleur de l'agenda (ou de la nature). */
.ag-fen-creer .ag-fen-tete{padding:22px 24px 0}
.ag-f-entete{display:flex;align-items:flex-start;gap:14px;min-height:40px}
.ag-f-carre{flex:0 0 14px;height:14px;border-radius:4px;background:var(--ag-c,var(--ag-nat));margin-top:11px}
.ag-f-titre-bloc{flex:1;min-width:0}
.ag-fen-creer .ag-fen-tete .ag-f-titre{font:500 24px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--text);margin:0;overflow-wrap:anywhere}
.ag-fen-creer .ag-fen-tete .ag-f-titre.ag-titre-vide{color:var(--text3)}
.ag-f-titre-champ{display:block;width:100%;border:0;border-bottom:2px solid var(--border-input);border-radius:0;background:transparent;color:var(--text);font:500 24px/1.3 var(--font-display);letter-spacing:-.01em;padding:2px 0 6px;outline:none}
.ag-f-titre-champ::placeholder{color:var(--text3)}
.ag-f-titre-champ:focus{border-bottom-color:var(--ag-nat)}
.ag-fen-creer .ag-fen-tete .ag-f-titre-note{font-size:12.5px;line-height:1.45;color:var(--text3);margin:6px 0 0}
/* Modifier un événement : pas d'onglets, un filet sépare le titre du corps. */
.ag-fen-creer .ag-fen-tete:not(:has(.ag-onglets)){padding-bottom:16px;border-bottom:1px solid var(--border)}

/* Onglets : une icône et une couleur par nature. L'onglet choisi prend le fond teinté, le texte
   et la barre du bas dans la couleur de sa nature — la barre dit l'état sans la couleur seule. */
.ag-fen-creer .ag-onglets{display:flex;gap:2px;margin:16px -10px 0;padding:0 4px;border-bottom:1px solid var(--border);flex-wrap:nowrap}
.ag-fen-creer .ag-onglets [role="tab"]{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--text2);font:600 13px var(--font);white-space:nowrap;cursor:pointer;box-shadow:inset 0 -3px 0 transparent}
.ag-fen-creer .ag-onglets [role="tab"] svg{flex:0 0 auto;color:var(--ag-nat)}
.ag-fen-creer .ag-onglets [role="tab"]:hover{background:var(--bg3);color:var(--text)}
.ag-fen-creer .ag-onglets [role="tab"][aria-selected="true"]{background:var(--ag-nat-bg);color:var(--ag-nat);box-shadow:inset 0 -3px 0 var(--ag-nat)}
.ag-fen-creer .ag-onglets [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Corps : des lignes « icône + champ », alignées sur une colonne d'icônes. */
.ag-fen-creer .ag-fen-corps{padding:20px 24px 10px;gap:18px}
.ag-f-ligne{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:16px;align-items:start}
.ag-f-ico{display:flex;justify-content:center;padding-top:1px;color:var(--text2)}
.ag-f-champ{display:flex;flex-direction:column;gap:8px;min-width:0}
.ag-f-sujet{display:flex;flex-direction:column;gap:18px}
.ag-f-sujet:empty{display:none}
.ag-f-lib{display:block;font:600 12.5px var(--font);color:var(--text2);padding:0;margin:0}
.ag-f-sous{display:flex;flex-direction:column;gap:6px;min-width:0}
.ag-f-qui{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.ag-f-choix{border:0;padding:0;margin:0;min-width:0}
.ag-f-choix>legend{margin-bottom:8px}
.ag-f-choix+.ag-aide-champ,.ag-f-champ>.ag-aide-champ{margin:0}
.ag-f-quand{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ag-fen-creer .ag-f-quand .fi{width:auto}
.ag-fen-creer .ag-f-date{min-width:150px}
.ag-fen-creer .ag-f-champ>.ag-f-date{width:auto;align-self:flex-start}
.ag-f-heures{display:inline-flex;align-items:center;gap:8px}
.ag-f-tiret{color:var(--text3)}
.ag-f-mini{font:500 13px var(--font);color:var(--text2)}
.ag-fen-creer .ag-f-court{width:auto;max-width:100%;align-self:flex-start}
.ag-f-coche{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font:500 13px var(--font);color:var(--text);cursor:pointer}
.ag-f-coche input{width:17px;height:17px;margin:0;accent-color:var(--ag-nat)}
.ag-f-retrait{padding-left:25px}
.ag-fen-creer .ag-radios input{accent-color:var(--ag-nat)}
.ag-f-note{font-size:12px;line-height:1.5;color:var(--text3);margin:0 0 0 36px}

/* Facultatif : plus discret sans être écrit. Fond transparent et bordure en POINTILLÉ (la forme
   distingue, pas seulement la couleur), libellé et icône atténués. Un champ obligatoire garde le
   fond --bg3 et la bordure pleine. Au focus, le champ facultatif reprend l'allure pleine. */
.ag-f-fac>.ag-f-ico,.ag-f-fac .ag-f-lib{color:var(--text3);font-weight:500}
.ag-fen-creer .ag-f-fac .fi,.ag-fen-creer .ag-f-fac .fta{background:transparent;border-style:dashed}
.ag-fen-creer .ag-f-fac .fi:focus,.ag-fen-creer .ag-f-fac .fta:focus{border-style:solid;background:var(--bg3)}
.ag-f-fac .ag-f-coche{color:var(--text2)}

/* Pastilles à choix unique (boutons radio masqués derrière leur étiquette). Choisie : bordure
   épaisse et coche dans la couleur de la nature, fond teinté, texte en gras — trois indices, dont
   deux de forme. La couleur de l'agenda Google n'est qu'un point à côté de son nom. */
.ag-pastilles{display:flex;flex-wrap:wrap;gap:6px}
.ag-pil{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border:1px solid var(--border-input);border-radius:999px;background:transparent;color:var(--text2);font:500 13px var(--font);cursor:pointer;user-select:none}
.ag-pil input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ag-pil-point{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--ag-c)}
.ag-pil svg{flex:0 0 auto}
.ag-pil-coche{display:none;color:var(--ag-nat)}
.ag-pil-note{font-size:11.5px;color:var(--text3)}
.ag-pil:hover{border-color:var(--text3);color:var(--text)}
.ag-pil:has(input:checked){border:2px solid var(--ag-nat);padding:0 13px 0 11px;background:var(--ag-nat-bg);color:var(--text);font-weight:600}
.ag-pil:has(input:checked) .ag-pil-coche{display:inline-block}
.ag-pil:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.ag-pil:has(input:disabled){cursor:not-allowed;border-style:dashed;opacity:.6}
.ag-pil-sep{flex-basis:100%;margin-top:6px;font:600 11px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}

/* Erreur : un bandeau lisible au-dessus du pied, dans le conteneur role="alert" déjà présent. */
.ag-fen-creer .ag-err{margin:0 24px 12px;padding:10px 12px;border-radius:8px;background:var(--red-bg);color:var(--red);font-size:13px}

/* Téléphone : onglets sur deux lignes de deux, colonne d'icônes resserrée. Le titre garde sa
   taille : mobile.css porte tout champ à 16 px (zoom d'iOS), le titre saisi reste au-dessus. */
@media (max-width: 900px){ .ag-fen-creer .ag-f-titre-champ{font-size:21px!important} }
@media (max-width: 560px){
  .ag-fen-creer .ag-fen-tete{padding:16px 16px 0}
  .ag-fen-creer .ag-fen-tete .ag-f-titre{font-size:21px}
  .ag-fen-creer .ag-onglets{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:14px 0 0;padding:0;border-bottom:0}
  .ag-fen-creer .ag-onglets [role="tab"]{border-radius:8px;white-space:normal;text-align:left;min-height:44px}
  .ag-fen-creer .ag-fen-corps{padding:16px 16px 8px}
  .ag-f-ligne{grid-template-columns:18px minmax(0,1fr);column-gap:10px}
  .ag-f-note{margin-left:28px}
  .ag-fen-creer .ag-err{margin:0 16px 10px}
  .ag-fen-creer .ag-f-quand .ag-f-date{min-width:0;flex:1 1 150px}
  /* La règle du téléphone (mobile.css) écarte l'icône du texte de 10 px dans toute étiquette de
     bouton radio : resserré ici, deux pastilles tiennent encore côte à côte à 320 px. */
  .ag-fen-creer .ag-pil{gap:6px;padding:0 12px 0 10px}
  .ag-fen-creer .ag-pil:has(input:checked){padding:0 11px 0 9px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PROSPECTION — V2 (21/09/2026) · js/39-prospection.js
   Le tableau reprend les classes du Pipeline client (.pb-col, .pb-card) : même produit, même
   geste. Ce bloc n'ajoute que ce qui est propre aux prospects.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.pr-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pr-chiffres{display:flex;gap:10px;flex-wrap:wrap}
.pr-chiffre{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:10px 16px;display:flex;flex-direction:column;min-width:120px}
.pr-v{font:600 22px var(--font-display);color:var(--text)}
.pr-l{font-size:11.5px;color:var(--text3)}
.pr-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pr-periodes{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:3px}
.pr-board{grid-template-columns:repeat(6,minmax(170px,1fr))}
.pr-col-t{font:600 12.5px var(--font);color:var(--text)}
.pr-vide{font-size:11px;color:var(--text3);text-align:center;padding:1rem 0}
.pr-carte .pb-cn{font-weight:600}
.pr-meta{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:11px;color:var(--text3);margin-top:4px}
.pr-pascal{background:var(--amber-bg);color:var(--amber);border-radius:4px;padding:0 5px;font-weight:600}
/* Agents commerciaux (23/09/2026, js/45) : l'agent qui a apporté la carte — mêmes couleurs que
   l'ancienne pastille Pascal, déjà vérifiées à 4,5:1 dans les deux thèmes ; le texte dit le nom. */
.pr-agent{background:var(--amber-bg);color:var(--amber);border-radius:4px;padding:0 5px;font-weight:600}
.agt-groupe{border:0;padding:0;margin:0 0 16px;min-width:0}
.agt-groupe>legend{font:600 12.5px var(--font);color:var(--text);padding:0;margin:0 0 8px}
.agt-aide{font-size:11.5px;color:var(--text3);line-height:1.45}
.agt-actions{white-space:nowrap}
.agt-actions .btn+.btn{margin-left:6px}
.agt-suivi{margin-top:26px}
.pr-motif{font-size:11px;color:var(--text2);margin-top:4px}
.pr-relance{font-size:11px;color:var(--amber);font-weight:600;margin-top:4px}
.pr-lien{border:0;background:none;padding:0;margin-top:6px;color:var(--accent);font:600 11.5px var(--font);cursor:pointer;text-decoration:underline;min-height:24px;display:inline-flex;align-items:center}
.pr-note{font-size:12.5px;color:var(--text3);line-height:1.5;margin:0 0 10px}
.pr-etat{font-size:12.5px;color:var(--accent);font-weight:600;margin:0 0 12px}
.pr-leger{color:var(--text3);font-weight:400}
.pr-case{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--text);cursor:pointer}
.pr-case input{width:17px;height:17px;accent-color:var(--accent)}
.pr-fiche-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.pr-alerte{background:var(--amber-bg);border-radius:var(--r);padding:14px 16px;font-size:13px;color:var(--text)}
.pr-archives .tc{margin-top:6px}
/* Téléphone : le tableau s'empile comme le Pipeline (mobile.css) ; les chiffres vont par deux. */
@media (max-width: 560px){ .pr-chiffres{display:grid;grid-template-columns:1fr 1fr;width:100%} .pr-chiffre{min-width:0} .pr-chiffre:last-child:nth-child(odd){grid-column:1 / -1} }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PIPELINE À DEUX ONGLETS ET PROSPECTION REDESSINÉE — 24/09/2026 · js/39-prospection.js
   Trois retours de Célian : la place vide à droite du Pipeline sur un écran 16/9, un seul
   Pipeline avec un onglet par pipeline, et une Prospection « plus visuelle, plus belle », dans
   l'esprit de la pipeline des transactions HubSpot. Rythme : serré dans une carte (4 à 8 px),
   aéré entre la barre d'outils, le bandeau et le tableau (16 à 24 px). Couleurs en jetons
   uniquement ; chaque paire texte / fond reprend une paire déjà vérifiée à 4,5:1 dans les
   deux thèmes (textes sur --bg2, --bg3 ou --bg4). Aucune ombre, aucun dégradé.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* Colonnes fluides. La grille du Pipeline client comptait SIX pistes pour cinq colonnes : la
   sixième restait vide à droite. Les colonnes se créent maintenant une par une et se partagent
   toute la largeur, avec une largeur minimale ; le tableau ne défile, dans son cadre, que quand
   l'écran est trop étroit pour elles. Les règles tablette de la grille (trois colonnes sur deux
   rangées) ne s'appliquent plus : un pipeline se lit de gauche à droite, jamais sur deux rangs. */
/* contain:inline-size : la largeur minimale des colonnes ne remonte pas jusqu'à la page. Sans
   lui, à 1 024 px, la colonne principale s'élargissait à la somme des colonnes et c'était la
   page entière qui défilait de côté, au lieu du seul tableau. position:relative : les listes
   « Déplacer vers » masquées (.pb-move, en position absolue) restent dans le cadre qui défile ;
   rattachées à la page, celles des dernières colonnes l'élargissaient de 350 px. */
.pb-board.pb-fluide{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;contain:inline-size}
.pb-board.pb-fluide > .pb-col{min-width:0;scroll-snap-align:start}
/* 184 px : les six colonnes tiennent sans défiler dès 1 440 px de large (écran 16/10 d'un portable). */
.pb-board.pb-fluide.pr-board{grid-auto-columns:minmax(184px,1fr)}
/* Téléphone et petite tablette : les colonnes s'empilent (mobile.css pose une seule piste). */
@media (max-width: 900px){ .pb-board.pb-fluide{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible} .pb-board.pb-fluide > .pr-col{min-height:0} }

/* Les onglets : soulignés, sur toute la largeur. Ils changent de pipeline, la page en dessous ;
   un contrôle segmenté (comme la période juste en dessous) aurait fait croire à un filtre de plus.
   L'onglet ouvert est dit trois fois : graisse, trait accent (3:1 sur le fond), aria-selected. */
.pl-onglets{display:flex;gap:var(--s5);border-bottom:1px solid var(--border);margin-bottom:var(--s5);max-width:100%;overflow-x:auto}
.pl-onglets[hidden]{display:none}
.pl-onglet{position:relative;min-height:40px;padding:8px 2px;border:0;background:transparent;color:var(--text2);font:500 14px var(--font);cursor:pointer;white-space:nowrap}
.pl-onglet:hover{color:var(--text)}
.pl-onglet[aria-selected="true"]{color:var(--text);font-weight:600}
.pl-onglet[aria-selected="true"]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.pl-panneau[hidden]{display:none}
/* Le filtre de période du haut (Tout, Semaine…) règle le Pipeline client ; la Prospection a le sien. */
body[data-section="pipeline"][data-pipeline-onglet="prospection"] #period-filter{display:none}

/* La page Prospection : barre d'outils, bandeau de chiffres, tableau. */
.pr-page{display:flex;flex-direction:column;gap:var(--s4)}
.pr-page > .pb-board,.pr-page > .pr-archives{margin-top:var(--s2)}
.pr-barre{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
/* Le bandeau : le style partagé des chiffres (.chiffres, plus haut — [P1] 02/10/2026, point 3).
   Les chiffres par agent (« 3 / 1 ») restent un cran plus petits que ceux de l'entonnoir. */
.pr-bd-agent .pr-bd-v{font-size:19px}

/* Les colonnes : une voie teintée, des cartes claires — la lecture des pipelines HubSpot. En
   sombre, la voie reste au fond des cartes et les cartes s'éclaircissent. */
.pr-col{display:flex;flex-direction:column;padding:var(--s3);min-height:320px}
body.light .pr-col{background:var(--bg3)}
.pr-col-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.pr-col-t{margin:0;font:600 13px/1.3 var(--font);color:var(--text)}
.pr-cnt{flex-shrink:0;padding:1px 8px;border-radius:20px;background:var(--bg4);color:var(--text2);font:600 11.5px var(--mono)}
.pr-col-note{margin:4px 0 0;font-size:11.5px;line-height:1.4;color:var(--text3)}
.pr-col-corps{display:flex;flex-direction:column;flex:1;margin-top:var(--s3)}
.pr-col .pr-vide{min-height:88px;display:flex;align-items:center;justify-content:center;margin:0;padding:var(--s3);border:1px dashed var(--border2);border-radius:var(--r);font-size:12px;color:var(--text3)}

/* Les cartes : aérées, sans ombre ; le survol ne fait que préciser le bord. */
.pr-col .pb-card.pr-carte{padding:var(--s3);margin-bottom:var(--s2);border-radius:var(--r);background:var(--bg3)}
body.light .pr-col .pb-card.pr-carte{background:var(--bg2)}
.pr-col .pb-card.pr-carte:hover{transform:none;box-shadow:none;border-color:var(--border2)}
/* Le nom garde sa place : l'ancienneté passe à la ligne plutôt que de couper le nom en morceaux. */
.pr-carte-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px var(--s2)}
.pr-carte-nom{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:break-word}
.pr-age{margin-left:auto;font-size:11px;color:var(--text3);white-space:nowrap}
.pr-age-relance{color:var(--amber);font-weight:600}
.pr-carte-ent{margin-top:2px;font-size:12.5px;color:var(--text2);overflow-wrap:break-word}
.pr-puces{display:flex;flex-wrap:wrap;gap:4px;margin-top:var(--s2)}
.pr-puce{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:var(--rs);background:var(--bg4);color:var(--text2);font-size:11px;line-height:1.5;overflow-wrap:break-word}
body.light .pr-puce{background:var(--bg3)}
.pr-puce svg{flex-shrink:0}
/* L'agent : mêmes couleurs que la pastille « Apporté par » d'avant, déjà vérifiées à 4,5:1. */
.pr-puce.pr-puce-agent{background:var(--amber-bg);color:var(--amber);font-weight:600}
.pr-carte-pied{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--border)}
.pr-suite{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.4;color:var(--text2)}
.pr-suite svg{flex-shrink:0;color:var(--text3)}
.pr-suite-perte{flex-wrap:wrap;gap:4px 8px}
.pr-carte .pr-motif{margin:0;font-size:12px;font-weight:600;color:var(--text)}
.pr-date{font-size:11.5px;color:var(--text3)}
.pr-detail{margin:4px 0 0;font-size:11.5px;line-height:1.4;color:var(--text2);overflow-wrap:break-word}
.pr-carte .pr-lien{margin-top:0}

/* Les fiches archivées : une liste avec de l'air, la première colonne ne touche plus le bord
   (« Camille Ferrand est trop collé sur le côté », 24/09/2026 : les cellules d'en-tête de ligne
   n'avaient aucune marge intérieure). */
.pr-archives{display:flex;flex-direction:column;gap:var(--s3)}
.pr-h2{margin:0;font:600 15px var(--font);color:var(--text)}
.pr-archives-tete .pr-note{margin:4px 0 0;max-width:78ch}
.pr-tableau table{min-width:640px}
.pr-tableau thead th{padding:10px 16px}
.pr-tableau tbody th,.pr-tableau tbody td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left;font-size:13px;font-weight:400}
.pr-tableau tbody tr:last-child th,.pr-tableau tbody tr:last-child td{border-bottom:none}
.pr-tableau tbody tr{cursor:default}
.pr-tableau tbody tr:hover td,.pr-tableau tbody tr:hover th{background:transparent}
.pr-tableau .pr-leger{display:block;margin-top:2px;font-size:12px}
.pr-tableau .pr-motif{margin:0;font-size:13px;color:var(--text)}
.pr-nom-lien{min-height:24px;padding:0;border:0;background:none;color:var(--text);font:600 13.5px var(--font);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px}
.pr-nom-lien:hover{text-decoration-color:currentColor}
.pr-cell-action{text-align:right;white-space:nowrap}

/* Administration → Agents commerciaux : l'accès au CRM de chaque agent et ses actions. */
.agt-acces{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.agt-acces .btn+.btn{margin-left:0}

/* ── L'espace d'un agent commercial (24/09/2026) ─────────────────────────────────────────
   « Il verra uniquement la pipeline de prospection » : la barre latérale se réduit à Pipeline,
   Mon profil et Déconnexion, la barre du haut au thème. Une entrée ajoutée plus tard au menu
   est masquée d'office pour un agent (:not(#nav-pipeline)). Le serveur refuse de toute façon
   tout le reste : ceci n'est que l'écran qui suit. 25/09/2026 : « Mes relevés » (#nav-releves)
   s'y ajoute — ses relevés de commissions (css/releves.css la cache à l'équipe). */
body.espace-agent .nav-s .nav-group-header,
body.espace-agent .nav-group-body > .nav-i:not(#nav-pipeline):not(#nav-releves),
body.espace-agent #nav-group-admin,
body.espace-agent .sb-stat,
body.espace-agent #period-filter,
body.espace-agent .tb-search,
body.espace-agent #bell-wrap,
body.espace-agent .topbar > .btn-p{display:none!important}
body.espace-agent #nav-body-pilotage{max-height:none;opacity:1;visibility:visible;pointer-events:auto}
/* [V18] 05/10/2026 : Pipeline est passé dans la catégorie Commercial (css/navigation.css). */
body.espace-agent #nav-body-commercial{max-height:none;opacity:1;visibility:visible;pointer-events:auto}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   CHAÎNE IA — V2 (21/09/2026) · js/40-chaine-ia.js, js/42-administration-v2.js, js/41-guide.js
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* Échanges */
.ech-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ech-h{font:600 15px var(--font);color:var(--text);margin:0 0 4px}
.ech-boutons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ech-vide{padding:20px;border:1px dashed var(--border2);border-radius:var(--r);color:var(--text3);font-size:13px;text-align:center}
.ech-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ech-item{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:flex-start;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.ech-ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glow);color:var(--accent)}
.ech-ic-mail{background:var(--amber-bg);color:var(--amber)}
.ech-ic-appel{background:var(--green-bg);color:var(--green)}
.ech-meta{font-size:12px;color:var(--text2);margin-bottom:4px}
.ech-texte{font-size:13px;color:var(--text);line-height:1.55;white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ech-texte.ech-ouvert{display:block;-webkit-line-clamp:unset}
.ech-plus{border:0;background:none;padding:0;margin-top:4px;color:var(--accent);font:600 12px var(--font);cursor:pointer;text-decoration:underline;min-height:24px}
.ech-actions{display:flex;gap:6px;flex-wrap:wrap}
.ech-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.ech-form .ech-large,.ech-form .ech-erreur{grid-column:1 / -1}
.ech-erreur{color:var(--red);font-size:12.5px;min-height:1em}
.prop-resume-ligne{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.prop-resume-ligne .gen-l{margin:0}

/* Analyse et cahier des charges */
.cdc-info{background:var(--glow);border-radius:var(--r);padding:10px 14px;font-size:12.5px;color:var(--text);margin:0 0 14px;line-height:1.5}
.cdc-bloc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:18px 20px;margin-bottom:16px}
.cdc-t{font:600 14px var(--font);color:var(--text);margin:0 0 12px}
.cdc-st{font:600 12.5px var(--font);color:var(--text);margin:18px 0 8px}
.cdc-jauge-ligne{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cdc-jauge{position:relative;width:112px;height:112px;flex-shrink:0}
.cdc-jauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.cdc-jauge circle{fill:none;stroke-width:10}
.cdc-jauge-fond{stroke:var(--bg4)}
.cdc-jauge-val{stroke-linecap:round;transition:stroke-dasharray .4s}
.cdc-rouge .cdc-jauge-val{stroke:var(--red)}
.cdc-orange .cdc-jauge-val{stroke:var(--amber)}
.cdc-vert .cdc-jauge-val{stroke:var(--green)}
.cdc-jauge-v{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:38px;color:var(--text)}
.cdc-jauge-v b{font:700 28px var(--font-display)}
.cdc-jauge-v span{font-size:12px;color:var(--text3)}
.cdc-jauge-txt{font-size:13px;color:var(--text2);line-height:1.7}
.cdc-progression span{font-weight:600;color:var(--text)}
.cdc-couv{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cdc-couv li{display:grid;grid-template-columns:minmax(150px,1.3fr) 2fr 52px 86px;gap:10px;align-items:center;font-size:12.5px}
.cdc-couv-n{color:var(--text)}
.cdc-couv-p{color:var(--text2);font-family:var(--mono);text-align:right}
.cdc-barre{height:8px;background:var(--bg4);border-radius:4px;overflow:hidden}
.cdc-barre span{display:block;height:100%}
.cdc-barre .cdc-complet{background:var(--green)}
.cdc-barre .cdc-partiel{background:var(--amber)}
.cdc-barre .cdc-manquant{background:var(--red)}
.cdc-badge{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:10px;white-space:nowrap}
.cdc-b-complet{background:var(--green-bg);color:var(--green)}
.cdc-b-partiel{background:var(--amber-bg);color:var(--amber)}
.cdc-b-manquant{background:var(--red-bg);color:var(--red)}
.cdc-c-bloquant{background:var(--red-bg);color:var(--red)}
.cdc-c-important{background:var(--amber-bg);color:var(--amber)}
.cdc-c-confort{background:var(--bg4);color:var(--text2)}
.cdc-manques{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cdc-manques li{display:grid;grid-template-columns:62px 1fr;gap:10px;font-size:13px;color:var(--text)}
.cdc-id{font-family:var(--mono);font-size:12px;color:var(--text2);padding-top:1px}
.cdc-constat{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.5}
.cdc-acquis{margin-top:14px}
.cdc-acquis summary{cursor:pointer;font:600 12.5px var(--font);color:var(--text);min-height:24px}
.cdc-acquis ul{margin-top:10px}
.cdc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cdc-versions{display:grid;gap:12px}
.cdc-version{border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center}
.cdc-version .cdc-actions{margin:0}
.cdc-version .cdc-suivi,.cdc-version > div[id^="cdc-editeur"]{grid-column:1 / -1}
.cdc-suivi{font-size:12.5px;color:var(--text2)}
.cdc-suivi:empty{display:none}
.cdc-editeur{margin-top:6px}
.cdc-onglets{display:flex;gap:2px;margin-bottom:6px}
.cdc-ong{border:1px solid var(--border);background:transparent;color:var(--text2);font:600 12px var(--font);padding:5px 12px;border-radius:6px;cursor:pointer;min-height:28px}
.cdc-ong.actif{background:var(--glow);color:var(--accent);border-color:var(--accent)}
.cdc-md{width:100%;font-family:var(--mono);font-size:12.5px;line-height:1.55}
.cdc-apercu{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;font-size:13.5px;line-height:1.65;color:var(--text);max-height:70vh;overflow:auto}
.cdc-apercu h1{font-size:20px;margin:0 0 10px}
.cdc-apercu h2{font-size:16px;margin:18px 0 8px}
.cdc-apercu h3{font-size:14px;margin:14px 0 6px}
.cdc-apercu h4{font-size:13.5px;margin:12px 0 4px}
.cdc-apercu .md-h1{font-size:20px;margin:0 0 10px}
.cdc-apercu .md-h2{font-size:16px;margin:18px 0 8px}
.cdc-apercu .md-h3{font-size:14px;margin:14px 0 6px}
.cdc-apercu .md-h4{font-size:13.5px;margin:12px 0 4px}
.cdc-dif-fs{border:0;padding:0;margin:0;min-width:0}
/* Mémoire du dossier client — 23/09/2026 · js/51-memoire-client.js */
.mem-zone:empty{display:none}
.mem-bloc{border:1px solid var(--border);border-radius:var(--r);background:var(--bg2);padding:12px 14px;margin:10px 0 14px}
.mem-tete .cdc-t{margin:0 0 4px}
.mem-etat{margin:0 0 8px}
.mem-fichiers{margin:6px 0 0;padding-left:18px;font-size:12.5px;line-height:1.55}
.mem-fichiers li{margin:3px 0}
/* Écarts au modèle du contrat — 23/09/2026 · js/52-contrat-articles.js */
.ct-ecarts{padding:10px 16px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text2)}
.ct-ecarts:empty{display:none}
.ct-ecarts-tete{color:var(--text);margin-bottom:4px}
.ct-ecarts-resume{margin:4px 0 8px;line-height:1.5;max-height:9em;overflow:auto}
.ct-ecarts-note{margin:4px 0;color:var(--amber)}
.ct-ecarts-liste{padding-left:20px;margin:8px 0}
.ct-ecart{margin:0 0 12px}
.ct-ecart details{margin-top:4px}
.ct-ecart-av,.ct-ecart-ap{margin-top:6px}
.cdc-apercu table,.cdc-table{border-collapse:collapse;width:100%;font-size:12.5px}
.cdc-apercu td,.cdc-apercu th,.cdc-table td,.cdc-table th{border:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top}
/* 28/09/2026 : un bloc teinté à contour fin, plus de trait épais à gauche. */
.cdc-apercu blockquote{border:1px solid color-mix(in srgb,var(--red) 35%,transparent);border-radius:var(--rs);background:var(--red-bg);margin:8px 0;padding:8px 12px}
.cdc-apercu code{font-family:var(--mono);font-size:12px;background:var(--bg4);padding:0 4px;border-radius:4px}
.cdc-corriger{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center}
.cdc-corr-l{flex-basis:100%;font-size:12px;font-weight:600;color:var(--text2)}
.cdc-corr-err{flex-basis:100%}
.cdc-corriger .fi{flex:1}
.cdc-archives{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text2)}
.cdc-archives b{color:var(--text)}
.cdc-dif-liste{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cdc-dif-liste li{border:1px solid var(--border);border-radius:var(--r);padding:8px 10px}
.cdc-dif-liste .pr-case{margin:0}
.cdc-dif-date{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.cdc-dif-date .fi{max-width:170px}

/* Administration : Constitution, Réglages IA */
/* [V18] 05/10/2026 (document de Célian, §11) : toute la largeur de la zone de contenu, sans plafond ; seuls les paragraphes gardent une largeur de lecture (en ch). */
.adm-zone{min-width:0}
.adm-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.adm-h{font:600 18px var(--font-display);color:var(--text);margin:0 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-version{font:500 13px var(--font);color:var(--text2)}
.adm-dates{font-size:12px;color:var(--text3)}
.adm-doc{max-height:none}
.adm-histo{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--text)}
/* position:relative (audit du 27/09/2026) : les étiquettes .sr-only des cellules, en position absolue,
   prenaient pour repère un ancêtre HORS du cadre qui défile ; à 320-390 px, Réglages IA débordait
   alors de la page (418 px). Le cadre devient leur repère : elles défilent avec le tableau. */
.adm-table-wrap{overflow-x:auto;position:relative}
.adm-ia th[scope="row"]{font-weight:600;min-width:180px}
.adm-ligne{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.ck-cat{border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin:0 0 10px}
.ck-cat legend{font:600 12.5px var(--font);color:var(--text);padding:0 4px}
.ck-ligne{display:grid;grid-template-columns:78px 1fr 72px 120px auto;gap:6px;align-items:center;margin-bottom:10px}
/* [AB] 03/10/2026 : chantier v11, audit des boutons — une ligne de critère (Réglages IA) alignait des
   champs de 36 px, une criticité de 37 et « Retirer » de 32 : hauteur commune --cmd-h, même texte. */
.ck-ligne>:is(.btn,.fi,.fsel){height:var(--cmd-h);min-height:var(--cmd-h);padding-top:0;padding-bottom:0;font-size:13px;box-sizing:border-box}
.ck-cs{grid-column:1 / -1;width:100%;font-size:12.5px}
.ck-total{font:600 13px var(--font);padding:8px 12px;border-radius:var(--r);margin-top:6px}
.ck-ok{background:var(--green-bg);color:var(--green)}
.ck-ko{background:var(--red-bg);color:var(--red)}

/* Guide pas à pas (F8) */
.guide-voile{position:fixed;inset:0;background:rgba(10,8,18,.62);z-index:100000}
.guide-trou{position:fixed;z-index:100000;border-radius:10px;box-shadow:0 0 0 9999px rgba(10,8,18,.62);outline:2px solid var(--accent);pointer-events:none;transition:all .2s}
.guide-bulle{position:fixed;z-index:100001;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:14px 16px 10px;box-shadow:0 18px 60px rgba(0,0,0,.45);font-family:var(--font)}
.guide-fleche{position:absolute;width:14px;height:14px;background:var(--bg2);border:1px solid var(--border2);transform:translateX(-50%) rotate(45deg)}
.guide-dessous .guide-fleche{top:-8px;border-right:0;border-bottom:0}
.guide-dessus .guide-fleche{bottom:-8px;border-left:0;border-top:0}
.guide-centre .guide-fleche{display:none}
.guide-progression{font-size:11px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.guide-titre{font:600 14px var(--font);color:var(--text);margin:4px 0 6px}
.guide-texte{font-size:13px;line-height:1.55;color:var(--text);margin:0 0 12px}
.guide-boutons{display:flex;justify-content:flex-end;gap:8px}
.guide-arreter{display:block;margin:10px auto 0;border:0;background:none;color:var(--text2);font:500 12px var(--font);text-decoration:underline;cursor:pointer;min-height:24px}
@media (max-width: 700px){
  .ech-item{grid-template-columns:32px 1fr}
  .ech-actions{grid-column:1 / -1}
  .ech-form{grid-template-columns:1fr}
  .cdc-couv li{grid-template-columns:1fr 52px}
  .cdc-couv .cdc-barre{grid-column:1 / -1;grid-row:2}
  .cdc-couv .cdc-badge{justify-self:start}
  .cdc-version{grid-template-columns:1fr}
  .ck-ligne{grid-template-columns:70px 1fr 64px}
  .ck-crit{grid-column:1 / 3}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   CRÉATION PAR EXTRACTION — V2 (22/09/2026, §13.4) · js/43-extraction-client.js
   Tant que l'étape « Collez ce que vous avez » est affichée, le reste de l'étape 1 s'efface.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
#sc-1.sc-extraction > :not(#extraction-zone):not(h3){display:none!important}
.ext-zone{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ext-l{font:600 14px var(--font);color:var(--text)}
.ext-zone .fta{width:100%;min-height:180px}
.champ-extrait{background:var(--amber-bg)!important;box-shadow:inset 0 0 0 2px var(--amber)!important}
.champ-extrait-tag{display:inline-block;margin-left:6px;color:var(--amber);font-weight:600;text-transform:none;letter-spacing:0}
.ext-legende{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text);margin:0 0 12px}
.ext-pastille{width:12px;height:12px;border-radius:3px;background:var(--amber-bg);box-shadow:inset 0 0 0 1px var(--amber);flex-shrink:0}
.ext-echanges-bloc{margin-bottom:1rem}
.ext-leg{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:6px}
.ext-ech{border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;margin-top:8px;display:grid;grid-template-columns:auto 160px;gap:6px 10px;align-items:center}
.ext-ech .pr-case{margin:0}
.ext-ech-t{grid-column:1 / -1;font-size:12.5px;color:var(--text2);white-space:pre-wrap;word-break:break-word}

/* Pièces jointes des tâches et des ajouts CRM — V2 (22/09/2026, §13.2) · js/44-pieces-jointes.js */
.pj-zone{display:flex;flex-direction:column;gap:6px}
.pj-depot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px;border:1.5px dashed var(--border2);border-radius:10px;cursor:pointer;text-align:center;color:var(--text2);font-size:12.5px;background:var(--bg3)}
.pj-depot strong{color:var(--text)}
.pj-depot.pj-survol,.pj-depot:focus-within{border-color:var(--accent)}
.pj-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pj-input:focus-visible + .pj-liste,.pj-zone:focus-within .pj-depot{outline:2px solid var(--accent);outline-offset:2px}
.pj-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pj-liste:empty{display:none}
.pj-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;border:1px solid var(--border);border-radius:8px;padding:6px 8px}
.pj-nom{flex:1;min-width:120px;color:var(--text);word-break:break-all}

/* Catalogue de modules — V2 (22/09/2026, §13.7) · js/46-modules.js */
.mod-desc{font-size:12px;color:var(--text2);font-weight:400;margin-top:4px;max-width:420px}
.mod-deps{border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;display:flex;flex-wrap:wrap;gap:4px 14px}
.mod-deps legend{font-size:12px;color:var(--text2);padding:0 4px}
.mod-deps .pr-case{margin:0}
.mod-table th[scope="row"]{min-width:220px}

/* Autres documents — V2 (22/09/2026, §13.8) · js/48-documents-v2.js */
.dv2-choix{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dv2-carte{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer}
.dv2-carte:has(input:checked){border-color:var(--accent);background:var(--glow)}
.dv2-carte input{margin-top:3px;accent-color:var(--accent)}
.dv2-carte span{display:flex;flex-direction:column;gap:2px}
.dv2-carte .pr-note{margin:0}
.dv2-page{background:#fff;color:#1a1a2e;border:1px solid var(--border);border-radius:var(--r);padding:26px 30px;font:13.5px/1.6 Helvetica,Arial,sans-serif;max-height:62vh;overflow:auto}
.dv2-page:focus{outline:2px solid var(--accent);outline-offset:2px}
.dv2-page h1{font-size:19px;color:#1B4F8A;margin:0 0 10px}
.dv2-page h2{font-size:14.5px;margin:16px 0 6px;color:#1a1a2e}
.dv2-page table{width:100%;border-collapse:collapse;margin:8px 0}
.dv2-page th,.dv2-page td{border-bottom:1px solid #dcdce6;padding:6px;text-align:left;vertical-align:top}
.dv2-page .n{text-align:right}
/* L'aperçu reste une page blanche dans le thème sombre : il neutralise les règles générales des tableaux. */
.dv2-page th{color:#474760}
.dv2-page tbody tr:hover td{background:transparent}
.dv2-page .dv2-tete{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid #1B4F8A;padding-bottom:10px;margin-bottom:16px;font-size:12.5px}
.dv2-page .dv2-sign{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.dv2-page .dv2-sign div{border-top:1px solid #1a1a2e;padding-top:6px;min-height:60px}

/* Carte de la répartition des clients — V2 (22/09/2026, §13.5) · js/49-carte.js */
.carte-bloc{margin-top:16px}
.carte-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.carte-onglets{display:flex;gap:4px;flex-wrap:wrap}
/* 24/09/2026 : carte entièrement vectorielle (plus de tuiles images, qui affichaient « API Key
   Required » et floutaient les pays). Ses couleurs sont des jetons propres, dans les deux thèmes :
   mer, terres sans client (discrètes), décor autour du niveau affiché, frontières, et cinq paliers
   d'une seule teinte — le bleu de la charte. En thème sombre, l'ordre des paliers s'inverse en
   luminosité (le plus gros chiffre est le plus clair) : sinon il se fondrait dans le fond sombre.
   Les paliers ne portent jamais seuls l'information : étiquette, légende et tableau la disent en texte. */
:root{--carte-mer:#101020;--carte-terre:#2F2F4A;--carte-contexte:#24243B;--carte-trait:#4F4F70;--carte-p1:#2E5283;--carte-p2:#3A6DAD;--carte-p3:#5189D0;--carte-p4:#7AA9E6;--carte-p5:#B0CDF3}
body.light{--carte-mer:#D8DFEA;--carte-terre:#FFFFFF;--carte-contexte:#F1F2F6;--carte-trait:#B9BDCB;--carte-p1:#C9DBF2;--carte-p2:#93B7E4;--carte-p3:#5F90CF;--carte-p4:#3268AA;--carte-p5:#1B4F8A}
.carte-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.carte-nav-btns{display:flex;gap:6px;flex-wrap:wrap}
.carte-nav-btns .btn[aria-disabled="true"]{opacity:.55;cursor:default;transform:none;box-shadow:none;background:transparent}
.carte-fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12.5px;color:var(--text2)}
.carte-fil li+li::before{content:'›';content:'›' / '';margin-right:4px;color:var(--text3)}
.carte-fil .pr-lien{margin-top:0;font-size:12.5px}
.carte-fil [aria-current="location"]{font-weight:600;color:var(--text)}
/* 25/09/2026 — « que ça prenne toute la taille de mon écran » (Célian, capture 52). La carte prend
   toute la largeur du bloc (la colonne de 240 px de la légende n'existe plus : légende et fil
   flottent SUR la carte) et la hauteur de la fenêtre moins l'en-tête du CRM (66 px), la tête du
   bloc et la ligne d'aide : bloc en haut de l'écran, la carte le remplit jusqu'en bas. 460 px au
   moins, pour une fenêtre très basse. dvh : la hauteur réelle sur téléphone, barre d'adresse comprise. */
.carte-tete-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.carte-plein-btn{min-height:32px}
.carte-plein-btn svg{flex-shrink:0}
.carte-corps{position:relative;min-width:0}
.carte-map-bloc{position:relative;min-width:0}
/* isolation : les calques de Leaflet (z-index 400 à 1000) ne passent plus au-dessus des fenêtres du CRM. */
.carte-map{height:max(460px,calc(100vh - 196px));height:max(460px,calc(100dvh - 196px));border-radius:var(--r);overflow:hidden;background:var(--carte-mer);border:1px solid var(--border);isolation:isolate}
/* Ce qui flotte sur la carte : le fil d'Ariane et ses deux boutons en haut à gauche, la légende et
   le détail en haut à droite. Des surfaces pleines (jamais de transparence sous du texte), un filet
   et une ombre légère pour les détacher des terres. Au-dessus des calques de la carte (isolée). */
.carte-flottant{position:absolute;z-index:4;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 2px 12px rgba(0,0,0,.18)}
.carte-nav.carte-flottant{top:12px;left:12px;max-width:calc(100% - 330px);margin:0;padding:6px 8px 6px 12px;gap:6px 12px}
.carte-cote.carte-flottant{top:12px;right:12px;width:280px;max-height:calc(100% - 24px);gap:0;overflow:hidden}
.carte-cote-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:6px 12px;background:none;border:0;border-radius:var(--r);color:var(--text);font:600 13px var(--font);cursor:pointer;text-align:left}
.carte-cote-btn:hover{background:var(--bg3)}
.carte-cote-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.carte-cote-btn svg{flex-shrink:0;transition:transform .18s ease}
.carte-cote-btn[aria-expanded="false"] svg{transform:rotate(180deg)}
.carte-cote-corps{display:flex;flex-direction:column;gap:14px;overflow:auto;min-height:0;padding:10px 14px 14px;border-top:1px solid var(--border)}
.carte-cote-corps[hidden]{display:none}
/* Plein écran : natif (:fullscreen) ou de secours (le bloc couvre la fenêtre, sous les fenêtres du
   CRM, z-index 200). La carte prend alors toute la hauteur moins la tête du bloc. */
.carte-bloc.carte-plein-actif{display:flex;flex-direction:column;margin:0;padding:14px 18px;border:0;border-radius:0;background:var(--bg2);overflow:auto}
.carte-bloc.carte-plein-actif .carte-map{height:max(320px,calc(100vh - 108px));height:max(320px,calc(100dvh - 108px))}
.carte-bloc.carte-plein-secours{position:fixed;inset:0;z-index:190}
.carte-bloc:fullscreen{width:100%;height:100%}
.carte-bloc::backdrop{background:var(--bg2)}
/* Au dézoom maximal, la planète est plus petite que le cadre : les marges sont de la mer. */
.carte-map.leaflet-container{background:var(--carte-mer);font:inherit}
.carte-map.leaflet-container:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Traits : 1 px pour les zones du niveau sur la carte agrandie (0,8 px s'y perdait), le décor
   reste plus fin. Toute zone se clique depuis le 25/09/2026, décor compris : curseur main partout
   (plus de flèche sur les zones sans client, qui faisait croire à une zone morte). */
.carte-map path.carte-zone,.carte-map path.carte-contexte{stroke:var(--carte-trait);stroke-width:1px;stroke-linejoin:round}
.carte-map path.carte-contexte{fill:var(--carte-contexte);stroke-width:.8px}
.carte-map path.carte-vide{fill:var(--carte-terre)}
.carte-map path.carte-zone:focus{outline:none}
.carte-map path.carte-zone:focus-visible{stroke:var(--text);stroke-width:2.5px}
.carte-map path.carte-halo{fill:none;stroke:var(--bg2);stroke-width:5px;stroke-linejoin:round}
.carte-map path.carte-trace{fill:none;stroke:var(--text);stroke-width:2px;stroke-linejoin:round}
.carte-p1{fill:var(--carte-p1);background-color:var(--carte-p1)}
.carte-p2{fill:var(--carte-p2);background-color:var(--carte-p2)}
.carte-p3{fill:var(--carte-p3);background-color:var(--carte-p3)}
.carte-p4{fill:var(--carte-p4);background-color:var(--carte-p4)}
.carte-p5{fill:var(--carte-p5);background-color:var(--carte-p5)}
.carte-map.leaflet-container .leaflet-bar{border:1px solid var(--border2);box-shadow:none}
.carte-map.leaflet-container .leaflet-bar a{background:var(--bg2);color:var(--text);border-bottom-color:var(--border2);width:32px;height:32px;line-height:30px}
.carte-map.leaflet-container .leaflet-bar a:hover{background:var(--bg3)}
.carte-map.leaflet-container .leaflet-bar a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.carte-map.leaflet-container .leaflet-bar a.leaflet-disabled{background:var(--bg3);color:var(--text3)}
/* Étiquette de survol et de focus : nom de la zone, son chiffre, et ce que fait le clic. */
.carte-etiquette{position:absolute;z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:1px;max-width:260px;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:var(--rs);padding:7px 10px;font-size:13px;line-height:1.4;box-shadow:0 4px 24px rgba(0,0,0,.5)}
.carte-etiquette[hidden],.carte-indice[hidden]{display:none}
.carte-etiquette b{font-weight:600;font-size:13.5px}
.carte-etq-action{color:var(--text2);font-size:12px}
.carte-indice{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:var(--r);padding:8px 12px;font-size:13px;text-align:center;max-width:calc(100% - 24px)}
.carte-aide{font-size:12px;color:var(--text3);margin:6px 0 0;line-height:1.5}
.carte-sources{font-size:11.5px;color:var(--text3);margin:8px 0 0}
.carte-cote{display:flex;flex-direction:column;gap:12px;font-size:13px}
.carte-leg-t{color:var(--text2);font-weight:600}
.carte-leg{list-style:none;margin:0;padding:0}
.carte-leg-l{display:flex;align-items:center;gap:6px;color:var(--text2);margin-top:4px}
.carte-sw{width:16px;height:12px;border-radius:3px;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--text2)}
.carte-sw.carte-vide{background-color:var(--carte-terre)}
.carte-clients{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto}
.carte-table-bloc{margin-top:10px}
/* line-height = min-height (28/09/2026) : sur 24 px de haut, le texte restait collé en haut. */
.carte-table-bloc summary{cursor:pointer;font:600 12.5px/24px var(--font);color:var(--text);min-height:24px}
/* Les en-têtes des tableaux restent sur une ligne partout ailleurs : ici, à 320 px, « Budget moyen »
   poussait le tableau des zones hors de l'écran (défilement horizontal de toute la page). */
.carte-table-bloc .cdc-table th,.carte-table-bloc .cdc-table td{white-space:normal}
@media (max-width: 420px){ .carte-table-bloc .cdc-table th,.carte-table-bloc .cdc-table td{padding:5px 5px} }
.carte-rapport svg{max-width:420px;display:block;margin:0 auto}
.carte-rapport figcaption{font-size:12px;color:#6b6b85;text-align:center;margin:6px 0}
.carte-rapport table{width:100%;border-collapse:collapse;font-size:12px}
.carte-rapport td,.carte-rapport th{border-bottom:1px solid #dcdce6;padding:4px 6px;text-align:left}
/* Téléphone et tablette étroite : rien ne flotte (un panneau de 280 px mangerait la carte) — le fil
   reprend sa place au-dessus, la légende au-dessous. Hauteur bornée : un doigt qui glisse sur la
   carte la déplace, il faut de la page autour pour la faire défiler. Le plein écran reste là. */
@media (max-width: 900px){
  .carte-flottant{position:static;box-shadow:none}
  .carte-nav.carte-flottant{max-width:none;margin:0 0 10px;padding:0;border:0;border-radius:0;background:none}
  .carte-cote.carte-flottant{width:auto;max-height:none;margin-top:10px}
  .carte-map{height:clamp(320px,62vh,560px);height:clamp(320px,62dvh,560px)}
  .carte-bloc.carte-plein-actif .carte-map{height:max(320px,calc(100dvh - 150px))}
}

/* Double authentification — V2 (22/09/2026, §13.12) · js/50-securite.js */
.login-code-aide{font-size:13px;color:var(--text2);line-height:1.5;margin:0}
.login-l{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.login-code{background:var(--bg3);border:1px solid var(--border-input);border-radius:10px;color:var(--text);font:600 22px var(--mono);letter-spacing:.4em;text-align:center;padding:11px 14px;width:100%}
.login-mem{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);cursor:pointer;min-height:24px}
.login-mem input{width:16px;height:16px;accent-color:var(--accent)}
.login-btn{background:var(--accent-fill);color:#fff;border:none;border-radius:10px;padding:13px;font:600 14px var(--font);cursor:pointer}
.login-liens{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.secu-bloc{border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;margin:0 0 12px;display:flex;flex-direction:column;gap:6px}
.secu-bloc legend{font:600 12.5px var(--font);color:var(--text);padding:0 4px}
.secu-bloc .pr-case{margin:0}

/* ── Paramètres (24/09/2026, js/53) : la rangée de sous-onglets en tête de chaque sous-page ── */
/* `.nav-i` pose display:flex, qui l'emporte sur l'attribut hidden : sans cette règle, les trois
   entrées rangées dans Paramètres resteraient visibles. */
.nav-i[hidden]{display:none}
.param-onglets{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:0 0 1.25rem;padding:0 0 0}
.param-onglet{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 14px;min-height:44px;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--text2);cursor:pointer;border-radius:6px 6px 0 0}
.param-onglet:hover{color:var(--text);background:var(--bg3)}
.param-onglet.active{color:var(--accent);border-bottom-color:var(--accent)}
.param-onglet:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:560px){.param-onglets{flex-wrap:nowrap;overflow-x:auto}.param-onglet{white-space:nowrap}}
/* Les intitulés de catégorie (.param-cat) posés à côté des onglets ont disparu le 28/09/2026 : les
   catégories vivent sur l'accueil des Paramètres (css/parametres.css). */

/* [P2] 02/10/2026 : brief v9, points 4 et 11.
   · L'info-bulle (aideBulleHtml, js/58) : un bouton « ? » de 28 px, nommé, qui montre ou cache une
     explication accessoire ; Échap ou un clic ailleurs la referme. Elle se pose sous la ligne de son
     hôte (position:relative sur l'hôte), jamais au survol, sans animation.
   · Le compteur d'un onglet de l'Atelier (js/53c), repris de la pastille de son ancienne entrée. */
.aide-bulle{display:inline-flex;vertical-align:middle}
.aide-bulle-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text3);cursor:pointer}
.aide-bulle-btn:hover,.aide-bulle-btn[aria-expanded="true"]{background:var(--glow);color:var(--accent)}
.aide-bulle-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.aide-bulle-txt{position:absolute;left:0;top:calc(100% + 4px);z-index:30;display:block;width:max-content;max-width:min(420px,calc(100vw - 32px));padding:10px 12px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg2);font:400 13px/1.5 var(--font);color:var(--text);text-align:left;text-transform:none;letter-spacing:normal;white-space:normal}
.aide-bulle-txt[hidden]{display:none}
.atl-compte{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--bg4);color:var(--text2);font:600 11px/20px var(--mono);text-align:center}
.param-onglet.active .atl-compte{background:var(--glow);color:var(--accent)}
@media (max-width:560px){.atl-onglets .param-onglet{padding-left:10px;padding-right:10px}}
/* [P5] 01/10/2026 : invitations (Equipe, agents), ecran du mot de passe, Journal d'activite, page
   Sante plus lisible (bug 19 du 02/10/2026). Styles statiques : aucune transition, aucune animation. */
.invit-canaux{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:10px 0 0;display:grid;gap:10px;min-width:0}
.invit-canaux legend{font-size:13px;font-weight:600;color:var(--text);padding:0 4px}
.invit-canal{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text);cursor:pointer;min-height:24px}
.invit-canal input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex-shrink:0}
.invit-canal-off{color:var(--text2);cursor:not-allowed}
.invit-canal-aide{display:block;font-size:12.5px;color:var(--text3);line-height:1.45;margin-top:2px}
.invit-non-conf{display:inline-block;font-size:12px;font-weight:600;color:var(--text2);border:1px solid var(--border-input);border-radius:999px;padding:0 8px;margin-left:4px}
.eq-acces{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px}
.eq-acces .elv-badge{font-size:11.5px}
.eq-acces-txt{font-size:12.5px;color:var(--text2);line-height:1.45}
.eq-actions{flex-shrink:0;justify-content:flex-end;max-width:100%}
.eq-existants{margin-top:18px;padding:14px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:12px}
.eq-existants h3{font-size:15px;font-weight:700;color:var(--text);margin:0 0 6px}
.agt-acces-cmd{margin-top:4px}
.mdp-regles{font-size:13px;color:var(--text2);line-height:1.5}
.mdp-regles-t{margin:0 0 4px;font-weight:600;color:var(--text)}
.mdp-regles ul{margin:0;padding-left:18px}
.mdp-conseil{margin:6px 0 0;color:var(--text3)}
.mdp-force-barre{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;height:6px}
.mdp-force-barre i{display:block;border-radius:3px;background:var(--border-input)}
.mdp-force-barre[data-niveau="1"] i:nth-child(-n+1),.mdp-force-barre[data-niveau="2"] i:nth-child(-n+2),
.mdp-force-barre[data-niveau="3"] i:nth-child(-n+3),.mdp-force-barre[data-niveau="4"] i:nth-child(-n+4){background:var(--accent)}
.mdp-force-txt{margin:4px 0 0;font-size:13px;color:var(--text2);min-height:1.2em}
.jadm-titre{font-size:20px;font-weight:700;color:var(--text);margin:0}
.jadm-intro{font-size:14px;color:var(--text2);margin:4px 0 14px;line-height:1.5}
.jadm-filtres{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px;align-items:end;padding:14px;background:var(--bg2);border:1px solid var(--border);border-radius:12px}
.jadm-champ{display:flex;flex-direction:column;gap:5px;min-width:0}
.jadm-champ label{font-size:13px;font-weight:600;color:var(--text)}
.jadm-champ .fi,.jadm-champ .fsel{width:100%;height:var(--cmd-h);box-sizing:border-box}
.jadm-boutons{grid-column:1 / -1}
.jadm-etat{font-size:13.5px;color:var(--text2);margin:12px 0 8px}
.jadm-table-zone{overflow-x:auto;max-width:100%}
.jadm-table{width:100%;border-collapse:collapse;font-size:13.5px}
.jadm-table th{text-align:left;font-size:12.5px;font-weight:600;color:var(--text2);padding:8px 10px;border-bottom:1px solid var(--border-input)}
.jadm-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text)}
.jadm-fort{display:block;font-weight:600}
.jadm-leger{display:block;font-size:12.5px;color:var(--text3);line-height:1.45}
.jadm-table .elv-badge{font-size:11.5px}
.jadm-quand{white-space:nowrap;color:var(--text2)}
.jadm-ip{font-variant-numeric:tabular-nums;color:var(--text2)}
.jadm-sensible td{background:var(--amber-bg)}
.jadm-detail summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:13px;min-height:24px}
.jadm-detail summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.jadm-detail dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:8px 0 0;font-size:12.5px}
.jadm-detail dt{color:var(--text3)}
.jadm-detail dd{margin:0;overflow-wrap:anywhere}
.jadm-pages{margin-top:12px;justify-content:center}
.sante-tete{font-size:16px;font-weight:700}
.sante-section{font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin:20px 0 6px}
.sante-ligne{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:13px 0;border-bottom:1px solid var(--border)}
.sante-ligne-corps{flex:1;min-width:min(100%,220px)}
.sante-ligne-titre{font-size:15px;font-weight:600;color:var(--text)}
.sante-ligne-detail{font-size:13.5px;color:var(--text2);margin-top:3px;line-height:1.5}
.sante-aide{font-size:13px;color:var(--text3);margin-top:8px;line-height:1.5}
.sante-case{font-size:14px}
#sante-content .elv-badge{font-size:12px}
.sante-journal-lien{margin-top:12px}
#sante-content .th .pf-btn-sm{font-size:13px;min-height:32px;padding:0 12px}
.eq-actions .btn-d{color:var(--red)}

/* [P6] 02/10/2026 : préparation de rendez-vous (lot I) — la fenêtre de préparation (#rdvbrief-ov),
   celle qui demande le type, la durée et qui sera là (#rdv-type-ov), et le rôle dans les
   rendez-vous sur la page Équipe. Styles statiques, aucune transition ; jetons de la charte. */
.rdvp-ov{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow:auto}
.rdvp-fen{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;width:100%;max-width:480px;margin:auto;box-shadow:0 24px 80px rgba(0,0,0,.4);font-family:var(--font);overflow:hidden}
.rdvp-fen-large{max-width:680px}
.rdvp-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px 8px}
.rdvp-titre{margin:0;font-size:17px;font-weight:700;color:var(--text);font-family:var(--font-display)}
.rdvp-fermer{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;border:1px solid transparent;border-radius:8px;background:none;color:var(--text2);cursor:pointer}
.rdvp-fermer:hover{border-color:var(--border2);color:var(--text)}
.rdvp-etat{margin:0;padding:0 22px;font-size:12.5px;color:var(--text2);line-height:1.5}
.rdvp-etat:empty{display:none}
.rdvp-corps{padding:10px 22px 20px;max-height:76vh;overflow:auto;color:var(--text)}
.rdvp-entete{margin-bottom:12px}
.rdvp-puce{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--accent);background:var(--glow);padding:3px 10px;border-radius:20px}
.rdvp-puce-neutre{color:var(--text2);background:var(--bg3)}
.rdvp-type{margin:8px 0 2px;font-size:16px;font-weight:600;line-height:1.4;color:var(--text);font-family:var(--font-display)}
.rdvp-meta{margin:0;font-size:12.5px;color:var(--text2)}
.rdvp-alerte{margin:0 0 12px;padding:9px 13px;background:var(--amber-bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:12.5px;line-height:1.5}
.rdvp-section{padding:12px 0;border-top:1px solid var(--border)}
.rdvp-section h3{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text2)}
.rdvp-p{margin:0 0 6px;font-size:13.5px;line-height:1.6;color:var(--text)}
.rdvp-p:last-child{margin-bottom:0}
.rdvp-liste{margin:0;padding-left:20px;display:grid;gap:5px;font-size:13.5px;line-height:1.55;color:var(--text)}
.rdvp-deroule{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.rdvp-deroule li{display:grid;grid-template-columns:86px 1fr;gap:10px;font-size:13.5px;line-height:1.55}
.rdvp-moment{font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums}
.rdvp-mene{color:var(--text2)}
.rdvp-personne{padding:10px 12px;background:var(--bg3);border-radius:10px;margin-bottom:8px}
.rdvp-personne:last-child{margin-bottom:0}
.rdvp-personne h4{margin:0 0 2px;font-size:14px;font-weight:700;color:var(--text)}
.rdvp-role{margin:0 0 6px;font-size:12.5px;color:var(--text2);line-height:1.5}
.rdvp-actions{justify-content:flex-end;padding-top:14px;border-top:1px solid var(--border)}
.rdvp-form{padding:6px 22px 16px;display:grid;gap:12px}
.rdvp-aide{margin:0;font-size:12.5px;color:var(--text2);line-height:1.5}
.rdvp-aide-i{color:var(--text2);font-size:12.5px}
.rdvp-qui{border:1px solid var(--border);border-radius:10px;padding:8px 12px 10px;margin:0;display:grid;gap:6px;min-width:0}
fieldset.rdvp-qui legend{padding:0 4px}
.rdvp-cases{display:grid;gap:2px}
.rdvp-case{display:flex;align-items:center;gap:9px;min-height:32px;font-size:13.5px;color:var(--text);cursor:pointer}
.rdvp-case input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
.rdvp-pied{justify-content:flex-end;padding:12px 22px;background:var(--bg3);border-top:1px solid var(--border)}
@media (max-width:520px){.rdvp-deroule li{grid-template-columns:1fr;gap:0}.rdvp-tete,.rdvp-corps,.rdvp-form,.rdvp-pied{padding-left:16px;padding-right:16px}}
.eq-role-rdv{margin-top:4px;font-size:12.5px;color:var(--text2);line-height:1.45;overflow-wrap:anywhere}
.eq-role-rdv-l{font-weight:600}
.eq-role-rdv-vide{color:var(--text3);font-style:italic}

/* [LG] 03/10/2026 : chantier v10, lot G (vitesse) — la ligne d'état d'une opération en cours
   (suppression d'un client, enregistrement en arrière-plan), et la page « occupée » pendant une
   lecture préalable (bilan d'une suppression). Statique : aucune animation. */
.etat-operation{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:var(--text2)}
html.elv-occupe,html.elv-occupe *{cursor:progress}

/* [V12C] 03/10/2026 : boutons « Ouvrir Gmail / Outlook » des écrans « un e-mail vient de partir » (js/50-securite.js) */
.login-messagerie{border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.login-messagerie-adr{margin:0;font-size:13px;color:var(--text2)}
.login-messagerie-adr b{color:var(--text);word-break:break-all}
.login-messagerie-btns{display:flex;gap:8px;flex-wrap:wrap}
.login-messagerie-btn{flex:1 1 120px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-input);border-radius:8px;background:var(--bg3);color:var(--text);font:600 13px var(--font);text-decoration:none;padding:0 12px}
.login-messagerie-btn:hover{border-color:var(--accent)}
.login-messagerie-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* [V12B] 03/10/2026 : carte « Contacts » d'une fiche (js/54c-contacts.js) — styles statiques */
.ctc-carte{margin-top:var(--s4,16px)}
.ctc-tete{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:var(--s3,12px)}
.ctc-tete .fiche-section-t{margin:0}
.ctc-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3,12px)}
.ctc-ligne{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding-bottom:var(--s3,12px);border-bottom:1px solid var(--border)}
.ctc-ligne:last-child{border-bottom:0;padding-bottom:0}
.ctc-id{min-width:0;overflow-wrap:anywhere}
.ctc-infos,.ctc-notes{margin-top:2px;font-size:13px;color:var(--text2,inherit)}
.ctc-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── [V19] 06/10/2026 : audit responsive (document de Célian, §13) — cibles d'au moins 24 px ─────────
   WCAG 2.2, critère 2.5.8 : sur ordinateur aussi. Boutons en texte (titre d'une tâche, d'une notification,
   « Retour »), liens de nom dans les tableaux, champs de recherche dont le cadre visible est plus grand que
   la zone cliquable : 16 à 21 px relevés. Les cases à cocher de 16 à 18 px restent : espacées dans leurs
   lignes, elles relèvent de l'exception d'espacement du même critère. */
.tk-titre-btn,.nf-titre,.back-btn,.content summary{min-height:24px}
.cl-nom,.fc-lien{display:inline-block;min-height:24px;line-height:24px}
.eye{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
.content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]){min-height:24px}
/* Le curseur d'avancement : 24 px de zone cliquable, la piste reste un trait de 6 px (même dessin qu'au téléphone, css/mobile.css). */
input[type=range].pct-range{height:24px;background:transparent;background-image:linear-gradient(var(--bg4),var(--bg4));background-size:100% 6px;background-position:center;background-repeat:no-repeat}
/* Sur la fiche client, la piste est dessinée à part (css/fiche-client.css) : pas de second trait. */
.fiche input[type=range].pct-range{background-image:none}