/* Identité 2026 (contrat de code du 2026-10-11, § 8.2 à 8.4).
   Variables : collections Figma « Couleurs » (sept modes), « Mesures » et « Teintes agents » du fichier
   « Synex — Identité 2026 ». Les valeurs des palettes sont recopiées de verre_b.md. Aucune couleur, taille ni
   rayon n'est écrit hors de ces blocs. Les thèmes sont posés par data-theme sur <html>, et aussi sur les aperçus
   de la vue Paramètres (sélecteurs non limités à :root). */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("polices/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("polices/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mesures (collection « Mesures ») et teintes d'agents (collection « Teintes agents »), communes aux sept palettes. */
:root {
  --rayon-plateau: 28px; --rayon-case: 18px; --rayon-controle: 10px; --rayon-rond: 50%;
  --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px; --espace-5: 24px; --espace-6: 32px; --espace-7: 48px;
  /* Six tailles : titre de vue, titre de case, nom (14 moyen), texte, aide, repère en capitales. Lecture : 15 sur 24. */
  --t-titre-vue: 24px; --t-titre-case: 15px; --t-nom: 14px; --t-texte: 14px; --t-aide: 12px; --t-repere: 11px;
  --i-titre-vue: 30px; --i-titre-case: 20px; --i-lecture: 24px; --i-texte: 20px; --i-aide: 16px; --i-repere: 14px;
  --g-normal: 400; --g-moyen: 600; --g-gras: 700;
  --flou-verre: 36px; --flou-case: 16px;
  --largeur-fil: 800px; --largeur-activite: 420px; --controle-h: 40px; --cible-min: 24px; --ligne-h: 56px;
  --colonne: calc(var(--largeur-fil) - 2 * var(--espace-5));
  /* Verre B : reflets, liserés et ombres, les mêmes dans les sept palettes. */
  --verre-reflet: linear-gradient(180deg, #FFFFFF33 0%, #FFFFFF08 100%);
  --verre-lisere: linear-gradient(180deg, #FFFFFFBF 0%, #FFFFFF1F 100%);
  --case-reflet: linear-gradient(180deg, #FFFFFF24 0%, #FFFFFF0A 100%);
  --ombre-verre: 0 24px 60px #0000004D;
  --ombre-case: 0 6px 18px #00000024;
  --dialogue-voile: #00000080;
  /* Un contrôle posé sur le verre nu (bascule de lecture, « Tous les agents », « + », pastille de l'employé) : fumée dense,
     pour que son remplissage se détache à 3:1 du verre, même devant la scène claire du midi. */
  --bg-controle-verre: color-mix(in srgb, var(--verre-fumee) 94%, transparent);
  /* Teintes d'agents : corps (identité), pastille et sigle (badge du sigle, 4,6:1 au moins). */
  --agent-a: #2A9D8F; --agent-a-pastille: #007E71; --agent-a-sigle: #FBF7F2;
  --agent-b: #E8674A; --agent-b-pastille: #E8674A; --agent-b-sigle: #18212A;
  --agent-c: #7FA88E; --agent-c-pastille: #7FA88E; --agent-c-sigle: #18212A;
  --agent-d: #4F6D8A; --agent-d-pastille: #4F6D8A; --agent-d-sigle: #FBF7F2;
  --agent-e: #E2A93B; --agent-e-pastille: #E2A93B; --agent-e-sigle: #18212A;
  --agent-f: #9C6B98; --agent-f-pastille: #91618D; --agent-f-sigle: #FBF7F2;
  --agent-g: #B5523B; --agent-g-pastille: #B5523B; --agent-g-sigle: #FBF7F2;
  --agent-h: #6FA8C9; --agent-h-pastille: #6FA8C9; --agent-h-sigle: #18212A;
  --agent-i: #9AA05A; --agent-i-pastille: #9AA05A; --agent-i-sigle: #18212A;
  --agent-j: #D98A9E; --agent-j-pastille: #D98A9E; --agent-j-sigle: #18212A;
}

/* P1 Brume rosée · matin — colorhunt.co/palette/838383ad9d9dd9adadfccbcb.
   Mesuré (verre_b.md, pire fond de case #5C5959) : principal 6,71 ; secondaire 4,76 ; indicatif 4,63 ; accent 4,98 ; contrôle 3,11. */
:root, [data-theme="p1"] {
  --bg-app: #F2DFDF; --bg-surface: #161616B2; --bg-hover: #161616CC; --glass-bg: #16161638; --verre-fumee: #161616; --scene-voile: #16161640;
  --text-primary: #FFFAFA; --text-secondary: #D9D5D5; --text-muted: #D6D2D2;
  --accent: #FFCFCF; --texte-sur-accent: #161616; --accent-doux: #453B3BEB; --accent-survol: #FFDCDC;
  --border-controle: #B0ADAD; --border-subtle: #FFFFFF29; --glass-edge: #FFFFFF99;
  --etat-reussi: #A3E5B0; --etat-reussi-fond: #1F41278C; --etat-attention: #FFCE8F; --etat-attention-fond: #4C32118C; --etat-echec: #FFCABF; --etat-echec-fond: #532B278C;
  --halo-1: #D9ADAD; --halo-2: #AD9D9D;
  --scene: url("scenes/scene-matin.jpg"); --scene-sombre: #838383; --scene-claire: #FCCBCB; --scene-voile-hors: #16161640;
}
/* P2 Nuit marine · nuit — colorhunt.co/palette/0f3040464858a56f63d99b7f.
   Mesuré (pire fond de case #534A48) : principal 7,06 ; secondaire 4,76 ; indicatif 4,61 ; accent 4,99 ; contrôle 3,15. */
[data-theme="p2"] {
  --bg-app: #001B2A; --bg-surface: #0218269E; --bg-hover: #021826B8; --glass-bg: #02182638; --verre-fumee: #021826; --scene-voile: #0218261F;
  --text-primary: #FFE4D2; --text-secondary: #CEBEB4; --text-muted: #C7BCB4;
  --accent: #F7B79A; --texte-sur-accent: #021826; --accent-doux: #33383DEB; --accent-survol: #FFC4A7;
  --border-controle: #A09C98; --border-subtle: #FFFFFF29; --glass-edge: #FFFFFF99;
  --etat-reussi: #A1E4AE; --etat-reussi-fond: #1F41278C; --etat-attention: #FCC687; --etat-attention-fond: #4C32118C; --etat-echec: #FFB8AE; --etat-echec-fond: #532B278C;
  --halo-1: #464858; --halo-2: #A56F63;
  --scene: url("scenes/scene-nuit.jpg"); --scene-sombre: #0F3040; --scene-claire: #D99B7F; --scene-voile-hors: #0218268C;
}
/* P3 Crépuscule · soir — colorhunt.co/palette/f8b2b2af719d8b639b403d88.
   Mesuré (pire fond de case #685B67) : principal 6,03 ; secondaire 4,76 ; indicatif 4,63 ; accent 4,98 ; contrôle 3,10. */
[data-theme="p3"] {
  --bg-app: #EFBCBB; --bg-surface: #1313289E; --bg-hover: #131328B8; --glass-bg: #13132838; --verre-fumee: #131328; --scene-voile: #13132840;
  --text-primary: #FEF7F7; --text-secondary: #E2DDE2; --text-muted: #DFDAE1;
  --accent: #DDE2FF; --texte-sur-accent: #131328; --accent-doux: #3B3D53EB; --accent-survol: #EAEFFF;
  --border-controle: #B7B3BD; --border-subtle: #FFFFFF29; --glass-edge: #FFFFFF99;
  --etat-reussi: #ACEFB9; --etat-reussi-fond: #1F41278C; --etat-attention: #FFD99B; --etat-attention-fond: #4C32118C; --etat-echec: #FFD6CB; --etat-echec-fond: #532B278C;
  --halo-1: #F8B2B2; --halo-2: #AF719D;
  --scene: url("scenes/scene-soir.jpg"); --scene-sombre: #403D88; --scene-claire: #F8B2B2; --scene-voile-hors: #13132840;
}
/* P4 Pêche et prune · soir — colorhunt.co/palette/5749649f8383c8aaaaffdab3.
   Mesuré (pire fond de case #67555B) : principal 6,74 ; secondaire 4,78 ; indicatif 4,61 ; accent 5,26 ; contrôle 3,12. */
[data-theme="p4"] {
  --bg-app: #F2D1AE; --bg-surface: #1B11249E; --bg-hover: #1B1124B8; --glass-bg: #1B112438; --verre-fumee: #1B1124; --scene-voile: #1B112440;
  --text-primary: #FFFBF7; --text-secondary: #DAD5D7; --text-muted: #D7D1D5;
  --accent: #FFDAB3; --texte-sur-accent: #1B1124; --accent-doux: #493941EB; --accent-survol: #FFE7C0;
  --border-controle: #B2ACB2; --border-subtle: #FFFFFF29; --glass-edge: #FFFFFF99;
  --etat-reussi: #A3E5B0; --etat-reussi-fond: #1F41278C; --etat-attention: #FFCE8F; --etat-attention-fond: #4C32118C; --etat-echec: #FFCABF; --etat-echec-fond: #532B278C;
  --halo-1: #C8AAAA; --halo-2: #9F8383;
  --scene: url("scenes/scene-soir.jpg"); --scene-sombre: #574964; --scene-claire: #FFDAB3; --scene-voile-hors: #1B112440;
}
/* P5 Nuit de braise · nuit — colorhunt.co/palette/09122c872341be3144e17564.
   Mesuré (pire fond de case #4F4352) : principal 7,03 ; secondaire 4,84 ; indicatif 4,59 ; accent 5,00 ; contrôle 3,10.
   Écart à verre_b.md, sur mesure dans le navigateur : texte/secondaire #CFB5B3 → #D3BAB8 (en-tête du tableau d'utilisation,
   4,43:1 sur #524A53 ; 4,67:1 après). */
[data-theme="p5"] {
  --bg-app: #09122C; --bg-surface: #0E15289E; --bg-hover: #0E1528B8; --glass-bg: #0E152838; --verre-fumee: #0E1528; --scene-voile: #0E15281F;
  --text-primary: #FFD7CF; --text-secondary: #D3BAB8; --text-muted: #CAB0B1;
  --accent: #FFA6AA; --texte-sur-accent: #0E1528; --accent-doux: #3E3242EB; --accent-survol: #FFB2B6;
  --border-controle: #A49095; --border-subtle: #FFFFFF29; --glass-edge: #FFFFFF99;
  --etat-reussi: #A1E4AE; --etat-reussi-fond: #1F41278C; --etat-attention: #FCC687; --etat-attention-fond: #4C32118C; --etat-echec: #FFB8AE; --etat-echec-fond: #532B278C;
  --halo-1: #872341; --halo-2: #BE3144;
  --scene: url("scenes/scene-nuit.jpg"); --scene-sombre: #09122C; --scene-claire: #E17564; --scene-voile-hors: #0E15288C;
}
/* P6 Lin · midi — colorhunt.co/palette/f9f8f6efe9e3d9cfc7c9b59c.
   Mesure initiale avant retouche du secondaire (pire fond de case #61574A) : principal 7,00 ; secondaire 4,78 ; indicatif 4,61 ; accent 4,95 ; contrôle 3,13. */
[data-theme="p6"] {
  --bg-app: #F4F3F1; --bg-surface: #211301B2; --bg-hover: #211301CC; --glass-bg: #21130138; --verre-fumee: #211301; --scene-voile: #21130140;
  --text-primary: #FEFEFE; --text-secondary: #DEDBD7; --text-muted: #D5D0CA;
  --accent: #EAD5BC; --texte-sur-accent: #211301; --accent-doux: #493A26EB; --accent-survol: #F7E2C8;
  --border-controle: #B2ACA3; --border-subtle: #FFFFFF29; --glass-edge: #FFFFFF99;
  --etat-reussi: #A1E4AE; --etat-reussi-fond: #1F41278C; --etat-attention: #FFCB8D; --etat-attention-fond: #4C32118C; --etat-echec: #FFC7BD; --etat-echec-fond: #532B278C;
  --halo-1: #C9B59C; --halo-2: #D9CFC7;
  --scene: url("scenes/scene-midi.jpg"); --scene-sombre: #C9B59C; --scene-claire: #F9F8F6; --scene-voile-hors: #21130140;
}
/* P7 Poudre et graphite · midi — colorhunt.co/palette/fff5f5f7d6d0e2b4bd4a4a4a.
   Mesure initiale avant retouche du secondaire (pire fond de case #5B5959) : principal 6,92 ; secondaire 4,80 ; indicatif 4,62 ; accent 4,97 ; contrôle 3,11. */
[data-theme="p7"] {
  --bg-app: #FBF1F1; --bg-surface: #161616B2; --bg-hover: #161616CC; --glass-bg: #16161638; --verre-fumee: #161616; --scene-voile: #16161640;
  --text-primary: #FFFEFE; --text-secondary: #DAD9D9; --text-muted: #D3D2D2;
  --accent: #FDCED7; --texte-sur-accent: #161616; --accent-doux: #443B3DEB; --accent-survol: #FFDBE4;
  --border-controle: #AEADAD; --border-subtle: #FFFFFF29; --glass-edge: #FFFFFF99;
  --etat-reussi: #A3E5B0; --etat-reussi-fond: #1F41278C; --etat-attention: #FFCE8F; --etat-attention-fond: #4C32118C; --etat-echec: #FFCABF; --etat-echec-fond: #532B278C;
  --halo-1: #E2B4BD; --halo-2: #F7D6D0;
  --scene: url("scenes/scene-midi.jpg"); --scene-sombre: #4A4A4A; --scene-claire: #FFF5F5; --scene-voile-hors: #16161640;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg-app); color: var(--text-primary);
  font: var(--g-normal) var(--t-texte)/var(--i-texte) "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
ul { list-style: none; }
svg { display: block; }
h1 { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); font-weight: var(--g-gras); }
h2, h3, h4 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); font-weight: var(--g-gras); }
[hidden] { display: none !important; }

/* ===== Scène (niveau 1) : l'image du moment, la même en duotone de la palette à 40 %, puis le voile. ===== */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg-app); pointer-events: none; }
.scene > * { position: absolute; inset: 0; }
.scene__image, .scene__duotone { background: var(--scene) center / cover no-repeat; }
.scene__duotone { filter: url("#duotone"); opacity: .4; }
.scene__voile { background: var(--scene-voile); }
#scene-personnage { display: none; inset: auto; }
#filtres { position: absolute; width: 0; height: 0; }
/* Fondu de 3 s au changement de moment : l'ancienne scène s'efface au-dessus de la nouvelle, les couleurs glissent. */
.scene--sortante { z-index: 1; opacity: 1; transition: opacity 3s ease; }
.scene--sortante.est-partie { opacity: 0; }
html.fondu *, html.fondu *::before, html.fondu *::after { transition: background-color 3s ease, color 3s ease, border-color 3s ease !important; }
/* Pages hors application : comptes.js pose body[data-etat] ; l'application est masquée, le voile s'épaissit. */
#hors-application { position: relative; z-index: 2; }
body[data-etat="hors-application"] :is(.app, .annuaire, .dialogue__voile--application) { display: none; }
body[data-etat="hors-application"] .scene__voile { background: var(--scene-voile-hors); }
body:not([data-etat="hors-application"]) #hors-application { display: none; }

/* ===== Verre (niveau 2) : plateau, rails, panneau d'activité. Rien de lisible sur le verre nu. ===== */
.plateau, .rail, .annuaire, .dialogue {
  position: relative; border-radius: var(--rayon-plateau);
  background: var(--verre-reflet), var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--flou-verre)); backdrop-filter: blur(var(--flou-verre));
  box-shadow: var(--ombre-verre);
}
:is(.plateau, .rail, .annuaire, .dialogue)::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: var(--verre-lisere);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
}

/* ===== Case (niveau 3) : tout texte vit dans une case. Le flou de la case n'est posé que hors d'un verre :
   dans un plateau (racine d'arrière-plan), il ne changerait aucun pixel. ===== */
.case {
  background: var(--case-reflet), var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--rayon-case); box-shadow: var(--ombre-case); padding: var(--espace-4) var(--espace-5);
}
#hors-application .case { -webkit-backdrop-filter: blur(var(--flou-case)); backdrop-filter: blur(var(--flou-case)); }

/* ===== Composants de base (noms figés, contrat § 8.3) ===== */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  min-height: var(--controle-h); padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-controle);
  font-size: var(--t-nom); line-height: var(--i-texte); font-weight: var(--g-moyen); text-align: center;
  background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-primary);
}
.bouton:hover { background: var(--bg-hover); }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: default; }
.bouton--plein { background: var(--accent); border-color: var(--accent); color: var(--texte-sur-accent); }
.bouton--plein:hover { background: var(--accent-survol); border-color: var(--accent-survol); }
.bouton--secondaire { background: var(--bg-surface); }
.bouton--destructif { border-color: var(--etat-echec); color: var(--etat-echec); }
.bouton--destructif[data-arme] { background: var(--etat-echec-fond); font-weight: var(--g-gras); }

.champ { display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; font-size: var(--t-aide); line-height: var(--i-aide); color: var(--text-secondary); }
.champ :is(input, select, textarea) {
  width: 100%; min-width: 0; min-height: var(--controle-h); padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-controle);
  font-size: var(--t-texte); line-height: var(--i-texte); color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border-controle);
}
.champ :is(input, select, textarea)::placeholder { color: var(--text-muted); }
.champ :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--etat-echec); }
.champ__aide { color: var(--text-secondary); }
.champ__erreur { color: var(--etat-echec); }
.champ__erreur::before { content: "× "; }

.bandeau {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-2) var(--espace-3); padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-case); border: 1px solid var(--border-subtle); background: var(--bg-hover); color: var(--text-primary);
}
.bandeau > :first-child { flex: 1 1 200px; min-width: 0; }
.pastille {
  display: inline-flex; align-items: center; gap: var(--espace-1); flex: none; max-width: 100%; min-height: var(--cible-min); padding: 0 var(--espace-3);
  border-radius: var(--rayon-case); border: 1px solid var(--border-controle); background: var(--bg-surface);
  font-size: var(--t-aide); line-height: var(--i-aide); font-weight: var(--g-moyen); color: var(--text-primary); white-space: nowrap;
}
.bandeau--reussi, .pastille--reussi { background: var(--etat-reussi-fond); border-color: transparent; color: var(--etat-reussi); }
.bandeau--attention, .pastille--attention { background: var(--etat-attention-fond); border-color: transparent; color: var(--etat-attention); }
.bandeau--echec, .pastille--echec { background: var(--etat-echec-fond); border-color: transparent; color: var(--etat-echec); }
.pastille--reussi::before, .bandeau--reussi > :first-child::before { content: "✓ "; }
.pastille--attention::before, .bandeau--attention > :first-child::before { content: "! "; }
.pastille--echec::before, .bandeau--echec > :first-child::before { content: "× "; }
.pastille--neutre::before { content: "• "; }

.onglets { display: flex; gap: var(--espace-5); border-bottom: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; }
.onglet {
  display: flex; align-items: center; gap: var(--espace-2); padding: var(--espace-2) 2px var(--espace-3); margin-bottom: -1px; white-space: nowrap;
  font-size: var(--t-nom); font-weight: var(--g-normal); color: var(--text-secondary); border-bottom: 2px solid transparent;
}
.onglet:hover { color: var(--text-primary); }
.onglet[aria-selected="true"] { color: var(--text-primary); font-weight: var(--g-moyen); border-bottom-color: var(--accent); }
.onglet:focus-visible { outline-offset: -2px; border-radius: var(--rayon-controle); }

.bascule { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--rayon-controle); background: var(--bg-surface); border: 1px solid var(--border-controle); }
.bascule button { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: var(--espace-6); padding: 0 var(--espace-3); border-radius: var(--rayon-controle); font-size: var(--t-nom); color: var(--text-primary); }
.bascule button[aria-pressed="true"] { background: var(--accent-doux); font-weight: var(--g-moyen); }
.bascule button:hover:not([aria-pressed="true"]) { background: var(--bg-hover); }

.ligne { display: flex; align-items: center; gap: var(--espace-3); min-height: var(--ligne-h); padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-controle); min-width: 0; }
.ligne + .ligne { border-top: 1px solid var(--border-subtle); }
.ligne[aria-current="true"], .ligne[aria-pressed="true"] { background: var(--accent-doux); }
.paire { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: var(--espace-1) var(--espace-3); padding: var(--espace-2) 0; }
.paire > :first-child { font-size: var(--t-aide); line-height: var(--i-texte); color: var(--text-secondary); }
.paire + .paire { border-top: 1px solid var(--border-subtle); }

.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-texte); font-variant-numeric: tabular-nums; }
.tableau :is(th, td) { padding: var(--espace-2) var(--espace-3); text-align: right; border-bottom: 1px solid var(--border-subtle); }
.tableau :is(th, td):first-child { text-align: left; }
.tableau thead th { font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); }

.decision { display: flex; flex-direction: column; gap: var(--espace-3); border: 1.5px solid var(--accent); }
.decision .bouton { width: 100%; }
.dialogue__voile { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: var(--espace-4); background: var(--dialogue-voile); }
.dialogue { width: min(520px, 100%); max-height: 100%; overflow-y: auto; padding: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-4); }
.lien-delivre { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-2) var(--espace-3); }
.lien-delivre > :first-child { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-aide); }

.repere { font-size: var(--t-repere); line-height: var(--i-repere); font-weight: var(--g-gras); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { position: relative; height: 100vh; overflow: hidden; display: flex; }

.logo {
  width: 28px; height: 28px; border-radius: var(--rayon-controle);
  display: grid; place-items: center;
  background: var(--accent); color: var(--texte-sur-accent); font-weight: var(--g-moyen); font-size: var(--t-texte);
}
.nav { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.rail-item {
  width: 40px; height: 40px; border-radius: var(--rayon-controle);
  display: grid; place-items: center; color: var(--text-secondary);
  transition: background .15s, color .15s;
}
.rail-item:hover { color: var(--text-primary); }
.rail-item[aria-current="page"] { background: var(--bg-hover); color: var(--text-primary); }

/* Noms lisibles sans attendre l'infobulle native du navigateur. */
.rail--left .rail-item[data-section] { position: relative; }
.rail-nom { display: none; }
.rail--left .rail-item[aria-current="page"] { margin-bottom: 40px; }
.rail--left [aria-current="page"] .rail-nom {
  display: block; position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  width: 54px; font-size: var(--t-repere); line-height: 1.15; text-align: center; overflow-wrap: anywhere; color: var(--text-primary);
  padding: 6px; border-radius: var(--rayon-controle); background: var(--bg-controle-verre);
}
.rail-infobulle {
  display: block; position: fixed; transform: translateY(-50%);
  z-index: 100; padding: 6px 10px; border-radius: var(--rayon-controle); border: 1px solid var(--border-controle);
  background: var(--bg-controle-verre); color: var(--text-primary); box-shadow: var(--ombre-case);
  font-size: var(--t-aide); white-space: nowrap; pointer-events: none;
}
#menu-mobile .rail-nom, #menu-mobile .rail-infobulle { display: none; }
#menu-mobile .rail-item[aria-current="page"] { margin-bottom: 0; }

/* Agents */
.agents { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.agent {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid transparent; opacity: .45; transition: opacity .15s;
}
.agent:hover { opacity: .8; }
.agent.is-present { opacity: 1; border-color: color-mix(in srgb, var(--tint) 55%, transparent); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint) 16%, transparent);
  color: var(--tint); font-weight: var(--g-moyen); font-size: var(--t-texte); line-height: 1;
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--t-aide); }

/* Chat */
.chat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
@media (max-width: 880px) { .chat { padding: 0 72px; } }
.chat__title {
  width: 100%; padding: 20px 0 8px; text-align: center;
  font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary);
}
.thread {
  flex: 1; width: 100%; max-width: calc(var(--colonne) + 32px);
  padding: 40px 16px 24px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 32px;
  scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent;
}
.thread > :first-child { margin-top: auto; }

.msg--user { display: flex; justify-content: flex-end; }
.msg--user p {
  max-width: 85%; padding: 10px 16px; border-radius: var(--rayon-case); background: var(--bg-surface);
}
.msg--agent { display: flex; gap: 14px; }
.msg--agent .name { font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); margin-bottom: 6px; line-height: 20px; }
.typing { font-size: var(--t-aide); color: var(--text-secondary); opacity: .7; margin-top: -16px; }

/* Composer */
.composer {
  width: calc(100% - 32px); max-width: var(--colonne); min-height: 52px; margin: 0 16px 28px;
  display: flex; align-items: flex-end; gap: 12px; padding: 7px 8px 7px 16px;
  background: var(--bg-surface); border: 1px solid var(--border-controle); border-radius: var(--rayon-case);
}
.composer input, .composer textarea { flex: 1; min-width: 0; outline: none; }
.composer textarea { resize: none; padding: 6px 0; line-height: 24px; overflow-y: hidden; align-self: stretch; }
.composer input::placeholder, .composer textarea::placeholder { color: var(--text-secondary); }
.composer .icon-btn { height: 36px; }
#saisie-fil { flex: none; min-width: 0; width: 100%; max-width: calc(var(--colonne) + 32px); }
#saisie-fil:has(.secrets-fil:not([hidden])) .composer { margin-bottom: 8px; }
.secrets-fil { margin: 0 16px 20px; padding: 12px 16px; border: 1px solid var(--border-controle); border-radius: var(--rayon-case); background: var(--bg-surface); font-size: var(--t-texte); overflow-wrap: anywhere; max-height: 35vh; overflow-y: auto; }
.secrets-fil p { margin: 0 0 8px; }
.secrets-fil__etat { color: var(--etat-attention); font-weight: var(--g-moyen); }
.secrets-fil__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.secrets-fil .btn { height: auto; min-height: 36px; white-space: normal; text-align: left; }
.secrets-fil :is(.btn, .lien) { font-size: var(--t-texte); }
.icon-btn { color: var(--text-secondary); display: grid; place-items: center; }
.icon-btn:hover { color: var(--text-primary); }
.send {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--accent); color: var(--texte-sur-accent);
}

/* Voix : bascule des mémos vocaux au-dessus de la saisie, mémo sous chaque réponse, dictée dans la saisie. */
.memo {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 4px 12px 4px 4px; border-radius: var(--rayon-case); background: var(--bg-hover);
}
.memo__bouton {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--accent); color: var(--texte-sur-accent);
}
.memo__onde { display: flex; align-items: center; gap: 2px; height: 22px; }
.memo__onde i { width: 3px; border-radius: var(--rayon-controle); background: var(--text-secondary); opacity: .45; transition: background .15s, opacity .15s; }
.memo__onde i.lu { background: var(--accent); opacity: 1; }
.memo__duree { min-width: 4.5em; font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.memo--charge .memo__onde i { animation: voix-pulse 1s ease-in-out infinite alternate; }
.memo--charge .memo__onde i:nth-child(odd) { animation-delay: .3s; }

.composer--dictee > :not(.dictee) { display: none; }
.dictee { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.dictee[hidden] { display: none; }
.dictee__point { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); animation: voix-pulse 1.2s ease-in-out infinite alternate; }
.dictee__temps { font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dictee__niveau { display: flex; align-items: center; gap: 2px; height: 24px; flex: none; }
.dictee__niveau i { width: 3px; height: 3px; border-radius: var(--rayon-controle); background: var(--accent); transition: height .1s; }
.dictee__etat { flex: 1; min-width: 0; font-size: var(--t-aide); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer--transcription .dictee__point, .composer--transcription .dictee__niveau { opacity: .35; animation: none; }
.dictee .send:disabled { opacity: .35; cursor: default; }
@keyframes voix-pulse { from { opacity: 1; } to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .memo--charge .memo__onde i, .dictee__point { animation: none; }
}

@media (max-width: 640px) {
  .chat { padding: 0 52px 0 56px; }
  .rail { padding: 6px 4px; gap: 6px; border-radius: var(--rayon-case); }
  .rail--left { left: 6px; }
  .rail--right { right: 6px; }
  .rail-item, .agent { width: 36px; height: 36px; }
  .avatar { width: 28px; height: 28px; font-size: var(--t-aide); }
  .dictee__etat { display: none; }
  .dictee__niveau { flex: 1; overflow: hidden; }
}

/* Vues : le chat ou les paramètres occupent la colonne centrale. */
.settings { display: none; }
.chat[data-view="settings"] > :not(.settings) { display: none; }
.chat[data-view="settings"] .settings { display: block; }

.settings {
  width: 100%; max-width: calc(var(--colonne) + 32px);
  padding: 72px 16px 40px; overflow-y: auto;
}
.settings h1 { font-size: var(--t-titre-vue); line-height: 28px; font-weight: var(--g-moyen); }
.settings h2 { font-size: var(--t-titre-case); font-weight: var(--g-moyen); }
.settings .hint { font-size: var(--t-aide); line-height: 20px; color: var(--text-secondary); margin: 4px 0 16px; }

.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.palette {
  display: flex; flex-direction: column; justify-content: flex-start; text-align: left; border-radius: var(--rayon-case); padding: 8px 8px 12px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  transition: transform .15s, box-shadow .15s;
}
.palette:hover { transform: translateY(-2px); }
.palette[aria-checked="true"] { box-shadow: 0 0 0 2px var(--accent); }

.palette__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 4px 0; }
.palette__name { font-size: var(--t-texte); font-weight: var(--g-moyen); }
.palette__desc { display: block; font-size: var(--t-aide); line-height: 18px; color: var(--text-secondary); margin: 2px 4px 0; }
.swatches { display: flex; background: none; }
.preview, .swatches { color: initial; }
.swatches i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--bg-surface); margin-left: -4px; }
.swatches i:nth-child(1) { background: var(--bg-hover); }
.swatches i:nth-child(2) { background: var(--bubble, var(--bg-hover)); }
.swatches i:nth-child(3) { background: var(--text-secondary); }
.swatches i:nth-child(4) { background: var(--accent); }

/* Paramètres — section Modèles (fournisseurs, clés, modèle par défaut, utilisation) */
.modeles { margin-top: 0; }
.modeles h3 { font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); margin: 28px 0 10px; text-transform: none; }
.muted { color: var(--text-secondary); font-size: var(--t-aide); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-aide); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  height: 32px; padding: 0 12px; border-radius: var(--rayon-controle); font-size: var(--t-texte); font-weight: var(--g-moyen);
  background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-primary);
}
.btn:hover { background: var(--bg-hover); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn--primaire { background: var(--accent); border-color: var(--accent); color: var(--texte-sur-accent); }
.btn--primaire:hover { background: var(--accent); filter: brightness(1.08); }
.btn--danger { color: var(--text-secondary); }

.modeles input, .modeles select {
  height: 34px; padding: 0 10px; border-radius: var(--rayon-controle); font-size: var(--t-texte); min-width: 0;
  background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-primary);
}
.modeles label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-aide); color: var(--text-secondary); }

.defaut { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.defaut label { flex: 1 1 180px; }
.statut { min-height: 20px; margin-top: 8px; font-size: var(--t-aide); color: var(--text-secondary); }
.statut[data-ton="ok"], .statut[data-ton="erreur"] { color: var(--text-primary); }
.alerte { padding: 12px 14px; border-radius: var(--rayon-controle); background: var(--bg-surface); border: 1px solid var(--border-subtle); font-size: var(--t-texte); }

.fournisseurs { display: flex; flex-direction: column; gap: 10px; }
.fournisseur {
  padding: 14px; border-radius: var(--rayon-case); background: var(--bg-surface); border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 12px;
}
.fournisseur__tete { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fournisseur__nom { font-weight: var(--g-moyen); }
.fournisseur__cle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--rayon-controle);
  background: var(--bg-hover); font-size: var(--t-aide); font-variant-numeric: tabular-nums;
}
.chip--vide { background: transparent; border: 1px dashed var(--border-subtle); color: var(--text-secondary); }
.actions, .ligne-form { display: flex; flex-wrap: wrap; gap: 8px; }
.ligne-form input { flex: 1 1 220px; }

.ajout { margin-top: 12px; }
.ajout summary { cursor: pointer; font-size: var(--t-aide); color: var(--text-secondary); width: fit-content; border-radius: var(--rayon-controle); }
.ajout__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; margin-top: 12px; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tuile { padding: 12px 14px; border-radius: var(--rayon-case); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.tuile__libelle { font-size: var(--t-aide); color: var(--text-secondary); }
.tuile__valeur { font-size: var(--t-titre-vue); line-height: 30px; font-weight: var(--g-moyen); font-variant-numeric: tabular-nums; }

.table-defile { overflow-x: auto; margin-top: 12px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-texte); font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.table th:first-child { text-align: left; font-weight: var(--g-normal); }
.table thead th { font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); }

/* Paramètres — menu latéral : rubriques à gauche, contenu à droite.
   Même spécificité que la règle qui affiche la vue (.chat[data-view="settings"] .settings), pour l'emporter. */
.settings { max-width: 960px; }
.chat[data-view="settings"] .settings {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 48px; align-content: start;
}
.settings h1 { grid-column: 1 / -1; margin-bottom: 28px; }
.rubriques { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; align-self: start; }
.rubrique {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border-radius: var(--rayon-controle);
  text-align: left; font-size: var(--t-texte); font-weight: var(--g-moyen); color: var(--text-secondary);
  transition: background .15s, color .15s;
}
.rubrique:hover { color: var(--text-primary); }
.rubrique[aria-selected="true"] { background: var(--bg-hover); color: var(--text-primary); }
.rubrique__icone { display: grid; place-items: center; color: var(--text-secondary); }
.rubrique[aria-selected="true"] .rubrique__icone, .rubrique:hover .rubrique__icone { color: var(--text-primary); }
.panneaux { min-width: 0; }
.panneau[hidden] { display: none; }
.panneau > h2:first-child { margin-top: 6px; margin-bottom: 0; }
.periode { margin-bottom: 10px; }

@media (max-width: 880px) {
  .chat[data-view="settings"] .settings { grid-template-columns: 170px minmax(0, 1fr); column-gap: 24px; }
}
/* Sous 640 px, pas de place pour deux colonnes : les rubriques passent en grille 2 × 2 au-dessus du contenu. */
@media (max-width: 640px) {
  .chat[data-view="settings"] .settings { display: block; }
  .rubriques {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; position: static; margin-bottom: 32px; padding: 4px;
    border-radius: var(--rayon-case); background: var(--bg-surface); border: 1px solid var(--border-subtle);
  }
  .rubrique { justify-content: center; height: 34px; padding: 0 8px; font-size: var(--t-texte); }
  .rubrique__icone { display: none; }
  .tuiles { grid-template-columns: 1fr 1fr; }
  .tuile__valeur { font-size: var(--t-titre-vue); }
}

/* Vue « Créer un agent » — entretien avec le fabricant. Sans plan : la colonne centrale du chat.
   Avec un plan (.creation--large) : entretien de 360 px à gauche, canevas à droite, 40 px de gouttière
   avec chaque rail (rail : 16 + 58 px). Cartes en variables de thème uniquement. */
.creation { display: none; }
.chat[data-view="creation"] > :not(.creation) { display: none; }
.chat[data-view="creation"] .creation,
.chat[data-view="creation-skill"] .creation-skill {
  display: flex; flex: 1; min-height: 0; gap: 32px;
  width: 100%; max-width: calc(var(--colonne) + 32px); padding: 0 16px;
}
.chat[data-view="creation"] > .creation-skill { display: none; } /* la création d'un skill a ses propres ids : elle n'apparaît que dans sa vue */
.chat[data-view="creation-skill"] > :not(.creation-skill) { display: none; }
.chat:is([data-view="creation"], [data-view="creation-skill"]) .creation--large { max-width: 1440px; padding: 28px 114px; }
.creation__entretien { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 20px; padding-bottom: 28px; }
.creation--large .creation__entretien { flex: none; width: 360px; padding: 28px 0; }
.creation__tete { flex: none; padding-top: 20px; }
.creation--large .creation__tete { padding-top: 0; }
.creation__titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.creation h1 { font-size: var(--t-titre-vue); line-height: 28px; font-weight: var(--g-moyen); }
.creation .hint { font-size: var(--t-aide); line-height: 20px; color: var(--text-secondary); margin-top: 6px; }
.creation__fil {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent;
}
.creation__fil > :first-child { margin-top: auto; } /* fil ancré en bas : la carte active touche la saisie */
.saisie { flex: none; display: flex; flex-direction: column; gap: 10px; }
.creation .composer { width: 100%; max-width: none; margin: 0; flex: none; }
/* Saisie indisponible : le champ se teinte, son texte reste lisible. */
.creation .composer:has(input:disabled, textarea:disabled) { background: var(--bg-hover); }
.creation .composer input:disabled, .creation .composer textarea:disabled { opacity: 1; }
.creation .composer input:disabled::placeholder, .creation .composer textarea:disabled::placeholder { color: var(--text-secondary); opacity: 1; }
.creation .send:disabled { opacity: .35; cursor: default; }
.lien { font-size: var(--t-aide); line-height: 20px; color: var(--text-secondary); border-radius: var(--rayon-controle); flex: none; }
.lien:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Indicateur de tour (composant Figma « Tour / Indicateur ») */
.tour {
  align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px;
  border-radius: var(--rayon-case); font-size: var(--t-aide); line-height: 16px; border: 1px solid transparent;
}
.tour[hidden] { display: none; }
.tour strong { font-weight: var(--g-moyen); }
.tour--toi { background: var(--accent); color: var(--texte-sur-accent); }
.tour--toi .tour__signe { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tour--travail { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-primary); }
.tour--travail span:last-child { color: var(--text-secondary); }
.tour--travail .tour__signe {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent;
  animation: tourne 0.9s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tour--travail .tour__signe { animation: none; } }

/* Messages du fabricant : avatar + carte ; la carte occupe toute la colonne. */
.creation .msg--agent > :last-child { flex: 1; min-width: 0; }

.carte {
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--rayon-case);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.carte p { font-size: var(--t-texte); line-height: 21px; }
.carte--erreur { border-color: var(--accent); }
/* Carte active de l'entretien : une décision (contour accentué) ou une activité en cours. */
.carte--decision { border: 1.5px solid var(--accent); padding: 16px; gap: 12px; }
.carte--activite { padding: 16px; gap: 10px; }
.carte .carte__titre { display: flex; align-items: center; gap: 8px; font-size: var(--t-titre-case); line-height: 22px; font-weight: var(--g-moyen); }
.carte .muted { font-size: var(--t-aide); line-height: 18px; }
.choix { display: flex; flex-direction: column; gap: 8px; }
.choix .btn { width: 100%; justify-content: center; text-align: center; }
.carte .choix__cout { font-size: var(--t-aide); line-height: 18px; color: var(--text-secondary); text-align: center; }
.choix .lien { align-self: center; text-decoration: underline; text-underline-offset: 3px; }
.interruption { display: flex; flex-direction: column; gap: 10px; font-size: var(--t-texte); line-height: 20px; }
.interruption dt { font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); }
.interruption dd { overflow-wrap: anywhere; }
.carte progress, .banc__resume progress {
  width: 100%; height: 6px; border: 0; border-radius: var(--rayon-controle); overflow: hidden;
  appearance: none; background: var(--border-subtle); accent-color: var(--accent);
}
.carte progress::-webkit-progress-bar, .banc__resume progress::-webkit-progress-bar { background: var(--border-subtle); }
.carte progress::-webkit-progress-value, .banc__resume progress::-webkit-progress-value { background: var(--accent); }
.carte progress::-moz-progress-bar, .banc__resume progress::-moz-progress-bar { background: var(--accent); }
.carte--confirmation { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestion {
  padding: 6px 12px; border-radius: var(--rayon-case); font-size: var(--t-texte); line-height: 19px; text-align: left;
  background: var(--bg-hover); border: 1px solid var(--border-controle); color: var(--text-primary);
}
.suggestion:hover:not(:disabled) { border-color: var(--accent); }
.suggestion:disabled { opacity: .5; cursor: default; }

.carte--fiche { gap: 12px; }
.fiche__nom { font-size: var(--t-titre-case); line-height: 24px; font-weight: var(--g-moyen); }
.carte .fiche__legende { font-size: var(--t-aide); line-height: 18px; color: var(--text-secondary); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
.carte .fiche__justification { font-size: var(--t-aide); line-height: 20px; color: var(--text-secondary); }
.fiche__instructions summary { cursor: pointer; font-size: var(--t-aide); color: var(--text-secondary); width: fit-content; border-radius: var(--rayon-controle); }
.fiche__texte {
  margin-top: 8px; padding: 10px 12px; border-radius: var(--rayon-controle); background: var(--bg-hover);
  font-family: inherit; font-size: var(--t-texte); line-height: 20px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .creation { padding: 0 4px; }
  .carte { padding: 12px; }
}

/* Rail : agent sélectionné (destinataire), bouton « Tous les agents » avec compteur */
.agent[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tint); }
.tous-agents { position: relative; }
.tous-agents::after {
  content: attr(data-compte); position: absolute; right: -2px; bottom: -2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--rayon-controle);
  font-size: var(--t-repere); line-height: 16px; font-weight: var(--g-moyen); text-align: center;
  background: var(--accent); color: var(--texte-sur-accent);
}

/* Annuaire : tous les agents, avec recherche (panneau en verre près du rail droit) */
.annuaire {
  position: fixed; z-index: 5; right: 88px; top: 50%; transform: translateY(-50%);
  width: min(380px, calc(100vw - 120px)); max-height: min(560px, calc(100vh - 48px));
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--rayon-case);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge); box-shadow: var(--ombre-verre), inset 0 1px 0 var(--glass-highlight);
}
.annuaire[hidden] { display: none; }
.annuaire__tete { display: flex; align-items: center; justify-content: space-between; }
.annuaire__tete h2 { font-size: var(--t-titre-case); font-weight: var(--g-moyen); }
.annuaire__recherche {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--rayon-controle);
  background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-secondary);
}
.annuaire__recherche input { flex: 1; min-width: 0; outline: none; color: var(--text-primary); }
.annuaire__liste { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.annuaire__agent {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: var(--rayon-controle); text-align: left;
}
.annuaire__agent:hover, .annuaire__agent[aria-pressed="true"] { background: var(--bg-hover); }
.annuaire__texte { display: flex; flex-direction: column; min-width: 0; }
.annuaire__nom { font-size: var(--t-texte); font-weight: var(--g-moyen); }
.annuaire__mission { font-size: var(--t-aide); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annuaire__vide { font-size: var(--t-aide); color: var(--text-secondary); padding: 8px; }

/* Fil : notifications d'usage (skills, outils), erreurs, état vide, mention */
.msg--systeme {
  display: flex; align-items: center; gap: 8px; margin: -16px 0 -16px 42px;
  font-size: var(--t-aide); color: var(--text-secondary);
}
.msg--systeme svg { flex: none; color: var(--text-secondary); }
.msg--erreur { margin-left: 0; color: var(--text-primary); }
.mention { font-weight: var(--g-moyen); }
.fil-vide { margin: auto 0; text-align: center; color: var(--text-secondary); font-size: var(--t-texte); }

@media (max-width: 640px) {
  .annuaire { right: 60px; width: calc(100vw - 76px); }
}

/* Annuaire : chaque ligne a un bouton « Voir la fiche » */
.annuaire__ligne { display: flex; align-items: center; gap: 4px; }
.annuaire__ligne .annuaire__agent { flex: 1; min-width: 0; }

/* Nom d'agent dans le fil : ouvre sa fiche */
.lien-fiche { display: block; text-align: left; border-radius: var(--rayon-controle); }
.lien-fiche:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Vue « Fiche d'agent » : même motif que les Paramètres. En-tête de l'agent, puis menu latéral
   de rubriques (.rubriques/.rubrique, partagés) à gauche et contenu à droite. */
.fiche-vue { display: none; }
.chat[data-view="fiche"] > :not(.fiche-vue) { display: none; }
.chat[data-view="fiche"] .fiche-vue {
  display: block; flex: 1; min-height: 0; width: 100%; overflow-y: auto;
  padding: 28px 16px 40px; scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent;
}
.fiche-vue > * { max-width: 960px; margin-left: auto; margin-right: auto; }
.fiche-vue__tete { margin-bottom: 16px; }
.btn--retour { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; }

.fiche-entete { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.fiche-entete__titre { flex: 1; min-width: 0; }
.fiche-vue h1 { font-size: var(--t-titre-vue); line-height: 28px; font-weight: var(--g-moyen); overflow-wrap: normal; word-break: normal; hyphens: none; }
.fiche-vue h1:focus { outline: none; }
.avatar--lg { width: 48px; height: 48px; font-size: var(--t-titre-case); flex: none; }
.fiche-statut { margin: -20px auto 20px; min-height: 0; }
.fiche-statut:empty { display: none; }

.fiche-corps { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 48px; align-items: start; }
.fiche-vue h2 { font-size: var(--t-titre-case); font-weight: var(--g-moyen); margin-top: 6px; }
.fiche-vue .hint { font-size: var(--t-aide); line-height: 20px; color: var(--text-secondary); margin: 4px 0 16px; }
.fiche-vue .panneau > h2 + :not(.hint) { margin-top: 16px; }
.rubrique .compte { margin-left: auto; }
.compte { min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--rayon-controle); background: var(--bg-hover); color: var(--text-primary); font-size: var(--t-repere); line-height: 18px; text-align: center; }
.rubrique[aria-selected="true"] .compte { background: var(--bg-surface); }

.mission { font-size: var(--t-titre-case); line-height: 26px; max-width: 70ch; }
.infos { display: flex; flex-direction: column; margin-top: 20px; border-top: 1px solid var(--border-subtle); }
.infos > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: var(--t-texte); border-bottom: 1px solid var(--border-subtle); }
.infos dt { color: var(--text-secondary); }
.infos dd { text-align: right; }

/* Instructions mises en forme : ligne de lecture limitée, hiérarchie douce */
.md { max-width: 72ch; font-size: var(--t-texte); line-height: 23px; }
.md > * + * { margin-top: 10px; }
.md h3 { font-size: var(--t-titre-case); font-weight: var(--g-moyen); margin-top: 22px; }
.md h4 { font-size: var(--t-texte); font-weight: var(--g-moyen); margin-top: 16px; }
.md > :first-child { margin-top: 0; }
.md ul, .md ol { padding-left: 20px; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li + li { margin-top: 4px; }
.md li::marker { color: var(--text-secondary); }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-aide); padding: 1px 5px; border-radius: var(--rayon-controle); background: var(--bg-hover); }
.msg--agent > :last-child { min-width: 0; }
.md-tableau { max-width: 100%; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--rayon-controle); }
.md-tableau table { width: 100%; border-collapse: collapse; }
.md-tableau th, .md-tableau td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); min-width: 8ch; }
.md-tableau th { background: var(--bg-hover); font-weight: var(--g-moyen); }
.md-tableau tbody tr:last-child td { border-bottom: 0; }

.attaches { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.attache {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px; border-radius: var(--rayon-case); background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.attache__texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.attache__nom { font-size: var(--t-texte); font-weight: var(--g-moyen); }
.attache__desc { font-size: var(--t-aide); line-height: 19px; color: var(--text-secondary); }
.attache .muted { font-size: var(--t-aide); }
.vide { font-size: var(--t-aide); color: var(--text-secondary); margin-bottom: 14px; }
.attacher { display: flex; gap: 8px; }
.fiche-vue select {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: var(--rayon-controle); font-size: var(--t-texte);
  background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-primary);
}

.versions { display: flex; flex-direction: column; gap: 8px; }
.versions li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-texte); }

.spec__barre { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.spec { margin: 0; max-height: 60vh; overflow: auto; white-space: pre; font-size: var(--t-aide); line-height: 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); }

@media (max-width: 880px) {
  .fiche-corps { grid-template-columns: 170px minmax(0, 1fr); column-gap: 24px; }
}
/* Sous 640 px, comme les Paramètres : les rubriques passent en grille au-dessus du contenu. */
@media (max-width: 640px) {
  .chat[data-view="fiche"] .fiche-vue { padding: 20px 4px 32px; }
  .fiche-entete { flex-wrap: wrap; margin-bottom: 20px; }
  .fiche-entete__titre { flex: 1 0 100%; }
  .fiche-entete > .btn { width: 100%; }
  .fiche-corps { display: block; }
  .attache { flex-direction: column; align-items: flex-start; }
  .rubrique .compte { margin-left: 6px; }
}

/* Paramètres — deux emplacements de clé par fournisseur */
.emplacements { display: flex; flex-direction: column; gap: 10px; }
.emplacement {
  display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-subtle);
}
.emplacement__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.emplacement__nom { font-size: var(--t-texte); font-weight: var(--g-moyen); }
.referentiel { margin-top: 8px; }
.referentiel .table-defile { margin-bottom: 10px; }
.referentiel .actions { margin-top: 4px; }
.attribution { margin-top: 6px; }
.attribution a { color: inherit; text-decoration: underline; text-underline-offset: 2px; border-radius: var(--rayon-controle); }
.table td .muted { font-size: var(--t-repere); }
.statut .chip { margin-left: 6px; }

/* Création — carte « Plan de l'agent » */
.creation .msg--user p { white-space: pre-line; overflow-wrap: anywhere; }
/* Canevas : l'agent en construction, à droite de l'entretien. */
.canevas {
  flex: 1; min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 24px;
  padding: 28px 32px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--rayon-case);
  scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent;
}
.canevas[hidden] { display: none; }
.canevas__agent { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar--lg { width: 44px; height: 44px; font-size: var(--t-texte); }
.canevas__identite { flex: 1; min-width: 0; }
.canevas__identite h2 { font-size: var(--t-titre-case); line-height: 24px; font-weight: var(--g-moyen); overflow-wrap: anywhere; }
.canevas__identite p { font-size: var(--t-aide); line-height: 19px; color: var(--text-secondary); }
.canevas__modele { flex: none; padding: 6px 12px; border: 1px solid var(--border-subtle); border-radius: var(--rayon-case); }

.frise { display: flex; align-items: center; gap: 10px; list-style: none; padding-bottom: 24px; border-bottom: 1px solid var(--border-subtle); }
.frise__etape { display: flex; align-items: center; gap: 10px; font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); }
.frise__etape:not(:last-child) { flex: 1; }
.frise__etape:not(:last-child)::after { content: ""; flex: 1; min-width: 12px; height: 1px; background: var(--border-subtle); }
.frise__etape > * { display: flex; align-items: center; gap: 8px; border-radius: var(--rayon-controle); white-space: nowrap; }
.frise__etape button:hover { color: var(--text-primary); }
.frise__pastille {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: var(--t-aide); border: 1.5px solid var(--border-controle);
}
.frise__etape.is-faite .frise__pastille { background: var(--bg-hover); border-color: transparent; color: var(--text-primary); }
.frise__etape.is-active { color: var(--text-primary); font-weight: var(--g-moyen); }
.frise__etape.is-active .frise__pastille { background: var(--accent); border-color: var(--accent); color: var(--texte-sur-accent); }

.canevas__etape { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.canevas__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.canevas__tete h3 { font-size: var(--t-titre-case); line-height: 22px; font-weight: var(--g-moyen); }
.canevas__tete .hint { margin-top: 4px; }
.btn--icone { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.canevas .statut { margin-top: auto; }

/* Onglets du plan (composant Figma « Onglet ») : une rubrique à la fois. */
.onglets { display: flex; gap: 28px; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; }
.onglet {
  display: flex; align-items: center; gap: 6px; padding: 8px 2px 10px; margin-bottom: -1px; white-space: nowrap;
  font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); border-bottom: 2px solid transparent;
}
.onglet:hover { color: var(--text-primary); }
.onglet[aria-selected="true"] { color: var(--text-primary); font-weight: var(--g-moyen); border-bottom-color: var(--accent); }
.onglet__nonlu { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.panneau-plan { padding-top: 8px; }
.volet { display: flex; flex-direction: column; gap: 20px; font-size: var(--t-titre-case); line-height: 23px; min-width: 0; }
.volet--deux { flex-direction: row; gap: 40px; }
.volet--deux > .volet__bloc { flex: 1; }
.volet__cote { flex: none; width: 300px; padding-left: 32px; border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 20px; }
.volet__bloc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.volet__bloc h4 { font-size: var(--t-aide); line-height: 18px; font-weight: var(--g-moyen); color: var(--text-secondary); }
.volet__valeur { font-size: var(--t-titre-vue); line-height: 28px; font-weight: var(--g-moyen); overflow-wrap: anywhere; }
.volet__extrait { padding: 16px 18px; border-radius: var(--rayon-controle); background: var(--bg-hover); max-width: none; }
.volet .puces { margin-top: 0; }
.volet .fiche__justification { font-size: var(--t-aide); line-height: 20px; color: var(--text-secondary); }
.plan__quand { font-size: var(--t-aide); line-height: 20px; color: var(--text-secondary); }
.plan__liste { padding-left: 20px; list-style: disc; }
.plan__liste--num { list-style: decimal; }
.plan__liste li + li { margin-top: 8px; }
.plan__liste li::marker { color: var(--text-secondary); }
.plan__vide { color: var(--text-secondary); font-size: var(--t-aide); line-height: 20px; }
.plan__vocabulaire { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-texte); line-height: 20px; }
.plan__vocabulaire dt { font-weight: var(--g-moyen); }
.plan__vocabulaire dd { color: var(--text-secondary); }
.attribution { font-size: var(--t-aide); line-height: 18px; }
.fiche-vue .fiche__sous-titre { font-size: var(--t-texte); line-height: 21px; font-weight: var(--g-moyen); }

/* Cas d'essai : cartes en lecture, formulaire pour le cas en cours de modification. */
.cas-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; }
.cas-grille__edition { grid-column: 1 / -1; }
.cas-carte {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; min-width: 0;
  border: 1px solid var(--border-subtle); border-radius: var(--rayon-case); font-size: var(--t-aide); line-height: 19px; color: var(--text-secondary);
}
.cas-carte__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cas-carte h4 { font-size: var(--t-texte); line-height: 20px; font-weight: var(--g-moyen); color: var(--text-primary); overflow-wrap: anywhere; }
.cas-carte p { overflow-wrap: anywhere; }
.cas-carte__attendu span { font-weight: var(--g-moyen); color: var(--text-primary); margin-right: 4px; }
.cas-carte .chip { color: var(--text-primary); }
.cas-carte .icon-btn { width: 28px; height: 28px; border-radius: var(--rayon-controle); }
.cas-carte .icon-btn:disabled { opacity: .35; cursor: default; }
.cas-liste { display: flex; flex-direction: column; gap: 12px; }
.cas {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; min-width: 0;
  border: 1px solid var(--border-subtle); border-radius: var(--rayon-controle); background: var(--bg-hover);
}
.cas legend { font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); padding: 0 6px; }
.cas__ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 10px; }
.cas label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-aide); color: var(--text-secondary); min-width: 0; }
.cas input, .cas select, .cas textarea {
  width: 100%; min-width: 0; padding: 8px 10px; border-radius: var(--rayon-controle); font: inherit; font-size: var(--t-texte); line-height: 20px;
  color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-controle);
}
.cas input, .cas select { height: 34px; padding-top: 0; padding-bottom: 0; }
.cas textarea { resize: vertical; }
.cas--lecture { background: var(--bg-surface); list-style: none; }
.cas__detail { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-texte); line-height: 20px; }
.cas__detail dt { font-size: var(--t-aide); color: var(--text-secondary); }
.cas__detail dd { overflow-wrap: anywhere; }

/* Écran étroit : l'entretien passe au-dessus du canevas, la vue défile d'un bloc. */
@media (max-width: 1100px) {
  .chat:is([data-view="creation"], [data-view="creation-skill"]) .creation--large { flex-direction: column; gap: 20px; padding: 16px 16px 24px; overflow-y: auto; }
  .creation--large .creation__entretien { width: 100%; padding: 0; }
  .creation--large .creation__fil { flex: none; overflow: visible; }
  .creation--large .canevas { flex: none; overflow: visible; padding: 20px; }
  .volet--deux { flex-direction: column; gap: 20px; }
  .volet__cote { width: auto; padding-left: 0; border-left: 0; }
  /* La saisie reste au bas de l'écran, entre les deux barres, quand la vue défile d'un bloc. */
  .chat:is([data-view="creation"], [data-view="creation-skill"]) .creation--large { padding-bottom: 132px; }
  .creation--large .saisie {
    position: fixed; z-index: 3; bottom: 0; left: var(--saisie-g, 88px); right: var(--saisie-d, 88px);
    padding: 24px 0 14px; background: linear-gradient(to bottom, transparent, var(--bg-app) 40%);
  }
}
@media (max-width: 880px) { .creation--large .saisie { --saisie-g: 72px; --saisie-d: 72px; } }
@media (max-width: 640px) {
  .creation--large .saisie { --saisie-g: 56px; --saisie-d: 52px; }
  .cas-grille { grid-template-columns: minmax(0, 1fr); }
  .frise__etape:not(.is-active) > * { font-size: 0; gap: 0; } /* seuls les numéros restent, l'étape active garde son nom */
  .canevas__agent { flex-wrap: wrap; }
}

/* Banc d'essai : bilan chiffré d'abord, puis une ligne par cas (composant Figma « Banc / Ligne »). */
.pastille-attente {
  width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block;
  border: 2px solid var(--accent); border-right-color: transparent; animation: tourne 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .pastille-attente { animation: none; } }
.banc__bilan { display: flex; align-items: center; gap: 16px; }
.banc__chiffre { font-size: var(--t-titre-vue); line-height: 40px; font-weight: var(--g-moyen); flex: none; }
.banc__resume { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-texte); font-weight: var(--g-moyen); }
.banc__barres { display: flex; gap: 4px; }
.banc__barres span { flex: 1; height: 6px; border-radius: var(--rayon-controle); background: var(--border-subtle); }
.banc__barres .is-ok { background: var(--accent); }
.banc__liste { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; list-style: none; }
.banc__cas { border: 1px solid transparent; border-radius: var(--rayon-controle); min-width: 0; }
.banc__cas.is-ko { border-color: var(--accent); }
.banc__ligne { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 0; border-radius: var(--rayon-controle); }
summary.banc__ligne { cursor: pointer; list-style: none; }
summary.banc__ligne::-webkit-details-marker { display: none; }
summary.banc__ligne::after { content: "›"; color: var(--text-secondary); transition: transform .15s; }
details[open] > summary.banc__ligne::after { transform: rotate(90deg); }
.banc__signe { font-weight: var(--g-moyen); width: 16px; text-align: center; flex: none; }
.banc__signe--joue { color: var(--text-secondary); }
.banc__cas.is-ok .banc__signe { color: var(--etat-reussi); }
.banc__cas.is-ko .banc__signe { color: var(--accent); }
.banc__nom { font-size: var(--t-texte); font-weight: var(--g-moyen); overflow-wrap: anywhere; }
.banc__score { margin-left: auto; font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); flex: none; max-width: 100%; overflow-wrap: anywhere; }
.banc__detail { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 12px 44px; }
.banc__raison { font-size: var(--t-texte); line-height: 20px; overflow-wrap: anywhere; }
.banc__extrait summary { cursor: pointer; font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--accent); width: fit-content; border-radius: var(--rayon-controle); }
.alerte .mono { font-size: var(--t-aide); }

/* Fiche : justification du modèle, banc */
.infos > .infos__long { flex-direction: column; gap: 4px; }
.infos__long dd { text-align: left; line-height: 20px; }
.fiche-vue .cas-liste--lecture { margin-bottom: 4px; }
.fiche-vue #fiche-banc { margin-bottom: 12px; }
.fiche-vue .banc__raison { font-size: var(--t-aide); line-height: 20px; color: var(--text-secondary); }

@media (max-width: 640px) {
  .cas__ligne { grid-template-columns: minmax(0, 1fr); }
  .emplacement .actions .btn { flex: 1 1 auto; }
}

.table--ref th, .table--ref td { white-space: normal; }
.table--ref th:not(:first-child) { min-width: 64px; }
.cas-liste + .actions { margin-top: 12px; }

/* Pied du canevas : l'abandon, en retrait, loin de l'action principale. */
.canevas__pied { display: flex; justify-content: flex-end; padding-top: 16px; }

/* Qualification calculée par le serveur. */
.qualification { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-aide); color: var(--text-secondary); margin-top: 6px; }
.qualification__pastille { border: 1px solid var(--border-controle); border-radius: var(--rayon-plateau); padding: 2px 8px; color: var(--text-primary); white-space: nowrap; }
.carte--decision .btn { height: auto; min-height: 32px; white-space: normal; text-align: left; padding-block: 7px; max-width: 100%; }

#fil .choix .btn, #fil-skill .choix .btn { height: auto; min-height: 32px; padding-block: 7px; white-space: normal; text-align: left; overflow-wrap: anywhere; }

.bientot { display: none; }
.chat[data-view="bientot"] > :not(.bientot) { display: none; }
.chat[data-view="bientot"] .bientot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; max-width: var(--colonne); padding: 36px 16px; overflow-y: auto; }
.bientot h1 { font-size: var(--t-titre-vue); }
#creation-demarrage, #skill-demarrage { margin-top: 16px; }
#creation-demarrage h2, #skill-demarrage h2 { font-size: var(--t-titre-case); line-height: 24px; }
.exemples-creation { display: flex; flex-flow: row wrap; align-items: flex-start; gap: 8px; margin-top: 12px; }
.exemples-creation .btn { height: auto; min-height: 30px; padding: 4px 12px; border-radius: var(--rayon-case); font-size: var(--t-texte); line-height: 20px; white-space: normal; text-align: left; }

.destinataire, .aide-fil { width: calc(100% - 32px); max-width: var(--colonne); margin: 0 16px 8px; font-size: var(--t-texte); overflow-wrap: anywhere; }
.destinataire { color: var(--text-secondary); }
.aide-fil { padding: 12px; border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); background: var(--bg-surface); max-height: 35vh; overflow-y: auto; }
.aide-fil .btn { height: auto; min-height: 32px; white-space: normal; text-align: left; padding-block: 7px; }
.msg .md { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .banc__ligne { flex-wrap: wrap; gap: 8px; padding-inline: 10px; }
  .banc__score { flex-basis: 100%; margin-left: 24px; }
  .banc__detail { padding-left: 16px; }
}

/* Vue « Skills » : trois niveaux (Mon coffre, Entreprise, Marketplaces), liste à gauche, panneau en onglets à droite.
   Variables de thème uniquement ; l'état d'un skill se lit au texte et aux signes ✓ ✕ !, jamais à la couleur seule. */
.skills-vue { display: none; }
.chat[data-view="skills"] > :not(.skills-vue) { display: none; }
.chat[data-view="skills"] .skills-vue {
  display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; width: 100%; max-width: 1440px;
  padding: 28px 114px 40px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent;
}
.skills-vue h1 { font-size: var(--t-titre-vue); line-height: 28px; font-weight: var(--g-moyen); }
.skills-vue h1:focus { outline: none; }
.skills-vue h2 { font-size: var(--t-titre-case); line-height: 24px; font-weight: var(--g-moyen); overflow-wrap: anywhere; }
.skills-vue h3 { font-size: var(--t-titre-case); line-height: 22px; font-weight: var(--g-moyen); }
.skills-vue h4 { font-size: var(--t-texte); line-height: 20px; font-weight: var(--g-moyen); }
.skills-vue .hint { font-size: var(--t-aide); line-height: 20px; color: var(--text-secondary); margin-top: 4px; }
.skills-vue__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.skills-vue__tete .btn[hidden] { display: none; }
.skills-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.skills-barre__note { flex: 1 1 200px; text-align: right; }
.skills-recherche { flex: 0 1 300px; min-width: 180px; }
.skills-recherche input {
  width: 100%; height: 36px; padding: 0 12px; border-radius: var(--rayon-controle); font-size: var(--t-texte); outline: none;
  background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-primary);
}
.skills-recherche input::placeholder { color: var(--text-secondary); }
.niveaux { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: var(--rayon-controle); background: var(--bg-surface); border: 1px solid var(--border-controle); }
.niveaux button { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--rayon-controle); font-size: var(--t-texte); font-weight: var(--g-moyen); color: var(--text-primary); }
.niveaux button[aria-pressed="true"] { background: var(--bg-hover); font-weight: var(--g-moyen); }
.niveaux button:hover:not([aria-pressed="true"]) { background: var(--bg-hover); }
.niveaux .compte { background: transparent; color: var(--text-secondary); padding: 0; min-width: 0; }
.skills-statut { min-height: 0; margin: 0; }
.skills-statut:empty { display: none; }

.skills-corps { min-width: 0; }
.skills-corps__grille { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 24px; align-items: start; }
/* Le panneau reste visible quand la liste (ex. 59 skills des marketplaces) fait défiler le plateau. */
.skills-corps__grille > .skills-panneau { position: sticky; top: 16px; max-height: calc(100vh - 140px); overflow: auto; }
.skills-liste { display: flex; flex-direction: column; gap: 8px; }
.skill-ligne {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 16px; text-align: left; border-radius: var(--rayon-case);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.skill-ligne:hover { border-color: var(--border-controle); }
.skill-ligne[aria-current="true"] { border: 1.5px solid var(--accent); padding: 13.5px 15.5px; }
.skill-ligne__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.skill-ligne__nom { font-size: var(--t-texte); line-height: 20px; font-weight: var(--g-moyen); overflow-wrap: anywhere; }
.skill-ligne__desc { font-size: var(--t-aide); line-height: 19px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-ligne__meta { font-size: var(--t-aide); line-height: 18px; color: var(--text-primary); overflow-wrap: anywhere; }
.skill-ligne__entreprise { margin: 6px 16px 10px; }
.skills-proche { margin-bottom: 8px; }

.pastille-etat {
  display: inline-flex; align-items: center; flex: none; max-width: 100%; height: 22px; padding: 0 9px; border-radius: var(--rayon-controle);
  border: 1px solid var(--border-controle); font-size: var(--t-aide); line-height: 20px; color: var(--text-primary); white-space: nowrap;
}
.skill-icone {
  width: 40px; height: 40px; border-radius: var(--rayon-controle); flex: none; display: grid; place-items: center;
  background: var(--bg-hover); color: var(--text-primary);
}
.skill-icone--grand { width: 44px; height: 44px; }

.skills-panneau {
  display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px 28px 28px; min-height: 320px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--rayon-case);
}
.skills-panneau__tete { display: flex; align-items: center; gap: 14px; min-width: 0; }
.skills-panneau__identite { flex: 1; min-width: 0; }
.skills-panneau__identite h2:focus { outline: none; }
.skills-panneau__identite p { font-size: var(--t-aide); line-height: 19px; color: var(--text-secondary); }
/* Description complète plus bas (« Ce que liront les agents ») : trois lignes suffisent en tête. */
.skills-panneau__identite p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skills-rubrique { display: flex; flex-direction: column; gap: 16px; min-width: 0; font-size: var(--t-texte); line-height: 21px; }
.skills-rubrique[hidden] { display: none; }
.skills-rubrique > h3 + .hint { margin-top: -10px; }
.onglets--wrap { flex-wrap: wrap; gap: 4px 24px; overflow: visible; }
.skills-vue .infos { margin-top: 0; }
.skills-vue .infos dd { overflow-wrap: anywhere; }
.skills-vue .attaches { margin-bottom: 0; }
.skills-vue .vide { margin-bottom: 0; }
.skills-vue .alerte, .skills-vue .carte--note-info { font-size: var(--t-texte); line-height: 20px; }
.carte--note-info { padding: 12px 14px; border: 1px dashed var(--border-controle); border-radius: var(--rayon-controle); color: var(--text-primary); }

/* Encadré : texte courant seulement (jamais de gris sur ce fond). */
.encadre { padding: 14px 16px; border-radius: var(--rayon-controle); background: var(--bg-hover); color: var(--text-primary); }
.encadre p { font-size: var(--t-texte); line-height: 21px; overflow-wrap: anywhere; }
.encadre .encadre__titre { font-size: var(--t-aide); line-height: 18px; font-weight: var(--g-moyen); margin-bottom: 2px; }

/* Cartes à lignes : conditions de publication, banc, contrôle. */
.bc-carte { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; border: 1px solid var(--border-subtle); border-radius: var(--rayon-case); background: var(--bg-surface); }
.bc-carte__entete { font-size: var(--t-aide); line-height: 18px; font-weight: var(--g-moyen); color: var(--text-secondary); }
.bc-carte__titre { font-size: var(--t-titre-vue); line-height: 30px; font-weight: var(--g-moyen); overflow-wrap: anywhere; }
.bc-carte .banc__liste { margin-top: 6px; }
.bc-carte .banc__ligne { padding: 6px 4px; gap: 10px; }
.bc-carte .banc__detail { padding: 0 4px 6px 30px; }
.bc-carte .banc__nom { font-size: var(--t-texte); font-weight: var(--g-moyen); }
.bc-carte .banc__sous { display: flex; flex-direction: column; gap: 4px; }
.bc-carte .banc__score { font-weight: var(--g-normal); }
.bc-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bc-cartes--un { grid-template-columns: minmax(0, 1fr); }
.bc-note { font-size: var(--t-texte); line-height: 20px; margin-top: 16px; }
.conditions { list-style: none; gap: 10px; }
.conditions li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 8px; }
.conditions li > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.conditions .muted { font-size: var(--t-texte); line-height: 19px; }
.banc__signe--ko, .banc__signe--avert { color: var(--accent); }
.banc__signe--attente { color: var(--text-secondary); }
.banc__cas.is-attente { border-color: var(--border-controle); border-style: dashed; }

.actions--ligne { align-items: center; gap: 10px 12px; }
.actions--ligne .muted { flex: 1 1 220px; font-size: var(--t-texte); line-height: 19px; }
.actions--centre { justify-content: center; }
.carte--formulaire label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-texte); }
.carte--formulaire textarea, .skills-vue .ligne-form input {
  width: 100%; padding: 8px 10px; border-radius: var(--rayon-controle); font: inherit; font-size: var(--t-texte); line-height: 20px;
  background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-primary);
}
.skills-vue .ligne-form input { height: 36px; padding-top: 0; padding-bottom: 0; }
.retrait-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.retrait-cartes .carte { gap: 8px; }
.versions--skills li { gap: 6px 12px; }

/* Avis : moyenne, saisie de la note, liste nominative. */
.avis-resume { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.avis-resume > :nth-child(2) { flex: 1 1 220px; min-width: 0; }
.avis-resume p { font-size: var(--t-texte); line-height: 20px; }
.avis-resume p.muted { font-size: var(--t-aide); }
.avis-resume__chiffre { font-size: var(--t-titre-vue); line-height: 40px; font-weight: var(--g-moyen); }
.ta-note { gap: 12px; }
.ta-note__tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.ta-note .ligne-form { flex-wrap: wrap; }
.ta-note .ligne-form input { flex: 1 1 200px; }
.etoiles { display: inline-flex; gap: 2px; font-size: var(--t-titre-case); line-height: 1; color: var(--border-controle); }
.etoile.is-pleine { color: var(--accent); }
.etoiles--saisie .etoile { width: 32px; height: 32px; border-radius: var(--rayon-controle); font-size: var(--t-titre-vue); display: grid; place-items: center; color: var(--border-controle); }
.etoiles--saisie .etoile.is-pleine { color: var(--accent); }
.etoiles--saisie .etoile:hover { background: var(--bg-hover); }
.avis-liste { display: flex; flex-direction: column; }
.avis-liste li { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 4px; }
.avis-liste__tete { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.avis-liste p { font-size: var(--t-texte); line-height: 21px; overflow-wrap: anywhere; }
.skill-texte { max-height: 50vh; overflow: auto; }

/* États vides : coffre vide, recherche sans résultat. */
.skills-vide { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 560px; margin: 48px auto 0; text-align: center; }
.skills-vide .hint { margin: 0; max-width: 52ch; }
.pas-a-pas {
  display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 18px 20px; text-align: left; list-style: none;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--rayon-case);
}
.pas-a-pas li { display: flex; align-items: flex-start; gap: 12px; }
.pas-a-pas li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pas-a-pas .muted { font-size: var(--t-aide); line-height: 18px; }
.pas-a-pas .frise__pastille { margin-top: 1px; }

/* Création d'un skill : compléments au motif de la création d'agent. */
.canevas__pied--double { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.canevas__pied--double .muted { font-size: var(--t-aide); }
.skill-texte + .hint, .exemples-skill { display: flex; flex-direction: column; gap: 10px; }
.exemples-skill .carte p span { display: block; font-size: var(--t-aide); color: var(--text-secondary); }
.cas-carte__etiquettes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cas__case { flex-direction: row !important; align-items: flex-start; gap: 8px !important; }
.cas__case input { width: auto; height: auto; margin-top: 3px; accent-color: var(--accent); }
.choix--ligne { flex-direction: row; flex-wrap: wrap; }
.choix--ligne .btn { width: auto; flex: 1 1 auto; }

/* Fiche d'agent : source, version et état de chaque skill attaché. */
.attache__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.attache .attache__avis { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--bg-hover); border-radius: 0 var(--rayon-controle) var(--rayon-controle) 0; font-size: var(--t-texte); line-height: 19px; color: var(--text-primary); }

@media (max-width: 1100px) {
  .bc-cartes, .retrait-cartes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .chat[data-view="skills"] .skills-vue { padding: 20px 16px 32px; }
  .skills-corps__grille { grid-template-columns: minmax(0, 1fr); }
  .skills-corps__grille > .skills-panneau { position: static; max-height: none; overflow: visible; }
  .skills-barre__note { text-align: left; }
}
@media (max-width: 640px) {
  .chat[data-view="skills"] .skills-vue { padding: 16px 4px 28px; }
  .skills-vue__tete { flex-wrap: wrap; }
  .skills-recherche { flex: 1 1 100%; }
  .skills-panneau { padding: 18px 16px 22px; border-radius: var(--rayon-case); }
  .skills-panneau__tete { flex-wrap: wrap; }
  .niveaux button { padding: 0 10px; }
  .skills-vide { margin-top: 24px; }
}

.panneau-plan--pile { display: flex; flex-direction: column; gap: 20px; }
.panneau-plan--pile[hidden] { display: none; }

/* Lignes des cartes banc / contrôle : le signe reste à gauche, le score à droite, même sur mobile. */
.bc-carte .banc__ligne { flex-wrap: nowrap; align-items: flex-start; }
.bc-carte .banc__nom { flex: 1; min-width: 0; }
.bc-carte .banc__score { flex: none; flex-basis: auto; margin-left: auto; }
.bc-carte .banc__signe { margin-top: 1px; }
@media (max-width: 640px) {
  .bc-carte { padding: 14px; }
  .bc-carte .banc__score { margin-left: auto; }
  .bc-carte .banc__detail { padding-left: 26px; }
  .skills-panneau__tete { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; align-items: start; }
  .skills-panneau__tete .pastille-etat { grid-column: 2; justify-self: start; }
}

/* Réponses proposées : masquées une fois la réponse envoyée (l'attribut hidden doit l'emporter sur display: flex). */
.suggestions[hidden] { display: none; }
.ecoule { font-variant-numeric: tabular-nums; }

/* Bandeau « nouvelle version » : en haut, jamais de rechargement automatique. */
.nouvelle-version {
  position: fixed; z-index: 20; top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px);
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 14px; padding: 8px 8px 8px 16px; border-radius: var(--rayon-case); font-size: var(--t-texte);
  background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-controle); box-shadow: var(--ombre-verre);
}
.nouvelle-version[hidden] { display: none; }

/* Annuaire : bascule En service / Archivés. */
.annuaire__bascule { display: flex; gap: 2px; padding: 3px; border-radius: var(--rayon-controle); background: var(--bg-surface); border: 1px solid var(--border-controle); }
.annuaire__bascule button { flex: 1; height: 30px; border-radius: var(--rayon-controle); font-size: var(--t-texte); font-weight: var(--g-moyen); }
.annuaire__bascule button[aria-pressed="true"] { background: var(--bg-hover); font-weight: var(--g-moyen); }

/* Fil : actions discrètes sous une réponse, cas d'essai gardé depuis le fil. */
.msg__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
.msg__actions .lien[hidden] { display: none; }
.garder-cas { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); background: var(--bg-surface); width: 100%; }
.garder-cas label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-aide); color: var(--text-secondary); }
.garder-cas input { height: 34px; padding: 0 10px; border-radius: var(--rayon-controle); font-size: var(--t-texte); background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-primary); }

/* Pourquoi ce résultat ? : tous les essais d'un cas ; suggestion de reclassement en limite. */
.essais { display: flex; flex-direction: column; gap: 10px; list-style: none; margin-top: 6px; }
.essais li { display: flex; flex-direction: column; gap: 4px; }
.essais__tete { display: flex; align-items: center; gap: 6px; font-size: var(--t-texte); }
.suggestion-limite { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--bg-hover); border-radius: 0 var(--rayon-controle) var(--rayon-controle) 0; }
.versions .btn { margin-left: auto; }

.destinataire--visibilite { margin-top: -6px; font-size: var(--t-aide); }
.destinataire--visibilite:empty { display: none; }

/* Sous 640 px, les deux barres se replient derrière un bouton ; rien ne recouvre la saisie. */
.barres-bascule { display: none; }
.dictee-statut { min-height: 0; margin: 0; }
.dictee-statut:empty { display: none; }
.memo__note { display: block; font-size: var(--t-aide); color: var(--text-secondary); margin-top: 4px; }
.memo__note[hidden], .memo__erreur[hidden] { display: none; }
.memo__erreur { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: var(--t-texte); }
@media (max-width: 640px) {
  .barres-bascule {
    display: grid; position: fixed; z-index: 7; top: 8px; left: 8px; width: 40px; height: 40px; border-radius: var(--rayon-controle); place-items: center;
    background: var(--glass-bg); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-edge); box-shadow: var(--ombre-verre); color: var(--text-primary);
  }
  .rail { display: none; z-index: 6; }
  .app.barres-ouvertes .rail { display: flex; }
  .chat { padding: 52px 8px 0; }
  .creation--large .saisie { --saisie-g: 8px; --saisie-d: 8px; }
  .annuaire { right: 8px; width: calc(100vw - 16px); }
}

/* ===== Système d'attention (section 17) ===== */
/* Échelle de six tailles : verdict 24 gras, question 15 gras, nom 14 moyen, texte 14, aide 12 atténué, repère 11 gras en capitales. */
:root {
  --t-titre-vue: 24px; --t-titre-case: 15px; --t-nom: 14px; --t-texte: 14px; --t-aide: 12px; --t-repere: 11px;
}

/* 1 · Le point : l'unique endroit qui attend l'utilisateur. */
.point { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.repere { font-size: var(--t-repere); line-height: 16px; font-weight: var(--g-gras); letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }
.repere--decision { display: flex; align-items: center; gap: 8px; }
/* « À toi » n'est plus un second point : l'indicateur de tour dit seulement à qui est le tour (voix État). */
.tour--toi { background: none; border-color: transparent; color: var(--text-primary); padding-left: 0; }
.tour--toi .tour__signe { display: none; }
.tour--toi strong { color: var(--accent); }

/* 2 · Trois voix. Décision : carte à bordure accent. Explication : le compagnon. État : sans cadre, atténué. */
.carte--activite { background: none; border: 0; padding: 0; gap: 6px; }
.carte--activite .carte__titre, .carte--activite p { font-size: var(--t-aide); font-weight: var(--g-normal); line-height: 18px; color: var(--text-secondary); }
.etat-ligne { font-size: var(--t-aide); line-height: 18px; color: var(--text-secondary); }
.compagnon {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: var(--rayon-case);
  background: var(--bg-hover); color: var(--text-primary); font-size: var(--t-aide); line-height: 18px;
}
.compagnon p, .compagnon li { font-size: var(--t-aide); line-height: 18px; }
.compagnon h4 { font-size: var(--t-aide); line-height: 18px; font-weight: var(--g-gras); margin-top: 6px; }
.compagnon ul { padding-left: 16px; list-style: disc; }
.compagnon__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compagnon__tete .lien, .compagnon--replie .lien { font-size: var(--t-aide); color: var(--text-primary); }
.compagnon__cas { margin-top: 6px; padding: 10px 12px; border-radius: var(--rayon-controle); background: var(--bg-surface); }
.compagnon__cas h4 { margin-top: 0; }
.compagnon--replie { background: none; padding: 0; }

/* 3 · La couleur dit un verdict : signe + mot, jamais la couleur seule. */
.banc__signe--ok { color: var(--etat-reussi); }
.banc__signe--ko { color: var(--etat-echec); }
.banc__signe--avert { color: var(--etat-attention); }
.banc__cas.is-ok .banc__signe { color: var(--etat-reussi); }
.banc__cas.is-ko .banc__signe, .banc__cas.is-indisponible .banc__signe { color: var(--etat-echec); }
.banc__cas.is-ko, .conditions li.is-ko { background: var(--etat-echec-fond); border-color: transparent; border-radius: var(--rayon-controle); }
.banc__cas.is-avert { background: var(--etat-attention-fond); border-radius: var(--rayon-controle); }
.banc__cas.is-indisponible { background: var(--etat-attention-fond); border-radius: var(--rayon-controle); }
.banc__cas.is-ko .banc__ligne, .banc__cas.is-avert .banc__ligne { padding-inline: 10px; }
.conditions li.is-ko { padding: 8px 10px; }
.bc-carte__titre--reussi { color: var(--etat-reussi); }
.bc-carte__titre--attention { color: var(--etat-attention); }
.bc-carte__titre--echec { color: var(--etat-echec); }
.bc-carte__titre--reussi::before { content: "✓ "; }
.bc-carte__titre--attention::before { content: "! "; }
.bc-carte__titre--echec::before { content: "✕ "; }
.pastille-etat--reussi, .pastille-etat--attention, .pastille-etat--echec { border-color: transparent; font-weight: var(--g-moyen); }
.pastille-etat--reussi { background: var(--etat-reussi-fond); color: var(--etat-reussi); }
.pastille-etat--attention { background: var(--etat-attention-fond); color: var(--etat-attention); }
.pastille-etat--echec { background: var(--etat-echec-fond); color: var(--etat-echec); }
.pastille-etat--reussi::before { content: "✓ "; margin-right: 4px; }
.pastille-etat--attention::before { content: "! "; margin-right: 4px; }
.pastille-etat--echec::before { content: "✕ "; margin-right: 4px; }
.qualification .qualification__pastille { background: var(--etat-attention-fond); border-color: transparent; color: var(--etat-attention); font-weight: var(--g-moyen); }
.qualification .qualification__pastille::before { content: "! "; margin-right: 4px; }
.attache .attache__avis--attention { border-left-color: var(--etat-attention); background: var(--etat-attention-fond); }
.attache .attache__avis--echec { border-left-color: var(--etat-echec); background: var(--etat-echec-fond); }
.suggestion-limite { border-left-color: var(--etat-attention); background: var(--etat-attention-fond); }
.alerte--attention { background: var(--etat-attention-fond); }

/* 4 · La taille dit la nature de l'information : six tailles seulement dans les vues de création, de Skills et de fiche.
   (Les valeurs techniques — SKILL.md, fiche technique, nombres en police à chasse fixe — restent hors échelle.) */
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) {
  /* Titre de vue et verdict : 24 gras. */
  --v: 1;
}
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) h1 { font-size: var(--t-titre-vue); line-height: 30px; font-weight: var(--g-gras); }
:is(.bc-carte__titre, .avis-resume__chiffre, .banc__chiffre) { font-size: var(--t-titre-vue); line-height: 30px; font-weight: var(--g-gras); }
/* Question et titres de section : 15 gras. */
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) :is(h2, h3, .carte__titre, .fiche__nom, .canevas__identite h2, .skills-panneau__identite h2) { font-size: var(--t-titre-case); line-height: 22px; font-weight: var(--g-gras); }
/* Nom d'un élément et texte à lire : 14. */
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) :is(.btn, .niveaux button, .onglet, .frise__etape, .cas-carte h4, .skill-ligne__nom, .banc__nom, .attache__nom, .infos dd, .mission, .pas-a-pas strong, .rubrique, .annuaire__nom, input, select, textarea, .suggestion, .fiche__texte, .md) { font-size: var(--t-texte); }
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) :is(.btn, .niveaux button, .onglet, .frise__etape, .cas-carte h4, .skill-ligne__nom, .banc__nom, .attache__nom) { font-weight: var(--g-moyen); }
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) :is(.btn, .suggestion) { line-height: 20px; }
/* Aide, détail, raison : 12 atténué. */
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) :is(.hint, .statut, .lien, .name, .muted, .skill-ligne__desc, .skill-ligne__meta, .banc__raison, .banc__detail, .banc__score, .bc-note,
  .bc-carte__entete, .attache__avis, .attache__desc, .vide, .alerte, .carte--note-info, .infos dt, .cas-carte, .cas-carte p, .cas-carte__attendu, .skills-panneau__identite p, .canevas__identite p,
  .conditions .muted, .pas-a-pas .muted, .avis-liste__tete .muted, .interruption, .interruption dt, .versions li .muted, .carte p.muted, .cas label, .cas legend, .attribution, .choix__cout, .banc__sous p, .plan__quand, .plan__vide, .plan__vocabulaire dd, .volet .fiche__justification, .banc__extrait summary) {
  font-size: var(--t-aide); line-height: 18px;
}
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) :is(.attache__avis, .alerte p, .interruption dd) { font-size: var(--t-aide); }
/* Repère : 11 gras en capitales espacées. */
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) :is(.volet__bloc h4, .compagnon h4.repere-h) { font-size: var(--t-repere); line-height: 16px; font-weight: var(--g-gras); letter-spacing: .08em; text-transform: uppercase; }
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) :is(.compte, .tour, .tour strong, .tour span) { font-size: var(--t-repere); }
.skills-vue .etoile { font-size: var(--t-texte); }
.skills-vue .etoiles--saisie .etoile { font-size: var(--t-titre-vue); }
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) .avatar { font-size: var(--t-aide); }
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) .avatar--lg { font-size: var(--t-texte); }
:is(.creation, .creation-skill, .skills-vue, .fiche-vue) :is(.versions li, .versions strong, .avis-liste p, .avis-liste strong, .attaches, .attache) { font-size: var(--t-texte); }
#creation-demarrage h2, #skill-demarrage h2 { font-size: var(--t-titre-case); line-height: 22px; }

/* Canevas des deux créations : la grande carte blanche disparaît, le canevas est une pile de cases. */
.canevas { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 2px 4px 4px 2px; gap: 12px; }
.canevas__agent, .frise, .case { padding: 16px 20px; }
.frise { border-bottom: 1px solid var(--border-subtle); }
.frise { padding-bottom: 16px; }
.canevas__etape { gap: 12px; }
.case--entete { display: flex; flex-direction: column; gap: 12px; }
.case--entete .canevas__tete { margin: 0; }
.case--entete .onglets { margin-bottom: -1px; }
.canevas__etape > .panneau-plan, .canevas__etape > .case { padding-top: 0; }
.canevas__etape > .case { padding-top: 16px; }
.canevas__etape > .panneau-plan { padding: 0; }
.panneau-plan { display: flex; flex-direction: column; gap: 12px; }
.panneau-plan[hidden] { display: none; }
.volet { gap: 12px; }
.volet--deux { gap: 12px; }
.volet__bloc { padding: 16px 20px; }
.volet__cote { border-left: 0; padding-left: 0; gap: 12px; }
.volet--egal > .volet__bloc, .volet--egal > .volet__cote { flex: 1 1 0; width: auto; }
.volet--egal > .volet__cote > .volet__bloc { height: 100%; }
.volet__extrait { max-width: none; background: var(--bg-surface); }
.anneau { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border-controle); font-size: var(--t-texte); color: var(--text-primary); }
.skills-rubrique { gap: 12px; }

/* ===== Retouches après l'essai réel (passe 4) ===== */
/* 1 · Saisie multiligne : au repos, une ligne entière, centrée (jamais une hauteur nulle ni un texte coupé). */
.composer textarea { min-height: 36px; box-sizing: border-box; }
/* 2 · Colonne d'entretien : le fil défile, la pile (compagnon puis décision) reste sous lui ; la décision est toujours entière, en bas,
   le compagnon prend l'espace restant et défile seul depuis son début. */
.creation__pile { flex: 0 1 auto; min-height: 0; max-height: 68vh; display: flex; flex-direction: column; gap: 12px; }
.creation__pile:empty { display: none; }
.creation__pile > .compagnon { flex: 1 1 auto; min-height: 96px; overflow-y: auto; scrollbar-width: thin; }
.creation__pile > :not(.compagnon) { flex: none; }
.creation__pile > .carte--decision { overflow: visible; }
#fil .choix .btn, #fil-skill .choix .btn, .creation__pile .choix .btn { height: auto; min-height: 32px; padding-block: 7px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.creation__fil { min-height: 80px; }
@media (max-width: 1100px) {
  .creation--large .creation__pile { max-height: none; }
  .creation--large .creation__pile > .compagnon { overflow: visible; flex: none; }
}
/* 3 · Tous les repères ont le même style : 11 gras, capitales espacées. */
.repere, p.repere, h1.repere, .carte p.repere, .compagnon p.repere {
  font-size: var(--t-repere); line-height: 16px; font-weight: var(--g-gras); letter-spacing: .08em; text-transform: uppercase;
}
/* Espacement des événements et des restrictions de skills. */
#interdits-titre { margin-top: 28px; }
.annuaire__date { display: block; font-size: var(--t-aide); color: var(--text-secondary); }
.evenements { margin-bottom: 20px; padding-left: 20px; }
.referent-formulaire { display: grid; gap: 16px; }
.referent-formulaire label { display: grid; gap: 8px; }
.politique-regles { border: 0; margin: 0; padding: 0; min-width: 0; }
.politique-regles legend { font-weight: var(--g-moyen); margin-bottom: 12px; }
.referent-formulaire .politique-regle { display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin-bottom: 8px; border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); cursor: pointer; }
.politique-regle input { flex: 0 0 auto; width: auto; margin-top: 3px; }
.politique-regle span { display: grid; gap: 4px; }
.politique-seuil input { max-width: 140px; }
.referent-differences { margin: 16px 0; overflow-wrap: anywhere; }
.skills-panneau .retrait-cartes > .carte { min-width: 0; }
.skills-panneau .retrait-cartes form textarea { min-width: 0; width: 100%; }

.politique-entete { display: block; }
.referent-formulaire :is(textarea, select, input[type="number"]) {
  width: 100%; min-width: 0; padding: 8px 10px; border-radius: var(--rayon-controle); font: inherit;
  background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-primary);
}
.referent-formulaire textarea { resize: vertical; }
.referent-formulaire input[type="radio"] { accent-color: var(--accent); }

/* Tools : le catalogue reprend les cases et les quatre rubriques de Skills. */
.tools-vue { display: none; }
.chat[data-view="tools"] > :not(.tools-vue) { display: none; }
.chat[data-view="tools"] .tools-vue { display: flex; flex-direction: column; gap: 20px; width: 100%; min-height: 0; overflow-y: auto; padding: 28px 32px; }
.tools-vue h1 { font-size: var(--t-titre-vue); }
.tools-vue h2, .activite-agent > h2 { font-size: var(--t-titre-case); font-weight: var(--g-gras); }
.tools-vue h3, .activite-agent h3 { font-size: var(--t-texte); font-weight: var(--g-moyen); }
.tools-vue .hint, .activite-agent .hint { font-size: var(--t-aide); line-height: 1.5; color: var(--text-secondary); }
.tools-grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; }
.tools-ligne { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.tools-ligne__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.tools-ligne__tete > div { min-width: 0; }
.tools-identite { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.tools-identite > :last-child { min-width: 0; }
.tools-logo { display: grid; place-items: center; flex: none; border-radius: var(--rayon-controle); object-fit: contain; }
.tools-logo--32 { width: 32px; height: 32px; font-size: var(--t-texte); }
.tools-logo--40 { width: 40px; height: 40px; font-size: var(--t-titre-case); }
.tools-logo--20 { width: 20px; height: 20px; border-radius: var(--rayon-controle); font-size: var(--t-repere); }
/* Calque discret : les lettres gardent la teinte d'agent, avec ≥ 4,5:1 dans les huit thèmes. */
.tools-logo--monogramme { background: color-mix(in srgb, var(--tint) 8%, var(--fond-logo, var(--bg-surface))); color: var(--tint); font-weight: var(--g-moyen); line-height: 1; }
[data-theme="nuit"] .tools-logo--monogramme { --fond-logo: var(--bg-app); }
.tools-etat { font-size: var(--t-aide); line-height: 1.4; }
.tools-etat--reussi { color: var(--etat-reussi); }
.tools-etat--echec { color: var(--etat-echec); }
.tools-etat--attention { color: var(--etat-attention); }
.tools-ligne .tools-etat, #tools-panneau > header > .tools-etat { padding: 2px 9px; border: 1px solid currentColor; border-radius: var(--rayon-case); flex: none; }
#tools-statut:empty { display: none; }
#tools-panneau { min-height: 400px; display: flex; flex-direction: column; gap: 20px; }
#tools-panneau .onglets { flex-wrap: wrap; }
.tools-outils, .tools-accords, .tools-journal { list-style: none; margin: 0; padding: 0; }
.tools-outils li, .tools-accords li { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; border-bottom: 1px solid var(--border-subtle); padding: 12px 0; }
.tools-formulaire { display: flex; flex-direction: column; gap: 16px; }
.tools-formulaire label { display: flex; flex-direction: column; gap: 6px; }
.tools-formulaire input, .tools-formulaire textarea, .tools-formulaire select { width: 100%; min-width: 0; border: 1px solid var(--border-controle); padding: 10px 12px; border-radius: var(--rayon-controle); background: var(--bg-surface); color: var(--text-primary); font: inherit; }
.tools-formulaire > .btn { align-self: flex-start; }
.tools-compte-case { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--rayon-case); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tools-compte-case > .btn { align-self: flex-start; }
.tools-compte-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.tools-compte-infos { display: grid; grid-template-columns: minmax(100px, 30%) minmax(0, 1fr); margin-top: 0; }
.tools-compte-infos dt, .tools-compte-infos dd { padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.tools-compte-infos dt { padding-right: 12px; }
.tools-compte-infos dd { text-align: left; }
.tools-par-agent { display: flex; flex-direction: column; gap: 8px; }
.tools-agent { border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; }
.tools-vue, .activite-agent { font-size: var(--t-texte); overflow-wrap: anywhere; }
.tools-vue .btn, .activite-agent .btn { height: auto; min-height: 36px; white-space: normal; }
#tools-modes { display: flex; border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); padding: 4px; gap: 4px; }
#tools-modes button { padding: 7px 12px; border-radius: var(--rayon-controle); }
#tools-modes button[aria-pressed="true"] { background: var(--bg-hover); }
#tools-modes button[hidden] { display: none; }
.tools-registre { display: flex; flex-direction: column; gap: 10px; }
.tools-registre-carte details { padding: 8px 12px; }
.tools-registre-carte summary { cursor: pointer; }
.tools-nom-technique { display: block; margin-top: 4px; }
.tools-registre [aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tools-changements { background: var(--bg-hover); padding: 16px 18px; border-radius: var(--rayon-case); }
.tools-changements .repere { font-size: var(--t-repere); color: var(--text-secondary); }
.tools-changements ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
#tools-panneau.tools-publication { gap: 16px; }
.tools-controles { display: flex; flex-direction: column; gap: 6px; }
.tools-note { margin: 0; color: var(--text-secondary); font-size: var(--t-aide); line-height: 1.5; }
.tools-note footer { display: inline; margin-left: 4px; }


/* ======================================================================================================
   Identité 2026 — mise en page et habillage en verre B des vues (contrat de code § 8.1 à 8.7).
   Trois niveaux partout : la scène, le verre (plateau, rails, panneau d'activité), les cases.
   ====================================================================================================== */
.app {
  position: relative; z-index: 1; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; align-items: flex-start; gap: var(--espace-4); padding: var(--espace-5) var(--espace-4);
}
.rail {
  flex: none; max-height: 100%; overflow: hidden auto; scrollbar-width: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--espace-2); padding: var(--espace-3) var(--espace-2);
}
.rail > * { position: relative; }
/* Le rail des sections prend toute la hauteur : la pastille de l'employé est ancrée en bas (planche E7). */
.rail--left { width: 66px; align-self: stretch; }
.rail--right { width: 74px; }
.rail .sep { width: var(--espace-5); height: 1px; background: var(--border-subtle); flex: none; }
.logo { border-radius: var(--rayon-controle); font-weight: var(--g-gras); font-size: var(--t-texte); }
.rail-item { width: var(--controle-h); height: var(--controle-h); border-radius: var(--rayon-controle); color: var(--text-primary); }
.rail-item:hover { background: var(--bg-surface); }
.rail-item[aria-current="page"] { background: var(--accent-doux); color: var(--text-primary); box-shadow: var(--ombre-case); }
#employe { display: grid; place-items: center; margin-top: auto; }
#employe:empty { display: none; }
#employe .rail-item { border-radius: var(--rayon-rond); background: var(--bg-controle-verre); border: 1px solid var(--border-controle); font-size: var(--t-aide); font-weight: var(--g-gras); }

/* Le plateau : l'unique panneau en verre d'une vue ; dans le fil, le panneau d'activité est le second. */
.chat {
  flex: 1; min-width: 0; height: 100%; padding: 0; overflow: hidden; border: 0;
  display: flex; flex-direction: column; align-items: stretch;
  --agent-bulle: color-mix(in srgb, var(--teinte, transparent) 22%, transparent);
}
.chat[data-view="chat"] { flex: 0 1 var(--largeur-fil); margin-left: auto; }
.chat[data-view="creation"]:has(> #creation:not(.creation--large)), .chat[data-view="creation-skill"]:has(> #creation-skill:not(.creation--large)), .chat[data-view="bientot"] {
  flex: 0 1 var(--largeur-fil); margin-inline: auto;
}
.activite-agent {
  flex: 0 1 var(--largeur-activite); min-width: 320px; max-height: 100%; margin-right: auto; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-4);
  font-size: var(--t-texte); overflow-wrap: anywhere;
}

/* Bustes : collègue de la teinte de l'agent, poses embarquées, calque de présence animé. */
.avatar { display: inline-flex; }
.buste { position: relative; flex: none; display: inline-flex; width: var(--controle-h); height: var(--controle-h); border-radius: var(--rayon-rond); background: var(--bg-surface); color: var(--text-primary); font-size: var(--t-aide); font-weight: var(--g-gras); line-height: 1; }
.buste__cercle { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; background: color-mix(in srgb, var(--tint) 28%, var(--bg-surface)); border: 2px solid color-mix(in srgb, var(--tint) 70%, transparent); }
.buste__pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s cubic-bezier(.2,.8,.2,1); }
.buste__pose:not([hidden]) { opacity: 1; }
.buste__calque { position: absolute; inset: 0; pointer-events: none; }
.buste__halo { position: absolute; inset: -6px; border-radius: var(--rayon-rond); border: 2px solid var(--accent); opacity: 0; }
.buste__pense, .buste__frappe, .buste__badge { position: absolute; opacity: 0; transition: opacity .25s; }
.buste__pense { right: -2px; top: 6px; display: flex; gap: 2px; }
.buste__pense i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-primary); opacity: .35; }
.buste__frappe { right: -6px; bottom: 18%; display: flex; gap: 2px; padding: 3px 5px; border-radius: var(--rayon-rond); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.buste__frappe i { width: 3px; height: 3px; border-radius: 50%; background: var(--tint); }
.buste__badge { right: -4px; top: -2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--bg-surface); box-shadow: 0 3px 8px -3px rgba(0,0,0,.35); }
.buste__sigle {
  position: relative; z-index: 1; align-self: flex-end; margin-left: auto; margin-right: -10px; margin-bottom: -4px;
  min-width: 30px; padding: 3px var(--espace-2); border-radius: var(--rayon-controle);
  font-size: var(--t-repere); line-height: var(--i-repere); font-weight: var(--g-gras); text-align: center; box-shadow: var(--ombre-case);
}
.buste[data-etat="attend"] .buste__halo { opacity: 1; animation: halo 2s ease-out infinite; }
.buste[data-etat="reflechit"] .buste__pense, .buste[data-etat="reflechit"] .buste__pense i { opacity: 1; }
.buste[data-etat="reflechit"] .buste__pense i { animation: point 1.3s infinite; }
.buste[data-etat="reflechit"] .buste__pense i:nth-child(2) { animation-delay: .2s; }
.buste[data-etat="reflechit"] .buste__pense i:nth-child(3) { animation-delay: .4s; }
.buste[data-etat="travaille"] .buste__frappe { opacity: 1; }
.buste[data-etat="travaille"] .buste__frappe i { animation: point .9s infinite; }
.buste[data-etat="travaille"] .buste__frappe i:nth-child(2) { animation-delay: .15s; }
.buste[data-etat="travaille"] .buste__frappe i:nth-child(3) { animation-delay: .3s; }
.buste[data-etat="ecoute"] .buste__pose, .buste[data-etat="reunion"] .buste__pose { animation: penche-doux 3s ease-in-out infinite; }
.buste[data-etat="reussi"] .buste__badge { opacity: 1; background: var(--etat-reussi); color: var(--bg-app); }
.buste[data-etat="reussi"] .buste__badge::after { content: "✓"; font-size: 10px; }
.buste[data-etat="echec"] .buste__badge { opacity: 1; background: var(--etat-attention); color: var(--bg-app); }
.buste[data-etat="echec"] .buste__badge::after { content: "⚠"; font-size: 10px; }
.buste[data-etat="echec"] .buste__pose { filter: saturate(.55) brightness(.94); animation: secoue .5s 1; }
.buste[data-etat="pause"] .buste__badge { opacity: 1; background: var(--text-muted); color: var(--bg-app); }
.buste[data-etat="pause"] .buste__badge::after { content: "❚❚"; font-size: 8px; letter-spacing: -1px; }
.buste[data-etat="pause"] .buste__pose { filter: brightness(.82); }
.buste[data-etat="hors"] .buste__badge { opacity: 1; background: var(--border-subtle); color: var(--text-primary); }
.buste[data-etat="hors"] .buste__badge::after { content: "☾"; font-size: 10px; }
.buste[data-etat="hors"] .buste__pose { filter: grayscale(1) brightness(.7); }

@keyframes halo { 0% { scale: .8; opacity: .8 } 100% { scale: 1.25; opacity: 0 } }
@keyframes point { 0%,60%,100% { opacity: .3; translate: 0 0 } 30% { opacity: 1; translate: 0 -3px } }
@keyframes penche-doux { 0%,100% { rotate: -.4deg } 50% { rotate: .4deg } }
@keyframes secoue { 0%,100% { translate: 0 0 } 20% { translate: -2px 0 } 40% { translate: 2px 0 } 60% { translate: -1px 0 } 80% { translate: 1px 0 } }

.avatar--sm { width: var(--espace-6); height: var(--espace-6); }
.avatar--lg { width: var(--espace-7); height: var(--espace-7); }
.agents { gap: var(--espace-2); }
.agent { width: 56px; height: 56px; border: 0; border-radius: var(--rayon-rond); opacity: 1; display: grid; place-items: center; }
.agent .buste { width: var(--espace-7); height: var(--espace-7); }
.agent:hover { opacity: 1; background: var(--bg-surface); }
.agent.is-present { border: 0; }
.agent[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.tous-agents { width: 56px; height: auto; flex-direction: column; display: flex; align-items: center; gap: var(--espace-1); padding: var(--espace-3) 0 var(--espace-2); border-radius: var(--rayon-case); background: var(--bg-controle-verre); border: 1px solid var(--border-controle); }
.tous-agents::after { content: attr(data-compte); position: static; min-width: 0; height: auto; padding: 0; background: none; color: var(--text-primary); font-size: var(--t-aide); line-height: var(--i-aide); font-weight: var(--g-normal); }
#ajouter-agent { width: 46px; height: 46px; border-radius: var(--rayon-rond); background: var(--bg-controle-verre); border: 1px solid var(--border-controle); }

/* ----- Fil de l'équipe ----- */
.fil-tete { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-5) var(--espace-5) 0; }
.presence { display: flex; align-items: center; gap: var(--espace-3); min-width: 0; }
.presence--fil { padding: var(--espace-2) var(--espace-4) var(--espace-2) var(--espace-2); }
.presence__visage { flex: none; display: grid; place-items: center; }
.presence__texte { display: flex; flex-direction: column; min-width: 0; }
.presence__nom { font-size: var(--t-nom); line-height: var(--i-texte); font-weight: var(--g-moyen); overflow-wrap: anywhere; }
.presence__etat { font-size: var(--t-aide); line-height: var(--i-aide); color: var(--text-secondary); }
.presence__etat--toi { color: var(--accent); }
.presence__etat[hidden] { display: none; }
.presence__etat .tour__signe { display: inline-block; width: 10px; height: 10px; margin-right: var(--espace-2); vertical-align: -1px; border-radius: var(--rayon-rond); border: 2px solid var(--accent); border-right-color: transparent; animation: tourne .9s linear infinite; }
.presence__visage--fabricant { width: var(--espace-7); height: var(--espace-7); border-radius: var(--rayon-rond); background: var(--accent); }
.presence__visage--fabricant i { width: 18px; height: 18px; border-radius: var(--rayon-rond); background: var(--texte-sur-accent); }
.voix-bascule { flex: none; width: auto; height: auto; min-height: var(--espace-6); padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-controle); font-size: var(--t-aide); line-height: var(--i-aide); color: var(--text-secondary); }
.voix-bascule:hover { color: var(--text-primary); }
.fil-tete__droite { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--espace-2); }
.fil-tete .voix-bascule { background: var(--bg-controle-verre); border: 1px solid var(--border-controle); }
.voix-bascule[aria-pressed="true"] { background: var(--accent-doux); border-color: var(--border-controle); color: var(--text-primary); }
.voix-bascule--joue { box-shadow: 0 0 0 2px var(--accent); }

.thread {
  flex: 1; min-height: 0; width: auto; max-width: none; padding: var(--espace-4) var(--espace-5); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--espace-4); scrollbar-width: thin; scrollbar-color: var(--border-controle) transparent;
}
.thread > :first-child { margin-top: auto; }
.msg { min-width: 0; }
.msg--user { display: flex; justify-content: flex-end; }
.msg--user p { max-width: 85%; padding: var(--espace-3) var(--espace-4); background: linear-gradient(var(--agent-bulle), var(--agent-bulle)), var(--case-reflet), var(--bg-surface); font-size: var(--t-titre-case); line-height: var(--i-lecture); overflow-wrap: anywhere; white-space: pre-line; }
.msg--agent { display: flex; align-items: flex-start; gap: var(--espace-3); }
.msg--agent > .buste { margin-top: var(--espace-1); }
.msg__case { flex: 1; min-width: 0; padding: var(--espace-3) var(--espace-4); }
.msg__vue { margin-top: var(--espace-2); }
.msg__vue .vue-chargement { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--rayon-case); }
.msg__vue .vue-erreur { background: var(--etat-echec-fond); border: 1px solid var(--etat-echec); }
.msg--agent .name { font-size: var(--t-nom); line-height: var(--i-texte); font-weight: var(--g-moyen); color: var(--text-primary); margin-bottom: var(--espace-1); }
.msg .md { max-width: none; font-size: var(--t-titre-case); line-height: var(--i-lecture); min-width: 0; overflow-wrap: anywhere; }
.msg__pied { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-1) var(--espace-3); margin-top: var(--espace-2); font-size: var(--t-aide); line-height: var(--i-aide); color: var(--text-secondary); }
.msg__pied .lien, .msg__pied .statut { font-size: var(--t-aide); line-height: var(--i-aide); min-height: var(--cible-min); margin: 0; }
.msg__actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--espace-1) var(--espace-3); margin: 0; }
.msg--jour, .msg--systeme, .typing, .etat-ligne { align-self: flex-start; padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-controle); font-size: var(--t-aide); line-height: var(--i-aide); color: var(--text-secondary); margin: 0; opacity: 1; }
.msg--systeme { display: flex; align-items: center; gap: var(--espace-2); }
.msg--erreur { align-self: stretch; }
.fil-vide { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: var(--espace-3); text-align: center; font-size: var(--t-texte); color: var(--text-primary); }
.fil-vide h2 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); font-weight: var(--g-gras); }
.thread > .bandeau { flex: none; }

/* Mémo vocal : une ligne discrète au pied de la réponse ; l'onde n'apparaît que pendant la synthèse ou la lecture. */
.memo-bloc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
.memo { display: inline-flex; align-items: center; gap: var(--espace-2); margin: 0; padding: 0; background: none; border-radius: 0; }
.memo__bouton { width: var(--cible-min); height: var(--cible-min); border-radius: var(--rayon-rond); background: none; border: 1px solid var(--border-controle); color: var(--text-primary); }
.memo__bouton svg { width: 10px; height: 10px; }
.memo__onde { display: none; }
.memo--charge .memo__onde, .memo--lecture .memo__onde { display: flex; }
.memo__onde i { background: var(--text-secondary); }
.memo__duree { min-width: 0; font-size: var(--t-aide); font-weight: var(--g-normal); color: var(--text-secondary); }

/* Saisie : une case ; le destinataire y est dit une fois, à la teinte de l'agent ; l'envoi garde la couleur de l'action. */
#saisie-fil { flex: none; width: auto; max-width: none; padding: 0 var(--espace-5) var(--espace-5); }
.composer { width: auto; max-width: none; min-height: 52px; margin: 0; padding: var(--espace-2); gap: var(--espace-2); align-items: center; border-radius: var(--rayon-case); border: 1px solid var(--border-controle); }
.composer textarea { padding: var(--espace-2) var(--espace-1); font-size: var(--t-titre-case); line-height: var(--i-lecture); min-height: 40px; color: var(--text-primary); }
.composer textarea::placeholder { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer .icon-btn { width: var(--controle-h); height: var(--controle-h); border-radius: var(--rayon-rond); color: var(--text-primary); }
.send { width: var(--controle-h); height: var(--controle-h); border-radius: var(--rayon-rond); background: var(--accent); color: var(--texte-sur-accent); border: 1px solid var(--accent); }
.send:hover { background: var(--accent-survol); }
.send:disabled { opacity: .5; cursor: default; }
#destinataire { flex: none; width: auto; max-width: 40%; margin: 0; padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-controle); background: linear-gradient(var(--agent-bulle), var(--agent-bulle)), var(--bg-hover); color: var(--text-primary); font-size: var(--t-nom); line-height: var(--i-texte); font-weight: var(--g-moyen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-tete .activite-bascule { display: none; }
#decision-fil { flex: none; margin: 0 var(--espace-5) var(--espace-3); max-height: 55vh; overflow-y: auto; }
.aide-fil, .secrets-fil { flex: none; width: auto; max-width: none; margin: 0 var(--espace-5) var(--espace-3); padding: var(--espace-3) var(--espace-4); font-size: var(--t-texte); }
.secrets-fil { margin: var(--espace-3) 0 0; }
/* Un seul bouton plein par écran : dès qu'une décision attend, l'envoi et les autres boutons pleins du fil passent en secondaire. */
.accord-en-attente #composer .send, .accord-en-attente #thread .btn--primaire,
.chat[data-view="chat"]:has(:is(#thread, #aide-fil, #secrets-fil) .btn--primaire) #composer .send,
.creation:has(.btn--primaire:not([hidden])) .send { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-controle); }

/* ----- Panneau « Activité » ----- */
.activite-tete { display: flex; align-items: center; gap: var(--espace-3); }
.activite-tete__texte { flex: 1; min-width: 0; padding: var(--espace-2) var(--espace-4); }
.activite-fermer { display: none; }
#activite-contenu { display: flex; flex-direction: column; gap: var(--espace-3); }
.activite-agent .carte { padding: var(--espace-4); display: flex; flex-direction: column; gap: var(--espace-3); margin: 0; }
.activite-agent h3, #decision-fil h3 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); font-weight: var(--g-gras); }
.activite-decision { padding: var(--espace-4); }
.activite-decision .actions { flex-direction: column; flex-wrap: nowrap; }
.activite-decision .actions .btn { width: 100%; }
.activite-decision .hint { font-size: var(--t-aide); line-height: 1.5; color: var(--text-secondary); margin: 0; }
.activite-valeurs { padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-controle); background: var(--bg-hover); }
.activite-valeurs dd { min-width: 0; }
.activite-details summary, .activite-moyens summary { cursor: pointer; list-style: none; }
.activite-details summary::-webkit-details-marker, .activite-moyens summary::-webkit-details-marker { display: none; }
.activite-moyens { padding: var(--espace-3) var(--espace-4); }
.activite-moyens summary { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); }
.activite-moyens .ligne { min-height: var(--controle-h); padding-inline: 0; justify-content: space-between; }
.activite-moyens .ligne > :nth-child(2) { flex: 1; min-width: 0; }
.journal-mission { list-style: none; display: flex; flex-direction: column; }
.journal-mission li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--espace-3); padding: var(--espace-1) 0; }
.journal-mission time { font-size: var(--t-aide); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.journal-mission__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activite-incident { border-color: var(--etat-echec); }
.activite-incident h3 { color: var(--etat-echec); }
.activite-incident--compte { border-color: var(--etat-attention); }
.activite-incident--compte h3 { color: var(--etat-attention); }
/* Ce qui manque pour un travail : une ligne par manque, le besoin à gauche, le geste à droite. */
.manques { display: flex; flex-direction: column; gap: var(--espace-3); border-color: var(--etat-attention); }
.manques h3 { font-size: var(--t-titre-case); }
.manques__liste { list-style: none; display: flex; flex-direction: column; gap: var(--espace-2); }
.manques__liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2) var(--espace-4); padding-block: var(--espace-1); border-top: 1px solid var(--border-subtle); }
.manques__liste li > span:first-child { flex: 1 1 16rem; min-width: 0; }
.manques__fait { color: var(--etat-reussi); font-size: var(--t-aide); }
.manques__erreur { color: var(--etat-echec); font-size: var(--t-aide); flex-basis: 100%; }
.tools-etat { font-size: var(--t-aide); line-height: var(--i-aide); white-space: nowrap; }
.tools-etat--reussi { color: var(--etat-reussi); }
.tools-etat--echec { color: var(--etat-echec); }
.tools-etat--attention { color: var(--etat-attention); }

/* ----- Habillage commun : anciens noms de classes ramenés aux composants de base ----- */
:where(.carte, .skill-ligne, .skills-panneau, .bc-carte, .cas-carte, .attache, .fournisseur, .tuile, .palette, .canevas__agent, .frise, .volet__bloc, .volet__extrait, .garder-cas, .aide-fil, .secrets-fil,
    .nouvelle-version, .composer, .alerte, .encadre, .compagnon, .tools-compte-case, .tools-changements, .pas-a-pas, .cas, .suggestion-limite, .carte--note-info) {
  background: var(--case-reflet), var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--rayon-case); box-shadow: var(--ombre-case); color: var(--text-primary);
}
.carte--decision, .decision { border: 1.5px solid var(--accent); }
.carte--activite { background: none; border: 0; box-shadow: none; }
.repere--decision { color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  height: auto; min-height: var(--controle-h); padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-controle);
  font-size: var(--t-nom); line-height: var(--i-texte); font-weight: var(--g-moyen); white-space: normal;
  background: var(--bg-surface); border: 1px solid var(--border-controle); color: var(--text-primary);
}
.btn:hover { background: var(--bg-hover); }
.btn:disabled { opacity: .5; cursor: default; }
.btn--primaire { background: var(--accent); border-color: var(--accent); color: var(--texte-sur-accent); }
.btn--primaire:hover { background: var(--accent-survol); border-color: var(--accent-survol); filter: none; }
.btn--danger { border-color: var(--etat-echec); color: var(--etat-echec); }
.btn--danger[data-arme] { background: var(--etat-echec-fond); font-weight: var(--g-gras); }
.lien { font-size: var(--t-aide); line-height: var(--i-texte); color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--rayon-controle); }
a.lien { display: inline-block; }
.hint, .muted, .statut { color: var(--text-secondary); font-size: var(--t-aide); line-height: var(--i-aide); }
.statut[data-ton="ok"], .statut[data-ton="erreur"] { color: var(--text-primary); }
.pastille-etat, .chip, .qualification__pastille { height: auto; min-height: var(--cible-min); padding: 0 var(--espace-3); border-radius: var(--rayon-case); font-size: var(--t-aide); line-height: var(--i-aide); font-weight: var(--g-moyen); }
.pastille-etat--echec::before { content: "× "; }
.compte { border-radius: var(--rayon-case); font-size: var(--t-repere); font-weight: var(--g-gras); background: var(--bg-hover); }
.qualification { color: var(--text-secondary); font-size: var(--t-aide); line-height: var(--i-aide); }
.mono, .md code, .spec { font-size: var(--t-aide); }
.md code { border-radius: var(--rayon-controle); background: var(--bg-hover); }
.md h3 { font-size: var(--t-titre-case); font-weight: var(--g-gras); }
.md h4 { font-size: var(--t-nom); font-weight: var(--g-moyen); }
.md-tableau { border-radius: var(--rayon-controle); }
.nouvelle-version { z-index: 40; }

/* ----- Annuaire : il prend la place du panneau d'activité ----- */
.annuaire { position: fixed; z-index: 45; top: var(--espace-5); right: calc(74px + 2 * var(--espace-4)); transform: none; width: min(var(--largeur-activite), calc(100vw - 2 * var(--espace-4))); max-height: calc(100dvh - 2 * var(--espace-5)); padding: var(--espace-4); gap: var(--espace-3); border: 0; }
.annuaire-ouvert .activite-agent { visibility: hidden; }
.annuaire__tete { gap: var(--espace-3); }
.annuaire__fiche { min-height: var(--espace-6); padding: var(--espace-1) var(--espace-3); font-size: var(--t-aide); }
.annuaire__tete h2 { flex: 1; padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-case); background: var(--bg-surface); border: 1px solid var(--border-subtle); font-size: var(--t-titre-case); font-weight: var(--g-gras); }
.annuaire__bascule { border-radius: var(--rayon-controle); }
.annuaire__bascule button { min-height: var(--espace-6); border-radius: var(--rayon-controle); font-size: var(--t-nom); font-weight: var(--g-normal); }
.annuaire__bascule button[aria-pressed="true"] { background: var(--accent-doux); font-weight: var(--g-moyen); }
.annuaire__recherche { height: var(--controle-h); border-radius: var(--rayon-controle); color: var(--text-primary); }
.annuaire__recherche input::placeholder { color: var(--text-muted); }
.annuaire__liste { padding: var(--espace-2); border-radius: var(--rayon-case); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.annuaire__agent { min-height: var(--ligne-h); border-radius: var(--rayon-controle); gap: var(--espace-3); }
.annuaire__agent:hover { background: var(--bg-hover); }
.annuaire__agent[aria-pressed="true"] { background: var(--accent-doux); }
.annuaire__nom { font-size: var(--t-nom); font-weight: var(--g-moyen); }
.annuaire__mission, .annuaire__date { font-size: var(--t-aide); color: var(--text-secondary); }
.annuaire__vide { font-size: var(--t-aide); color: var(--text-secondary); }

/* ----- Le personnage de l'agent suivi, sur la scène, dans la vue du fil et à partir de 1440 px ----- */
@media (min-width: 1440px) and (min-height: 760px) {
  #scene-personnage:not([hidden]) { display: block; inset: auto 150px 0 auto; width: auto; height: 46vh; }
}

/* ----- Sous 1100 px : un seul panneau ; la décision passe au-dessus de la saisie, le reste derrière « Activité » ----- */
@media (max-width: 1100px) {
  .app { gap: var(--espace-3); padding: var(--espace-3); }
  .chat[data-view="chat"] { flex: 1; margin: 0; }
  .activite-agent { display: none; }
  .activite-ouverte .activite-agent:not([hidden]) { display: flex; position: fixed; z-index: 8; inset: var(--espace-3) var(--espace-3) var(--espace-3) auto; width: min(var(--largeur-activite), calc(100vw - 2 * var(--espace-3))); min-width: 0; max-height: none; margin: 0; }
  .activite-fermer { display: grid; width: var(--controle-h); height: var(--controle-h); border-radius: var(--rayon-rond); background: var(--bg-surface); color: var(--text-primary); }
  .fil-tete .activite-bascule { display: inline-flex; align-items: center; color: var(--text-primary); font-weight: var(--g-moyen); }
  .annuaire { right: var(--espace-3); top: var(--espace-3); max-height: calc(100dvh - 2 * var(--espace-3)); }
}
/* ----- Sous 640 px : les deux barres sont derrière « Menu » ----- */
.barres-bascule { display: none; }
@media (max-width: 640px) {
  .app { padding: calc(var(--controle-h) + 2 * var(--espace-2)) var(--espace-2) var(--espace-2); }
  .barres-bascule {
    display: grid; place-items: center; position: fixed; z-index: 7; top: var(--espace-2); left: var(--espace-2); width: var(--controle-h); height: var(--controle-h);
    border-radius: var(--rayon-controle); background: var(--case-reflet), var(--bg-hover); border: 1px solid var(--border-controle); color: var(--text-primary);
  }
  .rail { display: none; position: fixed; z-index: 6; top: calc(var(--controle-h) + 2 * var(--espace-2)); max-height: calc(100dvh - var(--controle-h) - 3 * var(--espace-2)); }
  .rail--left { left: var(--espace-2); }
  .rail--right { right: var(--espace-2); }
  .app.barres-ouvertes .rail { display: flex; }
  .chat { border-radius: var(--rayon-case); }
  .fil-tete { padding: var(--espace-3) var(--espace-3) 0; flex-wrap: wrap; }
  .thread { padding: var(--espace-3); }
  #saisie-fil { padding: 0 var(--espace-3) var(--espace-3); }
  #decision-fil, .aide-fil { margin-inline: var(--espace-3); }
  .msg--agent > .buste { display: none; }
  .dictee__etat { display: none; }
}
@media (hover: hover) {
  /* Les actions d'une réponse ancienne n'apparaissent qu'au survol ou au focus ; celles de la dernière restent visibles. */
  .msg--agent:not(.est-derniere) .msg__pied > :not(time) { opacity: 0; transition: opacity .15s; }
  .msg--agent:not(.est-derniere):is(:hover, :focus-within) .msg__pied > * { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----- Focus (en fin de feuille, pour l'emporter sur les habillages) : l'accent, cerné de fumée pour tenir 3:1 où qu'il tombe. ----- */
:focus-visible, .composer:focus-within, .annuaire__recherche:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--verre-fumee); }
:is(.composer, .annuaire__recherche) :is(input, textarea):focus-visible { outline: 0; box-shadow: none; }

/* ----- En-tête de vue et menu latéral (fiche d'agent, Paramètres) ----- */
.vue-tete { padding: var(--espace-3) var(--espace-5); }
:is(.settings, .fiche-vue, .skills-vue, .tools-vue, .bientot) h1 { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); font-weight: var(--g-gras); }
:is(.settings, .fiche-vue, .skills-vue, .tools-vue) h1:focus-visible { outline: 0; box-shadow: none; }
:is(.settings, .fiche-vue, .skills-vue, .tools-vue) :is(h2, h3) { font-size: var(--t-titre-case); line-height: var(--i-titre-case); font-weight: var(--g-gras); margin: 0; }
.rubriques { display: flex; flex-direction: column; gap: 2px; padding: var(--espace-2); position: sticky; top: 0; align-self: start; }
.rubrique { display: flex; align-items: center; gap: var(--espace-3); width: 100%; min-height: var(--controle-h); height: auto; padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-controle); text-align: left; font-size: var(--t-nom); font-weight: var(--g-normal); color: var(--text-secondary); }
.rubrique:hover { color: var(--text-primary); background: var(--bg-hover); }
.rubrique[aria-selected="true"] { background: var(--accent-doux); color: var(--text-primary); font-weight: var(--g-moyen); }
.rubrique__icone { color: inherit; }
.panneaux { min-width: 0; display: flex; flex-direction: column; gap: var(--espace-3); }
.panneau { display: flex; flex-direction: column; gap: var(--espace-3); min-width: 0; }
.panneau > .case { display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; }
.confirmation { display: flex; flex-direction: column; gap: var(--espace-3); max-width: 560px; border: 1.5px solid var(--etat-echec); }
.confirmation h3 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); font-weight: var(--g-gras); }
.confirmation .actions { flex-wrap: wrap; }

/* ----- Fiche d'agent ----- */
.chat[data-view="fiche"] .fiche-vue { display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-5); overflow-y: auto; scrollbar-width: thin; }
.fiche-vue > * { max-width: none; margin: 0; }
.fiche-entete { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-3) var(--espace-4); margin: 0; padding: var(--espace-4) var(--espace-5) var(--espace-4) var(--espace-4); }
.fiche-entete__titre { flex: 1 1 240px; min-width: 0; }
.fiche-entete .icon-btn { width: var(--controle-h); height: var(--controle-h); border-radius: var(--rayon-rond); color: var(--text-primary); }
.avatar--xl { width: 64px; height: 64px; }
.fiche-statut { margin: 0; padding: var(--espace-2) var(--espace-4); color: var(--text-primary); font-size: var(--t-texte); line-height: var(--i-texte); }
.fiche-statut:empty { display: none; }
.fiche-corps { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--espace-5); align-items: start; }
.fiche-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3); }
.fiche-duo > .case { display: flex; flex-direction: column; gap: var(--espace-2); }
.mission { font-size: var(--t-titre-case); line-height: var(--i-lecture); max-width: none; }
.fiche-etapes { display: flex; flex-direction: column; gap: var(--espace-2); list-style: none; }
.fiche-etapes li { padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-controle); background: var(--bg-hover); }
.fiche-vue .md { max-width: 80ch; font-size: var(--t-titre-case); line-height: var(--i-lecture); }
.fiche-vue .attaches { margin: 0; gap: var(--espace-2); }
.fiche-vue .attache { flex-wrap: wrap; padding: var(--espace-4) var(--espace-5); }
.fiche-vue .attaches .ligne { flex-wrap: wrap; justify-content: space-between; padding-inline: 0; }
.fiche-vue .attaches .ligne > .attache__nom { flex: 1; min-width: 0; }
.attacher { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--espace-2); }
.attacher .champ { flex: 1 1 240px; }
.versions { display: flex; flex-direction: column; }
.versions .ligne { flex-wrap: wrap; padding-inline: 0; }
.versions__motif { flex: 1 1 200px; min-width: 0; }
.versions .btn { margin-left: auto; }
.versions .confirmation { flex: 1 1 100%; }
.cas--lecture { padding: var(--espace-4) var(--espace-5); }
.cas--lecture .banc__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); flex-wrap: wrap; }
.spec { border-radius: var(--rayon-controle); background: var(--bg-hover); border: 1px solid var(--border-subtle); padding: var(--espace-3); max-height: 60vh; overflow: auto; }
@media (max-width: 880px) {
  .fiche-corps, .chat[data-view="settings"] .settings { grid-template-columns: minmax(0, 1fr); gap: var(--espace-3); }
  .rubriques { position: static; flex-direction: row; flex-wrap: wrap; }
  .rubrique { width: auto; flex: 1 1 auto; justify-content: center; }
  .fiche-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .chat[data-view="fiche"] .fiche-vue { padding: var(--espace-3); }
  .fiche-entete > .btn { flex: 1 1 100%; }
  .fiche-entete__titre { flex: 1 0 100%; }
}

/* ----- Créer un agent, créer un skill : entretien (360 px) à gauche, canevas en pile de cases à droite ----- */
.chat[data-view="creation"] .creation, .chat[data-view="creation-skill"] .creation-skill { max-width: none; padding: var(--espace-5); gap: var(--espace-5); }
.chat:is([data-view="creation"], [data-view="creation-skill"]) .creation--large { max-width: none; padding: var(--espace-5); }
.creation__entretien { gap: var(--espace-3); padding: 0; }
.creation--large .creation__entretien { width: 360px; padding: 0; }
.creation__tete { display: flex; flex-direction: column; gap: var(--espace-3); padding: 0; }
.creation__titre { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-2) var(--espace-4) var(--espace-2) var(--espace-2); }
.creation__titre .btn { min-height: var(--espace-6); padding: var(--espace-1) var(--espace-3); font-size: var(--t-aide); }
.creation .creation__aide { margin: 0; padding: var(--espace-2) var(--espace-4); color: var(--text-secondary); }
.creation--large .creation__aide { display: none; }   /* B3 : la phrase d'aide s'efface dès qu'un plan est à lire */
#creation-demarrage, #skill-demarrage { margin: 0; display: flex; flex-direction: column; gap: var(--espace-3); }
#creation-demarrage h2, #skill-demarrage h2 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); }
.exemples-creation { margin: 0; }
.exemples-creation .btn { min-height: var(--espace-6); padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-case); font-size: var(--t-nom); font-weight: var(--g-normal); text-align: left; justify-content: flex-start; }
.creation__fil { gap: var(--espace-3); scrollbar-color: var(--border-controle) transparent; }
.creation .msg--agent { gap: var(--espace-2); }
.creation .msg--agent > .buste { width: var(--espace-6); height: var(--espace-6); }
.creation .msg--agent > .buste .buste__sigle { display: none; }
.creation .msg__case { display: flex; flex-direction: column; gap: var(--espace-2); }
.creation .msg--user p { font-size: var(--t-texte); line-height: var(--i-texte); }
.creation .carte p, .creation .msg__case p { font-size: var(--t-texte); line-height: var(--i-texte); }
.creation .carte p.repere, .carte p.repere { font-size: var(--t-repere); line-height: var(--i-repere); }
.creation .carte p:is(.muted, .hint, .choix__cout) { font-size: var(--t-aide); line-height: var(--i-aide); }
.msg--correction { align-self: stretch; display: block; }
.msg--correction summary { cursor: pointer; }
.msg--correction ul { margin-top: var(--espace-2); padding-left: var(--espace-4); list-style: disc; }
.suggestion { border-radius: var(--rayon-case); font-size: var(--t-nom); padding: var(--espace-1) var(--espace-3); background: var(--bg-hover); }
.creation .composer { margin: 0; }
.carte--decision { padding: var(--espace-4); gap: var(--espace-3); }
.carte .carte__titre, .carte--decision h3 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); font-weight: var(--g-gras); }
.compagnon { padding: var(--espace-3) var(--espace-4); font-size: var(--t-aide); line-height: var(--i-aide); }
.compagnon :is(p, li, h4) { font-size: var(--t-aide); line-height: var(--i-texte); }
.compagnon--replie { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-2) var(--espace-4); background: var(--case-reflet), var(--bg-surface); }
.creation__pile > .compagnon--replie { flex: none; min-height: 0; overflow: visible; }
.compagnon--replie p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compagnon--replie p strong { font-size: var(--t-nom); font-weight: var(--g-moyen); margin-right: var(--espace-2); }
.compagnon--replie p span { color: var(--text-secondary); }
.compagnon__cas { border-radius: var(--rayon-controle); background: var(--bg-hover); }
.canevas { gap: var(--espace-3); padding: 0 var(--espace-1) 0 0; }
.canevas__agent { padding: var(--espace-4) var(--espace-5); gap: var(--espace-4); }
.canevas .canevas__agent .canevas__identite h2 { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); font-weight: var(--g-gras); }
.canevas__identite p { font-size: var(--t-texte); line-height: var(--i-texte); color: var(--text-secondary); }
.frise { padding: var(--espace-3) var(--espace-5); border-bottom: 1px solid var(--border-subtle); }
.frise__etape { font-size: var(--t-nom); font-weight: var(--g-normal); color: var(--text-secondary); }
.frise__etape.is-active { color: var(--text-primary); font-weight: var(--g-moyen); }
.frise__etat { font-size: var(--t-aide); font-weight: var(--g-normal); color: var(--text-secondary); }
.frise__pastille { width: var(--espace-6); height: var(--espace-6); border-radius: var(--rayon-rond); font-size: var(--t-aide); border: 1.5px solid var(--border-controle); }
.frise__etape.is-faite .frise__pastille { background: var(--etat-reussi-fond); color: var(--etat-reussi); border-color: transparent; }
.frise__etape.is-active .frise__pastille { background: var(--accent-doux); border-color: var(--accent); color: var(--text-primary); }
.canevas__tete h3 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); font-weight: var(--g-gras); }
.canevas .statut { margin: 0; align-self: flex-start; padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-controle); background: var(--bg-surface); color: var(--text-primary); }
.canevas .statut:empty { display: none; }
.canevas__pied { padding: 0; margin-top: auto; }
.onglet__nonlu { border-radius: var(--rayon-rond); background: var(--accent); }
.volet { font-size: var(--t-texte); line-height: var(--i-texte); }
.volet__bloc { padding: var(--espace-4) var(--espace-5); }
.volet__bloc h4 { font-size: var(--t-repere); line-height: var(--i-repere); font-weight: var(--g-gras); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.cas-carte { padding: var(--espace-4) var(--espace-5); color: var(--text-secondary); }
.cas-carte h4 { font-size: var(--t-nom); font-weight: var(--g-moyen); color: var(--text-primary); }
.cas :is(input, select, textarea) { min-height: var(--controle-h); border-radius: var(--rayon-controle); font-size: var(--t-texte); }
.banc__chiffre { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); font-weight: var(--g-gras); }
.banc__cas { border-radius: var(--rayon-controle); }
@media (max-width: 1100px) {
  .chat:is([data-view="creation"], [data-view="creation-skill"]) .creation--large { flex-direction: column; overflow-y: auto; padding: var(--espace-4) var(--espace-4) 120px; }
  .creation--large .creation__entretien { width: 100%; }
  .creation--large .saisie { position: fixed; z-index: 3; left: var(--saisie-g, 110px); right: var(--saisie-d, 118px); bottom: var(--espace-5); padding: 0; background: none; border-radius: 0; }
}
.onglets-selecteur { display: none; }
@media (max-width: 640px) {
  .chat[data-view="creation"] .creation, .chat[data-view="creation-skill"] .creation-skill { padding: var(--espace-3); }
  .chat:is([data-view="creation"], [data-view="creation-skill"]) .creation--large { padding-bottom: 120px; }
  .case--entete .onglets { display: none; }
  .onglets-selecteur { display: flex; }
  .creation--large .saisie { --saisie-g: var(--espace-5); --saisie-d: var(--espace-5); bottom: var(--espace-4); }
  .frise { padding: var(--espace-3); }
}

/* ----- Skills : en-tête en case, liste et panneau en cases ----- */
.chat[data-view="skills"] .skills-vue { max-width: none; padding: var(--espace-5); gap: var(--espace-3); }
.skills-vue__tete { align-items: center; padding: var(--espace-3) var(--espace-5); }
.skills-vue .hint { margin: 0; }
.skills-barre { gap: var(--espace-2) var(--espace-3); }
.skills-barre__note { flex: 0 1 auto; margin-left: auto; padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-controle); background: var(--bg-surface); color: var(--text-secondary); text-align: left; }
.skills-barre__note:empty { display: none; }
.skills-recherche input { height: var(--controle-h); font-size: var(--t-texte); }
.skills-recherche input::placeholder { color: var(--text-muted); }
.niveaux { border-radius: var(--rayon-controle); background: var(--bg-controle-verre); }
.niveaux button { min-height: var(--espace-6); height: auto; border-radius: var(--rayon-controle); font-size: var(--t-nom); font-weight: var(--g-normal); }
.niveaux button[aria-pressed="true"] { background: var(--accent-doux); font-weight: var(--g-moyen); }
.niveaux button:hover:not([aria-pressed="true"]) { background: var(--bg-hover); }
.niveaux .compte { background: transparent; color: var(--text-secondary); font-weight: var(--g-normal); }
.skills-statut { align-self: flex-start; padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-controle); background: var(--bg-surface); color: var(--text-primary); }
/* Une case cliquable porte le bord des contrôles (3:1), pas le liseré décoratif des cases. */
.skill-ligne, .tools-ligne, .palette { border: 1px solid var(--border-controle); }
.skill-ligne { padding: var(--espace-3) var(--espace-4); }
.skill-ligne:hover { border-color: var(--border-controle); }
.skill-ligne[aria-current="true"] { border: 1.5px solid var(--accent); background: var(--accent-doux); padding: var(--espace-3) var(--espace-4); }
.skill-ligne__nom { font-size: var(--t-nom); font-weight: var(--g-moyen); }
.skill-ligne__desc, .skill-ligne__meta { font-size: var(--t-aide); line-height: var(--i-texte); color: var(--text-secondary); }
.skills-panneau { padding: var(--espace-5); gap: var(--espace-4); }
.skill-icone { border-radius: var(--rayon-controle); background: var(--bg-hover); color: var(--text-primary); }
.encadre { padding: var(--espace-3) var(--espace-4); }
.encadre .encadre__titre { font-size: var(--t-aide); font-weight: var(--g-moyen); }
.bc-carte__titre { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); font-weight: var(--g-gras); }
.bc-carte__titre--echec::before { content: "× "; }
.etoiles { font-size: var(--t-titre-case); color: var(--border-controle); }
.etoiles--saisie .etoile { font-size: var(--t-titre-vue); border-radius: var(--rayon-controle); }
.avis-resume__chiffre { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); font-weight: var(--g-gras); }
.carte--formulaire textarea, .skills-vue .ligne-form input, .referent-formulaire :is(textarea, select, input[type="number"]) { min-height: var(--controle-h); border-radius: var(--rayon-controle); font-size: var(--t-texte); }
.referent-formulaire .politique-regle { border-radius: var(--rayon-controle); }
.skills-vide { margin-top: var(--espace-5); padding: var(--espace-5); border-radius: var(--rayon-case); background: var(--case-reflet), var(--bg-surface); border: 1px solid var(--border-subtle); }
@media (max-width: 900px) { .chat[data-view="skills"] .skills-vue { padding: var(--espace-4); } }
@media (max-width: 640px) { .chat[data-view="skills"] .skills-vue { padding: var(--espace-3); } .skills-panneau { padding: var(--espace-4); } }

/* Entretiens : l'annonce du fabricant, les notes et les états sont des cases, jamais du texte sur le verre. */
.creation .msg--agent > div:last-child:not(.carte) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--espace-1); padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-case); background: var(--case-reflet), var(--bg-surface); border: 1px solid var(--border-subtle); box-shadow: var(--ombre-case); }
.creation .msg--agent > div:last-child > .carte { background: none; border: 0; box-shadow: none; padding: 0; }
.creation .msg--agent .etat-ligne { padding: 0; align-self: auto; color: var(--text-primary); font-size: var(--t-texte); line-height: var(--i-texte); }
.creation :is(.bc-note, .dictee-statut:not(:empty)), .canevas__pied--double .muted { margin: 0; padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-controle); background: var(--bg-surface); color: var(--text-primary); font-size: var(--t-aide); line-height: var(--i-aide); }
.creation .pense { padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-controle); background: var(--bg-surface); align-self: flex-start; }
.creation .carte--activite { padding: var(--espace-3) var(--espace-4); background: var(--case-reflet), var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--rayon-case); }

/* ----- Applications (vue « tools ») ----- */
.chat[data-view="tools"] .tools-vue { gap: var(--espace-3); padding: var(--espace-5); scrollbar-width: thin; }
.tools-vue > header { display: flex; flex-direction: column; gap: var(--espace-1); }
#tools-modes { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); }
#tools-modes button { padding: 0 var(--espace-3); border-radius: var(--rayon-controle); }
#tools-modes button[aria-pressed="true"] { background: var(--accent-doux); }
#tools-statut { align-self: flex-start; padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-controle); background: var(--bg-surface); color: var(--text-primary); }
.tools-grille { gap: var(--espace-5); align-items: start; }
#tools-liste > .muted, #tools-liste .tools-par-agent > .muted { padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-controle); background: var(--bg-surface); }
.tools-par-agent > h2 { align-self: flex-start; padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-controle); background: var(--bg-surface); }
.tools-ligne { gap: var(--espace-1); }
.tools-ligne__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tools-logo { border-radius: var(--rayon-controle); }
.tools-logo--20, .tools-logo--32 { font-size: var(--t-repere); }
.tools-logo--40 { font-size: var(--t-texte); }
.tools-logo--monogramme { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--tint); font-weight: var(--g-gras); }
.tools-ligne .tools-etat, #tools-panneau > header > .tools-etat { padding: 2px var(--espace-3); border: 1px solid currentColor; border-radius: var(--rayon-case); }
/* Lecture libre (2026-10-14) : interrupteur ou état en tête de l'onglet Assistants, mention dans la liste. */
.tools-lecture-libre { margin-bottom: var(--espace-4); }
section.tools-lecture-libre { display: flex; flex-direction: column; gap: var(--espace-1); }
.tools-libre { white-space: nowrap; }
#tools-panneau { gap: var(--espace-4); min-height: 0; }
#tools-panneau:empty { display: none; }
.tools-retour { display: none; align-self: flex-start; }
.tools-outils, .tools-accords { display: flex; flex-direction: column; }
.tools-outils li, .tools-accords li { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-2) 0; border-bottom: 0; }
.tools-outil__texte { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tools-outil__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tools-nom-technique { margin: 0; }
.tools-nom-technique summary, .tools-details summary { cursor: pointer; list-style: none; width: fit-content; }
.tools-nom-technique summary::-webkit-details-marker, .tools-details summary::-webkit-details-marker { display: none; }
.tools-accords__nom { flex: 1; min-width: 0; }
.tools-accords .btn, .tools-agent .tools-ligne__tete .btn { min-height: var(--espace-6); padding: var(--espace-1) var(--espace-3); font-size: var(--t-aide); }
.tools-agent { display: flex; flex-direction: column; gap: var(--espace-2); border-bottom: 1px solid var(--border-subtle); padding: var(--espace-4); }
.tools-agent .tools-ligne__tete { align-items: center; }
.tools-retrait { display: flex; flex-direction: column; gap: var(--espace-2); align-items: flex-start; padding-top: var(--espace-4); border-top: 1px solid var(--border-subtle); }
.tools-formulaire :is(input, textarea, select) { min-height: var(--controle-h); border-radius: var(--rayon-controle); font-size: var(--t-texte); }
.tools-formulaire label { font-size: var(--t-aide); color: var(--text-secondary); }
.tools-compte-case { border-radius: var(--rayon-case); background: var(--bg-hover); }
.tools-changements { padding: var(--espace-4); }
.tools-changements .repere { color: var(--text-secondary); }
.tools-changements .tools-etat { display: inline-block; min-width: 76px; }
.tools-note { padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-controle); background: var(--bg-hover); color: var(--text-primary); }
.tools-journal { display: flex; flex-direction: column; }
.tools-journal li { align-items: center; padding: var(--espace-2) 0; font-size: var(--t-texte); }
.tools-journal time { font-size: var(--t-aide); color: var(--text-secondary); }
.tools-journal .tools-etat { max-width: none; }
/* B20 : sous 1000 px, la liste puis le détail en pleine page, avec un retour. */
@media (max-width: 1000px) {
  .tools-grille { grid-template-columns: minmax(0, 1fr); }
  .tools-vue:not(.tools--detail) #tools-panneau { display: none; }
  .tools-vue.tools--detail #tools-liste, .tools-vue.tools--detail .skills-barre, .tools-vue.tools--detail > header { display: none; }
  .tools-vue.tools--detail .tools-retour { display: inline-flex; }
  .chat[data-view="tools"] .tools-vue { padding: var(--espace-4); }
}
@media (max-width: 640px) {
  .chat[data-view="tools"] .tools-vue { padding: var(--espace-3); }
  .tools-outils li, .tools-accords li { flex-wrap: wrap; }
  .tools-outil__desc { white-space: normal; }
}

/* ----- Paramètres : menu latéral à gauche, rubriques en piles de cases à droite ----- */
.settings { max-width: none; padding: var(--espace-5); overflow-y: auto; scrollbar-width: thin; }
.chat[data-view="settings"] .settings { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--espace-3) var(--espace-5); align-content: start; }
.settings > .vue-tete { grid-column: 1 / -1; }
.settings h1 { margin: 0; }
.settings .hint { margin: 0; }
.pile { display: flex; flex-direction: column; gap: var(--espace-3); min-width: 0; }
.settings .panneau.case { gap: var(--espace-3); }
.settings .panneau > .case, .settings .pile > .case, .settings .referentiel { display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; }
.settings h3 { margin: 0; }
.suivre { display: flex; align-items: flex-start; gap: var(--espace-3); padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-controle); background: var(--bg-hover); cursor: pointer; }
.suivre input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.suivre > span { display: flex; flex-direction: column; gap: 2px; }
.palettes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--espace-3); }
.palette { padding: var(--espace-2) var(--espace-2) var(--espace-3); gap: var(--espace-2); color: var(--text-primary); transition: none; }
.palette:hover { transform: none; background: var(--bg-hover); }
.palette[aria-checked="true"] { border: 2px solid var(--accent); box-shadow: var(--ombre-case); }
.palette__meta { flex-direction: column; align-items: flex-start; gap: 0; margin: 0 var(--espace-1); }
.palette__name { font-size: var(--t-nom); font-weight: var(--g-moyen); }
.palette__desc { margin: 0; font-size: var(--t-aide); line-height: var(--i-aide); color: var(--text-secondary); }
/* Aperçu d'une palette, rendu avec les variables de la palette qu'il porte : scène, voile, rail et plateau en verre, cases. */
.preview { display: block; position: relative; flex: none; height: 96px; border-radius: var(--rayon-controle); overflow: hidden; background: var(--scene) center / cover no-repeat, var(--bg-app); color: var(--text-primary); }
.preview > *, .pv-plateau > * { position: absolute; }
.pv-voile { inset: 0; background: var(--scene-voile); }
.pv-rail { left: 6px; top: 8px; bottom: 8px; width: 12px; border-radius: var(--rayon-controle); background: var(--verre-reflet), var(--glass-bg); box-shadow: 0 0 0 1px var(--border-subtle); }
.pv-plateau { left: 24px; right: 8px; top: 8px; bottom: 8px; border-radius: var(--rayon-controle); background: var(--verre-reflet), var(--glass-bg); box-shadow: 0 0 0 1px var(--border-subtle); }
.pv-agent { left: 8px; top: 10px; width: 56%; height: 18px; border-radius: var(--rayon-controle); background: var(--bg-surface); }
.pv-user { right: 8px; top: 34px; width: 40%; height: 14px; border-radius: var(--rayon-controle); background: var(--accent-doux); }
.pv-composer { left: 8px; right: 8px; bottom: 8px; height: 16px; border-radius: var(--rayon-controle); background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-controle); }
.pv-composer::after { content: ""; position: absolute; right: 3px; top: 3px; width: 10px; height: 10px; border-radius: var(--rayon-rond); background: var(--accent); }
.moments { display: flex; flex-direction: column; }
.moment .preview { width: 120px; height: 64px; }
.moment__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.moment__choix { flex: 0 1 220px; }
.defaut { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espace-3); }
.defaut .champ { flex: 1 1 200px; }
.modeles label { font-size: var(--t-aide); color: var(--text-secondary); }
.modeles :is(input, select) { min-height: var(--controle-h); height: auto; border-radius: var(--rayon-controle); font-size: var(--t-texte); }
.fournisseurs { gap: var(--espace-3); }
.fournisseur { padding: var(--espace-4) var(--espace-5); }
.fournisseur__nom { font-size: var(--t-titre-case); font-weight: var(--g-gras); }
.fournisseur--lecture { justify-content: space-between; min-height: var(--ligne-h); padding: var(--espace-2) var(--espace-5); }
.emplacement__nom { font-size: var(--t-nom); font-weight: var(--g-moyen); }
.ajout summary { color: var(--text-primary); border-radius: var(--rayon-controle); }
.tuiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--espace-3); }
.tuile { padding: var(--espace-3) var(--espace-4); }
.tuile__libelle { font-size: var(--t-aide); color: var(--text-secondary); }
.tuile__valeur { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); font-weight: var(--g-gras); }
.utilisation-detail { display: flex; flex-direction: column; gap: var(--espace-3); }
.utilisation-detail__tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--espace-2); }
.table { font-size: var(--t-texte); }
.table thead th { font-size: var(--t-aide); font-weight: var(--g-moyen); color: var(--text-secondary); }
.table-defile { margin: 0; }
/* Sous 880 px une seule colonne : sans elle, ce bloc (placé après les règles mobiles) gardait 230 px + le reste et le contenu
   n'avait que 230 px sur 364 à 390 px (défaut constaté au lot 3 de la licence, corrigé le 2026-10-25). */
@media (max-width: 880px) { .settings { padding: var(--espace-4); } .chat[data-view="settings"] .settings { grid-template-columns: minmax(0, 1fr); } .settings .rubriques { grid-column: 1 / -1; } }
@media (max-width: 640px) { .settings { padding: var(--espace-3); } .moment { flex-wrap: wrap; } }

/* ----- Sections sans vue (Jobs, Goals, Ideas, Artefacts) ----- */
.chat[data-view="bientot"] .bientot { max-width: none; width: auto; padding: var(--espace-5); align-items: stretch; }
.bientot__case { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-3); padding: var(--espace-5); }
.bientot__case p { font-size: var(--t-titre-case); line-height: var(--i-lecture); }
.pile > .bascule { align-self: flex-start; }

/* Sessions et Jobs : composants partagés du contrat § 8.3. */
.jauge { display: flex; flex-direction: column; gap: var(--espace-2); font-size: var(--t-aide); }
.jauge progress { width: 100%; height: var(--espace-2); appearance: none; border: 0; border-radius: var(--rayon-controle); overflow: hidden; background: var(--bg-hover); }
.jauge progress::-webkit-progress-bar { background: var(--bg-hover); }
.jauge progress::-webkit-progress-value { background: var(--text-secondary); }
.jauge progress::-moz-progress-bar { background: var(--text-secondary); }
.jauge[data-seuil="premier"] progress::-webkit-progress-value, .jauge[data-seuil="second"] progress::-webkit-progress-value { background: var(--etat-attention); }
.piece { display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; padding-block: var(--espace-3); overflow-wrap: anywhere; }
.piece + .piece { border-top: calc(var(--espace-1) / 4) solid var(--border-subtle); }
.piece__tete, .piece__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
.piece__nom { flex: 1; min-width: 0; font-weight: var(--g-moyen); text-align: left; }
.piece__meta { font-size: var(--t-aide); color: var(--text-secondary); }
.depot { display: flex; flex-direction: column; align-items: stretch; gap: var(--espace-2); padding: var(--espace-3); border: calc(var(--espace-1) / 4) dashed var(--border-controle); border-radius: var(--rayon-controle); background: var(--bg-surface); }
.depot[data-survol="true"] { background: var(--accent-doux); border-style: solid; }
.depot:focus-within { outline: calc(var(--espace-1) / 2) solid var(--accent); outline-offset: var(--espace-1); }
.appuis { margin-top: var(--espace-3); font-size: var(--t-aide); color: var(--text-secondary); }
.appuis summary { cursor: pointer; padding-block: var(--espace-2); }
.appuis ul { display: flex; flex-direction: column; gap: var(--espace-2); padding-left: var(--espace-4); }
.etapes-contexte { display: flex; flex-direction: column; gap: var(--espace-3); list-style: none; }
.etapes-contexte summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--espace-2); align-items: center; min-height: var(--controle-h); }
.etapes-contexte pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin-top: var(--espace-3); }
#vue-jobs, #vue-artefacts, #lecteur-piece { display: none; }
#main > #surface-outil:not([hidden]) { display: block; }
.chat:is([data-view="jobs"], [data-view="job"]) > :not(#vue-jobs), .chat[data-view="artefacts"] > :not(#vue-artefacts), .chat[data-view="lecture"] > :not(#lecteur-piece) { display: none; }
.chat:is([data-view="jobs"], [data-view="job"]) #vue-jobs, .chat[data-view="artefacts"] #vue-artefacts, .chat[data-view="lecture"] #lecteur-piece { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: var(--espace-4); padding: var(--espace-4); overflow: auto; }
/* Trois scènes, sans moteur de disposition. Les régions peuvent recevoir un lecteur ou une surface d'outil. */
.app[data-scene="travail"] { padding-inline: var(--espace-4); }
.app[data-scene="travail"] .rail { display: none; }
.app[data-scene="travail"] .barres-bascule { display: grid; }
.app[data-scene="travail"].barres-ouvertes .rail { display: flex; z-index: 8; }
.app[data-scene="travail"] #main { flex: 1; margin: 0; }
.app :is(#vue-jobs, #vue-artefacts, #lecteur-piece, #thread) { animation: entree-scene .25s ease-out; }
@keyframes entree-scene { from { opacity: 0; transform: translateY(var(--espace-2)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app :is(#vue-jobs, #vue-artefacts, #lecteur-piece, #thread) { animation: none; } }

/* Contrôle segmenté partagé : rôle radiogroup, déplacement par les flèches. */
.segment { display: inline-flex; align-items: stretch; gap: var(--espace-1); padding: var(--espace-1); border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); background: transparent; max-width: 100%; }
.segment [role="radio"] { min-height: var(--cible-min); padding: var(--espace-1) var(--espace-3); border: 0; border-radius: var(--rayon-controle); background: transparent; color: var(--text-secondary); font-size: var(--t-texte); white-space: normal; }
.segment [role="radio"][aria-checked="true"] { background: var(--bg-surface); color: var(--text-primary); font-weight: var(--g-gras); }
.segment [role="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Marketplaces : source, fraîcheur et reprise restent en tête de la liste. */
.marketplaces-barre { display: grid; gap: var(--espace-2); margin-bottom: var(--espace-3); }
.marketplaces-barre .segment { display: flex; flex-wrap: wrap; background: var(--bg-surface); }
.marketplaces-barre .segment [role="radio"] { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-1); }
.marketplaces-barre .segment [aria-checked="true"] { background: var(--bg-hover); }
.marketplaces-etat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-1); padding: var(--espace-2) var(--espace-3); background: var(--bg-surface); border-radius: var(--rayon-controle); }
.marketplaces-ajout { margin-top: var(--espace-3); }
/* Lexique commun au menu du compte et à l'aide. */
.lexique:not([open]) { display: none; }
.lexique { margin: auto; border: 0; width: min(var(--largeur-fil), calc(100vw - 2 * var(--espace-4))); max-height: calc(100dvh - 2 * var(--espace-4)); color: var(--text-primary); font-size: var(--t-texte); background: var(--bg-surface); border-radius: var(--rayon-plateau); }
.lexique::backdrop { background: var(--dialogue-voile); }
.lexique header { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); }
.lexique h2 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); }
.lexique dl { display: grid; gap: var(--espace-4); }
.lexique dt { font-weight: var(--g-moyen); }
.lexique dd { margin: var(--espace-1) 0 0; }

/* Vues adaptées dans le fil et les artefacts : le moteur partagé lit les variables de l'hôte, Synex les nomme autrement. */
.vue-decl { --v-sur-accent: var(--texte-sur-accent); }
#main .vue-decl .bouton { background: var(--bg-surface); }
#main .vue-decl .bouton--plein { background: var(--accent); }
#main .vue-decl .kpi__evolution--hausse { color: var(--etat-reussi); }
#main .vue-decl .kpi__evolution--baisse { color: var(--etat-attention); }

/* Rubrique Avis de la fiche : motifs datés, sans puce, séparés par un liseré. */
.avis-motifs { list-style: none; margin: var(--espace-2) 0 0; padding: 0; display: grid; gap: var(--espace-2); }
.avis-motifs li { padding-top: var(--espace-2); border-top: 1px solid var(--border-subtle); font-size: var(--t-texte); line-height: var(--i-texte); }
.avis-motifs .lien { text-decoration: underline; text-underline-offset: 3px; }