/* ==========================================================================
   ReperAI — système de design (charte : navy + bleu, contenu data-first).
   Palette et typographie issues de docs/charte_1.png & charte_2.png.
   ========================================================================== */

/* Manrope donne au produit une voix plus technique et plus humaine qu'Inter. IBM Plex Mono est
   réservé aux scores, dates et compteurs : dans un radar commercial, les chiffres sont des
   instruments, pas du texte courant. Les fichiers sont auto-hébergés pour respecter la CSP. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/Manrope-400.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/Manrope-500.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/Manrope-600.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/Manrope-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fonts/Manrope-800.woff2") format("woff2");
}
/* V7 : Inter variable reprend le corps et l'interface (le rendu « produit contemporain »
   type Linear/Vercel). Un seul fichier couvre les graisses 100-900. Manrope reste chargée
   pour les gabarits qui la nomment encore. */
@font-face {
  font-family: "InterVar"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/IBMPlexMono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/IBMPlexMono-600.woff2") format("woff2");
}
:root {
  /* THÈME CLAIR. Papier technique légèrement bleuté, chrome navy, un accent cobalt.
     (Le passage sombre V7 a été essayé puis retiré à la demande du propriétaire.) */
  --bg: #f3f5f8;          /* papier technique, légèrement bleuté */
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --sunken: #e9edf3;
  --ink: #121c2e;
  --ink-2: #445168;
  --ink-3: #5c677c;   /* 5,7:1 sur blanc, 4,85 sur --sunken : AA partout (audit 09/2026) */
  --line: #dfe4ec;
  --line-2: #cbd3df;
  --sans: "InterVar", -apple-system, "Segoe UI", system-ui, sans-serif;
  --display: "InterVar", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --primary: #285fd6;
  --primary-2: #1f4dac;
  --primary-wash: #edf3ff;

  --accent: #10b981;      /* vert radar (succès, marque) */
  --accent-2: #059669;
  --accent-wash: #ecfdf5;
  --brand-grad: linear-gradient(135deg, #0f172a 0%, #1b263b 55%, #2563eb 130%);

  --side-bg: #0b1424;
  --side-2: #19263b;
  --side-ink: #b5c0d3;
  --side-ink-2: #94a1b8;  /* lisible aussi sous le halo bleu de la barre */
  --side-active: #ffffff;
  --side-line: var(--on-dark-line);
  --on-dark-muted: var(--side-ink);
  --tabbar-h: 68px;

  /* Priorité (charte) : élevée = rouge (à traiter), moyenne = orange, faible = vert (rien à
     faire). C'est une échelle d'URGENCE — à ne pas confondre avec le score ci-dessous. */
  --a: #e11d48;  --a-wash: #fff1f2;   /* priorité élevée  */
  --b: #f59e0b;  --b-wash: #fffbeb;   /* priorité moyenne */
  --c: #10b981;  --c-wash: #ecfdf5;   /* priorité faible  */

  /* Score Radar : échelle de QUALITÉ, donc l'inverse — un score haut est vert. Les deux codes
     coexistent dans la charte (pastille rouge « Élevée » à côté d'une jauge verte à 85). */
  --score-high: #10b981; --score-mid: #f59e0b; --score-low: #94a3b8;
  --ok: #10b981; --ok-wash: #ecfdf5;
  --warn: #f59e0b; --warn-wash: #fffbeb;
  --danger: #e11d48; --danger-wash: #fff1f2;

  /* Encres et traits sur fonds teintés. Tout passe par ces tokens : aucun composant ne
     code sa couleur en dur. */
  --on-primary: #fff;          /* texte posé sur un fond de couleur pleine */
  --on-light-line: rgba(10,13,22,.35); /* contour posé sur un panneau inversé (toast, undo) */
  --on-dark: #fff;             /* texte sur les surfaces navy (sidebar, bandeau) */
  --on-dark-dim: rgba(255,255,255,.10);
  --on-dark-line: rgba(255,255,255,.24);
  --on-dark-line-2: rgba(255,255,255,.45);
  --ok-ink: #047857;   --warn-ink: #92400e;   --danger-ink: #9f1239;
  --info-ink: #1e3a8a; --info-line: #bfdbfe;
  --warn-line: #fde68a; --danger-line: #fecdd3; --primary-line: #cfdcff;
  --danger-2: #be123c;         /* danger au survol */
  --primary-hi: #3d76ff;       /* haut du dégradé des boutons primaires */
  --primary-soft: #5a86ff;     /* fin de la barre de progression */
  --primary-link-dark: #9fc0ff;/* lien sur fond sombre (toast) */
  --know-wash: #eef2ff; --know-ink: #4338ca;  /* section « Comprendre » de la fiche */
  --focus-ring: rgba(47,107,255,.28);
  /* Ombre du panneau flottant de l'assistant : plus portee que celle des cartes, parce qu'il
     survole le contenu au lieu de s'y inserer. */
  --shadow-float: 0 24px 60px rgba(16, 24, 40, .22);
  --scrim: rgba(4, 10, 20, .58);

  --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --radius-pill: 999px; --tap: 44px;

  /* Échelles. Sans elles, chaque écran choisissait ses valeurs à la main : la relecture des
     gabarits donnait 32 paddings, 27 tailles de police et 11 rayons différents, d'où une
     impression d'ensemble décousue. Toute nouvelle règle doit puiser ici. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  --fs-2xs: .6875rem;  /* 11px — étiquettes capitales */
  --fs-xs: .75rem;     /* 12px */
  --fs-sm: .8125rem;   /* 13px — texte secondaire */
  --fs-md: .875rem;    /* 14px — texte courant dense */
  --fs-base: 1rem;     /* 16px — corps */
  --fs-lg: 1.125rem;   /* 18px — titres de carte */
  --fs-xl: 1.375rem;   /* 22px */
  --fs-3xl: 2.5rem;    /* 40px — chiffre héros du tableau de bord */
  /* DESIGN_V3 — deux rôles manquaient à l'échelle.
     `--fs-display` : le nom du dossier dans le bandeau. L'écart titre/corps était de 1,2x,
     trop faible pour qu'un titre commande ; il passe à 1,8x.
     `--fs-num` : les chiffres SONT le contenu d'un outil de prospection (score, immeubles,
     avis). Composés en texte courant, ils se noyaient. */
  --fs-display: 2rem;
  --fs-num: 1.625rem;
  --shadow: 0 1px 2px rgba(11,20,36,.05);
  /* Ombre de carte à deux couches : un contact net + une portée diffuse très basse. C'est la
     superposition qui fait « objet posé » ; une seule ombre moyenne fait « boîte grise ». */
  --shadow-md: 0 1px 2px rgba(11,20,36,.04), 0 14px 36px -26px rgba(11,20,36,.26);
  --shadow-lg: 0 22px 54px -26px rgba(11,20,36,.38);
  --primary-glow: rgba(37,99,235,.32);   /* halo des surfaces primaires */
  --inset-hi: rgba(255,255,255,.16);     /* rehaut interne des surfaces pleines */
  --sidebar: 260px;

  /* Matière : dégradés et lueurs — c'est eux qui font « produit », pas « formulaire ». */
  --grad-primary: linear-gradient(180deg, #3168dd 0%, #285fd6 55%, #2254c6 100%);
  --grad-hero: linear-gradient(135deg, #0f172a 0%, #16294d 45%, #1d4ed8 130%);
  --grad-side: linear-gradient(180deg, #0d1830 0%, #0b1424 46%, #0a1120 100%);
  /* Trame technique du fond de page : des points, pas une couleur. */
  --dot: rgba(18,28,46,.038);

  /* V6 — lumière, verre et grain. Le verre porte la barre supérieure ; les lueurs vivent
     UNIQUEMENT sur les surfaces navy (sidebar, dossier) ; le grain casse l'aplat numérique.
     Le grain est un SVG sans couleur (feTurbulence) : il prend la teinte de son fond. */
  --glow-blue-dark: rgba(72,124,255,.22);
  --glow-green-dark: rgba(16,185,129,.13);
  /* Radar de la page de connexion : anneaux discrets, traîne du balayage, écho détecté. */
  --radar-ring: rgba(255,255,255,.16);
  --radar-beam: rgba(16,185,129,.22);
  --radar-blip: #34d399;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --grad-accent: linear-gradient(135deg, #34d399, #059669);
  --grad-violet: linear-gradient(135deg, #a78bfa, #7c3aed);
  --grad-amber: linear-gradient(135deg, #fbbf24, #d97706);
  --glow-1: rgba(37,99,235,.07);         /* halos du fond de page */
  --glow-2: rgba(16,185,129,.05);
  --acc-violet: #7c3aed; --acc-violet-wash: #f5f3ff;
  --acc-cyan: #0891b2;  --acc-cyan-wash: #ecfeff;
  /* Teintes de colonne par étape du pipeline (wash très légères). */
  --stagewash-1: #f3f5f8; --stagewash-2: #eef5ff; --stagewash-3: #edf3ff;
  --stagewash-4: #fff6ea; --stagewash-5: #eafbf3;
  /* Marqueurs pleins des étapes : une progression du neutre vers le vert de réussite —
     jamais les couleurs de priorité, qui mettraient « Client » en rouge. */
  --stage-1: #8494ab; --stage-2: #285fd6; --stage-3: #0891b2;
  --stage-4: #0d9488; --stage-5: #10b981;
  /* « Réponse attendue » : famille ambre, la même que la bulle entrante (--warn-wash). */
  --awaiting-ink: var(--warn-ink); --awaiting-line: var(--warn-line);
  --page: var(--bg);
  /* Voiles translucides : verre dépoli des panneaux posés sur la carte et cartes de ton. */
  --surface-veil: rgba(255,255,255,.66); --surface-veil-2: rgba(255,255,255,.86);
  /* Assombrissement du visuel de connexion et ombres posées sur une photo. */
  --overlay-soft: rgba(11,20,36,.28); --overlay-mid: rgba(11,20,36,.42);
  --overlay-strong: rgba(11,20,36,.84); --overlay-deep: rgba(11,20,36,.78);
  --warm-wash: #fdf3e7;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background-color: var(--bg);
  /* La lumière vient d'en haut : la page s'éclaircit vers son sommet, deux halos s'y
     accrochent, et la trame de points « papier technique » court dessous. */
  background-image:
    radial-gradient(900px 420px at 88% -140px, var(--glow-1), transparent 70%),
    radial-gradient(700px 360px at 8% -120px, var(--glow-2), transparent 70%),
    radial-gradient(var(--dot) 1px, transparent 1.5px),
    linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 420px);
  background-size: auto, auto, 26px 26px, auto;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base); line-height: 1.58; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Inter : a/g/y ouverts */
}
/* PAS de `scroll-behavior: smooth` global : le navigateur l'applique aussi au retour en
   haut de page APRES une navigation — changer d'onglet sur une fiche longue donnait un
   defilement anime fantome, vecu comme « toute la page recharge ». (Il bloquait aussi les
   clics Playwright, qui attendent un element stable pendant que la page glisse.) */
/* Typographie : pas de mot orphelin en fin de titre, paragraphes équilibrés. */
h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
/* Accessibilité : focus clavier visible partout (souris/tactile n'affichent rien). */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* WCAG 2.2 AA — « Focus Not Obscured ». Le focus clavier doit rester visible quand on tabule.
   Trois elements fixes peuvent le recouvrir dans cette application : la navigation collante en
   tablette, la barre d'onglets basse sur telephone, et le lanceur flottant de l'assistant,
   present sur TOUTES les pages. Sans marge de defilement, le navigateur amene l'element au
   ras du bord — donc juste dessous. On reserve la place. */
html { scroll-padding-top: 64px; scroll-padding-bottom: 88px; }
@media (max-width: 640px) {
  /* Barre d'onglets + lanceur empiles : il faut davantage de garde. */
  html { scroll-padding-bottom: 132px; }
}
.subtab:focus-visible, .tonecard:focus-within { outline-color: var(--accent); }
/* Respect du réglage système « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* Utilitaires : chiffres alignés (données) + libellés mono « instrument ». */
.tnum, .num, .kpi .n, .sc, .fbar { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
/* Échelle éditoriale : le titre de page est un objet, pas une étiquette. Fluide entre
   2 et 2,75 rem — sur un grand écran il commande, sur un portable il respire encore. */
h1 { font-family: var(--display); font-size: clamp(2rem, 1.45rem + 1.6vw, 2.75rem);
  font-weight: 800; letter-spacing: -.05em; margin: 0; line-height: 1.04; text-wrap: balance; }
h2 { font-size: 1rem; font-weight: 680; margin: 0 0 .7rem; letter-spacing: -.018em; }
h3 { font-size: .9375rem; font-weight: 650; margin: 0; }
p { margin: 0 0 .5rem; }
.muted { color: var(--ink-3); }
.small { font-size: .82rem; }

/* ---------------- App shell : barre latérale sombre + espace de travail clair ---------------- */
/* Charte : navigation verticale groupée (AUJOURD'HUI / EMAILS / SUIVI / PILOTAGE), profil en bas. */
.shell { min-height: 100vh; }
.side {
  background: var(--grad-side); color: var(--side-ink);
  display: flex; flex-direction: column; gap: 2px; padding: 16px 12px 12px;
}
.side-close, .side-scrim { display: none; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--on-dark); }
/* Lockup ReperAI genere : fond noir efface par le fondu `screen` sur le navy. */
.side-lockup { width: 196px; height: auto; display: block; margin: 0 auto;
  mix-blend-mode: screen; }
.side-brand .bname i { display: block; font-style: normal; font-family: var(--mono);
  font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--side-ink-2); margin-top: 3px; }
.side-group { color: var(--side-ink-2); font-size: .615rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .13em; padding: 18px 10px 5px; }
.side-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 7px;
  color: var(--side-ink); font-size: .84rem; font-weight: 500; min-height: 34px;
  background: none; border: 0; cursor: pointer; font-family: inherit; width: 100%; text-align: left; }
.side-item .ic { opacity: .78; }
.side-item:hover { background: var(--on-dark-dim); color: var(--on-dark); text-decoration: none; }
.side-item:hover .ic, .side-item.active .ic { opacity: 1; }
/* Actif : pilule en dégradé avec halo — l'écran courant se voit du coin de l'œil. */
.side-item.active { background: var(--grad-primary); color: var(--on-primary); font-weight: 580;
  box-shadow: inset 0 1px 0 var(--inset-hi), 0 4px 14px -4px var(--primary-glow); }

.side-item .nav-badge { margin-left: auto; }
.side-user { margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1px solid var(--on-dark-dim); border-radius: var(--radius-sm);
  background: var(--on-dark-dim); }
.side-avatar { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; display: grid;
  place-items: center; background: var(--grad-primary); color: var(--on-primary);
  font-weight: 700; font-size: .78rem; box-shadow: inset 0 1px 0 var(--inset-hi); }
.side-user .who { min-width: 0; }
.side-user .who b { display: block; color: var(--on-dark); font-size: .82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .who span { font-size: .7rem; color: var(--side-ink-2); }
.side-logout { margin-left: auto; background: none; border: 0; color: var(--side-ink-2);
  cursor: pointer; font-size: 1rem; padding: 6px; border-radius: 6px; }
.side-logout:hover { background: var(--side-2); color: var(--on-dark); }
.nav-badge { background: var(--primary); color: var(--on-primary); font-size: .64rem; font-weight: 640;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.side-item.active .nav-badge { background: var(--primary); }

.content { padding: 20px 16px 44px; }

/* Mobile : la barre latérale devient une bande horizontale défilante en haut. */
/* 641-899 px (tablette étroite) : bande horizontale en haut, comme avant. */
@media (max-width: 899px) and (min-width: 641px) {
  .side { flex-direction: row; align-items: center; gap: 4px; padding: 8px 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: sticky; top: 0; z-index: 40; }
  .side::-webkit-scrollbar { display: none; }
  .side-brand { padding: 0 10px 0 4px; flex: 0 0 auto; }
  .side-brand .bname i { display: none; }
  .side-group { display: none; }
  .side-item { flex: 0 0 auto; width: auto; white-space: nowrap; }
  .side-user { margin-top: 0; border-top: 0; padding: 0 4px; flex: 0 0 auto; }
  .side-user .who { display: none; }
}

/* ≤ 640 px : tab bar basse (DESIGN.md, charte mobile). La zone du pouce porte les cinq
   écrans du quotidien ; la navigation complète se déplie par « Plus ». */
.tabbar-bottom { display: none; }
@media (max-width: 640px) {
  .tabbar-bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--side-bg); border-top: 1px solid var(--side-2);
    padding: 6px max(6px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)); }
  .tabbar-bottom a, .tabbar-bottom button { position: relative; display: flex;
    flex-direction: column; align-items: center; gap: 3px; min-height: var(--tap);
    padding: 6px 2px; background: none; border: 0; font: inherit; cursor: pointer;
    color: var(--side-ink); text-decoration: none; font-size: var(--fs-2xs);
    border-radius: var(--radius-sm); }
  .tabbar-bottom .ic { width: 20px; height: 20px; }
  .tabbar-bottom .on { color: var(--on-dark); background: var(--side-2); }
  .tb-badge { position: absolute; top: 2px; right: 50%; transform: translateX(16px);
    background: var(--primary); color: var(--on-primary); font-style: normal;
    font-size: 10px; font-weight: 700; min-width: 15px; text-align: center;
    border-radius: var(--radius-pill); padding: 0 4px; }
  /* La navigation complète devient un tiroir replié : « Plus » la déplie. */
  .side { display: none; }
  .side.open { display: flex; flex-direction: column; position: fixed;
    inset: 0 auto var(--tabbar-h) 0; width: min(88vw, 360px);
    z-index: 46; overflow-y: auto; padding-bottom: var(--s6); box-shadow: var(--shadow-float); }
  .side.open .side-close { position: absolute; top: var(--s3); right: var(--s3); z-index: 2;
    display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--on-dark-line);
    border-radius: var(--radius-sm); background: var(--on-dark-dim); color: var(--on-dark);
    font: 400 1.75rem/1 var(--sans); cursor: pointer; }
  body.nav-open { overflow: hidden; }
  body.nav-open .side-scrim { position: fixed; inset: 0 0 var(--tabbar-h); z-index: 44;
    display: block; width: 100%; padding: 0; border: 0; background: var(--scrim); }
  /* Le contenu ne passe pas sous la barre basse. */
  .content { padding-bottom: 76px; }
}

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .side { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  /* L'espace de travail prend la largeur disponible : plafonner à 1400 px laissait deux
     bandes vides sur un écran large sans rien y gagner. */
  .content { padding: 26px 34px 44px; max-width: 1760px; }
}
@media (min-width: 1500px) { .content { padding: 30px 44px 52px; } }

/* ---------------- Jauge de score circulaire (composant signature de la charte) ----------------
   Anneau conique : --p = score 0-100, --gc = couleur de la priorité. */
.gauge { --p: 0; --gc: var(--primary); --sz: 56px;
  width: var(--sz); height: var(--sz); border-radius: 50%; flex: 0 0 auto; position: relative;
  display: grid; place-items: center;
  background: conic-gradient(var(--gc) calc(var(--p) * 1%), var(--sunken) 0); }
/* Anneau fin (~7 % du diamètre) : l'ancien anneau épais faisait camembert. */
.gauge::after { content: ""; position: absolute; inset: calc(var(--sz) * .075); border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.gauge .g-in { position: relative; z-index: 1; text-align: center; line-height: 1; }
.gauge .g-v { font-weight: 640; font-size: calc(var(--sz) * .3); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.gauge .g-u { display: block; font-size: calc(var(--sz) * .15); color: var(--ink-3); font-weight: 560; margin-top: 1px; }
.gauge.lg { --sz: 88px; }
.gauge.sm { --sz: 44px; }
.gauge.sm .g-u { display: none; }

/* ---------------- Tuiles KPI à icône (bandeau haut de page) ---------------- */
.kpi-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 20px; }
@media (min-width: 900px) { .kpi-row { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.kpi-tile { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi-tile .ic { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; display: grid;
  place-items: center; font-size: 1.05rem; background: var(--primary-wash); color: var(--primary); }
.kpi-tile.ok .ic { background: var(--ok-wash); color: var(--ok); }
.kpi-tile.warn .ic { background: var(--warn-wash); color: var(--warn); }
.kpi-tile .kv { min-width: 0; }
.kpi-tile .kv b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-tile .kv span { font-size: .8rem; color: var(--ink-3); }

/* ---------------- Sous-onglets de hub (Emails / Suivi / Pilotage) ---------------- */


.subtab:hover { color: var(--ink); text-decoration: none; }
/* Onglet de section actif : liseré cuivre (identité), distinct du bleu des hubs. */
.subtab.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.subtab-badge { background: var(--danger); color: var(--on-primary); font-size: .7rem; font-weight: 700;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; }

/* ---------------- Bannières (feedback en tête de page) ---------------- */


.banner-ok { background: var(--primary-wash); color: var(--primary); border-color: var(--primary); }

/* ---------------- Page header ---------------- */

.page-head .sub { color: var(--ink-3); font-size: .92rem; margin-top: 4px; }


/* ---------------- Cards ---------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-md); }
.card.pad-0 { padding: 0; overflow: hidden; }
.card > h2:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }

/* ---------------- Buttons ---------------- */
.btn, .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap); padding: 7px 13px; border-radius: var(--radius-sm); font-size: .84rem;
  font-weight: 560; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink); transition: background .12s, border-color .12s, box-shadow .12s;
  white-space: nowrap; box-shadow: var(--shadow); }
/* À la souris, 36 px suffisent et la page respire ; la cible tactile de 44 px reste garantie. */
@media (pointer: fine) { .btn, .btn-primary { min-height: 36px; } }
.btn:hover:not(.btn-primary):not(.btn-ai):not(.btn-danger):not(:disabled) {
  background: var(--surface-2); border-color: var(--line-2); text-decoration: none; }
.btn-primary { background: var(--grad-primary); color: var(--on-primary); border-color: var(--primary-2);
  box-shadow: inset 0 1px 0 var(--inset-hi), 0 3px 10px -2px var(--primary-glow); }
/* Le fond est redéclaré ici : sans lui, `.btn:hover` (plus spécifique que `.btn-primary`)
   repeignait le bouton en blanc sous son texte blanc — il disparaissait au survol. */
.btn-primary:hover:not(:disabled) { background: var(--grad-primary); filter: brightness(1.08);
  text-decoration: none; box-shadow: inset 0 1px 0 var(--inset-hi), 0 5px 16px -3px var(--primary-glow); }
/* Désactivé : un bouton grisé DOIT rester lisible — il explique pourquoi l'envoi est bloqué. */
.btn:disabled, .btn-primary:disabled { cursor: not-allowed; box-shadow: none;
  background: var(--sunken); border-color: var(--line); color: var(--ink-3); filter: none; }

.btn-danger:hover { background: var(--danger-wash); }
.btn-sm { min-height: 30px; padding: 3px 10px; font-size: .8rem; }
/* Sur écran tactile, la cible reste ≥ 44 px (le compact 34 px n'est que pour la souris). */
@media (pointer: coarse) { .btn-sm { min-height: var(--tap); padding: 8px 13px; } }

.btn-block { width: 100%; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Cartes-à-icônes (choix rapides : résultat d'appel…) — motif maison, pas décoratif à outrance. */
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 520px) { .result-grid { grid-template-columns: repeat(4, 1fr); } }
.result-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink);
  font-weight: 600; font-size: .82rem; cursor: pointer; min-height: 44px;
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease; }
.result-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--primary); }
.result-card .rc-ic { font-size: 1.4rem; line-height: 1; }
.result-card.ok:hover { border-color: var(--ok); }
.result-card.danger:hover { border-color: var(--danger); }

/* ---------------- Pills, badges ---------------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 590; background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); white-space: nowrap; letter-spacing: .005em; }
/* Teintes foncees : les valeurs vives de `--ok` et `--warn` sur leur wash tombent sous le
   contraste 4.5:1 exige par la charte (WCAG AA) pour du texte de .76rem. */
/* Accent cuivre : réservé aux « détections radar » (signaux d'opportunité). */
.pill.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.chip-sm { display: inline-block; padding: 2px 9px; margin: 2px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: .77rem; color: var(--ink-2); }

/* ---------------- Grids ---------------- */
.cols { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cols-2 { grid-template-columns: repeat(2,1fr); } .cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px) { .cols-3 { grid-template-columns: repeat(3,1fr); } }

/* ---------------- KPI tiles ---------------- */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(2,1fr); margin: 0 0 18px; }
@media (min-width: 960px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
/* Colonne : l'etiquette occupe le haut, le chiffre est pousse en bas. Sans cela une etiquette
   sur deux lignes decalait son chiffre vers le bas et la rangee de tuiles perdait sa ligne de
   base commune. */
.kpi { display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
/* Filet lumineux en tête de tuile ; l'accent tourne pour rythmer la rangée. */
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-primary); }
.kpi:nth-child(2)::before { background: var(--grad-violet); }
.kpi:nth-child(3)::before { background: var(--grad-accent); }
.kpi:nth-child(4)::before { background: var(--grad-amber); }
.kpi:nth-child(5)::before { background: var(--grad-primary); }
.kpi:nth-child(6)::before { background: var(--grad-accent); }
.kpi-l { display: block; font-size: var(--fs-2xs); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 620; line-height: 1.35; }
.kpi .n { display: block; }
.kpi .lbl { font-family: var(--sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi .n { font-family: var(--sans); font-size: 1.625rem; font-weight: 640; letter-spacing: -.022em;
  margin-top: var(--s2); line-height: 1.05; }
.kpi .n small { font-size: .9rem; font-weight: 600; color: var(--ink-3); }

/* ---------------- Conversion funnel (Pipedrive-like) ---------------- */
.funnel { display: flex; flex-direction: column; gap: 3px; }
.fstage { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 14px; padding: 6px 0; }
.fstage .fname { font-size: .84rem; font-weight: 560; }
.fstage .fbarwrap { background: var(--sunken); border-radius: 6px; height: 22px; position: relative; overflow: hidden; }
.fstage .fbar { height: 100%; border-radius: 6px; background: var(--grad-primary); display: flex;
  align-items: center; padding: 0 9px; color: var(--on-primary); font-weight: 620; font-size: .76rem;
  min-width: 30px; box-shadow: inset 0 1px 0 var(--inset-hi); }
.fstage .fconv { font-size: .78rem; color: var(--ink-3); text-align: right; min-width: 74px; }
.fstage .fconv b { color: var(--ok); }
@media (max-width: 620px) { .fstage { grid-template-columns: 110px 1fr; } .fstage .fconv { grid-column: 2; text-align: left; } }

/* ---------------- Tables ---------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table th, .table td { text-align: left; padding: 11px 16px; vertical-align: middle; }
.table thead th { font-family: var(--sans); font-size: .655rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 620; border-bottom: 1px solid var(--line); background: transparent;
  padding-top: 9px; padding-bottom: 9px; }
.table tbody tr { border-bottom: 1px solid var(--line); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
/* Le survol promettait deja un clic : le curseur doit tenir la meme promesse. */
.table tbody tr.row-link { cursor: pointer; }
/* Le nom doit se lire comme un lien, sinon rien n'indique ou cliquer au clavier. */
.acc-name { color: var(--primary); }
.acc-name:hover, .row-link:hover .acc-name { text-decoration: underline; }
/* Les noms en encre, pas en bleu : une colonne de liens bleus gras faisait mur de liens.
   Le bleu redevient rare, donc signifiant (boutons primaires, navigation active). */
.table td a { color: var(--ink); font-weight: 560; }
.table td a:hover { color: var(--primary); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .table, .table thead, .table tbody, .table th, .table td, .table tr { display: block; }
  .table thead { display: none; }
  .table tbody tr { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 12px 10px; padding: 10px 12px; }
  .table td { border: none; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; }
  .table td::before { content: attr(data-label); font-weight: 600; color: var(--ink-3); font-size: .82rem; }
}

/* ---------------- Master-detail / kanban / today ---------------- */


/* ---------------- Email preview ---------------- */
/* Le mail se lit comme un document : feuille blanche, marges généreuses, filet dégradé en
   tête. L'ancien pavé gris 13 px faisait champ de formulaire, pas courrier. */
.email-preview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 30px; white-space: pre-wrap; font-size: .95rem; line-height: 1.75;
  box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.email-preview::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-primary); }
.email-preview .subject { font-weight: 660; font-size: 1.05rem; letter-spacing: -.01em;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* ------- Feuille email à trois états : aperçu, édition SUR PLACE, réécriture SUR PLACE.
   « Modifier » ne duplique plus le texte dans un second panneau : la feuille elle-même
   devient éditable, au même endroit, avec la même typographie. ------- */
.mailsheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.mailsheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-primary); z-index: 1; }
.mailsheet .ms-pane { padding: 26px 34px; }
@media (min-width: 1400px) { .mailsheet .ms-pane { padding: 32px 44px; } }
.mailsheet .ms-pane[data-pane="home"] { white-space: pre-wrap; font-size: .95rem; line-height: 1.75; }
.mailsheet .subject { font-weight: 660; font-size: 1.05rem; letter-spacing: -.01em;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* Édition native de la feuille : l'objet EST le titre, le corps EST la page — pas des
   champs de formulaire encadrés qui recopient le document. */
.mailsheet .mailedit { gap: var(--s3); }
.mailsheet .mailedit input {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  background: transparent; padding: 0 0 12px; min-height: 0;
  font-size: 1.05rem; font-weight: 660; letter-spacing: -.01em; color: var(--ink); }
.mailsheet .mailedit textarea {
  border: 0; box-shadow: none; background: transparent; padding: 0; border-radius: 0;
  min-height: 44vh; font-size: .95rem; line-height: 1.75; resize: vertical; }
.mailsheet .mailedit input:focus, .mailsheet .mailedit textarea:focus {
  outline: none; box-shadow: none; border-color: var(--primary); }
.mailsheet .fld-lab { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 620; }
.mailsheet .mailedit-act { border-top: 1px solid var(--line); padding-top: var(--s4);
  justify-content: flex-end; }

/* Réécriture sur place : bandeau d'intention au-dessus du même emplacement. */
.mailsheet .rewrite { gap: var(--s3); }
.ms-title { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 640; margin: 0 0 var(--s2); }

/* ---------------- Fiche / facts ---------------- */
.status-grid { display: grid; gap: 14px 22px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .status-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px) { .status-grid { grid-template-columns: repeat(4,1fr); } }
.status-grid > div, .fact { display: flex; flex-direction: column; gap: 3px; }
.k, .kpi .lbl.k { font-family: var(--sans); font-size: .66rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .11em; font-weight: 600; }
.v { font-weight: 600; }
.v.num, .stage .count { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.evidence { font-style: italic; color: var(--ink-2); font-size: .89rem; margin-top: 4px; border-left: 3px solid var(--primary-wash); padding-left: 10px; }
.data-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.data-row:last-child { border-bottom: none; }

/* ---------------- Console stages ---------------- */
.stages { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .stages { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1120px) { .stages { grid-template-columns: repeat(3,1fr); } }
.stage { display: flex; flex-direction: column; position: relative; }
.stage .num { position: absolute; top: 14px; right: 16px; font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.stage .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-wash); color: var(--primary-2);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 10px; }
.stage p { flex: 1; color: var(--ink-2); font-size: .88rem; margin-bottom: 12px; }
.stage.running { border-color: var(--warn); background: var(--warn-wash); }
.stage .count { font-size: .8rem; color: var(--ink-3); margin-bottom: 10px; font-weight: 600; }

/* ---------------- Forms ---------------- */
label { display: block; margin: 12px 0 5px; font-weight: 600; font-size: .88rem; }
/* Les cases et boutons radio sont exclus : en `width: 100%` leur pastille se dessine au centre
   de l'espace disponible, donc a une position differente selon la longueur du libelle voisin.
   C'est ce qui desalignait les trois choix « Niveau d'assistance » de l'ecran IA. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])),
select, textarea {
  width: 100%; padding: 8px var(--s3); font-size: var(--fs-md); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); background: var(--surface); min-height: var(--tap); color: var(--ink);
  box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s; }
@media (pointer: fine) {
  input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])),
  select { min-height: 38px; }
}
input[type=checkbox], input[type=radio] {
  width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; margin: 0; accent-color: var(--primary);
  cursor: pointer; }
input:focus-visible, select:focus, textarea:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring); }
.form-grid { display: grid; gap: 4px 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2,1fr); } }

/* ---------------- Callout / explainer ---------------- */
.callout { background: var(--primary-wash); border: 1px solid var(--primary-line); border-radius: var(--radius); padding: 16px 18px; }
.callout h2 { color: var(--primary-2); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: .85rem; color: var(--ink-2); }
.legend .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }

/* ---------------- Misc ---------------- */
[hidden] { display: none !important; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 100px; background: var(--ink);
  color: var(--on-primary); padding: 12px 18px; border-radius: 999px; display: flex; gap: 14px; align-items: center;
  z-index: 40; box-shadow: var(--shadow-lg); }
.toast[hidden] { display: none !important; }
.toast a { color: var(--primary-link-dark); font-weight: 600; }
.toast.toast-error { background: var(--danger); }
.toast.toast-ok { background: var(--primary); }

/* ---------------- Barre d'annulation (undo 10 s) ---------------- */
.undobar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 45;
  display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--on-primary);
  padding: 11px 12px 11px 18px; border-radius: 999px; box-shadow: var(--shadow-lg); font-size: .9rem; }
.undobar[hidden] { display: none !important; }
.undobar-btn { background: transparent; border: 1px solid var(--on-dark-line-2); color: var(--on-primary);
  font: inherit; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.undobar-btn:hover { background: var(--on-dark-dim); }
.undobar-count { opacity: .6; font-variant-numeric: tabular-nums; min-width: 16px; text-align: center; }
@media (min-width: 900px) { .undobar { bottom: 28px; } }

.empty h2 { color: var(--ink-2); }
form.inline { display: inline; }
details > summary { cursor: pointer; }
ul { margin: .3rem 0; padding-left: 1.1rem; } li { margin: .2rem 0; }
hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
canvas { max-width: 100%; }

/* ==========================================================================
   V2 — barre supérieure, recherche globale, notifications, tableaux denses,
   formulaires de réglages, checklists. Palette et rythme inchangés (charte).
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.d-block { display: block; }
.inline { display: inline; }

/* ---------------- Barre supérieure : recherche globale + notifications ------ */
.topbar { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.gsearch { position: relative; flex: 1 1 auto; max-width: 520px; }
.gsearch input {
  width: 100%; height: 40px; padding: 0 68px 0 36px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: .875rem; box-shadow: var(--shadow-md);
  transition: box-shadow .15s, border-color .15s;
}
.gsearch input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-md); }
.gsearch input::placeholder { color: var(--ink-3); }
.gsearch-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 1rem; pointer-events: none; }
.gsearch-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: .66rem; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 5px; background: var(--surface-2); pointer-events: none; }
.gsearch-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-height: 60vh; overflow-y: auto; padding: 6px;
}
.gsearch-group h4 { margin: 8px 8px 4px; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }
.gsearch-hit { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px;
  min-height: 44px; }
.gsearch-hit:hover, .gsearch-hit.active { background: var(--sunken); text-decoration: none; }
.gsearch-hit.active { box-shadow: inset 3px 0 0 var(--primary); }
.gsearch-hit-ic { width: 20px; text-align: center; }
.gsearch-hit-txt { min-width: 0; display: flex; flex-direction: column; }
.gsearch-hit-txt b { font-size: .875rem; font-weight: 600; }
.gsearch-hit-txt span { font-size: .76rem; color: var(--ink-3); }
.gsearch-empty { padding: 14px; color: var(--ink-3); font-size: .82rem; margin: 0; }

.topbar-bell { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; min-width: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); text-decoration: none; }
.topbar-bell:hover, .topbar-bell.active { border-color: var(--primary); text-decoration: none; }
.topbar-bell .nav-badge { position: absolute; top: -6px; right: -6px; }

/* ---------------- En-tête de page ------------------------------------------ */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; margin: 0 0 16px; }
.page-head p { margin: 4px 0 0; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Grilles et cartes ---------------------------------------- */
/* `align-items: start` : sans lui, chaque carte est etiree a la hauteur de la plus haute de sa
   rangee. Un bloc de deux lignes (« Signaux détectés ») occupait autant qu'un detail de score
   de 400 px, et la fiche se lisait comme une suite de cadres a moitie vides. */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--s4); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4); align-items: start; }
/* Largeur de lecture des ecrans de reglages. 720 px laissaient plus de 40 % de vide a droite
   sur un portable, alors que /parametres occupait toute la largeur : deux ecrans de reglages,
   deux mises en page. Une seule mesure pour les deux. */
.card-narrow, .form-page { max-width: 980px; }
/* Occupe toute la largeur de la grille : pour un tableau qu'une piste etriquee
   rendrait illisible. */
.card-full { grid-column: 1 / -1; }
.card-warn { border-left: 3px solid var(--warn); }
.card-ok { border-left: 3px solid var(--ok); }

/* ---------------- Bandeaux --------------------------------------------------*/
.banner { padding: 10px 14px; border-radius: var(--radius-sm); font-size: .86rem; font-weight: 550; margin-bottom: 18px; border: 1px solid var(--line); margin: 0 0 14px; background: var(--surface-2); }
.banner ul { margin: 4px 0 0; padding-left: 18px; }
.banner-info { background: var(--primary-wash); border-color: var(--info-line); color: var(--info-ink); }
.banner-warn { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn-ink); }
.banner-error { background: var(--danger-wash); color: var(--danger-ink); border-color: var(--danger-line); }

/* ---------------- États vides (A54) ---------------------------------------- */
.empty { text-align: center; color: var(--ink-3); padding: 36px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--surface); }
.empty-title { font-weight: 650; margin: 0 0 4px; }
.empty-hint { color: var(--ink-3); font-size: .86rem; margin: 0 0 14px; }

/* États de navigation — même langage radar, sans laisser l'utilisateur dans une impasse. */
.error-page { min-height: min(640px, 72dvh); display: grid; place-items: center;
  grid-template-columns: minmax(210px, .7fr) minmax(280px, 1fr); gap: clamp(36px, 8vw, 110px);
  max-width: 920px; margin: 0 auto; padding: clamp(36px, 8vw, 90px) 0; }
.error-signal { position: relative; display: grid; place-items: center; width: min(42vw, 290px);
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; color: var(--primary); }
.error-signal::before, .error-signal::after, .error-signal i { content: ""; position: absolute;
  inset: 16%; border: 1px solid var(--line); border-radius: 50%; }
.error-signal::after { inset: 32%; }
.error-signal i:nth-of-type(1) { width: 1px; height: 100%; inset: 0 auto; border: 0;
  border-left: 1px solid var(--line); border-radius: 0; }
.error-signal i:nth-of-type(2) { width: 100%; height: 1px; inset: auto 0; border: 0;
  border-top: 1px solid var(--line); border-radius: 0; }
.error-signal i:nth-of-type(3) { inset: 50% 50% auto auto; width: 38%; height: 1px;
  border: 0; border-top: 2px solid var(--accent); border-radius: 0; transform-origin: left;
  transform: rotate(-28deg); }
.error-signal span { position: relative; z-index: 1; font-family: var(--sans); font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 700; letter-spacing: -.07em; color: var(--primary); background: var(--page);
  padding: 0 .12em; font-variant-numeric: tabular-nums; }
.error-copy { max-width: 490px; }
.error-copy .eyebrow { margin: 0 0 var(--s2); }
.error-copy h1 { margin: 0 0 var(--s3); font-size: clamp(2rem, 5vw, 3.8rem); line-height: .98; }
.error-copy > p:not(.eyebrow) { max-width: 48ch; color: var(--ink-3); font-size: var(--fs-lg); }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
@media (max-width: 700px) {
  .error-page { grid-template-columns: 1fr; text-align: center; gap: var(--s5); padding-top: var(--s5); }
  .error-signal { width: min(62vw, 230px); }
  .error-copy > p { margin-inline: auto; }
  .error-actions { justify-content: center; }
}

/* ---------------- Tableaux denses ------------------------------------------ */
/* `.table` est defini plus haut (section « Tables »). Ce bloc en redeclarait une seconde
   version, posterieure au media query mobile : elle y remettait `border-bottom` et
   `padding: 10px 12px` sur chaque cellule, ce qui striait de traits toutes les tables
   empilees en cartes sur telephone. Ne restent ici que les utilitaires. */
.table-compact th, .table-compact td { padding: 7px 10px; font-size: .8rem; }
.scroll-x { overflow-x: auto; }

/* ---------------- Pastilles supplémentaires -------------------------------- */
/* Deux conventions coexistent (`.pill.a` héritée, `.pill-a` V2) : on les aligne pour que le
   codage couleur de la charte — priorité élevée / moyenne / faible — reste toujours visible. */
.pill-sm { padding: 1px 7px; font-size: .68rem; }
.pill-a { background: var(--a-wash); color: var(--danger-ink); border-color: transparent; }
.pill-b { background: var(--b-wash); color: var(--warn-ink); border-color: transparent; }
.pill-c { background: var(--c-wash); color: var(--ok-ink); border-color: transparent; }
.pill-accent { background: var(--accent-wash); color: var(--ok-ink); border-color: transparent; }
.pill-ok { background: var(--ok-wash); color: var(--ok-ink); }
.pill-warn { background: var(--warn-wash); color: var(--warn-ink); }
.pill-danger { background: var(--danger-wash); color: var(--danger-ink); }
.pill-primary { background: var(--primary-wash); color: var(--primary-2); }
.pill-mut { background: var(--sunken); color: var(--ink-3); }
.nav-badge.warn { background: var(--warn-ink); }

/* ---------------- Jauge de score --------------------------------------------
   L'anneau `.gauge` de la charte est defini plus haut ; on n'ajoute ici que la
   variante compacte utilisee dans les tableaux denses.                        */
.gauge.xs { --sz: 34px; }
.gauge.xs .g-u { display: none; }

/* ---------------- Prochaine action (A4) ------------------------------------ */
.nba { display: inline-flex; align-items: flex-start; gap: 8px; }
.nba-ic { font-size: 1rem; line-height: 1.2; }
.nba-txt { display: flex; flex-direction: column; min-width: 0; }
.nba-txt b { font-size: .85rem; font-weight: 600; }

/* ---------------- Détail du score (A25) ------------------------------------ */
.scorebars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.scorebars li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.scorebars .sb-head { display: contents; }
.scorebars .sb-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px;
  background: var(--sunken); overflow: hidden; }
.scorebars .sb-bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.scorebars .sb-why { grid-column: 1 / -1; font-size: .76rem; color: var(--ink-3); margin: 0; }
.sb-plus::before { content: "+ "; color: var(--ok); }
.sb-minus::before { content: "− "; color: var(--ink-3); }

/* ---------------- Listes à barres (analytics) ------------------------------ */
.barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.barlist li { display: grid; grid-template-columns: 140px 1fr auto; gap: 10px; align-items: center;
  font-size: .82rem; }
.barlist-bar { height: 6px; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.barlist-bar i { display: block; height: 100%; background: var(--primary); }
.barlist-l { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Formulaires de réglages ---------------------------------- */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.form input[type=text], .form input[type=search], .form input[type=number], .form input[type=file],
.form input:not([type]), .form select, .form textarea {
  font-family: inherit; font-size: .875rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 10px;
  min-height: 38px; font-weight: 400;
}
.form textarea { min-height: 72px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
  display: grid; gap: 8px; }
.form legend { font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); padding: 0 4px; }
.check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important;
  min-height: 28px; margin: 0; }
.form fieldset .check + .check { margin-top: -2px; }
.check input { width: 16px; height: 16px; }
.switch { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400 !important; }
.switch input { width: 18px; height: 18px; margin-top: 2px; }
.radio-card { display: flex !important; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 400 !important;
  cursor: pointer; min-height: 44px; }
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-wash); }
.maplist { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.prompt-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.prompt-block summary { cursor: pointer; font-weight: 600; font-size: .85rem; }
.prompt-block label { margin-top: 10px; }
.pre { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; font-family: var(--mono); font-size: .78rem; white-space: pre-wrap;
  word-break: break-word; max-height: 420px; overflow-y: auto; }

/* ---------------- Barre de filtres ----------------------------------------- */
/* ---------------- Barre de filtres ------------------------------------------
   Les champs se placent EN LIGNE : la regle globale `input { width: 100% }` les
   etirerait sinon chacun sur toute la largeur, repoussant les donnees hors de
   l'ecran. Largeur intrinseque, avec un plancher lisible.                     */
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.filterbar input, .filterbar select {
  width: auto; flex: 0 1 auto; min-width: 132px; max-width: 210px;
  font-family: inherit; font-size: .82rem; padding: 7px 9px; min-height: 36px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink);
}
/* Le champ de recherche est le filtre principal : il prend la place restante. */
.filterbar input[type="search"] { flex: 1 1 220px; max-width: 380px; }
.filterbar input[type="text"] { min-width: 108px; max-width: 130px; }
.filterbar .check { flex: 0 0 auto; white-space: nowrap; }

/* Filtres secondaires repliables : l'ecran s'ouvre sur les donnees, pas sur un
   formulaire de dix lignes. */
.morefilters { flex-basis: 100%; margin: 0; }
.morefilters > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: var(--primary); min-height: 36px;
  list-style: none; }
.morefilters > summary::-webkit-details-marker { display: none; }
.morefilters > summary::after { content: "▾"; font-size: .7rem; }
.morefilters[open] > summary::after { content: "▴"; }
.morefilters .filterrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 10px 0 2px; }
@media (max-width: 719px) {
  .filterbar input, .filterbar select { max-width: none; flex: 1 1 100%; }
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--primary-wash); font-size: .76rem; margin: 2px 3px 2px 0; color: var(--primary-2); gap: 6px; }
.chip a { color: inherit; font-weight: 700; text-decoration: none; }

/* ---------------- Sous-onglets --------------------------------------------- */
.subtabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; }
.subtab { flex: 0 0 auto; padding: 8px 12px; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subtab:hover { color: var(--ink); text-decoration: none; }
.subtab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ---------------- Étapes (import) ------------------------------------------ */
.steps { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0 0 16px; padding: 0;
  font-size: .8rem; color: var(--ink-3); }
.steps li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; }
.steps li.current { border-color: var(--primary); color: var(--primary-2); font-weight: 600; }
.steps li.done { border-color: var(--ok); color: var(--ok-ink); }

/* ---------------- Notifications -------------------------------------------- */
.notiflist { list-style: none; margin: 0; padding: 0; }
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border-bottom: 1px solid var(--line); }
.notif.is-read { opacity: .55; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  margin-top: 7px; flex: 0 0 auto; }
.notif-warning .notif-dot { background: var(--warn); }
.notif-critical .notif-dot { background: var(--danger); }
.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-body p { margin: 2px 0; }
/* `flex: 0 0 auto` : sans lui, un titre long comprimait ce bloc jusqu'a faire passer
   « Ouvrir » et « Marquer lu » sur deux lignes de largeurs inegales, boutons desalignes
   d'une notification a l'autre. Les actions gardent leur largeur naturelle. */
.notif-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  flex: 0 0 auto; justify-content: flex-end; }
@media (max-width: 720px) {
  /* Sur telephone, titre + deux boutons ne tiennent pas sur une ligne : les actions prennent
     la leur, alignees a droite. */
  .notif { flex-wrap: wrap; }
  .notif-actions { flex: 1 0 100%; }
  /* Base 0 : sinon un corps un peu long reclame sa largeur de contenu, passe a la ligne
     suivante et laisse la pastille d'etat seule sur la premiere. */
  .notif-body { flex: 1 1 0; }
}

/* ---------------- Santé système -------------------------------------------- */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot-healthy { background: var(--ok); }
.dot-degraded { background: var(--warn); }
.dot-down { background: var(--danger); }
.dot-unknown { background: var(--line-2); }
.checklist { margin: 0; padding-left: 18px; font-size: .86rem; }
.checklist li { margin: 4px 0; }

/* ---------------- Doublons -------------------------------------------------- */
.dup { margin-bottom: 14px; }
.dup-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.dup-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.dup-side { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }
.dup-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dup-actions form { display: inline; }

/* ---------------- Listes de résultats / éditions ---------------------------- */
.hitlist { list-style: none; margin: 0; padding: 0; }
.hitlist li { border-bottom: 1px solid var(--line); }
.hitlist li:last-child { border-bottom: 0; }
.hitlist a { display: flex; gap: 10px; align-items: center; padding: 10px 4px; min-height: 44px; }
.hitlist a:hover { text-decoration: none; background: var(--surface-2); }
.hit-ic { width: 22px; text-align: center; }
.hit-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.editlist { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.editlist li { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ---------------- Qualité des données (A20) --------------------------------- */
.qualitylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .82rem; }
.qualitylist li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: baseline; }

.q-estimated { color: var(--warn-ink); font-weight: 700; }
.q-missing { color: var(--danger-ink); font-weight: 700; }

@media (max-width: 719px) {
  .topbar { flex-direction: row; }
  .gsearch-kbd { display: none; }
  .barlist li { grid-template-columns: 1fr auto; }
  .barlist-bar { display: none; }
}

.btn-danger { color: var(--on-primary); border-color: var(--danger); background: var(--danger); }
.btn-danger:hover { background: var(--danger-2); }
.breadcrumb { font-size: .82rem; color: var(--ink-3); margin-bottom: 8px; margin: 0 0 10px; }

.chip-x { background: none; border: 0; color: inherit; cursor: pointer; font-size: .9rem;
  line-height: 1; padding: 0 2px; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 14px 0; }

.tone-late { color: var(--warn); font-weight: 600; }

/* ---------------- Tableaux denses : lisibilite -------------------------------
   Un tableau se lit en diagonale : l'oeil suit la premiere colonne puis balaye.
   On empeche donc les noms de se couper, on garde l'en-tete visible au defilement
   et on rend l'absence de donnee discrete plutot que bruyante.                 */
.table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.q-score { font-weight: 600; }
.q-ok { color: var(--ok-ink); font-weight: 700; }
.q-warn { color: var(--warn-ink); }
.q-low { color: var(--danger); }

/* Groupe d'actions apparentees : un libelle + des variantes, au lieu de N boutons. */
.btn-split { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 38px;
  background: var(--surface); }
.btn-split-l { font-size: .8rem; color: var(--ink-3); font-weight: 600; }
.btn-split .btn { border: 0; background: none; min-height: 30px; padding: 0 8px; }
.btn-split .btn:hover { background: var(--sunken); }

@media (max-width: 899px) {
  .table thead th { position: static; }
}

/* ---------------- Barre d'actions hierarchisee -------------------------------
   Un ecran = une action primaire. Ce qui ne fait qu'ouvrir de l'information est
   un lien, pas un bouton : sinon six boutons de meme poids se neutralisent.   */
/* Barre d'action en TÊTE de l'email : ce qu'on peut faire est décidé avant de relire. */
.actionbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 var(--s3); padding: 0 0 var(--s3); border-bottom: 1px solid var(--line); }
/* Les actions secondaires restent groupées à droite : « Rejeter » ne part plus seul à la
   ligne quand la fenêtre rétrécit. */
.ab-rest { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ab-rest .linkbtn-danger { margin-left: 0; }
.actionbar-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
/* Souligne au survol seulement : trois liens soulignes en permanence a cote de trois boutons
   faisaient cohabiter trois familles de controles sur une meme ligne. */
.linkbtn { background: none; border: 0; padding: 6px var(--s2); min-height: 36px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--ink-3);
  border-radius: var(--radius-sm); text-decoration: none; }
.linkbtn:hover { color: var(--primary); background: var(--sunken); }
/* Une action destructive n'appartient pas a la famille « ouvrir de l'information » : on
   l'ecarte visuellement du groupe. */
.linkbtn-danger { margin-left: auto; }
.ab-rest > .linkbtn-danger { margin-left: 4px; }
.linkbtn-danger:hover { color: var(--danger); background: var(--danger-wash); }

/* Bouton copier accolé à un lien tel: — sur un poste sans softphone, cliquer le numéro ne
   fait rien : copier est le vrai geste. Carré discret, à hauteur du texte qu'il accompagne. */
.copy-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; vertical-align: middle; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-3); }
.copy-btn:hover { color: var(--primary); border-color: var(--primary-line); background: var(--primary-wash); }
.copy-btn .ic { width: 15px; height: 15px; }
.btn-lg { min-height: 44px; font-size: .92rem; padding: 0 22px; }

.fbwrap { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.fbwrap > summary { cursor: pointer; font-size: .8rem; color: var(--ink-3); list-style: none;
  min-height: 32px; display: inline-flex; align-items: center; }
.fbwrap > summary::-webkit-details-marker { display: none; }
.fbwrap > summary::before { content: "☆"; margin-right: 7px; }
.fbwrap[open] > summary { color: var(--ink-2); font-weight: 600; }
.fbwrap .fb { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; }

/* Colonne de lecture : au-dela de ~70 caracteres, l'oeil perd la ligne suivante. */
.readable { max-width: 68ch; }

/* ==========================================================================
   Icônes de la charte : trait monochrome, taille alignée sur le texte.
   ========================================================================== */
.ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.18em; }
.side-ic { width: 20px; display: inline-flex; justify-content: center; font-size: .95rem; line-height: 1; align-items: center; }
.side-ic .ic { width: 18px; height: 18px; }
.side-logout .ic, .topbar-bell .ic { width: 18px; height: 18px; }
.gsearch-ic .ic { width: 16px; height: 16px; color: var(--ink-3); }
.nba-ic .ic, .worktile .ic { width: 17px; height: 17px; color: var(--ink-3); }
.hit-ic .ic { width: 18px; height: 18px; color: var(--ink-3); }
.tl-ic .ic { width: 13px; height: 13px; color: var(--ink-3); }
.pcol-head .ic { width: 15px; height: 15px; }
.pcard .nba .ic { width: 15px; height: 15px; color: var(--ink-3); }
.nowrap { white-space: nowrap; }

/* Étapes du pipeline : une progression, pas une urgence — dégradé du neutre vers le vert
   de réussite. Réutiliser les couleurs de priorité mettrait « Client » en rouge. */
.pcol-head.s1 { box-shadow: inset 0 3px 0 var(--stage-1); }
.pcol-head.s2 { box-shadow: inset 0 3px 0 var(--stage-2); }
.pcol-head.s3 { box-shadow: inset 0 3px 0 var(--stage-3); }
.pcol-head.s4 { box-shadow: inset 0 3px 0 var(--stage-4); }
.pcol-head.s5 { box-shadow: inset 0 3px 0 var(--stage-5); }
.tone-s2 { color: var(--primary); } .tone-s4 { color: var(--warn); }

/* Fil d'Ariane : la charte situe chaque écran dans son hub (« Suivi › Pipeline »). */
.crumb { font-size: .78rem; color: var(--ink-3); margin: 0 0 6px; letter-spacing: .01em; }
.crumb b { color: var(--ink-2); font-weight: 600; }

/* Bouton secondaire : gris clair plein, comme dans la planche « COMPOSANTS › Boutons ».
   `:not(...)` est indispensable : déclarée en fin de feuille, une règle `.btn` nue écraserait
   le fond des boutons primaires (qui portent les deux classes) et les rendrait illisibles. */
/* Le contour n'est pas decoratif : `--sunken` se confond avec le fond de page, et un bouton
   secondaire pose hors d'une carte (barre de filtres) disparaissait purement et simplement. */
/* Secondaires blancs, bordure fine, micro-ombre : le gris plein faisait « désactivé ». */
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):hover {
  background: var(--surface-2);
}
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none;
  color: var(--ink-2); font-weight: 540; }
.btn-ghost:hover { background: var(--sunken); border-color: transparent; color: var(--ink); }

/* Action assistée par IA : reconnaissable sans être confondue avec l'action principale. */
.btn-ai { border-color: var(--know-wash); background: var(--know-wash); color: var(--know-ink); }
.btn-ai:hover:not(:disabled) { background: var(--acc-violet-wash); border-color: var(--acc-violet);
  color: var(--acc-violet); }
.btn-ai:disabled .ai-tag { background: var(--line-2); }
.btn-ai .ic { color: var(--acc-violet); }
.ai-tag { font-size: .625rem; font-weight: 700; letter-spacing: .06em; padding: 1px 5px;
  border-radius: var(--radius-sm); background: var(--acc-violet); color: var(--on-primary); }

/* Icônes en ligne dans du texte : les emojis se contentaient d'un espace, une <svg> doit être
   alignée explicitement, sinon elle décale la ligne de base et écrase l'interlignage. */
.pcard .pstep,
.pcard .reply,
.auth-note,
.who > span:first-child,
.banner strong,
.btn .ic,
.btn-primary .ic { display: inline-flex; align-items: center; gap: 6px; }
.pcard .reply { align-items: flex-start; }
.pcard .reply .ic { margin-top: 2px; color: var(--ink-3); }
.pcard .pstep .ic { width: 13px; height: 13px; color: var(--ink-3); }
.banner strong .ic { width: 17px; height: 17px; }
.tone-ic .ic { width: 21px; height: 21px; color: var(--ink-2); }
.tonecard:has(input:checked) .tone-ic .ic { color: var(--primary); }
.stage .ico .ic { width: 19px; height: 19px; }
.ptab-btn .ic { width: 17px; height: 17px; }
.who .ic { width: 15px; height: 15px; color: var(--ink-3); }

/* `.dot` (pastille d'état, 9×9 px) est déclarée après `.pill` et à spécificité égale : sans ce
   correctif elle imposait sa taille aux pastilles `pill dot`, dont le texte débordait du fond. */
.pill.dot { display: inline-flex; width: auto; height: auto; border-radius: 999px; margin-right: 0; }

/* Sélecteur segmenté (charte, planche « COMPOSANTS ») : choisir un affichage n'est pas agir.
   Ces choix portaient `btn-primary` et rivalisaient visuellement avec l'action de l'écran. */
.segbar { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: var(--sunken); border: 1px solid var(--line); }
.seg { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 15px;
  border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; white-space: nowrap; }
.seg:hover { color: var(--ink); }
.seg.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }


/* ---------------- Liste des comptes ---------------------------------------- */
/* Quatre colonnes, une question chacune. Le nom porte l'identite, sa ligne secondaire regroupe
   commune, code postal et taille du parc — trois colonnes auparavant dispersees. */
.table-accounts th { white-space: nowrap; }
.c-value { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.th-sort { display: inline-flex; align-items: center; gap: var(--s1); color: inherit;
  text-decoration: none; }
.th-sort:hover { color: var(--primary); }
.th-sort.on { color: var(--ink-2); }
.th-arrow { font-size: var(--fs-2xs); }

/* Identité : avatar monogramme + nom — une liste de comptes se scanne par visages. */
.c-ident { display: flex; align-items: center; gap: 11px; }
.mono-av { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; color: var(--on-primary); font-weight: 640;
  font-size: .72rem; letter-spacing: .02em; box-shadow: inset 0 1px 0 var(--inset-hi), var(--shadow); }
.c-ident-txt { min-width: 0; }
.acc-name { display: inline-block; font-weight: 570; font-size: var(--fs-md); letter-spacing: -.005em; }
.acc-meta { display: block; margin-top: 1px; font-size: var(--fs-xs); color: var(--ink-3); }

/* Score : une barre se compare d'une ligne a l'autre, un anneau de 30 px non. */
/* Sur une seule ligne : empiler pastille, chiffre puis barre donnait des lignes de 125 px
   pour trois informations courtes. */
.scorecell { display: inline-grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 2px var(--s2); width: 120px; vertical-align: middle; }
.score-n { font-size: var(--fs-md); font-weight: 620; letter-spacing: -.01em; min-width: 20px; }
.score-track { height: 4px; border-radius: var(--radius-pill); background: var(--sunken);
  overflow: hidden; }
.score-track i { display: block; height: 100%; border-radius: var(--radius-pill); }
.score-warn { grid-column: 1 / -1; font-size: var(--fs-2xs); color: var(--warn-ink); }

/* Etape : meme progression que les colonnes du pipeline, pour qu'un compte se reconnaisse
   d'un ecran a l'autre. */
.stagechip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px;
  border-radius: var(--radius-pill); font-size: .74rem; font-weight: 560;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
  white-space: nowrap; }
.stagechip::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--stage-1); }
.stagechip.s2::before { background: var(--stage-2); }
.stagechip.s3::before { background: var(--stage-3); }
.stagechip.s4::before { background: var(--stage-4); }
.stagechip.s5::before { background: var(--stage-5); }

.acc-act { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.acc-act b { font-weight: 580; }
.acc-act .ic { width: 15px; height: 15px; color: var(--ink-3); }
.acc-when { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-3); }
.due-late { color: var(--danger); font-weight: 600; }
.due-tag { margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--danger-wash); color: var(--danger); font-size: var(--fs-2xs);
  font-weight: 700; }

@media (max-width: 720px) {
  /* La carte reprend les quatre blocs, mais les deux courts — evaluation et etape — partagent
     une ligne : tout empiler donnait des cartes de 300 px et une page de 3 500 px pour douze
     comptes. */
  .table-accounts tbody tr { display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); }
  .table-accounts td { display: block; padding: 0; }
  .table-accounts td::before { display: none; }
  .table-accounts .c-name { flex: 1 1 100%; }
  .table-accounts .c-value { flex: 0 1 auto; }
  /* 150 px de barre empechaient l'etape de tenir sur la meme ligne sur un ecran de 390 px. */
  .table-accounts .scorecell { width: 104px; }
  .table-accounts .c-stage { flex: 0 0 auto; margin-left: auto; }
  .table-accounts .c-action { flex: 1 1 100%; display: flex; align-items: baseline;
    justify-content: space-between; gap: var(--s3); padding-top: var(--s2);
    border-top: 1px solid var(--line); }
  .table-accounts .acc-when { margin-top: 0; white-space: nowrap; }
}

/* ---------------- Fiche syndic --------------------------------------------- */
/* Titres de regroupement : la fiche empilait onze cartes de même poids, sans dire lesquelles
   servent à agir, à comprendre ou à justifier. */
/* Un séparateur de section doit peser plus lourd que les titres de carte qu'il annonce.
   La version précédente (13 px, gris, capitales) était plus faible qu'eux : l'œil ne voyait
   plus qu'une suite de cartes indifférenciées.
   La teinte ne porte que le marqueur, jamais le fond des cartes : dans cet écran la couleur
   est déjà chargée de sens métier (priorité, score, état d'un contact) et une bande colorée
   par section entrerait en concurrence avec elle. */
h2.sec { display: flex; align-items: center; gap: var(--s3); margin: var(--s7) 0 var(--s4);
  font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  text-transform: none; }
h2.sec:first-of-type { margin-top: var(--s5); }
.sec-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 9px; background: var(--sunken); color: var(--ink-3); }
.sec-ic .ic { width: 17px; height: 17px; }
.sec-lbl { flex: 0 0 auto; }
/* Le filet prolonge le titre jusqu'au bord : il matérialise la coupure entre deux temps. */
.sec-rule { flex: 1 1 auto; height: 1px; background: var(--line-2); }

h2.sec.t-act .sec-ic { background: var(--primary-wash); color: var(--primary); }
h2.sec.t-know .sec-ic { background: var(--know-wash); color: var(--know-ink); }
h2.sec.t-track .sec-ic { background: var(--accent-wash); color: var(--accent-2); }
h2.sec.t-src .sec-ic { background: var(--sunken); color: var(--ink-3); }

/* Bloc repliable : la traçabilité doit rester consultable sans occuper la lecture courante. */
.foldable { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); }
.foldable > summary { cursor: pointer; padding: var(--s4); font-weight: 600;
  font-size: var(--fs-md); color: var(--ink-2); list-style: none; display: flex;
  align-items: center; gap: var(--s2); min-height: var(--tap); }
.foldable > summary::before { content: "▸"; color: var(--ink-3); }
.foldable[open] > summary::before { content: "▾"; }
.foldable > summary:hover { color: var(--ink); }
.foldable-body { display: grid; gap: var(--s4); padding: 0 var(--s4) var(--s4); }
.foldable-body > .card { box-shadow: none; }

/* Contacts : ce qu'on vient chercher pour agir. */
.contactlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.contactcard { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; min-width: 0;
  gap: var(--s3); padding: var(--s3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2); }
.ct-name { display: block; font-weight: 650; font-size: var(--fs-md); }
.ct-mail { display: block; font-size: var(--fs-sm); color: var(--ink-2); }
.ct-meta { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); }
.ct-go { white-space: nowrap; }
/* Une adresse qui a demandé l'arrêt reste visible — c'est un fait du dossier — mais elle ne
   doit pas se présenter comme un contact disponible. */
.contactcard.is-blocked { background: var(--danger-wash); border-color: transparent; }
.contactcard.is-blocked .ct-name, .contactcard.is-blocked .ct-mail { text-decoration: line-through;
  text-decoration-color: var(--line-2); }
.ct-phone { display: flex; align-items: center; gap: 6px; margin: var(--s3) 0 0;
  font-size: var(--fs-md); }
.ct-phone .ic { width: 15px; height: 15px; color: var(--ink-3); }
@media (max-width: 640px) {
  .contactcard { grid-template-columns: 1fr auto; }
  .ct-go { grid-column: 1 / -1; justify-content: center; }
}

/* Saisie d'un contact obtenu au telephone : repliee par defaut pour ne pas encombrer, mais
   deux champs suffisent a l'utiliser — on note pendant l'appel, pas apres. */
.addcontact { margin-top: var(--s3); }
.addcontact > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
  color: var(--primary); padding: var(--s2) 0; min-height: 44px; display: flex; align-items: center; }
.addcontact-form { padding: var(--s3) 0 0; display: grid; gap: var(--s3); }
.addcontact-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .addcontact-grid { grid-template-columns: 1fr 1fr; } }
.addcontact-grid label { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--ink-2); }
.acct-id { margin: 6px 0 0; color: var(--ink-2); font-size: var(--fs-md); }
.acct-eval { margin-top: var(--s2); }
.acct-links { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s2) 0 0;
  font-size: var(--fs-md); }
.acct-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--primary-2);
  font-weight: 500; }
.acct-links .ic { width: 15px; height: 15px; }
/* Deux colonnes empilees : une grille auto-fit laissait des trous entre des cartes de hauteurs
   tres inegales (un detail de score de 400 px a cote d'un bloc de deux lignes). */
.detail-cols { display: grid; gap: var(--s4); grid-template-columns: 1fr; align-items: start; }
.dc-col { display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 900px) { .detail-cols { grid-template-columns: 1.15fr .85fr; } }

/* Bandeau « Action recommandée » : l'élément signature de la fiche. Il reprend le navy de la
   barre latérale, ce qui le rattache au produit plutôt qu'au contenu, et tranche avec les
   cartes blanches sans ajouter une couleur de plus à la palette. */
.nba-card { background: var(--surface); border-color: var(--line); color: var(--ink); }
/* Le sourcil : c'est lui qui donne son autorite a la carte, plus le fond sombre. Le filet
   bleu de `.todo` dit « il y a quelque chose a faire ici » — la meme grammaire que partout. */
.nba-card .nba-title { color: var(--primary); font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: .09em; font-weight: 700; margin: 0; }
.nba-card .nba-when { color: var(--ink-3); font-size: var(--fs-xs); }
/* La phrase d'action monte d'un cran : c'est la seule chose qu'on lit vraiment sur cet ecran. */
.nba-card .nba-body { margin: var(--s2) 0 var(--s4); font-size: var(--fs-lg);
  font-weight: 560; line-height: 1.4; color: var(--ink); }
.nba-card .nba-body .nba-txt b { color: var(--ink); font-weight: 680; }
.nba-card .nba-ic .ic { color: var(--accent); }

/* Onglets de fiche (charte). Chaque onglet est une URL : « Voir les emails » depuis un autre
   écran ouvre directement la bonne partie, et le bouton Retour du navigateur y ramène. */
.tabbar { display: flex; gap: var(--s1); margin: var(--s5) 0 var(--s4);
  border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px var(--s4);
  min-height: var(--tap); font-size: var(--fs-md); font-weight: 600; color: var(--ink-3);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; }
.tab:hover { color: var(--ink); background: var(--sunken); border-radius: var(--radius-sm)
  var(--radius-sm) 0 0; text-decoration: none; }
.tab.on { color: var(--primary); border-bottom-color: var(--primary);
  background: var(--primary-wash); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab .ic { width: 16px; height: 16px; }
/* Retour : présent sur toute page de détail, formulé par sa destination plutôt que par
   « ← Retour », qui n'indique pas où l'on atterrit. */
.backlink { margin: 0 0 var(--s3); }
.backlink a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md);
  color: var(--ink-3); font-weight: 500; text-decoration: none; }
.backlink a:hover { color: var(--primary); }
.backlink .ic { width: 15px; height: 15px; transform: scaleX(-1); }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--primary); text-decoration: underline; }
.score-link { display: inline-block; text-decoration: none; border-radius: var(--radius-sm); }
.score-link:hover .score-track { outline: 2px solid var(--primary-wash); outline-offset: 2px; }
.score-link:hover .score-n { color: var(--primary); }
/* Nom de syndic cliquable dans les écrans d'emails : depuis un message, on a régulièrement
   besoin d'ouvrir le compte pour vérifier son contexte avant de valider ou de répondre. */
.acct-link { font-weight: 580; color: var(--ink); text-decoration: none; }
.acct-link:hover { color: var(--primary); text-decoration: none; }

/* ---------------- Édition d'email ------------------------------------------ */
/* L'éditeur était deux champs bruts sans repère : ni longueur d'objet, ni rappel des mentions
   que la loi belge impose dans un email de prospection, ni séparation visuelle du reste. */
/* Panneau déplié (Modifier / Réécrire) : une feuille posée sur le bureau, pas un appendice. */
.foldpanel { margin-top: var(--s4); padding: var(--s5) var(--s5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); }

/* Bureau email (validation, fiche) : fond légèrement teinté sur lequel les feuilles blanches
   flottent, et TOUT le contenu se cale sur une colonne de lecture centrée — la feuille collée
   à gauche laissait un désert blanc à droite. */
.mailcard { background: linear-gradient(180deg, var(--surface-2), var(--surface) 320px); }
/* Le courrier garde une longueur de ligne lisible SANS laisser l'écran vide autour : la
   feuille s'élargit avec la fenêtre, plafonnée à 96 caractères. */
.mailcard .mailsheet, .mailcard .email-preview { max-width: 96ch; }
.mailcard .readable { max-width: none; }
.mailedit, .rewrite { display: grid; gap: var(--s4); }
.fld { display: grid; gap: 6px; }
.fld-lab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  font-size: var(--fs-md); font-weight: 650; color: var(--ink-2); margin: 0; }
.fld-hint { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.mailedit textarea, .rewrite textarea {
  font-family: var(--sans); font-size: var(--fs-base); line-height: 1.7; padding: var(--s4) 18px;
  border-radius: 10px; }
.mailedit input { font-size: var(--fs-base); font-weight: 560; }
.mailedit-act { display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s2); flex-wrap: wrap; }

/* Mentions obligatoires : chips d'état qui passent au vert pendant la frappe — dites pendant
   l'écriture plutôt qu'au moment du refus d'envoi. Le préflight serveur reste le juge. */
.mailcheck { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--s2); font-size: var(--fs-xs); }
.mailcheck li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: var(--radius-pill); border: 1px dashed var(--line-2);
  background: var(--surface); color: var(--ink-3); font-weight: 540; }
.mailcheck li::before { content: "○"; font-size: .85em; }
.mailcheck li.ok { color: var(--ok-ink); background: var(--ok-wash);
  border: 1px solid var(--ok-wash); }
.mailcheck li.ok::before { content: "✓"; font-weight: 700; color: var(--ok); }

/* Réécriture : chaque intention dit ce qu'elle fait au texte, au lieu d'une rangée de petits
   boutons gris indistincts. */
.rw-modes { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rw-mode { display: grid; gap: 4px; text-align: left; padding: 13px var(--s4); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; min-height: var(--tap); box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.rw-mode:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px);
  box-shadow: var(--shadow-md); }
.rw-mode:disabled { opacity: .55; cursor: not-allowed; }
.rw-mode b { font-size: var(--fs-md); font-weight: 590; color: var(--ink); }
.rw-mode b::before { content: "✦ "; color: var(--primary); }
.rw-mode span { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.rw-locks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.togglechip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  margin: 0; border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 520; color: var(--ink-2); cursor: pointer;
  background: var(--surface); box-shadow: var(--shadow); transition: all .12s; }
.togglechip:hover { border-color: var(--primary-line); }
.togglechip input { accent-color: var(--primary); }
.togglechip:has(input:checked) { background: var(--primary-wash); border-color: var(--primary);
  color: var(--primary-2); font-weight: 600; }

/* Un email par bloc, séparés par un filet plutôt que par une carte chacun. */
.mailitem { padding: var(--s4); border-bottom: 1px solid var(--line); }
.mailitem:last-child { border-bottom: 0; }
.mailitem-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s2); }
.mailitem-subj { margin: 0 0 var(--s2); font-weight: 650; font-size: var(--fs-base); }
.mailitem-act { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s3); }

/* ---------------- Administration d'un compte -------------------------------- */
/* Trois formulaires alignés sans titre : on ne savait pas ce que chacun faisait avant d'en
   lire les champs, et rien ne distinguait l'archivage — réversible — de la suppression. */
.statelist { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 6px; }
.statelist li { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-md);
  color: var(--ink-3); }
.statelist li .ic { width: 16px; height: 16px; }
.statelist li b { margin-left: auto; color: var(--ink); font-weight: 650; }
.txt-danger { color: var(--danger); }

.adminlist { display: grid; gap: var(--s3); }
.adminrow { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); }
@media (min-width: 900px) { .adminrow { grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; } }
.ar-txt { display: grid; gap: 3px; }
.ar-txt b { font-size: var(--fs-md); }
.ar-txt span { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.45; max-width: 62ch; }
.ar-form { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ar-form input, .ar-form select { min-width: 180px; }
.ar-form-wide { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ar-form-wide .btn { grid-column: 1 / -1; justify-content: center; }
@media (min-width: 900px) { .ar-form-wide { width: 420px; } }

/* Le seul bloc dont rien ne rattrape l'effet : il doit se voir avant d'être lu. */
.adminrow.is-irreversible { border-color: var(--danger); background: var(--danger-wash); }
.adminrow.is-irreversible .ar-txt span { color: var(--danger-ink); }
/* Ce que devient le message une fois validé : « Envoyer » ne dit pas qu'il entre en file, ni
   que rien ne part tant que le mode test est actif. */
.sendstate { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  background: var(--sunken); color: var(--ink-3); font-size: var(--fs-sm); }
.mailitem-note { flex: 1 1 100%; margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------------- Fil de conversation (partagé /reponses + fiche) ----------- */
/* Remonté du <style> local de reponses.html : l'onglet « Échanges » de la fiche rend
   exactement les mêmes bulles via la macro thread_view. */
.bubble { border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin: var(--s2) 0;
  font-size: var(--fs-md); }
.b-sent { background: var(--surface-2); border: 1px solid var(--line); }
.b-in { background: var(--warn-wash); border: 1px solid var(--awaiting-line); }
.b-prep { background: var(--primary-wash); border: 1px solid var(--primary-line); }
.bubble .who { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-3); margin-bottom: 5px; display: flex;
  justify-content: space-between; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.bubble .when { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-3); text-transform: none; letter-spacing: .02em; }
.bubble pre { margin: 0; white-space: pre-wrap; font: inherit; }
.bubble summary { cursor: pointer; }
.bubble .bubble-body { margin-top: var(--s2); }
.tl-sep { display: flex; align-items: center; gap: var(--s2); margin: 4px 0;
  color: var(--ink-3); font-family: var(--sans); font-size: var(--fs-2xs); letter-spacing: .02em; }
.tl-sep::before, .tl-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tl-sep .ic, .tl-await .ic { width: 13px; height: 13px; flex: 0 0 auto; }
.tl-await { display: inline-flex; align-items: center; gap: 6px; background: var(--warn-wash);
  border: 1px solid var(--awaiting-line); color: var(--awaiting-ink);
  border-radius: var(--radius-pill); padding: 4px var(--s3); font-size: var(--fs-sm);
  font-weight: 600; margin-bottom: var(--s2); }
.thread-actions { margin-top: 10px; }
.thread-archive { margin: 0 0 var(--s3); }
.thread-archive > summary { display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 var(--s3); border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm); color: var(--ink-2); background: var(--surface-2);
  font-size: var(--fs-sm); font-weight: 650; list-style: none; }
.thread-archive > summary::-webkit-details-marker { display: none; }
.thread-archive[open] > summary { margin-bottom: var(--s2); color: var(--primary);
  border-color: var(--primary-line); }

/* Aide raccourcis clavier (écrans à file). */
.kbd-help { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 60;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: var(--s4) var(--s5); max-width: 320px; }
.kbd-help ul { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: 6px;
  font-size: var(--fs-md); }
.kbd-help kbd, .kbd-help-btn kbd { display: inline-block; min-width: 20px; text-align: center;
  padding: 1px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 5px; background: var(--sunken); font-family: var(--mono);
  font-size: var(--fs-xs); }

/* Marque : le logo réel (déclinaison blanche) remplace le SVG provisoire. */
/* (ancien logo image supprime : le lockup embleme + texte l'a remplace) */

/* Case a cocher en ligne : « a demande nos tarifs » se coche pendant l'appel, la cible doit
   donc etre confortable au doigt comme a la souris. */
.checkline { display: flex; align-items: center; gap: var(--s2); min-height: 44px;
  font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }

/* ==========================================================================
   Assistant — journal de travail
   --------------------------------------------------------------------------
   Parti pris : ce n'est pas une messagerie. Le gerant ne vient pas discuter, il vient
   recuperer une liste d'appels, un numero, un brouillon relu. Les ARTEFACTS sont donc au
   premier plan ; la conversation est le fil qui les relie, et la mecanique de l'agent se
   replie sur un rail discret. La premiere version faisait l'inverse — des bulles bavardes,
   et le travail produit relegue en vignettes.

   L'element signature est ce rail : une colonne de nodes qui montre chaque etape verifiee.
   Il n'est pas decoratif — c'est la piste d'audit d'un agent qui agit sur des donnees
   commerciales reelles, et pendant qu'il travaille c'est la seule chose qui prouve que
   l'ecran n'est pas fige.
   ========================================================================== */

/* --- Ecran plein ---------------------------------------------------------- */
.ast-page { display: grid; gap: var(--s5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) {
  .ast-page { grid-template-columns: 232px 1fr; }
  /* Une seule demande : pas de liste laterale, donc pas de colonne pour elle. Sans
     cette regle, l'unique enfant de la grille heritait de la colonne de 232 px. */
  .ast-page.is-solo { grid-template-columns: 1fr; }
}

.ast-nav { display: flex; flex-direction: column; gap: 2px; }
.ast-nav-i { display: block; padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ast-nav-i:hover { background: var(--surface-2); text-decoration: none; }
.ast-nav-i.on { background: var(--primary-wash); color: var(--primary); font-weight: 600; }
.ast-nav-d { display: block; font-size: var(--fs-2xs); color: var(--ink-3); font-weight: 400; }

.ast-main { display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  overflow: hidden; }

.ast-cost { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums;
  padding: 0 var(--s2); }

/* --- Fil ------------------------------------------------------------------ */
.ast-thread { display: flex; flex-direction: column; gap: 0;
  padding: var(--s6) var(--s6) var(--s4); overflow-y: auto; }

/* Un TOUR : une demande, puis tout ce qu'elle a produit.

   PAS DE BULLES. Deux essais l'ont montre : la convention de messagerie grand public jure avec
   un outil de travail. Elle decore un echange qui n'a rien de bavard, et surtout elle vole la
   vedette au livrable — le numero a appeler, le brouillon a relire — alors que c'est LUI qu'on
   vient chercher.

   Mise en page de DOCUMENT : la demande est le TITRE de la section, l'heure se range au bout
   de la meme ligne, et tout ce que la demande a produit pend d'une echine a gauche. Un filet
   separe les tours. C'est la forme d'un compte rendu, pas d'une discussion. */
.ast-turn { display: flex; flex-direction: column; }
.ast-turn + .ast-turn { margin-top: var(--s6); padding-top: var(--s6);
  border-top: 1px solid var(--line); }

.ast-q { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  margin-bottom: var(--s4); }
/* Le titre porte le poids : c'est le seul element gras de la section, donc l'oeil retrouve
   d'un coup ou commence chaque demande dans un fil relu le lendemain. */
.ast-q-t { margin: 0; min-width: 0; font-size: var(--fs-lg); font-weight: 620; color: var(--ink);
  line-height: 1.35; letter-spacing: -.011em; overflow-wrap: anywhere; }
.ast-when { flex: 0 0 auto; font-size: var(--fs-2xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; }

/* L'ECHINE : une seule gouttiere pour le rail, le texte, les tableaux et les cartes. C'est son
   absence qui donnait quatre bords gauches differents. Le trait porte aussi l'etat du tour —
   repos, en cours, echec — lisible du coin de l'oeil, sans badge de plus. */
.ast-body { padding-left: var(--s4); border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s4); }
.ast-body:empty { display: none; }
.ast-body.is-run { border-left-color: var(--primary); }
.ast-body.is-ko { border-left-color: var(--danger-line); }

.ast-doc { display: inline-flex; align-items: center; gap: 5px; margin-left: var(--s2);
  font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); }
.ast-doc .ic { width: 13px; height: 13px; }

/* Le rail. Replie une fois le travail fini : c'est une preuve, pas le sujet. */
.ast-rail > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: var(--fs-xs); color: var(--ink-3); padding: 2px 0; list-style: none;
  min-height: 24px; }
.ast-rail > summary::-webkit-details-marker { display: none; }
.ast-rail > summary:hover { color: var(--primary); }
.ast-rail-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--radius-pill); background: var(--sunken);
  font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ast-rail-ko { color: var(--danger-ink); }
.ast-steps { list-style: none; margin: var(--s2) 0 0; padding: 0 0 0 var(--s3);
  border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: var(--s2); }
.ast-step { position: relative; font-size: var(--fs-xs); color: var(--ink-2); }
/* Le node : etat de l'etape, pose sur le trait. */
.ast-step::before { content: ""; position: absolute; left: calc(-1 * var(--s3) - 4px); top: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-2);
  box-shadow: 0 0 0 3px var(--surface); }
.ast-step.is-ok::before { background: var(--accent); }
.ast-step.is-ko::before { background: var(--danger); }
.ast-step.is-run::before { background: var(--primary); animation: ast-pulse 1.4s ease-in-out infinite; }
.ast-step-d { display: block; color: var(--danger-ink); }
@keyframes ast-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ast-step.is-run::before { animation: none; } }

.ast-said { font-size: var(--fs-md); color: var(--ink); line-height: 1.65; white-space: pre-wrap; }

/* --- Artefacts : la raison d'etre de l'ecran ------------------------------ */
.ast-accs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ast-acc { display: grid; gap: 2px var(--s3); align-items: center; padding: var(--s3) var(--s4);
  grid-template-columns: 1fr; border-bottom: 1px solid var(--line); background: var(--surface); }
.ast-acc:last-child { border-bottom: 0; }
.ast-acc:hover { background: var(--surface-2); }
@media (min-width: 560px) { .ast-acc { grid-template-columns: 1fr auto; } }
.ast-acc-n { font-weight: 590; font-size: var(--fs-md); color: var(--ink); }
.ast-acc-n:hover { color: var(--primary); }
.ast-acc-m { font-size: var(--fs-xs); color: var(--ink-3); }
.ast-acc-a { display: flex; align-items: center; gap: 6px; }
@media (min-width: 560px) { .ast-acc-a { grid-row: span 2; } }
.ast-acc-a .ic { width: 14px; height: 14px; }

.ast-out { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: var(--s2) var(--s4); border-radius: var(--radius-pill); min-height: var(--tap);
  background: var(--accent-wash); color: var(--ok-ink); font-size: var(--fs-sm); font-weight: 570; }
.ast-out:hover { text-decoration: none; filter: brightness(.97); }
.ast-out .ic { width: 15px; height: 15px; }

.ast-note { margin: 0; font-size: var(--fs-sm); color: var(--warn-ink);
  background: var(--warn-wash); padding: var(--s2) var(--s3); border-radius: var(--radius-sm); }
.ast-live { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--fs-sm);
  color: var(--ink-3); }
.ast-live .ic { width: 15px; height: 15px; animation: ast-spin 2.4s linear infinite; }
@keyframes ast-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ast-live .ic { animation: none; } }

/* --- Ecran vide : une invitation, pas un vide ----------------------------- */
.ast-blank { padding: var(--s5) 0; }
.ast-blank-t { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.ast-blank-s { margin: 6px 0 var(--s4); font-size: var(--fs-sm); color: var(--ink-2);
  max-width: 52ch; line-height: 1.6; }
.ast-seeds { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ast-seed { text-align: left; font: inherit; font-size: var(--fs-sm); color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 9px var(--s4); min-height: 40px; cursor: pointer; }
.ast-seed:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-wash); }

/* --- Composeur ------------------------------------------------------------ */
.ast-composer { border-top: 1px solid var(--line); padding: var(--s3) var(--s4) var(--s4);
  background: var(--surface); }
.ast-input { display: flex; align-items: flex-end; gap: var(--s2);
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 5px 5px 5px var(--s2);
  background: var(--surface); transition: border-color .12s ease, box-shadow .12s ease; }
.ast-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.ast-input textarea { flex: 1; border: 0; resize: none; background: none;
  font: inherit; font-size: var(--fs-md); color: var(--ink);
  /* Le champ doit faire EXACTEMENT la hauteur des boutons, sinon le texte et les icones ne
     tombent pas sur la meme ligne. Avec `box-sizing: border-box`, la hauteur inclut les
     marges internes : 8 + 20 + 8 = 36 px, comme les commandes. Une hauteur de ligne en
     proportion (1.4 x 15 px = 21 px) donnait 37 px et decalait tout de deux pixels.
     Le script agrandit ensuite ligne par ligne, par pas de 20 px. */
  line-height: 20px; padding: 8px 0; min-height: 36px; max-height: 180px; overflow-y: auto; }
.ast-input textarea:focus { outline: none; }
/* Les deux commandes sont des <button> identiques : meme boite, meme remise a zero, meme
   taille d'icone. Toute difference de structure entre elles se voyait immediatement a
   l'ecran — un <label> et un <button> ne se centrent pas de la meme facon. */
.ast-tool { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  padding: 0; border: 0; background: none; font: inherit; -webkit-appearance: none;
  appearance: none; border-radius: var(--radius-sm); color: var(--ink-3); cursor: pointer;
  line-height: 0; }
/* Meme gabarit d'icone pour les deux : sans taille imposee, chaque glyphe se dessinait a la
   hauteur de son propre trace et les deux commandes paraissaient decalees. */
.ast-tool .ic { width: 18px; height: 18px; display: block; }
.ast-tool:hover { background: var(--sunken); color: var(--primary); }
.ast-tool:focus-within, .ast-tool:focus-visible { outline: 2px solid var(--primary);
  outline-offset: 1px; }
/* Micro : ajoute par le script uniquement la ou la dictee existe. */
.ast-tool.is-listening { color: var(--danger); background: var(--danger-wash); }
.ast-tool.is-listening .ic { animation: ast-pulse 1s ease-in-out infinite; }
.ast-send { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  border: 0; border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary);
  cursor: pointer; }
.ast-send:hover:not(:disabled) { background: var(--primary-2); }
.ast-send:disabled { background: var(--line-2); cursor: not-allowed; }
.ast-send .ic { width: 16px; height: 16px; }
.ast-attached { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s2);
  padding: 5px var(--s3); border-radius: var(--radius-pill); background: var(--primary-wash);
  color: var(--info-ink); font-size: var(--fs-xs); }
.ast-attached .ic { width: 13px; height: 13px; }
.ast-attached-x { border: 0; background: none; color: inherit; cursor: pointer;
  font-size: var(--fs-md); line-height: 1; padding: 0 2px; }
.ast-hint { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.ast-hint.is-error { color: var(--danger-ink); }

/* --- Lanceur flottant et panneau ancre ------------------------------------ */
.ast-launch { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 60;
  display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap);
  padding: 0 var(--s5); border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--brand-grad); color: var(--on-dark); font: inherit;
  font-size: var(--fs-sm); font-weight: 570; box-shadow: var(--shadow-lg); }
.ast-launch:hover { filter: brightness(1.12); }
.ast-launch .ic { width: 17px; height: 17px; }
.ast-launch[aria-expanded="true"] { display: none; }
@media (max-width: 640px) {
  /* La barre d'onglets occupe deja le bas : on se pose au-dessus, sans la recouvrir. */
  .ast-launch { bottom: 76px; right: var(--s4); padding: 0; width: 52px; }
  .ast-launch-t { display: none; }
}

.ast-dock { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 61;
  width: min(430px, calc(100vw - 2 * var(--s5))); max-height: min(680px, calc(100vh - 2 * var(--s5)));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float); }
.ast-dock-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--brand-grad); color: var(--on-dark); }
.ast-dock-t { display: inline-flex; align-items: center; gap: 7px; font-weight: 570;
  font-size: var(--fs-sm); }
.ast-dock-t .ic { width: 16px; height: 16px; }
.ast-dock-a { display: inline-flex; align-items: center; gap: var(--s2); }
.ast-dock-a a, .ast-dock-a button { display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; background: var(--on-dark-dim); color: var(--on-dark); border-radius: var(--radius-sm);
  cursor: pointer; font: inherit; font-size: var(--fs-lg); line-height: 1; }
.ast-dock-a a:hover, .ast-dock-a button:hover { background: var(--on-dark-line); }
.ast-dock-a .ic { width: 14px; height: 14px; }
.ast-dock-b { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ast-dock-b .ast-thread { flex: 1; padding: var(--s4); gap: var(--s5); }
.ast-dock-b .ast-composer { padding: var(--s3); }
.ast-dock-load { margin: 0; padding: var(--s6); color: var(--ink-3); font-size: var(--fs-sm); }
@media (max-width: 640px) {
  /* Feuille plein ecran : sur telephone, un panneau flottant de 430 px n'a pas de sens. */
  .ast-dock { inset: 0; width: 100vw; max-height: 100vh; border-radius: 0; border: 0; }
}

/* Document rendu depuis du Markdown : brief d'appel, reponse de l'assistant. Le texte etait
   affiche brut en chasse fixe (`## Brief`, `- **Qui** :`), donc illisible la ou l'operateur
   lit vite, pendant que le telephone sonne. */
.doc { font-size: var(--fs-md); line-height: 1.65; color: var(--ink-2); }
.doc h4 { margin: 0 0 var(--s3); font-size: var(--fs-md); font-weight: 640; color: var(--ink); }
.doc p { margin: 0 0 var(--s3); }
.doc p:last-child, .doc ul:last-child { margin-bottom: 0; }
.doc ul { margin: 0 0 var(--s3); padding-left: var(--s5); display: flex; flex-direction: column;
  gap: 5px; }
.doc li { padding-left: 2px; }
.doc li::marker { color: var(--ink-3); }
.doc strong { color: var(--ink); font-weight: 610; }

/* ---------------- Consommation d'une API externe payante (ecran Sources) ----------------
   L'anneau reprend le composant `.gauge` de la charte, mais avec une semantique INVERSE :
   sur un score, 100 est bon ; ici 100 % du quota gratuit consomme est le moment ou la
   depense commence. La couleur est donc posee explicitement par le gabarit, jamais deduite. */
.quota-head { display: flex; align-items: center; gap: var(--s4); }
.quota-t { margin: 0 0 4px; font-size: var(--fs-md); font-weight: 640; }
.quota-s { margin: 0 0 2px; font-size: var(--fs-sm); color: var(--ink-2); }
.quota-ops { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
/* Un libelle de recherche est « secteur + ville » : les 140 px de `.barlist` coupaient
   « maison de repos Namur » en « maison de repos Na... », ce qui retire justement la ville —
   la seule information qui distingue deux lignes.
   Sous 720 px, la charte replie deja `.barlist` sur deux colonnes et masque la barre : cette
   surcharge doit donc rester au-dessus du seuil, sinon elle reintroduit une colonne centrale
   invisible et le nombre flotte loin de son libelle. */
@media (min-width: 720px) {
  .quota-ops li { grid-template-columns: minmax(0, 210px) 1fr auto; }
}
.quota-note { margin: var(--s4) 0 0; }
@media (max-width: 560px) {
  .quota-head { flex-direction: column; align-items: flex-start; }
}

/* ---------------- Avancement d'un traitement lancé depuis l'assistant ----------------
   Discret par construction : le fil reste le sujet, la barre n'est qu'un signe de vie. Elle
   disparait des la fin du traitement — la conclusion, elle, est ecrite dans le fil, ou elle
   restera lisible demain. */
.ast-job { border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: var(--s3) var(--s4); display: grid; gap: 7px; }
.ast-job-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.ast-job-l { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ast-job-n { font-size: var(--fs-sm); color: var(--ink-2); }
.ast-job-bar { height: 6px; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.ast-job-bar i { display: block; height: 100%; background: var(--primary);
  transition: width .4s ease; }
.ast-job-s { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .ast-job-bar i { transition: none; } }

/* ---------------- Assistant : arrêt d'un tour, perte de connexion ----------------
   Deux etats qui doivent se voir sans voler la vedette au fil. Le bouton d'arret vit DANS la
   ligne « travaille… » : c'est la ou l'oeil est deja pose pendant l'attente. */
.ast-stop { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 3px 10px; font-size: var(--fs-xs); font-weight: 560;
  cursor: pointer; margin-left: var(--s3); }
.ast-stop:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.ast-stop:disabled { opacity: .6; cursor: default; }
.ast-offline { margin: 0; padding: var(--s3) var(--s4); border-radius: var(--radius-sm);
  background: var(--warn-wash); border: 1px solid var(--warn-line); color: var(--warn-ink);
  font-size: var(--fs-sm); }

/* ---------------- Tableaux dans un document rendu (brief, réponse d'assistant) ----------------
   L'assistant produit naturellement des listes de comptes. Faute de tableaux, il les rendait en
   puces : trois colonnes ecrasees sur une ligne, illisibles au telephone. Le conteneur defile
   horizontalement pour lui seul — la page, elle, ne defile jamais lateralement. */
.doc-tw { overflow-x: auto; margin: 0 0 var(--s3); }
.doc-t { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.doc-t th, .doc-t td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.doc-t th { color: var(--ink-3); font-weight: 600; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.doc-t tbody tr:last-child td { border-bottom: 0; }

/* ---------------- Artefacts du fil : brouillon relisible, déclencheur d'un compte ---------- */
.ast-acc-why { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.ast-acc-more { color: var(--ink-3); font-size: var(--fs-xs); padding: 6px 0; }
.ast-draft { border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: var(--s3) var(--s4); display: grid; gap: 6px; }
.ast-draft-h { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); }
.ast-draft-p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.ast-draft-a { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: 2px; }
.ast-step-r { color: var(--ink-3); font-size: var(--fs-xs); margin-left: 6px; }

/* ---------------- Liste des demandes : suppression discrète mais atteignable ----------------
   La corbeille n'apparait qu'au survol ou au focus : elle ne doit pas concurrencer le titre du
   fil. Mais elle reste dans l'ordre de tabulation — une action cachee au clavier n'existe pas.
   Aucune action ne depend du survol seul (regle d'accessibilite du projet). */
.ast-nav-row { display: flex; align-items: stretch; gap: 2px; border-radius: var(--radius-sm); }
.ast-nav-row.on { background: var(--primary-wash); }
.ast-nav-row.on .ast-nav-i { color: var(--primary); font-weight: 600; background: none; }
.ast-nav-row .ast-nav-i { flex: 1; min-width: 0; }
.ast-nav-x { display: flex; }
.ast-nav-x button { border: 0; background: none; color: var(--ink-3); cursor: pointer;
  padding: 0 8px; border-radius: var(--radius-sm); opacity: 0; transition: opacity .12s ease; }
.ast-nav-row:hover .ast-nav-x button,
.ast-nav-x button:focus-visible { opacity: 1; }
.ast-nav-x button:hover { color: var(--danger); }
@media (hover: none) {
  /* Sur tactile il n'y a pas de survol : la corbeille reste visible en permanence. */
  .ast-nav-x button { opacity: .55; }
}


/* ---------------- Dépense IA du fil (en-tête de l'écran assistant) ----------------
   Un « 0.29 € » nu, sans etiquette et sans unite de compte, posé a cote d'un lien qui ne
   ressemblait pas a un bouton. On etiquette, on ecrit a la francaise, et on range dans une
   puce discrete qui ne concurrence plus l'action principale. */
.ast-spend { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
  font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.ast-spend .ic { width: 13px; height: 13px; color: var(--ink-3); }
.ast-spend-l { color: var(--ink-3); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; font-size: var(--fs-2xs); }
.ast-spend b { color: var(--ink); font-weight: 640; }

/* ---------------- Sélecteur de demande dans le panneau ancré ----------------
   Le panneau n'ouvrait que le dernier fil. Un <details> replié : la liste ne coute aucune
   hauteur tant qu'on ne la demande pas, et le titre courant reste toujours lisible. */
.ast-switch { border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.ast-switch > summary { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer; list-style: none;
  min-height: 40px; }
.ast-switch > summary::-webkit-details-marker { display: none; }
.ast-switch > summary:hover { background: var(--surface-2); }
.ast-switch-t { font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ast-switch-c { flex: 0 0 auto; font-size: var(--fs-2xs); color: var(--ink-3); }
.ast-switch-l { display: flex; flex-direction: column; max-height: 190px; overflow-y: auto;
  border-top: 1px solid var(--line); background: var(--surface-2); }
.ast-switch-i { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding: 8px var(--s4); font-size: var(--fs-sm); color: var(--ink-2);
  min-height: 36px; }
.ast-switch-i:hover { background: var(--surface); text-decoration: none; }
.ast-switch-i.on { color: var(--primary); font-weight: 600; }
.ast-switch-i span { flex: 0 0 auto; font-size: var(--fs-2xs); color: var(--ink-3); }

/* ---------------- Historique du panneau ancré : une vue, pas un tiroir ----------------
   Le tiroir precedent laissait la liste ET la conversation a l'ecran : on ne savait plus
   laquelle on lisait. Ici c'est l'un OU l'autre, et l'en-tete du panneau annonce lequel. */
.ast-hist { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ast-hist-h { padding: var(--s3) var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
.ast-hist-back { border: 0; background: none; color: var(--primary); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 560; padding: 6px 8px; border-radius: var(--radius-sm);
  min-height: 32px; }
.ast-hist-back:hover { background: var(--primary-wash); }
.ast-hist-l { list-style: none; margin: 0; padding: var(--s2); overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 2px; }
.ast-hist-i { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px;
  border-radius: var(--radius-sm); color: var(--ink-2); min-height: var(--tap);
  justify-content: center; }
.ast-hist-i:hover { background: var(--surface-2); text-decoration: none; }
.ast-hist-i.on { background: var(--primary-wash); }
.ast-hist-i.on .ast-hist-t { color: var(--primary); }
.ast-hist-t { font-size: var(--fs-sm); font-weight: 560; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ast-hist-m { font-size: var(--fs-2xs); color: var(--ink-3); }
.ast-hist-m b { color: var(--primary); font-weight: 600; }
.ast-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* ---------------- Carte d'un résultat, et correction d'un brouillon ---------------- */
.ast-map > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; font-size: var(--fs-sm); color: var(--primary); font-weight: 560;
  min-height: 32px; padding: 2px 0; }
.ast-map > summary::-webkit-details-marker { display: none; }
.ast-map > summary .ic { width: 15px; height: 15px; }
.ast-map-c { height: 320px; margin-top: var(--s3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); }

.ast-fix { margin-top: 2px; }
.ast-fix > summary { cursor: pointer; list-style: none; font-size: var(--fs-xs);
  color: var(--ink-3); min-height: 28px; display: inline-flex; align-items: center; }
.ast-fix > summary::-webkit-details-marker { display: none; }
.ast-fix > summary:hover { color: var(--primary); }
.ast-fix-f { display: grid; gap: var(--s3); margin-top: var(--s3); }
.ast-fix-f label { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--ink-3); }
.ast-fix-f input, .ast-fix-f textarea { width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; font-size: var(--fs-sm); color: var(--ink); }
.ast-fix-f textarea { resize: vertical; line-height: 1.6; }
.ast-fix-f p { margin: 0; }
.ast-fix-f button { justify-self: start; }
.ast-fix-no { margin: 0; }

/* ---------------- Pilotage > Agent : la mécanique exposée ----------------
   Un agent qu'on ne peut pas inspecter est un agent qu'on n'ose pas utiliser. L'ecran montre
   d'abord ce qu'il NE PEUT PAS faire — c'est ce qui autorise a toucher au reste sans crainte. */
.ag-h { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s2);
  font-size: var(--fs-md); font-weight: 640; }
.ag-h .ic { width: 17px; height: 17px; color: var(--ink-3); }
.ag-form { display: grid; gap: var(--s5); }
.ag-form .card { margin: 0; }

.ag-never { border-color: var(--line-2); background: var(--surface-2); }
.ag-never-l { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 7px; }
.ag-never-l li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm);
  color: var(--ink-2); }
.ag-never-l .ic { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px;
  color: var(--ink-3); }

.ag-tools { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 2px; }
/* `label` porte une graisse 600 par defaut dans la charte : sans remise a plat, la
   description d'un outil s'affichait aussi lourde que son nom, et la liste devenait un mur. */
.ag-tool-c { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px;
  border-radius: var(--radius-sm); cursor: pointer; min-height: var(--tap);
  margin: 0; font-weight: 400; }
.ag-tool-c:hover { background: var(--surface-2); }
.ag-tool-c input { margin-top: 3px; flex: 0 0 auto; }
.ag-tool-c b { font-weight: 600; color: var(--ink); margin-right: 6px; }
.ag-tool-d { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3);
  font-weight: 400; line-height: 1.5; }

.ag-grid { display: grid; gap: var(--s4); margin-top: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ag-grid label { display: grid; gap: 4px; margin: 0; font-size: var(--fs-sm);
  font-weight: 560; color: var(--ink-2); }
.ag-grid input { padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); font: inherit;
  font-size: var(--fs-sm); color: var(--ink); }
.ag-hint { font-weight: 400; font-size: var(--fs-2xs); color: var(--ink-3); line-height: 1.45; }

.ag-extra textarea { width: 100%; margin-top: var(--s3); padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink);
  resize: vertical; }
.ag-base { margin-top: var(--s4); }
.ag-base > summary { cursor: pointer; list-style: none; font-size: var(--fs-xs);
  color: var(--ink-3); min-height: 28px; display: inline-flex; align-items: center; }
.ag-base > summary::-webkit-details-marker { display: none; }
.ag-base > summary:hover { color: var(--primary); }
.ag-pre { margin: var(--s3) 0 0; padding: var(--s4); background: var(--sunken);
  border-radius: var(--radius-sm); font-size: var(--fs-xs); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); max-height: 340px;
  overflow-y: auto; }

.ag-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* ---------------- Réglages IA : onglets groupés ----------------
   Dix onglets a plat ne se lisent pas. Trois groupes — ce que l'IA fait, comment elle le fait,
   ce qu'elle a fait — et l'oeil trouve sans balayer. */
.subtabs-g { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-end; }
.subtabs-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; position: relative;
  padding-top: 16px; }
.subtabs-l { position: absolute; top: 0; left: 2px; font-size: var(--fs-2xs);
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600;
  white-space: nowrap; }
@media (max-width: 719px) {
  /* Sur téléphone les groupes se superposeraient : on empile, l'étiquette sur sa ligne. */
  .subtabs-g { flex-direction: column; align-items: stretch; gap: var(--s4); }
}


/* ---------------- Modèles & prompts : une carte par fonction IA ----------------
   Les deux etaient dans deux onglets : comprendre comment une fonction raisonne imposait
   l'aller-retour. Le prompt est affiche DIRECTEMENT MODIFIABLE — on ne corrige pas un texte
   qu'on ne voit pas — et son etat (origine / modifie) se lit sans deplier quoi que ce soit. */
.fn { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s3); }
/* Le resume reste cliquable sur toute sa largeur : viser un chevron de 12 px n'est pas une
   cible. Il porte aussi l'essentiel — modele, nombre de prompts, etat — pour choisir quoi
   ouvrir sans ouvrir. */
.fn-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); cursor: pointer; list-style: none;
  font-size: var(--fs-md); min-height: var(--tap); }
.fn-h::-webkit-details-marker { display: none; }
.fn-h:hover { background: var(--surface-2); }
.fn[open] > .fn-h { border-bottom: 1px solid var(--line); }
.fn-h b { font-weight: 620; }
.fn-h-m { font-size: var(--fs-xs); color: var(--ink-3); font-family: ui-monospace,
  SFMono-Regular, Menlo, monospace; }
.fn-h-n { font-size: var(--fs-2xs); color: var(--ink-3); margin-left: auto; }
.fn > *:not(.fn-h) { margin-left: var(--s4); margin-right: var(--s4); }
.fn > *:last-child { margin-bottom: var(--s4); }
.fn-model { display: grid; gap: var(--s3); margin: var(--s4) 0;
  grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(110px, 1fr)); }
.fn-model label { display: grid; gap: 4px; margin: 0; font-size: var(--fs-2xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.fn-model select, .fn-model input { padding: 7px 9px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); font: inherit;
  font-size: var(--fs-sm); color: var(--ink); font-weight: 400; text-transform: none;
  letter-spacing: 0; }

.fn-pr { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); }
/* Un liseré suffit à repérer les textes réécrits en balayant la page. */
.fn-pr.is-mod { border-left: 2px solid var(--warn); padding-left: var(--s3);
  margin-left: calc(-1 * var(--s3) - 2px); }
.fn-pr-h { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: var(--fs-sm); }
.fn-pr-h b { font-weight: 600; color: var(--ink); }
.fn-pr-h > span { font-size: var(--fs-xs); color: var(--ink-3); }
.fn-pr-ok { color: var(--ink-3); }
.fn-pr textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs);
  line-height: 1.65; resize: vertical; }
.fn-pr textarea:focus { background: var(--surface); }

/* Bandeau « ça a été modifié », en tete de carte : l'operateur qui ouvre doit savoir tout de
   suite ce qui a bouge, et pouvoir revenir en arriere sans chercher le bouton ailleurs. */
.fn-mod { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin: var(--s4) 0 0; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--warn-wash); color: var(--warn-ink); font-size: var(--fs-sm); }
.fn-mod .ic { width: 15px; height: 15px; flex: 0 0 auto; }
.fn-mod button { margin-left: auto; }
.fn-f { margin: 0; }
.fn-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.fn-all { margin: 0 0 var(--s3); display: flex; justify-content: flex-end; }

/* ---------------- Rappels d'une fiche compte ----------------
   « Tâches en cours » + « Terminer » ne disaient ni ce qu'etait une tache, ni ce que le bouton
   ferait. C'est un RAPPEL : le clore le retire de la liste et le consigne, rien de plus. */
.rem { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.rem-i { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s3);
  align-items: start; padding: var(--s3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); }
.rem-t { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); }
.rem-t .ic { width: 15px; height: 15px; color: var(--ink-3); }
.rem-d { font-size: var(--fs-2xs); color: var(--ink-3); }
.rem-w { grid-column: 1; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.rem-i form { grid-row: 1 / span 2; align-self: center; }
.rem-note { display: flex; align-items: flex-start; gap: 7px; margin: var(--s3) 0 0;
  padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-wash);
  color: var(--warn-ink); font-size: var(--fs-sm); }
.rem-note .ic { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }


/* ---------------- DESIGN_V3 : le bandeau de dossier ----------------
   Element signature. Le navy quitte la seule barre laterale pour coiffer l'OBJET DOMINANT de
   chaque ecran — compte, email, brief. Il ne porte que l'identite, rien d'autre.

   Ce n'est pas une decoration : c'est le seul endroit sombre du contenu, donc l'oeil y va
   d'abord, toujours, sur les trois ecrans. Et c'est deja la couleur de la charte.

   Trois niveaux d'elevation, et un seul flotte : `--shadow` pour le dossier, `--shadow-lg`
   reserve a ce qui se detache vraiment de la page (panneau ancre, infobulle). Une section de
   soutien n'a qu'un filet. L'elevation dit « je suis detache », pas « je suis important ». */
.dossier { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line); background: var(--surface); margin-bottom: var(--s6); }
.dossier-h { background: var(--side-bg); color: var(--on-dark);
  padding: var(--s4) var(--s5); display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3) var(--s5); }
.dossier-id { min-width: 0; flex: 1 1 auto; }
.dossier-n { margin: 0; font-size: var(--fs-display); font-weight: 680; line-height: 1.15;
  letter-spacing: -.022em; overflow-wrap: anywhere; }
.dossier-m { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--side-ink); }

/* Les chiffres, traites comme des objets : tabulaires, serres, et TOUJOURS accompagnes d'un
   sourcil en capitales. Jamais un chiffre seul — sans unite il ne veut rien dire. */
.dossier-nums { display: flex; gap: var(--s5); flex: 0 0 auto; }
.num { text-align: right; }
.num-v { display: block; font-size: var(--fs-num); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* `--side-ink-2` donnait 3,32:1 sur le navy : sous le seuil AA de 4,5 pour du texte de 11 px
   — et un sourcil de 11 px n'est pas du « grand texte ». `--side-ink` monte a 8,55:1 sans
   rendre l'etiquette plus voyante que son chiffre : la taille, la casse et la graisse suffisent
   deja a la subordonner. */
.num-l { display: block; margin-top: 3px; font-size: var(--fs-2xs); font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; color: var(--side-ink); }
.dossier-h .num-v { color: var(--on-dark); }
.dossier-b { padding: var(--s5); }

/* La couleur marque CE QUI EST ACTIONNABLE, et rien d'autre : une seule distinction, sinon
   elle redevient de la decoration. Section ou il y a quelque chose a faire = filet bleu ;
   section informative = filet neutre. C'est la question du gerant presse : « ou dois-je agir ». */
.todo { border-left: 2px solid var(--primary); padding-left: var(--s4); }
.known { border-left: 1px solid var(--line); padding-left: var(--s4); }

/* Largeur de lecture. Un corps d'email ou un brief lu a voix haute perd sa ligne au-dela.
   L'espace libere n'est pas du vide : il porte l'aparté qui justifie le document. */
.reading { max-width: 62ch; }

@media (max-width: 719px) {
  .dossier-h { flex-direction: column; align-items: flex-start; }
  .dossier-nums { gap: var(--s4); }
  .num { text-align: left; }
}

/* Bandeau de dossier : pieces propres a la fiche compte. */
.dossier-logo, .dossier-mono { width: 46px; height: 46px; border-radius: var(--radius-sm);
  flex: 0 0 auto; object-fit: contain; background: var(--on-dark-dim); }
.dossier-mono { display: grid; place-items: center; color: var(--on-dark); font-weight: 700;
  font-size: var(--fs-md); letter-spacing: -.01em; }
.dossier-tags { margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
/* Joindre et agir : UNE rangee. L'ancien en-tete melait liens, pastilles et jauge sur le meme
   plan — donc rien ne ressortait, et le numero de telephone se cherchait. */
.dossier-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5); background: var(--surface-2);
  border-bottom: 1px solid var(--line); }
.dossier-act-x { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
@media (max-width: 719px) { .dossier-act-x { margin-left: 0; } }
/* Le numero dans la barre du dossier : lisible d'un coup d'oeil sans etre le primaire de
   l'ecran — ce role appartient a l'action recommandee. Contour marque, fond clair. */
.btn-call { border-color: var(--primary-line); background: var(--primary-wash);
  color: var(--primary); font-weight: 620; font-variant-numeric: tabular-nums; }
.btn-call:hover { background: var(--surface); border-color: var(--primary); }

/* Bandeau de dossier, variante compacte : ecran de validation. Le nom du syndic est ce qu'on
   verifie avant d'appuyer sur Envoyer — il doit se lire sans etre cherche. */
.dossier-h-sm { padding: var(--s3) var(--s4); }
.dossier-n-sm { font-size: var(--fs-xl); font-weight: 660; letter-spacing: -.018em; }
.dossier-n-sm a { color: var(--on-dark); text-decoration: none; }
.dossier-n-sm a:hover { text-decoration: underline; }
.mailcard .actionbar { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  background: var(--surface-2); margin: 0; }
.mailcard .ms-sheet, .mailcard .banner { margin: var(--s4); }

/* ---------------- Brief d'appel : un document lu A VOIX HAUTE ----------------
   Il se lit pendant que le telephone sonne, souvent debout. Corps plus grand, interligne
   genereux, largeur de lecture — et le NUMERO EPINGLE en tete : c'est la seule chose dont on
   a besoin si tout le reste echoue. */
.brief-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.brief-t { margin: 0; margin-right: var(--s3); display: inline-flex; align-items: center;
  gap: 7px; font-size: var(--fs-lg); font-weight: 640; }
.brief-x { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
@media (max-width: 719px) { .brief-x { margin-left: 0; } }

/* Le corps du script. Les etapes numerotees sont une SEQUENCE reelle — l'ordre dans lequel on
   parle — donc la numerotation porte une information, elle ne decore pas. */
.brief-doc { font-size: var(--fs-base); line-height: 1.75; color: var(--ink); }
.brief-doc p { margin: 0 0 var(--s4); }
/* Les repliques a dire sont entre guillemets : on les detache pour que l'oeil les retrouve
   sans relire le paragraphe. */
.brief-doc strong { color: var(--ink); font-weight: 660; }
.brief-doc hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
/* Le pense-bete de bas de page : dense, secondaire, jamais lu a voix haute. */
.brief-doc dl, .brief-doc dd { margin: 0; }
.brief-doc dd { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6;
  padding-left: var(--s4); border-left: 1px solid var(--line); }
/* Sous-titre et aide d'un groupe de reglages. */
.pset-h { margin: var(--s5) 0 var(--s3); font-size: var(--fs-md); font-weight: 640;
  padding-top: var(--s4); border-top: 1px solid var(--line); }
.pset-hint { display: block; margin-top: 5px; font-size: var(--fs-xs); color: var(--ink-3);
  line-height: 1.5; font-weight: 400; }

/* ==========================================================================
   DESIGN V4 — poste de commandement commercial
   --------------------------------------------------------------------------
   La fiche d'intervention est l'objet de référence : identité sombre en tête, décision claire,
   faits ensuite. Le motif radar n'apparaît que dans le chrome et les objets dominants. Les
   surfaces de soutien restent plates afin que l'élévation conserve un sens.
   ========================================================================== */

.skip-link { position: fixed; top: var(--s2); left: var(--s2); z-index: 100;
  transform: translateY(-160%); padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); font-weight: 650; }
.skip-link:focus { transform: translateY(0); }

.app-v4 .shell { min-height: 100dvh; }
.app-v4 .side { position: relative; isolation: isolate; gap: var(--s2); padding: var(--s4) var(--s3);
  background: var(--grad-side); }
.app-v4 .side::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto;
  height: 220px; pointer-events: none; opacity: .7;
  background-image: radial-gradient(circle at 82% 12%, transparent 0 38px,
    var(--on-dark-dim) 39px 40px, transparent 41px 68px,
    var(--on-dark-dim) 69px 70px, transparent 71px 100px,
    var(--on-dark-dim) 101px 102px, transparent 103px); }
.app-v4 .side-brand { min-height: 88px; padding: var(--s2) var(--s3) var(--s4);
  border-bottom: 1px solid var(--on-dark-dim); }

.side-kicker { margin: var(--s3) var(--s3) var(--s1); color: var(--side-ink-2);
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; }
.side-hub { margin: 0; border-radius: var(--radius-sm); }
.side-hub-summary { display: flex; align-items: center; gap: var(--s3); min-height: 48px;
  padding: 0 var(--s3); border-radius: var(--radius-sm); color: var(--side-ink);
  cursor: pointer; list-style: none; font-size: var(--fs-md); font-weight: 650; }
.side-hub-summary::-webkit-details-marker { display: none; }
.side-hub-summary:hover, .side-hub:has(.active) > .side-hub-summary {
  background: var(--on-dark-dim); color: var(--on-dark); }
.side-hub-summary .side-ic, .app-v4 .side-hub-link .side-ic { color: var(--side-ink); }
.side-hub-summary .nav-badge { margin-left: auto; }
.side-chevron { margin-left: auto; color: var(--side-ink-2); font-size: var(--fs-lg);
  transform: rotate(0); transition: transform .16s ease; }
.side-hub[open] .side-chevron { transform: rotate(90deg); }
.side-subnav { display: grid; gap: 2px; margin: var(--s1) 0 var(--s2); padding-left: var(--s5); }
.app-v4 .side-item { min-height: 44px; padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); }
.app-v4 .side-hub-link { font-size: var(--fs-md); font-weight: 650; }
.app-v4 .side-subnav .side-item { min-height: 38px; color: var(--side-ink); }
.app-v4 .side-item.active { background: var(--side-2); color: var(--on-dark); font-weight: 650;
  box-shadow: inset 3px 0 0 var(--primary); }
/* Le survol s'installe au lieu de claquer : même durée que les boutons, rien de plus. */
.side-item, .side-hub-summary, .tab, .subtab, .seg, .gsearch-hit, .ast-nav-i {
  transition: background-color .14s ease, color .14s ease; }
.side-tool-label { margin-left: auto; font-family: var(--mono); font-size: var(--fs-2xs);
  color: var(--side-ink-2); text-transform: uppercase; letter-spacing: .08em; }
.app-v4 .side-assistant { margin-top: var(--s4); border: 1px solid var(--on-dark-dim); }

.app-v4 .content { width: 100%; max-width: 1640px; margin: 0 auto; padding: var(--s6) var(--s7) 64px; }
.app-v4 .topbar { position: relative; min-height: 52px; margin-bottom: var(--s6); }
.workspace-mark { flex: 0 0 auto; min-width: 126px; display: grid; gap: 1px;
  padding-right: var(--s5); border-right: 1px solid var(--line); }
.workspace-mark span { font-family: var(--mono); color: var(--ink-3); font-size: var(--fs-2xs);
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.workspace-mark strong { font-size: var(--fs-md); font-weight: 720; color: var(--ink); }
.app-v4 .gsearch { max-width: 760px; }
/* La recherche est une pilule : le seul champ toujours visible mérite une silhouette à part,
   qu'aucune carte ni aucun bouton ne partage. */
.app-v4 .gsearch input { height: 44px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow); background: var(--surface); }
.app-v4 .topbar-bell { width: 44px; height: 44px; min-width: 44px;
  border-radius: var(--radius-pill); box-shadow: var(--shadow); }
.app-v4 .crumb { margin-bottom: var(--s3); font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: -.01em; }
.app-v4 .crumb a { display: inline-flex; align-items: center; min-height: 24px; }
.app-v4 .page-head { margin-bottom: var(--s6); align-items: flex-end; }
.app-v4 .page-head .sub, .app-v4 .page-head > div > p { max-width: 62ch;
  font-size: var(--fs-base); color: var(--ink-2); margin-top: 6px; line-height: 1.55; }
.app-v4 .head-actions { align-items: center; }

/* Les cartes redeviennent des objets posés : bord fin + ombre à deux couches. Le tout-plat
   « bordure seule » lisait comme un formulaire d'intranet, pas comme un produit. */
.app-v4 .card { border-color: var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: var(--s5);
  transition: border-color .18s ease, box-shadow .18s ease; }
.app-v4 .card:hover { border-color: var(--line-2); }
.app-v4 .card.pad-0 { padding: 0; }
.app-v4 .card-head { margin-bottom: var(--s4); }
.app-v4 .btn, .app-v4 .btn-primary { border-radius: var(--radius-sm); font-size: var(--fs-sm);
  font-weight: 650; transition: transform .14s ease, background .14s ease,
  border-color .14s ease, box-shadow .14s ease; }
.app-v4 .btn:active:not(:disabled), .app-v4 .btn-primary:active:not(:disabled) {
  transform: translateY(1px) scale(.985); }
/* Le primaire a de la matière : dégradé vertical discret + rehaut interne + halo. C'est le
   seul bouton qui en a le droit — les secondaires restent plats, la hiérarchie tient à ça. */
.app-v4 .btn-primary { background: var(--grad-primary);
  box-shadow: inset 0 1px 0 var(--inset-hi), 0 8px 20px -10px var(--primary-glow); }
.app-v4 .btn-primary:hover:not(:disabled) { background: var(--grad-primary);
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 var(--inset-hi), 0 10px 26px -10px var(--primary-glow); }
.app-v4 .btn:disabled, .app-v4 .btn-primary:disabled { background: var(--sunken);
  border-color: var(--line); color: var(--ink-3); box-shadow: none; transform: none; }
/* La mono est réservée aux instruments (scores, compteurs, dates) : une pastille TEXTUELLE
   (« premier email », « relance ») en Plex Mono lisait comme une valeur de debug. */
.app-v4 .pill { border-radius: var(--radius-sm); font-size: var(--fs-2xs); letter-spacing: 0; }
.app-v4 .pill.tnum, .app-v4 .pill.pill-num { font-family: var(--mono); letter-spacing: -.015em; }
.app-v4 .tnum, .app-v4 .num, .app-v4 .kpi .n, .app-v4 .sc,
.app-v4 .fbar, .app-v4 time { font-family: var(--mono); }

.app-v4 .kpis { gap: var(--s3); }
/* Tuile-instrument : le chiffre est l'objet, l'étiquette un sourcil mono. L'accent est un
   index court en tête — un repère de cadran, pas une bordure qui ceinture la tuile. */
.app-v4 .kpi { position: relative; overflow: hidden; min-height: 112px; padding: var(--s4) var(--s5);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
/* V4 : plus de filets multicolores pleine largeur. Un seul accent, court, primaire. */
.app-v4 .kpi::before { content: ""; position: absolute; inset: 0 auto auto var(--s5);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad-primary); }
.app-v4 .kpi .n { font-size: var(--fs-num); letter-spacing: -.04em; }
.app-v4 .kpi-l { max-width: 18ch; line-height: 1.35; font-family: var(--mono); }
.app-v4 .callout { border-radius: var(--radius); border-color: var(--primary-line); }
.app-v4 .conv-main { background: var(--side-bg); box-shadow: var(--shadow-md); }
.app-v4 .rings { box-shadow: none; }
.app-v4 .grid-analytics { gap: var(--s4); }
.dashboard-help { margin-top: var(--s4); }
.dashboard-help > summary { display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 650;
  list-style: none; }
.dashboard-help > summary::-webkit-details-marker { display: none; }
.dashboard-help[open] > summary { border-color: var(--primary-line); color: var(--primary); }
.dashboard-help .callout { margin-top: var(--s2); }
@media (min-width: 1200px) {
  .app-v4 .grid-analytics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-v4 .chart-box { height: 210px; }
}

/* File d'actions : une ligne de travail, pas une collection de cartes marketing. */
.app-v4 .plist { gap: var(--s2); }
.app-v4 .prow { border-radius: var(--radius); box-shadow: none; border-color: var(--line);
  padding: var(--s4); }
.app-v4 .prow:hover { transform: none; border-color: var(--primary-line); box-shadow: var(--shadow); }
.app-v4 .prow.is-hero { border: 1px solid var(--primary-line); box-shadow: var(--shadow-md);
  background: var(--primary-wash); }
.app-v4 .pico { border-radius: var(--radius-sm); box-shadow: none; }
.app-v4 .pr-nm { font-size: var(--fs-base); font-weight: 720; }

/* Validation et réponses : la file reste un rail ; le document conserve une largeur de lecture. */
.app-v4 .vwrap { gap: var(--s5); }
.app-v4 .vqueue { border-radius: var(--radius); box-shadow: none; }
.app-v4 .vq-item { padding: var(--s3) var(--s4); }
.app-v4 .vq-item.active { box-shadow: inset 3px 0 0 var(--primary); }
.app-v4 .mailcard { box-shadow: var(--shadow-md); }
.app-v4 .ms-sheet { border-radius: 0; box-shadow: none; }
.app-v4 .reading { max-width: 64ch; }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.review-document { min-width: 0; }
.review-document .mailsheet { margin: var(--s4); }
.review-document .qbar { margin: 0 var(--s4) var(--s4); padding-top: var(--s3); }
.review-why { padding: var(--s5); background: var(--surface-2); border-top: 1px solid var(--line); }
.review-why h3 { margin-bottom: var(--s4); font-size: var(--fs-lg); }
.review-eyebrow { margin: 0 0 var(--s1); font-family: var(--mono); font-size: var(--fs-2xs);
  font-weight: 600; color: var(--primary); letter-spacing: .08em; text-transform: uppercase; }
.review-why .whygrid { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.review-why .whygrid > div { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.review-note-title { margin-top: var(--s4); }
@media (min-width: 1280px) {
  .review-grid { grid-template-columns: minmax(0, 1fr) 290px; }
  .review-why { border-top: 0; border-left: 1px solid var(--line); }
}

/* Pipeline : des couloirs opérationnels plus denses, la couleur reste dans le liseré. */
.app-v4 .pipe { gap: var(--s3); }
.app-v4 .pcol { background: var(--surface-2); border-radius: var(--radius); }
.app-v4 .pcol-head { background: transparent; }
.app-v4 .pcard { border-radius: var(--radius-sm); box-shadow: none; }
.app-v4 .pcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

/* Tableaux et calendrier : davantage de contraste structurel, moins d'encadrements. */
.app-v4 .table th { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .055em; }
.app-v4 .table td { font-size: var(--fs-sm); }
.app-v4 .row-link:hover td { background: var(--primary-wash); }
.app-v4 .agenda-grid { gap: var(--s5); }
.app-v4 .agenda-rail { border-left: 1px solid var(--line); padding-left: var(--s5); }
.agenda-more { margin-top: var(--s2); }
.agenda-more > summary { min-height: 40px; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s3); border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 650; list-style: none; }
.agenda-more > summary::-webkit-details-marker { display: none; }
.agenda-more[open] > summary { margin-bottom: var(--s2); border-color: var(--primary-line);
  color: var(--primary); }

/* Objet signature : des anneaux radar discrets derrière l'identité, jamais sur le corps. */
.app-v4 .dossier { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.app-v4 .dossier-h { position: relative; isolation: isolate; overflow: hidden; padding: var(--s5) var(--s6); }
.app-v4 .dossier-h::after { content: ""; position: absolute; z-index: -1; right: -42px; top: 50%;
  width: 250px; height: 250px; transform: translateY(-50%); border-radius: 50%; opacity: .8;
  background-image: radial-gradient(circle, transparent 0 31px, var(--on-dark-dim) 32px 33px,
    transparent 34px 61px, var(--on-dark-dim) 62px 63px, transparent 64px 91px,
    var(--on-dark-dim) 92px 93px, transparent 94px); }
.app-v4 .dossier-n { font-family: var(--display); font-weight: 760; }
.app-v4 .dossier-act { padding: var(--s3) var(--s6); }
.app-v4 .nba-card { margin-top: calc(var(--s3) * -1); border-left-width: 3px; }

@media (min-width: 641px) and (max-width: 899px) {
  .app-v4 .shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
  .app-v4 .side { position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    flex-direction: column; align-items: stretch; padding: var(--s3) var(--s2); }
  .app-v4 .side-brand { padding: var(--s2) var(--s2) var(--s3); }

  .app-v4 .side-item { width: 100%; white-space: normal; }
  .app-v4 .side-user { margin-top: auto; border-top: 1px solid var(--on-dark-dim); }
  .app-v4 .side-user .who { display: block; }
  .app-v4 .content { padding: var(--s5); }
}

@media (max-width: 640px) {
  body.app-v4 { font-size: .9375rem; }
  .app-v4 .content { padding: var(--s4) var(--s3) 92px; }
  .app-v4 .topbar { margin-bottom: var(--s5); }
  .workspace-mark { display: none; }
  .app-v4 .gsearch { max-width: none; }
  .app-v4 .page-head { margin-bottom: var(--s5); align-items: flex-start; }
  .app-v4 .page-head h1 { font-size: 1.5rem; }
  .app-v4 .card { padding: var(--s4); }
  .app-v4 .side.open { position: fixed; inset: 0 auto var(--tabbar-h) 0; z-index: 46;
    width: min(88vw, 360px); height: auto; overflow-y: auto;
    padding: var(--s4) var(--s3) var(--s6); }
  .app-v4 .ast-launch { display: none; }

  .app-v4 .side.open .side-hub-summary { min-height: 48px; }
  .app-v4 .vqueue { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .app-v4 .vq-item { flex: 0 0 82%; scroll-snap-align: start; border-right: 1px solid var(--line);
    border-bottom: 0; }
  .app-v4 .vq-item.active { box-shadow: inset 0 -3px 0 var(--primary); }
  .app-v4 .dossier-h { padding: var(--s4); }
  .app-v4 .dossier-act { padding: var(--s3) var(--s4); }
  .app-v4 .dossier-h::after { right: -100px; }
  .app-v4 .agenda-rail { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   DESIGN V5 — moins de défilement, davantage d'action visible
   ========================================================================== */
.reply-switcher { display: none; margin-bottom: var(--s3); }
.reply-switcher > label { display: block; margin-bottom: var(--s1); font-family: var(--mono);
  color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; }
.reply-switcher-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--s2); align-items: center; }
.reply-switcher select { min-width: 0; width: 100%; }
.reply-progress, .pager-status { color: var(--ink-3); font-family: var(--mono);
  font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }

.thread-head-actions { display: flex; align-items: center; gap: var(--s2); }
.thread-jump { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-xs);
  font-weight: 650; }
.thread-workbench { display: grid; gap: var(--s4); align-items: start; }
.thread-workbench.is-context-only .thread-compose { display: none; }
.thread-timeline, .thread-compose { min-width: 0; }
.thread-compose { scroll-margin-top: 90px; }
.thread-compose .b-prep { margin: 0; }
.thread-next { display: grid; gap: var(--s1); padding: var(--s4); border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm); color: var(--ink-2); }
.thread-next span { color: var(--ink-3); font-size: var(--fs-sm); }
.thread-archive > summary { min-height: 40px; }

.today-more { margin-top: var(--s3); }
/* Un lien, pas un cadre : la boîte pointillée pleine largeur lisait comme un emplacement
   vide de maquette. Le texte centré avec son chevron suffit — et il reste une cible de 44 px. */
.today-more > summary { display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 var(--s4); color: var(--primary); font-size: var(--fs-sm);
  font-weight: 680; list-style: none; cursor: pointer; border-radius: var(--radius-sm); }
.today-more > summary::after { content: "▾"; font-size: .72rem; }
.today-more[open] > summary::after { content: "▴"; }
.today-more > summary:hover { background: var(--primary-wash); }
.today-more > summary::-webkit-details-marker { display: none; }
.today-more[open] > summary { margin-bottom: var(--s3); }
.today-more-list .prow { background: var(--surface); }
.today-overview { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); }
/* Rappel de validation : une bande sur le fond, portée par le filet .todo — pas une carte. */
.validation-callout { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-top: var(--s6); padding-top: var(--s2);
  padding-bottom: var(--s2); }
.validation-callout p { margin: 2px 0 0; }
.today-overview .card-head { margin-bottom: var(--s3); }

.call-page-head { margin-bottom: var(--s4); }
.call-page-head .backlink { display: inline-flex; margin-bottom: var(--s3); }
.call-page-head h1 { margin: 0; }
.call-blocked { max-width: 720px; border-left: 3px solid var(--danger) !important; }
.call-blocked h2 { margin: var(--s2) 0; font-size: var(--fs-xl); }
.call-blocked p { margin-bottom: var(--s4); color: var(--ink-2); }
.call-eyebrow { margin: 0 0 var(--s1); color: var(--primary); font-family: var(--mono);
  font-size: var(--fs-2xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.call-command { position: sticky; top: var(--s2); z-index: 18; display: flex; align-items: center;
  gap: var(--s2); margin-bottom: var(--s5); padding: var(--s3); border: 1px solid var(--side-line);
  border-radius: var(--radius); background: var(--side-bg); color: var(--on-dark);
  box-shadow: var(--shadow-lg); }
.call-command-who { display: flex; align-items: center; gap: var(--s3); margin-right: auto; }
.call-command-who > span:last-child { display: grid; }
.call-command-who small { color: var(--on-dark-muted); }
.call-live { width: 11px; height: 11px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 18%, transparent); animation: call-pulse 2s ease-in-out infinite; }
@keyframes call-pulse { 50% { box-shadow: 0 0 0 9px transparent; } }
.call-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  gap: var(--s5); align-items: start; }
.call-script, .call-capture { min-width: 0; padding: var(--s5); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.call-capture { position: sticky; top: 92px; }
.call-section-head { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.call-section-head h2 { margin: 0; font-size: var(--fs-xl); }
.call-section-head p { margin: var(--s1) 0 0; color: var(--ink-3); font-size: var(--fs-sm); }
.call-index { color: var(--primary); font-family: var(--mono); font-size: var(--fs-xs);
  font-weight: 650; letter-spacing: .08em; }
.call-context { margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-left: 3px solid var(--warn);
  background: var(--warn-wash); }
.call-context > span { color: var(--warn-ink); font-family: var(--mono); font-size: var(--fs-2xs);
  font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.call-context blockquote { margin: var(--s2) 0 0; color: var(--ink-2); }
.call-script-doc { font-size: var(--fs-md); line-height: 1.72; }
.call-script-doc h3 { margin-top: var(--s5); }
.call-result-form { display: grid; gap: var(--s4); }
.call-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2);
  margin: 0; padding: 0; border: 0; }
.call-outcomes legend { grid-column: 1 / -1; margin-bottom: var(--s1); font-size: var(--fs-sm);
  font-weight: 650; }
.call-outcome { position: relative; cursor: pointer; }
.call-outcome input { position: absolute; opacity: 0; pointer-events: none; }
.call-outcome span { display: flex; align-items: center; min-height: 44px; padding: var(--s2) var(--s3);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 620; }
.call-outcome input:checked + span { border-color: var(--primary); background: var(--primary-wash);
  color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.call-outcome input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.call-capture .addcontact { margin-top: var(--s4); }

@media (max-width: 980px) {
  .call-layout { grid-template-columns: 1fr; }
  .call-capture { position: static; }
}

@media (max-width: 640px) {
  .call-command { top: var(--s2); flex-wrap: wrap; }
  .call-command-who { width: 100%; }
  .call-command .btn-call { flex: 1; }
  .call-note-jump { flex: 1 1 100%; }
  .call-script, .call-capture { padding: var(--s4); }
  .call-outcomes { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .call-live { animation: none; }
}

.pager { display: flex; justify-content: center; align-items: center; gap: var(--s3);
  margin-top: var(--s5); }

@media (min-width: 1200px) {
  .app-v4 .vwrap { grid-template-columns: 260px minmax(0, 1fr); }
  .thread-workbench { grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr); }
  .thread-workbench.is-context-only { grid-template-columns: minmax(0, 72ch); }
  .thread-timeline { max-height: calc(100dvh - 245px); overflow-y: auto; padding-right: var(--s2);
    overscroll-behavior: contain; scrollbar-gutter: stable; }
  .thread-compose { position: sticky; top: 84px; }
}

@media (max-width: 899px) {
  .reply-switcher { display: block; }
  .app-v4 .vqueue { display: none; }
  .thread-jump { display: none; }
}

@media (max-width: 520px) {
  .reply-switcher-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .reply-switcher-row select { grid-column: 1 / -1; }
  .reply-progress { grid-column: 1; grid-row: 2; }
  .reply-switcher-row [data-thread-prev] { grid-column: 2; grid-row: 2; }
  .reply-switcher-row [data-thread-next] { grid-column: 3; grid-row: 2; }
  .thread-workbench { gap: var(--s3); }
  .thread-timeline { order: 2; }
  .thread-compose { order: 1; }
  .thread-actions { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    z-index: 8; margin-inline: calc(var(--s2) * -1); padding: var(--s2);
    border: 1px solid var(--primary-line); border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--primary-wash) 92%, transparent);
    box-shadow: var(--shadow-md); backdrop-filter: blur(10px); }
  .pager { justify-content: space-between; }
}

/* ==========================================================================
   DESIGN V6 — la vitrine
   --------------------------------------------------------------------------
   Références : les galeries type Awwwards/Godly — verre flottant, lumière sur
   les surfaces sombres, grain, type éditorial, mouvement d'entrée. Les règles
   métier de la charte ne bougent pas : un primaire par écran, couleurs dans
   :root, aucune action au survol seul, `prefers-reduced-motion` respecté (le
   bloc global en tête de feuille neutralise déjà toutes les animations).
   ========================================================================== */

/* --- Sélection et ascenseurs : les détails qu'on ne remarque que s'ils manquent --- */
::selection { background: var(--primary); color: var(--on-primary); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* --- Barre supérieure : une capsule pleine, qui ne suit PAS le défilement ---
   Elle a été collante et translucide pendant une version : le bandeau navy du mode appel
   (`.call-command`, collant lui aussi) glissait dessous et transparaissait en bande sombre,
   et les en-têtes de tableau collants disparaissaient derrière elle. Tous les décalages
   collants de l'application (92 px, 84 px, en-têtes à 0) étaient calés sur une barre fixe :
   la rendre collante cassait ce calage partout à la fois. */
.app-v4 .topbar { position: relative; z-index: 1;
  padding: var(--s2) var(--s3); margin-bottom: var(--s6);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); box-shadow: var(--shadow); }

/* La barre latérale doit suivre le défilement : `.app-v4 .side { position: relative }`
   écrasait la règle collante posée plus haut sur `.side` (même spécificité, déclarée plus
   tard). Le navy s'arrêtait donc en pleine page dès qu'on descendait. */
@media (min-width: 900px) {
  .app-v4 .side { position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
}
.app-v4 .topbar .gsearch input { box-shadow: none; border-color: var(--line); }
.app-v4 .topbar-bell { border-color: transparent; background: transparent; box-shadow: none; }
.app-v4 .topbar-bell:hover, .app-v4 .topbar-bell.active { background: var(--surface);
  border-color: var(--line); }
.workspace-mark { padding-left: var(--s3); }

/* --- Boutons : la pilule, silhouette des produits contemporains --- */
.app-v4 .btn, .app-v4 .btn-primary { border-radius: var(--radius-pill); padding: 7px 18px; }
.app-v4 .btn-sm { padding: 3px 13px; }
.app-v4 .btn-primary:hover:not(:disabled) { transform: translateY(-1px); }

/* --- Bandeau de stats : des chiffres posés SUR la page, séparés par des filets ---
   La rangée de tuiles blanches identiques (bordure + rayon + tick répété) était le motif
   « trois cartes égales » des interfaces générées : la donnée n'a pas besoin d'une boîte,
   elle a besoin d'air. Un filet vertical suffit à séparer deux chiffres. */
.app-v4 .kpi { min-height: 0; padding: var(--s1) var(--s5); background: none;
  border: 0; border-left: 1px solid var(--line-2); border-radius: 0; box-shadow: none;
  overflow: visible; }
.app-v4 .kpi::before { content: none; }
.app-v4 .kpi:first-child { border-left: 0; padding-left: 0; }
.app-v4 .kpi .n { font-size: 2.25rem; font-weight: 640; letter-spacing: -.045em;
  margin-top: var(--s2); }
.app-v4 .kpis { gap: var(--s4) 0; margin: 0 0 var(--s6); }
@media (max-width: 959px) {
  /* Deux colonnes : chaque début de ligne perd son filet. */
  .app-v4 .kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* --- Surfaces navy : de la lumière et du grain, plus un aplat mort --- */
.app-v4 .side::after, .app-v4 .dossier-h::before, .call-command::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--noise); opacity: .05; }
.app-v4 .side {
  background-image:
    radial-gradient(420px 260px at 18% -8%, var(--glow-blue-dark), transparent 68%),
    radial-gradient(360px 420px at 120% 104%, var(--glow-green-dark), transparent 70%),
    var(--grad-side); }
.app-v4 .dossier-h { background-color: var(--side-bg);
  background-image:
    radial-gradient(560px 240px at 86% -30%, var(--glow-blue-dark), transparent 70%),
    radial-gradient(380px 200px at 4% 120%, var(--glow-green-dark), transparent 72%); }
.call-command { position: sticky; isolation: isolate; overflow: hidden;
  background-image: radial-gradient(420px 180px at 88% -30%, var(--glow-blue-dark), transparent 70%); }

/* Actif de la sidebar : le liseré primaire gagne une lueur — l'écran courant rayonne. */
.app-v4 .side-item.active { box-shadow: inset 3px 0 0 var(--primary),
  0 0 22px -6px var(--primary-glow); }

/* --- Fil d'Ariane : un sourcil éditorial au-dessus du grand titre --- */
.app-v4 .crumb { display: inline-flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3); letter-spacing: .06em; text-transform: uppercase;
  font-size: var(--fs-2xs); font-weight: 600; }
.app-v4 .crumb::before { content: ""; width: 20px; height: 1px; background: var(--primary); }

/* --- Navigation : instantanée, sans mise en scène ---
   L'ancienne cascade d'entrée (fondu + translation sur chaque carte) rejouait à CHAQUE
   navigation : changer d'onglet sur une fiche donnait l'impression que toute la page
   rechargeait. Dans un outil qu'on traverse cent fois par jour, l'entrée en scène est du
   bruit — supprimée. Les transitions entre documents (`@view-transition`) ont été essayées
   puis retirées : elles gelaient la boucle de rendu (rAF) après navigation sur Chromium —
   un basculement net et immédiat est le bon comportement pour un outil de travail. */

/* Le survol d'une carte la soulève d'un pixel — un objet, pas une zone. */
.app-v4 .card:hover { box-shadow: var(--shadow-md), 0 18px 44px -30px var(--primary-glow); }

/* ==========================================================================
   V8 — lisibilité (revue croisée Claude × GPT-5.2 × GPT-5.6)
   Le temps pilote l'action ; la couleur signale l'exception ; le détail
   n'apparaît qu'au moment où il devient utile.
   ========================================================================== */

/* Échéances relatives : seule l'urgence porte une couleur. */
.due { font-variant-numeric: tabular-nums; }
.due-today { color: var(--warn-ink); font-weight: 650; }
.due-late { color: var(--danger); font-weight: 650; }

/* Brief d'appel : le début se lit, la suite se déplie. La case à cocher est masquée mais
   reste focusable au clavier (sr-focusable) ; son focus se reporte sur l'étiquette. */
.sr-focusable { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* « Autres actions » du bloc Action recommandée : le CTA suit la recommandation, le reste
   ne rivalise plus avec lui — il se déplie à la demande, en dessous, sans pousser la page. */
.nba-more { position: relative; display: inline-flex; }
.nba-more > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; min-height: 36px; padding: 0 var(--s3); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 560; color: var(--ink-3); }
.nba-more > summary::-webkit-details-marker { display: none; }
.nba-more > summary::after { content: "▾"; font-size: .7rem; }
.nba-more[open] > summary::after { content: "▴"; }
.nba-more > summary:hover { background: var(--sunken); color: var(--ink); }
.nba-more-list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 240px;
  padding: var(--s2); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.nba-more-list .btn-ghost { justify-content: flex-start; width: 100%; }
@media (max-width: 640px) {
  /* Sur téléphone le menu flottant déborderait : la liste se déplie dans le flux. */
  .nba-more { display: block; }
  .nba-more-list { position: static; box-shadow: none; border: 0; padding: var(--s2) 0 0; }
}
.brief-toggle:not(:checked) ~ .brief-doc { max-height: 21em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, black 72%, transparent);
  mask-image: linear-gradient(180deg, black 72%, transparent); }
.brief-more-lbl { display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--s3); margin-top: var(--s2); border-radius: var(--radius-sm);
  color: var(--primary); font-size: var(--fs-sm); font-weight: 650; cursor: pointer; }
.brief-more-lbl:hover { background: var(--primary-wash); }
.brief-toggle:focus-visible ~ .brief-more-lbl { outline: 2px solid var(--primary);
  outline-offset: 2px; }
.brief-toggle:checked ~ .brief-more-lbl .when-closed { display: none; }
.brief-toggle:not(:checked) ~ .brief-more-lbl .when-open { display: none; }

/* Aucun signal : une ligne sourde, pas une carte vide. */
.signals-none { display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: var(--s2) 0; color: var(--ink-3); font-size: var(--fs-sm); }
.signals-none .ic { width: 15px; height: 15px; }

/* Contact désinscrit : l'état se lit sur le badge, plus sur un fond d'alarme permanent. */
.contactcard.is-blocked { background: var(--surface-2); border-color: var(--line); }

/* Enregistrer une vue : replié, c'est une action rare. */
.save-view > summary { display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 var(--s2); color: var(--primary); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; list-style: none; border-radius: var(--radius-sm); }
.save-view > summary::-webkit-details-marker { display: none; }
.save-view > summary:hover { background: var(--primary-wash); }
.save-view-form { display: inline-flex; gap: var(--s2); align-items: center;
  padding: var(--s2) 0; }
.save-view-form input[name="name"] { width: auto; min-width: 180px; min-height: 36px;
  font-size: var(--fs-sm); }

/* --- V7 : retouches propres au thème sombre --- */
/* Le toast reste un panneau INVERSÉ (clair sur la nuit) : ses liens prennent son encre. */
.toast a { color: var(--on-primary); text-decoration: underline; }
.undobar-btn { border-color: var(--on-light-line); }

@media (max-width: 640px) {
  /* La capsule de verre colle en haut du téléphone, bord à bord arrondi léger. */
  /* Sur telephone la capsule se resserre : la pilule pleine largeur mange la place du champ. */
  .app-v4 .topbar { border-radius: var(--radius); padding: var(--s2); }
  /* Les pilules reprennent une largeur de poche : le rembourrage desktop faisait replier
     la barre d'actions de la validation sur quatre lignes en accordéon. */
  .app-v4 .btn, .app-v4 .btn-primary { padding: 7px 13px; }
  .app-v4 .mailcard .actionbar { gap: var(--s2); }
  /* Deux rangées nettes : les boutons se partagent la premiere, les liens s'etalent
     sur la seconde — fini l'accordeon ou « Rejeter » partait seul a la ligne. */
  .app-v4 .mailcard .actionbar > .btn, .app-v4 .mailcard .actionbar > .btn-primary,
  .app-v4 .mailcard .actionbar > .btn-ai, .app-v4 .mailcard .actionbar > form {
    flex: 1 1 auto; }
  .app-v4 .mailcard .actionbar > form > .btn,
  .app-v4 .mailcard .actionbar > form > .btn-primary { width: 100%; }
  .app-v4 .mailcard .actionbar > .btn, .app-v4 .mailcard .actionbar > .btn-primary,
  .app-v4 .mailcard .actionbar > .btn-ai { justify-content: center; }
  .app-v4 .mailcard .ab-rest { margin-left: 0; flex: 1 1 100%;
    justify-content: space-between; }
  .app-v4 .mailcard .actionbar-sep { display: none; }
  .app-v4 .mailcard .ab-rest .linkbtn { padding: 6px 4px; font-size: var(--fs-sm); }
}


/* ---------------- Revue visuelle 09/2026 ---------------- */
/* Tablette (721-1024 px) : un tableau à colonnes de texte libre s'écrasait mot à mot. Dans
   son enveloppe `.table-wrap`, il garde une largeur minimale et défile horizontalement. */
@media (min-width: 721px) and (max-width: 1024px) {
  .table-wrap .table { min-width: 760px; }
}
/* Le bouton natif « Choisir un fichier » rompait avec le système : on l'habille comme .btn. */
input[type=file]::file-selector-button {
  font: inherit; font-size: var(--fs-sm); font-weight: 650; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 6px 13px; margin-right: var(--s3); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--surface-2); }
/* Le lanceur Assistant est fixé en bas à droite : la fin de page (souvent un formulaire) doit
   pouvoir défiler au-dessus de lui — garde basse sur desktop et tablette. */
@media (min-width: 641px) { .app-v4 .content { padding-bottom: 104px; } }


/* ---------------- Audit accessibilité 09/2026 ---------------- */
/* Cartes de ton et pilules de longueur : la radio est invisible, le focus doit se voir sur
   la carte elle-même (même motif que les résultats d'appel). */
.tonecard:has(input:focus-visible), .lenpill:has(input:focus-visible) > span {
  outline: 2px solid var(--primary); outline-offset: 2px; }
.lenpills-wrap { border: 0; margin: 0; padding: 0; }
/* Cibles minimales 24 px (WCAG 2.5.8) sur les micro-commandes. */
.chip-x { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; }
.pcard .linkbtn { min-height: 24px; }
/* Lu à l'écran : le réglage terminé s'annonce ; à l'écran, la couleur ne porte plus seule. */
.notif.is-read { opacity: 1; color: var(--ink-2); }
.notif.is-read b { font-weight: 500; }


/* ---------------- QA 09/2026 ---------------- */
/* Fiche sur téléphone : l'adresse email d'un contact forçait la carte à 402 px et la page à
   défiler horizontalement. */
.ct-mail, .ct-name { overflow-wrap: anywhere; }
/* Onglets qui défilent : un fondu sur le bord droit dit qu'il y a plus loin. */
@media (max-width: 640px) {
  .tabbar, .ptabs, .subtabs { mask-image: linear-gradient(90deg, var(--ink) calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - 28px), transparent); }
}
/* À valider sur téléphone : la file redevient une bande horizontale (elle était masquée
   sans aucun moyen de passer à l'email suivant). Réponses garde son sélecteur. */
@media (max-width: 899px) {
  .app-v4 .vqueue.vqueue-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; }
  .app-v4 .vqueue.vqueue-strip .vq-item { flex: 0 0 82%; scroll-snap-align: start;
    border-right: 1px solid var(--line); border-bottom: 0; }
}