/* =====================================================================
   BUREAU VIRTUEL : îles flottantes en pixel art, un agent IA par département,
   interface claire façon jeu moderne (cartes blanches, bulles en italique)
   ===================================================================== */
.bu {
  --encre: #2b2340; --doux: #857d9c; --pale: #b3acc6; --trait: rgba(43,35,64,.09); --carte: rgba(255,255,255,.94); --carte2: #f5f1fb;
  --rouge: #e3162b; --jaune: #f6b93b; --vert: #2fbf71; --ombre: 0 10px 30px rgba(73,48,92,.16), 0 2px 6px rgba(73,48,92,.08);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  position: fixed; inset: 0; z-index: 200; background: #e9dcef; color: var(--encre);
  font: 14px/1.45 Inter, system-ui, -apple-system, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased;
}
.bu[hidden], .bu [hidden] { display: none !important; }
.bu button, .bu input, .bu textarea, .bu select { font: inherit; color: inherit; }
.bu code { font-family: var(--mono); }


.bu-scene.survol { cursor: pointer; }

/* ---------- Barre du haut ---------- */








.bu-onglet.on { background: var(--carte2); color: var(--encre); }





.bu-attente.vide b { background: var(--carte2); color: var(--doux); }








/* ---------- Rail des départements ---------- */


.bu-rail button:hover, .bu-rail button.on { transform: translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }


/* ---------- Avatars pixel ---------- */


/* ---------- Étiquettes des îles (comme dans un jeu) ---------- */





.bu-etq.on { box-shadow: 0 6px 16px rgba(73,48,92,.16), 0 0 0 2px var(--c); }


.bu-etq.reflechit .bu-ico::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--jaune); border: 2px solid #fff; animation: bu-clig 1s infinite; }





@keyframes bu-clig { 50% { opacity: .3; } }
@keyframes bu-rebond { 50% { transform: translateY(-2px); } }
@keyframes bu-pop { from { transform: scale(.2); opacity: 0; } }

/* Puces au-dessus des têtes : outil en cours, sujet d'un sous-agent */







.bu-puce.fini .bu-puce-l { background: rgba(232,250,239,.95); }
.bu-puce.fini .bu-puce-l svg { color: var(--vert); }

/* ---------- Barre de mission ---------- */






.bu-envoi { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--rouge); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; box-shadow: 0 6px 14px rgba(227,22,43,.3); }
.bu-envoi:active { transform: translateY(1px); }
.bu-envoi:disabled { opacity: .4; cursor: default; }







/* ---------- Panneau d'un agent ---------- */
.bu-panel { position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(430px, calc(100% - 28px)); z-index: 8; background: #fffdfb; border-radius: 22px; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(73,48,92,.3); overflow: hidden; transition: width .18s ease; }
/* Le tableau du tunnel a besoin de place : le panneau s'élargit pour qu'elle lise toutes les colonnes d'un coup. */
.bu-panel.large { width: min(1100px, calc(100% - 28px)); }
.bu-p-tete { padding: 14px 16px 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, #fff), #fffdfb); }
.bu-p-dep { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); font-weight: 700; }
.bu-p-dep > div { display: flex; align-items: center; gap: 6px; }
.bu-p-dep button { border: 0; background: rgba(255,255,255,.8); border-radius: 9px; padding: 4px 10px; cursor: pointer; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--encre); box-shadow: 0 1px 3px rgba(73,48,92,.12); }
.bu-p-dep .bu-fermer { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; }
.bu-p-qui { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.bu-p-qui .bu-av { width: 54px; height: 54px; border-radius: 15px; }
.bu-p-qui h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; letter-spacing: -.01em; line-height: 1; }
.bu-p-qui p { margin: 3px 0 0; color: var(--doux); font-size: 13px; }
.bu-p-statut { margin-left: auto; font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--doux); white-space: nowrap; }
.bu-p-statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.bu-p-statut.reflechit::before { background: var(--jaune); animation: bu-clig 1s infinite; }
.bu-p-onglets { display: flex; gap: 20px; border-bottom: 1px solid var(--trait); }
.bu-p-onglets button { border: 0; background: none; padding: 8px 0; cursor: pointer; color: var(--doux); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bu-p-onglets button.on { color: var(--encre); border-color: var(--c, var(--rouge)); }
.bu-p-corps { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.bu-jour { align-self: center; font-size: 11px; color: var(--doux); background: var(--carte2); border-radius: 999px; padding: 2px 10px; }
.bu-msg { max-width: 88%; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; font-size: 13.5px; }
.bu-msg.moi { align-self: flex-end; background: var(--encre); color: #fff; border-bottom-right-radius: 5px; }
.bu-msg.agent { align-self: flex-start; background: var(--carte2); border-bottom-left-radius: 5px; }
.bu-msg.agent.direct { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); }
.bu-msg.systeme { align-self: center; background: none; color: var(--doux); font-size: 12px; font-style: italic; text-align: center; padding: 2px 10px; }
.bu-msg .bu-heure { display: block; font-size: 10.5px; color: var(--doux); margin-bottom: 3px; font-style: normal; }
.bu-msg.moi .bu-heure { color: rgba(255,255,255,.6); text-align: right; }
.bu-evts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.bu-evt { font-family: var(--mono); font-size: 10.5px; background: #fff; border: 1px solid var(--trait); border-radius: 7px; padding: 2px 7px; cursor: default; }
.bu-evt.lien { cursor: pointer; border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.bu-evt.lien:hover { background: color-mix(in srgb, var(--c) 10%, #fff); }
.bu-ecrit { align-self: flex-start; color: var(--doux); font-size: 12px; font-style: italic; display: flex; gap: 6px; align-items: center; }
.bu-ecrit code { font-style: normal; font-size: 11.5px; color: var(--encre); background: var(--carte2); border-radius: 6px; padding: 1px 6px; }
.bu-ecrit i { display: inline-flex; gap: 3px; }
.bu-ecrit i::before, .bu-ecrit i::after, .bu-ecrit i span { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pale); animation: bu-saut 1s infinite; }
.bu-ecrit i span { animation-delay: .15s; }
.bu-ecrit i::after { animation-delay: .3s; }
@keyframes bu-saut { 30% { transform: translateY(-4px); } }
.bu-vide { color: var(--doux); font-size: 13px; text-align: center; margin: auto 10px; }
.bu-vide b { color: var(--encre); }
.bu-sugg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.bu-sugg button { border: 1px solid var(--trait); background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 12.5px; }
.bu-sugg button:hover { border-color: var(--c); }

/* Sous-agents dans le panneau */
.bu-sous-tete { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.bu-sous-tete::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jaune); animation: bu-clig 1s infinite; }
.bu-sous { display: grid; gap: 8px; }
.bu-sous-c { background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: 9px 10px 10px; box-shadow: 0 2px 8px rgba(73,48,92,.06); animation: bu-pop .3s ease-out; }
.bu-sous-c.encours { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.bu-sous-t { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.bu-sous-t .bu-av { width: 22px; height: 22px; border-radius: 7px; }
.bu-sous-t code { font-size: 11px; background: var(--carte2); border-radius: 6px; padding: 1px 6px; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bu-sous-e { margin-left: auto; font-size: 11px; color: var(--vert); font-weight: 600; white-space: nowrap; }
.bu-sous-c.encours .bu-sous-e { color: #b7791f; }
.bu-sous-titre { font-family: var(--serif); font-style: italic; font-size: 15px; margin: 4px 0 4px; }
.bu-sous-c pre { margin: 0; white-space: pre-wrap; font: 12.5px/1.5 Inter, sans-serif; color: #4a4262; max-height: 150px; overflow-y: auto; }
.bu-sous-fait { align-self: stretch; }
.bu-sous-fait summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--doux); display: flex; align-items: center; gap: 6px; list-style: none; padding: 4px 2px; }
.bu-sous-fait summary::-webkit-details-marker { display: none; }
.bu-sous-fait summary svg { width: 13px; height: 13px; }
.bu-sous-fait[open] summary { color: var(--encre); margin-bottom: 6px; }
.bu-sous-fait .bu-sous-c pre { max-height: 220px; }

/* Carte de validation (« rien ne part sans ton OK ») */
.bu-valid { border: 1.5px solid rgba(246,185,59,.6); background: #fffaf0; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bu-valid .bu-v-tete { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.bu-valid .bu-v-tete::before { content: "!"; width: 20px; height: 20px; border-radius: 50%; background: var(--jaune); color: #3a2500; display: grid; place-items: center; font-weight: 900; font-size: 12px; flex: none; }
.bu-valid.fait { border-color: rgba(47,191,113,.45); background: #f3fcf6; }
.bu-valid.fait .bu-v-tete::before { content: "✓"; background: var(--vert); color: #fff; }
.bu-valid.refuse { border-color: var(--trait); background: #fff; opacity: .75; }
.bu-valid.refuse .bu-v-tete::before { content: "✕"; background: var(--carte2); color: var(--doux); }
.bu-valid pre { margin: 0; white-space: pre-wrap; font: 12.5px/1.5 Inter, sans-serif; background: #fff; border: 1px solid var(--trait); border-radius: 11px; padding: 9px 10px; }
.bu-v-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.bu-btn { border: 1px solid var(--trait); background: #fff; border-radius: 10px; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 12.5px; }
.bu-btn:hover:not(:disabled) { border-color: rgba(43,35,64,.3); }
.bu-btn:disabled { opacity: .5; cursor: default; }
.bu-btn.ok { background: var(--vert); color: #fff; border-color: transparent; }
.bu-btn.non { color: #d63b3b; }
.bu-v-rep { display: flex; gap: 6px; }
.bu-v-rep input { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 6px 10px; outline: none; }
.bu-v-rep input:focus { border-color: var(--c, var(--rouge)); }
.bu-v-res { font-size: 12px; color: var(--doux); }

.bu-p-pied { border-top: 1px solid var(--trait); padding: 10px 12px 12px; }
.bu-p-pied form { display: flex; gap: 8px; align-items: flex-end; background: var(--carte2); border-radius: 15px; padding: 6px 6px 6px 12px; }
.bu-p-pied textarea { flex: 1; resize: none; border: 0; background: none; outline: none; max-height: 140px; padding: 8px 0; min-height: 22px; }
.bu-p-pied p { margin: 6px 4px 0; font-size: 11px; color: var(--doux); }

/* Fiche */
.bu-fiche h3 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); margin: 12px 0 6px; }
.bu-fiche p { margin: 0; }
.bu-fiche ul { margin: 0; padding-left: 18px; }
.bu-fiche li { margin: 3px 0; }
.bu-fiche .bu-v-btns { margin-top: 4px; }
.bu-m-aide { color: var(--doux); font-size: 12.5px; margin-bottom: 6px !important; }
.bu-mem { list-style: none; padding: 0 !important; margin: 0 0 8px !important; display: flex; flex-direction: column; gap: 5px; }
.bu-mem li { display: flex; gap: 8px; align-items: flex-start; background: var(--carte2); border-radius: 10px; padding: 7px 8px 7px 10px; font-size: 13px; margin: 0 !important; }
.bu-mem li span { flex: 1; }
.bu-mem li.vide { background: none; padding: 0; color: var(--doux); }
.bu-mem button { border: 0; background: none; color: var(--pale); cursor: pointer; padding: 0 2px; }
.bu-mem button:hover { color: #d63b3b; }
.bu-m-ajout { margin-bottom: 4px; }

/* ---------- Tâches : panneau latéral gauche, la carte reste visible ---------- */
.bu-taches { position: absolute; left: 14px; top: 70px; bottom: 14px; z-index: 6; width: 370px; display: flex; flex-direction: column; background: var(--carte); backdrop-filter: blur(14px); border-radius: 20px; box-shadow: var(--ombre); overflow: hidden; animation: bu-entre .18s ease-out; }
@keyframes bu-entre { from { opacity: 0; transform: translateX(-12px); } }
.bu-s-tete { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 12px; border-bottom: 1px solid var(--trait); }
.bu-s-onglets { display: flex; gap: 2px; flex: 1; min-width: 0; }
.bu-s-onglets button { flex: 1; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--doux); padding: 6px 4px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.bu-s-onglets button b { color: var(--encre); }
.bu-s-onglets button.on { background: var(--carte2); color: var(--encre); }
.bu-s-fermer { border: 0; background: none; color: var(--doux); font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.bu-s-fermer:hover { background: var(--carte2); }
.bu-s-corps { flex: 1; overflow-y: auto; padding: 4px 12px 14px; }
.bu-s-titre { display: flex; align-items: center; gap: 7px; margin: 14px 0 4px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.bu-s-titre b { font-weight: 700; color: var(--encre); }
.bu-s-titre::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pale); }
.bu-s-titre.att::before { background: var(--jaune); } .bu-s-titre.cours::before { background: #2f62c4; }
.bu-s-titre.faire::before { background: #7a43c4; } .bu-s-titre.fait::before { background: var(--vert); }
.bu-s-vide { font-size: 12.5px; color: var(--doux); margin: 2px 0 0; }
.bu-s-liste { list-style: none; margin: 0; padding: 0; }
.bu-l { border-bottom: 1px solid var(--trait); }
.bu-l-tete { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 2px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.bu-l-tete:hover { background: var(--carte2); border-radius: 10px; }
.bu-l-p { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--pale); flex: none; }
.bu-l.fait .bu-l-p, .bu-l.refuse .bu-l-p { border-color: var(--vert); background: var(--vert); position: relative; }
.bu-l.fait .bu-l-p::after, .bu-l.refuse .bu-l-p::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 10px; line-height: 12px; text-align: center; }
.bu-l.attente .bu-l-p { border-color: var(--jaune); background: color-mix(in srgb, var(--jaune) 25%, #fff); }
.bu-l.encours .bu-l-p { border-color: #2f62c4; border-right-color: transparent; animation: bu-tourne 1s linear infinite; }
@keyframes bu-tourne { to { transform: rotate(360deg); } }
.bu-l-tete > span { flex: 1; min-width: 0; }
.bu-l-tete b { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-l.fait .bu-l-tete b, .bu-l.refuse .bu-l-tete b { color: var(--doux); }
.bu-l-tete small { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11px; color: var(--doux); }
.bu-l-tete em { font-style: normal; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 70%, #2b2340); }
.bu-l-tete time { font-size: 10.5px; color: var(--pale); white-space: nowrap; }
.bu-l.ouverte { background: var(--carte2); border-radius: 12px; margin: 4px 0; }
.bu-l.ouverte .bu-l-tete b { white-space: normal; }
.bu-l-corps { padding: 0 10px 10px; }
.bu-l-corps pre { margin: 0 0 8px; white-space: pre-wrap; font-family: inherit; font-size: 12.5px; color: var(--doux); max-height: 220px; overflow: auto; }
.bu-l-res { margin: 0 0 8px; font-size: 12.5px; color: var(--vert); }
.bu-l-corps .bu-valid { background: #fff; }
.bu-l-corps .bu-v-btns { flex-wrap: wrap; }

/* Retour au bureau depuis un outil */


.bu-toast { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); z-index: 20; background: #2b2340; color: #fff; border-radius: 12px; padding: 9px 14px; font-size: 13px; box-shadow: 0 14px 40px rgba(43,35,64,.35); }

/* Panneau ouvert : la barre de mission se décale pour ne pas passer dessous */
@media (min-width: 761px) { .bu.avec-panneau .bu-mission { left: calc((100% - 458px) / 2); width: min(560px, calc(100% - 490px)); } }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .bu-top { top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; gap: 6px; justify-content: space-between; }
  .bu-enligne, .bu-logo, .bu-long, .bu-espace, .bu-rail, .bu-nom { display: none !important; }
  .bu-court { display: inline; }
  .bu-pil { padding: 3px; border-radius: 13px; }
  .bu-onglet, .bu-attente { font-size: 13.5px; padding: 6px 10px; }
  .bu-attente b { min-width: 20px; height: 20px; font-size: 11px; }
  .bu-etq-l { gap: 6px; padding: 4px 6px 4px 4px; border-radius: 12px; }
  .bu-ico { width: 24px; height: 24px; border-radius: 7px; }
  .bu-ico svg { width: 14px; height: 14px; }
  .bu-etq-t b { font-size: 12.5px; }
  .bu-etq-t small, .bu-dit { display: none; }
  .bu-avs span { width: 20px; height: 20px; font-size: 9px; }
  .bu-puce small { display: none; }
  .bu-puce-l { font-size: 10px; padding: 2px 7px 2px 5px; }
  .bu-puce code { font-size: 10px; }
  .bu-mission { bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 20px); padding: 5px; border-radius: 16px; }
  .bu-mission p { display: none; }
  .bu-mission input { font-size: 16px; padding: 6px 2px; }
  .bu-qui { font-size: 13px; padding: 4px 8px 4px 4px; }
  .bu-envoi { width: 38px; height: 38px; }
  .bu-liste-qui { min-width: 0; width: calc(100vw - 30px); max-height: 60vh; overflow: auto; }
  .bu-panel { inset: 0; width: auto; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .bu-p-pied textarea { font-size: 16px; }
}

/* ---------- Finances ---------- */
.bu-fin h3 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); margin: 16px 0 8px; }
.bu-f-mois { display: flex; align-items: center; justify-content: space-between; background: var(--carte2); border-radius: 12px; padding: 4px; }
.bu-f-mois b { font-family: var(--serif); font-weight: 400; font-size: 20px; text-transform: capitalize; }
.bu-f-mois button { border: 0; background: #fff; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 18px; box-shadow: 0 1px 3px rgba(73,48,92,.12); }
.bu-f-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.bu-f-carte { background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; }
.bu-f-carte small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.bu-f-carte b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.bu-f-carte span { font-size: 11.5px; color: var(--doux); }
.bu-f-carte.marge { background: #f3fcf6; border-color: rgba(47,191,113,.35); }
.bu-f-carte.marge.neg { background: #fff4f4; border-color: rgba(214,59,59,.35); }
.bu-f-manque { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #9a6a12; background: #fffaf0; border: 1px solid rgba(246,185,59,.45); border-radius: 11px; padding: 8px 10px; }
.bu-f-barres { display: grid; gap: 6px; }
.bu-f-barres div { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
.bu-f-barres span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-f-barres i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); }
.bu-f-barres b { font-weight: 600; font-size: 12px; }
.bu-f-lignes { margin-top: 10px; display: grid; gap: 4px; }
.bu-f-lignes div { display: grid; grid-template-columns: 40px 1fr 118px 76px; gap: 6px; align-items: center; font-size: 12px; padding: 5px 6px; border-radius: 9px; background: var(--carte2); }
.bu-f-lignes .d { color: var(--doux); }
.bu-f-lignes .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-f-lignes select { font-size: 11.5px; border: 1px solid var(--trait); border-radius: 7px; background: #fff; padding: 2px 4px; min-width: 0; }
.bu-f-lignes b { text-align: right; font-weight: 600; }
.bu-f-lignes b.neg { color: #c03a3a; } .bu-f-lignes b.pos { color: #1f8f55; }
@media (max-width: 760px) { .bu-f-lignes div { grid-template-columns: 36px 1fr 70px; } .bu-f-lignes select { grid-column: 2 / 4; } .bu-f-barres div { grid-template-columns: 96px 1fr auto; } .bu-etq { padding: 3px 9px 3px 3px; } .bu-etq b { font-size: 12px; } .bu-ico { width: 20px; height: 20px; } .bu-ico svg { width: 12px; height: 12px; } }

.bu-evt.bu-pdf { text-decoration: none; color: #b0102a; background: #fde8eb; font-weight: 700; }
.bu-evt.bu-pdf:hover { background: #fbd3d9; }

/* Plusieurs agents sur une île : bascule en haut du panneau */
.bu-p-qui { flex-wrap: wrap; }


.bu-p-membres button.on { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }


/* Aperçu d'une île */
.bu-apercu h3 { display: flex; align-items: center; justify-content: space-between; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); margin: 16px 0 8px; }
.bu-apercu h3:first-child { margin-top: 4px; }


 




.bu-ap-cx.off small { color: var(--pale); } .bu-ap-cx.off small::before { content: "○ "; }
 

.bu-ap-jobs, .bu-ap-comp, .bu-ap-agents { list-style: none; margin: 0; padding: 0; }





.bu-ap-jobs li.fini em { width: 100%; animation: none; opacity: .5; }
@keyframes bu-ap-va { 0% { left: -40%; } 100% { left: 100%; } }
.bu-ap-calme { font-size: 13px; color: var(--doux); margin: 0; }
.bu-ap-comp { display: flex; flex-wrap: wrap; gap: 6px; }
.bu-ap-comp li { font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--carte2); color: var(--doux); }
.bu-ap-comp li small { opacity: .6; margin-left: 4px; font-size: 10px; }
.bu-ap-comp li.on { background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--encre); }
.bu-ap-comp li.on::before { content: "● "; color: var(--c); }



 




@media (max-width: 520px) { .bu-ap-grille { grid-template-columns: 1fr; } }

/* Le cerveau : bouton sur le faisceau + graphe plein écran */


.cv-racine { position: fixed; inset: 0; z-index: 300; --encre: #2b2340; --doux: #857d9c; --fond: #f7f4fb; --carte: rgba(255,255,255,.92); --trait: rgba(43,35,64,.09); color: var(--encre); font-family: Inter, system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { .cv-racine { --encre: #eee9fb; --doux: #a69fbf; --fond: #15121f; --carte: rgba(30,26,44,.92); --trait: rgba(238,233,251,.1); } }
.cv-graphe { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.cv-fermer { position: absolute; top: 16px; left: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--carte); color: var(--encre); font-size: 16px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.cv-panneau { position: absolute; top: 16px; right: 16px; bottom: 16px; width: 350px; display: flex; flex-direction: column; background: var(--carte); backdrop-filter: blur(14px); border-radius: 20px; box-shadow: 0 10px 40px rgba(43,35,64,.18); overflow: hidden; }
.cv-tete { display: flex; gap: 12px; align-items: center; padding: 18px 18px 10px; }
.cv-ico { width: 42px; height: 42px; display: grid; place-items: center; font-size: 22px; border-radius: 12px; background: linear-gradient(135deg, #ffd1ea, #e6d4ff); }
.cv-tete h2 { margin: 0; font: 400 28px/1 "Instrument Serif", Georgia, serif; }
.cv-tete p { margin: 4px 0 0; font-size: 12px; color: var(--doux); }
.cv-cherche { padding: 0 18px 10px; }
.cv-cherche input { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--trait); background: transparent; color: inherit; font: inherit; font-size: 14px; }
.cv-corps { flex: 1; overflow: auto; padding: 0 18px 18px; }
.cv-corps h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); margin: 16px 0 8px; }
.cv-dossiers, .cv-liste, .cv-activite { list-style: none; margin: 0; padding: 0; }
.cv-dossiers li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.cv-dossiers li:hover, .cv-dossiers li.on { background: var(--trait); }
.cv-dossiers li.off { opacity: .45; }
.cv-dossiers i, .cv-liste i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cv-dossiers b { margin-left: auto; font-weight: 600; color: var(--doux); font-size: 12px; }
.cv-liste li { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid var(--trait); font-size: 13px; cursor: pointer; }
.cv-liste li small { margin-left: auto; color: var(--doux); font-size: 11px; white-space: nowrap; padding-left: 6px; }
.cv-liste li.vide, .cv-activite li.vide { color: var(--doux); cursor: default; }
.cv-activite li { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--trait); }
.cv-activite small { display: block; color: var(--doux); font-size: 11px; }
.cv-aide { font-size: 12px; color: var(--doux); line-height: 1.5; margin-top: 16px; }
.cv-retour { border: 0; background: none; color: var(--doux); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 0; }
.cv-note h3 { font-size: 18px; margin: 8px 0; line-height: 1.3; }
.cv-note p { font-size: 14px; line-height: 1.55; }
.cv-note small { color: var(--doux); font-size: 12px; }
.cv-pastille { font-size: 11px; font-weight: 700; color: #fff; background: var(--c); border-radius: 6px; padding: 2px 7px; }
.cv-concepts { display: flex; flex-wrap: wrap; gap: 5px; }
.cv-concepts span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--trait); }
.cv-actions { display: flex; gap: 8px; margin: 12px 0; }
.cv-actions button, .cv-actions a { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--trait); background: transparent; color: inherit; text-decoration: none; cursor: pointer; }
.cv-texte { white-space: pre-wrap; font-size: 13px; line-height: 1.55; max-height: 40vh; overflow: auto; background: var(--trait); padding: 12px; border-radius: 12px; }
@media (max-width: 760px) {
  .cv-panneau { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 46vh; border-radius: 18px; }
  .cv-fermer { top: 10px; left: 10px; }
}

.bu-ap-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bu-ap-kpi div { background: var(--carte2); border-radius: 14px; padding: 10px 12px; }
.bu-ap-kpi b { display: block; font-size: 20px; font-weight: 700; }
.bu-ap-kpi small { font-size: 11px; color: var(--doux); }





.bu-ap-et.att { background: #fff0d1; color: #a06a00; } .bu-ap-et.cours { background: #e3edfb; color: #2f62c4; } .bu-ap-et.faire { background: #f1e8fb; color: #7a43c4; } .bu-ap-et.fait { background: #e6f7ee; color: #1e8a50; }
.bu-ap-agents .bu-ap-comp { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.bu-ap-agents .bu-ap-comp em { font-style: normal; font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--carte2); color: var(--doux); }
.bu-ap-agents .bu-ap-comp em.on { background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--encre); }
.cv-p .cv-p-graphe { width: 100%; margin-top: 10px; padding: 11px; border-radius: 14px; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: #fff; background: linear-gradient(135deg, #ff7ac1, #a35ee8); }
.cv-p-form { display: flex; flex-direction: column; gap: 6px; }
.cv-p-form input, .cv-p-form textarea { font: inherit; font-size: 13px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--trait); background: #fff; resize: vertical; }
.cv-p-form button { align-self: flex-end; }
.cv-p-depot { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px; border: 2px dashed var(--trait); border-radius: 14px; cursor: pointer; text-align: center; font-size: 13px; }
.cv-p-depot.on, .cv-p-depot:hover { border-color: #ff7ac1; background: #fff3fa; }
.cv-p-depot small { color: var(--doux); font-size: 11.5px; }
.cv-p-lbl { display: inline-block; cursor: pointer; }
.cv-p-etat { font-size: 12.5px; color: #a8346f; min-height: 1em; margin: 8px 0 0; }
.cv-p .cv-dossiers li { padding: 5px 6px; font-size: 13px; }


@media (max-width: 760px) {
  .bu-taches { left: 8px; right: 8px; top: 60px; bottom: 8px; width: auto; }
  .bu-l-corps .bu-btn { padding: 9px 12px; }
}

/* Chat : réponses mises en forme, copier, micro */
.bu-msg.agent { white-space: normal; }
.bu-md p { margin: 0; } .bu-md .bu-sp { height: 7px; }
.bu-md h4 { margin: 8px 0 3px; font-size: 13.5px; }
.bu-md ul, .bu-md ol { margin: 3px 0; padding-left: 18px; } .bu-md li { margin: 2px 0; }
.bu-md blockquote { margin: 4px 0; padding: 4px 10px; border-left: 3px solid var(--c, #a35ee8); background: rgba(255,255,255,.6); border-radius: 6px; }
.bu-md code { font-family: var(--mono); font-size: 12px; background: rgba(43,35,64,.07); padding: 1px 4px; border-radius: 4px; }
.bu-md a { color: #2f62c4; word-break: break-word; }
.bu-md hr { border: 0; border-top: 1px solid var(--trait); margin: 8px 0; }
.bu-copier { border: 0; background: none; color: var(--doux); font: inherit; font-size: 10.5px; cursor: pointer; padding: 0 0 0 8px; opacity: 0; transition: opacity .15s; }
.bu-msg:hover .bu-copier { opacity: 1; }
@media (hover: none) { .bu-copier { opacity: .8; } }
.bu-micro { flex: none; width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--carte2); color: var(--encre); cursor: pointer; display: grid; place-items: center; }
.bu-micro.on { background: #e3162b; color: #fff; animation: bu-pulse 1.1s ease-in-out infinite; }
@keyframes bu-pulse { 50% { box-shadow: 0 0 0 7px rgba(227,22,43,.18); } }
.bu-mission form .bu-micro { margin-right: 6px; }
.bu-p-pied form .bu-micro { margin-right: 6px; align-self: flex-end; }

/* ---- Joindre des rushs : le trombone, puis la pile qui attend la consigne ---- */
.bu-clip { flex: none; width: 34px; height: 34px; margin: 0 -4px 0 -6px; border-radius: 11px; color: var(--doux);
  cursor: pointer; display: grid; place-items: center; align-self: flex-end; }
.bu-clip:hover { background: #fff; color: var(--encre); }
.bu-rushs { background: #f4f1fb; border: 1px solid #e0d8f2; border-radius: 14px; padding: 9px 11px; margin-bottom: 8px; }
.bu-rushs-tete { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-bottom: 6px; }
.bu-rushs-tete span { flex: 1; color: var(--doux); font-size: 11.5px; }
.bu-rushs ul { list-style: none; margin: 0; padding: 0; }
.bu-rushs li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 3px 0; }
.bu-rushs li svg { flex: none; color: #7a5cf0; }
.bu-rushs li b { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-rushs li span { color: var(--pale); font-size: 11px; flex: none; }
.bu-rushs p { margin: 6px 0 0; font-size: 11.5px; color: var(--doux); }
.bu-rushs .bu-x { border: 0; background: none; color: var(--pale); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; flex: none; }
.bu-rushs .bu-x:hover { color: var(--encre); }
.bu-voix { cursor: pointer; white-space: nowrap; } .bu-voix input { vertical-align: -2px; margin: 0 3px 0 0; }
.cv-p-res { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.cv-p-res li { display: flex; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--trait); }
.cv-p-res li span { min-width: 0; overflow-wrap: anywhere; }
.cv-p-res li.ko { color: #a06a00; }

/* Budget IA */
.bu-budget { position: relative; display: flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--doux); cursor: pointer; padding: 4px 10px; border-radius: 10px; }
.bu-budget:hover { background: var(--carte2); }
.bu-budget i { width: 34px; height: 5px; border-radius: 3px; background: var(--trait); overflow: hidden; position: relative; }
.bu-budget i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--vert); border-radius: 3px; }
.bu-budget.chaud i::after { background: var(--jaune); } .bu-budget.chaud { color: #a06a00; }
.bu-budget.stop i::after { background: var(--rouge); } .bu-budget.stop { color: var(--rouge); }
.bu-bg-jauge { height: 8px; border-radius: 4px; background: var(--trait); overflow: hidden; margin: 10px 0 8px; }
.bu-bg-jauge i { display: block; height: 100%; background: var(--vert); border-radius: 4px; }
.bu-bg-jauge.chaud i { background: var(--jaune); } .bu-bg-jauge.stop i { background: var(--rouge); }
.bu-bg-liste { flex-direction: column; gap: 0 !important; }
.bu-bg-liste li { display: flex; width: 100%; justify-content: space-between; gap: 10px; border-radius: 0; background: none !important; padding: 6px 2px; border-bottom: 1px solid var(--trait); font-family: inherit; font-size: 13px; color: var(--encre); }
.bu-bg-liste li b { font-variant-numeric: tabular-nums; }
.bu-bg-jours { display: flex; align-items: flex-end; gap: 3px; height: 50px; }
.bu-bg-jours i { flex: 1; background: color-mix(in srgb, var(--c) 55%, #fff); border-radius: 2px 2px 0 0; }

/* La carte se décale quand le panneau des tâches est ouvert (sur grand écran) */
@media (min-width: 1100px) { .bu-racine.avec-taches .bu-mission { left: calc(50% + 190px); } }
.bu-relit { align-self: flex-start; display: flex; align-items: center; gap: 7px; font-size: 12px; color: #a06a00; background: #fff6e2; border-radius: 10px; padding: 5px 11px; }
.bu-relit i { width: 7px; height: 7px; border-radius: 50%; background: var(--jaune); animation: bu-ap-va2 1.2s ease-in-out infinite; }
@keyframes bu-ap-va2 { 50% { opacity: .3; } }
.bu-evt.bu-relu { background: #fff6e2; color: #a06a00; }

/* Glisser-déposer de fichiers n'importe où dans le Cockpit */
.bu-depot-global { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(43,35,64,.45); backdrop-filter: blur(3px); pointer-events: none; }
.bu-depot-global[hidden] { display: none; }   /* sans ça, « hidden » ne fait rien face au display ci-dessus */
.bu-depot-global div { background: var(--carte); border: 3px dashed #ff7ac1; border-radius: 22px; padding: 28px 44px; text-align: center; box-shadow: 0 20px 60px rgba(43,35,64,.3); }
.bu-depot-global b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; }
.bu-depot-global small { display: block; margin-top: 6px; font-size: 13px; color: var(--doux); line-height: 1.5; max-width: 420px; }
.bu-msg.enfile { opacity: .5; border: 1px dashed rgba(255,255,255,.35); }
.bu-msg.enfile .bu-heure::after { content: " ⏳"; }

/* Barre de progression des documents */
.bu-prog { position: absolute; left: 14px; bottom: 14px; z-index: 40; width: 330px; max-width: calc(100vw - 28px); background: var(--carte); backdrop-filter: blur(12px); border-radius: 16px; box-shadow: var(--ombre); overflow: hidden; animation: bu-entre .18s ease-out; }
.bu-racine.avec-taches .bu-prog { left: auto; right: 14px; }
.bu-prog header { display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 13px; border-bottom: 1px solid var(--trait); }
.bu-prog header b { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.bu-prog header span { font-size: 11px; font-weight: 700; color: var(--doux); font-variant-numeric: tabular-nums; }
.bu-prog header button { border: 0; background: none; color: var(--doux); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.bu-prog ul { list-style: none; margin: 0; padding: 6px 13px 12px; max-height: 42vh; overflow-y: auto; }
.bu-prog li { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 6px 0; }
.bu-prog .n { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-prog .b { height: 5px; border-radius: 3px; background: var(--trait); overflow: hidden; position: relative; }
.bu-prog .b em { display: block; height: 100%; border-radius: 3px; background: #a35ee8; transition: width .25s ease-out; }
.bu-prog .b em.indet { position: absolute; width: 38%; animation: bu-prog-va 1.2s ease-in-out infinite; }
@keyframes bu-prog-va { 0% { left: -38%; } 100% { left: 100%; } }
.bu-prog li small { font-size: 11px; color: var(--doux); }
.bu-prog li.ok .b em { background: var(--vert); }
.bu-prog li.ok small { color: var(--vert); }
.bu-prog li.ko .b em { background: var(--jaune); width: 100% !important; }
.bu-prog li.ko small { color: #a06a00; }
@media (max-width: 760px) { .bu-prog { left: 8px; right: 8px; bottom: 96px; width: auto; } }

/* ---- Aperçu d'une page, rendu dans le Cockpit (pas d'outil à ouvrir) ---- */
.bu-page { margin: 10px 0 2px; border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; background: #fff; }
.bu-page figcaption { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 8px 10px 8px 12px; background: var(--carte2); border-bottom: 1px solid var(--trait); font-size: 13px; }
.bu-page figcaption b { font-weight: 600; }
.bu-page iframe { display: block; width: 100%; height: 420px; border: 0; background: #fff; }
.bu-page.grand iframe { height: min(78vh, 900px); }

/* ---- Un carrousel, lisible slide par slide, sans sortir du Cockpit ---- */
.bu-car { margin: 10px 0 2px; }
.bu-car.vide { color: var(--doux); font-size: 13px; padding: 8px 2px; }
.bu-car-slides { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; }
.bu-car-slides article { position: relative; flex: 0 0 196px; scroll-snap-align: start; background: #fff;
  border: 1px solid var(--trait); border-radius: 12px; padding: 26px 12px 12px; font-size: 12.5px; line-height: 1.45; }
.bu-car-slides i { position: absolute; top: 7px; left: 10px; font-style: normal; font-size: 11px; color: var(--doux); }
.bu-car-slides b { display: block; font-size: 14px; margin: 0 0 6px; }
.bu-car-slides p { margin: 0 0 5px; white-space: pre-wrap; }
.bu-car-slides em { display: block; margin-top: 6px; font-size: 11px; color: var(--doux); }
.bu-car details { margin-top: 4px; font-size: 13px; }
.bu-car details pre { white-space: pre-wrap; margin: 6px 0 0; font: inherit; color: var(--doux); }

/* ---- Tableau setting LinkedIn (Milo) ---- */
.bu-set { padding: 2px 0 20px; }
.bu-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 2px 0 14px; }
.bu-k { background: var(--carte2); border-radius: 12px; padding: 11px 10px; text-align: center; border-top: 3px solid var(--c); }
.bu-k b { display: block; font-size: 22px; line-height: 1.1; }
.bu-k span { font-size: 11px; color: var(--doux); display: block; margin-top: 2px; }
.bu-set-alerte { background: #fff6ef; border: 1px solid #f3dcd2; border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.bu-set-filtres { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 4px; }
.bu-set-filtres button { flex: 0 0 auto; border: 1px solid var(--trait); background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer; color: var(--doux); }
.bu-set-filtres button.on { background: var(--encre); color: #fff; border-color: var(--encre); }
.bu-leads { list-style: none; margin: 0; padding: 0; }
.bu-lead { border-bottom: 1px solid var(--trait); }
.bu-lead-tete { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 10px 2px; cursor: pointer; text-align: left; }
.bu-lead-tete i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.bu-lead-tete span { flex: 1; min-width: 0; }
.bu-lead-tete b { display: block; font-size: 14px; }
.bu-lead-tete small { color: var(--doux); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-lead-tete time { font-size: 11px; color: var(--pale); }
.bu-lead-tete time.chaud { color: #d2691e; font-weight: 600; }
.bu-lead-corps { padding: 0 2px 12px 20px; font-size: 13px; }
.bu-lead-corps p { margin: 0 0 8px; color: var(--doux); }
.bu-lead-etapes { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.bu-lead-etapes button { border: 1px solid var(--trait); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; cursor: pointer; color: var(--doux); }
.bu-lead-etapes button.on { background: var(--c); border-color: var(--c); color: #fff; }
.bu-set h3 { font-size: 14px; margin: 22px 0 2px; }
.bu-set-aide { font-size: 12px; color: var(--doux); margin: 0 0 8px; }
.bu-profs { list-style: none; margin: 0 0 10px; padding: 0; }
.bu-profs li { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--trait); font-size: 13px; }
.bu-profs li.vide { color: var(--doux); border: 0; }
.bu-profs small { color: var(--doux); font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-profs .bu-x { border: 0; background: none; color: var(--pale); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; }
.bu-prof-add { display: flex; gap: 6px; flex-wrap: wrap; }
.bu-prof-add input { flex: 1; min-width: 130px; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; }
@media (max-width: 520px) { .bu-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ---- Suivi des montages, en haut du tableau des tâches ---- */
.bu-mtv { background: var(--carte2); border-radius: 16px; padding: 13px 15px; margin-bottom: 16px; }
.bu-mtv h4 { display: flex; align-items: center; gap: 9px; font-size: 14px; margin: 0 0 4px; }
.bu-mtv h4 span { flex: 1; font-size: 12px; font-weight: 400; color: var(--doux); }
.bu-mtv-maj { border: 0; background: none; color: var(--pale); font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1; }
.bu-mtv-maj:hover { color: var(--encre); }
.bu-mtv-vide { font-size: 12.5px; color: var(--doux); margin: 0; }
.bu-mtv-alerte { font-size: 12.5px; background: #fff6ef; border: 1px solid #f3dcd2; border-radius: 10px; padding: 8px 10px; margin: 6px 0 10px; }
.bu-mtv ul { list-style: none; margin: 8px 0 0; padding: 0; }
.bu-mtv li { padding: 7px 0; border-bottom: 1px solid var(--trait); }
.bu-mtv li:last-child { border-bottom: 0; }
.bu-mtv-h { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin-bottom: 5px; }
.bu-mtv-h b { font-weight: 600; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-mtv-h em { flex: 1; font-style: normal; color: var(--doux); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-mtv-h u { flex: none; text-decoration: none; font-size: 10px; font-weight: 700; color: #b8860b; background: #fdf3da; border-radius: 4px; padding: 1px 5px; }
.bu-mtv-h span { font-size: 11.5px; color: var(--c); font-weight: 600; flex: none; }
.bu-mtv-b { height: 6px; border-radius: 3px; background: #e8e3ef; overflow: hidden; }
.bu-mtv-b i { display: block; height: 100%; border-radius: 3px; background: var(--c); transition: width .4s ease; }
.bu-mtv-ko { display: block; font-size: 11.5px; color: #c0392b; margin-top: 4px; }
.bu-mtv-voir { display: inline-block; font-size: 11.5px; margin-top: 5px; color: #4b8bf2; }

/* ---- Le mur de données du tunnel (A/B test des landing pages) ---- */
.bu-tun { padding: 2px 0 20px; }
.bu-tun-jours { display: flex; gap: 6px; margin-bottom: 14px; }
.bu-tun-jours button { border: 1px solid var(--trait); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--doux); }
.bu-tun-jours button.on { background: var(--encre); color: #fff; border-color: var(--encre); }
.bu-tun-t { margin-bottom: 26px; }
.bu-tun-t > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bu-tun-t h3 { font-size: 15px; margin: 0 0 3px; }
.bu-tun-lien { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; color: #4b8bf2; cursor: pointer; text-align: left; word-break: break-all; }
.bu-tun-auto { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--doux); cursor: pointer; }
.bu-tun-etapes { list-style: none; margin: 0; padding: 0; counter-reset: et; }
.bu-tun-etapes > li { border-bottom: 1px solid var(--trait); }
.bu-tun-et { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(70px, 2fr) minmax(94px, auto); align-items: center; gap: 12px;
  width: 100%; background: none; border: 0; padding: 11px 2px; cursor: pointer; text-align: left; }
.bu-tun-nom { font-size: 13.5px; font-weight: 600; min-width: 0; }
.bu-tun-nom em { font-style: normal; font-size: 10px; color: var(--doux); background: var(--carte2); border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.bu-tun-nom small { display: block; font-weight: 400; font-size: 11.5px; color: var(--doux); margin-top: 2px; }
.bu-tun-barre { height: 10px; border-radius: 5px; background: var(--carte2); overflow: hidden; }
.bu-tun-barre i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #4b8bf2, #3fc28a); }
.bu-tun-chiffres { text-align: right; }
.bu-tun-chiffres b { display: block; font-size: 16px; line-height: 1.1; }
.bu-tun-chiffres small { font-size: 10.5px; color: var(--doux); }
.bu-tun-detail { padding: 0 2px 14px; }
.bu-tun-detail code { font-size: 11px; background: var(--carte2); border-radius: 4px; padding: 1px 5px; word-break: break-all; }
.bu-tun-tab { overflow-x: auto; margin: 4px 0 10px; }
.bu-tun-tab table { border-collapse: collapse; width: 100%; font-size: 12px; min-width: 620px; }
.bu-tun-tab th, .bu-tun-tab td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.bu-tun-tab thead th { font-size: 10.5px; font-weight: 600; color: var(--doux); text-transform: uppercase; letter-spacing: .02em; }
.bu-tun-tab thead th:nth-child(1), .bu-tun-tab thead th:nth-child(2) { text-align: left; }
.bu-tun-tab tbody th { text-align: left; font-size: 13px; }
.bu-tun-tab tbody th i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 6px; }
.bu-tun-tab td.prom { text-align: left; white-space: normal; min-width: 170px; }
.bu-tun-tab td.prom a { color: inherit; }
.bu-tun-tab td.prom small { display: block; font-size: 10.5px; color: var(--c); margin-top: 1px; }
.bu-tun-tab td.tx { font-weight: 700; }
.bu-tun-tab tr.coupee { opacity: .5; }
.bu-tun-tab .bu-x { border: 0; background: none; color: var(--pale); font-size: 16px; cursor: pointer; line-height: 1; padding: 0 2px; }
.bu-tun-bout { font-size: 12.5px; color: var(--doux); margin: 10px 0 0; }
.bu-tun-h { font-size: 14px; margin: 24px 0 2px; }
.bu-tun-journal { list-style: none; margin: 6px 0 0; padding: 0; }
.bu-tun-journal li { display: flex; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--trait); font-size: 12.5px; }
.bu-tun-journal time { flex: 0 0 112px; color: var(--pale); font-size: 11.5px; }
.bu-tun-journal small { display: block; color: var(--doux); font-size: 11.5px; margin-top: 2px; }
@media (max-width: 520px) { .bu-tun-et { grid-template-columns: 1fr auto; } .bu-tun-barre { grid-column: 1 / -1; } }

/* ---- Le jeu : niveaux, quêtes, séries ---- */













.bu-q.fait > button { background: var(--vert); border-color: var(--vert); }
.bu-q.fait > button i::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 700; line-height: 20px; }

.bu-q.fait b { text-decoration: line-through; color: var(--doux); }




.bu-serie.on b { background: #fff1e2; color: #d2691e; }











.bu-fanfare { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); z-index: 60; background: #a35ee8; color: #fff;
  padding: 11px 18px; border-radius: 14px; box-shadow: var(--ombre); text-align: center; transition: opacity .4s; animation: bu-entre .2s ease-out; }
.bu-fanfare b { display: block; font-size: 14px; }
.bu-fanfare span { font-size: 11.5px; opacity: .85; }

/* ---------- Récap : une carte par agent, lue d'un coup d'œil ---------- */
.bu-recap { width: 420px; }
.bu-r-chapo { font-size: 12px; color: var(--doux); margin: 10px 0 2px; }
.bu-r-chapo:empty { display: none; }
.bu-r-carte { border-left: 3px solid var(--c); background: var(--carte2); border-radius: 12px; padding: 9px 11px; margin: 10px 0 0; }
.bu-r-carte > header { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.bu-r-carte > header b { font-size: 13.5px; }
.bu-r-carte > header em { font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.bu-r-compte { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.bu-r-compte i { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--carte); color: var(--doux); white-space: nowrap; }
.bu-r-compte i.fait { color: var(--vert); } .bu-r-compte i.attente { color: var(--jaune); } .bu-r-compte i.encours { color: #2f62c4; }
.bu-r-liste { list-style: none; margin: 7px 0 0; padding: 0; }
.bu-r-l { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 5px 0; border-top: 1px solid var(--trait); font-size: 12.5px; }
.bu-r-l:first-child { border-top: 0; }
.bu-r-l span { min-width: 0; }
.bu-r-l small { grid-column: 1 / -1; font-size: 11.5px; color: var(--doux); line-height: 1.35; }
.bu-r-l time { font-size: 11px; color: var(--doux); white-space: nowrap; }
.bu-r-l.attente span::after { content: " · à valider"; color: var(--jaune); font-size: 11px; }
.bu-r-plus { margin-top: 7px; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--c); cursor: pointer; padding: 3px 0; }
@media (max-width: 760px) { .bu-recap { left: 8px; right: 8px; width: auto; } }

/* =====================================================================
   LE CRM (1er novembre 2026)
   Le poste de travail d'un agent ne s'ouvre plus par-dessus une carte en
   plein écran : il est posé dans la page du pôle, comme n'importe quel
   onglet. Ces règles sont en fin de fichier pour passer après celles du
   bureau en îles, sans avoir à les réécrire une par une tant que le code
   de dessin n'est pas supprimé.
   ===================================================================== */

/* Le conteneur n'est plus un calque plein écran, et il rend ses couleurs au thème.
   Les variables sont posées AUSSI sur .lmr-poste : le poste de travail est déplacé dans
   la page du pôle, donc il n'est plus un descendant de .bu et n'héritait plus rien.
   Sans ça, color: var(--vert) ne résolvait plus et les pastilles « au travail »
   s'écrivaient en blanc sur fond vert pâle, c'est-à-dire nulle part. */
.bu, .lmr-poste {
  --encre: var(--color-fg); --doux: var(--color-fg-muted); --pale: var(--color-fg-muted);
  --trait: var(--color-border-line); --carte: var(--color-panel); --carte2: color-mix(in srgb, var(--color-fg) 5%, var(--color-panel));
  --ombre: var(--ombre-douce);
  --rouge: #e3162b; --jaune: #f6b93b; --vert: #2fbf71;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}
.bu {
  position: static; inset: auto; z-index: auto; overflow: visible;
  background: none; color: var(--color-fg); font: inherit;
}
.lmr-poste { color: var(--color-fg); font: 14px/1.45 var(--sans), system-ui, sans-serif; }
.lmr-poste button, .lmr-poste input, .lmr-poste textarea, .lmr-poste select { font: inherit; color: inherit; }
.lmr-poste [hidden] { display: none !important; }
/* Tout ce qui appartenait à la carte : canvas, étiquettes posées dessus, barre du haut,
   rail des agents, bouton de retour, barre de mission flottante. */


/* Le poste, une fois déplacé dans la page d'un pôle. */
.lmr-poste > .bu-panel {
  position: static; width: auto; max-width: none; inset: auto;
  background: var(--color-panel); border: 1px solid var(--color-border-line);
  border-radius: 20px; box-shadow: var(--ombre-douce);
  /* Une hauteur fixe plutôt qu'une page qui s'allonge sans fin : la discussion défile
     dans son cadre et la zone de saisie reste sous les yeux, au clavier comme au doigt. */
  height: min(74vh, 760px); min-height: 440px;
  transition: none;
}
.lmr-poste > .bu-taches {
  position: static; width: auto; inset: auto; height: min(74vh, 760px);
  background: var(--color-panel); border: 1px solid var(--color-border-line);
  border-radius: 20px; box-shadow: var(--ombre-douce); animation: none;
}
.lmr-poste > .bu-panel.large { width: auto; }
.bu-p-tete { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, var(--color-panel)), var(--color-panel)); }

/* Sur téléphone, le poste prend la hauteur utile de l'écran : c'est là qu'elle écrit. */
@media (max-width: 860px) {
  .lmr-poste > .bu-panel, .lmr-poste > .bu-taches { height: calc(100dvh - 210px); min-height: 360px; }
}

/* ---------- Les pastilles d'état, en mode nuit ----------
   Elles portaient un fond pâle écrit en dur (vert d'eau, crème, rose), posé à l'époque
   où le poste de travail vivait sur une carte toujours claire. Sur un panneau sombre,
   ces taches laiteuses ressortent comme des autocollants oubliés.
   Plutôt que de redéfinir une couleur par état, on teinte le fond avec la couleur du
   texte lui-même : le vert reste vert, l'ambre reste ambre, et le contraste tient
   puisque la teinte dérive de l'encre posée juste au-dessus. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lmr-poste :is(.bu-ap-st, .bu-ap-chef, .bu-ap-et, .bu-evt.bu-pdf, .bu-relit, .bu-mtv-h u),
  :root:not([data-theme="light"]) .lmr-poste :is(.bu-valid, .bu-f-carte.marge, .bu-f-manque, .bu-set-alerte, .bu-rushs) {
    background: color-mix(in srgb, currentColor 15%, transparent);
  }
  :root:not([data-theme="light"]) .lmr-poste .bu-mtv-b { background: color-mix(in srgb, var(--color-fg) 14%, transparent); }
  :root:not([data-theme="light"]) .lmr-poste .bu-p-dep button { background: color-mix(in srgb, var(--color-fg) 10%, transparent); }
}
:root[data-theme="dark"] .lmr-poste :is(.bu-ap-st, .bu-ap-chef, .bu-ap-et, .bu-evt.bu-pdf, .bu-relit, .bu-mtv-h u),
:root[data-theme="dark"] .lmr-poste :is(.bu-valid, .bu-f-carte.marge, .bu-f-manque, .bu-set-alerte, .bu-rushs) {
  background: color-mix(in srgb, currentColor 15%, transparent);
}
:root[data-theme="dark"] .lmr-poste .bu-mtv-b { background: color-mix(in srgb, var(--color-fg) 14%, transparent); }
:root[data-theme="dark"] .lmr-poste .bu-p-dep button { background: color-mix(in srgb, var(--color-fg) 10%, transparent); }

/* Le bouton « Centrer » recentrait la caméra sur une île. Il n'y a plus de caméra. */
.lmr-poste [data-centrer], .lmr-poste .bu-fermer { display: none !important; }

/* ---------- Mes actions ----------
   La page d'accueil d'un pôle. Des process à lancer, pas une équipe à saluer.
   Grandes cibles tactiles : c'est l'écran qu'elle ouvrira le plus souvent au doigt. */
.bu-ac { display: flex; flex-direction: column; gap: 10px; }
.bu-ac-intro { color: var(--doux); font-size: 12.5px; margin: 0 0 2px; }
.bu-ac-titre { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--doux); margin: 16px 0 2px; }
.bu-ac-liste { display: flex; flex-direction: column; gap: 7px; }
.bu-ac-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--carte2); border: 1px solid var(--trait); border-radius: 13px;
  padding: 13px 14px; font-size: 14px; font-weight: 600; color: var(--encre); min-height: 50px;
}
.bu-ac-btn span { flex: 1; min-width: 0; }
/* « Lancer » reste discret jusqu'au survol : vingt boutons rouges alignés, c'est un mur. */
.bu-ac-btn em {
  font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--doux); flex: none; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--encre) 7%, transparent);
}
.bu-ac-btn:hover { border-color: color-mix(in srgb, var(--rouge) 45%, var(--trait)); }
.bu-ac-btn:hover em { background: var(--rouge); color: #fff; }
.bu-ac-outils { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 8px; }
.bu-ac-outil {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
  background: none; border: 1px dashed var(--trait); border-radius: 13px; padding: 12px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--encre); text-align: left;
}
.bu-ac-outil span { font-size: 11.5px; font-weight: 700; color: var(--doux); flex: none; }
.bu-ac-outil:hover { border-style: solid; border-color: color-mix(in srgb, var(--rouge) 45%, var(--trait)); }
.bu-ac-libre { display: flex; gap: 8px; align-items: center; background: var(--carte2); border-radius: 13px; padding: 6px 6px 6px 13px; }
.bu-ac-libre input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 9px 0; font-size: 14px; }
.bu-ac-libre input::placeholder { color: var(--pale); }
@media (max-width: 860px) { .bu-ac-btn { min-height: 54px; } }

/* ---------- Densité et états vides ----------
   Des lignes plus courtes : on en voit douze au lieu de huit, et comme elles sont
   groupées par moment, on sait dans quel tiers de la liste chercher. */
.bu-ac { gap: var(--e2); }
.bu-ac-titre { margin: var(--e5) 0 var(--e1); font-size: var(--t-xs); }
.bu-ac-titre:first-child { margin-top: 0; }
.bu-ac-liste { gap: var(--e1); }
.bu-ac-btn { padding: 10px var(--e3); min-height: 0; font-size: var(--t-sm); border-radius: var(--r2); gap: var(--e3); }
.bu-ac-btn em { padding: 3px var(--e2); font-size: var(--t-xs); }
.bu-ac-outil { padding: 10px var(--e3); border-radius: var(--r2); font-size: var(--t-sm); }
.bu-ac-libre { border-radius: var(--r2); padding: var(--e1) var(--e1) var(--e1) var(--e3); }
.bu-ac-libre input { padding: var(--e2) 0; font-size: var(--t-sm); }
.bu-ac-intro { display: none; }   /* la ligne de contexte vit maintenant dans l'en-tête de page */

/* Un écran vide dit ce qui se passe et ce qu'on peut y faire. Un tiret ne dit rien,
   et laisse croire à une panne. */
.bu-vide {
  margin: 0; padding: var(--e5) 0; color: var(--doux); font-size: var(--t-sm); line-height: 1.5;
}
.bu-vide span { display: block; margin-top: var(--e1); color: var(--pale); }
@media (max-width: 860px) { .bu-ac-btn { padding: 13px var(--e3); } }

/* ---------- Le contenu à plat ----------
   Ces règles doivent vivre ICI et pas dans cockpit.css : index.html charge bureau.css
   en second, donc à spécificité égale c'est cette feuille qui tranche. Posées ailleurs,
   elles perdaient contre la carte héritée du bureau en îles, et la boîte blanche
   arrondie restait autour du contenu malgré tout. */
.lmr-poste > .bu-panel {
  display: block; height: auto; min-height: 0; overflow: visible;
  background: none; border: 0; border-radius: 0; box-shadow: none; width: auto; max-width: none;
}
.lmr-poste .bu-p-tete { background: none; padding: 0; display: flex; align-items: center; gap: var(--e3); min-height: 0; }
.lmr-poste .bu-p-tete:empty { display: none; }
.lmr-poste .bu-p-corps { overflow: visible; padding: 0; flex: none; gap: var(--e2); }
.lmr-poste > .bu-taches {
  height: auto; min-height: 0; overflow: visible;
  background: none; border: 0; border-radius: 0; box-shadow: none; width: auto;
}

/* La zone de saisie du résultat colle au bas de la fenêtre : la conversation défile
   derrière elle, et le champ reste sous la main sans qu'on ait à redescendre. */
.lmr-poste .bu-p-pied {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--color-bg); border-top: 1px solid var(--color-border-line);
  padding: var(--e3) 0 var(--e2); margin-top: var(--e3);
}

/* Le retour vers la liste d'actions, depuis un résultat. */
.bu-retour-actions {
  background: none; border: 0; cursor: pointer; padding: var(--e2) 0;
  color: var(--doux); font: inherit; font-size: var(--t-sm); font-weight: 600;
}
.bu-retour-actions:hover { color: var(--encre); }
.bu-retour-actions[hidden] { display: none; }

/* ---------- La fiche de résultat ----------
   Ce qui remplace le fil de discussion : la demande, l'état, la sortie, les boutons.
   Pas de bulles, pas d'heures alignées à droite, pas de zone de saisie en bas. */
.bu-res-tete { padding-bottom: var(--e3); border-bottom: 1px solid var(--trait); margin-bottom: var(--e4); }
.bu-res-quoi { margin: 0; font-size: var(--t-md); font-weight: 700; line-height: 1.35; }
.bu-res-etat { margin: var(--e1) 0 0; font-size: var(--t-xs); color: var(--doux); }
.bu-res-encours { color: var(--jaune); font-weight: 700; }
.bu-res-ko { color: var(--rouge); font-weight: 700; }
.bu-res-corps { font-size: var(--t-sm); line-height: 1.6; }
.bu-res-corps > :first-child { margin-top: 0; }
.bu-res-btns { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--trait); }
.bu-res-btns:empty { display: none; }

/* =====================================================================
   LES QUATRE FAÇONS DE TRAVAILLER
   ===================================================================== */

/* ---------- La pile : une décision au centre, la suite à droite ---------- */
.vu-pile { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: var(--e5); align-items: start; }
.vu-compte { margin: 0 0 var(--e3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.vu-pile-reste { border-left: 1px solid var(--trait); padding-left: var(--e4); }
.vu-mini { margin: 0; padding: var(--e2) 0; border-bottom: 1px solid var(--trait); font-size: var(--t-sm); line-height: 1.35; }
.vu-mini i { display: block; font-style: normal; font-size: var(--t-xs); color: var(--pale); margin-top: 1px; }
@media (max-width: 860px) { .vu-pile { grid-template-columns: 1fr; } .vu-pile-reste { border-left: 0; border-top: 1px solid var(--trait); padding: var(--e3) 0 0; } }

/* ---------- Le pipeline : colonnes et cartes qu'on glisse ---------- */
.vu-kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(192px, 1fr); gap: var(--e2); overflow-x: auto; padding-bottom: var(--e2); }
.vu-col { background: color-mix(in srgb, var(--encre) 4%, transparent); border: 1px solid transparent; border-radius: var(--r2); padding: var(--e2); min-height: 180px; }
.vu-col-vise { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.vu-col h4 { margin: 0 0 var(--e2); display: flex; justify-content: space-between; align-items: center; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.vu-col h4::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--c); margin-right: 6px; }
.vu-col h4 i { font-style: normal; color: var(--pale); margin-left: auto; }
.vu-cd { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r1); padding: var(--e2) 10px; margin-bottom: 6px; cursor: grab; }
.vu-cd:active { cursor: grabbing; }
.vu-cd b { display: block; font-size: var(--t-sm); font-weight: 600; }
.vu-cd span { display: block; font-size: var(--t-xs); color: var(--doux); margin-top: 2px; line-height: 1.35; }
.vu-cd-q { color: var(--pale) !important; }
.vu-cd-part { opacity: .45; border-color: var(--c); }

/* ---------- Le tableau : des lignes, le détail à droite ---------- */
.vu-deux { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: var(--e4); align-items: start; }
.vu-tbl-boite { overflow-x: auto; }
.vu-tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.vu-tbl th { text-align: left; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); padding: var(--e2) 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.vu-tbl td { padding: 10px; border-bottom: 1px solid var(--trait); }
.vu-tbl tbody tr { cursor: pointer; }
.vu-tbl tbody tr:hover { background: color-mix(in srgb, var(--encre) 4%, transparent); }
.vu-tbl tbody tr.on { background: color-mix(in srgb, var(--rouge) 7%, transparent); }
.vu-pill { display: inline-block; font-size: var(--t-xs); font-weight: 600; padding: 2px 9px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); white-space: nowrap; }
.vu-lat { border-left: 1px solid var(--trait); padding-left: var(--e4); }
.vu-lat h3 { margin: 0; font-size: var(--t-md); font-weight: 700; }
.vu-lat-r { margin: 2px 0 0; font-size: var(--t-xs); color: var(--doux); }
.vu-lat-v { margin: 0; font-size: var(--t-sm); line-height: 1.5; }
.vu-lat-etapes { display: flex; flex-direction: column; gap: 4px; }
.vu-lat-etapes button { text-align: left; background: none; border: 1px solid var(--trait); border-radius: var(--r1); padding: 7px 10px; font: inherit; font-size: var(--t-sm); color: var(--encre); cursor: pointer; }
.vu-lat-etapes button:hover { border-color: color-mix(in srgb, var(--rouge) 50%, var(--trait)); }
.vu-lat-etapes button.on { background: var(--rouge); border-color: var(--rouge); color: #fff; font-weight: 600; }
@media (max-width: 860px) { .vu-deux { grid-template-columns: 1fr; } .vu-lat { border-left: 0; border-top: 1px solid var(--trait); padding: var(--e3) 0 0; } }

/* ---------- La semaine : sept jours ---------- */
.vu-sem { display: grid; grid-template-columns: repeat(7, minmax(108px, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--r2); overflow: hidden; }
.vu-j { background: var(--color-panel); padding: var(--e2) 7px; min-height: 160px; }
.vu-j h4 { margin: 0 0 var(--e2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--doux); }
.vu-j h4 b { display: block; font-size: 1.05rem; color: var(--encre); letter-spacing: -.02em; }
.vu-j.auj h4 b { color: var(--rouge); }
.vu-ev { border-radius: 6px; padding: 5px 7px; margin-bottom: 4px; font-size: var(--t-xs); line-height: 1.35; font-weight: 500; }
.vu-ev.ok { background: color-mix(in srgb, var(--jaune) 20%, transparent); color: var(--encre); }
.vu-ev.fait { background: color-mix(in srgb, var(--vert) 18%, transparent); color: var(--encre); }
.vu-ev.video { background: color-mix(in srgb, var(--rouge) 13%, transparent); color: var(--encre); }
.vu-ev.vide { background: none; border: 1px dashed var(--trait); color: var(--pale); text-align: center; }
@media (max-width: 860px) { .vu-sem { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 148px; overflow-x: auto; } }

/* ---------- La bascule jour/nuit, dans l'en-tête ---------- */
.lmr-entete-btns { display: flex; align-items: center; gap: var(--e2); flex: none; }

/* ---------- La base mails ---------- */
.ml-chiffres { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.ml-c { background: var(--carte2); border-radius: var(--r2); padding: 10px var(--e3); min-width: 94px; }
.ml-c b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ml-c span { font-size: var(--t-xs); color: var(--doux); }
.ml-barre { display: flex; gap: var(--e2); margin-bottom: var(--e3); flex-wrap: wrap; }
.ml-q { flex: 1; min-width: 190px; }
.ml-q, .ml-statut, .ml-import textarea, .ml-import-tags, .ml-test input, .ml-test textarea {
  border: 1px solid var(--trait); border-radius: var(--r2); padding: 9px var(--e3);
  background: var(--carte); color: var(--encre); font: inherit; font-size: var(--t-sm); width: 100%;
}
.ml-statut { width: auto; min-width: 160px; }
.ml-q:focus, .ml-statut:focus, .ml-import textarea:focus, .ml-test input:focus, .ml-test textarea:focus {
  outline: none; border-color: var(--rouge);
}
.ml-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--e4); }
.ml-tag { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--trait);
  border-radius: 999px; padding: 5px 11px; font: inherit; font-size: var(--t-xs); font-weight: 600;
  color: var(--doux); cursor: pointer; }
.ml-tag i { font-style: normal; color: var(--pale); }
.ml-tag.on { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.ml-tag.on i { color: rgba(255,255,255,.75); }
.ml-pastille { display: inline-block; font-size: var(--t-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--encre) 8%, transparent); margin-right: 4px; }
.ml-import, .ml-test { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
.ml-import-bas { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.ml-import-bas .ml-import-tags { flex: 1; min-width: 190px; }
.ml-note { margin: 0; font-size: var(--t-xs); color: var(--doux); line-height: 1.5; }

/* L'état de l'envoi : ce qui manque avant de pouvoir écrire à qui que ce soit. */
.ml-etat { border: 1px solid var(--trait); border-radius: var(--r2); padding: var(--e3) var(--e4); margin-bottom: var(--e4); }
.ml-etat.ok { border-color: color-mix(in srgb, var(--vert) 45%, var(--trait)); }
.ml-etat > b { display: block; font-size: var(--t-md); margin-bottom: var(--e2); }
.ml-etat ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.ml-etat li { font-size: var(--t-sm); padding-left: 22px; position: relative; line-height: 1.45; }
.ml-etat li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.ml-etat li.ok::before { content: "✓"; color: var(--vert); }
.ml-etat li.ko::before { content: "✕"; color: var(--rouge); }
.ml-etat li.att::before { content: "·"; color: var(--jaune); font-size: 1.4em; line-height: .8; }
.ml-err { margin: var(--e2) 0 0; font-size: var(--t-xs); color: var(--rouge); }