/* Waka Orbit Design System (ORBIT v5) : console sombre, angles droits, orange Waka + un seul accent (vert = succès).
   Layout : rail d'icônes à gauche (70 → 260 px), en-tête collant de 64 px, tableaux-panneaux, détail en fenêtre. */
@font-face { font-family: 'bootstrap-icons'; src: url(assets/bootstrap-icons.woff2) format('woff2'); font-display: block }
:root {
  /* tokens/colors.css */
  --orbit-cosmos: #1A1A1E; --orbit-night: #1E1E24; --orbit-deep: #222230; --orbit-hover: #2A2A32; --orbit-border: #333340;
  --orbit-ink-1: #B8D4E8; --orbit-ink-2: #A8A8B0; --orbit-ink-3: #6E6E7A; --orbit-white: #FFFFFF;
  --orbit-orange: #E8832A; --orbit-orange-700: #C96E1E; --orbit-gold: #F1C40F;
  --orbit-orange-dim: rgba(232, 131, 42, 0.10); --orbit-orange-line: rgba(232, 131, 42, 0.30); --orbit-orange-glow: rgba(232, 131, 42, 0.35);
  --orbit-cyan: #00BCD4; --orbit-blue: #29B6F6; --orbit-green: #4CAF50; --orbit-red: #C0392B;
  --orbit-green-dim: rgba(76, 175, 80, 0.12); --orbit-red-dim: rgba(192, 57, 43, 0.12);
  --surface-app: var(--orbit-cosmos); --surface-raised: var(--orbit-night); --surface-inset: var(--orbit-deep); --surface-hover: var(--orbit-hover);
  --border-default: var(--orbit-border); --border-strong: var(--orbit-ink-3); --border-focus: var(--orbit-orange);
  --text-primary: var(--orbit-ink-1); --text-secondary: var(--orbit-ink-2); --text-muted: var(--orbit-ink-3); --text-emphasis: var(--orbit-white);
  --action-primary: var(--orbit-orange); --action-primary-press: var(--orbit-orange-700);
  --feedback-success: var(--orbit-green); --feedback-danger: var(--orbit-red);
  /* fond : lueurs orange/cyan + grille 56 px */
  --glow-orange: rgba(232, 131, 42, 0.12); --glow-cyan: rgba(0, 188, 212, 0.08); --grid-line: rgba(184, 212, 232, 0.045);
  --veil: rgba(10, 10, 14, 0.72);
  /* tokens/typography.css */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --text-2xs: 0.65rem; --text-xs: 0.72rem; --text-sm: 0.82rem; --text-md: 0.88rem; --text-lg: 1rem; --text-xl: 1.25rem; --text-2xl: 1.55rem; --text-3xl: 1.75rem;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800;
  --leading-snug: 1.35; --leading-body: 1.6; --tracking-eyebrow: 0.06em; --tracking-tight: -0.01em;
  /* tokens/spacing.css */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --pad-card: 20px; --pad-page: 32px; --rail-sidebar: 70px; --rail-sidebar-open: 260px; --header-height: 64px;
  /* tokens/effects.css */
  --radius-pill: 9999px;
  --shadow-panel: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.40);
  --focus-ring: 0 0 0 3px rgba(232, 131, 42, 0.10);
  --transition-fast: 0.2s ease; --transition: 0.3s ease;
  --gradient-gold: linear-gradient(135deg, var(--orbit-orange), var(--orbit-gold));
  --gradient-spectrum: linear-gradient(90deg, var(--orbit-orange), var(--orbit-cyan), var(--orbit-blue));
  color-scheme: dark;
}

* { box-sizing: border-box; border-radius: 0 }
[hidden] { display: none !important }
html, body { min-height: 100% }
body {
  margin: 0; color: var(--text-primary); font: var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans);
  background:
    radial-gradient(ellipse at 100% 0%, var(--glow-orange), transparent 45%),
    radial-gradient(ellipse at 0% 100%, var(--glow-cyan), transparent 45%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--surface-app);
  background-attachment: fixed;
}
button { font: inherit; color: inherit; cursor: pointer }
a { color: inherit }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px }
.bi { font-family: 'bootstrap-icons'; font-style: normal; font-weight: normal; line-height: 1; display: inline-block; vertical-align: -0.125em; speak: never }
.bi-people::before{content:"\f4d0"} .bi-briefcase::before{content:"\f1cc"} .bi-megaphone::before{content:"\f484"} .bi-chat-left-text::before{content:"\f252"}
.bi-calendar-event::before{content:"\f1e8"} .bi-telephone::before{content:"\f5c1"} .bi-chat-dots::before{content:"\f24a"} .bi-envelope::before{content:"\f32f"}
.bi-whatsapp::before{content:"\f618"} .bi-linkedin::before{content:"\f472"} .bi-plus-lg::before{content:"\f64d"} .bi-x-lg::before{content:"\f659"}
.bi-arrow-left::before{content:"\f12f"} .bi-person-lines-fill::before{content:"\f4db"} .bi-pause-fill::before{content:"\f4c3"} .bi-play-fill::before{content:"\f4f4"}
.bi-stop-circle::before{content:"\f591"} .bi-telephone-x::before{content:"\f5c0"} .bi-mic-mute::before{content:"\f48f"} .bi-calendar-plus::before{content:"\f1ef"}
.bi-check-circle::before{content:"\f26b"} .bi-clock::before{content:"\f293"} .bi-eye::before{content:"\f341"} .bi-file-earmark-text::before{content:"\f38b"}
.bi-arrow-repeat::before{content:"\f130"} .bi-box-arrow-up-right::before{content:"\f1c5"} .bi-chat-text::before{content:"\f267"}
.bi-telephone-outbound::before{content:"\f5bc"} .bi-telephone-inbound::before{content:"\f5b8"} .bi-send::before{content:"\f6c0"} .bi-person-plus::before{content:"\f4dd"}
.bi-star-fill::before{content:"\f586"} .bi-arrow-right::before{content:"\f138"} .bi-envelope-open::before{content:"\f32e"}
.bi-arrow-down-left::before{content:"\f11e"} .bi-arrow-up-right::before{content:"\f144"} .bi-funnel::before{content:"\f3e1"} .bi-arrow-counterclockwise::before{content:"\f117"}
.bi-mic::before{content:"\f490"} .bi-reply::before{content:"\f520"} .bi-search::before{content:"\f52a"} .bi-check2-all::before{content:"\f26f"} .bi-robot::before{content:"\f6b1"} .bi-person::before{content:"\f4e1"} .bi-stars::before{content:"\f589"} .bi-arrow-clockwise::before{content:"\f116"} .bi-headset::before{content:"\f414"}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm) }
.muted { color: var(--text-muted); font-size: var(--text-sm) }
.fort { font-weight: var(--weight-semibold); color: var(--text-emphasis) }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted) }

/* ── Coque : rail + en-tête ── */
.rail { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail-sidebar); background: var(--surface-raised); border-right: 1px solid var(--border-default); z-index: 10;
  display: flex; flex-direction: column; overflow: hidden; transition: width var(--transition); padding-top: env(safe-area-inset-top, 0px) }
.rail:hover, .rail:focus-within { width: var(--rail-sidebar-open); box-shadow: var(--shadow-panel) }
.rail-marque { height: var(--header-height); display: flex; align-items: center; gap: var(--sp-3); padding: 0 17px; border-bottom: 1px solid var(--border-default); white-space: nowrap }
.rail-marque img { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain }
.rail-marque b { color: var(--orbit-orange); font-weight: var(--weight-black); letter-spacing: var(--tracking-tight) }
.rail nav { display: grid; padding: var(--sp-3) 0 }
/* Planifier une réunion, Appeler, Assistant : dans la barre de gauche, sous les écrans (demande de Nabil, 06/10) */
.rail { display: flex; flex-direction: column } .rail-outils { margin-top: auto; border-top: 1px solid var(--border-default) }
.rail nav button { display: flex; align-items: center; gap: var(--sp-4); height: 48px; padding: 0 24px; background: none; border: 0; border-left: 3px solid transparent;
  color: var(--text-muted); font-weight: var(--weight-semibold); font-size: var(--text-sm); white-space: nowrap; text-align: left; transition: color var(--transition-fast), background var(--transition-fast) }
.rail nav button .bi { font-size: 1.15rem; width: 18px }
.rail nav button:hover { color: var(--text-primary); background: var(--surface-hover) }
.rail nav button[aria-current="page"] { color: var(--orbit-orange); border-left-color: var(--orbit-orange); background: var(--orbit-orange-dim) }

.coque { margin-left: var(--rail-sidebar); min-width: 0 }
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; min-height: var(--header-height); background: var(--surface-raised); border-bottom: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) var(--pad-page); flex-wrap: wrap }
.entete h1 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--text-emphasis); letter-spacing: var(--tracking-tight); display: flex; align-items: center; gap: var(--sp-3) }
.entete h1 .bi { color: var(--orbit-orange); font-size: 1.1rem }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center }
.bandeau { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); padding: var(--sp-2) var(--pad-page); border-bottom: 1px solid var(--border-default); background: var(--surface-inset) }
.bandeau b { color: var(--orbit-orange); font-weight: var(--weight-semibold) }

main { padding-block: var(--sp-6) var(--sp-12); padding-inline: var(--pad-page); display: grid; gap: var(--sp-5); max-width: 1680px }
.intro { margin: 0; color: var(--text-secondary); max-width: 72ch }

/* ── Boutons (components/buttons) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 11px 20px; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1;
  border: 1px solid var(--border-default); background: var(--surface-inset); color: var(--text-secondary); white-space: nowrap; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast) }
.btn:hover { border-color: var(--orbit-orange); color: var(--text-primary) }
.btn.primaire { background: var(--action-primary); border-color: var(--action-primary); color: var(--orbit-white) }
.btn.primaire:hover { background: var(--action-primary-press); border-color: var(--action-primary-press) }
.btn.fantome { background: transparent; border-color: transparent }
.btn.fantome:hover { color: var(--orbit-orange) }
.btn.danger { background: transparent; color: var(--feedback-danger); border-color: var(--feedback-danger) }
.btn.danger:hover { background: var(--orbit-red-dim) }
.btn.sm { padding: 7px 14px; font-size: var(--text-xs) }
.btn.icone { padding: 0; width: 32px; height: 32px }
.btn.lien { background: none; border: 0; padding: 0; color: var(--orbit-orange); font-size: inherit }
.btn.lien:hover { color: var(--orbit-gold) }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none }
.contact-btns { display: flex; flex-wrap: wrap; gap: 6px }

/* ── Badges (components/badges) : orange = à traiter, vert = succès, neutre = le reste ── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; white-space: nowrap; background: var(--surface-inset); color: var(--text-muted); border: 1px solid var(--border-default) }
.badge .bi { font-size: 1.05em }
.badge.act { background: var(--orbit-orange-dim); color: var(--orbit-orange); border-color: var(--orbit-orange-line) }
.badge.ok { background: var(--orbit-green-dim); color: var(--feedback-success); border-color: transparent }
.badge.nom { text-transform: none; letter-spacing: 0; font-size: var(--text-xs); color: var(--text-secondary) }
.badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center }

/* ── Panneaux / tableaux (components/cards) ── */
.panneau { background: var(--surface-raised); border: 1px solid var(--border-default) }
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 14px var(--pad-card); border-bottom: 1px solid var(--border-default) }
.panneau-tete h2 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); display: flex; align-items: center; gap: var(--sp-2) }
.panneau-tete h2 .bi { color: var(--orbit-orange) }
.table-zone { overflow-x: auto }
table { width: 100%; border-collapse: collapse; min-width: 840px }
th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); font-weight: var(--weight-semibold);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-default); background: var(--surface-inset); white-space: nowrap }
td { padding: 14px var(--sp-4); border-bottom: 1px solid var(--border-default); vertical-align: top }
tbody tr:last-child td { border-bottom: 0 }
tbody tr[data-ouvrir] { cursor: pointer; transition: background var(--transition-fast) }
tbody tr[data-ouvrir]:hover td { background: var(--surface-hover) }
tbody tr[data-ouvrir]:hover td:first-child { box-shadow: inset 3px 0 0 var(--orbit-orange) }

/* ── Fenêtre de détail ── */
.voile { position: fixed; inset: 0; background: var(--veil); display: flex; align-items: flex-start; justify-content: center; padding: var(--sp-12) var(--sp-4); overflow-y: auto; z-index: 20 }
.fenetre { background: var(--surface-raised); border: 1px solid var(--border-default); width: 100%; max-width: 860px; box-shadow: var(--shadow-modal) }
.fenetre.petite { max-width: 500px }
.f-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--border-default) }
.f-tete h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--text-emphasis); letter-spacing: var(--tracking-tight); text-wrap: balance }
.f-tete .muted { margin-top: var(--sp-1) }
.f-corps { padding: var(--sp-5) var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-6) }
.f-pied { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); padding: 14px var(--sp-6); border-top: 1px solid var(--border-default); background: var(--surface-inset) }
.f-pied .gauche { margin-right: auto }
.bloc > .eyebrow { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2) }
.bloc > .eyebrow .bi { color: var(--orbit-orange) }
.liste { display: grid; border: 1px solid var(--border-default); background: var(--surface-app) }
.ligne { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 14px; border: 0; border-bottom: 1px solid var(--border-default); background: none; text-align: left; width: 100%; flex-wrap: wrap; color: inherit }
.ligne:last-child { border-bottom: 0 }
.ligne.cliquable { cursor: pointer; transition: background var(--transition-fast) }
.ligne.cliquable:hover, .ligne.cliquable:focus-visible { background: var(--surface-hover) }
.badges .rattacher-aff { margin-left: 4px }
#lignes .fil-affaire-ligne { margin-top: 4px }
button.ligne { transition: background var(--transition-fast) }
button.ligne:hover { background: var(--surface-hover) }
.ligne > div { min-width: 0 }

.interlocuteur { display: grid; gap: var(--sp-2); padding: 14px var(--sp-4); border-bottom: 1px solid var(--border-default) }
.interlocuteur:last-child { border-bottom: 0 }
.interlocuteur.principal { background: var(--orbit-orange-dim); box-shadow: inset 3px 0 0 var(--orbit-orange) }
.interlocuteur .haut { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; align-items: baseline }
.etiq { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--orbit-orange); font-weight: var(--weight-bold); display: flex; gap: 5px; align-items: center }
.nom { font-weight: var(--weight-bold); color: var(--text-emphasis) }
.interlocuteur.principal .nom { font-size: var(--text-lg) }
.coord { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs) }
.coord span { user-select: all }

.message { border: 1px solid var(--border-default); border-left: 3px solid var(--orbit-orange); padding: 14px var(--sp-4); background: var(--surface-inset); white-space: pre-wrap; color: var(--text-primary) }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-2) }
.kpi { border: 1px solid var(--border-default); background: var(--surface-app); padding: 14px var(--sp-4); display: grid; gap: 6px; transition: border-color var(--transition-fast) }
.kpi:hover { border-color: var(--border-strong) }
.kpi .eyebrow { display: flex; gap: 6px; align-items: center }
.kpi .eyebrow .bi { color: var(--orbit-orange) }
.kpi b { font-size: var(--text-3xl); font-weight: var(--weight-black); color: var(--text-emphasis); line-height: 1.1; letter-spacing: var(--tracking-tight) }
.kpi .val { color: var(--text-emphasis); font-weight: var(--weight-semibold) }
.sequence { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center }
.sequence .bi-arrow-right { color: var(--text-muted) }
.fil { display: grid; border: 1px solid var(--border-default); background: var(--surface-app) }
.evt { display: grid; grid-template-columns: 110px 110px 1fr auto; gap: var(--sp-3); padding: var(--sp-3) 14px; border-bottom: 1px solid var(--border-default); align-items: center }
.evt:last-child { border-bottom: 0 }
.evt.prevu { background: var(--surface-inset) }

/* ── Formulaires (components/forms) ── */
label.champ, .champ { display: grid; gap: 7px }
.champ > .eyebrow, label.champ > span.eyebrow { display: block }
.selecteur { display: grid; gap: 6px }
.selecteur .haut { display: flex; gap: var(--sp-2) }
.recherche { position: relative; flex: 1 }
.recherche .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none }
.recherche input { padding-left: 36px }
.recherche input:focus + .bi, .recherche:focus-within .bi { color: var(--orbit-orange) }
.panneau-tete .recherche { max-width: 320px }
.panneau-tete .recherche input { padding-top: 7px; padding-bottom: 7px }
input[type=text], input[type=search], input[type=number], input[type=date], input[type=time], textarea, select {
  font: inherit; font-size: var(--text-sm); color: var(--text-primary); background: var(--surface-inset); border: 1px solid var(--border-default); padding: 11px 14px; width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--orbit-orange); box-shadow: var(--focus-ring) }
textarea { min-height: 120px; resize: vertical; line-height: var(--leading-body) }
input[type=checkbox] { accent-color: var(--orbit-orange); width: 16px; height: 16px }
.cases { display: grid; border: 1px solid var(--border-default); background: var(--surface-app); max-height: 230px; overflow-y: auto }
.cases label { display: flex; gap: var(--sp-3); align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-default) }
.cases label:last-child { border-bottom: 0 }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) }
.trois { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3) }
.aide { color: var(--text-muted); font-size: var(--text-xs) }
.seq { display: grid; gap: var(--sp-2) }
.seq-ligne { display: grid; grid-template-columns: 28px 1fr 170px 120px 32px; gap: var(--sp-2); align-items: center }
/* Choix humain / agent et contexte IA */
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) }
.option { border: 1px solid var(--border-default); background: var(--surface-app); padding: var(--sp-4); display: grid; gap: 6px; text-align: left; color: inherit; align-content: start;
  transition: border-color var(--transition-fast), background var(--transition-fast) }
.option:hover { border-color: var(--orbit-orange); background: var(--surface-hover) }
.option[aria-pressed="true"] { border-color: var(--orbit-orange); background: var(--orbit-orange-dim) }
.option > .bi { color: var(--orbit-orange); font-size: 1.4rem }
.option b { color: var(--text-emphasis) }
.contexte { border: 1px solid var(--border-default); background: var(--surface-app); padding: var(--sp-3) 14px; display: grid; gap: var(--sp-2) }
.generer { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap }
.ia-note { display: flex; gap: 6px; align-items: center; color: var(--text-muted); font-size: var(--text-xs) }
.ia-note .bi { color: var(--orbit-orange) }
.apercu { display: grid; gap: var(--sp-3) }
/* Fil de discussion : messages sortants à droite, entrants à gauche */
.conv { display: grid; gap: var(--sp-3) }
.msg { max-width: 82%; border: 1px solid var(--border-default); background: var(--surface-app); padding: var(--sp-3) 14px; display: grid; gap: var(--sp-2) }
.msg.sortant { justify-self: end; border-color: var(--orbit-orange-line); background: var(--surface-inset) }
/* Corps des messages (suite 2g) : retour à la ligne automatique, jamais de défilement horizontal ; HTML nettoyé mis en forme. */
.msg { min-width: 0; overflow-x: hidden }
.msg .texte { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; color: var(--text-primary) }
.msg .texte.html { white-space: normal }
.msg .texte.html p { margin: 0 0 var(--sp-2) } .msg .texte.html p:last-child { margin-bottom: 0 }
.msg .texte.html ul, .msg .texte.html ol { margin: 0 0 var(--sp-2); padding-left: 22px }
.msg .texte.html blockquote { margin: var(--sp-2) 0; padding: 2px var(--sp-3); border-left: 3px solid var(--border-default); color: var(--text-secondary) }
.msg .texte.html a { color: var(--orbit-orange); text-decoration: underline; overflow-wrap: anywhere }
/* Badges de suivi d'un fil (suite 2g) : zéro = gris neutre. */
.badge.zero { color: var(--text-muted); background: var(--surface-inset); border-color: var(--border-default) }
.msg .meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; font-size: var(--text-xs); color: var(--text-muted) }
.audio { display: flex; gap: var(--sp-3); align-items: center; min-width: 220px }
.onde { display: flex; gap: 2px; align-items: center; height: 28px; flex: 1 }
.onde span { width: 3px; background: var(--orbit-ink-3); flex-shrink: 0 }
.audio.lecture .onde span:nth-child(-n+14) { background: var(--orbit-orange) }
.transcription { border-left: 3px solid var(--orbit-orange); padding: var(--sp-2) var(--sp-3); background: var(--surface-inset); font-style: italic; color: var(--text-secondary) }
@media (max-width: 760px) { .msg { max-width: 100% } }
/* Sens d'un message (2d) : entrant = vert (succès), sortant = orange ; devant l'horodatage. */
.sens { font-size: 0.95em; font-weight: var(--weight-bold) } .sens.entrant { color: var(--feedback-success) } .sens.sortant { color: var(--orbit-orange) }
.msg .meta .sens, .ligne .muted .sens { margin-right: -2px }

/* ── Panneau de filtres (2d) : angles droits, eyebrows, puces à bascule, « Réinitialiser », nombre de résultats ── */
.filtres .panneau-tete h2 .badge { margin-left: var(--sp-2) }
.filtres-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4) var(--sp-5); padding: var(--sp-4) var(--pad-card) var(--sp-5) }
.filtres .champ input[type=text] { padding-top: 8px; padding-bottom: 8px }
.puces { display: flex; flex-wrap: wrap; gap: 6px }
.puce { padding: 6px 12px; font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; border: 1px solid var(--border-default); background: var(--surface-inset); color: var(--text-secondary);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast) }
.puce:hover { border-color: var(--orbit-orange); color: var(--text-primary) }
.puce[aria-pressed="true"] { background: var(--orbit-orange-dim); border-color: var(--orbit-orange); color: var(--orbit-orange) }
.case { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 12px; border: 1px solid var(--border-default); background: var(--surface-app); color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; min-height: 38px }
.case:hover { border-color: var(--border-strong) }
.case:has(input:checked) { border-color: var(--orbit-orange); color: var(--text-primary) }
#nb-resultats { white-space: nowrap }
.seq-ligne label { display: flex; gap: 6px; align-items: center }
.confirme p { margin: 0 }
.confirme .resume { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-emphasis) }
.confirme ul { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: 6px }
.confirme li { display: flex; gap: var(--sp-2); align-items: center; color: var(--text-secondary); font-size: var(--text-sm) }

/* ── Panneaux flottants : assistant et combiné (liseré spectre) ── */
.assistant { position: fixed; top: 0; right: 0; bottom: 0; --a-largeur: 600px; width: min(var(--a-largeur), 100%); background: var(--surface-raised); border-left: 1px solid var(--border-default); z-index: 15;
  display: flex; flex-direction: column; box-shadow: var(--shadow-modal); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
.spectre { height: 3px; background: var(--gradient-spectrum); flex-shrink: 0 }
.a-tete { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--pad-card); border-bottom: 1px solid var(--border-default) }
.a-tete b { display: flex; gap: var(--sp-2); align-items: center; color: var(--text-emphasis) }
.a-tete b .bi { color: var(--orbit-orange) }
.a-fil { flex: 1; overflow-y: auto; padding: var(--pad-card); display: grid; gap: var(--sp-3); align-content: start }
.bulle { padding: var(--sp-3) 14px; max-width: 88%; border: 1px solid var(--border-default) }
.bulle.moi { background: var(--surface-inset); justify-self: end; border-color: var(--orbit-orange-line) }
.bulle.ia { background: var(--surface-app) }
.bulle .btn { margin-top: var(--sp-2) }
.a-saisie { display: flex; gap: var(--sp-2); padding: 14px var(--pad-card); border-top: 1px solid var(--border-default) }
.envoi { background: var(--gradient-gold); border: 0; color: var(--orbit-white); width: 42px; flex-shrink: 0; transition: transform var(--transition-fast) }
.envoi:hover { transform: scale(1.05) }
/* (maquette) .combine flottant retiré : le combiné vit dans la fenêtre de détail — voir « Mission 4a / 4z » plus bas */
.dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--feedback-success); display: inline-block; animation: orbitBlink 1.5s ease-in-out infinite }
@keyframes orbitBlink { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }
.live { display: inline-flex; gap: 7px; align-items: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--feedback-success) }
.softphone { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: end; padding: var(--pad-card) }
.softphone label { flex: 1 1 260px }

.toast { position: fixed; left: 50%; bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--surface-inset); color: var(--text-emphasis);
  border: 1px solid var(--border-default); border-left: 3px solid var(--orbit-orange); padding: var(--sp-3) var(--sp-5); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  z-index: 30; max-width: calc(100% - 32px); box-shadow: var(--shadow-modal); display: flex; gap: var(--sp-2); align-items: center }
.toast .bi { color: var(--orbit-orange) }

@media (max-width: 760px) {
  :root { --pad-page: 16px }
  .rail { top: auto; bottom: 0; width: 100%; height: auto; flex-direction: row; border-right: 0; border-top: 1px solid var(--border-default); padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px) }
  .rail:hover, .rail:focus-within { width: 100%; box-shadow: none }
  .rail-marque { display: none }
  .rail nav { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; padding: 0 }
  .rail nav button { flex-direction: column; justify-content: center; gap: 2px; height: 56px; padding: 0 4px; border-left: 0; border-top: 3px solid transparent; font-size: var(--text-2xs) }
  .rail nav button span { display: none }
  .rail nav button[aria-current="page"] { border-top-color: var(--orbit-orange) }
  .coque { margin-left: 0; padding-bottom: 72px }
  .deux, .trois, .choix { grid-template-columns: 1fr }
  .seq-ligne { grid-template-columns: 24px 1fr 1fr 32px }
  .seq-ligne .seq-par { grid-column: 2 / 4; grid-row: 2 }
  .f-tete, .f-corps, .f-pied { padding-left: var(--sp-4); padding-right: var(--sp-4) }
  .voile { padding: var(--sp-4) var(--sp-2) }
  .evt { grid-template-columns: 1fr auto }
  .evt .mono { grid-column: 1 / -1 }
}
@media (prefers-reduced-motion: no-preference) {
  .fenetre, .assistant { animation: monte .3s ease }
  @keyframes monte { from { opacity: 0; transform: translateY(15px) } to { opacity: 1; transform: none } }
}
@media (prefers-reduced-motion: reduce) { .dot { animation: none } .rail { transition: none } }

/* ── Ajouts lot 2 (hors maquette) : erreurs dans la fenêtre, écran d'accès, copie des coordonnées, liste des états ── */
.erreur { border: 1px solid var(--feedback-danger); border-left: 3px solid var(--feedback-danger); background: var(--orbit-red-dim); color: var(--text-primary);
  padding: var(--sp-3) 14px; display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--text-sm) }
.erreur .bi { color: var(--feedback-danger); flex-shrink: 0; margin-top: 2px }
.panneau .erreur { margin: var(--sp-4) }
.chargement { padding: var(--sp-6); color: var(--text-muted); font-size: var(--text-sm) }
.acces { min-height: 100vh; display: grid; place-items: center; padding: var(--pad-page) }
.acces .fenetre { max-width: 460px }
.acces .f-corps p { margin: 0 }
.moi { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-mono) }
.copie { background: none; border: 0; padding: 0 2px; color: var(--text-muted); font: inherit; display: inline-flex; gap: 5px; align-items: center; cursor: pointer }
.copie:hover { color: var(--orbit-orange) }
.copie .bi { font-size: 0.9em; opacity: .7 }
.etats { display: grid; border: 1px solid var(--border-default); background: var(--surface-app) }
.etats button.ligne[aria-current="true"] { background: var(--orbit-orange-dim); box-shadow: inset 3px 0 0 var(--orbit-orange) }
.action-edit { display: flex; gap: var(--sp-2); align-items: stretch }
.action-edit input { flex: 1 }
.bi-exclamation-triangle::before{content:"\f33b"} .bi-clipboard::before{content:"\f290"} .bi-box-arrow-right::before{content:"\f1c3"} .bi-pencil::before{content:"\f4cb"} .bi-check-lg::before{content:"\f633"} .bi-building::before{content:"\f1dd"}

/* ── lot 2g : listes déroulantes filtrables, affaires regroupées état → secteur, ajout de prospect avec recherche ── */
.bi-chevron-down::before{content:"\f282"} .bi-chevron-right::before{content:"\f285"} .bi-chevron-up::before{content:"\f286"} .bi-x::before{content:"\f62a"}
.bi-coin::before{content:"\f634"} .bi-binoculars::before{content:"\f18f"} .bi-person-check::before{content:"\f4d6"} .bi-check2-circle::before{content:"\f270"} .bi-dash-circle::before{content:"\f2e6"} .bi-list-check::before{content:"\f473"}
.ld { position: relative }
.ld-bouton { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 40px; padding: 8px 12px; text-align: left; font-size: var(--text-sm);
  border: 1px solid var(--border-default); background: var(--surface-inset); color: var(--text-secondary); transition: border-color var(--transition-fast) }
.ld-bouton:hover, .ld-bouton[aria-expanded="true"] { border-color: var(--orbit-orange); color: var(--text-primary) }
.ld-bouton .ld-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld-bouton .bi-chevron-down { color: var(--text-muted); transition: transform var(--transition-fast) }
.ld-bouton[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); color: var(--orbit-orange) }
.ld-panneau { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% - 1px); margin-top: 0; background: var(--surface-raised); border: 1px solid var(--orbit-orange); box-shadow: var(--shadow-panel); display: grid }
.ld-haut { display: flex; gap: var(--sp-2); padding: var(--sp-2); border-bottom: 1px solid var(--border-default); background: var(--surface-inset) }
.ld-haut .recherche input { padding-top: 7px; padding-bottom: 7px }
.ld-options { max-height: 260px; overflow-y: auto; display: grid }
.ld-option { display: flex; gap: var(--sp-3); align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border-default); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer }
.ld-option:last-child { border-bottom: 0 }
.ld-option:hover { background: var(--surface-hover); color: var(--text-primary) }
.ld-option[aria-pressed="true"] { background: var(--orbit-orange-dim); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--orbit-orange) }
.ld-vide { padding: 10px 14px }
.ld-choisis:empty { display: none }
.ld-choix { gap: 6px; text-transform: none; letter-spacing: 0; font-size: var(--text-xs) }
.ld-retirer { background: none; border: 0; padding: 0; color: inherit; display: inline-flex; line-height: 1; opacity: .7 }
.ld-retirer:hover { opacity: 1; color: var(--orbit-orange) }
.ld .champ > .eyebrow { display: block }
/* Grille du panneau : six listes tiennent sur une ligne large, puis se replient */
.filtres-grille { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
/* Affaires regroupées */
tr.grp td { padding: 0; background: var(--surface-inset); border-bottom: 1px solid var(--border-default) }
tr.grp.niveau-1 td { background: var(--surface-raised); border-top: 1px solid var(--border-strong) }
.grp-btn { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 10px var(--sp-4); background: none; border: 0; text-align: left; color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold) }
.grp-btn:hover { background: var(--surface-hover) }
.grp-btn .bi-chevron-down, .grp-btn .bi-chevron-right { color: var(--orbit-orange); width: 14px }
tr.grp.niveau-2 .grp-btn { padding-left: 40px; font-weight: var(--weight-medium) }
tr[data-grp-de] td:first-child { padding-left: 60px }
/* Ajout de prospect : cases d'enrichissement, récapitulatif, candidats */
.cases-libres { display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.cases-libres .case { flex: 1 1 160px }
.recap { display: grid; gap: var(--sp-2) }
.recap .ligne { border: 1px solid var(--border-default); background: var(--surface-app) }
.recap .ligne .bi { color: var(--orbit-orange) }
.candidats { display: grid; border: 1px solid var(--border-default); background: var(--surface-app) }
.candidats button.ligne[aria-pressed="true"] { background: var(--orbit-orange-dim); box-shadow: inset 3px 0 0 var(--orbit-orange) }
.couts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2) }
.couts .kpi b { font-size: var(--text-2xl) }
.resultat-ok { color: var(--feedback-success) } .resultat-ko { color: var(--text-muted) }

/* ── lot 2f : panneau Assistant (agent Crew) — étapes d'outils, texte au fil de l'eau, lien vers le lot ── */
.bi-upload::before{content:"\f603"} .bi-hourglass-split::before{content:"\f41f"}
.assistant .a-tete .a-boutons { display: flex; gap: 2px }
.assistant .a-tete .a-agent { font-weight: var(--weight-medium); font-size: var(--text-xs) }
.assistant .bulle.ia { color: var(--text-primary); overflow-wrap: anywhere }
.assistant .bulle.ia .texte { white-space: pre-wrap }
.assistant .bulle.ia .texte.html { white-space: normal }
.assistant .bulle.ia .texte.html p { margin: 0 0 var(--sp-2) } .assistant .bulle.ia .texte.html p:last-child { margin-bottom: 0 }
.assistant .bulle.ia .texte.html ul, .assistant .bulle.ia .texte.html ol { margin: 0 0 var(--sp-2); padding-left: 22px }
.assistant .bulle.ia .texte.html blockquote { margin: var(--sp-2) 0; padding: 2px var(--sp-3); border-left: 3px solid var(--border-default); color: var(--text-secondary) }
.assistant .bulle.ia .texte.html a { color: var(--orbit-orange); text-decoration: underline; overflow-wrap: anywhere }
.assistant .bulle.ia .erreur { margin-top: var(--sp-2) }
.assistant .bulle.ia .chargement { padding: 0 }
.a-etapes, .a-details { display: grid; gap: 4px; margin-top: var(--sp-2) }
.a-etapes:empty { display: none }
.a-etape { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-muted) }
.a-etape .bi { color: var(--orbit-orange); width: 14px }
.a-etape.ok .bi { color: var(--feedback-success) } .a-etape.ko .bi { color: var(--feedback-danger) }
.a-etape .bi-arrow-repeat { animation: tourne 1.2s linear infinite }
@keyframes tourne { to { transform: rotate(360deg) } }
.a-details summary { cursor: pointer; font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: var(--weight-semibold) }
.a-details summary:hover { color: var(--orbit-orange) }
.a-saisie input { flex: 1; min-width: 0 }
.envoi:focus-visible { outline: 2px solid var(--orbit-orange); outline-offset: 2px }
@media (prefers-reduced-motion: reduce) { .a-etape .bi-arrow-repeat { animation: none } }
/* suite 2f : requêtes courtes — point d'étape (> 3 min) et bouton Stop sous la bulle en cours */
.a-point { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); padding: 6px var(--sp-3); border-radius: var(--r-sm); background: var(--bg-surface-2, var(--bg-elevated)); border: 1px solid var(--border-default); font-size: var(--text-xs); color: var(--text-secondary) }
.a-point .bi { color: var(--orbit-orange) }
.a-stop { margin-top: var(--sp-2); display: flex; justify-content: flex-end }
.a-stop .btn { color: var(--text-secondary) } .a-stop .btn:hover { color: var(--feedback-danger); border-color: var(--feedback-danger) }
.a-stop .btn .bi { color: inherit }
/* complément 2f : carte d'avancement d'un lot (création IA / import en tâche de fond) */
.bi-collection::before{content:"\f2a5"}
.a-lot { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-default); border-left: 3px solid var(--orbit-orange); border-radius: var(--r-sm); background: var(--bg-surface-2, var(--bg-elevated)); display: grid; gap: 6px; font-size: var(--text-xs) }
.a-lot.ok { border-left-color: var(--feedback-success) } .a-lot.ko { border-left-color: var(--feedback-danger) }
.a-lot-tete { display: flex; gap: var(--sp-2); align-items: center } .a-lot-tete .bi { color: var(--orbit-orange) } .a-lot-tete b { font-size: var(--text-sm) }
.a-lot-barre { height: 6px; border-radius: 3px; background: var(--border-default); overflow: hidden }
.a-lot-barre span { display: block; height: 100%; background: var(--orbit-orange); transition: width .4s ease }
.a-lot-ligne { display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between; font-family: var(--font-mono) } .a-lot-ligne .bi { color: inherit }
.a-lot.ok .a-lot-ligne .bi-check2-circle { color: var(--feedback-success) } .a-lot.ko .bi-dash-circle { color: var(--feedback-danger) }
.a-lot-resume { margin: 0; padding-left: 18px; display: grid; gap: 2px; color: var(--text-secondary) }
.a-lot-erreurs { display: flex; gap: var(--sp-2); align-items: center; color: var(--feedback-danger) }
.a-lot .chargement { padding: 0; font-size: var(--text-xs) }
@media (prefers-reduced-motion: reduce) { .a-lot-barre span { transition: none } }

/* ── lot 3a : écran Correspondances (fils, pagination), « À classer », lecteur audio des messages vocaux ── */
#lignes tr[data-suite="a_repondre"] td:first-child { box-shadow: inset 3px 0 0 var(--orbit-orange) }
#lignes .pagination td { text-align: center; background: var(--surface-inset) }
#lignes .pagination td > * { display: inline-flex; vertical-align: middle; margin: 0 var(--sp-2) }
/* ── Mission 4m : Correspondances — ordre, séparateurs par jour, pièces jointes, lecture d'un email ── */
#lignes .ordre td { background: var(--surface-inset); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap }
#lignes .ordre .badge { margin-left: var(--sp-2) }
#lignes .jour td { background: var(--surface-app); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .04em; padding-top: 6px; padding-bottom: 6px; border-top: 2px solid var(--border-default) }
#lignes .jour .bi { color: var(--orbit-orange); margin-right: 6px }
.pieces { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2) }
.piece { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border-default); background: var(--surface-inset); color: var(--text-primary); text-decoration: none; font-size: var(--text-xs); max-width: 100% }
.piece .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px }
.piece .bi { color: var(--orbit-orange) }
a.piece:hover { border-color: var(--orbit-orange-line); background: var(--orbit-orange-dim) }
.piece.absente { opacity: .6; border-style: dashed }
.pieces[data-grand] .piece { padding: 8px 12px; font-size: var(--text-sm) }
.lecture { display: grid; gap: var(--sp-3) }
.lecture-ligne { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-3); align-items: baseline }
.lecture-ligne .eyebrow { display: flex; align-items: center; gap: 6px }
.lecture-ligne .eyebrow .bi { color: var(--orbit-orange) }
.lecture-corps { border: 1px solid var(--border-default); background: var(--surface-app); padding: var(--sp-4); max-height: 55vh; overflow: auto }
.lecture-corps .texte { white-space: pre-wrap; overflow-wrap: anywhere }
.lecture-corps .texte.html { white-space: normal }
.lecture-corps .texte.html blockquote { margin: var(--sp-2) 0; padding: 2px var(--sp-3); border-left: 3px solid var(--border-default); color: var(--text-secondary) }
.lecture-corps .texte.html a { color: var(--orbit-orange); text-decoration: underline; overflow-wrap: anywhere }
.aclasser-ligne .fort .btn.lien { padding: 0; font: inherit; font-weight: inherit; color: inherit; text-decoration: underline dotted }
@media (max-width: 760px) { .lecture-ligne { grid-template-columns: 1fr } }
.aclasser { border-color: var(--orbit-orange-line) }
.aclasser .panneau-tete { background: var(--orbit-orange-dim) }
.aclasser .panneau-tete .muted { font-size: var(--text-xs) }
.aclasser .liste { border: 0 }
.aclasser-ligne .badges { gap: var(--sp-2) }
.aclasser-ligne .btn.sm { min-height: 30px }
.audio audio { flex: 1; min-width: 200px; max-width: 360px; height: 36px }
#fil-suite { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center }
#ac-inter .cases { max-height: 200px }

/* Mission 3e : « Ajouter un interlocuteur » dans la fiche */
.ajout-inter { padding: 10px var(--sp-4); border-top: 1px solid var(--border-default) }
.actions-inter { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center }
.choix.trois { grid-template-columns: 1fr 1fr 1fr }
.personnes { display: grid; border: 1px solid var(--border-default); background: var(--surface-app) }
.personnes label { display: flex; gap: var(--sp-3); align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-default) }
.personnes label:last-child { border-bottom: 0 }
.personnes label .qui { flex: 1; display: grid; gap: 2px }
.personnes label .cout { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap }
.fonctions-choix { display: grid; gap: 6px }
.fonctions-choix .cases { max-height: 190px }
.btn.lien.danger { color: var(--feedback-error, #c0392b) }

/* Mission 3g : fonctions visées ajoutées (« + Ajouter », « Retirer ») */
.cases label .retirer-item { margin-left: auto; font-size: var(--text-xs); white-space: nowrap }
.cases .ajout-item { display: flex; gap: var(--sp-2); align-items: center; padding: 10px 14px; width: 100%; text-align: left; border-top: 1px solid var(--border-default) }
.cases .ajout-item .texte { font-weight: 600 }
/* Mission 3h : plusieurs affaires par société */
.fil-affaire { padding: 0 2px; display: inline-flex; gap: 4px; align-items: center }
.fils-cases { max-height: 260px }
.fils-cases .fil-case { align-items: flex-start }
.fils-cases .fil-case .qui { flex: 1; display: grid; gap: 2px; min-width: 0 }
.fils-cases .fil-case .badges { flex-wrap: wrap; justify-content: flex-end }
.ajout-inter-ligne { margin-top: 6px }
#af-nk { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border: 1px dashed var(--border-default); background: var(--surface-app) }
#af-inter { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap }

/* ── Mission 3i : panneau Assistant élargi, redimensionnable, plein écran ; tableaux / code lisibles ; pièce jointe ── */
.bi-paperclip::before{content:"\f4b3"} .bi-arrows-fullscreen::before{content:"\f14d"} .bi-fullscreen-exit::before{content:"\f3de"} .bi-file-earmark-spreadsheet::before{content:"\f389"}
.assistant.plein { width: 100%; border-left: 0 }
.assistant.plein .a-poignee { display: none }
.assistant.a-redim { user-select: none; cursor: col-resize }
.assistant.a-redim .a-fil { pointer-events: none }
.a-poignee { position: absolute; top: 0; bottom: 0; left: -3px; width: 7px; cursor: col-resize; z-index: 2; background: transparent; transition: background var(--transition-fast) }
.a-poignee:hover, .a-poignee:focus-visible, .assistant.a-redim .a-poignee { background: var(--orbit-orange); outline: none }
.a-poignee::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 36px; margin-top: -18px; border-left: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong) }
.a-poignee:hover::after, .a-poignee:focus-visible::after { border-color: var(--orbit-white) }
.assistant .a-tete .a-boutons .btn.icone[aria-pressed="true"] { color: var(--orbit-orange) }
/* Bulles : largeur confortable, retour à la ligne systématique ; la bulle de l'agent occupe toute la largeur en plein écran. */
.assistant .a-fil { gap: var(--sp-4) }
.assistant .bulle { max-width: 92%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; line-height: var(--leading-body) }
.assistant .bulle.moi { white-space: pre-wrap }
.assistant.plein .a-fil, .assistant.plein .a-saisie { max-width: 1100px; width: 100%; margin: 0 auto }
.assistant.plein .bulle.ia { max-width: 100% }
/* Tableaux de l'agent : défilement horizontal dans la bulle, en-tête collante, lignes zébrées — angles droits. */
.assistant .bulle.ia .texte.html table { display: block; width: max-content; max-width: 100%; min-width: 0; overflow-x: auto; border-collapse: collapse; margin: var(--sp-2) 0; font-size: var(--text-sm); border: 1px solid var(--border-default) }
.assistant .bulle.ia .texte.html table thead { position: sticky; top: 0 }
.assistant .bulle.ia .texte.html th, .assistant .bulle.ia .texte.html td { padding: 6px 10px; border-bottom: 1px solid var(--border-default); border-right: 1px solid var(--border-default); vertical-align: top; white-space: nowrap; text-align: left }
.assistant .bulle.ia .texte.html th:last-child, .assistant .bulle.ia .texte.html td:last-child { border-right: 0 }
.assistant .bulle.ia .texte.html th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); background: var(--surface-inset); font-weight: var(--weight-semibold) }
.assistant .bulle.ia .texte.html tbody tr:nth-child(even) td { background: var(--surface-raised) }
.assistant .bulle.ia .texte.html td { color: var(--text-primary); max-width: 360px; white-space: normal; overflow-wrap: anywhere }
.assistant .bulle.ia .texte.html code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-emphasis); background: var(--surface-inset); padding: 1px 5px; border: 1px solid var(--border-default); overflow-wrap: anywhere }
.assistant .bulle.ia .texte.html pre { margin: var(--sp-2) 0; padding: var(--sp-3); background: var(--surface-inset); border: 1px solid var(--border-default); border-left: 3px solid var(--orbit-orange); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5; white-space: pre }
.assistant .bulle.ia .texte.html pre code { background: none; border: 0; padding: 0; color: var(--text-primary) }
.assistant .bulle.ia .texte.html ul li, .assistant .bulle.ia .texte.html ol li { margin-bottom: 3px }
/* Saisie : trombone + champ + envoi ; chip de pièce jointe au-dessus. */
.a-saisie { flex-direction: column; gap: var(--sp-2) }
.a-saisie .a-ligne { display: flex; gap: var(--sp-2); align-items: center }
.a-saisie .a-ligne .btn.icone { width: 42px; height: 42px; flex-shrink: 0; color: var(--text-secondary); border: 1px solid var(--border-default) }
.a-saisie .a-ligne .btn.icone:hover { color: var(--orbit-orange); border-color: var(--orbit-orange) }
.a-saisie .a-ligne .btn.icone .bi { font-size: 1.1rem }
.a-piece-zone:empty { display: none }
.a-piece { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; margin-top: var(--sp-2); padding: 6px 10px; border: 1px solid var(--orbit-orange-line); background: var(--orbit-orange-dim); font-size: var(--text-xs); color: var(--text-primary) }
.a-piece .bi { color: var(--orbit-orange); font-size: 1.1rem; flex-shrink: 0 }
.a-piece-nom { font-weight: var(--weight-semibold); color: var(--text-emphasis); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.a-piece-meta { color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap }
.a-piece .btn.icone.sm { width: 22px; height: 22px; margin: 0; border: 0; color: var(--text-muted) } .a-piece .btn.icone.sm:hover { color: var(--feedback-danger) }
.a-piece-zone .a-piece { margin-top: 0 }
.bulle.moi .a-piece { display: flex }
/* Glisser-déposer : voile orange pointillé sur le panneau. */
.a-depot { display: none; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; gap: var(--sp-3); background: rgba(26, 26, 30, 0.88); border: 2px dashed var(--orbit-orange); color: var(--text-emphasis); font-weight: var(--weight-semibold); pointer-events: none }
.a-depot .bi { color: var(--orbit-orange); font-size: 1.6rem }
.assistant.a-glisse .a-depot { display: flex }
@media (max-width: 760px) {
  .assistant, .assistant.plein { width: 100%; border-left: 0 }
  .a-poignee, .assistant [data-plein] { display: none }
  .assistant .bulle { max-width: 100% }
}
/* Mission 3k : historique des conversations dans le panneau Assistant (liste à la place du fil, recherche en tête). */
.bi-clock-history::before{content:"\f292"}
.assistant .a-fil[hidden], .assistant .a-liste[hidden], .assistant .a-saisie[hidden] { display: none }
.a-liste { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0 }
.a-liste-haut { position: sticky; top: 0; z-index: 1; padding: var(--sp-3) var(--pad-card); background: var(--surface-raised); border-bottom: 1px solid var(--border-default) }
.a-liste-haut .recherche input { width: 100% }
.a-liste-corps { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--pad-card) var(--pad-card); align-content: start }
.a-conv { display: grid; gap: 4px; width: 100%; text-align: left; padding: var(--sp-3) 14px; background: var(--surface-app); border: 1px solid var(--border-default); color: var(--text-primary); cursor: pointer; font: inherit; transition: border-color var(--transition-fast), background var(--transition-fast) }
.a-conv:hover, .a-conv:focus-visible { border-color: var(--orbit-orange); outline: none; background: var(--surface-inset) }
.a-conv.courante { border-color: var(--orbit-orange-line); background: var(--orbit-orange-dim) }
.a-conv.a-conv-chargement { opacity: .6; pointer-events: none }
.a-conv-haut { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono) }
.a-conv-haut .bi { color: var(--orbit-orange) }
.a-conv-date { display: inline-flex; align-items: center; gap: 5px }
.a-conv-meta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-3) }
.a-conv-nb, .a-conv-piece { display: inline-flex; align-items: center; gap: 4px }
.a-conv-titre { font-weight: var(--weight-semibold); color: var(--text-emphasis); overflow-wrap: anywhere }
.a-conv-extrait { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere }
.a-liste-vide { padding: var(--sp-3) 0 }
.a-liste-plus { display: flex; justify-content: center; padding: var(--sp-2) 0 }
.a-liste .chargement { padding: var(--sp-3) 0 }

/* Mission 4c — écran Réunions : transcription repliée sous le compte rendu, texte du CR en chasse lisible. */
.transcription-bloc { margin-top: var(--sp-3) }
.transcription-bloc summary { cursor: pointer; font-size: var(--text-sm) }
.transcription-bloc .transcription { white-space: pre-wrap; max-height: 260px; overflow: auto }
#cr { font-family: inherit; line-height: 1.55 }

/* Mission 4f : sélection multiple des prospects, barre d'actions, crayon de la fiche société */
.avec-sel { display: flex; gap: var(--sp-3); align-items: flex-start }
.avec-sel .sel { display: inline-flex; padding: 2px 4px; margin: -2px 0 0 -4px; cursor: pointer }
.avec-sel .sel-contenu { flex: 1; min-width: 0 }
.selection-barre { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: 10px 14px; margin-bottom: var(--sp-3); border: 1px solid var(--orbit-orange-line); background: var(--orbit-orange-dim); border-radius: var(--radius-md, 10px) }
.selection-barre .fort { margin-right: auto }
.f-pied .gauche > .btn + .btn { margin-left: var(--sp-2) }
/* Mission 4a / 4z : Téléphonie — combiné « Moi » à l'interface de la v1 (écran d'appel waka-prospection) et « À appeler ».
   Tokens de thème uniquement : avatar dégradé or, pastille d'état clignotante, chronomètre mono 33 px, note pendant l'appel. */
.bi-backspace::before{content:"\f159"} .bi-telephone-fill::before{content:"\f5b4"} .bi-mic-mute-fill::before{content:"\f48e"} .bi-telephone-forward::before{content:"\f5b6"} .bi-stopwatch::before{content:"\f597"}
.combine { display: grid; justify-items: center; text-align: center; padding: var(--sp-3) 0 0 }
.combine .cb-avatar { width: 74px; height: 74px; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-gold); color: var(--surface-app);
  font-size: 22px; font-weight: var(--weight-black); letter-spacing: var(--tracking-tight) }
.combine .cb-avatar .bi { font-size: 26px }
.combine[data-etat="preparation"] .cb-avatar, .combine[data-etat="sonnerie"] .cb-avatar { animation: cb-ring 1.6s ease-out infinite }
@keyframes cb-ring { 0% { box-shadow: 0 0 0 0 var(--orbit-orange-glow) } 70% { box-shadow: 0 0 0 26px rgba(232, 131, 42, 0) } 100% { box-shadow: 0 0 0 0 rgba(232, 131, 42, 0) } }
.combine .cb-nom { margin: var(--sp-4) 0 3px; font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--text-emphasis); letter-spacing: var(--tracking-tight) }
.combine .cb-sous { font-size: var(--text-sm); color: var(--text-muted); min-height: 1.2em }
.combine .cb-numero { font-size: 15px; margin-top: var(--sp-3); color: var(--text-primary) }
.combine .cb-pastille { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 7px 14px; background: var(--surface-inset); border: 1px solid var(--border-default);
  font-size: 11.5px; font-weight: var(--weight-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--text-primary) }
.combine .cb-point { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--orbit-cyan); animation: orbitBlink 1.4s ease-in-out infinite }
.combine[data-etat="sonnerie"] .cb-point { background: var(--orbit-gold) }
.combine[data-etat="communication"] .cb-point { background: var(--feedback-success) }
.combine[data-etat="termine"] .cb-point, .combine[data-etat="echoue"] .cb-point { background: var(--text-muted); animation: none }
.combine .cb-chrono { font-size: 33px; font-weight: var(--weight-bold); color: var(--text-emphasis); margin-top: var(--sp-4); line-height: 1.1 }
.combine .cb-rec { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 11.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--orbit-red) }
.combine .cb-rec-point { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--feedback-danger); animation: orbitBlink 1.5s ease-in-out infinite }
.combine .cb-presente { margin-top: var(--sp-2); font-size: var(--text-xs) }
.combine .cb-brief, .combine .cb-apres, .combine .cb-note, .combine #cb-erreur { width: 100%; text-align: left }
.combine .cb-brief { margin-top: var(--sp-4) } .combine .cb-brief summary { cursor: pointer; display: flex; gap: 6px; align-items: center } .combine .cb-brief summary .bi { color: var(--orbit-orange) }
.combine .cb-brief .texte { margin-top: 6px; white-space: pre-wrap; font-size: var(--text-sm); color: var(--text-secondary) }
.combine .cb-apres { margin-top: 22px }
.combine .cb-note { margin-top: 22px } .combine .cb-apres + .cb-note { margin-top: var(--sp-3) }
.combine .cb-note textarea { min-height: 84px; font-size: var(--text-sm) }
.combine .cb-boutons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: var(--sp-6) }
.combine .cb-boutons .btn.lg { padding: 0 20px; height: 46px; font-size: var(--text-md) }
.combine .cb-boutons .btn[aria-pressed="true"] { border-color: var(--orbit-orange); color: var(--orbit-orange); background: var(--orbit-orange-dim) }
.combine #cb-erreur:empty { display: none } .combine #cb-erreur { margin-top: var(--sp-3) }
@media (prefers-reduced-motion: reduce) { .combine .cb-avatar, .combine .cb-point, .combine .cb-rec-point { animation: none } }
/* Composer un numéro : pavé de la v1 (champ + corriger, 12 touches 3 × 4, avertissement de format, « Appeler » pleine largeur) */
.pave { display: grid; gap: 14px }
.pave-haut { display: flex; align-items: flex-end; gap: 10px }
.pave-haut .champ { flex: 1; min-width: 0 }
.pave-haut input[type=tel] { font: inherit; width: 100%; padding: 11px 12px; background: var(--surface-app); border: 1px solid var(--border-default); color: var(--text-emphasis);
  font-family: var(--font-mono); font-size: 20px; letter-spacing: .04em; transition: border-color var(--transition-fast), box-shadow var(--transition-fast) }
.pave-haut input[type=tel]:focus { outline: none; border-color: var(--orbit-orange); box-shadow: var(--focus-ring) }
.pave-haut .pave-effacer { padding: 11px 13px; height: 46px; font-size: 16px; background: var(--surface-app) }
.pave-touches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.pave-touches button { padding: 13px 0; background: var(--surface-app); border: 1px solid var(--border-default); color: var(--text-primary); font-size: 18px; font-family: var(--font-mono);
  transition: border-color var(--transition-fast), background var(--transition-fast) }
.pave-touches button:hover { border-color: var(--orbit-orange); background: var(--surface-hover) }
.pave-touches button:active { background: var(--orbit-orange-dim) }
.pave #tel-avertissement:empty, .pave #tel-erreur:empty { display: none }
.pave .pave-appeler { width: 100%; height: 42px }
.a-appeler .ligne .actions { flex-shrink: 0 }
.a-appeler .panneau-tete .muted { font-size: var(--text-xs); max-width: 60ch }
td .cr-court { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
tr[data-appel] { cursor: pointer }

/* Mission 4j : lien de rendez-vous {rdv} dans le composeur */
.rdv-zone { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2) }
.rdv-apercu { margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--text-secondary) }
.rdv-apercu .rdv-lien { color: var(--orbit-orange); font-weight: var(--weight-semibold); text-decoration: underline }
.rdv-apercu .rdv-url { color: var(--orbit-cyan); overflow-wrap: anywhere; font-size: var(--text-xs) }
.bi-calendar-check::before{content:"\f1e3"}  /* 4j */

/* Mission 4g : À / Cc / Cci en jetons (composeur, réunions, CR, brouillons) */
.dest { display: grid; gap: var(--sp-2) }
.dest-champ { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-2); align-items: start; position: relative }
.dest-champ .dest-lib { padding-top: 12px }
.dest-zone { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 42px; padding: 5px 8px; background: var(--surface-inset); border: 1px solid var(--border-default); cursor: text;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) }
.dest-zone:focus-within { border-color: var(--orbit-orange); box-shadow: var(--focus-ring) }
.dest-champ.erreur .dest-zone { border-color: var(--feedback-danger) }
.dest-zone .dest-saisie { flex: 1; min-width: 160px; width: auto; border: 0; background: none; padding: 6px 4px; box-shadow: none }
.dest-zone .dest-saisie:focus { box-shadow: none; border: 0; outline: none }
.jeton { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; font-size: var(--text-xs); background: var(--orbit-orange-dim); border: 1px solid var(--orbit-orange-line, var(--border-strong)); color: var(--text-primary); max-width: 100% }
.jeton b { color: var(--text-emphasis); white-space: nowrap }
.jeton .mono { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.jeton-x { border: 0; background: none; color: var(--text-muted); padding: 2px 5px; line-height: 1; cursor: pointer; font-size: 0.7rem }
.jeton-x:hover { color: var(--feedback-danger) }
.dest-sugg { grid-column: 2; border: 1px solid var(--border-default); background: var(--surface-raised); box-shadow: var(--shadow-modal); max-height: 240px; overflow: auto; display: grid; z-index: 3 }
.dest-groupe { padding: 8px 12px 4px; font-size: var(--text-2xs) }
.dest-item { display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit; padding: 8px 12px; font: inherit; font-size: var(--text-sm); cursor: pointer }
.dest-item:hover, .dest-item:focus { background: var(--surface-hover); outline: none }
.dest-item b { color: var(--text-emphasis) }
.dest-pied { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; font-size: var(--text-xs) }
/* Mission 5a — Campagnes : constructeur de flux (moteur static/js/flux/flux-editeur.*), barre haute, avancement, modale. */
.bi-megaphone::before{content:"\f484"} .bi-diagram-3::before{content:"\f2ee"} .bi-rocket-takeoff::before{content:"\f845"} .bi-lock::before{content:"\f47b"}
.bi-play-circle-fill::before{content:"\f4f2"} .bi-stop-circle-fill::before{content:"\f590"} .bi-signpost-split::before{content:"\f549"} .bi-bell::before{content:"\f18a"}
.bi-sliders2::before{content:"\f789"} .bi-trash3::before{content:"\f78b"} .bi-dash-lg::before{content:"\f63b"} .bi-exclamation-octagon-fill::before{content:"\f336"}
.bi-exclamation-triangle-fill::before{content:"\f33a"} .bi-arrow-right-circle::before{content:"\f134"} .bi-info-circle::before{content:"\f431"} .bi-question-circle::before{content:"\f504"}
.camp-constructeur { display: grid; grid-template-rows: auto 1fr auto; height: calc(100vh - var(--header-height) - var(--sp-6) - var(--sp-12)); min-height: 560px; overflow: hidden }
.camp-barre-haut { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-default); flex-wrap: wrap }
.camp-barre-haut .camp-sp { flex: 1 }
.camp-nom { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text-emphasis); background: transparent; border-color: transparent; max-width: 320px; padding: 6px 10px }
.camp-nom:hover, .camp-nom:focus { border-color: var(--border-default); background: var(--surface-inset) }
.camp-nom[readonly] { pointer-events: none }
.camp-regle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); border: 1px dashed var(--border-strong); padding: 5px 10px; white-space: nowrap }
.camp-regle .bi { color: var(--orbit-orange) }
.camp-editeur { min-height: 0; height: 100%; overflow: hidden }
.camp-pied { padding: 8px var(--sp-4); border-top: 1px solid var(--border-default) }
.camp-barre { height: 6px; background: var(--surface-inset); border: 1px solid var(--border-default); width: 140px; margin-bottom: 4px }
.camp-barre span { display: block; height: 100%; background: var(--orbit-orange) }
.camp-estimation { margin: 0; padding-left: 20px; line-height: 1.8 }
/* 5c : statuts de campagne */
.camp-statut-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; border: 1px solid var(--border-strong) }
.camp-statuts-cpt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.camp-statuts-cpt .btn b { margin-left: 4px }
/* 5d — nœud d'appel : sorties nommées, section « Avancé » repliée, suivi des tentatives */
.camp-sortie { display: inline-block; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border: 1px solid var(--border-strong); white-space: nowrap }
.camp-sortie.ok { border-color: var(--orbit-green); color: var(--orbit-green) } .camp-sortie.err { border-color: var(--orbit-red); color: var(--orbit-red) } .camp-sortie.nom { border-color: var(--text-secondary) }
.fx-inspector details.insp-avance > summary.sh { cursor: pointer; list-style: none; margin-bottom: 0 } .fx-inspector details.insp-avance > summary.sh::-webkit-details-marker { display: none }
.fx-inspector details.insp-avance[open] > summary.sh { margin-bottom: 12px } .fx-inspector details.insp-avance > summary.sh .bi { transition: transform .15s ease } .fx-inspector details.insp-avance[open] > summary.sh .bi { transform: rotate(180deg) }
.camp-avance { position: relative } .camp-avance > summary { list-style: none; cursor: pointer; display: inline-flex } .camp-avance > summary::-webkit-details-marker { display: none }
.camp-avance-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-panel); min-width: 220px }
.camp-avance-menu .btn { justify-content: flex-start }
.camp-appel-suivi { margin-top: 2px }
.camp-statuts-liste { display: grid; gap: 6px }
.camp-statut-ligne { display: grid; grid-template-columns: 36px 1fr 2fr auto auto auto; gap: 6px; align-items: center }
.camp-statut-ligne input[type=color] { width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-default); background: transparent }
.camp-statuts-actions { display: flex; gap: 8px; margin: 10px 0 }
.camp-statuts-titre { margin: 14px 0 6px; font-size: var(--text-sm) }
.camp-auto { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px }
.camp-filtre-statut { margin-bottom: 10px; max-width: 320px }
.camp-statut-cell { display: inline-flex; align-items: center; gap: 4px } .camp-statut-cell select { min-width: 150px; padding: 4px 6px; font-size: var(--text-xs) }
.bi-bug::before{content:"\f1dc"}
/* 5f — mode test d'une campagne */
.camp-test-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px }
.camp-test-regle { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: var(--text-sm) } .camp-test-regle .bi { color: var(--orbit-orange); margin-top: 2px }
.camp-test-tete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap } .camp-test-position { margin: 10px 0; padding: 8px 10px; background: var(--surface-inset); border: 1px solid var(--border-default) }
.camp-test-etapes { margin: 0; padding-left: 20px; line-height: 1.7 } .camp-test-etapes .mono { font-size: var(--text-xs) }
.camp-test-source { border: 1px solid var(--border-default); padding: 8px 12px 10px; margin: 0 0 10px } .camp-test-source legend { padding: 0 6px }
.camp-test-radio { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; cursor: pointer } .camp-test-radio input { margin-top: 3px }
.camp-test-lot { margin: 4px 0 8px 24px } .camp-test-societes { max-height: 200px; overflow: auto; margin-top: 6px }
.camp-test-societe { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center } .camp-test-societe.choisie { background: var(--surface-inset); border-color: var(--orbit-orange) } .camp-test-societe .bi-check-circle-fill { color: var(--orbit-orange) }
.camp-test-dossier { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--orbit-orange); background: var(--surface-inset) }
.camp-test-msg { margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--border-default) } .camp-test-corps { white-space: pre-wrap; font-family: inherit; font-size: var(--text-sm); margin: 6px 0 0; max-height: 240px; overflow: auto }
/* suivi du test : les liens {rdv}, emails et ids longs reviennent à la ligne au lieu de déborder */
.camp-test-tete, .camp-test-position, .camp-test-etapes, .camp-test-msg, .camp-test-corps { overflow-wrap: anywhere; word-break: break-word; min-width: 0 }
.camp-test-corps { white-space: pre-wrap; overflow-x: hidden }

/* ---------- Mission 5h : gestion des campagnes (renommer / supprimer), tableau de bord, thème clair ---------- */
.camp-actions { display: inline-flex; gap: 4px; white-space: nowrap } .camp-actions .btn.sm { padding: 5px 8px }
.camp-suppr { line-height: 1.7 } .camp-suppr .bi { margin-right: 6px; color: var(--orbit-orange) }
.camp-tdb { min-height: 0; height: 100%; overflow: auto; padding: 12px var(--sp-4) 20px }
.camp-tdb-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.camp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.camp-kpi { padding: 10px 12px; background: var(--surface-inset); border: 1px solid var(--border-default); border-left: 3px solid var(--border-strong); min-width: 0 }
.camp-kpi.ok { border-left-color: var(--orbit-green) } .camp-kpi.act { border-left-color: var(--orbit-orange) }
.camp-kpi-val { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-emphasis); line-height: 1.2 }
.camp-kpi-lib { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); margin-top: 2px }
.camp-kpi-sous { font-size: var(--text-xs); margin-top: 4px; overflow-wrap: anywhere }
.camp-tdb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px } @media (max-width: 900px) { .camp-tdb-cols { grid-template-columns: 1fr } }
.camp-tdb-barres { display: grid; gap: 6px }
.camp-tdb-barre { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 8px; align-items: center; font-size: var(--text-sm) }
.camp-tdb-barre-lib { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.camp-tdb-barre-jauge { display: block; height: 10px; background: var(--surface-inset); border: 1px solid var(--border-default) } .camp-tdb-barre-jauge span { display: block; height: 100% }
.camp-tdb-barre-nb { font-size: var(--text-xs); white-space: nowrap }
.camp-tdb-courbe { width: 100%; max-width: 760px; height: auto; display: block; background: var(--surface-inset); border: 1px solid var(--border-default) }
.camp-tdb-axe { font-family: var(--font-mono); font-size: 10px; fill: var(--text-muted) } .camp-tdb-axe-ligne { stroke: var(--border-strong) } .camp-tdb-axe-ligne.pointille { stroke-dasharray: 3 3 }
.camp-tdb-legende { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: var(--text-xs); margin-bottom: 6px }
.camp-tdb-leg { display: inline-flex; gap: 5px; align-items: center } .camp-tdb-leg i { display: inline-block; width: 12px; height: 3px }
.camp-tdb-evs .ligne { padding: 8px 12px }
/* Thème CLAIR : mêmes tokens, autres valeurs — tout l'écran (et le tableau de bord) le suit. Choisi par le bouton de la vue, mémorisé. */
html[data-theme="clair"] {
  --orbit-cosmos: #F4F5F8; --orbit-night: #FFFFFF; --orbit-deep: #EEF0F4; --orbit-hover: #E6E8EE; --orbit-border: #D5D8E0;
  --orbit-ink-1: #1F2430; --orbit-ink-2: #4A5060; --orbit-ink-3: #7A8090; --orbit-white: #101216;
  --orbit-green: #2E7D32; --orbit-red: #B03A2E; --orbit-blue: #0277BD; --orbit-cyan: #00838F;
  --glow-orange: rgba(232, 131, 42, 0.08); --glow-cyan: rgba(0, 188, 212, 0.05); --grid-line: rgba(31, 36, 48, 0.05); --veil: rgba(40, 44, 52, 0.45);
  --shadow-panel: 0 8px 30px rgba(0, 0, 0, 0.08); --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.22);
  color-scheme: light;
}

/* Mission 4ab : appeler depuis tout écran — bouton « Appeler » global, numéros cliquables, combiné flottant pendant l'appel */
#appeler-global .bi { color: var(--orbit-orange) }
.tel { cursor: pointer; color: var(--orbit-orange); text-decoration: underline dotted; text-underline-offset: 2px; font: inherit; border-radius: 2px }
.tel:hover, .tel:focus-visible { color: var(--orbit-gold); outline: none; box-shadow: var(--focus-ring) }
.tel::after { content: "\f5c1"; font-family: 'bootstrap-icons'; font-size: .8em; margin-left: 3px; opacity: .7; vertical-align: -0.1em }
#combine-flottant { position: fixed; right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index: 25; width: min(380px, calc(100vw - 32px)) }
#combine-flottant:empty { display: none }
.fenetre.flottante { max-width: 100%; max-height: min(80vh, 640px); overflow: auto; border-color: var(--orbit-orange-line) }
.fenetre.flottante .f-tete { padding: var(--sp-3) var(--sp-4); align-items: center }
.fenetre.flottante .f-tete h2 { font-size: var(--text-md) }
.fenetre.flottante .f-tete > div { min-width: 0; margin-right: auto }
.fenetre.flottante .f-corps { padding: var(--sp-4); gap: var(--sp-4) }
.fenetre.flottante.reduite .f-tete .muted, .fenetre.flottante.reduite .f-pied, .fenetre.flottante.reduite .cb-avatar, .fenetre.flottante.reduite .cb-sous,
.fenetre.flottante.reduite .cb-numero, .fenetre.flottante.reduite .cb-rec, .fenetre.flottante.reduite .cb-presente, .fenetre.flottante.reduite .cb-brief,
.fenetre.flottante.reduite .cb-apres, .fenetre.flottante.reduite .cb-note { display: none }
.fenetre.flottante.reduite .f-corps { padding: var(--sp-3) var(--sp-4) var(--sp-4) }
.fenetre.flottante.reduite .combine { grid-template-columns: 1fr auto; justify-items: start; align-items: center; text-align: left; column-gap: var(--sp-3); padding: 0 }
.fenetre.flottante.reduite .cb-nom { grid-column: 1 / -1; margin: 0; font-size: var(--text-md) }
.fenetre.flottante.reduite .cb-pastille { margin-top: 6px }
.fenetre.flottante.reduite .cb-chrono { margin-top: 6px; font-size: 22px }
.fenetre.flottante.reduite .cb-boutons { grid-column: 1 / -1; margin-top: var(--sp-3); justify-content: flex-start }
.fenetre.flottante.reduite .cb-boutons .btn.lg { height: 38px; padding: 0 14px; font-size: var(--text-sm) }
@media (max-width: 760px) { #combine-flottant { right: var(--sp-2); width: calc(100vw - 16px) } }

/* 5j — modifier une campagne lancée : mode révision, diff de confirmation, prochaine action d'une société */
.camp-revision-mode { font-size: var(--text-sm); color: var(--orbit-gold); border: 1px dashed var(--orbit-gold); padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px }
.camp-diff li { margin-bottom: 6px } .camp-report { margin: 4px 0 0 0 } .camp-version { color: var(--text-muted) }
.camp-action-choix { display: grid; gap: 8px; margin-top: 12px } .camp-action-choix .chk-row { display: flex; gap: 8px; align-items: center; cursor: pointer }

/* ---------- Mission 5k : écran « Agenda » des actions (aujourd'hui / à venir, toutes campagnes) ---------- */
.bi-calendar-week::before{content:"\f1f3"} .bi-calendar-day::before{content:"\f1e6"} .bi-circle::before{content:"\f28a"}
.ag { display: grid; gap: var(--sp-3); padding: var(--sp-3) 0 0 }
.ag-haut { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 0 var(--sp-4) }
.ag-periodes { display: inline-flex; gap: 4px; flex-wrap: wrap }
.ag-total { font-size: var(--text-xs) }
/* 5k-2 : période libre « du … au … » et barre « Qui » */
.ag-plage { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--sp-3); padding-left: var(--sp-3); border-left: 1px solid var(--border-default); flex-wrap: wrap }
.ag-plage-l { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-muted) }
.ag-plage input[type=date] { padding: 4px 6px; font-size: var(--text-xs); width: 9.5em; min-width: 0 }
.ag-plage.active input[type=date] { border-color: var(--orbit-orange) }
.ag-qui-barre { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 0 var(--sp-4) } .ag-qui-barre .eyebrow { margin-right: var(--sp-2) }
.ag-n { font-variant-numeric: tabular-nums; opacity: .8 } .ag-qui-barre .btn.act { border-color: var(--orbit-orange) }
.ag-jour .panneau-tete { flex-wrap: wrap; gap: var(--sp-2) }
.ag-jour .panneau-tete h2 { flex: 1 1 auto; min-width: 0 }
.ag-jour .grp-btn.ag-grp { padding: 0; font-size: inherit; font-weight: inherit; gap: var(--sp-2) }
.ag-jour .panneau-tete .badges { font-size: var(--text-2xs) }
.ag-liste { display: grid }
.ag-ligne { display: grid; grid-template-columns: 96px minmax(180px, 1.1fr) minmax(220px, 2fr) auto; gap: var(--sp-3); align-items: start; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-default) }
.ag-ligne:last-child { border-bottom: 0 }
.ag-ligne.ag-retard { border-left: 3px solid var(--orbit-orange); background: var(--orbit-orange-dim) }
.ag-ligne[data-statut="fait"] { opacity: .78 }
.ag-ligne[data-statut="pause"] .ag-type { color: var(--text-muted) }
.ag-heure { display: grid; gap: 2px; line-height: 1.2 } .ag-h { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-emphasis) } .ag-h-mg { font-size: var(--text-2xs) }
.ag-heure .ag-h.muted { font-size: var(--text-xs); font-weight: var(--weight-medium) }
.ag-qui .btn.lien.fort { font-weight: var(--weight-semibold); color: var(--text-emphasis) }
.ag-quoi { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.ag-type { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold); color: var(--text-emphasis) } .ag-type .bi { color: var(--orbit-orange) }
.ag-res { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; font-size: var(--text-xs) } .ag-res.ok { color: var(--feedback-success) } .ag-res.act { color: var(--orbit-orange) }
.ag-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: center } .ag-actions .btn.sm { white-space: nowrap } .ag-encours { font-size: var(--text-xs); display: inline-flex; gap: 4px; align-items: center }
.ag-vide { padding: 12px var(--sp-4) }
@media (max-width: 900px) {
  .ag-ligne { grid-template-columns: 72px 1fr; grid-template-areas: "heure qui" "heure corps" "actions actions" }
  .ag-heure { grid-area: heure } .ag-qui { grid-area: qui } .ag-corps { grid-area: corps } .ag-actions { grid-area: actions; justify-content: flex-start; padding-top: 4px }
  .ag-haut { padding: 0 var(--sp-3) } .ag-plage { margin-left: 0; padding-left: 0; border-left: 0 } .ag-qui-barre { padding: 0 var(--sp-3) }
}

/* Mission 4ad : section « Documents » du composeur Email — documents suivis cochés, téléversement, jetons, aperçu lien suivi */
.documents { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-default) }
.doc-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap }
.doc-choisis { display: flex; flex-wrap: wrap; gap: 6px }
.doc-jeton .bi { color: var(--orbit-orange) }
.doc-liste { display: grid; gap: var(--sp-2); max-height: 220px; overflow: auto }
.doc-groupe { display: grid; gap: 2px }
.doc-groupe > .eyebrow { margin: 4px 0 }
.doc-ligne { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--sp-2); align-items: center; padding: 6px 8px; border: 1px solid transparent; cursor: pointer; font-size: var(--text-sm) }
.doc-ligne:hover { background: var(--surface-hover) }
.doc-ligne.coche { background: var(--orbit-orange-dim); border-color: var(--orbit-orange-line, var(--border-strong)) }
.doc-ligne > .bi { color: var(--text-secondary) }
.doc-ligne .doc-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.doc-ligne .doc-titre .mono { color: var(--text-muted); font-size: var(--text-xs) }
.doc-ligne .doc-meta { display: flex; gap: 6px; align-items: center; color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap }
.doc-resume { margin-top: 8px; font-size: var(--text-sm); color: var(--text-secondary); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap }
.bi-link-45deg::before{content:"\f470"} .bi-file-earmark-pdf::before{content:"\f381"} .bi-file-earmark-word::before{content:"\f390"}
.bi-file-earmark-slides::before{content:"\f387"} .bi-file-earmark-image::before{content:"\f37d"}

/* Mission 6a — écran « Devis » : période « du … au … » dans l'en-tête, lignes du bloc « Devis de cette affaire » */
.devis-periode { display: inline-flex; align-items: center; gap: var(--sp-2) }
.devis-periode input[type="date"] { font: inherit; padding: 4px 8px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-base, transparent); color: inherit }
.devis-ligne { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border-default) }
.devis-ligne:last-child { border-bottom: 0 }
.devis-ligne .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end }
#lignes td.actions { white-space: nowrap } #lignes td.actions .btn { margin: 2px 4px 2px 0 }

/* 6b — table de lignes du « Nouveau devis » (devis_lignes.js) */
.dl-cadre { overflow-x: auto; border: 1px solid var(--border-default); margin-bottom: var(--sp-2) }
.dl-table { width: 100%; border-collapse: collapse; min-width: 720px } .dl-table th { text-align: left; padding: 6px 8px; font-size: var(--text-xs); color: var(--text-secondary); border-bottom: 1px solid var(--border-default) }
.dl-table td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid var(--border-default) } .dl-table input { width: 100%; min-width: 0 } .dl-table .dl-desc { margin-top: 4px; font-size: var(--text-sm) }
.dl-table td:nth-child(3), .dl-table td:nth-child(5) { width: 11% } .dl-table td:nth-child(4), .dl-table td:nth-child(6) { width: 10% } .dl-table .dl-total { text-align: right; white-space: nowrap; padding-top: 14px }
.dl-ordre { display: flex; flex-direction: column; gap: 2px; width: 32px } .dl-ordre .btn { padding: 2px 4px; min-height: 0 }
/* 5n : Correspondances — statut de suivi modifiable, Assigner, Supprimer (ligne du tableau et pied du fil) */
.fil-outils { gap: 6px } .fil-outils .btn.sm { padding: 4px 8px }
select.fil-suite { min-width: 130px; padding: 4px 6px; font-size: var(--text-xs); margin-left: 4px }
.f-pied .gauche select.fil-suite { margin-left: var(--sp-2) }