/* ═══════════════════════════════════════════════════════════════════════════
   ESPACE DE TRAVAIL BRILLONOVA — feuille de style unique.

   L'IDÉE DIRECTRICE : une coquille NEUTRE (graphite), et UNE couleur de signal —
   celle de la marque (--signal, le cyan BrilloNova). Elle porte tout ce qui est actif :
   l'espace ouvert, le fil d'Ariane, le focus, le bouton d'envoi. Le reste se tait.
   Une interface dense se lit mieux quand une seule chose a le droit de briller.

   Aucune dépendance : ni Tailwind, ni police distante, ni CDN. L'espace doit démarrer
   sur une machine hors ligne, et il ne partage aucun fichier avec le cockpit existant.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. JETONS ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Surfaces — graphite légèrement chaud : le gris pur fatigue sur une journée. */
  --fond-0: #0c0d10;
  --fond-1: #121317;
  --fond-2: #17191e;
  --fond-3: #1e2027;
  --fond-survol: #22252d;

  --bord: #262931;
  --bord-fort: #343841;

  --encre-1: #f2f3f5;
  --encre-2: #b7bcc6;
  --encre-3: #868d9a;
  --encre-4: #5d646f;

  /* Le signal : la couleur de la marque, et rien d'autre ne brille. */
  --signal: #3BE8FF;
  --signal-doux: rgba(59, 232, 255, 0.12);
  --signal-bord: rgba(59, 232, 255, 0.32);

  /* États. Volontairement désaturés : un rouge criard perd son sens à la troisième
     alerte, et il en faut un qui reste lisible à la vingtième. */
  --rouge: #f2555a;
  --jaune: #e8a838;
  --vert: #3fc98a;
  --bleu: #4c9bf5;

  --rayon: 10px;
  --rayon-l: 14px;
  --rail: 232px;
  --barre: 52px;
  --panneau: 380px;

  --police: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  /* Titres et chiffres : Manrope, géométrique et tabulaire. Repli système si hors ligne. */
  --police-titre: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Inter, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --ombre: 0 8px 32px rgba(0, 0, 0, 0.45);
}

:root[data-theme="clair"] {
  color-scheme: light;
  --fond-0: #f7f7f8;
  --fond-1: #ffffff;
  --fond-2: #fbfbfc;
  --fond-3: #f1f2f4;
  --fond-survol: #e9eaee;
  --bord: #e3e5e9;
  --bord-fort: #cfd2d8;
  --encre-1: #16181d;
  --encre-2: #43474f;
  --encre-3: #6c727d;
  --encre-4: #969ca6;
  --ombre: 0 8px 28px rgba(15, 20, 30, 0.1);
  /* Le cyan pur ne tient pas sur blanc : on le descend d'un ton, la marque reste reconnaissable. */
  --signal: #0B9FBF;
  --signal-doux: rgba(11, 159, 191, 0.10);
  --signal-bord: rgba(11, 159, 191, 0.32);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--police);
  background: var(--fond-0);
  color: var(--encre-1);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--signal); text-decoration: none; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--bord-fort); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--encre-4); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; }

/* ── 2. CONNEXION ────────────────────────────────────────────────────────── */

.connexion {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(59, 232, 255, 0.10), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, rgba(76, 155, 245, 0.09), transparent 55%),
    var(--fond-0);
}
.connexion-carte { width: min(380px, 90vw); text-align: center; }
.connexion .marque { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 26px; }
.connexion h1 { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.connexion p { color: var(--encre-3); font-size: 12.5px; margin-bottom: 22px; }
.connexion input {
  width: 100%; padding: 11px 13px; background: var(--fond-2);
  border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 10px;
}
.connexion input:focus { border-color: var(--signal); outline: none; }
.connexion .erreur { color: var(--rouge); font-size: 12px; min-height: 18px; margin-top: 8px; }
.connexion .note { margin-top: 20px; font-size: 11.5px; color: var(--encre-4); line-height: 1.6; }

/* ── 3. COQUILLE ─────────────────────────────────────────────────────────── */

.os {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  grid-template-rows: var(--barre) 1fr;
  grid-template-areas: "barre barre barre" "rail centre panneau";
  height: 100vh;
}
.os[data-panneau="ferme"] { --panneau: 0px; }

/* Barre du haut */
/* ═══ LE DÉBORDEMENT DE 42 px, CORRIGÉ LE 11/09/2026 (ordre Cheick) ═══
   CE QUI A ÉTÉ MESURÉ, sur l'ACCUEIL à 390 px de large — donc sur toutes les pages, pas une :
   le document rendait un scrollWidth de 432, et la colonne unique de .os mesurait 431,95 px
   alors que la règle dit `1fr`.
   LA CAUSE : une piste de grille a `min-width: auto` par défaut — elle ne descend JAMAIS sous la
   largeur minimale de son contenu. Le contenu qui l'exigeait est cette barre : ses cinq blocs
   réclament 406 px (bouton menu 37, logo 25, fil 0, recherche 38, bloc de droite 306), plus
   4 espacements de 12 et 28 px de marge intérieure — 482 px de minimum dans un écran de 390.
   Chaque page héritait donc de 42 px de trop, et tout ce qui remplissait sa largeur était coupé.
   LA CORRECTION : `min-width: 0` rend à la piste le droit de rétrécir, et la barre défile à
   l'intérieur d'elle-même au lieu de pousser la page entière. RIEN N'EST MASQUÉ, rien n'est
   supprimé : les jauges d'usage, la source, la recherche et les quatre boutons restent tous
   atteignables. La barre de défilement elle-même est cachée — elle mangerait 15 px sur 52. */
.barre {
  grid-area: barre;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: var(--fond-1);
  border-bottom: 1px solid var(--bord);
  z-index: 30;
  min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.barre::-webkit-scrollbar { display: none; }
/* UN DÉFILEMENT QU'ON NE VOIT PAS EST UN CONTENU PERDU.
   À 390 px, les sept éléments de la barre réclament 418 px : le dernier bouton — « Se déconnecter »
   — tombe hors de l'écran. Il l'était DÉJÀ avant cette correction, à ceci près que c'était la page
   entière qui défilait, et non la seule barre. Le bouton reste donc atteignable, mais rien ne le
   disait. Ce dégradé de six pixels, au bord droit, ne s'affiche que lorsque la barre déborde
   vraiment (`scroll-timeline` n'étant pas partout, on le pose en permanence : il est invisible sur
   un écran où tout tient, puisqu'il se fond dans le fond de la barre).
   Ce n'est pas la vraie solution : la vraie serait de rendre 28 px, en réduisant la jauge d'usage
   (118 px) ou l'étiquette de source (41 px). C'est un choix de CONTENU, il appartient à Cheick. */
.barre { position: relative; background-image: linear-gradient(to left, var(--fond-1), transparent 6px); background-attachment: local, scroll; }
.logo { display: flex; align-items: center; gap: 9px; width: calc(var(--rail) - 26px); flex-shrink: 0; }
.logo .pastille {
  width: 25px; height: 25px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--signal), color-mix(in oklab, var(--signal) 55%, #000));
  display: grid; place-items: center; color: #fff; font-weight: 750; font-size: 11px;
  transition: background var(--transition);
}
.logo .nom { font-weight: 650; font-size: 13px; letter-spacing: -0.01em; }
.logo .nom small { display: block; font-size: 9.5px; color: var(--encre-4); letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; }

/* Recherche */
.recherche-declencheur {
  flex: 1; max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 8px;
  background: var(--fond-2); border: 1px solid var(--bord);
  color: var(--encre-4); font-size: 12.5px; transition: var(--transition);
}
.recherche-declencheur:hover { background: var(--fond-3); border-color: var(--bord-fort); color: var(--encre-3); }
.raccourci {
  font-family: var(--mono); font-size: 10px; padding: 1px 5px;
  border: 1px solid var(--bord-fort); border-radius: 4px; color: var(--encre-4);
}
.barre-droite { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icone-bouton {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; color: var(--encre-3);
  transition: var(--transition);
}
.icone-bouton:hover { background: var(--fond-3); color: var(--encre-1); }
.icone-bouton[aria-pressed="true"] { background: var(--signal-doux); color: var(--signal); }

/* Rail des modules */
.rail {
  grid-area: rail;
  background: var(--fond-1); border-right: 1px solid var(--bord);
  padding: 10px 9px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.rail-groupe { font-size: 9.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-4); padding: 14px 9px 5px; }
.rail-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border-radius: 8px;
  color: var(--encre-2); font-size: 12.5px; font-weight: 500;
  text-align: left; transition: var(--transition); position: relative;
}
.rail-item:hover { background: var(--fond-3); color: var(--encre-1); }
.rail-item[aria-current="page"] { background: var(--signal-doux); color: var(--encre-1); font-weight: 600; }
.rail-item[aria-current="page"]::before {
  content: ""; position: absolute; left: -9px; top: 7px; bottom: 7px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--signal);
}
.rail-item .ic { color: var(--encre-4); flex-shrink: 0; display: grid; place-items: center; }
.rail-item[aria-current="page"] .ic { color: var(--signal); }
.rail-item .compte {
  margin-left: auto; font-size: 10.5px; font-weight: 600;
  padding: 0 5px; border-radius: 5px; background: var(--fond-3); color: var(--encre-3);
}
.rail-pied { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bord); }
.rail-sante { padding: 8px 9px; font-size: 11px; color: var(--encre-4); }
.rail-sante .ligne { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.rail-sante .pt { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Centre */
/* Même raison que la barre : sans `min-width: 0`, une piste de grille ne rétrécit pas sous son
   contenu, et un seul tableau large suffirait à réélargir toute la page. */
.centre { grid-area: centre; overflow-y: auto; background: var(--fond-0); position: relative; min-width: 0; }
.centre-inner { padding: 22px 26px 120px; max-width: 1080px; }

/* Panneau droit (§20) */
.panneau {
  grid-area: panneau; width: var(--panneau);
  background: var(--fond-1); border-left: 1px solid var(--bord);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width var(--transition);
}
.os[data-panneau="ferme"] .panneau { border-left: none; }
.panneau-onglets { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--bord); flex-shrink: 0; }
.panneau-onglet {
  padding: 6px 11px; border-radius: 7px 7px 0 0; font-size: 12px; font-weight: 550;
  color: var(--encre-3); border-bottom: 2px solid transparent; transition: var(--transition);
}
.panneau-onglet:hover { color: var(--encre-1); }
.panneau-onglet[aria-selected="true"] { color: var(--encre-1); border-bottom-color: var(--signal); }
.panneau-corps { flex: 1; overflow-y: auto; padding: 14px; }

/* ── 4. TYPOGRAPHIE & BLOCS ──────────────────────────────────────────────── */

.entete { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.entete h1 { font-size: 21px; font-weight: 660; letter-spacing: -0.025em; }
.entete .sous { color: var(--encre-3); font-size: 12.5px; margin-top: 3px; max-width: 62ch; }
.entete-actions { margin-left: auto; display: flex; gap: 7px; flex-shrink: 0; }

h2.section { font-size: 12px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--encre-3); margin: 26px 0 11px; display: flex; align-items: center; gap: 9px; }
h2.section:first-of-type { margin-top: 0; }
h2.section .trait { flex: 1; height: 1px; background: var(--bord); }

.carte {
  background: var(--fond-1); border: 1px solid var(--bord);
  border-radius: var(--rayon-l); padding: 15px;
}
.carte.cliquable { cursor: pointer; transition: var(--transition); }
.carte.cliquable:hover { border-color: var(--bord-fort); background: var(--fond-2); transform: translateY(-1px); }

.grille { display: grid; gap: 11px; }
.grille.k2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille.k3 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.grille.k4 { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }

/* Chiffres */
.chiffre .etiquette { font-size: 10.5px; font-weight: 620; letter-spacing: 0.07em; text-transform: uppercase; color: var(--encre-4); display: flex; align-items: center; gap: 6px; }
.chiffre .valeur { font-size: 25px; font-weight: 660; letter-spacing: -0.03em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.chiffre .valeur.vide { color: var(--encre-4); font-size: 16px; font-weight: 500; }
.chiffre .delta { font-size: 11.5px; color: var(--encre-3); margin-top: 2px; }

/* ── 5. LE BADGE DE SOURCE — la pièce la plus importante de l'interface ───
   §16 : réel et démo ne se mélangent jamais sans distinction. Ce badge est
   partout, il vient du serveur, et son infobulle dit CE QUI MANQUE pour que la
   donnée devienne réelle. C'est la liste de travail de la suite, à l'écran. */

.src {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 680; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1.5px 5px; border-radius: 4px; white-space: nowrap;
  cursor: help; vertical-align: middle;
}
.src[data-s="reel"] { background: rgba(63, 201, 138, 0.13); color: var(--vert); }
.src[data-s="demo"] { background: rgba(232, 168, 56, 0.13); color: var(--jaune); }
.src[data-s="mixte"] { background: rgba(76, 155, 245, 0.13); color: var(--bleu); }
.src[data-s="indisponible"] { background: rgba(242, 85, 90, 0.13); color: var(--rouge); }

.panne {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 11px; border-radius: var(--rayon);
  background: rgba(242, 85, 90, 0.08); border: 1px solid rgba(242, 85, 90, 0.24);
  font-size: 12px; color: var(--encre-2); margin-bottom: 12px;
}
.panne b { color: var(--rouge); }

/* ── 6. LISTES ───────────────────────────────────────────────────────────── */

.liste { display: flex; flex-direction: column; border: 1px solid var(--bord); border-radius: var(--rayon-l); overflow: hidden; background: var(--fond-1); }
.ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--bord);
  text-align: left; width: 100%; transition: background var(--transition);
}
.ligne:last-child { border-bottom: none; }
.ligne:hover { background: var(--fond-2); }
.ligne .principal { flex: 1; min-width: 0; }
.ligne .titre { font-weight: 570; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne .meta { color: var(--encre-3); font-size: 11.5px; margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.ligne .meta span { display: inline-flex; align-items: center; gap: 4px; }
.ligne .droite { flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }

.jauge { font-size: 11px; font-weight: 620; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.jauge.urgent { background: rgba(242, 85, 90, 0.14); color: var(--rouge); }
.jauge.proche { background: rgba(232, 168, 56, 0.14); color: var(--jaune); }
.jauge.calme { background: var(--fond-3); color: var(--encre-3); }

/* ── L'ÉTIQUETTE DE PROVENANCE NE SE COUPE PLUS (23/09/2026, ordre Cheick) ──────────────────
   CE QU'ELLE PORTE : d'où vient le chiffre au-dessus d'elle — « paiements · created_at >= 2026-09-01
   · statut payé », « cartes_validation.cree_par=principal_rapport ». C'est la phrase qui rend un
   chiffre vérifiable ; la doctrine du dépôt en fait une obligation, pas un ornement.

   CE QUI SE PASSAIT, MESURÉ AU NAVIGATEUR À 390 px LE 23/09 : `white-space: nowrap` donnait à ces
   étiquettes 453, 474, 483, 557, 643 et 706 px de large dans un conteneur de 360. `body` étant en
   `overflow-x: hidden`, rien ne débordait à l'écran : le texte était simplement COUPÉ, sans barre
   de défilement, sans le moindre signe. Six écrans étaient touchés — Aujourd'hui, Ma journée,
   Clients & prospects, Sous-traitance, Planning, Cartes. On lisait « paiements · created_at >= 2026-0 »
   et la phrase s'arrêtait là. Un chiffre dont la provenance est coupée ne se vérifie plus.

   LE 11/09, LA MÊME PANNE AVAIT ÉTÉ RÉPARÉE SUR UN SEUL ÉCRAN (`.rm-sources .etiq`, Retrait manuel),
   en refusant de toucher à la feuille commune « pour ne pas casser les étiquettes courtes ». La mesure
   dit que ce refus a laissé le défaut dans six autres écrans, et il serait revenu au septième.
   Règle #10 : une décision ne se recopie pas, elle se pose une fois. Elle est posée ici.

   POURQUOI LES ÉTIQUETTES COURTES NE BOUGENT PAS : `white-space: normal` n'IMPOSE pas un retour à la
   ligne, il l'AUTORISE quand le texte ne tient pas. « 53 », « TEST », « run 0e5344b3 » tiennent : elles
   restent sur une ligne, au pixel près. `inline-block` garde le fond et l'arrondi entiers quand une
   longue étiquette s'enroule — en `inline`, le cadre se serait cassé en deux au passage à la ligne. */
.etiq { font-size: 10.5px; font-weight: 600; padding: 1.5px 6px; border-radius: 5px; background: var(--fond-3); color: var(--encre-3);
  display: inline-block; white-space: normal; overflow-wrap: anywhere; max-width: 100%; line-height: 1.35; text-align: left; }
.etiq.signal { background: var(--signal-doux); color: var(--signal); }

/* ── 7. INSIGHTS (§24) ───────────────────────────────────────────────────── */

.insight { display: flex; gap: 12px; padding: 13px 14px; border: 1px solid var(--bord); border-radius: var(--rayon-l); background: var(--fond-1); }
.insight .barre-niveau { width: 3px; border-radius: 3px; flex-shrink: 0; }
.insight[data-n="rouge"] .barre-niveau { background: var(--rouge); }
.insight[data-n="jaune"] .barre-niveau { background: var(--jaune); }
.insight[data-n="bleu"] .barre-niveau { background: var(--bleu); }
.insight .corps { flex: 1; min-width: 0; }
.insight .haut { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.insight .niveau { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.insight[data-n="rouge"] .niveau { color: var(--rouge); }
.insight[data-n="jaune"] .niveau { color: var(--jaune); }
.insight[data-n="bleu"] .niveau { color: var(--bleu); }
.insight h4 { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.insight p { font-size: 12px; color: var(--encre-2); line-height: 1.5; }
.insight .action { margin-top: 8px; font-size: 11.5px; color: var(--encre-3); display: flex; align-items: center; gap: 6px; }
.insight .action b { color: var(--encre-2); font-weight: 600; }

/* ── 8. AGENTS (§21) ─────────────────────────────────────────────────────── */

.agent-carte { display: flex; gap: 11px; padding: 12px 13px; border: 1px solid var(--bord); border-radius: var(--rayon-l); background: var(--fond-1); transition: var(--transition); cursor: pointer; }
.agent-carte:hover { border-color: var(--bord-fort); background: var(--fond-2); }
.agent-pt { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.agent-pt[data-e="disponible"] { background: var(--vert); }
.agent-pt[data-e="en_cours"] { background: var(--bleu); animation: pulse 1.8s ease-in-out infinite; }
.agent-pt[data-e="attente"] { background: var(--jaune); }
.agent-pt[data-e="erreur"] { background: var(--rouge); }
.agent-pt[data-e="desactive"] { background: var(--encre-4); }
.agent-pt[data-e="inconnu"] { background: transparent; border: 1.5px solid var(--encre-4); }
@keyframes pulse { 50% { opacity: 0.35; } }
.agent-carte .nom { font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.agent-carte .role { font-size: 11.5px; color: var(--encre-3); line-height: 1.45; margin-top: 2px; }
.agent-carte .pied { margin-top: 7px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.vsm-pastille { font-family: var(--mono); font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--fond-3); color: var(--encre-3); }

/* ── 9. VSM (§12) ────────────────────────────────────────────────────────── */

.vsm-niveau { border: 1px solid var(--bord); border-radius: var(--rayon-l); padding: 14px; background: var(--fond-1); }
.vsm-niveau .tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.vsm-niveau .code { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--signal); }
.vsm-niveau .nom { font-weight: 620; font-size: 13.5px; }
.vsm-niveau .compte { margin-left: auto; font-size: 11px; color: var(--encre-4); }
.vsm-niveau .question { font-size: 12px; color: var(--encre-2); font-style: italic; }
.vsm-niveau .detail { font-size: 11.5px; color: var(--encre-4); margin-top: 3px; }
.vsm-niveau .membres { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.vsm-lacune {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--rayon);
  background: rgba(232, 168, 56, 0.08); border: 1px solid rgba(232, 168, 56, 0.22);
  font-size: 11.5px; color: var(--encre-2);
}
.vsm-lacune b { color: var(--jaune); }

/* ── 10. CHAT (§8) ───────────────────────────────────────────────────────── */

.chat { display: flex; flex-direction: column; height: 100%; }
.chat-fil { flex: 1; overflow-y: auto; padding: 4px 2px 14px; display: flex; flex-direction: column; gap: 15px; }
.msg { display: flex; flex-direction: column; gap: 5px; animation: entrer 220ms cubic-bezier(0.2, 0, 0.1, 1); }
@keyframes entrer { from { opacity: 0; transform: translateY(6px); } }
.msg .qui { font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-4); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.msg.moi .bulle { background: var(--signal-doux); border: 1px solid var(--signal-bord); }
.msg .bulle { padding: 10px 12px; border-radius: var(--rayon-l); background: var(--fond-2); border: 1px solid var(--bord); font-size: 13px; line-height: 1.6; }
.msg .bulle strong { font-weight: 640; }
.msg .bulle em { color: var(--encre-3); }
.msg .bulle p { margin: 0 0 8px; }
.msg .bulle p:last-child { margin-bottom: 0; }
.msg .bulle code { font-family: var(--mono); font-size: 12px; background: var(--fond-3); padding: 1px 4px; border-radius: 4px; }

.propositions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.proposition {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 550;
  border: 1px solid var(--bord-fort); background: var(--fond-2); transition: var(--transition);
}
.proposition:hover { background: var(--fond-survol); border-color: var(--signal); }
.proposition[data-sensible="true"] { border-color: rgba(232, 168, 56, 0.4); color: var(--jaune); }
.proposition[data-sensible="true"]:hover { background: rgba(232, 168, 56, 0.1); }

.saisie { border-top: 1px solid var(--bord); padding: 11px; flex-shrink: 0; background: var(--fond-1); }
.saisie-boite {
  display: flex; align-items: flex-end; gap: 8px;
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-l);
  background: var(--fond-2); padding: 8px 9px; transition: var(--transition);
}
.saisie-boite:focus-within { border-color: var(--signal); background: var(--fond-1); }
.saisie textarea {
  flex: 1; background: none; border: none; outline: none; resize: none;
  font-size: 13px; line-height: 1.5; max-height: 140px; min-height: 20px;
}
.saisie textarea::placeholder { color: var(--encre-4); }
.envoyer {
  width: 27px; height: 27px; border-radius: 7px; flex-shrink: 0;
  background: var(--signal); color: #fff; display: grid; place-items: center;
  transition: var(--transition);
}
.envoyer:disabled { background: var(--fond-3); color: var(--encre-4); cursor: not-allowed; }
.saisie-contexte { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 11px; color: var(--encre-4); flex-wrap: wrap; }
.puce-contexte {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 6px; background: var(--signal-doux);
  color: var(--signal); font-weight: 570; font-size: 11px;
}
.puce-contexte button { color: inherit; opacity: 0.6; display: grid; place-items: center; }
.puce-contexte button:hover { opacity: 1; }

/* Barre de commande permanente en bas du centre (§7) */
.commande-flottante {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 26px 18px;
  background: linear-gradient(180deg, transparent, var(--fond-0) 42%);
  pointer-events: none;
}
.commande-flottante > * { pointer-events: auto; max-width: 1080px; }

/* ── 11. PALETTE ⌘K (§25) ────────────────────────────────────────────────── */

.voile { position: fixed; inset: 0; z-index: 150; background: rgba(4, 6, 10, 0.62); backdrop-filter: blur(3px); animation: fondu 130ms ease; }
@keyframes fondu { from { opacity: 0; } }
.palette {
  position: fixed; top: 13vh; left: 50%; transform: translateX(-50%); z-index: 151;
  width: min(600px, 92vw); max-height: 62vh;
  background: var(--fond-2); border: 1px solid var(--bord-fort);
  border-radius: 15px; box-shadow: var(--ombre); overflow: hidden;
  display: flex; flex-direction: column;
  animation: surgir 150ms cubic-bezier(0.2, 0, 0.1, 1);
}
.palette input { width: 100%; padding: 15px 17px; background: none; border: none; outline: none; font-size: 14.5px; border-bottom: 1px solid var(--bord); }
.palette-liste { overflow-y: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: 9px; text-align: left; }
.palette-item[data-actif="true"] { background: var(--signal-doux); }
.palette-item .ic { width: 26px; height: 26px; border-radius: 7px; background: var(--fond-3); display: grid; place-items: center; flex-shrink: 0; color: var(--encre-3); }
.palette-item .t { font-size: 13px; font-weight: 550; }
.palette-item .s { font-size: 11.5px; color: var(--encre-4); }
.palette-item .ou { margin-left: auto; font-size: 10.5px; color: var(--encre-4); }
.palette-groupe { font-size: 9.5px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--encre-4); padding: 10px 11px 4px; }
.palette-vide { padding: 30px; text-align: center; color: var(--encre-4); font-size: 12.5px; }

/* ── 12. ÉTATS ───────────────────────────────────────────────────────────── */

.squelette { background: linear-gradient(90deg, var(--fond-2) 25%, var(--fond-3) 50%, var(--fond-2) 75%); background-size: 200% 100%; animation: glisser 1.3s infinite; border-radius: var(--rayon); }
@keyframes glisser { to { background-position: -200% 0; } }
.sq-l { height: 12px; margin-bottom: 8px; }
.sq-carte { height: 82px; }

.vide { text-align: center; padding: 44px 20px; color: var(--encre-4); }
.vide .ic { margin-bottom: 11px; opacity: 0.45; display: flex; justify-content: center; }
.vide h3 { font-size: 13.5px; font-weight: 600; color: var(--encre-2); margin-bottom: 5px; }
.vide p { font-size: 12.5px; max-width: 44ch; margin: 0 auto; line-height: 1.6; }

.bouton {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 550;
  border: 1px solid var(--bord-fort); background: var(--fond-2); transition: var(--transition);
}
.bouton:hover { background: var(--fond-survol); border-color: var(--signal); }
.bouton.plein { background: var(--signal); border-color: var(--signal); color: #fff; }
.bouton.plein:hover { filter: brightness(1.1); }

/* Notifications */
.notifs { position: fixed; bottom: 18px; right: 18px; z-index: 180; display: flex; flex-direction: column; gap: 8px; }
.notif {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--rayon-l);
  background: var(--fond-2); border: 1px solid var(--bord-fort); box-shadow: var(--ombre);
  font-size: 12.5px; max-width: 330px;
  animation: surgir-droite 200ms cubic-bezier(0.2, 0, 0.1, 1);
}
@keyframes surgir-droite { from { opacity: 0; transform: translateX(14px); } }
.notif b { display: block; font-weight: 620; margin-bottom: 2px; }
.notif p { color: var(--encre-3); line-height: 1.45; }

/* ── 13. DÉTAIL D'UN ÉLÉMENT ─────────────────────────────────────────────── */

.detail-champ { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bord); font-size: 12.5px; }
.detail-champ:last-child { border-bottom: none; }
.detail-champ dt { width: 128px; flex-shrink: 0; color: var(--encre-4); font-weight: 550; }
.detail-champ dd { flex: 1; color: var(--encre-1); }
.manque { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 7px; background: rgba(232, 168, 56, 0.08); font-size: 12px; margin-bottom: 5px; }

/* ── 14. TRACE (§27) ─────────────────────────────────────────────────────── */

.trace { font-family: var(--mono); font-size: 11px; }
.trace-ligne { display: flex; gap: 9px; padding: 4px 0; border-bottom: 1px solid var(--bord); align-items: baseline; }
.trace-ligne:last-child { border-bottom: none; }
.trace-etage { width: 66px; flex-shrink: 0; font-weight: 650; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.trace-etage[data-e="user"] { color: var(--signal); }
.trace-etage[data-e="workspace"] { color: var(--bleu); }
.trace-etage[data-e="gateway"] { color: var(--jaune); }
.trace-etage[data-e="agent"] { color: var(--vert); }
.trace-etage[data-e="service"] { color: var(--encre-3); }
.trace-etage[data-e="result"] { color: var(--encre-2); }
.trace-corps { flex: 1; color: var(--encre-3); word-break: break-word; }

/* ── 15. ADAPTATIF ───────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .os { grid-template-columns: var(--rail) 1fr; grid-template-areas: "barre barre" "rail centre"; }
  .panneau { position: fixed; right: 0; top: var(--barre); bottom: 0; z-index: 40; box-shadow: var(--ombre); }
  .os[data-panneau="ferme"] .panneau { display: none; }
}
@media (max-width: 820px) {
  :root { --rail: 0px; }
  .os { grid-template-columns: 1fr; grid-template-areas: "barre" "centre"; }
  .rail { position: fixed; left: 0; top: var(--barre); bottom: 0; width: 232px; z-index: 45; transform: translateX(-100%); transition: transform var(--transition); }
  .os[data-rail="ouvert"] .rail { transform: none; box-shadow: var(--ombre); }
  .panneau { width: min(380px, 100vw); }
  .centre-inner { padding: 16px 15px 120px; }
  .commande-flottante { padding: 12px 15px 16px; }
  /* ═══ L'EN-TÊTE NE COMPRIME PLUS SON TEXTE QUAND UN BOUTON ARRIVE APRÈS COUP ═══════════════════
     Ordre Cheick du 22/09/2026 : « les pages bougent, il faut qu'elles soient fixes ».
     MESURÉ sur #canaux à 390 px : le bouton « Conversion : N cartes à trancher » est injecté dans
     `.entete-actions` quand sa lecture revient (une seconde plus tard). `.entete` étant un `flex` sur
     une seule ligne, l'arrivée de ce bouton — qui ne rétrécit pas (`flex-shrink: 0`) — écrase le bloc
     de gauche : le sous-titre passait de 4 lignes à 16, soit **+207 px** (58 px → 233 px), et TOUT ce
     qui était dessous descendait d'autant. Décalage cumulé relevé : 0,141.
     À l'étroit, les actions passent donc à la ligne au lieu de comprimer le texte. La largeur du bloc
     de gauche ne dépend plus de ce qui arrive à droite, donc plus rien ne bouge après coup.
     Vaut pour TOUS les en-têtes, pas seulement Canaux : c'est la même règle partout. */
  .entete { flex-wrap: wrap; }
  .entete > :first-child { flex: 1 1 100%; min-width: 0; }
  .entete-actions { margin-left: 0; flex-wrap: wrap; }
  .recherche-declencheur { max-width: none; }
  /* PAS DE RESSERREMENT ICI : il existe déjà, et ailleurs. index.html le pose sous 900 px
     (`.barre { gap: 8px; padding: 0 10px }`, `.barre-droite { gap: 4px }`), avec sa mesure du
     08/09/2026 : la barre réclamait alors 419 px pour 390, on lui en a rendu 29 en prenant sur
     les espacements. Écrire les mêmes propriétés ici en ferait un doublon — et un doublon PERDANT,
     puisque le <style> d'index.html vient après cette feuille et gagne la cascade. On aurait deux
     valeurs pour un seul réglage, dont une qui ne s'applique jamais. Le resserrement reste donc à
     un seul endroit ; ici on ne corrige que ce qui manquait vraiment : le `min-width: 0`. */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── 16. FIL D'ARIANE — le contexte, visible en permanence ───────────────
   Marque › Client › Projet › Document. C'est le Context Engine rendu à l'écran :
   ce que l'IA sait de ta position, tu le vois au même endroit qu'elle. */
.fil { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; flex-shrink: 1; }
.fil-item { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 550; color: var(--encre-2); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; transition: var(--transition); }
.fil-item:hover { background: var(--fond-3); color: var(--encre-1); }
.fil .fil-item:last-child { color: var(--encre-1); background: var(--signal-doux); }
@media (max-width: 820px) { .fil { display: none; } #btn-rail { display: grid !important; } }

/* Téléphone : la recherche devient une icône, la barre du haut ne déborde plus. */
@media (max-width: 820px) {
  .recherche-declencheur { flex: 0 0 auto; width: 34px; height: 30px; padding: 0; justify-content: center; margin: 0; }
  .recherche-declencheur span:not(.ic) { display: none; }
  .logo .nom { display: none; }
}

/* ── 17. FINITION (ordre Cheick 05/09 : « garde cette première version, ajoute la touche ») ── */

/* Titres et chiffres en Manrope : c'est ce qui donne le caractère, le reste reste discret. */
.entete h1, .connexion h1, .logo .nom, .chiffre .valeur, .vsm-niveau .code, .palette .t { font-family: var(--police-titre); }
.entete h1 { font-weight: 800; letter-spacing: -0.03em; }
.chiffre .valeur { font-weight: 800; letter-spacing: -0.035em; }

/* Halo de marque : à peine visible, en haut à droite du centre. Dit « c'est BrilloNova » sans logo. */
.centre { background: radial-gradient(900px 480px at 88% -12%, var(--signal-doux), transparent 62%), var(--fond-0); }

/* Cartes : un fil de lumière en haut, comme un verre posé. Invisible en clair. */
.carte, .insight, .agent-carte, .liste, .msg .bulle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); }
:root[data-theme="clair"] .carte, :root[data-theme="clair"] .insight, :root[data-theme="clair"] .agent-carte, :root[data-theme="clair"] .liste, :root[data-theme="clair"] .msg .bulle { box-shadow: 0 1px 2px rgba(15, 20, 30, 0.04); }

/* Titres de section : un point de signal devant. */
h2.section::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--signal); flex-shrink: 0; }

/* Le rail : un glissement d'un pixel au survol, l'actif garde sa barre. */
.rail-item:hover { transform: translateX(1px); }
.rail-item:active { transform: scale(0.985); }

/* Boutons : le plein porte l'ombre de la marque ; tous répondent à l'appui. */
.bouton.plein { box-shadow: 0 4px 14px var(--signal-doux); }
.bouton:active, .proposition:active, .envoyer:active { transform: scale(0.97); }
.envoyer { box-shadow: 0 3px 10px var(--signal-doux); }

/* Connexion : la pastille rayonne. */
.connexion .pastille { box-shadow: 0 10px 28px var(--signal-bord); }

/* Changement d'écran : le contenu arrive, il n'apparaît pas. */
@keyframes vue-entre { from { opacity: 0; transform: translateY(5px); } }
.centre-inner.entre { animation: vue-entre 220ms cubic-bezier(0.2, 0, 0.1, 1); }

/* Avatars : l'initiale du prospect, teintée par son segment. Le même segment a toujours la même couleur. */
.avatar { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--police-titre); font-weight: 800; font-size: 12px; color: hsl(var(--t) 70% 78%); background: hsl(var(--t) 55% 22% / 0.9); border: 1px solid hsl(var(--t) 50% 35% / 0.6); }
:root[data-theme="clair"] .avatar { color: hsl(var(--t) 55% 30%); background: hsl(var(--t) 70% 92%); border-color: hsl(var(--t) 55% 80%); }
.avatar.marche { border-radius: 50%; }

/* L'IA écrit : trois points, pas des « … » figés. */
.frappe { display: inline-flex; gap: 4px; align-items: center; height: 18px; padding: 0 2px; }
.frappe i { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); opacity: 0.35; animation: frappe 1.1s ease-in-out infinite; }
.frappe i:nth-child(2) { animation-delay: 0.18s; } .frappe i:nth-child(3) { animation-delay: 0.36s; }
@keyframes frappe { 40% { opacity: 1; transform: translateY(-2px); } }

/* Les bulles de l'IA portent le signal sur leur tranche gauche. */
.msg:not(.moi) .bulle { border-left: 2px solid var(--signal-bord); }

/* Les onglets du panneau : un filet dégradé sous la ligne. */
.panneau-onglets { background: linear-gradient(180deg, transparent, var(--fond-2)); }

/* Jauges : un liseré, pour tenir sur tous les fonds. */
.jauge.urgent { border: 1px solid rgba(242, 85, 90, 0.3); }
.jauge.proche { border: 1px solid rgba(232, 168, 56, 0.3); }

/* ── 18. LE CÔTÉ IA, FAÇON CLAUDE.AI (ordre Cheick 06/09) — tout est ADDITIF ─────────────── */

/* L'espace IA plein écran : deux dispositions. A « Claude.ai » = conversations | fil | artefact.
   B « Atelier » = fil | artefact, conversations en tiroir. */
.ia { display: grid; height: calc(100vh - var(--barre) - 44px); gap: 0; }
.ia[data-dispo="A"] { grid-template-columns: 236px minmax(0, 1fr) minmax(320px, 42%); }
.ia[data-dispo="B"] { grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); }
.ia-col { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--bord); }
.ia-col:last-child { border-right: none; }
.ia-fil { display: flex; flex-direction: column; min-height: 0; }
.ia-fil .chat-fil { padding: 6px 14px 14px; }
.ia-tete { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--bord); font-size: 12px; color: var(--encre-3); flex-shrink: 0; }
.ia-tete b { color: var(--encre-1); font-weight: 620; }
.ia-tete .etiq { margin-left: 2px; }
.ia-dispo { display: inline-flex; border: 1px solid var(--bord); border-radius: 7px; overflow: hidden; }
.ia-dispo button { padding: 3px 9px; font-size: 11px; font-weight: 600; color: var(--encre-3); }
.ia-dispo button[aria-pressed="true"] { background: var(--signal-doux); color: var(--signal); }
@media (max-width: 1180px) { .ia[data-dispo="A"] { grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); } .ia[data-dispo="A"] .ia-convs { display: none; } }
@media (max-width: 820px) { .ia[data-dispo="A"], .ia[data-dispo="B"] { grid-template-columns: 1fr; } .ia .ia-artefact { display: none; } .ia[data-artefact="ouvert"] .ia-artefact { display: flex; position: fixed; inset: var(--barre) 0 0 0; z-index: 60; background: var(--fond-1); } }

/* Conversations */
.convs { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.convs-tete { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-4); }
.convs-tete .bouton { padding: 3px 8px; font-size: 11px; }
.convs-liste { flex: 1; overflow-y: auto; padding: 0 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.conv { text-align: left; padding: 8px 9px; border-radius: 8px; transition: var(--transition); }
.conv:hover { background: var(--fond-3); }
.conv[aria-current="true"] { background: var(--signal-doux); }
.conv .t { font-size: 12.5px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .s { font-size: 11px; color: var(--encre-4); margin-top: 1px; }
.convs-vide { padding: 14px 10px; font-size: 12px; color: var(--encre-4); line-height: 1.5; }
.convs-pied { padding: 8px 10px; font-size: 11px; color: var(--encre-4); display: flex; gap: 6px; align-items: center; }
.tiroir-convs { position: absolute; left: 0; top: 40px; bottom: 0; width: 260px; z-index: 20; background: var(--fond-1); border-right: 1px solid var(--bord); box-shadow: var(--ombre); animation: surgir 140ms; }

/* Artefact */
.ia-artefact { background: var(--fond-1); }
.artefact-tete { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--bord); font-size: 12.5px; flex-shrink: 0; }
.artefact-corps { flex: 1; overflow-y: auto; padding: 18px 20px; }
.artefact-corps .entete h1 { font-size: 17px; }
.artefact-editeur { flex: 1; min-height: 0; resize: none; border: none; outline: none; background: var(--fond-0); padding: 18px 20px; font-family: var(--police); font-size: 13.5px; line-height: 1.65; color: var(--encre-1); }
.artefact-pied { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--bord); flex-shrink: 0; }
.artefact-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 30px; color: var(--encre-4); gap: 8px; }
.artefact-vide h3 { font-size: 13.5px; color: var(--encre-2); }
.artefact-vide p { font-size: 12.5px; max-width: 34ch; line-height: 1.55; }
.artefact-vide .ic { opacity: 0.5; }
.artefact-lien { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 1px solid var(--signal-bord); border-radius: var(--rayon); background: var(--signal-doux); text-align: left; font-size: 12.5px; transition: var(--transition); }
.artefact-lien:hover { border-color: var(--signal); }
.artefact-lien b { font-weight: 620; }
.artefact-lien span { color: var(--encre-3); font-size: 11.5px; flex: 1; }

/* Cartes branchées sous une réponse */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.carte-ia { text-align: left; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-1); transition: var(--transition); display: flex; flex-direction: column; gap: 3px; }
button.carte-ia { cursor: pointer; }
button.carte-ia:hover { border-color: var(--signal-bord); background: var(--fond-2); transform: translateY(-1px); }
.ci-tete { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--encre-4); }
.ci-tete .jauge { margin-left: auto; }
.ci-titre { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ci-meta { font-size: 11.5px; color: var(--encre-3); }
.ci-meta .ci-signal { color: var(--signal); font-weight: 600; }
.ci-action { font-size: 11.5px; color: var(--encre-2); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.ci-manque { font-size: 11px; color: var(--jaune); display: flex; align-items: center; gap: 5px; }
.ci-chiffres { display: flex; gap: 14px; margin-top: 4px; }
.ci-chiffres small { display: block; font-size: 10px; color: var(--encre-4); text-transform: uppercase; letter-spacing: 0.06em; }
.ci-chiffres b { font-family: var(--police-titre); font-size: 15px; font-weight: 800; }

/* Sources + actions sous un message */
.msg-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.sources { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: var(--encre-4); }
.sources-lib { font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; font-size: 9.5px; }
.source-item { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; background: var(--fond-3); font-family: var(--mono); font-size: 10px; }
.source-item .pt { width: 5px; height: 5px; border-radius: 50%; background: var(--rouge); }
.source-item .pt[data-ok="true"] { background: var(--vert); }
.msg-action { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--encre-4); padding: 2px 6px; border-radius: 5px; transition: var(--transition); }
.msg-action:hover { background: var(--fond-3); color: var(--encre-1); }
.envoyer.stop { background: var(--rouge); box-shadow: none; }

/* @ : le menu ancré à la boîte */
.saisie { position: relative; }
.mention-menu { position: absolute; left: 11px; right: 11px; bottom: calc(100% - 4px); z-index: 30; max-height: 240px; overflow-y: auto; padding: 5px; background: var(--fond-2); border: 1px solid var(--bord-fort); border-radius: var(--rayon-l); box-shadow: var(--ombre); animation: surgir 120ms; }
.mention-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border-radius: 8px; text-align: left; font-size: 12.5px; }
.mention-item[data-actif="true"], .mention-item:hover { background: var(--signal-doux); }
.mention-item .ic { color: var(--encre-4); }
.mention-item .t { font-weight: 560; }
.mention-item .s { color: var(--encre-4); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-vide { padding: 8px 10px; font-size: 12px; color: var(--encre-4); }

/* Suggestions au-dessus de la saisie */
.saisie-sugg { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.saisie-sugg .proposition { font-size: 11.5px; padding: 4px 9px; color: var(--encre-2); }

/* ── 19. L'IA QUI AGIT, CLAUDE CODE, PARAMÈTRES, LIVE (ordre Cheick 06/09) — tout est ADDITIF ─── */

/* Les étapes d'outil sous une réponse : la trace de ce qui a été FAIT. */
.etapes { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-1); font-size: 12px; margin-bottom: 6px; }
.etapes summary { cursor: pointer; padding: 6px 10px; display: flex; align-items: center; gap: 6px; color: var(--encre-3); font-weight: 560; list-style: none; }
.etapes summary::-webkit-details-marker { display: none; }
.etapes[open] summary { border-bottom: 1px solid var(--bord); }
.etape { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto; gap: 0 8px; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--bord); }
.etape:last-child { border-bottom: none; }
.etape-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--encre-4); }
.etape[data-e="ok"] .etape-pt { background: var(--vert); }
.etape[data-e="attente"] .etape-pt { background: var(--jaune); box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.2); }
.etape[data-e="erreur"] .etape-pt { background: var(--rouge); }
.etape[data-e="debut"] .etape-pt { background: var(--signal); animation: frappe 1.1s ease-in-out infinite; }
.etape-nom { font-family: var(--mono); font-size: 11.5px; color: var(--encre-1); }
.etape-entree { color: var(--encre-4); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etape-droite { font-size: 11px; color: var(--encre-4); font-family: var(--mono); }
.etape-resume { grid-column: 2 / -1; font-family: var(--mono); font-size: 10.5px; color: var(--encre-3); white-space: pre-wrap; word-break: break-word; margin-top: 2px; max-height: 60px; overflow: hidden; }

/* Les cartes d'action (✅/❌) et de permission : là où Cheick décide. */
.carte-action { border: 1px solid var(--signal-bord); border-radius: var(--rayon-l); background: var(--fond-1); padding: 10px 12px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 22px var(--signal-doux); }
.carte-action[data-etat="executee"], .carte-action[data-etat="approuvee"], .carte-action[data-etat="accordee"] { border-color: rgba(52, 199, 123, 0.4); box-shadow: none; }
.carte-action[data-etat="refusee"], .carte-action[data-etat="error"] { border-color: var(--bord); box-shadow: none; opacity: 0.8; }
.carte-action[data-genre="permission"] { border-color: rgba(232, 168, 56, 0.45); box-shadow: 0 6px 22px rgba(232, 168, 56, 0.1); }
.ca-tete { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--encre-4); flex-wrap: wrap; }
.ca-titre { font-size: 13px; font-weight: 620; }
.ca-detail { font-size: 12px; color: var(--encre-3); line-height: 1.5; }
.ca-mail { font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.ca-mail b { color: var(--encre-4); font-weight: 600; margin-right: 4px; }
.ca-code { font-family: var(--mono); font-size: 11px; line-height: 1.5; background: var(--fond-0); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 8px 10px; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; margin: 2px 0; }
.ca-boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ca-boutons .bouton { padding: 6px 12px; font-size: 12px; }
.ca-note { font-size: 11px; color: var(--encre-4); }
.msg-usage { font-family: var(--mono); font-size: 10px; color: var(--encre-4); }

/* Artefact : diff et sortie de commande. */
.artefact-code { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 14px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.6; background: var(--fond-0); color: var(--encre-2); }
.artefact-code .l { display: block; padding: 0 6px; border-radius: 3px; }
.artefact-code .l[data-k="plus"] { background: rgba(52, 199, 123, 0.12); color: var(--vert); }
.artefact-code .l[data-k="moins"] { background: rgba(242, 85, 90, 0.12); color: var(--rouge); }
.artefact-code .l[data-k="cmd"] { color: var(--signal); font-weight: 600; }

/* Paramètres, façon Claude.ai : une navigation à gauche, des blocs à droite. */
.param { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; }
.param-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; align-self: start; }
.param-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--encre-2); text-align: left; transition: var(--transition); }
.param-item:hover { background: var(--fond-3); }
.param-item[aria-current="page"] { background: var(--signal-doux); color: var(--signal); font-weight: 600; }
.param-titre { margin-bottom: 14px; }
.param-titre h1 { font-family: var(--police-titre); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.param-titre p { font-size: 12.5px; color: var(--encre-3); margin-top: 3px; }
.param-bloc { border: 1px solid var(--bord); border-radius: var(--rayon-l); background: var(--fond-1); padding: 12px 14px; margin-bottom: 12px; }
.param-sous { font-size: 10.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-4); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.param-ligne { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--bord); font-size: 13px; align-items: center; }
.param-ligne:first-child, .param-sous + .param-ligne { border-top: none; }
.param-ligne .l { color: var(--encre-3); font-weight: 560; }
.param-ligne .l small { display: block; font-weight: 400; font-size: 11px; color: var(--encre-4); margin-top: 1px; }
.param-ligne code { font-family: var(--mono); font-size: 12px; }
.param-note { font-size: 12px; color: var(--encre-3); line-height: 1.55; margin-bottom: 10px; }
.param-actions { display: flex; gap: 8px; }
.param-jauge { height: 6px; border-radius: 3px; background: var(--fond-3); overflow: hidden; margin-top: 10px; }
.param-jauge div { height: 100%; background: linear-gradient(90deg, var(--signal), var(--jaune)); }
.cap-niv { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--encre-3); }
.cap-niv i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.cap-niv[data-n="confirm-tg"] i { background: var(--jaune); }
.cap-niv[data-n="cheick-only"] i { background: var(--rouge); }
.cap-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.cap { display: flex; gap: 9px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-0); align-items: flex-start; }
.cap .cap-niv { margin-top: 4px; }
.cap-nom { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.cap-nom code { font-family: var(--mono); font-weight: 600; }
.cap-desc { font-size: 11.5px; color: var(--encre-3); line-height: 1.45; margin-top: 2px; }
.cap-agents { font-size: 10.5px; color: var(--encre-4); margin-top: 3px; }
.cn-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.cn { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-0); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cn[data-absent] { opacity: 0.75; border-style: dashed; }
.cn-tete { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cn-tete b { flex: 1; font-weight: 620; }
.cn-role { font-size: 11.5px; color: var(--encre-3); }
.cn-note { font-size: 11.5px; color: var(--encre-4); }
.cn-note[data-e="degrade"] { color: var(--jaune); } .cn-note[data-e="mort"] { color: var(--rouge); }
.cn-teste { font-size: 10.5px; color: var(--encre-4); }
.etiq.rouge { color: var(--rouge); border-color: rgba(242, 85, 90, 0.35); }
.auth-ligne { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--bord); }
.auth-ligne:first-of-type { border-top: none; }
.auth-corps { flex: 1; min-width: 0; }
.auth-titre { font-size: 13px; font-weight: 600; }
.auth-desc { font-size: 11.5px; color: var(--encre-3); margin-top: 2px; line-height: 1.45; }
.bascule { display: inline-flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.bascule button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: var(--encre-3); transition: var(--transition); }
.bascule button[aria-pressed="true"] { background: var(--signal-doux); color: var(--signal); }
.bascule button[data-mode="auto"][aria-pressed="true"], .bascule button[data-mode="accepter_modifs"][aria-pressed="true"] { background: rgba(232, 168, 56, 0.16); color: var(--jaune); }
.auth-niveaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.auth-niv { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 9px 11px; background: var(--fond-0); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.auth-niv > span:last-of-type { color: var(--encre-4); }
.auth-niv-liste { width: 100%; font-family: var(--mono); font-size: 10px; color: var(--encre-4); line-height: 1.6; margin-top: 4px; }

/* Live : l'en-tête et le cadre. */
.live { display: flex; flex-direction: column; height: calc(100vh - var(--barre) - 44px); gap: 8px; }
.live-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-weight: 650; font-size: 11px; border: 1px solid var(--bord-fort); }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 3px rgba(52, 199, 123, 0.2); animation: frappe 1.6s ease-in-out infinite; }
.live-badge[data-etat="vieux"] { color: var(--jaune); } .live-badge[data-etat="vieux"] i { background: var(--jaune); animation: none; }
.live-badge[data-etat="ko"] { color: var(--rouge); } .live-badge[data-etat="ko"] i { background: var(--rouge); animation: none; }
.live-compte { color: var(--encre-3); } .live-compte b { color: var(--encre-1); font-family: var(--police-titre); }
.live-compte[data-k="rouge"] b { color: var(--rouge); }
.live-alertes { display: flex; gap: 6px; flex-wrap: wrap; }
.live-alerte { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 9px; border-radius: 6px; background: rgba(232, 168, 56, 0.12); color: var(--jaune); border: 1px solid rgba(232, 168, 56, 0.3); }
.live-alerte[data-n="ko"], .live-alerte[data-n="critique"] { background: rgba(242, 85, 90, 0.12); color: var(--rouge); border-color: rgba(242, 85, 90, 0.3); }
.live-cadre { flex: 1; min-height: 0; border: 1px solid var(--bord); border-radius: var(--rayon-l); overflow: hidden; background: #0c0d10; }
.live-cadre iframe { width: 100%; height: 100%; border: none; display: block; }
.live-pied { font-size: 11px; color: var(--encre-4); }

/* Téléphone */
@media (max-width: 820px) {
  .param { grid-template-columns: 1fr; gap: 10px; }
  .param-nav { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; }
  .param-item { white-space: nowrap; padding: 6px 9px; font-size: 12px; }
  .param-ligne { grid-template-columns: 1fr; gap: 3px; }
  .etape { grid-template-columns: 10px auto minmax(0, 1fr); } .etape-droite { display: none; }
  .live { height: calc(100vh - var(--barre) - 30px); }
  .ia[data-canal="code"] .ia-convs { display: none; }
}
/* Téléphone : le menu passe AU-DESSUS d'un artefact ouvert en plein écran — on doit toujours pouvoir changer d'espace. */
@media (max-width: 820px) { .rail { z-index: 70; } }

/* ── 20. CANAUX DU JOUR, PARITÉ CLAUDE CODE, USAGE DE L'ABONNEMENT (ordre Cheick 07/09) — tout est ADDITIF ─── */

/* La pastille d'usage dans la barre : « 5 h 34 % · sem. 12 % », comme dans Claude.ai. */
.pastille-usage { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 3px 9px; border: 1px solid var(--bord); border-radius: 999px; background: var(--fond-2); font-size: 11px; color: var(--encre-2); transition: var(--transition); height: 26px; }
.pastille-usage:hover { border-color: var(--signal-bord); color: var(--encre-1); }
.pu-bloc { display: inline-flex; align-items: center; gap: 5px; }
.pu-lib { color: var(--encre-4); font-weight: 600; letter-spacing: 0.02em; }
.pu-val { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.pu-jauge, .cb-jauge { display: inline-block; width: 34px; height: 5px; border-radius: 3px; background: var(--fond-3); overflow: hidden; vertical-align: middle; }
.pu-jauge i, .cb-jauge i { display: block; height: 100%; background: var(--signal); border-radius: 3px; }
[data-n="jaune"] .pu-jauge i, .cb-jauge[data-n="jaune"] i { background: var(--jaune); }
[data-n="rouge"] .pu-jauge i, .cb-jauge[data-n="rouge"] i { background: var(--rouge); }
[data-n="rouge"] .pu-val { color: var(--rouge); }
@media (max-width: 640px) { .pastille-usage .pu-lib, .pastille-usage .pu-jauge { display: none; } .pastille-usage { padding: 3px 7px; gap: 5px; } }

/* La barre d'outils de Claude Code (modèle, permissions, réflexion, effort, Stop, /compact, /clear…). */
.code-barre { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--bord); background: var(--fond-1); flex-wrap: wrap; flex-shrink: 0; }
.cb-champ { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--encre-4); }
.cb-champ span { font-weight: 600; letter-spacing: 0.02em; }
.cb-champ select { font: inherit; font-size: 11.5px; font-weight: 560; color: var(--encre-1); background: var(--fond-2); border: 1px solid var(--bord); border-radius: 6px; padding: 3px 6px; cursor: pointer; }
.cb-champ select:hover { border-color: var(--signal-bord); }
.cb-btn { padding: 3px 8px; font-size: 11px; }
.cb-btn:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 820px) { .code-barre { gap: 5px; padding: 6px 10px; } .cb-champ span { display: none; } .cb-btn { padding: 3px 7px; } }

/* La barre d'état (statusline) sous le fil. */
.code-etat { display: flex; align-items: center; gap: 12px; padding: 5px 12px; border-top: 1px solid var(--bord); background: var(--fond-1); font-size: 11px; color: var(--encre-3); flex-wrap: wrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cb-etat-bloc { display: inline-flex; align-items: center; gap: 5px; }
.cb-etat-bloc small { color: var(--encre-4); font-weight: 600; letter-spacing: 0.02em; }
.cb-etat-bloc b { font-weight: 620; color: var(--encre-1); }
.cb-etat-bloc i { color: var(--encre-4); font-style: normal; }
.cb-etat-bloc .cb-jauge { width: 40px; }
@media (max-width: 640px) { .code-etat { gap: 8px; } .cb-etat-bloc small { display: none; } }

/* Réflexion (thinking), tâches, marqueurs, alertes de la CLI, dans le fil. */
.pensee { border: 1px dashed var(--bord); border-radius: var(--rayon); background: transparent; font-size: 12px; margin-bottom: 6px; }
.pensee summary { cursor: pointer; padding: 5px 10px; display: flex; align-items: center; gap: 6px; color: var(--encre-4); font-weight: 560; list-style: none; }
.pensee summary::-webkit-details-marker { display: none; }
.pensee summary small { font-weight: 500; }
.pensee-corps { padding: 4px 12px 10px; color: var(--encre-3); font-style: italic; line-height: 1.55; white-space: pre-wrap; max-height: 220px; overflow: auto; }
.taches { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-1); font-size: 12px; margin-bottom: 6px; padding: 6px 10px; }
.taches-tete { display: flex; align-items: center; gap: 6px; color: var(--encre-3); font-weight: 560; margin-bottom: 4px; }
.taches-tete small { color: var(--encre-4); }
.tache { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; color: var(--encre-2); }
.tache[data-s="completed"] { color: var(--encre-4); text-decoration: line-through; }
.tache[data-s="in_progress"] { color: var(--encre-1); font-weight: 560; }
.tache-case { font-family: var(--mono); width: 14px; }
.tache[data-s="in_progress"] .tache-case { color: var(--signal); }
.msg-marqueur { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--encre-4); padding: 6px 0; margin: 4px 0; border-top: 1px dashed var(--bord); }
.alerte-cli { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 6px 10px; border-radius: var(--rayon); background: rgba(232, 168, 56, 0.1); color: var(--jaune); margin-bottom: 6px; }
.alerte-cli[data-genre="api_error"], .alerte-cli[data-genre="permission_denied"] { background: rgba(242, 85, 90, 0.1); color: var(--rouge); }
.etape[data-prof="1"] .etape-nom, .etape[data-prof="2"] .etape-nom { color: var(--encre-3); }
.etape[data-prof="1"], .etape[data-prof="2"] { background: var(--fond-0); }

/* Le menu « / » ancré à la saisie. */
.menu-slash { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); max-height: 300px; overflow-y: auto; border: 1px solid var(--bord); border-radius: var(--rayon-l); background: var(--fond-1); box-shadow: var(--ombre); z-index: 30; padding: 4px; }
.menu-slash-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; font-size: 12px; }
.menu-slash-item[aria-selected="true"], .menu-slash-item:hover { background: var(--signal-doux); }
.menu-slash-item code { font-size: 11.5px; color: var(--encre-1); }
.ms-arg { color: var(--encre-4); font-family: var(--mono); font-size: 10.5px; }
.ms-desc { color: var(--encre-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Les sessions en tiroir sur téléphone. */
@media (max-width: 1180px) { .ia[data-canal="code"] #code-sessions-tiroir { display: inline-flex !important; } .ia[data-canal="code"] .ia-convs.tiroir-ouvert { display: flex; position: fixed; inset: var(--barre) 0 0 0; z-index: 65; background: var(--fond-1); } }

/* Instructions. */
.instr-editeur { width: 100%; resize: vertical; min-height: 160px; font: inherit; font-size: 13px; line-height: 1.6; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-0); color: var(--encre-1); }
.instr-editeur:focus { outline: none; border-color: var(--signal-bord); }
.instr-lecture { max-height: 420px; overflow: auto; margin: 6px 8px 8px; padding: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; background: var(--fond-0); border-radius: 6px; color: var(--encre-2); }
.instr-liste { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; font-size: 11.5px; line-height: 1.5; }
.instr-liste code { font-size: 11px; }
.usage-jauge { padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-0); }
.usage-jauge-tete { display: flex; justify-content: space-between; font-size: 12.5px; }
.usage-jauge-tete span { font-family: var(--mono); font-weight: 600; }
.usage-jauge small { display: block; margin-top: 5px; font-size: 11px; color: var(--encre-4); }
.param-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* L'espace Canaux du jour. */
.canal-section { border: 1px solid var(--bord); border-radius: var(--rayon-l); background: var(--fond-1); padding: 12px 14px; margin-bottom: 14px; }
.canal-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; color: var(--signal); }
.canal-tete h2 { font-family: var(--police-titre); font-size: 15px; font-weight: 700; color: var(--encre-1); letter-spacing: -0.01em; }
.canal-compteur { font-family: var(--police-titre); font-size: 15px; color: var(--encre-3); }
.canal-compteur b { font-size: 20px; color: var(--encre-1); }
.canal-jauge { margin: 0 0 10px; }
.canal-cumul { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--encre-3); margin-bottom: 8px; }
.canal-cumul b { color: var(--encre-1); }
.canal-k { text-align: left; cursor: pointer; transition: var(--transition); }
.canal-k:hover { border-color: var(--signal-bord); }
.appels { display: flex; flex-direction: column; gap: 4px; }
.appel { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-0); overflow: hidden; }
.appel[data-fait="true"] { opacity: 0.72; }
.appel[data-ouvert="true"] { border-color: var(--signal-bord); }
.appel-tete { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 0; }
.appel-ouvrir { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 9px 12px; text-align: left; }
.appel-prio { width: 8px; height: 8px; border-radius: 50%; background: var(--encre-4); flex-shrink: 0; }
.appel-prio[data-p="chaud"] { background: var(--rouge); box-shadow: 0 0 0 3px rgba(242, 85, 90, 0.18); }
.appel-prio[data-p="rappel"] { background: var(--jaune); }
.appel-prio[data-p="nouveau"] { background: var(--signal); }
.appel-corps { flex: 1; min-width: 0; }
.appel-nom { font-weight: 600; font-size: 13px; }
.appel-nom small { color: var(--encre-4); font-weight: 500; }
.appel-meta { font-size: 11.5px; color: var(--encre-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appel-tel { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11.5px; color: var(--signal); white-space: nowrap; padding: 6px 8px; border: 1px solid var(--signal-bord); border-radius: 7px; flex-shrink: 0; }
.appel-fiche { padding: 4px 12px 12px 30px; border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 8px; }
.fiche-bloc b { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-4); margin-top: 6px; }
.fiche-bloc p, .fiche-bloc li { font-size: 12.5px; color: var(--encre-2); line-height: 1.5; }
.fiche-bloc ul { padding-left: 16px; }
.appel-resultats { display: flex; gap: 6px; flex-wrap: wrap; }
.appel-resultats .bouton { padding: 5px 10px; font-size: 12px; }
.appel-note { font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--bord); border-radius: 7px; background: var(--fond-1); color: var(--encre-1); width: 100%; }
@media (max-width: 640px) { .appel-tel span { display: none; } .appel-fiche { padding-left: 12px; } .appel-meta { white-space: normal; } }
.souscanaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.souscanal { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-0); padding: 10px 12px; }
.souscanal[data-mode="auto"] { border-color: var(--signal-bord); }
.souscanal-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.souscanal-chiffres { display: flex; gap: 14px; font-size: 12px; color: var(--encre-3); margin: 8px 0; }
.souscanal-chiffres b { color: var(--encre-1); font-size: 14px; }
.lot { border: 1px solid var(--signal-bord); border-radius: var(--rayon); background: var(--fond-1); padding: 8px 10px; margin-top: 6px; }
.lot[data-approuve="true"] { border-color: rgba(52, 199, 123, 0.4); }
.lot-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.lot-tete small { color: var(--encre-4); }
.lot-apercu { margin-top: 6px; font-size: 11.5px; color: var(--encre-3); line-height: 1.5; }
.lot-apercu span { font-family: var(--mono); color: var(--encre-2); }
.entrants { display: flex; flex-direction: column; gap: 6px; }
.entrant { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-0); padding: 9px 12px; }
.entrant-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.entrant-tete small { color: var(--encre-4); margin-left: auto; }
.entrant-objet { font-size: 12.5px; color: var(--encre-2); margin-top: 2px; }
.entrant-intention { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--signal); margin-top: 4px; }
.etiq.rouge { background: rgba(242, 85, 90, 0.13); color: var(--rouge); }

/* ── 17. LA CLOCHE DE LA BARRE (02/10/2026, notifications) ───────────────
   Le nombre de ce qui t'attend (cartes à trancher + questions des agents), le même que la pastille de l'icône
   sur l'iPhone. Un tap ouvre Cartes. Posée par js/notifications.js (brancherCloche) ; vide quand il n'y a rien. */
#btn-cloche { position: relative; }
#btn-cloche .cloche-n {
  position: absolute; top: -4px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--rouge); color: #fff; font: 700 9.5px/16px var(--mono); text-align: center; pointer-events: none;
}
/* À 390 px, la barre était pleine (373 px de contenu). La cloche y ajoute 34 px : mesuré 407 pour 390, « Se déconnecter » sortait
   de l'écran (bord droit à 397). Sous 430 px, la bascule de thème cède sa place à la cloche : elle reste dans Paramètres › Apparence,
   rien n'est perdu, et la barre retombe à 373 px. Au-delà de 430 px, les deux sont là. */
/* 03/10/2026 : CETTE RÈGLE CACHAIT LE BOUTON D'APPARENCE SUR L'IPHONE DE CHEICK.
   « t'as enlevé l'icône pour le changement d'apparence » — je ne l'avais pas enlevée, elle était
   masquée sous 430 px depuis le début. Il s'en sert, donc elle reste. La barre tient : vérifié au
   banc d'essai à 393 px de large, aucun débordement. */
@media (max-width: 430px) { #btn-theme { display: inline-grid; } }

/* 02/10/2026 — le fil de messages avec un agent (page Agent › Lui parler) */
.fil-boite { padding: 12px 14px; }
.fil-liste { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.fil-texte { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.45; }
.fil-manque { margin-top: 6px; font-size: 12.5px; color: var(--encre-3); }
.fil-label { display: block; font-weight: 640; margin-top: 12px; font-size: 13px; }
.fil-zone { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid var(--bord, rgba(26, 26, 46, 0.18)); font: inherit; background: var(--fond-2, #fff); margin-top: 4px; min-height: 72px; }
.fil-bouton { width: 100%; justify-content: center; margin-top: 8px; min-height: 44px; }
.fil-etat { margin-top: 6px; font-size: 12.5px; }

/* 02/10/2026 — « Ta journée, dans l'ordre » : la première chose qu'on voit en ouvrant Aujourd'hui. */
.et-bloc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.et-ligne { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; min-height: 64px;
  border-radius: var(--rayon-l, 14px); border: 1px solid var(--bord, rgba(26,26,46,.12)); background: var(--fond-2, #fff); color: inherit; font: inherit; cursor: pointer; }
.et-ligne:hover { border-color: var(--signal-bord, rgba(0,0,0,.25)); }
.et-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px;
  border-radius: 999px; background: var(--fond-3, rgba(0,0,0,.05)); color: var(--encre-3); font-weight: 700; font-size: 15px; }
.et-n.et-plein { background: var(--signal-doux, rgba(0,180,216,.18)); color: var(--encre, #111); }
.et-n.et-gris { opacity: .5; }
.et-corps { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.et-titre { font-weight: 650; font-size: 15px; }
.et-quoi { font-size: 12.5px; color: var(--encre-3); line-height: 1.4; }
.et-bloque { margin: 0 0 16px; font-size: 13px; }
.et-bloque summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; }
.et-bloque ul { margin: 6px 0 0 18px; padding: 0; }
.et-bloque li { margin: 4px 0; line-height: 1.45; }
.et-qui { color: var(--encre-3); font-size: 12px; }

/* 02/10/2026 — « Faire refaire par l'agent » depuis une carte (document, lien, personnalisation). */
.ca-corriger summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.ca-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ca-chip { font-size: 12px; padding: 6px 10px; min-height: 36px; }
.ca-zone { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid var(--bord, rgba(26,26,46,.18)); font: inherit; background: var(--fond-2, #fff); min-height: 70px; }
.ca-envoyer { width: 100%; justify-content: center; margin-top: 8px; min-height: 44px; }
.ca-etat { margin-top: 6px; font-size: 12.5px; }