/* Back-office Tritonis (ADR 0019) : coquille, composants, graphiques. Aucune ressource externe. */
:root {
  color-scheme: light;
  --plane: #f6f6f3; --surface: #fcfcfb; --surface-2: #f0efec; --line: #e2e1dc; --line-strong: #c3c2b7;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #666561; --field: #8a8984;  /* audit F (ACCESSIBILITE-06) */
  --nav: #0b1f3a; --nav-ink: #c9d3e0; --nav-ink-strong: #ffffff; --nav-hover: rgba(255,255,255,.07);
  --accent: #0b1f3a; --accent-ink: #ffffff; --gold: #c9a24a; --gold-wash: rgba(201,162,74,.16); --link: #7a5a0e;
  --good: #0ca30c; --good-ink: #006300; --good-wash: #e4f3ea; --warning: #fab219; --warning-ink: #8a6914;
  --warning-wash: #fdf3dc; --serious: #ec835a; --serious-ink: #a8481f; --serious-wash: #fdebe3;
  --critical: #d03b3b; --critical-ink: #a32020; --critical-wash: #fbe6e6; --info-wash: #e8f0fb; --info-ink: #1c5cab;
  --grid: #e1e0d9; --axis: #c3c2b7;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --s1-wash: rgba(42,120,214,.10);
  --radius: 12px; --shadow: 0 1px 2px rgba(11,11,11,.05);
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane: #0d0d0d; --surface: #1a1a19; --surface-2: #232321; --line: #2f2f2c; --line-strong: #45453f;
    --ink: #f0efec; --ink-2: #c3c2b7; --muted: #8f8e86;
    --nav: #111a27; --accent: #d9b75a; --accent-ink: #0b0b0b; --link: #d9b75a; --gold-wash: rgba(217,183,90,.14);
    --good-ink: #3fc23f; --good-wash: rgba(12,163,12,.14); --warning-ink: #fab219; --warning-wash: rgba(250,178,25,.12);
    --serious-ink: #f09a77; --serious-wash: rgba(236,131,90,.14); --critical-ink: #f07a7a; --critical-wash: rgba(208,59,59,.16);
    --info-wash: rgba(57,135,229,.14); --info-ink: #7fb0f0;
    --grid: #2c2c2a; --axis: #45453f;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --s1-wash: rgba(57,135,229,.14); --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #0d0d0d; --surface: #1a1a19; --surface-2: #232321; --line: #2f2f2c; --line-strong: #45453f;
  --ink: #f0efec; --ink-2: #c3c2b7; --muted: #8f8e86;
  --nav: #111a27; --accent: #d9b75a; --accent-ink: #0b0b0b; --link: #d9b75a; --gold-wash: rgba(217,183,90,.14);
  --good-ink: #3fc23f; --good-wash: rgba(12,163,12,.14); --warning-ink: #fab219; --warning-wash: rgba(250,178,25,.12);
  --serious-ink: #f09a77; --serious-wash: rgba(236,131,90,.14); --critical-ink: #f07a7a; --critical-wash: rgba(208,59,59,.16);
  --info-wash: rgba(57,135,229,.14); --info-ink: #7fb0f0;
  --grid: #2c2c2a; --axis: #45453f;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --s1-wash: rgba(57,135,229,.14); --shadow: none;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--plane); color: var(--ink); font: 14px/1.5 var(--sans); }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }  /* audit F : 16,5:1 en clair */

/* --- coquille ------------------------------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--nav); color: var(--nav-ink); position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 14px 10px 18px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; color: var(--nav-ink-strong); text-decoration: none; }
.brand img { background: #f5f7fa; border-radius: 50%; padding: 3px 5px; }
.brand b { font-size: 15px; letter-spacing: .01em; } .brand small { display: block; font-size: 11.5px; color: var(--nav-ink); font-weight: 400; }
.side h6 { margin: 16px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8796ab; }
.side a.nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--nav-ink);
  text-decoration: none; font-size: 13.5px; }
.side a.nav:hover { background: var(--nav-hover); color: var(--nav-ink-strong); }
.side a.nav.on { background: rgba(201,162,74,.16); color: #f1d99a; font-weight: 600; }
.side a.nav svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side a.nav .count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--gold); color: #0b0b0b; border-radius: 999px; padding: 1px 7px; }
.side .foot { margin-top: auto; padding: 14px 10px 0; font-size: 12px; color: #8796ab; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 24px;
  background: color-mix(in srgb, var(--plane) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .crumbs { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .crumbs b { color: var(--ink); font-weight: 600; }
.top .spacer { flex: 1; }
.search-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; font: inherit; font-size: 13px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.search-btn kbd, kbd { font: 11px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--ink-2); margin-left: auto; background: var(--surface-2); }
.icon-btn { font: inherit; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); cursor: pointer; }
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-btn { display: none; }
.env { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: var(--warning-wash); color: var(--warning-ink); }
.env.prod { background: var(--critical-wash); color: var(--critical-ink); }
.content { padding: 22px 24px 64px; max-width: 1360px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 18px; }
.page-head h1 { font-size: 22px; line-height: 1.25; margin: 0; font-weight: 650; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); max-width: 760px; }
.page-head .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 20; transform: translateX(-100%); transition: transform .18s ease; }
  .shell.open .side { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .menu-btn { display: inline-grid; }
  .search-btn { min-width: 0; } .search-btn span, .search-btn kbd { display: none; }
  .top { padding: 10px 16px; } .content { padding: 18px 16px 56px; }
}

/* --- composants ------------------------------------------------------------------------------------ */
h1 { font-size: 22px; margin: 0 0 6px; font-weight: 650; } h2 { font-size: 15px; margin: 26px 0 10px; font-weight: 650; }
h3 { font-size: 14px; margin: 0 0 10px; font-weight: 600; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .ink2 { color: var(--ink-2); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 12px 0; box-shadow: var(--shadow); min-width: 0; }
.card > h3:first-child, .card > .card-head:first-child { margin-top: 0; }
.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .card-head h3 { margin: 0; }
.card-head .muted { font-size: 12.5px; } .card-head a { margin-left: auto; font-size: 12.5px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.grid a.card { display: block; text-decoration: none; color: var(--ink); margin: 0; } .grid a.card:hover { border-color: var(--gold); }
.cols { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cols > * { margin: 0; } .c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; }
.c5 { grid-column: span 5; } .c4 { grid-column: span 4; }
@media (max-width: 1100px) { .c8, .c7, .c6, .c5, .c4 { grid-column: span 12; } }
.flash { background: var(--good-wash); color: var(--good-ink); border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.flash.bad { background: var(--critical-wash); color: var(--critical-ink); }
label { display: block; font-weight: 600; margin: 10px 0 4px; }
textarea, input[type=text], input[type=url], input[type=password], input[type=email], input[type=number], input[type=search], select {
  width: 100%; font: inherit; color: var(--ink); padding: 8px 10px; border: 1px solid var(--field, var(--line)); border-radius: 8px; background: var(--surface); }
textarea { min-height: 70px; resize: vertical; } textarea.code { font: 13px/1.45 var(--mono); min-height: 260px; }
button, .btn { font: 600 13.5px/1 var(--sans); background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: 8px;
  padding: 9px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
button.ghost, .btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
button:hover, .btn:hover { filter: brightness(1.08); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 760px) { .row { grid-template-columns: 1fr; } }
.orig { font-size: 12px; color: var(--muted); margin: 3px 0 0; white-space: pre-wrap; } .key { font: 12px var(--mono); color: var(--muted); }
.changed { border-left: 3px solid var(--gold); padding-left: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table-wrap { overflow-x: auto; }
.tag { display: inline-block; font: 700 11px/1 var(--sans); padding: 4px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.tag.BLOQUANT, .tag.critical { background: var(--critical-wash); color: var(--critical-ink); }
.tag.À.FAIRE, .tag.todo, .tag.warning { background: var(--warning-wash); color: var(--warning-ink); }
.tag.serious { background: var(--serious-wash); color: var(--serious-ink); }
.tag.OK, .tag.good { background: var(--good-wash); color: var(--good-ink); } .tag.info { background: var(--info-wash); color: var(--info-ink); }
.sticky { position: sticky; bottom: 0; background: var(--plane); padding: 12px 0; border-top: 1px solid var(--line); }
pre { white-space: pre-wrap; font: 12px/1.45 var(--mono); margin: 0; }
.prose h2 { font-size: 17px; } .prose p { margin: 8px 0; }

/* --- période ------------------------------------------------------------------------------------------ */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.seg a { padding: 5px 11px; border-radius: 7px; font-size: 13px; text-decoration: none; color: var(--ink-2); }
.seg a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* --- indicateurs --------------------------------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 12px; box-shadow: var(--shadow);
  display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0; }
.kpi .label { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.kpi .value-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.kpi .value { font-size: 26px; font-weight: 650; letter-spacing: -.01em; }
.delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.delta.up-good, .delta.down-good { color: var(--good-ink); } .delta.up-bad, .delta.down-bad { color: var(--critical-ink); } .delta.flat { color: var(--muted); }
.kpi .hint { color: var(--muted); font-size: 12px; margin-top: 2px; }
.kpi .spark { height: 34px; margin-top: 8px; }
.meter { margin-top: 10px; } .meter .track { height: 6px; border-radius: 999px; background: var(--gold-wash); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 999px; background: var(--gold); }
.meter .legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* --- constats et actions -------------------------------------------------------------------------------- */
.insights { display: grid; gap: 10px; }
.insight { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.insight .ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.insight.critical .ico { background: var(--critical-wash); color: var(--critical-ink); } .insight.serious .ico { background: var(--serious-wash); color: var(--serious-ink); }
.insight.warning .ico { background: var(--warning-wash); color: var(--warning-ink); } .insight.good .ico { background: var(--good-wash); color: var(--good-ink); }
.insight.info .ico { background: var(--info-wash); color: var(--info-ink); }
.insight b { display: block; font-size: 13.5px; } .insight p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }
.insight a { font-size: 12.5px; font-weight: 600; }
.actions { display: grid; gap: 2px; } .action { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.action:last-child { border-bottom: 0; } .action .n { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.action .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dot.warning { background: var(--warning); } .dot.serious { background: var(--serious); }
.dot.critical { background: var(--critical); } .dot.info { background: var(--s1); } .dot.good { background: var(--good); }
.empty { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* --- graphiques ------------------------------------------------------------------------------------------- */
.chart { position: relative; width: 100%; min-height: 220px; } .chart.tall { min-height: 280px; } .chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; } .chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--muted); font: 11px var(--sans); font-variant-numeric: tabular-nums; }
.chart .label { fill: var(--ink-2); font: 12px var(--sans); } .chart .value { fill: var(--ink); font: 600 12px var(--sans); font-variant-numeric: tabular-nums; }
.chart .cross { stroke: var(--line-strong); stroke-width: 1; }
.chart .no-data { fill: var(--muted); font: 13px var(--sans); }
.chart .hit { fill: transparent; cursor: default; } .chart .bar:hover, .chart .bar:focus { filter: brightness(1.12); outline: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin: 0 0 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }
.legend i.box { width: 10px; height: 10px; border-radius: 3px; }
.tip { position: absolute; z-index: 3; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: 12.5px; min-width: 140px; }
.tip .t { color: var(--muted); font-size: 11.5px; margin-bottom: 4px; } .tip .r { display: flex; align-items: center; gap: 8px; }
.tip .r b { font-variant-numeric: tabular-nums; } .tip .r i { width: 12px; height: 2px; border-radius: 2px; }
.chart-table { margin-top: 8px; } .chart-table summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.funnel { display: grid; gap: 8px; } .funnel .step { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 13px; }
.funnel .bar-wrap { height: 22px; } .funnel .bar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--s1); min-width: 2px; }
.funnel .rate { color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.hbars { display: grid; gap: 7px; } .hbar { display: grid; grid-template-columns: minmax(90px, 36%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.hbar .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar .track { height: 14px; position: relative; }
.hbar .seg1 { position: absolute; inset: 0 auto 0 0; background: var(--s1); border-radius: 0 4px 4px 0; }
.hbar .seg2 { position: absolute; inset: 0 auto 0 0; background: var(--s3); border-radius: 0 4px 4px 0; border-right: 2px solid var(--surface); }
.hbar .v { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }

/* --- palette de commandes ----------------------------------------------------------------------------------- */
dialog.palette { border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0,0,0,.25); margin-top: 12vh; }
dialog.palette::backdrop { background: rgba(10,14,20,.45); }
.palette input { border: 0; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; padding: 14px 16px; font-size: 15px; outline: none; }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.palette li a { display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.palette li a small { margin-left: auto; color: var(--muted); } .palette li a[aria-selected="true"] { background: var(--gold-wash); }

/* --- exploitation en direct ---------------------------------------------------------------------------------- */
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
.live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); } .live .dot.on { background: var(--good); box-shadow: 0 0 0 4px var(--good-wash); } .live .dot.err { background: var(--critical); }
.logs { font: 12px/1.5 var(--mono); max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.logs .lvl-warning { color: var(--warning-ink); } .logs .lvl-error, .logs .lvl-critical { color: var(--critical-ink); }
@media print { .side, .top { display: none; } .shell { display: block; } }
@media (forced-colors: active) { .meter .fill, .funnel .bar-fill, .hbar .seg1, .hbar .seg2 { background: CanvasText; } }

/* --- compte et connexion (phase 2) ---------------------------------------------------------------------- */
.side .foot .user { display: flex; gap: 10px; align-items: center; color: var(--nav-ink-strong); text-decoration: none; padding: 6px 0; }
.side .foot .user small { display: block; color: #8796ab; font-size: 11.5px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #0b0b0b; display: grid; place-items: center; font-weight: 700; flex: none; }
.link-btn { background: none; border: 0; padding: 4px 0; color: #c9d3e0; font: 12.5px var(--sans); text-decoration: underline; cursor: pointer; }
body.bare { min-height: 100vh; display: grid; place-items: center; }
.auth { width: min(440px, calc(100vw - 32px)); padding: 32px 0; }
.auth-brand { display: flex; gap: 10px; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); margin-bottom: 18px; }
.auth-brand small { display: block; color: var(--muted); font-size: 12px; } .auth-brand img { background: #fff; border-radius: 50%; padding: 3px 5px; }
.auth-card { padding: 26px 26px 22px; } .auth-card h1 { font-size: 21px; } .auth-card h2 { font-size: 14px; margin-top: 22px; }
.auth-foot { text-align: center; }
button.wide, .btn.wide { width: 100%; padding: 12px 14px; margin-top: 16px; text-align: center; }
.code-input { font: 600 20px/1.2 var(--mono) !important; letter-spacing: .25em; text-align: center; }
.qr { display: grid; place-items: center; margin: 12px 0; } .qr svg { width: min(240px, 100%); height: auto; aspect-ratio: 1; border-radius: 8px; background: #fff; }
code.secret { font: 13px var(--mono); word-break: break-all; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
ol.codes { columns: 2; font: 15px var(--mono); padding-left: 24px; } ol.codes li { margin: 4px 0; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 2px 4px 2px 0; } form.inline select { width: auto; }
.small-btn { padding: 6px 10px; font-size: 12.5px; } .actions-cell { white-space: nowrap; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; } label.check input { width: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; } .filters select, .filters input { width: auto; min-width: 200px; }
details.edit summary { cursor: pointer; font-size: 12.5px; color: var(--link); margin-top: 4px; }
details.edit form { display: grid; gap: 6px; margin-top: 8px; min-width: 260px; } details.edit input { padding: 6px 8px; }

/* --- bureau de courtage --------------------------------------------------------------------------------- */
.explorer-filters .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; }
.explorer-filters label { font-size: 12.5px; margin-top: 4px; } .filters .spacer { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px;
  color: var(--ink); text-decoration: none; background: var(--surface); margin: 2px 4px 2px 0; }
.chip small { color: var(--muted); font-variant-numeric: tabular-nums; } .chip:hover { border-color: var(--gold); } .chip.on { background: var(--gold-wash); border-color: var(--gold); }
.card-head.bulk { flex-wrap: wrap; } .bulk-tools { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bulk-tools select, .bulk-tools input { width: auto; min-width: 180px; padding: 6px 8px; }
td.contacts { font-size: 12.5px; line-height: 1.5; word-break: break-word; min-width: 180px; }
.score { display: inline-block; min-width: 26px; text-align: center; padding: 2px 6px; border-radius: 6px; font-weight: 700; background: var(--surface-2); }
.score.s4 { background: var(--good-wash); color: var(--good-ink); } .score.s3 { background: var(--info-wash); color: var(--info-ink); }
.score.s2 { background: var(--warning-wash); color: var(--warning-ink); }
dl.facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
dl.facts dt { color: var(--muted); font-weight: 500; } dl.facts dd { margin: 0; word-break: break-word; }
.kpis.mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 10px; } .kpis.mini .kpi { box-shadow: none; padding: 10px 12px; }
.kpis.stages { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stage-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .stage-form select { width: auto; } .stage-form input { flex: 1; min-width: 180px; padding: 6px 8px; }
.stagebar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); min-width: 120px; margin-bottom: 4px; }
.st-todo { background: var(--muted); } .st-contacted { background: var(--s1); } .st-replied { background: var(--s3); } .st-quoted { background: var(--warning); }
.st-selected { background: var(--good); } .st-dropped { background: var(--critical); }
i.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
details.edit-project summary { cursor: pointer; }
.filters input[type=checkbox] { min-width: 0; width: auto; } .filters label.check { margin: 0 6px 0 0; }
.kpis.five { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.page-head .tools .btn, .page-head .tools button { white-space: nowrap; }
table.market td.product { min-width: 260px; } td.check-cell, th.check-cell { width: 1%; min-width: 0; } table.market th { white-space: nowrap; } table.market td.actions-cell form.inline { margin: 4px 0 0; }
table.market td.actions-cell { min-width: 150px; }
.gaps .table-wrap { max-height: 560px; overflow-y: auto; }

/* --- prospection ----------------------------------------------------------------------------------------- */
pre.mail { white-space: pre-wrap; word-break: break-word; font: 13px/1.55 var(--sans); background: var(--surface-2); border-radius: 8px; padding: 12px 14px; margin: 6px 0 0; max-height: 520px; overflow: auto; }
.sequence details.step { border-top: 1px solid var(--line); padding: 10px 0; } .sequence details.step summary { cursor: pointer; }
.sequence textarea { font: 13px/1.5 var(--sans); min-height: 180px; }
article.reply.handled { opacity: .72; } .reply-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 10px; }
.reply-form { display: flex; gap: 6px; align-items: flex-start; flex: 1 1 420px; } .reply-form textarea { min-height: 60px; }
article.mail-in { border-left: 3px solid var(--good); } article.mail-out { border-left: 3px solid var(--s1); }
.seg { flex-wrap: wrap; } .card-head { flex-wrap: wrap; } form.inline button { white-space: nowrap; }

/* --- réglages par formulaire ------------------------------------------------------------------------------- */
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; }
.sf-field { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; min-width: 0; }
.sf-field label { margin: 0 0 2px; font-weight: 600; font-size: 13px; } .sf-field label code.key { font-weight: 400; font-size: 11px; margin-left: 4px; }
.sf-field label.check { font-weight: 500; }
.sf-field.changed { border-left: 3px solid var(--gold); padding-left: 10px; }
.sf-field.has-error input, .sf-field.has-error textarea { border-color: var(--critical); }
.sf-help { font-size: 12px; color: var(--ink-2); } .sf-default { font-size: 11.5px; color: var(--muted); } .sf-error { font-size: 12px; color: var(--critical-ink); font-weight: 600; }
details.sf-group { border-top: 1px solid var(--line); padding: 10px 0 4px; } details.sf-group > summary { cursor: pointer; margin-bottom: 6px; }
details.sf-group details.sf-group { margin-left: 14px; }
details.settings-group > summary { cursor: pointer; }
.tools-row { display: flex; gap: 8px; margin: 8px 0; } details.policy-family > summary { cursor: pointer; }

/* --- courriels et éditeur visuel ------------------------------------------------------------------------- */
.rich { min-height: 280px; background: var(--surface); } .rich.ql-container, .rich .ql-editor { height: auto; } .mail-form { align-self: start; } .rich .ql-editor { font: 15px/1.6 var(--sans); min-height: 260px; }
.ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; border-color: var(--line); background: var(--surface-2); } .ql-container.ql-snow { border-color: var(--line); border-radius: 0 0 8px 8px; }
.rich:not(.ready) { display: none; } textarea.rich-source { margin-top: 8px; } textarea.rich-source[hidden] { display: none; }
.rich .ql-editor p, .rich .ql-editor ul, .rich .ql-editor ol, .rich .ql-editor blockquote { margin: 0 0 .8em; } .rich .ql-editor h2, .rich .ql-editor h3 { margin: .4em 0 .5em; }
.chips.vars .chip { cursor: pointer; font-family: var(--mono); } .chips.vars .chip small { font-family: var(--sans); color: var(--critical-ink); }
iframe.mail-preview { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 8px; background: #f4f5f7; }
textarea.invalid, input.invalid { border-color: var(--critical); box-shadow: 0 0 0 2px color-mix(in srgb, var(--critical) 18%, transparent); }
.field-error { color: var(--critical-ink); font-size: 13px; margin: 4px 0 0; }
.rich.legal .ql-editor { min-height: 480px; }
[data-rich-fallback][hidden] { display: none !important; }
/* démarrage commercial (21 octobre) : feuille de route */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps .step { border-top: 1px solid var(--line); padding-top: 10px; } .steps .step:first-child { border-top: 0; padding-top: 0; }
.steps .step.done h3 { color: var(--ink-2); } .steps .step p { margin: 4px 0; font-size: 13px; }

/* --- lot L11 : confirmations, règle déclenchante, tableaux mobiles, cibles tactiles ---------------------- */
button.danger, .btn.danger { background: var(--critical); color: #fff; }
.confirm-card { max-width: 760px; } .confirm-card.danger { border-left: 4px solid var(--critical); }
.confirm-count { font-size: 15px; margin: 0 0 6px; } .confirm-count b { font-size: 28px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.confirm-effects { margin: 0 0 12px; padding-left: 20px; } .confirm-effects li { margin: 4px 0; }
.confirm-condition { background: var(--warning-wash); color: var(--warning-ink); border-radius: 8px; padding: 10px 14px; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 6px; }
.rule { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.rule b { font-weight: 600; } .rule a { white-space: nowrap; } .rule code { font: 11.5px var(--mono); color: var(--muted); }
.insight .rule { margin-top: 6px; }
.task-dict dt { font-weight: 650; margin-top: 4px; } .task-dict dd { margin: 0 0 6px; }
.flag-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.flag-state::before { content: ""; width: 30px; height: 18px; border-radius: 999px; background: var(--line-strong); box-shadow: inset -12px 0 0 2px var(--surface); }
.flag-state.on::before { background: var(--good); box-shadow: inset 12px 0 0 2px var(--surface); }
/* Défilement horizontal signalé par une ombre ; colonne clé figée sous 640 px. */
.table-wrap { -webkit-overflow-scrolling: touch;
  background: linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) right / 10px 100% no-repeat scroll; }
@media (max-width: 640px) {
  .table-wrap:not(.stack) th:first-child, .table-wrap:not(.stack) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .table-wrap:not(.stack) td:first-child { max-width: 46vw; }
  /* Cartes empilées : chaque ligne devient une carte, chaque cellule porte le nom de sa colonne. */
  .table-wrap.stack { background: none; }
  .table-wrap.stack table, .table-wrap.stack tbody, .table-wrap.stack tr, .table-wrap.stack td { display: block; width: 100%; }
  .table-wrap.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap.stack tr { border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; margin: 0 0 10px; background: var(--surface); }
  .table-wrap.stack td { border: 0; padding: 6px 0; text-align: left; }
  .table-wrap.stack td.num { text-align: left; }
  .table-wrap.stack td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .table-wrap.stack td.check-cell::before { display: none; }
}
/* Cibles tactiles d'au moins 44 px sur téléphone et tablette (WCAG 2.5.5). */
@media (max-width: 900px), (pointer: coarse) {
  button, .btn, select, input[type=text], input[type=search], input[type=email], input[type=number], input[type=url], input[type=password], input[type=time] { min-height: 44px; }
  .icon-btn, .menu-btn { width: 44px; height: 44px; } .search-btn { min-height: 44px; }
  .side a.nav { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .seg a { min-height: 44px; display: inline-flex; align-items: center; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  td input[type=checkbox] { margin: 11px; }
  .pager-line a, .rule a, td a.small, .card-head a { display: inline-block; min-height: 44px; line-height: 44px; }
  .sticky { padding: 10px 0; } .sticky button { flex: 1 1 auto; }
}

/* Lot L12 : back-office lisible à 360 px (aucun défilement horizontal de la page). */
select, input, textarea { max-width: 100%; }
.seg a .count, .seg a small { margin-left: 6px; font-weight: 600; opacity: .8; }
@media (max-width: 900px) { .search-btn { min-width: 44px; justify-content: center; flex-shrink: 0; } }
/* QA lot r : un intitulé de dossier long (liste « Ajouter au dossier ») ne fait plus déborder la page ; le
   formulaire passe à la ligne et la liste se réduit à la largeur disponible. */
.page-head .tools, .bulk-tools { min-width: 0; max-width: 100%; }
form.inline { max-width: 100%; flex-wrap: wrap; }
form.inline select { min-width: 0; max-width: 100%; flex: 0 1 auto; text-overflow: ellipsis; }
.bulk-tools select { min-width: min(180px, 100%); max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 900px), (pointer: coarse) { input[type=date] { min-height: 44px; } }
.measure-form { display: grid; grid-template-columns: 220px 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 12px; }
.log-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
@media (max-width: 640px) {
  .measure-form { grid-template-columns: minmax(0, 1fr); }
  .measure-form button { justify-self: start; }
  .log-tools { margin-left: 0; width: 100%; }
  .log-tools select { flex: 1 1 140px; }
}
/* exploitation en direct : ligne qui demande l'action d'une personne (automatismes) */
tr.warn td { background: var(--warning-wash); color: var(--warning-ink); }
/* lot mel-pilotage : blocs repliables du Pilotage (<details> natifs, sans JavaScript) */
details.fold > summary { cursor: pointer; } details.fold > summary h2 { display: inline; margin: 0; }
details.fold[open] > summary { margin-bottom: 10px; }
/* lot agents-A : file des décisions des agents, mobile d'abord (une carte, trois gros boutons, sans JS) */
.agents-switch.paused { border-color: var(--serious); background: var(--serious-wash); }
article.decision .decision-head h2 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
article.decision .decision-head p { margin: 2px 0 0; }
.decision-summary { margin: 8px 0; line-height: 1.45; }
.decision-reco { margin: 6px 0; }
.decision-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 8px 0; }
.decision-facts div { min-width: 0; } .decision-facts dt { font-size: 12px; color: var(--ink-2); } .decision-facts dd { margin: 0; font-weight: 600; }
.decision-note { background: var(--gold-wash); border-radius: 8px; padding: 8px 10px; }
form.decide textarea { width: 100%; box-sizing: border-box; margin: 4px 0 8px; }
.decide-actions { display: flex; flex-direction: column; gap: 8px; }
button.big { min-height: 48px; font-size: 1rem; width: 100%; }
@media (min-width: 720px) {
  .decision-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .decide-actions { flex-direction: row; } .decide-actions button.big { flex: 1; }
  .agents-switch button.big { width: auto; padding: 0 20px; }
}
/* lot agents-C1 : l'équipe d'agents, une carte par agent (mobile d'abord, sans JS) */
article.agent .agent-mission { margin: 6px 0; line-height: 1.45; }
meter.agent-budget { width: 100%; height: 10px; }
ul.agent-kpis, ul.agent-log { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.trend.good { color: var(--good, inherit); } .trend.bad { color: var(--serious, inherit); }

/* audit F (ACCESSIBILITE-06) : en sombre, anneau or (déjà conforme) et bordure de champ assortie */
:root[data-theme="dark"] :focus-visible { outline-color: var(--gold); }
:root[data-theme="dark"] { --field: #6a6a64; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { --field: #6a6a64; }
  :root:where(:not([data-theme="light"])) :focus-visible { outline-color: var(--gold); }
}

/* audit F (ACCESSIBILITE-08) : lien d'évitement visible au focus ; tableau défilant focalisable */
.skip-link{position:absolute;left:8px;top:-48px;z-index:1000;padding:8px 12px;background:var(--accent);color:var(--accent-ink);border-radius:6px}
.skip-link:focus{top:8px}
.table-wrap[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}