/* interface/style.css — BOSS Agent Control Center */
:root {
  --fond: #f4f2fb;
  --surface: #ffffff;
  --surface-2: #f8f7fd;
  --texte: #1f1d2b;
  --doux: #6b6880;
  --bord: #e4e1f0;
  --primaire: #5b4bdb;
  --primaire-2: #8a3ffc;
  --vert: #12a150;
  --rouge: #d93749;
  --orange: #e8790c;
  --jaune: #fff6db;
  --rayon: 14px;
  --ombre: 0 2px 10px rgba(40, 30, 90, .07);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--texte);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); min-height: 100vh; font-size: 15px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ─── barre du haut ─── */
.barre {
  display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  background: linear-gradient(110deg, #4636c9 0%, #7b3ff2 55%, #d6409f 100%);
  color: #fff; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 14px rgba(70, 40, 160, .35);
}
.logo { font-size: 22px; font-weight: 700; letter-spacing: .3px; }
.logo span { background: #fff; color: #5b2fd6; border-radius: 8px; padding: 0 7px; margin-right: 2px; }
.pastilles { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.pastille { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.pastille.ok::before { content: "●"; color: #6ff2a5; margin-right: 6px; }
.pastille.ko::before { content: "●"; color: #ffb3bd; margin-right: 6px; }

/* ─── boutons ─── */
.bouton { border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer; font-weight: 600; background: var(--primaire); color: #fff; transition: transform .08s, filter .15s; }
.bouton:hover { filter: brightness(1.08); }
.bouton:active { transform: scale(.97); }
.bouton:disabled { opacity: .5; cursor: wait; }
.bouton.clair { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.45); }
.discussion .bouton.clair, .carte .bouton.clair { background: var(--surface-2); color: var(--texte); border: 1px solid var(--bord); }
.bouton.vert { background: var(--vert); }
.bouton.rouge { background: var(--rouge); }
.bouton.mini { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.bouton.lien { background: none; color: var(--primaire); padding: 2px 6px; }

/* ─── réglages ─── */
.reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; padding: 16px 20px; background: #ebe7fb; border-bottom: 1px solid var(--bord); }
.carte { background: var(--surface); border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre); border: 1px solid var(--bord); }
.carte.large { grid-column: span 1; }
.carte h3 { margin: 0 0 4px; font-size: 16px; }
.carte h4 { margin: 0 0 8px; font-size: 14px; }
.carte.petite { padding: 12px; margin-bottom: 12px; }
.aide { color: var(--doux); font-size: 13px; margin: 2px 0 10px; display: block; }
.tableau { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 14px; }
.tableau th { text-align: left; color: var(--doux); font-weight: 600; padding: 6px 8px 6px 0; white-space: nowrap; font-size: 13px; }
.tableau td { padding: 5px 4px; border-top: 1px solid var(--bord); vertical-align: middle; }
.tableau thead th { border-bottom: 2px solid var(--bord); }
.tableau select, .tableau input, .ligne input, .filtre, #i-zip { width: 100%; padding: 7px 9px; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface-2); min-width: 0; }
.tableau input:focus, .tableau select:focus, textarea:focus, .filtre:focus, .ligne input:focus { outline: 2px solid #b9adff; border-color: var(--primaire); }
.ligne-modele, .ligne { display: flex; gap: 6px; align-items: center; }
.etat-cle { font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.etat-cle.oui { background: #dcf7e7; color: #0b6b37; }
.etat-cle.non { background: #f0eef7; color: var(--doux); }
.plus summary { cursor: pointer; color: var(--primaire); font-size: 13px; margin-bottom: 8px; }

/* ─── grille principale ─── */
.grille { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; gap: 16px; padding: 16px 20px; height: calc(100vh - 64px); min-height: 560px; }
.grille > * { min-height: 0; }
.colonne { overflow-y: auto; }
.colonne h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .6px; color: var(--doux); margin: 4px 0 10px; }
.liste-agents { display: flex; flex-direction: column; gap: 8px; }
.agent { text-align: left; border: 2px solid transparent; background: var(--surface); border-radius: 12px; padding: 10px 12px; cursor: pointer; box-shadow: var(--ombre); display: flex; gap: 10px; align-items: flex-start; }
.agent:hover { border-color: #d5cff5; }
.agent.actif { border-color: var(--c, var(--primaire)); background: color-mix(in srgb, var(--c, var(--primaire)) 8%, white); }
.agent .rond { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c, var(--primaire)); color: #fff; font-size: 18px; flex: none; }
.agent b { display: block; font-size: 14px; }
.agent small { color: var(--doux); font-size: 12px; line-height: 1.3; display: block; }

/* ─── discussion ─── */
.discussion { background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--bord); }
.entete-discussion { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--bord); gap: 10px; }
.entete-discussion .aide { display: inline; margin: 0 0 0 6px; }
.messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; min-height: 300px; }
.accueil { text-align: center; margin: auto; max-width: 560px; color: var(--doux); }
.accueil h2 { color: var(--texte); }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.suggestion { border: 1px solid #d9d3f7; background: #f6f3ff; color: #4a3bb8; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.suggestion:hover { background: #ebe5ff; }
.msg { max-width: 88%; line-height: 1.5; }
.msg.moi { align-self: flex-end; background: linear-gradient(135deg, #5b4bdb, #7b3ff2); color: #fff; padding: 10px 14px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }
.msg.boss { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--bord); border-left: 4px solid var(--c, var(--primaire)); padding: 10px 14px; border-radius: 4px 16px 16px 16px; min-width: 220px; }
.msg .qui { font-size: 12px; font-weight: 700; color: var(--c, var(--primaire)); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.msg .journal { font-size: 12px; color: var(--doux); margin-top: 6px; border-top: 1px dashed var(--bord); padding-top: 4px; }
.msg .journal div::before { content: "› "; }
.msg .duree { font-weight: 400; color: var(--doux); }
.msg pre { background: #1e1b2e; color: #f1efff; padding: 10px 12px; border-radius: 10px; overflow-x: auto; position: relative; font-size: 13px; }
.msg code { background: #ece9f7; padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.msg pre code { background: none; padding: 0; }
.msg .copier { position: absolute; top: 6px; right: 6px; font-size: 11px; background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.msg h4 { margin: 10px 0 4px; }
.msg ul { margin: 4px 0; padding-left: 20px; }
.msg a { color: var(--primaire); word-break: break-all; }
.attente::after { content: "▍"; animation: clignote 1s steps(1) infinite; color: var(--primaire); }
@keyframes clignote { 50% { opacity: 0; } }
.reflexion { display: inline-flex; gap: 4px; }
.reflexion i { width: 7px; height: 7px; border-radius: 50%; background: var(--primaire); animation: saute 1.2s infinite; }
.reflexion i:nth-child(2) { animation-delay: .15s; background: var(--primaire-2); }
.reflexion i:nth-child(3) { animation-delay: .3s; background: #d6409f; }
@keyframes saute { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* confirmation oui / non */
.confirmation { align-self: stretch; background: var(--jaune); border: 2px solid #f1c94b; border-radius: 14px; padding: 14px; }
.confirmation.danger { background: #fff0f2; border-color: var(--rouge); }
.confirmation .question { white-space: pre-wrap; font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; max-height: 320px; overflow: auto; margin: 6px 0 12px; }
.confirmation .choix { display: flex; gap: 10px; }
.confirmation .choix .bouton { padding: 10px 22px; font-size: 15px; }
.confirmation.repondue { opacity: .65; }

.saisie { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--bord); }
.saisie textarea { flex: 1; resize: vertical; min-height: 48px; max-height: 220px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface-2); }
.envoyer { background: linear-gradient(135deg, #12a150, #0f8c84); padding: 0 22px; font-size: 15px; }

/* ─── colonne droite ─── */
.onglets { display: flex; gap: 6px; margin-bottom: 10px; }
.onglet { flex: 1; border: 1px solid var(--bord); background: var(--surface); border-radius: 10px; padding: 8px; cursor: pointer; font-weight: 600; color: var(--doux); }
.onglet.actif { background: var(--primaire); color: #fff; border-color: var(--primaire); }
.filtre { margin-bottom: 10px; }
.skill { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--ombre); }
.skill .titre { display: flex; justify-content: space-between; gap: 6px; align-items: center; font-weight: 600; font-size: 14px; word-break: break-word; }
.skill p { margin: 4px 0 6px; color: var(--doux); font-size: 12.5px; line-height: 1.35; }
.badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge.savoir { background: #efe6ff; color: #6a2fd0; }
.badge.code { background: #dcf5f3; color: #0b6f68; }
.puces { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.puce { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #f0eef7; color: #4e4a66; }
.puce.agent-puce { background: color-mix(in srgb, var(--c) 15%, white); color: color-mix(in srgb, var(--c) 80%, black); }
.puce .x { cursor: pointer; margin-left: 4px; opacity: .6; }
.puce.droit { background: #fff1e0; color: #9a4f00; }
.skill select { font-size: 12px; padding: 2px 4px; border-radius: 6px; border: 1px dashed #c7c0ea; background: transparent; color: var(--primaire); }
.outils { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.tuile { border: 0; border-radius: 12px; padding: 14px 8px; cursor: pointer; color: #fff; font-size: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--ombre); }
.tuile span { font-size: 13px; font-weight: 600; }
.tuile:hover { filter: brightness(1.07); }
.tuile.bleu { background: linear-gradient(135deg, #3b6ff5, #5b4bdb); }
.tuile.vert { background: linear-gradient(135deg, #12a150, #0f8c84); }
.tuile.violet { background: linear-gradient(135deg, #8a3ffc, #b03fd6); }
.tuile.orange { background: linear-gradient(135deg, #f08c1a, #e05a0c); }
.tuile.cyan { background: linear-gradient(135deg, #10a6c9, #3b6ff5); }
.tuile.rose { background: linear-gradient(135deg, #e5408f, #d93749); }
.sortie { background: #1e1b2e; color: #e9e6ff; border-radius: 12px; padding: 12px; font-size: 12px; white-space: pre-wrap; max-height: 55vh; overflow: auto; }
.rapport { margin-top: 10px; font-size: 13px; }
.rapport label { display: flex; gap: 6px; align-items: flex-start; padding: 4px 0; border-top: 1px solid var(--bord); }
.rapport .refuse { color: var(--rouge); }
.rapport .existe { color: var(--doux); }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1f1d2b; color: #fff; padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 50; max-width: 90vw; }
.toast.erreur { background: var(--rouge); }

@media (max-width: 1100px) {
  .grille { grid-template-columns: 1fr; height: auto; }
  .liste-agents { flex-direction: row; overflow-x: auto; }
  .agent { min-width: 200px; }
  .messages { min-height: 50vh; }
}

.tuile.indigo { background: linear-gradient(135deg, #4636c9, #d6409f); }
.tuile.large { grid-column: span 2; flex-direction: row; justify-content: center; gap: 10px; }
.serveur { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--ombre); }
.serveur .titre { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; word-break: break-all; }
.serveur .titre .point { width: 10px; height: 10px; border-radius: 50%; background: #c9c5da; flex: none; }
.serveur.actif .titre .point { background: var(--vert); box-shadow: 0 0 0 3px #dcf7e7; }
.serveur p { margin: 4px 0; color: var(--doux); font-size: 12.5px; }
.serveur .cible { font-family: Consolas, monospace; font-size: 11px; color: #6a6488; word-break: break-all; }
.serveur .actions { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.interrupteur { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.interrupteur input { accent-color: var(--vert); width: 16px; height: 16px; }
.outil { border-top: 1px dashed var(--bord); padding: 8px 0 4px; }
.outil summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.outil summary .risque { color: var(--orange); font-weight: 400; font-size: 12px; }
.outil form { display: grid; gap: 6px; margin-top: 6px; }
.outil label { font-size: 12px; color: var(--doux); display: grid; gap: 2px; }
.outil input, .outil textarea, .outil select { padding: 6px 8px; border: 1px solid var(--bord); border-radius: 7px; background: var(--surface-2); font-size: 13px; }
.outil .resultat { background: #1e1b2e; color: #e9e6ff; border-radius: 8px; padding: 8px; font-size: 11.5px; white-space: pre-wrap; max-height: 300px; overflow: auto; }

.carte.pleine { grid-column: 1 / -1; }
.entete-pret { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bouton.gros { padding: 12px 22px; font-size: 15px; box-shadow: 0 4px 14px rgba(18,161,80,.35); }
.bouton-pastille { cursor: pointer; color: #fff; font: inherit; font-size: 13px; }
.bouton-pastille.complet { background: rgba(111,242,165,.3); }
#t-prerequis td:first-child { width: 26px; text-align: center; font-size: 16px; }
#t-prerequis small { display: block; color: var(--doux); font-size: 12px; }
#t-prerequis .actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#t-prerequis .attente { color: var(--doux); font-size: 12px; }
.tache { font-size: 12.5px; border-top: 1px solid var(--bord); padding: 6px 0; }
.tache summary { cursor: pointer; }
.tache pre { background: #1e1b2e; color: #e9e6ff; border-radius: 8px; padding: 8px; font-size: 11.5px; white-space: pre-wrap; max-height: 220px; overflow: auto; }
.lien-cle { font-size: 12px; margin-left: 6px; color: var(--primaire); }
.msg img.graphique { max-width: 100%; border: 1px solid var(--bord); border-radius: 10px; margin: 6px 0; background: #fff; }
.msg .graphique-interactif { width: 100%; max-width: 860px; height: 440px; border: 1px solid var(--bord); border-radius: 10px; margin: 6px 0 2px; background: #fff; }
.msg .aide-graphique { display: block; color: var(--doux); font-size: 12px; margin-bottom: 8px; }

/* ───────── Mes discussions */
.bloc-discussions { margin-bottom: 18px; }
.liste-discussions { display: flex; flex-direction: column; gap: 4px; max-height: 38vh; overflow-y: auto; margin-top: 6px; }
.fil { display: flex; align-items: center; gap: 4px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); }
.fil.active { border-color: var(--primaire); box-shadow: 0 0 0 2px rgba(91,75,219,.18); }
.fil .ouvrir { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 7px 9px; cursor: pointer; color: inherit; font: inherit; }
.fil .ouvrir b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil .ouvrir small { color: var(--doux); font-size: 11px; }
.fil .mini-action { background: none; border: 0; cursor: pointer; padding: 4px 6px; opacity: .45; font-size: 13px; }
.fil .mini-action:hover, .fil .mini-action:focus-visible { opacity: 1; }
.actions-discussion { display: flex; gap: 6px; flex-wrap: wrap; }
#b-lecture[aria-pressed="true"] { background: #e6f7ee; border-color: #12a150; color: #0b6b36; }

/* ───────── Micro et lecture à haute voix */
.bouton.micro { font-size: 20px; min-width: 52px; background: var(--surface-2); border: 1px solid var(--bord); color: inherit; }
.bouton.micro.ecoute { background: #e5484d; color: #fff; border-color: #e5484d; animation: pulse-micro 1.2s infinite; }
.bouton.micro:disabled { opacity: .4; cursor: not-allowed; }
@keyframes pulse-micro { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 70% { box-shadow: 0 0 0 12px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .bouton.micro.ecoute { animation: none; } }
.msg .lire { margin-left: auto; white-space: nowrap; background: none; border: 1px solid var(--bord); border-radius: 8px; cursor: pointer; font-size: 12px; padding: 1px 7px; color: var(--doux); }
.msg .lire.parle { background: #12a150; color: #fff; border-color: #12a150; }
.bouton.envoyer.rouge { background: var(--rouge); }

/* ───────── Onglet Accès */
.case-acces { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--bord); border-radius: 10px; margin-bottom: 6px; cursor: pointer; background: var(--surface); }
.case-acces.actif { border-color: #12a150; background: #f1fbf5; }
.case-acces input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.case-acces b { display: block; font-size: 13px; }
.case-acces small { color: var(--doux); font-size: 12px; line-height: 1.35; display: block; }
.titre-acces { margin: 14px 0 6px; }
#acces-google .bouton { margin: 4px 0 8px; }

/* ─── 📎 fichiers joints ─── */
.joindre { position: relative; display: flex; }
.trombone { background: var(--surface-2); color: var(--texte, #222); border: 1px solid var(--bord); font-size: 18px; padding: 0 12px; }
.menu-joindre { position: absolute; bottom: 110%; left: 0; z-index: 20; display: flex; flex-direction: column; min-width: 250px; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 6px; }
.menu-joindre button { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: inherit; }
.menu-joindre button:hover { background: var(--surface-2); }
.pieces { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; align-items: center; }
.piece { display: inline-flex; align-items: center; gap: 6px; max-width: 340px; padding: 4px 6px 4px 8px; border: 1px solid var(--bord); border-radius: 999px; background: var(--surface-2); font-size: 12px; }
.piece b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.piece small { color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.piece.envoi { opacity: .75; }
.piece.erreur { border-color: var(--rouge, #d33); }
.piece .vignette { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; }
.piece .retirer { border: 0; background: none; cursor: pointer; color: var(--doux); font-size: 12px; padding: 0 4px; }
.aide-pieces { font-size: 11px; color: var(--doux); }
.msg .jointes { margin-top: 6px; font-size: 12px; opacity: .85; }
section.discussion.depot { outline: 3px dashed #5b4bdb; outline-offset: -6px; }
.panneau-fichiers { margin: 8px 12px 0; padding: 10px; border: 1px solid var(--bord); border-radius: 12px; background: var(--surface); max-height: 260px; overflow: auto; }
.entete-fichiers { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ligne-fichier { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--bord); font-size: 13px; }
.ligne-fichier > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-fichier small { color: var(--doux); }
#acces-cerveau .case-acces { border-width: 2px; }

/* ─── 🧭 plan du BOSS et 🌙 tâches de fond ─── */
.plan-boss { margin: 4px 0 8px; padding: 8px 10px; border: 1px dashed var(--bord); border-radius: 10px; background: var(--surface-2); font-size: 12.5px; }
.plan-boss b { display: block; margin-bottom: 4px; }
.plan-boss ol { margin: 0; padding-left: 20px; }
.plan-boss li { margin: 2px 0; }
.plan-boss li.en-cours { font-weight: 600; }
.plan-boss li.fini::marker { color: #12a150; }
.plan-boss li.echec { color: var(--rouge, #d33); }
.plan-boss small { color: var(--doux); }
.lune { background: linear-gradient(135deg, #312e81, #5b4bdb); padding: 0 14px; font-size: 18px; }
.bloc-taches { margin-bottom: 14px; }
.liste-taches { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.tache { border: 1px solid var(--bord); border-radius: 10px; padding: 7px 9px; background: var(--surface); font-size: 12.5px; }
.tache.nouvelle { border-color: #12a150; box-shadow: 0 0 0 2px rgba(18,161,80,.18); }
.tache b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tache small { color: var(--doux); display: block; }
.tache .etapes { margin: 4px 0; letter-spacing: 1px; }
.tache .actions { display: flex; gap: 6px; margin-top: 4px; }
.corps table { border-collapse: collapse; margin: 8px 0; font-size: 13px; width: 100%; display: block; overflow-x: auto; }
.corps th, .corps td { border: 1px solid var(--bord); padding: 4px 8px; text-align: left; vertical-align: top; }
.corps th { background: var(--surface-2); }

.fichier-office { display: inline-block; margin: 2px 0; padding: 4px 10px; border-radius: 8px; background: #2f5d50; color: #fff !important; text-decoration: none; font-weight: 600; }

/* ─── ⚡ automatisations ─── */
#i-auto { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bord); background: var(--surface-2); font: inherit; resize: vertical; }
.exemples-auto { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 12px; }
.exemples-auto .suggestion { text-align: left; font-size: 12px; }
.auto { border: 1px solid var(--bord); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface); }
.auto.pause { opacity: .65; }
.auto small { display: block; color: var(--doux); font-size: 12px; margin-top: 2px; }
.auto .interrupteur { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.auto .webhook code { font-size: 11px; word-break: break-all; }
.auto .execs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.auto .exec { border: 1px solid var(--bord); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; font-size: 11px; cursor: pointer; }
.auto .actions { display: flex; gap: 6px; margin-top: 6px; align-items: center; }

/* ─── 📈 tableau de bord ─── */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.tuile-kpi { border: 1px solid var(--bord); border-radius: 10px; padding: 8px; background: var(--surface); text-align: center; }
.tuile-kpi b { display: block; font-size: 18px; }
.tuile-kpi small { color: var(--doux); font-size: 11px; }
.barres { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin: 6px 0 10px; border-bottom: 1px solid var(--bord); }
.barre { flex: 1; background: #5b4bdb; border-radius: 3px 3px 0 0; min-width: 3px; }
#tableau-bord h4 { margin: 12px 0 4px; }
#tableau-bord .tableau { width: 100%; font-size: 12px; }
#acces-nuit select { margin-top: 6px; width: 100%; }

/* ─── connexion Google en 3 étapes ─── */
.etape-google { border: 1px solid var(--bord); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; background: var(--surface); }
.etape-google.faite { border-color: #12a150; background: #f1fbf5; }
.etape-google b { display: block; font-size: 13px; }
.etape-google small { display: block; color: var(--doux); font-size: 12px; margin: 2px 0 4px; line-height: 1.4; }
.etape-google .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.journal-connexion pre.journal { max-height: 140px; overflow: auto; font-size: 11px; background: var(--surface-2); padding: 6px; border-radius: 8px; white-space: pre-wrap; }

/* ─── exporter une réponse ─── */
.barre-export { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--bord); font-size: 13px; }
.barre-export .mini-action, .export-menu summary { border: 1px solid var(--bord); background: var(--surface); border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.barre-export .mini-action:hover, .export-menu summary:hover { border-color: var(--primaire); color: var(--primaire); }
.export-menu { position: relative; }
.export-menu summary { list-style: none; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-choix { position: absolute; z-index: 5; bottom: calc(100% + 4px); left: 0; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 6px; box-shadow: var(--ombre); min-width: 190px; }
.export-choix .mini-action { text-align: left; border-radius: 8px; }
.export-resultat { color: var(--doux); }
.export-resultat a { color: var(--primaire); font-weight: 600; }

/* ─── 🔗 connexions ─── */
.carte-connexion { border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.carte-connexion .ligne { flex-wrap: wrap; gap: 6px; align-items: center; }
.carte-connexion small { color: var(--doux); }
.carte-connexion code, #ajout-connexion code { background: var(--surface-2); border-radius: 6px; padding: 1px 5px; word-break: break-all; font-size: 12px; }
.champ-connexion { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; margin-top: 8px; }
.champ-connexion input, .champ-connexion select { font-weight: 400; padding: 7px 10px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface-2); }
.types-connexion { flex-wrap: wrap; gap: 6px; }
#ajout-connexion > .bouton { margin-top: 12px; }
#o-connexions .bouton.clair, #acces-moi .bouton.clair, #o-compte .bouton.clair, #acces-mcp .bouton.clair, #acces-api .bouton.clair, #acces-widget .bouton.clair, #acces-demarrage .bouton.clair, #acces-bilan .bouton.clair, #acces-autorisations .bouton.clair, #acces-battement .bouton.clair, #acces-navigateur .bouton.clair { background: var(--surface-2); color: var(--texte); border: 1px solid var(--bord); }
.onglets { flex-wrap: wrap; }
.onglet { flex: 1 1 auto; min-width: 0; padding: 8px 6px; white-space: nowrap; }

/* étape 42 : proposition d'automatisation sur l'accueil */
.proposition-auto { margin: 18px auto 0; max-width: 620px; background: #fffbea; border: 1px solid #f1dfa0; border-radius: 14px; padding: 12px 14px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.proposition-auto[hidden] { display: none; }
.proposition-auto small { display: block; color: #6b6780; margin-top: 4px; }
.proposition-auto .pa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.proposition-auto a.bouton { text-decoration: none; }

/* étape 43 : mémoire à long terme */
.case-memoire { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 8px 0 12px; }
#i-souvenir { flex: 1; min-width: 0; }
.groupe-souvenirs h4 { margin: 14px 0 6px; font-size: 13px; }
.souvenir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; border: 1px solid #e7e4f3; border-radius: 10px; margin-bottom: 6px; background: #fff; }
.souvenir-texte { flex: 1 1 100%; word-break: break-word; }
.souvenir small { flex: 1 1 auto; color: #6b6780; font-size: 11.5px; }
.souvenir-actions { display: flex; gap: 4px; margin-left: auto; }
.souvenir-actions .bouton { padding: 2px 8px; min-width: 0; }
.bouton.danger { background: #c0263a; border-color: #c0263a; color: #fff; }

/* étape 45 : consommation, santé, qualité */
.acces-qualite { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 14px; }
.q-carte { border: 1px solid #e7e4f3; border-radius: 12px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.q-carte small { color: #6b6780; font-size: 12px; line-height: 1.4; }
.q-rangee { display: flex; flex-direction: column; gap: 2px; }
.q-ligne { display: flex; align-items: center; gap: 8px; }
.q-barre { flex: 1; height: 8px; background: #efedf7; border-radius: 99px; overflow: hidden; }
.q-rempli { display: block; height: 100%; background: #5b4bdb; border-radius: 99px; }
.q-rempli.haut { background: #c0263a; }
.q-texte { font-size: 12px; white-space: nowrap; }
.q-score { display: flex; align-items: center; gap: 10px; }
.q-note { font-size: 22px; font-weight: 700; white-space: nowrap; }
.q-note.bon { color: #067647; } .q-note.moyen { color: #9a6700; } .q-note.faible { color: #b42318; }
.q-alerte { color: #b42318 !important; }
.q-echec { display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px solid #f1eefc; font-size: 12.5px; }

/* étape 46 : décisions en attente */
.bouton-validations { background: #b91c1c; color: #fff; border-color: #b91c1c; animation: pv-pulse 2s ease-in-out infinite; }
@keyframes pv-pulse { 50% { box-shadow: 0 0 0 6px rgba(185, 28, 28, .18); } }
.panneau-validations { position: fixed; z-index: 60; top: 64px; right: 16px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow-y: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(40, 20, 90, .28); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.panneau-validations[hidden] { display: none; }
.pv-tete { display: flex; justify-content: space-between; align-items: center; }
.pv-carte { border: 1px solid #f3cfcf; background: #fffafa; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pv-carte small { color: #6b6780; }
.pv-carte pre { white-space: pre-wrap; max-height: 220px; overflow: auto; font-size: 12px; background: #f6f4fc; padding: 6px; border-radius: 8px; }
.pv-carte input { border: 1px solid #e7e4f3; border-radius: 8px; padding: 6px 8px; }

/* étape 46b : fichiers pris sur le PC */
.pieces-prises { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.piece-prise { background: #f1eefc; border: 1px solid #ddd6f7; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* étape 48 : IA de la formule, code d'appairage d'un PC */
.pastille-ia { display: inline-block; background: var(--surface); border: 1px solid var(--bord); border-radius: 999px; padding: 2px 10px; font-size: 12px; margin: 2px 4px 2px 0; }
.code-pc { font-family: ui-monospace, Consolas, monospace; font-size: 20px; letter-spacing: 2px; padding: 4px 12px; border: 2px dashed var(--bord); border-radius: 10px; }
/* étape 49 : catalogue de connecteurs, bases de connaissances, tables */
.catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0; max-height: 280px; overflow-y: auto; }
.catalogue .service { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 7px 9px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); cursor: pointer; }
.catalogue .service span { grid-row: span 2; font-size: 20px; }
.catalogue .service small { color: var(--doux); font-size: 11px; }
.catalogue .service:hover { border-color: var(--primaire); }
.carte-catalogue-detail { border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.carte-connaissance { border: 1px solid var(--bord); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; background: var(--surface); }
.carte-connaissance > summary { cursor: pointer; }
.carte-connaissance input:not([type=file]) { flex: 1; min-width: 0; }
.reponse-connaissances { font-size: 14px; margin: 6px 0; }
.doc-connaissance { font-size: 13px; }
.doc-connaissance small { color: var(--doux); }
.tableau-donnees .defile { overflow-x: auto; max-height: 320px; }
.tableau-donnees table { border-collapse: collapse; font-size: 12.5px; }
.tableau-donnees th, .tableau-donnees td { border-bottom: 1px solid var(--bord); padding: 4px 8px; text-align: left; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* étape 49 : jetons de BOSS serveur MCP */
#acces-mcp textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
#acces-mcp .s-case-mini { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
#acces-mcp input:not([type="checkbox"]) { flex: 1 1 auto; min-width: 0; }

/* ─── étape 58 : interface épurée — la discussion au centre, les volets cachés par défaut ─── */
:root { --haut-barre: 64px; }
.bouton-barre {
  background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; padding: 7px 12px;
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.bouton-barre:hover { background: rgba(255, 255, 255, .26); }
.bouton-barre[aria-expanded="true"] { background: #fff; color: #4b2fc9; border-color: #fff; }
#b-volet-gauche { font-size: 18px; padding: 5px 11px; }
.barre { gap: 12px; }
.pastilles { min-width: 0; flex-wrap: nowrap; overflow: hidden; }
#p-agents, #p-skills { display: none; }
#p-llm { overflow: hidden; text-overflow: ellipsis; max-width: 380px; }

.grille { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--haut-barre)); }
.grille > .colonne { display: none; }
.discussion { width: 100%; max-width: 1180px; justify-self: center; }
body.volet-gauche .grille { grid-template-columns: 290px minmax(0, 1fr); }
body.volet-droit .grille { grid-template-columns: minmax(0, 1fr) 370px; }
body.volet-gauche.volet-droit .grille { grid-template-columns: 290px minmax(0, 1fr) 370px; }
body.volet-gauche .grille > .colonne:not(.droite), body.volet-droit .grille > .colonne.droite { display: block; }
.tete-volet { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; position: sticky; top: 0; background: var(--fond); z-index: 1; padding: 2px 0 6px; }
.tete-volet b { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--doux); }
.fermer-volet { border: 1px solid var(--bord); background: var(--surface); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: var(--doux); }
.fermer-volet:hover { color: var(--texte); border-color: var(--primaire); }
.colonne.droite .onglets { display: grid; grid-template-columns: repeat(4, 1fr); }
.colonne.droite .onglet { padding: 6px 4px; font-size: 13px; }

/* « Qui répond ? » : replié, cartes compactes (la description est dans l'infobulle) */
.bloc-agents { margin-top: 14px; }
.bloc-agents > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0; }
.bloc-agents > summary::-webkit-details-marker { display: none; }
.bloc-agents > summary h2 { margin: 0; }
.bloc-agents > summary::after { content: "▾"; color: var(--doux); }
.bloc-agents[open] > summary::after { content: "▴"; }
.bloc-agents .liste-agents { gap: 4px; margin-top: 6px; }
.bloc-agents .agent { padding: 6px 8px; box-shadow: none; border: 1px solid var(--bord); align-items: center; }
.bloc-agents .agent.actif { border-color: var(--primaire); background: #f1eeff; }
.bloc-agents .agent .rond { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
.bloc-agents .agent small { display: none; }
.bloc-agents .agent b { font-size: 13.5px; }
.mode-actuel { border: 1px solid transparent; background: none; border-radius: 10px; padding: 4px 8px; margin-left: -8px; cursor: pointer; text-align: left; }
.mode-actuel:hover { border-color: var(--bord); background: var(--surface-2, #f6f4ff); }
.voile-volet { position: fixed; inset: var(--haut-barre) 0 0 0; background: rgba(20, 10, 50, .28); z-index: 8; }

/* petit écran : les volets passent par-dessus la discussion */
@media (max-width: 1100px) {
  .grille, body.volet-gauche .grille, body.volet-droit .grille, body.volet-gauche.volet-droit .grille { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--haut-barre)); }
  body.volet-gauche .grille > .colonne:not(.droite), body.volet-droit .grille > .colonne.droite {
    position: fixed; top: var(--haut-barre); bottom: 0; width: min(380px, 92vw); z-index: 9; background: var(--fond); padding: 14px; box-shadow: 0 10px 40px rgba(30, 10, 80, .3);
  }
  body.volet-gauche .grille > .colonne:not(.droite) { left: 0; }
  body.volet-droit .grille > .colonne.droite { right: 0; }
  .liste-agents { flex-direction: column; overflow-x: visible; }
  .agent { min-width: 0; }
  .bouton-barre { padding: 6px 9px; font-size: 13px; }
  #p-llm { max-width: 200px; }
}
@media (max-width: 700px) { .pastilles { display: none; } .logo { font-size: 18px; } }
.entete-discussion #mode-aide { display: none; }
.colonne.droite .onglets { display: flex; flex-wrap: wrap; }
.colonne.droite .onglet { flex: 1 0 auto; }
.catalogue .service.connecte { border-color: #9ad7b3; background: #f2fbf5; }
.video-discussion { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; } .video-discussion video { max-width: min(100%, 420px); max-height: 520px; border-radius: 12px; background: #000; }
.video-discussion img { max-width: min(100%, 420px); max-height: 520px; border-radius: 12px; object-fit: contain; } .video-discussion audio { width: min(100%, 420px); }

/* 🎨 étape 61 : connexions rangées en sections repliables (épuré) */
.section-cx { border: 1px solid var(--bord); border-radius: 12px; margin: 8px 0; background: var(--surface); }
.section-cx > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.section-cx > summary::-webkit-details-marker { display: none; }
.section-cx > summary::before { content: '▸'; color: var(--doux); transition: transform .15s; }
.section-cx[open] > summary::before { transform: rotate(90deg); }
.section-cx > summary small { font-weight: 400; color: var(--doux); font-size: 12px; }
.section-cx > div { padding: 0 12px 10px; }
.section-cx .ligne select { max-width: 220px; }

/* ⚡ étape 62 : connexion express */
.express-bloc { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--bord); }
.express-bloc:last-child { border-bottom: 0; }
.express-bloc textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 12px; }
.express-liste { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 4px; }
.express-liste code { font-size: 11px; }

/* 🔑 💬 étape 66 : API et assistant pour les sites */
#acces-api input:not([type=checkbox]), #acces-api textarea, #acces-widget input:not([type=checkbox]), #acces-widget textarea, #acces-widget select { width: 100%; box-sizing: border-box; margin: 3px 0; }
#acces-widget details > summary { cursor: pointer; font-weight: 600; }
#acces-widget .ligne, #acces-api .ligne, #acces-battement .ligne, #acces-navigateur .ligne, #acces-objectifs .ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#acces-widget .ligne label, #acces-battement .ligne label, #acces-objectifs .ligne label { display: inline-flex; gap: 4px; align-items: center; }

/* étape 67 : bilan de sécurité, démarrage guidé, battement de cœur, discussions partagées */
.bilan-ligne { border-left: 4px solid var(--bord); padding: 4px 8px; margin: 6px 0; display: grid; gap: 2px; }
.bilan-ligne small { opacity: .8; }
.bilan-risque { border-left-color: #b91c1c; } .bilan-attention { border-left-color: #a21caf; } .bilan-ok { border-left-color: #15803d; } .bilan-info { border-left-color: #64748b; }
#acces-demarrage .ligne, #acces-battement .ligne, #acces-navigateur .ligne, #acces-autorisations .ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
#acces-battement textarea, #import-memoire textarea { width: 100%; box-sizing: border-box; }
.msg.suggestion { align-self: flex-start; background: var(--surface-2); border: 1px dashed var(--bord); border-radius: 12px; padding: 8px 12px; font-size: .92em; }
.bandeau-partage { position: sticky; top: 0; z-index: 2; background: var(--surface-2); border: 1px solid var(--bord); border-radius: 10px; padding: 6px 10px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .9em; }
.auteur { display: block; font-size: .78em; opacity: .7; margin-bottom: 2px; }
#acces-battement textarea, #acces-navigateur input { width: 100%; box-sizing: border-box; }
#acces-battement .bouton.clair, #acces-autorisations .bouton.clair, #acces-navigateur .bouton.clair, #acces-bilan .bouton.clair { background: var(--surface-2); color: var(--texte); border: 1px solid var(--bord); }
#acces-objectifs textarea { width: 100%; box-sizing: border-box; }
#acces-objectifs details > summary { cursor: pointer; }
#acces-objectifs .bouton.clair { background: var(--surface-2); color: var(--texte); border: 1px solid var(--bord); }
#acces-objectifs label.s-case-mini, #acces-battement label.s-case-mini, #acces-api label.s-case-mini, #acces-widget label.s-case-mini, #acces-equipe label.s-case-mini, #acces-vocal label.s-case-mini { display: inline-flex; gap: 6px; align-items: center; width: auto; flex: 0 0 auto; white-space: nowrap; font-size: 13px; }
#acces-objectifs label.s-case-mini input, #acces-battement label.s-case-mini input, #acces-api label.s-case-mini input, #acces-widget label.s-case-mini input, #acces-equipe label.s-case-mini input, #acces-vocal label.s-case-mini input { width: auto; margin: 0; flex: none; }

/* 👥 étape 69 : mon équipe */
#acces-equipe h5 { margin: 12px 0 6px; font-size: 13px; }
#acces-equipe .ligne { flex-wrap: wrap; gap: 6px; align-items: center; }
#acces-equipe select { width: auto; max-width: 100%; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--bord); background: var(--surface); font: inherit; font-size: 13px; }
#acces-equipe input[type=date] { width: auto; }
/* 💭 étape 70 : rêves */
#reves-memoire label.s-case-mini { display: inline-flex; gap: 6px; align-items: flex-start; font-size: 13px; }
#reves-memoire label.s-case-mini input { width: auto; margin: 2px 0 0; flex: none; }
#reves-memoire .ligne { flex-wrap: wrap; gap: 8px; align-items: center; }
#acces-vocal .ligne { flex-wrap: wrap; gap: 8px; align-items: center; }
#acces-vocal select { width: auto; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--bord); background: var(--surface); font-size: 13px; }
.docteur-couche { display: grid; gap: 4px; }
.docteur-couche.commencer { border: 2px solid var(--primaire); box-shadow: 0 0 0 3px rgba(91, 75, 219, .12); }
.docteur-conseil { color: var(--doux); }
#acces-docteur h5 { margin: 12px 0 6px; font-size: 13px; }
#acces-docteur .ligne { flex-wrap: wrap; gap: 8px; align-items: center; }

/* 📋 étape 71 : tableau de bord de la discussion (vues Chat | Divisé | Tableau) */
.corps-discussion { flex: 1; display: flex; min-height: 0; }
.corps-discussion .messages { flex: 1; min-width: 0; }
.tableau-discussion { display: none; overflow-y: auto; padding: 14px; background: var(--surface-2); border-left: 1px solid var(--bord); min-width: 0; }
.corps-discussion.vue-divise .tableau-discussion { display: block; flex: 0 0 44%; }
.corps-discussion.vue-tableau .messages { display: none; }
.corps-discussion.vue-tableau .tableau-discussion { display: block; flex: 1; border-left: none; }
.vues-discussion { display: inline-flex; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.vues-discussion .vue { border: none; background: var(--surface); padding: 4px 9px; font-size: 13px; cursor: pointer; color: var(--texte); }
.vues-discussion .vue.active { background: var(--primaire); color: #fff; }
.tb-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tb-tete h3 { margin: 0; font-size: 16px; flex: 1; }
.tb-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tb-widget { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.tb-widget h4 { margin: 0; font-size: 13px; color: var(--doux); text-transform: uppercase; letter-spacing: .03em; }
.tb-item { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; }
.tb-item button { border: none; background: none; padding: 0; cursor: pointer; font-size: 14px; }
.tb-item.fait span { text-decoration: line-through; color: var(--doux); }
.tb-metrique { display: grid; }
.tb-metrique b { font-size: 20px; color: var(--primaire); }
.tb-metrique small { color: var(--doux); }
.tb-chrono { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 13px; }
.tb-chrono small { color: var(--doux); white-space: nowrap; }
.tb-widget table { border-collapse: collapse; font-size: 13px; width: 100%; }
.tb-widget td, .tb-widget th { border-bottom: 1px solid var(--bord); padding: 3px 4px; text-align: left; }
.tb-barre { height: 8px; border-radius: 8px; background: var(--bord); overflow: hidden; }
.tb-barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--primaire), var(--primaire-2)); }
.tb-vide { color: var(--doux); font-size: 14px; }
#acces-ordres .ligne, #procedures-memoire .ligne { flex-wrap: wrap; gap: 8px; align-items: center; }
#acces-ordres textarea, #acces-ordres input:not([type=checkbox]), #acces-ordres select { font-size: 13px; }
#acces-ordres label.s-case-mini, #procedures-memoire label.s-case-mini { display: inline-flex; gap: 6px; align-items: center; width: auto; font-size: 13px; }
#acces-ordres label.s-case-mini input, #procedures-memoire label.s-case-mini input { width: auto; margin: 0; flex: none; }
.ordre-points { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 13px; }
.ordre-points b { color: var(--doux); }
@media (max-width: 760px) { .corps-discussion.vue-divise { flex-direction: column; } .corps-discussion.vue-divise .tableau-discussion { flex: 0 0 auto; max-height: 45vh; border-left: none; border-top: 1px solid var(--bord); } }
.panneau .bouton.clair, .panneau-validations .bouton.clair { background: var(--surface-2); color: var(--texte); border: 1px solid var(--bord); }
#acces-ordres textarea, #acces-ordres input[placeholder^="Nom"] { width: 100%; }
#acces-ordres input[size] { width: 70px; flex: none; }