/* Misty – kit visuel « Marine » (repris des maquettes validées, images/maquettes/ecrans/src). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --navy: #0F2747; --navy-2: #1A3A63; --ink: #172636; --slate: #5B6B7D; --mute: #65727F;
  --line: #E3E8EF; --bg: #F5F7FA; --blue: #2563C9; --blue-2: #8FB3E6; --blue-3: #C3D5EE;
  --sky: #E9F1FC; --ok: #237A5A; --ok-bg: #E6F4EE; --warn: #8F5B0F; --warn-bg: #FBF1E1; --err: #B4423A; --err-bg: #FBEAE8;
  /* Rôles ajoutés (même valeur qu'avant en clair ; le thème sombre les redéfinit). */
  --blue-fill: #2563C9; --border-check: #B8C4D2; --border-closed: #EBCB94; --border-danger: #F0CFCB;
  --border-dash: #CCD6E2; --border-input: #D6DEE8; --border-warn: #F0D9B5; --closed-bg: #FFFBF3;
  --count-bg: #2E5D9B; --dot-off: #E0776D; --dot-on: #4CC59A; --err-soft: #FFFAF9; --evt-small: #3D6AA6;
  --heat-1: #C5D7F3; --heat-2: #96B5E7; --heat-3: #5E8ED8; --hero-foot: #7F97B6; --hero-text: #A9BCD4;
  --link-line: #CBD8EA; --mark: #FCEFC7; --note-text: #24518F; --on-fill: #FFFFFF; --relay-bg: #EEF0FB;
  --relay-bubble: #2B3F8C; --relay-text: #3B3F9E; --ring: #2563C9; --rising: #A8551F; --scrollbar: #C5CFDB;
  --series-4: #A9B4C2; --series-5: #5E86C9; --series-6: #9DB6DA; --series-7: #3E5F8F; --series-8: #7C8FA8;
  --series-mute: #A3AFBD; --series-negative: #D9822B; --series-none: #D5DCE5; --shadow: #0F2747;
  --side-text: #C9D5E4; --surface: #FFFFFF; --surface-drop: #F7FAFE; --surface-event: #EEF2F7;
  --surface-hover: #FAFBFD; --surface-picked: #F5F9FF; --surface-soft: #FBFCFE; --surface-weekend: #F0F3F7;
  --toggle-off: #CBD4DF; --wave: #BCD0EA; --wave-focus: #6FA4EA;
  --strong: #0F2747; --series-strong: #1A3A63;  /* repère fort, série forte des graphiques */
}
/* Thème sombre : choisi par l'utilisateur (data-theme="dark", menu de son compte), ou celui du
   système quand il n'a rien choisi. Les deux blocs portent les mêmes valeurs. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #202328; --navy-2: #2E3238; --ink: #E8EAED; --slate: #AEB4BC; --mute: #959CA6; --line: #2C3036;
  --bg: #111315; --blue: #86AEF1; --blue-2: #4B74B0; --blue-3: #3A4250; --sky: #23272D; --ok: #63D0A0;
  --ok-bg: #15291F; --warn: #E6AE5C; --warn-bg: #2E2414; --err: #F2958B; --err-bg: #331C1C;
  --blue-fill: #2A63C6; --border-check: #5A616B; --border-closed: #66522A; --border-danger: #6A3A37;
  --border-dash: #3E434A; --border-input: #3A3F46; --border-warn: #66522A; --closed-bg: #26221A;
  --count-bg: #3A4049; --dot-off: #E0776D; --dot-on: #4CC59A; --err-soft: #241A1B; --evt-small: #A9B4C2;
  --heat-1: #1F4675; --heat-2: #2D5FA3; --heat-3: #3F72C4; --hero-foot: #858D98; --hero-text: #A9B0BA;
  --link-line: #3E434A; --mark: #4D4220; --note-text: #C3CCD8; --on-fill: #FFFFFF; --relay-bg: #26263A;
  --relay-bubble: #33375E; --relay-text: #C7C8F2; --ring: #86AEF1; --rising: #F0A066; --scrollbar: #454B53;
  --series-4: #858C96; --series-5: #6F95D6; --series-6: #A7C0E4; --series-7: #5579B0; --series-8: #8C949E;
  --series-mute: #7B828C; --series-negative: #E08E3C; --series-none: #3F444B; --shadow: #000000;
  --side-text: #C5CAD1; --surface: #1A1C20; --surface-drop: #1D2024; --surface-event: #24272C;
  --surface-hover: #212429; --surface-picked: #24282E; --surface-soft: #1D2024; --surface-weekend: #1F2226;
  --toggle-off: #4A5058; --wave: #4A5563; --wave-focus: #6FA4EA;
  --strong: #E8EAED; --series-strong: #C2C8D0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy: #202328; --navy-2: #2E3238; --ink: #E8EAED; --slate: #AEB4BC; --mute: #959CA6; --line: #2C3036;
    --bg: #111315; --blue: #86AEF1; --blue-2: #4B74B0; --blue-3: #3A4250; --sky: #23272D; --ok: #63D0A0;
    --ok-bg: #15291F; --warn: #E6AE5C; --warn-bg: #2E2414; --err: #F2958B; --err-bg: #331C1C;
    --blue-fill: #2A63C6; --border-check: #5A616B; --border-closed: #66522A; --border-danger: #6A3A37;
    --border-dash: #3E434A; --border-input: #3A3F46; --border-warn: #66522A; --closed-bg: #26221A;
    --count-bg: #3A4049; --dot-off: #E0776D; --dot-on: #4CC59A; --err-soft: #241A1B; --evt-small: #A9B4C2;
    --heat-1: #1F4675; --heat-2: #2D5FA3; --heat-3: #3F72C4; --hero-foot: #858D98; --hero-text: #A9B0BA;
    --link-line: #3E434A; --mark: #4D4220; --note-text: #C3CCD8; --on-fill: #FFFFFF; --relay-bg: #26263A;
    --relay-bubble: #33375E; --relay-text: #C7C8F2; --ring: #86AEF1; --rising: #F0A066; --scrollbar: #454B53;
    --series-4: #858C96; --series-5: #6F95D6; --series-6: #A7C0E4; --series-7: #5579B0; --series-8: #8C949E;
    --series-mute: #7B828C; --series-negative: #E08E3C; --series-none: #3F444B; --shadow: #000000;
    --side-text: #C5CAD1; --surface: #1A1C20; --surface-drop: #1D2024; --surface-event: #24272C;
    --surface-hover: #212429; --surface-picked: #24282E; --surface-soft: #1D2024; --surface-weekend: #1F2226;
    --toggle-off: #4A5058; --wave: #4A5563; --wave-focus: #6FA4EA;
    --strong: #E8EAED; --series-strong: #C2C8D0;
  }
}

[hidden] { display: none !important; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { min-width: 1100px; min-height: 100vh; font-family: 'Manrope', sans-serif; color: var(--ink); background: var(--bg); display: flex; font-size: 14px; padding-left: 252px; }  /* place de la barre latérale fixe */
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 14px; height: 14px; }

/* ---------- Barre latérale ---------- */
/* Fixe, hors du défilement de la page : collante, elle suivait un défilement arrondi au pixel, et en bas d'une
   page de hauteur fractionnaire ses icônes sautaient d'un pixel, pas ses libellés. */
aside.side { width: 252px; flex: none; background: var(--navy); color: var(--side-text); padding: 26px 18px; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-fill); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; padding: 0 10px 30px; }
aside.side nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 500; margin-bottom: 2px; }
aside.side nav a.on { background: var(--navy-2); color: var(--on-fill); }
aside.side nav a .count { margin-left: auto; background: var(--count-bg); color: var(--on-fill); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.sip { margin-top: auto; background: color-mix(in srgb, var(--on-fill) 6%, transparent); border-radius: 12px; padding: 14px; font-size: 12.5px; line-height: 1.5; }
.sip b { color: var(--on-fill); font-weight: 600; display: block; margin-bottom: 2px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-on); margin-right: 6px; }
.dot.off { background: var(--dot-off); } .dot.idle { background: var(--mute); }

/* ---------- Zone principale ---------- */
main { flex: 1; min-width: 0; padding: 0 36px 28px; display: flex; flex-direction: column; gap: 16px; }
header.top { flex: none; height: 80px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); position: relative; }
header.top .header-search { position: absolute; left: 50%; transform: translateX(-50%); }
header.top h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
header.top .sub { color: var(--slate); }
header.top .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.crumb { color: var(--slate); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.crumb + h1 { margin-top: 2px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sky); color: var(--blue); display: grid; place-items: center; font-weight: 700; flex: none; }
.search { width: 300px; height: 40px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--mute); }

/* ---------- Panneaux ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.panel.flush { padding: 0; }
.panel.flush > .ph { padding: 18px 22px 0; display: flex; align-items: center; gap: 12px; }
.ph h2 { margin: 0; }
.ph > .right, .ph > form.right { margin-left: auto; }
a.link { color: var(--blue); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
a.link:hover, a.link:focus-visible { text-decoration: underline; }
h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 2px 10px; flex-wrap: wrap; }
h2 small, h3 small { font-weight: 500; color: var(--slate); font-size: 13px; }
h2 .right, h3 .right { margin-left: auto; }
h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.muted { color: var(--slate); } .mute { color: var(--mute); }
.small { font-size: 12.5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.sep { height: 1px; background: var(--line); margin: 16px 0; }

/* ---------- Boutons ---------- */
.btn { height: 38px; padding: 0 16px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); white-space: nowrap; }
.btn.primary { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-fill); }
.btn.dark { background: var(--navy); border-color: var(--navy); color: var(--on-fill); }
.btn.danger { color: var(--err); border-color: var(--border-danger); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--slate); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--slate); }

/* ---------- Étiquettes ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--bg); color: var(--slate); white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.blue { background: var(--sky); color: var(--blue); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.err { background: var(--err-bg); color: var(--err); }
a.tag { min-height: 24px; margin: 2px 0; text-decoration: none; } /* pastille cliquable : cible de 24 px (WCAG 2.5.8) */
.tag.navy { background: var(--navy); color: var(--on-fill); }
/* Sur le fond de page (en-tête), une étiquette neutre garde un contour pour rester visible */
header.top .tag:not(.ok):not(.blue):not(.warn):not(.err):not(.navy) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 16%, transparent); display: inline-block; flex: none; }

/* ---------- Tableaux ---------- */
table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-weight: 600; color: var(--mute); font-size: 12.5px; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
table.data th:first-child, table.data td:first-child { padding-left: 22px; }
table.data th:last-child, table.data td:last-child { padding-right: 22px; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.sel td { background: var(--sky); }
.num { font-variant-numeric: tabular-nums; }
.dir { display: inline-flex; align-items: center; gap: 6px; color: var(--slate); }

/* ---------- Onglets, filtres ---------- */
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 12px 0; color: var(--slate); font-weight: 600; position: relative; }
.tabs a.on { color: var(--ink); }
.tabs a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue-fill); border-radius: 2px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg b { padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--slate); }
.seg b.on { background: var(--sky); color: var(--blue); }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter { height: 36px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--slate); font-weight: 500; font-size: 13px; }
.filter b { color: var(--ink); font-weight: 600; }

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .label { font-weight: 600; font-size: 13px; }
.field .hint { color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.input { min-height: 40px; border: 1px solid var(--border-input); background: var(--surface); border-radius: 10px; padding: 9px 12px; font: inherit; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.input.ph { color: var(--mute); }
.input.area { align-items: flex-start; line-height: 1.55; white-space: pre-wrap; }
.input.select::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 1.8px solid var(--slate); border-bottom: 1.8px solid var(--slate); transform: rotate(45deg) translate(-3px, -3px); }
.input.focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 14%, transparent); }
.input.secret { letter-spacing: 3px; color: var(--slate); }
.input.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12.5px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form .full { grid-column: 1 / -1; }
.toggle { width: 38px; height: 22px; border-radius: 99px; background: var(--toggle-off); position: relative; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-fill); }
.toggle.on { background: var(--blue-fill); }
.toggle.on::after { left: 19px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13px; color: var(--slate); }
.chip.on { border-color: var(--blue); background: var(--sky); color: var(--blue); }
.check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-check); display: inline-grid; place-items: center; flex: none; }
.check.on { background: var(--blue-fill); border-color: var(--blue-fill); }
.check.on::after { content: ''; width: 5px; height: 9px; border-right: 2px solid var(--on-fill); border-bottom: 2px solid var(--on-fill); transform: rotate(45deg) translate(-1px, -1px); }
.play { width: 32px; height: 32px; border-radius: 50%; background: var(--sky); color: var(--blue); display: grid; place-items: center; flex: none; }
.play::after { content: ''; margin-left: 3px; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* ---------- Divers ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.kpi { padding: 15px 22px; border-left: 1px solid var(--line); }
.kpi:first-child { border-left: 0; }
.kpi span { color: var(--slate); font-size: 13px; }
.kpi strong { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; }
.kpi em { font-style: normal; font-size: 12.5px; color: var(--mute); }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.track { height: 8px; background: var(--bg); border-radius: 4px; }
.track > div { height: 100%; border-radius: 4px; background: var(--blue-fill); }
.stepper { display: flex; gap: 0; }
.step { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--mute); font-weight: 600; font-size: 13px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.step i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.step.done { color: var(--slate); border-color: var(--blue-2); }
.step.done i { background: var(--blue-2); border-color: var(--blue-2); color: var(--on-fill); }
.step.on { color: var(--blue); border-color: var(--blue); }
.step.on i { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-fill); }
.empty { border: 1.5px dashed var(--border-dash); border-radius: 14px; padding: 36px; text-align: center; color: var(--slate); }
.empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px; }
.note { background: var(--sky); color: var(--note-text); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; display: flex; gap: 10px; }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.failover { align-items: center; }
.note.failover > form { margin-left: auto; }
.drop { border: 1.5px dashed var(--blue-2); background: var(--surface-drop); border-radius: 12px; padding: 26px; text-align: center; color: var(--slate); }
.drop b { color: var(--blue); }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.var { display: inline-block; background: var(--sky); color: var(--blue); border-radius: 6px; padding: 1px 7px; font-weight: 600; font-size: 12.5px; }
.overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--shadow) 38%, transparent); display: grid; place-items: center; }
.modal { width: 520px; background: var(--surface); border-radius: 16px; padding: 26px; box-shadow: 0 24px 60px color-mix(in srgb, var(--shadow) 25%, transparent); }

/* ---------- Application (au-delà des maquettes) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; }
button.btn, a.btn { cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; text-decoration: none; }
button.btn:focus-visible, a.btn:focus-visible, .input:focus-within, aside.side nav a:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
input.bare, select.bare, textarea.bare { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; }
/* Liste ouverte d'un menu déroulant : le navigateur la peint avec le fond du menu, transparent
   ici ; sans couleurs propres, elle resterait blanche sous le texte clair du thème sombre. */
select option, select optgroup { background: var(--surface); color: var(--ink); }
textarea.bare { resize: vertical; line-height: 1.55; }
.input:focus-within { border-color: var(--blue); }
.note.err { background: var(--err-bg); color: var(--err); }
.note.ok { background: var(--ok-bg); color: var(--ok); }
.seg a { padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--slate); text-decoration: none; }
.seg a.on { background: var(--sky); color: var(--blue); }
aside.side nav a { cursor: pointer; }
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-menu form { display: inline; }
.checklist { display: flex; flex-direction: column; gap: 0; }
.checklist .list-item i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--blue-2); display: grid; place-items: center; font-style: normal; font-size: 12px; color: var(--blue); flex: none; }
.checklist .list-item.done i { background: var(--ok); border-color: var(--ok); color: var(--on-fill); }
.checklist .list-item.done b { color: var(--slate); }

/* Pages d'accès (connexion, mise en route) : bandeau marine et carte */
body.auth { background: var(--surface); padding-left: 0; }  /* pages d'accès : pas de barre latérale */
.hero { width: 620px; flex: none; min-height: 100vh; background: var(--navy); color: var(--on-fill); position: relative; overflow: hidden; padding: 56px 64px; display: flex; flex-direction: column; }
.hero .brand { padding: 0; font-size: 26px; gap: 12px; }
.hero .bg { position: absolute; right: -150px; bottom: -120px; width: 640px; height: 640px; opacity: .1; }
.hero h2 { display: block; font-size: 38px; line-height: 1.18; font-weight: 800; letter-spacing: -0.03em; margin-top: auto; max-width: 440px; position: relative; }
.hero p { margin-top: 18px; max-width: 400px; color: var(--hero-text); font-size: 16px; line-height: 1.55; position: relative; }
.hero .foot { margin-top: 64px; color: var(--hero-foot); font-size: 13px; position: relative; }
.pane { flex: 1; display: flex; flex-direction: column; padding: 36px 56px; }
.pane .top { display: flex; justify-content: flex-end; }
.card { width: 400px; margin: auto; padding-bottom: 40px; }
.card h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.card .lead { color: var(--slate); margin: 8px 0 32px; line-height: 1.5; font-size: 15px; }
.card .field + .field { margin-top: 20px; }
.card .input { height: 46px; font-size: 14.5px; }
.card .input svg { color: var(--mute); }
.card .btn.primary { width: 100%; height: 48px; justify-content: center; font-size: 15px; margin-top: 28px; border-radius: 12px; }
.card .note { margin-bottom: 20px; }
.pane .legal { text-align: center; color: var(--mute); font-size: 12.5px; }
.list-item .right { margin-left: auto; }

/* ---------- Appels : liste (E3) ---------- */
.tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.field-search { flex: 1; min-width: 260px; height: 36px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--mute); font-size: 13px; }
.field-search:focus-within { border-color: var(--blue); }
.filter select.bare { color: var(--ink); font-weight: 600; cursor: pointer; }
.grp td { background: var(--bg); color: var(--slate); font-weight: 700; font-size: 12.5px; padding-top: 9px; padding-bottom: 9px; }
.grp .live { margin-right: 6px; }
table.data td { height: 56px; }
a.rowlink { font-weight: 600; text-decoration: none; }
a.rowlink:hover, a.rowlink:focus-visible { color: var(--blue); text-decoration: underline; }
.pager { display: flex; align-items: center; padding: 14px 22px; border-top: 1px solid var(--line); color: var(--slate); font-size: 13px; }
.pager .pages { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.pg { min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 600; color: var(--slate); background: var(--surface); text-decoration: none; }
.pg.on { background: var(--sky); border-color: var(--blue-3); color: var(--blue); }
svg.flip { transform: rotate(180deg); }
.empty-pad { padding: 22px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--blue); }

/* ---------- Appel : détail (E4) ---------- */
.layout { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
.tr-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.chat { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; flex-direction: column; gap: 5px; max-width: 84%; }
.msg.caller { align-self: flex-start; align-items: flex-start; }
.msg.misty { align-self: flex-end; align-items: flex-end; }
.who { font-size: 12px; color: var(--mute); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.bub { padding: 11px 15px; border-radius: 14px; line-height: 1.5; font-size: 14px; white-space: pre-wrap; }
.caller .bub { background: var(--bg); border-top-left-radius: 4px; }
.misty .bub { background: var(--navy); color: var(--on-fill); border-top-right-radius: 4px; }
.lat { font-size: 12px; color: var(--slate); display: inline-flex; gap: 5px; align-items: center; font-variant-numeric: tabular-nums; }
.lat svg { color: var(--mute); }
.evt { align-self: center; display: flex; align-items: center; gap: 10px; background: var(--sky); color: var(--note-text); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 600; }
.evt.tr { background: var(--bg); color: var(--ink); }
.side-panel { display: flex; flex-direction: column; gap: 16px; }
.side-panel .panel { padding: 18px 20px; }
dl.info { display: grid; grid-template-columns: 112px 1fr; row-gap: 10px; margin-top: 14px; font-size: 13.5px; }
dl.info dt { color: var(--slate); } dl.info dd { font-weight: 600; }
.step2 { display: grid; grid-template-columns: 110px 1fr 64px; align-items: center; gap: 10px; font-size: 13px; }
.step2 .name b { color: var(--ink); display: block; font-size: 13px; }
.step2 .ms { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
svg.meter { width: 100%; height: 8px; display: block; }
svg.meter .bg { fill: var(--bg); } svg.meter .fg { fill: var(--blue-fill); }
.chain { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.chain .tot { display: flex; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; }
.chain .tot span { margin-left: auto; font-variant-numeric: tabular-nums; }
header.top .danger { color: var(--err); }

/* ---------- Agents (E8, E9, E9b) ---------- */
.tabs a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.foot { display: flex; align-items: center; gap: 14px; }
.foot .hint { margin-right: auto; display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 12.5px; }
.hint { color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.hint.block, span.block { display: block; }
.input.area { align-items: stretch; }
.input.area.big textarea { min-height: 250px; font-size: 13.5px; }
.grid-agent { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
/* Le prompt système descend jusqu'au bas de la colonne des langues et des voix. */
.grid-agent > .stack:has(.panel.fill) { align-self: stretch; }
.panel.fill { flex: 1; display: flex; flex-direction: column; }
.panel.fill > .field { flex: 1; }
.panel.fill .input.area { flex: 1; }
.gap-md { gap: 16px; margin-top: 14px; }
.top-gap { margin-top: 14px; }
.field-error { color: var(--err); font-size: 12.5px; font-weight: 600; }
fieldset.field { border: 0; } fieldset.field legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
label.chip { cursor: pointer; } label.chip input { accent-color: var(--blue-fill); }
.filter:focus-within, label.chip:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.check-row { align-items: flex-start; gap: 12px; cursor: pointer; } .check-row input { margin-top: 3px; accent-color: var(--blue-fill); }
.voice-lang { width: 110px; flex: none; }
.input.grow { flex: 1; }
.num-right { text-align: right; }
.ph-hint { padding: 4px 22px 6px; }
.tw-name { width: 200px; } .tw-dest { width: 150px; } .tw-small { width: 90px; text-align: center; }
#targets td { vertical-align: top; }
details.schedule { margin-top: 8px; font-size: 12.5px; color: var(--slate); }
details.schedule summary { cursor: pointer; font-weight: 600; }
details.schedule .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0; }
details.schedule .day { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.input.sm { min-height: 32px; padding: 5px 8px; font-size: 12px; width: 100%; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--blue-fill); width: 16px; height: 16px; }
.voice-row { gap: 10px; }
.voice-row .icon-btn { cursor: pointer; }
.play.play-sm { width: 20px; height: 20px; }
.player-slot audio.player { width: 100%; height: 36px; margin: 2px 0 8px; }

/* ---------- Paramètres : utilisateurs, audit (E20, E21) ---------- */
.acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.acts form { display: inline; }
.acts .btn { color: var(--slate); }
.acts .btn.danger { color: var(--err); }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form .input.sm { width: auto; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
code.secret-once { font-family: ui-monospace, Menlo, monospace; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; margin: 0 4px; user-select: all; }
.panel.narrow { max-width: 520px; }
.role-text { margin-top: 8px; line-height: 1.5; }
a.account-link { text-decoration: none; }
a.account-link:hover b { color: var(--blue); }
details.audit-detail summary { cursor: pointer; color: var(--slate); font-weight: 600; font-size: 12.5px; }
dl.diff { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin-top: 8px; font-size: 12.5px; }
dl.diff dt { color: var(--slate); font-weight: 600; }
dl.diff code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
dl.diff .del { background: var(--err-bg); color: var(--err); padding: 1px 6px; border-radius: 5px; }
dl.diff .add { background: var(--ok-bg); color: var(--ok); padding: 1px 6px; border-radius: 5px; }
.voice-row.unused .voice-lang b { color: var(--mute); }
.voice-unused { margin: 0 0 10px 120px; }
.voice-group { border-bottom: 1px solid var(--line); padding: 2px 0; }
.voice-group:last-child { border-bottom: 0; }
.voice-group .voice-row { border-bottom: 0; padding: 8px 0; }
.input select.bare { text-overflow: ellipsis; }
table.data th.num-right { text-align: right; }
.grid2.align-start { align-items: start; }
.input .muted { white-space: nowrap; }

/* ---------- Fournisseurs (E16) ---------- */
.grid3.align-start { align-items: start; }
.provider-card dl.info { grid-template-columns: 100px 1fr; }
.mono-small { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 500; word-break: break-all; }
.check-line { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
details.edit-provider summary, summary.summary-title { cursor: pointer; font-weight: 600; color: var(--slate); display: flex; align-items: center; gap: 8px; }
summary.summary-title { font-size: 15px; color: var(--ink); }

/* ---------- Téléphonie (E17) ---------- */
.pbx-grid { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 1.2fr; gap: 16px; }
details.edit-extension { border-top: 1px solid var(--line); padding: 12px 0; }
details.edit-extension:first-of-type { border-top: 0; }
details.edit-extension summary { cursor: pointer; font-weight: 600; }
.tag .dot { margin-right: 0; }

/* ---------- Menu du compte (badge en haut à droite) ---------- */
header.top .user-menu { margin-left: auto; position: relative; }
header.top .right ~ .user-menu { margin-left: 12px; }
details.user-menu > summary { list-style: none; cursor: pointer; }
details.user-menu > summary::-webkit-details-marker { display: none; }
details.user-menu > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 30%, transparent); }
details.user-menu[open] > summary { box-shadow: 0 0 0 3px var(--blue-3); }
.menu-card { position: absolute; right: 0; top: 48px; z-index: 20; width: 270px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px color-mix(in srgb, var(--shadow) 16%, transparent); padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.menu-card hr { border: 0; border-top: 1px solid var(--line); width: 100%; margin: 2px 0; }
.menu-who { display: flex; gap: 10px; align-items: center; }
.menu-card form { width: 100%; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font: inherit; font-weight: 500; font-size: 13.5px; color: var(--ink); background: transparent; border: 0; text-decoration: none; cursor: pointer; text-align: left; }
.menu-item:hover, .menu-item:focus-visible { background: var(--sky); outline: none; }

/* ---------- Bases de connaissances (E12, E13) ---------- */
.kb-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.kb-bases { display: flex; flex-direction: column; gap: 12px; }
.kb-base { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; text-decoration: none; color: var(--ink); }
.kb-base b { display: block; font-size: 15px; }
.kb-base span { color: var(--slate); font-size: 13px; }
.kb-base:hover, .kb-base:focus-visible { border-color: var(--blue-2); }
.kb-base.on { border-color: var(--blue); background: var(--sky); }
.kb-new { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; }
.kb-new summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.kb-new summary::-webkit-details-marker { display: none; }
.kb-head { padding-bottom: 0; }
.kb-head .tabs { border-bottom: 0; }
.kb-title { display: flex; gap: 20px; align-items: flex-start; }
.kb-title p { margin: 6px 0 0; line-height: 1.5; }
.kb-users { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.kb-drop { display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; position: relative; }
.kb-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kb-drop:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.kb-doc { display: flex; gap: 10px; align-items: flex-start; }
.kb-doc .field-error { max-width: 340px; }
.kb-translate { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kb-trans { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; color: var(--blue); border-radius: 4px; }
.kb-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.kb-lang form { display: flex; align-items: center; gap: 6px; }
.kb-lang .input.sm { width: auto; min-height: 28px; padding: 2px 6px; }
.kb-flag { align-items: flex-start; }
.kb-flag .grow { flex: 1; }
.kb-text { margin: 6px 0 0; line-height: 1.55; white-space: pre-line; }
.kb-text mark { background: var(--mark); border-radius: 4px; padding: 0 2px; color: inherit; }
/* Contenu d'un document : ses extraits dans l'ordre. */
.doc-view-meta { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } /* liste sans puces (scénarios) */
.mono-pre { white-space: pre-wrap; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12.5px; } /* passage de prompt avant ou après correction */
.plain-list.pad-list { padding: 0 22px 12px; } /* attentes non tenues au-dessus d'une conversation */
.kb-chunks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.kb-chunk { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.kb-chunk.blocked { border-color: var(--border-warn); }
.kb-chunk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.kb-chunk .kb-text { font-size: 13.5px; overflow-wrap: anywhere; }
.kb-found { margin-top: 4px; }
.kb-hit { display: grid; grid-template-columns: 90px 1fr; gap: 18px; }
.kb-hit.below { opacity: .75; }
.kb-score { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.kb-score strong { font-size: 24px; }
.kb-score span { color: var(--mute); font-size: 12px; }
.kb-score.words { align-items: center; padding-top: 4px; }
.kb-hit.below .kb-score .track > div { background: var(--blue-3); }
.kb-source { display: flex; gap: 8px; align-items: center; }
.kb-cut { display: flex; align-items: center; gap: 12px; color: var(--slate); font-size: 13px; }
.kb-cut::before, .kb-cut::after { content: ''; flex: 1; border-top: 1px dashed var(--border-dash); }
.kb-score .track > .w0 { width: 0%; }
.kb-score .track > .w5 { width: 5%; }
.kb-score .track > .w10 { width: 10%; }
.kb-score .track > .w15 { width: 15%; }
.kb-score .track > .w20 { width: 20%; }
.kb-score .track > .w25 { width: 25%; }
.kb-score .track > .w30 { width: 30%; }
.kb-score .track > .w35 { width: 35%; }
.kb-score .track > .w40 { width: 40%; }
.kb-score .track > .w45 { width: 45%; }
.kb-score .track > .w50 { width: 50%; }
.kb-score .track > .w55 { width: 55%; }
.kb-score .track > .w60 { width: 60%; }
.kb-score .track > .w65 { width: 65%; }
.kb-score .track > .w70 { width: 70%; }
.kb-score .track > .w75 { width: 75%; }
.kb-score .track > .w80 { width: 80%; }
.kb-score .track > .w85 { width: 85%; }
.kb-score .track > .w90 { width: 90%; }
.kb-score .track > .w95 { width: 95%; }
.kb-score .track > .w100 { width: 100%; }
@media (max-width: 1100px) {
  .kb-layout, .kb-upload { grid-template-columns: 1fr; }
}

/* ---------- Paramètres, E-mail (E18) ---------- */
.row.align-start { align-items: flex-start; }
.field.grow { flex: 1; }
.email-test { border-top: 1px solid var(--line); padding-top: 16px; }

/* ---------- Workflows de fin d'appel (E09c, E10) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--surface); color: var(--blue); font-weight: 700; padding: 10px 16px; border-radius: 10px; box-shadow: 0 0 0 2px var(--blue); text-decoration: none; }
.skip:focus { top: 12px; }
svg.up { transform: rotate(-90deg); }
svg.down { transform: rotate(90deg); }
button.toggle { border: 0; padding: 0; cursor: pointer; }
button.toggle:focus-visible, button.icon-btn:focus-visible, a.icon-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button.icon-btn { cursor: pointer; }
.row.wrap { flex-wrap: wrap; }
.wf-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.wf-add { position: relative; margin-left: auto; }
.wf-add > summary { list-style: none; cursor: pointer; }
.wf-add > summary::-webkit-details-marker { display: none; }
.wf-add .menu-card { top: 44px; width: 220px; }
.wf-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.wf-row.off { opacity: .6; }
.wf-move { display: flex; flex-direction: column; gap: 4px; width: 34px; }
.wf-move .icon-btn { width: 30px; height: 24px; }
.wf-num { width: 30px; height: 30px; border-radius: 50%; background: var(--sky); color: var(--blue); display: grid; place-items: center; font-weight: 700; flex: none; }
.wf-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; flex: none; }
.wf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wf-main .mono-small { overflow-wrap: anywhere; }
.wf-vars { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--slate); }
.wf-editor { padding: 0; }
.wf-section { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 22px 24px; min-width: 0; }
.wf-section:last-child { border-bottom: 0; }
.wf-section .label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.wf-pair { display: grid; grid-template-columns: 200px 1fr; gap: 10px; }
.wf-request { display: grid; grid-template-columns: 160px 1fr; gap: 12px; }
.wf-header { display: grid; grid-template-columns: 220px 1fr auto; gap: 10px; align-items: center; }
.wf-step { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.wf-pre { background: var(--bg); border-radius: 8px; padding: 10px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; max-height: 260px; overflow: auto; }
.wf-run { align-items: flex-start; }
.wf-run .grow { flex: 1; min-width: 0; }
@media (max-width: 1100px) {
  .wf-layout { grid-template-columns: 1fr; }
  .wf-header, .wf-pair, .wf-request { grid-template-columns: 1fr; }
}

/* ---------- Mémoire client (E14, E15) ---------- */
.mem-entry { align-items: flex-start; }
.mem-entry .num { width: 110px; flex: none; }
.mem-entry .grow { flex: 1; }
.mem-version { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mem-version .row { width: 100%; }
.mem-version.on { border-color: var(--blue); background: var(--sky); }

/* ---------- Tableau de bord (E2) ---------- */
.dash-bar { height: 12px; }
.dash-bar > div { height: 100%; }
.o-1 { background: var(--blue-fill); }
.o-2 { background: var(--blue-2); }
.o-3 { background: var(--blue-3); }
.o-4 { background: var(--series-4); }
.dash-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; font-size: 13px; color: var(--slate); }
/* Libellé en haut, nombre en bas : les nombres d'une ligne restent alignés quand un libellé passe sur deux lignes. */
.dash-legend > div { display: flex; flex-direction: column; justify-content: space-between; }
.dash-legend strong { display: block; color: var(--ink); font-size: 20px; margin-top: 4px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.pct-0 { width: 0%; }
.pct-5 { width: 5%; }
.pct-10 { width: 10%; }
.pct-15 { width: 15%; }
.pct-20 { width: 20%; }
.pct-25 { width: 25%; }
.pct-30 { width: 30%; }
.pct-35 { width: 35%; }
.pct-40 { width: 40%; }
.pct-45 { width: 45%; }
.pct-50 { width: 50%; }
.pct-55 { width: 55%; }
.pct-60 { width: 60%; }
.pct-65 { width: 65%; }
.pct-70 { width: 70%; }
.pct-75 { width: 75%; }
.pct-80 { width: 80%; }
.pct-85 { width: 85%; }
.pct-90 { width: 90%; }
.pct-95 { width: 95%; }
.pct-100 { width: 100%; }
@media (max-width: 1100px) {
  .live-grid, .dash-legend { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
}

.gap-under { margin-bottom: 12px; }
.live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.call { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; row-gap: 12px; color: var(--ink); text-decoration: none; }
.call:hover, .call:focus-visible { border-color: var(--blue-2); }
.call.focus { background: var(--navy); border-color: var(--navy); color: var(--on-fill); }
.call .who { font-weight: 700; font-size: 15px; color: inherit; }
.call .meta { color: var(--slate); font-size: 12.5px; margin-top: 3px; display: flex; gap: 6px; align-items: center; }
.call.focus .meta { color: var(--hero-text); }
.call .timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; }
.wave { grid-column: 1 / -1; display: flex; align-items: center; gap: 3px; height: 24px; }
.wave i { width: 3px; border-radius: 2px; background: var(--wave); }
.call.focus .wave i { background: var(--wave-focus); }
.wave .h1 { height: 3px; } .wave .h2 { height: 6px; } .wave .h3 { height: 9px; } .wave .h4 { height: 12px; }
.wave .h5 { height: 15px; } .wave .h6 { height: 18px; } .wave .h7 { height: 21px; } .wave .h8 { height: 24px; }
.call .tag { justify-self: start; }
.call.focus .tag { background: color-mix(in srgb, var(--on-fill) 12%, transparent); color: var(--on-fill); }
.dash-mid { grid-template-columns: 1.15fr 1fr; }
header.top .search { width: 300px; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--mute); }
header.top .search:focus-within { border-color: var(--blue); }

.tools { flex-wrap: wrap; }
.tools .field-search { min-width: 180px; }
.filter select.bare { width: auto; flex: none; max-width: 150px; }
.tools .filter { flex: none; }
.pg-gap { color: var(--mute); padding: 0 2px; }
.src { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.src .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--sky); color: var(--blue); display: grid; place-items: center; flex: none; }
/* Nom de document long (sans espace) : coupé dans le bloc plutôt que de le déborder. */
.src > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.mem { margin-top: 12px; font-size: 13.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 10px; }
.mem b { display: block; font-size: 12.5px; color: var(--slate); margin-bottom: 2px; }
.wf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.wfc { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.wfc.err { border-color: var(--border-danger); background: var(--err-soft); }
.wfc .h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.wfc .h .tag { margin-left: auto; }
.wfc p { line-height: 1.55; font-size: 13.5px; margin: 0; }
.kv { display: grid; grid-template-columns: 70px 1fr; row-gap: 6px; font-size: 13px; }
.kv span { color: var(--slate); } .kv b { font-weight: 600; overflow-wrap: anywhere; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--err-bg); color: var(--err); border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
.evt small { font-weight: 500; color: var(--evt-small); font-size: 12.5px; }
.evt.tr small { color: var(--slate); }
/* Appel en cours : « Échange en cours » et ses trois points qui s'allument tour à tour. Cycle de
   1,5 s : le rafraîchissement de la page (3 s) tombe en fin de cycle, sans saut visible. */
.dots span { animation: dot-blink 1.5s infinite both; }
.dots span:nth-child(2) { animation-delay: .25s; }
.dots span:nth-child(3) { animation-delay: .5s; }
@keyframes dot-blink { 0%, 70%, 100% { opacity: .2; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots span { animation: none; } }
.step2 .name { color: var(--slate); }
.ext-state { gap: 8px; }
.ext-state .dot { margin: 0; }
.chev-cell { width: 48px; }
.ph .filter { text-decoration: none; }

/* ---------- Lignes réordonnables, interrupteurs (misty.js) ---------- */
.drag { border: 0; background: transparent; color: var(--mute); cursor: grab; padding: 4px; display: grid; place-items: center; border-radius: 6px; }
.drag:focus-visible { outline: 2px solid var(--blue); }
.drag-cell { width: 40px; padding-right: 0 !important; }
.acts-cell { width: 100px; }
.row.end { justify-content: flex-end; gap: 6px; }
label.icon-btn { cursor: pointer; }
label.icon-btn.remove:has(input:checked) { background: var(--err-bg); border-color: var(--border-danger); color: var(--err); }
tbody.target:has(.remove input:checked) .target-view td:not(.acts-cell) { opacity: .45; text-decoration: line-through; }
tbody.dragging { opacity: .5; }
.target-edit td { background: var(--bg); }
.target-form { display: grid; grid-template-columns: 1fr 200px; gap: 12px 16px; padding: 6px 0; }
.target-form .full { grid-column: 1 / -1; }
.desc-cell { line-height: 1.45; }
input.switch { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--toggle-off); position: relative; flex: none; cursor: pointer; margin: 0; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-fill); transition: left .15s; }
input.switch:checked { background: var(--blue-fill); }
input.switch:checked::after { left: 19px; }
input.switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.switch-row { align-items: flex-start; gap: 12px; }
input.switch:disabled { opacity: .45; cursor: not-allowed; }
.failover-coverage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.switch-row:has(input.switch:disabled) b { color: var(--mute); }
details.summary-block > summary { cursor: pointer; font-weight: 600; color: var(--slate); font-size: 13px; }
.ph-row { display: flex; align-items: center; gap: 12px; }
.ph-row h2 { margin: 0; }
.top-gap-sm { margin-top: 4px; }
.wf-row.dragging { opacity: .5; }

.sect { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 20px 22px; min-width: 0; }
.sect:last-of-type { border-bottom: 0; }
.sect h3, .sect h2 { margin: 0 0 14px; }
.hdr-row { display: grid; grid-template-columns: 1fr 1.4fr 82px; gap: 10px; align-items: center; }
.hdr-row:has(.remove input:checked) .input { opacity: .45; text-decoration: line-through; }
.input.secret .tag { margin-left: auto; white-space: nowrap; letter-spacing: 0; }
label.icon-btn.lock:has(input:checked) { background: var(--sky); border-color: var(--blue-3); color: var(--blue); }
.vrow { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.gap-sm { gap: 8px; }
.chip.add-code input.bare { width: 120px; }
label.chip.on:has(input:not(:checked)) { border-color: var(--line); background: var(--surface); color: var(--mute); text-decoration: line-through; }
.enabled-switch { gap: 8px; }

.nowrap { white-space: nowrap; }
.kb-name { font-size: 18px; }
.kb-upload { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: stretch; }
.kb-upload > form { display: flex; }
.kb-drop { flex: 1; padding: 18px 22px; }
.drop-icon { width: 28px; height: 28px; color: var(--blue); flex: none; }
.kb-options { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 0; cursor: pointer; }
@media (max-width: 1100px) { .kb-upload { grid-template-columns: 1fr; } }

.mem-search { max-width: 560px; }
.pager-out { display: flex; align-items: center; gap: 12px; }
.btn.disabled { opacity: .45; pointer-events: none; }
.btn.danger-outline { color: var(--err); border-color: var(--border-danger); }
.mem-layout { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.mem-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mem-item:last-child { border-bottom: 0; }
.mem-item svg { color: var(--blue); flex: none; }
.mem-entry { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mem-entry:last-child { border-bottom: 0; }
.mem-when { width: 90px; flex: none; display: flex; flex-direction: column; gap: 2px; }
dl.info.right-values dd { text-align: right; }
@media (max-width: 1100px) { .mem-layout { grid-template-columns: 1fr; } }
.acts { flex-wrap: nowrap; }
@media (prefers-reduced-motion: reduce) { input.switch::after { transition: none; } }

.seg-radio label { padding: 6px 14px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--slate); cursor: pointer; }
.seg-radio label:has(input:checked) { background: var(--sky); color: var(--blue); }
.seg-radio label:has(input:focus-visible) { outline: 2px solid var(--blue); }
fieldset.field .seg { align-self: flex-start; }
.input.short { width: 110px; flex: none; }
dl.info.purge-info { grid-template-columns: 1fr auto; column-gap: 0; row-gap: 0; }
dl.info.purge-info dt, dl.info.purge-info dd { padding: 9px 0; border-bottom: 1px solid var(--line); }
dl.info.purge-info dd { padding-left: 24px; }
dl.info.purge-info dd { text-align: right; }
dl.info.purge-info dt:last-of-type, dl.info.purge-info dd:last-of-type { border-bottom: 0; }

dialog.modal { margin: auto; border: 0; padding: 26px; border-radius: 16px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 24px 60px color-mix(in srgb, var(--shadow) 25%, transparent); color: var(--ink); }
dialog.modal::backdrop { background: color-mix(in srgb, var(--shadow) 38%, transparent); }
.pbx-grid { display: grid; grid-template-columns: 1.3fr 1.3fr .6fr .6fr .9fr; gap: 14px; }
.pw { display: inline-flex; align-items: center; gap: 10px; color: var(--slate); }
.icon-btn.danger-icon { color: var(--err); }
tr.muted-row td { color: var(--mute); }
@media (max-width: 1100px) { .pbx-grid { grid-template-columns: 1fr 1fr; } }
.email-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.email-foot .right { margin-left: auto; }

.admin-only { gap: 6px; }
.provider-grid { align-items: stretch; }
.provider-card { display: flex; flex-direction: column; gap: 14px; }
.provider-info { grid-template-columns: 96px 1fr; align-items: center; }
.provider-info .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.input.readonly { height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; font-size: 12.5px; }
.provider-check { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.stage-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.chain-routing { display: grid; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }
.chain-routing .data td, .chain-routing .data th { padding: 6px 10px; }
.select-like { position: relative; }
dl.info.default-chain { grid-template-columns: auto 1fr; column-gap: 24px; row-gap: 8px; margin-top: 0; }
dl.info.default-chain dd { font-weight: 500; }
.chain-foot { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.voices-body { padding: 6px 22px 12px; }
/* Erreur du contrôle des fournisseurs : une ligne, le texte complet en infobulle. */

details.row-menu { position: relative; display: inline-block; }
details.row-menu > summary { list-style: none; cursor: pointer; }
details.row-menu > summary::-webkit-details-marker { display: none; }
details.row-menu .menu-card { top: 40px; right: 0; width: 240px; text-align: left; }
/* Bouton et menu d'une ligne, côte à côte et de même hauteur que le menu */
.row-actions { display: inline-flex; align-items: center; gap: 6px; }
.row-actions > .btn.sm { height: 34px; }
.menu-item.danger { color: var(--err); }

.audit-tools .right { margin-left: auto; }
.icon-plain { border: 0; background: transparent; color: var(--mute); cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.icon-plain[aria-expanded="true"] svg { transform: rotate(90deg); }
.icon-plain:focus-visible { outline: 2px solid var(--blue); }
.audit-more td { background: var(--sky); }
.diff-card { background: var(--surface); border: 1px solid var(--blue-3); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; overflow-wrap: anywhere; }
.diff-card code.del { background: var(--err-bg); color: var(--err); border-radius: 4px; padding: 1px 6px; }
.diff-card code.add { background: var(--ok-bg); color: var(--ok); border-radius: 4px; padding: 1px 6px; }
.pager-out .right { margin-left: auto; }
/* ---------- Reporting (E22) ---------- */
.report { display: flex; flex-direction: column; gap: 16px; }
.report-form { display: flex; flex-direction: column; gap: 14px; }
.tool { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.range { height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.range input.bare:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.range input[type=date] { font: inherit; color: var(--ink); }
.filter select:disabled { color: var(--ink); opacity: 1; cursor: default; }
.report .tabs { margin-top: 2px; }
.tabs a svg.lock { width: 13px; height: 13px; margin-left: -2px; color: var(--mute); }
.adm { margin-left: auto; padding: 12px 0; font-size: 12.5px; color: var(--mute); display: flex; align-items: center; gap: 6px; }
.kpi em b { color: var(--ink); font-weight: 600; }
.kpi-trend { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.kpi-trend svg { flex: none; margin-bottom: 4px; }
.spark { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--blue-fill); }
.lg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--slate); }
.lg .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw.s0 { background: var(--blue-fill); } .sw.s1 { background: var(--blue-2); } .sw.we { background: var(--surface-weekend); border: 1px solid var(--line); }
.chart { margin-top: 8px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .ax { fill: var(--slate); font-size: 11px; }
.chart .axm { fill: var(--mute); font-size: 10.5px; }
.chart .val { fill: var(--slate); font-size: 10.5px; font-weight: 600; }
.chart .val.small { font-size: 9.5px; }
.chart .val.v0 { fill: var(--blue); }  /* texte : bleu de texte, pas d'aplat */
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .we { fill: var(--bg); }
.chart .hit { fill: transparent; }
.chart g:hover .hit { fill: color-mix(in srgb, var(--ring) 5%, transparent); }
.chart .s0 { fill: var(--blue-fill); } .chart .s1 { fill: var(--blue-2); }
/* Appels par heure : toutes les heures en gris, la pointe en bleu (pas les couleurs entrants / sortants) */
.chart .hr-all { fill: var(--series-mute); } .chart .hr-peak { fill: var(--blue-fill); }
.chart .line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.l0 { stroke: var(--blue); stroke-width: 2.4; } .chart .line.l1 { stroke: var(--blue-2); }
.chart .dot.l0 { fill: var(--blue-fill); } .chart .dot.l1 { fill: var(--blue-2); }
/* Délai par étape, par jour : quatre courbes aux couleurs de la charte, distinguées aussi par le trait. */
.stage-days .chart .line { stroke-width: 2.2; fill: none; }
.line.st0 { stroke: var(--blue); }
.line.st1 { stroke: var(--series-strong); stroke-dasharray: 7 4; }
.line.st2 { stroke: var(--slate); stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 2.6; }
.line.st3 { stroke: var(--blue-2); }
.line.st4 { stroke: var(--series-strong); stroke-dasharray: 10 3 2 3; }  /* 5e série : style de trait, pas de teinte */
.dot.st0 { fill: var(--blue-fill); } .dot.st1 { fill: var(--series-strong); } .dot.st2 { fill: var(--slate); } .dot.st3 { fill: var(--blue-2); } .dot.st4 { fill: var(--series-strong); }
.stage-days .chart .dot { stroke: var(--surface); stroke-width: 2; }
svg.lg-line { display: inline-block; vertical-align: middle; margin-right: 6px; overflow: visible; }
svg.lg-line line { fill: none; stroke-width: 2.2; }
.chart .col .xh { stroke: var(--slate); stroke-width: 1; opacity: 0; }
.chart .col:hover .xh, .chart .col:focus .xh { opacity: .5; }
.chart .col:focus-visible .hit { fill: var(--sky); }
.report-split { grid-template-columns: 1.1fr 1fr; }
.report-tech { grid-template-columns: 1.25fr 1fr; }
.report-costs { grid-template-columns: 1.9fr 1fr; }
.report .panel h2 { display: flex; align-items: baseline; gap: 10px; }
.report .panel h2 .right { margin-left: auto; }
.hb { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.hr { display: grid; grid-template-columns: 150px 1fr 118px; gap: 12px; align-items: center; font-size: 13px; }
.hr.wide { grid-template-columns: 200px 1fr 108px; }
.hr.narrow { grid-template-columns: 120px 1fr 80px; }
.hr .nm { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }  /* nom entier, sur deux lignes au besoin */
.hr .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hr .v span { color: var(--mute); font-weight: 500; margin-left: 6px; }
.trk { display: block; clip-path: inset(0 round 999px); }  /* barre en pilule : aucune écharde aux bouts */
.trk-bg { fill: var(--bg); }
.trk-fill { fill: var(--blue-fill); } .trk-fill.muted { fill: var(--series-mute); }
.cap { margin-top: 14px; font-size: 12.5px; color: var(--mute); line-height: 1.5; }
.ostack { display: block; margin-top: 16px; }
.o-resolved { fill: var(--blue-fill); background: var(--blue-fill); }
.o-transferred { fill: var(--blue-3); background: var(--blue-3); }
.o-unanswered { fill: var(--series-mute); background: var(--series-mute); }
.o-early { fill: var(--toggle-off); background: var(--toggle-off); }
.o-errors { fill: var(--line); background: var(--line); border: 1px solid var(--line); }
.legend4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 10px; margin-top: 14px; }
.legend4.cols-5 { grid-template-columns: repeat(5, 1fr); } .legend4.cols-3 { grid-template-columns: repeat(3, 1fr); }
.legend4 div { font-size: 12.5px; color: var(--slate); }
.legend4 b { display: block; font-size: 17px; color: var(--ink); }
/* Issues par sens d'appel, sous la barre de tous les appels. */
.osplit { display: grid; gap: 18px; }
.osplit-row { display: grid; grid-template-columns: 160px 1fr; column-gap: 16px; align-items: start; }
.osplit-row .nm { font-weight: 600; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.osplit-row .nm .mute { font-weight: 500; font-size: 12.5px; color: var(--slate); }
.osplit-row .ostack { margin-top: 4px; }
.osplit-row > .iss, .osplit-row > .cap { grid-column: 2; }
.osplit-row > .cap { margin: 0; }
.legend4 b span { font-size: 12.5px; font-weight: 500; }
.legend4 i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.stages { gap: 14px; margin-top: 16px; }
.stages .step2 { grid-template-columns: 110px 1fr 110px; }
.stages .ms .small { font-weight: 500; }
.data td.r, .data th.r { text-align: right; }
.row.between { justify-content: space-between; }
b.big { font-size: 20px; }
.prices-note { margin: 6px 22px 18px; }
.dash { display: flex; flex-direction: column; gap: 16px; }
.refresh-form .filter { height: 40px; }
.stage-picks { border: 0; }
.stage-picks legend { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.stage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.stage-pick { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; } .stage-pick input { accent-color: var(--blue-fill); }
.stage-pick.locked { color: var(--slate); cursor: default; }
.kb-picks { border: 0; display: flex; flex-direction: column; gap: 8px; }
.kb-picks legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.kb-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.kb-pick input { accent-color: var(--blue-fill); }
.kb-pick:has(input:checked) { border-color: var(--blue-3); background: var(--sky); }
/* ---------- Console de test (E11) ---------- */
.console { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.console .chat { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.console .chat .ch { padding: 16px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.console .chat .ch .right { margin-left: auto; }
.msgs { min-height: 420px; max-height: calc(100vh - 330px); overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-hover); }
.cs-m { max-width: 74%; padding: 11px 15px; border-radius: 14px; line-height: 1.5; font-size: 14px; white-space: pre-line; }
.cs-m small { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 3px; opacity: .9; }
.cs-m.u { align-self: flex-end; background: var(--blue-fill); color: var(--on-fill); border-bottom-right-radius: 4px; }
.cs-m.a { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cs-m.a small { color: var(--blue); opacity: 1; }
.cs-m.canned { border-style: dashed; }
.cs-tool { align-self: flex-start; width: 78%; border: 1px solid var(--blue-3); background: var(--sky); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--note-text); line-height: 1.5; display: flex; gap: 10px; }
.cs-tool svg { margin-top: 2px; flex: none; }
.cs-tool b { font-weight: 700; }
.cs-tool .q { color: var(--slate); }
.cs-tool.tr { background: var(--surface); border-color: var(--blue-2); }
.cs-evt { align-self: center; font-size: 12.5px; color: var(--slate); background: var(--surface-event); padding: 5px 14px; border-radius: 99px; text-align: center; }
.composer { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; background: var(--surface); }
.composer .input { flex: 1; }
.side-set { display: flex; flex-direction: column; gap: 16px; }
.cs-mem { background: var(--bg); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--slate); }
.cs-mem b { color: var(--ink); font-weight: 600; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
/* ---------- Campagnes (E5, E6, E7) ---------- */
.oc-0 { fill: var(--blue-fill); background: var(--blue-fill); }
.oc-1 { fill: var(--blue-2); background: var(--blue-2); }
.oc-2 { fill: var(--blue-3); background: var(--blue-3); }
.oc-3 { fill: var(--series-strong); background: var(--series-strong); }
.oc-4 { fill: var(--series-5); background: var(--series-5); }
.oc-5 { fill: var(--series-6); background: var(--series-6); }
.oc-6 { fill: var(--series-7); background: var(--series-7); }
.oc-7 { fill: var(--series-8); background: var(--series-8); }
.oc-failed { fill: var(--series-mute); background: var(--series-mute); }
.oc-none { fill: var(--series-none); background: var(--series-none); }
.tag.outcome { background: var(--sky); color: var(--blue); }
.tag.oc-0-tag { background: var(--ok-bg); color: var(--ok); }
.tag.oc-1-tag { background: var(--err-bg); color: var(--err); }
.tag.oc-2-tag { background: var(--warn-bg); color: var(--warn); }
.dot.live { background: var(--blue-fill); }
table.data.campaigns td { padding-top: 18px; padding-bottom: 18px; vertical-align: top; }
.cname { font-weight: 700; font-size: 14.5px; display: inline-block; max-width: 220px; white-space: normal; }
.csub { color: var(--mute); font-size: 12.5px; margin-top: 3px; }
.ckind { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--slate); }
.prog { width: 180px; }
.prog .t { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; line-height: 18px; color: var(--slate); margin-bottom: 6px; }
.prog .t b { color: var(--ink); }
.issue-col { width: 260px; white-space: normal; }
/* Liste des campagnes : barre des issues à la hauteur de la barre de progression (ligne de texte de 18 px + 6 px au-dessus de chacune). */
td.issue-col .ostack { margin-top: 0; }
table.campaigns td.prog-col, table.campaigns td.issue-col { vertical-align: top; }
table.campaigns td.issue-col .ostack { margin-top: 24px; }
.iss { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--slate); margin-top: 8px; }
.iss i, .legend2 i, .kpi .d { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.iss b { color: var(--ink); }
.meta { display: flex; gap: 22px; flex-wrap: wrap; color: var(--slate); font-size: 13px; }
.meta span { display: inline-flex; align-items: center; gap: 7px; }
.actions { gap: 10px; }
.actions .right { margin-left: auto; }
.kpis.cols-3 { grid-template-columns: repeat(3, 1fr); } .kpis.cols-4 { grid-template-columns: repeat(4, 1fr); }
.kpis.cols-5 { grid-template-columns: repeat(5, 1fr); } .kpis.cols-6 { grid-template-columns: repeat(6, 1fr); }
.frise { display: block; margin-top: 8px; overflow: visible; }
.frise .band { fill: var(--sky); stroke: var(--blue-3); }
.frise .band-label { fill: var(--blue); font-size: 12px; font-weight: 600; }
.frise .gl { stroke: var(--line); }
.frise .axm { fill: var(--mute); font-size: 12px; }
.frise .now { stroke: var(--strong); stroke-width: 2; }
.frise .now-label { fill: var(--strong); font-size: 12px; font-weight: 700; }
.legend2 { display: flex; gap: 20px; font-size: 12.5px; color: var(--slate); flex-wrap: wrap; align-items: center; margin-top: 6px; }
.legend2 .band-sw { background: var(--sky); border: 1px solid var(--blue-3); width: 10px; height: 10px; }
.cn { font-weight: 600; }
.sub2 { color: var(--mute); font-size: 12.5px; }
.said { color: var(--slate); font-size: 13px; line-height: 1.45; max-width: 400px; white-space: normal; }
.contacts-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.drop-label { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.drop-label svg { width: 26px; height: 26px; color: var(--blue); }
.filecard { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-align: left; }
.filecard b { color: var(--ink); }
.filecard .right { margin-left: auto; }
.filecard label.btn { cursor: pointer; }
.fileic { width: 40px; height: 40px; border-radius: 10px; background: var(--sky); color: var(--blue); display: grid; place-items: center; flex: none; }
.map td { padding-top: 9px; padding-bottom: 9px; }
.map .arrow { color: var(--mute); width: 30px; padding-left: 0; padding-right: 0; }
.map-select { width: 280px; min-height: 36px; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.res { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.res .n { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; width: 58px; flex: none; line-height: 1.1; }
.res .d { font-size: 13px; color: var(--slate); line-height: 1.5; }
.res .d b { color: var(--ink); display: block; font-size: 14px; margin-bottom: 2px; }
.ok-text { color: var(--ok); } .err-text { color: var(--err); } .warn-text { color: var(--warn); }
.recap div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.recap span { color: var(--slate); } .recap b { font-weight: 600; text-align: right; }
.btn.full { width: 100%; justify-content: center; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.win-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.win-row .days { display: flex; gap: 6px; }
.chip.day { height: 30px; padding: 0 10px; cursor: pointer; }
.chip:has(input:checked) { border-color: var(--blue); background: var(--sky); color: var(--blue); }
.outcome-row { display: flex; align-items: center; gap: 12px; }
.outcome-row .input { flex: 1; max-width: 420px; }
a.step { text-decoration: none; }
a.step:hover { color: var(--blue); }
.foot .right, .foot form.right { margin-left: auto; }
.win-row .input.short { width: 140px; }
.mm { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 18px; border: 1px solid var(--line); border-radius: 10px; }
.mm div { padding: 10px 14px; border-left: 1px solid var(--line); font-size: 12.5px; color: var(--slate); }
.mm div:first-child { border-left: 0; }
.mm strong { display: block; font-size: 20px; color: var(--ink); letter-spacing: -.02em; margin-top: 2px; }
.slots-layout { display: grid; grid-template-columns: 1fr 270px; gap: 28px; margin-top: 16px; align-items: start; }
table.heat { width: 100%; border-collapse: separate; border-spacing: 4px; }
table.heat th { font-size: 12.5px; color: var(--slate); font-weight: 600; text-align: center; white-space: nowrap; }
table.heat tbody th { text-align: left; }
table.heat .cell { height: 38px; border-radius: 6px; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.heat-none { background: var(--bg); color: var(--mute); }
.heat-0 { background: var(--sky); color: var(--ink); } .heat-1 { background: var(--heat-1); color: var(--ink); }
.heat-2 { background: var(--heat-2); color: var(--ink); } .heat-3 { background: var(--heat-3); color: var(--on-fill); }
.heat-4 { background: var(--blue-fill); color: var(--on-fill); }
.heat-legend { justify-content: flex-end; gap: 8px; margin-top: 12px; }
.heat-scale { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--sky), var(--blue-fill)); }
.slots-note { flex-direction: column; gap: 6px; }
dialog.modal { text-align: left; }
.modal-head { display: flex; align-items: center; gap: 12px; }
.modal-head h2 { margin: 0; }
.modal-head .icon-btn { margin-left: auto; align-self: flex-start; }
/* Fenêtre au contenu long : l'en-tête reste en place, seul le corps défile, barre fine décollée du bord arrondi. */
dialog.modal.scrolling[open] { display: flex; flex-direction: column; overflow: hidden; padding-right: 10px; }
dialog.modal.scrolling .modal-head { padding-right: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
dialog.modal.scrolling .modal-body { overflow-y: auto; min-height: 0; padding: 14px 16px 2px 0; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
dialog.modal.scrolling .modal-body:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.modal-head .avatar svg { width: 16px; height: 16px; }
.role-cards { display: flex; flex-direction: column; gap: 8px; }
.role-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.role-card:hover { border-color: var(--blue-3); }
.role-card:has(input:checked) { border-color: var(--blue); background: var(--sky); box-shadow: inset 0 0 0 1px var(--blue); }
.role-card:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); }
.role-card:has(input:checked) .hint { color: var(--slate); }
/* Langue et thème : même largeur fixe, dans la même colonne, partagée à parts égales entre
   leurs boutons, quel que soit le libellé (« Langue », « Language », « Taal »). */
.menu-lang { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; width: 100%; gap: 10px; }
details.user-menu .menu-card { width: 290px; }
.menu-lang .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 190px; }
.menu-lang .seg button { border: 0; background: transparent; font: inherit; padding: 4px 6px; border-radius: 7px; font-weight: 600; font-size: 12.5px; color: var(--slate); cursor: pointer; text-align: center; white-space: nowrap; }
.menu-lang .seg button.on { background: var(--sky); color: var(--blue); }
.user-edit .grid2 > *, .modal .grid2 > * { min-width: 0; }
.modal select.bare { width: 100%; min-width: 0; text-overflow: ellipsis; }
.wf-main { min-width: 0; }
.wf-main .mono-small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }

/* ---------- Consultation sur téléphone (écrans marqués « mobile ») ---------- */
.menu-toggle { display: none; }
@media (max-width: 900px) {
  body.mobile { min-width: 0; flex-direction: column; padding-left: 0; }
  body.mobile aside.side { width: auto; height: auto; position: static; align-self: stretch; padding: 12px 16px; }
  body.mobile .brand { padding: 0; font-size: 18px; width: 100%; }
  body.mobile .menu-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; background: transparent; border: 1px solid color-mix(in srgb, var(--on-fill) 25%, transparent); color: var(--on-fill); border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
  body.mobile aside.side nav, body.mobile aside.side #sip, body.mobile aside.side .sip { display: none; }
  body.mobile aside.side.open nav { display: block; margin-top: 10px; }
  body.mobile main { padding: 0 16px 24px; }
  body.mobile header.top { height: auto; min-height: 64px; flex-wrap: wrap; padding: 12px 0; gap: 8px 12px; }
  body.mobile header.top h1 { font-size: 20px; }
  body.mobile header.top .header-search { position: static; transform: none; order: 3; width: 100%; }
  body.mobile .layout, body.mobile .grid2, body.mobile .grid3, body.mobile .analyses-top { grid-template-columns: minmax(0, 1fr); }  /* bornée à l'écran, pas au contenu le plus large */
  body.mobile .grid4.slowest { grid-template-columns: minmax(0, 1fr); }
  body.mobile .kpis { grid-template-columns: 1fr 1fr; }
  body.mobile .live-grid, body.mobile .dash-legend { grid-template-columns: 1fr; }
  body.mobile .osplit-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  body.mobile .osplit-row > .iss, body.mobile .osplit-row > .cap { grid-column: 1; }
  body.mobile table.data { width: 100%; }
  body.mobile table.data td, body.mobile table.data th, body.mobile table.data .tag { white-space: normal; }
  body.mobile table.data td, body.mobile table.data th { padding-left: 8px; padding-right: 8px; }
  body.mobile table.data td.num, body.mobile table.data .num { white-space: nowrap; }  /* numéro, durée : d'un seul tenant */
  body.mobile svg.senti { width: 64px; }
  body.mobile .msg { max-width: 92%; }
  body.mobile .field-search { min-width: 0; width: 100%; }
  body.mobile .row.between { flex-wrap: wrap; gap: 8px; }
  /* Colonnes secondaires masquées : l'essentiel (qui, quand, issue) tient dans l'écran */
  body.mobile .m-hide { display: none; }
  body.mobile nav.tabs { overflow-x: auto; flex-wrap: nowrap; gap: 20px; scrollbar-width: none; }
  body.mobile nav.tabs a { white-space: nowrap; flex: none; }
  body.mobile .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  body.mobile .seg a, body.mobile .seg b { white-space: nowrap; flex: none; }
  body.mobile .ph { flex-wrap: wrap; gap: 8px; }
  body.mobile .wf { grid-template-columns: 1fr; }
  body.mobile .weeks { gap: 8px; padding: 0; }
  body.mobile .wk { min-width: 0; }
  body.mobile td.q-acts { white-space: normal; }
  body.mobile td.q-acts > * { margin: 4px 0 0 6px; }
  body.mobile .kpis > .kpi { min-width: 0; padding: 14px 16px; }
  body.mobile .kpi-trend { flex-wrap: wrap; }
  body.mobile .kpi-trend svg { max-width: 100%; }
  body.mobile .hr, body.mobile .hr.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 80px) auto; }
  body.mobile .slots-layout { grid-template-columns: minmax(0, 1fr); }
  body.mobile .prog { width: auto; min-width: 110px; }
}

/* ---------- Dispatching (E23) ---------- */
.dispatch { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.dispatch-canvas { padding: 18px 22px 24px; overflow-x: auto; }
.dispatch-cols, .dispatch-flow { min-width: 560px; }
.dispatch-cols { position: relative; height: 34px; color: var(--mute); font-size: 12.5px; font-weight: 600; }
.dispatch-cols > span { position: absolute; top: 0; display: flex; align-items: center; gap: 8px; }
/* Début de la colonne des destinations, en % de la largeur de référence (layout.py : 300 sur 736). */
.dispatch-cols .c1 { left: 0; } .dispatch-cols .c2 { left: 40.76%; }
.btn.xs { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; color: var(--blue); }
.dispatch-flow { position: relative; }
.dispatch-links { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.dispatch-links path { fill: none; stroke: var(--link-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dispatch-links path.on { stroke: var(--blue); stroke-width: 2.2; }
.node { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 4%, transparent); overflow: hidden; }
.node:hover { border-color: var(--blue-2); }
.node:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.node b { font-size: 13.5px; }
.node.hl { border-color: var(--blue-2); }
.node.sel { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 12%, transparent); }
.node.agent.sel { background: var(--sky); }
.node.agent { background: var(--surface-soft); }
.node.agent.off { opacity: .6; }
.node.agent .ext { display: flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 700; font-size: 12.5px; min-width: 0; }
.node.agent .ext .dot { margin: 0; flex: none; }
.node .fb .ell { min-width: 0; }
.node .fb { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--slate); border-top: 1px dashed var(--line); padding-top: 7px; line-height: 1.35; }
.node .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node.dest { padding: 12px 14px; gap: 6px; }
.node.dest .dhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.node.dest .dhead .right { margin-left: auto; white-space: nowrap; }
.node.dest .hours { display: flex; align-items: center; gap: 6px; min-width: 0; }
.node.dest .svcs { display: block; border-top: 1px solid var(--line); margin-top: 4px; }
.node.dest .svc { display: flex; flex-direction: column; justify-content: center; height: 40px; border-bottom: 1px dashed var(--line); line-height: 1.3; min-width: 0; }
.node.dest .svc:last-child { border-bottom: 0; }
.node.dest .svc b { font-size: 13px; font-weight: 600; }
.node.dest .svc.empty-line { color: var(--mute); font-size: 12.5px; }
.node.dest.sel .dhead b { color: var(--blue); }
.row.tight { gap: 6px; } .row.wrap { flex-wrap: wrap; }
.tag.sm { font-size: 11px; padding: 2px 8px; }
.tag .dot { width: 6px; height: 6px; margin: 0; }
.dispatch-drawer { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.dispatch-drawer h3 { margin: 0; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.drawer-head h2 { margin-top: 2px; }
.drawer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.drawer-foot .danger { margin-right: auto; color: var(--err); border-color: var(--border-danger); cursor: pointer; }
.drawer-foot .danger:disabled { opacity: .4; cursor: not-allowed; }
.tight-stack { gap: 12px; }
/* Libellés, champs et erreurs sur trois rangées communes (sous-grille) : un libellé plus long dans
   une langue (« Toestel of wachtrij ») ne décale pas son champ par rapport à l'autre. */
.dest-grid { display: grid; grid-template-columns: minmax(0, 1fr) 110px; grid-template-rows: auto auto auto; gap: 6px 14px; }
.dest-grid > .field { min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
.dest-grid > .field > label { align-self: end; }
.dest-grid > .field > * { min-width: 0; }  /* le menu de l'agent reste dans sa colonne */
.dest-grid select.bare { width: 100%; }
.dest-grid input.bare { width: 100%; min-width: 0; }
.field .label { font-weight: 600; font-size: 13px; }
.used { display: flex; gap: 6px; flex-wrap: wrap; }
.used .tag { text-decoration: none; }
.used .tag:hover { color: var(--blue); }
.svc-edit { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.svc-edit .area { grid-column: 1 / -1; }
.svc-edit .area textarea { min-height: 40px; font-size: 13px; }
.svc-edit .icon-btn { cursor: pointer; }
.svc-edit .field-error { grid-column: 1 / -1; }
.btn.add { align-self: flex-start; color: var(--blue); }
.pick { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick input { margin-top: 3px; }
.block { display: block; }
dl.info.counts { grid-template-columns: 1fr auto; column-gap: 12px; }
dl.info.counts dd { text-align: right; }
.dispatch-legend { display: flex; align-items: center; gap: 18px; color: var(--slate); font-size: 12.5px; }
.dispatch-legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--blue); vertical-align: middle; margin-right: 6px; }
.dispatch-legend i.off { border-top: 1.5px solid var(--link-line); }
.dispatch-legend .right { margin-left: auto; }
.dispatch > .office-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 22px; }
.office-strip > svg { color: var(--blue); }
.office-strip.closed { border-color: var(--border-closed); background: var(--closed-bg); }
.office-strip.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 12%, transparent); border-color: var(--blue); }
.office-strip .right { margin-left: auto; }
.office-strip form { margin: 0; }
.hours-modes { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; row-gap: 8px; }
.hours-modes > .label, .hours-modes > .own-days, .hours-modes > .ignore, .hours-modes > .hint, .hours-modes > .field-error { grid-column: 1 / -1; }
.hours-modes > input[type="radio"] { margin-top: 3px; }
.hours-modes > label { cursor: pointer; }
.hours-modes > .own-days { display: none; }
#mode-own:checked ~ .own-days { display: flex; }
.week { display: flex; flex-direction: column; gap: 6px; }
.day-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.closing { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; row-gap: 8px; }
.closing > .label, .closing > .closed-fields { grid-column: 1 / -1; }
.closing > label { cursor: pointer; }
.closed-fields { display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
.closed-fields > .hint { grid-column: 1 / -1; }
#closed:checked ~ .closed-fields { display: grid; }
.closure-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 6px 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.closure-edit > .input { grid-column: 1 / 3; }
.closure-edit > label { display: flex; flex-direction: column; gap: 4px; color: var(--slate); }
.closure-edit > .field-error { grid-column: 1 / -1; }
.closure-edit .icon-btn { cursor: pointer; }
.closure-voice { align-self: end; }
.closure-voice.prebuilt { color: var(--mute); }
.closure-voice.custom { color: var(--blue); background: var(--sky); }
.closure-voice:disabled { cursor: not-allowed; opacity: .5; }
.tag.agent { background: var(--relay-bg); color: var(--relay-text); }
.kinds { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; row-gap: 8px; }
.kinds > .label, .kinds > .dest-grid, .kinds > .note, .kinds > .field-error { grid-column: 1 / -1; }
.kinds > input[type="radio"] { margin-top: 3px; }
.kinds > label { cursor: pointer; }
.kinds .for-agent { display: none; }
#kind-agent:checked ~ .dest-grid .for-agent { display: grid; }  /* sous-grille, comme le nom */
#kind-agent:checked ~ .note.for-agent { display: flex; }
#kind-agent:checked ~ .dest-grid .for-pbx { display: none; }
.evt.relay { background: var(--relay-bg); color: var(--relay-text); }
.msg.misty.relayed .bub { background: var(--relay-bubble); }
form:has(#kind-agent:checked) .hours-modes { display: none; }
/* Infobulles Misty (misty.js, [data-tip]) */
.tip { position: absolute; z-index: 50; width: max-content; max-width: 280px; background: var(--navy); color: var(--on-fill); font-size: 12.5px; font-weight: 600; line-height: 1.4; padding: 7px 11px; border-radius: 8px; box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 22%, transparent); pointer-events: none; }
.tip::after { content: ''; position: absolute; left: var(--arrow, 50%); bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--navy); transform: rotate(45deg); border-radius: 2px; }
.tip.below::after { bottom: auto; top: -5px; }
[data-tip] { cursor: default; }
[data-tip]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Rapports planifiés (E22e) : liste et modale large */
table.data.schedules td { vertical-align: top; padding-top: 13px; padding-bottom: 13px; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: var(--surface-hover); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
button.link.strong { font-weight: 700; }
button.link:hover, button.link:focus-visible { color: var(--blue); }
.schedules-note { margin: 14px 22px 20px; }
.bottom-gap { margin-bottom: 16px; }
dialog.modal.wide { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.modal-head .head-switch { margin-left: auto; align-items: center; gap: 10px; cursor: pointer; }
.modal-head .head-switch + .icon-btn { margin-left: 4px; }
.mcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.mcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.freq { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.freq:has(input[type="radio"]:checked) { border-color: var(--blue); background: var(--surface-picked); }
.freq-title { display: flex; align-items: center; gap: 10px; }
.freq .ctl, .freq > .hint { padding-left: 26px; }
.ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.freq:not(:has(input[type="radio"]:checked)) .ctl, .freq:not(:has(input[type="radio"]:checked)) .ctl select { color: var(--mute); }
.ctl .lbl { color: var(--slate); font-size: 13px; }
.modal .ctl select.bare { width: auto; }  /* listes d'heure et de jour sur une ligne */
.icon-btn.danger { color: var(--err); border-color: var(--border-danger); }
.input.report-pick { min-height: 34px; padding: 5px 10px; font-size: 13px; min-width: 84px; }
.input.report-pick.wide { min-width: 130px; }
.input.report-pick.xwide { min-width: 168px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ck { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; cursor: pointer; }
.ck input { margin-top: 2px; flex: none; }
.ck .hint { font-size: 12px; }
.modal-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; flex-wrap: wrap; }
.modal-foot .spacer { flex: 1; }
@media (max-width: 860px) { .mcols, .checks { grid-template-columns: 1fr; } }
/* Onglet Analyses (E22g) : ressenti en trois couleurs (positif, neutre, négatif) */
.s-positive { fill: var(--blue-fill); background: var(--blue-fill); }
.s-neutral { fill: var(--toggle-off); background: var(--toggle-off); }
.s-negative { fill: var(--series-negative); background: var(--series-negative); }
.s-none { fill: var(--bg); }
.analyses-top { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
table.data.themes td, table.data.questions td { vertical-align: middle; }
table.data.themes td.trk-cell { width: 26%; }
table.data.themes td:first-child { min-width: 200px; }
table.data td.rising { color: var(--rising); font-weight: 700; }
svg.senti { display: block; }
.weeks { display: flex; gap: 14px; align-items: flex-end; margin-top: 18px; padding: 0 6px; overflow-x: auto; }
.wk { flex: 1; min-width: 34px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--slate); white-space: nowrap; }
.wk b { font-size: 12px; color: var(--rising); }
.wk svg.stack { display: block; }
.analyses-top .lg { margin: 14px 0 0; flex-wrap: wrap; }
.analyses-top .lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.analyses-top .lg b { color: var(--ink); }
.cap.pad { margin: 6px 22px 18px; }
td.q-acts { white-space: nowrap; text-align: right; }
td.q-acts > * + * { margin-left: 6px; }
details.q-calls summary { cursor: pointer; color: var(--blue); font-size: 12.5px; font-weight: 600; margin-top: 4px; }
details.q-calls ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.rev { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.panel h2 + .rev { border-top: 0; }
.rev-who { display: flex; flex-direction: column; gap: 3px; }
.rev-why { display: flex; flex-wrap: wrap; gap: 6px; }
.rev-why p { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.row.backfill { align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .analyses-top { grid-template-columns: 1fr; } .rev { grid-template-columns: 1fr; } }
/* Pages d'accès sur téléphone : le bandeau se réduit au logo et au titre, la carte prend la largeur */
@media (max-width: 900px) {
  body.auth { min-width: 0; flex-direction: column; }
  .hero { width: auto; min-height: 0; padding: 20px 20px 22px; }
  .hero .brand { font-size: 22px; }
  .hero .brand svg { width: 34px; height: 34px; }
  .hero .bg, .hero p, .hero .foot { display: none; }
  .hero h2 { margin-top: 14px; font-size: 20px; max-width: none; }
  .pane { padding: 16px 16px 24px; }
  .card { width: 100%; max-width: 420px; margin: 20px auto 0; padding: 0 0 28px; }
  .pane .legal { margin-top: auto; padding-top: 16px; }
  .card h1 { font-size: 24px; }
  .card .lead { margin-bottom: 24px; }
  .card .input input { font-size: 16px; }  /* pas de zoom automatique à la saisie (iOS) */
}
/* Textes prédéfinis : sommaire des familles de textes du modèle */
.text-index { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; background: var(--bg); border-radius: 10px; font-size: 13px; }
h3.text-group { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; scroll-margin-top: 16px; }
.stack > h3.text-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* Script d'une campagne (vue de la campagne) : retours à la ligne du texte saisi gardés */
.script-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; max-width: 90ch; }
/* Assistant de campagne : choix d'un modèle, au-dessus de l'étape 1 */
.template-pick { align-items: flex-end; gap: 12px; }
.template-pick .grow { flex: 1; min-width: 220px; }
.template-rename { display: flex; gap: 8px; align-items: flex-end; }

/* Manuel de l'API */
.api-guide { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.api-guide p { max-width: 90ch; line-height: 1.55; }
dl.info.api-access { grid-template-columns: 150px 1fr; }
dl.info.api-access dd { font-weight: 400; line-height: 1.5; }
.api-guide code { overflow-wrap: anywhere; }
.api-pre { background: var(--bg); border-radius: 8px; padding: 12px 14px; margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.api-list { margin: 0; padding-left: 20px; line-height: 1.55; max-width: 90ch; }
.api-list li + li { margin-top: 6px; }
@media (max-width: 700px) { dl.info.api-access { grid-template-columns: 1fr; row-gap: 4px; } dl.info.api-access dd { margin-bottom: 8px; } }

/* Appels les plus lents, étape par étape (onglet Technique). */
.slowest h3 { display: flex; align-items: center; gap: 2px; font-size: 13.5px; margin: 0 0 8px; }
.slowest ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.slowest li a { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.slowest li a:hover, .slowest li a:focus-visible { background: var(--sky); }
.slowest .slow-ms { grid-row: span 2; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 58px; }
.slowest .slow-when { font-size: 13px; }
.slowest .muted { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .grid4.slowest { grid-template-columns: 1fr 1fr; } }
.step2.slow .track > div { background: var(--warn); }
.step2.slow .ms { color: var(--warn); font-weight: 700; }
/* Onglet Sécurité : conditions du second facteur par e-mail (2026-11-07) */
.mfa-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mfa-checks li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.mfa-checks .i.ok { color: var(--ok); }
.mfa-checks .i.err { color: var(--err); }
/* Catalogue des outils dans la configuration d'un agent (2026-11-07) */
.tool-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 860px) { .tool-picks { grid-template-columns: 1fr; } }

/* Actions personnalisées (Boîte à outils, lot C) : champs selon la sorte d'action. */
.action-kinds { border: 0; padding: 0; margin: 0; min-width: 0; }
.action-form:not(:has(#act-kind-dtmf:checked)) .for-dtmf { display: none; }
.action-form:not(:has(#act-kind-office_close:checked)) .for-close { display: none; }
.action-form:has(#act-kind-dtmf:checked) .for-office { display: none; }
/* Modale d'une action personnalisée (Boîte à outils) : corps qui défile, pied fixe */
dialog.action-dialog > .action-form { display: flex; flex-direction: column; min-height: 0; gap: 14px; }
.action-dialog .agroup { display: flex; flex-direction: column; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.action-dialog .agroup:first-of-type { border-top: 0; padding-top: 0; }
.action-dialog .agroup > h3 { margin: 0; }
.action-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kind-tile { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.kind-tile input { margin-top: 3px; }
.kind-tile:has(input:checked) { border-color: var(--blue); background: var(--surface-picked); }
.action-form:has(#act-kind-office_open:checked) .agroup:first-of-type > .mcols { display: none; }
@media (max-width: 860px) { .action-kinds { grid-template-columns: 1fr; } }

.action-dialog .mcols > .for-close { grid-column: 1 / -1; }  /* motif de la fermeture : toute la largeur */
.action-form:has(#act-for-all:checked) .act-agents .ck span { color: var(--slate); }  /* actif pour tous : choix par agent gardé, modifiable */