/* Régie 360 — charte RMC BFM ADS appliquée à un outil de travail clair et dense.
   Couleurs de la marque : nuit #090013 (actions), blanc, dégradé cyan #45D7D4 → rose #D42A73 (filet de marque uniquement).
   Vert / orange / rouge sont réservés aux états (diffusé, à valider, non diffusé). Chiffres tabulaires ; mono pour les timecodes. */
:root {
  /* couches, de bas en haut : la page, l'écran plein (mode réunion), les fenêtres et tiroirs qu'on y ouvre, puis menus,
     listes déroulantes et messages. Une fenêtre ouverte depuis le mode réunion passe toujours devant lui. */
  --z-plein: 900; --z-modal: 1000; --z-drawer: 1001; --z-menu: 1100; --z-liste: 1200; --z-toast: 1300;
  --bg: #f5f4f8; --bg2: #faf9fc; --surface: #ffffff; --surface2: #f1eff5; --raise: #ffffff;
  --line: #e5e2eb; --line2: #cfcad9; --ink: #150f24; --ink2: #3a344b; --muted: #676178;
  --night: #090013; --blue: #1b0d35; --blue-hi: #2d1a52; --blue-soft: #eeebf5; --cyan: #45d7d4; --cyan-soft: #e2f7f6; --pink: #d42a73;
  --brand-grad: linear-gradient(90deg, #45d7d4 0%, #8fb1c9 45%, #d42a73 100%);
  --red: #c8141c; --red-hi: #d2161e; --red-soft: #fdeceb;
  --ok: #1e7f4f; --ok-soft: #e6f4ec; --warn: #9a5600; --warn-soft: #fdf3e1; --ecart: #c96a0c;
  --bad: #c8141c; --bad-soft: #fdeceb;
  --shadow: 0 10px 30px rgb(21 15 36 / .16); --glow: 0 0 0 2px var(--pink);
  --f-head: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: var(--f-head);
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 8px; --r-sm: 6px;
  color-scheme: light;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
svg[aria-hidden] { width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: none }
html, body { margin: 0; height: 100% }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--f-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased }
button, input, select, textarea { font: inherit; color: inherit }
a { color: var(--blue); text-decoration: underline; text-decoration-color: rgb(27 13 53 / .3); text-underline-offset: 2px }
a:hover { text-decoration-color: currentColor }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px }
::selection { background: var(--blue-soft) }
.mono { font-family: var(--f-mono); font-size: .95em }
.tc { font-family: var(--f-mono) }
.muted { color: var(--muted) }
.num { font-variant-numeric: tabular-nums }
b, strong { font-weight: 600 }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* ---------- coque */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh }
.rail { background: var(--surface); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 14px 10px; gap: 2px; overflow-y: auto }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px }
.brand .chip { white-space: nowrap; background: var(--red); color: #fff; font: 700 12px/1 var(--f-head); padding: 6px 7px; border-radius: 4px }
.brand .chip.logo { background: none; padding: 0 } .brand .chip.logo img { height: 34px; display: block }
.brand .chip.marque { background: none; padding: 0; border-radius: 7px } .brand .chip.marque img { width: 34px; height: auto; display: block; border-radius: 7px }
.brand b { font: 600 16px/1.1 var(--f-head); display: block }
.brand small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px }
.nav-sec { font: 600 12px var(--f-body); color: var(--muted); padding: 14px 10px 4px }
.nav a, .kicker a, .todo a, .palette a, .menu a, .btn, .tag, .feed a { text-decoration: none }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--ink2); font-weight: 500; text-decoration: none }
.nav a svg { width: 17px; height: 17px; flex: none; color: var(--muted) }
.nav a:hover { background: var(--surface2); color: var(--ink) }
.nav a.on { background: var(--blue-soft); color: var(--night); font-weight: 600; box-shadow: inset 3px 0 0 var(--pink) }
.nav a.on svg { color: var(--night) }
.nav .badge { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--surface2); border-radius: 99px; padding: 0 7px; color: var(--ink2); min-width: 20px; text-align: center }
.nav .badge.hot { background: var(--red); color: #fff }
.rail .foot { margin-top: auto; padding: 12px 10px 4px; font-size: 12px; color: var(--muted); display: grid; gap: 4px; border-top: 1px solid var(--line) }
.secure { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-weight: 500 }
.secure i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok) }

.main { min-width: 0; display: flex; flex-direction: column }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 28px 10px; background: var(--surface) var(--brand-grad) top / 100% 3px no-repeat; border-bottom: 1px solid var(--line) }
.search { flex: 1; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: 9px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 11px; color: var(--muted); cursor: text }
.search:hover { border-color: var(--line2) }
.search svg { width: 16px; height: 16px; flex: none }
.search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.search kbd { white-space: nowrap; margin-left: auto; font: 500 11px var(--f-body); border: 1px solid var(--line2); border-radius: 4px; padding: 0 5px; color: var(--muted); background: var(--surface) }
.clock { font-size: 13px; color: var(--muted); white-space: nowrap }
.clock b { color: var(--ink2); font-weight: 500 }
.onair { display: none }
.userbtn { display: flex; align-items: center; gap: 9px; background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 8px 3px 3px; cursor: pointer }
.userbtn:hover { background: var(--surface2) }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--f-body); background: var(--blue-soft); color: var(--night); flex: none }
.avatar.sm { width: 24px; height: 24px; font-size: 10.5px }
.userbtn .who { text-align: left; line-height: 1.2 } .userbtn .who b { display: block; font-size: 13px } .userbtn .who small { color: var(--muted); font-size: 12px }
.page { padding: 24px 28px 64px; display: grid; gap: 20px; min-width: 0; max-width: none; width: 100% }
@media (min-width: 1900px) { .page { padding: 28px 40px 72px; gap: 24px } }
.phead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px }
.kicker { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px }
.kicker a { color: var(--muted) } .kicker a:hover { color: var(--blue) }
h1 { margin: 2px 0 0; font: 600 24px/1.25 var(--f-head); letter-spacing: -.01em; text-wrap: balance }
h2 { margin: 0; font: 600 15px/1.3 var(--f-head); display: flex; align-items: center; gap: 8px }
h2 .n { font-size: 13px; font-weight: 500; color: var(--muted) }
h3 { margin: 0; font: 600 14px/1.3 var(--f-head) }
.lede { color: var(--muted); margin: 4px 0 0; max-width: 78ch }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.row.end { justify-content: flex-end } .row.between { justify-content: space-between }
.grow { flex: 1 }
.stack { display: grid; gap: 14px; min-width: 0 }
.cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start }
.cols-2-1 { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start }
@media (max-width: 1100px) { .cols-2-1 { grid-template-columns: minmax(0, 1fr) } }

/* ---------- panneaux */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 12px; min-width: 0 }
.panel.flush { padding: 0; gap: 0; overflow: hidden } .panel.flush > .ph { padding: 12px 16px; border-bottom: 1px solid var(--line) }
.ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px }
.panel .hint, .hint { margin: 0; color: var(--muted); font-size: 13px }

/* Indicateurs : un seul bandeau découpé en cases, l'état en pastille */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.kpi { padding: 14px 16px; display: grid; gap: 2px; align-content: start; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line) }
.kpi .k { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px }
.kpi .k::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--line2)); flex: none }
.kpi .v { font: 600 26px/1.2 var(--f-head); letter-spacing: -.02em }
.kpi .s { font-size: 12.5px; color: var(--muted) }
.kpi.click { cursor: pointer } .kpi.click:hover { background: var(--bg2) }
.panel .kpis { border-radius: var(--r-sm) }

/* ---------- boutons & champs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line2); background: var(--surface); color: var(--ink);
  border-radius: 6px; padding: 7px 12px; font-weight: 500; font-size: 13.5px; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.25 }
.btn:hover { background: var(--surface2); text-decoration: none }
.btn svg { width: 15px; height: 15px }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff }
.btn.primary:hover { background: var(--blue-hi); border-color: var(--blue-hi) }
.btn.danger { background: var(--surface); border-color: #ecb8b5; color: var(--bad) }
.btn.danger:hover { background: var(--bad-soft) }
.btn.red { background: var(--red); border-color: var(--red); color: #fff }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink2) }
.btn.ghost:hover { background: var(--surface2) }
.btn.sm { padding: 4px 9px; font-size: 13px; border-radius: 5px }
.btn.lg { padding: 10px 16px; font-size: 14.5px; font-weight: 600 }
.btn:disabled { opacity: .5; cursor: not-allowed }
.btn.on { background: var(--blue-soft); border-color: var(--blue); color: var(--night) }
.field { display: grid; gap: 5px; min-width: 0 }
.field > span { font-size: 13px; font-weight: 500; color: var(--ink2) }
.field small { color: var(--muted); font-size: 12.5px }
.in { width: 100%; min-width: 0; background: var(--surface); border: 1px solid var(--line2); border-radius: 6px; padding: 7px 10px; font-size: 14px; color: var(--ink) }
.in:hover { border-color: #b4bcc7 }
.in:focus { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 3px var(--blue-soft) }
textarea.in { resize: vertical; min-height: 80px; line-height: 1.5 }
select.in { cursor: pointer }
.form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) }
.form .full { grid-column: 1 / -1 }
.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer }
.check input { width: 15px; height: 15px; accent-color: var(--blue) }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 6px; overflow: hidden; background: var(--surface) }
.seg button { border: 0; background: none; padding: 6px 12px; font-weight: 500; font-size: 13px; color: var(--ink2); cursor: pointer; border-right: 1px solid var(--line) }
.seg button:last-child { border-right: 0 }
.seg button.on { background: var(--blue-soft); color: var(--night); font-weight: 600 }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip-f { border: 1px solid var(--line2); background: var(--surface); border-radius: 99px; padding: 4px 11px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink2) }
.chip-f:hover { border-color: var(--blue) } .chip-f.on { background: var(--night); border-color: var(--night); color: #fff }
.chip-f .c { font-size: 12px; opacity: .75; margin-left: 4px }

/* ---------- pastilles d'état */
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--f-body); padding: 4px 8px; border-radius: 4px; white-space: nowrap; background: var(--surface2); color: var(--ink2) }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none }
.pill.ok { background: var(--ok-soft); color: var(--ok) } .pill.warn { background: var(--warn-soft); color: var(--warn) }
.pill.bad { background: var(--bad-soft); color: var(--bad) } .pill.info { background: var(--blue-soft); color: var(--blue) }
.pill.live { background: var(--night); color: #fff } .pill.nodot::before { display: none }
.tag { display: inline-block; font: 500 12px/1 var(--f-body); padding: 4px 6px; border-radius: 4px; background: var(--surface2); color: var(--ink2) }
.bb { display: inline-flex; font: 600 12px/1 var(--f-body); padding: 4px 7px; border-radius: 4px; white-space: nowrap }
.bb.in { background: var(--blue-soft); color: var(--night) } .bb.out { background: var(--cyan-soft); color: #0b6461 }

/* ---------- tableaux */
.tw { overflow-x: auto; min-width: 0 }
table.t { border-collapse: collapse; width: 100%; font-size: 13.5px }
.t th { font: 500 12.5px var(--f-body); color: var(--muted); text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg2); white-space: nowrap; position: sticky; top: 0 }
.t td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle }
.t tr:last-child td { border-bottom: 0 }
.t tr.click { cursor: pointer } .t tr.click:hover td { background: var(--bg2) }
.t td.nowrap, .t .nowrap { white-space: nowrap }
.t td.file { min-width: 220px; overflow-wrap: anywhere }
.t th.num, .t td.num { text-align: right }
.t .row { flex-wrap: nowrap }
.t .strong { font-weight: 600 } .t .sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 1px }
.empty { padding: 32px 20px; text-align: center; color: var(--muted); display: grid; gap: 8px; justify-items: center }
.empty b { color: var(--ink); font-size: 15px }

/* ---------- barres de réalisation */
.prog { display: grid; gap: 4px; min-width: 120px }
.prog .bar { height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden }
.prog .bar i { display: block; height: 100%; background: var(--c, var(--ok)); border-radius: 99px }
.prog .lab { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted) }
.prog .lab b { color: var(--ink) }

/* ---------- actions à traiter */
.todo { display: grid; gap: 0 }
.todo a { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 4px 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none }
.todo a:last-child { border-bottom: 0 }
.todo a:hover { background: var(--bg2) }
.todo a::before { content: ""; align-self: stretch; border-radius: 2px; background: var(--c, var(--warn)) }
.todo a.bad { --c: var(--bad) } .todo a.warn { --c: var(--warn) } .todo a.info { --c: var(--cyan) }
.todo .t1 { font-weight: 500 } .todo .t2 { font-size: 12.5px; color: var(--muted) }
.todo .ty { font-size: 12px; color: var(--muted) }

/* ---------- graphique */
.chart { width: 100%; height: auto; display: block }
.chart text { fill: var(--muted); font: 11px var(--f-body) }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted) }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px }

/* ---------- fil d'activité */
.feed { display: grid; gap: 0; margin: 0; padding: 0; list-style: none }
.feed li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px }
.feed li:last-child { border-bottom: 0 }
.feed .when { font-size: 12.5px; color: var(--muted); white-space: nowrap; min-width: 74px }
.feed .what { overflow-wrap: anywhere }

/* ---------- fiche campagne */
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 12px }
.hero .meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 20px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 12px }
.hero .meta span { display: grid; gap: 1px; align-content: start } .hero .meta b { color: var(--ink); font-size: 14px; font-weight: 500 }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto }
.tabs a { text-decoration: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; font-weight: 500; color: var(--muted); white-space: nowrap; font-size: 14px; margin-bottom: -1px }
.tabs a:hover { color: var(--ink) } .tabs a.on { color: var(--night); font-weight: 600; border-bottom: 2px solid; border-image: var(--brand-grad) 1 }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap;
  font-size: 14px; display: inline-flex; gap: 7px; align-items: center; margin-bottom: -1px }
.tabs button:hover { color: var(--ink) } .tabs button.on { color: var(--night); font-weight: 600; border-image: var(--brand-grad) 1 }
.tabs .n { font-size: 12px; background: var(--surface2); color: var(--ink2); border-radius: 99px; padding: 0 7px }
.timeline { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; max-height: 460px; overflow-y: auto; padding-right: 4px }
.slot { border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line2)); border-radius: 5px; padding: 6px 8px; display: grid; gap: 1px; background: var(--surface); font-size: 12px; cursor: default }
.slot b { font: 500 12px var(--f-mono) } .slot span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.slot.diffuse { --c: var(--ok) } .slot.a_valider { --c: var(--warn); background: var(--warn-soft) } .slot.non_diffuse { --c: var(--bad); background: var(--bad-soft) }
.slot.a_piger { --c: var(--line2); background: var(--bg2) } .slot.a_venir { --c: var(--cyan); border-style: dashed; border-left-style: solid; color: var(--muted) }
.slot.click { cursor: pointer } .slot.click:hover { border-color: var(--line2) }

/* ---------- cartes de passage : le timecode est la donnée de référence */
.passages { display: grid; gap: 10px }
.pass { display: grid; grid-template-columns: 156px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden }
.pass.sel { box-shadow: var(--glow) } .pass.rejete { opacity: .55 }
.pass .when { background: var(--bg2); border-right: 1px solid var(--line); padding: 14px; display: grid; align-content: start; gap: 6px }
.pass .when .tc { font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--ink) }
.pass .when .d { font-size: 12.5px; color: var(--muted) }
.pass .when .bb { justify-self: start }
.pass .body { padding: 12px 16px; display: grid; gap: 10px; min-width: 0 }
.pass .ttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px }
.pass .ttl h3 { font-size: 16px }
.caps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px }
.cap { flex: none; width: 168px; max-width: 100%; display: grid; gap: 3px; cursor: pointer }
.cap img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: block; background: #000 }
.cap span { font: 12px var(--f-mono); color: var(--muted) } .cap span b { font-family: var(--f-body); font-weight: 500; color: var(--ink2); margin-right: 6px }
.pass .metrics, .carte-v .metrics { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); align-items: center }
.pass .metrics b, .carte-v .metrics b { color: var(--ink); font-weight: 500 }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.alerts li { background: var(--warn-soft); color: var(--warn); border-radius: 5px; padding: 6px 10px; font-size: 13px }
.alerts li.bad { background: var(--bad-soft); color: var(--bad) }
.pass .acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px }
@media (max-width: 720px) { .pass { grid-template-columns: minmax(0, 1fr) } .pass .when { border-right: 0; border-bottom: 1px solid var(--line); grid-auto-flow: column; justify-content: start; align-items: center } }

/* ---------- dépôt de fichiers */
.drop { border: 1.5px dashed var(--line2); border-radius: var(--r); padding: 20px; text-align: center; color: var(--muted); cursor: pointer; display: grid; gap: 3px; background: var(--bg2) }
.drop b { color: var(--ink); font-size: 14.5px; font-weight: 600 }
.drop:hover, .drop.over { border-color: var(--blue); background: var(--blue-soft); color: var(--ink2) }
.up { display: grid; gap: 6px; font-size: 13px }
.up .bar { height: 5px; background: var(--surface2); border-radius: 99px; overflow: hidden } .up .bar i { display: block; height: 100%; background: var(--blue); width: 0; transition: width .2s }

/* ---------- traitement de pige */
.job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--surface) }
.job .live, .job .done, .job .err { width: 9px; height: 9px; border-radius: 50% }
.job .live { background: var(--blue); animation: pulse 1.4s ease-in-out infinite } .job .done { background: var(--ok) } .job .err { background: var(--bad) }
@keyframes pulse { 50% { opacity: .35 } }
.job .bar { height: 5px; background: var(--surface2); border-radius: 99px; overflow: hidden; margin-top: 6px } .job .bar i { display: block; height: 100%; background: var(--blue); transition: width .4s }

/* ---------- fenêtres */
#overlay:empty { display: none }
.backdrop { position: fixed; inset: 0; background: rgb(26 34 48 / .38); z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; animation: fade .12s }
@keyframes fade { from { opacity: 0 } }
.modal { background: var(--surface); border-radius: 10px; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr) }
.modal.wide { width: min(1080px, 100%) }
:is(.modal, .drawer) .mh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1 }
:is(.modal, .drawer) .mh h2 { font-size: 16px }
:is(.modal, .drawer) .mb { padding: 18px; display: grid; gap: 16px } :is(.modal, .drawer) .mf { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--surface) }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 100%); background: var(--surface); border-left: 1px solid var(--line); z-index: var(--z-drawer); display: grid; grid-template-rows: auto 1fr auto; box-shadow: var(--shadow); animation: slide .16s }
@keyframes slide { from { transform: translateX(24px); opacity: 0 } }
.drawer .mb { overflow: auto; align-content: start }
.x { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 6px; cursor: pointer }
.x:hover { background: var(--surface2); color: var(--ink) }
video.player { width: 100%; max-height: 62vh; background: #000; border-radius: 6px; display: block }
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-toast); display: grid; gap: 8px; justify-items: end }
.toast { background: var(--night); color: #fff; padding: 10px 14px; border-radius: 6px; box-shadow: var(--shadow); font-size: 13.5px; max-width: 420px; animation: fade .2s; border-left: 3px solid #5fc58f }
.toast.err { border-left-color: #ff8a84 }
.palette { width: min(640px, 100%); align-self: start; margin-top: 10vh }
.palette input { border: 0; background: none; font-size: 16px; padding: 15px 18px; width: 100%; outline: none; border-bottom: 1px solid var(--line) }
.palette .res { max-height: 50vh; overflow: auto; padding: 6px }
.palette a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; align-items: center }
.palette a:hover, .palette a.sel { background: var(--blue-soft) }
.palette a span { font-size: 12px; color: var(--muted) }
.palette a small { display: block; color: var(--muted) }
.menu { position: fixed; z-index: var(--z-menu); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; min-width: 220px; display: grid }
.menu button, .menu a { text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: 5px; cursor: pointer; color: var(--ink); text-decoration: none }
.menu button:hover, .menu a:hover { background: var(--surface2) }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0 }

/* ---------- connexion : une carte centrée, rien d'autre */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg) }
.auth > div { width: min(420px, 100%) }
.auth .box { width: 100%; background: var(--surface) var(--brand-grad) top / 100% 4px no-repeat; border: 1px solid var(--line); border-radius: 10px; padding: 30px 28px 28px; display: grid; gap: 16px }
.auth .box .brand .chip.marque img { width: 46px; border-radius: 9px }
.auth .box .brand { border-bottom: 1px solid var(--line); padding: 0 0 16px; margin: 0 }
.auth .box h2 { font-size: 20px }
.auth .box .steps { display: flex; gap: 6px } .auth .box .steps i { flex: 1; height: 3px; border-radius: 99px; background: var(--line) } .auth .box .steps i.on { background: var(--night) }
.auth .note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center }
.otp { font: 500 26px var(--f-mono); letter-spacing: .45em; text-align: center; padding: 10px }
.err-box { background: var(--bad-soft); color: var(--bad); border-radius: 6px; padding: 10px 12px; font-size: 13.5px }
.info-box { background: var(--blue-soft); color: var(--ink2); border-radius: 6px; padding: 10px 12px; font-size: 13.5px }
.warn-box { background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 10px 12px; font-size: 13.5px }

/* ---------- divers */
.qr { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px; width: 190px; max-width: 100% } .qr svg { width: 100%; height: auto; display: block }
.secret { font: 500 14px var(--f-mono); letter-spacing: .06em; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere }
iframe.bilan { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 6px; background: var(--surface) }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px }
.st { border: 1px solid var(--line); border-radius: 6px; padding: 11px 13px; display: flex; gap: 10px; align-items: flex-start; background: var(--surface) }
.st i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--c, var(--muted)) }
.st.ok i { --c: var(--ok) } .st.warn i { --c: var(--warn) } .st.bad i { --c: var(--bad) }
.st b { display: block; font-weight: 600 } .st small { color: var(--muted); font-size: 12.5px }
.comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.comment:last-child { border-bottom: 0 }
.comment .txt { white-space: pre-wrap; overflow-wrap: anywhere }
.mail { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: grid; gap: 4px; background: var(--surface) }
.mail pre { white-space: pre-wrap; font: 13px/1.5 var(--f-body); margin: 6px 0 0; color: var(--ink2); max-height: 220px; overflow: auto }
.day { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.day:last-child { border-bottom: 0 }
.day .dh { font-weight: 600; text-transform: capitalize } .day .dh small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400 }
.progs { display: grid; gap: 4px }
.progline { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 10px; border-radius: 5px; background: var(--bg2) }
.progline .tc, .progline .mono { font-size: 13px }
.progline.sp { box-shadow: inset 3px 0 0 var(--pink) }
.progline > * { min-width: 0 }
@media (max-width: 700px) { .progline { grid-template-columns: minmax(0, 1fr) } .day { grid-template-columns: minmax(0, 1fr); gap: 8px } .progline .row { flex-wrap: wrap } }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)) }
.marks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } @media (max-width: 700px) { .cmp { grid-template-columns: 1fr } }
.cmp > div { border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: var(--bg2) } .cmp .lbl { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-bottom: 6px }
mark.miss { background: var(--bad-soft); color: var(--bad); border-radius: 3px; padding: 0 2px } mark.extra { background: var(--warn-soft); color: var(--warn); border-radius: 3px; padding: 0 2px }
.skeleton { height: 120px; border-radius: var(--r); background: linear-gradient(90deg, var(--surface) 0, var(--surface2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: sk 1.2s infinite linear; border: 1px solid var(--line) }
@keyframes sk { to { background-position: -200% 0 } }

/* ---------- assistant IA */
.assist-btn { white-space: nowrap }
.assist { display: grid; grid-template-rows: 1fr auto; min-height: 0; height: 100% }
.assist .msgs { overflow: auto; padding: 18px; display: grid; gap: 12px; align-content: start }
.assist .m { max-width: 92%; padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55 }
.assist .m.u { justify-self: end; background: var(--night); color: #fff }
.assist .note-ia { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink2); background: var(--cyan-soft); border-radius: 6px; padding: 8px 10px }
.assist .m.a { justify-self: start; background: var(--surface2); color: var(--ink) }
.assist .m.a a { color: var(--blue); text-decoration: underline }
.assist .m.wait { color: var(--muted); font-style: italic }
.assist .sugg { display: flex; flex-wrap: wrap; gap: 6px }
.assist form { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface) }
.assist form textarea { min-height: 42px; max-height: 160px; resize: none }

@media (max-width: 920px) {
  .shell { grid-template-columns: minmax(0, 1fr) }
  .rail { position: fixed; z-index: 40; width: 264px; transform: translateX(-100%); transition: transform .2s }
  .rail.open { transform: none; box-shadow: var(--shadow) }
  .burger { display: inline-flex !important }
  .topbar { padding: 8px 16px; gap: 8px } .assist-btn span { display: none } .page { padding: 18px 16px 72px } .userbtn .who, .clock, .search kbd { display: none }
  .hero .prog { min-width: 0 } .phead > .row { width: 100% }
}
.burger { display: none }

/* contrôle MXPLORER : tableau en cartes sur mobile */
@media (max-width: 760px) {
  .t.ctrl thead { display: none }
  .t.ctrl tr { display: grid; grid-template-columns: 112px 1fr; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line) }
  .t.ctrl td { display: block; padding: 0; border: 0; text-align: left; white-space: normal }
  .t.ctrl td:first-child { grid-row: span 5 }
  .t.ctrl td:first-child .cap { width: 112px !important }
  .t.ctrl td[colspan] { grid-column: 1 / -1 }
  .t.ctrl td[data-l]::before { content: attr(data-l) " : "; color: var(--muted); font-size: 12px }
  .t.ctrl td[data-l] .sub, .t.ctrl td[data-l] .strong { display: inline; margin-left: 4px }
  .t.ctrl td:last-child { grid-column: 1 / -1 }
}

/* ---------- paramètres : rubriques à gauche, contenu à droite */
.reglages { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start }
.reglages-nav { display: grid; gap: 2px; position: sticky; top: 76px }
.reglages-nav button { text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: 6px; font-weight: 500; color: var(--ink2); cursor: pointer }
.reglages-nav button:hover { background: var(--surface2) }
.reglages-nav button.on { background: var(--blue-soft); color: var(--night); font-weight: 600; box-shadow: inset 3px 0 0 var(--pink) }
@media (max-width: 860px) { .reglages { grid-template-columns: minmax(0, 1fr) } .reglages-nav { position: static; grid-auto-flow: column; overflow-x: auto } .reglages-nav button { white-space: nowrap } }
.etapes { list-style: none; margin: 0; padding: 0; display: grid }
.etapes li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line) }
.etapes li:last-child { border-bottom: 0 }
.etapes .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; background: var(--surface2); color: var(--ink2) }
.etapes li.fait .num { background: var(--ok-soft); color: var(--ok) }
.etapes li.fait b { color: var(--muted); font-weight: 500 }
.etapes small { display: block; color: var(--muted); font-size: 12.5px }
.source { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px }
.source small { display: block; margin-top: 4px; line-height: 1.5 }

/* ---------- cycle de vie d'une campagne : où en est-on, que faire ensuite */
.cycle { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; border-top: 1px solid var(--line); padding-top: 12px }
.cycle .et { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0 }
.cycle .et i { height: 4px; border-radius: 99px; background: var(--line) }
.cycle .et.fait i { background: var(--ok) } .cycle .et.fait { color: var(--ink2) }
.cycle .et.actuel i { background: var(--brand-grad) } .cycle .et.actuel { color: var(--night); font-weight: 600 }
.cycle .et span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.suite { display: flex; gap: 12px; align-items: center; background: var(--blue-soft); border-radius: 6px; padding: 10px 12px; font-size: 13.5px }
.suite b { color: var(--night) }
@media (max-width: 760px) { .cycle { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

/* ---------- graphiques */
.chart .grille { stroke: var(--line); stroke-width: 1 }
.chart .ax, .chart text { fill: var(--muted); font: 11px var(--f-body) }
.chart .col { cursor: default; outline: none } .chart .col:hover path, .chart .col:hover rect[fill]:not([fill="transparent"]), .chart .col:focus path { filter: brightness(1.12) }
.bulle { position: fixed; z-index: var(--z-menu); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: 12.5px; pointer-events: none; display: grid; gap: 3px; min-width: 120px }
.bulle .bl { display: flex; align-items: center; gap: 7px } .bulle .bl i { width: 12px; height: 3px; border-radius: 2px; flex: none } .bulle b { font-weight: 600; color: var(--ink) } .bulle span { color: var(--muted) }
.anneau { display: flex; gap: 20px; align-items: center; flex-wrap: wrap }
.anneau svg { flex: none } .anneau .arc { cursor: default; outline: none; transition: stroke-width .15s } .anneau .arc:hover, .anneau .arc:focus { stroke-width: 22 }
.anneau .av { font: 600 28px var(--f-head); fill: var(--ink) } .anneau .al { font: 12px var(--f-body); fill: var(--muted) }
.leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; min-width: 170px; flex: 1 }
.leg li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 13px; color: var(--ink2) }
.leg i { width: 10px; height: 10px; border-radius: 3px } .leg b { font-weight: 600; color: var(--ink) }
.spark { display: block; margin-top: 6px }
.jauge { display: block; max-width: 260px; margin: 0 auto } .jauge .jv { font: 600 34px var(--f-head); fill: var(--ink) } p.jl { margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--muted) }
.jauge-v { transition: stroke-dasharray .8s ease-out }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 280px }
.cal span { aspect-ratio: 1; border-radius: 4px; outline: none } .cal span:hover, .cal span:focus { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--line2) }
.bague text { font: 600 10px var(--f-body); fill: var(--ink) }

/* ---------- tableau de bord : bandeau héros + défis */
.heros { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px }
@media (max-width: 1000px) { .heros { grid-template-columns: minmax(0, 1fr) } }
.heros .score { background: var(--night) var(--brand-grad) top / 100% 4px no-repeat; color: #fff; border-radius: var(--r); padding: 18px 20px; display: grid; gap: 10px; align-content: start }
.heros .score .jauge .jv { fill: #fff } .heros .score p.jl { color: #d9d4e6 } .heros .score .jauge path:first-child { stroke: rgb(255 255 255 / .12) }
.heros .score h2 { color: #fff } .heros .score .sous { color: #b9b2cc; font-size: 13px }
.badges { display: flex; flex-wrap: wrap; gap: 6px }
.badge-r { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 99px; background: rgb(255 255 255 / .1); color: #fff }
.badge-r svg { width: 14px; height: 14px; color: var(--cyan) }
.badge-r.clair { background: var(--blue-soft); color: var(--night) } .badge-r.clair svg { color: #6a4fd6 }
.kpi .spark { width: 100%; height: 30px }
.defi { display: grid; gap: 6px }
.defi .row { font-size: 13px }
.classement { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.classement li { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--line) }
.classement li:last-child { border-bottom: 0 }
.classement .rang { font-weight: 600; color: var(--muted); text-align: center } .classement li:first-child .rang { color: var(--pink) }
.classement small { display: block; color: var(--muted); font-size: 12px }
.classement .pts { font-weight: 600; font-size: 15px } .classement .pts small { text-align: right }

/* ---------- tableaux kanban (glisser-déposer) */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start }
.kcol { min-width: 0; grid-template-columns: minmax(0, 1fr); background: var(--surface2); border-radius: var(--r); padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 200px; transition: background .15s, box-shadow .15s }
.kcol.cible { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--pink) }
.kcol > header { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-weight: 600; font-size: 13.5px }
.kcol > header i { width: 8px; height: 8px; border-radius: 50% } .kcol > header .n { margin-left: auto; color: var(--muted); font-weight: 500 }
.kcol > header small { display: block; font-weight: 400; color: var(--muted); font-size: 12px }
.kcarte { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; cursor: grab; box-shadow: 0 1px 2px rgb(21 15 36 / .04); transition: box-shadow .15s, transform .15s }
.kcarte:hover { box-shadow: 0 4px 14px rgb(21 15 36 / .10) } .kcarte:focus-visible { outline: 2px solid var(--pink) }
.kcarte.glisse { opacity: .45; transform: rotate(1.5deg) } .kcarte .tete { display: flex; gap: 10px; align-items: flex-start }
.kcarte .tete div { min-width: 0; flex: 1 } .kcarte b { display: block; font-size: 13.5px } .kcarte small { color: var(--muted); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kcarte .pied { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted) }
.kcarte .pied .grow { flex: 1 }
.kvide { border: 1.5px dashed var(--line2); border-radius: 8px; padding: 14px; text-align: center; color: var(--muted); font-size: 12.5px }

/* ---------- validation rapide */
.rapide { display: grid; gap: 14px; max-width: 920px; margin: 0 auto; width: 100% }
.rapide .carte-v { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: grid }
.rapide .carte-v img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; display: block }
.rapide .carte-v .corps { padding: 14px 16px; display: grid; gap: 8px }
.rapide .choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } .rapide .choix .btn { padding: 14px; font-size: 15px }
.rapide kbd { font: 500 11px var(--f-body); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; opacity: .7; margin-left: 6px }
.bravo { text-align: center; display: grid; gap: 8px; justify-items: center; padding: 40px 20px }
.bravo .rond { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); animation: pop .4s ease-out }
.bravo .rond svg { width: 30px; height: 30px }
@keyframes pop { from { transform: scale(.6); opacity: 0 } }

.heros .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (max-width: 640px) { .heros .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.kcarte { position: relative } .kcarte .tete { padding-right: 22px }
.kcarte .kdep { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font: 600 16px/1 var(--f-body); opacity: .55 }
.kcarte:hover .kdep, .kcarte:focus-within .kdep, .kcarte .kdep:focus-visible { opacity: 1 } .kcarte .kdep:hover { background: var(--surface2); color: var(--ink) }
@media (hover: none) { .kcarte .kdep { opacity: 1 } }
.rapide .carte-v > img { max-height: 48vh; object-fit: contain }
.rapide .avance { height: 6px; border-radius: 99px; background: var(--surface2); overflow: hidden }
.rapide .avance i { display: block; height: 100%; background: linear-gradient(90deg, #6a4fd6, var(--pink)); border-radius: 99px; transition: width .3s }
.avancement { display: grid; gap: 16px }
.avancement .leg { flex: 0 1 300px }

/* ---------- calendrier des bilans */
.frise { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px }
.etape-b { flex: none; min-width: 168px; display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 9px 12px; cursor: pointer; font: inherit; color: var(--ink) }
.etape-b:hover { border-color: var(--line2) } .etape-b.on { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night) }
.etape-b small { color: var(--muted); font-size: 12px } .etape-b small.rouge { color: var(--bad); font-weight: 500 }
.etape-b .pt { width: 9px; height: 9px; border-radius: 50%; background: var(--warn) } .etape-b .pt.brouillon, .etape-b .pt.valide { background: #6a4fd6 } .etape-b .pt.envoye { background: var(--ok) }
.tag-b { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--blue-soft); color: var(--night) }
.tag-b.final { background: #e6f4ec; color: var(--ok) }

/* ---------- disponibilités */
.verif { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(140px, 1fr)) auto auto; gap: 10px; align-items: end }
@media (max-width: 1000px) { .verif { grid-template-columns: 1fr 1fr } }
.jours { display: flex; gap: 3px; flex-wrap: wrap } .jour input { position: absolute; opacity: 0; pointer-events: none }
.jour span { display: inline-grid; place-items: center; min-width: 38px; height: 34px; border: 1px solid var(--line2); border-radius: 6px; font-size: 12.5px; cursor: pointer; color: var(--muted); background: var(--surface) }
.jour input:checked + span { background: var(--blue-soft); border-color: #6a4fd6; color: var(--night); font-weight: 600 } .jour input:focus-visible + span { outline: 2px solid var(--pink) }
.verdict { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid }
.verdict.oui { background: var(--surface2); border-color: #bfe3cd } .verdict.non { background: var(--surface2); border-color: #f2c4c8 }
.verdict .rond { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ok) } .verdict.non .rond { background: var(--bad) }
.verdict .rond svg { width: 18px; height: 18px } .verdict b { font-size: 16px } .verdict p { margin: 4px 0 6px } .verdict ul { margin: 0 0 8px; padding-left: 18px }
.grille-d th.c, .grille-d td.c { text-align: center; padding: 4px } .grille-d th.c small { display: block; font-weight: 400; color: var(--muted); font-size: 11px }
.grille-d tbody th { text-align: left; font-weight: 600; white-space: nowrap; padding: 6px 12px }
.case { width: 100%; min-width: 74px; border: 0; border-radius: 6px; padding: 6px 4px; display: grid; gap: 1px; cursor: pointer; font: inherit }
.case b { font-size: 12px } .case small { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px; margin: 0 auto }
.case.libre { background: #e7f5ec; color: #145c38 } .case.vendu { background: #6a4fd6; color: #fff } .case.option { background: #fbecd2; color: #7a4600 }
.case.partiel { background: #e6e0fa; color: #3c2a8f } .case.hors { background: var(--surface2); color: var(--muted) } .case:focus-visible { outline: 2px solid var(--pink) }
.legend i.leg-libre { background: #bfe3cd } .legend i.leg-vendu { background: #6a4fd6 } .legend i.leg-option { background: #f0c879 } .legend i.leg-partiel { background: #c9bdf3 } .legend i.leg-hors { background: var(--line2) }
.jours-l { display: inline-flex; gap: 2px } .jours-l i { font-style: normal; width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: 10.5px; background: var(--surface2); color: var(--muted) }
.jours-l i.on { background: var(--blue-soft); color: var(--night); font-weight: 600 }
/* ---------- aide */
.faq { display: grid; gap: 8px } .faq details.q { padding: 0 }
.faq summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; gap: 10px; align-items: center } .faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 18px } .faq details[open] summary::after { content: "–" }
.faq .rep { padding: 0 18px 4px; color: var(--ink2); line-height: 1.6 } .faq .row.end { padding: 6px 18px 14px }
.etape-b.caduc { opacity: .55 } .etape-b.caduc .pt { background: var(--line2) }
.causes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }

/* ---------- programmes : guide de la semaine */
.guide-barre { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between }
.guide-barre .sem { font-size: 15px } .guide-barre .legend { margin: 0 }
.lg-libre { background: #cfe9da !important; border: 1px solid var(--ok) } .lg-option { background: #f6dfb4 !important; border: 1px solid #c27a00 }
.lg-vendu { background: #d9d1f7 !important; border: 1px solid #6a4fd6 } .lg-change { background: repeating-linear-gradient(45deg, #f7c9cb 0 3px, #fdeceb 3px 6px) !important; border: 1px solid var(--bad) }
.legend i.lg-libre, .legend i.lg-option, .legend i.lg-vendu, .legend i.lg-change { width: 12px; height: 12px; border-radius: 3px; display: inline-block }
.offres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px }
.offre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i t c" "b b b"; gap: 6px 10px; align-items: center; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; transition: box-shadow .15s, border-color .15s }
.offre:hover { border-color: var(--line2); box-shadow: 0 4px 14px rgb(21 15 36 / .08) } .offre:focus-visible { outline: 2px solid var(--pink) }
.offre .oi { grid-area: i; width: 32px; height: 32px; border-radius: 8px; background: var(--blue-soft); color: #6a4fd6; display: grid; place-items: center } .offre .oi svg { width: 18px; height: 18px }
.offre > span:nth-child(2) { grid-area: t; min-width: 0 } .offre b { display: block; font-size: 14px } .offre small { color: var(--muted); font-size: 12px }
.offre .cpt { grid-area: c; font-weight: 600; color: var(--ink2) }
.barre-etat { grid-area: b; display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--surface2) } .barre-etat i { display: block; height: 100% }
.euro { font: 700 14px/1 var(--f-head) }
.guide-wrap { overflow: hidden }
.g-grille { --col: minmax(118px, 1fr); display: grid; grid-template-columns: 52px repeat(7, var(--col)); overflow-x: auto; min-width: 0 }
.g-tete, .g-corps, .g-nuit { display: contents }
.g-tete > span { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 8px; font-size: 12.5px; color: var(--muted); text-align: center }
.g-tete > span b { color: var(--ink); font-weight: 600 } .g-tete > span.auj { color: var(--pink) } .g-tete > span.auj b { color: var(--pink) }
.g-regle { position: relative; height: var(--h); border-right: 1px solid var(--line) }
.g-regle span { position: absolute; right: 6px; transform: translateY(-50%); font: 11px var(--f-mono); color: var(--muted) } .g-regle span:first-child { transform: none }
.g-col { position: relative; height: var(--h); border-right: 1px solid var(--line) } .g-col.auj { background: var(--surface2) }
.g-ligne { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); pointer-events: none }
.g-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--pink); z-index: 2; pointer-events: none } .g-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink) }
.g-bloc { position: absolute; left: 3px; right: 3px; border: 1px solid var(--line2); border-left-width: 4px; border-radius: 6px; padding: 4px 6px; text-align: left; overflow: hidden; cursor: pointer; font: inherit; color: var(--ink); background: var(--surface); display: flex; flex-direction: column; gap: 1px; z-index: 1; transition: box-shadow .15s, transform .15s }
.g-bloc:hover { box-shadow: 0 6px 18px rgb(21 15 36 / .14); z-index: 4 } .g-bloc:focus-visible { outline: 2px solid var(--pink); z-index: 4 }
.g-bloc b { font-size: 12.5px; line-height: 1.25 } .g-bloc small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .g-bloc small.qui { color: #4b33b5; font-weight: 600 } .g-bloc small.conf { color: var(--warn) }
.g-bloc.libre { background: var(--surface2); border-color: #b6dcc6; border-left-color: var(--ok) }
.g-bloc.option { background: var(--warn-soft); border-color: #ecd09a; border-left-color: #c27a00 }
.g-bloc.vendu { background: var(--surface2); border-color: #cfc5f3; border-left-color: #6a4fd6 }
.g-bloc.change { background: repeating-linear-gradient(45deg, #fdeceb 0 6px, #fff 6px 12px); border-left-color: var(--bad) }
.g-offres { position: absolute; inset: 0; pointer-events: none; z-index: 5 }
.g-offre { position: absolute; right: 4px; pointer-events: auto; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px; border-radius: 99px; border: 1px solid; font: 600 10.5px var(--f-mono); cursor: pointer; background: var(--surface) }
.g-offre svg { width: 11px; height: 11px } .g-offre .euro { font-size: 10px }
.g-offre.libre { color: var(--ok); border-color: #9fd0b4; background: var(--surface2) } .g-offre.option { color: #9a5600; border-color: #e3bf7a; background: var(--warn-soft) }
.g-offre.vendu { color: #4b33b5; border-color: #b9acee; background: var(--surface2) } .g-offre.change { color: var(--bad); border-color: #efa9ad; background: var(--bad-soft) }
.g-offre:hover { box-shadow: 0 3px 10px rgb(21 15 36 / .18) } .g-offre:focus-visible { outline: 2px solid var(--pink) }
.g-nuit > span { border-top: 1px solid var(--line); padding: 6px 3px; font: 11px var(--f-mono); color: var(--muted); display: grid; align-items: center; border-right: 1px solid var(--line) }
.g-nuit > span:first-child { justify-items: end; padding-right: 6px } .g-nuit .g-bloc { position: static; padding: 3px 6px; font: 500 11.5px var(--f-body) }
.g-jours-tabs { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line) }
.g-jours-tabs button { border: 0; background: none; padding: 9px 2px; font: 600 13px var(--f-body); color: var(--ink2); cursor: pointer; border-bottom: 2px solid transparent; display: grid; gap: 1px }
.g-jours-tabs button small { font-weight: 400; color: var(--muted); font-size: 11px } .g-jours-tabs button.on { border-bottom-color: var(--pink); color: var(--ink) } .g-jours-tabs button.auj small { color: var(--pink) }
.g-liste { list-style: none; margin: 0; padding: 0 } .g-liste li + li { border-top: 1px solid var(--line) }
.g-liste button { width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer }
.g-liste button.offre-l { padding-left: 28px } .g-liste .h { font: 12px var(--f-mono); color: var(--muted) } .g-liste .t b { display: inline; font-size: 14px } .g-liste .t svg { width: 13px; height: 13px; margin-right: 4px; color: #6a4fd6 }
.g-liste .t small { display: block; color: var(--muted); font-size: 12px }
.libre-p { background: #e6f4ec; color: var(--ok) } .option-p { background: var(--warn-soft); color: #9a5600 } .vendu-p { background: #ece8fb; color: #4b33b5 } .change-p { background: var(--bad-soft); color: var(--bad) }
/* fiche émission */
.fiche-em { display: grid; gap: 14px; align-content: start } .fiche-em section { display: grid; gap: 8px } .fiche-em h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
.mh h2 svg { width: 18px; height: 18px; color: #6a4fd6; vertical-align: -3px }
.jours-h { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px } .jours-h div { border: 1px solid var(--line); border-radius: 6px; padding: 6px 4px; text-align: center; display: grid; gap: 2px; background: var(--surface2); color: var(--muted) }
.jours-h div.on { background: var(--surface); color: var(--ink) } .jours-h b { font-size: 12px } .jours-h span { font: 11px var(--f-mono); overflow-wrap: anywhere }
.slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.slots .slot { display: grid; gap: 1px; padding: 5px 9px; border-radius: 6px; border: 1px solid; min-width: 64px } .slots .slot b { font: 600 12.5px var(--f-mono) } .slots .slot small { font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.slots .slot.libre { background: var(--surface2); border-color: #9fd0b4; color: var(--ok) } .slots .slot.option { background: var(--warn-soft); border-color: #e3bf7a; color: #9a5600 } .slots .slot.vendu { background: var(--surface2); border-color: #b9acee; color: #4b33b5 }
.slots .slot.hors-demande { opacity: .45 }
.semaines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
.sem-c { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; display: grid; gap: 1px } .sem-c b { font-size: 12.5px } .sem-c small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sem-c.libre { background: var(--surface2); border-color: #b6dcc6 } .sem-c.partiel { background: linear-gradient(90deg, #f3faf6 50%, #f1eefc 50%); border-color: #cfc5f3 } .sem-c.vendu { background: var(--surface2); border-color: #cfc5f3 }
.sem-c.option { background: var(--warn-soft); border-color: #ecd09a } .sem-c.hors { background: var(--surface2) }
.liste-p { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px } .liste-p li { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px } .liste-p small { display: block; color: var(--muted); font-size: 12px }
.verdict.partiel .rond { background: var(--warn-soft); color: #9a5600; font-weight: 700 }
.slots-choix { display: flex; flex-wrap: wrap; gap: 6px }
.slot-c { position: relative } .slot-c input { position: absolute; opacity: 0 } .slot-c span { display: inline-block; padding: 5px 10px; border: 1px solid var(--line2); border-radius: 99px; font: 500 12.5px var(--f-mono); cursor: pointer; background: var(--surface) }
.slot-c input:checked + span { background: var(--night); color: #fff; border-color: var(--night) } .slot-c input:focus-visible + span { outline: 2px solid var(--pink) }
tr.offre-r th, tr.offre-r td:first-child { padding-left: 26px } .sous-l { display: block; font-size: 11px; font-weight: 400; color: var(--muted) }
/* connexions et API */
.deux-sens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px }
.deux-sens > div { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--surface2) } .deux-sens > div > b { display: flex; gap: 8px; align-items: center } .deux-sens > div > b svg { width: 16px; height: 16px; color: #6a4fd6 }
.deux-sens p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink2) }
.connecteur { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px }
.doc-api { display: grid; gap: 6px } .doc-api details { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px }
.doc-api summary { display: flex; gap: 10px; align-items: baseline; cursor: pointer; flex-wrap: wrap } .doc-api summary .muted { font-size: 13px }
.doc-api pre { margin: 8px 0 0; padding: 10px; background: var(--night); color: #e8e4f2; border-radius: 6px; font: 12px/1.5 var(--f-mono); overflow-x: auto; white-space: pre }
.meth { font: 700 11px var(--f-mono); padding: 2px 6px; border-radius: 4px; background: var(--cyan-soft); color: #0b6461 } .meth.post { background: #ece8fb; color: #4b33b5 }
.cle-v { font-size: 14px; padding: 12px; background: var(--surface2); border: 1px dashed var(--line2); border-radius: 6px; overflow-wrap: anywhere; user-select: all; margin: 10px 0 0 }
.grille-e td:first-child { min-width: 240px } .grille-e td:nth-child(3) { min-width: 150px }
.parcours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; counter-reset: p }
.parcours li a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--ink2); font-size: 12.5px; font-weight: 500; text-decoration: none; height: 100% }
.parcours li a:hover { border-color: var(--line2); color: var(--ink) } .parcours .num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); font: 600 12px var(--f-body); color: var(--muted) }
.parcours li.on a { border-color: var(--night); color: var(--ink); box-shadow: inset 0 -2px 0 var(--pink) } .parcours li.on .num { background: var(--night); color: #fff }
@media (max-width: 820px) { .parcours { grid-template-columns: 1fr; } .parcours li:not(.on) { display: none } }

/* ---------- pige : chaîne de traitement */
.chaine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: e }
@media (max-width: 1250px) { .chaine { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 680px) { .chaine { grid-template-columns: minmax(0, 1fr) } }
.etape { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; align-content: start; border-top: 3px solid var(--line2) }
.etape.ok { border-top-color: var(--ok) } .etape.warn { border-top-color: #c27a00 } .etape.live { border-top-color: var(--pink) }
@media (min-width: 1251px) { .etape:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 30px; width: 10px; height: 10px; border-top: 2px solid var(--line2); border-right: 2px solid var(--line2); transform: rotate(45deg); z-index: 1 } }
.etape > header { display: flex; gap: 10px; align-items: center } .etape h2 { margin: 0; font-size: 16px } .etape header small { color: var(--muted); font-size: 12.5px }
.etape .num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); font: 700 14px var(--f-head); color: var(--ink2) }
.etape.ok .num { background: var(--ok-soft); color: var(--ok) } .etape.warn .num { background: var(--warn-soft); color: #9a5600 } .etape.live .num { background: var(--pink); color: #fff; animation: pulse-rose 1.6s infinite }
@keyframes pulse-rose { 50% { box-shadow: 0 0 0 6px rgb(212 42 115 / .15) } }
.chiffre { display: flex; gap: 12px; align-items: center } .chiffre b { font: 600 34px/1 var(--f-head); color: var(--ink) } .chiffre span { font-size: 13px; color: var(--muted); line-height: 1.4 } .chiffre em { color: #9a5600; font-style: normal; font-weight: 600 }
.manque { display: grid; gap: 4px; padding: 10px; background: var(--warn-soft); border-radius: 8px; font-size: 13px } .manque > b { color: #9a5600 }
.manque a { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); text-decoration: none; padding: 3px 0; border-top: 1px solid rgb(154 86 0 / .15) } .manque a small { color: var(--muted) } .manque a.urgent small { color: var(--bad); font-weight: 600 }
.bon { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 13px; color: var(--ok) } .bon svg { width: 15px; height: 15px }
.manque-l { margin: 0; font-size: 13px; color: #9a5600 }
.depot { border: 1.5px dashed var(--line2); border-radius: 10px; padding: 14px; display: grid; gap: 3px; justify-items: center; text-align: center; cursor: pointer; background: var(--bg2); color: var(--muted); font-size: 12.5px; transition: background .15s, border-color .15s }
.depot svg { width: 20px; height: 20px; color: #6a4fd6 } .depot b { color: var(--ink); font-size: 14px } .depot.grand { padding: 22px 14px }
.depot:hover, .depot.over { border-color: #6a4fd6; background: var(--surface2); color: var(--ink2) } .depot:focus-visible { outline: 2px solid var(--pink) }
.check.petit { font-size: 13px; color: var(--ink2) }
.envois { display: grid; gap: 8px } .envois:empty { display: none }
.envoi { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 5px; font-size: 13px } .envoi b { overflow-wrap: anywhere; font-size: 13px }
.envoi.fini { border-color: #b6dcc6; background: var(--surface2) } .envoi.err { border-color: #efa9ad; background: var(--bad-soft) } .err-t { color: var(--bad) }
.flux-l { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.progres { display: grid; gap: 8px } .progres b { font: 600 22px var(--f-head) }
.sous-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px }
.sous-etapes li { display: flex; gap: 8px; align-items: center; color: var(--muted) } .sous-etapes li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line2); flex: none }
.sous-etapes li.fait { color: var(--ok) } .sous-etapes li.fait::before { background: var(--ok); border-color: var(--ok) }
.sous-etapes li.encours { color: var(--ink); font-weight: 600 } .sous-etapes li.encours::before { border-color: var(--pink); background: var(--surface); animation: pulse-rose 1.6s infinite }

/* ---------- programmes v2 : semaine aérée */
.prog-barre { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between }
.prog-barre .sem { font-size: 15px } .prog-barre .seg .n { font-size: 11.5px; color: var(--muted); margin-left: 4px }
.legende-p { margin: 0 } .lp { display: inline-block; width: 14px; height: 10px; border-radius: 3px; border: 1px solid var(--line2); background: var(--surface) }
.lp.vendu { background: #ece8fb; border-color: #6a4fd6; box-shadow: inset 3px 0 0 #6a4fd6 } .lp.option { background: var(--surface2); border: 1px dashed #c27a00 } .lp.libre { background: var(--surface) }
.prog-wrap { overflow: hidden }
.p-grille { display: grid; grid-template-columns: 46px repeat(7, minmax(112px, 1fr)); grid-template-rows: auto var(--h); overflow-x: auto }
.p-tete { display: contents } .p-tete > span { padding: 12px 8px 10px; font-size: 12.5px; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); background: var(--surface) }
.p-tete > span b { color: var(--ink); font-weight: 600 } .p-tete > span.auj, .p-tete > span.auj b { color: var(--pink) }
.p-regle { position: relative; grid-row: 2 } .p-regle span { position: absolute; right: 8px; transform: translateY(-50%); font: 11px var(--f-body); color: var(--muted) } .p-regle span:first-child { transform: translateY(2px) }
.p-col { position: relative; grid-row: 2; border-left: 1px solid var(--line) } .p-col.auj { background: linear-gradient(180deg, #fdf5f9, transparent 40%) }
.p-ligne { position: absolute; left: 0; right: 0; border-top: 1px solid #f0eef4; pointer-events: none }
.p-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--pink); z-index: 3; pointer-events: none } .p-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink) }
.p-bloc { position: absolute; left: 4px; right: 4px; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); text-align: left; font: inherit; color: var(--ink); cursor: pointer; overflow: hidden; transition: box-shadow .15s, border-color .15s; z-index: 1 }
.p-bloc:hover { border-color: var(--line2); box-shadow: 0 6px 16px rgb(21 15 36 / .10); z-index: 2 } .p-bloc:focus-visible { outline: 2px solid var(--pink); z-index: 2 }
.p-bloc b { font-size: 12.5px; font-weight: 600; line-height: 1.25 } .p-bloc small { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px }
.p-bloc.vendu { background: var(--surface2); border-color: #ddd5f8; box-shadow: inset 3px 0 0 #6a4fd6 } .p-bloc.option { background: var(--surface2); border: 1px dashed #e0b45f }
.p-bloc.change { background: repeating-linear-gradient(45deg, #fdf0f0 0 6px, #fff 6px 12px); border-color: #f2bcbf }
.p-bloc .parrain { align-self: flex-start; margin-top: 2px; font-size: 11px; font-weight: 600; color: #4b33b5; background: var(--surface); border: 1px solid #ddd5f8; border-radius: 99px; padding: 1px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.p-bloc .conf, .conf { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e0a030 }
.o-badges { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px }
.o-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: 99px; font: 600 11px var(--f-body); border: 1px solid var(--line2); background: var(--surface); color: var(--ink2) }
.o-badge svg { width: 11px; height: 11px } .o-badge .euro { font-size: 10px }
.o-badge.vendu { background: #ece8fb; border-color: #c9bdf3; color: #4b33b5 } .o-badge.option { background: #fff3dc; border-color: #ecc985; color: #8a5200 }
.o-badge.partiel { background: linear-gradient(90deg, #ece8fb 50%, #fff 50%); border-color: #c9bdf3; color: #4b33b5 } .o-badge.libre { color: var(--ok); border-color: #b6dcc6 }
.o-badge:hover { box-shadow: 0 2px 8px rgb(21 15 36 / .15) }
.p-nuit { padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--bg2) }
.p-liste { list-style: none; margin: 0; padding: 6px 0 } .p-liste li + li { border-top: 1px solid var(--line) }
.p-liste button { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer }
.p-liste button.vendu { box-shadow: inset 3px 0 0 #6a4fd6; background: var(--bg2) } .p-liste button.option { box-shadow: inset 3px 0 0 #e0a030 }
.p-liste .h { font: 12px var(--f-mono); color: var(--muted) } .p-liste .t b { display: block; font-size: 14px } .p-liste .t small { color: var(--muted); font-size: 12px }
/* offres de parrainage : créneaux × jours */
.o-liste { display: grid; gap: 0 } .o-carte { padding: 16px 18px; display: grid; gap: 12px } .o-carte + .o-carte { border-top: 1px solid var(--line) }
.o-carte header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center }
.o-carte .oi { width: 36px; height: 36px; border-radius: 10px; background: var(--blue-soft); color: #6a4fd6; display: grid; place-items: center } .o-carte .oi svg { width: 18px; height: 18px }
.o-carte h3 { margin: 0; font-size: 15px } .o-carte header small { color: var(--muted); font-size: 12.5px }
.o-resume { text-align: right } .o-resume b { font: 600 22px var(--f-head); display: block; line-height: 1 } .o-resume small { color: var(--muted); font-size: 12px }
.o-table { border-collapse: separate; border-spacing: 4px; } .o-table th { font: 500 11.5px var(--f-mono); color: var(--muted); padding: 0 4px; text-align: center } .o-table tbody th { font-family: var(--f-body); text-align: left; padding-right: 10px }
.o-cel { display: block; width: 44px; height: 22px; border-radius: 5px; border: 1px solid var(--line2); background: var(--surface) }
.o-cel.vendu { background: #6a4fd6; border-color: #6a4fd6 } .o-cel.option { background: #f6dfb4; border-color: #c27a00 } .o-cel.libre { background: var(--surface2); border-color: #b6dcc6 }
.o-cel.change { background: repeating-linear-gradient(45deg, #f7c9cb 0 3px, #fdeceb 3px 6px); border-color: var(--bad) }
.o-carte footer { font-size: 13px; color: var(--ink2) }

/* ---------- assistant et copilote */
.drawer.assistant-tiroir { width: min(680px, 100%); grid-template-rows: auto 1fr auto; background: var(--bg2) }
.drawer.copilote-tiroir { grid-template-rows: auto auto 1fr }
.as-tete { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--line) }
.as-tete h2 { margin: 0; font-size: 16px } .as-tete small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px } .as-tete small svg { width: 12px; height: 12px }
.as-tete > div { flex: 1; min-width: 0 } .as-tete .x { margin-left: 4px }
.as-logo { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #45d7d4, #6a4fd6 55%, #d42a73) }
.as-logo svg { width: 18px; height: 18px } .as-logo.grand { width: 54px; height: 54px; border-radius: 16px } .as-logo.grand svg { width: 28px; height: 28px }
.as-corps { overflow: auto; padding: 18px; display: grid; gap: 14px; align-content: start }
.as-accueil { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px 4px 4px }
.as-accueil h3 { margin: 6px 0 0; font-size: 19px } .as-accueil p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 470px }
.as-sugg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 12px }
@media (max-width: 560px) { .as-sugg { grid-template-columns: 1fr } }
.as-sugg button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s }
.as-sugg button:hover { border-color: #c9bdf3; box-shadow: 0 4px 14px rgb(106 79 214 / .1) } .as-sugg button:focus-visible { outline: 2px solid var(--pink) }
.as-sugg button span { grid-row: span 2; width: 30px; height: 30px; border-radius: 8px; background: var(--blue-soft); color: #6a4fd6; display: grid; place-items: center } .as-sugg button span svg { width: 16px; height: 16px }
.as-sugg b { font-size: 13px } .as-sugg small { color: var(--muted); font-size: 12px; line-height: 1.35 }
.as-m { display: flex; gap: 10px; align-items: flex-start } .as-m.u { justify-content: flex-end }
.as-m.u > div { max-width: 82%; background: var(--night); color: #fff; padding: 10px 14px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px }
.as-m .av { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #45d7d4, #6a4fd6 55%, #d42a73); margin-top: 2px } .as-m .av svg { width: 15px; height: 15px }
.as-rep { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 12px 14px; display: grid; gap: 10px }
.md { font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere } .md > :first-child { margin-top: 0 } .md > :last-child { margin-bottom: 0 }
.md p { margin: 0 0 8px } .md h4 { margin: 12px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #4b33b5 }
.md ul, .md ol { margin: 0 0 8px; padding-left: 20px } .md li { margin: 2px 0 } .md li::marker { color: #6a4fd6 }
.md a { color: #4b33b5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px } .md b { font-weight: 600 }
.md code { font: 12.5px var(--f-mono); background: var(--surface2); padding: 1px 5px; border-radius: 4px }
.md-t { overflow-x: auto; margin: 4px 0 10px; border: 1px solid var(--line); border-radius: 8px } .md-t table { border-collapse: collapse; width: 100%; font-size: 13px }
.md-t th { background: var(--surface2); text-align: left; font-weight: 600; padding: 7px 10px; white-space: nowrap } .md-t td { padding: 7px 10px; border-top: 1px solid var(--line) }
.md-action { display: flex; gap: 8px; align-items: flex-start; background: var(--surface2); border: 1px solid #ddd5f8; border-radius: 8px; padding: 8px 10px; margin: 6px 0 0 !important; font-size: 13.5px }
.md-action svg { flex: none; width: 15px; height: 15px; color: #6a4fd6; margin-top: 3px }
.as-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 10px; border-top: 1px dashed var(--line2) } .as-actions .muted { width: 100%; font-size: 12.5px }
.as-outils { display: flex; gap: 12px; align-items: center; font-size: 12px } .lien { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline }
.as-attente { display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: 13px } .as-attente i { width: 7px; height: 7px; border-radius: 50%; background: #6a4fd6; animation: rebond 1.2s infinite ease-in-out }
.as-attente i:nth-child(2) { animation-delay: .15s } .as-attente i:nth-child(3) { animation-delay: .3s; margin-right: 6px }
@keyframes rebond { 0%, 80%, 100% { transform: scale(.5); opacity: .4 } 40% { transform: scale(1); opacity: 1 } }
.as-saisie { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 12px 16px 10px; border-top: 1px solid var(--line); background: var(--surface) }
.as-saisie textarea { resize: none; min-height: 46px; max-height: 160px; border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; font: 14px/1.4 var(--f-body); color: var(--ink); background: var(--bg2) }
.as-saisie textarea:focus { outline: none; border-color: #6a4fd6; box-shadow: 0 0 0 3px rgb(106 79 214 / .15); background: var(--surface) }
.as-env { width: 46px; height: 46px; border-radius: 12px; border: 0; color: #fff; background: var(--night); cursor: pointer; display: grid; place-items: center; align-self: end } .as-env svg { width: 18px; height: 18px } .as-env:disabled { opacity: .5 }
.as-saisie small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px }
.assist-btn svg { color: #6a4fd6 }
.cloche { position: relative; padding: 7px 9px } .cloche svg { width: 18px; height: 18px }
.cl-n { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #c27a00; color: #fff; font: 700 10.5px/18px var(--f-body); text-align: center; border: 2px solid var(--surface) } .cl-n.crit { background: var(--bad) }
.cp-tabs { padding: 0 18px; margin: 0; background: var(--surface) }
.cp-groupe { display: grid; gap: 8px } .cp-groupe h3 { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 13px }
.cp-carte { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px }
.cp-carte.critique { border-left-color: var(--bad) } .cp-carte.important { border-left-color: #c27a00 } .cp-carte.info { border-left-color: #6a4fd6 }
.cp-carte b { font-size: 14px } .cp-carte p { margin: 0; font-size: 13px; color: var(--ink2) } .cp-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.cp-conseil { display: flex; gap: 6px; align-items: flex-start; background: var(--bg2); border-radius: 6px; padding: 6px 8px } .cp-conseil svg { flex: none; width: 14px; height: 14px; color: #6a4fd6; margin-top: 2px }
.cp-histo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px } .cp-histo li { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; font-size: 13px } .cp-histo small { color: var(--muted) }
.valid-act { display: flex; gap: 12px; align-items: flex-start; background: var(--surface2); border: 1px solid #ddd5f8; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px }
.valid-act .av { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #45d7d4, #6a4fd6 55%, #d42a73) } .valid-act .av svg { width: 16px; height: 16px }
.valid-act p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink2) }

#tab { display: grid; gap: 16px; align-content: start } #tab > .hint { margin: -8px 0 0 }

/* ---------- corrections d'affichage (audit) */
.page > *, .stack > *, .cols-2-1 > *, .cols > * { min-width: 0 }
.kcarte { min-width: 0; overflow: hidden }
@media (max-width: 760px) {
  .kanban { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible }
  .kcol { min-height: 0 }
  .phead { flex-direction: column; align-items: stretch } .phead .row { flex-wrap: wrap }
  .grille-d th:first-child, .grille-d td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1 }
}
@media (max-width: 760px) {
  .verif { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .verif > label:first-child, .verif > .field:nth-of-type(3), .verif > button { grid-column: 1 / -1 }
  .chart .ax { font-size: 18px }
}
.carte-v .row.between { flex-wrap: nowrap; align-items: flex-start } .carte-v .bb { flex: none; align-self: center }

/* ---------- connexion */
.auth.auth-v2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 0; place-items: stretch }
.auth-vitrine { position: relative; overflow: hidden; background: var(--night); color: #fff; padding: 40px 48px; display: grid; grid-template-rows: auto 1fr auto; gap: 24px }
.auth-vitrine::before { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(closest-side, rgb(106 79 214 / .45), transparent), radial-gradient(closest-side at 80% 40%, rgb(212 42 115 / .35), transparent); pointer-events: none }
.auth-vitrine::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--brand-grad) }
.av-haut { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: .02em; z-index: 1 } .av-haut img { width: 40px; border-radius: 9px }
.av-milieu { align-self: center; z-index: 1; max-width: 460px } .av-milieu h1 { font-size: 40px; margin: 0 0 10px; color: #fff; letter-spacing: -.01em }
.av-milieu p { font-size: 17px; color: #d9d4e6; margin: 0 0 24px; line-height: 1.5 }
.av-milieu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px } .av-milieu li { display: flex; gap: 10px; align-items: flex-start; color: #ece9f5; font-size: 14.5px }
.av-milieu li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--cyan); box-shadow: 0 0 0 4px rgb(69 215 212 / .15) }
.av-bas { color: #8f88a6; font-size: 12px; z-index: 1 }
.auth-form { display: grid; place-items: center; padding: 24px 16px; background: var(--bg) } .auth-form > div { width: min(420px, 100%) }
@media (max-width: 900px) { .auth.auth-v2 { grid-template-columns: 1fr } .auth-vitrine { display: none } }
.auth.auth-v2 > div { width: auto }

/* ================================================================ suivi des campagnes (vue réunion) */
.t.suivi td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.t.suivi th:nth-child(1) { min-width: 250px; }
.t.suivi th:nth-child(4) { min-width: 230px; }
.t.suivi th:nth-child(5) { min-width: 240px; }
.t.suivi .s-camp a.strong { color: var(--ink); text-decoration: none; }
.t.suivi .s-camp a.strong:hover { text-decoration: underline; }
.t.suivi .s-camp .avatar { margin-left: auto; flex: none; }
.t.suivi .sub .pill { font-size: 11px; padding: 1px 7px; }
.s-groupe td { background: var(--surface2); font-weight: 650; font-size: 13px; padding: 8px 16px !important; letter-spacing: .01em; }
.sbs { display: flex; flex-wrap: wrap; gap: 6px; }
.sb { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 64px; padding: 5px 9px 6px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 11.5px; line-height: 1.25; cursor: pointer; color: var(--muted); text-align: left; }
.sb b { font-size: 12px; color: var(--ink); font-weight: 650; }
.sb:hover { border-color: var(--ink); }
.sb.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
.sb.rel { background: #efeafd; border-color: #cfc3f5; color: #5b3fc4; }
.sb.proche { background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: #9a5f00; }
.sb.bad { background: color-mix(in srgb, var(--bad) 9%, transparent); border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
.s-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s-todo li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.35; }
.s-todo li i { width: 7px; height: 7px; border-radius: 50%; flex: none; transform: translateY(-1px); background: var(--muted); }
.s-todo li.bad i { background: var(--bad); } .s-todo li.warn i { background: var(--warn); } .s-todo li.info i { background: #a99be6; }
.s-todo li.bad a { color: var(--bad); font-weight: 600; }
.s-todo a { color: var(--ink); text-decoration: none; } .s-todo a:hover { text-decoration: underline; }
.s-todo li.plus { display: none; } td.tout .s-todo li.plus { display: flex; }
.s-more { margin-top: 4px; font-size: 12.5px; }
.s-ok { display: inline-flex; gap: 6px; align-items: center; color: var(--ok); font-size: 13px; font-weight: 600; }
.s-ok svg { width: 15px; height: 15px; }
.in.sm { height: 32px; padding: 4px 8px; font-size: 13px; }
.s-bb { max-width: 230px; display: block; margin-bottom: 6px; }
.print-only { display: none; }
@media (max-width: 900px) {
  .t.suivi thead { display: none; }
  .t.suivi, .t.suivi tbody, .t.suivi tr, .t.suivi td { display: block; width: 100%; }
  .t.suivi tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .t.suivi td { border: 0 !important; padding: 6px 16px !important; }
  .t.suivi td.s-bbc::before { content: "Billboards"; } .t.suivi td.s-ech::before { content: "Échéancier"; }
  .t.suivi td.s-bil::before { content: "Bilans"; } .t.suivi td.s-act::before { content: "À faire"; }
  .t.suivi td[class^="s-"]:not(.s-camp)::before { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
}
@media print {
  .rail, .top, .topbar, header.top, .no-print, .assist-btn, .cloche, .s-more, .sb:hover { display: none !important; }
  .shell { display: block !important; } .main, main { margin: 0 !important; padding: 0 !important; }
  body { background: var(--surface) !important; } .page { padding: 0 !important; max-width: none !important; }
  .print-only { display: inline !important; } .s-bb, [data-rep] { display: none !important; }
  .panel { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: auto; }
  .t.suivi tr { break-inside: avoid; } .kpi { box-shadow: none !important; border: 1px solid #ddd; }
  .s-todo li.plus { display: flex !important; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* ================================================================ éditeur de passage (studio sombre) */
.modal.ed-modal { width: min(1280px, 100%); --ed-acc: #8b6cf6; --ed-acc2: #b8a4ff; --ed-bg: #0f0c17; --ed-bg2: #17131f; --ed-bg3: #211b2c; --ed-ln: #2e2740; --ed-tx: #ece8f5; --ed-mu: #9a92ad; }
.ed-sombre { background: var(--ed-bg); color: var(--ed-tx); border: 1px solid var(--ed-ln); }
.ed-sombre .mh { border-bottom: 1px solid var(--ed-ln); background: var(--ed-bg2); }
.ed-sombre .mh h2 { color: var(--ed-tx); font-size: 16px; }
.ed-sombre .mh .x { color: var(--ed-mu); background: transparent; }
.ed-sombre .mh .x:hover { color: #fff; background: var(--ed-bg3); }
.ed-sombre .mb { background: var(--ed-bg); }
.ed-sombre .mf { background: var(--ed-bg2); border-top: 1px solid var(--ed-ln); flex-wrap: wrap; gap: 8px; }
.ed-sombre .btn { background: var(--ed-bg3); color: var(--ed-tx); border-color: var(--ed-ln); }
.ed-sombre .btn:hover:not(:disabled) { border-color: var(--ed-acc); }
.ed-sombre .btn.ghost { background: transparent; }
.ed-sombre .btn.primary { background: var(--ed-acc); border-color: var(--ed-acc); color: #fff; }
.ed-sombre .btn.primary:hover:not(:disabled) { background: #7a58f0; }
.ed-sombre kbd { background: var(--ed-bg3); border-color: var(--ed-ln); color: var(--ed-tx); }
.ed-titre { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.ed-titre b { font-weight: 700; }
.ed-prog { font-size: 13px; color: var(--ed-mu); font-weight: 500; }
.ed-charge { display: grid; place-items: center; gap: 8px; padding: 90px 20px; text-align: center; color: var(--ed-mu, var(--muted)); }
.ed-charge b { color: var(--ed-tx, var(--ink)); }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ed-ln, var(--line)); border-top-color: var(--ed-acc, #6a4fd6); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg) } }
.ed { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ed > * { min-width: 0; }
.ed-voile { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgb(15 12 23 / .7); border-radius: 12px; }
.ed-scene { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: stretch; }
.ed-video { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px var(--ed-ln); }
.ed-video video { width: 100%; height: 100%; display: block; object-fit: contain; cursor: pointer; }
.ed-tc { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.ed-tc b { font: 600 16px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #fff; background: rgb(0 0 0 / .66); padding: 7px 10px; border-radius: 7px; letter-spacing: .03em; }
.ed-dans { font-size: 12px; font-weight: 600; color: #fff; background: var(--ed-acc); padding: 6px 10px; border-radius: 7px; opacity: 0; transition: opacity .12s; }
.ed-dans.on { opacity: 1; }
.ed-bornes { display: flex; flex-direction: column; gap: 10px; }
.ed-borne { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--ed-ln); border-radius: 12px; background: var(--ed-bg2); }
.ed-borne .k { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ed-mu); font-weight: 700; }
.ed-borne b { font: 600 20px/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #fff; letter-spacing: .02em; }
.ed-borne.duree b { color: var(--ed-acc2); }
.ed-borne small { font-size: 12px; color: var(--ed-mu); }
.ed-pas { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-pas button { flex: 1 1 auto; height: 30px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--ed-ln); background: var(--ed-bg3); color: var(--ed-tx); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ed-pas button:hover { border-color: var(--ed-acc); }
.ed-pas button.pl { background: color-mix(in srgb, var(--ed-acc) 22%, var(--ed-bg3)); border-color: color-mix(in srgb, var(--ed-acc) 55%, transparent); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ed-pas kbd { font-size: 10px; padding: 1px 4px; }
.ed-alerte { font-size: 12.5px; line-height: 1.35; color: #ffd18a; background: rgb(255 170 50 / .1); border: 1px solid rgb(255 170 50 / .35); padding: 8px 10px; border-radius: 9px; }
.ed-lien { align-self: flex-start; background: none; border: 0; padding: 2px 0; color: var(--ed-acc2); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.ed-lien:hover { text-decoration: underline; }
.ed-note { margin: 0; font-size: 12px; color: var(--ed-mu); }
.ed-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; background: var(--ed-bg2); border: 1px solid var(--ed-ln); border-radius: 12px; }
.ed-tr-g { display: inline-flex; align-items: center; gap: 4px; }
.ed-ic { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ed-tx); cursor: pointer; }
.ed-ic svg { width: 18px; height: 18px; }
.ed-ic:hover { background: var(--ed-bg3); color: #fff; }
.ed-play { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--ed-acc); color: #fff; cursor: pointer; margin: 0 4px; box-shadow: 0 4px 14px rgb(139 108 246 / .35); }
.ed-play svg { width: 20px; height: 20px; }
.ed-play:hover { background: #7a58f0; }
.ed-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ed-ln); background: var(--ed-bg3); color: var(--ed-tx); font-size: 13px; font-weight: 600; cursor: pointer; }
.ed-btn svg { width: 14px; height: 14px; }
.ed-btn:hover { border-color: var(--ed-acc); }
.ed-zoom { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.ed-zoom .chip-f { padding: 3px 9px; font-size: 12px; }
.ed-sombre .ed-zoom { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--ed-bg3); border: 1px solid var(--ed-ln); }
.ed-sombre .ed-zoom button { height: 28px; min-width: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--ed-mu); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ed-sombre .ed-zoom button.on { background: var(--ed-acc); color: #fff; }
.ed-tl { position: relative; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--ed-ln); border-radius: 12px; background: var(--ed-bg2); scrollbar-color: var(--ed-ln) transparent; }
.ed-piste { position: relative; height: 176px; min-width: 100%; touch-action: none; user-select: none; cursor: crosshair; }
.ed-regle { position: absolute; left: 0; right: 0; top: 0; height: 28px; border-bottom: 1px solid var(--ed-ln); }
.ed-regle i { position: absolute; bottom: 0; width: 1px; background: #3d3550; height: 5px; }
.ed-regle i.s { height: 8px; background: #574d6e; } .ed-regle i.lib { height: 13px; background: var(--ed-mu); }
.ed-regle i span { position: absolute; bottom: 13px; left: 4px; font: 500 10.5px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--ed-mu); white-space: nowrap; }
.ed-vig { position: absolute; left: 0; right: 0; top: 30px; height: 72px; background-size: 100% 100%; background-repeat: no-repeat; background-color: #08060d; image-rendering: auto; }
.ed-onde { position: absolute; left: 0; top: 106px; width: 100%; height: 68px; opacity: .9; }
.ed-hors { position: absolute; top: 28px; bottom: 0; background: rgb(5 3 10 / .62); pointer-events: none; }
.ed-hors.h-g { left: 0; }
.ed-sel { position: absolute; top: 28px; bottom: 0; border-top: 3px solid var(--ed-acc); border-bottom: 3px solid var(--ed-acc); background: rgb(139 108 246 / .08); pointer-events: none; }
.ed-auto { position: absolute; top: 31px; bottom: 3px; border: 1.5px dashed rgb(255 255 255 / .55); border-radius: 4px; pointer-events: none; }
.ed-poignee { position: absolute; top: 28px; bottom: 0; width: 18px; margin-left: -9px; cursor: ew-resize; z-index: 3; display: flex; justify-content: center; outline: none; }
.ed-poignee::before { content: ""; width: 5px; height: 100%; background: var(--ed-acc); border-radius: 3px; box-shadow: 0 0 0 1px rgb(255 255 255 / .5); }
.ed-poignee span { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #fff; background: var(--ed-acc); padding: 4px 7px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / .4); }
.ed-poignee.p-in span { right: 12px; } .ed-poignee.p-out span { left: 12px; }
.ed-poignee:hover::before, .ed-poignee.actif::before, .ed-poignee:focus-visible::before { width: 7px; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(139 108 246 / .5); }
.ed-tete { position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px; z-index: 4; cursor: grab; display: flex; justify-content: center; }
.ed-tete::before { content: ""; width: 2px; height: 100%; background: #ff4d4d; box-shadow: 0 0 6px rgb(255 77 77 / .6); }
.ed-tete i { position: absolute; top: 0; width: 14px; height: 12px; background: #ff4d4d; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ed-aide { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ed-mu); }
.ed-aide b { color: var(--ed-tx); }
.ed-nom { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; font: 500 12px/1.2 ui-monospace, Menlo, Consolas, monospace; color: var(--ed-mu); }
.ed-nom svg { width: 14px; height: 14px; flex: none; }
.ed-nom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ed-tx); }
.ed-sombre .err-box { color: #ffb4b4; }
kbd { font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace; padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface2); color: var(--ink2); }
@media (max-width: 900px) {
  .ed-scene { grid-template-columns: minmax(0, 1fr); }
  .ed-sombre .mh h2 { font-size: 14px; } .ed-prog { flex-basis: 100%; }
  .ed-transport { gap: 6px; } .ed-tr-g { flex-wrap: wrap; }
  .ed-bornes { display: grid; grid-template-columns: 1fr 1fr; }
  .ed-borne.duree, #ed-ecart, .ed-lien, .ed-note { grid-column: 1 / -1; }
  .ed-piste { height: 150px; } .ed-vig { height: 56px; } .ed-onde { top: 90px; height: 58px; }
  .ed-nom { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .ed-bornes { grid-template-columns: 1fr; }
  .ed-tr-g .ed-ic[data-pas="-1"], .ed-tr-g .ed-ic[data-pas="1"] { display: none; }
}
/* indicateur de travail en arrière-plan (barre du haut) */
.fond { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #4b2fb8; background: #efeafd; border: 1px solid #d9cff8; text-decoration: none; white-space: nowrap; }
.fond[hidden] { display: none; }
.fond:hover { border-color: #6a4fd6; }
.fond-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #c9bdf3; border-top-color: #6a4fd6; animation: tourne .9s linear infinite; }
.envoi.pause { border-style: dashed; }
@media (max-width: 760px) { .fond { padding: 0 9px; font-size: 11.5px; } }

/* ================================================================ lecture d'antenne */
.l-ia { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 4px; }
.l-ia .pill svg { width: 13px; height: 13px; margin-right: 2px; vertical-align: -2px; }
.l-grille { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.l-main { display: grid; gap: 16px; min-width: 0; }
.l-enrs .job { align-items: flex-start; }
.l-frise-w { overflow-x: auto; padding: 0 18px 4px; }
.l-frise { position: relative; min-width: 100%; padding-left: 0; }
.l-regle { position: relative; height: 22px; border-bottom: 1px solid var(--line); margin-left: 88px; }
.l-regle i { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--muted); }
.l-regle i span { position: absolute; bottom: 8px; left: 3px; font: 500 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--muted); white-space: nowrap; }
.l-lane { position: relative; height: 34px; margin: 6px 0 0 88px; background: var(--surface2); border-radius: 6px; }
.l-lane.fin { height: 22px; } .l-lane.prevu { height: 26px; background: none; border: 1px dashed var(--line); }
.l-lab { position: absolute; right: 100%; margin-right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; width: 78px; text-align: right; }
.l-b { position: absolute; top: 0; bottom: 0; border: 0; padding: 0 6px; margin: 0; overflow: hidden; border-radius: 4px; font: 600 11.5px/1 inherit; text-align: left; cursor: pointer; display: flex; align-items: center; min-width: 2px; }
.l-b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-b.emission { background: #dfe3fb; color: #23306e; box-shadow: inset -1px 0 0 #fff; }
.l-b.ecran_pub { background: #f59e0b; color: #3b2300; }
.l-b.spot { background: #ea580c; box-shadow: inset -1px 0 0 #fff; padding: 0; }
.l-b.billboard { background: #7c3aed; padding: 0; } .l-b.jingle, .l-b.autopromo, .l-b.bande_annonce, .l-b.autre { background: #94a3b8; padding: 0; }
.l-b.prevu { background: var(--surface2); color: var(--muted); cursor: default; border-right: 1px solid var(--line); border-radius: 0; font-weight: 500; }
.l-b:hover:not(.prevu) { filter: brightness(.92); outline: 2px solid var(--night); z-index: 2; }
.l-leg { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 18px 14px; font-size: 12px; color: var(--muted); }
.l-leg i { display: inline-block; width: 12px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.l-leg i.emission { background: #dfe3fb; } .l-leg i.ecran_pub { background: #f59e0b; } .l-leg i.spot { background: #ea580c; } .l-leg i.billboard { background: #7c3aed; }
.l-leg i.jingle { background: #94a3b8; } .l-leg i.prevu { background: var(--surface2); border: 1px dashed var(--line); }
.l-t img, .l-sans { width: 84px; height: 47px; object-fit: cover; border-radius: 5px; display: block; background: var(--surface2); }
.l-t tr.l-ecran td { background: #fff7ea; font-weight: 600; }
.l-t tr.l-dans td:first-child { border-left: 3px solid #f59e0b; }
.l-tag { display: inline-block; font-size: 11.5px; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: var(--surface2); color: var(--ink2); white-space: nowrap; }
.l-tag.emission { background: #dfe3fb; color: #23306e; } .l-tag.ecran_pub { background: #fde7c2; color: #7a4500; } .l-tag.spot { background: #fde2d3; color: #8a2f05; }
.l-tag.billboard { background: #ede4fe; color: #5b21b6; }
.l-spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 18px 16px; }
.l-spot { display: grid; gap: 3px; text-align: left; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font: inherit; }
.l-spot img, .l-spot .l-sans { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 5px; }
.l-spot b { font-size: 13px; overflow-wrap: anywhere; } .l-spot small { color: var(--muted); font-size: 11.5px; }
.l-spot.jingle, .l-spot.autopromo { opacity: .75; } .l-spot.billboard { border-color: #c4b5fd; }
.l-spot:hover { border-color: var(--night); }
.l-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.l-caps img { width: 100%; border-radius: 6px; aspect-ratio: 16/9; object-fit: cover; }
.l-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.l-meta div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.l-meta .k { display: block; font-size: 11.5px; color: var(--muted); }
@media (max-width: 1000px) { .l-grille { grid-template-columns: 1fr; } }
.l-enrs .job { flex-wrap: wrap; }
.l-enrs .job > div { flex: 1 1 170px; }
.l-enrs .job > button { margin-left: auto; }

/* ---- lecture d'antenne : BB IN / BB OUT et qualification */
.l-sens { display: inline-block; width: auto; border: 0; font: 700 11.5px/1 inherit; padding: 4px 8px; border-radius: 6px; letter-spacing: .02em; white-space: nowrap; }
.l-sens.in { background: #ede7fd; color: #4c2fc4; } .l-sens.out { background: #d9f3f1; color: #0f6e6a; } .l-sens.nul { background: var(--surface2); color: var(--muted); }
.l-lane.l-bbl { height: 22px; background: none; border-bottom: 1px dashed var(--line); border-radius: 0; }
.l-b.bbm { padding: 0; border-radius: 3px; top: 2px; bottom: 2px; }
.l-b.bbm.in { background: #6a4fd6; } .l-b.bbm.out { background: #1f9e9a; } .l-b.bbm.nul { background: #c27a00; }
.l-b.bbm.valide, .l-b.bbm.pige { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ok); }
.l-leg i.in { background: #6a4fd6; } .l-leg i.out { background: #1f9e9a; }
.modal.l-qual-modal { width: min(1180px, 100%); }
.l-qual { display: grid; gap: 12px; }
.lq-haut { display: flex; align-items: center; gap: 10px; }
.lq-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.lq-video { display: grid; gap: 10px; }
.lq-ecran { position: relative; background: #05030a; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.lq-ecran video { width: 100%; height: 100%; object-fit: contain; display: block; }
.lq-tc { position: absolute; left: 10px; bottom: 10px; }
.lq-tc b { font: 600 14px/1 ui-monospace, Menlo, Consolas, monospace; color: #fff; background: rgb(0 0 0 / .6); padding: 6px 9px; border-radius: 6px; display: inline-flex; gap: 8px; align-items: center; }
.lq-tc b span { font: 700 11px/1 inherit; background: #6a4fd6; padding: 3px 6px; border-radius: 4px; }
.lq-ctl { gap: 10px; align-items: center; }
.lq-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.lq-meta div { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 0; }
.lq-meta dt { font-size: 11.5px; color: var(--muted); } .lq-meta dd { margin: 2px 0 0; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.lq-form { display: grid; gap: 12px; align-content: start; }
.lq-form .field { display: grid; gap: 6px; } .lq-form .field > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.lq-form .seg { flex-wrap: wrap; }
.lq-sens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lq-sens button { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; }
.lq-sens button b { font-size: 17px; letter-spacing: .02em; } .lq-sens button small { color: var(--muted); font-size: 12px; }
.lq-sens button.in.on { border-color: #6a4fd6; background: var(--surface2); } .lq-sens button.in.on b { color: #4c2fc4; }
.lq-sens button.out.on { border-color: #1f9e9a; background: #e8f8f6; } .lq-sens button.out.on b { color: #0f6e6a; }
.lq-sens button:hover { border-color: var(--ink2); }
.lq-ia { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface2); font-size: 13px; }
.lq-ia b { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; } .lq-ia svg { width: 14px; height: 14px; }
.lq-pied { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.l-biblio { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 0 18px 18px; }
.l-bcarte { display: grid; gap: 4px; text-align: left; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; }
.l-bcarte img, .l-bcarte .l-sans { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.l-bcarte:hover { border-color: var(--night); }
.l-bt { display: flex; gap: 6px; align-items: center; min-width: 0; } .l-bt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.l-bcarte small { font-size: 12px; color: var(--ink2); }
@media (max-width: 900px) { .lq-grille { grid-template-columns: 1fr; } .lq-meta { grid-template-columns: 1fr 1fr; } }
#lv-type { flex-wrap: wrap; } .l-voir { display: grid; gap: 12px; } .l-voir .player { width: 100%; aspect-ratio: 16 / 9; background: #05030a; border-radius: 12px; } .l-voir .l-caps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .lq-grille { grid-template-columns: minmax(0, 1fr); } }
/* ================================================================ marques (logos) */
.mq { --t: 30px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--t); height: var(--t); border-radius: 8px; background: var(--mq); color: #fff; overflow: hidden; vertical-align: middle; }
.mq b { font: 700 calc(var(--t) * .38)/1 var(--f-body, inherit); letter-spacing: .02em; }
.mq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); padding: 3px; }
.mq.a-logo { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mq.sm { --t: 22px; border-radius: 6px; } .mq.lg { --t: 44px; border-radius: 10px; } .mq.xl { --t: 64px; border-radius: 14px; }
.mq-ligne { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.mq-ligne > span:last-child { min-width: 0; }
.sem { display: inline-block; font: 600 11.5px/1 ui-monospace, Menlo, Consolas, monospace; padding: 3px 6px; border-radius: 5px; background: var(--surface2); color: var(--ink2); white-space: nowrap; }
/* calendrier avec semaines */
.cal-s { display: grid; gap: 8px; }
.cal-t { display: flex; align-items: center; justify-content: space-between; } .cal-t b { text-transform: capitalize; font-size: 14px; }
.cal-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 17px; line-height: 1; }
.cal-g { display: grid; grid-template-columns: 46px repeat(7, 1fr); gap: 3px; }
.cal-h { font-size: 11px; color: var(--muted); text-align: center; font-weight: 600; } .cal-h.s { text-align: left; }
.cal-sem { font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--ink2); background: var(--surface2); border: 0; border-radius: 6px; cursor: pointer; padding: 0 6px; text-align: left; min-height: 34px; }
.cal-sem.on { background: var(--night, #1a1530); color: #fff; }
.cal-j { position: relative; min-height: 34px; display: grid; place-items: center; font-size: 12.5px; border-radius: 6px; }
.cal-j.hors { color: var(--muted); opacity: .55; } .cal-j.auj { box-shadow: inset 0 0 0 2px var(--night, #1a1530); font-weight: 700; }
.cal-j.dans { background: color-mix(in srgb, var(--night, #1a1530) 9%, transparent); }
.cal-j i { position: absolute; bottom: 3px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.cal-j em { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.cal-j em.debut { background: #1f9e9a; } .cal-j em.fin { background: #c2410c; } .cal-j em.bilan { background: #6a4fd6; } .cal-j em.preuve { background: #2563eb; }
.cal-leg { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); }
.cal-leg span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--c); }
/* campagnes par marque (frise des semaines) */
.fm { padding: 0; overflow: hidden; }
.fm-barre-outils { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fm-grille { overflow-x: auto; }
.fm-tete, .fm-ligne { display: grid; grid-template-columns: 220px minmax(640px, 1fr); }
.fm-tete { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 1; }
.fm-sems { display: grid; grid-template-rows: 18px 26px; align-items: center; }
.fm-mois { font-size: 11px; color: var(--muted); text-transform: capitalize; padding-left: 4px; border-left: 1px solid var(--line); }
.fm-sem { font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--ink2); text-align: center; }
.fm-sem.auj { color: #fff; background: var(--night, #1a1530); border-radius: 6px; padding: 5px 0; margin: 0 3px; }
.fm-ligne { border-bottom: 1px solid var(--line); }
.fm-ligne:hover { background: color-mix(in srgb, var(--surface2) 60%, transparent); }
.fm-marque { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; min-width: 0; border-right: 1px solid var(--line); }
.fm-marque b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm-marque small { color: var(--muted); font-size: 12px; }
.fm-marque > span:last-child { min-width: 0; }
.fm-pistes { display: grid; gap: 4px 0; padding: 6px 0; position: relative; }
.fm-case { border-left: 1px dashed var(--line); } .fm-case.auj { background: color-mix(in srgb, var(--night, #1a1530) 7%, transparent); }
.fm-barre { position: relative; z-index: 1; margin: 0 2px; display: flex; align-items: center; gap: 8px; padding: 0 10px; min-width: 0; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--c) 16%, var(--surface)); box-shadow: inset 3px 0 0 var(--c); color: var(--ink); font: inherit; }
.fm-barre:hover { background: color-mix(in srgb, var(--c) 26%, var(--surface)); }
.fm-barre.cg { border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; } .fm-barre.cd { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fm-s { font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace; color: color-mix(in srgb, var(--c) 75%, #000); white-space: nowrap; }
.fm-n { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fm-t { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) { .fm-tete, .fm-ligne { grid-template-columns: 130px minmax(480px, 1fr); } .fm-marque small { display: none; } }
.soeurs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
.soeur { display: inline-flex; gap: 6px; align-items: center; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: var(--surface); }
.soeur b { font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--ink2); }
.soeur.on { border-color: var(--night, #1a1530); box-shadow: inset 0 0 0 1px var(--night, #1a1530); }
.soeur:hover { border-color: var(--ink2); }
h1.mq-ligne { gap: 12px; }
.fc-cal { max-width: 420px; }
.logo-choix { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.logo-c { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; font: inherit; }
.logo-c:hover { border-color: var(--night, #1a1530); } .logo-c b { display: block; font-size: 13px; } .logo-c small { color: var(--muted); font-size: 11.5px; }
/* preuves de diffusion */
.pv-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.pv-slot { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pv-slot.vide { border-style: dashed; background: var(--surface2); } .pv-slot.vide p, .pv-slot.off p { margin: 0; font-size: 13px; }
.pv-tete { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-cap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; overflow: hidden; }
.pv-cap img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pv-cap span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; background: rgb(0 0 0 / .35); transition: opacity .15s; }
.pv-cap span svg { width: 32px; height: 32px; } .pv-cap:hover span { opacity: 1; }
.pv-info { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink2); } .pv-info b { color: var(--ink); }
.pv-nom { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.pv-liste { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.pv-cand { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; font: inherit; }
.pv-cand img, .pv-cand .pv-sans { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--surface2); }
.pv-cand b { display: block; } .pv-cand small { color: var(--muted); } .pv-cand.on { border-color: var(--night, #1a1530); box-shadow: inset 0 0 0 1px var(--night, #1a1530); }
.pv-cand:hover { border-color: var(--ink2); }
/* vérification par tranche */
.vf-res { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vf-res span { display: grid; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; color: var(--muted); min-width: 92px; }
.vf-res b { font-size: 18px; color: var(--ink); }
.vf-t th .sub { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.vf-c { text-align: center; font-variant-numeric: tabular-nums; }
.vf-c.ok { background: color-mix(in srgb, #1e7f4f 12%, transparent); } .vf-c.moyen { background: color-mix(in srgb, #c27a00 14%, transparent); }
.vf-c.ko { background: color-mix(in srgb, #c8141c 12%, transparent); } .vf-c.vide { background: none; }
.vf-tot td { border-top: 2px solid var(--line); font-weight: 600; }
.vf-aud { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.vf-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.lq-paire { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #6a4fd6 7%, var(--surface)); border: 1px solid color-mix(in srgb, #6a4fd6 25%, transparent); }
.lq-paire:empty { display: none; }
.req { font-weight: 600; font-size: 11px; color: var(--muted); margin-left: 6px; }
/* bibliothèque : cartes de référence avec aperçu */
.ref-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.ref-c { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; }
.ref-apercu { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #0b0814; cursor: pointer; }
.ref-apercu video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ref-apercu span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgb(0 0 0 / .25); transition: background .15s; }
.ref-apercu span svg { width: 38px; height: 38px; } .ref-apercu:hover span { background: rgb(0 0 0 / .45); }
.ref-apercu em { position: absolute; right: 8px; bottom: 8px; font: 600 12px/1 ui-monospace, Menlo, monospace; font-style: normal; color: #fff; background: rgb(0 0 0 / .65); padding: 4px 6px; border-radius: 5px; }
.ref-corps { display: grid; gap: 8px; padding: 12px 14px 14px; align-content: start; min-width: 0; }
.ref-tete { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ref-nom { margin: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.ref-meta { font-size: 12.5px; overflow-wrap: anywhere; }
.ref-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }
.ref-cmp > div { display: grid; gap: 4px; align-content: start; padding: 8px 10px; border-radius: 8px; background: var(--surface2); min-width: 0; overflow-wrap: anywhere; }
.ref-cmp .lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ref-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 480px) { .ref-cmp { grid-template-columns: 1fr; } }
/* piges validées */
.pv-camp .ph { flex-wrap: wrap; gap: 10px; }
.pg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.pg-k { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pg-ap { position: relative; width: 96px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #0b0814; cursor: pointer; }
.pg-ap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-ap span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; background: rgb(0 0 0 / .4); } .pg-ap:hover span { opacity: 1; }
.pg-i { display: grid; gap: 2px; min-width: 0; } .pg-i b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-i small { color: var(--muted); font-size: 12px; }
.pg-i .l-sens { justify-self: start; }
/* cartes du tableau de suivi : le texte passe à la ligne au lieu d'être coupé */
.kcarte small.l2 { white-space: normal; overflow: visible; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.kcarte .tete .mq { margin-top: 2px; }
.l-bcarte { position: relative; } .l-bvid { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; } .l-bvid svg { width: 12px; height: 12px; }
.kcarte .k-av { display: inline-flex; gap: 2px; flex: none; margin-left: auto; }
#bib-z > section + section { margin-top: 22px; }
/* formulaire de campagne */
.fc-tiroir { width: min(860px, 100%); }
.fc-h { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.fc-h:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.fc-periode { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; align-items: start; }
.fc-lignes { display: grid; gap: 10px; }
.fc-l { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fc-l-t { display: flex; align-items: center; gap: 10px; } .fc-l-t b { font-size: 14px; } .fc-l-t .muted { font-size: 12.5px; } .fc-l-t .btn { margin-left: auto; }
.fc-jours { display: inline-flex; gap: 4px; }
.fc-jours button { width: 32px; height: 30px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 12px; cursor: pointer; color: var(--ink2); }
.fc-jours button.on { background: var(--night, #1a1530); border-color: var(--night, #1a1530); color: #fff; }
.fc-jours button.hors:not(.on) { opacity: .45; border-style: dashed; }
.fc-cren { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fc-l-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fc-l-g label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; } .fc-l-g small { font-weight: 400; font-size: 11.5px; }
.fc-src { display: grid; gap: 8px; } .fc-src .check { align-items: flex-start; } .fc-src select { max-width: 360px; }
@media (max-width: 700px) { .fc-periode { grid-template-columns: 1fr; } .fc-l-g { grid-template-columns: 1fr 1fr; } }
.vf-prog { display: grid; gap: 10px; margin-bottom: 4px; }
.vf-t td.neg { color: var(--bad); font-weight: 600; }
.c-lignes td, .c-lignes th { font-size: 13px; }
/* lecture d'antenne : vue « Antenne » */
.l-ant { display: grid; gap: 0; padding: 6px 0; }
.l-a-prog { display: flex; align-items: center; gap: 12px; padding: 9px 18px; cursor: pointer; border-left: 4px solid #dfe3fb; }
.l-a-prog:hover { background: var(--surface2); } .l-a-prog .mono { width: 46px; color: var(--muted); font-size: 12.5px; }
.l-a-ecran { margin: 4px 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #f59e0b 9%, var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); display: grid; gap: 8px; }
.l-a-ecran.bb-seul { background: color-mix(in srgb, #6a4fd6 7%, var(--surface)); border-color: color-mix(in srgb, #6a4fd6 25%, transparent); }
.l-a-t { display: flex; align-items: center; gap: 12px; } .l-a-t .mono { width: 46px; color: var(--muted); font-size: 12.5px; }
.l-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.l-puce { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; font: inherit; max-width: 260px; }
.l-puce img, .l-puce .l-sans { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
.l-puce span { display: grid; min-width: 0; } .l-puce b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .l-puce small { font-size: 11.5px; color: var(--muted); }
.l-puce.inconnu { border-style: dashed; border-color: #c27a00; } .l-puce.inconnu b { color: #8a5600; }
.l-puce.bb { border-color: #6a4fd6; box-shadow: inset 3px 0 0 #6a4fd6; } .l-puce .l-sens { justify-self: start; margin-bottom: 2px; }
.l-puce:hover { border-color: var(--ink2); }
/* ---- assistant de création de campagne (étapes) */
.wz-modal { width: min(1120px, 100%); }
.wz-modal .mb { padding: 0; gap: 0; }
.wz { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: min(640px, calc(100vh - 160px)); }
.wz-side { background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.wz-steps { list-style: none; margin: 0; padding: 18px 12px 10px; display: grid; gap: 4px; align-content: start; counter-reset: none; }
.wz-resume { margin: 6px 12px 16px; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.wz-resume b { color: var(--ink); font-size: 13.5px; overflow-wrap: anywhere; }
.wz-steps button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font: 500 13.5px var(--f-body); color: var(--muted); cursor: pointer; text-align: left; }
.wz-steps button span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--line2); background: var(--surface); }
.wz-steps li.on button { background: var(--surface); color: var(--night); font-weight: 700; box-shadow: 0 1px 3px rgb(21 15 36 / .08); }
.wz-steps li.on button span { background: var(--night); border-color: var(--night); color: #fff; }
.wz-steps li.fait button { color: var(--ink2); } .wz-steps li.fait button span { background: #e3f3ea; border-color: #9fd0b4; color: var(--ok); }
.wz-body { padding: 20px 22px; overflow: auto; max-height: calc(100vh - 170px); }
.wz-body > section { display: grid; gap: 14px; }
.wz-body > section.form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-aide { margin: 0; color: var(--muted); font-size: 13.5px; }
.wz-sem { padding: 10px 12px; border-radius: 10px; background: var(--surface2); font-size: 13.5px; }
.em-zone { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.em-tete { display: grid; gap: 8px; margin-bottom: 10px; }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-height: max(320px, calc(100vh - 400px)); overflow: auto; padding: 2px; }
.em-c { position: relative; display: grid; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.em-c b { font-size: 13.5px; line-height: 1.25; padding-right: 22px; } .em-c .mono { font-size: 12px; color: var(--muted); }
.em-c:hover { border-color: var(--line2); box-shadow: 0 2px 8px rgb(21 15 36 / .06); }
.em-c.on { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night); background: color-mix(in srgb, var(--night) 4%, var(--surface)); }
.em-j { display: flex; gap: 2px; } .em-j i { font: 700 10px var(--f-body); width: 15px; height: 15px; display: grid; place-items: center; border-radius: 3px; color: var(--line2); font-style: normal; } .em-j i.on { background: var(--surface2); color: var(--ink2); }
.em-ok { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; }
.em-ok svg { width: 11px; height: 11px; opacity: 0; } .em-c.on .em-ok { background: var(--night); border-color: var(--night); color: #fff; } .em-c.on .em-ok svg { opacity: 1; }
.em-sel { position: sticky; top: 0; display: grid; gap: 10px; padding: 14px; max-height: calc(100vh - 250px); overflow: auto; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.em-sel h4 { margin: 0; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.em-vide { padding: 18px 10px; }
.em-tot { font-size: 13px; color: var(--ink2); }
.fc-l-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fc-lab { font-size: 12px; font-weight: 600; color: var(--muted); width: 62px; }
.em-sel .fc-l-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fc-est { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.fc-idt input { max-width: 120px; } .fc-idt input.bad { border-color: var(--bad); }
.wz-recap { padding: 14px 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.wz-recap h4 { margin: 0 0 8px; } .wz-recap dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13.5px; } .wz-recap dt { color: var(--muted); }
@media (max-width: 860px) {
  .wz { grid-template-columns: 1fr; } .wz-side { border-right: 0; border-bottom: 1px solid var(--line); } .wz-resume { display: none; } .wz-steps { grid-auto-flow: column; overflow-x: auto; padding: 8px; }
  .wz-steps button { white-space: nowrap; } .em-zone { grid-template-columns: 1fr; } .em-sel { position: static; }
  .wz-body > section.form { grid-template-columns: 1fr; } .wz-body { max-height: none; }
}
/* ---- tableau du bilan modifiable */
.bl-ph { align-items: flex-start; flex-wrap: wrap; gap: 10px; } .bl-tt { display: grid; gap: 2px; min-width: 240px; flex: 1; }
.bl-titre { font: 700 17px var(--f-head, var(--f-body)); border-color: transparent; padding: 4px 6px; margin-left: -6px; max-width: 460px; }
.bl-titre:hover, .bl-titre:focus { border-color: var(--line2); }
.bl-src { flex-wrap: wrap; gap: 8px; }
.bl-al { padding: 0 18px; display: grid; gap: 6px; }
table.bl th { font-size: 11.5px; line-height: 1.25; vertical-align: bottom; } .bl-d { color: var(--pink, #d42a73); white-space: nowrap; }
table.bl td { vertical-align: middle; } table.bl td.num { position: relative; white-space: nowrap; }
table.bl .bl-n { width: 78px; text-align: right; padding: 5px 7px; font-variant-numeric: tabular-nums; }
table.bl .bl-lib { font-weight: 700; min-width: 180px; padding: 5px 7px; } table.bl .bl-cib { width: 120px; padding: 5px 7px; }
table.bl td.bl-mod .bl-n { background: #fff7e0; border-color: #e7b84a; }
.bl-r { border: 0; background: none; color: #9a6a00; cursor: pointer; font-size: 14px; padding: 0 2px; vertical-align: middle; }
.bl-s { font-weight: 600; color: var(--ink2); }
tr.bl-g td { background: var(--surface2); }
.bl-raisons { padding: 4px 18px 6px; } .bl-raisons h3 { font-size: 14px; margin: 8px 0; } .bl-rs .in { flex: 1; }
.bl-h { padding: 0 18px 14px; margin: 0; }
.bl-zone.bl-save { opacity: .7; pointer-events: none; }
.frise .etape-b .sem { margin-right: 4px; }
/* ---- personnalisation */
.perso { display: grid; gap: 18px; } .perso h3 { margin: 0 0 4px; font-size: 14.5px; } .perso .hint { margin: 0 0 8px; }
.perso-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; }
.heros.seul { grid-template-columns: minmax(0, 1fr); }
/* ---- réunion : notes */
.s-not { min-width: 220px; max-width: 320px; } .s-notes { display: grid; gap: 6px; font-size: 12.5px; } .s-notes p { margin: 0; line-height: 1.35; }
.s-n-fixe { padding: 6px 8px; border-radius: 6px; background: #fff7e0; border-left: 3px solid #e7b84a; }
@media print { .s-notes .lien { display: none; } }
table.bl .bl-n { width: 70px; }
table.bl .bl-lib { min-width: 160px; width: 100%; }
.bl-pc { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 12px; } table.bl .bl-pc .bl-cib { width: 130px; padding: 3px 6px; font-size: 12.5px; }
td.bl-p { min-width: 190px; max-width: 260px; }
.sbs { display: flex; flex-wrap: wrap; gap: 4px; }
/* palette de recherche */
.palette { width: min(680px, 100%); margin-top: 9vh; padding: 0; overflow: hidden }
.palette .pal-in { display: flex; align-items: center; gap: 10px; padding: 4px 16px; border-bottom: 1px solid var(--line) }
.palette .pal-in svg { width: 18px; height: 18px; color: var(--muted); flex: none }
.palette .pal-in input { border: 0; padding: 14px 0; font-size: 16px; border-bottom: 0; flex: 1; min-width: 0 }
.palette kbd, .pal-pied kbd { font: 500 11px var(--f-body); border: 1px solid var(--line2); border-radius: 4px; padding: 1px 5px; color: var(--muted); background: var(--surface2, var(--bg2)) }
.palette .res { max-height: min(60vh, 520px); padding: 4px 8px 8px }
.palette .pal-g { display: flex; justify-content: space-between; align-items: center; font: 600 11.5px var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 4px }
.palette .pal-g .lien { font-size: 11.5px; text-transform: none; letter-spacing: 0; background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline }
.palette a { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 8px 10px; border-radius: 8px }
.palette a .mq.sm { width: 32px; height: 32px }
.palette .pal-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--bg2); display: grid; place-items: center; color: var(--ink2, var(--ink)) }
.palette .pal-ico svg { width: 16px; height: 16px }
.palette a.sel .pal-ico { background: var(--surface) }
.palette .pal-t { display: grid; min-width: 0 } .palette .pal-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.palette .pal-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.palette mark { background: color-mix(in srgb, #f5c400 38%, transparent); color: inherit; border-radius: 2px; padding: 0 1px }
.palette .pal-d { display: flex; gap: 6px; align-items: center; font-size: 12px; white-space: nowrap }
.palette .pal-d .sem { font: 600 11px var(--f-mono, monospace); background: var(--bg2); border-radius: 4px; padding: 1px 6px }
.palette .empty { padding: 28px 16px; text-align: center; color: var(--muted) }
.pal-pied { display: flex; gap: 16px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--bg2) }
.pal-pied #pal-n { margin-left: auto }
@media (max-width: 640px) { .palette { margin-top: 0; border-radius: 0 0 14px 14px } .pal-pied span:not(#pal-n) { display: none } .palette .pal-d .muted { display: none } }

/* formulaire campagne : nom proposé, cibles, fichiers des billboards */
.fc-nom { margin-top: 4px; } .fc-nom .in { font-weight: 600; }
.fc-cibles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .fc-cibles .chip-f { font-size: 12px; padding: 3px 9px; }
.fc-bbsrc { display: grid; gap: 8px; }
.fc-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); }
.fc-opt.on { border-color: var(--night); box-shadow: inset 3px 0 0 var(--night); }
.fc-opt.off { opacity: .6; cursor: default; }
.fc-opt input { margin-top: 3px; } .fc-opt span { display: grid; gap: 3px; min-width: 0; } .fc-opt small { color: var(--muted); font-size: 12.5px; }
.fc-opt select { margin-top: 4px; max-width: 420px; }
/* preuves par émission */
.pv-em + .pv-em { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line) }
.pv-em-t { display: flex; align-items: center; gap: 10px; margin: 0 0 8px } .pv-em-t b { font-size: 14.5px }
.pv-ligne { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 } .pv-ligne-em { font-size: 12.5px; color: var(--ink2, var(--ink)); min-width: 120px; font-weight: 600 }
/* éditeur : tout tient dans l'écran sur ordinateur (vidéo, bornes, transport et frise visibles ensemble) */
@media (min-width: 901px) {
  .modal.ed-modal { width: min(1680px, calc(100vw - 24px)); height: calc(100vh - 24px); max-height: none; overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; }
  .ed-modal .mb { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px 16px; }
  .ed-modal .ed { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 10px; }
  .ed-modal .ed-scene { min-height: 0; grid-template-columns: minmax(0, 1fr) 300px; }
  .ed-modal .ed-video { aspect-ratio: auto; height: 100%; min-height: 180px; }
  .ed-modal .ed-bornes { overflow: auto; min-height: 0; }
  .ed-modal .ed-piste { height: 150px; } .ed-modal .ed-vig { height: 60px; } .ed-modal .ed-onde { top: 93px; height: 55px; }
  .ed-modal .ed-aide { font-size: 12px; }
  .ed-modal .ed-charge { flex: 1; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .ed-modal .ed-piste { height: 120px; } .ed-modal .ed-vig { height: 44px; } .ed-modal .ed-onde { top: 76px; height: 42px; }
  .ed-modal .ed-aide { display: none; } .ed-modal .ed-borne { padding: 8px 12px; } .ed-modal .ed-borne b { font-size: 17px; }
}
/* qualification d'un BB : mini-éditeur avant / billboard / après */
.lq-tc span { margin-left: 6px; font: 600 11.5px var(--f-body); padding: 3px 7px; border-radius: 5px; color: #fff }
.lq-tc span.bb { background: #6a4fd6 } .lq-tc span.av { background: #475569 } .lq-tc span.ap { background: #0f766e }
.lq-ed { display: grid; gap: 6px; margin-top: 8px }
.lq-tl { position: relative; height: 38px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; touch-action: none; user-select: none; overflow: hidden }
.lq-tl-av, .lq-tl-ap { position: absolute; top: 0; bottom: 0 } .lq-tl-av { left: 0; background: repeating-linear-gradient(135deg, #e2e8f0 0 6px, #f1f5f9 6px 12px) } .lq-tl-ap { right: 0; background: repeating-linear-gradient(135deg, #ccfbf1 0 6px, #f0fdfa 6px 12px) }
.lq-tl-bb { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, #6a4fd6 22%, transparent); border-left: 3px solid #6a4fd6; border-right: 3px solid #6a4fd6; display: grid; place-items: center; pointer-events: none }
.lq-tl-bb span { font: 700 11px var(--f-body); color: #4c32b8 }
.lq-h { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; cursor: ew-resize; z-index: 2 }
.lq-h::after { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: #6a4fd6; box-shadow: 0 0 0 2px #fff }
.lq-tete { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #e11d48; pointer-events: none; z-index: 3 }
.lq-tl-lib { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted) } .lq-tl-lib .mono { color: var(--ink) }
.lq-tl-lib span:first-child, .lq-tl-lib span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38% }
.lq-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.lq-ctl .seg.petit button { padding: 5px 10px; font-size: 12.5px } .lq-ctl .seg.petit svg { width: 12px; height: 12px }
.lq-pas { display: inline-flex; gap: 4px } .lq-pas kbd { font-size: 10px; padding: 0 4px; margin-left: 4px }
.lq-ctx { display: inline-flex; align-items: center; gap: 6px; margin-left: auto } .lq-ctx select { width: auto }
.lq-astuce { margin: 0; font-size: 12.5px }
/* suivi de campagne (fiche) : préparation, semaines, preuves, bilans */
.sc { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.6fr) minmax(200px, 1fr) minmax(220px, 1.2fr); gap: 0; border-top: 1px solid var(--line); margin-top: 4px }
.sc-col { padding: 12px 14px; display: grid; gap: 6px; align-content: start; min-width: 0 }
.sc-col + .sc-col { border-left: 1px solid var(--line) }
.sc-col h4 { margin: 0 0 2px; font: 600 11.5px var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; justify-content: space-between; gap: 8px }
.sc-col h4 .muted { text-transform: none; letter-spacing: 0; font-weight: 500 }
.sc-l { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.35 }
.sc-i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--f-body); font-style: normal; margin-top: 1px }
.sc-i svg { width: 11px; height: 11px } .sc-i.ok { background: #dcfce7; color: #15803d } .sc-i.ko { background: #fee2e2; color: #b91c1c } .sc-i.at { background: #fef3c7; border: 2px solid #f59e0b; width: 14px; height: 14px; margin: 3px 2px 0 }
.sc-sems { display: flex; flex-wrap: wrap; gap: 6px }
.sc-sem { position: relative; display: grid; gap: 1px; padding: 6px 8px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); min-width: 72px; overflow: hidden }
.sc-sem b { font: 700 12px var(--f-mono, monospace) } .sc-sem span { font-size: 11.5px; color: var(--muted) }
.sc-sem i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--ok) var(--p), #e5e7eb var(--p) var(--q), #f3f4f6 var(--q)) }
.sc-sem.ko { border-color: #fca5a5 } .sc-sem.ko span { color: #b91c1c } .sc-sem.moyen { border-color: #fcd34d } .sc-sem.piger { border-style: dashed } .sc-sem.venir { opacity: .7 }
.sc-bs { display: flex; flex-wrap: wrap; gap: 6px }
.sc-b { display: grid; gap: 1px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; font: inherit }
.sc-b b { font-size: 12px } .sc-b span { font-size: 11.5px; color: var(--muted) }
.sc-b.ok { background: var(--surface2); border-color: #86efac } .sc-b.ok span { color: #15803d } .sc-b.ko { background: var(--surface2); border-color: #fca5a5 } .sc-b.ko span { color: #b91c1c }
.sc-b.rel { background: var(--surface2); border-color: #c4b5fd } .sc-b.proche { border-color: #fcd34d; background: #fffbeb }
@media (max-width: 1100px) { .sc { grid-template-columns: 1fr 1fr } .sc-col:nth-child(3) { border-left: 0 } .sc-col:nth-child(n+3) { border-top: 1px solid var(--line) } }
@media (max-width: 640px) { .sc { grid-template-columns: 1fr } .sc-col + .sc-col { border-left: 0; border-top: 1px solid var(--line) } }
.cal-j.clic { cursor: pointer } .cal-j.clic:hover { background: var(--blue-soft) }
/* lecture d'antenne : liste des tranches compacte, pied de qualification toujours visible */
.l-enrs { padding: 12px; display: grid; gap: 4px; position: sticky; top: 12px; max-height: calc(100vh - 100px); overflow: auto }
.l-g-t { margin: 6px 4px 2px; font: 600 11.5px var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.l-e-liste { display: grid; gap: 2px }
.l-e { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent }
.l-e:hover { background: var(--bg2) } .l-e.on { background: var(--blue-soft); border-color: color-mix(in srgb, var(--night) 18%, transparent) }
.l-e-pt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line2) } .l-e-pt.ok { background: var(--ok) } .l-e-pt.ko { background: var(--bad) } .l-e-pt.live { background: #f59e0b; box-shadow: 0 0 0 3px rgb(245 158 11 / .2) }
.l-e-c { display: grid; gap: 1px; min-width: 0; flex: 1 } .l-e-c b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .l-e-c small { font-size: 12px; color: var(--muted) }
.l-e .btn { flex: none }
.l-qual-modal .lq-pied { position: sticky; bottom: -1px; background: var(--surface); padding: 10px 0 2px; margin-top: 8px; z-index: 2 }
@media (max-width: 1000px) { .l-enrs { position: static; max-height: 320px } }
/* formulaire campagne : billboard commun / par émission */
.wz-sous { margin: 6px 0 -4px; font: 700 12px var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line) }
.wz-sous:first-child { border-top: 0; padding-top: 0 }
.fc-bbmode button { padding: 7px 14px }
.fc-bbc { display: grid; gap: 10px }
.fc-ids-l { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end }
.fc-ids-l label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted) } .fc-ids-l .fc-id { width: 130px; font-size: 15px; letter-spacing: .08em }
.fc-ids-l .fc-w { flex: 1; min-width: 220px }
.fc-exc { display: grid; gap: 6px; padding: 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line) }
.fc-exc > small { color: var(--muted); margin-top: -4px }
.fc-exc-l { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line) }
.fc-exc-l.on { border-color: color-mix(in srgb, var(--night) 30%, transparent) } .fc-exc-l > .check { min-width: 200px; font-weight: 600 } .fc-exc-l > b { min-width: 200px }
.fc-exc-l .muted { font-size: 12.5px }
/* ===== fiche campagne : en-tête, émissions parrainées, suivi ===== */
.c-tete { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, #6a4fd6 5%, var(--surface)) 100%); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(21 15 36 / .04); margin-bottom: 14px; position: relative; overflow: hidden }
.c-tete::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-grad, linear-gradient(#6a4fd6, #e0457b)) }
.c-id { display: flex; gap: 18px; align-items: flex-start; min-width: 0 }
.c-id-t { display: grid; gap: 6px; min-width: 0 } .c-id-t .kicker { font-size: 12.5px }
.c-id-t h1 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.01em }
.c-sous { font-size: 14.5px; color: var(--ink2, var(--ink)) } .c-sous a { color: inherit; font-weight: 600 }
.c-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px }
.c-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink2, var(--ink)) }
.c-chip svg { width: 13px; height: 13px; color: var(--muted) } .c-chip .sem { margin-right: 2px }
.c-act { display: grid; gap: 14px; justify-items: end; flex: none }
.c-taux { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line) }
.c-taux .bague text { font: 700 15px var(--f-body) } .c-taux div { display: grid; gap: 2px } .c-taux b { font-size: 14px } .c-taux span { font-size: 12.5px; color: var(--muted) }
.c-emis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 12px }
.c-emis.vide { display: flex; gap: 8px; padding: 14px 18px; border: 1px dashed var(--line2); border-radius: 12px }
.c-em { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line) }
.c-em-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px } .c-em-h b { font-size: 15.5px } .c-em-h .mono { font-size: 12px; color: var(--muted) }
.c-em-j { display: flex; align-items: center; gap: 3px; flex-wrap: wrap }
.c-em-j i { font: 700 11px var(--f-body); font-style: normal; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--bg2); color: var(--line2) }
.c-em-j i.on { background: var(--night); color: #fff } .c-em-j small { margin-left: 6px; font-size: 11.5px; color: var(--muted) }
.c-em-l { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px }
.c-em-l .k { font: 600 11px var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.c-em-bb { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px } .c-em-bb .mono { font-size: 13px; letter-spacing: .04em; margin-right: 6px } .c-em-bb .l-sens { font-size: 10.5px; padding: 1px 6px }
.c-tete + .c-emis + .suite, .c-emis + .suite { margin-bottom: 4px }
.sc-p { padding: 0 } .sc-p .ph { padding: 14px 16px 0 } .sc-p .sc { border-top: 0 }
.bb-mode { font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: var(--bg2) }
.bb-w { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13.5px } .bb-w dt { color: var(--muted) } .bb-w dd { margin: 0 }
.bb-f { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px }
.bb-f-t { display: flex; justify-content: space-between; gap: 8px; align-items: center }
.bb-f-p { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted) } .bb-f-p select { max-width: 260px }
@media (max-width: 760px) { .c-tete { flex-direction: column; padding: 16px } .c-act { justify-items: start; width: 100% } .c-id-t h1 { font-size: 22px } .mq.xl { --t: 48px } }
.c-emis { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) }
.c-em-s { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.c-em-s div { display: grid; gap: 1px } .c-em-s b { font-size: 18px; line-height: 1.1 } .c-em-s b small { font-size: 12px; color: var(--muted); font-weight: 500 } .c-em-s span { font-size: 11.5px; color: var(--muted) }
.c-em-l { grid-template-columns: 58px minmax(0, 1fr) } .c-em-bb { flex-wrap: nowrap; white-space: nowrap } .c-em-pv { display: inline-flex; gap: 4px; flex-wrap: wrap }
.cd-jours { margin: 0 0 10px } .cd-jours .chip-f::first-letter { text-transform: uppercase }
.t.bl td.bl-p { min-width: 250px; max-width: 340px; width: 26% } .t.bl .bl-lib { width: 100%; font-weight: 700 }
.s-bil { min-width: 210px }

/* ================================================================== listes avec recherche (combo) */
.cb { position: relative; min-width: 0 }
.cb-f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 36px; background: var(--surface); border: 1px solid var(--line2); border-radius: 6px; padding: 3px 28px 3px 8px; cursor: text; position: relative }
.cb-f:hover { border-color: #b4bcc7 }
.cb.ouvert .cb-f, .cb-f:focus-within { border-color: var(--blue-hi); box-shadow: 0 0 0 3px var(--blue-soft) }
.cb-i { flex: 1; min-width: 80px; border: 0; outline: none; background: none; padding: 4px 2px; font-size: 14px }
.cb-fl { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 11px; pointer-events: none }
.cb-chips { display: contents }
.cb-c { display: inline-flex; align-items: center; gap: 4px; background: var(--surface2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 4px 1px 9px; font-size: 13px; font-weight: 500; white-space: nowrap }
.cb-c.p { background: var(--blue-soft); border-color: #d5cfe6; color: var(--night) }
.cb-c.p::before { content: "★"; font-size: 10px; color: var(--pink) }
.cb-c button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 3px; border-radius: 50% }
.cb-c button:hover { color: var(--bad); background: var(--bad-soft) }
.cb-l { position: fixed; z-index: var(--z-liste); max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line2); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; max-width: min(560px, calc(100vw - 16px)) }
.cb-g { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 9px 3px }
.cb-o { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; cursor: pointer }
.cb-o.on { background: var(--blue-soft) }
.cb-o.sel b::after { content: " ✓"; color: var(--ok) }
.cb-ot { display: grid; min-width: 0 } .cb-ot b { font-weight: 500 } .cb-ot small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cb-ot mark { background: #fff1b8; color: inherit; border-radius: 2px; padding: 0 1px }
.cb-od { margin-left: auto; color: var(--muted); font-size: 12px }
.cb-new { border-top: 1px dashed var(--line); margin-top: 3px; color: var(--night) }
.cb-plus { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--blue); color: #fff; font-weight: 600; flex: none }
.cb-vide { padding: 12px; color: var(--muted); font-size: 13px }
.cb-o .mq { flex: none }

/* bande de semaines S */
.bs { display: flex; align-items: stretch; gap: 4px; min-width: 0 }
.bs-r { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; flex: 1; padding: 13px 1px 2px }
.bs-r::-webkit-scrollbar { display: none }
.bs-n { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; width: 26px; cursor: pointer; color: var(--ink2); flex: none; margin-top: 13px }
.bs-n:hover { background: var(--surface2) }
.bs-s { position: relative; flex: none; width: 54px; display: grid; justify-items: center; gap: 0; padding: 5px 0 4px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; cursor: pointer; scroll-snap-align: start }
.bs-s b { font: 600 13px var(--f-mono) } .bs-s small { font-size: 11px; color: var(--muted) }
.bs-s i { position: absolute; top: -14px; left: 2px; font: 600 10.5px var(--f-body); color: var(--muted); text-transform: uppercase; font-style: normal; letter-spacing: .03em }
.bs-s:hover { border-color: var(--blue-hi) }
.bs-s.auj { box-shadow: inset 0 -2px 0 var(--pink) }
.bs-s.on { background: var(--blue); border-color: var(--blue); color: #fff } .bs-s.on small { color: rgb(255 255 255 / .75) }
.bs-s.on:not(.deb) { border-top-left-radius: 0; border-bottom-left-radius: 0 } .bs-s.on:not(.fin) { border-top-right-radius: 0; border-bottom-right-radius: 0 }

/* ================================================================== passation */
.pz { display: grid; gap: 16px }
.pz-h h1 { margin-top: 4px }
.retour { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 13px } .retour:hover { color: var(--ink) }
.pz-nat button { padding: 8px 18px; font-size: 14px }
.pz-nat button.on[data-nat=option] { background: var(--warn-soft); color: var(--warn); font-weight: 600 }
.pz-nat button.on[data-nat=vente] { background: var(--blue); color: #fff; font-weight: 600 }
.seg button.on { background: var(--blue-soft); color: var(--night); font-weight: 600 }
.pz-g { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start }
@media (max-width: 1180px) { .pz-g { grid-template-columns: 1fr } .pz-r { position: static !important } }
.pz-f { display: grid; gap: 14px; min-width: 0 }
.pz-s { gap: 14px; scroll-margin-top: 120px; transition: box-shadow .3s }
.pz-s.flash, .flash { box-shadow: 0 0 0 3px var(--pink) }
.pz-st { display: flex; gap: 12px; align-items: flex-start } .pz-st h2 { margin: 0; font-size: 16px }
.pz-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--night); color: #fff; display: grid; place-items: center; font: 600 13px var(--f-mono) }
.pz-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px } .pz-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
@media (max-width: 760px) { .pz-3, .pz-2 { grid-template-columns: 1fr } }
.pz-ls { display: grid; gap: 10px }
.pz-l { border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); padding: 12px 14px; display: grid; gap: 12px }
.pz-l:focus-within { border-color: #cfc8e2; background: var(--surface) }
.pz-lh { display: flex; align-items: center; gap: 10px }
.pz-li { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--surface2); display: grid; place-items: center; font: 600 12px var(--f-mono); color: var(--ink2) }
.pz-em { flex: 1; min-width: 0 } .pz-em .cb-i { font-weight: 600 }
.pz-la { display: flex; gap: 4px } .btn.sm { padding: 5px 9px; font-size: 13px }
.pz-lb { display: grid; gap: 12px }
.pz-lab { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink2); margin-bottom: 2px } .pz-lab small { color: var(--muted); font-weight: 400 }
.pz-lab b { font: 600 13px var(--f-mono); color: var(--night) }
.pz-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; font-size: 13px; color: var(--ink2) }
.pz-dates label { display: inline-flex; align-items: center; gap: 6px } .pz-dates .in { width: 150px }
.pz-j { display: inline-flex; gap: 2px } .pz-j button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line2); background: var(--surface); font-size: 11px; font-weight: 600; cursor: pointer; color: var(--muted) }
.pz-j button.on { background: var(--night); border-color: var(--night); color: #fff } .pz-j button.hors:not(.on) { opacity: .45 }
.pz-fe { color: var(--warn); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px }
.pz-lm { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px; gap: 12px; align-items: start }
@media (max-width: 900px) { .pz-lm { grid-template-columns: 1fr } }
.pz-k { display: grid; gap: 4px; font-size: 13px; min-width: 0 } .pz-k > span:first-child { font-weight: 500; color: var(--ink2) }
.pz-k small { color: var(--muted); font-size: 12px } .pz-k small.warn { color: var(--warn) }
.pz-v { display: inline-flex; align-items: center; gap: 4px; position: relative } .pz-v .in { width: 100%; text-align: right; font-weight: 600 } .pz-v > i { font-style: normal; color: var(--muted) }
.pz-grp > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.pz-gc { width: 132px } .pz-gc .in { padding-right: 58px } .pz-gc .pz-cl { position: absolute; right: 8px; font-size: 11px; max-width: 54px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.pz-auto { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; font-size: 11px; padding: 2px 7px; color: var(--muted); cursor: pointer; flex: none }
.pz-auto.on { background: var(--cyan-soft); border-color: #b9ebe9; color: #0f6e6b; cursor: default }
.pz-bbs button { padding: 7px 14px }
.pz-bbm { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center }
.pz-ids { display: grid; grid-template-columns: 130px 130px minmax(0, 1fr); gap: 12px } .pz-ids .mono { letter-spacing: .08em }
@media (max-width: 760px) { .pz-ids { grid-template-columns: 1fr 1fr } .pz-w { grid-column: 1 / -1 } }
.pz-ex { display: grid; gap: 6px }
.pz-exl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 8px }
.pz-exl.on { border-style: solid; background: var(--bg2) } .pz-exl .in.mono { width: 92px } .pz-exl .in:not(.mono) { flex: 1; min-width: 180px }
.pz-drop { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--line2); border-radius: 10px; padding: 14px 16px; background: var(--bg2); transition: background .15s, border-color .15s }
.pz-drop > svg { width: 26px; height: 26px; color: var(--muted) } .pz-drop > div { flex: 1; display: grid } .pz-drop small { color: var(--muted) }
.pz-drop.over, .pz-drop.dragover { border-color: var(--blue-hi); background: var(--blue-soft) }
.pz-drop.ok { border-style: solid; border-color: #bfe3cd; background: var(--ok-soft) } .pz-drop.ok > svg { color: var(--ok) }
.pz-fl { display: grid; gap: 6px }
.pz-fi { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface) }
.pz-fi > svg { color: var(--muted) } .pz-fn { flex: 1; display: grid; min-width: 0 } .pz-fn b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .pz-fn small { color: var(--muted) }
.pz-fi select { width: auto }
.pz-rep { display: grid; gap: 6px }
.pz-rp { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer } .pz-rp:has(input:checked) { border-color: var(--blue-hi); background: var(--blue-soft) }
.pz-rp span { display: grid } .pz-rp small { color: var(--muted) }
.pz-lu { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--surface) }
.pz-luh { display: flex; align-items: center; gap: 6px; margin-bottom: 6px } .pz-luh svg { color: var(--ok) } .pz-luh small { color: var(--muted) }
.pz-lu dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0; font-size: 13px } .pz-lu dt { color: var(--muted) } .pz-lu dd { margin: 0; font-weight: 500 }
.pz-al { display: flex; gap: 6px; align-items: flex-start; color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 6px 9px; margin: 8px 0 0; font-size: 13px }
/* récapitulatif */
.pz-r { position: sticky; top: 114px }
.pz-recap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 1px 0 var(--line), 0 12px 30px -18px rgb(21 15 36 / .35) }
.pz-rt { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px }
.pz-nom { display: grid; gap: 4px; position: relative } .pz-nom > span { font-size: 12px; color: var(--muted) }
.pz-nom .in { font: 600 14px var(--f-mono); padding-right: 48px; letter-spacing: .01em } .pz-nom .pz-auto { position: absolute; right: 7px; bottom: 8px }
.pz-cl { display: flex; gap: 10px; align-items: center } .pz-cl > div { display: grid; min-width: 0 } .pz-cl small { color: var(--muted) }
.pz-per { font-size: 13px; color: var(--ink2) } .pz-per b { font-family: var(--f-mono) }
.pz-pb { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px }
.pz-pb h3 { margin: 0; font-size: 13px; display: flex; justify-content: space-between; align-items: baseline } .pz-pb h3 small { color: var(--muted); font-weight: 400 }
.pz-pl { display: grid; grid-template-columns: minmax(0, 1fr) 52px 60px; gap: 6px; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--line) }
.pz-pl span:first-child { display: grid; min-width: 0 } .pz-pl span:first-child b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .pz-pl small { color: var(--muted); font-size: 11.5px }
.pz-pl .num { text-align: right; font-weight: 600; display: grid } .pz-pl .num small { font-weight: 400 }
.pz-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px } .pz-tot div { background: var(--bg2); border-radius: 8px; padding: 8px 10px; display: grid }
.pz-tot small, .pz-gt small { color: var(--muted); font-size: 11.5px } .pz-tot b { font-size: 18px }
.pz-gt { display: grid; gap: 4px } .pz-gt span { display: flex; align-items: baseline; gap: 8px; background: var(--cyan-soft); border-radius: 8px; padding: 6px 10px } .pz-gt b { margin-left: auto } .pz-gt i { font-style: normal; font-size: 11.5px; color: var(--muted) }
.pz-mq { display: grid; gap: 3px; background: var(--warn-soft); border-radius: 8px; padding: 9px 12px; font-size: 13px } .pz-mq b { color: var(--warn) }
.pz-mq a { color: var(--ink2) } .pz-mq a::before { content: "○ "; color: var(--warn) }
.pz-ok { display: flex; gap: 6px; align-items: center; background: var(--ok-soft); color: var(--ok); border-radius: 8px; padding: 9px 12px; font-weight: 600; font-size: 13px }
.pz-act { display: grid; gap: 8px } .pz-act .btn.primary { padding: 10px; font-size: 15px }
.check.sm { font-size: 13px }
/* nouvelle entreprise */
.ne { display: grid; gap: 12px }
.ne-r { display: grid; gap: 4px; max-height: 230px; overflow-y: auto }
.ne-o { text-align: left; display: grid; gap: 1px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer }
.ne-o:hover, .ne-o.on { border-color: var(--blue-hi); background: var(--blue-soft) } .ne-o small { color: var(--muted) }
.ne-f { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px }
.ne-logo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.ne-lg { display: grid; justify-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--surface); cursor: pointer }
.ne-lg img { width: 40px; height: 40px; object-fit: contain } .ne-lg small { font-size: 11px; color: var(--muted) } .ne-lg.on { border-color: var(--blue-hi); background: var(--blue-soft) }
.pz-l, .pz-lb, .pz-lsem, .pz-lc, .pz-s, .pz-ls { min-width: 0 }
.pz-l, .pz-lb, .pz-ls { grid-template-columns: minmax(0, 1fr) }
.pz-s > .seg, .pz-bbm > .seg { justify-self: start; width: max-content; max-width: 100% }
.pz-3, .pz-2 { align-items: start } .pz-s .field { align-content: start }
.c-em-p { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--ink2) }
.c-em-bud { margin-left: auto; font-weight: 600; color: var(--ink) }
.c-em-c { display: flex; flex-wrap: wrap; gap: 4px } .c-em-c .tag { font-size: 11.5px } .c-em-c .tag.p { background: var(--blue-soft); color: var(--night); font-weight: 600 }
.ocr-t { white-space: pre-wrap; font-size: 12px; max-height: 240px; overflow: auto; background: var(--bg2); padding: 10px; border-radius: 6px }
/* contrôle MXplorer ↔ antenne */
.cm .ph-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap } .cm h2 { margin: 0 }
.cm-k { display: flex; flex-wrap: wrap; gap: 8px }
.cm-kpi { display: grid; text-align: left; min-width: 120px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; border-left-width: 4px }
.cm-kpi b { font-size: 20px } .cm-kpi span { font-size: 12.5px; color: var(--muted) }
.cm-kpi.ok { border-left-color: var(--ok) } .cm-kpi.warn { border-left-color: #e3a13a } .cm-kpi.bad { border-left-color: var(--bad) } .cm-kpi.info { border-left-color: var(--cyan) }
.cm-kpi.on { background: var(--blue-soft); border-color: var(--blue-hi) }
.cm-al { display: flex; gap: 6px; align-items: center; margin: 0; background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 8px 10px; font-size: 13px }
.cm-ren summary { cursor: pointer; font-weight: 500 } .cm-ren ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px }
.cm-f { align-items: center }
.cm-t td { vertical-align: middle } .cm-t tr.vu { background: var(--surface2) } .cm-t tr.ko { background: var(--surface2) }
.cm-t .sub.warn, .cm-t small.warn { color: var(--warn) }
.cm-p { display: flex; align-items: center; gap: 8px } .cm-p > span { display: grid; font-size: 13px } .cm-p small { color: var(--muted); font-size: 11.5px }
.cm-cap { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 4px; overflow: hidden; flex: none }
.cm-cap img { width: 72px; height: 41px; object-fit: cover; display: block } .cm-cap i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgb(0 0 0 / .25) }
.cm-v { font-weight: 600; font-size: 13px } .cm-v.ok { color: var(--ok) } .cm-v.ecart { color: var(--bad) }
.lien { border: 0; background: none; color: var(--blue); text-decoration: underline; cursor: pointer; font-size: 12.5px; padding: 0 4px }
/* suivi : piste des bilans */
.spi { display: flex; gap: 3px; align-items: center }
.spi-s { width: 22px; height: 10px; border-radius: 3px; border: 1px solid var(--line2); background: var(--surface2); cursor: pointer; padding: 0 }
.spi-s.ok { background: var(--ok); border-color: var(--ok) } .spi-s.bad { background: var(--bad); border-color: var(--bad) } .spi-s.rel { background: #6a4fd6; border-color: #6a4fd6 }
.spi-s.proche { background: #f0b04d; border-color: #e3a13a } .spi-s.cur { outline: 2px solid var(--night); outline-offset: 1px }
.spi-t { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; margin-top: 5px } .spi-n { font-weight: 600; padding: 0; color: var(--ink) } .spi-n.bad { color: var(--bad) } .spi-n.proche { color: var(--warn) }
.spi.grand { flex-wrap: wrap; gap: 6px } .spi.grand .spi-s { width: auto; height: auto; padding: 8px 12px; display: grid; text-align: left; border-radius: 8px; color: var(--ink) }
.spi.grand .spi-s.ok, .spi.grand .spi-s.bad, .spi.grand .spi-s.rel { color: #fff } .spi.grand .spi-s small { font-size: 12px; opacity: .85 }
.t.suivi td.s-camp { min-width: 300px }
.t.suivi td { padding-top: 12px; padding-bottom: 12px }
.s-todo.grand li { font-size: 16px; padding: 4px 0 }
/* mode réunion */
.sp-fond { position: fixed; inset: 0; z-index: var(--z-plein); background: rgb(9 0 19 / .72); display: grid; place-items: center; padding: 22px; animation: spf .18s ease-out }
@keyframes spf { from { opacity: 0 } }
.sp { width: min(1280px, 100%); height: min(860px, 100%); background: var(--surface); border-radius: 16px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: 0 30px 80px rgb(0 0 0 / .4) }
.sp-h { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface) var(--brand-grad) top / 100% 3px no-repeat }
.sp-pos { font: 500 14px var(--f-mono); color: var(--muted) } .sp-pos b { color: var(--ink); font-size: 18px }
.sp-dots { flex: 1; display: flex; flex-wrap: wrap; gap: 5px } .sp-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--line2); cursor: pointer; padding: 0 }
.sp-dots button.bad { background: #f2a3a0 } .sp-dots button.on { background: var(--night); transform: scale(1.35) }
.sp-c { overflow-y: auto; padding: 24px 32px; display: grid; gap: 22px; align-content: start }
.sp-t { display: flex; gap: 20px; align-items: center } .sp-t > div:nth-child(2) { flex: 1; min-width: 0 }
.sp-t h1 { margin: 0; font-size: 30px; letter-spacing: -.01em } .sp-t p { margin: 4px 0 0; color: var(--ink2); font-size: 16px } .sp-m { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.sp-taux { display: grid; justify-items: center; gap: 4px } .sp-taux small { color: var(--muted) }
.sp-g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px }
.sp-g section { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; align-content: start } .sp-g h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.sp-bb { display: grid; gap: 6px; font-size: 15px }
.sp-nadd { display: flex; gap: 8px; align-items: flex-end } .sp-nadd textarea { flex: 1 }
.sp-f { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line) }
@media (max-width: 900px) { .sp-g { grid-template-columns: 1fr } .sp-c { padding: 16px } .sp-t { flex-wrap: wrap } }
/* bibliothèque */
.bi-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 12px }
.bi-bar > .in { width: 240px } .bi-bar select.in { width: 190px } .bi-c { width: 240px }
.bi-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
.bi-k { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0 }
.bi-k.off { opacity: .6 }
.bi-v { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer; background: linear-gradient(135deg, #1b0d35, #2d1a52); overflow: hidden }
.bi-v img { width: 100%; height: 100%; object-fit: cover; display: block }
.bi-v .bi-pl { position: absolute; inset: 0; display: grid; place-items: center; color: #fff } .bi-v .bi-pl svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .5)); opacity: .9 }
.bi-v:hover .bi-pl svg { transform: scale(1.1) }
.bi-v em { position: absolute; right: 6px; bottom: 6px; background: rgb(0 0 0 / .65); color: #fff; font: 600 11.5px var(--f-mono); padding: 1px 6px; border-radius: 4px; font-style: normal }
.bi-v.petit { width: 88px; border-radius: 6px } .bi-v.petit .bi-pl svg { width: 18px; height: 18px } .bi-v.petit em { font-size: 10px; right: 3px; bottom: 3px }
.bi-b { padding: 10px 12px 12px; display: grid; gap: 6px; align-content: start; min-width: 0 }
.bi-h { display: flex; gap: 6px; align-items: center } .bi-m { margin-left: auto; padding: 2px 8px }
.bi-b h3 { margin: 0; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word }
.bi-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px } .bi-meta .warn { color: var(--warn) }
.bi-tx p { margin: 0; font-size: 12.5px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: italic }
.bi-tx.ouvert p { -webkit-line-clamp: unset } .bi-tx small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px }
.bi-w { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.bi-t tr.off { opacity: .6 }
.bi-drop { position: fixed; inset: 0; z-index: var(--z-plein); background: rgb(27 13 53 / .55); display: grid; place-items: center; pointer-events: none }
.bi-drop > div { background: var(--surface); border: 2px dashed var(--blue-hi); border-radius: 16px; padding: 40px 60px; display: grid; justify-items: center; gap: 6px; text-align: center }
.bi-drop svg { width: 40px; height: 40px; color: var(--blue-hi) } .bi-drop b { font-size: 18px } .bi-drop span { color: var(--muted) }
/* dépôt */
.dp { display: grid; gap: 12px }
.dp-z { display: flex; gap: 14px; align-items: center; border: 2px dashed var(--line2); border-radius: 12px; padding: 22px; cursor: pointer; background: var(--bg2) }
.dp-z.over, .dp-z:hover { border-color: var(--blue-hi); background: var(--blue-soft) } .dp-z > svg { width: 30px; height: 30px; color: var(--muted) } .dp-z > div { display: grid } .dp-z span { color: var(--muted); font-size: 13px }
.dp-l { display: grid; gap: 6px }
.dp-i { display: grid; grid-template-columns: 28px minmax(0, 1.4fr) 130px 110px minmax(0, 1fr) minmax(0, .9fr) 30px; gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px }
.dp-i.ok { background: var(--ok-soft); border-color: #bfe3cd } .dp-i.ko { background: var(--bad-soft) }
.dp-ic { color: var(--muted); padding-top: 6px } .dp-c { display: grid; gap: 3px; min-width: 0 } .dp-c small { color: var(--muted); font-size: 11.5px } .dp-c small.ok { color: var(--ok) } .dp-c small.ko { color: var(--bad) }
.dp-cb .cb-f { min-height: 32px } .dp-cb .cb-i { font-size: 13px; padding: 2px }
@media (max-width: 900px) { .dp-i { grid-template-columns: 28px 1fr 1fr } }
.bi-w .btn.sm { padding: 3px 8px; font-size: 12.5px } .bi-k .bi-w .pill { margin-right: auto }
/* programmes et disponibilités : navigation et calendriers mois / année */
.pl-nav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 4px 0 2px; overflow-x: auto; scrollbar-width: none }
.pl-nav button { border: 0; background: none; padding: 9px 14px; font-weight: 500; color: var(--ink2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; font-size: 14px }
.pl-nav button:hover { color: var(--ink) } .pl-nav button.on { color: var(--night); font-weight: 600; border-bottom-color: var(--pink) }
.pl-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between }
.pl-t { font-size: 17px; text-transform: capitalize; min-width: 180px; text-align: center }
.pl-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--ink2) } .pl-leg span { display: inline-flex; align-items: center; gap: 5px } .pl-leg .pl-c { width: 14px; height: 14px; border-radius: 3px }
.pl-wrap { overflow: hidden }
.pl-g-z { overflow-x: auto }
.pl-g { --cw: 26px; display: grid; grid-template-columns: 230px repeat(var(--n), minmax(var(--cw), 1fr)); min-width: calc(230px + var(--n) * var(--cw)); font-size: 12px }
.pl-g.annee { --cw: 17px }
.pl-coin { grid-row: span 2; display: flex; align-items: flex-end; padding: 8px 12px; color: var(--muted); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); position: sticky; left: 0; background: var(--surface); z-index: 3 }
.pl-h { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; border-bottom: 1px solid var(--line); background: var(--surface) }
.pl-h > span { display: grid; justify-items: center; padding: 4px 0; position: relative; color: var(--ink2) } .pl-h small { font-size: 10.5px; color: var(--muted) } .pl-h b { font: 600 12px var(--f-mono) }
.pl-h > span.we { background: var(--bg2) } .pl-h > span.auj b { color: #fff; background: var(--pink); border-radius: 50%; width: 21px; height: 21px; display: grid; place-items: center }
.pl-sem > span { font: 600 11px var(--f-mono); color: var(--muted); border-left: 1px solid var(--line); text-transform: capitalize; padding: 5px 0 3px; justify-items: start; padding-left: 6px }
.pl-fe { position: absolute; top: 0; right: 1px; color: #d4a017; font-size: 9px; font-style: normal } .pl-leg .pl-fe { position: static; font-size: 12px }
.pl-e { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px 12px; display: grid; min-width: 0 }
.pl-e b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .pl-e small { color: var(--muted); font: 11px var(--f-mono) }
.pl-r { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; border-bottom: 1px solid var(--line); user-select: none }
.pl-r .pl-c { margin: 4px 1px; border-radius: 4px; position: relative; cursor: pointer; min-height: 24px; display: grid; place-items: center }
.pl-c.libre { background: #e3f3ea; box-shadow: inset 0 0 0 1px #c6e6d3 } .pl-c.libre:hover { background: #c9ead6 }
.pl-c.vendu { background: var(--blue) } .pl-c.option { background: repeating-linear-gradient(135deg, #f6c46f 0 4px, #fbe3b4 4px 8px) }
.pl-c.partiel { background: linear-gradient(90deg, var(--blue) 0 50%, #e3f3ea 50%) } .pl-c.hors { background: transparent; box-shadow: inset 0 0 0 1px var(--surface2) }
.pl-c em { font: 600 9px var(--f-mono); color: #fff; font-style: normal; letter-spacing: -.02em; overflow: hidden } .pl-c.option em { color: #6a4300 }
.pl-g.annee .pl-c em { display: none }
.pl-r .pl-c.auj { box-shadow: inset 0 -3px 0 var(--pink) } .pl-r .pl-c.auj.libre { box-shadow: inset 0 0 0 1px #c6e6d3, inset 0 -3px 0 var(--pink) }
.pl-c.sel { outline: 2px solid var(--night); outline-offset: 0; transform: scale(1.06); z-index: 1 }
.pl-sel { position: sticky; bottom: 14px; z-index: 30; display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; background: var(--night); color: #fff; border-radius: 12px; padding: 10px 14px 10px 18px; box-shadow: 0 16px 40px rgb(9 0 19 / .35) }
.pl-sel-i { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center } .pl-sel-i span:not(.pill) { color: rgb(255 255 255 / .75) }
.pl-sel .btn.ghost { color: #fff } .pl-sel .btn.ghost:hover { background: rgb(255 255 255 / .1) } .pl-sel .btn:not(.primary):not(.ghost) { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35) }
.pl-sel .btn.primary { background: var(--surface); color: var(--night); border-color: #fff }
.pl-sem > span { overflow: hidden; white-space: nowrap; text-overflow: clip }
.wc-tete { display: flex; justify-content: flex-end; margin: -4px 0 6px } .wc-seg button { padding: 3px 10px; font-size: 12.5px }
.ca-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 14px; margin-top: 8px }
.ca-m > b { display: block; font-size: 12.5px; text-transform: capitalize; margin-bottom: 4px }
.ca-j { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px } .ca-j i { font: 10px var(--f-mono); font-style: normal; text-align: center; padding: 2px 0; border-radius: 3px; color: var(--muted) }
.ca-j i.e { color: #fff; font-weight: 600 } .ca-j i.debut { background: #1f9e9a } .ca-j i.fin { background: #c2410c } .ca-j i.bilan { background: #6a4fd6 }
.ca-j i.auj { outline: 2px solid var(--pink); color: var(--ink) }
/* analyses */
.an-f { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; position: sticky; top: 99px; z-index: 15; background: var(--bg); padding: 8px 0 }
.an-cb { width: 220px } .an-cb .cb-f { min-height: 32px } .an-f select.in { width: 160px } .an-dates { display: inline-flex; gap: 6px; align-items: center } .an-dates .in { width: 150px }
.an-per { margin: 0; color: var(--muted); font-size: 13px }
.an-ks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px }
.an-k { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; border-top: 3px solid var(--line2) }
.an-k span { font-size: 12.5px; color: var(--muted); font-weight: 500 } .an-k b { font-size: 24px; letter-spacing: -.01em } .an-k small { color: var(--muted); font-size: 12px }
.an-k.ok { border-top-color: var(--ok) } .an-k.warn { border-top-color: #e3a13a } .an-k.bad { border-top-color: var(--bad) }
.an-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 }
.an-l2 { grid-column: span 2 } @media (max-width: 1100px) { .an-g { grid-template-columns: 1fr 1fr } } @media (max-width: 760px) { .an-g { grid-template-columns: 1fr } .an-l2 { grid-column: auto } }
.an-p { align-content: start } .an-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap } .an-ph h2 { margin: 0; font-size: 15px }
.an-c .gr { stroke: var(--line); stroke-width: 1 } .an-c .ax { font-size: 11px; fill: var(--muted); font-family: var(--f-mono) }
.an-c .hit { fill: transparent; cursor: crosshair } .an-c .cross { stroke: var(--ink2); stroke-dasharray: 3 3; opacity: 0; pointer-events: none }
.an-c .zones .hit:hover + .cross, .an-c .zones .hit:focus + .cross { opacity: .6 }
.an-b { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.an-b li { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 4px; border-radius: 6px }
.an-b li.click { cursor: pointer } .an-b li.click:hover { background: var(--bg2) }
.an-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2) }
.an-bt { height: 12px; background: var(--surface2); border-radius: 0 4px 4px 0; overflow: hidden } .an-bt i { display: block; height: 100%; border-radius: 0 4px 4px 0 }
.an-b b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 54px; text-align: right }
.an-t th.tri { cursor: pointer; user-select: none } .an-t th.tri.on { color: var(--night) }
.an-tx { font-weight: 600 } .an-tx.ok { color: var(--ok) } .an-tx.warn { color: var(--warn) } .an-tx.bad { color: var(--bad) }
/* onglets de travail */
.onglets { position: sticky; top: 61px; z-index: 19; display: flex; align-items: flex-end; gap: 4px; padding: 6px 28px 0; background: var(--surface2); border-bottom: 1px solid var(--line); min-height: 38px }
.og-l { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; min-width: 0 } .og-l::-webkit-scrollbar { display: none }
.og { display: flex; align-items: center; gap: 4px; max-width: 220px; min-width: 90px; padding: 6px 6px 6px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--ink2); cursor: pointer; font-size: 13px; user-select: none }
.og:hover { background: rgb(255 255 255 / .6) }
.og.on { background: var(--bg); border-color: var(--line); color: var(--night); font-weight: 600; margin-bottom: -1px; padding-bottom: 7px; box-shadow: inset 0 2px 0 var(--pink) }
.og-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 }
.og-x { border: 0; background: none; color: var(--muted); width: 20px; height: 20px; border-radius: 4px; cursor: pointer; font-size: 15px; line-height: 1; flex: none }
.og-x:hover { background: var(--line); color: var(--ink) }
.og-plus { border: 0; background: none; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 6px; cursor: pointer; color: var(--ink2); font-size: 18px; flex: none }
.og-plus:hover { background: var(--line) } .og-plus:disabled { opacity: .3 }
@media (max-width: 760px) { .onglets { display: none } }
.pz-br { display: flex; gap: 10px; align-items: center; background: var(--cyan-soft); border: 1px solid #b9ebe9; border-radius: 8px; padding: 8px 12px; font-size: 13px } .pz-br span { flex: 1 }
/* book sponso */
.bk-mois { gap: 8px; font-size: 13px; color: var(--ink2) } .bk-mois select { width: 210px; text-transform: capitalize }
.bk-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px }
.bk { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; align-content: start }
.bk.off { opacity: .55 }
.bk header { display: flex; gap: 8px; align-items: center } .bk h3 { margin: 0; font-size: 16px; flex: 1 }
.bk-f { font: 600 11px var(--f-body); text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; background: var(--blue-soft); color: var(--night) }
.bk-f.meteo { background: var(--cyan-soft); color: #0f6e6b } .bk-f.eco { background: #fdf3e1; color: var(--warn) }
.bk-d { margin: 0; font-size: 13px; color: var(--ink2) }
.bk-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px } .bk-k > div { background: var(--bg2); border-radius: 8px; padding: 8px 10px; display: grid }
.bk-k small { color: var(--muted); font-size: 11.5px; text-transform: capitalize } .bk-k b { font-size: 18px } .bk-k span { font-size: 11.5px; color: var(--muted) }
.bk-k .bk-px { background: var(--blue); color: #fff } .bk-k .bk-px small, .bk-k .bk-px span { color: rgb(255 255 255 / .75) }
.bk-t { width: 100%; border-collapse: collapse; font-size: 12.5px } .bk-t th { text-align: left; color: var(--muted); font-weight: 500; padding: 3px 4px; border-bottom: 1px solid var(--line) }
.bk-t td { padding: 4px; border-bottom: 1px solid var(--surface2) } .bk-t .num { text-align: right }
.bk-dig { margin: 0; font-size: 12.5px; color: var(--ink2); display: flex; gap: 6px; align-items: flex-start }
.bk footer { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap } .bk-em { display: flex; flex-wrap: wrap; gap: 4px }
.bk-idx { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px } .bk-idx label { display: grid; gap: 2px; font-size: 12px; text-transform: capitalize; color: var(--ink2) }
.pz-book { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink2); background: var(--bg2); border-radius: 6px; padding: 5px 9px } .pz-book:empty { display: none } .pz-book .warn { color: var(--warn); font-weight: 600 }
.pz-bk { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 6px 10px; border: 1px dashed var(--line2); border-radius: 8px } .pz-bk span { color: var(--muted) } .pz-bk em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--ok) } .pz-bk em.warn { color: var(--warn) }

/* ---------- mail de passation à l'équipe */
.pz-ml { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2, var(--bg)) }
.pz-ml .check span { display: inline-flex; align-items: center; gap: 6px } .pz-ml .check svg { width: 15px; height: 15px }
.pz-mlp { padding-left: 24px; color: var(--ink2) }
.pm { display: grid; gap: 14px }
.pm-c { font: 13px/1.55 var(--f-mono, ui-monospace, monospace); min-height: 280px }
.pm-mod { border: 1px solid color-mix(in srgb, var(--warn, #c98a00) 40%, transparent); background: color-mix(in srgb, var(--warn, #c98a00) 8%, transparent); border-radius: 10px; padding: 10px 14px }
.pm-mod b { display: flex; align-items: center; gap: 6px } .pm-mod svg { width: 16px; height: 16px }
.pm-mod ul { margin: 6px 0; padding-left: 18px } .pm-mod small { color: var(--ink2) }
.pm-h summary { cursor: pointer; font-weight: 600; color: var(--ink2) }
.pm-hi { display: grid; grid-template-columns: 110px 1fr; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line) }
.pm-hi small { grid-column: 2; color: var(--ink3, var(--ink2)) }
.mp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) } @media (max-width: 900px) { .mp { grid-template-columns: 1fr } }
.t.bl tr.bl-comp td { background: color-mix(in srgb, #1f9e9a 7%, transparent); }
.t.bl tr.bl-comp td:first-child { box-shadow: inset 3px 0 0 #1f9e9a }

/* ---------- compensation après un bilan */
.cp { display: grid; gap: 12px }
.cp-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.cp-res > div { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; display: grid; gap: 1px }
.cp-res small { font-size: 11.5px; color: var(--ink2) } .cp-res b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums } .cp-res span { font-size: 12px; color: var(--ink3, var(--ink2)) }
.cp-res .warn { border-color: color-mix(in srgb, var(--warn, #c98a00) 45%, var(--line)); background: color-mix(in srgb, var(--warn, #c98a00) 7%, transparent) }
.cp-res .ok { border-color: color-mix(in srgb, var(--ok, #1e7f4f) 40%, var(--line)) }
.cp-man summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink2); padding: 4px 0 }
.cp-ml { display: grid; margin-top: 4px; max-height: 260px; overflow: auto }
.cp-mi { display: grid; grid-template-columns: 118px minmax(0, 1fr) 72px minmax(0, 1.3fr) 70px 96px; gap: 8px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 13px }
.cp-mi.couv { opacity: .62 } .cp-mi .num { text-align: right; font-variant-numeric: tabular-nums }
.cp-mo { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .cp-mo.es, .ca-mi .es { color: #b4235f }
.cp-k { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; box-shadow: inset 3px 0 0 #1f9e9a }
.cp-kh { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start }
.cp-kh b { display: block } .cp-kh small { color: var(--ink2) }
.cp-st { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; font-size: 11.5px }
.cp-st li { padding: 3px 10px 3px 16px; position: relative; color: var(--ink3, var(--ink2)) }
.cp-st li::before { content: ""; position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; border: 1.5px solid currentColor }
.cp-st li.fait { color: #1f9e9a } .cp-st li.fait::before { background: currentColor }
.cp-st li.on { color: var(--ink); font-weight: 700 } .cp-st li.on::before { background: #1f9e9a; border-color: #1f9e9a; box-shadow: 0 0 0 3px color-mix(in srgb, #1f9e9a 22%, transparent) }
.cp-kl { display: grid; gap: 4px }
.cp-kli { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.6fr) 70px 80px; gap: 10px; font-size: 13px; align-items: baseline }
.cp-kli span { color: var(--ink2) } .cp-kli .num { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums }
.cp-av { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink2) }
.cp-bar { flex: 0 0 160px; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden } .cp-bar i { display: block; height: 100%; background: #1f9e9a; border-radius: 4px }
.cp-rem summary { cursor: pointer; font-size: 12.5px; color: var(--ink2) } .cp-rem .chip-f { margin: 4px 4px 0 0 }
.cp-msg { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--ink2); font-size: 13px; font-style: italic; background: var(--surface2, transparent) }
.row.cp-act { flex-wrap: wrap; gap: 6px } .row.cp-act svg { width: 14px; height: 14px }
.rouge { color: var(--bad) }

.ca-modal { width: min(1180px, calc(100vw - 32px)) !important; max-width: none !important }
.ca { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 18px; align-items: start }
.ca-c { display: grid; gap: 10px; min-width: 0 } .ca-full { grid-column: 1 / -1 }
.ca-c h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px }
.ca-all { justify-self: start }
.ca-ml { display: grid; gap: 6px; max-height: 420px; overflow: auto; padding-right: 4px }
.ca-mi { display: grid; grid-template-columns: 18px 64px minmax(0, 1fr) 54px auto; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 13px }
.ca-mi:has(input:checked) { border-color: #1f9e9a; background: color-mix(in srgb, #1f9e9a 6%, transparent) }
.ca-mi .mono { font-size: 11.5px; line-height: 1.3 } .ca-mi small { display: block; color: var(--ink2) }
.ca-mi .num { text-align: right; font-variant-numeric: tabular-nums } .ca-mi .num small { font-size: 10.5px }
.ca-mi img { width: 64px; height: 36px; object-fit: cover; border-radius: 4px }
.ca-l { display: grid; gap: 10px }
.ca-li { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 8px; min-width: 0 }
.ca-lh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center } .ca-lh svg { width: 15px; height: 15px }
.ca-j { display: flex; gap: 4px; align-items: center; flex-wrap: wrap }
.ca-j button { width: 28px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: transparent; font-weight: 600; font-size: 12px; cursor: pointer; color: var(--ink2) }
.ca-j button.on { background: var(--nuit, #090013); color: #fff; border-color: transparent } .ca-j .muted { margin-left: 8px; font-size: 12.5px }
.ca-e { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; min-height: 36px }
.ca-n b { font-size: 17px; font-variant-numeric: tabular-nums } .ca-n small { display: block; color: var(--ink2); font-size: 11.5px }
.ca-d { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 12px; background: var(--surface2, #f5f4f8) }
.ca-d svg { width: 13px; height: 13px } .ca-d.ok { color: var(--ok, #1e7f4f) } .ca-d.warn { color: #9a5600; background: color-mix(in srgb, #c98a00 10%, transparent) }
.ca-rec { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-right: auto; font-size: 13px }
.ca-rec > span { display: grid } .ca-rec small { font-size: 11px; color: var(--ink2) } .ca-rec b { font-size: 16px } .ca-rec em { font-style: normal; color: var(--ink2); font-size: 12px }
.ca-rec .ok b { color: var(--ok, #1e7f4f) } .ca-rec .warn b { color: #9a5600 } .ca-fl { color: var(--ink3, var(--ink2)); font-size: 18px }
.ca-rec .ca-v { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-weight: 600 } .ca-v svg { width: 14px; height: 14px } .ca-v.ok { color: var(--ok, #1e7f4f) } .ca-v.warn { color: #9a5600 }
.ca-modal .mf { flex-wrap: wrap; gap: 10px; justify-content: flex-end }
@media (max-width: 860px) { .ca { grid-template-columns: 1fr } .cp-res { grid-template-columns: 1fr } .cp-mi { grid-template-columns: 1fr 1fr } .cp-kli { grid-template-columns: 1fr 1fr } }

/* ---------- prix négocié (sponso et pack) */
.pz-px .pz-pxg { display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: 4px }
.pz-px .pz-pxg .pz-v > i { font-size: 11px; white-space: nowrap }
.pz-lm { grid-template-columns: 150px minmax(0, 1fr) minmax(250px, 300px) }
.pz-lock { margin-left: 6px; font: 600 10.5px var(--f-body); border: 1px solid var(--line2); background: transparent; color: var(--muted); border-radius: 10px; padding: 0 7px; cursor: pointer }
.pz-lock.on { background: var(--nuit, #090013); color: #fff; border-color: transparent }
.pz-pk { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px }
.pz-pkh b { display: block; font-size: 13px } .pz-pkh small { color: var(--muted); font-size: 11.5px }
.pz-pkg { display: grid; grid-template-columns: 1.5fr 1fr; gap: 6px }
.pz-pk .pz-bk { border-style: solid; background: var(--bg2) }
.pz-neg.warn { color: var(--warn); font-weight: 600 }

/* ---------- mandat et bon de commande */
.ct-g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px } @media (max-width: 1000px) { .ct-g { grid-template-columns: 1fr } }
.ct-g > .panel { display: grid; gap: 12px }
.ct-af h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14.5px } .ct-af h3 svg { width: 16px; height: 16px; color: var(--warn) }
.ct-af ul { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 13.5px } .ct-af li.important { font-weight: 600 } .ct-af li.info { color: var(--ink2) }
.ct-okb { display: flex; align-items: center; gap: 6px } .ct-okb svg { width: 16px; height: 16px }
.ct-t td.num, .ct-t th.num { font-variant-numeric: tabular-nums } .ct-t .ct-tot td { font-weight: 700; border-top: 1.5px solid var(--ink) } .ct-t .ct-sub td { color: var(--ink2) }
.ct-ech { display: flex; gap: 8px; flex-wrap: wrap } .ct-ech span { display: grid; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12.5px } .ct-ech small { color: var(--muted) } .ct-ech em { font-style: normal; color: var(--ink2); font-size: 11.5px }
.ct-sig { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px } .ct-sigh { display: grid } .ct-sigh .muted { font-size: 12.5px }
.ct-fr { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; font-size: 12px }
.ct-fr li { flex: 1; padding-top: 14px; position: relative; color: var(--muted); text-align: center } .ct-fr li::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 3px; background: var(--line); border-radius: 2px }
.ct-fr li.fait { color: var(--ok); font-weight: 600 } .ct-fr li.fait::before { background: var(--ok) }
.ct-act { flex-wrap: wrap; gap: 6px }
.ct-scan { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px } .ct-scan h3 { margin: 0; font-size: 14px }
.ct-drop { padding: 14px } .ct-drop svg { width: 18px; height: 18px; margin: 0 auto } .ct-drop small { font-size: 11.5px } .ct-drop.busy { opacity: .7; pointer-events: none }
.ct-mf { justify-content: space-between } .ct-mf span { display: inline-flex; align-items: center; gap: 6px } .ct-mf svg { width: 16px; height: 16px }
.ct-lu { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg2) }
.ct-luh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap } .ct-luh svg { width: 15px; height: 15px; color: var(--ok) } .ct-luh small { color: var(--muted); font-size: 11.5px }
.ct-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13px } .ct-kv dt { color: var(--muted) } .ct-kv dd { margin: 0; overflow-wrap: anywhere }
.ct-al { display: grid; gap: 4px } .ct-al .warn-box { padding: 6px 10px; font-size: 12.5px }
.ct-pr { display: grid; gap: 4px; font-size: 13px } .ct-pr .btn { justify-self: start; margin-top: 4px } .ct-pr s { color: var(--muted) }
.ok-box { background: var(--ok-soft, #e6f4ec); color: var(--ok); border-radius: 6px; padding: 8px 12px; font-size: 13.5px }

/* ---------- book sponso : couvertures et pages d'offre (visuels du book) */
.bkx-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 14px 0 12px; padding: 22px 24px; border-radius: 14px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #3a2bff 0%, #1608a8 38%, #090013 80%); }
.bkx-hero small { font: 600 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .7 }
.bkx-hero b { display: block; font: 400 38px/1 Anton, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; margin: 4px 0 6px }
.bkx-hero span { opacity: .8; font-size: 13px }
.bkx-mois { display: grid; gap: 4px; font-size: 12px; color: rgba(255,255,255,.75) } .bkx-mois .in { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25) } .bkx-mois option { color: #000 }
.bkx-f { margin-bottom: 12px }
.bkx-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px }
.bkx-c { display: grid; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s }
.bkx-c:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(9,0,19,.14) }
.bkx-v { aspect-ratio: 16 / 9; background: #090013; position: relative; overflow: hidden }
.bkx-v img { width: 100%; height: 100%; object-fit: cover; display: block }
.bkx-v::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--bk) }
.bkx-mt { position: absolute; left: 14px; bottom: 14px; font: 400 26px/1 Anton, Impact, sans-serif; color: #fff; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.5) }
.bkx-b { padding: 12px 14px 14px; display: grid; gap: 10px }
.bkx-t b { display: block; font: 400 21px/1.1 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em } .bkx-t span { font-size: 12.5px; color: var(--muted) }
.bkx-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.bkx-k span { display: grid; background: var(--bg2); border-radius: 8px; padding: 6px 8px } .bkx-k small { font-size: 11px; color: var(--muted) } .bkx-k b { font-size: 17px } .bkx-k em { font-style: normal; font-size: 11px; color: var(--muted) }
.bkx-d { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px } .bkx-d i { height: 7px; border-radius: 3px; background: var(--line) }
.bkx-e.libre { background: #1e9e6a !important } .bkx-e.partiel { background: #7fd1ad !important } .bkx-e.option { background: #e8a33a !important } .bkx-e.vendu { background: #c8141c !important } .bkx-e.hors { background: var(--line2) !important }
.bkx-leg { margin-top: 12px } .bkx-leg i.bkx-e { display: inline-block; width: 14px; height: 7px; border-radius: 3px; margin-right: 5px }

.bkx-p { display: grid; gap: 16px; margin-top: 12px }
.bkx-ph { position: relative; overflow: hidden; border-radius: 16px; min-height: 300px; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; padding: 26px 28px; color: #fff;
  background: radial-gradient(90% 120% at 75% 30%, color-mix(in srgb, var(--bk) 55%, #1a10c8) 0%, #12079a 45%, #090013 100%) }
.bkx-ph.meteo { background: radial-gradient(90% 120% at 75% 30%, #2b4bff 0%, #12079a 50%, #090013 100%) }
.bkx-pr { position: absolute; right: 290px; bottom: 0; height: 108%; max-width: 58%; object-fit: contain; object-position: bottom right; pointer-events: none; filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)) }
.bkx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; pointer-events: none }
.bkx-pt { position: relative; z-index: 1; display: grid; align-content: end; gap: 6px; max-width: 520px }
.bkx-pt .retour { color: rgba(255,255,255,.75); align-self: start; margin-bottom: auto } .bkx-pt .retour svg { color: inherit }
.bkx-pt h1 { margin: 0; font: 400 clamp(38px, 5vw, 64px)/.95 Anton, Impact, sans-serif; text-transform: uppercase; color: var(--bk); text-shadow: 0 2px 20px rgba(0,0,0,.25) }
.bkx-ph.meteo .bkx-pt h1, .bkx-ph.eco .bkx-pt h1 { color: #fff }
.bkx-pt p { margin: 0; font-size: 15px; opacity: .9 } .bkx-pp { font-weight: 600; opacity: 1 !important }
.bkx-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px } .bkx-tags span { font: 600 11px var(--f-body); letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 4px 10px }
.bkx-prix { position: relative; z-index: 1; align-self: end; display: grid; gap: 2px; background: #1a10e6; border-radius: 14px; padding: 16px 18px; box-shadow: 0 12px 30px rgba(0,0,0,.25) }
.bkx-prix small, .bkx-prix span { font-size: 12px; opacity: .8 } .bkx-prix b { font: 400 40px/1 Anton, Impact, sans-serif } .bkx-prix label { margin-top: 10px; font-size: 12px; display: flex; gap: 6px; align-items: center }
.bkx-prix select { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 2px 6px } .bkx-prix option { color: #000 }
.bkx-pm { font-size: 30px !important }
.bkx-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px } @media (max-width: 1050px) { .bkx-cols, .bkx-ph { grid-template-columns: 1fr } .bkx-pr { right: 0; opacity: .35 } }
.bkx-cols h2 small, .bkx-p h2 small { font-weight: 500; color: var(--muted); font-size: 13px }
.bkx-st { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px }
.bkx-st th { text-align: center; font: 600 12px var(--f-body); color: var(--muted) } .bkx-st tbody th { text-align: left; color: var(--ink); white-space: nowrap; padding-right: 8px } .bkx-st tbody th small { display: block; color: var(--muted); font-weight: 400 }
.bkx-st td { text-align: center; background: var(--bg2); border-radius: 6px; height: 32px; min-width: 44px }
.bkx-st td span { display: inline-block; font-weight: 600; color: #1608a8; font-size: 12px }
.bkx-st tr.tot td { background: #1608a8; color: #fff; font-weight: 700 } .bkx-st tr.tot th { color: #1608a8 }
.bkx-tot { margin: 10px 0 0; font-size: 13.5px } .bkx-tot b { font: 400 20px Anton, Impact, sans-serif; color: #1608a8 }
.bkx-fr { display: grid; gap: 6px; padding-top: 18px; position: relative }
.bkx-fh { position: absolute; top: 0; left: 44px; right: 0; height: 14px } .bkx-fh span { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--muted) }
.bkx-fl { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 6px; align-items: center } .bkx-fl b { font-size: 12px; color: var(--muted) }
.bkx-fl > div { position: relative; height: 18px; background: repeating-linear-gradient(90deg, var(--bg2) 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); border-radius: 5px }
.bkx-fl i { position: absolute; top: 2px; bottom: 2px; background: var(--bk); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) }
.bkx-perf { display: grid; gap: 8px }
.bkx-perf > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 12px; align-items: baseline; border-left: 3px solid var(--bk); padding: 6px 10px; background: var(--bg2); border-radius: 0 8px 8px 0 }
.bkx-perf small { grid-row: span 2; font-weight: 600; color: var(--ink2) } .bkx-perf b { font: 400 24px/1 Anton, Impact, sans-serif; color: #1608a8 } .bkx-perf b i { font: 600 12px var(--f-body); font-style: normal; color: var(--muted) }
.bkx-perf span { font-size: 12.5px; color: var(--ink2); grid-column: 2 } .bkx-perf em { grid-column: 2; font-style: normal; font-size: 12px; color: var(--muted) }
.bkx-dig { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #090013; color: #fff } .bkx-dig svg { width: 18px; height: 18px; flex: none; color: var(--bk) } .bkx-dig b { display: block } .bkx-dig span { font-size: 12.5px; opacity: .85 }
.bkx-dw { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px }
.bkx-w { display: grid; gap: 1px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit }
.bkx-w b { font-size: 14px } .bkx-w small { font-size: 11px; color: var(--muted) } .bkx-w span { font-size: 12px; font-weight: 600 } .bkx-w em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bkx-w.libre { border-color: #1e9e6a; box-shadow: inset 0 3px 0 #1e9e6a } .bkx-w.libre span { color: #1e7f4f } .bkx-w.libre:hover { background: #e9f7f0 }
.bkx-w.partiel { box-shadow: inset 0 3px 0 #7fd1ad } .bkx-w.option { box-shadow: inset 0 3px 0 #e8a33a; cursor: default } .bkx-w.option span { color: #9a5600 }
.bkx-w.vendu { box-shadow: inset 0 3px 0 #c8141c; cursor: default; opacity: .75 } .bkx-w.vendu span { color: #c8141c } .bkx-w.hors { opacity: .5; cursor: default }
.bkx-orig summary { cursor: pointer; font-weight: 600 } .bkx-orig img { width: 100%; border-radius: 8px; margin-top: 10px }
.bkx-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px } .bkx-nav a { color: var(--ink2); font-weight: 600; text-decoration: none }
.bkx-cols { align-items: start }

/* planning : plus d'air, noms des annonceurs sur la durée vendue, familles du book */
.pl-g.annee { --cw: 30px } .pl-g.mois { --cw: 34px }
.pl-g { grid-template-columns: 250px repeat(var(--n), minmax(var(--cw), 1fr)); min-width: calc(250px + var(--n) * var(--cw)) }
.pl-r { position: relative; grid-auto-rows: 34px } .pl-r .pl-c { margin: 5px 1.5px; min-height: 24px; grid-row: 1 }
.pl-g.annee .pl-r .pl-c.m0 { margin-left: 6px } .pl-g.annee .pl-r .pl-c.m0::before { content: ""; position: absolute; left: -5px; top: -6px; bottom: -6px; border-left: 1px dashed var(--line2) }
.pl-run { grid-row: 1; align-self: center; margin: 0 3px; z-index: 1; pointer-events: none; font: 600 10.5px var(--f-body); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; text-align: left }
.pl-run.option { color: #6a4300 }
.pl-e { padding: 6px 12px } .pl-e b { display: flex; align-items: center; gap: 6px } .pl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.1) }
.pl-grp { grid-column: 1 / -1; position: sticky; left: 0; background: var(--bg2); border-bottom: 1px solid var(--line); padding: 5px 12px; font: 600 11.5px var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2) }
.pl-grp span { position: sticky; left: 12px } .pl-grp small { color: var(--muted); font-weight: 500; margin-left: 4px }
.pl-c em { display: none }
.bkx-ph::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(9,0,19,.82) 0%, rgba(9,0,19,.45) 38%, transparent 62%) }
.bkx-pr { z-index: 0; max-width: 50% } .bkx-pt, .bkx-prix { z-index: 2 }
.bkx-pt h1 { font-size: clamp(34px, 4.2vw, 56px) }
.pl-run { text-shadow: 0 0 3px rgba(9,0,19,.6) } .pl-run.option { text-shadow: none }
.c-arch { display: flex; align-items: center; gap: 8px; margin-bottom: 10px } .c-arch svg { width: 16px; height: 16px } .c-arch .btn { margin-left: auto }
.dsh-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 14px } .dsh-f .muted { font-size: 12px; margin-left: auto }
.j-f { gap: 8px; margin-bottom: 10px; flex-wrap: wrap }
.j-ch { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--ink2) } .j-ch s { color: var(--muted) } .j-ch b { font-weight: 600 }
.j-f { display: flex; align-items: center } .j-f > select { width: auto; min-width: 170px; max-width: 240px } .j-f label { font-size: 13px; color: var(--ink2) } .j-f input[type=date] { width: auto }
.po-modal { width: min(1100px, calc(100vw - 32px)) !important; max-width: none !important }
.po { display: grid; gap: 12px } .po .drop svg { width: 20px; height: 20px; margin: 0 auto }
.po-p { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px } .po-p label { display: inline-flex; gap: 6px; align-items: center } .po-p input { width: auto }
.po-r { font-size: 13.5px; display: grid; gap: 8px }
.po-l { display: grid; gap: 10px }
.po-c { border: 1px solid var(--line); border-radius: 10px; overflow: hidden } .po-c.ex { opacity: .6 }
.po-c header { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; background: var(--bg2) }
.po-c header .check { display: flex; gap: 8px; align-items: flex-start } .po-c header b { display: block } .po-c header small { color: var(--muted); font-size: 12px } .po-c header > span { display: flex; gap: 4px; flex-wrap: wrap }
.po-t { margin: 0 } .po-t td, .po-t th { padding: 5px 10px } .po-t input { width: 110px } .po-t .sub { max-width: 520px }
.po-a td { font-size: 12px; color: var(--ink2); padding-top: 0 } .po-a span { display: block } .po-a .warn { color: var(--warn) }
.dsh-f > select { width: auto; min-width: 170px; max-width: 240px }
.ct-val { margin: 0; font-size: 13px; color: var(--ink2) } .ct-val.warn { color: var(--warn) }
.doc-drop { padding: 22px } .doc-drop svg { width: 22px; height: 22px; margin: 0 auto } .doc-drop.busy { opacity: .7; pointer-events: none }
.doc-t td { vertical-align: top } .doc-af { display: block; font-size: 12.5px; color: var(--ink2) } .doc-af.important { color: var(--bad); font-weight: 500 } .doc-af.warn { color: var(--warn) }
.doc-m { display: grid; gap: 12px } .doc-m h3 { margin: 4px 0 0; font-size: 14px } .doc-c { display: grid; gap: 6px } .doc-c .check { align-items: flex-start; gap: 8px; display: flex; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px } .doc-c small { display: block; color: var(--muted) }

/* fiche annonceur : autres noms, marques, réunion de fiches */
.an-reg{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-bottom:6px}
.an-reg .full{grid-column:1/-1}
.an-reg small{color:var(--muted);font-size:12px}
@media (max-width:640px){.an-reg{grid-template-columns:1fr}}

/* tableau de suivi en couloirs : une bande par statut, cartes côte à côte */
.kanban.couloirs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; gap: 10px }
.kanban.couloirs .kcol { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); min-height: 0; padding: 8px 10px 10px; gap: 6px }
.kanban.couloirs .kcol > header, .kanban.couloirs .kvide { grid-column: 1 / -1 }
.kanban.couloirs .kcol > header { padding: 0 2px 2px } .kanban.couloirs .kcol > header div { display: flex; gap: 8px; align-items: baseline }
.kanban.couloirs .kcol > header small { display: inline }
.kanban.couloirs .kcarte { padding: 8px 10px; gap: 5px }
.kanban.couloirs .kcarte b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kanban.couloirs .kcarte .tete { gap: 8px } .kanban.couloirs .kcarte .tete .mq { --t: 28px }
.kanban.couloirs .kcarte .pied:empty { display: none }
.kanban.couloirs .kcol.replie { padding-bottom: 8px }
.kanban.couloirs .kvide { padding: 8px; }
.krep, .krep-v { cursor: pointer } .krep { border: 0; background: none; color: var(--muted); font-size: 13px; width: 20px; height: 20px; border-radius: 4px; padding: 0 }
.krep:hover { background: var(--surface); color: var(--ink) }

/* lecture d'antenne : sponso ou pub classique, campagnes suggérées */
.l-nat { display: inline-flex; width: auto; margin-top: 3px } .l-nat.sp { background: #efe9ff; color: #5b3fc4 } .l-nat.pub { background: var(--surface2); color: var(--muted) }
.l-sugg { color: #5b3fc4 }
.lq-nat { border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; font-size: 12.5px; background: var(--surface2) }
.lq-nat.sponso { background: var(--surface2) } .lq-nat.doute { background: #fff6e0 } .lq-nat span { color: var(--muted) }
.lq-cands { display: grid; gap: 6px; margin-bottom: 6px }
.lq-cand { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 7px 10px; cursor: pointer; display: grid; gap: 2px; font: inherit }
.lq-cand b { font-size: 12.5px } .lq-cand small { color: var(--muted); font-size: 11.5px }
.lq-cand:hover { border-color: var(--line2) } .lq-cand.on { border-color: #6a4fd6; box-shadow: inset 0 0 0 1px #6a4fd6; background: var(--surface2) }
.lq-pr { display: block; color: var(--muted); font-size: 12px; margin-top: 4px }

/* ---------- campagnes : tableau de suivi (une ligne par campagne, rangée par moment) ---------- */
.sv-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px }
.sv-k { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; font: inherit; position: relative; overflow: hidden }
.sv-k::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c) }
.sv-k b { font-size: 24px; line-height: 1.1; color: var(--ink) } .sv-k span { color: var(--muted); font-size: 12.5px } .sv-k:hover { border-color: var(--line2); box-shadow: 0 4px 14px rgb(21 15 36 / .06) }
.sv-sec { margin-bottom: 14px }
.sv-st { display: flex; align-items: baseline; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 2px; cursor: pointer; font: inherit; color: var(--ink); text-align: left }
.sv-st b { font-size: 15px } .sv-st small { color: var(--muted); font-size: 12.5px } .sv-chev { color: var(--muted); width: 14px }
.sv-n { background: var(--surface2); border-radius: 999px; padding: 0 8px; font-size: 12px; color: var(--muted); font-weight: 600 }
.sv-ls { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.sv-l { display: grid; grid-template-columns: minmax(200px, 1.25fr) minmax(220px, 1.6fr) 150px minmax(150px, 1fr) 76px; gap: 16px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); cursor: pointer; transition: background .12s }
.sv-ls > .sv-l:first-child, .sv-mois + .sv-l { border-top: 0 } .sv-l:hover { background: var(--surface2) } .sv-l:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px }
.sv-id { display: flex; gap: 10px; align-items: center; min-width: 0 } .sv-id > div { min-width: 0 }
.sv-id b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .sv-mq { font-weight: 500; color: var(--muted) }
.sv-id small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sv-fr { min-width: 0; display: grid; gap: 4px }
.sv-tr { position: relative; height: 6px; border-radius: 999px; background: var(--surface2) } .sv-tr i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #8b7cf0, #5b3fc4) }
.sv-tr b { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--surface); border: 3px solid #5b3fc4 }
.sv-fl { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden }
.sv-em { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--muted) } .sv-em span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap }
.sv-em i { width: 7px; height: 7px; border-radius: 2px }
.sv-dif { display: flex; gap: 8px; align-items: center; font-size: 12px } .sv-dif b { display: block; font-size: 13px } .sv-dif small { color: var(--muted) }
.sv-af { display: flex; flex-wrap: wrap; gap: 4px } .sv-af .pill { font-size: 11.5px } .sv-ok { color: #1e7f4f; font-size: 12px }
.sv-eq { display: flex; gap: 2px; justify-content: flex-end }
.sv-mois { padding: 8px 16px; background: var(--surface2); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; display: flex; gap: 8px; border-top: 1px solid var(--line) }
.sv-ls > .sv-mois:first-child { border-top: 0 } .sv-mois span { font-weight: 500 }
.sv-vide { padding: 16px; color: var(--muted); font-size: 13px }
@media (max-width: 1100px) { .sv-l { grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.4fr) 130px; } .sv-af { grid-column: 1 / -1 } .sv-eq { display: none } }
@media (max-width: 680px) { .sv-l { grid-template-columns: 1fr; gap: 8px; padding: 12px } .sv-af { grid-column: auto } }

/* ---------- campagnes : vue chronologique (comme le point OP) ---------- */
.ch-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 8px }
.ch-per { font-size: 13.5px } .ch-n { font-size: 12.5px; margin-left: auto }
.ch-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-bottom: 10px; align-items: center }
.ch-leg span { display: inline-flex; gap: 6px; align-items: center } .ch-leg i { width: 18px; height: 10px; border-radius: 3px; background: #5b4bd6 }
.ch-leg i.a_venir { opacity: .55 } .ch-leg i.terminee { opacity: .3 } .ch-leg i.option { background: transparent; border: 1.5px dashed #5b4bd6 }
.ch-leg i.compens { background: repeating-linear-gradient(135deg, #5b4bd6 0 3px, #a99df0 3px 6px) }
.ch-w { overflow: auto; max-height: calc(100vh - 250px); min-height: 280px; --ch-we: rgb(21 15 36 / .035) }
.ch { position: relative; font-size: 12px; --lw: 230px }
.ch-h { display: flex; position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line) }
.ch-l { position: sticky; left: 0; z-index: 2; width: var(--lw); flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; gap: 8px; align-items: center; padding: 6px 10px; min-width: 0 }
.ch-l i { width: 8px; height: 8px; border-radius: 2px; flex: none } .ch-l span { min-width: 0 }
.ch-l b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .ch-l small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ch-l[data-c] { cursor: pointer } .ch-l[data-c]:hover b { color: #5b3fc4 }
.ch-hl { font-weight: 600; color: var(--muted); font-size: 12px; z-index: 4 }
.ch-hd { position: relative; flex: none }
.ch-m, .ch-s, .ch-j { position: relative; height: 20px } .ch-m span, .ch-s span, .ch-j span { position: absolute; top: 0; height: 100%; display: flex; align-items: center; padding-left: 5px; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; color: var(--muted) }
.ch-m span { font-weight: 600; color: var(--ink); text-transform: capitalize } .ch-s span b { color: var(--ink); margin-right: 3px } .ch-s span.auj { background: var(--surface2) }
.ch-j span { justify-content: center; padding: 0; font-size: 10.5px; gap: 2px; border-left-color: transparent } .ch-j span i { font-style: normal; color: var(--ink) }
.ch-j span.we { background: var(--ch-we) } .ch-j span.auj { background: #5b3fc4; color: #fff; border-radius: 4px } .ch-j span.auj i { color: #fff }
.ch-g { position: sticky; left: 0; width: var(--lw); padding: 10px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
.ch-r { display: flex; border-bottom: 1px solid var(--line) } .ch-r.vide .ch-l b { color: var(--muted); font-weight: 500 }
.ch-t { position: relative; flex: none; background-color: var(--surface) }
.ch-b { position: absolute; height: 20px; border: 0; border-radius: 5px; background: var(--b); color: #fff; font: 600 11px/20px var(--f-body); padding: 0 6px; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 1px 2px rgb(0 0 0 / .12) }
.ch-b span { overflow: hidden; text-overflow: ellipsis; display: block }
.ch-b:hover { filter: brightness(1.08); box-shadow: 0 3px 10px rgb(0 0 0 / .2); z-index: 1 }
.ch-b.a_venir, .ch-b.brouillon { opacity: .62 } .ch-b.terminee { opacity: .35 }
.ch-b.option { background: transparent; color: var(--b); box-shadow: inset 0 0 0 1.5px var(--b); border: 1.5px dashed var(--b) }
.ch-b.compens { background: repeating-linear-gradient(135deg, var(--b) 0 5px, color-mix(in srgb, var(--b) 70%, #fff) 5px 10px) }
.ch-c { position: relative }
.ch-auj { position: absolute; top: 0; bottom: 0; width: 2px; background: #5b3fc4; opacity: .55; pointer-events: none; z-index: 1 }
@media (max-width: 680px) { .ch { --lw: 140px } .ch-n { margin-left: 0 } }

/* ---------- lecture d'antenne refaite ---------- */
.lc-etat { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px }
.lc-etat svg { width: 14px; height: 14px; vertical-align: -2px }
.lc-pt { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); flex: none }
.lc-pt.ok { background: #1e7f4f } .lc-pt.warn { background: #d97706 } .lc-pt.live { background: #dc2626; box-shadow: 0 0 0 0 rgb(220 38 38 / .5); animation: lcpulse 1.6s infinite }
@keyframes lcpulse { 0% { box-shadow: 0 0 0 0 rgb(220 38 38 / .45) } 70% { box-shadow: 0 0 0 8px rgb(220 38 38 / 0) } 100% { box-shadow: 0 0 0 0 rgb(220 38 38 / 0) } }
.lc-sep { width: 1px; height: 16px; background: var(--line) }
.lc-jours { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px }
.lc-j { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; max-width: 100% }
.lc-jb { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 12px; cursor: pointer; display: grid; text-align: left; font: inherit; flex: none }
.lc-jb b { font-size: 13px } .lc-jb small { color: var(--muted); font-size: 11.5px } .lc-jb:hover { border-color: var(--line2) }
.lc-jb.on { background: var(--night, #150f24); border-color: var(--night, #150f24); color: #fff } .lc-jb.on small { color: rgb(255 255 255 / .7) }
.lc-et { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px }
.lc-et li { display: flex; gap: 12px; align-items: flex-start } .lc-et .n { width: 28px; height: 28px; border-radius: 50%; background: #efe9ff; color: #5b3fc4; display: grid; place-items: center; font-weight: 700; flex: none }
.lc-et p { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45 }
.lv-barre { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px }
.lv { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.lv-hh { padding: 6px 14px; background: var(--surface2); font-size: 12px; font-weight: 700; color: var(--muted); border-top: 1px solid var(--line) }
.lv > .lv-hh:first-child { border-top: 0 }
.lv-l { display: grid; grid-template-columns: 96px 70px 64px minmax(170px, 1.2fr) minmax(220px, 1.4fr) 110px auto; gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line) }
.lv-hh + .lv-l { border-top: 0 }
.lv-v { position: relative; border: 0; padding: 0; background: #000; border-radius: 6px; overflow: hidden; width: 96px; height: 54px; cursor: pointer }
.lv-v img, .lv-v .l-sans { width: 100%; height: 100%; object-fit: cover; display: block }
.lv-v span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; background: rgb(0 0 0 / .35); transition: opacity .12s } .lv-v:hover span { opacity: 1 }
.lv-v span svg { width: 20px; height: 20px }
.lv-h b { display: block; font-size: 13px } .lv-h small, .lv-p small, .lv-c small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lv-p { min-width: 0 } .lv-p b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lv-c { min-width: 0 } .lv-c select { width: 100%; max-width: 100% }
.lv-a { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap }
@media (max-width: 1200px) { .lv-l { grid-template-columns: 96px 70px 64px 1fr 1fr; } .lv-n { grid-column: 4 } .lv-a { grid-column: 5; justify-content: flex-start } }
@media (max-width: 720px) { .lv-l { grid-template-columns: 96px 1fr; } .lv-l > * { grid-column: 2 } .lv-v { grid-column: 1; grid-row: 1 / span 3 } .lv-a { justify-content: flex-start } }

/* bilan : cases de tableur, le bouton ↺ posé dans la case (il ne la décale plus) */
table.bl td.num .bl-c { position: relative; display: block; width: 86px; margin-left: auto }
table.bl .bl-c .bl-n { width: 100%; display: block; padding-right: 7px }
table.bl td.bl-mod .bl-c .bl-n { padding-left: 22px }
table.bl .bl-c .bl-r { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0; border-radius: 50%;
  font-size: 12px; line-height: 18px; text-align: center; background: #f6e3b0; color: #7a5200; opacity: .85 }
table.bl .bl-c .bl-r:hover { opacity: 1; background: #ecca6f }
table.bl .bl-c .bl-r[hidden] { display: none }
table.bl td.bl-saisie .bl-n { border-color: #a99df0 }
table.bl .bl-n:focus { outline: 2px solid #6a4fd6; outline-offset: -1px }
.bl-etat { font-size: 12px; color: var(--muted); min-width: 90px } .bl-etat.ok { color: #1e7f4f }
.t.bl td { padding-top: 8px; padding-bottom: 8px }
.t.bl td.bl-p { min-width: 220px; max-width: 300px; width: 24% }
.t.bl .bl-pc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 5px 0 0; font-size: 12px }
.t.bl .bl-pc .bl-cib { width: 96px; padding: 2px 6px; font-size: 12px; height: auto }
.t.bl .bl-s { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface2); border-radius: 4px; padding: 1px 5px }
.t.bl th.num { white-space: normal; min-width: 80px }

.maj-bandeau { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9999; display: flex; gap: 12px; align-items: center; background: var(--night, #150f24); color: #fff; padding: 10px 12px 10px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .25); font-size: 13.5px; max-width: calc(100vw - 32px) }

/* barre de filtres commune : pastilles à gauche, recherche et listes à droite, sur une ligne */
.barre-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 16px }
.barre-f .chips { margin: 0 } .barre-f .grow { flex: 1 1 0; min-width: 0 }
.barre-f .in.sm, .barre-f select.in { width: auto; flex: 0 0 auto }
.barre-f .bf-q { width: 240px }
@media (max-width: 720px) { .barre-f .bf-q { flex: 1 1 100%; width: 100%; order: -1 } .barre-f .grow { display: none } .barre-f select.in { flex: 1 1 0; min-width: 0 } }

/* suivi réunion : colonnes proportionnées, rien ne déborde */
@media (min-width: 900px) {
  .t.suivi { table-layout: fixed; width: 100% }
  .t.suivi th.sc-camp { width: 30% } .t.suivi th.sc-bb { width: 13% } .t.suivi th.sc-echeancier { width: 12% }
  .t.suivi th.sc-bilans { width: 18% } .t.suivi th.sc-notes { width: 20% } .t.suivi th.sc-afaire { width: 22% }
  .t.suivi th:nth-child(n) { min-width: 0 } .t.suivi td.s-camp { min-width: 0 }
  .t.suivi td { overflow-wrap: anywhere }
}
.p-bloc .p-contenu { display: block; font-size: 10.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* étiquette d'un annonceur sur plusieurs cases : un ruban continu (le texte ne se coupe plus entre deux cases) */
.pl-run:not(:empty) { align-self: center; height: 24px; line-height: 24px; border-radius: 4px; margin: 0 1.5px !important; text-shadow: none !important }
.pl-run.vendu:not(:empty) { background: var(--blue) } .pl-run.option:not(:empty) { background: #f6c46f; color: #6a4300 }

/* ---------- billboards des campagnes (BB IN / BB OUT) */
.bbc-res { display: grid; grid-template-columns: repeat(3, max-content) minmax(0, 1fr); gap: 4px 28px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px }
.bbc-res > div { display: grid; gap: 2px } .bbc-res > div b { font: 700 22px/1 var(--f-body) } .bbc-res > div span { font-size: 12.5px; color: var(--muted) }
.bbc-res .pr b { color: #4c2fc4 } .bbc-res .tr b { color: var(--warn) } #bbc-q { width: 260px; max-width: 100% } .bbc-res p { margin: 0; font-size: 13px; color: var(--ink2) }
.bbc-grille { display: grid; gap: 12px }
.bbc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px }
.bbc-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start } .bbc-h > div { display: grid; gap: 2px; min-width: 0 }
.bbc-n { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere } .bbc-n:hover { text-decoration: underline }
.bbc-h .muted { font-size: 12.5px }
.bbc-p { font: 700 12px/1 var(--f-body); padding: 5px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); flex: none } .bbc-p.ok { background: var(--ok-soft); color: var(--ok) }
.bbc-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px }
.bbc-case { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 8px; align-content: start; background: var(--bg2) }
.bbc-case.valide { background: color-mix(in srgb, var(--ok) 5%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)) }
.bbc-case.propose { background: color-mix(in srgb, #6a4fd6 5%, var(--surface)); border-color: color-mix(in srgb, #6a4fd6 30%, var(--line)) }
.bbc-case.propose.faible { background: var(--surface); border-style: dashed }
.bbc-t { display: flex; justify-content: space-between; align-items: center; gap: 8px } .bbc-t .pill svg { width: 12px; height: 12px }
.bbc-c { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: start }
.bbc-v { position: relative; padding: 0; border: 0; background: #05030a; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; cursor: pointer; display: block; width: 100% }
.bbc-v img { width: 100%; height: 100%; object-fit: cover; display: block }
.bbc-v > span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgb(0 0 0 / .25); opacity: 0; transition: opacity .15s } .bbc-v:hover > span, .bbc-v:focus-visible > span { opacity: 1 }
.bbc-v svg { width: 26px; height: 26px }
.bbc-sans { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, #1d1530 0 8px, #241b3b 8px 16px) }
.bbc-i { display: grid; gap: 3px; min-width: 0; font-size: 13px } .bbc-i small { color: var(--muted); font-size: 12px } .bbc-i .pill { justify-self: start }
.bbc-r { color: var(--ink2) !important } .bbc-q { font-style: italic; overflow-wrap: anywhere }
.bbc-a { display: flex; gap: 6px; flex-wrap: wrap }
.bbc-vide { display: grid; gap: 4px; font-size: 13px; color: var(--muted) } .bbc-vide b { color: var(--ink) }
.bbc-ss { font-size: 12.5px; color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 6px 10px }
.bbc-liste { display: grid; gap: 8px }
.bbc-li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit }
.bbc-li:hover { border-color: #6a4fd6 } .bbc-li img, .bbc-li .bbc-sans { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; height: auto }
.bbc-li small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px }
.bbv { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 18px; align-items: start }
.bbv-g { display: grid; gap: 10px } .bbv-video { display: grid; gap: 6px }
.bbv-pq { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface2); font-size: 13px }
.bbv-pq ul { margin: 0; padding-left: 18px; display: grid; gap: 2px } .bbv-pq .muted { font-size: 12.5px }
.bbv-w { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px } .bbv-w:empty { display: none }
.bbv-att { display: grid; gap: 2px; width: 100% } .bbv-att span { color: var(--muted); font-size: 12px } .bbv-att b { font-weight: 500 }
.bbv-kbd { font-size: 12px } .bbv-kbd kbd { font-size: 10.5px }
.bb-io { display: grid; gap: 0 }
.bb-f.vide { gap: 6px } .bb-f-t .l-sens { flex: none } .bb-f-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px }
@media (max-width: 860px) {
  .bbv { grid-template-columns: minmax(0, 1fr) }
  .bbc-res { grid-template-columns: repeat(3, minmax(0, 1fr)) } .bbc-res p { grid-column: 1 / -1 }
  .bbc-cases { grid-template-columns: minmax(0, 1fr) }
  .bbc-c { grid-template-columns: 104px minmax(0, 1fr) }
  .bbc-li { grid-template-columns: 90px minmax(0, 1fr) } .bbc-li .pill { grid-column: 2 } .bbc-li img, .bbc-li .bbc-sans { width: 90px }
}
.bb-p { min-width: 0 } .bb-io, .bb-f, .bb-f > * { min-width: 0 } .bb-w dd { overflow-wrap: anywhere; min-width: 0 }
.bb-f-t { min-width: 0 } .bb-f-t .pill { flex: none }
.bb-f .sub { overflow-wrap: anywhere }
@media (max-width: 860px) {
  .lq-grille { grid-template-columns: minmax(0, 1fr) } .lq-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .lq-ctx { margin-left: 0 } .bbv-kbd, .lq-pied > .muted { display: none }
}
.bbv > *, .bbv-g, .bbv-video, .lq-ed { min-width: 0 } .bbv-g, .bbv-video { grid-template-columns: minmax(0, 1fr) }
.lq-ed { grid-template-columns: minmax(0, 1fr) }
@media (max-width: 860px) { .lq-tl-lib { flex-wrap: wrap } .lq-tl-lib .mono { order: 3; width: 100%; text-align: center } .lq-ctl .seg { flex-wrap: wrap } }
.l-dit { font-style: italic; max-width: 360px; overflow-wrap: anywhere }
.bbv-prep { display: grid; place-content: center; justify-items: center; gap: 10px; color: #cbd5e1; font-size: 13px }
/* la pige (format OPS) sous la frise du billboard */
.ed-piste { height: 206px }
.ed-pige { position: absolute; top: 180px; height: 22px; border-radius: 5px; background: rgb(69 215 212 / .22); border: 1.5px solid #45d7d4; pointer-events: none; display: flex; align-items: center; justify-content: center }
.ed-pige span { font: 700 11px/1 var(--f-body); color: #a5f3f1; letter-spacing: .03em }
.ed-poignee.p-pin, .ed-poignee.p-pout { top: 178px; bottom: 2px } .ed-poignee.p-pin::before, .ed-poignee.p-pout::before { background: #45d7d4 }
.ed-pige-b { display: grid; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid rgb(69 215 212 / .45); background: rgb(69 215 212 / .07) }
.ed-pige-b .k { font-size: 12px; color: var(--ed-mu) } .ed-pige-b .k b { display: block; color: var(--ed-tx); font: 600 13px/1.3 ui-monospace, Menlo, Consolas, monospace; margin-top: 2px }
.ed-pige-b small { color: var(--ed-mu); font-size: 12px; line-height: 1.4 }
.ed-pige-b .ed-pas svg { width: 11px; height: 11px; vertical-align: -1px }
@media (max-width: 900px) { .ed-piste { height: 180px } .ed-pige, .ed-poignee.p-pin, .ed-poignee.p-pout { top: 154px } .ed-pige-b { grid-column: 1 / -1 } }

/* ---------- aperçu d'une campagne (tiroir ouvert de partout) et liens entre les vues */
.ap-drawer { width: min(560px, 100%) }
.ap-drawer .mh h2 { font-size: 16px; min-width: 0 }
.ap-t { display: flex; gap: 10px; align-items: center; min-width: 0 } .ap-t > span { display: grid; min-width: 0 }
.ap-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ap-t small { font-weight: 400; color: var(--muted); font-size: 12.5px }
.ap { display: grid; gap: 14px }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px }
.ap-ems { display: flex; flex-wrap: wrap; gap: 6px } .ap-ems span { font-size: 12.5px; padding: 3px 8px; border-radius: 999px; background: var(--surface2) }
.ap-s { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px } .ap-s h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.ap-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px } .ap-k div { display: grid; gap: 2px } .ap-k b { font: 700 20px/1 var(--f-body) } .ap-k b small { font-size: 12px; color: var(--muted) } .ap-k span { font-size: 12px; color: var(--muted) }
.ap-frise { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; height: 46px; align-items: end }
.ap-j { display: flex; flex-direction: column-reverse; gap: 1px; height: 100%; padding: 2px 0; border-radius: 3px; background: var(--bg2) }
.ap-j.we { background: color-mix(in srgb, var(--surface2) 70%, var(--bg2)) } .ap-j.auj { box-shadow: inset 0 0 0 1.5px var(--ink) }
.ap-j i, .ap-leg i { display: block; height: 4px; border-radius: 1px; margin: 0 1px; background: var(--line2) }
.ap-j i.ok, .ap-leg i.ok { background: var(--ok) } .ap-j i.warn, .ap-leg i.warn { background: #d97706 } .ap-j i.bad, .ap-leg i.bad { background: var(--bad) } .ap-j i.venir, .ap-leg i.venir { background: #6a4fd6; opacity: .5 }
.ap-fr-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted) } .ap-fr-l .auj { color: var(--ink); font-weight: 600 }
.ap-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted) } .ap-leg span { display: inline-flex; align-items: center; gap: 5px } .ap-leg i { width: 12px; margin: 0 }
.ap-bbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.ap-bb { display: grid; gap: 3px; padding: 9px 10px; border-radius: 10px; border: 1px dashed var(--line2); text-decoration: none; color: var(--ink) } .ap-bb .l-sens { justify-self: start }
.ap-bb.ok { border-style: solid; border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-soft) } .ap-bb b { font-size: 13px } .ap-bb small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere }
.ap-bb:hover { border-color: #6a4fd6 }
.ap-bil { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--bg2); text-decoration: none; color: var(--ink) } .ap-bil span { color: var(--muted); font-size: 12.5px }
.c-liens { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px }
.c-lien { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink2); font-size: 12.5px; font-weight: 500; text-decoration: none }
.c-lien svg { width: 14px; height: 14px } .c-lien:hover { border-color: #6a4fd6; color: #4c2fc4 }
.ap .c-liens { margin: 0 }
.ch-focus-b, .pl-focus-b { font-size: 13px; padding: 8px 12px; margin: 0 0 8px; border-radius: 10px; background: color-mix(in srgb, #6a4fd6 8%, var(--surface)); border: 1px solid color-mix(in srgb, #6a4fd6 25%, transparent) }
.ch-focus .ch-b:not(.foc) { opacity: .22 } .ch-b.foc { outline: 2px solid #1b0d35; outline-offset: 1px; z-index: 2 } .ch-r.foc .ch-l { background: color-mix(in srgb, #6a4fd6 8%, var(--surface)) }
.pl-focus .pl-run { opacity: .25 } .pl-focus .pl-c.vendu:not(.foc), .pl-focus .pl-c.option:not(.foc), .pl-focus .pl-c.partiel:not(.foc) { opacity: .3 } .pl-c.foc { box-shadow: inset 0 0 0 2px #45d7d4 }
@media (max-width: 600px) { .ap-k { grid-template-columns: repeat(2, minmax(0, 1fr)) } .ap-bbs { grid-template-columns: minmax(0, 1fr) } }
.t.bl .bl-pc select.bl-cib { width: auto; max-width: 190px; padding: 2px 22px 2px 6px; font-size: 12px; height: auto }
.bl-cb { border: 1px dashed var(--line2); background: transparent; color: var(--ink2); border-radius: 6px; padding: 2px 6px; font: 600 11.5px var(--f-body); cursor: pointer }
.bl-cb:hover { border-color: #6a4fd6; color: #4c2fc4 }
.lq-ecran > video { width: 100%; height: 100%; object-fit: contain; display: block }
.lq-charge { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(5 3 10 / .55); pointer-events: none } .lq-charge[hidden] { display: none }
.bbv-dit { font-weight: 500; color: var(--ok); margin-left: 6px } .bbv-sw { margin-top: 6px; font-size: 12.5px }
.bl-optc { font-size: 12.5px; white-space: nowrap } th.bl-opt { background: color-mix(in srgb, var(--cyan) 12%, transparent) }
.vg-ccm { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 13px } .vg-ccm summary { cursor: pointer } .vg-ccm ol { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px } .vg-ccm p { margin: 6px 0 0 }
.bl.bl-couv .bl-n { width: 64px; min-width: 0; padding-left: 6px; padding-right: 6px } .bl.bl-couv th { font-size: 11.5px } .bl.bl-couv .bl-p { min-width: 170px }
.t.bl.bl-couv td.num .bl-c { width: 66px } .t.bl.bl-couv td.bl-p { min-width: 190px; width: 16% } .t.bl.bl-couv td.num, .t.bl.bl-couv th.num { padding-left: 5px; padding-right: 5px }
.bl-et { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--info, #1747d6) 12%, transparent); color: var(--info, #1747d6); white-space: nowrap }
.bl-et.termine { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok) } .bl-et.pas_commence { background: var(--bg2); color: var(--muted) }
.rt { margin: 14px 18px 4px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--bg1, #fff) }
.rt summary { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 8px } .rt-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px }
.rt-t td { vertical-align: top } .rt-t .sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; max-width: 360px; white-space: normal }
.rt-t select { max-width: 210px } .rt-a { white-space: nowrap }
.rt-xs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px } .rt-x h4 { margin: 0 0 6px; font-size: 13px }
.rt-x video { width: 100%; border-radius: 8px; background: #000; aspect-ratio: 16/9 } .rt-x .btn { margin-top: 6px }
.an { margin: 14px 18px 4px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: color-mix(in srgb, var(--info, #1747d6) 4%, var(--bg1, #fff)) }
.an h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 6px } .an-cl p { margin: 0 0 6px; line-height: 1.5 } .an-cl .sub { font-size: 11.5px; color: var(--muted) }
.an-c { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink2, #3a3550); display: grid; gap: 3px } .an-tr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px }
/* billboards par groupe : tous les programmes, la météo à part, ou un par programme */
.bbc-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 640px), 1fr)); align-items: start }
.bbc-h > .bbc-hd { display: flex; gap: 8px } .bbc-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end } .bbc-mode { max-width: 280px; font-size: 12.5px } .bbc-ml { font-size: 12px }
.bbc-g { display: grid; gap: 6px } .bbc-g + .bbc-g { border-top: 1px dashed var(--line); padding-top: 10px }
.bbc-gl { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px } .bbc-gl small { color: var(--muted); font-size: 12px }
.bbc-com { font-size: 12px }
/* page Pige : une bande compacte, puis les campagnes */
.depot-b { cursor: pointer } .depot-b.over { outline: 2px dashed var(--pink); outline-offset: 2px }
.pg-bande { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.pg-c { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-right: 1px solid var(--line); background: none; font: inherit; color: var(--ink); text-align: left; min-width: 0; text-decoration: none; position: relative }
.pg-c:last-child { border-right: 0 } a.pg-c:hover, button.pg-c:hover { background: var(--bg2); cursor: pointer }
.pg-c::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line2) } .pg-c.ok::after { background: var(--ok) } .pg-c.warn::after { background: #c27a00 } .pg-c.live::after { background: var(--pink) }
.pg-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--f-body); background: var(--bg2); color: var(--muted) }
.pg-t { display: grid; gap: 1px; min-width: 0; flex: 1 } .pg-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .pg-t small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pg-t .bar { display: block; margin: 3px 0 } .pg-c .btn { flex: none }
@media (max-width: 1100px) { .pg-bande { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pg-c { border-bottom: 1px solid var(--line) } }
@media (max-width: 560px) { .pg-bande { grid-template-columns: minmax(0, 1fr) } }
.pg-ct { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line) } .pg-ct h2 { margin: 0; font-size: 16px }
.pg-bbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.pg-bb { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg2) } .pg-bb small { font-size: 11px; color: var(--muted); margin: 0 3px }
.pg-bb i { font: 700 10.5px var(--f-body); font-style: normal; padding: 2px 5px; border-radius: 5px; background: var(--surface); color: var(--muted); border: 1px dashed var(--line2) } .pg-bb i.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid transparent }
.pg-pr { display: grid; grid-template-columns: auto auto minmax(60px, 1fr); align-items: center; gap: 6px; max-width: 240px } .pg-pr .bar { margin: 0 }
.pg-c .bar, .pg-pr .bar { display: block; height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden } .pg-c .bar i, .pg-pr .bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px } .pg-c.live .bar i { background: var(--pink) }
.pg-tab td .sub { font-size: 11.5px }
/* point réunion : un bloc par annonceur */
.avatar.xs { width: 20px; height: 20px; font-size: 9.5px }
.ra-tot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.ra-t { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 12px; font: inherit; color: var(--ink); cursor: pointer }
.ra-t b { font: 700 17px var(--f-head) } .ra-t span { color: var(--muted); font-size: 13px } .ra-t.on { background: var(--night); border-color: var(--night) } .ra-t.on b, .ra-t.on span { color: #fff }
.ra-cat { margin: 6px 0 -6px; font-size: 15px; text-transform: uppercase; letter-spacing: .06em }
.ra-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; align-items: start }
.ra { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: grid; overflow: hidden }
.ra.urg { border-left: 3px solid var(--bad) }
.ra-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line) }
.ra-n { display: grid; gap: 1px; min-width: 0; flex: 1 } .ra-n h3 { margin: 0; font-size: 15.5px; text-transform: uppercase; letter-spacing: .02em } .ra-n h3 a { color: inherit; text-decoration: none } .ra-n .muted { font-size: 12.5px }
.ra-r { flex: none; background: #fff2a8; color: #3d3300; font-weight: 700; font-size: 12.5px; padding: 3px 9px; border-radius: 6px }
.ra-c { padding: 10px 14px; display: grid; gap: 7px; border-bottom: 1px solid var(--line) }
.ra-ct { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px }
.ra-d { margin: 0; padding-left: 18px; display: grid; gap: 2px } .ra-d li { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .01em } .ra-d li.compensation { color: #1c4f8f } .ra-d .pill { margin-right: 6px; text-transform: none; vertical-align: 1px }
.ra-j { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
@media (max-width: 560px) { .ra-j { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.rj { display: grid; gap: 1px; text-align: left; border: 1px solid var(--line); background: var(--bg2); border-radius: 8px; padding: 5px 8px; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; position: relative }
.rj small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em } .rj b { font-size: 12px; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.rj.ok { background: var(--ok-soft); border-color: transparent } .rj.warn { background: var(--warn-soft); border-color: transparent } .rj.bad { background: #fde8e8; border-color: #f3b4b4 } .rj.info { background: #e8f0fd; border-color: transparent }
.rj.man::after { content: "main"; position: absolute; top: 3px; right: 5px; font-size: 9px; color: var(--muted) } .rj:hover { filter: brightness(.97) }
.ra-bd { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted) } .ra-bd.neg { color: var(--bad) } .ra-bd.pos { color: var(--ok) } .ra-bd svg { width: 14px; height: 14px }
.ra-p { padding: 10px 14px 12px; display: grid; gap: 8px; background: color-mix(in srgb, var(--bg2) 55%, transparent) }
.rps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.rp { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; padding: 3px 0 }
.rp-c { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--ok); flex: none } .rp-n { flex: none; color: var(--muted) } .rp-n svg { width: 15px; height: 15px }
.rp-t { flex: 1; min-width: 0; outline: none; border-radius: 4px; padding: 0 3px } .rp-t:focus { background: var(--surface); box-shadow: 0 0 0 2px #c9bff5 }
.rp.fait .rp-t { text-decoration: line-through; color: var(--muted) } .rp.note .rp-t { font-style: italic }
.rp-m { display: inline-flex; align-items: center; gap: 6px; flex: none } .rp-d { font: 600 11.5px var(--f-mono); color: var(--muted) } .rp-d.bad { color: var(--bad) } .rp-m small { font-size: 11px }
.rp-o { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 15px; line-height: 1; opacity: .5 } .rp:hover .rp-o { opacity: 1 }
.ra-f summary { cursor: pointer; font-size: 12.5px; color: var(--muted) }
.ra-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 6px; align-items: center } .ra-add .in.sm { width: auto; font-size: 12.5px } .ra-add .check { white-space: nowrap }
@media (max-width: 700px) { .ra-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .ra-add input[name=t] { grid-column: 1 / -1 } }
.ra-live { background: var(--surface); border: 1px solid #ddd5f8; border-left: 4px solid var(--pink); border-radius: 12px; padding: 10px 14px; display: grid; gap: 8px }
.ra-lt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .ra-lt .muted { font-size: 12.5px }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 25%, transparent); animation: pulse-point 1.6s infinite }
@keyframes pulse-point { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--pink) 8%, transparent) } }
.ra-lb { display: flex; gap: 10px; flex-wrap: wrap } .ra-lb .field { min-width: 220px } .ra-lb .grow { flex: 1 }
.rj-ch { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 }
.ra-h-i { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer } .ra-h-i:hover { border-color: var(--line2) } .ra-h-i .muted { font-size: 12.5px }
.ra-hn { white-space: pre-wrap; background: var(--bg2); border-radius: 8px; padding: 8px 10px; font-size: 13.5px } .ra-hs { border-top: 1px solid var(--line); padding: 8px 0 } .ra-hs ul { margin: 4px 0 6px; padding-left: 18px; font-size: 13.5px }
.ra.grand { max-width: 1100px; margin: 0 auto; width: 100%; box-shadow: var(--shadow) } .ra.grand .ra-n h3 { font-size: 24px } .ra.grand .ra-d li { font-size: 15px } .ra.grand .rj b { font-size: 13.5px } .ra.grand .rp { font-size: 15px }
.ra-add { grid-template-columns: auto auto auto minmax(0, 1fr) } .ra-add input[name=t] { grid-column: 1 / -1 } .ra-add .btn { justify-self: end }
.ra-lb { align-items: flex-start } .ra-lb .field { display: grid; gap: 4px }
/* conducteur : la journée d'antenne sur une frise */
.cd-sem { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap }
.cd-j { flex: 1 1 110px; display: grid; gap: 1px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 7px 10px; font: inherit; color: var(--ink); cursor: pointer; min-width: 0 }
.cd-j span { font-size: 11.5px; color: var(--muted); text-transform: capitalize } .cd-j b { font: 700 18px var(--f-head) } .cd-j small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .cd-j small i { font-style: normal; font-weight: 700 } .cd-j small i.bad { color: var(--bad) } .cd-j small i.warn { color: #9a5600 }
.cd-j.auj { border-color: var(--pink) } .cd-j.on { background: var(--night); border-color: var(--night) } .cd-j.on span, .cd-j.on b, .cd-j.on small { color: #fff }
.cd-p { display: grid; gap: 12px }
.cd-h { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap } .cd-h h2 { margin: 0; font-size: 18px; text-transform: capitalize } .cd-h .muted { font-size: 12.5px }
.cd-k { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted) } .cd-k b { color: var(--ink) } .cd-k .ok b { color: var(--ok) } .cd-k .warn b { color: #9a5600 } .cd-k .bad b { color: var(--bad) }
.cd-tl { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); --lab: 132px }
.cd-in { position: relative; width: calc(100% * var(--z)); min-width: 100%; padding-bottom: 4px }
.cd-reg, .cd-l { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) }
.cd-lab { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 8px 10px; display: flex; align-items: center }
.cd-tr { position: relative; min-height: 46px; border-bottom: 1px solid var(--line); background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 24 - 1px), var(--line) calc(100% / 24 - 1px), var(--line) calc(100% / 24)) }
.cd-reg .cd-tr { min-height: 24px; background: none } .cd-reg .cd-lab { padding: 2px 10px }
.cd-hr { position: absolute; top: 4px; transform: translateX(-50%); font: 600 11px var(--f-mono); color: var(--muted) } .cd-hr:first-child { transform: none }
.cd-b { position: absolute; top: 5px; bottom: 5px; min-width: 3px; border: 1px solid var(--line2); background: var(--bg2); border-radius: 6px; padding: 3px 6px; font: inherit; color: var(--ink); text-align: left; overflow: hidden; display: grid; align-content: center; cursor: pointer }
.cd-b b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2 } .cd-b small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden }
.cd-b.sp { background: #ece8ff; border-color: #c9bff5 } .cd-b.sp b { color: #3d2a9e }
.cd-b.meteo { background: #e3f0ff; border-color: #b7d3f6 } .cd-b.court { background: #fff4df; border-color: #f0d6a1 }
.cd-b.edition { background: repeating-linear-gradient(45deg, #fde3e3 0 6px, #fbd0d0 6px 12px); border-color: #f0a3a3 } .cd-b.edition b { color: #9b1219 }
.cd-b.chg { outline: 2px dashed #c27a00; outline-offset: -2px } .cd-b.foc { box-shadow: 0 0 0 2px var(--pink) } .cd-b.sel { box-shadow: 0 0 0 2px var(--night); z-index: 2 } .cd-b:hover { z-index: 2; filter: brightness(.97) }
.cd-lt .cd-tr, .cd-lp .cd-tr { min-height: 30px }
.cd-t { position: absolute; top: 7px; width: 6px; height: 16px; margin-left: -3px; border-radius: 3px; border: 2px solid; padding: 0; cursor: pointer; background: transparent }
.cd-t.in { border-color: #6a4fd6 } .cd-t.out { border-color: #1f9e9a } .cd-t.in.ok { background: #6a4fd6 } .cd-t.out.ok { background: #1f9e9a }
.cd-t.manque { border-color: var(--bad); background: #fde8e8 } .cd-t.futur { opacity: .55 } .cd-t.estompe, .cd-d.estompe { opacity: .12 }
.cd-d { position: absolute; top: 10px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50% }
.cd-d.auto { background: var(--ok) } .cd-d.valide { background: var(--surface); border: 2px solid var(--ok) } .cd-d.a_revoir { background: #e39b20 } .cd-d.rejete { background: var(--line2) }
.cd-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pink); z-index: 4; pointer-events: none } .cd-now i { position: absolute; top: 2px; left: 4px; font: 700 10.5px var(--f-mono); font-style: normal; color: #fff; background: var(--pink); border-radius: 4px; padding: 1px 4px }
.cd-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted) } .cd-leg span { display: inline-flex; align-items: center; gap: 5px }
.cd-leg .lg { width: 16px; height: 10px; border-radius: 3px; border: 1px solid } .lg.sp { background: #ece8ff; border-color: #c9bff5 } .lg.ed { background: repeating-linear-gradient(45deg, #fde3e3 0 3px, #fbd0d0 3px 6px); border-color: #f0a3a3 } .lg.chg { border: 2px dashed #c27a00 }
.cd-leg .lt { width: 6px; height: 12px; border-radius: 3px; border: 2px solid } .lt.in.ok { background: #6a4fd6; border-color: #6a4fd6 } .lt.out.ok { background: #1f9e9a; border-color: #1f9e9a } .lt.manque { border-color: var(--bad); background: #fde8e8 }
.cd-leg .ld { width: 9px; height: 9px; border-radius: 50% } .ld.auto { background: var(--ok) } .ld.a_revoir { background: #e39b20 }
.cd-det { border-top: 1px solid var(--line); padding-top: 12px }
.cd-dh { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start } .cd-dh h3 { margin: 2px 0; font-size: 17px } .cd-dh > div:first-child { display: grid; gap: 2px; justify-items: start }
.cd-dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted) } .cd-dt.edition { color: var(--bad) }
.cd-par { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; margin-top: 10px }
.cd-pc { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px }
.cd-bbs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 3px }
.cd-bbx { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--bg2) } .cd-bbx.ok { background: var(--ok-soft); color: var(--ok) } .cd-bbx.manque { background: #fde8e8; color: var(--bad) }
.cd-ch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line) }
@media (max-width: 700px) { .cd-tl { --lab: 84px } .cd-lab { font-size: 10.5px; padding: 6px } }
.cd-b, .cd-t, .cd-j { box-shadow: none }
.cd-tr { background-color: transparent }
/* parcours de découverte */
.ob-past { margin: 8px 10px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line); background: linear-gradient(135deg, #f6f2ff, #fff); border-radius: 10px; padding: 8px 10px; font: inherit; color: var(--ink); cursor: pointer; position: relative; overflow: hidden }
.ob-past b { display: block; font-size: 12.5px } .ob-past small { font-size: 11px; color: var(--muted) } .ob-past:hover { border-color: #c9bff5 }
.ob-pi { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #6a4fd6; color: #fff } .ob-pi svg { width: 14px; height: 14px }
.ob-past i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: linear-gradient(90deg, #6a4fd6, var(--pink)) }
.ob-acc p { margin: 0 0 12px } .ob-prof { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px }
.ob-pc { display: grid; gap: 4px; justify-items: start; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 14px; font: inherit; color: var(--ink); cursor: pointer }
.ob-pc svg { width: 26px; height: 26px; color: #6a4fd6 } .ob-pc b { font-size: 15px } .ob-pc small { color: var(--muted) } .ob-pc span { font-size: 12px; font-weight: 600; color: #6a4fd6 } .ob-pc:hover { border-color: #6a4fd6; box-shadow: 0 6px 20px rgb(106 79 214 / .15) }
.ob-d { display: grid; gap: 10px } .ob-d h3 { margin: 8px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.ob-niv { display: grid; gap: 8px; background: linear-gradient(135deg, #1b0b3a, #3d1a7a); color: #fff; border-radius: 12px; padding: 14px } .ob-n b { font: 700 22px var(--f-head); display: block } .ob-n small { opacity: .8 }
.ob-bar { height: 8px; border-radius: 99px; background: rgb(255 255 255 / .18); overflow: hidden } .ob-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb000, var(--pink)); border-radius: 99px }
.ob-sw { display: flex; gap: 6px; flex-wrap: wrap } .ob-sw .chip-f { background: rgb(255 255 255 / .12); color: #fff; border-color: transparent } .ob-sw .chip-f.on { background: var(--surface); color: var(--night) }
.ob-ms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.ob-m { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px }
.ob-m b { display: block; font-size: 14px } .ob-m small { display: block; color: var(--muted); font-size: 12.5px } .ob-mx { font-size: 11.5px; color: #6a4fd6; font-weight: 600 }
.ob-mi { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--bg2); color: var(--muted) } .ob-mi svg { width: 16px; height: 16px }
.ob-m.fait .ob-mi { background: var(--ok); color: #fff } .ob-m.bloque { opacity: .6 }
.ob-bdg { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px }
.ob-b { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 10px 6px; border-radius: 12px; border: 1px dashed var(--line2); color: var(--muted); filter: grayscale(1); opacity: .55 }
.ob-b svg { width: 22px; height: 22px } .ob-b small { font-size: 11px; line-height: 1.2 } .ob-b.on { filter: none; opacity: 1; border: 1px solid transparent; background: linear-gradient(135deg, #fff4d6, #ffe0f0); color: #7a3d00 }
.ob-eq { display: grid; gap: 4px } .ob-eqr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; padding: 5px 8px; border-radius: 8px }
.ob-eqr.moi { background: var(--surface2) } .ob-rg { font-weight: 700; color: #6a4fd6 } .ob-xp { font-weight: 700 }
.ob-ov { position: fixed; inset: 0; z-index: 1200 }
.ob-trou { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgb(9 0 19 / .55); transition: all .25s ease; pointer-events: none; outline: 2px solid #fff; outline-offset: 0 }
.ob-bu { position: fixed; background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: 0 20px 60px rgb(0 0 0 / .35); display: grid; gap: 6px; transition: top .25s ease, left .25s ease; max-width: calc(100vw - 24px) }
.ob-bh { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted) } .ob-mt { font-weight: 700; color: #6a4fd6; text-transform: uppercase; letter-spacing: .04em }
.ob-bu h4 { margin: 2px 0 0; font-size: 16px } .ob-bu p { margin: 0; font-size: 13.5px; line-height: 1.5 }
.ob-dots { display: flex; gap: 4px } .ob-dots i { width: 18px; height: 4px; border-radius: 99px; background: var(--line) } .ob-dots i.f { background: #c9bff5 } .ob-dots i.on { background: #6a4fd6 }
.ob-bf { display: flex; gap: 6px; align-items: center; margin-top: 4px }
.ob-q { display: grid; gap: 6px } .ob-qr { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer }
.ob-qr:hover { border-color: #6a4fd6 } .ob-qr.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); font-weight: 600 } .ob-qr.ko { background: #fde8e8; border-color: var(--bad); color: var(--bad) }
.ob-win { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 8px 0 }
.ob-wb { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, #ffb000, var(--pink)); color: #fff; animation: ob-pop .5s cubic-bezier(.2, 1.6, .4, 1) } .ob-wb svg { width: 34px; height: 34px }
.ob-win b { font: 700 19px var(--f-head) } .ob-win small { font-weight: 700; color: #6a4fd6 } .ob-up { margin: 4px 0 0; background: var(--surface2); padding: 6px 12px; border-radius: 99px }
@keyframes ob-pop { from { transform: scale(.3) rotate(-20deg); opacity: 0 } }
.ob-conf { position: fixed; inset: 0; pointer-events: none; z-index: 1300; overflow: hidden }
.ob-conf i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 13px; background: var(--c); border-radius: 2px; transform: rotate(var(--r)); animation: ob-tombe 2.2s var(--d) ease-in forwards }
@keyframes ob-tombe { to { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); opacity: .8 } }
@media (prefers-reduced-motion: reduce) { .ob-conf { display: none } .ob-wb { animation: none } }
.ob-past { flex: none }

/* ---------- atelier des piges : un rendez-vous du conducteur à la fois */
a.back { display: inline-block; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 2px } a.back:hover { color: var(--ink) }
.at { display: grid; gap: 10px }
.at-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px }
.at-titre { flex: 1 1 280px } .at-titre h1 { margin: 0 } .at-titre .lede { margin: 2px 0 0 }
.at-jours { display: flex; gap: 4px; align-items: center; flex-wrap: wrap }
.at-j { position: relative; display: grid; justify-items: center; gap: 0; min-width: 46px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; line-height: 1.15 }
.at-j span { font-size: 11px; color: var(--muted); text-transform: capitalize } .at-j b { font-size: 16px }
.at-j i { position: absolute; top: -6px; right: -6px; font: 600 10.5px/1 var(--f-body); font-style: normal; background: #e3a13a; color: #fff; border-radius: 99px; padding: 3px 5px }
.at-j.on { background: var(--blue); border-color: var(--blue); color: #fff } .at-j.on span { color: #d9d3e8 }
.at-dt { width: 140px; height: 42px }
.at-barre { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; position: sticky; top: 58px; z-index: 12; background: var(--bg); padding: 6px 0 }
.at-barre .seg .n { margin-left: 6px; font-size: 11.5px; color: var(--muted) }
.at-camp { width: 260px; max-width: 100% }
.at-prog { width: 120px; height: 6px; border-radius: 99px; background: var(--surface2); overflow: hidden } .at-prog i { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .3s }
.at-pc { font-size: 13px }
.at-kbd { margin-left: auto; font-size: 12px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap }
kbd { font: 500 11px/1 var(--f-mono); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; background: var(--surface); color: var(--ink2) }
.btn kbd { margin-left: 4px; background: transparent; color: inherit; opacity: .7; border-color: currentColor }
.at-corps { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 14px; align-items: start }
.at-liste { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: grid; gap: 2px; max-height: calc(100vh - 190px); overflow-y: auto; position: sticky; top: 110px }
.at-h { font: 600 11.5px var(--f-body); color: var(--muted); padding: 8px 8px 2px; letter-spacing: .02em }
.at-r { display: grid; grid-template-columns: 42px 34px minmax(0, 1fr) 10px; align-items: center; gap: 8px; text-align: left; padding: 7px 8px; border: 0; border-radius: 7px; background: none; cursor: pointer; transition: background .12s }
.at-r:hover { background: var(--surface2) } .at-r.on { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--pink) }
.at-r .at-t { font-size: 13px; color: var(--ink2) }
.at-n { display: grid; min-width: 0 } .at-n b, .at-n small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .at-n small { color: var(--muted); font-size: 12px }
.at-d { width: 9px; height: 9px; border-radius: 50%; background: var(--line2) } .at-d.ok { background: var(--ok) } .at-d.warn { background: #e3a13a } .at-d.info { background: #3d7fc4 }
.at-r.e-absent, .at-r.e-a_venir { opacity: .62 }
.at-s { display: inline-grid; place-items: center; min-width: 32px; font: 700 10.5px/1 var(--f-mono); padding: 4px 5px; border-radius: 4px; background: var(--surface2); color: var(--ink2) }
.at-s.s-IN { background: #ddf3f2; color: #0b5e5b } .at-s.s-OUT { background: #fbe3ed; color: #9c1650 }
.at-s.lg { font-size: 12.5px; padding: 6px 8px }
.at-scene { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 12px; min-width: 0 }
.at-sh { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start }
.at-sh1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .at-sh1 h2 { margin: 0; font-size: 19px } .at-sh p { margin: 4px 0 0 }
.at-sh .warn, .at-pourquoi .warn { color: var(--warn) }
.at-fr { position: relative; padding: 18px 0 30px; user-select: none }
.at-fl { position: relative; height: 26px; margin-bottom: 4px }
.at-fp { position: absolute; top: 0; height: 26px; background: var(--blue-soft); border: 1px solid #d7d0e6; border-radius: 5px; overflow: hidden; box-sizing: border-box }
.at-fp span { display: block; padding: 4px 6px; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--night) }
.at-fe { height: 30px; background: var(--bg2); border-radius: 5px }
.at-fpub { position: absolute; top: 0; height: 30px; background: repeating-linear-gradient(135deg, #cfcad9 0 4px, #e8e5ee 4px 8px); border-radius: 3px }
.at-fm { position: absolute; top: 3px; transform: translateX(-50%); font: 700 10px/1 var(--f-mono); padding: 5px 4px; border-radius: 4px; border: 2px solid var(--surface); cursor: pointer; background: var(--surface2); color: var(--ink2); z-index: 2; transition: transform .12s }
.at-fm.s-IN { background: #1fa7a3; color: #fff } .at-fm.s-OUT { background: #d42a73; color: #fff }
.at-fm.on { transform: translateX(-50%) scale(1.25); box-shadow: 0 0 0 2px var(--night); z-index: 3 }
.at-fprev { position: absolute; top: 14px; bottom: 24px; width: 0; border-left: 2px dashed var(--night); pointer-events: none }
.at-fprev span { position: absolute; top: -15px; left: 4px; font: 600 11px var(--f-mono); white-space: nowrap; color: var(--night) }
.at-ft { position: absolute; left: 0; right: 0; bottom: 0; height: 14px } .at-ft span { position: absolute; transform: translateX(-50%); font: 11px var(--f-mono); color: var(--muted) }
.at-flg { position: absolute; right: 0; bottom: -18px; display: flex; gap: 12px; font-size: 11.5px; color: var(--muted) } .at-flg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px }
.at-flg .lg-p { background: var(--blue-soft); border: 1px solid #d7d0e6 } .at-flg .lg-e { background: repeating-linear-gradient(135deg, #cfcad9 0 3px, #e8e5ee 3px 6px) } .at-flg .lg-o { background: #d42a73 } .at-flg .lg-i { background: #1fa7a3 }
.at-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; margin-top: 12px }
.at-video { display: grid; gap: 6px; min-width: 0 }
.at-vbox { background: #0b0816; border-radius: 8px; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden }
.at-vbox video { width: 100%; height: 100%; object-fit: contain; display: block }
.at-vload { color: #cfc9dc; font-size: 13.5px; padding: 20px; text-align: center; max-width: 420px }
.at-vctl { display: flex; flex-wrap: wrap; gap: 4px; align-items: center }
.at-heure { margin: 0 8px; font-size: 13px; color: var(--ink2); min-width: 64px }
.at-vctl #at-large { margin-left: auto }
.at-dec { display: grid; gap: 8px; align-content: start; border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--bg2) }
.at-dec h3 { margin: 0; font-size: 15px }
.at-pourquoi { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink2) }
.at-dec .lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px }
.at-sens { width: 100% } .at-sens button { flex: 1; padding: 9px 12px; font-size: 14px }
.at-sens button.on:first-child { background: #fbe3ed; color: #9c1650 } .at-sens button.on:last-child { background: #ddf3f2; color: #0b5e5b }
.at-ref { font-size: 13px; display: flex; gap: 6px; align-items: flex-start } .at-ref small { display: block }
.at-btns { display: grid; gap: 6px; margin-top: 6px } .at-btns .btn { justify-content: space-between }
.at-cands { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px }
.at-c { flex: 0 0 168px; display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--surface); cursor: pointer; transition: border-color .12s, transform .12s }
.at-c:hover { border-color: var(--line2); transform: translateY(-1px) } .at-c.on { border-color: var(--night); box-shadow: 0 0 0 1px var(--night) }
.at-c img, .at-ci { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; background: var(--surface2); display: grid; place-items: center; color: var(--muted) }
.at-cm { display: flex; gap: 6px; align-items: center; flex-wrap: wrap } .at-c small { color: var(--muted); font-size: 11.5px; line-height: 1.3 }
.at-c.c-valide { background: var(--ok-soft) }
.at-c0 { padding: 10px 2px; font-size: 13px }
.at-vide { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 60px 20px; color: var(--muted) } .at-vide svg { width: 30px; height: 30px; color: var(--ok) } .at-vide b { color: var(--ink); font-size: 16px } .at-vide span { max-width: 440px }
@media (max-width: 1180px) { .at-main { grid-template-columns: 1fr } }
@media (max-width: 860px) {
  .at-corps { grid-template-columns: 1fr } .at-liste { position: static; max-height: 260px } .at-kbd { display: none }
  .at-barre { position: static } .at-flg { position: static; margin-top: 22px; flex-wrap: wrap }
}

/* atelier des piges, vue « Billboards » : une carte par billboard, une décision pour toutes ses diffusions */
.at-mode { align-self: center } .at-mode .n { margin-left: 6px; font: 600 11px/1 var(--f-body); border-radius: 99px; padding: 3px 6px; background: var(--surface2) } .at-mode .n.warn { background: #e3a13a; color: #fff }
.bbx { display: grid; gap: 14px }
.bbx-tete { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between }
.bbx-tete .lede { margin: 0; max-width: 70ch }
.bbx-cpt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.bbx-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px }
.bbx-c { display: grid; grid-template-rows: auto auto 1fr auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; outline: none; transition: box-shadow .15s, border-color .15s }
.bbx-c.on { border-color: var(--pink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 35%, transparent) }
.bbx-c header { display: flex; gap: 10px; align-items: center; padding: 10px 12px }
.bbx-n { display: grid; min-width: 0; flex: 1 } .bbx-n b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .bbx-n small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bbx-c header .pill { white-space: nowrap; font-size: 11.5px }
.bbx-v { position: relative; aspect-ratio: 16 / 9; background: #0f0b18; display: grid; place-items: center; overflow: hidden }
.bbx-v img, .bbx-v video { width: 100%; height: 100%; object-fit: cover; display: block } .bbx-v video { object-fit: contain; background: #000 }
.bbx-vi { color: #8a82a0 } .bbx-vi svg { width: 34px; height: 34px }
.bbx-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .92); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgb(0 0 0 / .3) }
.bbx-play svg { width: 22px; height: 22px; margin-left: 3px } .bbx-play:hover { transform: scale(1.05) }
.bbx-h { position: absolute; left: 8px; bottom: 8px; background: rgb(10 6 20 / .78); color: #fff; font-size: 11.5px; padding: 3px 7px; border-radius: 6px; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bbx-b { padding: 10px 12px 4px; display: grid; gap: 6px; align-content: start; font-size: 13.5px }
.bbx-b p { margin: 0 } .bbx-b .bad { color: var(--bad) }
.bbx-vote { color: var(--ink2) }
.bbx-r { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; display: grid; gap: 2px }
.bbx-dit { color: var(--ink2); font-style: italic; font-size: 12.5px }
.bbx-c footer { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; align-items: center }
.bbx-c footer .btn kbd { margin-left: 6px; font-size: 10.5px; opacity: .7 } .bbx-c:not(.on) footer kbd { display: none }
.bbx-c footer > a:last-child { margin-left: auto }
.bbx-plus summary { cursor: pointer; color: var(--muted); font-size: 13.5px; padding: 4px 0 }
.bbx-l { display: grid; gap: 4px; margin-top: 6px }
.bbx-li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13.5px }
.bbx-li .grow { flex: 1; text-align: right }
@media (max-width: 720px) { .bbx-g { grid-template-columns: 1fr } }

/* point réunion, vue « lignes » : un annonceur par ligne, tient sur un écran de portable */
.rl { display: grid; gap: 4px }
.rl-r { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(0, 2.4fr) minmax(150px, 1.1fr) 120px; gap: 12px; align-items: center; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 12px; font: inherit; color: var(--ink); cursor: pointer; min-width: 0 }
.rl-r:hover { border-color: var(--line2); background: color-mix(in srgb, var(--surface) 92%, var(--blue-soft)) }
.rl-r.urg { border-left: 3px solid var(--bad) }
.rl-a { display: flex; gap: 9px; align-items: center; min-width: 0 }
.rl-n { display: grid; min-width: 0 } .rl-n b { font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rl-n small, .rl-t small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rl-j { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; min-width: 0 }
.rl-p { display: grid; gap: 0; padding: 3px 7px; border-radius: 7px; background: var(--bg2); min-width: 0 }
.rl-p small { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em } .rl-p b { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rl-p.ok { background: var(--ok-soft) } .rl-p.warn { background: var(--warn-soft) } .rl-p.bad { background: #fde8e8 } .rl-p.info { background: #e8f0fd }
.rl-t { display: grid; min-width: 0 } .rl-t b { font-size: 12.5px } .rl-t b.bad { color: var(--bad) }
.rl-q { display: flex; gap: 6px; align-items: center; justify-content: flex-end }
.drawer.reunion-tiroir { width: min(640px, 100%) } .reunion-tiroir .ra { border: 0; border-radius: 0 }
@media (max-width: 1100px) { .rl-r { grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) auto } .rl-t { display: none } }
@media (max-width: 760px) { .rl-r { grid-template-columns: minmax(0, 1fr) auto } .rl-j { grid-column: 1 / -1; grid-row: 2 } }

/* vérification d'un candidat : le son, l'image, la place */
.vf { border-radius: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; font-size: 12.5px }
.vf-en { display: flex; gap: 8px; align-items: center; color: var(--muted) } .vf-en svg { width: 15px; height: 15px; animation: spin 1.6s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.vf-t { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap } .vf-t b { font-size: 13.5px }
.vf.vf-sur { border-color: #9fd8b8; background: var(--ok-soft) } .vf.vf-sur .vf-t b { color: var(--ok) }
.vf.vf-probable { border-color: #c7d8f5; background: var(--surface2) }
.vf.vf-douteux, .vf.vf-pas_lui { border-color: #f0d29c; background: var(--warn-soft) } .vf.vf-pas_lui .vf-t b { color: var(--bad) }
.vf ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px }
.vf li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px; align-items: start }
.vf li b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-left: 16px; position: relative }
.vf li b::before { position: absolute; left: 0; top: -1px; font-size: 12px }
.vf li.vf-oui b::before { content: "✓"; color: var(--ok) } .vf li.vf-non b::before { content: "✗"; color: var(--bad) } .vf li.vf-nsp b::before { content: "?"; color: var(--muted) }
.vf li span { color: var(--ink2) }

/* onglet « Billboards » : outil de pige, chronologie de l'antenne autour de chaque diffusion */
.bbt { display: grid; gap: 10px }
.bbt-barre { gap: 8px 12px }
.bbt-barre .check { font-size: 13px }
.bbt-recit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px }
.bbt-rc { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: 99px; background: var(--surface2); color: var(--ink2); cursor: pointer; white-space: nowrap }
.bbt-rc small { font-size: 10.5px; color: var(--muted) }
.bbt-rc.k-em { background: var(--blue-soft); color: var(--night) }
.bbt-rc.k-ec { background: repeating-linear-gradient(135deg, #e6e1ee 0 5px, #f2eff6 5px 10px); color: var(--ink) }
.bbt-rc.k-bb.s-OUT { background: #fbe3ed; color: #9c1650 } .bbt-rc.k-bb.s-IN { background: #ddf3f2; color: #0b5e5b }
.bbt-rc.ici { box-shadow: 0 0 0 2px var(--night); font-weight: 600 }
.bbt-fl { font-style: normal; color: var(--muted) }
.bbt-fr { position: relative; padding: 4px 0 20px; user-select: none; cursor: crosshair }
.bbt-lane { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 6px }
.bbt-ll { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: right }
.bbt-lt { position: relative; min-height: 24px }
.bbt-ant { height: 44px; background: var(--bg2); border-radius: 6px }
.bbt-em { position: absolute; top: 4px; bottom: 4px; background: #e9e4f6; border: 1px solid #d3cbe8; border-radius: 4px; overflow: hidden }
.bbt-em span { display: block; padding: 8px 6px; font-size: 11.5px; font-weight: 600; color: var(--night); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bbt-ec { position: absolute; top: 2px; bottom: 2px; background: repeating-linear-gradient(135deg, #d9d3e3 0 5px, #ece8f2 5px 10px); border-radius: 4px; overflow: hidden }
.bbt-ec span { display: block; padding: 2px 6px; font-size: 10.5px; color: var(--ink2); white-space: nowrap }
.bbt-sp { position: absolute; bottom: 4px; height: 16px; background: #a79fbb; border-right: 1px solid var(--bg2); border-radius: 2px }
.bbt-sp.t-jingle { background: #3b3352 } .bbt-sp.t-autopromo, .bbt-sp.t-bande_annonce { background: #c9a75a }
.bbt-bb { position: absolute; top: -3px; bottom: -3px; min-width: 18px; border: 2px solid var(--surface); border-radius: 5px; padding: 0; cursor: pointer; background: #9b93ad; color: #fff; overflow: visible; z-index: 2 }
.bbt-bb.s-OUT { background: #d42a73 } .bbt-bb.s-IN { background: #1fa7a3 }
.bbt-bb span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font: 700 10.5px/1 var(--f-mono); color: var(--ink2); white-space: nowrap; background: var(--surface); padding: 2px 4px; border-radius: 3px }
.bbt-bb.ici { box-shadow: 0 0 0 2px var(--night); z-index: 3 } .bbt-bb.ici span { color: #fff; background: var(--night); font-size: 11.5px; padding: 3px 6px }
.bbt-bb.s-OUT.ici span { background: #9c1650 } .bbt-bb.s-IN.ici span { background: #0b5e5b }
.bbt-ax { position: relative; margin-left: 90px; height: 14px } .bbt-ax span { position: absolute; transform: translateX(-50%); font: 11px var(--f-mono); color: var(--muted) }
.bbt-tete { position: absolute; top: 0; bottom: 16px; width: 0; border-left: 2px solid #e5163a; pointer-events: none; display: none; margin-left: 90px }
.bbt-lg { position: static; margin-top: 2px; flex-wrap: wrap } .at-flg .lg-a { background: #e9e4f6; border: 1px solid #d3cbe8 } .at-flg .lg-s { background: #a79fbb }
.bbt-diffs { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px }
.bbt-dh { display: flex; gap: 10px; align-items: baseline; font-size: 13px }
.bbt-dl { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; align-items: center }
.bbt-dj { flex: none; font-size: 11px; color: var(--muted); text-transform: capitalize; padding: 0 4px 0 10px; white-space: nowrap }
.bbt-dj:first-child { padding-left: 0 }
.bbt-d { flex: none; display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 4px 6px; font-size: 12px; cursor: pointer }
.bbt-d .at-s { min-width: 26px; padding: 3px 3px; font-size: 9.5px }
.bbt-d i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2) } .bbt-d i.ok { background: var(--ok) } .bbt-d i.warn { background: #e3a13a } .bbt-d i.info { background: #4c7fd9 }
.bbt-d.on { border-color: var(--night); box-shadow: 0 0 0 1px var(--night) } .bbt-d.e-ecarte { opacity: .5 }
.drawer.justesse-tiroir { width: min(640px, 100%) }
.js-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.js-k > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 2px } .js-k b { font: 700 24px var(--f-head) } .js-k span { font-size: 12.5px; color: var(--ink2) } .js-k small { color: var(--muted) }
.js-h { display: flex; gap: 3px; align-items: flex-end; height: 60px; border-bottom: 1px solid var(--line) } .js-h span { flex: 1; height: 100%; display: flex; align-items: flex-end } .js-h i { display: block; width: 100%; background: #b9a9ea; border-radius: 3px 3px 0 0 }
.js-e { display: grid; gap: 4px } .js-e > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 8px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--line) } .js-e > div > span:nth-child(n+3) { grid-column: 2 }
@media (max-width: 900px) { .js-k { grid-template-columns: 1fr } }
.at-r.bbt-i { grid-template-columns: 40px minmax(0, 1fr) 10px }
.at-r.bbt-i .at-n small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block }

/* Piges : établi compact pour un écran de portable — liste | chronologie et vidéo | décision toujours visible */
.at { display: grid; gap: 10px }
.at-top { align-items: center; gap: 8px 14px }
.at-top h1 { margin: 0 6px 0 0; font-size: 24px; cursor: help }
.at-barre { position: static; padding: 0; gap: 8px 12px }
.at-kbd { margin-left: 0; display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--muted); padding: 5px 8px; border-radius: 7px; cursor: help; white-space: nowrap }
.at-kbd svg { width: 16px; height: 16px } .at-kbd:hover, .at-kbd:focus { background: var(--surface2); color: var(--ink2) }
.at-corps { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 12px }
.at-liste { top: 114px; max-height: calc(100vh - 126px) }
.at-scene { padding: 12px 14px 14px; gap: 10px }
.at-sh0 { min-width: 0 } .at-sh1 h2 { font-size: 18px } .at-sh p { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px }
.at-main { grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; margin-top: 0; align-items: start }
.at-centre { display: grid; gap: 10px; min-width: 0; align-content: start }
.at-video { align-content: start; gap: 4px }
.at-vload { display: flex; align-items: center; justify-content: center; gap: 8px }
.at-spin { display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; opacity: .75 }
.at-vctl { flex-wrap: nowrap; gap: 2px; min-width: 0 } .at-vctl .btn { padding-inline: 8px; white-space: nowrap } .at-vctl #at-large { margin-left: 0 }
.at-heure { min-width: 62px; margin: 0 6px }
.at-dec { position: sticky; top: 114px; max-height: calc(100vh - 126px); overflow-y: auto; padding: 12px; gap: 8px }
.at-dec h3 { font-size: 14.5px }
.at-dec .lbl { display: block; margin: 0 0 3px }
.at-champs { display: grid; gap: 8px }
.at-sens button { padding: 7px 10px; font-size: 13.5px }
.at-ref { font-size: 12.5px; align-items: center }
.at-btns { margin-top: 2px } .at-btns .btn span { flex: 1; text-align: center }
.at-btn2 { display: flex; gap: 6px; justify-content: space-between } .at-btn2 .btn:last-child { margin-left: auto }
.at-why summary { cursor: pointer; font-size: 12.5px; color: var(--muted); list-style-position: inside } .at-why[open] summary { margin-bottom: 4px }
.at-why .at-pourquoi { font-size: 12.5px }
.vf { padding: 7px 9px; gap: 4px; font-size: 12px } .vf li { grid-template-columns: 60px minmax(0, 1fr) }
/* billboards repérés : une rangée de vignettes compactes, entre la frise et la vidéo */
.at-cands { gap: 6px; padding: 2px 2px 4px; scrollbar-width: thin }
.at-c { flex: 0 0 auto; grid-template-columns: 58px auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; align-items: center; padding: 5px 10px 5px 5px }
.at-c img, .at-c .at-ci { grid-row: 1 / 3; width: 58px; height: auto; aspect-ratio: 16 / 9 } .at-c .at-ci svg { width: 16px; height: 16px }
.at-cm { flex-wrap: nowrap; gap: 5px } .at-cm b { font-size: 12.5px }
.at-cv { display: inline-flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--muted); white-space: nowrap }
.at-cv i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2) } .at-cv i.ok { background: var(--ok) } .at-cv i.warn { background: #e3a13a } .at-cv i.info { background: #4c7fd9 }
.at-c0 { flex: 1; padding: 9px 12px; font-size: 13px; background: var(--bg2); border-radius: 8px }
/* frises : étiquettes des bords dans le cadre, rien ne se chevauche */
.at-ft span.fin, .bbt-ax span.fin { transform: translateX(-100%) } .at-ft span.deb, .bbt-ax span.deb { transform: none }
.at-fr { padding: 18px 0 28px }
.bbt-lane + .bbt-lane { margin-top: 20px }
.bbt-tete { top: 0 }
/* outil billboards : la diffusion montrée et le passage de l'une à l'autre */
.bbt-nav { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px; border-radius: 8px; background: var(--bg2) }
.bbt-nav .btn { font-size: 17px; line-height: 1; padding: 3px 10px }
.bbt-dinfo { flex: 1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0 }
.bbt-dinfo .at-s { min-width: 28px; padding: 3px 4px; font-size: 10px } .bbt-dinfo .pill { font-size: 11.5px }
.bbt-dp { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2) }
.bbt-dinfo .warn svg { width: 15px; height: 15px; vertical-align: -3px }
.bbt-recit { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin }
.bbt-diffs { padding-top: 8px }
.bbt-dl { position: relative; scrollbar-width: thin }
@media (max-width: 1260px) { .at-main { grid-template-columns: minmax(0, 1fr) 260px } .at-corps { grid-template-columns: 200px minmax(0, 1fr) } }
@media (max-width: 1100px) { .at-main { grid-template-columns: 1fr } .at-dec { position: static; max-height: none } }
@media (max-width: 860px) { .at-corps { grid-template-columns: 1fr } .at-liste { position: static; max-height: 240px } .at-kbd { display: none } }
.at-frise > .at-flg { position: static; justify-content: flex-end; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; font-size: 11px }
.at-fr { padding: 18px 0 18px }
.bbt-lg { justify-content: flex-end; font-size: 11px; gap: 4px 12px }
.vf li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.vf li:hover span { -webkit-line-clamp: unset }
.bbt-dinfo { flex-wrap: nowrap; white-space: nowrap; overflow: hidden }
.bbt-dinfo .bbt-dp { flex: 0 1 auto; min-width: 0 }
.at-top .at-kbd { margin-left: auto }
.at-top .at-kbd + .btn { margin-left: 0 }
.at-centre > *, .bbt-diffs > *, .at-video > * { min-width: 0 }
.at-vctl { flex-wrap: wrap; row-gap: 2px }
.at-scene > *, .at-main > * { min-width: 0 }
@media (max-width: 1340px) { .at-top .at-kbd span, .at-top .at-tab span { display: none } }

/* grille Programmes : le nom sur une ligne, l'horaire à gauche et les pastilles des offres à droite, sans chevauchement */
.p-bloc { padding: 5px 7px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-rows: min-content; grid-auto-flow: row dense; column-gap: 4px; row-gap: 1px; align-content: start }
.p-bloc > b, .p-bloc > .p-contenu, .p-bloc > .parrain { grid-column: 1 / -1 }
.p-bloc > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.p-bloc > .p-h { grid-column: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block }
.p-bloc > .o-badges { position: static; grid-column: 2; justify-self: end; align-self: center; gap: 2px }
.p-bloc .o-badge { padding: 0 5px 0 3px; font-size: 10.5px }
.p-bloc.etroit { padding: 4px 5px } .p-bloc.etroit .o-badges { display: none }

/* fiche campagne : une seule émission vendue → sa carte prend la largeur, en deux colonnes */
.c-emis:has(> .c-em:only-child) { grid-template-columns: minmax(0, 1fr) }
.c-emis > .c-em:only-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start }
.c-emis > .c-em:only-child > .c-em-h { grid-column: 1 / -1 }
.c-emis > .c-em:only-child > .c-em-s { grid-column: 2; grid-row: 2 / span 3 }
/* tableau de bord : les 5 premières actions, le reste sur demande */
.todo > a.todo-plus { display: none } .todo-tout .todo > a.todo-plus { display: grid } .todo-voir { justify-self: start }
/* en-têtes de page : l'explication tient sur une ou deux lignes, sans pousser le contenu sous l'écran */
.phead .lede { max-width: 112ch; font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.phead .lede:hover { -webkit-line-clamp: unset }
.phead > div:first-child { flex: 1 1 480px; min-width: 0 }

/* Piges : mêmes couleurs que le reste de l'outil — BB IN violet, BB OUT turquoise */
.at-s.s-IN { background: #ede7fd; color: #4c2fc4 } .at-s.s-OUT { background: #d9f3f1; color: #0f6e6a }
.at-fm.s-IN { background: #6a4fd6 } .at-fm.s-OUT { background: #1f9e9a }
.at-sens button.on:first-child { background: #d9f3f1; color: #0f6e6a } .at-sens button.on:last-child { background: #ede7fd; color: #4c2fc4 }
.at-flg .lg-o { background: #1f9e9a } .at-flg .lg-i { background: #6a4fd6 }
.bbt-rc.k-bb.s-OUT { background: #d9f3f1; color: #0f6e6a } .bbt-rc.k-bb.s-IN { background: #ede7fd; color: #4c2fc4 }
.bbt-bb.s-OUT { background: #1f9e9a } .bbt-bb.s-IN { background: #6a4fd6 }
.bbt-bb.s-OUT.ici span { background: #0f6e6a } .bbt-bb.s-IN.ici span { background: #4c2fc4 }
/* barre latérale : toute la navigation visible sur un portable (hauteur ≤ 900 px) */
@media (max-height: 900px) {
  .rail { padding-top: 10px } .brand { padding-bottom: 10px; margin-bottom: 2px }
  .nav-sec { padding: 9px 10px 2px } .nav a { padding: 5px 10px }
}
.faq details.q { display: block } .faq details.q > summary { padding-block: 12px }
@media (max-width: 1340px) { .rl-r { grid-template-columns: minmax(150px, 1fr) minmax(0, 2.6fr) 104px } .rl-t { display: none } }
.bbt-regle { font-size: 12.5px; color: var(--ink2); background: var(--blue-soft); padding: 5px 10px; border-radius: 8px }
/* chronologie des campagnes : le cadre défile (la règle .panel.flush coupait tout ce qui dépasse, sans barre de défilement) */
.panel.flush.ch-w { overflow: auto; display: block }

/* ================================================================== Piges (refonte) : une campagne, deux étapes */
.px-s, .ax-bs { display: inline-grid; place-items: center; min-width: 46px; font: 700 10.5px/1 var(--f-mono); padding: 4px 6px; border-radius: 4px; background: var(--surface2); color: var(--ink2); white-space: nowrap }
.px-s.s-IN { background: #ede7fd; color: #4c2fc4 } .px-s.s-OUT { background: #d9f3f1; color: #0f6e6a }
.px-s.lg { font-size: 12px; padding: 6px 9px }
.px-head .row { gap: 6px; flex-wrap: wrap }
.px-ant { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink2); text-decoration: none; padding: 5px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface) }
.px-ant i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2) } .px-ant i.ok { background: var(--ok) } .px-ant i.warn { background: #e0a100 }
.px-ant i.live, .ax-live { background: var(--ok); animation: pulse 1.6s ease-in-out infinite }
.ax-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0 }
@keyframes pulse { 50% { opacity: .35 } }
.px-corps { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start }
.px-liste { position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; max-height: calc(100vh - 96px); overflow: hidden }
.px-lh { padding: 10px; display: grid; gap: 8px; border-bottom: 1px solid var(--line) }
.px-lf { display: flex } .px-lf button { flex: 1; padding: 5px 6px; font-size: 12.5px }
.seg .n { margin-left: 5px; font-size: 11px; font-weight: 600; background: var(--surface2); color: var(--ink2); border-radius: 99px; padding: 1px 6px }
.seg .n.warn { background: var(--warn-soft); color: var(--warn) }
#px-l { overflow-y: auto; padding: 4px }
.px-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "b b"; gap: 4px 8px; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 6px; cursor: pointer; border-left: 3px solid transparent }
.px-c:hover { background: var(--bg2) } .px-c.on { background: var(--blue-soft); border-left-color: var(--night) }
.px-cn { grid-area: n; min-width: 0; display: grid } .px-cn b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .px-cn small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.px-cp { grid-area: p; display: flex; gap: 3px; align-self: start }
.px-pp { display: inline-flex; align-items: center; gap: 2px; font: 700 10px/1 var(--f-mono); padding: 3px 5px; border-radius: 4px; background: var(--surface2); color: var(--muted) }
.px-pp svg { width: 11px; height: 11px } .px-pp.e-ok { background: var(--ok-soft); color: var(--ok) } .px-pp.e-a_valider { background: #f6b73c; color: #3d2600 } .px-pp.e-partiel { background: var(--warn-soft); color: var(--warn) }
.px-cb { grid-area: b; display: flex; align-items: center; gap: 8px } .px-cb small { font-size: 11.5px }
.px-mini { flex: 1; height: 4px; background: var(--surface2); border-radius: 99px; overflow: hidden } .px-mini i { display: block; height: 100%; background: var(--ok) }
.px-scene { min-width: 0; display: grid; gap: 16px }
.px-sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.px-sh h2 { margin: 0; font-size: 22px } .px-sh p { margin: 2px 0 0; font-size: 13px }
.px-etape { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 14px; min-width: 0 }
.px-eh { display: flex; gap: 12px; align-items: flex-start } .px-eh h3 { margin: 0; font-size: 16px } .px-eh p { margin: 2px 0 0; font-size: 13px }
.px-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface2); color: var(--ink2) }
.px-num.ok { background: var(--ok); color: #fff } .px-num.warn { background: #f6b73c; color: #3d2600 }
.px-g { margin: 4px 0 -4px; font-size: 13px }
.px-preuves { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px }
.px-carte { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; align-content: start; background: var(--bg2); min-width: 0 }
.px-carte.e-a_choisir, .px-carte.e-a_confirmer { border-color: #f0c36a; background: var(--surface2); box-shadow: 0 0 0 3px #fdf3e1 }
.px-carte.e-sens_douteux { border-color: #f0a8a8; background: var(--bg2) }
.px-carte.e-confirme { border-color: #bfe3cd }
.px-ch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap }
.px-prop { font-size: 11.5px; color: var(--muted) }
.px-med { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 6px; background: #0e0a18; overflow: hidden; cursor: pointer; color: #fff }
.px-med img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85 }
.px-med video { width: 100%; height: 100%; background: #000; display: block }
.px-med.on { cursor: default }
.px-med.vide { cursor: default; background: var(--surface2); color: var(--muted); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px }
.px-play { position: relative; width: 52px; height: 52px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--night); display: grid; place-items: center; box-shadow: 0 4px 16px rgb(0 0 0 / .35) }
.px-play svg { width: 22px; height: 22px; margin-left: 3px }
.px-med:hover .px-play { transform: scale(1.06) }
.px-when { position: absolute; left: 8px; bottom: 8px; font: 500 11.5px/1 var(--f-mono); background: rgb(0 0 0 / .62); padding: 4px 6px; border-radius: 4px }
.px-load { display: flex; align-items: center; gap: 8px; color: #cfc8dd; font-size: 13px; padding: 12px; text-align: center }
.px-txt { margin: 0; font-size: 13.5px; line-height: 1.45 }
.px-why summary { cursor: pointer; font-size: 12.5px; color: var(--muted) } .px-why ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink2) }
.px-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.px-btns .btn.primary { flex: 1 1 auto }
.px-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--surface2) }
.px-bar i { display: block; height: 100% } .px-bar .b-diffuse { background: var(--ok) } .px-bar .b-pas_retrouve { background: #f0a43c } .px-bar .b-manquant { background: var(--bad) } .px-bar .b-en_lecture { background: #8f7fd6 } .px-bar .b-sans_video { background: var(--line2) }
.px-df { display: flex; flex-wrap: wrap; gap: 6px }
.px-aide { display: flex; gap: 8px; margin: 0; padding: 8px 10px; background: var(--blue-soft); border-radius: 6px; font-size: 13px; color: var(--ink2) }
.px-dl { display: grid; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; max-height: 560px; overflow-y: auto }
.px-dj { position: sticky; top: 0; z-index: 1; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ink2); background: var(--surface2); border-bottom: 1px solid var(--line) }
.px-d { display: grid; grid-template-columns: 52px 58px minmax(0, 1fr) minmax(0, auto) 112px; gap: 10px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 13px; background: var(--surface) }
.px-d:last-child { border-bottom: 0 }
.px-d.e-diffuse, .px-d.e-pas_retrouve, .px-d.e-manquant { cursor: pointer } .px-d.e-diffuse:hover, .px-d.e-pas_retrouve:hover, .px-d.e-manquant:hover { background: var(--bg2) }
.px-d.e-a_venir, .px-d.e-sans_video { color: var(--muted) }
.px-dh { font-weight: 600 } .px-dp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.px-de { display: flex; align-items: center; gap: 8px; justify-self: end; min-width: 0 } .px-de small { font-size: 11.5px; white-space: nowrap } .px-de small svg { width: 13px; height: 13px; color: var(--ok) }
.px-de small.warn { color: var(--warn) }
.px-da { justify-self: end }
.px-hors summary { cursor: pointer; font-size: 13px; color: var(--ink2); padding: 4px 0 } .px-hors p { font-size: 12.5px; margin: 4px 0 8px }
.px-hors .px-d { grid-template-columns: 110px 58px minmax(0, 1fr) auto 112px }
.px-vide { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 60px 20px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line2); border-radius: var(--r) }
.px-vide svg { width: 32px; height: 32px } .px-vide b { color: var(--ink); font-size: 15px }
.px-rv { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: start }
.px-rvv { aspect-ratio: 16 / 9; background: #0e0a18; border-radius: 6px; overflow: hidden; display: grid; place-items: center }
.px-rvv video { width: 100%; height: 100%; display: block; background: #000 }
.px-dl2 { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 13px } .px-dl2 dt { color: var(--muted) } .px-dl2 dd { margin: 0 }
.px-ch2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start }
.px-cvb { display: flex; align-items: center; gap: 8px; margin-top: 8px }
.px-cands h4 { margin: 0 0 8px; font-size: 13.5px } .px-cands .hint { font-size: 12px }
#px-cl { display: grid; gap: 6px; max-height: 360px; overflow-y: auto }
.px-k { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 5px; cursor: pointer; font-size: 12.5px }
.px-k:hover { border-color: var(--line2) } .px-k.on { border-color: var(--night); box-shadow: 0 0 0 2px var(--blue-soft) } .px-k.autre { opacity: .7 }
.px-k img, .px-k0 { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--surface2); display: block }
.px-k > span:last-child { display: grid; gap: 2px; min-width: 0 } .px-k small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.px-k .px-s { min-width: 0; font-size: 9.5px; padding: 2px 4px; margin-left: 4px }
.px-kok { display: flex; gap: 6px; margin-top: 8px } .px-kok .btn.primary { flex: 1 }
.modal.wide:has(.px-chm), .px-chm { max-width: 1060px }
@media (max-width: 1100px) { .px-corps { grid-template-columns: 1fr } .px-liste { position: static; max-height: 300px } .px-rv, .px-ch2 { grid-template-columns: 1fr } }

/* ================================================================== Antenne lue (refonte) */
.ax { display: grid; gap: 14px }
.ax-jours { display: flex; gap: 4px; align-items: stretch; overflow-x: auto; padding-bottom: 2px }
.ax-j { display: grid; justify-items: center; gap: 0; min-width: 46px; padding: 5px 4px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--ink2) }
.ax-j span { font-size: 11px; text-transform: capitalize; color: var(--muted) } .ax-j b { font-size: 15px }
.ax-j:hover { border-color: var(--line2) } .ax-j.on { background: var(--night); border-color: var(--night); color: #fff } .ax-j.on span { color: #cfc8dd }
.ax-dt { width: auto; align-self: center; margin-left: 6px }
.ax-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.ax-barre h2 { margin: 0; font-size: 17px } .ax-etat { font-size: 13px; color: var(--ink2) }
.ax-q { width: 210px }
.ax-corps { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start }
.ax-gauche { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.ax-hn { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bg2) }
.ax-hn button { border: 0; background: none; font: 500 12px/1 var(--f-mono); padding: 5px 6px; border-radius: 4px; cursor: pointer; color: var(--ink2) } .ax-hn button:hover { background: var(--surface2) }
.ax-jr { max-height: calc(100vh - 290px); min-height: 360px; overflow-y: auto; padding: 0 0 10px }
.ax-h { position: sticky; top: 0; z-index: 1; padding: 5px 14px; font: 600 12px/1.4 var(--f-mono); color: var(--muted); background: var(--surface2); border-bottom: 1px solid var(--line) }
.ax-prog { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-left: 3px solid #b9b2c9; background: none; padding: 7px 12px 7px 11px; cursor: pointer; font-size: 13.5px }
.ax-prog .mono { color: var(--muted); font-size: 12.5px; width: 40px; flex: none } .ax-prog b { font-weight: 600 }
.ax-prog:hover { background: var(--bg2) } .ax-prog.on { background: var(--blue-soft) }
.ax-mini { font-size: 11px; padding: 2px 6px }
.ax-coup { margin: 4px 10px; padding: 7px 10px; border-radius: 6px; background: var(--surface2); border: 1px solid #f3dfbf }
.ax-coup.court { background: var(--bg2); border-color: var(--line) }
.ax-ct { display: flex; align-items: center; gap: 10px; font-size: 13px } .ax-ct .mono { color: var(--muted); font-size: 12.5px; width: 40px; flex: none } .ax-ct b { color: #8a4b00 } .ax-coup.court .ax-ct b { color: var(--ink2) }
.ax-voir { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--muted); padding: 2px 4px; border-radius: 4px } .ax-voir:hover { background: rgb(0 0 0 / .05); color: var(--ink) }
.ax-puces { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 50px }
.ax-bb { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 5px; padding: 3px 8px 3px 3px; cursor: pointer; font-size: 12.5px; background: #ede7fd; color: #2d1a6e }
.ax-bb.s-OUT { background: #d9f3f1; color: #0b4f4c } .ax-bb.s-x { background: var(--surface2); color: var(--ink2) }
.ax-bb .ax-bs { min-width: 30px; padding: 3px 4px; font-size: 10px; background: rgb(255 255 255 / .7); color: inherit }
.ax-bb svg { width: 13px; height: 13px; color: var(--ok) }
.ax-bb.doute { box-shadow: inset 0 0 0 1.5px #f0a43c }
.ax-bb:hover { filter: brightness(.96) } .ax-bb.on, .ax-sp.on { outline: 2px solid var(--night); outline-offset: 1px }
.ax-sp { border: 1px solid var(--line); background: var(--surface); border-radius: 5px; padding: 3px 7px; font-size: 12px; color: var(--ink2); cursor: pointer; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ax-sp.t-autopromo, .ax-sp.t-bande_annonce, .ax-sp.t-autre { color: var(--muted); border-style: dashed }
.ax-sp.doute { border-color: #f0a43c } .ax-sp:hover { border-color: var(--line2) }
.ax-tab { padding: 4px } 
.ax-r { display: grid; grid-template-columns: 64px 66px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 6px 8px; cursor: pointer; font-size: 13px }
.ax-r:hover { background: var(--bg2) } .ax-r.on { background: var(--blue-soft) }
.ax-r img, .ax-v0 { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--surface2); display: block }
.ax-rn { min-width: 0; display: grid } .ax-rn b, .ax-rn small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ax-rn small { color: var(--muted); font-size: 12px }
.ax-ty { font-size: 11.5px; color: var(--ink2); background: var(--surface2); padding: 3px 6px; border-radius: 4px }
.ax-panneau { position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 12px; max-height: calc(100vh - 96px); overflow-y: auto }
.ax-pv { display: grid; gap: 8px; text-align: center; padding: 20px 6px; color: var(--muted); font-size: 13px; justify-items: center } .ax-pv > b { color: var(--ink); font-size: 15px }
.ax-chiffres { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; margin: 10px 0 0; width: 100% }
.ax-chiffres li { display: grid; gap: 2px; background: var(--bg2); border-radius: 6px; padding: 10px 4px; font-size: 12px } .ax-chiffres b { font-size: 20px; color: var(--ink) } .ax-chiffres b.warn { color: var(--warn) }
.ax-ph { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center } .ax-ph > div { display: grid; min-width: 0 } .ax-ph b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ax-ph small { font-size: 12px }
.ax-vid { aspect-ratio: 16 / 9; background: #0e0a18; border-radius: 6px; overflow: hidden; display: grid; place-items: center }
.ax-vid video { width: 100%; height: 100%; display: block; background: #000 }
.ax-faits { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; font-size: 13px } .ax-faits dt { color: var(--muted) } .ax-faits dd { margin: 0; min-width: 0 }
.ax-faits ul { margin: 0; padding-left: 16px } .ax-dit { font-style: italic; color: var(--ink2) }
.ax-corr { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px } .ax-corr > b { font-size: 13px }
.ax-cb { display: flex; flex-wrap: wrap; gap: 5px } .ax-cb .btn.on { background: var(--night); border-color: var(--night); color: #fff }
.ax-f { display: grid; gap: 8px } .ax-f .field { display: grid; gap: 4px } .ax-f .field > span { font-size: 12px; color: var(--muted) } .ax-f .seg button { font-size: 12.5px; padding: 5px 9px }
.ax-pied { margin: 0 }
@media (max-width: 1180px) { .ax-corps { grid-template-columns: 1fr } .ax-panneau { position: static; max-height: none } }
.px { display: grid; gap: 16px }
.px-lf button { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center }
.px-med.vide { aspect-ratio: auto; height: 96px }
.px-k > span:last-child > .px-s { justify-self: start; margin: 0 }
.ax-panneau { display: flex; flex-direction: column } .ax-panneau > * { flex-shrink: 0 }
.px-bn { display: grid; grid-template-columns: auto auto auto auto; gap: 4px 6px; align-items: center; justify-content: start; margin: 8px 0 4px; font-size: 12.5px }
.px-bn b { min-width: 56px; text-align: center }

/* ================================================================== Éditeur d'un billboard */
.modal.eb-modal { width: min(1240px, 96vw); max-width: none }
.eb { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start }
.eb-g { display: grid; gap: 10px; min-width: 0 }
.eb-ecran { position: relative }
.eb-v { aspect-ratio: 16 / 9; background: #0e0a18; border-radius: 6px; overflow: hidden; display: grid; place-items: center }
.eb-v video { width: 100%; height: 100%; display: block; background: #000; cursor: pointer }
.eb-tc { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; align-items: center; pointer-events: none }
.eb-tc b { background: rgb(0 0 0 / .7); color: #fff; padding: 4px 7px; border-radius: 4px; font-size: 13px }
.eb-tc span { font-size: 12px; font-weight: 600; padding: 4px 7px; border-radius: 4px } .eb-tc span.dans { background: #f6b73c; color: #2b1b00 } .eb-tc span.hors { background: rgb(0 0 0 / .55); color: #ddd }
.eb-frise { position: relative; height: 64px; border-radius: 6px; overflow: hidden; background: #1a1526; cursor: pointer; touch-action: none; user-select: none }
.eb-imgs { position: absolute; inset: 0; display: flex } .eb-imgs canvas { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; border-right: 1px solid rgb(0 0 0 / .4) }
.eb-av, .eb-ap { position: absolute; top: 0; bottom: 0; background: rgb(10 6 20 / .62); pointer-events: none } .eb-av { left: 0 } .eb-ap { right: 0 }
.eb-sel { position: absolute; top: 0; bottom: 0; border-top: 3px solid #f6b73c; border-bottom: 3px solid #f6b73c; pointer-events: none }
.eb-h { position: absolute; top: 0; bottom: 0; width: 18px; margin-left: -9px; cursor: ew-resize; z-index: 2; display: grid; place-items: center }
.eb-h i { width: 8px; height: 100%; background: #f6b73c; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .35) }
.eb-h i::after { content: ""; display: block; width: 2px; height: 18px; margin: 23px auto 0; background: #6b4300; border-radius: 1px }
.eb-tete { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--surface); box-shadow: 0 0 0 1px rgb(0 0 0 / .5); pointer-events: none; z-index: 3 }
.eb-ax { position: relative; height: 16px; font: 11px/1 var(--f-mono); color: var(--muted) } .eb-ax span { position: absolute; transform: translateX(-50%) }
.eb-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.eb-ctl kbd, .eb-btns kbd { font: 600 10.5px/1 var(--f-mono); padding: 2px 4px; border-radius: 3px; background: rgb(0 0 0 / .08); margin-left: 4px }
.eb-btns .btn.primary kbd { background: rgb(255 255 255 / .2) }
.eb-bornes { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px }
.eb-bornes figure { margin: 0; display: grid; gap: 4px; justify-items: center } .eb-bornes canvas { width: 160px; height: 90px; border-radius: 4px; background: #000; display: block }
.eb-bornes figcaption { font-size: 12px; color: var(--muted) } .eb-bornes figcaption b { color: var(--ink) }
.eb-dur { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 13px } .eb-dur b { font-size: 16px }
.eb-d { display: grid; gap: 14px; align-content: start; font-size: 13.5px }
.eb-q { display: grid; gap: 2px } .eb-q b { font-size: 17px }
.eb-sens { display: flex; align-items: center; gap: 10px }
.eb-dit { display: grid; gap: 4px } .eb-dit q { font-style: italic; color: var(--ink); line-height: 1.45 }
.eb-pq { display: grid; gap: 4px } .eb-pq ul { margin: 0; padding-left: 18px; color: var(--ink2); font-size: 13px }
.eb-aide { margin: 0; font-size: 12.5px; color: var(--muted); background: var(--blue-soft); padding: 8px 10px; border-radius: 6px }
.eb-btns { display: grid; gap: 8px } .eb-btns .btn { justify-content: center; padding: 10px }
.eb-kbd { margin: 0; font-size: 11.5px; color: var(--muted) }
@media (max-width: 1000px) { .eb { grid-template-columns: 1fr } }
.ax-coup { padding: 8px 12px 10px; display: grid; gap: 6px }
.ax-z { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px; align-items: start; margin-left: 50px }
.ax-z .ax-puces { margin: 0 }
.ax-zl { font-size: 11.5px; color: var(--muted); padding-top: 5px }
.ax-z.z-pub .ax-zl { color: #8a4b00 }
.ax-voir { display: inline-flex; align-items: center; gap: 4px; font-size: 12px }
.ax-bb.e-hors { background: var(--surface); color: var(--ink2); border: 1px dashed var(--line2) } .ax-bb.e-hors .ax-bs { background: var(--surface2) }
.ax-pt { width: 7px; height: 7px; border-radius: 50%; background: #f0a43c; display: inline-block }
.ax-note { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted) } .ax-note svg { width: 12px; height: 12px }
.ax-prog { border-left-color: #cdc7d8 }
.px-med { aspect-ratio: auto; height: 180px } .px-med.vide { height: 96px }
.px-pp.e-a_valider { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px #f0c36a }
.px-carte { gap: 8px }
.ax-z.z-out .ax-zl, .ax-z.z-in .ax-zl { font: 700 11px/1 var(--f-mono); padding-top: 7px } .ax-z.z-out .ax-zl { color: #0f6e6a } .ax-z.z-in .ax-zl { color: #4c2fc4 }
.ax-z { grid-template-columns: 70px minmax(0, 1fr) }
.ax-z .ax-bb .ax-bs { display: none } .ax-z .ax-bb { padding-left: 9px }
.avatar { object-fit: cover } img.avatar { padding: 0; background: var(--surface2) }

/* ================================================================== Mon compte */
.cp-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center }
.cp-photo { position: relative; width: 96px; height: 96px }
.cp-photo img, .cp-photo > span { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--blue-soft); color: var(--night); font: 600 30px var(--f-body) }
.cp-ph-btn { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--night); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 3px var(--surface) }
.cp-ph-btn:hover { background: var(--blue-hi) }
.cp-id h1 { margin: 0 0 4px; font-size: 24px } .cp-id p { margin: 2px 0 } .cp-meta { font-size: 12.5px }
.cp-chif { display: flex; gap: 10px } .cp-chif div { display: grid; text-align: center; background: var(--bg2); border-radius: 8px; padding: 10px 14px; min-width: 110px } .cp-chif b { font-size: 22px } .cp-chif span { font-size: 12px; color: var(--muted) }
.cp-form .form { max-width: 760px }
.cp-barres { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 90px; align-items: end; margin: 6px 0 12px }
.cp-barres i { display: block; background: var(--night); border-radius: 3px 3px 0 0; min-height: 2px } .cp-barres i.vide { background: var(--line) }
.cp-tot { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px } .cp-tot span { display: inline-flex; align-items: center; gap: 6px }
.cp-fam { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--line2); flex: none }
.cp-fam.f-connexions { background: #8f7fd6 } .cp-fam.f-antenne { background: #1f9e9a } .cp-fam.f-campagnes { background: #d42a73 } .cp-fam.f-bilans { background: #e0a100 } .cp-fam.f-mails { background: #2d6fd2 }
ul.cp-act { list-style: none; margin: 0; padding: 0; display: grid } ul.cp-act li { display: grid; grid-template-columns: 130px 12px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px }
ul.cp-act li .mono { font-size: 12px }
.eq-roles { display: grid; gap: 4px }
@media (max-width: 800px) { .cp-tete { grid-template-columns: auto 1fr } .cp-chif { grid-column: 1 / -1 } }
.pz-ha { gap: 8px; align-items: center; flex-wrap: wrap }

/* bilan vendu sur une seule semaine : « vendus au » = « vendus », colonnes masquées (GRP et présences) */
table.bl.bl-1s > * > tr > :nth-child(3), table.bl.bl-1s > * > tr > :nth-child(7) { display: none; }

.bl-exp { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-exp svg { flex: none; width: 14px; height: 14px; }
.seg .bl-sv { font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ligne de vente : émissions choisies dans la grille, présences calculées au conducteur */
.vl > .field.full > span:first-child { font-weight: 600; }
.vl-pick { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--surface); }
.vl-pick:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.vl-chips { display: contents; }
.vl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--blue) 10%, transparent); font-size: 13px; }
.vl-chip span { color: var(--muted); font-size: 12px; }
.vl-chip button { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; color: var(--muted); }
.vl-chip button:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.vl-q.in { flex: 1; min-width: 220px; border: 0; box-shadow: none; padding: 6px; background: transparent; }
.vl-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(20,15,40,.14); max-height: 300px; overflow: auto; padding: 4px; }
.vl-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; }
.vl-opt span { color: var(--muted); font-size: 12px; }
.vl-opt.on, .vl-opt:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.vl-vide { padding: 10px; color: var(--muted); font-size: 13px; }
.vl-per { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vl-per .in[type=date] { width: auto; }
.vl-duree { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vl-vendu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vl-calc { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface2); font-size: 13px; line-height: 1.5; }
.vl-calc .warn { color: var(--warn); } .vl-calc .bad { color: var(--bad); }
.vl-lien { border: 0; background: none; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.vl-type { margin-bottom: 4px; }
.vl-nom { display: flex; align-items: center; gap: 8px; }
.vl-nom .in { flex: 1; }
.vl-prefixe { white-space: nowrap; font-size: 13px; color: var(--blue); }
#vl-comp-info b { font-weight: 600; color: var(--ink); }

/* Antenne lue › Sans campagne : parrains entendus que l'outil ne suit pas */
.ax-corps.nc-plein { grid-template-columns: 1fr; }
.ax-corps.nc-plein .ax-panneau { display: none; }
.nc-intro { margin: 12px 16px 4px; }
.nc-r { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--line); }
.nc-r:first-of-type { border-top: 0; }
.nc-n { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nc-n > b { font-size: 15px; }
.nc-n .muted { font-size: 12.5px; }
.nc-pg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.nc-pg span { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface2); color: var(--ink2); }
.nc-dit { color: var(--muted); font-style: italic; }
.nc-c { color: var(--ink2); }
.nc-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.nc-ig { margin: 14px 16px; font-size: 13px; color: var(--muted); }
.nc-ig .chip-f { margin: 6px 6px 0 0; }
.nc-ig .lv-x { border: 0; background: none; cursor: pointer; color: var(--muted); }
@media (max-width: 720px) { .nc-r { flex-direction: column; } .nc-a { justify-content: flex-start; } }
.ax-jr.nc-l { display: block; max-height: none; overflow: visible; padding: 4px 0; }
.nc-l .nc-n .muted, .nc-l .nc-dit, .nc-l .nc-c { white-space: normal; }

/* nettoyage de l'export MXplorer (bilan) */
.nx { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin: 14px 0; }
.nx > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; }
.nx > summary .muted { font-size: 13px; }
.nx-tete { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 0 16px 8px; }
.nx-tete .hint { margin: 0; max-width: 820px; }
.nx-tete .btn { flex: none; }
.nx-g { border-top: 1px solid var(--line); padding: 10px 16px; }
.nx-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.nx-de { color: var(--muted); text-decoration: line-through; }
.nx-fl { color: var(--muted); }
.nx-n { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nx-ded { margin: 4px 0 0; font-size: 12.5px; color: var(--ink2); }
.nx-p { margin-top: 8px; }
.nx-t td .sub { display: block; }
@media (max-width: 720px) { .nx-tete { flex-direction: column; } }

/* Vérification MXplorer (page) */
.vm-ret { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); text-decoration: none; }
.vm-ret svg { width: 14px; height: 14px; }
.vm-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; counter-reset: none; }
.vm-etapes li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12.5px; min-width: 0; }
.vm-etapes li span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-etapes li.on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.vm-etapes li.ok b::after { content: " ✓"; color: var(--ok); }
.vm-pr tr[data-prog] { cursor: pointer; }
.vm-pr tr.on td { background: var(--blue-soft); }
.vm-pr .sub, .vm-pr .warn { display: block; }
.vm-pr .warn { color: var(--warn); }
.vm-barre { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 10px; }
.vm-corps { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; align-items: start; }
.vm-liste { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; max-height: calc(100vh - 230px); overflow-y: auto; }
.vm-j { position: sticky; top: 0; z-index: 1; padding: 6px 14px; background: var(--surface2); font-size: 12px; font-weight: 700; color: var(--muted); border-top: 1px solid var(--line); text-transform: capitalize; }
.vm-r { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto 52px 96px; gap: 10px; align-items: center; width: 100%; padding: 8px 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font: inherit; cursor: pointer; }
.vm-j + .vm-r { border-top: 0; }
.vm-r:hover { background: var(--surface2); }
.vm-r.on { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.vm-r .mono { font-size: 12.5px; }
.vm-r .num { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.vm-r .pill { justify-self: end; }
.vm-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; font-size: 13.5px; }
.vm-n small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.vm-de { color: var(--muted); text-decoration: line-through; }
.vm-fl { color: var(--muted); }
.vm-ind { display: flex; gap: 6px; font-size: 12px; }
.vm-ok { color: var(--ok); font-weight: 600; } .vm-ko { color: var(--bad); font-weight: 600; }
.vm-pan { position: sticky; top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; max-height: calc(100vh - 40px); overflow-y: auto; }
.vm-vide { display: grid; gap: 4px; text-align: center; padding: 30px 10px; color: var(--muted); }
.vm-vide b { color: var(--ink); }
.vm-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.vm-chg { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 2px 10px; font-size: 13px; margin-bottom: 8px; }
.vm-chg > span:nth-child(3n+1) { color: var(--muted); }
.vm-chg .muted { grid-column: 2; font-size: 12px; }
.vm-indices { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 4px; font-size: 13px; }
.vm-indices li { display: flex; gap: 8px; align-items: baseline; color: var(--ink2); }
.vm-indices li i { font-style: normal; width: 14px; flex: none; text-align: center; color: var(--muted); }
.vm-indices li.ok i { color: var(--ok); } .vm-indices li.ko i { color: var(--bad); } .vm-indices li.ko { color: var(--ink); }
.vm-video video { width: 100%; border-radius: 8px; background: #000; aspect-ratio: 16 / 9; }
.vm-x h4 { margin: 6px 0; font-size: 12.5px; }
.vm-dec { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vm-dec .in { max-width: 220px; }
.nx-res { padding: 12px 16px; }
.vmbar { display: flex; height: 6px; margin: 0 16px 12px; border-radius: 3px; overflow: hidden; background: var(--surface2); }
.vmb { min-width: 2px; } .vmb.confirme { background: var(--ok); } .vmb.explique { background: var(--blue); } .vmb.decide { background: #7c6ad6; } .vmb.a_verifier { background: var(--warn); } .vmb.contredit { background: var(--bad); }
@media (max-width: 1100px) { .vm-corps { grid-template-columns: 1fr; } .vm-pan { position: static; max-height: none; } .vm-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vm-r { grid-template-columns: 60px minmax(0, 1fr) 90px; } .vm-r .vm-ind, .vm-r .num { display: none; } }
.vm-barre .in[type=search] { width: 260px; max-width: 100%; }
/* import MXplorer : répartition proposée par programme vendu */
.mx-rt { font-size: 15px; margin: 14px 0 6px; }
.mx-rep td { vertical-align: top; }
.mx-rep .mx-noms { font-size: 12.5px; line-height: 1.45; }
.mx-rep tr.mx-doute td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.mx-av { margin-top: 10px; } .mx-av summary { cursor: pointer; color: var(--muted); font-size: 13.5px; } .mx-av .field { margin-top: 8px; }
/* vérification : programmes vendus candidats */
.vm-2 { color: var(--warn); font-weight: 600; }
.vm-cands { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; display: grid; gap: 6px; }
.vm-cands.doute { border-color: var(--warn); background: var(--warn-soft, #fdf3e1); }
.vm-cands h4 { margin: 0 0 4px; font-size: 13px; }
.vm-cand { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n p q" "s p q"; align-items: center; gap: 2px 8px; text-align: left;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; }
.vm-cand b { grid-area: n; } .vm-cand small { grid-area: s; color: var(--muted); } .vm-cand .pill:nth-of-type(1) { grid-area: p; } .vm-cand .pill:nth-of-type(2) { grid-area: q; }
.vm-cand.prop { border-color: var(--blue, #1b0d35); } .vm-cand:hover:not(:disabled) { border-color: var(--pink, #d42a73); }
.bl-dec { display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.bl-dec label { display: inline-flex; gap: 4px; align-items: center; }
.bl-dec select.in.sm { padding: 3px 6px; height: auto; min-width: 0; width: auto; }
.bl-cx { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 6px 0 0; }
.bl-cx:hover { color: var(--bad); }
.bl-ri .check { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.bl-ri .check small { flex-basis: 100%; margin-left: 24px; color: var(--muted); }

/* lecture des résultats : raisons des non-diffusions ; fenêtre des événements d'antenne */
.an-nd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px }
.an-nd > b { margin-right: 4px } .an-nd .tag.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, transparent) }
.an-nd .btn { margin-left: auto }
.ev-f { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: var(--surface) }
.ev-progs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; min-height: 40px; background: var(--bg1, #fff) }
.ev-pg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12.5px; cursor: pointer; background: var(--surface) }
.ev-pg input { accent-color: var(--blue); margin: 0 } .ev-pg small { color: var(--muted); font-family: var(--f-mono); font-size: 11px }
.ev-pg.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--surface)) }

/* pige : un billboard qui dit « votre météo avec… » proposé pour un groupe de programmes */
.px-meteo { margin: 8px 0; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 9px;
  background: var(--warn-soft); font-size: 12.5px; display: grid; gap: 6px }
.px-meteo b { display: flex; gap: 6px; align-items: flex-start; color: var(--warn) } .px-meteo b svg { width: 15px; height: 15px; flex: none; margin-top: 1px }
.px-meteo q { font-style: italic; color: var(--ink2, #3a3550) } .px-meteo .px-btns { margin: 0 }
.px-carte.meteo { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)) }

/* bilan : deuxième cible d'un même sponso — présences de la vente, reprises sans s'additionner */
.bl-mv { color: var(--muted); font-style: italic; background: color-mix(in srgb, var(--line) 25%, transparent) }
.bl-mvr td.bl-p { border-left: 3px solid var(--line2) } .bl-mvt { display: inline-block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px }

/* ligne de vente : plusieurs cibles, chacune avec ses GRP vendus */
.vl-cibs-f { grid-column: 1 / -1 } .vl-cibs { display: grid; gap: 6px; margin: 4px 0 6px }
.vl-cib { display: grid; grid-template-columns: minmax(0, 1fr) 150px 90px; gap: 6px; align-items: center }
.vl-cp { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; text-align: center }

/* bilan envoyé (hors de l'outil) */
.bl-env { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--ok-soft); color: var(--ok) } .bl-env svg { width: 14px; height: 14px }
.bl-env-x { border: 0; background: transparent; color: var(--ok); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50% }
.bl-env-x:hover { background: color-mix(in srgb, var(--ok) 15%, transparent) }

/* fiche campagne : l'état vu par MXplorer (qui fait foi) */
.c-taux-mx { text-decoration: none; color: inherit; border-radius: 10px; transition: background .15s } .c-taux-mx:hover { background: var(--surface2) }
.c-mx-warn { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-size: 12px; font-weight: 600; margin-top: 2px } .c-mx-warn svg { width: 13px; height: 13px }

/* tableau de bord : « Ma semaine » */
.ms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-bottom: 18px }
.ms-col { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  animation: ms-in .28s ease-out both } .ms-col:nth-child(2) { animation-delay: .04s } .ms-col:nth-child(3) { animation-delay: .08s } .ms-col:nth-child(4) { animation-delay: .12s }
@keyframes ms-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .ms-col { animation: none } }
.ms-col header { display: flex; align-items: center; gap: 8px } .ms-col h3 { margin: 0; font-size: 13.5px; flex: 1 }
.ms-i svg { width: 16px; height: 16px; color: var(--muted) }
.ms-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface2); color: var(--muted) }
.ms-n.on { background: var(--warn-soft); color: var(--warn) }
.ms-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.ms-col li a { display: grid; gap: 1px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; color: inherit; transition: background .12s }
.ms-col li a:hover { background: var(--surface2) } .ms-col li b { font-size: 13px } .ms-col li span { font-size: 12px; color: var(--muted) }
.ms-r { color: var(--bad); font-weight: 600 } .ms-plus { font-size: 12px } .ms-vide { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--ok); font-size: 12.5px }
.ms-vide svg { width: 14px; height: 14px }

/* Bilans › Cette semaine */
.bw-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap }
.bw { display: grid; gap: 8px }
.bw-r { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(200px, 1fr) auto; gap: 12px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; animation: ms-in .25s ease-out both; transition: opacity .35s, transform .35s }
.bw-r.bw-fait { opacity: 0; transform: translateX(16px) }
.bw-n { display: grid } .bw-n span { font-size: 12.5px; color: var(--muted) }
.bw-t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px } .bw-retard { color: var(--bad); font-weight: 600 }
.bw-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.bw-etat { font-size: 12px; font-weight: 600 } .bw-etat.ok { color: var(--ok) } .bw-etat.warn { color: var(--warn) } .bw-etat.bad { color: var(--bad) }
.bw-etat.en-cours { color: var(--muted) }
@media (max-width: 900px) { .bw-r { grid-template-columns: 1fr } .bw-a { justify-content: flex-start } }

/* Book : qui parraine l'offre */
.bkx-par { display: grid; gap: 2px; margin: 8px 0 4px; font-size: 12px; color: var(--muted) } .bkx-par span.on { color: var(--ink, inherit) }
.bkx-par span.on::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: middle }
.bkx-par.libre { color: var(--ok) }

/* conducteur : la journée en grille (une ligne par programme) */
.cgx { display: grid; gap: 2px; max-height: 620px; overflow-y: auto; margin: 6px 0 10px; padding-right: 4px; position: relative }
.cg-r { display: grid; grid-template-columns: 64px minmax(200px, 1.3fr) minmax(140px, 1fr) minmax(160px, 1fr); gap: 12px; align-items: center; text-align: left;
  border: 1px solid transparent; border-radius: 10px; background: transparent; padding: 7px 10px; font: inherit; color: inherit; cursor: pointer; transition: background .12s, opacity .15s }
.cg-r:hover { background: var(--surface2) } .cg-r.cg-par { background: color-mix(in srgb, var(--blue) 4%, transparent) }
.cg-r.now { border-color: color-mix(in srgb, var(--blue) 45%, transparent); background: color-mix(in srgb, var(--blue) 8%, transparent) }
.cg-r.foc { border-color: var(--blue) } .cg-r.estompe { opacity: .45 }
.cg-r.cg-edition { background: color-mix(in srgb, var(--bad) 6%, transparent) }
.cg-h { font-family: var(--f-mono); font-size: 12.5px; display: grid; line-height: 1.2 } .cg-h small { color: var(--muted) }
.cg-p { display: flex; gap: 6px; align-items: center; flex-wrap: wrap } .cg-p b { font-size: 13.5px }
.cg-ty { font-style: normal; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface2); color: var(--muted) }
.cg-ty.edition { background: var(--bad-soft, #fdecec); color: var(--bad) } .cg-ty.chg { background: var(--warn-soft); color: var(--warn) } .cg-ty.now { background: var(--blue); color: #fff }
.cg-s { display: flex; gap: 4px; flex-wrap: wrap } .cg-sp { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--surface2) }
.cg-sp.on { background: var(--blue); color: #fff }
.cg-bb { display: flex; gap: 4px; flex-wrap: wrap } .cg-t { font-family: var(--f-mono); font-size: 11px; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line2) }
.cg-t.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok) } .cg-t.manque { background: var(--warn-soft); border-color: transparent; color: var(--warn) }
.cg-t.futur { color: var(--muted) }
@media (max-width: 900px) { .cg-r { grid-template-columns: 56px 1fr } .cg-s, .cg-bb { grid-column: 2 } }

/* Fiche campagne › parcours en 5 étapes */
.wf { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: wf }
.wf-e { position: relative; min-width: 0 }
.wf-e::before { content: ""; position: absolute; top: 19px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; background: var(--line); transition: background .3s }
.wf-e:first-child::before { display: none }
.wf-e.fait::before, .wf-e.cur::before { background: var(--ok) }
.wf-e button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 6px; width: 100%; padding: 4px 6px 6px; border-radius: 10px; text-align: center; transition: background .15s }
.wf-e button:hover { background: var(--surface2) } .wf-e button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
.wf-e i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line2); background: var(--surface); font: 600 13px var(--f-mono); color: var(--muted); transition: transform .2s, background .2s, border-color .2s }
.wf-e i svg { width: 15px; height: 15px }
.wf-e.fait i { background: var(--ok); border-color: var(--ok); color: #fff }
.wf-e.cur i { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent); animation: wf-p 2.4s ease-in-out infinite }
.wf-e button:hover i { transform: scale(1.08) }
.wf-e span { display: grid; gap: 1px; min-width: 0 } .wf-e b { font-size: 13px } .wf-e small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wf-e.cur b { color: var(--blue) }
@keyframes wf-p { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--blue) 8%, transparent) } }
@media (prefers-reduced-motion: reduce) { .wf-e.cur i { animation: none } }
@media (max-width: 760px) { .wf { grid-template-columns: repeat(5, minmax(64px, 1fr)); overflow-x: auto } .wf-e small { display: none } }

/* Fluidité : navigation sans flash, entrées douces, pas de saut de mise en page */
#page.charge { opacity: .6; pointer-events: none; transition: opacity .2s .08s }
#page.entre { animation: page-in .22s cubic-bezier(.2, .8, .2, 1) }
@keyframes page-in { from { opacity: 0; transform: translateY(6px) } }
.modal { animation: modal-in .18s cubic-bezier(.2, .8, .2, 1) }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985) } }
.toast { animation: toast-in .22s cubic-bezier(.2, .8, .2, 1) }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) } }
#tab > * { animation: tab-in .18s ease-out }
@keyframes tab-in { from { opacity: 0; transform: translateY(4px) } }
.btn { transition: background .15s, border-color .15s, box-shadow .15s, transform .08s }
.btn:active:not(:disabled) { transform: translateY(1px) }
.tabs button { transition: color .15s, border-color .2s, background .15s }
.panel, .card { transition: box-shadow .2s, border-color .2s }

.pz-dbl { display: flex; gap: 8px; align-items: flex-start; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 8px; padding: 9px 12px; font-size: 13px }
.pz-dbl > svg { width: 16px; height: 16px; color: var(--warn); flex: none; margin-top: 2px } .pz-dbl > div { display: grid; gap: 2px } .pz-dbl b { color: var(--warn) }
.pz-dbl a { color: var(--ink2); font-weight: 600 } .pz-dbl a small { font-weight: 400; color: var(--muted) }
.sec-conf { margin-top: 14px; max-width: 560px }

.px-alts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted) }
.px-alt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; width: 112px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: var(--surface); transition: border-color .15s, transform .15s }
.px-alt:hover { border-color: var(--blue); transform: translateY(-1px) } .px-alt:focus-visible { outline: 2px solid var(--blue) }
.px-alt img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; background: var(--surface2) } .px-alt small { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink2) }

.vm-att { display: flex; align-items: center; gap: 10px; justify-content: center; min-height: 200px; border-radius: 8px; background: var(--surface2); color: var(--muted); font-size: 13px }

/* Bilans regroupés */
.reg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px }
.reg-c { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface2) }
.reg-c small { color: var(--muted) } .reg-c button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px } .reg-c button:hover { color: var(--bad) }
.reg-info { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: var(--blue-soft); font-size: 13px }
.reg-info > svg { width: 18px; height: 18px; flex: none } .reg-info > div { display: grid; gap: 2px; flex: 1; min-width: 220px } .reg-info span { color: var(--ink2) }
.reg-l { display: grid; gap: 6px; max-height: 320px; overflow: auto }
.reg-o { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer }
.reg-o:has(input:checked) { border-color: var(--blue); background: var(--blue-soft) } .reg-o span { display: grid } .reg-o small { color: var(--muted); font-size: 12px }
.reg-m { justify-self: start }
.bl-autre { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--ink2); white-space: nowrap }
.bl-comp .bl-autre { margin-left: 6px }
.vm-ac { font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--ink2) }

.mx-deja { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface2); font-size: 13px }
.mx-dl { display: flex; gap: 10px; align-items: center; min-width: 0 } .mx-dl .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bl-her { margin: 10px 16px 0 }
.bl-rf { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 10px 16px 0 }
.vm-recus summary { cursor: pointer } .vm-recus ul { margin: 8px 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13px }
.mx-cib { display: grid; gap: 4px } .mx-cib b svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px }
.bl-neutre b { color: var(--ink) !important }

/* =================================================================== BFMBot : le guide animé */
.bfmbot { position: fixed; left: 0; top: 0; z-index: 1250; width: 92px; pointer-events: none; transition: transform .85s cubic-bezier(.45, .05, .3, 1.18); will-change: transform }
.bfmbot.bb-vite { transition: none }
.bb-corps { display: block; width: 92px; height: 115px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; border-radius: 30px }
.bb-corps:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px }
svg.bb-svg[aria-hidden] { width: 100%; height: auto; overflow: visible; display: block; vertical-align: top }
.bb-svg * { transform-box: fill-box; transform-origin: center }
.bb-corpsg { animation: bbFlotte 3s ease-in-out infinite; transform-box: view-box; transform-origin: 60px 130px }
.bb-ombre { animation: bbOmbre 3s ease-in-out infinite }
@keyframes bbFlotte { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes bbOmbre { 0%, 100% { transform: scale(1); opacity: .18 } 50% { transform: scale(.82); opacity: .12 } }
.bb-jet { animation: bbJet .16s ease-in-out infinite alternate; transform-origin: 50% 0 }
@keyframes bbJet { from { transform: scaleY(.8); opacity: .75 } to { transform: scaleY(1.1); opacity: 1 } }
.bb-onair { animation: bbOnair 1.8s steps(1) infinite }
@keyframes bbOnair { 0%, 60% { opacity: 1 } 61%, 100% { opacity: .35 } }
.bb-yeux { transform: translate(var(--ox, 0), var(--oy, 0)); transition: transform .25s ease-out; transform-box: view-box }
.bb-oeil-n > rect { animation: bbCligne 5.2s infinite }
@keyframes bbCligne { 0%, 93%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
.bb-oeil-j, .bb-oeil-c, .bb-oeil-s, .bb-points, .bb-bouche-o { display: none }
.bb-joie .bb-oeil-n, .bb-clin .bb-oeil-n, .bb-surpris .bb-oeil-n { display: none }
.bb-joie .bb-oeil-j, .bb-clin .bb-oeil-c, .bb-surpris .bb-oeil-s { display: inline }
.bb-surpris .bb-bouche-s { display: none } .bb-surpris .bb-bouche-o { display: inline }
.bb-pense .bb-yeux { transform: translate(3px, -4px) } .bb-pense .bb-bouche-s { display: none } .bb-pense .bb-points { display: inline }
.bb-points circle { animation: rebond 1.1s infinite ease-in-out } .bb-points circle:nth-child(2) { animation-delay: .15s } .bb-points circle:nth-child(3) { animation-delay: .3s }
.bb-parle .bb-bouche-s { display: none } .bb-parle .bb-bouche-o { display: inline; animation: bbParle .26s ease-in-out infinite alternate }
@keyframes bbParle { from { transform: scale(1, .25) } to { transform: scale(.85, 1) } }
.bb-bras { transition: transform .35s cubic-bezier(.4, 1.6, .5, 1); transform-box: view-box }
.bb-bras-g { transform-origin: 40px 103px } .bb-bras-d { transform-origin: 80px 103px }
.bb-pointe-d .bb-bras-d { transform: rotate(-62deg) } .bb-pointe-g .bb-bras-g { transform: rotate(62deg) }
.bb-g-coucou .bb-bras-d { animation: bbCoucou .5s ease-in-out 3 alternate }
@keyframes bbCoucou { from { transform: rotate(-120deg) } to { transform: rotate(-160deg) } }
.bb-g-antenne .bb-antennes { animation: bbAntenne .3s ease-in-out 4 alternate; transform-box: view-box; transform-origin: 60px 30px }
@keyframes bbAntenne { from { transform: rotate(-7deg) } to { transform: rotate(7deg) } }
.bb-g-saut .bb-corpsg { animation: bbSaut .6s cubic-bezier(.3, 1.6, .5, 1) }
@keyframes bbSaut { 0% { transform: translateY(0) } 40% { transform: translateY(-16px) scale(1, 1.04) } 75% { transform: translateY(2px) scale(1.05, .95) } 100% { transform: none } }
.bb-g-danse .bb-corpsg { animation: bbDanse .4s ease-in-out 6 alternate } .bb-g-danse .bb-bras-g { transform: rotate(130deg) } .bb-g-danse .bb-bras-d { transform: rotate(-130deg) }
@keyframes bbDanse { from { transform: rotate(-8deg) translateY(-3px) } to { transform: rotate(8deg) translateY(-8px) } }
.bb-vole .bb-corpsg { animation: none; transform: rotate(var(--pente, 0deg)) translateY(-6px); transition: transform .3s }
.bb-vole .bb-jet { transform: scaleY(1.6) } .bb-vole .bb-ombre { opacity: .06 }
.bb-pose .bb-corpsg { animation: bbPose .42s ease-out }
@keyframes bbPose { 30% { transform: scale(1.08, .9) translateY(3px) } 70% { transform: scale(.97, 1.04) } }
.bb-ranger { position: absolute; top: 2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line2); background: var(--surface); color: var(--muted); font: 600 14px/1 var(--f-head); cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .2s; padding: 0 }
.bfmbot:hover .bb-ranger, .bb-ranger:focus-visible { opacity: 1 }
.bfmbot.bb-range { transform: translate(calc(100vw - 62px), calc(100vh - 66px)) !important } .bfmbot.bb-range .bb-svg { transform: rotate(-24deg) } .bfmbot.bb-range .bb-ranger, .bfmbot.bb-range .bb-bulle { display: none }
.bfmbot.bb-range .bb-corps { opacity: .92 } .bfmbot.bb-range .bb-corps:hover { opacity: 1 }
body.bb-on #toasts { right: 118px }
/* bulle de BFMBot */
.bb-bulle { position: absolute; right: calc(100% - 8px); bottom: 58%; width: 300px; max-width: calc(100vw - 120px); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px 16px 4px 16px; box-shadow: 0 16px 44px rgb(21 15 36 / .24); padding: 12px 30px 12px 14px; font-size: 13.5px; line-height: 1.5; pointer-events: auto; animation: bbBulle .28s cubic-bezier(.3, 1.5, .5, 1); display: grid; gap: 10px }
.bb-bulle.large { width: 340px }
.bb-bulle-d .bb-bulle { right: auto; left: calc(100% - 8px); border-radius: 16px 16px 16px 4px }
.bb-bulle-b .bb-bulle { bottom: auto; top: 42% }
@keyframes bbBulle { from { opacity: 0; transform: translateY(8px) scale(.94) } }
.bb-bts { display: flex; flex-wrap: wrap; gap: 6px }
.bb-bx { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1 }
.bb-bx:hover { background: var(--surface2) }
.bb-anneau { position: fixed; z-index: 1240; border: 3px solid var(--pink); border-radius: 12px; pointer-events: none; animation: bbAnneau 1.1s ease-in-out infinite }
@keyframes bbAnneau { 0%, 100% { box-shadow: 0 0 0 0 rgb(212 42 115 / .45) } 50% { box-shadow: 0 0 0 10px rgb(212 42 115 / 0) } }
/* panneau de discussion */
.bb-panel { position: fixed; right: 16px; bottom: 16px; z-index: 1245; width: min(400px, calc(100vw - 24px)); height: min(580px, calc(100vh - 150px)); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgb(21 15 36 / .28); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; animation: bbPanel .25s cubic-bezier(.3, 1.4, .5, 1); transform-origin: 90% 100%; transition: opacity .2s, transform .2s }
.bb-panel.reduit { opacity: 0; transform: translateY(20px) scale(.96); pointer-events: none }
@keyframes bbPanel { from { opacity: 0; transform: translateY(16px) scale(.94) } }
.bb-panel header { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; background: linear-gradient(120deg, #1b0d35, #3a2470); color: #fff }
.bb-panel header small { display: block; color: #cfc8e6; font-size: 11.5px; line-height: 1.3 } .bb-panel header b { font-size: 15px }
.bb-panel header > div { flex: 1; min-width: 0 } .bb-panel header .btn, .bb-panel header .x { color: #fff; background: rgb(255 255 255 / .1); border-color: transparent }
.bb-panel header .x { width: 30px; height: 30px; border-radius: 8px; border: 0; font-size: 18px; cursor: pointer }
.bb-mini { width: 38px; height: 46px; flex: none } .bb-mini svg.bb-svg[aria-hidden] { width: 38px }
.bb-fil { overflow-y: auto; padding: 14px; display: grid; align-content: start; gap: 10px; background: var(--bg2) }
.bb-acc p { margin: 0 0 10px; font-size: 13.5px }
.bb-sug { display: grid; gap: 6px }
.bb-sug button { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 11px; cursor: pointer; font-size: 13px; color: var(--ink2); transition: border-color .15s, transform .15s }
.bb-sug button:hover { border-color: var(--pink); transform: translateX(2px) }
.bb-m { display: flex } .bb-m.u { justify-content: flex-end }
.bb-m.u > div { background: #1b0d35; color: #fff; border-radius: 14px 14px 4px 14px; padding: 8px 12px; max-width: 85%; font-size: 13.5px; white-space: pre-wrap }
.bb-m.a { flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 12px; max-width: 94% }
.bb-m.a .md { font-size: 13.5px }
.bb-acts { display: flex; flex-wrap: wrap; gap: 6px }
.bb-att { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); font-size: 13px } .bb-att i { width: 7px; height: 7px; border-radius: 50%; background: #6a4fd6; animation: rebond 1.2s infinite ease-in-out }
.bb-att i:nth-child(2) { animation-delay: .15s } .bb-att i:nth-child(3) { animation-delay: .3s }
.bb-saisie { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface) }
.bb-saisie textarea { flex: 1; resize: none; border: 1px solid var(--line2); border-radius: 12px; padding: 9px 11px; font-size: 13.5px; max-height: 120px }
.bb-saisie textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgb(212 42 115 / .12) }
.bb-env { width: 40px; border: 0; border-radius: 12px; background: var(--pink); color: #fff; cursor: pointer; display: grid; place-items: center }
@media (max-width: 640px) { .bfmbot { width: 70px } .bb-corps { width: 70px; height: 88px } .bb-panel { right: 12px; left: 12px; width: auto; bottom: 100px; height: calc(100vh - 120px) } .bb-bulle { width: 240px } body.bb-on #toasts { right: 18px; bottom: 100px } }
/* bulle de visite guidée avec BFMBot */
.ob-qui { display: flex; align-items: center; gap: 8px } .ob-qui h4 { margin: 0 }
.ob-av { width: 30px; height: 37px; flex: none } .ob-av svg.bb-svg[aria-hidden] { width: 30px }
.ob-ov ~ .bfmbot, body:has(.ob-ov) .bfmbot { z-index: 1260 }

/* =================================================================== la présentation (film d'accueil) */
.bb-cine { position: fixed; inset: 0; z-index: 1400; color: #fff; display: grid; grid-template-rows: 1fr auto; overflow: hidden; animation: fade .4s; font-family: var(--f-head) }
.bb-cine.bc-sortie { animation: bcSortie .38s forwards }
@keyframes bcSortie { to { opacity: 0; transform: scale(1.03) } }
.bc-fond { position: absolute; inset: 0; background: radial-gradient(1200px 600px at 20% 30%, #3a2470 0%, transparent 60%), radial-gradient(900px 500px at 85% 80%, rgb(212 42 115 / .35) 0%, transparent 60%), #090013 }
.bc-fond::before { content: ""; position: absolute; inset: -50%; background-image: linear-gradient(rgb(69 215 212 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(69 215 212 / .07) 1px, transparent 1px); background-size: 46px 46px; transform: perspective(600px) rotateX(58deg) translateY(0); animation: bcGrille 6s linear infinite; transform-origin: 50% 0 }
@keyframes bcGrille { to { background-position: 0 46px } }
.bc-fond::after { content: ""; position: absolute; inset: 0; border-top: 5vh solid #000; border-bottom: 5vh solid #000; pointer-events: none }
.bc-scene { position: relative; display: grid; grid-template-columns: minmax(150px, 230px) minmax(260px, 440px) minmax(240px, 400px); align-items: center; justify-content: center; gap: 28px; padding: 8vh 4vw 2vh }
.bc-bot { width: 100%; max-width: 230px; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .45)) }
.bc-bot .bb-ombre { opacity: .35; fill: #000 }
.bc-bot.bc-entre { animation: bcEntre .7s cubic-bezier(.3, 1.5, .5, 1) }
@keyframes bcEntre { from { transform: translateY(30px) rotate(-6deg) scale(.9); opacity: .4 } }
.bc-bot.bc-allume .bb-neige { animation: bcNeige .9s steps(6) forwards } .bc-bot.bc-allume .bb-visage { animation: bcVisage .9s forwards }
@keyframes bcNeige { 0%, 85% { opacity: 1; transform: translateX(-2px) } 50% { transform: translateX(2px) } 100% { opacity: 0 } }
@keyframes bcVisage { 0%, 80% { opacity: 0 } 100% { opacity: 1 } }
.bc-antenne .bb-antennes { animation: bbAntenne .35s ease-in-out infinite alternate; transform-origin: 60px 30px; transform-box: view-box }
.bc-preuves .bb-oeil-n { display: none } .bc-preuves .bb-oeil-j { display: inline }
.bc-bilan .bb-bras-d { transform: rotate(-62deg) } .bc-fin .bb-bras-d { animation: bbCoucou .5s ease-in-out infinite alternate }
.bc-vente .bb-bras-g { transform: rotate(62deg) }
.bc-bulle { position: relative; background: var(--surface); color: var(--ink); border-radius: 22px; padding: 22px 24px; box-shadow: 0 30px 70px rgb(0 0 0 / .45) }
.bc-bulle::before { content: ""; position: absolute; left: -12px; top: 42%; border: 12px solid transparent; border-right-color: #fff; border-left: 0 }
.bc-bulle h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; background: linear-gradient(90deg, #1b0d35, #d42a73); -webkit-background-clip: text; background-clip: text; color: transparent }
.bc-bulle p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink2); min-height: 5.2em }
.bc-decor { min-height: 250px; display: grid; place-items: center }
.cd { width: 100%; max-width: 380px; animation: bbBulle .5s cubic-bezier(.3, 1.4, .5, 1) }
.cd-titre { text-align: center; display: grid; gap: 6px }
.cd-titre span { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #cfc8e6; animation: fade 1s }
.cd-titre b { font-size: 64px; line-height: 1; letter-spacing: -.03em; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: cdZoom 1.2s cubic-bezier(.2, 1.3, .4, 1) }
.cd-titre i { font-style: normal; color: #45d7d4; letter-spacing: .12em; font-size: 13px; text-transform: uppercase }
@keyframes cdZoom { from { transform: scale(.6); opacity: 0; filter: blur(8px) } }
.cd-carte { position: relative; background: var(--surface); color: var(--ink); border-radius: 16px; padding: 18px 18px 22px; display: grid; gap: 12px; box-shadow: 0 24px 50px rgb(0 0 0 / .4); transform: rotate(-2deg) }
.cd-ct { font-weight: 700; font-size: 15px; color: #1b0d35 }
.cd-l { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted) }
.cd-l i { height: 9px; border-radius: 5px; background: linear-gradient(90deg, #45d7d4, #6a4fd6); width: 0; animation: cdRemplit .7s ease-out forwards }
.cd-l:nth-child(2) i { animation-delay: .4s } .cd-l:nth-child(3) i { animation-delay: .9s } .cd-l:nth-child(4) i { animation-delay: 1.4s } .cd-l:nth-child(5) i { animation-delay: 1.9s }
@keyframes cdRemplit { to { width: var(--w) } }
.cd-tampon { position: absolute; right: 14px; bottom: -14px; border: 3px solid #1e7f4f; color: #1e7f4f; background: var(--surface); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; padding: 6px 10px; border-radius: 8px; transform: rotate(-9deg) scale(0); animation: cdTampon .45s cubic-bezier(.3, 1.8, .5, 1) 2.7s forwards }
@keyframes cdTampon { to { transform: rotate(-9deg) scale(1) } }
.cd-tv { position: relative; background: #150f24; border: 10px solid #2d1a52; border-radius: 22px; padding: 26px 0 30px; overflow: hidden; box-shadow: 0 24px 50px rgb(0 0 0 / .45) }
.cd-tv small { position: absolute; left: 12px; bottom: 7px; font-size: 11px; color: #e3132c; font-weight: 700; letter-spacing: .1em; text-transform: uppercase } .cd-tv small::before { content: "● " }
.cd-bande { display: flex; gap: 6px; width: max-content; animation: cdDefile 9s linear infinite }
.cd-bande span { flex: none; padding: 16px 14px; border-radius: 8px; background: #2d1a52; font-size: 12px; font-weight: 600; color: #cfc8e6; white-space: nowrap }
.cd-bande .bb { background: var(--pink); color: #fff } .cd-bande .pub { background: #3d3650; color: #9a93ad }
@keyframes cdDefile { from { transform: translateX(10%) } to { transform: translateX(-55%) } }
.cd-loupe { position: absolute; top: 14px; left: 40%; width: 74px; height: 74px; border: 4px solid #45d7d4; border-radius: 50%; box-shadow: 0 0 22px rgb(69 215 212 / .6), inset 0 0 18px rgb(69 215 212 / .25); animation: cdLoupe 3s ease-in-out infinite alternate }
.cd-loupe::after { content: ""; position: absolute; right: -16px; bottom: -14px; width: 24px; height: 6px; background: #45d7d4; border-radius: 3px; transform: rotate(45deg) }
@keyframes cdLoupe { from { transform: translateX(-60px) } to { transform: translateX(70px) } }
.cd-preuves { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: center }
.cd-vid { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; background: linear-gradient(135deg, #2d1a52, #090013); border: 2px solid #3a2470; display: grid; place-items: center; font-weight: 700; letter-spacing: .06em }
.cd-vid b { position: absolute; right: -10px; top: -10px; width: 38px; height: 38px; border-radius: 50%; background: #1e7f4f; display: grid; place-items: center; font-size: 20px; transform: scale(0); animation: cdTampon2 .45s cubic-bezier(.3, 1.8, .5, 1) forwards; box-shadow: 0 6px 16px rgb(0 0 0 / .4) }
.cd-vid:nth-child(1) b { animation-delay: .9s } .cd-vid:nth-child(2) b { animation-delay: 1.8s }
@keyframes cdTampon2 { to { transform: scale(1) } }
.cd-preuves p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 20px; font-style: italic; color: #45d7d4; opacity: 0; animation: cdVoir .6s 2.4s forwards }
.cd-bilan { background: var(--surface); color: var(--ink); border-radius: 16px; padding: 18px; box-shadow: 0 24px 50px rgb(0 0 0 / .4); display: grid; gap: 12px }
.cd-barres { display: flex; align-items: flex-end; gap: 14px; height: 150px; border-bottom: 2px solid var(--line) }
.cd-barres div { flex: 1; display: flex; align-items: flex-end; gap: 4px; height: 100% }
.cd-barres i { flex: 1; height: 0; border-radius: 5px 5px 0 0; background: #cfc8e6; animation: cdMonte .9s cubic-bezier(.3, 1.3, .5, 1) forwards } .cd-barres i.d { background: var(--pink); animation-delay: .35s }
@keyframes cdMonte { to { height: var(--h) } }
.cd-fichiers { display: flex; gap: 10px; justify-content: center }
.cd-fichiers span { font-weight: 800; font-size: 13px; padding: 10px 14px; border-radius: 10px; color: #fff; animation: cdSaute 1s ease-in-out infinite alternate } .cd-fichiers .x { background: #1e7f4f } .cd-fichiers .p { background: #c8141c; animation-delay: .3s }
@keyframes cdSaute { to { transform: translateY(-8px) rotate(3deg) } }
.cd-bilan small { display: flex; gap: 6px; align-items: center; justify-content: center; color: var(--muted) } .cd-bilan small i { width: 10px; height: 10px; border-radius: 3px; background: #cfc8e6 } .cd-bilan small i.d { background: var(--pink); margin-left: 8px }
.cd-chat { display: grid; gap: 10px }
.cd-chat div { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 14px; opacity: 0; transform: translateY(8px); animation: cdVoir .4s forwards }
@keyframes cdVoir { to { opacity: 1; transform: none } }
.cd-chat .u { justify-self: end; background: var(--surface); color: var(--ink); border-radius: 14px 14px 4px 14px } .cd-chat .a { background: var(--pink); color: #fff; border-radius: 14px 14px 14px 4px }
.cd-chat div:nth-child(1) { animation-delay: .3s } .cd-chat div:nth-child(2) { animation-delay: 1.1s } .cd-chat div:nth-child(3) { animation-delay: 1.9s } .cd-chat div:nth-child(4) { animation-delay: 2.7s }
.bc-pied { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 4vw calc(5vh + 14px) }
.bc-dots { display: flex; gap: 6px } .bc-dots i { width: 26px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .2); cursor: pointer; transition: background .3s } .bc-dots i.f { background: rgb(255 255 255 / .55) } .bc-dots i.on { background: var(--pink) }
.bc-pied .btn.ghost { color: #cfc8e6; border-color: rgb(255 255 255 / .2); background: transparent }
.bc-choix { display: flex; flex-wrap: wrap; gap: 8px; animation: bbBulle .4s }
.bc-choix .btn:not(.primary) { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .25) }
@media (max-width: 980px) { .bc-scene { grid-template-columns: 140px 1fr; } .bc-decor { grid-column: 1 / -1; min-height: 0 } .cd { max-width: 340px } .cd-titre b { font-size: 46px } }
@media (max-width: 600px) { .bc-scene { grid-template-columns: 1fr; padding-top: 7vh; gap: 14px } .bc-bot { max-width: 120px; justify-self: center } .bc-bulle::before { display: none } .bc-bulle h2 { font-size: 21px } .bc-bulle p { font-size: 14.5px; min-height: 0 } .bc-decor { display: none } }

/* =================================================================== annonceurs : liste + fiche */
.ann { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start }
.ann-liste { position: sticky; top: 70px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-rows: auto auto 1fr; max-height: calc(100vh - 90px); overflow: hidden }
.ann-rech { padding: 10px 10px 6px } .ann-f { padding: 0 10px 8px; border-bottom: 1px solid var(--line); margin: 0 } .ann-rech { padding: 10px 10px 8px }
.ann-items { overflow-y: auto; padding: 6px; display: grid; gap: 2px; align-content: start }
.ann-it { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; width: 100%; color: inherit; transition: background .12s }
.ann-it:hover { background: var(--surface2) } .ann-it.on { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--pink) }
.ann-t { display: grid; min-width: 0 } .ann-t b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ann-t small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ann-s .muted { font-size: 12.5px }
.ann-fiche { display: grid; gap: 14px; min-width: 0 }
.ann-tete { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; flex-wrap: wrap }
.ann-id { display: flex; gap: 16px; align-items: center; min-width: 0 } .ann-id h2 { margin: 0; font-size: 22px; letter-spacing: -.01em } .ann-id p { margin: 2px 0 6px; font-size: 13px }
.ann-ct { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px } .ann-ct a, .ann-ct span { display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); text-decoration: none } .ann-ct a:hover { color: var(--pink) }
.ann-act { flex-wrap: wrap; gap: 6px }
.ann-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px }
.ann-k { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid } .ann-k b { font-size: 20px; letter-spacing: -.02em } .ann-k small { color: var(--muted); font-size: 12px }
.ann-k.ok b { color: var(--ok) } .ann-k.warn b { color: var(--ecart) }
.ann-h3 { margin: 12px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; gap: 8px; align-items: center }
.ann-camps { display: grid; gap: 6px }
.ann-c { display: grid; grid-template-columns: auto 1fr 170px auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; text-decoration: none; color: inherit; transition: border-color .12s, transform .12s }
.ann-c:hover { border-color: var(--pink); transform: translateX(2px) }
.ann-cn { display: grid; min-width: 0 } .ann-cn b { font-size: 13.5px } .ann-cn small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ann-cb { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end }
.ann-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px } .ann-tags .tag.muted { opacity: .7 }
.ann-dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0 0 12px; font-size: 13.5px } .ann-dl dt { color: var(--muted) } .ann-dl dd { margin: 0 }
@media (max-width: 900px) { .ann { grid-template-columns: 1fr } .ann-liste { position: static; max-height: 320px } .ann-c { grid-template-columns: auto 1fr; } .ann-cd, .ann-cb { grid-column: 2 } }
/* piges : étape 3, montage et envoi */
.px-mt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px }
.px-mg { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.px-mc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: grid; cursor: pointer; transition: border-color .12s, transform .12s }
.px-mc:hover { border-color: var(--pink); transform: translateY(-1px) } .px-mc.aj { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)) }
.px-mv { position: relative; aspect-ratio: 16 / 9; background: #150f24 } .px-mv img, .px-mv .px-k0 { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0 }
.px-mb { position: absolute; left: 8px; top: 8px } .px-maj { position: absolute; right: 8px; top: 8px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; display: inline-flex; gap: 3px; align-items: center }
.px-mi { padding: 8px 10px 0; display: grid } .px-mi b { font-size: 13px } .px-mi small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.px-ma { display: flex; gap: 6px; padding: 8px 10px 10px }
.ed-vide { gap: 8px } .ed-vide svg { width: 36px; height: 36px; opacity: .5 } .ed-vide span { max-width: 460px; text-align: center; color: var(--muted) }
/* BFMBot passe derrière les fenêtres (sauf pendant une visite guidée) */
body:has(.backdrop):not(:has(.ob-ov)) .bfmbot { z-index: 950 } body:has(.backdrop):not(:has(.ob-ov)) .bb-panel { z-index: 951 }
.px-fil { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 12.5px } .px-fil a, .px-fil span { padding: 4px 10px; border-radius: 99px; text-decoration: none; color: var(--muted); border: 1px solid transparent }
.px-fil a:hover { background: var(--surface2); color: var(--ink) } .px-fil .on { background: var(--blue-soft); color: var(--blue); font-weight: 600 } .px-fil a + a::before, .px-fil span + a::before, .px-fil a + span::before { content: "›"; margin-right: 8px; margin-left: -6px; color: var(--line2) }

/* =================================================================== équipe : mes campagnes */
.dsh-t { font-size: 15px; margin: 22px 0 10px; letter-spacing: -.005em }
.mcs { margin: 6px 0 4px } .mcs-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap } .mcs-h h2 { margin: 0; font-size: 17px }
.mcs-eq { display: flex; gap: 10px; align-items: center } .mcs-eq > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted) } .mcs-eq b { color: var(--ink) }
.mc-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px }
.mc { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s }
.mc::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--line2) } .mc.bad::before { background: var(--bad) } .mc.warn::before { background: #e3a13a } .mc.ok::before { background: var(--ok) } .mc.info::before { background: #6a4fd6 }
.mc:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(21 15 36 / .1); border-color: var(--line2) }
.mc-h { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center } .mc-n { display: grid; min-width: 0 } .mc-n b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .mc-n small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mc-ring { --p: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c, var(--ok)) calc(var(--p) * 1%), var(--surface2) 0) }
.mc-ring b { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 11.5px } .mc-ring.ok { --c: var(--ok) } .mc-ring.moy { --c: #e3a13a } .mc-ring.ko { --c: var(--bad) } .mc-ring.vide b { color: var(--muted) }
.mc-av { height: 4px; border-radius: 3px; background: var(--surface2); overflow: hidden } .mc-av i { display: block; height: 100%; background: linear-gradient(90deg, #45d7d4, #6a4fd6) }
.mc-m { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted) } .mc-m > span { display: inline-flex; gap: 3px; align-items: center }
.mc-e { display: flex; justify-content: space-between; align-items: center } .mc-e svg { transform: rotate(180deg); color: var(--muted) }
.mc-p { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface2) } .mc-p.bad { background: var(--bad-soft); color: var(--bad) } .mc-p.warn { background: var(--warn-soft); color: var(--warn) } .mc-p.ok { background: var(--ok-soft); color: var(--ok) } .mc-p.info { background: var(--blue-soft); color: #4b33b5 }
.mcs-vide { display: grid; gap: 8px; justify-items: start; background: linear-gradient(120deg, #1b0d35, #3a2470); color: #fff; border-radius: 14px; padding: 20px 22px } .mcs-vide span { color: #d8d2ea; max-width: 640px }
.mcs-sans { display: flex; gap: 10px; align-items: center; margin-top: 10px; background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 8px 12px; font-size: 13px } .mcs-sans span { flex: 1 } .mcs-sans a { color: inherit; font-weight: 600 }
.ec-f { justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 8px } .ec-l { max-height: 56vh; overflow-y: auto; display: grid; gap: 4px; padding-right: 4px }
.ec-h { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.ec-c { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface) } .ec-c.on { border-color: var(--pink); background: var(--surface2) }
.ec-c input { width: 18px; height: 18px; accent-color: var(--pink) } .ec-t { display: grid; min-width: 0 } .ec-t small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ec-eq { display: flex; gap: 2px }
.btn-suivre.ghost { color: var(--ok) }
.c-eq { display: inline-flex; gap: 2px; align-items: center; margin-right: 4px }
.px-mien { margin-top: 6px; font-size: 12.5px } .px-moi { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); vertical-align: middle; margin-left: 3px }
/* vérification MXplorer : la décision d'abord, sans défiler */
.vm-pan .vm-dec { position: sticky; top: -14px; z-index: 2; background: var(--surface); margin: 0 -16px 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.vm-kbd { width: 100%; font-size: 11.5px; color: var(--muted) } .vm-kbd kbd { font-size: 10.5px }
.vm-pan .vm-video video { max-height: 260px; width: 100%; background: #000; border-radius: 8px }
.vm-ind-d { margin-top: 8px } .vm-ind-d summary { cursor: pointer; font-size: 13px; color: var(--muted) }
.vm-pr-d > summary { cursor: pointer; list-style: none } .vm-pr-d > summary::-webkit-details-marker { display: none } .vm-pr-d > summary::after { content: "▾"; margin-left: auto; color: var(--muted) } .vm-pr-d:not([open]) > summary::after { content: "▸" }
.vm-corps { scroll-margin-top: 12px } .vm-liste { max-height: calc(100vh - 140px) } .vm-pan { max-height: calc(100vh - 24px) }
.cd-eq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.cd-eqp { background: var(--surface); color: var(--ink); border-radius: 14px; padding: 14px 10px; display: grid; justify-items: center; gap: 4px; opacity: 0; animation: cdVoir .5s var(--d) forwards; border-top: 4px solid var(--c) }
.cd-eqp span { width: 42px; height: 42px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 700 } .cd-eqp small { color: var(--muted) }
.cd-mail { grid-column: 1 / -1; background: var(--surface); color: var(--ink); border-radius: 12px; padding: 12px 14px; display: grid; opacity: 0; animation: cdVoir .5s 1.4s forwards; border-left: 4px solid var(--pink) } .cd-mail span { color: var(--muted); font-size: 13px }
.bb-liens { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap }
.aide-tuto { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 12px }
.aide-tt { display: flex; gap: 12px; align-items: center; flex-wrap: wrap } .aide-tt h2 { margin: 0; font-size: 17px } .aide-tt p { margin: 2px 0 0; font-size: 13px }
.aide-ms { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px }
.aide-m { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; text-align: left; border: 1px solid var(--line); background: var(--bg2); border-radius: 10px; padding: 10px; cursor: pointer; color: inherit }
.aide-m:hover { border-color: var(--pink) } .aide-m b { font-size: 13.5px } .aide-m small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4 } .aide-m.fait { background: var(--ok-soft); border-color: transparent } .aide-m.fait .ob-mi { color: var(--ok) }
.aide-tt .ob-bar { background: var(--surface2) }
img.img-ko { visibility: hidden }
#cp-notif .seg { justify-self: start; width: auto; display: inline-flex }

/* ---------- exercices du tutoriel : une carte flottante, l'interface reste libre */
.ob-exo { position: fixed; left: 248px; bottom: 18px; z-index: var(--z-menu); width: min(360px, calc(100vw - 24px)); background: var(--surface); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 18px 50px rgb(21 15 36 / .28), 0 0 0 1px rgb(106 79 214 / .18); display: grid; gap: 8px; transition: transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .25s, box-shadow .3s }
.ob-exo.entre { animation: ob-exo-in .38s cubic-bezier(.2,.9,.3,1.2) }
.ob-exo.sort { opacity: 0; transform: translateY(12px) scale(.97) }
.ob-exo.bravo { box-shadow: 0 18px 50px rgb(30 127 79 / .3), 0 0 0 2px var(--ok) }
.ob-exo.bravo .ob-ex-t { color: var(--ok) }
@keyframes ob-exo-in { from { opacity: 0; transform: translateY(16px) scale(.96) } }
.ob-ex-h { display: flex; align-items: center; gap: 10px } .ob-ex-h > span:nth-child(2) { flex: 1; display: grid; line-height: 1.25 }
.ob-ex-h small { color: var(--muted); font-size: 11.5px } .ob-ex-t { display: flex; align-items: center; gap: 6px; font-size: 15px }
.ob-ex-h .x { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px } .ob-ex-h .x:hover { background: var(--surface2) }
.ob-ex-c { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 500 }
.ob-ex-i { margin: 0; font-size: 12.5px; color: var(--ink2); background: var(--blue-soft); border-radius: 8px; padding: 7px 9px; display: flex; gap: 6px; align-items: flex-start }
.ob-ex-p { display: flex; gap: 4px } .ob-ex-p i { flex: 1; height: 4px; border-radius: 99px; background: var(--line); transition: background .3s } .ob-ex-p i.f { background: var(--ok) } .ob-ex-p i.on { background: #6a4fd6 }
.ob-ex-b { display: flex; align-items: center; gap: 6px } .ob-ex-b .grow { flex: 1 }
.ob-pulse { position: relative; z-index: 2; animation: ob-pulse 1.2s ease-in-out 3; border-radius: 8px }
@keyframes ob-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(212 42 115 / .0) } 50% { box-shadow: 0 0 0 6px rgb(212 42 115 / .35), 0 0 0 12px rgb(212 42 115 / .12) } }
@media (max-width: 900px) { .ob-exo { left: 12px } }
.ax-emp { display: inline-flex; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: var(--ok); background: var(--ok-soft); padding: 3px 8px; border-radius: 6px }

/* ---------- studio d'avatar */
.avs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start }
.avs-g { display: grid; justify-items: center; gap: 8px; text-align: center; position: sticky; top: 0 }
.avs-ap { width: 190px; height: 190px; border-radius: 22%; overflow: hidden; box-shadow: 0 18px 40px rgb(21 15 36 / .25), 0 0 0 4px #fff, 0 0 0 6px rgb(106 79 214 / .25) }
.avs-ap.pop { animation: avs-pop .35s cubic-bezier(.2,.9,.3,1.3) }
@keyframes avs-pop { 0% { transform: scale(.94) } 100% { transform: none } }
.avs-ap svg, .avs-ap img { width: 100%; height: 100%; display: block; object-fit: cover }
.avs-g small { font-size: 12px; max-width: 200px }
.avs-tabs { margin-bottom: 12px }
.avs-z { max-height: min(56vh, 520px); overflow: auto; padding-right: 4px }
.avs-ps { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; padding: 6px }
.avs-p { border: 0; background: none; padding: 0; cursor: pointer; display: grid; gap: 6px; text-align: center; color: var(--ink2) }
.avs-p svg { width: 100%; aspect-ratio: 1; border-radius: 18%; transition: transform .18s, box-shadow .18s; box-shadow: 0 0 0 0 transparent }
.avs-p:hover svg { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 24px rgb(21 15 36 / .22) }
.avs-p.on svg { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pink) }
.avs-p small { font-size: 12px; line-height: 1.25 }
.avs-r { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line) }
.avs-r > span { font-size: 12.5px; font-weight: 600; color: var(--muted) }
.avs-o { display: flex; flex-wrap: wrap; gap: 6px }
.avs-c { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 4px 9px; min-height: 32px; cursor: pointer; font-size: 12.5px; transition: border-color .15s, transform .15s }
.avs-c:hover { transform: translateY(-1px); border-color: var(--line2) }
.avs-c.on { border-color: var(--pink); box-shadow: 0 0 0 2px rgb(212 42 115 / .18) }
.avs-c i { display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1) }
.avs-c:has(i) { padding: 4px }
.avs-mini { display: block; width: 40px; height: 40px; border-radius: 9px; overflow: hidden } .avs-mini svg { width: 100%; height: 100% }
.avs-c:has(.avs-mini) { padding: 3px }
.avs-ph { display: grid; gap: 12px } .avs-ph video { width: 260px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; transform: scaleX(-1); background: #000 }
.cp-photo { position: relative }
.cp-av-btn { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); border: 0; border-radius: 99px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 600; padding: 3px 10px; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 10px rgb(21 15 36 / .25) }
.cp-av-btn:hover { background: var(--pink) }
@media (max-width: 720px) { .avs { grid-template-columns: 1fr } .avs-g { position: static } }

/* ---------- toucher next-gen : entrées en cascade, ondes, reflets, verre */
#page.entre > * { animation: cascade .42s cubic-bezier(.2, .8, .2, 1) both }
#page.entre > *:nth-child(2) { animation-delay: .04s } #page.entre > *:nth-child(3) { animation-delay: .08s } #page.entre > *:nth-child(4) { animation-delay: .12s }
#page.entre > *:nth-child(5) { animation-delay: .16s } #page.entre > *:nth-child(n+6) { animation-delay: .2s }
@keyframes cascade { from { opacity: 0; transform: translateY(10px) } }
.mc-g > *, .avs-ps > *, .ann-camps > * { animation: cascade .38s cubic-bezier(.2, .8, .2, 1) both }
.mc-g > *:nth-child(2), .avs-ps > *:nth-child(2) { animation-delay: .03s } .mc-g > *:nth-child(3), .avs-ps > *:nth-child(3) { animation-delay: .06s }
.mc-g > *:nth-child(4), .avs-ps > *:nth-child(4) { animation-delay: .09s } .mc-g > *:nth-child(5), .avs-ps > *:nth-child(5) { animation-delay: .12s }
.mc-g > *:nth-child(n+6), .avs-ps > *:nth-child(n+6) { animation-delay: .15s }
.btn, .seg button, .avs-c, .chip-f { position: relative; overflow: hidden }
.onde { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); animation: onde .6s ease-out forwards; pointer-events: none }
@keyframes onde { to { transform: scale(1); opacity: 0 } }
.mc, .ann-c, .kpi, .ms-c { background-image: radial-gradient(220px circle at var(--mx, -300px) var(--my, -300px), rgb(106 79 214 / .07), transparent 70%) }
.topbar { background-color: rgb(255 255 255 / .82); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px) }
.btn.primary { background-image: linear-gradient(180deg, rgb(255 255 255 / .1), transparent 55%) }
.btn.primary:hover:not(:disabled) { box-shadow: 0 6px 16px rgb(27 13 53 / .22) }
.nav a { transition: background .18s, color .18s, box-shadow .25s cubic-bezier(.2, .8, .2, 1), padding-left .18s }
.nav a:hover:not(.on) { padding-left: 13px }
.nav a svg { transition: transform .2s cubic-bezier(.2, .9, .3, 1.4) } .nav a:hover svg { transform: scale(1.12) }
.backdrop { animation: fade .18s ease-out; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px) }
.drawer { animation: slide .26s cubic-bezier(.2, .8, .2, 1) }
.palette { animation: modal-in .16s cubic-bezier(.2, .8, .2, 1) }
.tabs button.on { transition: color .15s, border-color .25s cubic-bezier(.2, .8, .2, 1) }
.seg button { transition: background .18s, color .18s, box-shadow .18s }
.pill { transition: background .2s, color .2s }
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent }
::-webkit-scrollbar { width: 10px; height: 10px } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted) }
.in:focus, .in:focus-visible { border-color: #6a4fd6; box-shadow: 0 0 0 3px rgb(106 79 214 / .15); outline: none; transition: box-shadow .15s, border-color .15s }
.toast { position: relative; overflow: hidden }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--brand-grad); transform-origin: left; animation: toast-temps 3.2s linear forwards }
.toast.err::after { animation-duration: 6s; background: var(--bad) }
@keyframes toast-temps { from { transform: scaleX(1) } to { transform: scaleX(0) } }
@media (prefers-reduced-motion: reduce) { #page.entre > *, .mc-g > *, .avs-ps > * { animation: none } }

/* ---------- pilote automatique (tableau de bord) */
.auto { background: linear-gradient(120deg, #1b0d35, #2d1a52 60%, #3b1f5e); color: #fff; border-radius: 14px; padding: 14px 16px; display: grid; gap: 12px; margin-bottom: 14px; position: relative; overflow: hidden }
.auto::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgb(69 215 212 / .25), transparent 70%); pointer-events: none }
.auto-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .auto-h .muted { color: #b9b0cf; font-size: 13px }
.auto-pt { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgb(69 215 212 / .6); animation: auto-pt 2s infinite }
@keyframes auto-pt { 70% { box-shadow: 0 0 0 9px rgb(69 215 212 / 0) } 100% { box-shadow: 0 0 0 0 rgb(69 215 212 / 0) } }
.auto-g { margin-left: auto; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .15); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; font-weight: 600 }
.auto-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; position: relative; z-index: 1 }
.auto-i { display: grid; gap: 1px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); border-radius: 10px; padding: 10px 12px; color: #fff; text-decoration: none; transition: background .15s, transform .15s }
.auto-i[href]:hover { background: rgb(255 255 255 / .12); transform: translateY(-2px) }
.auto-i b { font-size: 24px; line-height: 1.1; letter-spacing: -.02em } .auto-i span { font-size: 13px } .auto-i small { color: #b9b0cf; font-size: 11.5px }
.mq.xs { --t: 16px; border-radius: 4px } .mq.xs img { padding: 1px }

/* ================================================================ tableau de bord (refonte) : tout l'essentiel sans défiler */
.dk-tete { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px }
.dk-tete h1 { margin: 0; font-size: 24px; letter-spacing: -.02em } .dk-tete .lede { margin: 2px 0 0; font-size: 13.5px }
.dk-tete .lede::first-letter { text-transform: uppercase }
.dk-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 0 auto }
.dk-filt { position: relative } .dk-filt > summary { list-style: none; display: inline-flex; gap: 6px; align-items: center } .dk-filt > summary::-webkit-details-marker { display: none }
.dk-filt > summary .n { background: var(--pink); color: #fff; border-radius: 99px; font-size: 11px; padding: 0 6px }
.dk-fp { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; display: grid; gap: 8px; width: 260px; animation: modal-in .16s ease-out }
.dk-fp select { width: 100% }
.auto { padding: 9px 14px; gap: 8px; margin-bottom: 12px; border-radius: 12px }
.auto-l { grid-template-columns: repeat(auto-fit, minmax(130px, max-content)); gap: 8px }
.auto-i { grid-template-columns: auto 1fr; align-items: baseline; gap: 0 6px; padding: 5px 10px } .auto-i b { font-size: 17px } .auto-i small { grid-column: 1 / -1; display: none }
.auto { grid-template-columns: auto 1fr; align-items: center } .auto-h .muted { display: none } .auto-h { gap: 8px; white-space: nowrap } .auto-g { margin-left: 8px }
.dk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px }
.dk-k { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: grid; gap: 1px; text-decoration: none; color: inherit; position: relative; transition: border-color .15s, transform .15s, box-shadow .15s }
.dk-k:hover { border-color: var(--line2); transform: translateY(-1px); box-shadow: 0 6px 16px rgb(21 15 36 / .07) }
.dk-k > span { font-size: 12.5px; color: var(--muted) } .dk-k > b { font: 650 24px/1.15 var(--f-head); letter-spacing: -.02em } .dk-k small { font-size: 12px; color: var(--muted) }
.dk-k::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--line2) }
.dk-k.pv::before { background: #6a4fd6 } .dk-k.bil::before { background: var(--warn) } .dk-k.bad::before { background: var(--bad) } .dk-k.bad > b { color: var(--bad) }
.dk-bar { display: block; height: 4px; background: var(--surface2); border-radius: 99px; overflow: hidden; margin: 3px 0 2px } .dk-bar em { display: block; height: 100%; border-radius: 99px; background: var(--line2) }
.dk-bar em.ok { background: var(--ok) } .dk-bar em.moy { background: #e3a13a } .dk-bar em.ko { background: var(--bad) }
.dk-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 12px; align-items: stretch; margin-bottom: 16px }
.dk-main.seul { grid-template-columns: minmax(0, 1fr) }
.dk-ag { padding: 12px 14px } .dk-af { padding: 12px 14px; align-content: start; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 290px); min-height: 420px }
.dk-af .ph h2 { font-size: 15px } .dk-bd { margin-left: auto; font-size: 11.5px; color: var(--ok); display: inline-flex; gap: 4px; align-items: center; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dk-liste { overflow: auto; margin: 0 -6px; padding: 0 6px; display: grid; align-content: start; gap: 2px }
.dk-gt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 10px 0 4px; display: flex; gap: 6px } .dk-gt:first-child { margin-top: 2px }
.dk-gt span { color: var(--ink2) } .dk-gt.bad, .dk-gt.bad span { color: var(--bad) }
.dk-it { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .12s }
.dk-it:hover { background: var(--surface2) } .dk-it:hover .dk-go { transform: translateX(2px); color: var(--ink) }
.dk-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface2); color: var(--muted) } .dk-ic svg { width: 16px; height: 16px }
.dk-it.bad .dk-ic { background: var(--bad-soft); color: var(--bad) } .dk-it.bil .dk-ic { background: var(--surface2); color: #6a4fd6 } .dk-it.pv .dk-ic { background: #eeebfb; color: #4b36b8 }
.dk-it.warn .dk-ic { background: var(--warn-soft); color: var(--warn) } .dk-it.deb .dk-ic { background: #e3f6f5; color: #1f9e9a }
.dk-tx { display: grid; min-width: 0 } .dk-tx b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .dk-tx small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dk-it.bad .dk-tx small { color: var(--bad) } .dk-go { color: var(--line2); font-size: 18px; transition: transform .15s, color .15s }
.dk-vide { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 40px 10px; color: var(--muted) } .dk-vide svg { width: 28px; height: 28px; color: var(--ok) } .dk-vide b { color: var(--ink) }
.dk-sep { margin-top: 26px } #mes-camps .mcs { margin-bottom: 4px }
@media (max-width: 1100px) { .dk-main { grid-template-columns: minmax(0, 1fr) } .dk-af { max-height: none; min-height: 0 } }

/* ---------- agenda */
.ag { display: grid; gap: 10px }
.ag-b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .ag-nav { display: flex; gap: 4px } .ag-t { font-size: 15px; text-transform: capitalize } .ag-b .grow { flex: 1 }
.ag-leg { display: flex; gap: 10px; font-size: 11.5px; color: var(--muted) } .ag-leg span { display: inline-flex; align-items: center; gap: 4px }
.ag-leg span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c) } .ag-leg .a-ret { color: var(--bad); font-weight: 600 }
.a-deb { --c: #1f9e9a; --bg: #e3f6f5 } .a-fin { --c: #c2410c; --bg: #fdeee4 } .a-bil { --c: #6a4fd6; --bg: #f0ecfd } .a-ret { --c: var(--bad); --bg: var(--bad-soft) } .a-ant { --c: #676178; --bg: #f1eff5 }
.ag-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.ag-h { display: contents } .ag-h span { background: var(--bg2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 5px 8px }
.ag-j { background: var(--surface); padding: 6px 6px 7px; display: grid; grid-template-rows: auto 1fr; gap: 4px; min-width: 0 }
.ag-2s .ag-j { min-height: 152px } .ag-m .ag-j { min-height: 82px }
.ag-j.we { background: var(--bg2) } .ag-j.passe { background: var(--bg2) } .ag-j.passe .ag-jt b { color: var(--muted) } .ag-j.hors { opacity: .45 }
.ag-j.auj { box-shadow: inset 0 0 0 2px var(--pink); background: var(--surface) }
.ag-jt { display: flex; align-items: baseline; gap: 5px } .ag-jt b { font-size: 14px } .ag-jt small { font-size: 11px; color: var(--muted); text-transform: capitalize }
.ag-j.auj .ag-jt b { background: var(--pink); color: #fff; border-radius: 99px; padding: 0 7px }
.ag-n { margin-left: auto; font-size: 10.5px; color: var(--muted); background: var(--surface2); border-radius: 99px; padding: 0 6px; font-weight: 600 }
.ag-l { display: grid; gap: 3px; align-content: start; min-width: 0 } .ag-l.tout { position: relative; z-index: 2 }
.ag-e { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; line-height: 1.2; padding: 3px 5px; border-radius: 6px; text-decoration: none; color: var(--ink); background: var(--bg); box-shadow: inset 2px 0 0 var(--c); transition: transform .12s, filter .12s }
.ag-e:hover { transform: translateX(1px); filter: brightness(.97) } .ag-e span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500 }
.ag-e.a-ret span { color: var(--bad); font-weight: 600 } .ag-e.a-ant span { color: var(--ink2); font-style: italic }
.ag-plus { border: 0; background: none; font-size: 11px; color: var(--muted); text-align: left; padding: 1px 5px; cursor: pointer; border-radius: 5px } .ag-plus:hover { background: var(--surface2); color: var(--ink) }
.ag-m .ag-e { font-size: 11px; padding: 2px 4px } .ag-m .ag-e .mq { display: none }
@media (max-width: 760px) { .ag-g.ag-2s { grid-template-columns: repeat(2, minmax(0, 1fr)) } .ag-leg { display: none } }
/* pilote automatique : une ligne sous le bonjour */
.dk-tete #auto-fil:empty { display: none } .dk-tete #auto-fil { margin-top: 6px }
.dk-tete .auto { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; margin: 0; border-radius: 99px; flex-wrap: wrap }
.dk-tete .auto::after { display: none } .dk-tete .auto-h { font-size: 12.5px } .dk-tete .auto-pt { width: 7px; height: 7px }
.dk-tete .auto-l { display: flex; gap: 4px } .dk-tete .auto-i { display: inline-flex; gap: 5px; align-items: baseline; padding: 2px 9px; border-radius: 99px }
.dk-tete .auto-i b { font-size: 13px } .dk-tete .auto-i span { font-size: 12px } .dk-tete .auto-g { font-size: 11.5px; padding: 2px 8px; margin-left: 0 }
.dk-tete { align-items: flex-start } .dk-act { margin-top: 4px }
/* l'agenda remplit la hauteur de la colonne « À faire » */
.dk-ag { display: grid } .dk-ag > div, .dk-ag .ag { height: 100% } .ag { grid-template-rows: auto 1fr } .ag-g.ag-2s { grid-auto-rows: minmax(130px, 1fr) }
.ag { grid-template-rows: auto 1fr auto } .ag-ret { font-size: 12px; font-weight: 600; color: var(--bad); background: var(--bad-soft); border-radius: 99px; padding: 2px 9px }
.ag-leg-n i { font-style: normal; font-size: 10px; background: var(--surface2); border-radius: 99px; padding: 0 5px; font-weight: 600 } .ag-leg-n::before { display: none }
.ag-e span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word }
.ag-e { align-items: flex-start } .ag-e .mq { margin-top: 1px }
.dk-af { max-height: max(400px, calc(100vh - 400px)); min-height: 400px }
.dk-kpis { margin-top: 2px }
.ag-e span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset } .ag-e { padding: 3px 6px; letter-spacing: -.01em }
.dk-tete { margin-bottom: 8px } .dk-tete > div:first-child { display: grid; gap: 0 }

/* ---------- atelier de rattachement rétroactif */
.modal.rt-modal { width: min(1180px, 96vw); max-width: none }
.rt-g { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; min-height: 520px }
.rt-l { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0 } .rt-lh { display: flex; align-items: center; gap: 10px; font-size: 12.5px }
.rt-items { overflow: auto; max-height: 62vh; display: grid; gap: 4px; align-content: start; padding-right: 4px }
.rt-it { display: grid; grid-template-columns: auto 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background .12s }
.rt-it:hover { background: var(--surface2) } .rt-it.on { background: var(--blue-soft); border-color: #c9bff5 }
.rt-im { width: 64px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0d0718; display: grid; place-items: center; color: #fff } .rt-im img { width: 100%; height: 100%; object-fit: cover }
.rt-tx { display: grid; min-width: 0 } .rt-tx b { font-size: 13px; text-transform: capitalize } .rt-tx small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rt-d { display: grid; gap: 12px; align-content: start }
.rt-v { aspect-ratio: 16 / 9; background: #05030a; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: #fff } .rt-v video { width: 100%; height: 100% }
.rt-info { font-size: 13px } .rt-dit { margin: 4px 0 0; color: var(--ink2); font-style: italic }
.rt-c { display: grid; gap: 6px } .rt-cl { display: grid; gap: 4px; max-height: 210px; overflow: auto }
.rt-ci { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 7px 10px; cursor: pointer; transition: border-color .12s }
.rt-ci:hover { border-color: var(--line2) } .rt-ci.on { border-color: var(--pink); box-shadow: 0 0 0 2px rgb(212 42 115 / .15) }
.rt-ci > span:first-child { display: grid; flex: 1; min-width: 0 } .rt-ci small { color: var(--muted); font-size: 12px }
.rt-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end } .rt-tags i { font-style: normal; font-size: 11px; background: var(--surface2); border-radius: 99px; padding: 1px 7px }
.rt-tags i.ok { background: var(--ok-soft); color: var(--ok) } .rt-tags i.warn { background: var(--warn-soft); color: var(--warn) }
.rt-s { display: flex; align-items: center; gap: 10px; font-size: 13px } .rt-s > span { font-weight: 600 }
.rt-b { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px } .rt-b .grow { flex: 1 } #rt-resume { font-size: 13px }
@media (max-width: 900px) { .rt-g { grid-template-columns: 1fr } }

/* ================================================================ mails : galerie, studio, automatisations */
.ms-if { border: 0; width: 100%; display: block; background: var(--bg) }
.ms-if.grand { height: 100%; min-height: 520px; border-radius: 10px }
.mg-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap } .mg-tete .hint { flex: 1; min-width: 280px } .mg-tete select { width: auto; min-width: 240px }
.mg { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px }
.mg-c { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; display: grid; transition: transform .15s, box-shadow .15s, border-color .15s }
.mg-c:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(21 15 36 / .12); border-color: var(--line2) } .mg-c.off { opacity: .6 }
.mg-v { position: relative; height: 210px; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line) }
.mg-v .ms-if.mini { width: 640px; height: 640px; transform: scale(.42); transform-origin: 0 0; pointer-events: none }
.mg-voile { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgb(255 255 255 / .9)) }
.mg-t { padding: 10px 12px 12px; display: grid; gap: 4px } .mg-t b { font-size: 14px } .mg-t small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mg-b { display: flex; gap: 4px; flex-wrap: wrap } .mg-q { display: flex; gap: 5px; align-items: flex-start; font-size: 11.5px; color: var(--ink2) } .mg-q svg { width: 13px; height: 13px; color: #6a4fd6; flex: none; margin-top: 1px }
.mg-t .btn { justify-self: start; margin-top: 4px }
.mg-grand { display: grid; gap: 10px; height: 72vh; grid-template-rows: auto 1fr } .mg-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink2) }

/* studio */
.modal.st-modal { width: min(1500px, 98vw); max-width: none } .st-modal .mb { padding: 0 }
.mst { display: grid; grid-template-columns: 250px minmax(0, 1fr) 420px; height: min(78vh, 860px) }
.st-p { border-right: 1px solid var(--line); padding: 14px; overflow: auto; background: var(--bg2) } .st-p h4 { margin: 4px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted) } .st-p h4 small { text-transform: none; letter-spacing: 0; font-weight: 400 }
.st-bl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px }
.st-tile { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 11.5px; padding: 9px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: grab; user-select: none; transition: border-color .12s, transform .12s, box-shadow .12s }
.st-tile:hover { border-color: #6a4fd6; transform: translateY(-1px); box-shadow: 0 4px 12px rgb(106 79 214 / .15) } .st-tile svg { width: 18px; height: 18px; color: #6a4fd6 }
.st-vs { display: grid; gap: 10px; margin-top: 8px } .st-vg { display: flex; flex-wrap: wrap; gap: 5px } .st-vg b { width: 100%; font-size: 11.5px; color: var(--ink2) }
.st-chip, .st-v { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1.3; padding: 2px 8px; border-radius: 99px; background: #efeafd; color: #4b36b8; border: 1px solid #d9cffb; white-space: nowrap; font-weight: 500 }
.st-chip { cursor: grab; user-select: none; transition: background .12s, transform .12s } .st-chip:hover { background: #e2d9fc; transform: translateY(-1px) } .st-chip::before { content: "⠿"; opacity: .4; font-size: 10px }
.st-v { margin: 0 1px; vertical-align: baseline; cursor: default } .st-v::before { content: "{"; opacity: .35 } .st-v::after { content: "}"; opacity: .35 }
.st-c { overflow: auto; padding: 14px 22px; background: var(--bg); display: grid; align-content: start; gap: 10px }
.st-meta { display: flex; align-items: flex-end; gap: 12px } .st-meta label:first-child { display: grid; gap: 3px; font-size: 12px; color: var(--muted); flex: 1 }
.st-sujet { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px } .st-sujet > span { font-size: 12px; font-weight: 600; color: var(--muted) }
.st-ed { outline: none; min-height: 1.6em; font-size: 15px; line-height: 1.6; border-radius: 6px; padding: 2px 4px; transition: background .12s, box-shadow .12s }
.st-ed:focus { background: var(--bg2); box-shadow: 0 0 0 2px rgb(106 79 214 / .25) } .st-ed:empty::before { content: attr(data-ph); color: var(--muted) }
.st-ed1 { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden }
.st-page { background: var(--surface); border-radius: 14px; box-shadow: 0 1px 0 var(--line), 0 10px 30px rgb(21 15 36 / .06); padding: 10px 14px 6px; border-top: 4px solid; border-image: var(--brand-grad) 1; max-width: 640px; width: 100%; justify-self: center }
.st-b { position: relative; padding: 6px 8px 8px; border-radius: 10px; border: 1px dashed transparent; transition: border-color .12s, background .12s; margin-bottom: 2px }
.st-b:hover { border-color: var(--line2); background: var(--bg2) } .st-b.glisse { opacity: .4 } .st-b.avant, .st-drop.avant { box-shadow: 0 -3px 0 #6a4fd6 }
.st-bt { display: flex; align-items: center; gap: 4px; height: 18px; opacity: 0; transition: opacity .12s; font-size: 11px; color: var(--muted) } .st-b:hover .st-bt, .st-b:focus-within .st-bt { opacity: 1 }
.st-bt button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 4px; border-radius: 4px; font-size: 13px } .st-bt button:hover { background: var(--surface2); color: var(--ink) } .st-bt .grow { flex: 1 }
.st-poi { cursor: grab; font-size: 14px; padding: 0 3px }
.st-h { font-size: 21px; font-weight: 700; line-height: 1.25 } .st-li { padding-left: 18px; position: relative } .st-li::before { content: "•"; position: absolute; left: 4px; color: var(--muted) }
.st-enc { border-left: 4px solid; border-radius: 8px; padding: 6px 10px } .st-enc.c-violet { background: var(--surface2); border-color: #6a4fd6 } .st-enc.c-rose { background: var(--surface2); border-color: #d42a73 } .st-enc.c-vert { background: #e6f4ec; border-color: #1e7f4f }
.st-mini { margin-top: 6px } .st-mini button { font-size: 11px; padding: 2px 8px; text-transform: capitalize }
.st-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px } .st-k select { background: var(--bg) }
.st-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted) } .st-row label { display: flex; align-items: center; gap: 6px }
.st-btn { display: inline-flex; background: #1b0d35; border-radius: 10px; padding: 4px 10px; min-width: 160px } .st-btn .st-ed { color: #fff; font-weight: 600 } .st-btn .st-ed:focus { background: rgb(255 255 255 / .1) }
.st-fake { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); background: var(--bg); border-radius: 8px; padding: 10px 12px } .st-fake svg { color: #6a4fd6 }
.st-hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0 }
.st-drop { margin: 6px 0 4px; border: 2px dashed var(--line); border-radius: 10px; padding: 12px; text-align: center; font-size: 12px; color: var(--muted) }
.st-a { border-left: 1px solid var(--line); display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 14px; min-height: 0 }
.st-ah { display: flex; align-items: center; gap: 10px } .st-ah select { flex: 1; min-width: 0 } .st-as { font-size: 12.5px; min-height: 18px } .st-af { min-height: 0 } .st-af .ms-if { height: 100%; min-height: 0 }
@media (max-width: 1200px) { .mst { grid-template-columns: 220px minmax(0, 1fr); height: auto } .st-a { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); height: 520px } }

/* automatisations */
.au-tete { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px } .au-tete h2 { margin: 0 0 2px } .au-tete > div { flex: 1 }
.au-l { display: grid; gap: 12px }
.au-c { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s }
.au-c.on { border-color: #c9bff5; box-shadow: 0 8px 24px rgb(106 79 214 / .1) } .au-c.on::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(#45d7d4, #6a4fd6) }
.au-flux { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1.3fr); align-items: stretch }
.au-n { display: flex; gap: 8px; align-items: flex-start; border-radius: 10px; padding: 9px 11px; font-size: 13px; line-height: 1.4 } .au-n small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 1px }
.au-n em { font-style: normal; color: var(--muted); font-size: 11.5px } .au-n svg { width: 18px; height: 18px; flex: none; margin-top: 2px }
.au-n.q { background: #e3f6f5; color: #0d5f5c } .au-n.s { background: #fdf3e1; color: #7a4400; display: block } .au-n.a { background: var(--surface2); color: #3c2a9a; display: block }
.au-fl { align-self: center; height: 2px; background: var(--line2); position: relative; margin: 0 4px } .au-fl::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--line2) }
.au-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .au-pied .muted { font-size: 12.5px } .au-pied .grow { flex: 1 }
.au-sw { position: relative; width: 42px; height: 24px; cursor: pointer } .au-sw input { opacity: 0; width: 0; height: 0 }
.au-sw i { position: absolute; inset: 0; background: var(--line2); border-radius: 99px; transition: background .2s } .au-sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s cubic-bezier(.2,.9,.3,1.3) }
.au-sw input:checked + i { background: #6a4fd6 } .au-sw input:checked + i::after { transform: translateX(18px) }
.au-vide { display: grid; gap: 4px; text-align: center; padding: 28px; border: 2px dashed var(--line); border-radius: 14px; color: var(--muted) } .au-vide b { color: var(--ink) }
.au-h { margin: 24px 0 10px; font-size: 15px }
.au-r { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.au-rc { text-align: left; display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s }
.au-rc:hover:not(:disabled) { transform: translateY(-2px); border-color: #6a4fd6; box-shadow: 0 8px 20px rgb(106 79 214 / .12) } .au-rc b { font-size: 13.5px } .au-rc small { font-size: 12px; color: var(--muted) } .au-ra { color: #4b36b8 !important }
.au-ri { width: 32px; height: 32px; border-radius: 9px; background: var(--surface2); color: #6a4fd6; display: grid; place-items: center } .au-ri svg { width: 17px; height: 17px }
.au-sim { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px } .au-sim ul { margin: 4px 0 0; padding-left: 16px; color: var(--ink2) }
.modal.ae-modal { width: min(920px, 96vw); max-width: none }
.ae { display: grid; gap: 4px; position: relative } .ae-s { display: grid; gap: 10px; padding: 12px 0 16px 38px; position: relative; border-left: 2px solid var(--line); margin-left: 13px }
.ae-s:last-child { border-left-color: transparent }
.ae-h { display: flex; align-items: center; gap: 8px; margin-left: -53px } .ae-h b { font-size: 15px } .ae-h small { color: var(--muted) }
.ae-pt { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--surface2); color: var(--ink2); box-shadow: 0 0 0 4px var(--surface) }
.ae-pt.q { background: #1f9e9a; color: #fff } .ae-pt.s { background: #e3a13a; color: #fff } .ae-pt.a { background: #6a4fd6; color: #fff }
.ae-q { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px }
.ae-t { display: flex; gap: 8px; align-items: center; text-align: left; font-size: 12.5px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: border-color .12s, background .12s }
.ae-t svg { width: 16px; height: 16px; color: #1f9e9a; flex: none } .ae-t:hover { border-color: var(--line2) } .ae-t.on { border-color: #1f9e9a; background: #e3f6f5; font-weight: 600 }
.ae-c { display: flex; gap: 6px; align-items: center } .ae-c em { font-style: normal; font-size: 12px; color: var(--muted); width: 18px } .ae-c select, .ae-c input { width: auto; flex: 1 } .ae-tj { margin: 0; font-size: 13px }
.ae-a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; background: var(--bg2); border: 1px solid #e7e1fb; border-radius: 12px; padding: 10px; margin-bottom: 6px }
.ae-ai { width: 24px; height: 24px; border-radius: 50%; background: #6a4fd6; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700 }
.ae-ab { display: grid; gap: 8px } .ae-l { display: flex; gap: 10px; flex-wrap: wrap } .ae-l label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted) } .ae-l select { width: auto }
.ae-txt { display: grid; gap: 4px } .ae-vr { display: flex; flex-wrap: wrap; gap: 4px } .ae-vr button { border: 1px solid #d9cffb; background: #efeafd; color: #4b36b8; border-radius: 99px; font-size: 11px; padding: 1px 8px; cursor: pointer }
.ae-adda { display: flex; flex-wrap: wrap; gap: 6px } .ae-fin { display: flex; gap: 8px } .ae-fin .in { flex: 1 }
@media (max-width: 860px) { .au-flux { grid-template-columns: 1fr } .au-fl { display: none } }
.mst > * { height: min(78vh, 860px); min-height: 0 } .st-a { overflow: hidden } .st-af { position: relative } .st-af .ms-if { position: absolute; inset: 0; height: 100% }
.ae-ed { min-height: 54px; background: var(--surface); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 10px; font-size: 13.5px }
.rt-v { aspect-ratio: auto; height: min(36vh, 360px) } .rt-cl { max-height: 170px } .rt-g { min-height: 0 } .rt-items { max-height: 58vh }
.rt-b { position: sticky; bottom: -1px; background: var(--surface); padding-bottom: 2px }

/* ---------- automatisations en nœuds */
.modal.fx-modal { width: min(1560px, 98vw); max-width: none } .fx-modal .mb { padding: 0 } .fx-modal .mf { gap: 8px }
.fx { display: grid; grid-template-columns: 210px minmax(0, 1fr) 330px; height: min(76vh, 820px) }
.fx-p { border-right: 1px solid var(--line); padding: 14px; overflow: auto; background: var(--bg2); display: grid; align-content: start; gap: 6px }
.fx-p h4, .fx-i h4 { margin: 2px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.fx-pi { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; cursor: grab; user-select: none; transition: transform .12s, border-color .12s, box-shadow .12s }
.fx-pi:hover { transform: translateX(2px); border-color: var(--c); box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 20%, transparent) }
.fx-pi > span { width: 24px; height: 24px; border-radius: 7px; background: var(--c); color: #fff; display: grid; place-items: center; flex: none } .fx-pi svg { width: 14px; height: 14px }
.fx-outils { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px }
.fx-c { position: relative; overflow: hidden; background-color: var(--surface2); background-image: radial-gradient(circle, #d6d1e3 1px, transparent 1.2px); cursor: grab; touch-action: none }
.fx-c.pan { cursor: grabbing }
.fx-m { position: absolute; left: 0; top: 0; transform-origin: 0 0 }
.fx-l { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none }
.fx-lien { pointer-events: auto; cursor: pointer } .fx-hit { stroke: transparent; stroke-width: 16; fill: none }
.fx-trait { fill: none; stroke-width: 2.5; stroke-dasharray: 7 6; animation: fx-flux 1.2s linear infinite; opacity: .85 } .fx-trait.tmp { stroke-dasharray: 4 4 }
.fx-lien.sel .fx-trait { stroke-width: 4; opacity: 1 } .fx-lien.actif .fx-trait { stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 4px currentColor); animation-duration: .5s }
.fx-l text { font: 700 11px var(--f-body); text-transform: uppercase; letter-spacing: .05em; paint-order: stroke; stroke: #f6f5fa; stroke-width: 4 }
@keyframes fx-flux { to { stroke-dashoffset: -26 } }
.fx-n { position: absolute; width: 236px; background: var(--surface); border-radius: 14px; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgb(21 15 36 / .08); border: 2px solid transparent; cursor: default; transition: box-shadow .15s, border-color .15s }
.fx-n.sel { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 12px 28px rgb(21 15 36 / .14) }
.fx-n.glisse { opacity: .92; box-shadow: 0 18px 40px rgb(21 15 36 / .22) } .fx-n.cible { border-color: #6a4fd6; box-shadow: 0 0 0 6px rgb(106 79 214 / .2) }
.fx-n.passe { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 0 24px color-mix(in srgb, var(--c) 35%, transparent) }
.fx-nh { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px 12px 0 0; background: color-mix(in srgb, var(--c) 12%, #fff); cursor: grab; user-select: none }
.fx-nh b { font-size: 13px; flex: 1; color: color-mix(in srgb, var(--c) 70%, #150f24) }
.fx-ni { width: 24px; height: 24px; border-radius: 7px; background: var(--c); color: #fff; display: inline-grid; place-items: center; flex: none } .fx-ni svg { width: 14px; height: 14px }
.fx-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; border-radius: 6px; padding: 0 4px; opacity: 0; transition: opacity .12s } .fx-n:hover .fx-x { opacity: 1 } .fx-x:hover { background: rgb(0 0 0 / .06) }
.fx-cpt { font-size: 11px; font-weight: 700; color: #fff; background: var(--c); border-radius: 99px; padding: 1px 7px }
.fx-nb { padding: 8px 12px 11px; font-size: 12.5px; line-height: 1.45; color: var(--ink2) } .fx-nb em { font-style: normal; color: var(--muted) } .fx-nb b { color: var(--ink) }
.fx-t { margin-top: 4px; font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden } .fx-t .st-v { font-size: 11px; padding: 0 6px }
.fx-in { position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--c) }
.fx-out { position: absolute; right: -9px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--c); cursor: crosshair; transition: transform .12s }
.fx-out:hover { transform: scale(1.3) } .fx-out.oui { top: 38%; background: #1e7f4f; box-shadow: 0 0 0 1px #1e7f4f } .fx-out.non { top: 74%; background: #c8141c; box-shadow: 0 0 0 1px #c8141c }
.fx-out span { position: absolute; left: 18px; top: -2px; font: 700 10px var(--f-body); text-transform: uppercase; color: inherit; pointer-events: none } .fx-out.oui span { color: #1e7f4f } .fx-out.non span { color: #c8141c }
.fx-i { border-left: 1px solid var(--line); padding: 14px; overflow: auto; display: grid; align-content: start; gap: 10px }
.fx-i h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink) }
.fx-q { display: grid; gap: 6px } .fx-f { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted) } .fx-f .in { width: 100% }
.fx-cd { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: var(--surface2); border: 1px solid #f3e2bf } .fx-cd .row .in { flex: 1; min-width: 0 }
.fx-conds { display: grid; gap: 6px } .fx-mode { margin-bottom: 2px }
.fx-res { position: absolute; left: 12px; right: 12px; bottom: 12px; max-height: 42%; overflow: auto; background: var(--surface); border-radius: 14px; box-shadow: 0 18px 40px rgb(21 15 36 / .2); padding: 12px 14px; animation: modal-in .2s ease-out; cursor: default }
.fx-rh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px } .fx-rh .muted { flex: 1; font-size: 12.5px }
.fx-mini { width: 100%; height: 100%; display: block }
.au-g { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: center }
.au-gv { height: 120px; border-radius: 12px; background: var(--surface2) radial-gradient(circle, #e1dcec 1px, transparent 1.2px) 0 0 / 14px 14px; padding: 8px; cursor: pointer; transition: box-shadow .15s }
.au-gv:hover { box-shadow: inset 0 0 0 2px #6a4fd6 }
.au-gt { display: grid; gap: 6px; justify-items: start } .au-gt > b { font-size: 15px } .au-gt .muted { font-size: 12.5px }
.au-chips { display: flex; flex-wrap: wrap; gap: 4px } .au-chips span { font-size: 11.5px; border-radius: 99px; padding: 2px 8px; font-weight: 500 }
.au-chips .c-s { background: #fdf3e1; color: #7a4400 } .au-chips .c-w { background: var(--surface2); color: #4a4560 } .au-chips .c-a { background: var(--surface2); color: #3c2a9a }
.au-rv { height: 90px; border-radius: 10px; background: var(--surface2); padding: 6px; margin-bottom: 4px }
@media (max-width: 1100px) { .fx { grid-template-columns: 170px minmax(0, 1fr); } .fx-i { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: 300px } .au-g { grid-template-columns: 1fr } }

/* ================================================================ RMC Radio */
.rd { display: grid; gap: 14px }
.rd-tete { position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(120deg, #150a2b, #2d1a52 55%, #4b1f4f); color: #fff; padding: 22px 24px; min-height: 120px }
.rd-vague { position: absolute; inset: auto 0 0 0; height: 70%; display: flex; align-items: flex-end; gap: 3px; padding: 0 12px; opacity: .22; pointer-events: none }
.rd-vague i { flex: 1; height: var(--h); background: linear-gradient(#45d7d4, #d42a73); border-radius: 3px 3px 0 0; transform-origin: bottom; transform: scaleY(.25) }
.rd-tete.live .rd-vague { opacity: .45 } .rd-tete.live .rd-vague i { animation: rd-v 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1) }
@keyframes rd-v { from { transform: scaleY(.15) } to { transform: scaleY(1) } }
.rd-tt { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap } .rd-tt h1 { margin: 0; font-size: 26px; color: #fff } .rd-tt p { margin: 2px 0 0; color: #c9c2db; display: flex; align-items: center; gap: 6px } .rd-tt .grow { flex: 1 }
.rd-logo { width: 54px; height: 54px; border-radius: 14px; background: var(--surface); color: #c8141c; font: 900 17px var(--f-head); display: grid; place-items: center; letter-spacing: -.02em; box-shadow: 0 6px 18px rgb(0 0 0 / .3) }
.rd-pt { width: 8px; height: 8px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 0 0 rgb(255 77 94 / .6); animation: auto-pt 1.6s infinite }
.rd-tete .btn.ghost { color: #fff; border-color: rgb(255 255 255 / .3) }
.rd-jour { display: flex; align-items: center; gap: 8px } .rd-jour .grow { flex: 1 } .rd-jour .muted { font-size: 13px }
.rd-h { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; height: 92px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 4px }
.rd-hc { position: relative; display: flex; align-items: flex-end; justify-content: center } .rd-hc small { position: absolute; bottom: -2px; font-size: 10px; color: var(--muted) }
.rd-hc .cv { position: absolute; bottom: 14px; left: 0; right: 0; background: #eeebf5; border-radius: 4px; max-height: calc(100% - 14px) }
.rd-hc .bb { position: relative; width: 60%; margin-bottom: 14px; background: linear-gradient(#d42a73, #6a4fd6); border-radius: 4px; max-height: calc(100% - 14px) }
.rd-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start }
.rd-cols h2 { font-size: 15px; margin: 0 0 10px }
.rd-c { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; margin-bottom: 10px }
.rd-c header { display: grid; grid-template-columns: 1fr auto; gap: 0 10px } .rd-c header small { grid-column: 1; color: var(--muted); font-size: 12px } .rd-c header .pill { grid-row: 1 / 3; grid-column: 2; align-self: center }
.rd-bbs { display: grid; gap: 8px } .rd-bb { display: grid; grid-template-columns: 34px minmax(0, 1fr) 180px; gap: 10px; align-items: center }
.rd-play { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface2); color: #6a4fd6; display: grid; place-items: center; cursor: pointer; transition: transform .12s, background .12s }
.rd-play:hover { transform: scale(1.08) } .rd-play.on { background: #6a4fd6; color: #fff; animation: auto-pt 1.4s infinite }
.rd-onde { width: 100%; height: 36px; display: block } .rd-bbn { font-size: 12.5px; display: grid } .rd-bbn small { color: var(--muted) }
.rd-pl { display: grid; gap: 6px; max-height: 70vh; overflow: auto }
.rd-p { display: grid; grid-template-columns: 74px minmax(0, 1fr) 40px auto; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 8px 12px; cursor: pointer; transition: border-color .12s, transform .12s }
.rd-p:hover { border-color: #6a4fd6; transform: translateX(2px) } .rd-pt2 { font-family: var(--f-mono); font-size: 13px } .rd-pn { display: grid; min-width: 0 } .rd-pn small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rd-sc { --p: 0; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(#d42a73 calc(var(--p) * 1%), #eeebf5 0); display: grid; place-items: center } .rd-sc b { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 11px }
.rd-voir { display: flex; gap: 4px; align-items: center; font-size: 12px; color: #6a4fd6; font-weight: 600 }
.rd-vide { display: grid; gap: 4px; text-align: center; padding: 26px; border: 2px dashed var(--line); border-radius: 14px; color: var(--muted) } .rd-vide b { color: var(--ink) }
.modal.rp-modal { width: min(1320px, 96vw); max-width: none }
.rpv { display: grid; gap: 14px }
.rp-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px } .rp-chiffres > div { background: var(--surface2); border-radius: 12px; padding: 10px 14px; display: grid }
.rp-chiffres b { font-size: 22px; letter-spacing: -.02em } .rp-chiffres span { font-size: 12px; color: var(--muted) }
.rp-chiffres .ok { background: var(--ok-soft) } .rp-chiffres .ok b { color: var(--ok) } .rp-chiffres .moy { background: var(--warn-soft) } .rp-chiffres .ko { background: var(--bad-soft) } .rp-chiffres .ko b { color: var(--bad) }
.rp-g { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px }
.rp-ondes, .rp-cst { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; align-content: start }
.rp-ot { display: flex; align-items: center; justify-content: space-between }
.rp-svg { width: 100%; height: 240px; background: #0e0820; border-radius: 10px }
.rp-p { animation: rp-in .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 50%; transform-box: fill-box } .rp-p.d2 { animation-delay: .25s }
@keyframes rp-in { from { opacity: 0; transform: scaleY(.1) } }
#rp-a.sup path, #rp-b.sup path { mix-blend-mode: screen; opacity: .85 }
.rp-leg { display: flex; gap: 16px; font-size: 12.5px } .rp-leg span::before { content: ""; display: inline-block; width: 22px; height: 8px; border-radius: 4px; margin-right: 6px; vertical-align: middle }
.rp-leg .a::before { background: linear-gradient(90deg, #6a4fd6, #d42a73) } .rp-leg .b::before { background: linear-gradient(90deg, #45d7d4, #1f9e9a) }
.rp-lect { display: flex; align-items: center; gap: 10px } .rp-lect audio { display: none } .rp-lect .muted { font-size: 12.5px }
.rp-cs { width: 100%; height: auto } .rp-cs text { font-size: 9.5px; fill: var(--muted) }
.rp-pt { animation: rp-pt .5s ease-out both; animation-delay: calc(var(--i) * 18ms) } @keyframes rp-pt { from { opacity: 0; r: 6 } }
@media (max-width: 1000px) { .rd-cols, .rp-g { grid-template-columns: 1fr } .rp-chiffres { grid-template-columns: 1fr 1fr } }

/* ================================================================ Digital RMC Sport */
.dg { display: grid; gap: 14px }
.dg-tete { display: flex; align-items: center; gap: 14px; border-radius: 16px; padding: 20px 22px; background: radial-gradient(120% 140% at 0% 0%, #2a0c12 0%, #0c0c10 55%, #121218 100%); color: #fff; position: relative; overflow: hidden }
.dg-tete::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(226 0 26 / .35), transparent 70%) }
.dg-l { display: flex; align-items: center; gap: 16px; flex: 1; position: relative; z-index: 1 } .dg-l h1 { margin: 0; color: #fff; font-size: 24px } .dg-l p { margin: 2px 0 0; color: #b9b5c4; max-width: 720px }
.dg-logo { display: inline-grid; place-items: center; background: #e2001a; color: #fff; border-radius: 10px; padding: 8px 10px; font: 900 15px/1 var(--f-head); letter-spacing: -.02em; line-height: .95; text-align: center } .dg-logo b { display: block; font-size: 11px; letter-spacing: .12em }
.dg-ex { position: relative; z-index: 1; background: #ffb000; color: #1b0d35; font-weight: 700; font-size: 12px; border-radius: 99px; padding: 4px 12px } .dg-ok { position: relative; z-index: 1; display: flex; gap: 6px; align-items: center; font-size: 13px; color: #b7f0c8 }
.dg-flux { display: flex; align-items: center; gap: 0 } .dg-fl { width: 26px; height: 2px; background: var(--line2); flex: none }
.dg-e { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px }
.dg-e > span { grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 9px; background: var(--surface2); display: grid; place-items: center; color: var(--muted) } .dg-e b { font-size: 13px } .dg-e small { color: var(--muted); font-size: 12px }
.dg-e.ok > span { background: var(--ok-soft); color: var(--ok) } .dg-e.warn > span { background: var(--warn-soft); color: var(--warn) }
.dg-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px } .dg-k > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: grid }
.dg-k b { font-size: 22px; letter-spacing: -.02em } .dg-k span { font-size: 12px; color: var(--muted) } .dg-kp { border-left: 4px solid var(--c) !important } .dg-kp b { color: var(--c) }
.dg-fg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px }
.dg-f { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; cursor: pointer; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s }
.dg-f::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c) } .dg-f:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(21 15 36 / .1); border-color: var(--line2) }
.dg-f.prep { opacity: .65; cursor: default; background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 10px, #faf9fc 10px, #faf9fc 20px) } .dg-f.prep:hover { transform: none; box-shadow: none }
.dg-f header { display: flex; align-items: center; gap: 8px } .dg-f header b { font-size: 15px; flex: 1 } .dg-f p { margin: 0; font-size: 12.5px; color: var(--ink2); line-height: 1.45 }
.dg-prio { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #fff; background: #e2001a; border-radius: 6px; padding: 2px 7px } .dg-prep { font-size: 11px; color: var(--muted); border: 1px dashed var(--line2); border-radius: 6px; padding: 1px 7px }
.dg-fm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .dg-pt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); border-radius: 99px; padding: 1px 9px }
.dg-pt svg { width: 12px; height: 12px } .dg-ind { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted) } .dg-ind svg { width: 13px; height: 13px }
.dg-fs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px } .dg-fs > div { display: grid; background: var(--surface2); border-radius: 8px; padding: 6px 8px } .dg-fs b { font-size: 16px } .dg-fs small { font-size: 11px; color: var(--muted) }
.dg-bar { width: 100%; height: 34px; display: block } .dg-rss { display: flex; flex-wrap: wrap; gap: 4px }
.dg-rs { font-size: 11px; font-weight: 700; color: #fff; background: var(--c); border-radius: 6px; padding: 1px 7px } .dg-vide { font-size: 12.5px; color: var(--muted); background: var(--surface2); border-radius: 8px; padding: 10px }
.dg-pg { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px }
.dg-p { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 10px; border-top: 5px solid var(--c) }
.dg-p header { display: flex; gap: 12px; align-items: center } .dg-p h3 { margin: 0; font-size: 18px } .dg-p header small { color: var(--muted) }
.dg-pl { width: 42px; height: 42px; border-radius: 12px; background: var(--c); color: #fff; font: 900 20px var(--f-head); display: grid; place-items: center }
.dg-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface2) } .dg-stack i { display: block; height: 100% }
.dg-why { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px } .dg-why b { width: 100% } .dg-why span { display: inline-flex; gap: 4px; align-items: center; background: var(--surface2); border-radius: 8px; padding: 3px 8px } .dg-why svg { width: 13px; height: 13px }
.dg-camp { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px } .dg-camp a { font-weight: 600 }
.dg-filt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px } .dg-filt select { width: auto } .dg-filt .muted { font-size: 13px }
.dg-pubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 10px }
.dg-pub { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; transition: border-color .12s }
.dg-pub:hover { border-color: var(--line2) }
.dg-v { position: relative; width: 96px; aspect-ratio: 9 / 16; max-height: 150px; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #000), #0c0c10) } .dg-v img { width: 100%; height: 100%; object-fit: cover }
.dg-vp { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / .8) } .dg-vp svg { width: 26px; height: 26px }
.dg-vr { position: absolute; left: 6px; top: 6px; font: 800 10px var(--f-body); color: #fff; background: rgb(0 0 0 / .45); border-radius: 5px; padding: 1px 5px } .dg-vd { position: absolute; right: 6px; bottom: 6px; font-size: 10px; color: #fff; background: rgb(0 0 0 / .5); border-radius: 5px; padding: 0 5px }
.dg-pb { display: grid; gap: 5px; align-content: start; min-width: 0 } .dg-pb small { color: var(--muted); font-size: 11.5px } .dg-pb > b { font-size: 13.5px; line-height: 1.35 }
.dg-pk { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ink2) } .dg-pk span { display: inline-flex; gap: 3px; align-items: center } .dg-pk svg { width: 13px; height: 13px }
.dg-ps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center } .dg-at { width: auto; max-width: 220px }
.dg-lien { position: absolute; right: 10px; top: 10px; color: var(--muted) }
.dg-cg { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px }
.dg-co { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px } .dg-co.on { border-color: #b7e3c7 } .dg-co header { display: flex; justify-content: space-between; align-items: center } .dg-co p { margin: 0; font-size: 13px }
.dg-acc { display: grid; gap: 8px } .dg-ac { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px } .dg-ac b { min-width: 150px }
.dg-vis { margin-top: 12px }
@media (max-width: 900px) { .dg-flux { flex-direction: column; align-items: stretch } .dg-fl { width: 2px; height: 12px; align-self: center } .dg-pubs { grid-template-columns: 1fr } }

/* Tableau de bord épuré : filtres en barre, calendrier avec la colonne des semaines (S46…) */
.dk-sem { color: var(--ink); font-weight: 650 }
.dk-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px }
.dk-fbar[hidden] { display: none }
.dk-fbar select { width: auto; min-width: 200px } .dk-fbar .muted { font-size: 12.5px; margin-left: auto }
.ag-g.ag-avs { grid-template-columns: 68px repeat(7, minmax(0, 1fr)) }
.ag-s { background: var(--bg2); padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center }
.ag-s b { font: 650 15px/1.1 var(--f-head); color: var(--ink); letter-spacing: -.01em } .ag-s small { font-size: 10.5px; color: var(--muted); line-height: 1.2 }
.ag-s span { margin-top: 4px; font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px }
.ag-s.on { background: color-mix(in srgb, var(--pink) 10%, var(--surface)) } .ag-s.on b { color: var(--pink) }
.ag-m .ag-h span:first-child { text-align: center }
@media (max-width: 760px) { .ag-g.ag-2s.ag-avs { grid-template-columns: repeat(2, minmax(0, 1fr)) } .ag-s { display: none } }

/* Book et grille : une ligne par offre, rangée par famille */
.bk2-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px }
.bk2-m { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted) } .bk2-m select { width: auto }
.bk2-head, .bk2-r { display: grid; grid-template-columns: 84px minmax(0, 1.6fr) 230px 130px 220px; gap: 16px; align-items: center }
.bk2-head:has(span:nth-child(6)), .bk2-r:has(.bk2-ed) { grid-template-columns: 84px minmax(0, 1.6fr) 230px 130px 220px 36px }
.bk2-head { padding: 0 14px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.bk2-g { margin-bottom: 18px } .bk2-g h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 8px; display: flex; gap: 8px; align-items: center }
.bk2-r { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--bk); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s }
.bk2-r:hover, .bk2-r:focus-visible { box-shadow: var(--shadow); transform: translateY(-1px); outline: none } .bk2-r.off { opacity: .6 }
.bk2-v { width: 84px; height: 56px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--bk) 18%, var(--bg2)); display: grid; place-items: center }
.bk2-v img { width: 100%; height: 100%; object-fit: cover } .bk2-v b { font: 700 18px var(--f-head); color: var(--bk) }
.bk2-t { display: grid; gap: 2px; min-width: 0 } .bk2-t > b { font-size: 15px } .bk2-t > small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bk2-ems { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px } .bk2-ems em { font-style: normal; font-size: 11px; background: var(--bg2); border-radius: 99px; padding: 1px 8px; color: var(--muted) }
.bk2-ems em.off { background: var(--warn-soft); color: var(--warn) } .bk2-ems em.nv { background: var(--ok-soft); color: var(--ok) }
.bk2-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px } .bk2-k span { display: grid; text-align: center } .bk2-k b { font: 650 16px var(--f-head) } .bk2-k small { font-size: 11px; color: var(--muted) }
.bk2-p { display: grid; text-align: right } .bk2-p b { font: 650 17px var(--f-head) } .bk2-p small { font-size: 11.5px; color: var(--muted) }
.bk2-d { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px } .bk2-d i { height: 26px; border-radius: 5px; background: var(--bg2); display: grid; place-items: center }
.bk2-d i span { font-size: 9.5px; font-weight: 600; color: rgba(0,0,0,.55) }
.bk2-ed2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } .bk2-ed4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px } .bk2-ed { display: grid; gap: 12px }
.bk2-ed textarea { resize: vertical } .bkx-edb { margin-top: 12px; background: rgba(255,255,255,.92) }
@media (max-width: 1200px) { .bk2-head { display: none } .bk2-r, .bk2-r:has(.bk2-ed) { grid-template-columns: 64px minmax(0, 1fr) 120px; } .bk2-k, .bk2-d { display: none } .bk2-v { width: 64px; height: 44px } }
.bk2-d i.libre span, .bk2-d i.vendu span, .bk2-d i.option span { color: #fff }
.bk2-ed input[type="color"] { height: 42px; padding: 4px; cursor: pointer }
.bkx-edb { justify-self: start; width: auto; align-self: start }
.pz-encours { background: color-mix(in srgb, var(--pink) 7%, var(--surface)); border-color: color-mix(in srgb, var(--pink) 30%, var(--line)) }
/* passation : antennes sans GRP télé (RMC Radio, digital) */
.pz.sans-grp .pz-grp, .pz.sans-grp .pz-lc:has([data-cb="cib"]), .pz.sans-grp #pz-src { display: none }
.pz-sup { flex-wrap: wrap }

/* ---------- voir l'outil comme une autre personne ; équipe */
.vc-bandeau{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2147483000;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;max-width:min(760px,calc(100vw - 24px));background:#fff4d6;border:1px solid #f0d58a;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);color:#5b4300;font-size:13px}
.vc-bandeau svg{width:16px;height:16px;flex:none}.vc-bandeau span{flex:1}
.eq-t td .pill{margin:1px 2px 1px 0}.eq-moi td{background:color-mix(in srgb,var(--accent,#2b6cb0) 4%,transparent)}
.eq-droits{margin-top:14px}.eq-droits summary{cursor:pointer;padding:12px 14px}.eq-droits th.c,.eq-droits td.c{text-align:center;width:11%}
.eq-oui{color:var(--ok,#1f8a4c)}.eq-oui svg{width:16px;height:16px}
.eq-ant div{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.pj-choix>div{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.fx-pj{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.cx-ms{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;margin:0 0 14px;border:1px solid var(--line,#e6e3ee);border-radius:12px;background:var(--soft,#faf9fc)}
.cx-ms>div{flex:1;min-width:260px}.cx-ms b svg{width:15px;height:15px;vertical-align:-2px}.cx-ms .pill{margin-left:8px}.cx-ms .hint{margin:6px 0 0}
/* conducteur : parrains avec l'état de leurs billboards */
.cg-r { grid-template-columns: 64px minmax(190px, 1fr) minmax(260px, 1.6fr) 120px }
.cg-sp { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px }
.cg-sp b { font-weight: 600; margin-right: 2px }
.cg-st { font-style: normal; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--surface); color: var(--muted); border: 1px solid var(--line2) }
.cg-st.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent } .cg-st.manque { background: var(--warn-soft); color: var(--warn); border-color: transparent }
.cg-sp.on .cg-st { background: rgba(255,255,255,.18); color: #fff; border-color: transparent }
.cg-bb { flex-direction: column; align-items: flex-end; gap: 2px } .cg-heures { font-family: var(--f-mono); font-size: 11px; color: var(--muted) }
.cg-res { font-size: 12px; font-weight: 600 } .cg-res.ok { color: var(--ok) } .cg-res.manque { color: var(--warn) } .cg-res.futur { color: var(--muted); font-weight: 500 }
.cg-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 12.5px; margin: 4px 0 6px } .cg-leg .cg-st { margin-right: 4px }
.cg-leg > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap } .cg-res { padding: 0 !important; background: none !important }
/* présentateurs détourés : fondus vers le bas, pour qu'aucun buste coupé ne flotte au-dessus du bandeau */
.bkx-pr { -webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0,0,0,.6) 70%, transparent 94%); mask-image: linear-gradient(to bottom, #000 52%, rgba(0,0,0,.6) 70%, transparent 94%) }
.bkx-ph.pack .bkx-pr, .bkx-pr[src*="pack_weekend"] { height: 125%; max-width: 54% }
/* missions d'entraînement */
.mi-intro, .mi-tete { display: flex; gap: 18px; align-items: center; margin-top: 14px }
.mi-intro h2, .mi-tete h2 { margin: 2px 0 6px } .mi-intro p { max-width: 760px }
.mi-bot { width: 86px; flex: none } .mi-bot svg { width: 86px; height: auto }
.mi-tete .ob-bar { max-width: 420px }
.mi-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; margin-top: 14px }
.mi-c { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 12px }
.mi-c.bonus { border-style: dashed } .mi-c.fini { border-color: color-mix(in srgb, var(--ok) 50%, transparent) }
.mi-c header { display: flex; gap: 12px; align-items: flex-start } .mi-c header > div { flex: 1 } .mi-c header p { margin: 4px 0 0; color: var(--muted); font-size: 13px }
.mi-c header .pill { margin-left: 8px }
.mi-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--night, #1b0d35); color: #fff; flex: none }
.mi-c.fini .mi-n { background: var(--ok) } .mi-n svg { width: 16px; height: 16px }
.mi-p { font-weight: 700; font-size: 13px; color: var(--muted) }
.mi-o { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.mi-o li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface2) }
.mi-o li.ok { opacity: .75 } .mi-o li.ok .grow { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ok) 60%, transparent) }
.mi-ck { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line2); display: grid; place-items: center; flex: none }
.mi-o li.ok .mi-ck { background: var(--ok); border-color: var(--ok); color: #fff } .mi-ck svg { width: 13px; height: 13px }
.faq-b { margin: 14px 0 10px; gap: 10px; flex-wrap: wrap }
.c-exo { display: flex; gap: 8px; align-items: center }
.mi-c { align-content: start }
/* antennes : BFMTV et RMC Radio bien distincts */
.ant { display: inline-flex; align-items: center; font: 700 10.5px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; vertical-align: middle; white-space: nowrap }
.ant.a-tv { background: #e8edff; color: #1a2db8 } .ant.a-radio { background: #ffe9e3; color: #c2290a } .ant.a-bfm_business { background: #e6f6f2; color: #0b6b55 }
.ant.a-rmc_sport { background: #fff1d6; color: #8a5300 } .ant.a-digital { background: #f1e8ff; color: #6a2bc2 }
.c-chips .ant { margin-right: 4px }
.ra-cat.ant-h { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 4px solid #1a2db8 } .ra-cat.a-radio { border-left-color: #c2290a }
.ra-cat.a-bfm_business { border-left-color: #0b6b55 } .ra-cat.a-rmc_sport { border-left-color: #8a5300 } .ra-cat.a-digital { border-left-color: #6a2bc2 }
/* annonceur : marques d'un groupe */
.mqg { --mqg-g: 130px; margin: 14px 0 }
.mqg .ph { display: flex; align-items: baseline; gap: 12px; justify-content: space-between }
.mqg-c { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 6px 0 14px }
.mqg-k { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; color: inherit }
.mqg-k .mq { grid-row: span 2 } .mqg-k b { font-size: 14px } .mqg-k small { color: var(--muted); display: block } .mqg-k .pill { grid-column: 2; justify-self: start }
.mqg-k:hover { border-color: var(--line2); background: var(--surface2) } .mqg-k.on { border-color: var(--pink); box-shadow: inset 0 0 0 1px var(--pink) }
.mqg-t { position: relative; display: grid; gap: 6px }
.mqg-r { display: grid; grid-template-columns: var(--mqg-g) 1fr; align-items: center; font-size: 12.5px }
.mqg-r > span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px }
.mqg-r > div { position: relative; height: 18px; background: repeating-linear-gradient(90deg, var(--surface2) 0, var(--surface2) calc(100% / 12 - 1px), var(--line) calc(100% / 12 - 1px), var(--line) calc(100% / 12)); border-radius: 4px }
.mqg-m > div { background: none; height: auto; display: grid; grid-template-columns: repeat(12, 1fr) } .mqg-m i { font-style: normal; font-size: 11px; color: var(--muted); text-align: center }
.mqg-b { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--mq, #6a4fd6); opacity: .9 } .mqg-b.terminee { opacity: .45 } .mqg-b:hover { opacity: 1; outline: 2px solid var(--text) }
.mqg { --mqc-0: #d42a73; --mqc-1: #6a4fd6; --mqc-2: #1f9e9a; --mqc-3: #e3a13a; --mqc-4: #2b4bff; --mqc-5: #0e7490 }
.mqg-auj { position: absolute; top: 18px; bottom: 0; width: 2px; background: var(--pink); border-radius: 2px; pointer-events: none }
.ann-cmq { display: inline-flex; gap: 4px; align-items: center } .ann-cmq .mq.xs { width: 16px; height: 16px; font-size: 7px }
.ann-cn b .ant { margin-right: 6px }
/* conducteur : par parrain */
.cpj { display: grid; gap: 4px; max-height: 640px; overflow-y: auto; margin: 6px 0 10px }
.cpj-r { display: grid; grid-template-columns: 220px 110px 1fr; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px }
.cpj-r.estompe { opacity: .4 } .cpj-n { color: inherit; text-decoration: none } .cpj-n b { display: block } .cpj-n small { color: var(--muted) }
.cpj-s { font-size: 12.5px; font-weight: 700 } .cpj-s.ok { color: var(--ok) } .cpj-s.manque { color: var(--warn) } .cpj-s.futur { color: var(--muted); font-weight: 500 }
.cpj-t { display: flex; flex-wrap: wrap; gap: 4px } .cpj-t .cg-st { font-size: 11px; padding: 2px 6px }
.ann-cmq .mq.xs { width: 18px; height: 18px; border-radius: 5px; font-size: 7.5px; letter-spacing: -.3px; overflow: hidden }
.cpj-t { display: grid; gap: 4px } .cpj-e { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px }
.cpj-e b { font-weight: 600; min-width: 210px } .cpj-io { font: 600 11px var(--f-mono); padding: 2px 6px; border-radius: 4px; background: var(--surface2); color: var(--muted) }
.cpj-io.ok { background: var(--ok-soft); color: var(--ok) } .cpj-io.manque { background: var(--warn-soft); color: var(--warn) } .cpj-d { color: var(--muted); font-size: 12px }
.bi-audio { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; color: #c2290a; background: var(--surface2) } .bi-audio svg { width: 26px; height: 26px } .bi-audio small { font-size: 10px; font-weight: 700; text-transform: uppercase }
.bw-sec { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) } .bw-sec.retard { color: var(--bad) } .bw-sec .n { font-weight: 600 }
.dl-en-cours { opacity: .55; pointer-events: none; cursor: progress }
@media (max-width: 760px) { .phead > div:first-child { flex: 0 0 auto } .mi-tete, .mi-intro { flex-wrap: wrap } .mi-tete .row { width: 100%; flex-wrap: wrap } .mi-l { grid-template-columns: 1fr } }

/* Espaces de travail BFMTV / RMC Radio : deux métiers séparés, l'espace se voit partout */
.esp-sw { display: flex; gap: 2px; padding: 3px; margin: 2px 6px 10px; background: var(--bg-2, #f1f1f5); border-radius: 9px; border: 1px solid var(--line) }
.esp-sw button, .esp-sw span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; padding: 7px 6px; border-radius: 7px; font: 600 12.5px/1 var(--f-body); color: var(--muted); cursor: pointer; white-space: nowrap }
.esp-sw button:hover { color: var(--ink) }
.esp-sw .on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08) }
.esp-sw.seul span { cursor: default }
.esp-p { width: 8px; height: 8px; border-radius: 50% } .esp-p.esp-tv { background: #1a2db8 } .esp-p.esp-radio { background: #c2290a }
body.esp-radio .topbar { box-shadow: inset 0 3px 0 #c2290a }
body.esp-radio .rail { background-image: linear-gradient(180deg, rgba(194, 41, 10, .05), transparent 160px) }
body.esp-radio .esp-sw .on { color: #c2290a }
body.esp-tv .esp-sw .on { color: #1a2db8 }


/* ---------- thème sombre (Personnaliser › Apparence) : mêmes couleurs de marque, surfaces de nuit */
[data-theme="dark"] {
  --bg: #0f0b1a; --bg2: #140f22; --surface: #1a1429; --surface2: #221b34; --raise: #241d38;
  --line: #2f2745; --line2: #3d3458; --ink: #ece8f6; --ink2: #c9c2dc; --muted: #9a92b2;
  --blue: #b9a8ff; --blue-hi: #cfc2ff; --blue-soft: #2a2244; --cyan-soft: #12302f;
  --red-soft: #3a1418; --ok: #4cc28a; --ok-soft: #12291f; --warn: #f0a640; --warn-soft: #33250f; --bad: #ff6b6b; --bad-soft: #3a1418;
  --shadow: 0 10px 30px rgb(0 0 0 / .5);
  color-scheme: dark;
}
[data-theme="dark"] a { color: var(--blue); text-decoration-color: rgb(185 168 255 / .35) }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .in { background: var(--surface2); color: var(--ink); border-color: var(--line2) }
[data-theme="dark"] .btn { background: var(--surface2); color: var(--ink); border-color: var(--line2) }
[data-theme="dark"] .btn.primary { background: #6a4fd6; border-color: #6a4fd6; color: #fff }
[data-theme="dark"] .btn.ghost { background: transparent }
[data-theme="dark"] .t th { background: var(--surface2); color: var(--ink2) }
[data-theme="dark"] .t tr:hover td { background: #201936 }
[data-theme="dark"] .pill:not(.ok):not(.warn):not(.bad):not(.info) { background: var(--surface2); color: var(--ink2) }
[data-theme="dark"] .ant.a-tv { background: #1d2550; color: #a9b6ff } [data-theme="dark"] .ant.a-radio { background: #3a1a12; color: #ff9f86 }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1a1429, #241d38, #1a1429); background-size: 200% 100% }
[data-theme="dark"] img.logo-clair { filter: invert(1) hue-rotate(180deg) }

/* ---------- logos des chaînes (fichier officiel s'il est déposé dans static/chaines, sinon pastille aux couleurs) */
.ch-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--t); height: var(--t); border-radius: calc(var(--t) * .22); background: var(--f); color: var(--c); overflow: hidden; flex: none }
.ch-logo b { font: 800 calc(var(--t) * .26)/1 var(--f-head); letter-spacing: -.02em; text-align: center }
.ch-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 8% }
.ch-logo.a-img b { display: none }

/* ---------- arrivée dans l'outil */
.acc { position: fixed; inset: 0; z-index: 950; background: radial-gradient(1200px 600px at 10% -10%, rgb(69 215 212 / .18), transparent), radial-gradient(900px 500px at 110% 110%, rgb(212 42 115 / .16), transparent), var(--bg); display: grid; place-items: center; padding: 24px; animation: acc-in .35s ease }
@keyframes acc-in { from { opacity: 0; transform: scale(.985) } }
.acc-box { width: min(1080px, 100%); height: min(720px, 100%); display: grid; grid-template-columns: 240px 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden }
.acc-rail { background: linear-gradient(180deg, #1b0d35, #090013); color: #fff; padding: 26px 20px; display: flex; flex-direction: column; gap: 28px }
.acc-marque { display: flex; align-items: center; gap: 10px } .acc-marque img { width: 34px; height: 34px; border-radius: 8px } .acc-marque b { font-size: 16px }
.acc-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.acc-rail li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: rgb(255 255 255 / .55); font-weight: 500 }
.acc-rail li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--f-body); font-style: normal; border: 1px solid rgb(255 255 255 / .25) }
.acc-rail li.cur { background: rgb(255 255 255 / .1); color: #fff } .acc-rail li.cur i { background: #fff; color: #1b0d35; border-color: #fff }
.acc-rail li.fait { color: rgb(255 255 255 / .85) } .acc-rail li.fait i { background: #45d7d4; border-color: #45d7d4; color: #090013 }
.acc-main { display: flex; flex-direction: column; min-width: 0 }
.acc-corps { flex: 1; overflow: auto; padding: 38px 44px 20px }
.acc-corps h1 { font-size: 34px; margin: 18px 0 8px; letter-spacing: -.02em } .acc-corps h2 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.01em }
.acc-lede { font-size: 17px; color: var(--ink2); max-width: 560px }
.acc-logos { display: flex; gap: 10px } .acc-plan { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 22px 0 0 }
.acc-plan li { padding: 6px 12px; border-radius: 99px; background: var(--surface2); font-size: 13px; color: var(--ink2) }
.acc-pied { display: flex; align-items: center; gap: 10px; padding: 16px 44px 22px; border-top: 1px solid var(--line) }
.acc-pied .btn.primary { padding: 10px 22px; font-size: 15px }
.acc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; max-width: 640px } .acc-form .field:first-child { grid-column: 1 / -1 }
.acc-ro { padding: 9px 12px; border-radius: 8px; background: var(--surface2); color: var(--muted) }
.acc-photo { display: flex; align-items: center; gap: 28px; margin-top: 22px }
.acc-ph { width: 148px; height: 148px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; overflow: hidden; border: 4px solid var(--surface); box-shadow: 0 0 0 2px var(--line2) }
.acc-ph img { width: 100%; height: 100%; object-fit: cover } .acc-ph span { font: 700 44px/1 var(--f-head); color: var(--muted) }
.acc-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px }
.acc-th { border: 2px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px; text-align: left; cursor: pointer; display: grid; gap: 4px; transition: border-color .15s, transform .15s }
.acc-th:hover { transform: translateY(-2px) } .acc-th.on { border-color: #6a4fd6; box-shadow: 0 0 0 3px rgb(106 79 214 / .18) }
.acc-th small { color: var(--muted) }
.acc-th-ap { height: 92px; border-radius: 9px; display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 22% 1fr; gap: 6px; padding: 8px; margin-bottom: 6px }
.acc-th-ap i { border-radius: 4px } .acc-th-ap i:first-child { grid-row: 1 / -1 }
.th-light .acc-th-ap { background: #f5f4f8 } .th-light .acc-th-ap i { background: #fff; box-shadow: 0 0 0 1px #e5e2eb } .th-light .acc-th-ap i:first-child { background: #fff }
.th-dark .acc-th-ap { background: #0f0b1a } .th-dark .acc-th-ap i { background: #1a1429; box-shadow: 0 0 0 1px #2f2745 }
.th-auto .acc-th-ap { background: linear-gradient(90deg, #f5f4f8 50%, #0f0b1a 50%) } .th-auto .acc-th-ap i { background: linear-gradient(90deg, #fff 50%, #1a1429 50%) }
.acc-ch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px }
.acc-c, .acc-camp { position: relative; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s }
.acc-c { display: grid; justify-items: center; gap: 12px; padding: 22px 12px 18px; font-size: 15px }
.acc-c:hover, .acc-camp:hover { transform: translateY(-2px) }
.acc-c.on, .acc-camp.on { border-color: #6a4fd6; box-shadow: 0 0 0 3px rgb(106 79 214 / .16) }
.acc-tick { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: #6a4fd6; color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: .15s }
.on > .acc-tick { opacity: 1; transform: none }
.acc-cf { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px } .acc-cf .in { max-width: 360px }
.acc-gr { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 14px }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px }
.acc-camp { display: flex; align-items: center; gap: 12px; padding: 12px 34px 12px 12px; text-align: left }
.acc-camp .mq.lg { width: 44px; height: 44px; flex: none }
.acc-ct { display: grid; gap: 1px; min-width: 0 } .acc-ct b { font-size: 14px } .acc-ct small { color: var(--ink2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .acc-ct em { font-style: normal; color: var(--muted); font-size: 12px }
.acc-deja { font-style: normal; font-size: 11.5px; font-weight: 600; color: #6a4fd6 } .acc-qui { font-style: normal; font-size: 11.5px; color: var(--muted) }
.acc-fini { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #45d7d4, #6a4fd6); color: #fff; display: grid; place-items: center; font-size: 34px }
.acc-recap { list-style: none; padding: 0; display: grid; gap: 10px; margin: 18px 0 }
.acc-recap li { display: flex; align-items: center; gap: 10px; font-size: 15px }
@media (max-width: 760px) {
  .acc { padding: 0 } .acc-box { grid-template-columns: 1fr; height: 100%; border-radius: 0 } .acc-rail { display: none }
  .acc-corps { padding: 24px 18px } .acc-pied { padding: 12px 18px } .acc-ch, .acc-themes { grid-template-columns: 1fr 1fr } .acc-form { grid-template-columns: 1fr }
}

[data-theme="dark"] { --night: #8b74ff }
[data-theme="dark"] .topbar { background-color: rgb(26 20 41 / .86) }
[data-theme="dark"] .rail { background: #120d1f }
[data-theme="dark"] .ag-j.passe { background: #161126 }
[data-theme="dark"] .esp-sw { background: #120d1f } [data-theme="dark"] .esp-sw .on { background: var(--surface2) }
[data-theme="dark"] .seg button.on { color: #fff }
[data-theme="dark"] .toast { background: #2d2447 }

/* ---------- doutes avant un export, double validation */
.vx { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.vx li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface2) }
.vx li i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--muted) }
.vx-important i { background: var(--bad) !important } .vx-important { background: var(--bad-soft) !important } .vx-warn i { background: var(--warn) !important }
.dv { display: grid; gap: 12px } .dv p { margin: 0 } .dv-code { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line) }
.dv-code .in { font-size: 20px; letter-spacing: .2em; max-width: 200px }
.eq-sa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px } .eq-sa > span { flex: 1 1 420px }
.ch-logo.a-img { background: #fff; box-shadow: inset 0 0 0 1px var(--line) }

/* ---------- aide : FAQ par thème */
.aide-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font: 700 16px/1 var(--f-head); text-decoration: none; border: 1px solid var(--line2) }
.faq2 { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start }
.faq2-cats { position: sticky; top: 76px; display: grid; gap: 12px }
.faq2-s { position: relative } .faq2-s svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted) } .faq2-s .in { padding-left: 34px; width: 100% }
.faq2-cats nav { display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px }
.faq2-cats nav button { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 9px 10px; border-radius: 8px; text-align: left; cursor: pointer; color: var(--ink2); font-weight: 500 }
.faq2-cats nav button span { flex: 1 } .faq2-cats nav button small { color: var(--muted); font-size: 12px }
.faq2-cats nav button:hover { background: var(--surface2) } .faq2-cats nav button.on { background: var(--blue-soft); color: var(--night); font-weight: 600 }
.faq2-ch { display: flex; gap: 6px; padding: 4px 6px; opacity: .9 }
.faq2-t { font-size: 18px; margin: 4px 0 12px }
.faq2-q { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; transition: box-shadow .15s }
.faq2-q[open] { box-shadow: var(--shadow) }
.faq2-q summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font-size: 15px }
.faq2-q summary::-webkit-details-marker { display: none }
.faq2-q summary b { flex: 1; font-weight: 600 } .faq2-q summary i { color: var(--muted); transition: transform .2s } .faq2-q[open] summary i { transform: rotate(90deg) }
.faq2-c { width: 32px; height: 32px; border-radius: 9px; background: var(--surface2); display: grid; place-items: center; color: #6a4fd6; flex: none }
.faq2-r { padding: 0 18px 16px 60px; color: var(--ink2); line-height: 1.6 }
.faq2-r ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px } .faq2-r ol li::marker { color: #6a4fd6; font-weight: 700 }
.faq2-r p { margin: 0 0 12px }
@media (max-width: 860px) { .faq2 { grid-template-columns: 1fr } .faq2-cats { position: static } .faq2-r { padding-left: 18px } }

/* ---------- TO DO programmées */
.td-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; margin-top: 14px }
.td-c { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 12px; transition: box-shadow .15s, border-color .15s }
.td-c.on { border-color: #6a4fd6; box-shadow: 0 0 0 3px rgb(106 79 214 / .1) }
.td-c header { display: flex; gap: 12px; align-items: flex-start } .td-c header > div { flex: 1; display: grid; gap: 4px } .td-c header b { font-size: 15px } .td-c header small { color: var(--muted); line-height: 1.45 }
.td-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.td-j { display: inline-flex; gap: 3px } .td-j button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line2); background: var(--surface); font-weight: 600; font-size: 12px; cursor: pointer; color: var(--ink2) }
.td-j button.on { background: #6a4fd6; border-color: #6a4fd6; color: #fff }
.td-c footer { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px }
.td-ap { margin: 0; padding-left: 18px; display: grid; gap: 4px }
.td-r .in { width: auto; flex: 0 0 auto }