/* Phoning — la fiche bristol au centre, tout le reste en retrait. */
:root {
  --ink: #1b2b3a;
  --ink-2: #4a5a69;
  --ink-3: #7a8896;
  --desk: #dde3e8;
  --desk-2: #cfd7de;
  --card: #ffffff;
  --rule-red: #c8423b;
  --rule-blue: #c9d9e8;
  --line: #d6dde3;
  --go: #17804f;
  --go-2: #126a41;
  --stop: #b9322b;
  --focus: #2a78d6;
  --series-1: #2a78d6;
  --series-2: #eb6834;

  --s-nouveau: #5b6b7a;
  --s-injoignable: #8a6d1d;
  --s-a_rappeler: #2a63b8;
  --s-rdv_pris: #17804f;
  --s-rdv_annule: #a3471b;
  --s-pas_interesse: #7a4b8c;
  --s-hors_cible: #6b6b6b;
  --s-mauvais_numero: #9c2f2f;
  --s-deja_client: #0f6b6b;
  --s-ne_plus_appeler: #3f3f46;

  --ui: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --slab: 'Bitter', Georgia, serif;
  --r: 6px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 16px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------ boutons & champs */
.btn {
  display: inline-flex; align-items: center; gap: .45em;
  border: 1px solid var(--line); background: var(--card);
  padding: .5em .9em; border-radius: var(--r); cursor: pointer;
  font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; color: var(--ink);
}
.btn:hover { border-color: var(--ink-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #2a3f52; }
.btn.go { background: var(--go); border-color: var(--go); color: #fff; }
.btn.go:hover { background: var(--go-2); }
.btn.stop { background: var(--stop); border-color: var(--stop); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: rgba(27,43,58,.06); }
.btn.small { font-size: .85rem; padding: .35em .65em; }
kbd {
  font: 700 .72rem/1 var(--ui); padding: .2em .4em; border-radius: 4px;
  border: 1px solid currentColor; opacity: .75; min-width: 1.5em; text-align: center;
}

label.field { display: grid; gap: .25rem; font-size: .88rem; color: var(--ink-2); }
input:not([type]), input[type=file], input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input[type=datetime-local], input[type=tel], select, textarea {
  width: 100%; padding: .5em .65em; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--ink); font-size: .95rem;
}
textarea { resize: vertical; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.muted { color: var(--ink-3); }
.small { font-size: .85rem; }

/* ------------------------------------------------ connexion */
.login {
  min-height: 100%; display: grid; place-items: center; padding: 24px 16px;
}
.login form {
  width: min(380px, 100%); background: var(--card); padding: 0 28px 28px;
  border-radius: var(--r); box-shadow: 0 1px 0 var(--desk-2), 0 12px 30px rgba(27,43,58,.12);
  display: grid; gap: 14px; border-top: 3px solid var(--rule-red);
}
.login h1 { font: 700 1.6rem/1.2 var(--slab); margin: 22px 0 2px; }
.login .err { color: var(--stop); font-size: .9rem; min-height: 1.2em; margin: 0; }

/* ------------------------------------------------ coque */
.shell { display: grid; grid-template-columns: 210px 1fr; min-height: 100%; }
.nav {
  background: var(--ink); color: #dfe7ee; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh;
}
.nav a.brand { font: 700 1.25rem/1.1 var(--slab); color: #fff; padding: 4px 10px 16px; }
.nav .brand small { display: block; font: 400 .8rem/1.3 var(--ui); color: #9fb1c1; margin-top: 4px; }
.nav a {
  color: #dfe7ee; text-decoration: none; padding: .55em .7em; border-radius: var(--r);
  display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .95rem;
}
.nav a:hover { background: rgba(255,255,255,.07); }
.nav a[aria-current=page] { background: #fff; color: var(--ink); }
.nav a .count { font-size: .78rem; background: var(--rule-red); color: #fff; border-radius: 99px; padding: 0 .5em; }
.nav .spacer { flex: 1; }
.nav .who { font-size: .85rem; color: #9fb1c1; padding: 0 10px 6px; }
.nav .line-status { font-size: .8rem; padding: 6px 10px; color: #9fb1c1; display: flex; gap: 6px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #9fb1c1; display: inline-block; flex: none; }
.dot.ok { background: #46c28b; }
.dot.demo { background: #e0b04a; }
.dot.err { background: #ef6b62; }

main { padding: 20px 24px 40px; min-width: 0; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { font: 700 1.5rem/1.2 var(--slab); margin: 0; }
.panel { background: var(--card); border-radius: var(--r); padding: 16px 18px; box-shadow: 0 1px 0 var(--desk-2); }
.panel + .panel { margin-top: 14px; }
.panel h2 { font: 700 1.05rem/1.3 var(--ui); margin: 0 0 10px; }

/* ------------------------------------------------ session d'appels */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-bottom: 14px;
}
.toolbar label.field { min-width: 150px; }
.toolbar .today { margin-left: auto; display: flex; gap: 18px; color: var(--ink-2); font-size: .9rem; }
.today b { color: var(--ink); font-size: 1.15rem; display: block; line-height: 1.1; }

.session { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }

.queue-line { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: .88rem; color: var(--ink-2); }
.queue-line span { background: rgba(255,255,255,.55); border-radius: 99px; padding: .15em .7em; }
.queue-line span b { color: var(--ink); }

/* La fiche : un bristol ligné, liseré rouge en tête. */
.fiche-stage { perspective: 1200px; }
.fiche {
  background: var(--card); border-radius: 4px; position: relative;
  box-shadow: 0 1px 0 var(--desk-2), 0 18px 40px -18px rgba(27,43,58,.35);
  padding: 0 28px 22px;
}
.fiche::before { content: ''; display: block; height: 3px; background: var(--rule-red); margin: 0 -28px 18px; border-radius: 4px 4px 0 0; }
.fiche.leaving { animation: fiche-out .28s ease-in forwards; }
.fiche.arriving { animation: fiche-in .32s ease-out; }
@keyframes fiche-out { to { transform: translateY(-18px) rotate(-1.2deg); opacity: 0; } }
@keyframes fiche-in { from { transform: translateY(26px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fiche.leaving, .fiche.arriving { animation: none; } }

.fiche-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: .85rem; color: var(--ink-3); }
.fiche h2.company { font: 700 clamp(1.6rem, 2.6vw, 2.15rem)/1.15 var(--slab); margin: 10px 0 4px; letter-spacing: -.01em; }
.fiche .contact { font-size: 1.1rem; margin: 0; }
.fiche .meta { color: var(--ink-2); margin: 2px 0 0; font-size: .95rem; }
.fiche .meta a { color: inherit; }

.dial {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 20px 0 6px; padding: 14px 0; border-top: 1px solid var(--rule-blue); border-bottom: 1px solid var(--rule-blue);
}
.number { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.number .cc { font-size: .9rem; vertical-align: middle; border: 1.5px solid var(--ink); border-radius: 4px; padding: .05em .35em; margin-right: .5em; letter-spacing: 0; }
.dial .call-btn { font-size: 1.1rem; padding: .7em 1.3em; border-radius: 99px; }
.dial .call-state { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.dial .timer { font-variant-numeric: tabular-nums; font-size: 1.3rem; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--go); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
.caller-from { font-size: .85rem; color: var(--ink-3); width: 100%; margin-top: -6px; }
.keypad { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; margin-top: 8px; }
.keypad button { height: 38px; border: 1px solid var(--line); background: #fff; border-radius: 6px; font-weight: 700; cursor: pointer; }

.notes-ruled {
  width: 100%; min-height: 96px; border: none; padding: 6px 2px 0; margin-top: 6px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--rule-blue) 27px, var(--rule-blue) 28px);
  line-height: 28px; font-size: 1rem; resize: vertical; border-radius: 0;
}
.notes-ruled:focus-visible { outline-offset: 4px; }
.prev-notes { white-space: pre-wrap; color: var(--ink-2); font-size: .92rem; margin: 10px 0 0; }

/* Clavier des issues d'appel */
.outcomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 16px; }
.outcome {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left;
  padding: .7em .85em; border-radius: var(--r); border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-weight: 700; font-size: .95rem; border-left: 5px solid var(--c, var(--ink-3));
}
.outcome:hover { background: #f4f7f9; }
.outcome[aria-pressed=true] { background: var(--c); color: #fff; border-color: var(--c); }
.outcome[aria-pressed=true] kbd { color: #fff; }
.after { margin-top: 14px; padding: 14px; background: #f3f6f8; border-radius: var(--r); display: grid; gap: 12px; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.quick button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: .3em .8em; cursor: pointer; font-size: .88rem; }
.quick button[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.validate-row { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

.rec { display: inline-flex; gap: 6px; align-items: center; font-size: .88rem; color: var(--ink-2); }
.rec.on { color: var(--stop); font-weight: 700; }

/* Colonne historique */
.side .panel { padding: 14px 16px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline li { font-size: .9rem; display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--line); }
.timeline li .when { color: var(--ink-3); font-size: .8rem; }
.timeline audio { width: 100%; height: 32px; margin-top: 4px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--c, var(--ink-2));
  border: 1.5px solid currentColor; padding: .05em .55em; border-radius: 99px; white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.empty { text-align: center; padding: 48px 20px; }
.empty h2 { font: 700 1.4rem/1.2 var(--slab); margin: 0 0 8px; }
.empty p { color: var(--ink-2); margin: 0 auto 18px; max-width: 46ch; }

/* Appel entrant */
.incoming {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(360px, calc(100% - 32px));
  background: var(--ink); color: #fff; border-radius: var(--r); padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.3);
  display: grid; gap: 10px;
}
.incoming h3 { margin: 0; font: 700 1.2rem/1.2 var(--slab); }

/* ------------------------------------------------ tableaux */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th { text-align: left; font-weight: 700; color: var(--ink-2); font-size: .82rem; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 9px 10px; border-bottom: 1px solid #edf1f4; vertical-align: top; }
table.data tr.click { cursor: pointer; }
table.data tr.click:hover td { background: #f5f8fa; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; font-size: .9rem; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.filters label.field { min-width: 160px; }
.filters .grow { flex: 1; min-width: 220px; }

/* Tiroir de détail */
.drawer-bg { position: fixed; inset: 0; background: rgba(27,43,58,.35); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--desk); z-index: 41;
  overflow-y: auto; padding: 18px; box-shadow: -10px 0 40px rgba(0,0,0,.2);
}
.drawer { padding-top: 0; }
.drawer-head {
  position: sticky; top: 0; z-index: 2; background: var(--desk);
  display: flex; justify-content: space-between; align-items: center; padding: 12px 0;
}

dialog { border: none; border-radius: var(--r); padding: 0; width: min(560px, calc(100% - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(27,43,58,.4); }
dialog form { padding: 20px; display: grid; gap: 12px; }
dialog h2 { font: 700 1.25rem/1.2 var(--slab); margin: 0; }

/* ------------------------------------------------ bilan */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border-radius: var(--r); padding: 14px 16px; box-shadow: 0 1px 0 var(--desk-2); }
.kpi .v { font: 700 1.9rem/1.1 var(--slab); }
.kpi .l { color: var(--ink-2); font-size: .88rem; }
.charts { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
.charts > .panel + .panel { margin-top: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .legend { display: flex; gap: 14px; font-size: .85rem; color: var(--ink-2); margin-bottom: 6px; }
.chart .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.chart .axis text { fill: var(--ink-3); font-size: 11px; font-family: var(--ui); }
.chart .grid line { stroke: #edf1f4; }
.chart .bar:hover, .chart .bar.hot { filter: brightness(.88); }
.tip {
  position: fixed; pointer-events: none; z-index: 60; background: var(--ink); color: #fff; font-size: .85rem;
  padding: 6px 9px; border-radius: 5px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px));
}
.bars-h { display: grid; gap: 8px; }
.bars-h .r { display: grid; grid-template-columns: 130px 1fr 40px; gap: 8px; align-items: center; font-size: .88rem; }
.bars-h .track { height: 12px; background: #edf1f4; border-radius: 4px; overflow: hidden; }
.bars-h .fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--c, var(--series-1)); }
.quote { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; margin: 0 0 10px; font-size: .92rem; }
.quote .muted { font-size: .8rem; }

/* ------------------------------------------------ RDV */
.tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { border: none; background: transparent; padding: .5em .9em; border-radius: var(--r); font-weight: 700; cursor: pointer; color: var(--ink-2); }
.tabs button[aria-selected=true] { background: var(--card); color: var(--ink); box-shadow: 0 1px 0 var(--desk-2); }
.rdv-card { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid #edf1f4; align-items: start; }
.rdv-card:last-child { border-bottom: none; }
.rdv-date b { display: block; font: 700 1.15rem/1.15 var(--slab); }
.rdv-card h3 { margin: 0; font-size: 1.05rem; }
.rdv-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

/* ------------------------------------------------ toast */
#toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 70;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); font-weight: 700; font-size: .92rem;
  transition: opacity .18s, transform .18s; pointer-events: none; max-width: calc(100% - 32px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--stop); }

/* ------------------------------------------------ trame d'appel (colonne de droite) */
.side { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; overscroll-behavior: contain; }
.side-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.side-tabs button { flex: 1; border: none; background: transparent; padding: .45em .8em; border-radius: var(--r); font-weight: 700; cursor: pointer; color: var(--ink-2); }
.side-tabs button[aria-selected=true] { background: var(--card); color: var(--ink); box-shadow: 0 1px 0 var(--desk-2); }
.sc-head { position: sticky; top: 0; z-index: 2; display: grid; gap: 10px; box-shadow: 0 2px 8px rgba(27,43,58,.08); }
.sc-entry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-entry button { border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: .45em .5em; cursor: pointer; font-size: .88rem; color: var(--ink-2); }
.sc-entry button b { display: inline-block; min-width: 1.4em; }
.sc-entry button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sc-comp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-comp label.field { font-size: .78rem; gap: 2px; }
.sc-comp input { padding: .3em .45em; font-size: .85rem; }
.sc-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-nav a { font-size: .78rem; font-weight: 700; text-decoration: none; color: var(--ink-2); border: 1px solid var(--line); border-radius: 99px; padding: .1em .55em; }
.sc-nav a:hover { border-color: var(--ink-3); color: var(--ink); }
.side .sc-sec { margin-top: 10px; }
.sc-sec h2 { font-size: .95rem; }
.sc-sec p { margin: 0 0 8px; font-size: .9rem; }
.sc-say { font-family: var(--slab); font-size: .98rem !important; line-height: 1.45; color: var(--ink); }
.sc-tip { color: var(--ink-2); font-size: .84rem !important; border-left: 3px solid var(--rule-blue); padding-left: 8px; }
.sc-list { margin: 0 0 8px; padding-left: 18px; font-size: .88rem; display: grid; gap: 3px; }
.sc-sub { border-top: 1px solid #edf1f4; padding: 6px 0; }
.sc-sub summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.sc-sub[open] summary { margin-bottom: 6px; }
b.var { font-weight: 700; color: var(--ink); background: #eef4fb; border-radius: 3px; padding: 0 2px; }
mark.var { background: #fff3c4; color: var(--ink-2); border-radius: 3px; padding: 0 2px; font-family: var(--ui); font-size: .85em; }

/* contrat concurrent (entrée C) */
.contract { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; font-size: .88rem; }
.contract summary { cursor: pointer; font-weight: 700; color: #8A5410; }
.ct-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 8px; margin-top: 6px; }
.ct-grid label.field { font-size: .76rem; gap: 2px; }
.ct-grid input, .ct-grid select { padding: .3em .45em; font-size: .85rem; }
.ct-ok { color: var(--go); font-weight: 700; }
.ct-warn { color: #8A5410; font-weight: 700; }

/* ------------------------------------------------ scores */
.score-badge { justify-self: start; border: 1.5px solid currentColor; background: #fff; border-radius: 99px; font-weight: 700; font-size: .8rem; padding: .1em .6em; cursor: pointer; margin-top: 4px; }
.score-pill, .cell-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.score-pill { display: inline-block; min-width: 2.4em; text-align: center; border-radius: 99px; padding: .05em .5em; color: #fff; background: var(--ink-3); }
.score-pill.good, .fill.good { background: var(--go); }
.score-pill.mid, .fill.mid { background: #b07a12; }
.score-pill.low, .fill.low { background: var(--stop); }
.score-badge.good, .cell-pct.good, .big-score.good { color: var(--go); }
.score-badge.mid, .cell-pct.mid, .big-score.mid { color: #94660c; }
.score-badge.low, .cell-pct.low, .big-score.low { color: var(--stop); }
.notice { background: #fff8e1; border-left: 4px solid #e0a800; padding: 10px 14px; margin: 0 0 14px; border-radius: var(--r); font-size: .92rem; }
dialog.wide { width: min(820px, calc(100% - 32px)); max-height: calc(100vh - 40px); }
dialog h3 { font-size: .95rem; margin: 0 0 4px; }
dialog ul { margin: 0; padding-left: 18px; font-size: .92rem; }
.big-score { text-align: right; font: 700 2.4rem/1 var(--slab); white-space: nowrap; }
.big-score span { font-size: 1rem; color: var(--ink-3); }
.crit { display: grid; gap: 8px; }
.crit-row { display: grid; grid-template-columns: 190px 1fr 46px; gap: 4px 10px; align-items: center; font-size: .9rem; }
.crit-row .track { height: 10px; background: #edf1f4; border-radius: 4px; overflow: hidden; }
.crit-row .fill { height: 100%; }
.crit-row .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.crit-row .crit-why { grid-column: 2 / -1; color: var(--ink-2); font-size: .84rem; }
.crit-row.na { grid-template-columns: 190px 1fr; color: var(--ink-3); }
q { font-style: italic; }
.forbid { border-left: 4px solid var(--stop); background: #fdf0ef; padding: 8px 12px; border-radius: var(--r); font-size: .9rem; }
.forbid p { margin: 4px 0 0; }
.advice { margin: 0; background: #eef6f1; border-left: 4px solid var(--go); padding: 8px 12px; border-radius: var(--r); }
.transcript { max-height: 320px; overflow-y: auto; display: grid; gap: 4px; margin-top: 8px; font-size: .9rem; }
.transcript p { margin: 0; padding: 4px 8px; border-radius: 5px; }
.transcript p.agent { background: #eef4fb; margin-right: 15%; }
.transcript p.prospect { background: #f3f1ee; margin-left: 15%; }
.transcript .when { color: var(--ink-3); font-size: .78rem; margin-right: 6px; font-variant-numeric: tabular-nums; }
.review { border-top: 1px solid var(--line); padding-top: 12px; }

/* ------------------------------------------------ prestataire et infos du fichier */
.provider { margin: 6px 0 0; font-size: .92rem; color: var(--stop); }
.provider b { color: var(--stop); }
.extra { margin-top: 6px; font-size: .88rem; }
.extra summary { cursor: pointer; color: var(--ink-2); }
.extra dl { display: grid; grid-template-columns: 120px 1fr; gap: 2px 10px; margin: 6px 0 0; }
.origin { border-left: 4px solid var(--line); }
.origin.competitor { border-left-color: var(--stop); }
.origin-title { margin: 0; font-weight: 700; }
.origin.competitor .origin-title b { color: var(--stop); }
.side .origin + .side-tabs, .side .origin + div { margin-top: 10px; }
.toolbar-main .for-com select { font-weight: 700; min-width: 230px; }
.toolbar-sub { margin-top: -6px; }
.toolbar-sub label.field { font-size: .8rem; }
.queue-line .pack { background: var(--ink); color: #fff; }
.queue-line .pack b { color: #fff; }
.extra dt { color: var(--ink-3); }
.extra dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------ journal : en ce moment */
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.live-card { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 3px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.dot.online { background: var(--go); }
.dot.on-call { background: var(--stop); box-shadow: 0 0 0 3px rgba(185,50,43,.2); }
.dot.off { background: var(--line); }
.live { margin-bottom: 14px; }

/* ------------------------------------------------ composer un numéro */
.dialer { width: 100%; }
.dial-input { font: 700 1.6rem/1.2 var(--slab) !important; letter-spacing: .04em; text-align: center; }
.dial-pad { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 0; }
.dial-pad button { font: 700 1.3rem/1 var(--ui); height: 52px; }
.dial-pad button:hover { border-color: var(--ink-3); }
dialog:has(.dialer) { width: min(380px, calc(100% - 32px)); }

/* ------------------------------------------------ préparation du RDV */
.prep { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; margin: 0; font-size: .92rem; }
.prep dt { color: var(--ink-3); }
.prep dd { margin: 0; }
.prep-call { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.prep-call h3 { margin: 0; }

/* ------------------------------------------------ petits écrans */
@media (max-width: 980px) {
  .session { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; }
  .charts { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 10px 12px; }
  .nav .brand { width: 100%; padding-bottom: 6px; }
  .nav .spacer, .nav .who { display: none; }
  main { padding: 16px; }
  .fiche { padding: 0 16px 18px; }
  .fiche::before { margin: 0 -16px 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .rdv-card { grid-template-columns: 1fr; }
  .crit-row, .crit-row.na { grid-template-columns: 1fr 46px; }
  .crit-row .track { grid-column: 1 / -1; grid-row: 2; }
  .crit-row .crit-why { grid-column: 1 / -1; }
  .prep { grid-template-columns: 1fr; }
  .toolbar .today { margin-left: 0; }
}
/* Logo = lien vers l'accueil : il garde son apparence de logo, pas celle d'un lien du menu. */
.nav a.brand, .nav a.brand:hover { background: none; text-decoration: none; display: block; }
.nav a.brand:hover { opacity: .85; }

/* ------------------------------------------------ plateau (vue « jeu ») */
.pl { --pl-bg: #13202c; --pl-card: #1c2d3d; --pl-line: #2c4256; --pl-ink: #e8eef3; --pl-muted: #8fa3b5;
  background: radial-gradient(circle at 20% 0%, #1d3347 0%, var(--pl-bg) 60%); color: var(--pl-ink); border-radius: 12px; padding: 18px; margin: -6px; min-height: calc(100vh - 60px); }
.pl h1 { font: 700 1.6rem/1.1 var(--slab); margin: 0; color: #fff; }
.pl h2 { font: 700 .95rem/1.2 var(--ui); margin: 0; color: #fff; letter-spacing: .02em; }
.pl .muted { color: var(--pl-muted); }
.pl-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pl-score { display: flex; gap: 10px; flex-wrap: wrap; }
.pl-stat { background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 10px; padding: 8px 14px; text-align: center; min-width: 86px; }
.pl-stat b { display: block; font: 700 1.6rem/1 var(--slab); }
.pl-stat span { font-size: .75rem; color: var(--pl-muted); text-transform: uppercase; letter-spacing: .06em; }
.pl-stat.rdv b { color: #4ade80; } .pl-stat.oncall b { color: #f87171; }
.pl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pl-xp { height: 6px; background: #0d1822; border-radius: 99px; overflow: hidden; }
.pl-xp i { display: block; height: 100%; background: linear-gradient(90deg, #2a78d6, #4ade80); border-radius: 99px; transition: width .6s; }
.pl-board { position: relative; border-radius: 14px; overflow: auto; background: linear-gradient(180deg, #a9cf8a 0%, #c4dd9c 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); min-height: 300px; }
/* ---- bureau isométrique */
.iso { display: block; width: 100%; min-width: 640px; height: auto; max-height: 78vh; font-family: var(--ui); }
.iso-grass { fill: #b5d68e; } .iso-slab { fill: #efe4cc; stroke: #d9c8a6; stroke-width: 1; }
.iso-room { cursor: pointer; }
.iso-floor { fill: #ddb684; stroke: #c49b66; stroke-width: 1; }
.iso-room.pause .iso-floor { fill: #ecaa82; stroke: #d48c62; } .iso-room.rdv .iso-floor { fill: #c9d3e2; stroke: #a9b6cb; }
.iso-room:hover .iso-floor { filter: brightness(1.05); } .iso-room.sel .iso-floor { stroke: #2563eb; stroke-width: 3; }
.iso-wall .ft { fill: #c9c2b4; } .iso-wall .fl { fill: #f7f4ee; } .iso-wall .fr { fill: #e7e2d8; }
.iso-glass { fill: rgba(147, 197, 253, .45); stroke: #93c5fd; stroke-width: 1; }
.iso-low .ft { fill: #9fb3c8; } .iso-low .fl { fill: rgba(191, 219, 254, .55); } .iso-low .fr { fill: rgba(147, 197, 253, .5); }
.iso-mat { fill: rgba(0,0,0,.06); }
.iso-desk { cursor: pointer; }
.iso-desk:hover .iso-mat { fill: rgba(37, 99, 235, .15); }
.iso-pick { fill: none; stroke: #2563eb; stroke-width: 3; stroke-dasharray: 10 6; animation: iso-ants 1.2s linear infinite; }
@keyframes iso-ants { to { stroke-dashoffset: -32; } }
.iso-table .ft { fill: #f8fafc; } .iso-table .fl { fill: #94a3b8; } .iso-table .fr { fill: #64748b; }
.iso-screen .ft, .iso-screen .fr { fill: #1e293b; } .iso-screen .fl { fill: #334155; }
.iso-screen.ready .fl { fill: #60a5fa; } .iso-screen.call .fl { fill: #f87171; } .iso-screen.idle .fl { fill: #64748b; } .iso-screen.off .fl { fill: #1e293b; }
.iso-chair .ft { fill: #475569; } .iso-chair .fl { fill: #334155; } .iso-chair .fr { fill: #1e293b; }
.iso-person .sh, .iso-tree .sh { fill: rgba(0,0,0,.18); }
.iso-person .body { fill: #22c55e; stroke: rgba(0,0,0,.25); } .iso-person .head { fill: #f2c9a0; stroke: rgba(0,0,0,.2); } .iso-person .hair { fill: #3b2a1e; }
.iso-person.call .body { fill: #ef4444; } .iso-person.idle .body { fill: #f59e0b; } .iso-person.commercial .body { fill: #2563eb; } .iso-person.supervisor .body { fill: #7c3aed; }
.iso-person.guest .body { fill: #0ea5e9; } .iso-person.sel .body { stroke: #2563eb; stroke-width: 3; }
.iso-person[data-u] { cursor: pointer; }
.iso-ring { fill: none; stroke: #ef4444; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: iso-ring 1.4s ease-out infinite; }
@keyframes iso-ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.iso-desk.cheer { animation: iso-cheer .5s ease 4; transform-box: fill-box; transform-origin: center bottom; }
@keyframes iso-cheer { 50% { transform: translateY(-10px); } }
.iso-counter .ft { fill: #f1f5f9; } .iso-counter .fl { fill: #78716c; } .iso-counter .fr { fill: #57534e; }
.iso-coffee .ft { fill: #111827; } .iso-coffee .fl { fill: #374151; } .iso-coffee .fr { fill: #1f2937; }
.iso-pool .ft { fill: #7c4a24; } .iso-pool .fl { fill: #6b3d1c; } .iso-pool .fr { fill: #5a3216; } .iso-felt .ft { fill: #2563eb; } .iso-felt .fl, .iso-felt .fr { fill: #1d4ed8; }
.iso-sofa .ft { fill: #fbbf24; } .iso-sofa .fl { fill: #d97706; } .iso-sofa .fr { fill: #b45309; }
.iso-meeting .ft { fill: #fafaf9; } .iso-meeting .fl { fill: #a8a29e; } .iso-meeting .fr { fill: #78716c; }
.iso-board .wb { fill: #ffffff; stroke: #64748b; stroke-width: 2; } .iso-wb-txt { font: 700 15px/1 var(--slab); fill: #16a34a; }
.iso-tree rect { fill: #7c5a3a; } .iso-tree circle { fill: #4ade80; stroke: #22a056; stroke-width: 2; }
.iso-tag { cursor: pointer; } .iso-tag rect { fill: rgba(255,255,255,.95); stroke: rgba(15,23,42,.18); filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.iso-tag text { font-size: 11px; font-weight: 700; fill: #0f172a; } .iso-tag text.sub { font-size: 9.5px; font-weight: 500; fill: #475569; }
.iso-tag .star { fill: #ca8a04; font-weight: 700; }
.iso-tag .dot { fill: #22c55e; } .iso-tag.call .dot { fill: #ef4444; } .iso-tag.idle .dot { fill: #f59e0b; } .iso-tag.off .dot { fill: #94a3b8; }
.iso-tag.call rect { fill: #fee2e2; stroke: #ef4444; } .iso-tag.call text.sub { fill: #b91c1c; font-weight: 700; }
.iso-tag.off { opacity: .7; } .iso-tag.idle rect { fill: #fef3c7; stroke: #f59e0b; }
.iso-sign { cursor: pointer; } .iso-sign rect:first-child { fill: #0f172a; opacity: .88; } .iso-sign.sel rect:first-child { fill: #1d4ed8; opacity: 1; }
.iso-sign .t { font: 700 13px/1 var(--ui); fill: #fff; } .iso-sign .sub { font-size: 10px; fill: #cbd5e1; }
.iso-sign .bar { fill: #334155; } .iso-sign .fill { fill: #4ade80; }
.pl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .8rem; color: var(--pl-muted); margin: 10px 0 0; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: -8px; vertical-align: -1px; background: #94a3b8; }
.lg.call { background: #ef4444; } .lg.ready { background: #22c55e; } .lg.idle { background: #f59e0b; } .lg.off { background: #64748b; }
/* ---- fiche cliquée */
.pc-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.pc-head > div:first-child:not(.pc-av) { grid-column: 1 / 3; }
.pc-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #2c4256; box-shadow: 0 0 0 3px #64748b; }
.pc-av.call { box-shadow: 0 0 0 3px #ef4444; } .pc-av.ready { box-shadow: 0 0 0 3px #22c55e; } .pc-av.idle { box-shadow: 0 0 0 3px #f59e0b; }
.pc-x { background: none; border: 0; color: var(--pl-muted); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 2px 6px; }
.pc-state { margin: 0 0 10px; font-size: .88rem; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); }
.pc-state.call { background: rgba(239,68,68,.15); color: #fecaca; }
.pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pc-grid span { background: rgba(255,255,255,.04); border-radius: 8px; padding: 6px; text-align: center; font-size: .7rem; color: var(--pl-muted); text-transform: uppercase; letter-spacing: .04em; }
.pc-grid b { display: block; font: 700 1.15rem/1.1 var(--slab); color: var(--pl-ink); text-transform: none; letter-spacing: 0; }
.pc-grid .g b { color: #4ade80; }
.pc-xp { display: grid; gap: 4px; margin-bottom: 10px; }
.pc-act { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .86rem; max-height: 40vh; overflow-y: auto; }
.pc-list li[data-pick], .pl-rank li[data-pick] { cursor: pointer; } .pc-list li[data-pick]:hover b, .pl-rank li[data-pick]:hover b { text-decoration: underline; }
.pc-list .lg { margin-right: 4px; }
.pl-confetti { position: absolute; pointer-events: none; }
.pl-confetti i { position: absolute; left: 50%; top: 40%; width: 7px; height: 11px; background: var(--c); border-radius: 2px; opacity: 0;
  animation: pl-fall 1.6s ease-out var(--d) forwards; }
@keyframes pl-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), 120px) rotate(var(--r)); } }
.pl-side { display: grid; gap: 14px; position: sticky; top: 14px; }
.pl-panel { background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 12px; padding: 12px 14px; }
.pl-panel h2 { margin-bottom: 10px; }
.pl-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; }
.pl-rank li { display: grid; grid-template-columns: 26px 1fr; gap: 0 8px; align-items: center; }
.pl-rank li .muted { grid-column: 2; font-size: .78rem; }
.pl-medal { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: #2c4256; }
.pl-medal.m1 { background: #f5c542; color: #3a2c00; } .pl-medal.m2 { background: #cbd5e1; color: #1e293b; } .pl-medal.m3 { background: #d08a4f; color: #2b1607; }
.pl-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .84rem; max-height: 50vh; overflow-y: auto; }
.pl-feed li { border-left: 3px solid var(--pl-line); padding-left: 8px; }
.pl-feed .ev-rdv { border-color: #4ade80; } .pl-feed .ev-missed { border-color: #ef4444; } .pl-feed .ev-callback { border-color: #2a78d6; }
.pl-time { color: var(--pl-muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 980px) { .pl-wrap { grid-template-columns: 1fr; } .pl-side { position: static; } }
@media (prefers-reduced-motion: reduce) { .iso-ring, .iso-pick, .iso-desk.cheer { animation: none; } }

/* ------------------------------------------------ fanfare « RDV pris » */
.fanfare { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; place-items: center; transition: opacity .5s; }
.fanfare.out { opacity: 0; }
.fanfare canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ff-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 34px; border-radius: 20px; text-align: center;
  background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.25);
  animation: ff-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; max-width: min(90vw, 520px); }
.ff-card b { font: 800 clamp(1.6rem, 5vw, 2.6rem)/1.1 var(--slab); letter-spacing: .01em; }
.ff-card span { font-size: 1rem; opacity: .95; }
.ff-ico { font-size: 2.6rem; line-height: 1; animation: ff-wiggle .5s ease-in-out .5s 3; }
@keyframes ff-pop { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ff-wiggle { 50% { transform: rotate(-14deg) scale(1.15); } }
.pl-sound { margin-left: 10px; vertical-align: middle; font: 600 .78rem/1 var(--ui); color: var(--pl-muted); background: rgba(255,255,255,.06); border: 1px solid var(--pl-line); border-radius: 99px; padding: 5px 10px; cursor: pointer; }
.iso-walker text { font: 800 12px/1 var(--ui); fill: #16a34a; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
@media (prefers-reduced-motion: reduce) { .ff-card, .ff-ico { animation: none; } }

/* ------------------------------------------------ « Ne plus appeler » et santé des numéros */
.dnc-flag { display: inline-flex; align-items: center; gap: 6px; background: #3f3f46; color: #fff; border-radius: 99px; padding: 4px 10px; font-size: .82rem; font-weight: 700; }
.nh-table td, .nh-table th { padding: 6px 8px; text-align: left; font-size: .88rem; vertical-align: middle; }
.nh-table th { color: var(--muted, #4a5a69); font-weight: 600; font-size: .78rem; }
.nh-state { display: inline-block; border-radius: 99px; padding: 2px 9px; font-size: .78rem; font-weight: 700; }
.nh-state.ok { background: #dcfce7; color: #166534; } .nh-state.surveiller { background: #fef3c7; color: #92400e; }
.nh-state.alerte { background: #fee2e2; color: #991b1b; } .nh-state.peu { background: #e5e7eb; color: #374151; }
.nh-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; }
.nh-spark i { display: block; width: 6px; background: #93c5fd; border-radius: 2px 2px 0 0; min-height: 2px; }
.nh-spark i.low { background: #f87171; } .nh-spark i.none { background: #e5e7eb; }
.dnc-list { max-height: 320px; overflow-y: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nh-spark i.none { background: #374151; } }

.pl-incident { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: rgba(239,68,68,.16); border: 1px solid #7f2a2a; color: #fecaca; font-size: .9rem; }
.pl-incident b { color: #fff; }

/* ------------------------------------------------ appel entrant : choix de la fiche */
.ip-list { display: grid; gap: 6px; }
.ip-item { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line, #d6dde3); border-radius: 10px; background: var(--card, #fff); color: inherit; font: inherit; cursor: pointer; }
.ip-item:hover, .ip-item:focus-visible { border-color: #2a78d6; box-shadow: 0 0 0 3px rgba(42,120,214,.18); }

.iso-wb-txt.zero { fill: #94a3b8; }

/* ------------------------------------------------ réponses aux invitations */
.rsvp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rsvp-badge { font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: #e5e7eb; color: #374151; }
.rsvp-badge.ok { background: #dcfce7; color: #166534; } .rsvp-badge.no { background: #fee2e2; color: #991b1b; } .rsvp-badge.maybe { background: #fef3c7; color: #92400e; }

/* ------------------------------------------------ écoute discrète */
.listen-btn { margin: 0 0 10px; width: 100%; }
.listen-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #111827; color: #fff; padding: 10px 14px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: calc(100vw - 32px); font-size: .9rem; }
.listen-bar .btn { background: #ef4444; color: #fff; border-color: #ef4444; }
.listen-t { font-variant-numeric: tabular-nums; opacity: .85; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: live 1.2s infinite; }
@keyframes live { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.pl-alert { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: rgba(245,158,11,.14); border: 1px solid #92400e; color: #fde68a; font-size: .9rem; }
.pl-alert summary { cursor: pointer; } .pl-alert b { color: #fff; } .pl-alert a { color: #fcd34d; }
.pl-alert ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }

.training-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.training-card { border: 1px solid #e3e8ec; border-radius: 10px; padding: 10px 12px; }
table.data.compact td, table.data.compact th { padding: 3px 6px; font-size: .85rem; }