/* ══════════════════════════════════════════════════════════════════════════════════════════
   PARSIGHT HUB — SOCLE DE DESIGN (refonte 10/2026 · maquettes « Hub refonte 2026-10-20 »)
   LE SEUL endroit qui régit les couleurs, la typographie, les formes, les ombres, les mouvements.
   Un composant ou un écran ne contient jamais une couleur, une taille de texte, une graisse ou un
   rayon écrits en dur : il cite un jeton d'ici (tests/unit/test_socle_design.py le vérifie).
     · changer la couleur de marque : les deux lignes --marque / --marque-sur-clair ;
     · changer la police : --police ;
     · changer le logo : les fichiers de app/static/images/marque/ (voir base.html, layout.html).
   Sombre par défaut ; [data-theme="light"] pour le clair.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* 1. MARQUE — changer ces lignes change tout le Hub ------------------------------------------ */
:root{
  --marque:           #6f8fff;   /* bleu Tilen, éclairci pour le fond sombre */
  --marque-sur-clair: #2a53e2;   /* bleu Tilen (charte), sur fond blanc */
  --police:      'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --police-code: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;  /* code, journaux */
}

/* 1 bis. Marques tierces imposées par leur charte (bouton « Continuer avec Microsoft ») -------- */
:root{ --ms-1: #f25022; --ms-2: #7fba00; --ms-3: #00a4ef; --ms-4: #ffb900; }

/* 2. Couleurs tirées de la marque — calculées, ne pas toucher ------------------------------- */
:root{
  --acc:      var(--marque);
  --acc-fonce: color-mix(in oklab, var(--acc) 72%, black);
  --acc-clair: color-mix(in oklab, var(--acc) 45%, white);
  --acc-fond: color-mix(in oklab, var(--acc) 12%, transparent);
  --sur-acc:  color-mix(in oklab, var(--acc) 14%, black);    /* texte posé sur la marque */
}
:root[data-theme="light"]{ --acc: var(--marque-sur-clair); --sur-acc: #fff; }

/* 3. Neutres --------------------------------------------------------------------------------- */
:root{
  color-scheme: dark;
  --nuit:    #09090b;   /* fond de page */
  --quai:    #0f0f12;   /* blocs, champs */
  --quai-2:  #16161a;   /* survol, fond secondaire */
  --quai-3:  #1d1d22;   /* sélection, pastilles */
  --rail-bg: #09090b;
  --trait:   #26262c;   /* filet courant */
  --trait-2: #1a1a1f;   /* filet discret */
  --trait-3: #3a3a43;   /* filet appuyé, survol */
  --craie:   #f1f1f3;   /* texte */
  --craie-2: #c8c8cf;
  --craie-3: #8d8d97;
  --craie-4: #62626b;   /* texte effacé */
  --blanc: #fff; --noir: #000;
  --ombre-teinte: #000;
}
:root[data-theme="light"]{
  color-scheme: light;
  --nuit:    #ffffff;
  --quai:    #fafafb;
  --quai-2:  #f4f4f6;
  --quai-3:  #ececf0;
  --rail-bg: #18181c;   /* le rail reste sombre jusqu'à la nouvelle barre (lot 1) */
  --trait:   #e3e3e8;
  --trait-2: #ececf0;
  --trait-3: #c9c9d1;
  --craie:   #17171b;
  --craie-2: #3d3d45;
  --craie-3: #6b6b75;
  --craie-4: #9a9aa3;
  --ombre-teinte: #14141e;
}

/* 4. Action : la marque (nom historique « signal ») ------------------------------------------ */
:root{ --signal: var(--acc); --signal-hi: color-mix(in oklab, var(--acc) 85%, white); --on-signal: var(--sur-acc); }
:root[data-theme="light"]{ --signal-hi: var(--acc-fonce); }

/* 5. États et origines — indépendants de la marque -------------------------------------------- */
:root{
  --ok:   oklch(78% 0.150 155);  --ok-bg:   oklch(27% 0.060 155);  --ok-tr:   oklch(40% 0.085 155);
  --warn: oklch(80% 0.135 62);   --warn-bg: oklch(28% 0.055 60);   --warn-tr: oklch(42% 0.080 60);
  --bad:  oklch(72% 0.170 22);   --bad-bg:  oklch(27% 0.070 22);   --bad-tr:  oklch(42% 0.100 22);
  --info: oklch(78% 0.105 235);  --info-bg: oklch(27% 0.050 235);  --info-tr: oklch(41% 0.070 235);
  /* Origine d'un droit */
  --o-contrat: oklch(80% 0.100 275); --o-contrat-bg: oklch(29% 0.075 275); --o-contrat-tr: oklch(44% 0.100 275);
  --o-offert:  var(--ok);            --o-offert-bg:  var(--ok-bg);          --o-offert-tr:  var(--ok-tr);
  --o-essai:   oklch(78% 0.130 38);  --o-essai-bg:   oklch(29% 0.065 38);   --o-essai-tr:   oklch(44% 0.095 38);
  --o-dero:    oklch(80% 0.095 195); --o-dero-bg:    oklch(28% 0.048 195);  --o-dero-tr:    oklch(42% 0.068 195);
  --o-inclus:  var(--craie-2);       --o-inclus-bg:  var(--quai-3);         --o-inclus-tr:  var(--trait-3);
}
:root[data-theme="light"]{
  --ok:   oklch(46% 0.130 155);  --ok-bg:   oklch(95% 0.035 155);  --ok-tr:   oklch(84% 0.065 155);
  --warn: oklch(52% 0.130 60);   --warn-bg: oklch(95.5% 0.040 70); --warn-tr: oklch(85% 0.075 70);
  --bad:  oklch(50% 0.185 22);   --bad-bg:  oklch(95.5% 0.030 22); --bad-tr:  oklch(86% 0.060 22);
  --info: oklch(46% 0.120 240);  --info-bg: oklch(95% 0.030 240);  --info-tr: oklch(84% 0.055 240);
  --o-contrat: oklch(42% 0.160 277); --o-contrat-bg: oklch(94.5% 0.035 277); --o-contrat-tr: oklch(82% 0.080 277);
  --o-essai:   oklch(50% 0.150 38);  --o-essai-bg:   oklch(95% 0.035 45);    --o-essai-tr:   oklch(85% 0.075 45);
  --o-dero:    oklch(44% 0.095 200); --o-dero-bg:    oklch(95% 0.028 200);   --o-dero-tr:    oklch(84% 0.055 200);
}

/* 6. Typographie ------------------------------------------------------------------------------- */
:root{
  --taille-nano: 9px;  --taille-micro: 10.5px; --taille-legende: 11.5px; --taille-petit: 12.5px;
  --taille-texte: 13px; --taille-lecture: 14.5px; --taille-sous-titre: 17px; --taille-titre: 20px;
  --taille-grand: 24px; --taille-hero: 30px; --taille-geant: 34px;
  --graisse-normale: 400; --graisse-moyenne: 500; --graisse-forte: 600; --graisse-grasse: 700;
  --f-titre: var(--police); --f-texte: var(--police); --f-mono: var(--police);  /* chiffres : Inter, alignés (body) */
}

/* 7. Formes, ombres, mouvement ------------------------------------------------------------------ */
:root{
  --r-0: 2px; --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 14px; --r-5: 20px; --r-rond: 999px;
  --ombre: 0 12px 32px -10px color-mix(in oklab, var(--ombre-teinte) 70%, transparent), 0 2px 8px -2px color-mix(in oklab, var(--ombre-teinte) 50%, transparent);
  --ease: cubic-bezier(.22,1,.36,1);
  --t: 150ms var(--ease);
  --rail-w: 68px; --menu-w: 184px; --label-w: 196px;
  --cote-w: 248px; --cote-replie: 60px;   /* barre latérale dépliée / repliée en icônes */
}
:root[data-theme="light"]{ --ombre: 0 12px 32px -12px color-mix(in oklab, var(--ombre-teinte) 18%, transparent), 0 2px 8px -2px color-mix(in oklab, var(--ombre-teinte) 10%, transparent); }
@media (prefers-reduced-motion: reduce){ :root{ --t: 0ms linear; } }

/* 8. Teintes d'espace (rail, repères) --------------------------------------------------------- */
:root{
  /* Origine d'un droit */
  --l-pilotage:    oklch(92% 0.010 95);
  --l-commercial:  oklch(74% 0.135 280);
  --l-deploiement: oklch(78% 0.115 200);
  --l-materiel:    oklch(76% 0.140 55);
  --l-support:     oklch(78% 0.125 25);
  --l-finance:     oklch(78% 0.140 150);
  --l-partenaires: oklch(74% 0.150 350);
  --l-production:  oklch(76% 0.110 310);
  --l-projets:     oklch(76% 0.105 240);
  --l-biblio:      oklch(80% 0.120 128);
  --l-produits:    oklch(78% 0.060 265);
  --esp: var(--l-commercial);   /* ligne de l'espace courant */
}
:root[data-theme="light"]{
  --l-commercial:  oklch(48% 0.170 280);
}

/* Teintes d'espace ajoutées par le socle. --l-* sert au rail (toujours sombre),
   --e-* au contenu : en clair, la teinte du rail serait trop pâle sur fond blanc. */
:root{
  --l-marketing: var(--l-production);
  --l-echanges:  oklch(80% 0.115 178);
  --l-reglages:  oklch(80% 0.020 265);
  --e-pilotage: var(--l-pilotage);       --e-commercial: var(--l-commercial);
  --e-deploiement: var(--l-deploiement); --e-materiel: var(--l-materiel);
  --e-finance: var(--l-finance);         --e-partenaires: var(--l-partenaires);
  --e-marketing: var(--l-marketing);     --e-projets: var(--l-projets);
  --e-biblio: var(--l-biblio);           --e-produits: var(--l-produits);
  --e-reglages: var(--l-reglages);       --e-echanges: var(--l-echanges);
  --e-support: var(--l-support);
  --itin-h: 52px;
}
:root[data-theme="light"]{
  /* Le rail reste sombre en clair : ses pastilles gardent leurs teintes vives. */
  --l-commercial: oklch(74% 0.135 280);
  --e-pilotage: oklch(36% 0.030 265);    --e-commercial: oklch(48% 0.170 280);
  --e-deploiement: oklch(48% 0.105 205); --e-materiel: oklch(54% 0.140 55);
  --e-support: oklch(52% 0.150 25);
  --e-finance: oklch(46% 0.125 152);     --e-partenaires: oklch(52% 0.170 352);
  --e-marketing: oklch(50% 0.150 310);   --e-projets: oklch(48% 0.120 242);
  --e-biblio: oklch(48% 0.115 130);      --e-produits: oklch(46% 0.060 265);
  --e-reglages: oklch(46% 0.030 265);    --e-echanges: oklch(46% 0.100 180);
}

/* 9. Rail (sombre dans les deux thèmes jusqu'à la nouvelle barre) et papier (aperçus de documents, toujours clairs) */
:root{
  --rail-texte: #a1a1aa; --rail-texte-2: #8b8b94; --rail-texte-fort: #f4f4f5;
  --sur-teinte: #0f0f12;            /* texte posé sur une pastille de teinte */
  --voile: color-mix(in oklab, var(--ombre-teinte) 60%, transparent);   /* fond derrière une fenêtre */
  --papier: #fff; --papier-2: #f3f4f8; --papier-creme: #fbfaf7;
  --encre: #1b2233; --encre-2: #566079; --encre-3: #6b707a; --encre-noire: #1d1f24; --encre-grise: #454a54;
  --filet-papier: #d9dde6; --filet-papier-2: #e3e0d8; --filet-papier-3: #c9c5bb; --lien-papier: #2a3fa0;
}
:root[data-theme="light"]{ --sur-teinte: #fff; }

/* ═════════════════════════════ FIN DU SOCLE — plus aucune valeur en dur en dessous ═════════════════════════════ */

/* ══ BASE ═══════════════════════════════════════════════════════════════
   La remise à zéro vaut dans le cadre (rail, menu, fil, volets) et dans le
   contenu d'un écran (.v3), pas sur le document entier : une bibliothèque
   tierce posée dans un écran (calendrier, graphique) garde ses propres styles. */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--nuit); color:var(--craie); font-family:var(--f-texte); font-variant-numeric:tabular-nums; font-feature-settings:'cv11' 1;
  font-size:var(--taille-texte); line-height:1.45; -webkit-font-smoothing:antialiased; }
[hidden]{ display:none !important; }
:is(.nv,.rail,.menu,.itin,.volet,.v3,.dlg,.toasts,.ext) :where(h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure){ margin:0; }
:is(.nv,.rail,.menu,.itin,.volet,.v3,.dlg,.toasts,.ext) :where(h1,h2,h3,h4,h5){ font-size:inherit; font-weight:inherit; line-height:inherit; }
:is(.nv,.rail,.menu,.itin,.volet,.v3,.dlg,.toasts,.ext) :where(ul,ol){ padding:0; list-style:none; }
:is(.nv,.rail,.menu,.itin,.volet,.v3,.dlg,.toasts,.ext) :where(button){ font:inherit; color:inherit; background:none; border:0; border-radius:0; padding:0; cursor:pointer; text-align:inherit; }
:is(.nv,.rail,.menu,.itin,.volet,.v3,.dlg,.toasts,.ext) :where(a){ color:inherit; text-decoration:none; }
:is(.nv,.rail,.menu,.itin,.volet,.v3,.dlg,.toasts,.ext) :where(input,select,textarea){ font:inherit; color:inherit; }
:is(.nv,.rail,.menu,.itin,.volet,.v3,.dlg,.toasts,.ext) :where(b,strong){ font-weight:var(--graisse-forte); }
:is(.nv,.rail,.menu,.itin,.volet,.v3,.dlg,.toasts,.ext) :where(kbd){ background:none; }
:is(.nv,.rail,.menu,.itin,.volet,.v3,.dlg,.toasts,.ext) :where(svg){ vertical-align:baseline; }
.v3 :where(table){ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; border-radius:var(--r-1); }
:root[data-theme="light"] :focus-visible{ outline-color:var(--craie); }
.num,.money{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; word-spacing:-.3em; }
.price-strip .v,.bar .p,.fr-label span,.gestes .end,.kv dd,.apercu dd{ word-spacing:-.3em; }
.mono{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-2); }
.dim{ color:var(--craie-3); } .dimmer{ color:var(--craie-4); }
.money--neg{ color:var(--bad); }
.ico{ width:14px; height:14px; flex:none; }

/* ══ STRUCTURE (refonte 10/2026) : barre latérale · haut · contenu ═══════════════════════════════════
   La barre : les espaces en groupes, chacun dépliable sur ses écrans (filet guide, écran courant marqué).
   Repliée (⌘B), elle ne garde que les icônes et se déploie au survol, par-dessus le contenu. */
.app{ display:grid; grid-template-columns:var(--cote-w) minmax(0,1fr); min-height:100vh; }
.nv{ view-transition-name:hub-barre; position:sticky; top:0; height:100vh; height:100dvh; width:var(--cote-w); display:flex; flex-direction:column;
  background:var(--nuit); border-right:1px solid var(--trait-2); padding:12px 10px 10px; z-index:35; overflow:hidden;
  transition:width 200ms var(--ease), box-shadow 200ms var(--ease); }
.nv-tete{ display:flex; align-items:center; gap:8px; height:36px; padding:0 6px; margin-bottom:12px; flex:none; }
.nv-marque{ display:flex; align-items:center; gap:10px; min-width:0; color:var(--craie); }
.nv-logo{ width:26px; height:26px; flex:none; display:block; background:var(--acc); -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat; }
.nv-marque b{ font-size:var(--taille-sous-titre); font-weight:var(--graisse-grasse); letter-spacing:-.035em; white-space:nowrap; }
.nv-cherche{ display:flex; align-items:center; gap:9px; width:100%; height:34px; padding:0 10px; margin-bottom:10px; flex:none;
  border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai); color:var(--craie-4); font-size:var(--taille-petit);
  white-space:nowrap; transition:border-color var(--t), color var(--t); }
.nv-cherche:hover{ border-color:var(--trait-3); color:var(--craie-3); }
.nv-cherche svg{ width:14px; height:14px; flex:none; }
.nv-cherche kbd{ margin-left:auto; font-family:var(--f-mono); font-size:var(--taille-micro); padding:1px 5px; border:1px solid var(--trait); border-radius:var(--r-1); color:var(--craie-4); }
.nv-corps{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; margin:0 -4px; padding:0 4px 12px;
  scrollbar-width:thin; scrollbar-color:var(--trait) transparent; }
.nv-grp{ font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); color:var(--craie-4); padding:16px 10px 6px; white-space:nowrap; }
.esp-l{ display:flex; align-items:center; border-radius:var(--r-2); transition:background var(--t); }
.esp-l:hover{ background:var(--quai-2); }
.esp-a{ flex:1; min-width:0; display:flex; align-items:center; gap:11px; height:34px; padding:0 6px 0 10px; color:var(--craie-2);
  font-size:var(--taille-texte); white-space:nowrap; }
.esp-a svg{ width:16px; height:16px; flex:none; color:var(--craie-3); }
.esp-nom{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.esp.is-courant > .esp-l{ background:var(--quai-3); }
.esp.is-courant .esp-a,.esp.is-courant .esp-a svg{ color:var(--craie); }
.esp-a .nb{ margin-left:auto; min-width:18px; height:18px; padding:0 6px; border-radius:var(--r-rond); background:var(--quai-3); color:var(--craie-2);
  font-size:var(--taille-micro); font-weight:var(--graisse-forte); display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.esp.is-courant .esp-a .nb{ background:var(--trait-3); color:var(--craie); }
.esp-chev{ width:28px; height:28px; flex:none; display:grid; place-items:center; color:var(--craie-4); border-radius:var(--r-2); }
.esp-chev:hover{ color:var(--craie); }
.esp-chev svg{ width:13px; height:13px; transition:transform var(--t); }
.esp.is-ouvert .esp-chev svg{ transform:rotate(90deg); }
/* Les écrans d'un espace se déplient en glissant (comme Cloudflare) : hauteur 0 → hauteur du contenu, sans saut. */
.esp-sous{ position:relative; margin:0 0 0 19px; padding-left:11px; border-left:1px solid var(--trait); height:0; overflow:hidden; opacity:0;
  visibility:hidden; interpolate-size:allow-keywords;
  transition:height 240ms var(--ease), opacity 180ms var(--ease), margin 240ms var(--ease), visibility 0s linear 240ms; }
.esp.is-ouvert .esp-sous{ height:auto; opacity:1; visibility:visible; margin:2px 0 8px 19px;
  transition:height 240ms var(--ease), opacity 220ms var(--ease) 40ms, margin 240ms var(--ease), visibility 0s; }
html.nv-calme .esp-sous{ transition:none !important; }   /* au chargement, les espaces rouverts ne glissent pas */
@media (prefers-reduced-motion: reduce){ .esp-sous,.esp.is-ouvert .esp-sous{ transition:none; } }
.esp-sous h5,.esp-sous h4{ font-size:var(--taille-micro); font-weight:var(--graisse-moyenne); color:var(--craie-4); padding:10px 10px 3px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.esp-ecran{ position:relative; display:flex; align-items:center; min-height:30px; padding:3px 10px; border-radius:var(--r-2);
  color:var(--craie-3); font-size:var(--taille-petit); line-height:1.3; transition:background var(--t), color var(--t); }
.esp-ecran:hover{ background:var(--quai-2); color:var(--craie); }
.esp-ecran[aria-current="page"]{ background:var(--quai-2); color:var(--craie); font-weight:var(--graisse-moyenne); }
.esp-ecran[aria-current="page"]::before{ content:''; position:absolute; left:-12px; top:7px; bottom:7px; width:2px; border-radius:var(--r-0); background:var(--acc); }
.nv-pied{ display:flex; align-items:flex-start; gap:2px; padding-top:8px; border-top:1px solid var(--trait-2); flex:none; }
.nv-pied .esp{ flex:1; min-width:0; }
/* Réglages déplié dans le pied : sa liste défile dans la hauteur qui reste, au lieu de sortir de l'écran. */
.nv-pied .esp.is-ouvert .esp-sous{ max-height:min(56vh, 520px); overflow-y:auto; overscroll-behavior:contain; }
.nv-replie{ width:28px; height:34px; flex:none; display:grid; place-items:center; color:var(--craie-4); border-radius:var(--r-2); transition:background var(--t), color var(--t); }
.nv-replie:hover{ background:var(--quai-2); color:var(--craie); }
.nv-replie svg{ width:15px; height:15px; }
/* Clair / sombre en un geste, à côté des réglages : le soleil en sombre, la lune en clair. */
.nv-theme .i-clair{ display:none; } html[data-theme="light"] .nv-theme .i-sombre{ display:none; } html[data-theme="light"] .nv-theme .i-clair{ display:block; }
html[data-menu="replie"] .nv-replie{ color:var(--acc); }

/* Navigation fluide : d'une page à l'autre, la barre et le haut ne bougent pas, le contenu se fond (navigateurs récents ;
   ailleurs, rien ne change). Rien sous « mouvements réduits ». */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:180ms; }
::view-transition-group(hub-barre),::view-transition-group(hub-haut){ animation:none; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }

/* Les entrées propres à un écran (boîtes du courrier, armoires du partage), rangées sous l'espace courant. */
.esp-sous .menu-item{ display:flex; align-items:center; gap:8px; width:100%; min-height:30px; padding:3px 10px; border-radius:var(--r-2);
  color:var(--craie-3); font-size:var(--taille-petit); line-height:1.3; }
.esp-sous .menu-item:hover,.esp-sous .menu-item[aria-current]{ background:var(--quai-2); color:var(--craie); }
.menu-item .n{ margin-left:auto; font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); }

.main{ min-width:0; display:flex; flex-direction:column; }
/* Le haut : où l'on est, puis Demander, les messages, les notifications, le compte. */
.itin{ view-transition-name:hub-haut; position:sticky; top:0; z-index:30; background:color-mix(in oklab, var(--nuit) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--trait-2); display:flex; align-items:center; gap:10px; height:var(--itin-h); padding:0 22px; }
.itin-fil{ display:flex; align-items:center; gap:8px; min-width:0; font-size:var(--taille-petit); color:var(--craie-3); white-space:nowrap; overflow:hidden; }
.itin-fil > *{ flex:none; }
.itin-fil > :last-child{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.itin-fil a:hover{ color:var(--craie); }
.itin-fil s{ text-decoration:none; color:var(--craie-4); }
.itin-fil b{ color:var(--craie); font-weight:var(--graisse-moyenne); }
.itin-fin{ margin-left:auto; display:flex; align-items:center; gap:4px; flex:none; position:relative; }
.itin-ic{ width:34px; height:34px; border-radius:var(--r-2); display:grid; place-items:center; color:var(--craie-2); position:relative;
  transition:background var(--t), color var(--t); }
.itin .itin-ic{ border-radius:var(--r-2); }
.itin-ic:hover,.itin-ic[aria-expanded="true"]{ background:var(--quai-3); color:var(--craie); }
.itin-ic svg{ width:16px; height:16px; }
.itin-ic .n{ position:absolute; top:3px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-rond);
  background:var(--bad); color:var(--blanc); font-size:var(--taille-nano); font-weight:var(--graisse-grasse); display:grid; place-items:center; line-height:1;
  box-shadow:0 0 0 2px var(--nuit); }
.itin-ic .n.pouls{ animation:pouls-n .9s var(--ease) 2; }
@keyframes pouls-n{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.3); } }
.itin-demander{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; margin-right:4px; border:1px solid var(--trait);
  border-radius:var(--r-2); background:var(--quai); color:var(--craie); font-size:var(--taille-petit); font-weight:var(--graisse-moyenne);
  transition:border-color var(--t), background var(--t); }
.itin-demander:hover{ border-color:var(--trait-3); background:var(--quai-2); }
.itin-demander svg{ width:14px; height:14px; color:var(--acc); }
body:has(.itin-demander) .bu-pastille{ display:none; }
/* « Demander » ouvre l'assistant en panneau de droite (maquette) : pleine hauteur sous le haut, comme les messages. */
body:has(.itin-demander) .bu:not(.bu--grand):not(.bu--plein) .bu-panneau{ position:fixed; top:var(--itin-h); right:0; bottom:0; width:min(420px, 100vw); max-height:none;
  border-radius:0; border-width:0 0 0 1px; border-top:0; background:var(--nuit); box-shadow:-18px 0 50px -20px color-mix(in oklab, var(--ombre-teinte) 60%, transparent);
  animation:panneau-entre 220ms var(--ease); }
.itin-demander[aria-expanded="true"]{ border-color:var(--trait-3); background:var(--quai-3); }
.itin-moi{ width:30px; height:30px; margin-left:6px; border-radius:50%; overflow:hidden; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg, var(--quai-3), var(--trait-3)); color:var(--craie-2); font-size:var(--taille-micro); font-weight:var(--graisse-forte);
  border:1px solid var(--trait); transition:border-color var(--t); }
.itin-moi:hover,.itin-moi[aria-expanded="true"]{ border-color:var(--craie-4); }
.itin-moi img{ width:100%; height:100%; object-fit:cover; display:block; }
.perim{ display:inline-flex; align-items:center; height:24px; padding:0 9px; margin-right:6px; border:1px solid var(--trait); border-radius:var(--r-rond);
  font-size:var(--taille-micro); white-space:nowrap; }
.perim .int{ color:var(--warn); font-weight:var(--graisse-moyenne); }

.view{ padding:16px 18px 28px; max-width:1500px; width:100%; transition:padding-right 220ms var(--ease); }
.view--large{ max-width:none; }

/* ── Volets : ce qui s'ouvre au-dessus du cadre (compte, notifications, recherche) ── */
.volet{ position:fixed; z-index:60; background:var(--quai-2); border:1px solid var(--trait); border-radius:var(--r-3);
  box-shadow:var(--ombre); color:var(--craie); font-size:var(--taille-petit); }
.volet h5{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); padding:8px 8px 4px; }
.volet-ligne{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; border-radius:var(--r-2); font-size:var(--taille-petit); }
.volet .volet-ligne{ padding:7px 8px; border-radius:var(--r-2); }
.volet-ligne:hover,.volet-ligne.is-on{ background:var(--quai-3); }
.volet-ligne svg{ width:14px; height:14px; color:var(--craie-3); flex:none; }
.volet-ligne span{ color:var(--craie-3); font-size:var(--taille-legende); }
.volet-ligne .fin{ margin-left:auto; }
.volet-sep{ height:1px; background:var(--trait); margin:6px 0; }
.volet--moi{ width:260px; padding:6px; }
.choix-theme{ display:flex; gap:2px; margin:0 8px 8px; padding:3px; border-radius:var(--r-2); background:var(--quai); border:1px solid var(--trait); }
.choix-theme button{ flex:1; padding:5px 0; border-radius:var(--r-1); font-size:var(--taille-legende); color:var(--craie-3); text-align:center; }
.choix-theme button[aria-checked="true"]{ background:var(--quai-3); color:var(--craie); }
.moi-qui{ padding:8px 8px 10px; }
.moi-qui b{ display:block; font-size:var(--taille-texte); }
.moi-qui span{ color:var(--craie-3); font-size:var(--taille-legende); }
.volet--notifs,.volet--messages{ padding:0; display:flex; flex-direction:column; }
/* Panneau de droite : notifications, messages. Pleine hauteur sous le haut, il glisse depuis le bord. */
.volet--panneau{ top:var(--itin-h) !important; right:0 !important; left:auto !important; bottom:0; width:min(400px, 100vw); max-height:none;
  border-radius:0; border-width:0 0 0 1px; background:var(--nuit); box-shadow:-18px 0 50px -20px color-mix(in oklab, var(--ombre-teinte) 60%, transparent);
  animation:panneau-entre 220ms var(--ease); }
@keyframes panneau-entre{ from{ transform:translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
.pmsg-liste{ overflow-y:auto; flex:1; padding:6px; }
.pmsg{ display:flex; gap:11px; align-items:center; padding:10px 8px; border-radius:var(--r-2); }
.pmsg:hover{ background:var(--quai-2); }
.pmsg-pp{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--quai-3); color:var(--craie-2); font-size:var(--taille-micro); font-weight:var(--graisse-forte); }
.pmsg.is-neuf .pmsg-pp{ box-shadow:0 0 0 2px var(--nuit), 0 0 0 3.5px var(--acc); }
.pmsg-tx{ min-width:0; flex:1; }
.pmsg-tx b{ display:flex; gap:8px; font-size:var(--taille-texte); font-weight:var(--graisse-moyenne); }
.pmsg-tx b time{ margin-left:auto; font-weight:var(--graisse-normale); font-size:var(--taille-micro); color:var(--craie-4); }
.pmsg-tx span{ display:block; font-size:var(--taille-petit); color:var(--craie-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmsg.is-neuf .pmsg-tx span{ color:var(--craie); }
.notifs-hd{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--trait); }
.notifs-hd b{ font-family:var(--f-titre); font-size:var(--taille-lecture); }
.notifs-hd .btn{ margin-left:auto; }
.notifs-liste{ overflow-y:auto; flex:1; }
.notif{ display:block; width:100%; padding:9px 12px; border-bottom:1px solid var(--trait); position:relative; }
.volet .notif{ padding:9px 12px 9px 22px; }
.notif:last-child{ border-bottom:0; }
.notif:hover{ background:var(--quai-3); }
.notif.is-neuve::before{ content:''; position:absolute; left:9px; top:15px; width:6px; height:6px; border-radius:50%; background:var(--signal); }
.notif b{ display:block; font-size:var(--taille-petit); }
.notif p{ color:var(--craie-2); font-size:var(--taille-legende); margin-top:1px; }
.notif time{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); }
.notifs-vide{ padding:22px 12px; text-align:center; color:var(--craie-3); font-size:var(--taille-petit); }
.notifs-ft{ padding:8px 12px; border-top:1px solid var(--trait); }

/* Recherche : aller à un écran, ou trouver un objet */
.scrim{ position:fixed; inset:0; background:var(--voile); opacity:0; pointer-events:none; transition:opacity var(--t); z-index:40; }
body.cherche-on .scrim--cherche, body.nav-on .scrim--nav{ opacity:1; pointer-events:auto; }
.scrim--cherche{ z-index:58; }
.volet--cherche{ top:12vh; left:50%; transform:translateX(-50%); width:min(560px, calc(100vw - 24px)); padding:0; display:flex; flex-direction:column; max-height:70vh; overflow:hidden; }
.cherche-champ{ display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--trait); }
.cherche-champ svg{ width:15px; height:15px; color:var(--craie-3); flex:none; }
.cherche-champ input{ flex:1; min-width:0; height:44px; background:none; border:0; outline:0; font-size:var(--taille-lecture); color:var(--craie); }
.cherche-champ input::placeholder{ color:var(--craie-4); }
.cherche-champ kbd{ font-family:var(--f-mono); font-size:var(--taille-micro); padding:1px 5px; border:1px solid var(--trait-3); border-radius:var(--r-1); color:var(--craie-3); }
.cherche-liste{ overflow-y:auto; padding:6px; }
.cherche-liste h5{ padding:8px 8px 4px; }
.cherche-liste .volet-ligne i{ font-style:normal; width:18px; height:18px; border-radius:var(--r-1); background:var(--quai-3); color:var(--craie-2);
  display:grid; place-items:center; font-family:var(--f-titre); font-weight:var(--graisse-grasse); font-size:var(--taille-nano); line-height:1; flex:none; }
.cherche-vide{ padding:18px 12px; color:var(--craie-3); font-size:var(--taille-petit); text-align:center; }

/* Messages de retour d'une action */
.flashs{ display:grid; gap:6px; margin-bottom:12px; }
.flash{ display:flex; align-items:flex-start; gap:10px; padding:8px 10px 8px 12px; border:1px solid var(--trait); border-left-width:3px;
  border-radius:var(--r-2); background:var(--quai); font-size:var(--taille-petit); color:var(--craie); }
.flash > span{ flex:1; min-width:0; }
.flash--success{ border-left-color:var(--ok); } .flash--warning{ border-left-color:var(--warn); }
.flash--danger,.flash--error{ border-left-color:var(--bad); } .flash--info,.flash--message{ border-left-color:var(--info); }
.flash button{ color:var(--craie-3); width:20px; height:20px; display:grid; place-items:center; border-radius:var(--r-1); flex:none; }
.flash button:hover{ color:var(--craie); background:var(--quai-3); }
.flash button svg{ width:11px; height:11px; }

/* ══ PRIMITIVES ═════════════════════════════════════════════════════ */
.btn{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid var(--trait);
  border-radius:var(--r-2); background:var(--quai-2); font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); color:var(--craie);
  transition:background var(--t), border-color var(--t); white-space:nowrap; }
.btn:hover{ background:var(--quai-3); border-color:var(--trait-3); }
.btn svg{ width:12px; height:12px; }
.btn--primary{ background:var(--signal); border-color:var(--signal); color:var(--on-signal); font-weight:var(--graisse-forte); }
.btn--primary:hover{ background:var(--signal-hi); border-color:var(--signal-hi); }
.btn--ghost{ border-color:transparent; background:none; color:var(--craie-2); }
.btn--ghost:hover{ background:var(--quai-2); border-color:transparent; color:var(--craie); }
.btn--sm{ height:26px; padding:0 9px; }

.pill{ display:inline-flex; align-items:center; gap:5px; height:18px; padding:0 7px; border-radius:var(--r-1); white-space:nowrap;
  font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.03em; text-transform:uppercase; border:1px solid transparent; }
.pill--ok  { background:var(--ok-bg);   color:var(--ok);   border-color:var(--ok-tr); }
.pill--warn{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-tr); }
.pill--bad { background:var(--bad-bg);  color:var(--bad);  border-color:var(--bad-tr); }
.pill--acc { background:var(--info-bg); color:var(--info); border-color:var(--info-tr); }
.pill--mute{ background:var(--quai-3);  color:var(--craie-2); border-color:var(--trait); }
.tag{ display:inline-block; padding:0 6px; height:18px; line-height:17px; border-radius:var(--r-1); font-size:var(--taille-micro); font-weight:var(--graisse-forte);
  letter-spacing:.06em; text-transform:uppercase; background:var(--quai-3); color:var(--craie-3); border:1px solid var(--trait); }

.panel{ background:var(--quai); border:1px solid var(--trait-2); border-radius:var(--r-3); }
.panel-hd{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--trait-2); }
.panel-hd h3{ font-family:var(--f-titre); font-size:var(--taille-lecture); font-weight:var(--graisse-forte); letter-spacing:.005em; white-space:nowrap; }
.panel-hd .sub{ font-size:var(--taille-legende); color:var(--craie-3); }
.panel-hd .end{ margin-left:auto; display:flex; gap:6px; align-items:center; }

.seg{ justify-self:start; max-width:100%; display:inline-flex; background:var(--nuit); border:1px solid var(--trait-2); border-radius:var(--r-2); padding:2px; gap:2px; }
.seg button{ height:22px; padding:0 9px; border-radius:var(--r-1); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); color:var(--craie-3); transition:background var(--t), color var(--t); }
.seg button:hover{ color:var(--craie); }
.seg button[aria-pressed="true"]{ background:var(--quai-3); color:var(--craie); font-weight:var(--graisse-forte); }
/* Le même contrôle, en boutons radio (un formulaire sans script) : Mes notifications, Notifications de l'équipe. */
.seg label{ position:relative; display:inline-flex; }
.seg label input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg label span{ height:22px; padding:0 9px; border-radius:var(--r-1); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); color:var(--craie-3); display:inline-flex; align-items:center; }
.seg label input:checked + span{ background:var(--quai-3); color:var(--craie); font-weight:var(--graisse-forte); }
.seg label input:focus-visible + span{ outline:2px solid var(--quai); outline-offset:1px; }
.seg label input:disabled + span{ opacity:.55; }
.nt-groupe td{ font-size:var(--taille-legende); font-weight:var(--graisse-forte); text-transform:uppercase; letter-spacing:.04em; color:var(--craie-4); padding-top:14px; }
.sel{ height:26px; padding:0 24px 0 8px; border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai-2); font-size:var(--taille-petit); color:var(--craie); }

.tbl thead th{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.08em; text-transform:uppercase; color:var(--craie-4);
  text-align:left; padding:7px 12px; white-space:nowrap; border-bottom:1px solid var(--trait-2); }
.tbl td{ padding:6px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl .r{ text-align:right; }
.tbl tbody tr{ transition:background var(--t); }
.tbl tbody tr:hover{ background:var(--quai-2); }
.tbl .foot td{ border-top:1px solid var(--trait); border-bottom:0; font-weight:var(--graisse-forte); background:var(--quai-2); }
.tbl-scroll{ overflow-x:auto; position:relative; }
.note{ margin-top:12px; padding:9px 12px; border:1px dashed var(--trait); border-radius:var(--r-2); font-size:var(--taille-petit); color:var(--craie-2); max-width:78ch; }
.note b{ color:var(--craie); font-weight:var(--graisse-forte); }

/* ══ FICHE COMPTE ═══════════════════════════════════════════════════ */
.acct-hd{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.acct-logo{ width:36px; height:36px; border-radius:var(--r-2); background:var(--quai-3); border:1px solid var(--trait);
  display:grid; place-items:center; font-family:var(--f-titre); font-size:var(--taille-lecture); font-weight:var(--graisse-grasse); color:var(--esp); flex:none; }
.acct-hd h1{ font-family:var(--f-titre); font-size:var(--taille-grand); font-weight:var(--graisse-forte); letter-spacing:.002em; line-height:1.1;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.acct-meta{ display:flex; flex-wrap:wrap; gap:3px 14px; margin-top:4px; font-size:var(--taille-legende); color:var(--craie-3); align-items:center; }
.acct-meta b{ color:var(--craie-2); font-weight:var(--graisse-moyenne); }
.prod-chip{ display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:var(--r-1);
  border:1px solid var(--trait-3); background:var(--quai-3); color:var(--craie); font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.04em; text-transform:uppercase; }
.prod-chip--add{ border-style:dashed; border-color:var(--trait); background:none; color:var(--craie-3); text-transform:none; letter-spacing:0; font-weight:var(--graisse-moyenne); }

/* Tableau d'affichage : trois chiffres sur une ligne, en chasse fixe */
.price-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3);
  background:var(--quai); margin-bottom:12px; overflow:hidden; }
.price-strip > div{ padding:10px 14px 11px; border-right:1px solid var(--trait-2); display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 14px; align-items:baseline; }
.price-strip > div:last-child{ border-right:0; }
.price-strip .k{ grid-column:1 / -1; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); margin-bottom:2px; }
.price-strip .v{ font-family:var(--f-mono); font-size:var(--taille-grand); font-weight:var(--graisse-moyenne); letter-spacing:-.04em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.price-strip .n{ font-size:var(--taille-legende); color:var(--craie-3); }
.price-strip .n b{ color:var(--craie-2); font-weight:var(--graisse-forte); }

.tabs{ display:flex; gap:0; border-bottom:1px solid var(--trait-2); margin-bottom:12px; }
.tabs button{ padding:6px 12px 7px; font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); color:var(--craie-3); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color var(--t), border-color var(--t); flex:none; }
.tabs button:hover{ color:var(--craie); }
.tabs button[aria-selected="true"]{ color:var(--craie); border-bottom-color:var(--esp); font-weight:var(--graisse-forte); }
.tabs .n{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); margin-left:5px; }
.tabpane:not(.is-on){ display:none !important; }

/* ── Frise des droits ─────────────────────────────────────────────── */
.frise-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:7px 12px; border-bottom:1px solid var(--trait-2); }
.frise-tools label{ font-size:var(--taille-legende); color:var(--craie-3); }
.frise-scroll{ overflow-x:auto; }
.frise{ min-width:860px; position:relative; }
.fr-head,.fr-row{ display:grid; grid-template-columns:var(--label-w) minmax(0,1fr); }
.fr-head{ border-bottom:1px solid var(--trait); position:sticky; top:0; background:var(--quai); z-index:2; }
.fr-months{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); position:relative; }
.fr-months span{ font-family:var(--f-mono); font-size:var(--taille-micro); font-weight:var(--graisse-moyenne); letter-spacing:.04em; text-transform:uppercase;
  color:var(--craie-4); padding:6px 0 5px 6px; border-left:1px solid var(--trait-2); }
.fr-months span.yr{ color:var(--craie-2); }
.fr-months .fr-now{ position:absolute; bottom:-1px; transform:translateX(-50%); z-index:3; border-left:0; text-transform:none; letter-spacing:0;
  font-size:var(--taille-micro); font-weight:var(--graisse-forte); color:var(--on-signal); background:var(--signal); padding:1px 6px 0; border-radius:var(--r-1) var(--r-1) 0 0; white-space:nowrap; }
.fr-row{ border-bottom:1px solid var(--trait-2); }
.fr-row:last-child{ border-bottom:0; }
.fr-label{ padding:6px 10px 6px 12px; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.fr-label b{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); }
.fr-label span{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); letter-spacing:-.02em; }
.fr-track{ position:relative; padding:3px 0; background-image:linear-gradient(to right, var(--trait-2) 1px, transparent 1px); background-size:calc(100% / 12) 100%; }
.fr-lane{ position:relative; height:24px; z-index:1; }
.bar{ position:absolute; top:2px; height:20px; border-radius:var(--r-1); border:1px solid; padding:0 7px; display:flex; align-items:center; gap:7px;
  min-width:0; font-size:var(--taille-legende); font-weight:var(--graisse-forte); white-space:nowrap; overflow:hidden; transition:filter var(--t); }
.bar:hover{ filter:brightness(1.18); }
.bar .o{ font-size:var(--taille-nano); font-weight:var(--graisse-grasse); letter-spacing:.07em; text-transform:uppercase; flex:none; }
.bar .w{ overflow:hidden; text-overflow:ellipsis; font-weight:var(--graisse-moyenne); color:var(--craie); }
.bar .p{ margin-left:auto; flex:none; padding-left:8px; font-family:var(--f-mono); font-weight:var(--graisse-moyenne); letter-spacing:-.03em; }
.bar--contrat   { background:var(--o-contrat-bg); border-color:var(--o-contrat-tr); color:var(--o-contrat); }
.bar--offert    { background:var(--o-offert-bg);  border-color:var(--o-offert-tr);  color:var(--o-offert); }
.bar--essai     { background:var(--o-essai-bg);   border-color:var(--o-essai-tr);   color:var(--o-essai); }
.bar--derogation{ background:var(--o-dero-bg);    border-color:var(--o-dero-tr);    color:var(--o-dero); }
.bar--inclus    { background:var(--o-inclus-bg);  border-color:var(--o-inclus-tr);  color:var(--o-inclus); }
.bar.is-before{ border-left:0; border-top-left-radius:0; border-bottom-left-radius:0; }
.bar.is-open{ border-right:0; border-top-right-radius:0; border-bottom-right-radius:0;
  -webkit-mask-image:linear-gradient(to right, black calc(100% - 30px), transparent); mask-image:linear-gradient(to right, black calc(100% - 30px), transparent); }
.bar.is-dim{ opacity:.22; }
.bar.is-short{ padding:0; overflow:visible; }
.bar .out{ display:none; }
.bar.is-short .out{ display:flex; gap:7px; align-items:center; position:absolute; left:calc(100% + 7px); top:0; height:18px; color:inherit; white-space:nowrap; }
.fr-today{ position:absolute; top:0; bottom:0; width:0; border-left:1px solid var(--signal); opacity:.5; pointer-events:none; z-index:0; }
.fr-key{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:7px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-legende); color:var(--craie-3); }
.fr-key span{ display:inline-flex; align-items:center; gap:6px; }
.fr-key i{ width:14px; height:8px; border-radius:var(--r-0); border:1px solid; flex:none; }

.two{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px; align-items:start; margin-top:12px; }
.gestes li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 14px; padding:8px 12px; border-bottom:1px solid var(--trait-2); }
.gestes li:last-child{ border-bottom:0; }
.gestes b{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); margin-right:4px; }
.gestes .sub{ font-size:var(--taille-legende); color:var(--craie-3); grid-column:1; }
.gestes .end{ text-align:right; font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); grid-row:1 / span 2; grid-column:2; align-self:center; letter-spacing:-.02em; }
.gestes .end strong{ display:block; font-size:var(--taille-petit); color:var(--craie); font-weight:var(--graisse-moyenne); }
.kv{ padding:2px 12px 6px; }
.kv div{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:var(--taille-petit); border-bottom:1px solid var(--trait-2); }
.kv div:last-child{ border-bottom:0; }
.kv dt{ color:var(--craie-3); } .kv dd{ margin:0; font-family:var(--f-mono); font-weight:var(--graisse-moyenne); text-align:right; letter-spacing:-.02em; }

/* ── Tiroir ───────────────────────────────────────────────────────── */
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(440px,100vw); background:var(--quai); border-left:1px solid var(--trait);
  box-shadow:var(--ombre); z-index:41; transform:translateX(28px); opacity:0; visibility:hidden;
  transition:transform 220ms var(--ease), opacity 180ms var(--ease), visibility 0s linear 220ms; display:flex; flex-direction:column; }
body.drawer-on .scrim:not(.scrim--nav):not(.scrim--cherche){ opacity:1; pointer-events:auto; }
body.drawer-on .drawer{ transform:none; opacity:1; visibility:visible; transition-delay:0s; }
.drawer-hd{ padding:12px 16px; border-bottom:1px solid var(--trait-2); display:flex; align-items:flex-start; gap:10px; }
.drawer-hd h2{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); }
.drawer-hd p{ font-size:var(--taille-legende); color:var(--craie-3); }
.drawer-hd button{ margin-left:auto; }
.drawer-bd{ padding:2px 16px 16px; overflow-y:auto; flex:1; }
.drawer-ft{ padding:10px 16px; border-top:1px solid var(--trait-2); display:flex; gap:8px; justify-content:flex-end; }
.q{ padding:12px 0 2px; }
.q + .q{ border-top:1px solid var(--trait-2); margin-top:10px; }
.q h3{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.q h3 i{ font-style:normal; font-family:var(--f-mono); color:var(--craie-3); }
.q .sel{ width:100%; height:30px; }
.q .hint{ font-size:var(--taille-legende); color:var(--craie-3); margin-top:6px; }
.choice{ display:flex; flex-wrap:wrap; gap:5px; }
.choice button{ height:26px; padding:0 10px; border:1px solid var(--trait); border-radius:var(--r-2); font-size:var(--taille-petit); font-weight:var(--graisse-moyenne);
  color:var(--craie-2); background:var(--quai-2); transition:background var(--t), border-color var(--t), color var(--t); }
.choice button:hover{ border-color:var(--trait-3); color:var(--craie); }
.choice button[aria-pressed="true"]{ background:var(--quai-3); border-color:var(--esp); color:var(--craie); font-weight:var(--graisse-forte); box-shadow:inset 0 0 0 1px var(--esp); }
/* Dans le tiroir seulement : « sites » est un mot trop courant pour une classe globale. */
.q .sites{ display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; margin-top:8px; }
.q .sites label{ display:flex; align-items:center; gap:7px; font-size:var(--taille-petit); padding:2px 0; cursor:pointer; }
.q .sites input{ accent-color:var(--signal); }
.inline{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:8px; font-size:var(--taille-petit); color:var(--craie-2); }
.txt{ height:28px; padding:0 8px; border:1px solid var(--trait); border-radius:var(--r-2); background:var(--nuit); font-size:var(--taille-petit); }
.txt--num{ width:84px; text-align:right; font-family:var(--f-mono); }
.txt--wide{ width:100%; }
.apercu{ margin-top:14px; border:1px solid var(--trait); background:var(--nuit); border-radius:var(--r-3); padding:10px 12px; }
.apercu h4{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--signal); }
.apercu dl{ margin:6px 0 0; }
.apercu div{ display:flex; justify-content:space-between; gap:14px; padding:4px 0; font-size:var(--taille-petit); border-bottom:1px solid var(--trait-2); }
.apercu div:last-child{ border-bottom:0; }
.apercu dt{ color:var(--craie-3); } .apercu dd{ margin:0; font-family:var(--f-mono); font-weight:var(--graisse-moyenne); text-align:right; letter-spacing:-.02em; }
.apercu p{ font-size:var(--taille-legende); color:var(--craie-2); margin-top:7px; }

/* ── Matériel ─────────────────────────────────────────────────────── */
.steps{ display:flex; align-items:center; font-size:var(--taille-micro); color:var(--craie-4); font-weight:var(--graisse-forte); letter-spacing:.02em; }
.steps li{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
.steps li + li::before{ content:''; width:14px; height:1px; background:var(--trait-3); margin:0 5px; }
.steps i{ width:7px; height:7px; border-radius:50%; border:1.5px solid var(--trait-3); flex:none; }
.steps .done{ color:var(--craie-2); } .steps .done i{ background:var(--ok); border-color:var(--ok); }
.steps .now{ color:var(--signal); } .steps .now i{ background:var(--signal); border-color:var(--signal); }
.order{ border-bottom:1px solid var(--trait); }
.order:last-child{ border-bottom:0; }
.order-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:9px 12px; }
.order-hd b{ font-family:var(--f-mono); font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); letter-spacing:-.02em; }
.order-hd .meta{ font-size:var(--taille-legende); color:var(--craie-3); }
.order-hd .steps{ margin-left:auto; }
.order .tbl{ table-layout:fixed; }
.order .tbl th:nth-child(1){ width:36%; } .order .tbl th:nth-child(2){ width:8%; }
/* Donnée interne : jamais montrée hors du périmètre qui y a droit */
.secret{ color:var(--craie-3); }
th.secret::after{ content:' · interne'; text-transform:none; letter-spacing:0; font-weight:var(--graisse-moyenne); color:var(--signal); }
body[data-vue="partenaire"] .secret,
body[data-vue="partenaire"] [data-interne]{ display:none !important; }
body:not([data-vue="partenaire"]) [data-partenaire]{ display:none !important; }
/* Conditions commerciales du client : masquées au partenaire, sauf si le compte les lui ouvre */
body[data-vue="partenaire"]:not([data-cond="visible"]) [data-commercial]{ display:none !important; }
.kv dd.t{ font-family:var(--f-texte); word-spacing:normal; letter-spacing:0; }
.vide{ padding:10px 12px; font-size:var(--taille-petit); color:var(--craie-3); }
.reglage{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-bottom:1px solid var(--trait-2); }
.reglage > div{ flex:1; min-width:0; }
.reglage b{ display:block; font-size:var(--taille-petit); font-weight:var(--graisse-forte); }
.reglage span:not(.tag){ display:block; font-size:var(--taille-legende); color:var(--craie-3); margin-top:1px; }
.sw{ width:34px; height:20px; border-radius:var(--r-3); background:var(--quai-3); border:1px solid var(--trait-3); position:relative; flex:none; transition:background var(--t), border-color var(--t); }
.sw i{ position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--craie-2); transition:transform var(--t), background var(--t); }
.sw[aria-checked="true"]{ background:var(--signal); border-color:var(--signal); }
.sw[aria-checked="true"] i{ transform:translateX(14px); background:var(--on-signal); }


/* ══ ADAPTATION ═════════════════════════════════════════════════════
   Sous 900 px, le rail et le menu forment un seul volet de navigation, ouvert
   depuis le fil. Le contenu prend toute la largeur. */
.nav{ display:contents; }
.scrim--nav{ z-index:44; }
@media (max-width:1180px){ .two{ grid-template-columns:minmax(0,1fr); } .price-strip{ grid-template-columns:minmax(0,1fr); }
  .price-strip > div{ border-right:0; border-bottom:1px solid var(--trait-2); } .price-strip > div:last-child{ border-bottom:0; } }
@media (min-width:901px){ .itin .itin-menu{ display:none; }
  /* Barre repliée : les icônes seules ; au survol (ou au clavier) elle se déploie PAR-DESSUS le contenu. */
  html[data-menu="replie"] .app{ grid-template-columns:var(--cote-replie) minmax(0,1fr); }
  html[data-menu="replie"] .nv{ width:var(--cote-replie); }
  html[data-menu="replie"]:not([data-nv-attend]) .nv:hover,html[data-menu="replie"]:not([data-nv-attend]) .nv:focus-within{ width:var(--cote-w);
    box-shadow:14px 0 40px -10px color-mix(in oklab, var(--ombre-teinte) 45%, transparent); }
  html[data-menu="replie"] .nv:not(:hover):not(:focus-within) :is(.nv-marque b,.nv-cherche span,.nv-cherche kbd,.esp-nom,.esp-a .nb,.esp-chev,.esp-sous),html[data-menu="replie"][data-nv-attend] .nv :is(.nv-marque b,.nv-cherche span,.nv-cherche kbd,.esp-nom,.esp-a .nb,.esp-chev,.esp-sous){ display:none; }
  html[data-menu="replie"] .nv:not(:hover):not(:focus-within) .nv-grp,html[data-menu="replie"][data-nv-attend] .nv .nv-grp{ height:1px; padding:0; margin:10px 8px; overflow:hidden; color:transparent; background:var(--trait-2); }
  html[data-menu="replie"] .nv:not(:hover):not(:focus-within) .nv-cherche,html[data-menu="replie"][data-nv-attend] .nv .nv-cherche{ justify-content:center; padding:0; }
  html[data-menu="replie"] .nv:not(:hover):not(:focus-within) .esp-a,html[data-menu="replie"][data-nv-attend] .nv .esp-a{ padding:0; justify-content:center; }
  html[data-menu="replie"] .nv:not(:hover):not(:focus-within) .nv-pied,html[data-menu="replie"][data-nv-attend] .nv .nv-pied{ flex-direction:column; align-items:center; } }
@media (max-width:900px){
  :root{ --label-w:120px; }
  .app{ grid-template-columns:minmax(0,1fr); }
  .nav{ display:flex; position:fixed; inset:0 auto 0 0; z-index:45; max-width:calc(100vw - 44px);
    transform:translateX(-102%); visibility:hidden; transition:transform 220ms var(--ease), visibility 0s linear 220ms; box-shadow:var(--ombre); }
  body.nav-on .nav{ transform:none; visibility:visible; transition-delay:0s; }
  .nav .nv{ position:static; width:min(280px, calc(100vw - 44px)); }
  .nv-replie{ display:none; }
  .itin{ padding:0 10px 0 6px; gap:6px; }
  .itin-fil > :not(:last-child):not(i){ display:none; }
  .view{ padding:12px; }
  .perim{ padding:0 9px 0 7px; gap:6px; }
  .perim b,.perim b + .sep,.perim .int-w{ display:none; }
  .view.legacy{ overflow-x:hidden; }
  .perim.is-interne svg{ color:var(--signal); }
  :root[data-theme="light"] .perim.is-interne svg{ color:var(--warn); }
  .itin-demander span{ display:none; }
  .volet--cherche{ top:8px; max-height:calc(100dvh - 16px); }
  .acct-hd{ flex-wrap:wrap; align-items:flex-start; }
  .tabs{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .panel-hd{ flex-wrap:wrap; gap:2px 10px; }
  .frise{ min-width:760px; }
  .order-hd .steps{ margin-left:0; overflow-x:auto; max-width:100%; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ══ DÉPLOIEMENT : la ligne des sites, les dossiers, le détail ═══════ */
/* Le cycle de vie d'un site est une ligne : cinq stations dans l'ordre, et une voie de garage (bloqué). */
.ligne-sites{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; border:1px solid var(--trait-2); border-radius:var(--r-3);
  background:var(--quai); margin-bottom:12px; }
.stations{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:relative; padding:12px 6px 10px; }
.stations::before{ content:''; position:absolute; left:10%; right:10%; top:25px; height:3px; border-radius:var(--r-0); background:var(--esp); opacity:.9; }
.station{ display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; padding:0 4px; border-radius:var(--r-2); transition:background var(--t); }
.station:hover{ background:var(--quai-2); }
.station i{ width:14px; height:14px; border-radius:50%; background:var(--quai); border:3px solid var(--esp); margin-top:6px; position:relative; z-index:1; }
.station.term i{ background:var(--esp); }
.station b{ font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); letter-spacing:-.04em; line-height:1; margin-top:2px; }
.station span{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-3); }
.station[aria-pressed="true"]{ background:var(--quai-3); }
.station[aria-pressed="true"] span{ color:var(--craie); }
.garage{ border-left:1px dashed var(--trait); padding:12px 22px 10px; display:flex; flex-direction:column; align-items:center; gap:5px; justify-content:flex-start; }
.garage i{ width:14px; height:14px; border-radius:var(--r-1); background:var(--bad); margin-top:6px; }
.garage b{ font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); letter-spacing:-.04em; line-height:1; margin-top:2px; color:var(--bad); }
.garage span{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-3); }

.dep{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(320px,1fr); gap:12px; align-items:start; }
.dep > *{ min-width:0; }
.dossiers td{ padding:6px 8px; }
.dossiers thead th{ padding:7px 8px; }
.dossiers td:first-child,.dossiers th:first-child{ padding-left:12px; }
.dossiers tbody tr{ cursor:pointer; }
.dossiers tbody tr[aria-selected="true"]{ background:var(--quai-3); box-shadow:inset 2px 0 0 var(--esp); }
.dossiers .nom b{ font-weight:var(--graisse-forte); display:block; }
.dossiers .nom span{ font-size:var(--taille-legende); color:var(--craie-3); }
.parc{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.06em; text-transform:uppercase; color:var(--craie-2); }
/* Trois axes, trois voyants : espace, licence, sites */
.axes{ display:flex; flex-direction:column; gap:1px; white-space:nowrap; }
.ax{ display:inline-flex; align-items:center; gap:5px; font-size:var(--taille-legende); color:var(--craie-2); }
.ax i{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--craie-4); }
.ax.ok i{ background:var(--ok); } .ax.warn i{ background:var(--warn); } .ax.bad i{ background:var(--bad); } .ax.off i{ background:none; border:1.5px solid var(--craie-4); }
.mini{ display:inline-flex; gap:2px; vertical-align:middle; }
.mini i{ width:6px; height:12px; border-radius:var(--r-0); background:var(--trait-3); }
.mini i.live{ background:var(--ok); } .mini i.scheduled,.mini i.ready{ background:var(--info); } .mini i.configuring{ background:var(--warn); }
.mini i.blocked{ background:var(--bad); } .mini i.draft{ background:none; border:1px solid var(--craie-4); }
.jauge{ display:flex; align-items:center; gap:6px; min-width:84px; }
.jauge div{ flex:1; height:4px; border-radius:var(--r-0); background:var(--quai-3); overflow:hidden; }
.jauge div i{ display:block; height:100%; background:var(--esp); border-radius:var(--r-0); }
.jauge b{ font-family:var(--f-mono); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); width:34px; text-align:right; letter-spacing:-.03em; }
.main-a{ display:inline-flex; align-items:center; gap:6px; font-size:var(--taille-legende); font-weight:var(--graisse-forte); }
.main-a i{ width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:var(--taille-nano); font-weight:var(--graisse-grasse); color:var(--sur-teinte); }
.main-a.parsight i,.main-a.interne i{ background:var(--signal); } .main-a.client i{ background:var(--craie-2); } .main-a.partenaire i{ background:var(--l-partenaires); }

.det-hd{ padding:10px 12px; border-bottom:1px solid var(--trait-2); }
.det-hd h3{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); line-height:1.15; }
.det-hd p{ font-size:var(--taille-legende); color:var(--craie-3); margin-top:2px; }
.det-axes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--trait-2); }
.det-axes > div{ padding:8px 12px; border-right:1px solid var(--trait-2); }
.det-axes > div:last-child{ border-right:0; }
.det-axes .k{ font-size:var(--taille-nano); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.det-axes .v{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); margin-top:2px; }
.det-axes .n{ font-size:var(--taille-legende); color:var(--craie-3); }
.det h4{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); padding:10px 12px 4px; }
.sec li{ display:grid; grid-template-columns:minmax(0,1fr) 78px 92px; gap:8px; align-items:center; padding:5px 12px; font-size:var(--taille-petit); border-bottom:1px solid var(--trait-2); }
.sec li:last-child{ border-bottom:0; }
.sec .qui{ font-size:var(--taille-legende); color:var(--craie-3); }
.sec .st{ justify-self:end; }
.exc li{ padding:7px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.exc li:last-child{ border-bottom:0; }
.exc b{ font-weight:var(--graisse-forte); } .exc span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); margin-top:1px; }
.det-ft{ display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--trait-2); flex-wrap:wrap; }
@media (max-width:1180px){ .dep{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){ .ligne-sites{ grid-template-columns:1fr; } .garage{ border-left:0; border-top:1px dashed var(--trait); flex-direction:row; padding:8px 12px; gap:10px; }
  .garage i{ margin-top:0; } .stations{ padding:10px 0 8px; } .station b,.garage b{ font-size:var(--taille-sous-titre); } .station span{ font-size:var(--taille-nano); letter-spacing:.04em; } }

/* ══ PARTENAIRE : ses clients, ses commissions ═══════════════════════ */
.clients td{ padding:7px 10px; } .clients thead th{ padding:7px 10px; }
.clients td:first-child,.clients th:first-child{ padding-left:12px; }
.clients .nom b{ font-weight:var(--graisse-forte); display:block; } .clients .nom span{ font-size:var(--taille-legende); color:var(--craie-3); }
.com td{ padding:6px 12px; }
.com .nat{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.06em; text-transform:uppercase; color:var(--craie-2); }
.plan{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--trait-2); }
.plan > div{ padding:9px 12px; border-right:1px solid var(--trait-2); }
.plan > div:last-child{ border-right:0; }
.plan .k{ font-size:var(--taille-nano); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.plan .v{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); margin-top:2px; }
.plan .n{ font-size:var(--taille-legende); color:var(--craie-3); }
.modeles li{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.modeles li:last-child{ border-bottom:0; }
.modeles b{ font-weight:var(--graisse-forte); } .modeles span{ color:var(--craie-3); font-size:var(--taille-legende); } .modeles .btn{ margin-left:auto; }
/* Lien à partager (page partenaire). Nommé .lien dans la maquette d'origine : renommé,
   .lien étant le lien souligné de la boîte de composants. */
.lien-partage{ margin-top:10px; padding:8px 10px; border:1px dashed var(--trait-3); border-radius:var(--r-2); font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie); word-break:break-all; }
@media (max-width:900px){ .plan{ grid-template-columns:1fr 1fr; } .plan > div{ border-bottom:1px solid var(--trait-2); } }

@media print{
  .nv,.rail,.menu,.itin,.volet,.scrim,.flashs{ display:none !important; }
  .app{ display:block; }
  .view{ padding:0; max-width:none; }
  body{ background:var(--blanc); color:var(--noir); }
}

/* ══ MATÉRIEL : articles, fournisseurs, commandes (mat-) — maquette validée le 05/10/2026 ═══════ */
.stations--6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.stations--6::before{ left:8.33%; right:8.33%; }
.mat{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr); gap:12px; align-items:start; margin-top:12px; }
.mat > *{ min-width:0; }
.mat-cmd td,.mat-cmd thead th{ padding:7px 10px; }
.mat-cmd td:first-child,.mat-cmd th:first-child{ padding-left:12px; }
.mat-cmd tbody tr[aria-selected="true"]{ background:var(--quai-3); box-shadow:inset 2px 0 0 var(--esp); }
.mat-cmd td{ white-space:nowrap; } .mat-cmd td:nth-child(2){ white-space:normal; }
.mat-cmd a.mat-ref{ font-family:var(--f-mono); font-size:var(--taille-petit); letter-spacing:-.02em; display:block; white-space:nowrap; color:inherit; }
.mat-sous{ font-size:var(--taille-legende); color:var(--craie-3); }
.mat .det-hd h3{ font-family:var(--f-mono); font-size:var(--taille-sous-titre); font-weight:var(--graisse-moyenne); letter-spacing:-.03em; }
.mat .steps{ flex-wrap:wrap; row-gap:6px; }
.mat-av{ display:inline-flex; gap:2px; vertical-align:middle; }
.mat-av i{ width:6px; height:12px; border-radius:var(--r-0); background:var(--trait-3); }
.mat-av i.f{ background:var(--ok); } .mat-av i.c{ background:var(--signal); }
.mat-un li{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:6px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mat-un li:last-child{ border-bottom:0; }
.mat-un b{ font-weight:var(--graisse-forte); display:block; } .mat-un .sn{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); letter-spacing:-.02em; }
.mat-un form{ display:flex; gap:4px; align-items:center; }
.mat-un .txt{ height:24px; width:120px; font-size:var(--taille-legende); }
.mat-art td{ padding:6px 12px; }
@media (max-width:1180px){ .mat{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){ .stations--6 .station span{ font-size:var(--taille-nano); letter-spacing:.02em; } }
.mat-photo{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; padding:12px; border-bottom:1px solid var(--trait-2); }
.mat-photo-img{ width:120px; height:120px; border-radius:var(--r-3); border:1px dashed var(--trait-3); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font-size:var(--taille-legende); color:var(--craie-3); cursor:pointer; overflow:hidden; background:var(--quai-2); }
.mat-photo-img img,.mat-vu img{ width:100%; height:100%; object-fit:cover; }
.mat-photo-img:focus-within,.mat-photo-img:hover{ border-color:var(--esp); }
.mat-vu{ margin:4px 12px 12px; border:1px solid var(--trait-2); border-radius:var(--r-3); padding:10px; display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; font-size:var(--taille-petit); }
.mat-vu > img,.mat-vu > span{ width:64px; height:64px; border-radius:var(--r-2); background:var(--quai-2); }
.seg a .n{ margin-left:3px; }
.mat-fichier{ position:absolute; width:1px; height:1px; opacity:0; }
.mat-fichier:focus-visible + div,.mat-photo:has(.mat-fichier:focus-visible) .mat-photo-img{ outline:2px solid var(--quai); outline-offset:2px; }
.mat-vignette{ width:40px; height:40px; border-radius:var(--r-2); object-fit:cover; background:var(--quai-2); display:block; }
.mat-gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:4px; }
.mat-gal figure{ margin:0; position:relative; aspect-ratio:1; border-radius:var(--r-2); overflow:hidden; border:1px solid var(--trait-2); background:var(--quai-2); }
.mat-gal figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.mat-gal figure.hero{ grid-column:span 2; grid-row:span 2; border-color:var(--esp); box-shadow:0 0 0 1px var(--esp); }
.mat-gal figcaption{ position:absolute; left:6px; bottom:6px; right:6px; display:flex; gap:4px; }
.mat-tag{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.04em; text-transform:uppercase; background:var(--esp); color:var(--nuit); padding:2px 6px; border-radius:var(--r-1); }
.mat-mini{ height:22px; min-width:22px; padding:0 6px; border-radius:var(--r-1); border:1px solid var(--trait); background:var(--nuit); color:var(--craie-2); font-size:var(--taille-legende); cursor:pointer; }
.mat-mini:hover{ color:var(--craie); }
.mat-gal-ajout{ aspect-ratio:1; border:1px dashed var(--trait-3); border-radius:var(--r-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--craie-3); font-size:var(--taille-legende); cursor:pointer; text-align:center; }
.mat-gal-ajout small{ font-size:var(--taille-micro); } .mat-gal-ajout:hover{ border-color:var(--esp); color:var(--craie); }
.mat-chps{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:12px; }
.mat-large{ grid-column:1/-1; }
.mat-prop{ list-style:none; margin:4px 0 0; padding:0; font-size:var(--taille-petit); }
.mat-prop label{ display:flex; gap:8px; align-items:center; padding:4px 0; } .mat-prop label .dim{ margin-left:auto; }
.mat-choisies{ font-size:var(--taille-legende); margin:6px 0 0; }
.mat-fo{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.mat-fo-carte{ border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.mat-fo-carte h3{ font-family:var(--f-titre); font-size:var(--taille-sous-titre); font-weight:var(--graisse-forte); display:flex; gap:8px; align-items:center; }
.mat-fo-carte h3 .btn{ margin-left:auto; }
.mat-fo-kv{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 12px; font-size:var(--taille-petit); margin:0; }
.mat-fo-kv dt{ color:var(--craie-3); } .mat-fo-kv dd{ margin:0; overflow-wrap:anywhere; }
.mat-fo-pied{ display:flex; gap:6px; flex-wrap:wrap; font-size:var(--taille-legende); color:var(--craie-3); border-top:1px solid var(--trait-2); padding-top:8px; }
@media (max-width:640px){ .mat-chps{ grid-template-columns:1fr; } }

/* ══ PASTILLE DE LIGNE, dans le texte ════════════════════════════════
   Le même repère que dans le rail, à la taille d'une ligne : dit à quel espace
   appartient un élément (file « À traiter », correspondances, recherche). */
.lg{ --c:var(--craie-3); font-style:normal; width:16px; height:16px; border-radius:50%; background:var(--c); color:var(--sur-teinte);
  display:inline-grid; place-items:center; font-family:var(--f-titre); font-weight:var(--graisse-grasse); font-size:var(--taille-micro); line-height:1; flex:none; }
:root[data-theme="light"] .lg{ color:var(--sur-teinte); }


/* ══════════════════════════════════════════════════════════════════════
   BOÎTE DE COMPOSANTS — ce dont un écran refait a besoin au-delà des maquettes
   Référence vivante : Réglages › Système › Composants.
   Tout est en jetons ; rien ne suppose Bootstrap.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tête d'écran ─────────────────────────────────────────────────── */
.tete{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.tete-titre{ min-width:0; margin-right:auto; }
.tete h1{ font-family:var(--f-titre); font-size:var(--taille-grand); font-weight:var(--graisse-forte); letter-spacing:.002em; line-height:1.1;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.tete-sous{ font-size:var(--taille-legende); color:var(--craie-3); margin-top:3px; }
.tete-sous b{ color:var(--craie-2); font-weight:var(--graisse-moyenne); }
.tete-fin{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.titre-2{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); line-height:1.15; }
.titre-3{ font-family:var(--f-titre); font-size:var(--taille-lecture); font-weight:var(--graisse-forte); line-height:1.2; }
.sur-titre{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.panel > .sur-titre{ display:block; padding:10px 12px 4px; }

/* ── Disposition ──────────────────────────────────────────────────── */
.pile{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-content:start; }
.pile--serre{ gap:6px; }
.grille{ --n:2; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:12px; align-items:start; }
.grille--3{ --n:3; } .grille--4{ --n:4; }
.grille--etire{ align-items:stretch; }
/* Contenu principal et colonne latérale */
.cote{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:12px; align-items:start; }
.cote--egal{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.rang{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.rang--serre{ gap:4px; } .rang--fin{ justify-content:flex-end; } .rang--haut{ align-items:flex-start; }
.rang--net{ flex-wrap:nowrap; }
.pousse{ margin-left:auto; }
.etroit{ max-width:720px; } .moyen{ max-width:980px; }

.panel-bd{ padding:12px; }
.panel-ft{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-top:1px solid var(--trait-2); flex-wrap:wrap; }
.panel--clic{ display:block; transition:border-color var(--t), background var(--t); }
.panel--clic:hover{ border-color:var(--trait-3); background:var(--quai-2); }

/* ── Chiffres en bandeau ──────────────────────────────────────────── */
.price-strip--1{ grid-template-columns:minmax(0,1fr); }
.price-strip--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.price-strip--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.price-strip--5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.price-strip .v.bad{ color:var(--bad); } .price-strip .v.ok{ color:var(--ok); } .price-strip .v.warn{ color:var(--warn); }
.price-strip .n .up{ color:var(--ok); font-weight:var(--graisse-forte); } .price-strip .n .down{ color:var(--bad); font-weight:var(--graisse-forte); }

/* ── Boutons : compléments ────────────────────────────────────────── */
.btn{ cursor:pointer; justify-content:center; line-height:1.2; text-decoration:none; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.btn--bad{ background:var(--bad-bg); border-color:var(--bad-tr); color:var(--bad); }
.btn--bad:hover{ background:var(--bad-bg); border-color:var(--bad); }
.btn--ok{ background:var(--ok-bg); border-color:var(--ok-tr); color:var(--ok); }
.btn--ok:hover{ background:var(--ok-bg); border-color:var(--ok); }
.btn--icone{ width:28px; padding:0; }
.btn--icone.btn--sm{ width:26px; }
.btn--large{ height:34px; padding:0 14px; font-size:var(--taille-texte); }
.btn--bloc{ width:100%; }
.btn .ico{ width:12px; height:12px; }
.lien{ text-decoration:underline; text-decoration-color:var(--trait-3); text-decoration-thickness:1px; text-underline-offset:3px;
  transition:text-decoration-color var(--t); cursor:pointer; }
.lien:hover{ text-decoration-color:currentColor; }
.v3 .lien{ text-decoration:underline; text-decoration-color:var(--trait-3); }
.v3 .lien:hover{ text-decoration-color:currentColor; }

/* ── Formulaires ──────────────────────────────────────────────────── */
:root{ --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2l4 4 4-4' fill='none' stroke='%23a9afc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="light"]{ --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2l4 4 4-4' fill='none' stroke='%234a5368' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.champs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
.champs--1{ grid-template-columns:minmax(0,1fr); } .champs--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.champ{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.champ--large{ grid-column:1 / -1; }
.champ > label,.champ > .lbl{ font-size:var(--taille-legende); font-weight:var(--graisse-forte); color:var(--craie-2); }
.champ .req{ color:var(--bad); font-weight:var(--graisse-forte); }
.aide{ font-size:var(--taille-legende); color:var(--craie-3); }
.erreur{ font-size:var(--taille-legende); color:var(--bad); }
.txt,.sel{ border:1px solid var(--trait); border-radius:var(--r-2); background:var(--nuit); color:var(--craie); font-size:var(--taille-petit);
  transition:border-color var(--t), box-shadow var(--t); }
.txt::placeholder{ color:var(--craie-4); }
.champ .txt,.champ .sel,.txt--wide,.sel--wide{ width:100%; height:30px; }
.sel{ -webkit-appearance:none; appearance:none; background-image:var(--chevron); background-repeat:no-repeat;
  background-position:right 7px center; background-size:12px 12px; cursor:pointer; }
textarea.txt,.champ textarea.txt{ height:auto; min-height:72px; padding:6px 8px; line-height:1.45; resize:vertical; }
select[multiple].sel,.champ select[multiple].sel{ height:auto; min-height:96px; padding:4px; background-image:none; }
.txt:focus,.sel:focus{ outline:0; border-color:var(--trait-3); box-shadow:0 0 0 2px color-mix(in oklch, var(--signal) 55%, transparent); }
:root[data-theme="light"] .txt:focus,:root[data-theme="light"] .sel:focus{ box-shadow:0 0 0 2px color-mix(in oklch, var(--craie) 30%, transparent); }
.txt:disabled,.sel:disabled,.txt[readonly]{ background:var(--quai-2); color:var(--craie-3); }
.txt.is-faux,.sel.is-faux{ border-color:var(--bad); }
.txt--mono{ font-family:var(--f-mono); letter-spacing:-.02em; }
input[type="file"].txt{ padding:2px; height:30px; font-size:var(--taille-petit); color:var(--craie-2); }
input[type="file"].txt::file-selector-button{ height:24px; margin-right:8px; padding:0 9px; border:1px solid var(--trait); border-radius:var(--r-1);
  background:var(--quai-2); color:var(--craie); font:inherit; font-weight:var(--graisse-moyenne); cursor:pointer; }
input[type="color"].txt{ width:44px; padding:2px; cursor:pointer; }
/* Champ avec un bouton ou une unité accolés */
.accole{ display:flex; min-width:0; }
.accole > *{ border-radius:0; flex:none; }
.accole > .txt,.accole > .sel{ flex:1; min-width:0; width:auto; height:30px; }
.accole > .btn{ height:30px; }
.accole > :first-child{ border-radius:var(--r-2) 0 0 var(--r-2); }
.accole > :last-child{ border-radius:0 var(--r-2) var(--r-2) 0; }
.accole > * + *{ margin-left:-1px; }
.accole > .unite{ display:grid; place-items:center; padding:0 9px; border:1px solid var(--trait); background:var(--quai-2);
  font-size:var(--taille-petit); color:var(--craie-3); }
/* Case à cocher, bouton radio */
.coche{ display:inline-flex; align-items:center; gap:7px; font-size:var(--taille-petit); cursor:pointer; min-height:22px; }
.coche input{ width:14px; height:14px; margin:0; accent-color:var(--signal); flex:none; cursor:pointer; }
.coche span{ color:var(--craie-3); font-size:var(--taille-legende); }
/* Interrupteur, posé sur une vraie case à cocher : il part avec le formulaire */
.inter{ display:inline-flex; align-items:center; gap:8px; font-size:var(--taille-petit); cursor:pointer; min-height:22px; }
.inter input{ -webkit-appearance:none; appearance:none; width:34px; height:20px; margin:0; border-radius:var(--r-3); background:var(--quai-3);
  border:1px solid var(--trait-3); position:relative; flex:none; cursor:pointer; transition:background var(--t), border-color var(--t); }
.inter input::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--craie-2);
  transition:transform var(--t), background var(--t); }
.inter input:checked{ background:var(--signal); border-color:var(--signal); }
.inter input:checked::after{ transform:translateX(14px); background:var(--on-signal); }
.inter input:disabled{ opacity:.5; cursor:not-allowed; }
.actions{ display:flex; align-items:center; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid var(--trait-2); flex-wrap:wrap; }
/* Barre de filtres au-dessus d'une liste */
.filtres{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:7px 12px; border-bottom:1px solid var(--trait-2); }
.filtres .txt,.filtres .sel{ height:26px; padding:0 8px; }
.filtres .sel{ padding-right:24px; }
.filtres label{ font-size:var(--taille-legende); color:var(--craie-3); }
.filtres .txt--cherche{ flex:1; min-width:140px; max-width:320px; }

/* ── Tableaux : compléments ───────────────────────────────────────── */
.r{ text-align:right; } .c{ text-align:center; }
.tbl th.r{ text-align:right; } .tbl th.c{ text-align:center; }
.tbl .act{ text-align:right; white-space:nowrap; width:1%; }
.tbl .act > * + *{ margin-left:4px; }
.tbl .act form{ display:inline; }
.tbl .nom b,.tbl .nom a{ font-weight:var(--graisse-forte); display:block; }
.tbl .nom span{ font-size:var(--taille-legende); color:var(--craie-3); }
.tbl td.w,.tbl th.w{ white-space:nowrap; }
.tbl--clic tbody tr{ cursor:pointer; }
.tbl tbody tr[aria-selected="true"]{ background:var(--quai-3); box-shadow:inset 2px 0 0 var(--esp); }
.tbl a:not(.btn){ text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color var(--t); }
.tbl a:not(.btn):hover{ text-decoration-color:var(--trait-3); }
.tbl--large{ min-width:720px; }
.pages{ display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:8px 12px; border-top:1px solid var(--trait-2);
  font-size:var(--taille-petit); color:var(--craie-3); flex-wrap:wrap; }
.pages .ou{ margin-right:auto; }
.pages a,.pages b{ min-width:26px; height:26px; padding:0 8px; display:grid; place-items:center; border:1px solid var(--trait);
  border-radius:var(--r-2); font-family:var(--f-mono); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); }
.pages a:hover{ background:var(--quai-2); border-color:var(--trait-3); color:var(--craie); }
.pages b{ background:var(--quai-3); border-color:var(--trait-3); color:var(--craie); }

/* ── Listes, états vides, avis ────────────────────────────────────── */
.liste > li,.liste > a{ display:flex; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); min-width:0; }
.liste > :last-child{ border-bottom:0; }
.liste > a:hover,.liste--clic > li:hover{ background:var(--quai-2); }
.liste .corps{ flex:1; min-width:0; }
.liste .corps b{ display:block; font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.liste .corps span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.vide--grand{ padding:30px 16px; text-align:center; }
.vide--grand b{ display:block; font-family:var(--f-titre); font-size:var(--taille-sous-titre); font-weight:var(--graisse-forte); color:var(--craie); margin-bottom:2px; }
.vide--grand .btn{ margin-top:12px; }
.avis{ display:flex; align-items:flex-start; gap:10px; padding:8px 12px; border:1px solid var(--trait); border-left-width:3px;
  border-radius:var(--r-2); background:var(--quai); font-size:var(--taille-petit); color:var(--craie); }
.avis > div{ flex:1; min-width:0; }
.avis b{ font-weight:var(--graisse-forte); }
.avis > .avis-gestes{ flex:none; } .avis-gestes form{ display:flex; gap:6px; }
.avis--ok{ border-left-color:var(--ok); } .avis--warn{ border-left-color:var(--warn); }
.avis--bad{ border-left-color:var(--bad); } .avis--info{ border-left-color:var(--info); }
.note--plein{ max-width:none; margin-top:0; }
.t-ok{ color:var(--ok); } .t-warn{ color:var(--warn); } .t-bad{ color:var(--bad); } .t-info{ color:var(--info); }
.code{ display:block; font-family:var(--f-mono); font-size:var(--taille-legende); line-height:1.5; background:var(--nuit); border:1px solid var(--trait-2);
  border-radius:var(--r-2); padding:8px 10px; overflow-x:auto; white-space:pre; color:var(--craie-2); }
.code--plie{ white-space:pre-wrap; word-break:break-word; }
.avatar{ width:24px; height:24px; border-radius:50%; background:var(--quai-3); border:1px solid var(--trait); display:inline-grid;
  place-items:center; font-size:var(--taille-micro); font-weight:var(--graisse-forte); color:var(--craie-2); overflow:hidden; flex:none; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar--grand{ width:56px; height:56px; font-size:var(--taille-sous-titre); }
.graphe{ position:relative; height:220px; padding:12px; }
.graphe--bas{ height:160px; }
.jauge--large{ min-width:0; width:100%; }
.nowrap{ white-space:nowrap; }
.tronque{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.mt{ margin-top:12px; } .mb{ margin-bottom:12px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── Onglets pilotés par le cadre ─────────────────────────────────── */
.tabs a{ padding:6px 12px 7px; font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); color:var(--craie-3); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color var(--t), border-color var(--t); flex:none; }
.tabs a:hover{ color:var(--craie); }
.tabs a[aria-current="page"]{ color:var(--craie); border-bottom-color:var(--esp); font-weight:var(--graisse-forte); }
.panel > .tabs{ margin-bottom:0; padding:0 4px; }

/* ── Fenêtre ──────────────────────────────────────────────────────── */
dialog.dlg{ padding:0; border:1px solid var(--trait); border-radius:var(--r-3); background:var(--quai); color:var(--craie);
  box-shadow:var(--ombre); width:min(520px, calc(100vw - 24px)); max-height:calc(100dvh - 48px); font-family:var(--f-texte); font-size:var(--taille-texte); line-height:1.45; }
dialog.dlg[open]{ display:flex; flex-direction:column; }
dialog.dlg::backdrop{ background:var(--voile); }
.dlg--large{ width:min(860px, calc(100vw - 24px)) !important; }
.dlg--etroit{ width:min(400px, calc(100vw - 24px)) !important; }
.dlg > form{ display:flex; flex-direction:column; min-height:0; flex:1; }
.dlg-hd{ display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid var(--trait-2); }
.dlg-hd h2{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); line-height:1.2; }
.dlg-hd p{ font-size:var(--taille-legende); color:var(--craie-3); margin-top:1px; }
.dlg-hd > .btn{ margin-left:auto; flex:none; }
.dlg-bd{ padding:14px 16px; overflow-y:auto; flex:1; min-height:0; }
.dlg-ft{ display:flex; gap:8px; justify-content:flex-end; padding:10px 16px; border-top:1px solid var(--trait-2); flex-wrap:wrap; }

/* ── Menu déroulant : un volet accroché à son bouton ──────────────── */
.volet--menu{ min-width:180px; max-width:min(320px, calc(100vw - 16px)); padding:6px; }
.volet--menu form{ display:contents; }
.volet-ligne--bad{ color:var(--bad); } .volet-ligne--bad svg{ color:var(--bad); }

/* ── Messages éphémères ───────────────────────────────────────────── */
.toasts{ position:fixed; right:16px; bottom:16px; z-index:80; display:grid; gap:6px; width:min(360px, calc(100vw - 32px)); pointer-events:none; }
.toasts .flash{ box-shadow:var(--ombre); background:var(--quai-2); pointer-events:auto; animation:toast-in 220ms var(--ease); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } }

@media (max-width:1180px){
  .grille--4{ --n:2; } .grille--3{ --n:2; }
  .cote,.cote--egal{ grid-template-columns:minmax(0,1fr); }
  .price-strip--4,.price-strip--5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .price-strip--4 > div,.price-strip--5 > div{ border-bottom:1px solid var(--trait-2); }
}
@media (max-width:900px){
  .grille,.grille--3,.grille--4{ --n:1; }
  .champs,.champs--3{ grid-template-columns:minmax(0,1fr); }
  .price-strip--2,.price-strip--4,.price-strip--5{ grid-template-columns:minmax(0,1fr); }
  .tete-fin{ width:100%; }
  .cache-mobile{ display:none !important; }
  .toasts{ right:8px; bottom:8px; }
  dialog.dlg{ max-height:calc(100dvh - 16px); }
  /* Sous le doigt, une cible de 26 px est trop petite. */
  .btn{ height:32px; } .btn--sm{ height:30px; } .btn--icone{ width:32px; } .btn--icone.btn--sm{ width:30px; }
  .champ .txt,.champ .sel,.txt--wide,.accole > .txt,.accole > .sel,.accole > .btn{ height:34px; font-size:var(--taille-sous-titre); }
  textarea.txt{ font-size:var(--taille-sous-titre); }
  .filtres .txt,.filtres .sel{ height:30px; font-size:var(--taille-sous-titre); }
}
@media (min-width:901px){ .seul-mobile{ display:none !important; } }


/* ── info / aide : les précisions et l'aide d'une page, repliées (maquette « Textes du Hub », 16/10/2026). ── */
.info{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:4px; border-radius:50%;
  border:1px solid var(--trait-3); color:var(--craie-3); font-size:var(--taille-nano); font-style:italic; font-weight:var(--graisse-forte); cursor:help; vertical-align:middle; }
.info-bulle{ display:none; position:absolute; z-index:40; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); width:max-content; max-width:280px;
  padding:7px 9px; border-radius:var(--r-2); background:var(--quai-3); border:1px solid var(--trait-3); color:var(--craie); font-size:var(--taille-legende); font-style:normal;
  font-weight:var(--graisse-normale); line-height:1.45; text-align:left; white-space:normal; box-shadow:0 6px 18px color-mix(in oklab, var(--ombre-teinte) 25%, transparent); }
.info:hover .info-bulle, .info:focus .info-bulle, .info:focus-within .info-bulle{ display:block; }
.aide-page{ position:relative; }
.aide-page > summary{ list-style:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--trait-2); display:flex; align-items:center;
  justify-content:center; font-size:var(--taille-petit); font-weight:var(--graisse-forte); color:var(--craie-3); cursor:pointer; }
.aide-page > summary::-webkit-details-marker{ display:none; }
.aide-page[open] > summary{ color:var(--craie); border-color:var(--trait-3); background:var(--quai-3); }
.aide-page-corps{ position:absolute; z-index:40; right:0; top:calc(100% + 6px); width:min(380px, 86vw); padding:10px 12px; border-radius:var(--r-3);
  background:var(--quai-2); border:1px solid var(--trait-3); box-shadow:0 10px 28px color-mix(in oklab, var(--ombre-teinte) 30%, transparent); font-size:var(--taille-petit); line-height:1.5; color:var(--craie-2); }
.aide-page-corps p{ margin:0 0 6px; } .aide-page-corps p:last-child{ margin:0; }
.sig-etapes{ margin:4px 0 0; padding-left:18px; font-size:var(--taille-petit); line-height:1.7; color:var(--craie-2); } .sig-etapes code{ font-size:var(--taille-legende); }

/* ── me- : Échanges › Mémoire (moteur du Hub, lot 1b). ── */
.mm-bascule{ display:inline-flex; border:1px solid var(--trait-2); border-radius:var(--r-2); overflow:hidden; }
.mm-bascule button{ border:0; background:transparent; padding:6px 12px; font-size:var(--taille-petit); color:var(--craie-3); cursor:pointer; }
.mm-bascule button.on{ background:var(--quai-3); color:var(--craie); font-weight:var(--graisse-forte); }
.mm-panneau[data-panneau="reseau"]{ display:grid; grid-template-columns:minmax(0,1fr) 260px; }
.mm-panneau[data-panneau="reseau"][hidden]{ display:none; }
#mm-graphe{ width:100%; height:auto; }
.mm-lien{ stroke:var(--trait-2); stroke-width:1; }
.mm-noeud{ cursor:pointer; } .mm-noeud text{ font-size:var(--taille-micro); fill:var(--craie-3); }
.mm-noeud circle{ fill:var(--quai-3); stroke:var(--craie-4); stroke-width:1.5; }
.mm-compte circle{ stroke:var(--e-commercial); } .mm-personne circle{ stroke:var(--ok); } .mm-fil circle{ stroke:var(--warn); }
.mm-noeud.on circle{ stroke-width:3; } .mm-noeud:focus{ outline:none; } .mm-noeud:focus circle{ stroke-width:3; }
.mm-fiche{ border-left:1px solid var(--trait-2); padding:12px; font-size:var(--taille-petit); display:grid; gap:6px; align-content:start; }
.mm-ligne{ padding:4px 0; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); color:var(--craie-2); }
.ech-retenir{ flex-basis:100%; display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; margin-top:6px; } .ech-retenir textarea{ flex:1 1 260px; min-height:54px; }
.ech-souvenirs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0; padding:2px 12px; font-size:var(--taille-petit); color:var(--craie-2); }
.ech-souvenirs > b{ font-weight:var(--graisse-moyenne); color:var(--acc); margin-right:2px; }
.ech-souvenir{ display:inline-flex; align-items:center; gap:6px; padding:2px 4px 2px 10px; border-radius:var(--r-rond); background:var(--quai-2); }
.ech-souvenir i{ font-style:normal; font-size:var(--taille-micro); color:var(--acc); }
.ech-souvenir-x{ border:0; background:none; color:var(--craie-4); cursor:pointer; padding:0 4px; font-size:var(--taille-texte); line-height:1; }
.ech-souvenir-x:hover{ color:var(--bad); }
.ech-moteur{ margin:6px 0; padding:8px 12px; border-left:2px solid var(--acc); background:transparent; display:grid; gap:6px; }
.ech-moteur-hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--taille-petit); }
.ech-moteur-tags{ display:flex; gap:6px; flex-wrap:wrap; } .ech-moteur-tags span{ font-size:var(--taille-legende); padding:2px 8px; border-radius:var(--r-3); background:var(--quai-3); color:var(--craie-2); }
.ech-moteur-texte{ margin:0; white-space:pre-wrap; font-size:var(--taille-petit); color:var(--craie-2); line-height:1.5; }
/* ── do- et k3- : Commercial › compte › Dossier (moteur du Hub, lot 3b). ── */
.do-frise{ list-style:none; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; padding:0; margin:0 0 12px; }
.do-frise li{ padding:10px 8px 8px; border-top:3px solid var(--trait-2); font-size:var(--taille-petit); color:var(--craie-3); }
.do-frise li b{ font-weight:var(--graisse-forte); } .do-frise li.fait{ border-top-color:var(--ok); } .do-frise li.encours{ border-top-color:var(--info); background:var(--quai); color:var(--craie); }
.k3-dos{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); gap:12px; }
.k3-journal{ padding:4px 12px 10px; font-size:var(--taille-petit); } .k3-journal > div{ display:grid; grid-template-columns:70px minmax(0,1fr); gap:10px; padding:5px 0; border-top:1px solid var(--trait-2); } .k3-journal time{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-4); }
.k3-sait{ display:grid; padding:0 12px 10px; font-size:var(--taille-petit); } .k3-sait > div{ padding:6px 0; border-top:1px solid var(--trait-2); } .k3-sait small{ display:block; font-size:var(--taille-micro); color:var(--craie-4); }
@media (max-width:900px){ .k3-dos{ grid-template-columns:1fr; } .do-frise{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* ── tb- : Échanges › Courrier › Tableau de bord (moteur du Hub, lot 1d). ── */
.tb-kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); margin-bottom:12px; }
.tb-kpi > div{ padding:10px 14px; border-right:1px solid var(--trait-2); display:flex; flex-direction:column; gap:2px; } .tb-kpi > div:last-child{ border-right:0; }
.tb-kpi b{ font-family:var(--f-titre); font-size:var(--taille-grand); } .tb-kpi span{ font-size:var(--taille-legende); color:var(--craie-3); }
.tb-inline{ display:inline-block; margin-left:6px; } .tb-bad{ color:var(--bad); } .tb-warn{ color:var(--warn); } .tb-ok{ color:var(--ok); } .tb-acc{ color:var(--info); }
.tb-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:12px; align-items:start; }
.tb-point{ width:9px; height:9px; border-radius:var(--r-1); background:var(--craie-4); } .tb-point.tb-bad{ background:var(--bad); } .tb-point.tb-warn{ background:var(--warn); } .tb-point.tb-ok{ background:var(--ok); } .tb-point.tb-acc{ background:var(--info); }
.tb-item{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.tb-lien{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; color:var(--craie); text-decoration:none; }
.tb-titre{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tb-lien:hover b{ text-decoration:underline; }
.tb-lien .dim{ font-size:var(--taille-legende); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-gestes{ display:flex; gap:6px; align-items:center; flex-shrink:0; } .tb-quand{ font-size:var(--taille-micro); }
.tb-plus{ display:block; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
@media (max-width:800px){ .mm-panneau[data-panneau="reseau"]{ grid-template-columns:1fr; } .mm-fiche{ border-left:0; border-top:1px solid var(--trait-2); } }

/* Moteur du Hub, lot 4g : un client qui décroche (retards facture par facture), préfixe dc-. */
.dc-barres{ display:flex; align-items:flex-end; gap:8px; height:150px; padding:12px 14px 8px; }
.dc-barre{ flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; font-size:var(--taille-legende); color:var(--craie-3); }
.dc-barre i{ display:block; width:100%; max-width:34px; min-height:2px; border-radius:var(--r-1) var(--r-1) 0 0; background:var(--craie-4); }
.dc-barre i.dc-retard{ background:var(--warn); } .dc-barre i.dc-impayee{ background:var(--bad); }
.dc-barre b{ font-weight:var(--graisse-forte); color:var(--craie-2); }
.dc-message{ white-space:pre-line; font-size:var(--taille-texte); line-height:1.5; }

/* Moteur du Hub, lot 5 : la bulle (variante A validée le 17/10 : neutre, liseré de la couleur de l'espace). */
.bu{ position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.bu-pastille{ order:2; display:flex; align-items:center; gap:7px; padding:7px 14px 7px 8px; border-radius:var(--r-rond); cursor:pointer;
  background:var(--quai-3); color:var(--craie); border:1px solid var(--trait-3); box-shadow:inset 3px 0 0 var(--esp), 0 8px 24px color-mix(in oklab, var(--ombre-teinte) 35%, transparent);
  font-weight:var(--graisse-forte); font-size:var(--taille-texte); line-height:1; font-family:inherit; }
.bu-pastille i{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:var(--taille-petit); background:var(--esp); color:var(--nuit); }
.bu-panneau{ width:min(400px, calc(100vw - 32px)); max-height:min(640px, calc(100vh - 110px)); display:flex; flex-direction:column;
  border:1px solid var(--trait-2); border-top:3px solid var(--esp); border-radius:var(--r-4); background:var(--quai); box-shadow:0 18px 50px color-mix(in oklab, var(--ombre-teinte) 45%, transparent); overflow:hidden; }
.bu-panneau[hidden]{ display:none; }
.bu-tete{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-lecture); }
.bu-logo{ width:24px; height:24px; display:grid; place-items:center; font-size:var(--taille-petit); }
.bu-actions{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.bu-ico{ width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:var(--r-2); background:transparent; color:var(--craie-3);
  cursor:pointer; text-decoration:none; } .bu-ico .ico{ width:15px; height:15px; }
.bu-ico:hover, .bu-ico:focus-visible{ background:var(--quai-3); color:var(--craie); } .bu-ico[aria-pressed="true"]{ color:var(--esp); }
.bu-fil{ flex:1; overflow:auto; overflow-x:hidden; padding:12px; display:grid; gap:10px; align-content:start; }
.bu-moi{ justify-self:end; max-width:85%; padding:7px 11px; border-radius:var(--r-3) var(--r-3) var(--r-0) var(--r-3); background:var(--quai-3); font-size:var(--taille-texte); }
.bu-lui{ max-width:94%; font-size:var(--taille-texte); line-height:1.5; color:var(--craie-2); display:grid; gap:6px; justify-items:start; }
.bu-attente{ color:var(--craie-4); }
.bu-carte{ width:100%; border:1px solid var(--trait-2); border-radius:var(--r-2); padding:8px 10px; background:var(--quai-2); font-size:var(--taille-petit); display:grid; gap:2px; }
.bu-ligne{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px solid var(--trait-2); color:var(--craie-2); text-decoration:none; }
.bu-ligne:last-of-type{ border-bottom:0; } .bu-retard .bu-chiffre{ color:var(--bad); }
.bu-chiffre{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; } .bu-dim{ color:var(--craie-3); }
.bu-source{ font-size:var(--taille-legende); color:var(--craie-4); } .bu-texte{ white-space:pre-line; }
.bu-gestes{ display:flex; gap:6px; margin-top:6px; }
.bu-lien{ color:var(--esp); font-weight:var(--graisse-forte); }
.bu-saisie{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--trait-2); } .bu-saisie .txt{ flex:1; }
.bu-pied{ padding:0 12px 9px; font-size:var(--taille-micro); color:var(--craie-4); }
.ar-public{ background:var(--nuit); } .ar-feuille{ max-width:980px; margin:0 auto; padding:24px 16px; }
.ar-sources{ font-size:var(--taille-legende); margin-top:8px; }
@media print{ .bu{ display:none; } }

/* Moteur du Hub, lot 1h : les options chiffrées d'une demande à décider, dans le lecteur du courrier. */
.ech-options{ display:grid; gap:6px; margin-top:8px; padding:8px 10px; border:1px solid var(--trait-2); border-radius:var(--r-2); background:var(--quai-2); }
.ech-option{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:6px 0; border-top:1px solid var(--trait-2); }
.ech-option:first-of-type{ border-top:0; } .ech-option small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.ech-option-impact{ font-family:var(--f-mono); font-size:var(--taille-petit); color:var(--craie-2); white-space:nowrap; }

/* Moteur du Hub, lot 6 : « Ce matin » (l'écran d'ouverture de l'app installée) et la bulle dans la page. */
.mt-matin{ max-width:640px; margin:0 auto; display:grid; gap:12px; }
.mt-tete small{ color:var(--craie-3); font-size:var(--taille-petit); } .mt-tete h1{ margin:2px 0 0; font-family:var(--f-titre); font-size:var(--taille-grand); font-weight:var(--graisse-grasse); }
.mt-ecouter{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-4); cursor:pointer; text-align:left;
  background:var(--quai-3); color:var(--craie); border:1px solid var(--trait-3); box-shadow:inset 3px 0 0 var(--esp, var(--info)); font-family:inherit; }
.mt-ecouter i{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--esp, var(--info)); color:var(--nuit); flex:none; }
.mt-ecouter b{ display:block; font-size:var(--taille-lecture); } .mt-ecouter small{ display:block; color:var(--craie-3); font-size:var(--taille-legende); }
.mt-ecouter--on i{ background:var(--bad); color:var(--blanc); }
.mt-liste{ display:grid; gap:8px; }
.mt-item{ display:flex; justify-content:space-between; gap:10px; padding:11px 13px; border:1px solid var(--trait-2); border-radius:var(--r-3);
  background:var(--quai); color:var(--craie); text-decoration:none; font-size:var(--taille-texte); }
.mt-item small{ color:var(--craie-3); white-space:nowrap; } .mt-item.mt-bad{ box-shadow:inset 3px 0 0 var(--bad); } .mt-item.mt-warn{ box-shadow:inset 3px 0 0 var(--warn); }
.bu--plein{ position:static; display:block; } .bu--plein .bu-panneau{ width:100%; max-height:none; min-height:340px; box-shadow:none; }
.bu-micro--on{ background:var(--bad); border-color:var(--bad); color:var(--blanc); } .bu-micro{ touch-action:none; }
.bu-dit{ display:block; font-size:var(--taille-micro); color:var(--craie-3); }
/* La petite fenêtre ne défile jamais de côté : une ligne de tableau passe à la ligne, ses détails en dessous (19/10). */
.bu-lui, .bu-carte{ min-width:0; } .bu-carte span, .bu-lui > div{ overflow-wrap:anywhere; }
.bu:not(.bu--grand) .bu-carte .bu-ligne{ flex-wrap:wrap; justify-content:flex-start; gap:0 8px; }
.bu:not(.bu--grand) .bu-carte .bu-ligne > .bu-dim{ flex-basis:100%; font-size:var(--taille-petit); }

/* Point du lundi : l'avis de l'agent et ses objectifs proposés (18/10/2026). */
.ag-avis{ margin:10px 0; padding:8px 12px; border-left:2px solid var(--esp, var(--info)); background:var(--quai-2); border-radius:0 var(--r-2) var(--r-2) 0; }
.ag-avis p{ margin:4px 0 0; } .ag-objectifs{ list-style:none; margin:10px 0; padding:8px 12px; border-left:2px solid var(--warn); background:var(--quai-2); border-radius:0 var(--r-2) var(--r-2) 0; }
.ag-objectifs li{ padding:3px 0; } .ag-objectifs small{ display:block; color:var(--craie-3); font-size:var(--taille-legende); }

/* La barre de période commune (maquette hub_periode_et_outlook, validée le 19/10/2026) : services/periode.py. */
.per-barre{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px; margin:0 0 14px; border:1px solid var(--trait-2);
  border-radius:var(--r-3); background:var(--quai); }
.per-seg{ display:flex; flex-wrap:wrap; border:1px solid var(--trait-3); border-radius:var(--r-2); }
.per-b{ padding:5px 10px; font-size:var(--taille-petit); color:var(--craie-2); text-decoration:none; border-right:1px solid var(--trait-3);
  white-space:nowrap; cursor:pointer; list-style:none; }
.per-b::-webkit-details-marker{ display:none; } .per-seg > :last-child .per-b, .per-seg > .per-b:last-child{ border-right:0; }
.per-b:hover{ color:var(--craie); background:var(--quai-2); } .per-b.on{ background:var(--quai-3); color:var(--craie); box-shadow:inset 0 -2px 0 var(--esp, var(--signal)); }
.per-perso{ position:relative; } .per-perso > summary{ border-right:0; }
.per-pop{ position:absolute; z-index:40; top:calc(100% + 8px); left:0; width:330px; padding:12px; border:1px solid var(--trait-3);
  border-radius:var(--r-3); background:var(--quai-2); box-shadow:0 18px 40px color-mix(in oklab, var(--ombre-teinte) 45%, transparent); }
.per-deux{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.per-champ{ display:grid; gap:4px; font-size:var(--taille-legende); color:var(--craie-4); text-transform:uppercase; letter-spacing:.05em; }
.per-champ .txt{ width:100%; }
.per-puces{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.per-puce{ font-size:var(--taille-petit); padding:3px 9px; border-radius:var(--r-rond); border:1px solid var(--trait-3); color:var(--craie-2); text-decoration:none; }
.per-puce:hover{ color:var(--craie); border-color:var(--craie-4); }
.per-pied{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.per-sel{ display:flex; align-items:center; gap:6px; font-size:var(--taille-petit); color:var(--craie-3); }
.per-barre .per-sel select{ width:auto; min-width:0; font:inherit; font-size:var(--taille-petit); color:var(--craie); background:var(--quai-2); border:1px solid var(--trait-3); border-radius:var(--r-2); padding:4px 8px; max-width:220px; }
.per-fin{ margin-left:auto; display:flex; align-items:center; gap:10px; } .per-dim{ font-size:var(--taille-petit); color:var(--craie-3); }
.per-raz{ font-size:var(--taille-petit); color:var(--craie-3); }
.per-e{ font-weight:var(--graisse-forte); white-space:nowrap; } .per-e--up{ color:var(--ok); } .per-e--down{ color:var(--bad); } .per-e--egal{ color:var(--craie-3); }
@media (max-width:700px){ .per-fin{ margin-left:0; width:100%; } .per-pop{ width:min(330px, calc(100vw - 48px)); } }

/* ── ac- : l'accueil (refonte 10/2026, maquettes « Hub refonte 2026-10-20 ») et le chargement animé des chiffres ── */
.ac{ margin:-16px -18px -28px; }
.ac-haut{ min-height:calc(100vh - var(--itin-h)); min-height:calc(100dvh - var(--itin-h)); display:flex; flex-direction:column; padding:56px 40px 18px;
  background:radial-gradient(1000px 360px at 50% -80px, var(--acc-fond), transparent 70%); }
.ac-pastille{ display:flex; width:max-content; max-width:100%; margin:0 auto; align-items:center; gap:8px; padding:6px 14px; border:1px solid var(--trait);
  border-radius:var(--r-rond); background:var(--quai); font-size:var(--taille-petit); color:var(--craie-2); }
.ac-pastille i{ width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 4px var(--acc-fond); flex:none; }
.ac-pastille:hover{ border-color:var(--trait-3); color:var(--craie); }
.ac-titre{ text-align:center; font-size:var(--taille-geant); font-weight:var(--graisse-forte); letter-spacing:-.025em; line-height:1.15; margin:22px 0 24px; }
.ac-question{ display:flex; align-items:center; gap:12px; width:100%; max-width:860px; height:56px; margin:0 auto; padding:0 16px; border-radius:var(--r-4);
  border:1px solid var(--trait-3); background:var(--quai); box-shadow:0 10px 40px -18px color-mix(in oklab, var(--ombre-teinte) 60%, transparent); cursor:text;
  transition:border-color var(--t), box-shadow var(--t); }
.ac-question:focus-within{ border-color:var(--acc); box-shadow:0 0 0 4px var(--acc-fond); }
.ac-question svg{ width:18px; height:18px; color:var(--acc); flex:none; }
.ac-question input{ flex:1; min-width:0; height:100%; background:none; border:0; outline:0; color:var(--craie); font:inherit; font-size:var(--taille-lecture); }
.ac-question input::placeholder{ color:var(--craie-4); }
.ac-question kbd{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); border:1px solid var(--trait); border-radius:var(--r-1); padding:2px 7px; }
.ac-suggestions{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px; }
.ac-suggestions a{ font-size:var(--taille-petit); color:var(--craie-2); padding:6px 12px; border-radius:var(--r-rond); border:1px solid var(--trait); background:var(--nuit); transition:border-color var(--t), color var(--t); }
.ac-suggestions a:hover{ border-color:var(--trait-3); color:var(--craie); }
.ac-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:36px; width:100%; max-width:1180px; margin:48px auto 0; }
.ac-col h3,.ac-p h4{ display:flex; align-items:center; gap:6px; font-size:var(--taille-texte); font-weight:var(--graisse-moyenne); color:var(--craie-2); margin:0 0 4px; }
.ac-col h3 span,.ac-p h4 span{ margin-left:auto; color:var(--craie-4); font-weight:var(--graisse-normale); }
.ac-ln{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--trait-2); color:inherit; border-radius:0; transition:background var(--t); }
a.ac-ln:hover{ background:var(--quai-2); }
.ac-ic{ width:30px; height:30px; flex:none; border-radius:var(--r-2); display:grid; place-items:center; background:var(--quai-2); color:var(--craie-3); }
.ac-ic svg{ width:14px; height:14px; }
.ac-t{ min-width:0; flex:1; }
.ac-t b{ display:block; font-weight:var(--graisse-moyenne); font-size:var(--taille-texte); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-t small{ display:block; color:var(--craie-4); font-size:var(--taille-legende); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-tag{ font-size:var(--taille-micro); padding:1px 7px; border-radius:var(--r-rond); color:var(--craie-3); background:var(--quai-3); white-space:nowrap; }
.ac-tag.bad{ color:var(--bad); background:var(--bad-bg); }
.ac-point{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--craie-4); }
.ac-point.bad{ background:var(--bad); } .ac-point.warn{ background:var(--warn); } .ac-point.ok{ background:var(--ok); }
.ac-vide{ color:var(--craie-4); font-size:var(--taille-petit); padding:12px 4px; margin:0; }
.ac-plus{ display:inline-block; margin-top:10px; font-size:var(--taille-petit); color:var(--craie-3); }
.ac-plus:hover{ color:var(--craie); }
.ac-indice{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:auto auto 0; padding-top:28px; font-size:var(--taille-legende); color:var(--craie-4);
  opacity:.6; transition:opacity var(--t); }
.ac-indice:hover{ opacity:1; }
.ac-indice svg{ width:14px; height:14px; animation:ac-respire 2.4s ease-in-out infinite; }
.ac-indice.cache{ opacity:0; pointer-events:none; }
@keyframes ac-respire{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
.ac-synthese{ padding:26px 40px 48px; border-top:1px solid var(--trait-2); background:var(--nuit); min-height:calc(100vh - var(--itin-h)); }
.ac-entete{ display:flex; align-items:center; gap:10px; max-width:1500px; margin:0 auto 18px; }
.ac-entete h2{ font-size:var(--taille-titre); font-weight:var(--graisse-forte); letter-spacing:-.015em; margin:0 auto 0 0; }
.ac-corps{ max-width:1500px; margin:0 auto; }
.ac-kpis{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; }
.ac-k,.ac-p{ position:relative; overflow:hidden; display:block; background:var(--quai); border:1px solid var(--trait-2); border-radius:var(--r-3); padding:14px 16px; color:inherit;
  transition:border-color var(--t); }
a.ac-k,a.ac-p{ transition:border-color var(--t), background var(--t); }
a.ac-k:hover,a.ac-p:hover{ border-color:var(--trait-3); background:var(--quai-2); }
.ac-k h4{ margin:0; font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); color:var(--craie-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-v{ display:block; font-size:var(--taille-grand); font-weight:var(--graisse-forte); letter-spacing:-.02em; margin:8px 0 4px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ac-v.bad{ color:var(--bad); }
.ac-s{ display:block; font-size:var(--taille-legende); color:var(--craie-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.4em; }
/* Le détail d'un indicateur, dans le panneau de droite (maquette accueil v11). L'indicateur ouvert reste marqué. */
.ac-k.actif,.ac-p.actif{ border-color:var(--acc); background:var(--quai-2); }
.ac-p[data-detail]{ cursor:pointer; }
.ac-p-gestes{ margin-left:auto; display:inline-flex; gap:2px; }
.ac-p--jour h4{ display:flex; align-items:center; }
.ac-q--sous{ font-size:var(--taille-legende); color:var(--craie-4); max-width:40%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acd-tete.acd-tete--jour{ flex-direction:row; align-items:center; justify-content:space-between; }
.acd-ev{ border-bottom:1px solid var(--trait-2); padding-bottom:8px; margin-bottom:4px; }
.acd-ev .btn{ margin-top:4px; }
.acd-note{ margin:0 0 0 18px; font-size:var(--taille-petit); color:var(--craie-3); white-space:pre-wrap; line-height:1.5; }
.acd-l .ac-point{ margin-right:2px; }
/* Panneau ouvert : la page se resserre pour lui laisser la place, rien n'est caché dessous (sauf sur un écran étroit). */
@media (min-width:1100px){ body.a-detail .view{ padding-right:calc(18px + min(400px, 100vw)); }
  body.a-detail .ac-kpis{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.volet--detail{ padding:0; display:flex; flex-direction:column; }
.volet--detail .notifs-hd .btn:first-of-type{ margin-left:auto; }
.volet--detail .notifs-hd .btn + .btn{ margin-left:0; }
.acd-corps{ overflow-y:auto; flex:1; padding:14px 16px 20px; }
.acd-tete{ display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.acd-v{ font-size:var(--taille-hero); font-weight:var(--graisse-forte); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.acd-v.bad,.acd-lv.bad{ color:var(--bad); } .acd-lv.ok{ color:var(--ok); }
.acd-s{ font-size:var(--taille-petit); color:var(--craie-3); }
.acd-mois{ display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; align-items:end; height:96px; margin:4px 0 6px; }
.acd-m{ display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; }
.acd-mb{ flex:1; width:100%; display:flex; align-items:flex-end; }
.acd-mb i{ display:block; width:100%; height:var(--h, 0%); min-height:2px; border-radius:var(--r-0) var(--r-0) 0 0; background:var(--quai-3); transition:height var(--t); }
.acd-m--ici .acd-mb i{ background:var(--acc); }
.acd-m small{ font-size:var(--taille-micro); color:var(--craie-4); }
.acd-h{ margin:16px 0 6px; font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); color:var(--craie-4); text-transform:uppercase; letter-spacing:.06em; }
.acd-etapes{ display:flex; flex-direction:column; gap:5px; }
.acd-e{ display:grid; grid-template-columns:9em 1fr 2.5em; gap:8px; align-items:center; font-size:var(--taille-petit); color:var(--craie-2); }
.acd-eb{ height:6px; border-radius:var(--r-0); background:var(--quai-2); overflow:hidden; }
.acd-eb i{ display:block; height:100%; width:var(--h, 0%); background:var(--acc); }
.acd-e.ok .acd-eb i{ background:var(--ok); }
.acd-e b{ text-align:right; }
.acd-l{ display:flex; align-items:center; gap:10px; padding:8px; margin:0 -8px; border-radius:var(--r-2); color:inherit; }
a.acd-l:hover{ background:var(--quai-2); }
.acd-lt{ min-width:0; flex:1; display:flex; flex-direction:column; }
.acd-lt b{ font-size:var(--taille-texte); font-weight:var(--graisse-moyenne); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acd-lt small{ font-size:var(--taille-legende); color:var(--craie-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acd-lv{ font-size:var(--taille-texte); font-variant-numeric:tabular-nums; white-space:nowrap; }
.acd .etat{ font-size:var(--taille-legende); white-space:nowrap; color:var(--craie-3); }
.acd .etat.bad{ color:var(--bad); } .acd .etat.warn{ color:var(--warn); }
.acd-vide{ color:var(--craie-4); font-size:var(--taille-petit); margin:6px 0; }
.acd-plus{ display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:var(--taille-petit); color:var(--acc); }
.acd-plus svg{ width:12px; height:12px; }
.ac-trio{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:12px; }
.ac-p{ min-height:180px; }
.ac-p h4{ margin-bottom:6px; }
/* Squelette (maquette) : le titre du bloc, deux barres qui luisent, une vague fantôme ; il s'efface quand les chiffres arrivent. */
.sq > *:not(.sq-t):not(.sq-b):not(.sq-vague){ visibility:hidden; }
.sq-t{ display:block; font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); color:var(--craie-3); }
.sq-b{ display:block; height:9px; width:46%; margin:14px 0 0; border-radius:var(--r-1); background:linear-gradient(90deg, var(--quai-3) 0%, var(--trait-3) 50%, var(--quai-3) 100%);
  background-size:200% 100%; animation:sq-luit 1.3s ease-in-out infinite; }
.sq-b.court{ width:28%; margin-top:8px; } .sq-b.long{ width:62%; }
.ac-kpis .ac-k.sq{ min-height:148px; } .ac-kpis .sq svg.sq-vague{ height:40%; }
svg.sq-vague{ position:absolute; left:0; right:0; bottom:0; width:100%; height:55%; fill:var(--quai-2); }
.sq::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--blanc) 4%, transparent) 50%, transparent 70%);
  background-size:220% 100%; animation:sq-luit 1.6s ease-in-out infinite; }
@keyframes sq-luit{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
.apparait{ animation:apparait 420ms var(--ease) both; }
@keyframes apparait{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* Les barres d'un graphique poussent à l'affichage (Pilotage : revenu par mois). */
.rev i{ transform-origin:bottom; animation:pousse 700ms var(--ease) both; }
.rev div:nth-child(n+4) i{ animation-delay:60ms; } .rev div:nth-child(n+8) i{ animation-delay:120ms; }
@keyframes pousse{ from{ transform:scaleY(0); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .rev i{ animation:none; } }
/* Réglages › Services : la disponibilité, une case par jour. */
.srv{ display:grid; gap:2px; padding:4px 16px 12px; }
.srv-fam{ margin:14px 0 4px; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.08em; text-transform:uppercase; color:var(--craie-4); }
.srv-fam:first-child{ margin-top:0; }
.srv-l{ display:grid; grid-template-columns:10px minmax(150px, 260px) minmax(0,1fr) 72px 60px 34px; align-items:center; gap:12px; padding:6px 0; border-bottom:1px solid var(--trait-2); }
.srv-nom{ min-width:0; display:grid; } .srv-nom b{ font-weight:var(--graisse-moyenne); font-size:var(--taille-texte); }
.srv-nom small{ color:var(--craie-4); font-size:var(--taille-legende); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srv-etat{ width:8px; height:8px; border-radius:50%; background:var(--craie-4); }
.srv-etat--ok{ background:var(--ok); } .srv-etat--warn{ background:var(--warn); } .srv-etat--bad{ background:var(--bad); box-shadow:0 0 0 3px color-mix(in oklab, var(--bad) 25%, transparent); }
.srv-jours{ display:grid; grid-template-columns:repeat(30, minmax(0,1fr)); gap:2px; }
.srv-j{ height:22px; border-radius:var(--r-0); background:var(--quai-3); }
.srv-j--ok{ background:var(--ok); } .srv-j--warn{ background:var(--warn); } .srv-j--bad{ background:var(--bad); }
.srv-part{ text-align:right; font-variant-numeric:tabular-nums; font-size:var(--taille-petit); color:var(--craie-2); }
.srv-part--warn{ color:var(--warn); } .srv-part--bad{ color:var(--bad); }
.srv-ms{ text-align:right; font-variant-numeric:tabular-nums; font-size:var(--taille-legende); color:var(--craie-4); }
.srv-reg{ position:relative; } .srv-reg summary{ list-style:none; } .srv-reg summary::-webkit-details-marker{ display:none; }
.srv-reg[open] .srv-form{ position:absolute; right:0; top:36px; z-index:20; width:320px; padding:12px; background:var(--quai); border:1px solid var(--trait-3); border-radius:var(--r-3); box-shadow:0 18px 40px color-mix(in oklab, var(--ombre-teinte) 45%, transparent); }
.srv-form{ display:grid; gap:8px; } .srv-form label{ display:grid; gap:3px; font-size:var(--taille-legende); color:var(--craie-3); }
.srv-gestes{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.srv-inc{ display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--trait-2); }
.srv-quand{ display:grid; text-align:right; font-size:var(--taille-petit); font-variant-numeric:tabular-nums; } .srv-quand small{ color:var(--craie-4); }
.srv-rien{ color:var(--craie-4); font-size:var(--taille-petit); }
@media (max-width:900px){ .srv-l{ grid-template-columns:10px minmax(0,1fr) 64px 34px; } .srv-jours,.srv-ms{ display:none; } }
/* L'accueil : le bloc « Services ». */
.ac-srv{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 64px; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--trait-2); }
.ac-srv:last-child{ border-bottom:0; }
.ac-p h4 > span.ac-q{ margin-left:auto; } .ac-p h4 > span.ac-q + .ac-fl{ margin-left:8px; }
.ac-srv .srv-jours{ gap:1px; } .ac-srv .srv-j{ height:16px; }

/* Le modèle « liste » (maquette Comptes v3) : quatre chiffres, des onglets, un tableau ; la ligne entière ouvre la fiche. */
.lt-cherche{ position:relative; display:flex; align-items:center; }
.lt-cherche svg{ position:absolute; left:10px; width:14px; height:14px; color:var(--craie-4); pointer-events:none; }
.lt-cherche .txt{ width:260px; padding-left:32px; }
.lt-chiffres{ display:flex; gap:40px; margin:4px 0 18px; }
.lt-chiffres div{ display:grid; gap:2px; }
.lt-chiffres b{ font-size:var(--taille-titre); font-weight:var(--graisse-forte); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.lt-chiffres b.warn{ color:var(--warn); } .lt-chiffres b.bad{ color:var(--bad); }
.lt-chiffres span{ font-size:var(--taille-petit); color:var(--craie-3); }
.lt-barre{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.lt-onglets{ display:flex; gap:2px; }
.lt-onglets a{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:var(--r-2); color:var(--craie-3);
  font-size:var(--taille-texte); transition:background var(--t), color var(--t); }
.lt-onglets a span{ color:var(--craie-4); font-variant-numeric:tabular-nums; }
.lt-onglets a:hover{ color:var(--craie); background:var(--quai-2); }
.lt-onglets a[aria-current]{ color:var(--craie); background:var(--quai-3); }
.lt-filtres{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.lt-tbl{ border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); }
.lt-tbl .tbl td{ padding-top:11px; padding-bottom:11px; }
.lt-tbl tr[data-lien]{ cursor:pointer; transition:background var(--t); }
.lt-tbl tr[data-lien]:hover td{ background:var(--quai-2); }
.lt-compte{ display:flex; align-items:center; gap:12px; }
.lt-compte a{ color:var(--craie); font-weight:var(--graisse-moyenne); }
.lt-compte small,.lt-sous{ display:block; color:var(--craie-4); font-size:var(--taille-legende); }
.lt-av{ width:30px; height:30px; flex:none; border-radius:var(--r-2); display:grid; place-items:center; background:var(--quai-3);
  color:var(--craie-3); font-size:var(--taille-micro); font-weight:var(--graisse-forte); }
.lt-sante{ display:inline-flex; align-items:center; gap:7px; }
.lt-sem{ display:inline-flex; align-items:flex-end; gap:2px; height:18px; }
.lt-sem i{ width:5px; height:var(--h, 3px); min-height:3px; border-radius:var(--r-0); background:var(--acc); }
.lt-sem i.partielle{ opacity:.45; }
.lt-sem--vide i{ height:2px; background:var(--trait-3); }
@media (max-width:900px){ .lt-chiffres{ gap:22px; flex-wrap:wrap; } .lt-cherche .txt{ width:180px; } .lt-filtres{ margin-left:0; } }

/* La synthèse complète (maquette) : cartes avec évolution et mini-courbe, courbe de l'encaissé, « Aujourd'hui ». */
.ac-dit{ color:var(--craie-4); font-size:var(--taille-petit); margin-right:auto; }
.ac-entete h2{ margin:0; }
.ac-periode{ max-width:1500px; margin:0 auto 14px; }
.ac-k h4{ display:flex; align-items:center; gap:6px; }
.ac-fl{ margin-left:auto; color:var(--craie-4); opacity:0; transition:opacity var(--t); display:inline-grid; }
.ac-fl svg{ width:12px; height:12px; }
a.ac-k:hover .ac-fl,.ac-rg:hover .ac-fl{ opacity:1; }
.ac-mini{ display:block; width:100%; height:28px; margin-top:8px; }
.ac-mini--vide{ height:28px; }
.ac-grille{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; margin-top:12px; }
.ac-p--grand{ min-height:320px; }
a.ac-p{ color:inherit; }
.ac-sous{ color:var(--craie-4); font-size:var(--taille-petit); margin:0 0 10px; }
.ac-bas{ margin:10px 0 0; }
.ac-leg{ margin-left:auto; display:flex; gap:12px; font-size:var(--taille-petit); font-weight:var(--graisse-normale); color:var(--craie-3); }
.ac-leg span{ display:inline-flex; align-items:center; gap:6px; }
.ac-leg i{ width:10px; height:3px; border-radius:var(--r-0); display:inline-block; }
.ac-leg-a{ background:var(--acc); } .ac-leg-b{ background:var(--craie-4); }
.ac-courbe{ display:block; width:100%; height:auto; }
.ac-grad{ stroke:var(--trait-2); stroke-width:1; }
.ac-axe{ fill:var(--craie-4); font-size:var(--taille-micro); font-family:var(--f-texte); }
.ac-axe--ici{ fill:var(--craie-2); }
.ac-rg{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--trait-2); color:inherit; font-size:var(--taille-texte); }
.ac-rg:last-child{ border-bottom:0; }
a.ac-rg:hover{ background:var(--quai-2); }
.ac-h{ width:52px; flex:none; color:var(--craie-4); font-variant-numeric:tabular-nums; font-size:var(--taille-petit); }
.ac-q{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--craie-2); }
.ac-h5{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); color:var(--craie-2); margin:16px 0 2px; }
.ac-point.bleu{ background:var(--info); }
.ac-point.acc{ background:var(--acc); } .ac-point.mute{ background:var(--craie-4); }
.ac-q.bad{ color:var(--bad); }
/* Santé du parc : une barre empilée par état. */
.ac-pile{ display:flex; gap:2px; height:8px; margin:4px 0 10px; border-radius:var(--r-rond); overflow:hidden; }
.ac-pile i{ width:var(--l); min-width:4px; background:var(--craie-4); animation:pousse-x 700ms var(--ease) both; transform-origin:left; }
.ac-pile-ok{ background:var(--ok) !important; } .ac-pile-warn{ background:var(--warn) !important; } .ac-pile-bad{ background:var(--bad) !important; } .ac-pile-acc{ background:var(--acc) !important; }
/* Prospection : une barre par étape. */
.ac-rg--barre .ac-t{ flex:0 0 38%; min-width:0; }
.ac-barre{ flex:1; height:6px; border-radius:var(--r-rond); background:var(--quai-3); overflow:hidden; }
.ac-barre i{ display:block; height:100%; width:var(--l); background:var(--acc); border-radius:var(--r-rond); transform-origin:left; }
.ac-barre.rev i,.ac-barre i.rev{ animation:pousse-x 700ms var(--ease) both; }
.ac-barre--ok i{ background:var(--ok); }
@keyframes pousse-x{ from{ transform:scaleX(0); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .ac-pile i,.ac-barre i{ animation:none !important; } }
.ac-leg-ok{ background:var(--ok); } .ac-leg-bad{ background:var(--bad); }
.ac-zero{ stroke:var(--bad); stroke-width:1; stroke-dasharray:3 3; opacity:.6; }
.ac-p--seul{ grid-column:1 / -1; }
/* Activité des clients : douze semaines, une case par semaine ; plus pâle = moins d'utilisateurs actifs. */
.ac-carte-chaleur{ display:grid; grid-template-columns:minmax(120px, 200px) minmax(0,1fr); gap:4px 14px; align-items:center; margin-top:6px; }
.ac-cc-nom{ font-size:var(--taille-petit); color:var(--craie-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-cc-ligne{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:3px; }
.ac-cc-ligne i{ height:16px; border-radius:var(--r-1); background:var(--quai-3); }
.ac-cc-ligne i.n1{ background:color-mix(in oklab, var(--acc) 25%, var(--quai-3)); } .ac-cc-ligne i.n2{ background:color-mix(in oklab, var(--acc) 50%, var(--quai-3)); }
.ac-cc-ligne i.n3{ background:color-mix(in oklab, var(--acc) 75%, var(--quai-3)); } .ac-cc-ligne i.n4{ background:var(--acc); }
@media (max-width:1180px){ .ac-kpis{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:1180px){ .ac-grille{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){ .ac{ margin:-12px; } .ac-haut{ padding:32px 16px 16px; min-height:auto; } .ac-titre{ font-size:var(--taille-grand); }
  .ac-cols,.ac-trio{ grid-template-columns:minmax(0,1fr); gap:20px; } .ac-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); } .ac-synthese{ padding:20px 16px 32px; }
  .ac-p{ min-height:0; } .ac-question kbd{ display:none; } }

/* La bulle en grand (maquette hub_moteur_grand, 18/10) : par-dessus la page, conversations à gauche, colonne de droite. */
.bu-corps{ display:flex; flex:1; min-height:0; } .bu-centre{ display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; }
.bu-voile{ position:fixed; inset:0; background:color-mix(in oklab, var(--ombre-teinte) 55%, transparent); z-index:-1; } .bu-voile[hidden], .bu-g[hidden], .bu-d[hidden]{ display:none; }
.bu--grand .bu-panneau{ position:fixed; inset:4vh 4vw; width:auto; max-height:none; } .bu--grand .bu-pastille{ display:none; }
.bu--grand .bu-corps{ display:grid; grid-template-columns:240px minmax(0,1fr) 260px; }
.bu--grand .bu-fil{ padding:18px 22px; } .bu--grand .bu-lui{ max-width:86%; }
.bu-g, .bu-d{ padding:12px; background:var(--quai-2); overflow:auto; min-height:0; }
.bu-g{ border-right:1px solid var(--trait-2); } .bu-d{ border-left:1px solid var(--trait-2); }
.bu-chercher{ width:100%; font-size:var(--taille-petit); }
.bu-titre-col{ font:var(--graisse-forte) var(--taille-legende)/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--craie-4); margin:16px 0 8px; }
.bu-conv{ display:flex; justify-content:space-between; gap:8px; width:100%; padding:7px 9px; border:0; border-radius:var(--r-2); background:none;
  color:var(--craie-2); font:inherit; font-size:var(--taille-texte); text-align:left; cursor:pointer; }
.bu-conv span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bu-conv small{ color:var(--craie-4); white-space:nowrap; }
.bu-conv:hover{ background:var(--quai); } .bu-conv.on{ background:var(--quai-3); color:var(--craie); }
.bu-client summary{ display:flex; justify-content:space-between; gap:8px; padding:7px 9px; cursor:pointer; color:var(--craie-2); font-size:var(--taille-texte); list-style:none; }
.bu-client summary small{ color:var(--craie-4); } .bu-client .bu-conv{ padding-left:18px; }
.bu-doc{ display:block; padding:8px; border:1px solid var(--trait-2); border-radius:var(--r-2); margin-bottom:6px; font-size:var(--taille-texte); color:var(--craie-2); text-decoration:none; }
.bu-doc small{ display:block; color:var(--craie-4); font-size:var(--taille-legende); } .bu-obj{ box-shadow:inset 2px 0 0 var(--warn); }
.bu-vide{ font-size:var(--taille-petit); color:var(--craie-4); }
@media (max-width:900px){ .bu-agrandir{ display:none; } }

/* Refonte de l'accueil (maquette hub_v3_accueil validée le 17/10) : la rangée du haut d'« Aujourd'hui ». */
.aj-trois{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:12px; margin-bottom:12px; }
.aj-l{ display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border-top:1px solid var(--trait-2); color:var(--craie); text-decoration:none; font-size:var(--taille-texte); }
.aj-l small{ display:block; color:var(--craie-3); font-size:var(--taille-legende); } .aj-l em{ font-style:normal; color:var(--craie-3); font-size:var(--taille-legende); white-space:nowrap; }
.aj-l.aj-bad{ box-shadow:inset 3px 0 0 var(--bad); } .aj-l.aj-warn{ box-shadow:inset 3px 0 0 var(--warn); } .aj-l.aj-moi{ box-shadow:inset 3px 0 0 var(--info); }
.aj-reste > summary{ list-style:none; cursor:pointer; } .aj-reste > summary::-webkit-details-marker{ display:none; }
.aj-reste-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 12px; }
.aj-p{ padding:4px 9px; border-radius:var(--r-rond); background:var(--quai-3); color:var(--craie-2); font-size:var(--taille-petit); } .aj-p b{ color:var(--craie); }
.aj-ouvrir{ margin-left:auto; color:var(--craie-3); font-size:var(--taille-petit); } .aj-reste[open] .aj-ouvrir{ display:none; }
@media (max-width:1000px){ .aj-trois{ grid-template-columns:1fr; } }

/* Pilotage pour la direction (refonte validée le 17/10). */
.pl-chiffres{ grid-template-columns:repeat(6, minmax(0,1fr)); } .pl-deux{ margin-bottom:12px; }
.pl-file{ margin:12px 0; } .pl-file > summary{ list-style:none; cursor:pointer; } .pl-file > summary::-webkit-details-marker{ display:none; }
.pl-file-hd{ display:flex; gap:10px; align-items:baseline; padding:8px 2px; }
@media (max-width:1000px){ .pl-chiffres{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ══ HORS DU HUB : connexion, vues ouvertes à un client ═══════════════
   Gabarit externe.html. Une carte centrée, ou une page avec sa barre. */
.cx{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(380px, 520px) minmax(0,1fr); background:var(--nuit); }
.cx-g{ display:flex; flex-direction:column; padding:44px 64px 32px; min-width:0; }
.cx-marque{ display:flex; align-items:center; gap:10px; }
.cx-marque b{ font-size:var(--taille-titre); font-weight:var(--graisse-forte); letter-spacing:-.02em; }
.cx-form{ margin:auto 0; padding:40px 0; width:100%; max-width:392px; }
.cx-form h1{ font-size:var(--taille-grand); font-weight:var(--graisse-forte); letter-spacing:-.03em; margin-bottom:4px; }
.cx-form .tete-sous{ margin-bottom:22px; } .cx-form h1 + form{ margin-top:22px; }
.cx-form .txt{ height:42px; }
.cx-pied{ font-size:var(--taille-legende); color:var(--craie-4); }
.cx-ou{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--craie-4); font-size:var(--taille-legende); }
.cx-ou::before,.cx-ou::after{ content:''; flex:1; height:1px; background:var(--trait); }
.cx-ms{ display:flex; align-items:center; justify-content:center; gap:10px; }
/* Le logo Microsoft : quatre carrés aux couleurs de la marque Microsoft (charte imposée par Microsoft pour ce bouton). */
.cx-ms-logo{ display:grid; grid-template-columns:8px 8px; gap:2px; }
.cx-ms-logo i{ width:8px; height:8px; background:var(--ms-1); } .cx-ms-logo i:nth-child(2){ background:var(--ms-2); }
.cx-ms-logo i:nth-child(3){ background:var(--ms-3); } .cx-ms-logo i:nth-child(4){ background:var(--ms-4); }
.cx-d{ position:relative; overflow:hidden; padding:56px 64px; color:white;
  background:radial-gradient(120% 90% at 85% 10%, color-mix(in oklab, var(--marque-sur-clair) 85%, white) 0%, var(--marque-sur-clair) 38%,
    color-mix(in oklab, var(--marque-sur-clair) 45%, black) 75%, color-mix(in oklab, var(--marque-sur-clair) 25%, black) 100%); }
.cx-d h2{ position:relative; max-width:560px; font-size:calc(var(--taille-geant) * 1.35); line-height:1.05; letter-spacing:-.04em; font-weight:var(--graisse-forte); }
.cx-d p{ position:relative; max-width:480px; margin-top:16px; font-size:var(--taille-lecture); line-height:1.5; color:color-mix(in oklab, white 78%, transparent); }
.cx-filigrane{ position:absolute; right:-70px; top:-50px; width:440px; opacity:.1; filter:brightness(0) invert(1); }
.cx-apercu{ position:absolute; left:64px; right:-160px; bottom:-70px; border-radius:var(--r-4); overflow:hidden;
  border:8px solid color-mix(in oklab, black 55%, transparent); box-shadow:0 40px 80px color-mix(in oklab, black 50%, transparent); }
.cx-apercu img{ display:block; width:100%; }
@media (max-width:960px){ .cx{ grid-template-columns:minmax(0,1fr); } .cx-d{ display:none; } .cx-g{ padding:28px 20px; } }
.ext{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:24px 16px; background:var(--nuit); }
.ext-carte{ width:min(400px,100%); background:var(--quai); border:1px solid var(--trait-2); border-radius:var(--r-3); padding:22px 22px 20px; }
.ext-marque{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.ext-marque b{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); letter-spacing:.01em; }
.ext-carte h1{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); margin-bottom:2px; }
.ext-carte .tete-sous{ margin-bottom:14px; }
.ext-pied{ font-size:var(--taille-legende); color:var(--craie-4); text-align:center; }
/* Pages d'erreur et accès refusé (refonte 10/2026) : sans cadre, comme la connexion ; le code en grand, un halo. */
.ext--nu{ background:radial-gradient(60% 45% at 50% 0%, color-mix(in oklab, var(--acc) 14%, transparent), transparent 70%), var(--nuit); }
.ext--nu .ext-carte{ width:min(440px,100%); background:none; border:0; padding:0; text-align:center; }
.ext--nu .ext-marque{ justify-content:center; margin-bottom:36px; }
.ext--nu .ext-carte .tete-sous{ margin-bottom:22px; }
.err-code{ font-size:calc(var(--taille-geant) * 2.4); font-weight:var(--graisse-forte); letter-spacing:-.05em; line-height:1;
  color:transparent; background:linear-gradient(180deg, var(--craie-3), color-mix(in oklab, var(--craie-4) 20%, transparent)); -webkit-background-clip:text; background-clip:text; margin-bottom:10px; }
.err-gestes{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.ext--nu .ext-carte .btn--bloc{ width:100%; }
.ext--page{ justify-content:flex-start; align-items:stretch; padding:0; gap:0; }
.ext-barre{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px; height:var(--itin-h); padding:0 18px;
  background:var(--nuit); border-bottom:1px solid var(--trait-2); }
.ext-barre-titre{ margin-right:auto; min-width:0; font-size:var(--taille-petit); color:var(--craie-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ext-barre-titre b{ font-family:var(--f-titre); font-size:var(--taille-lecture); font-weight:var(--graisse-forte); color:var(--craie); margin-right:6px; }
.ext-corps{ width:100%; max-width:1100px; margin:0 auto; padding:16px 18px 28px; flex:1; }
.ext-formulaire{ display:grid; gap:12px; max-width:760px; margin:0 auto; } .ext-formulaire h1{ font-family:var(--f-titre); font-size:var(--taille-grand); font-weight:var(--graisse-forte); }
.ext-formulaire > p{ font-size:var(--taille-petit); color:var(--craie-3); } .ext-formulaire form{ display:grid; gap:12px; } .ext-formulaire form > .btn{ justify-self:start; }
.ext--page .ext-pied{ padding:14px; border-top:1px solid var(--trait-2); }
@media (max-width:900px){ .ext-corps{ padding:12px; } .ext-barre{ padding:0 10px; } }

/* ── Compléments de la boîte : repli, attente, vignette, glisser-déposer ── */
.plie{ border-top:1px solid var(--trait-2); }
.plie:first-child{ border-top:0; }
.plie > summary{ display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:var(--taille-petit); font-weight:var(--graisse-forte); cursor:pointer; list-style:none;
  transition:background var(--t); }
.plie > summary::-webkit-details-marker{ display:none; }
.plie > summary::before{ content:''; width:6px; height:6px; border-right:1.5px solid var(--craie-3); border-bottom:1.5px solid var(--craie-3);
  transform:rotate(-45deg); transition:transform var(--t); flex:none; }
.plie[open] > summary::before{ transform:rotate(45deg); }
.plie > summary:hover{ background:var(--quai-2); }
.plie > summary .fin{ margin-left:auto; font-weight:var(--graisse-normale); color:var(--craie-3); font-size:var(--taille-legende); }
.plie-corps{ padding:4px 12px 12px; }
.tourne{ display:inline-block; width:14px; height:14px; border:2px solid var(--trait-3); border-top-color:var(--craie); border-radius:50%;
  animation:tourne .7s linear infinite; flex:none; vertical-align:-2px; }
.tourne--grand{ width:28px; height:28px; border-width:3px; }
@keyframes tourne{ to{ transform:rotate(360deg); } }
.attente{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 16px; color:var(--craie-3); font-size:var(--taille-petit); text-align:center; }
.vignette{ display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:var(--quai-3); border-radius:var(--r-2); }
.vignette--carree{ aspect-ratio:1; } .vignette--portrait{ aspect-ratio:9 / 16; }
.depot{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 16px; border:1px dashed var(--trait-3); border-radius:var(--r-3);
  color:var(--craie-3); font-size:var(--taille-petit); text-align:center; cursor:pointer; transition:border-color var(--t), background var(--t); }
.depot:hover,.depot.is-dessus{ border-color:var(--craie-3); background:var(--quai-2); color:var(--craie); }
.depot .ico{ width:20px; height:20px; }
.touche{ font-family:var(--f-mono); font-size:var(--taille-micro); padding:1px 5px; border:1px solid var(--trait); border-radius:var(--r-1); color:var(--craie-2); }
.puces{ display:flex; flex-wrap:wrap; gap:5px; }
.puce{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px; border:1px solid var(--trait); border-radius:var(--r-3);
  font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); color:var(--craie-2); background:var(--quai-2); transition:background var(--t), border-color var(--t), color var(--t); }
a.puce:hover,button.puce:hover{ border-color:var(--trait-3); color:var(--craie); }
.puce[aria-pressed="true"]{ background:var(--quai-3); border-color:var(--trait-3); color:var(--craie); font-weight:var(--graisse-forte); }
.puce .n{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); }
.puce .lg{ margin-left:-3px; }
.seg a{ height:22px; padding:0 9px; border-radius:var(--r-1); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); color:var(--craie-3); display:inline-flex; align-items:center; gap:5px;
  transition:background var(--t), color var(--t); }
.seg a:hover{ color:var(--craie); }
.seg a[aria-pressed="true"],.seg a[aria-current="page"]{ background:var(--quai-3); color:var(--craie); font-weight:var(--graisse-forte); }
.seg .n{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); }
.stat{ padding:10px 14px 11px; }
.stat .k{ display:block; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); margin-bottom:2px; }
.stat .v{ font-family:var(--f-mono); font-size:var(--taille-grand); font-weight:var(--graisse-moyenne); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.stat .n{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }

/* ══════════════════════════════════════════════════════════════════════
   UTILISATEURS ET DROITS — Réglages › Utilisateurs et droits
   Maquette : mockups/hub_v3_droits.html. Tout est préfixé « dr- ».
   ══════════════════════════════════════════════════════════════════════ */
.dr{ display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr); gap:12px; align-items:start; }
.dr > *{ min-width:0; }
/* La liste des personnes */
.dr-gens h4{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); padding:10px 12px 4px; }
.dr-gens a{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 12px;
  border-bottom:1px solid var(--trait-2); cursor:pointer; transition:background var(--t); }
.dr-gens li:last-child a{ border-bottom:0; }
.dr-gens a:hover{ background:var(--quai-2); }
.dr-gens a.is-choisi{ background:var(--quai-3); box-shadow:inset 2px 0 0 var(--esp); }
.dr-gens a.is-inactif b{ color:var(--craie-3); }
.dr-gens b{ display:block; font-size:var(--taille-petit); font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dr-gens .s{ display:block; font-size:var(--taille-legende); color:var(--craie-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dr-gens .avatar{ width:28px; height:28px; }
.dr-gens .tag{ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* La fiche : qui, son profil */
.dr-fiche{ transition:opacity var(--t); }
.dr-fiche[aria-busy="true"]{ opacity:.6; pointer-events:none; }
.dr-qui{ display:flex; align-items:center; gap:12px; padding:12px; border-bottom:1px solid var(--trait-2); flex-wrap:wrap; }
.dr-qui > div{ min-width:0; }
.dr-qui h2{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); line-height:1.1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dr-qui p{ font-size:var(--taille-legende); color:var(--craie-3); margin-top:3px; }
.dr-qui .fin{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.dr-fonction{ font-weight:var(--graisse-forte); color:var(--craie-2); }
/* L'invitation d'une personne qui n'a pas encore choisi son mot de passe : l'état, puis ce qu'on peut y faire. */
.dr-inv{ margin:12px 12px 0; align-items:center; flex-wrap:wrap; }
.dr-inv > div:first-child{ flex:1 1 260px; }
.dr-inv > div:first-child > b,.dr-inv > div:first-child > span{ display:block; }
.dr-inv > div:first-child > span{ color:var(--craie-2); margin-top:2px; }
.dr-inv a{ text-decoration:underline; text-underline-offset:3px; }
.avis > .dr-inv-actions{ flex:none; display:flex; gap:6px; flex-wrap:wrap; }
.dr-inv-lien .txt{ width:100%; margin-top:4px; }
.dr-profil{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--trait-2); flex-wrap:wrap; font-size:var(--taille-petit); color:var(--craie-2); }
.dr-profil .sel{ height:26px; padding:0 24px 0 8px; max-width:100%; }
.dr-profil .ecarts{ color:var(--warn); font-weight:var(--graisse-forte); }
.dr-profil .sep{ width:1px; height:16px; background:var(--trait-2); }
/* La grille des droits : un module par ligne, son niveau, son périmètre */
.dr-mx td{ padding:7px 8px; vertical-align:middle; }
.dr-mx thead th{ padding:7px 8px; }
.dr-mx td:first-child,.dr-mx th:first-child{ padding-left:12px; }
.dr-mx .mod{ display:flex; align-items:center; gap:9px; min-width:150px; }
.dr-mx .mod b{ font-weight:var(--graisse-forte); display:block; }
.dr-mx .mod span{ font-size:var(--taille-legende); color:var(--craie-3); display:block; }
.dr-mx tr.aucun .mod b,.dr-mx tr.aucun .mod span{ color:var(--craie-4); }
.dr-mx tr.aucun .lg{ opacity:.35; }
.dr-niv{ display:inline-flex; background:var(--nuit); border:1px solid var(--trait-2); border-radius:var(--r-2); padding:2px; gap:2px; }
.dr-niv button{ height:22px; padding:0 8px; border-radius:var(--r-1); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); color:var(--craie-3); white-space:nowrap;
  transition:background var(--t), color var(--t); }
.dr-niv button:hover{ color:var(--craie); }
.dr-niv button[aria-pressed="true"]{ background:var(--quai-3); color:var(--craie); font-weight:var(--graisse-forte); }
.dr-niv button[aria-pressed="true"][data-n="0"]{ color:var(--craie-3); }
.dr-niv button.modif{ box-shadow:inset 0 -2px 0 var(--warn); }
.dr-niv button:disabled{ opacity:.35; cursor:not-allowed; }
.dr-niv button[aria-pressed="true"]:disabled{ opacity:1; }
.dr-perim{ display:flex; flex-wrap:wrap; gap:4px; }
.dr-perim .puce{ height:22px; font-size:var(--taille-legende); padding:0 7px; max-width:100%; }
.dr-perim .puce i{ font-style:normal; color:var(--craie-4); font-size:var(--taille-micro); letter-spacing:.06em; text-transform:uppercase; }
.dr-perim .puce span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dr-perim .puce:disabled{ cursor:default; }
.dr-temps{ border-style:dashed; }
/* Délégation : une bascule par module, et la phrase qui dit ce qu'elle permet */
.dr-deleg{ height:22px; padding:0 8px 0 6px; border:1px solid var(--trait-2); border-radius:var(--r-2); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); color:var(--craie-3);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap; transition:background var(--t), color var(--t), border-color var(--t); }
.dr-deleg::before{ content:""; width:7px; height:7px; border-radius:50%; border:1.5px solid currentColor; }
.dr-deleg:hover{ color:var(--craie); border-color:var(--trait-3); }
.dr-deleg[aria-pressed="true"]{ color:var(--craie); border-color:var(--signal); background:color-mix(in oklch, var(--signal) 12%, transparent); }
.dr-deleg[aria-pressed="true"]::before{ background:var(--signal); border-color:var(--signal); }
.dr-deleg:disabled{ opacity:.35; pointer-events:none; }
.dr-deleg[aria-pressed="true"]:disabled{ opacity:.7; }
.dr-dit{ padding:10px 12px; border-top:1px solid var(--trait); display:grid; gap:4px; }
.dr-dit b{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); }
.dr-dit p{ font-size:var(--taille-petit); color:var(--craie-2); line-height:1.5; }
.dr-dit p.non{ color:var(--craie-3); }
.dr-interne{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-top:1px solid var(--trait); background:var(--quai-2); flex-wrap:wrap; }
.dr-interne + .dr-interne{ border-top-color:var(--trait-2); }
.dr-interne > div{ flex:1; min-width:200px; }
.dr-interne b{ display:block; font-size:var(--taille-petit); font-weight:var(--graisse-forte); }
.dr-interne > div > span{ font-size:var(--taille-legende); color:var(--craie-3); }
.dr-voit{ display:flex; align-items:center; gap:10px; padding:10px 12px; flex-wrap:wrap; border-top:1px solid var(--trait-2); }
.dr-rail{ display:flex; gap:5px; flex-wrap:wrap; }
.dr-rail .lg{ width:22px; height:22px; font-size:var(--taille-legende); }
/* Organisation : entités et services */
.dr-org li{ display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:12px; align-items:center; padding:8px 12px;
  border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.dr-org li:last-child{ border-bottom:0; }
.dr-org li.fille{ padding-left:34px; position:relative; }
.dr-org li.fille::before{ content:''; position:absolute; left:18px; top:0; bottom:50%; width:9px; border-left:1px solid var(--trait-3);
  border-bottom:1px solid var(--trait-3); border-radius:0 0 0 var(--r-1); }
.dr-org b{ font-weight:var(--graisse-forte); display:block; overflow:hidden; text-overflow:ellipsis; }
.dr-org .s{ font-size:var(--taille-legende); color:var(--craie-3); display:block; }
.dr-org .mono{ white-space:nowrap; }
.dr-org .act{ display:flex; gap:4px; justify-content:flex-end; }
.dr-org .act form{ display:contents; }
/* Dans les fenêtres : cases d'un axe de périmètre, niveaux d'un profil */
.dr-cases{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 12px; }
.dr-cases--1{ grid-template-columns:minmax(0,1fr); max-height:168px; overflow-y:auto; }
.dr-axe + .dr-axe{ margin-top:12px; padding-top:12px; border-top:1px solid var(--trait-2); }
.dr-axe > b{ display:block; font-size:var(--taille-legende); font-weight:var(--graisse-forte); color:var(--craie-2); margin-bottom:4px; }
.dr-axe > b span{ font-weight:var(--graisse-normale); color:var(--craie-3); }
.dr-axe .txt{ width:100%; height:28px; margin-bottom:4px; }
.dr-niveaux{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; align-items:center; }
.dr-niveaux label{ display:flex; align-items:center; gap:8px; font-size:var(--taille-petit); min-width:0; }
.dr-niveaux .sel{ height:26px; padding:0 24px 0 8px; }
@media (max-width:1180px){
  .dr{ grid-template-columns:minmax(0,1fr); }
  .dr-gens{ max-height:236px; overflow-y:auto; }
}
/* Sous 900 px, une ligne de la grille devient un bloc : le module, son niveau, son périmètre. */
@media (max-width:900px){
  .dr-mx thead{ display:none; }
  .dr-mx tbody tr{ display:block; padding:9px 12px; border-bottom:1px solid var(--trait-2); }
  .dr-mx tbody tr:last-child{ border-bottom:0; }
  .dr-mx td,.dr-mx td:first-child{ display:block; padding:0; border:0; }
  .dr-mx td + td{ margin-top:7px; }
  .dr-mx td:empty{ display:none; }
  .dr-niv{ display:flex; }
  .dr-niv button{ flex:1; padding:0 1px; text-align:center; height:28px; min-width:0; font-size:var(--taille-micro); letter-spacing:-.01em; }
  .dr-mx tr.aucun td:nth-child(n+3){ display:none; }
  .dr-deleg{ height:28px; }
  .dr-perim .puce{ height:26px; }
  .dr-qui .fin{ margin-left:0; width:100%; }
  .dr-cases{ grid-template-columns:minmax(0,1fr); }
  .dr-axe .txt{ height:34px; font-size:var(--taille-sous-titre); }
  .dr-org li{ grid-template-columns:minmax(0,1fr) auto auto; }
  .dr-org li .mono{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ÉCHANGES — le courrier (maquette mockups/hub_v3_echanges.html)
   La liste à gauche, le message à droite. Classes préfixées « ech- ».
   ══════════════════════════════════════════════════════════════════════ */
/* Dans le menu de l'espace : le point de couleur d'une boîte. */
.ech-pt{ width:7px; height:7px; border-radius:50%; background:var(--c, var(--craie-4)); flex:none; }
/* Courrier façon Outlook (maquette validée le 20/10/2026) : la barre d'actions, puis dossiers | liste | lecture. */
.ech-actions{ display:flex; align-items:center; gap:2px; flex-wrap:nowrap; margin:-16px -18px 0; padding:4px 12px; border-bottom:1px solid var(--trait-2); }
.ech-actions > .btn--primary{ margin-right:6px; }
.ech-actions .ech-msg-outils{ margin:0; }
.ech-actions .ech-msg-outils{ flex-wrap:nowrap; min-width:0; overflow:hidden; }
/* Les gestes secondaires (tâche, demande, bloquer) en icône seule, nommés au survol. */
.ech-actions .ech-lib{ display:none; }
.ech-dossiers .menu-item .ico{ width:14px; height:14px; flex:none; color:var(--craie-4); }
.ech-dossiers .menu-item[aria-current] .ico{ color:var(--acc); }
.ech-etq-brouillon{ display:inline-block; margin-right:6px; padding:0 6px; border-radius:var(--r-1); background:var(--bad-bg); color:var(--bad); font-size:var(--taille-micro); font-weight:var(--graisse-forte); cursor:pointer; vertical-align:1px; }
.ech-etq-brouillon:hover{ text-decoration:underline; }
.ech-tilen-rep{ color:var(--acc); }
.ech-actions-fin{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.ech-agent-lien{ font-size:var(--taille-legende); margin-right:6px; white-space:nowrap; }
.ech-cou{ display:grid; grid-template-columns:196px minmax(280px,360px) minmax(0,1fr); gap:0; margin:0 -18px -28px; height:calc(100dvh - var(--itin-h) - 39px); min-height:480px; }
/* Comme Outlook : trois colonnes collées, un trait pour séparer, aucune carte. */
.ech-cou > .panel{ border-radius:0; border-width:0 0 0 1px; }
.ech-cou > .ech-dossiers{ padding:6px 4px 0 8px !important; }
.ech-dossiers .menu-item{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ech-cou.sans-dossiers{ grid-template-columns:minmax(280px,380px) minmax(0,1fr); }
.ech-cou.sans-dossiers > .ech-dossiers{ display:none; }
.ech-dossiers.ech-boites-volet{ width:auto; max-height:none; overflow-y:auto; padding:0 4px 0 0; position:static; background:none; border:0; box-shadow:none; }
.ech-dossiers-tete{ font-size:var(--taille-legende); color:var(--craie-4); padding:4px 10px 2px; }
/* La colonne des dossiers rend inutile le sélecteur de dossier de la liste (gardé quand la colonne est masquée). */
.ech-cou:not(.sans-dossiers) .ech-dossier,.ech-cou:not(.sans-dossiers) #menuDossiers{ display:none; }
@media (max-width:1280px){ .ech-cou:not(.sans-dossiers){ grid-template-columns:172px minmax(250px,300px) minmax(0,1fr); } }
@media (max-width:900px){ .ech-cou > .ech-dossiers{ display:none; } .ech-cou:not(.sans-dossiers) .ech-dossier{ display:inline-flex; } [data-ech-dossiers]{ display:none; } }
.ech-cou > *{ min-width:0; min-height:0; display:flex; flex-direction:column; }
.ech-cou .filtres .txt--cherche{ max-width:none; }
/* Sous les filtres : le dossier ouvert, le tri, le filtre — ou les actions groupées. */
.ech-barre{ display:flex; align-items:center; gap:8px; min-height:38px; padding:5px 12px; border-bottom:1px solid var(--trait-2); flex:none; }
.ech-outils{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.ech-compte{ flex:1; min-width:0; font-size:var(--taille-petit); color:var(--craie-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ech-dossier{ display:inline-flex; align-items:center; gap:5px; min-width:0; height:26px; padding:0 6px; border-radius:var(--r-2);
  font-size:var(--taille-petit); font-weight:var(--graisse-forte); color:var(--craie); transition:background var(--t); }
.ech-dossier:hover,.ech-dossier[aria-expanded="true"]{ background:var(--quai-3); }
.ech-dossier span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ech-dossier .ico{ width:12px; height:12px; color:var(--craie-3); flex:none; }
.ech-plis{ flex:1; min-height:0; overflow-y:auto; }
.ech-msg{ display:flex; align-items:stretch; border-bottom:1px solid var(--trait-2); transition:background var(--t); }
.ech-msg:hover{ background:var(--quai-2); }
.ech-msg[aria-current="true"]{ background:var(--quai-3); box-shadow:inset 2px 0 0 var(--esp); }
.ech-msg > .coche{ align-items:flex-start; padding:10px 0 0 12px; min-height:0; }
.ech-msg-corps{ flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:8px 12px; text-align:left; }
.ech-msg > .coche + .ech-msg-corps{ padding-left:9px; }
.ech-l1{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.ech-de{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); color:var(--craie-2); }
.ech-quand{ flex:none; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); }
.ech-obj{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--taille-petit); color:var(--craie-2); }
.ech-debut{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--taille-legende); color:var(--craie-3); min-height:1.45em; }
.ech-etq{ display:flex; gap:4px; margin-top:3px; flex-wrap:wrap; }
.ech-msg .ico{ width:11px; height:11px; margin-right:4px; vertical-align:-1px; color:var(--craie-3); }
.ech-msg .ech-etoile{ color:var(--warn); }
.ech-msg.is-nonlu .ech-de{ font-weight:var(--graisse-forte); color:var(--craie); }
.ech-msg.is-nonlu .ech-obj{ color:var(--craie); }
.ech-msg.is-nonlu .ech-quand{ color:var(--craie-3); }
/* Courrier v2 : deux lignes serrées (qui · étiquettes · quand / objet — début), rangées par ce que le fil attend. */
.ech-l2{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--taille-petit); color:var(--craie-2); }
.ech-l2 .ech-debut{ display:inline; font-size:var(--taille-legende); color:var(--craie-3); min-height:0; }
.ech-msg.is-nonlu .ech-l2{ color:var(--craie); }
.ech-l1 .ech-etq{ margin-top:0; flex:none; flex-wrap:nowrap; }
.ech-pris{ display:inline-flex; align-items:center; gap:4px; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; }
.ech-pris.moi{ color:var(--esp); }
.ech-sec > h6{ display:flex; gap:8px; align-items:center; margin:0; padding:9px 12px 5px; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em;
  text-transform:uppercase; color:var(--craie-4); border-bottom:1px solid var(--trait-2); position:sticky; top:0; background:var(--quai); z-index:1; }
.ech-sec > h6 span{ font-family:var(--f-mono); letter-spacing:0; }
.ech-sec:empty, .ech-sec[data-n="0"]{ display:none; }
/* Le fil, dans le volet : qui l'a pris, les gestes, les notes internes (jamais vues du correspondant). */
.ech-fil{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 14px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); color:var(--craie-3); }
.ech-fil b{ color:var(--craie-2); font-weight:var(--graisse-forte); } .ech-fil .pousse{ margin-left:auto; }
.ech-fil select{ max-width:180px; }
.ech-notes{ margin:0 14px 12px; display:grid; gap:6px; }
.ech-note{ padding:7px 10px; border-left:3px solid var(--l-echanges); background:var(--quai-2); border-radius:0 var(--r-2) var(--r-2) 0; font-size:var(--taille-petit); white-space:pre-wrap; }
.ech-note small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); margin-bottom:2px; white-space:normal; }
.ech-note-ajout{ display:flex; gap:6px; } .ech-note-ajout .txt{ flex:1; }
/* Le message */
.ech-rien{ flex:1; display:grid; place-content:center; justify-items:center; gap:6px; padding:24px; text-align:center; color:var(--craie-3); font-size:var(--taille-petit); }
.ech-rien .ico{ width:22px; height:22px; color:var(--craie-4); }
.ech-ouvert{ flex:1; min-height:0; display:flex; flex-direction:column; }
.ech-pli{ flex:1; min-height:0; overflow-y:auto; }
.ech-pli-hd{ position:relative;  padding:12px 14px; border-bottom:1px solid var(--trait-2); }
.ech-apercu-pj{ position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; padding:24px 6vw; gap:10px; background:color-mix(in oklab, var(--nuit) 86%, transparent); backdrop-filter:blur(4px); }
.ech-apercu-tete{ display:flex; align-items:center; gap:12px; color:var(--craie); }
.ech-apercu-tete b{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--graisse-moyenne); }
.ech-apercu-vue{ flex:1; min-height:0; width:100%; border:0; border-radius:var(--r-2); background:var(--craie); object-fit:contain; }
img.ech-apercu-vue{ flex:none; align-self:center; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 110px); margin:auto 0; background:transparent; }
.ech-gestes-lecture .btn:focus:not(:focus-visible),.ech-plier:focus:not(:focus-visible){ outline:none; box-shadow:none; }
.ech-gestes-lecture{ position:absolute; top:8px; right:8px; display:flex; gap:2px; }
.ech-pjs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ech-pj{ display:flex; align-items:center; gap:10px; min-width:0; max-width:260px; padding:6px 10px 6px 6px; border:1px solid var(--trait-2); border-radius:var(--r-2); color:inherit; }
a.ech-pj:hover{ border-color:var(--acc); background:var(--quai-2); }
.ech-pj.is-refus{ opacity:.6; }
.ech-pj-ext{ flex:none; width:34px; height:34px; border-radius:var(--r-1); display:grid; place-items:center; background:var(--acc-fond); color:var(--acc); font-size:var(--taille-micro); font-weight:var(--graisse-forte); }
.ech-pj-t{ min-width:0; display:flex; flex-direction:column; }
.ech-pj-t b{ font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ech-pj-t small{ font-size:var(--taille-legende); color:var(--craie-4); }
/* La touche Tilen de la lecture : la pastille de l'expéditeur, à la Outlook. */
.ech-qui{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.ech-av{ width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--acc-fond); color:var(--acc); font-size:var(--taille-petit); font-weight:var(--graisse-forte); }
.ech-av:empty{ display:none; }
.ech-qui .ech-meta b{ color:var(--acc); }
.ech-fond[aria-pressed="true"]{ color:var(--acc); }
.ech-pli-hd h2{ padding-right:132px; font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); line-height:1.15; overflow-wrap:anywhere; }
.ech-meta{ font-size:var(--taille-petit); color:var(--craie-3); margin-top:4px; overflow-wrap:anywhere; }
.ech-meta b{ color:var(--craie-2); font-weight:var(--graisse-forte); }
.ech-meta + .ech-meta{ margin-top:1px; }
.ech-retour{ display:none; margin:-4px 0 8px -6px; }
/* La carte de correspondance : l'objet du Hub dont on parle, ouvrable. */
.ech-corr{ display:flex; align-items:center; gap:9px; margin-top:8px; padding:7px 9px; border:1px solid var(--trait); border-radius:var(--r-2);
  background:var(--quai); font-size:var(--taille-petit); transition:border-color var(--t), background var(--t); }
.ech-corr:hover{ border-color:var(--trait-3); background:var(--quai-2); }
.ech-corr-qui{ flex:1; min-width:0; }
.ech-corr-qui b{ display:block; font-weight:var(--graisse-forte); }
.ech-corr-qui span{ display:block; color:var(--craie-3); font-size:var(--taille-legende); }
.ech-corr .pill{ flex:none; }
.ech-pli-corps{ padding:14px; }
.ech-texte{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--f-texte); font-size:var(--taille-texte); line-height:1.6; color:var(--craie); max-width:76ch; }
/* Un message en HTML s'affiche sur sa propre feuille, isolée de l'écran : toujours claire, comme il a été écrit. */
.ech-feuille{ display:block; width:100%; min-height:120px; border:0; border-radius:0; background:transparent; }
:root[data-theme="light"] .ech-feuille{ background:var(--quai); border:1px solid var(--trait); }
/* La réponse que l'agent propose : un brouillon, donc un cadre en pointillé. */
.ech-brouillon{ margin:0 14px 14px; border:1px dashed var(--trait-3); border-radius:var(--r-3); background:var(--quai-2); }
.ech-brouillon-hd{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px dashed var(--trait); font-size:var(--taille-petit); color:var(--craie-2); flex-wrap:wrap; }
.ech-brouillon-hd b{ font-weight:var(--graisse-forte); color:var(--craie); }
.ech-brouillon-hd .ico{ color:var(--craie-3); flex:none; }
.ech-brouillon-hd .end{ margin-left:auto; display:flex; gap:6px; }
.ech-brouillon p{ padding:10px 12px; font-size:var(--taille-texte); line-height:1.55; color:var(--craie-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.ech-pied{ margin:0 14px 14px; padding:9px 12px; border:1px solid var(--trait-2); border-radius:var(--r-2); font-size:var(--taille-petit); color:var(--craie-2); }
.ech-pied > .lien{ display:inline-block; margin-top:6px; font-size:var(--taille-legende); }
.ech-pied-texte{ margin-top:6px; font-size:var(--taille-petit); color:var(--craie-2); }
.ech-pied-texte b{ color:var(--craie); }
.ech-suggestion{ margin-top:6px; max-height:180px; overflow-y:auto; white-space:pre-wrap; font-size:var(--taille-petit); color:var(--craie); }
.ech-etoile-btn[aria-pressed="true"]{ color:var(--warn); border-color:var(--warn-tr); background:var(--warn-bg); }
/* Réglage d'une boîte : à qui elle est ouverte. */
.ech-cases{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; }
.ech-cases .coche{ min-width:0; }
.ech-cases .coche b{ font-weight:var(--graisse-moyenne); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px){
  /* Un écran à la fois : la liste, puis le message en plein écran (« Retour à la liste » ramène la liste). */
  .ech-cou{ grid-template-columns:minmax(0,1fr); height:auto; min-height:0; }
  .ech-plis{ max-height:calc(100dvh - 300px); min-height:160px; }
  .ech-cou[data-zone="lecture"] .ech-liste{ display:none; }
  .ech-cou[data-zone="liste"] .ech-lecture{ display:none; }
  .ech-pli{ overflow:visible; }
  .ech-retour{ display:inline-flex; }
  .ech-cou .filtres .txt--cherche{ height:30px; font-size:var(--taille-sous-titre); flex-basis:100%; }
  .ech-msg > .coche{ padding:11px 2px 0 12px; }
  .ech-cases{ grid-template-columns:minmax(0,1fr); }
}
.ech-images{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px; padding:7px 10px; border:1px dashed var(--trait); border-radius:var(--r-2); font-size:var(--taille-petit); color:var(--craie-2); }
.ech-images span{ flex:1; min-width:200px; }
/* Boîtes personnelles et rattachées : leur marque dans le menu et les listes. */
.ech-perso{ display:inline-grid; place-items:center; width:16px; height:16px; flex:none; color:var(--craie-3); }
.ech-perso .ico{ width:11px; height:11px; }
.ech-marque{ display:inline-flex; align-items:center; vertical-align:middle; }
.ech-marque--perso{ display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
.ech-marque--perso .ico{ width:10px; height:10px; }
/* Fiche d'une boîte : les trois ouvertures, une seule à la fois, ses réglages dessous. */
.ech-ouv{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.ech-ouv > .coche{ flex-wrap:wrap; }
.ech-ouv > .coche b{ font-weight:var(--graisse-forte); }
.ech-ouv-detail{ margin:0 0 6px 21px; padding:9px 11px; border:1px solid var(--trait-2); border-radius:var(--r-2); background:var(--quai); }
.ech-largeur{ width:190px; }
.ech-plie{ border:1px solid var(--trait-2); border-radius:var(--r-2); }
.ech-apercu{ border:1px solid var(--trait-2); border-radius:var(--r-2); padding:4px; min-height:48px; font-size:var(--taille-petit); color:var(--craie-3); }
.ech-apercu > p{ padding:8px 10px; }
/* L'éditeur du courrier : une barre, et une zone d'écriture claire dans les deux thèmes — un message
   se lit sur fond clair chez son destinataire, et le texte cité garde ses propres couleurs. */
.ech-ed{ border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai); min-width:0; }
.ech-ed:focus-within{ border-color:var(--craie-3); }
.ech-ed-barre{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:4px; border-bottom:1px solid var(--trait-2); }
.ech-ed-choix{ height:28px; border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai); color:var(--craie-2); font-size:var(--taille-petit); padding:0 6px; max-width:110px; }
.ech-ed-choix--taille{ max-width:76px; }
.ech-ed-coul{ position:relative; cursor:pointer; }
.ech-ed-coul input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.ech-ed-coul span{ border-bottom:3px solid var(--warn); line-height:1; padding-bottom:1px; }
.ech-ed-coul:not(.ech-ed-coul--fond) span{ border-bottom-color:var(--acc); font-weight:var(--graisse-forte); }
.ech-ed-coul .ico{ width:13px; height:13px; }
.ech-ed-b--barre{ text-decoration:line-through; }
.ech-ed-al{ display:block; width:12px; height:10px; background:linear-gradient(currentColor 0 0) 0 0/100% 1.5px no-repeat, linear-gradient(currentColor 0 0) var(--x) 50%/60% 1.5px no-repeat, linear-gradient(currentColor 0 0) 0 100%/100% 1.5px no-repeat; }
.ech-ed-al--g{ --x:0; } .ech-ed-al--c{ --x:50%; } .ech-ed-al--d{ --x:100%; }
.ech-ed-b{ display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 6px; border-radius:var(--r-1); font-size:var(--taille-petit); color:var(--craie-2);
  transition:background var(--t), color var(--t); }
.ech-ed-b:hover{ background:var(--quai-3); color:var(--craie); }
.ech-ed-b[aria-pressed="true"]{ background:var(--quai-3); color:var(--craie); box-shadow:inset 0 0 0 1px var(--trait-3); }
.ech-ed-b .ico{ width:13px; height:13px; }
.ech-ed-b--gras{ font-weight:var(--graisse-grasse); }
.ech-ed-b--ital{ font-style:italic; font-family:Georgia, 'Times New Roman', serif; }
.ech-ed-b--soul{ text-decoration:underline; }
.ech-ed-b--num{ font-family:var(--f-mono); font-size:var(--taille-legende); }
.ech-ed-b--texte{ font-size:var(--taille-legende); color:var(--craie-3); }
.ech-ed-sep{ width:1px; height:16px; margin:0 4px; background:var(--trait); }
.ech-ed-zone{ min-height:120px; max-height:70dvh; overflow:auto; padding:12px 14px; border-radius:0 0 var(--r-2) var(--r-2); outline:0;
  background:var(--craie); color:var(--nuit); font-family:system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:var(--taille-lecture); line-height:1.5; overflow-wrap:anywhere; }
:root[data-theme="light"] .ech-ed-zone{ background:var(--quai); color:var(--craie); }
.ech-ed--message .ech-ed-zone{ min-height:320px; }
.ech-ed-zone:empty::before{ content:attr(data-vide); opacity:.5; pointer-events:none; }
.ech-ed-zone a{ color:inherit; text-decoration:underline; }
.ech-ed-zone ul,.ech-ed-zone ol{ margin:4px 0 4px 22px; }
.ech-ed-zone ul{ list-style:disc; } .ech-ed-zone ol{ list-style:decimal; }
.ech-ed-zone img{ max-width:100%; height:auto; }
.ech-ed-zone table{ width:auto; max-width:100%; border-collapse:collapse; }
.ech-ed-zone td,.ech-ed-zone th{ padding:2px 6px; }
.ech-ed-zone blockquote{ margin:0 0 0 6px; padding-left:10px; border-left:2px solid currentColor; }
.ech-ed-zone [data-ech="citation"]{ opacity:.8; }
@media (max-width:900px){
  .ech-ed-zone{ font-size:var(--taille-sous-titre); padding:10px 12px; }
  .ech-ed--message .ech-ed-zone{ min-height:240px; }
  .ech-ed-b{ min-width:32px; height:32px; }
  .ech-ouv-detail{ margin-left:0; }
}


/* ── mk- : Marketing — chartes, production, circuits de validation, idée, accueil, médiathèque (maquette hub_v3_marketing). ── */
/* La couleur d'un produit vient de sa charte : le gabarit la pose en ligne (--pc). Sans charte, un gris. */
.mk-prods{ display:flex; gap:6px; align-items:center; margin-bottom:12px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.mk-prods::-webkit-scrollbar{ display:none; }
.mk-prods > span{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); margin-right:4px; flex:none; }
.mk-prods a{ flex:none; display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 10px 0 8px; border:1px solid var(--trait-2); border-radius:var(--r-4); background:var(--quai); font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); color:var(--craie-2); text-decoration:none; transition:border-color var(--t), background var(--t); }
.mk-prods a:hover{ border-color:var(--trait-3); color:var(--craie); }
.mk-prods a[aria-current="true"]{ background:var(--quai-3); border-color:var(--esp); color:var(--craie); font-weight:var(--graisse-forte); }
.mk-prods a i,.mk-pr i{ width:12px; height:12px; border-radius:var(--r-1); background:var(--pc, var(--trait-3)); border:1px solid var(--trait-3); flex:none; display:block; }
.mk-prods .n{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); }
.mk-pr{ display:inline-flex; align-items:center; gap:5px; font-size:var(--taille-legende); color:var(--craie-2); white-space:nowrap; font-weight:var(--graisse-moyenne); }
.mk-pr i{ width:9px; height:9px; border-radius:var(--r-0); }
.mk-chiffres{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); margin-bottom:12px; }
.mk-chiffres > div{ padding:10px 14px; border-right:1px solid var(--trait-2); min-width:0; }
.mk-chiffres > div:last-child{ border-right:0; }
.mk-chiffres .k{ display:block; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.mk-chiffres .v{ font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); display:block; margin-top:2px; white-space:nowrap; letter-spacing:-.02em; }
.mk-chiffres .v.warn{ color:var(--warn); }
.mk-chiffres .v.txt2{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); letter-spacing:0; }
.mk-chiffres .s{ font-size:var(--taille-legende); color:var(--craie-3); display:block; }
.mk-warn{ color:var(--warn); } .mk-bad{ color:var(--bad); } .mk-ok{ color:var(--ok); } .mk-nw{ white-space:nowrap; }
.mk-nr{ font-family:var(--f-texte); font-size:var(--taille-legende); font-style:italic; color:var(--craie-4); white-space:nowrap; }
.mk-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:12px; align-items:start; }
.mk-2 > *{ min-width:0; }
.mk-vide{ padding:14px 12px; font-size:var(--taille-petit); color:var(--craie-3); }
.mk-pied{ font-size:var(--taille-legende); color:var(--craie-3); }
/* Les chartes. */
.mk-chartes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.mk-ch{ border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); overflow:hidden; display:grid; grid-template-rows:auto 1fr; min-width:0; text-align:left; text-decoration:none; color:inherit; }
.mk-ch:hover{ border-color:var(--trait-3); }
.mk-ch .haut{ background:var(--quai-2); border-bottom:3px solid var(--pc, var(--trait-3)); padding:14px 14px 12px; display:grid; gap:10px; min-height:96px; align-content:space-between; }
.mk-ch .haut b{ font-family:var(--f-titre); font-size:var(--taille-grand); font-weight:var(--graisse-grasse); letter-spacing:-.02em; line-height:1; }
.mk-ch .haut .pal{ display:flex; height:10px; border-radius:var(--r-0); overflow:hidden; box-shadow:0 0 0 1px var(--trait-3); }
.mk-ch .haut .pal i{ flex:1; display:block; }
.mk-ch .haut .pal.vide{ box-shadow:none; border:1px dashed var(--trait-3); }
.mk-ch .bas{ padding:9px 12px 10px; display:grid; gap:5px; font-size:var(--taille-petit); color:var(--craie-2); align-content:start; }
.mk-ch .bas .l{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.mk-ch .bas p{ font-size:var(--taille-legende); color:var(--craie-3); line-height:1.4; }
.mk-nuancier{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; padding:12px; }
.mk-nu{ border:1px solid var(--trait-2); border-radius:var(--r-2); overflow:hidden; background:var(--quai-2); min-width:0; }
.mk-nu i{ display:block; height:46px; border-bottom:1px solid var(--trait-2); }
.mk-nu div{ padding:6px 8px 7px; display:grid; gap:1px; }
.mk-nu b{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-nu code{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-2); }
.mk-nu span{ font-size:var(--taille-micro); color:var(--craie-3); line-height:1.3; }
.mk-typo li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:10px 12px; border-top:1px solid var(--trait-2); align-items:baseline; }
.mk-typo li:first-child{ border-top:0; }
.mk-typo li b{ font-size:var(--taille-sous-titre); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--graisse-grasse); }
.mk-typo li span{ grid-column:1 / -1; font-size:var(--taille-legende); color:var(--craie-3); }
.mk-typo li em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); white-space:nowrap; }
.mk-logos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; }
.mk-logo{ border:1px solid var(--trait-2); border-radius:var(--r-2); min-width:0; padding:8px 10px; display:grid; gap:3px; font-size:var(--taille-petit); background:var(--quai-2); }
.mk-logo b{ font-weight:var(--graisse-forte); overflow-wrap:anywhere; }
.mk-logo span{ font-size:var(--taille-legende); color:var(--craie-3); }
.mk-ton{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.mk-ton > div{ padding:10px 12px; min-width:0; }
.mk-ton > div + div{ border-left:1px solid var(--trait-2); }
.mk-ton h5{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; margin-bottom:6px; }
.mk-ton .oui h5{ color:var(--ok); } .mk-ton .non h5{ color:var(--bad); }
.mk-ton li{ font-size:var(--taille-petit); padding:4px 0; color:var(--craie-2); line-height:1.4; border-top:1px dashed var(--trait-2); }
.mk-ton li:first-child{ border-top:0; }
.mk-ton li code,.mk-code{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-2); }
.mk-ex{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }
.mk-ex figure{ margin:0; display:grid; gap:6px; min-width:0; align-content:start; }
.mk-ex blockquote{ margin:0; padding:14px 12px; border-radius:var(--r-2); background:var(--quai-2); border-left:3px solid var(--ok); font-family:var(--f-titre); font-size:var(--taille-lecture); font-weight:var(--graisse-forte); line-height:1.25; }
.mk-ex .mauvais blockquote{ border-left-color:var(--bad); }
.mk-ex figcaption{ font-size:var(--taille-legende); color:var(--craie-3); line-height:1.4; }
.mk-ex figcaption b{ font-weight:var(--graisse-forte); }
.mk-ex .bon figcaption b{ color:var(--ok); } .mk-ex .mauvais figcaption b{ color:var(--bad); }
.mk-ecarts li{ display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mk-ecarts li:first-child{ border-top:0; }
.mk-ecarts li svg{ width:14px; height:14px; margin-top:2px; color:var(--warn); }
.mk-ecarts li.is-r svg{ color:var(--bad); }
.mk-ecarts li div > span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); line-height:1.4; }
.mk-ecarts li b{ font-weight:var(--graisse-forte); }
.mk-pt{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); }
.mk-pt.p{ background:none; border:1.5px solid var(--warn); }
.mk-pt.n{ background:none; border:1px solid var(--trait-3); opacity:.6; }
.mk-zone{ width:100%; min-height:110px; font-family:var(--f-mono); font-size:var(--taille-petit); line-height:1.5; }
.mk-jetons{ margin:0; padding:10px 12px; font-family:var(--f-mono); font-size:var(--taille-legende); line-height:1.5; color:var(--craie-2); white-space:pre-wrap; overflow-wrap:anywhere; border-top:1px solid var(--trait-2); }
@media (max-width:1180px){ .mk-2{ grid-template-columns:minmax(0,1fr); } .mk-chartes{ grid-template-columns:repeat(2,minmax(0,1fr)); } .mk-chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); } .mk-chiffres > div{ border-bottom:1px solid var(--trait-2); } }
@media (max-width:900px){ .mk-chartes,.mk-ex,.mk-ton,.mk-logos{ grid-template-columns:minmax(0,1fr); } .mk-ton > div + div{ border-left:0; border-top:1px solid var(--trait-2); } }
/* Le tableau de production : huit colonnes, une carte par contenu. */
.mk-tableau{ display:grid; grid-template-columns:repeat(8,minmax(148px,1fr)); gap:8px; overflow-x:auto; padding-bottom:6px; }
.mk-col{ background:var(--quai); border:1px solid var(--trait-2); border-radius:var(--r-3); padding:0 6px 6px; display:grid; gap:6px; align-content:start; min-width:0; grid-template-columns:minmax(0,1fr); min-height:120px; transition:border-color var(--t), background var(--t); }
.mk-col.is-cible{ border-color:var(--esp); background:color-mix(in oklch, var(--esp) 7%, var(--quai)); }
.mk-col.is-refus{ border-color:var(--bad); }
.mk-col header{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 6px; align-items:baseline; padding:9px 10px 7px; border-bottom:1px solid var(--trait-2); margin:0 -6px 2px; }
.mk-col header b{ font-family:var(--f-titre); font-size:var(--taille-lecture); font-weight:var(--graisse-forte); white-space:nowrap; }
.mk-col header .n{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); }
.mk-col header em{ font-style:normal; grid-column:1 / -1; font-size:var(--taille-micro); color:var(--craie-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-carte{ background:var(--quai-2); border:1px solid var(--trait-2); border-top:3px solid var(--pc, var(--trait-3)); border-radius:var(--r-2); display:grid; min-width:0; grid-template-columns:minmax(0,1fr); text-align:left; }
.mk-carte[draggable="true"]{ cursor:grab; }
.mk-carte:hover{ border-color:var(--trait-3); border-top-color:var(--pc, var(--trait-3)); }
.mk-carte.is-pris{ opacity:.45; }
.mk-carte.is-bloque{ border-left:3px solid var(--bad); }
.mk-carte .cc{ padding:7px 8px 8px; display:grid; gap:5px; min-width:0; }
.mk-carte .cc > a{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); line-height:1.25; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; color:var(--craie); text-decoration:none; }
.mk-carte .cc > a:hover{ text-decoration:underline; }
.mk-carte .l2{ display:flex; gap:5px 8px; align-items:center; flex-wrap:wrap; min-width:0; }
.mk-carte .l2 .tag{ flex:none; }
.mk-carte .l3{ display:flex; gap:6px; align-items:center; font-size:var(--taille-legende); color:var(--craie-3); min-width:0; }
.mk-carte .l3 > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.mk-carte .l3 em{ font-style:normal; margin-left:auto; white-space:nowrap; font-family:var(--f-mono); font-size:var(--taille-micro); }
.mk-carte .blo{ font-size:var(--taille-legende); color:var(--bad); display:flex; gap:5px; align-items:flex-start; line-height:1.3; }
.mk-carte .blo svg{ width:11px; height:11px; flex:none; margin-top:2px; }
.mk-carte .sel{ height:24px; font-size:var(--taille-legende); width:100%; }
.mk-mot{ margin:0 0 10px; padding:8px 12px; border:1px solid var(--bad-tr); background:var(--bad-bg); border-radius:var(--r-2); font-size:var(--taille-petit); }
.mk-mot[hidden]{ display:none; }
.mk-mot b{ color:var(--bad); font-weight:var(--graisse-forte); }
/* Le calendrier. */
.mk-cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3); overflow:hidden; background:var(--quai); }
.mk-cal > div{ border-right:1px solid var(--trait-2); border-bottom:1px solid var(--trait-2); min-height:132px; padding:6px; display:grid; gap:5px; align-content:start; min-width:0; }
.mk-cal > div:nth-child(7n){ border-right:0; }
.mk-cal > div:nth-last-child(-n+7){ border-bottom:0; }
.mk-cal .j{ display:flex; gap:6px; align-items:baseline; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.mk-cal .j b{ font-family:var(--f-mono); font-size:var(--taille-texte); color:var(--craie-2); letter-spacing:-.02em; font-weight:var(--graisse-moyenne); }
.mk-cal .auj{ background:color-mix(in oklch, var(--signal) 6%, transparent); }
.mk-cal .auj .j b{ color:var(--signal); }
.mk-cal .we{ background:var(--nuit); }
.mk-ev{ display:grid; gap:1px; padding:4px 6px; border:1px solid var(--trait-2); border-left:3px solid var(--pc, var(--trait-3)); border-radius:var(--r-1); background:var(--quai-2); font-size:var(--taille-legende); min-width:0; text-decoration:none; color:inherit; }
.mk-ev b{ font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-ev span{ color:var(--craie-3); font-size:var(--taille-micro); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-ev.is-main{ border-style:dashed; border-left-style:solid; }
/* Un contenu. */
.mk-etapes{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; padding:10px 12px; }
.mk-etapes div{ display:grid; gap:4px; font-size:var(--taille-micro); color:var(--craie-3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-etapes div::before{ content:''; height:4px; border-radius:var(--r-0); background:var(--trait); }
.mk-etapes div.f::before{ background:var(--ok); }
.mk-etapes div.ici::before{ background:var(--signal); }
.mk-etapes div.ici{ color:var(--craie); font-weight:var(--graisse-forte); }
.mk-brief{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; padding:12px; }
.mk-brief .champ textarea{ min-height:84px; }
.mk-decl{ display:grid; gap:10px; padding:12px; }
.mk-decl .champ textarea{ min-height:70px; }
.mk-chk li{ display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:8px; padding:7px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; }
.mk-chk li:first-child{ border-top:0; }
.mk-chk li div > span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); line-height:1.35; }
.mk-chk li form{ display:flex; gap:6px; flex-wrap:wrap; grid-column:2 / -1; margin-top:4px; }
.mk-oui{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--ok-bg); border:1px solid var(--ok-tr); color:var(--ok); margin-top:1px; font-family:var(--f-mono); font-size:var(--taille-micro); font-style:normal; }
.mk-oui svg{ width:9px; height:9px; }
.mk-oui.w{ background:var(--warn-bg); border-color:var(--warn-tr); color:var(--warn); }
.mk-oui.a{ background:var(--quai-3); border-color:var(--trait); color:var(--craie-3); }
.mk-srv{ border-left:3px solid var(--bad); }
.mk-srv.ok{ border-left-color:var(--ok); }
.mk-srv li{ display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:8px; padding:9px 12px 9px 10px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; }
.mk-srv li:first-child{ border-top:0; }
.mk-srv li > svg{ width:14px; height:14px; margin-top:2px; color:var(--bad); }
.mk-srv li.ok > svg{ color:var(--ok); }
.mk-srv li b{ font-weight:var(--graisse-forte); }
.mk-srv li div > span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); line-height:1.4; }
.mk-parce{ margin:12px; padding:10px 12px; border:1px solid color-mix(in oklch, var(--signal) 45%, var(--trait)); border-radius:var(--r-2); background:color-mix(in oklch, var(--signal) 8%, transparent); display:grid; gap:5px; font-size:var(--taille-petit); }
.mk-parce b{ font-weight:var(--graisse-forte); }
.mk-parce ul{ padding-left:16px; display:grid; gap:2px; font-size:var(--taille-petit); color:var(--craie-2); }
@media (max-width:900px){ .mk-brief{ grid-template-columns:minmax(0,1fr); } .mk-cal{ grid-template-columns:minmax(0,1fr); } .mk-cal > div{ min-height:0; border-right:0; } .mk-cal > div:nth-last-child(-n+7){ border-bottom:1px solid var(--trait-2); } .mk-tableau{ grid-template-columns:repeat(8,minmax(200px,1fr)); } }
/* Une idée. */
.mk-sep{ display:flex; align-items:center; gap:8px; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); margin:4px 0 2px; }
.mk-sep::after{ content:''; flex:1; height:1px; background:var(--trait-2); }
.mk-choix{ display:flex; gap:6px; flex-wrap:wrap; }
.mk-choix label{ display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:0 10px; border:1px solid var(--trait-2); border-radius:var(--r-4); background:var(--quai); font-size:var(--taille-petit); font-weight:var(--graisse-moyenne); color:var(--craie-2); cursor:pointer; }
.mk-choix label i{ width:11px; height:11px; border-radius:var(--r-1); background:var(--pc, var(--trait-3)); border:1px solid var(--trait-3); display:block; flex:none; }
.mk-choix label:has(input:checked){ background:var(--quai-3); border-color:var(--esp); color:var(--craie); font-weight:var(--graisse-forte); }
.mk-choix input{ margin:0; }
.mk-phrase{ min-height:84px; font-size:var(--taille-lecture); line-height:1.45; }
.mk-reel li{ display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mk-reel li:first-child{ border-top:0; }
.mk-reel li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); line-height:1.4; }
.mk-reel li b{ font-weight:var(--graisse-forte); }
.mk-reel li > i{ margin-top:4px; }
.mk-devient{ list-style:none; }
.mk-devient li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:2px 10px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mk-devient li:first-child{ border-top:0; }
.mk-devient li > i{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); background:var(--quai-3); border:1px solid var(--trait); color:var(--craie-2); }
.mk-devient li.ici > i{ background:var(--signal); color:var(--on-signal); border-color:var(--signal); }
.mk-devient li b{ font-weight:var(--graisse-forte); }
.mk-devient li span{ grid-column:2; font-size:var(--taille-legende); color:var(--craie-3); line-height:1.4; }
/* Listes de contenus (accueil, idées en attente, médiathèque). */
.mk-lv li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:8px 12px; border-top:1px solid var(--trait-2); border-left:3px solid var(--pc, transparent); font-size:var(--taille-petit); align-items:center; }
.mk-lv li:first-child{ border-top:0; }
.mk-lv li:hover{ background:var(--quai-2); }
.mk-lv li div > a{ font-weight:var(--graisse-forte); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--craie); text-decoration:none; }
.mk-lv li div > a:hover{ text-decoration:underline; }
.mk-lv li div > span{ display:flex; gap:4px 8px; align-items:center; font-size:var(--taille-legende); color:var(--craie-3); flex-wrap:wrap; }
.mk-lv li > em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; text-align:right; }
.mk-lv li > em b{ display:block; font-family:var(--f-mono); font-weight:var(--graisse-moyenne); color:var(--craie); font-size:var(--taille-petit); letter-spacing:-.02em; }
/* Les circuits de validation. */
.mk-regles td{ vertical-align:top; }
.mk-regles td small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); line-height:1.35; }
.mk-regles td b{ font-weight:var(--graisse-forte); }
.mk-regles tr.is-ex td:first-child{ box-shadow:inset 3px 0 0 var(--signal); }
.mk-at li{ display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mk-at li:first-child{ border-top:0; }
.mk-at li > i{ width:8px; height:8px; border-radius:50%; background:var(--warn); }
.mk-at li > i.r{ background:var(--bad); }
.mk-at li a{ font-weight:var(--graisse-forte); color:var(--craie); text-decoration:none; }
.mk-at li a:hover{ text-decoration:underline; }
.mk-at li div > span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); line-height:1.4; }
.mk-at li em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; }
/* La médiathèque : une vue sur l'armoire Marketing de Partage. */
.mk-medias{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.mk-med{ border:1px solid var(--trait-2); border-top:3px solid var(--pc, var(--trait-3)); border-radius:var(--r-2); background:var(--quai); overflow:hidden; min-width:0; display:grid; grid-template-rows:auto 1fr; }
.mk-med .z{ height:132px; background:var(--nuit); display:grid; place-items:center; overflow:hidden; color:var(--craie-3); font-family:var(--f-mono); font-size:var(--taille-petit); text-transform:uppercase; text-decoration:none; }
.mk-med .z img{ width:100%; height:100%; object-fit:cover; display:block; }
.mk-med .d{ padding:8px 10px 10px; display:grid; gap:6px; align-content:start; min-width:0; font-size:var(--taille-petit); }
.mk-med .d > a{ font-weight:var(--graisse-forte); color:var(--craie); text-decoration:none; overflow-wrap:anywhere; }
.mk-med .d > a:hover{ text-decoration:underline; }
.mk-med .u{ font-size:var(--taille-legende); color:var(--craie-3); line-height:1.4; }
.mk-med details summary{ cursor:pointer; font-size:var(--taille-legende); color:var(--craie-2); }
.mk-med details form{ display:grid; gap:6px; margin-top:6px; }
.mk-joints li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mk-joints li:first-child{ border-top:0; }
.mk-joints li div > span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.mk-gen{ list-style:none; margin:0; padding:0; }
.mk-gen li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mk-gen li:first-child{ border-top:0; }
.mk-gen li div > span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.mk-gen li[data-statut="refusee"] div > span, .mk-gen li[data-statut="echouee"] div > span{ color:var(--bad); }
.mk-gen-reglages, .mk-gen-source, .mk-gen-consigne{ grid-column:1 / -1; }
.mk-gen-reglages{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; }
.mk-gen-reglages[hidden], .mk-gen-source[hidden], .mk-gen-consigne[hidden]{ display:none; }
.mk-gen-reglages .mk-pied{ grid-column:1 / -1; margin:0; }
.mk-comptes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; margin-bottom:12px; align-items:start; }
.mk-fiche{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; margin:0; padding:10px 12px; font-size:var(--taille-petit); }
.mk-fiche dt{ color:var(--craie-3); font-size:var(--taille-legende); }
.mk-fiche dd{ margin:0; }
.mk-coches{ display:flex; flex-wrap:wrap; gap:6px 12px; }
.mk-sous{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.mk-env{ list-style:none; margin:0; padding:0; }
.mk-env li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mk-env li:first-child{ border-top:0; }
.mk-env li div > span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.mk-env li[data-etat="echec"] div > span{ color:var(--bad); }
.mk-env-fait{ display:flex; gap:6px; align-items:center; }
.mk-env-fait .txt{ width:180px; }
.mk-lecons{ list-style:none; margin:0; padding:0; }
.mk-lecons li{ padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mk-lecons li:first-child{ border-top:0; }
.mk-lecons li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
@media (max-width:640px){ .mk-env li{ grid-template-columns:1fr; } .mk-env-fait .txt{ flex:1; width:auto; } }
.mk-manque{ color:var(--craie-3); font-style:italic; font-family:inherit; }
.mk-groupe{ border:0; padding:0; margin:0; min-width:0; }
.mk-lignes .mk-titre{ min-width:260px; }
.mk-env-fait .mk-large{ flex:1; width:auto; min-width:0; }
.mk-note{ text-align:left; }
.mk-chaine{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:1px; background:var(--trait-2); }
.mk-chaine > div{ display:grid; gap:2px; padding:12px; background:var(--quai); }
.mk-chaine span{ font-size:var(--taille-legende); color:var(--craie-3); }
.mk-chaine b{ font-family:var(--f-mono); font-size:var(--taille-sous-titre); font-weight:var(--graisse-moyenne); letter-spacing:-.03em; }
.mk-chaine em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); }
.mk-code{ font-family:var(--f-mono); font-size:var(--taille-legende); word-break:break-all; }
.mk-lignes td{ vertical-align:top; }
.mk-lignes .txt{ width:100%; min-width:160px; }
.mk-asavoir b{ color:var(--warn); }
.mk-gen-usd{ font-family:var(--f-mono); font-size:var(--taille-petit); }
.mk-gen-tot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); color:var(--craie-2); }
.mk-gen-form{ display:grid; gap:10px; border-top:1px solid var(--trait-2); }
.mk-gen-form .panel-ft{ margin:0 -12px -12px; }
.mk-gen-estimation{ display:grid; gap:4px; padding:8px 10px; border:1px solid var(--trait-2); border-radius:var(--r-2); font-size:var(--taille-petit); }
.mk-gen-estimation p{ margin:0; }
.mk-gen-prix{ font-weight:var(--graisse-forte); font-family:var(--f-mono); }
.mk-gen-plafonds{ list-style:none; margin:0; padding:0; display:grid; gap:2px; font-size:var(--taille-legende); color:var(--craie-2); }
.mk-gen-refaire{ font-size:var(--taille-petit); color:var(--craie-2); }
.mk-gen-barres{ list-style:none; margin:0; padding:0; }
.mk-gen-barres li{ display:grid; grid-template-columns:minmax(90px,140px) minmax(80px,1fr) auto auto auto; gap:8px; align-items:center; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.mk-gen-barres li:first-child{ border-top:0; }
.mk-gen-barres .sub{ font-size:var(--taille-legende); color:var(--craie-3); }
.mk-gen-plafond{ width:72px; text-align:right; }
@media (max-width:640px){ .mk-gen-barres li{ grid-template-columns:1fr auto; } .mk-gen-barres .jauge{ grid-column:1 / -1; } }
/* ── fin mk- ── */


/* ── ia- : Réglages › Agent — « Qui a le droit » et « Consommation » (maquette hub_v3_agent, vues droits et conso). ── */
.ia-somme{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); margin-bottom:12px; }
.ia-somme > div{ padding:10px 14px; border-right:1px solid var(--trait-2); min-width:0; } .ia-somme > div:last-child{ border-right:0; background:var(--quai-2); border-radius:0 var(--r-3) var(--r-3) 0; }
.ia-somme .k{ display:block; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.ia-somme .v{ display:block; font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); white-space:nowrap; letter-spacing:-.02em; word-spacing:-.3em; margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
.ia-somme .v.nr{ font-family:var(--f-texte); font-size:var(--taille-lecture); color:var(--craie-3); letter-spacing:0; word-spacing:normal; line-height:26px; }
.ia-somme .s{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.ia-nr{ color:var(--craie-3); font-family:var(--f-texte); letter-spacing:0; word-spacing:normal; }
.ia-bars li{ display:grid; grid-template-columns:minmax(0,132px) minmax(0,1fr) minmax(70px,auto); gap:10px; align-items:center; padding:7px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .ia-bars li:first-child{ border-top:0; }
.ia-bars li > span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ia-bars li > span:first-child small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); white-space:normal; line-height:1.3; }
.ia-bars .b{ display:block; height:6px; border-radius:var(--r-1); background:var(--quai-3); overflow:hidden; } .ia-bars .b i{ display:block; height:100%; border-radius:var(--r-1); background:var(--info); } .ia-bars .b i.w{ background:var(--warn); } .ia-bars .b i.x{ background:var(--bad); }
.ia-bars em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-petit); text-align:right; white-space:nowrap; word-spacing:-.3em; letter-spacing:-.02em; } .ia-bars em small{ font-family:var(--f-texte); font-size:var(--taille-legende); color:var(--craie-3); word-spacing:normal; letter-spacing:0; margin-left:4px; }
.ia-jours{ display:flex; gap:6px; padding:14px 12px 10px; align-items:stretch; height:168px; overflow-x:auto; } .ia-jours > div{ flex:1 1 0; display:grid; grid-template-rows:auto 1fr auto; gap:4px; min-width:22px; text-align:center; }
.ia-jours em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-legende); letter-spacing:-.02em; word-spacing:-.3em; white-space:nowrap; } .ia-jours.is-dense em{ visibility:hidden; } .ia-jours.is-dense > div:hover em,.ia-jours.is-dense .auj em{ visibility:visible; }
.ia-jours .c{ display:flex; align-items:flex-end; justify-content:center; } .ia-jours .c i{ display:block; width:min(44px,70%); border-radius:var(--r-1) var(--r-1) 0 0; background:var(--info); min-height:2px; } .ia-jours .c i.z{ background:var(--trait); }
.ia-jours span{ font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; } .ia-jours .auj span{ color:var(--craie); font-weight:var(--graisse-forte); }
.ia-arret{ margin:12px; padding:10px 12px; border:1px solid var(--bad-tr); border-radius:var(--r-2); background:var(--bad-bg); display:grid; gap:4px; font-size:var(--taille-petit); } .ia-arret b{ font-weight:var(--graisse-forte); color:var(--bad); } .ia-arret span{ color:var(--craie-2); font-size:var(--taille-petit); }
.ia-pas{ padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); color:var(--craie-2); display:grid; gap:5px; } .ia-pas--tete{ border-top:0; padding-top:0; }
.ia-pas li{ padding-left:12px; position:relative; } .ia-pas li::before{ content:''; position:absolute; left:0; top:8px; width:5px; height:1px; background:var(--craie-3); } .ia-pas li.sur-titre{ padding-left:0; } .ia-pas li.sur-titre::before{ display:none; }
.ia-retenu li{ display:grid; gap:2px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .ia-retenu li:first-child{ border-top:0; } .ia-retenu li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.ia-cj td small,.ia-jr small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .ia-cj td{ vertical-align:top; } .ia-cj .num{ white-space:nowrap; }
.ia-jr .nom b{ display:block; font-weight:var(--graisse-forte); } .ia-jr .nom span{ font-size:var(--taille-legende); color:var(--craie-3); } .ia-jr td{ vertical-align:top; } .ia-nw{ white-space:nowrap; }
.ia-regle{ padding:12px; border-top:1px solid var(--trait-2); display:grid; gap:10px; } .ia-regle .rang{ justify-content:flex-end; }
.ia-filtres{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .ia-filtres .sel{ height:26px; max-width:170px; }
.ia-niv{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:var(--r-3); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); border:1px solid var(--trait); background:var(--quai-2); color:var(--craie-2); white-space:nowrap; font-style:normal; }
.ia-niv.u{ background:var(--ok-bg); border-color:var(--ok-tr); color:var(--ok); } .ia-niv.v{ background:var(--info-bg); border-color:var(--info-tr); color:var(--info); } .ia-niv.r{ background:var(--warn-bg); border-color:var(--warn-tr); color:var(--warn); }
.ia-niv.n{ background:none; border-style:dashed; color:var(--craie-4); font-weight:var(--graisse-normale); }
.ia-mx th,.ia-mx td{ text-align:center; vertical-align:middle; padding-left:5px; padding-right:5px; } .ia-mx th:first-child,.ia-mx td:first-child{ text-align:left; min-width:128px; padding-left:12px; } .ia-mx thead th{ white-space:normal; line-height:1.25; vertical-align:bottom; min-width:64px; }
.ia-mx td small,.ia-ex td small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .ia-mx td b,.ia-ex td b{ font-weight:var(--graisse-forte); } .ia-ex td{ vertical-align:top; } .ia-ex td form{ margin:0; }
.ia-mx td form{ margin:0; display:inline-block; } .ia-mx .sel{ height:24px; width:78px; min-width:0; font-size:var(--taille-legende); padding:0 18px 0 6px; background-position:right 4px center; }
.ia-leg{ display:flex; gap:6px 12px; flex-wrap:wrap; align-items:center; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-legende); color:var(--craie-3); } .ia-leg > span{ display:inline-flex; gap:5px; align-items:center; white-space:nowrap; }
.ia-pq li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:2px 9px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; } .ia-pq li:first-child{ border-top:0; }
.ia-pq li > i{ width:16px; height:16px; border-radius:50%; display:grid; place-items:center; margin-top:1px; background:var(--ok-bg); border:1px solid var(--ok-tr); color:var(--ok); font-style:normal; } .ia-pq li > i svg{ width:9px; height:9px; }
.ia-pq li.non > i{ background:var(--quai-3); border-color:var(--trait); color:var(--craie-3); font-size:var(--taille-micro); } .ia-pq li b{ font-weight:var(--graisse-forte); } .ia-pq li.non b{ color:var(--craie-2); } .ia-pq li p{ grid-column:2; font-size:var(--taille-legende); color:var(--craie-3); line-height:1.4; } .ia-pq li p em{ font-style:normal; color:var(--craie-2); }
@media (max-width:900px){
  .ia-plus{ display:none; }
  .ia-somme{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ia-somme > div{ border-bottom:1px solid var(--trait-2); } .ia-somme > div:nth-child(2n){ border-right:0; } .ia-somme > div:nth-child(n+3){ border-bottom:0; } .ia-somme > div:last-child{ border-radius:0 0 var(--r-3) 0; } .ia-somme .v{ font-size:var(--taille-sous-titre); }
  .ia-bars li{ grid-template-columns:minmax(0,1fr) auto; } .ia-bars .b{ grid-column:1 / -1; grid-row:2; }
  .ia-jr thead{ display:none; } .ia-jr,.ia-jr tbody{ display:block; }
  .ia-jr tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:10px 12px; border-bottom:1px solid var(--trait-2); }
  .ia-jr tbody td{ display:block; padding:0; border:0; } .ia-jr tbody td:nth-child(1){ grid-column:1 / -1; font-size:var(--taille-legende); color:var(--craie-3); }
  .ia-jr tbody td:nth-child(2){ grid-column:1; } .ia-jr tbody td:nth-child(4){ grid-column:2; grid-row:2; justify-self:end; } .ia-jr tbody td:nth-child(3){ display:none; } .ia-jr tbody td:nth-child(5){ grid-column:1 / -1; font-size:var(--taille-legende); color:var(--craie-3); }
  .ia-ex thead,.ia-mx thead{ display:none; } .ia-ex,.ia-ex tbody,.ia-mx,.ia-mx tbody{ display:block; }
  .ia-ex tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:10px 12px; border-bottom:1px solid var(--trait-2); } .ia-ex tbody td{ display:block; padding:0; border:0; } .ia-ex tbody td:nth-child(n+4){ grid-column:1 / -1; font-size:var(--taille-legende); color:var(--craie-3); } .ia-ex tbody td:nth-child(3){ grid-column:2; grid-row:1; justify-self:end; } .ia-ex tbody td:nth-child(2){ grid-column:1; }
  .ia-ex tbody td[data-l]::before,.ia-mx tbody td[data-l]::before{ content:attr(data-l) ' : '; color:var(--craie-4); font-size:var(--taille-legende); }
  .ia-mx tbody tr{ display:grid; grid-template-columns:minmax(0,1fr); gap:5px; padding:10px 12px; border-bottom:1px solid var(--trait-2); } .ia-mx tbody td{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0; border:0; text-align:left; } .ia-mx tbody td:first-child{ display:block; margin-bottom:2px; } .ia-mx tbody td small{ display:inline; margin-left:6px; }
  .ia-regle .champs{ grid-template-columns:minmax(0,1fr); } .ia-filtres .sel{ max-width:none; flex:1 1 130px; }
}

/* ── rs- : la note de ressemblance d'une affaire — fiche, liste et tableau de la prospection (maquette hub_v3_devis,
   vues « affaire » et « ailleurs »). Jamais un chiffre nu : la note vient avec ses critères, leurs points, une phrase. ── */
.rs-sous{ margin-left:6px; font-size:var(--taille-legende); font-weight:var(--graisse-normale); letter-spacing:0; text-transform:none; color:var(--craie-3); }
.rs-note{ display:inline-grid; grid-auto-flow:column; align-items:baseline; gap:2px; font-family:var(--f-mono); letter-spacing:-.03em; } .rs-note b{ font-size:var(--taille-geant); font-weight:var(--graisse-moyenne); line-height:1; } .rs-note small{ font-size:var(--taille-petit); color:var(--craie-3); }
.rs-tete{ padding:6px 12px 12px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; border-bottom:1px solid var(--trait-2); } .rs-tete p{ font-size:var(--taille-petit); color:var(--craie-2); } .rs-tete p b{ color:var(--craie); font-weight:var(--graisse-forte); }
.rs-avis{ padding:8px 12px; font-size:var(--taille-legende); color:var(--craie-2); background:var(--quai-2); border-bottom:1px solid var(--trait-2); }
.rs-crit{ list-style:none; } .rs-crit li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .rs-crit li:first-child{ border-top:0; }
.rs-crit li > b{ font-weight:var(--graisse-forte); display:flex; gap:7px; align-items:center; flex-wrap:wrap; } .rs-crit li > em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-2); white-space:nowrap; }
.rs-crit li > p{ grid-column:1 / -1; font-size:var(--taille-legende); color:var(--craie-3); overflow-wrap:anywhere; } .rs-crit li.is-manque > b{ color:var(--craie-2); }
.rs-jg{ grid-column:1 / -1; height:4px; border-radius:var(--r-0); background:var(--quai-3); overflow:hidden; } .rs-jg i{ display:block; height:100%; border-radius:var(--r-0); background:var(--ok); }
.rs-crit li.is-eloigne .rs-jg i{ background:var(--warn); } .rs-crit li.is-neutre .rs-jg i{ background:var(--craie-3); }
.rs-pt{ display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 6px; border-radius:var(--r-3); font-family:var(--f-mono); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); border:1px solid var(--trait); background:var(--quai-2); color:var(--craie); white-space:nowrap; letter-spacing:-.02em; }
.rs-pt::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--craie-4); } .rs-pt.h::before{ background:var(--ok); } .rs-pt.m::before{ background:var(--info); } .rs-pt.b::before{ background:var(--warn); }
.rs-pt.z{ font-family:var(--f-texte); font-size:var(--taille-micro); color:var(--craie-3); border-style:dashed; letter-spacing:0; } .rs-pt.z::before{ display:none; }
.rs-nc{ padding:6px 12px 14px; display:grid; gap:6px; font-size:var(--taille-petit); color:var(--craie-2); } .rs-nc > b{ color:var(--craie); font-weight:var(--graisse-forte); }
.rs-vide{ font-family:var(--f-mono); font-size:var(--taille-grand); color:var(--craie-4); line-height:1; }
.rs-manques{ list-style:none; display:grid; gap:4px; font-size:var(--taille-petit); } .rs-manques b{ color:var(--craie); font-weight:var(--graisse-forte); }
.rs-suite{ display:flex; gap:6px 10px; flex-wrap:wrap; align-items:center; padding:0 12px 12px; font-size:var(--taille-legende); }
.rs-pied{ display:flex; gap:4px 12px; flex-wrap:wrap; align-items:center; padding:8px 12px; font-size:var(--taille-legende); color:var(--craie-3); border-top:1px solid var(--trait-2); border-bottom:1px solid var(--trait-2); } .rs-pied form{ margin:0 0 0 auto; }
.rs-past{ display:flex; gap:4px; flex-wrap:wrap; }
.rs-col{ white-space:nowrap; }
@media (max-width:900px){ .pr-tbl tbody td.rs-col{ grid-column:2 / -1; } .rs-tete{ gap:10px; } .rs-note b{ font-size:var(--taille-hero); } }

/* ── ag- : l'agent au travail — la relance à relire, le bloc de la fiche d'affaire, « Demander »
   (maquette hub_v3_agent, vues traiter, relance, affaire, question). ── */
.ag-de{ display:inline-flex; align-items:center; gap:5px; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--signal); white-space:nowrap; }
.ag-de svg{ width:13px; height:13px; flex:none; } .ag-de.is-muet{ color:var(--craie-3); }
:root[data-theme="light"] .ag-de{ color:var(--acc); } :root[data-theme="light"] .ag-de.is-muet{ color:var(--craie-3); }
.ag-src{ display:inline-flex; align-items:center; gap:3px; font-family:var(--f-mono); font-size:var(--taille-micro); letter-spacing:-.02em; color:var(--craie-3); text-decoration:underline; text-decoration-color:var(--trait-3); text-underline-offset:3px; white-space:nowrap; }
.ag-src:hover{ color:var(--craie); } .ag-src svg{ width:9px; height:9px; flex:none; }
.ag-prop{ margin:12px; padding:10px 12px; border:1px solid color-mix(in oklch, var(--signal) 45%, var(--trait)); border-radius:var(--r-2); background:color-mix(in oklch, var(--signal) 8%, transparent); display:grid; gap:6px; }
.ag-prop > b{ font-size:var(--taille-texte); font-weight:var(--graisse-forte); } .ag-prop p{ font-size:var(--taille-petit); color:var(--craie-2); }
.ag-prop.is-muet{ border-color:var(--trait-2); border-style:dashed; background:none; } .ag-prop.is-muet > b{ font-size:var(--taille-petit); }
.ag-prop form{ margin:0; } .ag-prop details > summary{ cursor:pointer; font-size:var(--taille-legende); color:var(--craie-3); list-style:none; } .ag-prop details > summary::-webkit-details-marker{ display:none; }
.ag-prop details > summary:hover{ color:var(--craie); } .ag-prop details[open] > summary{ margin-bottom:8px; }
.ag-prop .ag-pasavant{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:6px; align-items:center; } .ag-prop .ag-pasavant .txt{ height:28px; min-width:0; }
.ag-gestes{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .ag-gestes form{ margin:0; display:inline-flex; }
.ag-liste li{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.ag-liste li:first-child{ border-top:0; }
.ag-liste li > i{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:color-mix(in oklch, var(--signal) 18%, transparent); color:var(--signal); }
:root[data-theme="light"] .ag-liste li > i{ color:var(--acc); }
.ag-liste li > i svg{ width:12px; height:12px; } .ag-liste li{ background:color-mix(in oklch, var(--signal) 5%, transparent); }
.ag-liste li b{ font-weight:var(--graisse-forte); } .ag-liste li .s{ display:block; font-size:var(--taille-legende); color:var(--craie-3); margin-top:1px; }
.ag-liste li .fin{ display:flex; gap:8px; align-items:center; } .ag-liste li .fin em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; }
.ag-non li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:baseline; } .ag-non li:first-child{ border-top:0; }
.ag-non li b{ font-weight:var(--graisse-forte); } .ag-non li p{ grid-column:1 / -1; font-size:var(--taille-petit); color:var(--craie-2); } .ag-non li p i{ font-style:normal; color:var(--craie-3); }
.ag-non li > em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; }
.ag-traiter{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(320px,1fr); gap:12px; align-items:start; margin-bottom:12px; } .ag-traiter > *{ min-width:0; }
.ag-courrier{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:12px; align-items:start; } .ag-courrier > *{ min-width:0; }
.ag-courrier .pile{ display:grid; gap:12px; }
.ag-version{ display:flex; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-legende); color:var(--craie-3); flex-wrap:wrap; }
.ag-version form{ margin:0 0 0 auto; }
.ag-corps{ padding:14px 12px; font-size:var(--taille-texte); line-height:1.6; display:grid; gap:10px; color:var(--craie); overflow-wrap:anywhere; }
.ag-corps mark{ background:color-mix(in oklch, var(--signal) 22%, transparent); color:inherit; border-radius:var(--r-0); padding:0 2px; cursor:help; }
.ag-corps mark sup{ font-family:var(--f-mono); font-size:var(--taille-nano); color:var(--craie-3); margin-left:1px; }
.ag-actes{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:10px 12px; border-top:1px solid var(--trait-2); } .ag-actes form{ margin:0; display:inline-flex; gap:6px; }
.ag-actes .sel{ height:30px; max-width:190px; } .ag-actes .pousse{ margin-left:auto; }
.ag-appuis li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:3px 9px; padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .ag-appuis li:first-child{ border-top:0; }
.ag-appuis li > i{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); background:color-mix(in oklch, var(--signal) 18%, transparent); color:var(--craie); border:1px solid color-mix(in oklch, var(--signal) 40%, var(--trait)); }
.ag-appuis li b{ font-weight:var(--graisse-forte); } .ag-appuis li p{ grid-column:2; font-size:var(--taille-petit); color:var(--craie-2); overflow-wrap:anywhere; } .ag-appuis li q{ quotes:'« ' ' »'; color:var(--craie); }
.ag-appuis li .ag-src{ grid-column:2; justify-self:start; }
.ag-pas{ padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); color:var(--craie-2); display:grid; gap:5px; } .ag-pas--tete{ border-top:0; }
.ag-pas li{ padding-left:12px; position:relative; } .ag-pas li::before{ content:''; position:absolute; left:0; top:8px; width:5px; height:1px; background:var(--craie-3); }
.ag-pas li.sur-titre{ padding-left:0; } .ag-pas li.sur-titre::before{ display:none; } .ag-pas li a{ text-decoration:underline; text-decoration-color:var(--trait-3); text-underline-offset:3px; }
.ag-porte{ margin:10px 12px 12px; padding:8px 10px; border:1px dashed var(--trait); border-radius:var(--r-2); font-size:var(--taille-legende); color:var(--craie-3); } .ag-porte b{ color:var(--craie-2); font-weight:var(--graisse-forte); }
.ag-arret{ margin:12px; padding:10px 12px; border:1px solid var(--warn-tr); border-radius:var(--r-2); background:var(--warn-bg); display:grid; gap:4px; font-size:var(--taille-petit); } .ag-arret b{ font-weight:var(--graisse-forte); color:var(--warn); } .ag-arret span{ color:var(--craie-2); font-size:var(--taille-petit); }
.ag-motifs{ display:grid; gap:6px; }
.ag-motifs label{ display:grid; grid-template-columns:16px minmax(0,1fr); gap:2px 9px; padding:9px 10px; border:1px solid var(--trait-2); border-radius:var(--r-2); font-size:var(--taille-petit); cursor:pointer; align-items:start; }
.ag-motifs label:has(input:checked){ border-color:color-mix(in oklch, var(--signal) 55%, var(--trait)); background:color-mix(in oklch, var(--signal) 7%, transparent); }
.ag-motifs input{ margin:2px 0 0; accent-color:var(--signal); } .ag-motifs b{ font-weight:var(--graisse-forte); } .ag-motifs span{ grid-column:2; font-size:var(--taille-legende); color:var(--craie-3); }
.ag-retenu li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; } .ag-retenu li:first-child{ border-top:0; }
.ag-retenu li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .ag-retenu li form{ margin:0; }
.ag-q{ display:flex; align-items:center; gap:10px; padding:0 8px 0 14px; border:1px solid var(--trait); border-radius:var(--r-3); background:var(--quai); margin-bottom:8px; }
.ag-q:focus-within{ border-color:var(--trait-3); box-shadow:0 0 0 2px color-mix(in oklch, var(--signal) 55%, transparent); }
.ag-q svg{ width:16px; height:16px; color:var(--craie-3); flex:none; } .ag-q input{ flex:1; min-width:0; height:46px; background:none; border:0; outline:0; font-size:var(--taille-lecture); color:var(--craie); }
.ag-q input::placeholder{ color:var(--craie-4); }
.ag-idees{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; align-items:center; font-size:var(--taille-legende); color:var(--craie-3); }
.ag-quest{ display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,300px); gap:12px; align-items:start; } .ag-quest > *{ min-width:0; } .ag-quest .pile{ display:grid; gap:12px; }
.ag-rep{ margin-bottom:12px; }
.ag-rep-q{ display:flex; gap:9px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-texte); font-weight:var(--graisse-forte); flex-wrap:wrap; }
.ag-rep-q .avatar{ width:20px; height:20px; font-size:var(--taille-nano); flex:none; } .ag-rep-q > span:nth-child(2){ flex:1; min-width:180px; }
.ag-rep-q .end{ display:flex; gap:6px; align-items:center; font-weight:var(--graisse-normale); font-size:var(--taille-legende); color:var(--craie-3); } .ag-rep-q form{ margin:0; }
.ag-phrase{ padding:12px 12px 4px; font-size:var(--taille-lecture); line-height:1.45; font-weight:var(--graisse-forte); }
.ag-lu{ padding:2px 12px 10px; font-size:var(--taille-petit); color:var(--craie-2); }
.ag-filtres{ display:flex; gap:6px; flex-wrap:wrap; padding:8px 12px; border-top:1px solid var(--trait-2); border-bottom:1px solid var(--trait-2); background:var(--quai-2); align-items:center; }
.ag-filtres > span:first-child{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); margin-right:2px; }
.ag-f{ display:inline-flex; align-items:center; min-height:20px; padding:0 7px; border:1px solid var(--trait); border-radius:var(--r-3); font-size:var(--taille-legende); color:var(--craie-2); background:var(--quai); }
.ag-f.is-droit{ border-color:var(--info-tr); color:var(--info); background:var(--info-bg); } .ag-f.is-borne{ border-color:var(--warn-tr); color:var(--warn); background:var(--warn-bg); }
.ag-tbl .nom b{ display:block; font-weight:var(--graisse-forte); } .ag-tbl .nom span{ font-size:var(--taille-legende); color:var(--craie-3); } .ag-tbl tfoot td{ border-top:1px solid var(--trait); font-weight:var(--graisse-forte); padding-top:8px; padding-bottom:8px; }
.ag-tbl td.r{ text-align:right; white-space:nowrap; font-family:var(--f-mono); font-size:var(--taille-petit); letter-spacing:-.02em; word-spacing:-.3em; } .ag-tbl th.r{ text-align:right; white-space:nowrap; }
.ag-rep-ft{ display:flex; gap:8px 14px; align-items:center; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-legende); color:var(--craie-3); flex-wrap:wrap; }
.ag-rep-ft .fin{ margin-left:auto; display:flex; gap:6px; }
.ag-refus{ padding:14px 12px; display:grid; gap:7px; font-size:var(--taille-texte); color:var(--craie-2); } .ag-refus b{ color:var(--craie); font-weight:var(--graisse-forte); font-size:var(--taille-lecture); } .ag-refus ul{ padding-left:16px; display:grid; gap:3px; font-size:var(--taille-petit); list-style:disc; }
.ag-refus a{ text-decoration:underline; text-decoration-color:var(--trait-3); text-underline-offset:3px; }
.ag-epingle li{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:2px 8px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:center; } .ag-epingle li:first-child{ border-top:0; }
.ag-epingle li a{ min-width:0; overflow-wrap:anywhere; } .ag-epingle li a:hover{ text-decoration:underline; } .ag-epingle li form{ margin:0; }
.ag-epingle li em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-petit); color:var(--craie); white-space:nowrap; word-spacing:-.3em; }
/* Le point du lundi : la page (ag-lundi), ses listes (ag-l, ag-prio, ag-sem), le message tel qu'il part (ag-mail), le réglage (ag-dest). */
.ag-lundi{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:12px; align-items:start; } .ag-lundi > *{ min-width:0; }
.ag-l{ list-style:none; }
.ag-l li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:baseline; } .ag-l li:first-child{ border-top:0; }
.ag-l li b{ font-weight:var(--graisse-forte); } .ag-l li p{ grid-column:1; font-size:var(--taille-legende); color:var(--craie-3); } .ag-l li p .ag-src{ margin-left:2px; }
.ag-l li > em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-texte); font-weight:var(--graisse-moyenne); white-space:nowrap; letter-spacing:-.02em; word-spacing:-.3em; text-align:right; grid-row:1 / span 2; grid-column:2; }
.ag-l li > em small{ display:block; font-family:var(--f-texte); font-size:var(--taille-legende); color:var(--craie-3); font-weight:var(--graisse-normale); word-spacing:normal; letter-spacing:0; }
.ag-l li.is-warn{ box-shadow:inset 3px 0 0 var(--warn); } .ag-l li.is-bad{ box-shadow:inset 3px 0 0 var(--bad); }
.ag-l li.ag-rien{ display:block; color:var(--craie-3); }
.ag-prio{ list-style:none; counter-reset:p; }
.ag-prio li{ counter-increment:p; display:grid; grid-template-columns:26px minmax(0,1fr); gap:2px 10px; padding:11px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-texte); } .ag-prio li:first-child{ border-top:0; }
.ag-prio li::before{ content:counter(p); grid-row:1 / span 3; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-mono); font-size:var(--taille-petit); background:var(--signal); color:var(--on-signal); font-weight:var(--graisse-forte); }
.ag-prio li b{ font-weight:var(--graisse-forte); } .ag-prio li p{ grid-column:2; font-size:var(--taille-petit); color:var(--craie-2); } .ag-prio li .ag-gestes{ grid-column:2; margin-top:4px; }
.ag-resume{ padding:12px; font-size:var(--taille-texte); border-bottom:1px solid var(--trait-2); }
.ag-sem li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); list-style:none; } .ag-sem li:first-child{ border-top:0; }
.ag-sem li em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); padding-top:1px; } .ag-sem li span{ grid-column:2; font-size:var(--taille-legende); color:var(--craie-3); } .ag-sem li.is-ici{ background:var(--quai-2); box-shadow:inset 2px 0 0 var(--esp); }
.ag-sem li a:hover{ text-decoration:underline; }
.ag-nc{ padding:10px 12px 14px; display:grid; gap:6px; font-size:var(--taille-petit); color:var(--craie-2); }
.ag-mail{ --encre:var(--encre); --encre-2:var(--encre-2); --filet:var(--filet-papier); --papier:var(--blanc); --papier-2:var(--papier-2); --lien-papier:var(--lien-papier); background:var(--papier); color:var(--encre); max-width:600px; margin:0 auto; padding:28px 30px 24px; border-radius:var(--r-0); font-family:var(--f-texte); font-size:var(--taille-lecture); line-height:1.55; }
.ag-mail h2{ font-family:var(--f-titre); font-size:var(--taille-grand); font-weight:var(--graisse-forte); line-height:1.15; } .ag-mail .ag-m-sous{ font-size:var(--taille-petit); color:var(--encre-2); margin-top:3px; }
.ag-mail h3{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.1em; text-transform:uppercase; color:var(--encre-2); margin:22px 0 6px; padding-bottom:5px; border-bottom:1px solid var(--encre); }
.ag-mail p{ margin-top:8px; } .ag-mail ul{ list-style:none; } .ag-mail li{ padding:7px 0; border-bottom:1px solid var(--filet); } .ag-mail li:last-child{ border-bottom:0; }
.ag-mail li b{ font-weight:var(--graisse-forte); } .ag-mail li > span:not(.n){ display:block; font-size:var(--taille-petit); color:var(--encre-2); }
.ag-mail a{ color:var(--lien-papier); text-decoration:underline; text-underline-offset:2px; } .ag-mail .n{ font-family:var(--f-mono); font-size:var(--taille-texte); letter-spacing:-.02em; word-spacing:-.3em; white-space:nowrap; }
.ag-mail ol{ list-style:decimal; padding-left:20px; display:grid; gap:8px; margin-top:4px; } .ag-mail ol li{ border:0; padding:0; }
.ag-mail .ag-m-resume{ margin-top:14px; padding:12px 14px; background:var(--papier-2); border-left:3px solid var(--encre); font-size:var(--taille-lecture); }
.ag-mail footer{ margin-top:22px; padding-top:10px; border-top:1px solid var(--filet); font-size:var(--taille-legende); color:var(--encre-2); }
.ag-mail .ag-m-btn{ display:inline-block; margin-top:14px; padding:9px 14px; background:var(--encre); color:var(--papier); text-decoration:none; font-weight:var(--graisse-forte); font-size:var(--taille-texte); border-radius:var(--r-1); }
.ag-dest td{ vertical-align:top; } .ag-dest small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
/* La note d'appel dictée (maquette hub_v3_agent, vue « dictee ») : avant, enregistrement, relecture, trop court. */
.ag-dic{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; } .ag-dic > *{ min-width:0; }
.ag-dic .pile{ display:grid; gap:12px; align-content:start; min-width:0; }
.ag-seul{ max-width:460px; margin:0 auto; }
.ag-micro{ display:grid; justify-items:center; gap:10px; padding:26px 16px 22px; text-align:center; }
.ag-rond{ width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--signal); color:var(--on-signal); border:0; cursor:pointer; }
.ag-rond svg{ width:28px; height:28px; } .ag-rond.is-stop{ background:var(--bad); color:var(--blanc); box-shadow:0 0 0 8px var(--bad-bg); }
.ag-rond:disabled{ opacity:.45; cursor:not-allowed; } .ag-rond:focus-visible{ outline:2px solid var(--craie); outline-offset:4px; }
.ag-micro b{ font-size:var(--taille-lecture); font-weight:var(--graisse-forte); } .ag-micro p{ font-size:var(--taille-petit); color:var(--craie-3); max-width:34ch; }
.ag-chrono{ font-family:var(--f-mono); font-size:var(--taille-hero); font-weight:var(--graisse-moyenne); letter-spacing:-.03em; line-height:1; }
.ag-onde{ display:flex; align-items:center; gap:3px; height:44px; }
.ag-onde i{ width:3px; height:4px; border-radius:var(--r-0); background:var(--craie-3); display:block; } .ag-onde i.j{ background:var(--signal); }
:root[data-theme="light"] .ag-onde i.j{ background:var(--warn); }
.ag-item{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:3px 10px; padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; }
.ag-item:first-child{ border-top:0; }
.ag-item > input[type="checkbox"]{ width:16px; height:16px; margin:2px 0 0; accent-color:var(--signal); cursor:pointer; }
.ag-item .k{ display:block; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.08em; text-transform:uppercase; color:var(--craie-4); }
.ag-item .v{ display:block; font-weight:var(--graisse-forte); font-size:var(--taille-texte); } .ag-item .v s{ color:var(--craie-3); font-weight:var(--graisse-normale); text-decoration:none; }
.ag-item p{ grid-column:2; font-size:var(--taille-legende); color:var(--craie-3); } .ag-item p q{ quotes:'« ' ' »'; color:var(--craie-2); }
.ag-item.is-doute{ background:var(--warn-bg); } .ag-item.is-doute .k{ color:var(--warn); }
.ag-item.is-non{ opacity:.55; } .ag-item.is-non .v{ text-decoration:line-through; text-decoration-color:var(--craie-3); }
.ag-item .txt,.ag-item .sel{ height:28px; min-width:0; } .ag-item textarea.txt{ height:auto; padding:6px 8px; resize:vertical; line-height:1.4; font-family:inherit; }
.ag-ligne{ display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:8px; grid-column:2; margin-top:4px; }
.ag-note{ padding:4px 12px 12px; font-size:var(--taille-texte); line-height:1.6; color:var(--craie); border:0; width:100%; background:none; resize:vertical; min-height:215px; font-family:inherit; display:block; }
.ag-note:focus-visible{ outline:2px solid var(--trait-3); outline-offset:-2px; }
.ag-brut{ border-top:1px solid var(--trait-2); }
.ag-brut > summary{ display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:var(--taille-petit); font-weight:var(--graisse-forte); cursor:pointer; list-style:none; color:var(--craie-2); }
.ag-brut > summary::-webkit-details-marker{ display:none; }
.ag-brut > summary::before{ content:''; width:6px; height:6px; border-right:1.5px solid var(--craie-3); border-bottom:1.5px solid var(--craie-3); transform:rotate(-45deg); transition:transform var(--t); flex:none; }
.ag-brut[open] > summary::before{ transform:rotate(45deg); } .ag-brut > summary span{ margin-left:auto; font-weight:var(--graisse-normale); color:var(--craie-3); font-size:var(--taille-legende); }
.ag-brut p{ padding:0 12px 12px; font-family:var(--f-mono); font-size:var(--taille-legende); line-height:1.65; color:var(--craie-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.ag-brut p.dim{ font-family:var(--f-texte); color:var(--craie-3); }
.ag-valide{ margin-top:12px; display:flex; gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--trait); border-radius:var(--r-3); background:var(--quai-2); box-shadow:var(--ombre); flex-wrap:wrap; }
.ag-valide > span{ font-size:var(--taille-legende); color:var(--craie-3); margin-right:auto; }
.ag-signal{ margin:0 0 12px; padding:9px 11px; border:1px solid var(--warn-tr); border-radius:var(--r-2); background:var(--warn-bg); display:grid; grid-template-columns:8px minmax(0,1fr); gap:9px; align-items:start; font-size:var(--taille-petit); }
.ag-signal > i{ width:8px; height:8px; border-radius:50%; background:var(--signal); margin-top:5px; } .ag-signal b{ color:var(--craie); font-weight:var(--graisse-forte); }
.ag-signal span{ display:block; font-size:var(--taille-legende); color:var(--craie-2); margin-top:1px; }
.ag-nc b{ color:var(--craie); font-weight:var(--graisse-forte); }
.ag-de.is-warn,:root[data-theme="light"] .ag-de.is-warn{ color:var(--warn); }
.ag-faits{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:3px; font-size:var(--taille-legende); color:var(--craie-3); } .ag-faits b{ color:var(--craie-2); font-weight:var(--graisse-forte); }
.ag-dc-notes li{ list-style:none; padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .ag-dc-notes li:first-child{ border-top:0; }
.ag-dc-notes li > p{ white-space:pre-wrap; } .ag-dc-notes li > em{ display:block; font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); margin-top:3px; }
@media (max-width:1180px){ .ag-lundi{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){
  .ag-mail{ padding:20px 16px 18px; } .ag-mail h2{ font-size:var(--taille-titre); }
  .ag-dest thead{ display:none; } .ag-dest,.ag-dest tbody{ display:block; }
  .ag-dest tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:10px 12px; border-bottom:1px solid var(--trait-2); }
  .ag-dest tbody td{ display:block; padding:0; border:0; } .ag-dest tbody td:nth-child(1){ grid-column:1; } .ag-dest tbody td:nth-child(2){ grid-column:2; justify-self:end; } .ag-dest tbody td:nth-child(n+3){ grid-column:1 / -1; font-size:var(--taille-petit); }
}
@media (max-width:1180px){ .ag-courrier,.ag-quest,.ag-traiter{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){
  .ag-rep-q > span:nth-child(2){ min-width:0; flex-basis:calc(100% - 32px); } .ag-idees .puce{ white-space:normal; height:auto; min-height:24px; text-align:left; padding-top:3px; padding-bottom:3px; }
  .ag-liste li{ grid-template-columns:22px minmax(0,1fr); } .ag-liste li .fin{ grid-column:2; justify-content:space-between; margin-top:4px; }
  .ag-version form{ margin-left:0; } .ag-src{ white-space:normal; } .ag-rep-ft .fin{ flex-wrap:wrap; margin-left:0; width:100%; }
  .ag-plus{ display:none; } .ag-rep-q .end{ width:100%; } .ag-phrase{ font-size:var(--taille-lecture); } .ag-q input{ font-size:var(--taille-lecture); }
  .ag-actes .pousse{ margin-left:0; } .ag-actes .sel{ max-width:none; flex:1 1 150px; } .ag-prop .ag-pasavant{ grid-template-columns:minmax(0,1fr); }
  .ag-dic{ grid-template-columns:minmax(0,1fr); } .ag-ligne{ grid-template-columns:minmax(0,1fr); }
  .ag-valide{ position:sticky; bottom:8px; z-index:5; } .ag-valide > span{ width:100%; margin-right:0; } .ag-valide .btn--primary{ flex:1; justify-content:center; }
  .ag-item .txt,.ag-item .sel,.ag-item textarea.txt{ font-size:var(--taille-sous-titre); } .ag-note{ font-size:var(--taille-sous-titre); min-height:180px; }
}

/* ── Échanges › « Pour moi » : une ligne par chose à faire, son geste au bout ─────────────── */
.pm-etat{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; padding:7px 12px; margin-bottom:12px; border:1px solid var(--trait-2); border-radius:var(--r-2); background:var(--quai); font-size:var(--taille-petit); color:var(--craie-3); }
.pm-etat i{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:6px; vertical-align:1px; }
.pm-etat i.bad{ background:var(--bad); } .pm-etat b{ color:var(--craie-2); font-weight:var(--graisse-forte); }
.pm-etat a{ color:var(--esp); text-decoration:underline; text-underline-offset:2px; }
.pm-direct .oui{ display:none; } :root[data-direct="oui"] .pm-direct .oui{ display:inline; } :root[data-direct="oui"] .pm-direct .non{ display:none; }
:root:not([data-direct="oui"]) .pm-direct i{ background:var(--craie-4); }
.pm h6{ display:flex; gap:8px; align-items:center; margin:0; padding:9px 12px 5px; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); border-bottom:1px solid var(--trait-2); }
.pm h6 span{ font-family:var(--f-mono); letter-spacing:0; }
.pm-l{ display:grid; grid-template-columns:22px minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:7px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.pm-l:last-child{ border-bottom:0; } .pm-l:hover{ background:var(--quai-2); }
.pm-q{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--craie-2); }
.pm-q b{ font-weight:var(--graisse-forte); color:var(--craie); } .pm-l.is-moi .pm-q b::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--esp); margin-right:7px; vertical-align:2px; }
.pm-q span{ color:var(--craie-3); }
.pm-t{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; } .pm-t.retard{ color:var(--bad); }
.pm-g{ display:flex; gap:4px; }
@media (max-width:700px){ .pm-l{ grid-template-columns:22px minmax(0,1fr) auto; } .pm-q{ white-space:normal; } .pm-g{ grid-column:2 / -1; } .pm-t{ grid-row:1; grid-column:3; } }

/* ── Écrire dans une fenêtre flottante (hub-shell.js) : par-dessus la page, jamais en bas ───────── */
.ecr-flottante{ position:fixed; z-index:90; top:50%; left:50%; transform:translate(calc(-50% + var(--decal, 0px)), calc(-50% + var(--decal, 0px)));
  width:min(820px, calc(100vw - 48px)); height:min(90vh, 920px); display:flex; flex-direction:column; border:1px solid var(--trait-3); border-radius:var(--r-3); background:var(--nuit);
  box-shadow:0 18px 60px color-mix(in oklab, var(--ombre-teinte) 45%, transparent); overflow:hidden; }
body.ecr-ouverte::after{ content:''; position:fixed; inset:0; z-index:89; background:color-mix(in oklab, var(--ombre-teinte) 35%, transparent); pointer-events:none; }
.ecr-flottante.is-grand{ top:16px; right:16px; left:16px; bottom:16px; width:auto; height:auto; transform:none; }
.ecr-flottante header{ display:flex; align-items:center; gap:8px; padding:7px 10px 7px 14px; border-bottom:1px solid var(--trait-2); background:var(--quai); font-size:var(--taille-texte); }
.ecr-flottante header b{ font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ecr-flottante header .fin{ margin-left:auto; display:flex; gap:2px; }
.ecr-flottante header button{ padding:4px 9px; border:0; border-radius:var(--r-2); background:none; font:inherit; font-size:var(--taille-petit); color:var(--craie-2); cursor:pointer; }
.ecr-flottante header button:hover{ background:var(--quai-2); color:var(--craie); }
.ecr-annuler{ position:fixed; z-index:95; left:50%; bottom:24px; transform:translateX(-50%); display:flex; gap:14px; align-items:center;
  padding:9px 10px 9px 16px; border:1px solid var(--trait-3); border-radius:var(--r-3); background:var(--quai-3); box-shadow:0 10px 40px color-mix(in oklab, var(--ombre-teinte) 40%, transparent); font-size:var(--taille-texte); }
.ecr-annuler button{ padding:5px 10px; border:0; border-radius:var(--r-2); background:var(--signal); color:var(--nuit); font:inherit; font-weight:var(--graisse-forte); cursor:pointer; }
/* L'écriture ancrée dans la colonne de lecture du courrier (comme Outlook). */
.ech-lecture{ position:relative; }
.ech-lecture.a-ecrire > :not(.ecr-ancree){ visibility:hidden; }
.ecr-flottante.ecr-ancree > header{ display:none; }
.ecr-flottante.ecr-ancree{ position:absolute; inset:0; top:0; left:0; transform:none; width:auto; height:auto; z-index:6; border-radius:inherit; box-shadow:none; border:0; }
/* La barre d'écriture (fenêtre et colonne du courrier) et la forme compacte des champs, comme Outlook. */
.ecr-barre{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:4px; padding:8px 12px; margin:0 0 4px; background:var(--nuit); border-bottom:1px solid var(--trait-2); }
.ecr-envoyer{ display:inline-flex; gap:1px; margin-right:6px; }
.ecr-envoyer .btn--icone{ padding:0 6px; }
.ecr-modele{ max-width:160px; }
.ecr-barre-fin{ margin-left:auto; display:flex; gap:2px; }
.ecr-barre [aria-pressed="true"]{ color:var(--warn); }
.ecr-tilen{ color:var(--acc); }
.ecr-tilen.is-attente .ico{ animation:tourne 1s linear infinite; }
.ecr-tilen-fait{ display:flex; align-items:center; gap:8px; margin:6px 0; padding:6px 10px; border-left:2px solid var(--acc); background:var(--acc-fond); font-size:var(--taille-petit); color:var(--craie-2); }
.ecr-tilen-fait .btn{ margin-left:auto; }
.ecr-importance{ font-weight:var(--graisse-grasse); font-size:var(--taille-lecture); }
.ecr-importance[aria-pressed="true"]{ color:var(--bad); background:var(--bad-bg); }
.ecr-fenetre .tete{ display:none; }
.ecr-fenetre form.panel{ border:0; background:none; max-width:none; }
.ecr-fenetre form .actions > .btn{ display:none; }
.ecr-fenetre .champs--1 > .champ:has(#templateSelect){ display:none; }
/* Aperçu « comme le destinataire » : le message sur page blanche, quel que soit le thème de l'écran. */
.ech-ed--blanc .ech-ed-zone{ background:white; color:black; }
/* Courrier › Signatures : la liste à gauche, la signature ouverte à droite. */
.sig-cols{ display:grid; grid-template-columns:minmax(240px,320px) minmax(0,1fr); gap:14px; align-items:start; }
.sig-gauche{ display:grid; gap:12px; }
.sig-ligne{ display:flex; flex-direction:column; gap:1px; padding:10px 14px; border-bottom:1px solid var(--trait-2); color:inherit; }
.sig-ligne:last-child{ border-bottom:0; }
.sig-ligne:hover{ background:var(--quai-2); }
.sig-ligne.is-on{ box-shadow:inset 2px 0 0 var(--acc); background:var(--quai-2); }
.sig-ligne small{ font-size:var(--taille-legende); color:var(--craie-4); }
.sig-vide{ margin:0; padding:14px; color:var(--craie-3); font-size:var(--taille-petit); }
.sig-defauts,.sig-import{ padding:12px 14px; display:grid; gap:8px; }
.sig-defauts h3,.sig-import h3{ margin:0; font-size:var(--taille-texte); font-weight:var(--graisse-forte); }
.sig-defauts .champ{ display:grid; gap:4px; margin:0; } .sig-defauts .champ span{ font-size:var(--taille-petit); color:var(--craie-3); }
.sig-import .aide{ margin:0; }
@media (max-width:900px){ .sig-cols{ grid-template-columns:minmax(0,1fr); } }
/* Écrire, façon Outlook (colonne du courrier ou fenêtre) : une ligne par champ, l'étiquette à gauche, sans cadre ; la
   barre de mise en forme sur une ligne ; on écrit sur le fond de l'écran (l'aperçu ☀ montre la page blanche). */
.ecr-fenetre .panel-bd{ padding:0 14px 14px; }
.ecr-fenetre .ecr-rappel,.ecr-fenetre .champs--1 .aide{ display:none; }
.ecr-fenetre .champs--1{ gap:0; }
.ecr-fenetre .champs--1 > .champ:not(:has(.ech-ed)){ display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:0 8px; margin:0; padding:3px 0; border-bottom:1px solid var(--trait-2); }
.ecr-fenetre .champs--1 > .champ:not(:has(.ech-ed)) > label{ margin:0; font-size:var(--taille-petit); color:var(--craie-3); font-weight:var(--graisse-normale); }
.ecr-fenetre .champs--1 > .champ:not(:has(.ech-ed)) :is(.sel,.txt,.crr-pastilles){ border-color:transparent; background:transparent; box-shadow:none; min-height:32px; font-size:var(--taille-texte); }
.ecr-fenetre .champs--1 > .champ:has(.ech-ed) > .lbl{ display:none; }
.ecr-fenetre .champs--1 > .champ:has(.ech-ed){ margin-top:10px; }
.ecr-ccbcc{ font-size:var(--taille-legende); white-space:nowrap; }
.ecr-fenetre .champs--1 > .champ:has(.ecr-ccbcc){ grid-template-columns:52px minmax(0,1fr) auto; }
.crr-sugg-ancre > .ecr-ccbcc{ justify-self:end; }
.ecr-fenetre .ech-ed{ border:0; background:transparent; }
.ecr-fenetre .ech-ed-barre{ flex-wrap:nowrap; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; }
.ecr-fenetre .ech-ed:not(.ech-ed--blanc) .ech-ed-zone [data-ech="citation"]{ background:var(--craie); color:var(--nuit); border-radius:var(--r-2); padding:10px 12px; margin-top:6px; }
.ecr-fenetre .ech-ed:not(.ech-ed--blanc) .ech-ed-zone{ background:transparent; color:var(--craie); padding:12px 2px; min-height:260px; }
.ecr-flottante iframe{ flex:1; width:100%; border:0; background:var(--nuit); }

/* ── Le message : sa barre d'outils, comme dans Outlook ───────────────────────────────────── */
.ech-msg-outils{ display:flex; flex-wrap:wrap; gap:2px; align-items:center; margin:-4px 0 8px -6px; }
.ech-msg-outils .btn .ico{ margin-right:4px; } .ech-msg-outils-sep{ width:1px; height:18px; background:var(--trait-2); margin:0 4px; }
.ech-msg-outils .ech-etoile-btn[aria-pressed="true"]{ color:var(--warn); }

/* ── La conversation : les autres messages du fil, repliés au-dessus du message ─────────────── */
.ech-nb{ font-weight:var(--graisse-normale); color:var(--craie-3); font-family:var(--f-mono); font-size:var(--taille-legende); }
.ech-conv{ margin:0 14px; border-bottom:1px dashed var(--trait-2); }
/* La conversation façon Outlook : les autres messages du fil en cartes repliées, puis la réponse rapide. */
.ech-filconv{ display:grid; gap:8px; padding:10px 14px 4px; }
.ech-carte{ border:1px solid var(--trait-2); border-radius:var(--r-3); }
.ech-carte.is-ouvert{ background:var(--quai); border-color:var(--trait); }
.ech-carte-hd{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; text-align:left; border-radius:var(--r-3); }
.ech-carte-hd:hover{ background:var(--quai-2); }
.ech-ini{ width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--quai-3); color:var(--craie-2);
  font-size:var(--taille-micro); font-weight:var(--graisse-forte); }
.ech-carte.is-moi .ech-ini{ background:var(--acc-fond); color:var(--acc); }
.ech-carte-q{ flex:1; min-width:0; display:grid; }
.ech-carte-q b{ font-weight:var(--graisse-moyenne); font-size:var(--taille-texte); }
.ech-carte-q small{ color:var(--craie-4); font-size:var(--taille-petit); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ech-carte-hd time{ flex:none; color:var(--craie-4); font-size:var(--taille-legende); font-variant-numeric:tabular-nums; }
.ech-carte-corps{ padding:0 12px 12px 54px; }
.ech-carte-gestes{ display:flex; gap:4px; margin-top:8px; }
.ech-reprise{ display:flex; align-items:center; gap:6px; margin:10px 14px 14px; padding:8px 8px 8px 12px; border:1px solid var(--trait); border-radius:var(--r-3); }
.ech-reprise-a{ flex:1; display:flex; align-items:center; gap:8px; color:var(--craie-4); font-size:var(--taille-texte); }
.ech-reprise-a:hover{ color:var(--craie); }
/* Dans la liste : la flèche d'une conversation et ses messages, un par ligne. */
.ech-plier{ flex:none; width:22px; display:grid; place-items:center; color:var(--craie-4); }
.ech-plier .ico{ width:11px; height:11px; transition:transform var(--t); }
.ech-plier[aria-expanded="true"] .ico{ transform:rotate(90deg); }
.ech-sous-liste{ border-bottom:1px solid var(--trait-2); }
.ech-sous{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 10px; width:100%; padding:6px 12px 6px 56px; text-align:left; font-size:var(--taille-petit); color:var(--craie-3); }
.ech-sous:hover{ background:var(--quai-2); } .ech-sous.is-on{ background:var(--quai-3); box-shadow:inset 2px 0 0 var(--acc); }
.ech-sous b{ font-weight:var(--graisse-moyenne); color:var(--craie-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ech-sous time{ color:var(--craie-4); font-size:var(--taille-micro); }
.ech-sous span{ grid-column:1 / -1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ech-conv > summary{ padding:8px 0; font-size:var(--taille-petit); color:var(--esp); cursor:pointer; }
.ech-conv-liste{ display:grid; gap:2px; padding-bottom:8px; }
.ech-conv-l{ display:grid; grid-template-columns:minmax(0,160px) auto minmax(0,1fr); gap:10px; align-items:baseline; padding:5px 8px;
  border-radius:var(--r-2); text-align:left; font-size:var(--taille-petit); color:var(--craie-2); background:none; border:0; cursor:pointer; }
.ech-conv-l:hover{ background:var(--quai-2); } .ech-conv-l.is-moi b{ color:var(--esp); }
.ech-conv-l b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--graisse-forte); }
.ech-conv-l time{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); }
.ech-conv-l span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--craie-3); }

/* ── Le menu du courrier : Favoris, boîtes dépliables, dossiers en arbre ─────────────────────── */
/* Boîtes et dossiers du courrier (refonte 10/2026) : un menu derrière le bouton du titre, plus dans la barre. */
.tete-titre:has(> .ech-ou){ display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; }
.tete-titre:has(> .ech-ou) > .tete-sous{ flex-basis:100%; }
.ech-ou{ max-width:420px; }
.ech-boites-volet .menu-item.ech-arbo-dossier{ padding-left:calc(22px + var(--niveau, 1) * 12px); color:var(--craie-3); }
.ech-boites-volet .ech-boite > summary{ font-weight:var(--graisse-moyenne); color:var(--craie); }
.ech-ou span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ech-boites-volet{ width:min(340px, calc(100vw - 24px)); max-height:min(70vh, 640px); overflow-y:auto; padding:6px; }
.ech-boites-volet h4{ font-size:var(--taille-micro); font-weight:var(--graisse-moyenne); color:var(--craie-4); padding:10px 10px 4px; margin:0; }
.ech-boites-volet .menu-item{ display:flex; align-items:center; gap:8px; width:100%; min-height:30px; padding:4px 10px; border-radius:var(--r-2);
  color:var(--craie-2); font-size:var(--taille-petit); line-height:1.3; }
.ech-boites-volet .menu-item:hover,.ech-boites-volet .menu-item[aria-current]{ background:var(--quai-3); color:var(--craie); }
.ech-boite > summary{ list-style:none; cursor:pointer; }
.ech-boite > summary::-webkit-details-marker{ display:none; }
.ech-boite > summary::before{ content:''; width:0; height:0; border-left:4px solid var(--craie-4); border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent; margin-right:2px; transition:transform var(--t); flex:none; }
.ech-boite[open] > summary::before{ transform:rotate(90deg); }
.ech-boite-nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; }
.ech-nouveau-dossier{ margin:0; } .ech-nouveau-dossier button{ width:100%; border:0; background:none; color:var(--craie-3); cursor:pointer; text-align:left; }
.ech-nouveau-dossier input{ margin:2px 10px 4px calc(26px + 12px); width:calc(100% - 48px); height:28px; font-size:var(--taille-petit); }
.ech-arbo-dossier{ padding-left:calc(26px + var(--niveau, 0) * 12px); font-size:var(--taille-petit); }

/* ── Échanges › Messages : la messagerie interne ──────────────────────────────────────────── */
.msg-app{ display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(200px,250px); gap:12px; height:calc(100vh - 170px); min-height:480px; }
.msg-app > *{ min-width:0; min-height:0; display:flex; flex-direction:column; }
.msg-liste{ overflow:auto; flex:1; margin:0; padding:0; list-style:none; }
.msg-liste li{ display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:9px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--trait-2); cursor:pointer; }
.msg-liste li:hover{ background:var(--quai-2); } .msg-liste li[aria-selected="true"]{ background:var(--quai-3); box-shadow:inset 2px 0 0 var(--esp); }
.msg-liste b{ display:block; font-size:var(--taille-petit); font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-liste .s{ display:block; font-size:var(--taille-legende); color:var(--craie-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-liste li.nonlu .s{ color:var(--craie-2); }
.msg-liste .q{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); display:grid; gap:4px; justify-items:end; }
.msg-liste .q i{ font-style:normal; min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-2); background:var(--signal); color:var(--nuit); font-weight:var(--graisse-forte); display:grid; place-items:center; font-size:var(--taille-micro); }
.msg-app .avatar.gr{ border-radius:var(--r-2); }
.msg-fil-hd{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--trait-2); }
.msg-fil-hd h3{ font-family:var(--f-titre); font-size:var(--taille-sous-titre); font-weight:var(--graisse-forte); margin:0; } .msg-fil-hd span{ font-size:var(--taille-legende); color:var(--craie-3); }
.msg-retour{ display:none; }
.msg-messages{ flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.msg{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:9px; max-width:80%; }
.msg.moi{ align-self:flex-end; grid-template-columns:minmax(0,1fr); }
.msg .qui{ font-size:var(--taille-legende); color:var(--craie-3); margin-bottom:3px; } .msg .qui b{ color:var(--craie-2); font-weight:var(--graisse-forte); } .msg.moi > div > .qui{ text-align:right; }
.msg .bulle{ position:relative; background:var(--quai-2); border:1px solid var(--trait-2); border-radius:var(--r-1) var(--r-3) var(--r-3) var(--r-3); padding:7px 10px; font-size:var(--taille-texte); line-height:1.5; overflow-wrap:anywhere; }
.msg.moi > div > .bulle{ background:color-mix(in oklch, var(--esp) 16%, var(--quai-2)); border-color:color-mix(in oklch, var(--esp) 35%, var(--trait-2)); border-radius:var(--r-3) var(--r-1) var(--r-3) var(--r-3); }
.msg .ment{ color:var(--esp); font-weight:var(--graisse-forte); } .msg-supprime{ color:var(--craie-4); }
.msg-outils{ position:absolute; top:-14px; right:6px; display:none; gap:1px; padding:2px; border:1px solid var(--trait-2); border-radius:var(--r-2); background:var(--quai); box-shadow:0 4px 14px color-mix(in oklab, var(--ombre-teinte) 25%, transparent); }
.msg .bulle:hover > .msg-outils, .msg .bulle:focus-within > .msg-outils{ display:flex; }
.msg-outils button{ width:24px; height:22px; display:grid; place-items:center; border:0; border-radius:var(--r-1); background:none; color:var(--craie-3); cursor:pointer; }
.msg-outils button:hover{ background:var(--quai-2); color:var(--craie); }
.msg-reacs{ display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.msg-reac{ display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border:1px solid var(--trait-2); border-radius:var(--r-3); background:none; font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-2); cursor:pointer; }
.msg-reac.is-moi{ border-color:var(--esp); color:var(--esp); }
.msg-fils:not(:empty){ margin:6px 0 0 6px; padding-left:10px; border-left:2px solid var(--trait-2); display:grid; gap:8px; }
.msg-fils .msg{ max-width:100%; }
.msg-pjs{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.msg-pj{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:1px solid var(--trait-2); border-radius:var(--r-2); background:var(--quai); font-size:var(--taille-petit); color:var(--craie-2); }
.msg-pj button{ border:0; background:none; color:var(--craie-3); cursor:pointer; }
.msg-ecrit-qui{ padding:0 14px 6px; font-size:var(--taille-legende); color:var(--craie-3); }
.msg-ecrit-qui .vit{ display:inline-flex; gap:3px; } .msg-ecrit-qui .vit i{ width:4px; height:4px; border-radius:50%; background:var(--esp); animation:msg-vit 1.2s infinite; }
.msg-ecrit-qui .vit i:nth-child(2){ animation-delay:.2s; } .msg-ecrit-qui .vit i:nth-child(3){ animation-delay:.4s; }
@keyframes msg-vit{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.msg-ecrire{ position:relative; padding:8px 10px; border-top:1px solid var(--trait-2); display:grid; gap:6px; }
.msg-ecrire-l{ display:flex; align-items:flex-end; gap:6px; } .msg-ecrire textarea{ flex:1; min-height:34px; max-height:180px; resize:none; }
.msg-reponse{ display:flex; align-items:center; justify-content:space-between; font-size:var(--taille-petit); color:var(--esp); }
.msg-pj-liste{ display:flex; flex-wrap:wrap; gap:5px; } .msg-pj-liste:empty{ display:none; }
.msg-cites{ position:absolute; bottom:100%; left:44px; display:grid; min-width:200px; padding:4px; border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai-2); box-shadow:0 8px 24px color-mix(in oklab, var(--ombre-teinte) 30%, transparent); }
.msg-cites button{ text-align:left; padding:6px 8px; border:0; border-radius:var(--r-1); background:none; color:var(--craie); font:inherit; font-size:var(--taille-petit); cursor:pointer; }
.msg-cites button:hover{ background:var(--quai-3); }
.msg-ecrire.fil-seul:not(.en-fil){ display:none; }   /* « Toute la société » : on n'y écrit qu'en fil */
.msg-seule-direction{ margin:0; padding:8px 14px; font-size:var(--taille-petit); color:var(--craie-3); border-top:1px solid var(--trait-2); }
.msg-edit{ width:100%; min-height:60px; } .msg-edit-a{ display:flex; gap:6px; margin-top:6px; }
.msg-fiche{ overflow:auto; } .msg-fiche h5{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); padding:12px 12px 4px; margin:0; }
.msg-gens, .msg-fichiers{ list-style:none; margin:0; padding:0; } .msg-gens li, .msg-fichiers li{ display:flex; align-items:center; gap:8px; padding:5px 12px; font-size:var(--taille-petit); }
.msg-fiche #gerer, .msg-fiche #quitter{ margin:6px 12px; }
.msg-choix{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 12px; max-height:220px; overflow:auto; margin:8px 0; }
@media (max-width:1180px){ .msg-app{ grid-template-columns:minmax(220px,280px) minmax(0,1fr); } .msg-fiche{ display:none !important; } }
@media (max-width:760px){
  .msg-app{ grid-template-columns:minmax(0,1fr); height:calc(100dvh - 150px); }
  .msg-app[data-zone="liste"] .msg-fil, .msg-app[data-zone="fil"] .msg-convs{ display:none; }
  .msg-retour{ display:inline-flex; } .msg{ max-width:94%; }
}

/* ── Agenda (cal-) : « Aujourd'hui », la semaine, le mois, la fenêtre « Rendez-vous » (mockups/hub_v3_agenda.html) ── */
.cal-jd{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(240px,290px); gap:12px; align-items:start; }
.cal-jd > *{ min-width:0; } .cal-pile{ display:grid; gap:12px; align-content:start; }
.cal-h5{ display:flex; gap:8px; align-items:center; margin:0; padding:11px 12px 6px; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.cal-h5 span{ font-family:var(--f-mono); letter-spacing:0; } .cal-h5 .cal-fin{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:var(--graisse-moyenne); }
.cal-jour{ display:flex; flex-wrap:wrap; gap:3px; padding:4px 10px 6px 56px; border-bottom:1px solid var(--trait-2); }
.cal-tl{ position:relative; display:grid; grid-template-columns:46px minmax(0,1fr); padding:8px 10px 12px 0; }
.cal-tl .cal-h{ grid-column:1; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); text-align:right; padding-right:8px; height:46px; transform:translateY(-6px); }
.cal-grille{ grid-column:2; position:relative; background:repeating-linear-gradient(to bottom, var(--trait-2) 0 1px, transparent 1px 46px); }
.cal-rv{ position:absolute; left:0; right:0; border-radius:var(--r-2); padding:5px 8px; font-size:var(--taille-legende); line-height:1.3; overflow:hidden; display:flex; gap:8px; align-items:flex-start;
  background:color-mix(in oklch, var(--c, var(--e-echanges)) 18%, var(--quai)); border-left:3px solid var(--c, var(--e-echanges)); color:var(--craie); text-decoration:none; }
.cal-rv:hover{ background:color-mix(in oklch, var(--c, var(--e-echanges)) 26%, var(--quai)); }
.cal-rv .cal-t{ flex:1; min-width:0; } .cal-rv b{ display:block; font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-rv span{ color:var(--craie-2); font-size:var(--taille-legende); } .cal-rv.is-court{ padding-top:2px; padding-bottom:2px; } .cal-rv.is-court .cal-t{ display:flex; gap:6px; align-items:baseline; min-width:0; } .cal-rv.is-court .cal-t > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev.is-court b{ display:inline; } .cal-ev.is-court span{ display:none; }
.cal-rv.is-passe{ opacity:.55; } .cal-rv.is-annule b{ text-decoration:line-through; }
.cal-rv.is-occupe{ background:repeating-linear-gradient(135deg, var(--quai-2) 0 6px, var(--quai) 6px 12px); border-left-color:var(--craie-4); }
.cal-rv.is-non{ opacity:.45; } .cal-rv.is-attente{ border-left-style:dashed; }
.cal-libre{ position:absolute; left:8px; font-size:var(--taille-micro); color:var(--craie-4); font-family:var(--f-mono); }
.cal-now{ position:absolute; left:-6px; right:0; height:0; border-top:2px solid var(--signal); z-index:2; pointer-events:none; }
.cal-now::before{ content:""; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--signal); }
.cal-now em{ position:absolute; right:0; top:-17px; font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--signal); }
.cal-pastille{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:var(--r-1); font-size:var(--taille-legende); font-weight:var(--graisse-forte); color:var(--craie); text-decoration:none;
  background:color-mix(in oklch, var(--c, var(--e-projets)) 18%, var(--quai)); border-left:3px solid var(--c, var(--e-projets)); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-proch{ padding:12px; display:grid; gap:10px; }
.cal-proch .cal-qd{ display:flex; align-items:baseline; gap:10px; } .cal-proch .cal-qd b{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); line-height:1.1; }
.cal-proch .cal-qd em{ margin-left:auto; font-style:normal; font-family:var(--f-mono); font-size:var(--taille-petit); color:var(--signal); white-space:nowrap; }
.cal-qui{ font-size:var(--taille-petit); color:var(--craie-3); }
.cal-ctx{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.cal-ctx > a, .cal-ctx > div{ border:1px solid var(--trait-2); border-radius:var(--r-2); padding:7px 9px; background:var(--quai-2); font-size:var(--taille-petit); color:var(--craie); text-decoration:none; }
.cal-ctx small{ display:block; font-size:var(--taille-micro); letter-spacing:.07em; text-transform:uppercase; color:var(--craie-4); font-weight:var(--graisse-forte); margin-bottom:2px; }
.cal-ctx b{ font-weight:var(--graisse-forte); } .cal-ctx span{ color:var(--craie-3); display:block; font-size:var(--taille-legende); }
.cal-points{ font-size:var(--taille-petit); line-height:1.5; } .cal-points li{ display:flex; gap:8px; padding:2px 0; } .cal-points li::before{ content:"—"; color:var(--craie-4); }
.cal-cr{ padding:11px 12px; display:flex; gap:10px; align-items:center; border-left:3px solid var(--signal); flex-wrap:wrap; }
.cal-cr > svg{ width:18px; height:18px; color:var(--signal); flex:none; } .cal-cr p{ font-size:var(--taille-petit); flex:1; min-width:200px; } .cal-cr p span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.cal-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.cal-vide{ padding:16px 12px; font-size:var(--taille-petit); color:var(--craie-3); }
.cal-mm{ padding:4px 12px 12px; } .cal-mm-hd{ display:flex; align-items:center; gap:6px; font-size:var(--taille-petit); font-weight:var(--graisse-forte); padding:10px 0 6px; } .cal-mm-hd .cal-fin{ margin-left:auto; display:flex; gap:2px; }
.cal-mm table{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:var(--taille-micro); text-align:center; }
.cal-mm th{ color:var(--craie-4); font-weight:var(--graisse-moyenne); padding:3px 0; } .cal-mm td{ padding:0; }
.cal-mm td a{ display:grid; place-items:center; height:26px; border-radius:var(--r-2); color:var(--craie-2); position:relative; text-decoration:none; }
.cal-mm td a:hover{ background:var(--quai-2); } .cal-mm td.is-hors a{ color:var(--craie-4); } .cal-mm td.is-auj a{ background:var(--signal); color:var(--nuit); font-weight:var(--graisse-forte); }
.cal-mm td.is-pris a::after{ content:""; position:absolute; bottom:3px; width:3px; height:3px; border-radius:50%; background:var(--esp); }
.cal-mm td.is-auj.is-pris a::after{ background:var(--nuit); }
.cal-reperes li{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px; padding:6px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:baseline; }
.cal-reperes li em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); }
.cal-reperes li a{ color:var(--craie); text-decoration:none; } .cal-reperes li a:hover{ text-decoration:underline; }
.cal-reperes li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.cal-reperes li i{ display:inline-block; width:7px; height:7px; border-radius:var(--r-0); background:var(--c); margin-right:6px; }
/* la semaine */
.cal-age{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,270px); gap:12px; align-items:start; } .cal-age > *{ min-width:0; }
.cal-defile{ overflow-x:auto; }
.cal-sem{ display:grid; grid-template-columns:44px repeat(7,minmax(92px,1fr)); position:relative; min-width:700px; }
.cal-sem .cal-ch{ padding:7px 8px; border-bottom:1px solid var(--trait-2); border-left:1px solid var(--trait-2); font-size:var(--taille-legende); color:var(--craie-3); text-decoration:none; }
.cal-sem .cal-ch b{ display:block; font-family:var(--f-titre); font-size:var(--taille-sous-titre); font-weight:var(--graisse-forte); color:var(--craie); line-height:1.1; }
.cal-sem .cal-ch.is-auj b{ color:var(--signal); }
.cal-sem .cal-jr{ border-left:1px solid var(--trait-2); border-bottom:1px solid var(--trait-2); padding:3px; min-height:26px; display:grid; gap:2px; align-content:start; }
.cal-sem .cal-hrs div{ height:44px; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); text-align:right; padding:0 6px; transform:translateY(-6px); }
.cal-col{ border-left:1px solid var(--trait-2); position:relative; background:repeating-linear-gradient(to bottom, transparent 0 43px, var(--trait-2) 43px 44px); cursor:copy; }
.cal-col.is-auj{ background-color:color-mix(in oklch, var(--signal) 4%, transparent); } .cal-col.is-we{ background-color:color-mix(in oklch, var(--quai-2) 60%, transparent); }
.cal-ev{ position:absolute; left:3px; right:3px; border-radius:var(--r-1); padding:3px 6px; font-size:var(--taille-legende); line-height:1.25; overflow:hidden; text-decoration:none; color:var(--craie); cursor:pointer;
  background:color-mix(in oklch, var(--c, var(--e-echanges)) 20%, var(--quai)); border-left:3px solid var(--c, var(--e-echanges)); }
.cal-ev b{ display:block; font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cal-ev span{ color:var(--craie-2); font-size:var(--taille-micro); }
.cal-ev.is-occupe{ background:repeating-linear-gradient(135deg, var(--quai-2) 0 6px, var(--quai) 6px 12px); border-left-color:var(--craie-4); color:var(--craie-2); cursor:default; }
.cal-ev.is-collegue{ border-left-style:dotted; } .cal-ev.is-annule b{ text-decoration:line-through; } .cal-ev.is-annule, .cal-ev.is-non{ opacity:.5; }
.cal-ev.is-attente{ border-left-style:dashed; } .cal-ev.is-glisse{ outline:1px dashed var(--signal); outline-offset:1px; z-index:3; opacity:.9; }
.cal-sem .cal-now{ left:0; }
.cal-calq label{ display:flex; align-items:center; gap:8px; padding:5px 12px; font-size:var(--taille-petit); cursor:pointer; }
.cal-calq label i{ width:9px; height:9px; border-radius:var(--r-1); background:var(--c); flex:none; } .cal-calq input{ accent-color:var(--signal); }
.cal-calq label .cal-n-calque{ margin-left:auto; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); }
.cal-calq select{ margin:4px 12px 12px; width:calc(100% - 24px); }
.cal-aide{ padding:10px 12px; font-size:var(--taille-petit); color:var(--craie-3); line-height:1.5; }
/* le mois */
.cal-mois{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.cal-mois .cal-jh{ padding:7px 8px; font-size:var(--taille-micro); color:var(--craie-4); text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--trait-2); }
.cal-mois .cal-c{ min-height:96px; border-right:1px solid var(--trait-2); border-bottom:1px solid var(--trait-2); padding:4px; display:grid; gap:2px; align-content:start; font-size:var(--taille-legende); }
.cal-mois .cal-c:nth-child(7n){ border-right:0; }
.cal-mois .cal-c > a.cal-n{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); padding:1px 3px; justify-self:start; text-decoration:none; border-radius:var(--r-1); }
.cal-mois .cal-c.is-hors > a.cal-n{ color:var(--craie-4); } .cal-mois .cal-c.is-auj > a.cal-n{ color:var(--nuit); background:var(--signal); }
.cal-mois .cal-e{ display:flex; gap:4px; align-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--craie-2); padding:1px 3px; border-radius:var(--r-1); text-decoration:none; }
.cal-mois .cal-e i{ width:6px; height:6px; border-radius:var(--r-0); background:var(--c); flex:none; } .cal-mois .cal-e.is-plein{ background:color-mix(in oklch, var(--c) 18%, transparent); }
.cal-mois .cal-e.is-annule span{ text-decoration:line-through; } .cal-mois .cal-plus{ font-size:var(--taille-micro); color:var(--craie-3); padding:0 3px; }
/* la fenêtre « Rendez-vous » */
.cal-form{ display:grid; gap:10px; max-width:720px; }
.cal-titre{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); border:0; border-bottom:1px solid var(--trait); background:transparent; color:var(--craie); padding:4px 0; width:100%; outline:0; }
.cal-chp{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px; align-items:center; font-size:var(--taille-petit); } .cal-chp > .cal-l{ color:var(--craie-3); }
.cal-ligne{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cal-note{ font-size:var(--taille-legende); color:var(--craie-3); padding-left:104px; } .cal-note b{ color:var(--ok); font-weight:var(--graisse-forte); }
.cal-cren{ margin-left:104px; border:1px solid var(--trait-2); border-radius:var(--r-2); overflow:hidden; font-size:var(--taille-legende); }
.cal-cren .cal-cl{ display:grid; grid-template-columns:110px repeat(11,minmax(0,1fr)); border-bottom:1px solid var(--trait-2); } .cal-cren .cal-cl:last-child{ border-bottom:0; }
.cal-cren .cal-nm{ padding:4px 6px; color:var(--craie-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-cren .cal-k{ border-left:1px solid var(--trait-2); position:relative; } .cal-cren .cal-k i{ position:absolute; top:0; bottom:0; background:color-mix(in oklch, var(--craie-4) 40%, transparent); }
.cal-cren .cal-k i.is-choix{ background:color-mix(in oklch, var(--signal) 32%, transparent); box-shadow:inset 0 0 0 1px var(--signal); }
.cal-cren .cal-ent .cal-k{ font-family:var(--f-mono); font-size:var(--taille-nano); color:var(--craie-4); padding:3px 0 3px 3px; }
.cal-cren .cal-libres{ grid-column:1 / -1; padding:5px 6px; color:var(--craie-3); display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.cal-cren .cal-libres button{ font-family:var(--f-mono); font-size:var(--taille-legende); padding:1px 7px; border:1px solid var(--trait); border-radius:var(--r-1); background:transparent; color:var(--craie-2); cursor:pointer; }
.cal-cren .cal-libres button:hover{ border-color:var(--signal); color:var(--craie); }
.cal-avec{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:4px 6px; border:1px solid var(--trait); border-radius:var(--r-2); background:var(--nuit); min-height:32px; }
.cal-avec > span{ display:inline-flex; gap:5px; align-items:center; padding:2px 4px 2px 9px; border-radius:var(--r-3); background:var(--quai-3); font-size:var(--taille-petit); }
.cal-avec > span i{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; color:var(--craie-3); cursor:pointer; font-style:normal; }
.cal-avec > span i:hover{ background:var(--quai-2); color:var(--craie); } .cal-avec > span i svg{ width:10px; height:10px; }
.cal-avec input{ flex:1; min-width:140px; border:0; background:transparent; color:var(--craie); font-size:var(--taille-petit); outline:0; padding:3px 2px; }
.cal-cx{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .cal-cx > *{ min-width:0; }
.cal-cx-carte{ padding:14px; display:grid; gap:10px; align-content:start; } .cal-cx-carte h3{ font-family:var(--f-titre); font-size:var(--taille-sous-titre); font-weight:var(--graisse-forte); }
.cal-cx-carte p{ font-size:var(--taille-petit); color:var(--craie-2); line-height:1.55; }
.cal-cx-etat{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .cal-cx-etat i{ width:7px; height:7px; border-radius:50%; background:var(--ok); } .cal-cx-etat i.bad{ background:var(--bad); }
.cal-cx-erreur{ color:var(--bad) !important; }
.cal-cx-pas{ font-size:var(--taille-petit); color:var(--craie-2); padding-left:18px; line-height:1.6; } .cal-cx-pas li{ list-style:decimal; }
.cal-cx-cals .tbl td, .cal-cx-cals .tbl th{ padding:5px 8px; }
.cal-flux td:first-child{ font-weight:var(--graisse-forte); white-space:nowrap; }
.cal-prepa{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; } .cal-prepa > *{ min-width:0; }
.cal-bloc{ padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .cal-bloc:first-child{ border-top:0; }
.cal-bloc h6{ font-size:var(--taille-micro); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); font-weight:var(--graisse-forte); margin:0 0 6px; }
.cal-h6-note{ text-transform:none; letter-spacing:0; font-weight:var(--graisse-moyenne); color:var(--craie-3); }
.cal-lst li{ display:flex; gap:8px; padding:4px 0; align-items:baseline; } .cal-lst li em{ margin-left:auto; font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); white-space:nowrap; }
.cal-lst li span{ color:var(--craie-3); }
.cal-choix{ display:flex; gap:6px; flex-wrap:wrap; } .cal-choix label{ display:inline-flex; gap:6px; align-items:center; padding:5px 9px; border:1px solid var(--trait); border-radius:var(--r-2); font-size:var(--taille-petit); cursor:pointer; }
.cal-choix label:has(input:checked){ border-color:var(--signal); background:color-mix(in oklch, var(--signal) 10%, transparent); }
.cal-choix input{ accent-color:var(--signal); }
.cal-lie{ display:flex; gap:8px; align-items:center; padding:7px 9px; border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai-2); font-size:var(--taille-petit); }
.cal-lie b{ font-weight:var(--graisse-forte); } .cal-lie span{ color:var(--craie-3); }
.cal-invites{ display:grid; gap:4px; } .cal-invites li{ display:flex; gap:8px; align-items:center; font-size:var(--taille-petit); } .cal-invites li em{ margin-left:auto; font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); }
.cal-pied{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--trait-2); } .cal-pied .cal-fin{ margin-left:auto; display:flex; gap:6px; }
@media (max-width:1280px){ .cal-jd{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .cal-jd > .cal-cote{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
@media (max-width:1180px){ .cal-age{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){
  .cal-jd, .cal-jd > .cal-cote, .cal-cx, .cal-prepa{ grid-template-columns:minmax(0,1fr); } .cal-ctx{ grid-template-columns:minmax(0,1fr); }
  .cal-chp{ grid-template-columns:minmax(0,1fr); } .cal-note, .cal-cren{ margin-left:0; padding-left:0; }
  .cal-mois .cal-c{ min-height:64px; } .cal-mois .cal-e span{ display:none; }
}

/* ── Support (su-) : la file, la demande, le miroir, qui répond (mockups/hub_v3_support.html, validée le 12/10/2026) ── */
.su-pr{ display:inline-flex; align-items:center; gap:5px; font-size:var(--taille-legende); font-weight:var(--graisse-forte); white-space:nowrap; }
.su-pr i{ width:8px; height:8px; border-radius:var(--r-0); background:var(--c, var(--craie-4)); flex:none; }
.su-pr small{ font-weight:var(--graisse-normale); color:var(--craie-3); font-size:var(--taille-legende); }
.su-chiffres{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1px; background:var(--trait-2); border:1px solid var(--trait-2); border-radius:var(--r-3); overflow:hidden; margin-bottom:12px; }
.su-chiffres > div{ background:var(--quai); padding:11px 12px; display:grid; gap:2px; }
.su-chiffres span{ font-size:var(--taille-legende); color:var(--craie-3); }
.su-chiffres b{ font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); letter-spacing:-.03em; }
.su-chiffres em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); }
.su-chiffres .bad{ color:var(--bad); } .su-chiffres .ok{ color:var(--ok); }
.su-filtres{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--trait-2); }
.su-filtres .puce[aria-pressed="true"]{ background:var(--quai-3); color:var(--craie); border-color:var(--trait-3); font-weight:var(--graisse-forte); }
.su-filtres .puce i{ width:7px; height:7px; border-radius:var(--r-0); background:var(--c); }
.su-filtres .fin{ margin-left:auto; font-size:var(--taille-legende); color:var(--craie-3); }
.su-file{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr); gap:12px; align-items:start; } .su-file > *{ min-width:0; }
.su-l{ display:grid; grid-template-columns:8px minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--trait-2); color:inherit; }
.su-l:last-child{ border-bottom:0; }
.su-l:hover{ background:var(--quai-2); } .su-l.on{ background:var(--quai-3); box-shadow:inset 2px 0 0 var(--esp); }
.su-l .p{ width:8px; height:8px; border-radius:50%; background:var(--craie-4); }
.su-l .p.h{ background:var(--bad); } .su-l .p.m{ background:var(--warn); }
.su-l b{ display:block; font-size:var(--taille-texte); font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.su-l .s{ display:flex; flex-wrap:wrap; gap:4px 9px; align-items:center; font-size:var(--taille-legende); color:var(--craie-3); margin-top:2px; }
.su-l .d{ text-align:right; font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; }
.su-l .d.retard, .su-retard{ color:var(--bad); font-weight:var(--graisse-forte); } .su-l .d.bientot, .su-bientot{ color:var(--warn); }
.su-l .q{ width:24px; height:24px; border-radius:50%; background:var(--quai-3); display:grid; place-items:center; font-size:var(--taille-nano); font-weight:var(--graisse-forte); color:var(--craie-2); }
.su-l .q.vide{ background:transparent; border:1px dashed var(--trait-3); color:var(--craie-4); }
.su-g{ margin:0; padding:8px 12px 4px; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); border-bottom:1px solid var(--trait-2); }
.su-g.retard{ color:var(--bad); }
.su-tenu{ display:inline-flex; align-items:center; gap:4px; padding:0 6px; height:17px; border:1px solid var(--trait); border-radius:var(--r-2); font-size:var(--taille-micro); font-weight:var(--graisse-forte); color:var(--craie-2); white-space:nowrap; }
.su-tenu.hub{ color:var(--esp); border-color:color-mix(in oklch, var(--esp) 40%, var(--trait)); }
.su-chp{ display:grid; grid-template-columns:104px minmax(0,1fr); gap:10px; padding:7px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:baseline; }
.su-chp:last-child{ border-bottom:0; } .su-chp > span:first-child{ color:var(--craie-3); font-size:var(--taille-legende); } .su-chp a{ color:var(--esp); }
.su-h{ padding:10px 12px 4px; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.su-tk{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:12px; align-items:start; } .su-tk > *{ min-width:0; }
.su-fil{ display:grid; gap:10px; padding:12px; }
.su-m{ border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); }
.su-m .hd{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; padding:7px 10px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-legende); color:var(--craie-3); }
.su-m .hd b{ color:var(--craie); font-weight:var(--graisse-forte); font-size:var(--taille-petit); } .su-m .hd .fin{ margin-left:auto; font-family:var(--f-mono); font-size:var(--taille-micro); }
.su-m .bd{ padding:9px 10px; font-size:var(--taille-texte); line-height:1.55; color:var(--craie-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.su-m.nous{ border-color:color-mix(in oklch, var(--esp) 30%, var(--trait-2)); }
.su-m.su-interne{ background:color-mix(in oklch, var(--warn) 7%, var(--quai)); border-style:dashed; }
.su-m.su-interne .hd b{ color:var(--warn); }
.su-m.su-echec{ border-color:var(--bad-tr, var(--bad)); } .su-m.su-echec .hd b{ color:var(--bad); }
.su-ecrire{ display:grid; gap:8px; padding:10px; } .su-ecrire textarea{ min-height:120px; resize:vertical; }
.su-ecrire .pied{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .su-ecrire .pied > span{ margin-right:auto; font-size:var(--taille-legende); color:var(--craie-3); }
.su-gestes{ display:grid; gap:8px; padding:10px 12px; border-top:1px solid var(--trait-2); }
.su-gestes form{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .su-gestes select, .su-gestes input{ min-width:0; flex:1 1 120px; }
.su-liens a{ display:flex; align-items:center; gap:8px; padding:7px 12px; font-size:var(--taille-petit); border-bottom:1px solid var(--trait-2); }
.su-liens a:last-child{ border-bottom:0; } .su-liens a:hover{ background:var(--quai-2); }
.su-liens a span{ margin-left:auto; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; }
.su-journal li{ display:flex; gap:8px; padding:6px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-legende); color:var(--craie-3); }
.su-journal li:last-child{ border-bottom:0; } .su-journal li b{ color:var(--craie-2); font-weight:var(--graisse-forte); } .su-journal li span{ margin-left:auto; font-family:var(--f-mono); font-size:var(--taille-micro); white-space:nowrap; }
.su-2{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:12px; align-items:start; } .su-2 > *{ min-width:0; }
.su-lecons li{ padding:9px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); line-height:1.5; }
.su-lecons li:last-child{ border-bottom:0; } .su-lecons li b{ display:block; font-weight:var(--graisse-forte); } .su-lecons li span{ color:var(--craie-3); font-size:var(--taille-legende); }
.su-sens{ display:grid; grid-template-columns:minmax(0,1fr) 150px minmax(0,1.1fr) 150px minmax(0,1fr); align-items:stretch; padding:14px 12px; }
.su-sens .boite{ border:1px solid var(--trait); border-radius:var(--r-3); background:var(--quai); padding:10px 12px; display:grid; gap:4px; align-content:start; }
.su-sens .boite.hub{ border-color:color-mix(in oklch, var(--esp) 45%, var(--trait)); }
.su-sens .boite b{ font-family:var(--f-titre); font-size:var(--taille-sous-titre); font-weight:var(--graisse-forte); }
.su-sens .boite span{ font-size:var(--taille-legende); color:var(--craie-3); line-height:1.5; }
.su-sens .fl{ display:grid; align-content:center; justify-items:center; gap:12px; font-size:var(--taille-legende); color:var(--craie-3); text-align:center; white-space:nowrap; }
.su-regle{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .su-regle select{ min-width:0; flex:1 1 130px; } .su-regle .txt{ width:74px; }
@media (max-width:1000px){ .su-file, .su-tk, .su-2{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){ .su-sens{ grid-template-columns:minmax(0,1fr); gap:8px; } .su-sens .fl{ display:none; } .su-l{ grid-template-columns:8px minmax(0,1fr) auto; } .su-l .q{ display:none; } }
.su-arbre li{ display:flex; align-items:center; gap:8px; padding:7px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.su-arbre li:last-child{ border-bottom:0; } .su-arbre li.sous{ padding-left:30px; color:var(--craie-2); }
.su-arbre li > span:last-child{ margin-left:auto; font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); }
.su-arbre a{ color:inherit; } .su-arbre a:hover{ text-decoration:underline; } .su-arbre li.on{ background:var(--quai-3); }
.su-brouillon{ border:1px solid color-mix(in oklch, var(--esp) 45%, var(--trait-2)); border-radius:var(--r-3); background:color-mix(in oklch, var(--esp) 6%, var(--quai)); }
.su-brouillon .hd{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:8px 10px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.su-brouillon .hd b{ font-weight:var(--graisse-forte); } .su-brouillon .hd .fin{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.su-brouillon textarea{ display:block; width:100%; min-height:170px; border:0; border-radius:0; background:transparent; padding:10px; font-size:var(--taille-texte); line-height:1.6; resize:vertical; }
.su-brouillon .bd{ padding:10px; font-size:var(--taille-texte); line-height:1.6; color:var(--craie-2); }
.su-brouillon .src{ display:grid; gap:4px; padding:8px 10px; border-top:1px solid var(--trait-2); font-size:var(--taille-legende); color:var(--craie-3); }
.su-brouillon .src a{ color:var(--esp); } .su-brouillon .src b{ color:var(--craie-2); font-weight:var(--graisse-forte); }
.su-brouillon .ft{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 10px; border-top:1px solid var(--trait-2); }
.su-brouillon .ft > span{ font-size:var(--taille-legende); color:var(--craie-3); margin-right:auto; }
.su-article{ padding:14px 16px; font-size:var(--taille-texte); line-height:1.65; color:var(--craie-2); white-space:pre-wrap; overflow-wrap:anywhere; max-width:78ch; }
/* ── fin su- ── */

/* ── Produits (pd-) : une ligne par produit, ce qui tourne, les livraisons (mockups/hub_v3_produits_projets.html, validée le 13/10/2026) ── */
.pd-prod{ display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(0,1.5fr) repeat(4, minmax(74px,.55fr)); gap:10px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--trait-2); color:inherit; }
.pd-prod:last-child{ border-bottom:0; } a.pd-prod:hover{ background:var(--quai-2); }
.pd-prod .nom{ display:flex; align-items:center; gap:8px; font-family:var(--f-titre); font-size:var(--taille-sous-titre); font-weight:var(--graisse-forte); }
.pd-prod .nom i{ width:10px; height:10px; border-radius:var(--r-1); background:var(--c); flex:none; }
.pd-prod .v{ font-size:var(--taille-petit); color:var(--craie-2); line-height:1.5; }
.pd-code{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); }
.pd-prod .c{ text-align:right; font-family:var(--f-mono); font-size:var(--taille-texte); } .pd-prod .c small{ display:block; font-family:var(--f-corps, inherit); font-size:var(--taille-micro); color:var(--craie-3); }
.pd-prod .c.bad{ color:var(--bad); } .pd-prod .c.warn{ color:var(--warn); }
.pd-prod.tete{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); padding-top:7px; padding-bottom:7px; }
.pd-prod.tete .c{ font-family:inherit; font-size:var(--taille-micro); }
.pd-v{ display:grid; grid-template-columns:118px minmax(0,1fr) auto; gap:12px; padding:10px 12px; border-bottom:1px solid var(--trait-2); align-items:start; }
.pd-v:last-child{ border-bottom:0; } .pd-v time{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); padding-top:2px; }
.pd-v b{ font-size:var(--taille-texte); font-weight:var(--graisse-forte); display:block; } .pd-v p{ font-size:var(--taille-petit); color:var(--craie-2); line-height:1.5; margin-top:2px; }
.pd-ev{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--trait-2); color:inherit; }
.pd-ev:last-child{ border-bottom:0; } a.pd-ev:hover, .pd-ev.on{ background:var(--quai-2); } .pd-ev.on{ box-shadow:inset 2px 0 0 var(--esp); }
.pd-ev b{ font-size:var(--taille-texte); font-weight:var(--graisse-forte); display:block; } .pd-ev span.s{ font-size:var(--taille-legende); color:var(--craie-3); }
.pd-ev .n{ font-family:var(--f-mono); font-size:var(--taille-texte); text-align:right; } .pd-ev .n small{ display:block; font-size:var(--taille-micro); color:var(--craie-3); font-family:var(--f-corps, inherit); }
.pd-form{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .pd-form .txt, .pd-form .sel{ flex:1 1 150px; min-width:0; }
.pd-form--col{ padding:10px 12px; }
.pd-v--lien{ color:inherit; } a.pd-v--lien:hover, .pd-v--lien.on{ background:var(--quai-2); } .pd-v--lien.on{ box-shadow:inset 2px 0 0 var(--esp); }
.pd-prop{ margin:10px 12px 0; padding:8px 10px; border:1px dashed var(--trait-3); border-radius:var(--r-3); font-size:var(--taille-petit); } .pd-prop p{ margin-top:4px; font-size:var(--taille-petit); line-height:1.5; }
.pd-ecrire{ flex-direction:column; align-items:stretch; } .pd-ecrire > .txt, .pd-ecrire > .sel{ flex:none; width:100%; } .pd-ecrire textarea{ resize:vertical; }
.pd-livre{ display:grid; gap:4px; font-size:var(--taille-petit); } .pd-fus{ margin:0; padding:4px 12px 10px 28px; font-size:var(--taille-legende); color:var(--craie-2); line-height:1.6; }
@media (max-width:1000px){ .pd-prod{ grid-template-columns:minmax(0,1fr) auto auto; } .pd-prod .v{ grid-column:1 / -1; order:5; } .pd-prod .c:nth-child(n+4){ display:none; } .pd-prod.tete{ display:none; } }
/* ── fin pd- ── */
/* ── Projets (pj-) : la liste par avancement, la fiche en lots (mockups/hub_v3_produits_projets.html, validée le 13/10/2026) ── */
.pj-barre{ display:block; height:6px; border-radius:var(--r-1); background:var(--quai-3); overflow:hidden; min-width:90px; margin-bottom:3px; } .pj-barre i{ display:block; height:100%; background:var(--ok); }
.pj-barre.retard i{ background:var(--bad); }
.pj-l{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(110px,.7fr) minmax(90px,.5fr) auto; gap:12px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--trait-2); color:inherit; }
.pj-l:last-child{ border-bottom:0; } .pj-l:hover{ background:var(--quai-2); } .pj-l b{ font-size:var(--taille-texte); font-weight:var(--graisse-forte); display:block; }
.pj-l .s{ font-size:var(--taille-legende); color:var(--craie-3); } .pj-l .d{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); text-align:right; white-space:nowrap; } .pj-l .d.retard{ color:var(--bad); font-weight:var(--graisse-forte); }
.pj-but{ margin-bottom:12px; padding:10px 12px; font-size:var(--taille-texte); line-height:1.55; white-space:pre-line; }
.pj-lot{ border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); margin:10px 12px; }
.pj-lot > header{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); flex-wrap:wrap; }
.pj-lot > header b{ font-weight:var(--graisse-forte); } .pj-lot > header .fin{ margin-left:auto; font-size:var(--taille-legende); color:var(--craie-3); }
.pj-t{ display:grid; grid-template-columns:16px minmax(0,1fr) auto auto auto auto; gap:9px; align-items:center; padding:7px 10px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.pj-t:last-child{ border-bottom:0; } .pj-t form{ display:contents; } .pj-t a{ color:inherit; } .pj-t a:hover{ text-decoration:underline; }
.pj-c{ width:13px; height:13px; padding:0; border-radius:var(--r-1); border:1.5px solid var(--trait-3); background:transparent; cursor:pointer; display:block; } .pj-c:hover{ border-color:var(--signal); }
.pj-c--ailleurs{ border-style:dotted; cursor:default; }
.pj-t.faite .pj-c{ background:var(--ok); border-color:var(--ok); } .pj-t.faite > span:not(.q){ color:var(--craie-3); } .pj-t.faite > span:nth-child(2){ text-decoration:line-through; }
.pj-t .q{ width:22px; height:22px; border-radius:50%; background:var(--quai-3); display:grid; place-items:center; font-size:var(--taille-nano); font-weight:var(--graisse-forte); color:var(--craie-2); }
.pj-t .d{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); white-space:nowrap; } .pj-t .d.retard{ color:var(--bad); }
.pj-range .sel{ height:24px; padding:0 20px 0 6px; font-size:var(--taille-legende); min-width:0; width:86px; }
.pj-regler{ border-top:1px solid var(--trait-2); } .pj-regler > summary{ padding:6px 10px; font-size:var(--taille-legende); color:var(--craie-3); cursor:pointer; list-style:none; } .pj-regler > summary:hover{ color:var(--craie); }
.pj-regler[open] > summary{ color:var(--craie-2); } .pj-regler .pd-form{ padding:4px 10px 8px; }
.pj-ajout{ padding:8px 12px; border-top:1px solid var(--trait-2); }
@media (max-width:1000px){ .pj-l{ grid-template-columns:minmax(0,1fr) auto; } .pj-l > :nth-child(2), .pj-l > :nth-child(3){ display:none; } .pj-t{ grid-template-columns:16px minmax(0,1fr) auto; } .pj-t .q, .pj-range{ display:none; } }
.pj-charge{ display:grid; grid-template-columns:150px repeat(5, minmax(0,1fr)); gap:1px; background:var(--trait-2); border-bottom:1px solid var(--trait-2); }
.pj-charge > div{ background:var(--quai); padding:8px 10px; font-size:var(--taille-legende); min-height:54px; min-width:0; } .pj-charge .j{ font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.08em; text-transform:uppercase; color:var(--craie-4); min-height:0; }
.pj-charge .j.auj{ color:var(--esp); } .pj-charge .p{ font-weight:var(--graisse-forte); font-size:var(--taille-petit); } .pj-charge .p .trop{ display:block; font-weight:var(--graisse-normale); color:var(--warn); font-size:var(--taille-micro); } .pj-charge .p .trop.retard{ color:var(--bad); }
.pj-charge em, .pj-charge a.t{ display:block; font-style:normal; padding:2px 6px; margin-bottom:3px; border-radius:var(--r-1); background:var(--quai-3); color:var(--craie-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pj-charge a.t:hover{ color:var(--craie); } .pj-charge em.retard, .pj-charge a.t.retard{ box-shadow:inset 2px 0 0 var(--bad); } .pj-charge .lot{ background:transparent; border:1px dashed var(--trait-3); }
.pj-charge .abs{ color:var(--craie-3); font-size:var(--taille-legende); }
@media (max-width:1000px){ .pj-charge{ grid-template-columns:96px repeat(5, minmax(84px,1fr)); overflow-x:auto; } }
.pj-lien{ display:flex; gap:6px; padding:8px 12px; } .pj-lien code{ flex:1; min-width:0; padding:6px 9px; border:1px solid var(--trait-2); border-radius:var(--r-2); background:var(--nuit); font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-range .sel.pj-vue{ border-color:var(--esp); color:var(--craie); } .pj-range + .pj-range .sel{ width:86px; } .pj-range:has([name="vue"]) .sel{ width:118px; }
.pj-dit{ display:inline; } .pj-dit-b{ white-space:nowrap; margin-left:6px; padding:1px 7px; border:1px solid var(--trait-3); border-radius:var(--r-5); background:transparent; font-size:var(--taille-micro); color:var(--craie-3); cursor:pointer; } .pj-dit-b:hover{ color:var(--craie); } .pj-dit-b.on{ border-color:var(--esp); color:var(--esp); }
.pj-dit-fait{ display:block; font-size:var(--taille-legende); color:var(--warn); } .pj-dit-fait form{ display:inline; }
/* ── fin pj- ── */
/* ── Le suivi d'un projet pour son client (sv-) : hors du Hub, dans externe.html (mockups/hub_v3_portail_client.html, validée le 13/10/2026) ── */
.sv{ max-width:860px; margin:0 auto; padding:14px 0 10px; font-size:var(--taille-lecture); line-height:1.55; }
.sv h1{ font-family:var(--f-titre); font-size:var(--taille-hero); font-weight:var(--graisse-forte); line-height:1.12; } .sv-sous{ margin-top:6px; font-size:var(--taille-texte); color:var(--craie-2); }
.sv-but{ margin:16px 0 18px; padding:12px 14px; border-left:3px solid var(--signal); background:var(--quai); border-radius:0 var(--r-3) var(--r-3) 0; white-space:pre-line; }
.sv-etat{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:var(--taille-petit); color:var(--craie-3); }
.sv-frise{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin:12px 0 4px; padding:0; list-style:none; }
.sv-frise li{ padding:10px 12px; border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); font-size:var(--taille-texte); }
.sv-frise li::before{ content:''; display:block; height:4px; border-radius:var(--r-0); background:var(--quai-3); margin-bottom:9px; }
.sv-frise .fini::before{ background:var(--ok); } .sv-frise .cours{ border-color:var(--signal); } .sv-frise .cours::before{ background:linear-gradient(90deg, var(--signal) 55%, var(--quai-3) 55%); }
.sv-frise b{ display:block; font-weight:var(--graisse-forte); } .sv-frise small{ display:block; margin-top:3px; font-size:var(--taille-legende); color:var(--craie-3); } .sv-frise small.retard{ color:var(--warn); }
.sv h2{ margin:26px 0 8px; font-family:var(--f-titre); font-size:var(--taille-sous-titre); font-weight:var(--graisse-forte); } .sv h2 small{ font-family:var(--f-corps, inherit); font-size:var(--taille-petit); font-weight:var(--graisse-normale); color:var(--craie-3); margin-left:8px; }
.sv-l{ display:flex; gap:12px; align-items:baseline; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--trait-2); } .sv-l:last-child{ border-bottom:0; }
.sv-l small{ display:block; font-size:var(--taille-petit); color:var(--craie-3); } .sv-l .d{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; } .sv-l .d.retard{ color:var(--warn); font-weight:var(--graisse-forte); }
.sv-vous{ border:1px solid var(--signal); border-radius:var(--r-3); padding:2px 14px; background:var(--quai); }
.sv-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:0 26px; }
.sv-rien{ color:var(--craie-3); font-size:var(--taille-texte); padding:6px 0; } .sv-pied{ margin-top:28px; padding-top:14px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); color:var(--craie-3); }
@media (max-width:560px){ .sv h1{ font-size:var(--taille-grand); } }
.sv-l form{ display:inline; } .sv-l .dit{ font-size:var(--taille-petit); color:var(--craie-3); }
.sv-agir{ margin-top:10px; padding:10px 14px; border:1px dashed var(--trait-3); border-radius:var(--r-3); font-size:var(--taille-texte); } .sv-agir form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; } .sv-agir .txt{ flex:1 1 200px; min-width:0; }
.sv-ecrire{ display:grid; gap:8px; } .sv-ecrire textarea{ width:100%; resize:vertical; } .sv-ecrire > div{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:var(--taille-petit); color:var(--craie-3); }
.sv-l a{ color:inherit; text-decoration:underline; text-underline-offset:3px; } .sv-l a:hover{ color:var(--signal); }
/* ── fin sv- ── */
/* ── Réglages › Automatisations (au-) : les flux n8n par la porte de l'IA (mockups/hub_v3_n8n_porte.html, validée le 14/10/2026) ── */
.au-l{ display:grid; grid-template-columns:minmax(0,1.5fr) auto minmax(120px,.7fr) auto; gap:12px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.au-l b{ display:block; font-size:var(--taille-texte); font-weight:var(--graisse-forte); } .au-l .s{ display:block; font-size:var(--taille-legende); color:var(--craie-3); margin-top:1px; } .au-l .n{ font-family:var(--f-mono); font-size:var(--taille-legende); }
.au-gestes{ display:flex; gap:6px; align-items:flex-start; justify-self:end; } .au-gestes > form{ display:inline; } .au-gestes details > summary{ list-style:none; cursor:pointer; }
.au-gestes details[open]{ position:relative; } .au-gestes details[open] > :not(summary){ max-width:520px; }
.au-noeud{ max-height:220px; overflow:auto; padding:8px; border:1px solid var(--trait-2); border-radius:var(--r-2); background:var(--nuit); font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-2); white-space:pre; }
@media (max-width:1000px){ .au-l{ grid-template-columns:minmax(0,1fr) auto; } .au-l > :nth-child(3){ display:none; } }
/* ── fin au- ── */

/* ── Tâches (tk-) : « Mes tâches », celles que j'ai confiées, le détail (mockups/hub_v3_taches.html) ── */
.tk{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:12px; align-items:start; } .tk > *{ min-width:0; }
.tk-rouge{ color:var(--bad); }
.tk-ajout{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:8px 10px; border-bottom:1px solid var(--trait-2); }
.tk-ajout > svg{ color:var(--signal); flex:none; }
.tk-ajout input[name="texte"]{ flex:1; min-width:180px; border:0; background:transparent; color:var(--craie); font-size:var(--taille-texte); outline:0; padding:5px 2px; }
.tk-lu{ font-size:var(--taille-legende); color:var(--craie-3); display:flex; gap:6px; flex-wrap:wrap; }
.tk-lu span{ padding:1px 7px; border-radius:var(--r-3); background:var(--quai-3); color:var(--craie-2); } .tk-lu span.tk-ignore{ background:none; color:var(--warn); padding:1px 0; }
.tk-g{ display:flex; gap:8px; align-items:center; margin:0; padding:10px 12px 5px; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); border-bottom:1px solid var(--trait-2); }
.tk-g span{ font-family:var(--f-mono); letter-spacing:0; } .tk-g.retard{ color:var(--bad); }
.tk-l{ display:grid; grid-template-columns:20px minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:7px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); }
.tk-l:hover{ background:var(--quai-2); } .tk-l.on{ background:var(--quai-3); box-shadow:inset 2px 0 0 var(--esp); }
.tk-c{ width:16px; height:16px; padding:0; border-radius:var(--r-1); border:1.5px solid var(--craie-4); background:transparent; display:grid; place-items:center; color:var(--nuit); cursor:pointer; }
.tk-c svg{ width:11px; height:11px; } .tk-c:hover{ border-color:var(--signal); }
.tk-c--ailleurs{ border-style:dotted; cursor:default; }
.tk-l.fait .tk-c, .tk-sous li.fait .tk-c{ background:var(--ok); border-color:var(--ok); }
.tk-l.fait .tk-t b{ text-decoration:line-through; color:var(--craie-3); }
.tk-t{ min-width:0; color:var(--craie); text-decoration:none; } .tk-t b{ font-weight:var(--graisse-moyenne); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-t span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-q{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); white-space:nowrap; } .tk-q.retard{ color:var(--bad); } .tk-q.auj{ color:var(--signal); }
.tk-a{ display:flex; gap:4px; align-items:center; }
.tk-av{ width:20px; height:20px; border-radius:50%; background:var(--quai-3); display:grid; place-items:center; font-size:var(--taille-nano); font-weight:var(--graisse-forte); color:var(--craie-2); }
.tk-src{ font-size:var(--taille-micro); padding:1px 6px; border-radius:var(--r-1); border:1px solid var(--trait); color:var(--craie-3); white-space:nowrap; }
.tk-det{ padding:14px; display:grid; gap:10px; position:sticky; top:12px; }
.tk-det .chp{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:8px; align-items:center; font-size:var(--taille-petit); } .tk-det .chp > span:first-child{ color:var(--craie-3); }
.tk-origine{ display:flex; gap:8px; align-items:center; padding:7px 9px; border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai-2); font-size:var(--taille-petit); }
.tk-origine b{ font-weight:var(--graisse-forte); } .tk-origine span{ color:var(--craie-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-ouvrir{ margin-left:auto; color:var(--esp); white-space:nowrap; }
.tk-sous li{ display:flex; gap:8px; align-items:center; padding:3px 0; font-size:var(--taille-petit); } .tk-sous li > span{ flex:1; min-width:0; }
.tk-sous li.fait > span{ text-decoration:line-through; color:var(--craie-3); }
.tk-retirer{ opacity:0; } .tk-sous li:hover .tk-retirer{ opacity:1; }
.tk-etape-ajout{ flex:1; } .tk-etape-ajout input{ width:100%; }
.tk-titre{ resize:none; line-height:1.2; font-size:var(--taille-sous-titre); }
.tk-fiche{ margin-top:12px; } .tk-fiche .panel-hd{ display:flex; align-items:center; gap:8px; }
.tk-hist{ font-size:var(--taille-legende); color:var(--craie-3); border-top:1px solid var(--trait-2); padding-top:8px; display:grid; gap:3px; }
@media (max-width:1100px){ .tk{ grid-template-columns:minmax(0,1fr); } .tk-det{ position:static; } }
@media (max-width:760px){ .tk-l{ grid-template-columns:20px minmax(0,1fr) auto; } .tk-l .tk-a{ display:none; } }

/* Le fil de la mise en service d'un contrat (lot PC1) : une étape par case, l'état se lit sans ouvrir. */
.fil-mes{ display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); list-style:none; margin:0; padding:12px 14px 14px; }
.fil-mes li{ position:relative; padding-right:6px; min-width:0; }
.fil-mes li::before{ content:''; position:absolute; left:0; right:0; top:9px; height:2px; background:var(--trait-3); }
.fil-mes li.ok::before{ background:var(--ok); }
.fil-mes li.ici::before{ background:linear-gradient(90deg,var(--ok) 50%,var(--trait-3) 50%); }
.fil-mes i{ position:relative; display:block; width:20px; height:20px; border-radius:50%; background:var(--quai-3); border:2px solid var(--trait-3); }
.fil-mes li.ok i{ background:var(--ok); border-color:var(--ok); }
.fil-mes li.ici i{ background:var(--nuit); border-color:var(--warn); }
.fil-mes b{ display:block; margin-top:7px; font-size:var(--taille-petit); font-weight:var(--graisse-forte); }
.fil-mes span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fil-mes li.ici span{ color:var(--warn); }
@media (max-width:640px){ .fil-mes{ grid-template-columns:1fr; gap:10px; } .fil-mes li::before{ display:none; } }

/* Réglages › Modèles de documents (lot PC9) : réglages à gauche, aperçu « papier » à droite. */
.md-ed{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:16px; align-items:start; }
.md-grp{ padding:10px 14px; border-top:1px solid var(--trait-2); display:grid; gap:8px; font-size:var(--taille-petit); }
.md-grp:first-child{ border-top:0; }
.md-grp h4{ margin:0; font-size:var(--taille-legende); color:var(--craie-3); font-weight:var(--graisse-forte); text-transform:uppercase; letter-spacing:.04em; }
.md-lgn{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.md-feuille{ background:var(--papier-creme); color:var(--encre-noire); border-radius:var(--r-2); padding:28px 30px; box-shadow:0 10px 30px color-mix(in oklab, var(--ombre-teinte) 35%, transparent); min-height:520px; font-size:var(--taille-legende); position:sticky; top:12px; }
.md-tete{ display:flex; justify-content:space-between; border-bottom:2px solid var(--md-accent); padding-bottom:10px; margin-bottom:12px; }
.md-num{ text-align:right; } .md-num b{ font-size:var(--taille-lecture); }
.md-logo{ max-height:36px; max-width:160px; display:block; margin-bottom:6px; }
.md-parties{ display:flex; gap:30px; margin:0 0 12px; color:var(--encre-grise); }
.md-feuille table{ width:100%; border-collapse:collapse; margin-top:8px; }
.md-feuille th{ text-align:left; font-size:var(--taille-nano); text-transform:uppercase; color:var(--encre-3); border-bottom:1px solid var(--md-accent); padding:4px 0; }
.md-feuille td{ padding:5px 0; border-bottom:1px solid var(--filet-papier-2); } .md-feuille .r{ text-align:right; }
.md-petit{ margin-top:12px; color:var(--encre-3); font-size:var(--taille-nano); }
.md-accord{ margin-top:14px; border:1px solid var(--filet-papier-3); height:60px; padding:6px; color:var(--encre-3); font-size:var(--taille-nano); }
@media (max-width:900px){ .md-ed{ grid-template-columns:1fr; } .md-feuille{ position:static; } }

/* Pilotage › Pièces en cours : le fil d'une affaire, la ligne neuve, le message qui arrive en direct */
.pc-tbl td{ vertical-align:middle; }
.pc-sous{ display:block; color:var(--craie-3); font-size:var(--taille-legende); margin-top:2px; }
.pc-fil{ display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
.pc-fil i{ font-style:normal; font-size:var(--taille-legende); padding:2px 8px; border-radius:var(--r-3); border:1px solid var(--trait-2); color:var(--craie-3); white-space:nowrap; }
.pc-fil i.pc-ok{ color:var(--ok); border-color:var(--ok-tr); }
.pc-fil i.pc-ici{ color:var(--warn); border-color:var(--warn); font-weight:var(--graisse-forte); }
.pc-fil s{ text-decoration:none; color:var(--craie-3); font-size:var(--taille-micro); }
.pc-tbl tr.is-neuf td{ background:var(--warn-bg); transition:background 2s; }
.pc-tbl tr.is-urgent td:first-child{ box-shadow:inset 3px 0 0 var(--bad); }
.toast-direct{ position:fixed; right:22px; bottom:22px; width:min(340px, calc(100vw - 32px)); z-index:60; background:var(--quai);
  border:1px solid var(--signal); border-radius:var(--r-3); padding:12px 14px; font-size:var(--taille-petit); box-shadow:0 10px 30px color-mix(in oklab, var(--ombre-teinte) 45%, transparent); }
.toast-direct b{ display:block; margin-bottom:3px; }
.toast-direct p{ margin:0; color:var(--craie-3); font-size:var(--taille-legende); }
.toast-direct .act{ display:flex; gap:6px; margin-top:9px; }

/* ══════════════════════════════════════════════════════════════════════
   PROSPECTION — Commercial › Prospection, Bilan, fiche d'une affaire
   Maquette : mockups/hub_v3_prospection.html. Tout est préfixé « pr- ».
   ══════════════════════════════════════════════════════════════════════ */
/* Tableau ou liste : le choix est mémorisé et lu avant le premier rendu (data-pr-vue sur <html>). */
:root[data-pr-vue="liste"] .pr-vue-tableau{ display:none; }
:root:not([data-pr-vue="liste"]) .pr-vue-liste{ display:none; }
/* Les chiffres de tête */
.pr-chiffres{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); margin-bottom:12px; }
.pr-chiffres > div{ padding:10px 14px; border-right:1px solid var(--trait-2); min-width:0; }
.pr-chiffres > div:last-child{ border-right:0; }
.pr-chiffres .k{ display:block; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.pr-chiffres .v{ font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); display:block; margin-top:2px; }
.pr-chiffres .s{ font-size:var(--taille-legende); color:var(--craie-3); display:block; }
.pr-chiffres .s b{ color:var(--warn); font-weight:var(--graisse-forte); }
/* Le contenu, et la fiche à droite quand une affaire est choisie */
.pr{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-items:start; }
.pr.is-fiche{ grid-template-columns:minmax(0,1fr) minmax(300px,350px); }
.pr > *{ min-width:0; }
.pr:not(.is-fiche) > .pr-fiche{ display:none; }
.pr.is-fiche .pr-tbl .col-plus{ display:none; }
/* Le tableau par étapes */
.pr-tableau{ display:grid; grid-template-columns:repeat(5,minmax(196px,1fr)); gap:8px; overflow-x:auto; padding-bottom:4px; }
.pr-col{ grid-template-columns:minmax(0,1fr); background:var(--quai); border:1px solid var(--trait-2); border-radius:var(--r-3); padding:0 6px 6px; display:grid; gap:6px; align-content:start; min-width:0; min-height:120px;
  transition:border-color var(--t), background var(--t); }
.pr-col.is-dessus{ border-color:var(--esp); background:var(--quai-2); }
.pr-col header{ display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:2px 6px; align-items:baseline; padding:9px 12px 7px; border-bottom:1px solid var(--trait-2); margin:0 -6px 2px; }
.pr-col header b{ font-family:var(--f-titre); font-size:var(--taille-lecture); font-weight:var(--graisse-forte); }
.pr-col header .n{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); }
.pr-col header .v{ text-align:right; font-size:var(--taille-legende); color:var(--craie-2); }
.pr-col header .d{ grid-column:1 / -1; font-size:var(--taille-legende); color:var(--craie-3); }
.pr-carte{ grid-template-columns:minmax(0,1fr); background:var(--quai-2); border:1px solid var(--trait-2); border-radius:var(--r-2); padding:8px 9px; display:grid; gap:5px; cursor:grab; min-width:0; border-left:3px solid var(--trait);
  transition:border-color var(--t), background var(--t), opacity var(--t); }
.pr-carte:hover{ border-color:var(--trait-3); border-left-color:var(--trait-3); }
.pr-carte:focus-visible{ outline:2px solid var(--signal); outline-offset:1px; }
.pr-carte[aria-current="true"]{ background:var(--quai-3); border-color:var(--esp); border-left-color:var(--esp); }
.pr-carte.is-chaud{ border-left-color:var(--signal); } .pr-carte.is-retard{ border-left-color:var(--bad); }
.pr-carte.is-prise{ opacity:.45; }
.pr-carte .l1{ display:flex; gap:6px; align-items:center; } .pr-carte .l1 .tag{ flex:none; }
.pr-carte .l1 b{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.pr-carte .l2{ display:flex; gap:5px; align-items:baseline; font-size:var(--taille-legende); flex-wrap:wrap; } .pr-carte .l2 .mono{ font-size:var(--taille-petit); color:var(--craie); }
.pr-carte .l2 .pill{ flex-basis:100%; justify-content:center; max-width:100%; overflow:hidden; }
.pr-carte .l3{ display:flex; gap:6px; align-items:center; font-size:var(--taille-legende); padding-top:5px; border-top:1px dashed var(--trait-2); }
.pr-carte .l3 > span:nth-child(2){ white-space:nowrap; flex:none; }
.pr-carte .l3 .quoi{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--craie-2); }
.pr-carte .l3 .avatar{ width:18px; height:18px; font-size:var(--taille-nano); }
.pr-col-vide{ font-size:var(--taille-legende); color:var(--craie-4); text-align:center; padding:14px 6px; }
.pr-col .pr-carte ~ .pr-col-vide{ display:none; }
/* La fiche de l'affaire : la prochaine action, puis le fil de ce qui s'est passé. */
.pr-fiche .hd h2{ font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); line-height:1.15; overflow-wrap:anywhere; }
.pr-fiche .hd{ padding:12px; border-bottom:1px solid var(--trait-2); display:grid; gap:6px; }
.pr-fiche .hd p{ font-size:var(--taille-petit); color:var(--craie-3); }
.pr-fiche .hd .haut{ display:flex; align-items:flex-start; gap:8px; } .pr-fiche .hd .haut h2{ flex:1; min-width:0; }
.pr-etapes{ display:flex; gap:2px; } .pr-etapes i{ flex:1; height:4px; border-radius:var(--r-0); background:var(--trait); } .pr-etapes i.f{ background:var(--esp); }
.pr-suite{ margin:12px; padding:10px 12px; border:1px solid color-mix(in oklch, var(--signal) 45%, var(--trait)); border-radius:var(--r-2); background:color-mix(in oklch, var(--signal) 8%, transparent); display:grid; gap:6px; }
.pr-suite .sur-titre{ color:var(--signal); } .pr-suite b{ font-size:var(--taille-texte); overflow-wrap:anywhere; } .pr-suite p{ font-size:var(--taille-petit); color:var(--craie-2); }
:root[data-theme="light"] .pr-suite .sur-titre{ color:var(--craie-2); }
.pr-suite--vide{ border-color:var(--bad-tr); background:var(--bad-bg); } .pr-suite--vide .sur-titre{ color:var(--bad); }
.pr-suite--close{ border-color:var(--trait); background:var(--quai-2); } .pr-suite--close .sur-titre{ color:var(--craie-3); }
.pr-fil{ padding:4px 12px 10px; } .pr-fil li{ display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:9px; padding:8px 0; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; overflow-wrap:anywhere; }
.pr-fil li:first-child{ border-top:0; } .pr-fil li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); white-space:pre-line; } .pr-fil li em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); white-space:nowrap; }
.pr-fil .lg{ margin-top:2px; }
.pr-fil a{ text-decoration:underline; text-decoration-color:var(--trait-3); text-underline-offset:3px; } .pr-fil a:hover{ text-decoration-color:currentColor; }
.pr-fiche-page{ max-width:760px; }
/* Le bilan */
.pr-perdu{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pr-barre{ display:grid; grid-template-columns:150px minmax(0,1fr) 52px; gap:8px; align-items:center; padding:5px 12px; font-size:var(--taille-petit); }
.pr-barre:last-child{ padding-bottom:10px; } .panel-hd + .pr-barre{ padding-top:10px; }
.pr-barre > span:first-child small{ display:block; font-size:var(--taille-micro); color:var(--craie-4); }
.pr-barre i{ height:8px; border-radius:var(--r-1); background:var(--esp); display:block; min-width:2px; } .pr-barre--bad i{ background:var(--bad); }
.pr-barre span:last-child{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); text-align:right; }
.pr-rien{ padding:18px 12px; font-size:var(--taille-petit); color:var(--craie-3); text-align:center; }
/* La vue liste : une ligne par affaire, triable, avec actions par lot. */
.pr-tbl td{ vertical-align:middle; } .pr-tbl td.c,.pr-tbl th.c{ width:28px; padding-right:0; }
.pr-tbl .nom b{ display:block; font-weight:var(--graisse-forte); } .pr-tbl .nom span{ font-size:var(--taille-legende); color:var(--craie-3); }
.pr-tbl tr.pr-l td:first-child{ box-shadow:inset 3px 0 0 transparent; }
.pr-tbl tr.is-chaud td:first-child{ box-shadow:inset 3px 0 0 var(--signal); } .pr-tbl tr.is-retard td:first-child{ box-shadow:inset 3px 0 0 var(--bad); }
.pr-tbl tr[aria-current="true"] td{ background:var(--quai-3); }
.pr-tbl tbody tr{ cursor:pointer; } .pr-tbl .act{ color:var(--craie); text-align:left; white-space:normal; width:auto; }
.pr-tbl .avatar{ width:20px; height:20px; font-size:var(--taille-nano); }
.pr-tbl td.col-plus{ white-space:nowrap; }
.pr-tbl tfoot td{ border-top:1px solid var(--trait); padding-top:9px; padding-bottom:9px; }
.pr-tri{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.pr-tri:hover,.pr-tbl th[aria-sort] .pr-tri{ color:var(--craie); }
.pr-tbl th[aria-sort="ascending"] .pr-tri::after{ content:'↑'; } .pr-tbl th[aria-sort="descending"] .pr-tri::after{ content:'↓'; }
.pr-et{ display:grid; gap:3px; min-width:96px; } .pr-et span{ font-size:var(--taille-legende); color:var(--craie-2); } .pr-et .pr-etapes i{ height:3px; }
.pr-lot{ display:flex; align-items:center; gap:8px; padding:7px 12px; border-bottom:1px solid var(--trait-2); background:color-mix(in oklch, var(--signal) 8%, transparent); font-size:var(--taille-petit); flex-wrap:wrap; }
.pr-lot[hidden]{ display:none; }
.pr-tri-dit{ margin-left:auto; }
/* Nouvelle affaire : la recherche d'un compte */
.pr-comptes{ border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai-2); margin-top:4px; max-height:220px; overflow-y:auto; }
.pr-comptes[hidden]{ display:none; }
.pr-comptes button{ display:block; width:100%; text-align:left; padding:6px 9px; font-size:var(--taille-petit); border-bottom:1px solid var(--trait-2); }
.pr-comptes button:last-child{ border-bottom:0; } .pr-comptes button:hover,.pr-comptes button:focus-visible{ background:var(--quai-3); }
.pr-comptes button span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.pr-choisi{ display:flex; align-items:center; gap:8px; padding:6px 9px; border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai-2); font-size:var(--taille-petit); }
.pr-choisi b{ font-weight:var(--graisse-forte); } .pr-choisi span{ color:var(--craie-3); font-size:var(--taille-legende); } .pr-choisi .btn{ margin-left:auto; }
@media (max-width:1180px){ .pr-tbl .col-plus{ display:none; } }
/* Téléphone : une affaire par carte — son nom, son étape, ce qu'il reste à faire et pour quand. */
@media (max-width:900px){
  .pr-tbl thead,.pr-tbl tfoot td:first-child{ display:none; }
  .pr-tbl,.pr-tbl tbody,.pr-tbl tfoot{ display:block; }
  .pr-tbl tbody tr{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:4px 8px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--trait-2); position:relative; }
  .pr-tbl tbody tr[hidden]{ display:none; }
  .pr-tbl tbody td{ display:block; padding:0; border:0; background:none !important; }
  .pr-tbl tbody tr.is-chaud{ box-shadow:inset 3px 0 0 var(--signal); } .pr-tbl tbody tr.is-retard{ box-shadow:inset 3px 0 0 var(--bad); }
  .pr-tbl tbody td:first-child{ box-shadow:none !important; grid-row:1 / span 3; align-self:start; padding-top:2px; }
  .pr-tbl tbody td:nth-child(2){ grid-column:2; } .pr-tbl tbody td:nth-child(3){ display:none; }
  .pr-tbl tbody td:nth-child(5){ grid-column:3; grid-row:1; }
  .pr-tbl tbody td:nth-child(4){ grid-column:2 / -1; } .pr-et{ grid-template-columns:90px auto; align-items:center; gap:8px; }
  .pr-tbl tbody td:nth-child(6){ grid-column:2 / -1; } .pr-tbl tbody td:nth-child(6):empty{ display:none; }
  .pr-tbl tbody td:nth-child(8){ grid-column:2; font-size:var(--taille-petit); } .pr-tbl tbody td:nth-child(9){ grid-column:3; font-size:var(--taille-legende); }
  .pr-tbl tbody td:nth-child(12){ display:none; }
  .pr-tbl tfoot tr{ display:flex; gap:10px; align-items:baseline; padding:10px 12px; flex-wrap:wrap; } .pr-tbl tfoot td{ border:0; padding:0; }
}
@media (max-width:1180px){ .pr.is-fiche{ grid-template-columns:minmax(0,1fr); } .pr-chiffres{ grid-template-columns:repeat(3,minmax(0,1fr)); } .pr-chiffres > div{ border-bottom:1px solid var(--trait-2); } }
@media (max-width:900px){ .pr-chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pr-tableau{ grid-template-columns:repeat(5,minmax(220px,1fr)); } .pr-perdu{ grid-template-columns:minmax(0,1fr); }
  .pr-barre{ grid-template-columns:118px minmax(0,1fr) 46px; } }

/* ══ Santé du parc (sa-) et fiche d'un client (fc-) ═══════════════════════
   L'usage de chaque client, relevé chaque jour : un état, des signaux, une courbe.
   Maquette : mockups/hub_v3_sante_parc.html. */
.sa-chiffres{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); margin-bottom:12px; }
.sa-chiffres > div{ padding:10px 14px; border-right:1px solid var(--trait-2); min-width:0; } .sa-chiffres > div:last-child{ border-right:0; }
.sa-chiffres .k{ display:block; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.sa-chiffres .v{ font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); display:block; margin-top:2px; word-spacing:-.3em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sa-chiffres .s{ font-size:var(--taille-legende); color:var(--craie-3); }
.sa-chiffres .v.sa-bad{ color:var(--bad); } .sa-chiffres .v.sa-acc{ color:var(--info); } .sa-chiffres .v.sa-warn{ color:var(--warn); }
/* La courbe d'une ligne : une barre par semaine ; la semaine en cours est creuse, la baisse est rouge. */
.sa-spark{ display:flex; align-items:flex-end; gap:2px; height:26px; width:96px; }
.sa-spark i{ flex:1; min-height:2px; background:var(--craie-4); border-radius:var(--r-0); } .sa-spark i.sa-b{ background:var(--bad); }
.sa-spark i.sa-p{ background:none; box-shadow:inset 0 0 0 1px var(--craie-4); }
.sa-tbl td{ vertical-align:middle; } .sa-tbl .nom b{ display:block; font-weight:var(--graisse-forte); } .sa-tbl .nom span{ font-size:var(--taille-legende); color:var(--craie-3); }
.sa-tbl .nom a{ color:inherit; text-decoration:none; } .sa-tbl .nom a::after{ content:''; position:absolute; inset:0; }
.sa-tbl tbody tr{ position:relative; } .sa-tbl tbody tr:hover td{ background:var(--quai-2); }
.sa-tbl .sa-sig{ color:var(--craie-2); } .sa-tbl .sa-sig small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.sa-tbl tr.sa-en_forme .sa-sig,.sa-tbl tr.sa-non_releve .sa-sig{ color:var(--craie-4); }
.sa-tbl .sa-geste{ position:relative; z-index:1; }
.sa-tbl tr.sa-a_risque td:first-child{ box-shadow:inset 3px 0 0 var(--bad); } .sa-tbl tr.sa-a_developper td:first-child{ box-shadow:inset 3px 0 0 var(--info); }
.sa-tbl tr.sa-a_surveiller td:first-child{ box-shadow:inset 3px 0 0 var(--warn); }
.sa-pied{ padding:8px 12px; font-size:var(--taille-legende); color:var(--craie-3); border-top:1px solid var(--trait-2); }
.sa-ecarte{ margin:0 0 12px; }
.fc-grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:12px; align-items:start; margin-bottom:12px; } .fc-grille > *{ min-width:0; }
.fc-signaux li{ display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); }
.fc-signaux li:first-child{ border-top:0; } .fc-signaux li > i{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.fc-signaux li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.fc-usage{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } .fc-usage > div{ padding:12px; min-width:0; } .fc-usage > div + div{ border-left:1px solid var(--trait-2); }
.fc-courbe{ display:flex; align-items:flex-end; gap:5px; height:110px; margin-top:8px; }
.fc-courbe i{ flex:1; min-height:2px; background:var(--craie-4); border-radius:var(--r-0) var(--r-0) 0 0; } .fc-courbe i.fc-b{ background:var(--bad); }
.fc-courbe i.fc-p{ background:none; box-shadow:inset 0 0 0 1px var(--craie-4); }
.fc-axe{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); margin-top:4px; }
.fc-mod{ display:grid; grid-template-columns:minmax(0,1fr) 70px 40px; gap:8px; align-items:center; padding:4px 0; font-size:var(--taille-petit); }
.fc-mod i{ height:6px; border-radius:var(--r-1); background:var(--esp); display:block; min-width:2px; }
.fc-mod span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fc-mod span:last-child{ font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); text-align:right; }
.fc-fil li{ display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:9px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .fc-fil li:first-child{ border-top:0; }
.fc-fil li div{ min-width:0; overflow-wrap:anywhere; } .fc-fil li a{ color:inherit; }
.fc-fil li div span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .fc-fil li em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); white-space:nowrap; }
.fc-retard{ color:var(--bad); }
.fc-ecarte{ padding:8px 12px; font-size:var(--taille-legende); color:var(--craie-3); border-top:1px solid var(--trait-2); }
@media (max-width:1180px){ .fc-grille{ grid-template-columns:minmax(0,1fr); } .sa-chiffres{ grid-template-columns:repeat(3,minmax(0,1fr)); } .sa-chiffres > div{ border-bottom:1px solid var(--trait-2); } }
/* Téléphone : un client par carte — son nom, son état, son signal, sa courbe et son revenu. */
@media (max-width:900px){ .sa-chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); } .fc-usage{ grid-template-columns:minmax(0,1fr); } .fc-usage > div + div{ border-left:0; border-top:1px solid var(--trait-2); }
  .sa-tbl thead{ display:none; } .sa-tbl,.sa-tbl tbody{ display:block; }
  .sa-tbl tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; padding:9px 12px; border-bottom:1px solid var(--trait-2); align-items:center; }
  .sa-tbl tbody td{ display:block; padding:0; border:0; background:none !important; box-shadow:none !important; min-width:0; }
  .sa-tbl td:nth-child(3){ grid-column:1 / -1; } .sa-tbl td:nth-child(5),.sa-tbl td:nth-child(7){ display:none; }
  .sa-tbl tr.sa-a_risque{ box-shadow:inset 3px 0 0 var(--bad); } .sa-tbl tr.sa-a_developper{ box-shadow:inset 3px 0 0 var(--info); } .sa-tbl tr.sa-a_surveiller{ box-shadow:inset 3px 0 0 var(--warn); }
  .fc-signaux li{ grid-template-columns:8px minmax(0,1fr); } .fc-signaux li .btn{ grid-column:2; justify-self:start; } }

/* ══ Contrats (ct-) ═══════════════════════════════════════════════════════
   Ce qu'un client a souscrit : la liste, le contrat, l'avenant, la revalorisation.
   Maquette : mockups/hub_v3_contrats.html. */
.ct-chiffres{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); margin-bottom:12px; }
.ct-chiffres > div{ padding:10px 14px; border-right:1px solid var(--trait-2); min-width:0; } .ct-chiffres > div:last-child{ border-right:0; }
.ct-chiffres .k{ display:block; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.ct-chiffres .v{ font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); display:block; margin-top:2px; word-spacing:-.3em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-chiffres .s{ font-size:var(--taille-legende); color:var(--craie-3); }
.ct-chiffres .v.ct-warn{ color:var(--warn); } .ct-chiffres .v.ct-acc{ color:var(--info); }
.ct-grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:12px; align-items:start; } .ct-grille > *{ min-width:0; }
/* La grille des souscriptions : un site par ligne, un module par colonne. Elle défile dans son cadre. */
.ct-mx th,.ct-mx td{ text-align:center; padding:6px 4px; } .ct-mx th:first-child,.ct-mx td:first-child{ text-align:left; padding-left:12px; min-width:150px; }
.ct-mx thead th{ font-size:var(--taille-micro); vertical-align:bottom; height:96px; } .ct-mx thead th span{ display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; letter-spacing:.04em; max-height:88px; overflow:hidden; text-overflow:ellipsis; }
.ct-mx td i{ display:inline-block; width:14px; height:14px; border-radius:var(--r-1); border:1px solid var(--trait); vertical-align:middle; }
.ct-mx td i.ct-o{ background:var(--esp); border-color:var(--esp); } .ct-mx td i.ct-e{ background:none; border:1.5px dashed var(--warn); }
.ct-mx td i.ct-oe{ background:var(--esp); border:1.5px dashed var(--warn); }
.ct-mx td.r,.ct-mx th.r{ text-align:right; padding-right:12px; white-space:nowrap; } .ct-mx tfoot td{ border-top:1px solid var(--trait); font-weight:var(--graisse-forte); }
.ct-mx tr.ct-hors td{ color:var(--craie-3); } .ct-mx tr.ct-hors td:first-child{ box-shadow:inset 3px 0 0 var(--warn); }
.ct-mx td:first-child small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); font-weight:var(--graisse-normale); }
.ct-mx input[type="checkbox"]{ width:15px; height:15px; margin:0; accent-color:var(--esp); cursor:pointer; vertical-align:middle; }
.ct-mx label.ct-case{ display:inline-grid; place-items:center; width:24px; height:24px; cursor:pointer; }
.ct-mx label.ct-case.ct-e{ outline:1.5px dashed var(--warn); outline-offset:-3px; border-radius:var(--r-2); }
.ct-leg{ display:flex; gap:14px; padding:8px 12px; font-size:var(--taille-legende); color:var(--craie-3); border-top:1px solid var(--trait-2); flex-wrap:wrap; }
.ct-leg i{ display:inline-block; width:11px; height:11px; border-radius:var(--r-1); border:1px solid var(--trait); margin-right:5px; vertical-align:-1px; } .ct-leg i.ct-o{ background:var(--esp); border-color:var(--esp); } .ct-leg i.ct-e{ border:1.5px dashed var(--warn); }
.ct-ecarts li{ display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .ct-ecarts li:first-child{ border-top:0; }
.ct-ecarts li > i{ width:8px; height:8px; border-radius:50%; background:var(--warn); } .ct-ecarts li.ct-risque > i{ background:var(--craie-4); }
.ct-ecarts li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); overflow-wrap:anywhere; }
.ct-ecarts li .ct-m{ font-family:var(--f-mono); font-size:var(--taille-petit); color:var(--craie); white-space:nowrap; }
.ct-lignes td{ vertical-align:middle; } .ct-lignes .txt{ height:26px; }
.ct-lignes td small,.ct-ap td small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.ct-av li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:baseline; } .ct-av li:first-child{ border-top:0; }
.ct-av li > em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); white-space:nowrap; } .ct-av li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.ct-av li div{ min-width:0; overflow-wrap:anywhere; } .ct-av li a{ color:inherit; }
.ct-av details{ margin-top:4px; } .ct-av summary{ font-size:var(--taille-legende); color:var(--craie-3); cursor:pointer; }
.ct-av details ul{ margin:4px 0 0; padding:0; list-style:none; } .ct-av details li{ display:block; padding:2px 0; border:0; font-size:var(--taille-legende); color:var(--craie-2); }
.ct-tbl td{ vertical-align:middle; } .ct-tbl .nom b{ display:block; font-weight:var(--graisse-forte); } .ct-tbl .nom span{ font-size:var(--taille-legende); color:var(--craie-3); }
.ct-tbl .nom a{ color:inherit; text-decoration:none; } .ct-tbl .nom a::after{ content:''; position:absolute; inset:0; }
.ct-tbl tbody tr{ position:relative; } .ct-tbl tbody tr:hover td{ background:var(--quai-2); }
.ct-tbl .ct-choix{ position:relative; z-index:1; width:28px; } .ct-tbl .ct-geste{ position:relative; z-index:1; }
.ct-tbl .pill,.ct-tbl .ct-net{ white-space:nowrap; } .ct-tbl td small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.ct-warn{ color:var(--warn); }
.ct-lot{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); color:var(--craie-3); flex-wrap:wrap; }
.ct-prix{ width:92px; text-align:right; font-family:var(--f-mono); }
.ct-qte{ width:64px; text-align:right; font-family:var(--f-mono); }
.ct-ap td{ vertical-align:middle; } .ct-ap .ct-plus{ color:var(--ok); } .ct-ap .ct-moins{ color:var(--bad); }
.ct-ap tr.ct-total td{ border-top:1px solid var(--trait); font-weight:var(--graisse-forte); }
.ct-pied{ padding:8px 12px; font-size:var(--taille-legende); color:var(--craie-3); border-top:1px solid var(--trait-2); }
.ct-actions-sig{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .ct-actions-sig form{ margin:0; }
.ct-ecarte{ margin:0 0 12px; }
.ct-choisir{ display:grid; gap:6px; padding:2px 0; } .ct-choisir fieldset{ border:0; padding:0; margin:0; min-width:0; }
.ct-liste-cases{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:2px 12px; padding:6px 0 0 21px; }
@media (max-width:1180px){ .ct-grille{ grid-template-columns:minmax(0,1fr); } .ct-chiffres{ grid-template-columns:repeat(3,minmax(0,1fr)); } .ct-chiffres > div{ border-bottom:1px solid var(--trait-2); } }
/* Téléphone : un contrat par carte — le client, son état, son revenu, son écart, son échéance. */
@media (max-width:900px){ .ct-chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ct-tbl .ct-plus-loin{ display:none; }
  .ct-tbl thead{ display:none; } .ct-tbl,.ct-tbl tbody{ display:block; }
  .ct-tbl tbody tr{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 8px; padding:9px 12px; border-bottom:1px solid var(--trait-2); align-items:center; }
  .ct-tbl tbody td{ display:block; padding:0; border:0; background:none !important; min-width:0; }
  .ct-tbl td.ct-choix{ grid-row:1 / span 2; } .ct-tbl td.nom{ grid-column:2; } .ct-tbl td:nth-child(4){ grid-column:3; grid-row:1; }
  .ct-tbl td:nth-child(3){ grid-column:2; } .ct-tbl td:nth-child(5),.ct-tbl td:nth-child(7){ grid-column:2 / -1; font-size:var(--taille-legende); }
  .ct-ecarts li{ grid-template-columns:8px minmax(0,1fr); } .ct-ecarts li .ct-m{ grid-column:2; }
  .ct-av li{ grid-template-columns:auto minmax(0,1fr); } .ct-av li > em:last-child{ grid-column:2; } }

/* Modules signés ouverts dans le système du client (lot PC7) */
.ct-modules{ list-style:none; margin:0; padding:6px 14px 12px; display:flex; flex-wrap:wrap; gap:8px 18px; }
.ct-modules li{ display:flex; align-items:center; gap:8px; font-size:var(--taille-texte); }

/* ══ Devis (dv-) ══════════════════════════════════════════════════════════
   Commercial › Devis : la liste, composer, l'aperçu et l'envoi, l'accord, ce que l'acceptation a créé ;
   et la pastille « devis » de la prospection. Tout est préfixé dv-. Seul le DOCUMENT (.dv-doc) porte des
   couleurs écrites : c'est une feuille de papier, blanche et à l'encre dans les deux thèmes. */
.dv-logo{ display:block; max-height:40px; max-width:180px; margin-bottom:6px; }
.dv-intro{ margin:0 0 12px; white-space:pre-line; }
.dv-mentions{ margin:0 0 4px; white-space:pre-line; }
.dv-chiffres{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); margin-bottom:12px; }
.dv-chiffres > div{ padding:10px 14px; border-right:1px solid var(--trait-2); min-width:0; } .dv-chiffres > div:last-child{ border-right:0; }
.dv-chiffres .k{ display:block; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.dv-chiffres .v{ font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); display:block; margin-top:2px; white-space:nowrap; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; }
.dv-chiffres .s{ font-size:var(--taille-legende); color:var(--craie-3); } .dv-chiffres .v.warn{ color:var(--warn); }
.dv-warn{ color:var(--warn); } .dv-bad{ color:var(--bad); } .dv-ok{ color:var(--ok); }
.dv-nw{ white-space:nowrap; }
.dv-chiffres .v,.dv-total dd,.dv-vers li em,.dv-diff b,.dv-doc .r,.dv-doc .dv-recap b,.dv-mx thead th em{ word-spacing:-.3em; }
.dv-doc th.r{ word-spacing:normal; }
.dv-ecarte{ margin:0 0 12px; } .dv-bas{ margin-top:12px; }

.dv-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:12px; align-items:start; } .dv-2 > *{ min-width:0; }
.dv-colle{ position:sticky; top:12px; }

.dv-tbl .nom b{ display:block; font-weight:var(--graisse-forte); } .dv-tbl .nom span{ font-size:var(--taille-legende); color:var(--craie-3); }
.dv-tbl .nom a{ color:inherit; text-decoration:none; } .dv-tbl .nom a::after{ content:''; position:absolute; inset:0; }
.dv-tbl tbody tr{ position:relative; cursor:pointer; } .dv-tbl td{ vertical-align:middle; } .dv-tbl tbody tr:hover td{ background:var(--quai-2); }
.dv-tbl tbody tr[hidden]{ display:none; }
.dv-tbl tr.is-suite td:first-child{ box-shadow:inset 3px 0 0 var(--signal); } .dv-tbl tr.is-alerte td:first-child{ box-shadow:inset 3px 0 0 var(--warn); }
.dv-tbl .dv-ref{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-3); letter-spacing:-.02em; }
.dv-tbl tfoot td{ border-top:1px solid var(--trait); padding-top:9px; padding-bottom:9px; }
.dv-tbl .pill{ white-space:nowrap; }
.dv-rien{ padding:18px 12px; color:var(--craie-3); font-size:var(--taille-petit); }

.dv-mx th,.dv-mx td{ text-align:center; padding:6px 4px; } .dv-mx th:first-child,.dv-mx td:first-child{ text-align:left; padding-left:12px; min-width:150px; }
.dv-mx thead th{ font-size:var(--taille-micro); vertical-align:bottom; height:86px; } .dv-mx thead th span{ display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; letter-spacing:.04em; max-height:120px; overflow:hidden; text-overflow:ellipsis; }
.dv-mx thead th em{ display:block; font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-3); letter-spacing:-.02em; text-transform:none; margin-top:4px; }
.dv-mx input[type=checkbox]{ width:15px; height:15px; accent-color:var(--esp); cursor:pointer; margin:0; vertical-align:middle; }
.dv-mx td.r,.dv-mx th.r{ text-align:right; padding-right:12px; white-space:nowrap; } .dv-mx tfoot td{ border-top:1px solid var(--trait); font-weight:var(--graisse-forte); }
.dv-mx .txt{ width:100%; max-width:190px; height:26px; }
.dv-mx tr[hidden]{ display:none; }
.dv-mx .dv-site{ display:flex; gap:6px; align-items:center; } .dv-mx .dv-site .btn{ flex:none; }
.dv-mx .dv-n{ display:flex; gap:8px; align-items:center; } .dv-mx .dv-n .txt{ width:70px; }
.dv-pied{ display:flex; gap:10px 14px; padding:8px 12px; font-size:var(--taille-legende); color:var(--craie-3); border-top:1px solid var(--trait-2); flex-wrap:wrap; align-items:center; }
.dv-opt td{ vertical-align:middle; } .dv-opt .txt{ width:64px; height:26px; text-align:right; font-family:var(--f-mono); }
.dv-opt td span{ color:var(--craie-3); }

.dv-total{ padding:4px 12px 8px; margin:0; }
.dv-total div{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:var(--taille-petit); border-bottom:1px solid var(--trait-2); align-items:baseline; }
.dv-total dt{ color:var(--craie-2); } .dv-total dt small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.dv-total dd{ margin:0; font-family:var(--f-mono); font-weight:var(--graisse-moyenne); text-align:right; white-space:nowrap; letter-spacing:-.02em; }
.dv-total .dv-fort{ border-bottom:0; padding:10px 0 4px; } .dv-total .dv-fort dt{ color:var(--craie); font-weight:var(--graisse-forte); } .dv-total .dv-fort dd{ font-size:var(--taille-titre); }
.dv-total .dv-sep{ border-top:1px solid var(--trait); } .dv-total .dv-fin{ border-bottom:0; }
.dv-seg{ display:flex; width:100%; flex-wrap:wrap; } .dv-seg label{ flex:1; }
.dv-seg input{ position:absolute; opacity:0; pointer-events:none; }
.dv-seg span{ display:block; height:26px; line-height:26px; white-space:nowrap; padding:0 8px; text-align:center; border-radius:var(--r-1); font-size:var(--taille-legende); font-weight:var(--graisse-moyenne); color:var(--craie-3); cursor:pointer; }
.dv-seg input:checked + span{ background:var(--quai-3); color:var(--craie); font-weight:var(--graisse-forte); }
.dv-seg input:focus-visible + span{ outline:2px solid var(--signal); outline-offset:1px; }
.dv-limite{ font-size:var(--taille-legende); color:var(--craie-3); } .dv-limite.is-trop{ color:var(--warn); }
.dv-vers{ list-style:none; margin:0; padding:0; }
.dv-vers li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:baseline; } .dv-vers li:first-child{ border-top:0; }
.dv-vers li em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); white-space:nowrap; } .dv-vers li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.dv-vers li.is-ici{ background:var(--quai-2); } .dv-vers li a{ color:inherit; }
.dv-diff{ padding:8px 12px 10px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); color:var(--craie-2); display:grid; gap:3px; }
.dv-diff b{ font-family:var(--f-mono); font-weight:var(--graisse-moyenne); color:var(--craie); }
.dv-sous-titre{ display:block; padding:10px 12px 4px; border-top:1px solid var(--trait-2); }

.dv-envoi{ display:grid; grid-template-columns:minmax(300px,400px) minmax(0,1fr); gap:12px; align-items:start; } .dv-envoi > *{ min-width:0; }
.dv-msg dl{ padding:4px 12px; margin:0; } .dv-msg dl div{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px; padding:6px 0; border-bottom:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:center; }
.dv-msg dt{ color:var(--craie-3); font-size:var(--taille-legende); } .dv-msg dd{ margin:0; overflow-wrap:anywhere; min-width:0; } .dv-msg dd .txt,.dv-msg dd .sel{ width:100%; }
.dv-msg .dv-corps{ padding:12px; } .dv-msg .dv-corps textarea{ width:100%; min-height:300px; font-size:var(--taille-texte); line-height:1.55; resize:vertical; }
.dv-msg .dv-lu{ padding:12px; font-size:var(--taille-texte); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.dv-pj{ margin:0 12px 12px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px; align-items:center; padding:8px 10px; border:1px solid var(--trait); border-radius:var(--r-2); background:var(--quai-2); font-size:var(--taille-petit); color:inherit; text-decoration:none; }
.dv-pj .ico{ width:14px; height:14px; color:var(--craie-3); } .dv-pj span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .dv-pj b{ overflow-wrap:anywhere; }
.dv-table{ background:var(--nuit); border:1px solid var(--trait-2); border-radius:var(--r-3); padding:18px; overflow-x:auto; }
.dv-doc{ --encre:var(--encre); --encre-2:var(--encre-2); --filet:var(--filet-papier); --papier:var(--blanc); --papier-2:var(--papier-2); background:var(--papier); color:var(--encre); max-width:760px; margin:0 auto; padding:44px 48px 36px; border-radius:var(--r-0);
  box-shadow:0 1px 2px color-mix(in oklab, var(--ombre-teinte) 25%, transparent), 0 10px 28px -12px color-mix(in oklab, var(--ombre-teinte) 45%, transparent); font-family:var(--f-texte); font-size:var(--taille-petit); line-height:1.5; }
.dv-doc header{ display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:18px; border-bottom:2px solid var(--encre); }
.dv-doc .dv-marque{ font-family:var(--f-titre); font-weight:var(--graisse-grasse); font-size:var(--taille-grand); letter-spacing:.01em; line-height:1; }
.dv-doc .dv-marque ~ p{ font-size:var(--taille-legende); color:var(--encre-2); margin-top:4px; white-space:pre-line; } .dv-doc .dv-marque + p{ margin-top:6px; }
.dv-doc .dv-numero{ text-align:right; } .dv-doc .dv-numero b{ display:block; font-family:var(--f-titre); font-size:var(--taille-titre); font-weight:var(--graisse-forte); line-height:1.1; }
.dv-doc .dv-numero span{ display:block; font-size:var(--taille-legende); color:var(--encre-2); } .dv-doc .dv-numero .dv-mono{ font-family:var(--f-mono); color:var(--encre); font-size:var(--taille-petit); margin-top:3px; }
.dv-doc .dv-parties{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:18px 0 6px; font-size:var(--taille-petit); } .dv-doc .dv-parties p{ white-space:pre-line; overflow-wrap:anywhere; }
.dv-doc h4{ font-size:var(--taille-nano); font-weight:var(--graisse-forte); letter-spacing:.1em; text-transform:uppercase; color:var(--encre-2); margin-bottom:4px; }
.dv-doc .dv-objet{ margin:14px 0 4px; font-size:var(--taille-petit); }
.dv-doc table{ width:100%; border-collapse:collapse; margin-top:14px; }
.dv-doc th{ font-size:var(--taille-nano); font-weight:var(--graisse-forte); letter-spacing:.1em; text-transform:uppercase; color:var(--encre-2); text-align:left; padding:6px 0; border-bottom:1px solid var(--encre); }
.dv-doc td{ padding:7px 0; border-bottom:1px solid var(--filet); vertical-align:top; } .dv-doc td small{ display:block; font-size:var(--taille-legende); color:var(--encre-2); }
.dv-doc .r{ text-align:right; white-space:nowrap; font-family:var(--f-mono); font-size:var(--taille-petit); letter-spacing:-.02em; padding-left:12px; } .dv-doc th.r{ font-family:var(--f-texte); font-size:var(--taille-nano); letter-spacing:.1em; }
.dv-doc .dv-q{ display:none; }
.dv-doc .dv-sous td{ border-bottom:0; padding:5px 0; color:var(--encre-2); } .dv-doc .dv-sous td.r{ color:var(--encre); }
.dv-doc .dv-net td{ border-top:1px solid var(--encre); border-bottom:0; font-weight:var(--graisse-forte); padding-top:9px; font-size:var(--taille-texte); color:var(--encre); } .dv-doc .dv-net td.r{ font-size:var(--taille-lecture); }
.dv-doc .dv-recap{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:0; margin-top:18px; border:1px solid var(--encre); }
.dv-doc .dv-recap div{ padding:10px 12px; border-right:1px solid var(--filet); } .dv-doc .dv-recap div:last-child{ border-right:0; background:var(--papier-2); }
.dv-doc .dv-recap b{ display:block; font-family:var(--f-mono); font-weight:var(--graisse-moyenne); font-size:var(--taille-lecture); white-space:nowrap; letter-spacing:-.02em; margin-top:2px; } .dv-doc .dv-recap span{ display:block; font-size:var(--taille-micro); color:var(--encre-2); }
.dv-doc .dv-ht{ margin-top:6px; font-size:var(--taille-micro); color:var(--encre-2); }
.dv-doc .dv-cond{ margin:18px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px; font-size:var(--taille-legende); }
.dv-doc .dv-cond div{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--filet); padding:4px 0; } .dv-doc .dv-cond dt{ color:var(--encre-2); } .dv-doc .dv-cond dd{ margin:0; text-align:right; }
.dv-doc .dv-accord{ margin-top:22px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; font-size:var(--taille-legende); color:var(--encre-2); }
.dv-doc .dv-signe{ border:1px solid var(--filet); height:84px; padding:8px 10px; font-size:var(--taille-micro); }
.dv-doc footer{ margin-top:20px; padding-top:10px; border-top:1px solid var(--filet); font-size:var(--taille-micro); color:var(--encre-2); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.dv-chaine{ list-style:none; margin:0; padding:0; } .dv-chaine li{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:4px 10px; padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; }
.dv-chaine li:first-child{ border-top:0; }
.dv-chaine li > i{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); font-weight:var(--graisse-moyenne); background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-tr); margin-top:1px; }
.dv-chaine li.is-main > i{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-tr); }
.dv-chaine li.is-auto > i{ background:var(--info-bg); color:var(--info); border-color:var(--info-tr); }
.dv-chaine li b{ font-weight:var(--graisse-forte); } .dv-chaine li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.dv-chaine li .pill{ margin-top:1px; white-space:nowrap; }
.dlg .dv-sous-titre{ padding:12px 0 2px; border-top:0; } .dlg .dv-chaine li{ padding:8px 0; }
.dlg .dv-note{ margin-top:10px; padding:8px 10px; border:1px dashed var(--trait); border-radius:var(--r-2); font-size:var(--taille-petit); color:var(--craie-2); }
.dv-gestes{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px 12px; border-top:1px solid var(--trait-2); }
.dv-affaire{ display:grid; gap:2px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .dv-affaire:first-of-type{ border-top:0; }
.dv-affaire a{ color:inherit; font-weight:var(--graisse-forte); } .dv-affaire span{ color:var(--craie-3); font-size:var(--taille-legende); }

/* La prospection : la pastille « devis » d'une affaire, dans la liste et sur les cartes. */
.dv-col small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; } .dv-col .pill{ white-space:nowrap; }
.dv-past{ display:flex; gap:4px; flex-wrap:wrap; }

/* La colonne « Devis » prend sa place dans la liste de la prospection : sous 1 600 px, « Source » la lui cède. */
@media (max-width:1600px){ .dv-cede{ display:none; } }
@media (max-width:1180px){ .dv-2,.dv-envoi{ grid-template-columns:minmax(0,1fr); } .dv-colle{ position:static; } .dv-chiffres{ grid-template-columns:repeat(3,minmax(0,1fr)); } .dv-chiffres > div{ border-bottom:1px solid var(--trait-2); }
  .dv-tbl .col-plus{ display:none; } }
@media (max-width:900px){
  .dv-chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dv-chiffres .v{ font-size:var(--taille-sous-titre); }
  /* Téléphone : un devis par carte — à qui, où il en est, combien, et ce qu'il attend. */
  .dv-tbl thead{ display:none; } .dv-tbl,.dv-tbl tbody,.dv-tbl tfoot{ display:block; }
  .dv-tbl tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--trait-2); }
  .dv-tbl tbody tr[hidden]{ display:none; }
  .dv-tbl tbody td{ display:block; padding:0; border:0; background:none !important; box-shadow:none !important; min-width:0; }
  .dv-tbl tbody tr.is-suite{ box-shadow:inset 3px 0 0 var(--signal); } .dv-tbl tbody tr.is-alerte{ box-shadow:inset 3px 0 0 var(--warn); }
  .dv-tbl tbody td:nth-child(1){ grid-column:1; } .dv-tbl tbody td:nth-child(3){ grid-column:2; grid-row:1; justify-self:end; }
  .dv-tbl tbody td:nth-child(2),.dv-tbl tbody td:nth-child(5){ display:none; }
  .dv-tbl tbody td:nth-child(4){ grid-column:1; text-align:left; } .dv-tbl tbody td:nth-child(6){ grid-column:2; grid-row:2; justify-self:end; font-size:var(--taille-legende); }
  .dv-tbl tbody td:nth-child(7){ grid-column:1 / -1; font-size:var(--taille-petit); }
  .dv-tbl tfoot tr{ display:flex; gap:10px; align-items:baseline; padding:10px 12px; flex-wrap:wrap; } .dv-tbl tfoot td{ border:0; padding:0; } .dv-tbl tfoot td:empty{ display:none; }
  .dv-table{ padding:8px; } .dv-doc{ padding:22px 16px 20px; font-size:var(--taille-petit); }
  .dv-doc header{ flex-direction:column; gap:12px; } .dv-doc .dv-numero{ text-align:left; }
  .dv-doc .dv-parties,.dv-doc .dv-cond,.dv-doc .dv-accord{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .dv-doc .dv-c{ display:none; } .dv-doc .dv-q{ display:block; }
  .dv-doc .dv-recap{ grid-auto-flow:row; } .dv-doc .dv-recap div{ border-right:0; border-bottom:1px solid var(--filet); display:flex; justify-content:space-between; align-items:baseline; gap:10px; } .dv-doc .dv-recap div:last-child{ border-bottom:0; }
  .dv-mx th:first-child,.dv-mx td:first-child{ min-width:200px; }
  .dv-chaine li{ grid-template-columns:22px minmax(0,1fr); } .dv-chaine li .pill{ grid-column:2; justify-self:start; }
  .dv-col:empty{ display:none; } .dv-col small{ display:inline; margin-left:6px; } }
/* ══ Partage (pt-) : armoires, dossiers, fiche d'un document, droits, liens vers l'extérieur ══════════════
   Venu de la maquette validée mockups/hub_v3_partage.html. Tout est préfixé pt- : rien ne se télescope. */
.pt-warn{ color:var(--warn); } .pt-bad{ color:var(--bad); } .pt-ok{ color:var(--ok); } .pt-nw{ white-space:nowrap; }
.pt-duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:12px; align-items:start; } .pt-duo > *{ min-width:0; }
.pt-duo--egal{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Le type de fichier : une étiquette courte, toujours au même endroit. */
.pt-ft{ display:inline-grid; place-items:center; width:34px; height:22px; border-radius:var(--r-1); font-family:var(--f-mono); font-size:var(--taille-nano); font-weight:var(--graisse-moyenne); letter-spacing:0; border:1px solid var(--trait); background:var(--quai-3); color:var(--craie-2); flex:none; }
.pt-ft.pdf{ background:var(--bad-bg); border-color:var(--bad-tr); color:var(--bad); } .pt-ft.ppt{ background:var(--o-essai-bg); border-color:var(--o-essai-tr); color:var(--o-essai); }
.pt-ft.doc{ background:var(--info-bg); border-color:var(--info-tr); color:var(--info); } .pt-ft.xls{ background:var(--ok-bg); border-color:var(--ok-tr); color:var(--ok); }
.pt-ft.img{ background:var(--o-contrat-bg); border-color:var(--o-contrat-tr); color:var(--o-contrat); }
.pt-ic{ width:14px; height:14px; flex:none; color:var(--craie-3); }
.pt-ref{ display:inline-flex; align-items:center; gap:4px; height:18px; padding:0 6px; border-radius:var(--r-1); font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.05em; text-transform:uppercase; background:color-mix(in oklch, var(--signal) 14%, transparent); color:var(--signal); border:1px solid color-mix(in oklch, var(--signal) 45%, var(--trait)); white-space:nowrap; }
:root[data-theme="light"] .pt-ref{ color:var(--acc); background:var(--acc-fond); border-color:var(--acc); }
.pt-ver{ font-family:var(--f-mono); font-size:var(--taille-legende); color:var(--craie-2); letter-spacing:-.02em; white-space:nowrap; }

/* Les armoires. */
.pt-armoires{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.pt-arm{ --c:var(--craie-3); background:var(--quai); border:1px solid var(--trait-2); border-top:2px solid var(--c); border-radius:var(--r-3); padding:11px 12px 10px; display:grid; grid-template-rows:auto auto auto 1fr; gap:7px; align-content:start; min-width:0; cursor:pointer; transition:border-color var(--t), background var(--t); }
.pt-arm:hover{ background:var(--quai-2); }
.pt-bandeau{ display:flex; align-items:center; gap:8px; padding:8px 12px; margin-bottom:12px; border:1px solid var(--trait-2); border-left:3px solid var(--esp, var(--signal)); border-radius:var(--r-2); background:var(--quai); font-size:var(--taille-petit); color:var(--craie-2); }
.pt-bandeau b{ color:var(--craie); font-weight:var(--graisse-forte); }
div.pt-arm{ cursor:default; } div.pt-arm:hover{ background:var(--quai); }
.pt-arm .l1{ display:flex; align-items:center; gap:8px; min-width:0; } .pt-arm .l1 b{ font-family:var(--f-titre); font-size:var(--taille-sous-titre); font-weight:var(--graisse-forte); line-height:1.1; flex:1; min-width:0; }
.pt-arm .l1 .lg{ --c:inherit; background:var(--c); }
.pt-arm p{ font-size:var(--taille-petit); color:var(--craie-2); line-height:1.4; }
.pt-arm .l3{ display:flex; gap:10px; align-items:baseline; font-size:var(--taille-legende); color:var(--craie-3); flex-wrap:wrap; } .pt-arm .l3 b{ font-family:var(--f-mono); font-weight:var(--graisse-moyenne); font-size:var(--taille-lecture); color:var(--craie); letter-spacing:-.02em; word-spacing:-.3em; }
.pt-arm .l4{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 8px; align-items:center; align-content:end; padding-top:7px; border-top:1px dashed var(--trait-2); font-size:var(--taille-legende); color:var(--craie-3); }
.pt-arm .l4 > span:last-child{ grid-column:1 / -1; white-space:nowrap; color:var(--craie-4); } .pt-arm .l4 > span:first-child:not(.pt-qui){ grid-column:1 / -1; }
.pt-qui{ display:inline-flex; } .pt-qui .avatar{ width:20px; height:20px; font-size:var(--taille-nano); margin-left:-5px; border-color:var(--quai); } .pt-qui .avatar:first-child{ margin-left:0; }
.pt-arm.is-partiel{ border-top-style:dashed; }

/* Une liste de documents, en lignes. */
.pt-docs li{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:3px 10px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:center; cursor:pointer; } .pt-docs li:first-child{ border-top:0; }
.pt-docs li:hover{ background:var(--quai-2); }
.pt-docs li b{ font-weight:var(--graisse-forte); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pt-docs li span.o{ display:block; font-size:var(--taille-legende); color:var(--craie-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-docs li em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; text-align:right; }
.pt-docs li.is-neuf b::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--signal); margin-right:6px; vertical-align:1px; }
.pt-vu td,.pt-vu th{ text-align:center; } .pt-vu td:first-child,.pt-vu th:first-child{ text-align:left; }
.pt-pt{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); } .pt-pt.p{ background:none; border:1.5px solid var(--warn); } .pt-pt.n{ background:none; border:1px solid var(--trait-3); opacity:.6; }

/* Un dossier ouvert. */
.pt-ariane[hidden]{ display:none; } .pt-ariane{ display:flex; gap:6px; align-items:center; font-size:var(--taille-petit); color:var(--craie-3); flex-wrap:wrap; margin-bottom:4px; } .pt-ariane a{ color:var(--craie-2); } .pt-ariane a:hover{ color:var(--craie); } .pt-ariane s{ text-decoration:none; color:var(--craie-4); }
.pt-sous{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px 12px; border-bottom:1px solid var(--trait-2); }
.pt-sous a{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1px 8px; align-items:center; padding:7px 9px; border:1px solid var(--trait-2); border-radius:var(--r-2); background:var(--quai-2); font-size:var(--taille-petit); min-width:0; }
.pt-sous a:hover{ border-color:var(--trait-3); } .pt-sous a b{ font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pt-sous a span{ grid-column:2; font-size:var(--taille-legende); color:var(--craie-3); } .pt-sous a svg{ grid-row:1 / 3; }
.pt-depot{ margin:10px 12px; padding:12px; border:1.5px dashed var(--trait-3); border-radius:var(--r-2); display:flex; gap:10px; align-items:center; font-size:var(--taille-petit); color:var(--craie-2); flex-wrap:wrap; background:color-mix(in oklch, var(--esp) 5%, transparent); }
.pt-depot b{ color:var(--craie); } .pt-depot span{ font-size:var(--taille-legende); color:var(--craie-3); } .pt-depot .btn{ margin-left:auto; }
.pt-choix{ display:flex; gap:8px; align-items:center; padding:7px 12px; border-bottom:1px solid var(--trait-2); background:color-mix(in oklch, var(--signal) 9%, var(--quai)); font-size:var(--taille-petit); flex-wrap:wrap; } .pt-choix b{ font-weight:var(--graisse-forte); margin-right:4px; } .pt-choix[hidden]{ display:none; }
.pt-tbl input[type=checkbox]{ width:14px; height:14px; accent-color:var(--signal); margin:0; vertical-align:middle; cursor:pointer; }
.pt-tbl td{ vertical-align:middle; } .pt-tbl .nom{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:center; min-width:220px; } .pt-tbl .nom b{ display:block; font-weight:var(--graisse-forte); } .pt-tbl .nom span.o{ font-size:var(--taille-legende); color:var(--craie-3); }
.pt-tbl tr.is-perime td{ color:var(--craie-3); } .pt-tbl tr.is-perime .nom b{ text-decoration:line-through; text-decoration-color:var(--craie-4); font-weight:var(--graisse-moyenne); }
.pt-tbl tr.is-coche td{ background:color-mix(in oklch, var(--signal) 6%, transparent); }
.pt-etq{ display:flex; gap:4px; flex-wrap:wrap; }
.pt-grille{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px; } .pt-grille[hidden]{ display:none; }
.pt-vig{ border:1px solid var(--trait-2); border-radius:var(--r-2); background:var(--quai-2); overflow:hidden; min-width:0; display:grid; }
.pt-vig .pt-min{ height:150px; background:var(--nuit); display:grid; place-items:center; padding:12px; border-bottom:1px solid var(--trait-2); overflow:hidden; }
.pt-vig .c{ padding:7px 9px 8px; display:grid; gap:4px; min-width:0; text-align:left; justify-items:start; } .pt-vig .c b{ font-size:var(--taille-petit); font-weight:var(--graisse-forte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pt-vig .c .rang{ gap:5px; font-size:var(--taille-legende); color:var(--craie-3); }
/* Une page miniature : du papier, blanc dans les deux thèmes. */
.pt-page{ background:var(--blanc); color:var(--encre); height:126px; width:89px; border-radius:var(--r-0); box-shadow:0 1px 2px color-mix(in oklab, var(--ombre-teinte) 30%, transparent), 0 6px 14px -8px color-mix(in oklab, var(--ombre-teinte) 50%, transparent); padding:11px 10px; display:grid; gap:6px; align-content:start; }
.pt-page.large{ width:200px; height:112px; align-content:center; } .pt-page i{ display:block; height:3px; border-radius:var(--r-0); background:var(--filet-papier); } .pt-page i.t{ height:6px; width:62%; background:var(--encre); } .pt-page i.c{ width:78%; } .pt-page i.a{ background:var(--o-contrat); width:40%; }
.pt-page.photo{ padding:0; background:linear-gradient(135deg,var(--quai-3),var(--acc-fonce) 55%,var(--acc-clair)); }

/* La fiche d'un document. */
.pt-fiche{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:12px; align-items:start; } .pt-fiche > *{ min-width:0; }
.pt-scene{ background:var(--nuit); border-bottom:1px solid var(--trait-2); padding:18px; display:grid; gap:12px; justify-items:center; }
.pt-outils{ display:flex; gap:8px; align-items:center; padding:8px 12px; flex-wrap:wrap; font-size:var(--taille-petit); color:var(--craie-3); } .pt-outils .fin{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.pt-vers li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:baseline; } .pt-vers li:first-child{ border-top:0; }
.pt-vers li em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); white-space:nowrap; } .pt-vers li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .pt-vers li.is-ici{ background:var(--quai-2); }
.pt-fil li{ display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:9px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; } .pt-fil li:first-child{ border-top:0; }
.pt-fil li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .pt-fil li em{ font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); white-space:nowrap; } .pt-fil .lg,.pt-fil .pt-ic{ margin-top:2px; }
.pt-gens li{ display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:9px; padding:7px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:center; } .pt-gens li:first-child{ border-top:0; }
.pt-gens li div > span:not(.pill){ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .pt-gens li em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; text-align:right; }
.pt-com li{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:9px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); } .pt-com li:first-child{ border-top:0; }
.pt-com li b{ font-weight:var(--graisse-forte); } .pt-com li em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-4); margin-left:6px; } .pt-com li p{ color:var(--craie-2); margin-top:2px; } .pt-com li .pt-sur{ font-size:var(--taille-legende); color:var(--craie-3); }
.pt-encart{ margin:12px; padding:10px 12px; border:1px solid color-mix(in oklch, var(--signal) 45%, var(--trait)); border-radius:var(--r-2); background:color-mix(in oklch, var(--signal) 8%, transparent); display:grid; gap:5px; font-size:var(--taille-petit); }
.pt-encart .sur-titre{ color:var(--signal); } .pt-encart p{ font-size:var(--taille-petit); color:var(--craie-2); } :root[data-theme="light"] .pt-encart .sur-titre{ color:var(--acc); }

/* Les droits. */
.pt-mx th,.pt-mx td{ text-align:center; } .pt-mx th:first-child,.pt-mx td:first-child{ text-align:left; } .pt-mx td:last-child,.pt-mx th:last-child{ text-align:left; }
.pt-mx td small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .pt-mx tr.is-ecart td:first-child{ box-shadow:inset 3px 0 0 var(--info); }
.pt-oui{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--ok-bg); border:1px solid var(--ok-tr); color:var(--ok); } .pt-oui svg{ width:9px; height:9px; }
.pt-non{ display:inline-block; width:10px; height:1.5px; background:var(--trait-3); vertical-align:middle; }
.pt-regles li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:center; } .pt-regles li:first-child{ border-top:0; }
.pt-regles li > div > span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .pt-regles li > div b{ font-weight:var(--graisse-forte); }
.pt-pourquoi{ counter-reset:e; } .pt-pourquoi li{ display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:9px; padding:8px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; } .pt-pourquoi li:first-child{ border-top:0; }
.pt-pourquoi li > i{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-family:var(--f-mono); font-size:var(--taille-micro); background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-tr); margin-top:1px; }
.pt-pourquoi li.is-non > i{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad-tr); } .pt-pourquoi li.is-neutre > i{ background:var(--quai-3); color:var(--craie-3); border-color:var(--trait); }
.pt-pourquoi li span{ display:block; font-size:var(--taille-legende); color:var(--craie-3); } .pt-pourquoi li b{ font-weight:var(--graisse-forte); }
.pt-verdict{ padding:10px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); background:var(--quai-2); display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pt-verdict b{ font-weight:var(--graisse-forte); }
.pt-arbre{ padding:8px 12px 10px; font-size:var(--taille-petit); display:grid; gap:1px; } .pt-arbre div{ display:flex; gap:8px; align-items:center; padding:5px 6px; border-radius:var(--r-1); min-width:0; } .pt-arbre div > span:first-of-type{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pt-arbre .n1{ padding-left:22px; } .pt-arbre .n2{ padding-left:42px; } .pt-arbre .n3{ padding-left:62px; } .pt-arbre .is-ici{ background:var(--quai-3); font-weight:var(--graisse-forte); } .pt-arbre .fin{ margin-left:auto; flex:none; }
.pt-ferme{ display:inline-flex; align-items:center; gap:4px; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; } .pt-ferme svg{ width:11px; height:11px; }

/* Partager à l'extérieur. */
.pt-refus{ padding:14px; display:grid; gap:8px; font-size:var(--taille-petit); } .pt-refus .pt-stop{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--bad-tr); background:var(--bad-bg); border-radius:var(--r-2); }
.pt-refus .pt-stop svg{ width:16px; height:16px; color:var(--bad); flex:none; margin-top:1px; } .pt-refus .pt-stop b{ color:var(--bad); font-weight:var(--graisse-forte); display:block; } .pt-refus .pt-stop p{ color:var(--craie-2); font-size:var(--taille-petit); margin-top:2px; }
.pt-ouv{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; vertical-align:-2px; } .pt-ouv i{ width:4px; border-radius:var(--r-0); background:var(--esp); display:block; } .pt-ouv i.z{ background:var(--trait); height:2px !important; }


/* La recherche. */
.pt-res li{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:2px 10px; padding:9px 12px; border-top:1px solid var(--trait-2); font-size:var(--taille-petit); align-items:start; } .pt-res li:first-child{ border-top:0; }
.pt-res li b{ font-weight:var(--graisse-forte); } .pt-res li p{ grid-column:2 / -1; font-size:var(--taille-petit); color:var(--craie-2); line-height:1.45; } .pt-res li .o{ grid-column:2 / -1; font-size:var(--taille-legende); color:var(--craie-3); }
.pt-res mark,.pt-pal mark{ background:color-mix(in oklch, var(--signal) 30%, transparent); color:inherit; border-radius:var(--r-0); padding:0 1px; } .pt-res li .pt-ft{ margin-top:1px; } .pt-res li > em{ font-style:normal; font-size:var(--taille-legende); color:var(--craie-3); white-space:nowrap; }


@media (max-width:1280px){ .pt-armoires,.pt-grille,.pt-sous{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1180px){ .pt-duo,.pt-fiche,.pt-duo--egal{ grid-template-columns:minmax(0,1fr); }
  .pt-tbl .col-plus, .pt-armoires{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  .pt-armoires,.pt-sous{ grid-template-columns:minmax(0,1fr); } .pt-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pt-docs li{ grid-template-columns:34px minmax(0,1fr); } .pt-docs li em{ grid-column:2; text-align:left; }
  /* Téléphone : une ligne de tableau devient une carte. m-g à gauche, m-d à droite, m-x absent. */
  .pt-m thead{ display:none; } .pt-m,.pt-m tbody{ display:block; }
  .pt-m tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--trait-2); }
  .pt-m tbody td{ display:block; padding:0; border:0; grid-column:1 / -1; min-width:0; text-align:left; } .pt-m tbody td.m-x{ display:none; } .pt-m tbody td.m-g{ grid-column:1; } .pt-m tbody td.m-d{ grid-column:2; justify-self:end; text-align:right; }
  .pt-m tbody td:empty{ display:none; } .pt-tbl .nom{ min-width:0; }
  .pt-m tbody td{ background:none !important; box-shadow:none !important; } .pt-m tbody td.r{ text-align:left; } .pt-m tbody td.m-d.r,.pt-m tbody td.m-d{ text-align:right; }
  .pt-tbl tbody tr.is-coche{ background:none; } .pt-choix{ display:none; }
  .pt-docs li em br{ display:none; }
  .pt-mx tbody td.m-n{ display:flex; gap:8px; align-items:center; font-size:var(--taille-legende); color:var(--craie-3); grid-column:auto; } .pt-mx tbody td.m-n::before{ content:attr(data-l); }
  .pt-mx tbody tr{ grid-template-columns:repeat(3,auto) minmax(0,1fr); } .pt-mx tbody td.m-n:has(.pt-non){ opacity:.55; }
  .pt-scene{ padding:10px; }
  .pt-arbre .n2{ padding-left:30px; } .pt-arbre .n3{ padding-left:40px; } .pt-arbre .fin .pt-ferme{ display:none; }
  .pt-outils .fin{ margin-left:0; } .pt-depot .btn{ margin-left:0; }
}

/* Ce que les écrans réels ajoutent à la maquette. */
.pt-menu{ display:flex; align-items:center; gap:8px; } .pt-menu .n{ margin-left:auto; font-family:var(--f-mono); font-size:var(--taille-micro); color:var(--craie-4); }
a.pt-arm{ color:inherit; text-decoration:none; } .pt-arm .l1 .pill{ flex:none; }
.pt-docs li{ position:relative; } .pt-docs li a.pt-vers-doc{ color:inherit; text-decoration:none; } .pt-docs li a.pt-vers-doc::after{ content:''; position:absolute; inset:0; }
.pt-tbl tbody tr{ position:relative; } .pt-tbl .nom a{ color:inherit; text-decoration:none; } .pt-tbl .nom a::after{ content:''; position:absolute; inset:0; }
.pt-tbl td.pt-coche{ position:relative; z-index:1; width:28px; } .pt-tbl tbody tr:hover td{ background:var(--quai-2); }
a.pt-vig{ position:relative; color:inherit; text-decoration:none; } .pt-vig .pt-min img{ max-width:100%; max-height:126px; border-radius:var(--r-0); box-shadow:0 1px 2px color-mix(in oklab, var(--ombre-teinte) 30%, transparent); }
a.pt-vig:hover{ border-color:var(--trait-3); }
.pt-depot.is-survol{ border-color:var(--signal); background:color-mix(in oklch, var(--signal) 10%, transparent); }
.pt-depot input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pt-depot .pt-suivi{ flex-basis:100%; font-size:var(--taille-legende); color:var(--craie-3); }
.pt-apercu{ display:block; width:100%; height:min(72vh,760px); border:0; background:var(--blanc); border-radius:var(--r-0); }
.pt-image{ max-width:100%; max-height:min(72vh,760px); border-radius:var(--r-0); box-shadow:0 1px 2px color-mix(in oklab, var(--ombre-teinte) 25%, transparent), 0 10px 28px -12px color-mix(in oklab, var(--ombre-teinte) 45%, transparent); }
.pt-sans-apercu{ display:grid; gap:10px; justify-items:center; padding:34px 16px; text-align:center; font-size:var(--taille-petit); color:var(--craie-3); }
.pt-sans-apercu .pt-ft{ width:64px; height:42px; font-size:var(--taille-lecture); }
.pt-champ{ display:flex; align-items:center; gap:10px; padding:0 12px; height:42px; border:1px solid var(--trait); border-radius:var(--r-3); background:var(--quai); margin-bottom:12px; }
.pt-champ svg{ width:15px; height:15px; color:var(--craie-3); flex:none; } .pt-champ input{ flex:1; min-width:0; background:none; border:0; outline:0; font-size:var(--taille-lecture); height:100%; color:inherit; }
.pt-adresse{ display:flex; gap:8px; align-items:center; margin:12px; padding:10px 12px; border:1px solid var(--ok-tr); background:var(--ok-bg); border-radius:var(--r-2); flex-wrap:wrap; }
.pt-adresse code{ flex:1; min-width:0; font-family:var(--f-mono); font-size:var(--taille-legende); overflow-wrap:anywhere; }
.pt-gens li form,.pt-regles li form{ margin:0; } .pt-regles .sel{ height:26px; }
.pt-mx .sel{ height:26px; min-width:112px; } .pt-mx td form{ display:inline-flex; gap:6px; align-items:center; margin:0; }
.pt-pub{ display:grid; gap:10px; max-width:860px; margin:0 auto; } .pt-pub h1{ font-family:var(--f-titre); font-size:var(--taille-grand); font-weight:var(--graisse-forte); }
.pt-pub p{ font-size:var(--taille-petit); color:var(--craie-3); } .pt-pub .pt-scene{ border:1px solid var(--trait-2); border-radius:var(--r-3); }
.pt-saisie{ flex:1; min-width:0; } .pt-cherche{ min-width:220px; }
/* Les factures reçues (maquette, vue #v-factures) */
.pt-chiffres{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--trait-2); border-radius:var(--r-3); background:var(--quai); margin-bottom:12px; }
.pt-chiffres > div{ padding:10px 14px; border-right:1px solid var(--trait-2); min-width:0; } .pt-chiffres > div:last-child{ border-right:0; }
.pt-chiffres .k{ display:block; font-size:var(--taille-micro); font-weight:var(--graisse-forte); letter-spacing:.09em; text-transform:uppercase; color:var(--craie-4); }
.pt-chiffres .v{ font-family:var(--f-mono); font-size:var(--taille-titre); font-weight:var(--graisse-moyenne); display:block; margin-top:2px; white-space:nowrap; letter-spacing:-.02em; word-spacing:-.3em; }
.pt-chiffres .s{ font-size:var(--taille-legende); color:var(--craie-3); } .pt-chiffres .v.warn{ color:var(--warn); }
.pt-deux{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:12px; align-items:start; } .pt-deux > *{ min-width:0; }
.pt-deux--egal{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pt-fa .nom b{ display:block; font-weight:var(--graisse-forte); } .pt-fa .nom span{ font-size:var(--taille-legende); color:var(--craie-3); display:block; } .pt-fa td{ vertical-align:middle; } .pt-fa tbody tr{ cursor:pointer; }
.pt-fa tr.is-ici td{ background:var(--quai-2); } .pt-fa tr.is-ici td:first-child{ box-shadow:inset 3px 0 0 var(--signal); } .pt-fa tr.is-tri td:first-child{ box-shadow:inset 3px 0 0 var(--warn); }
.pt-fa .num{ white-space:nowrap; } .pt-fa small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); }
.pt-fa .pill{ white-space:nowrap; } .pt-pills{ display:flex; flex-wrap:wrap; gap:4px; }
/* Le détail d'une pièce : un panneau à droite, par-dessus la liste. */
dialog.dlg.pt-tiroir{ margin:0 0 0 auto; height:100dvh; max-height:100dvh; width:min(600px, 100vw) !important; border-radius:0;
  border-width:0 0 0 1px; }
dialog.dlg.pt-tiroir[open]{ animation:pt-tiroir-entre 200ms var(--ease); }
@keyframes pt-tiroir-entre{ from{ transform:translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ dialog.dlg.pt-tiroir[open]{ animation:none; } }
.pt-tiroir .dlg-ft form{ display:contents; }
/* Avec un fichier : l'aperçu de la pièce à gauche, sa lecture à droite (chacune défile seule). */
dialog.dlg.pt-tiroir.pt-tiroir--apercu{ width:min(1240px, 100vw) !important; }
.pt-avec-apercu{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:16px; overflow:hidden; padding-bottom:0; }
.pt-avec-apercu > .pt-lecture{ overflow-y:auto; min-height:0; padding-bottom:14px; }
.pt-fa-apercu{ min-height:0; height:calc(100% - 14px); display:flex; border:1px solid var(--trait-2); border-radius:var(--r-2); overflow:hidden;
  background:var(--nuit); margin-bottom:14px; }
.pt-fa-apercu iframe{ display:block; flex:1; width:100%; border:0; background:var(--craie); }
@media (max-width:900px){ .pt-avec-apercu{ display:block; overflow-y:auto; } .pt-fa-apercu{ height:60vh; } }
.pt-tete{ display:flex; align-items:flex-start; gap:12px; padding:2px 0 12px; border-bottom:1px solid var(--trait-2); }
.pt-tete > div:first-child{ flex:1; min-width:0; } .pt-tete .dim{ display:block; font-size:var(--taille-petit); margin-top:2px; }
.pt-somme{ font-family:var(--f-mono); font-size:var(--taille-grand); font-weight:var(--graisse-forte); letter-spacing:-.01em; }
.pt-tete-etat{ text-align:right; } .pt-tete-etat small{ display:block; font-size:var(--taille-legende); color:var(--craie-3); margin-top:3px; }
.pt-h{ margin:16px 0 6px; font-size:var(--taille-legende); font-weight:var(--graisse-forte); letter-spacing:.06em; text-transform:uppercase; color:var(--craie-3); }
.pt-afaire{ padding:9px 0; border-bottom:1px solid var(--trait-2); }
.pt-afaire-l{ display:flex; align-items:flex-start; gap:8px; } .pt-afaire-l .pill{ flex:none; white-space:nowrap; }
.pt-rien{ display:flex; align-items:center; gap:6px; color:var(--ok); font-size:var(--taille-petit); }
.pt-paye-f{ display:grid; gap:6px; margin-top:6px; } .pt-paye-op{ display:flex; gap:8px; align-items:flex-start; font-size:var(--taille-petit); cursor:pointer; }
.pt-paye-op small{ display:block; color:var(--craie-3); font-size:var(--taille-legende); } .pt-paye-f .btn{ justify-self:start; }
.pt-alerte--ok{ border-color:var(--ok-tr); background:var(--ok-bg); }
.pt-ana{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:var(--taille-petit); padding:2px 0 6px; }
.pt-ana-f{ display:grid; gap:8px; padding:6px 0 10px; } .pt-ana-l{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px; align-items:center; font-size:var(--taille-petit); }
.pt-ana-p{ display:flex; gap:6px; align-items:center; font-size:var(--taille-petit); } .pt-ana-f .btn{ justify-self:start; }
.pt-prog-f{ display:grid; gap:6px; margin-top:6px; } .pt-prog-l{ display:grid; grid-template-columns:140px minmax(0,1fr); gap:8px; align-items:center; font-size:var(--taille-petit); }
.pt-prog-f .btn{ justify-self:start; }
.pt-plie{ margin-top:12px; border-top:1px solid var(--trait-2); padding-top:8px; }
.pt-plie > summary{ cursor:pointer; font-size:var(--taille-petit); font-weight:var(--graisse-forte); color:var(--craie-2); }
.pt-lu div{ grid-template-columns:none; } .pt-lu dd small{ display:block; font-family:var(--f-texte); font-size:var(--taille-legende); color:var(--craie-3); font-weight:var(--graisse-normale); letter-spacing:0; word-spacing:normal; }
.pt-etapes{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:10px 12px; } .pt-etapes div{ display:grid; gap:4px; font-size:var(--taille-micro); color:var(--craie-3); min-width:0; } .pt-etapes div::before{ content:''; height:4px; border-radius:var(--r-0); background:var(--trait); }
.pt-etapes div.f::before{ background:var(--ok); } .pt-etapes div.ici::before{ background:var(--signal); } .pt-etapes div.ici{ color:var(--craie); font-weight:var(--graisse-forte); } .pt-etapes div.v::before{ background:none; border:1px dashed var(--trait-3); height:2px; }
.pt-alerte{ margin:10px 12px 0; padding:9px 11px; border:1px solid var(--warn-tr); border-radius:var(--r-2); background:var(--warn-bg); font-size:var(--taille-petit); } .pt-alerte b{ color:var(--warn); font-weight:var(--graisse-forte); } .pt-alerte span{ display:block; font-size:var(--taille-legende); color:var(--craie-2); margin-top:1px; }
.pt-honnete{ margin-bottom:12px; padding:9px 12px; border:1px dashed var(--warn-tr); border-radius:var(--r-2); font-size:var(--taille-petit); color:var(--craie-2); background:color-mix(in oklch, var(--warn) 6%, transparent); } .pt-honnete b{ color:var(--warn); font-weight:var(--graisse-forte); }
@media (max-width:1180px){ .pt-deux,.pt-deux--egal{ grid-template-columns:minmax(0,1fr); } .pt-chiffres{ grid-template-columns:repeat(3,minmax(0,1fr)); } .pt-chiffres > div{ border-bottom:1px solid var(--trait-2); } .pt-fa .col-plus{ display:none; } }
@media (max-width:900px){ .pt-chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pt-chiffres .v{ font-size:var(--taille-sous-titre); } .pt-etapes div{ font-size:var(--taille-nano); overflow:hidden; text-overflow:ellipsis; } }
@media (max-width:900px){ .pt-apercu{ height:62vh; } .pt-filtres .txt--cherche{ flex-basis:100%; max-width:none; } .pt-tbl tbody td.pt-tags{ grid-column:1 / -1; } .pt-cherche{ min-width:0; width:100%; } .tete-fin > form.rang:has(.pt-cherche){ flex:1 1 100%; } .pt-tbl td.pt-coche{ display:none; } .pt-mx td form{ flex-wrap:wrap; } }