/* Mise en page : une colonne d'application sous une barre navy ; le détecteur parle en couleurs de feu tricolore, le reste reste sobre */
:root {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --ink: #0f1b3d;
  --muted: #5b6785;
  --line: #dfe3ef;
  --dashed: #c4cbe0;
  --track: #e3e7f1;
  --soft: #e8ecf5;
  --accent: #ff5a36;
  --accent-ink: #c8401f;
  --accent-soft: #fff6f3;
  --accent-ring: #ffe1d8;
  --btn-bg: #0f1b3d;
  --btn-ink: #ffffff;
  --btn-hover: #1d2b57;
  --good: #0f9f6e;
  --mid: #c98a00;
  --risk: #e2622b;
  --bad: #d23b3b;
  --good-bg: #e3f6ee;
  --mid-bg: #fdf3d8;
  --risk-bg: #fde9df;
  --bad-bg: #fbe2e2;
  --good-ink: #0b6e4d;
  --mid-ink: #7a5300;
  --risk-ink: #9a3a16;
  --bad-ink: #9b2727;
  --warn-bg: #fffbf0;
  --warn-line: #f1d08a;
  --blue-bg: #e6ecff;
  --blue-line: #b7c4f5;
  --scrim: rgba(15, 27, 61, .72);
  --shadow: rgba(15, 27, 61, .35);
  --top: #0f1b3d;
  --top-2: #1d2b57;
  --top-line: #2a3a6c;
  --top-ink: #c9cfe6;
  --paper-wrap: #e9ecf3;
  --paper: #ffffff;
  --paper-ink: #1b2236;
  --paper-head: #0f1b3d;
  --paper-mut: #5b6785;
  --paper-acc: #c8401f;
  --paper-rule: #ff5a36;
  --mark: #fff0a8;
  --mark-ink: #1b2236;
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-paper: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1022; --surface: #111a33; --surface-2: #16203d; --ink: #e7ebf7; --muted: #9ba6c6; --line: #263157; --dashed: #3a4878;
    --track: #263157; --soft: #1c2747; --accent: #ff6a48; --accent-ink: #ff9274; --accent-soft: #2a1a1a; --accent-ring: #5a2a20;
    --btn-bg: #e7ebf7; --btn-ink: #0a1022; --btn-hover: #ffffff;
    --good: #3ccf98; --mid: #e8b23a; --risk: #f08a5a; --bad: #f07272;
    --good-bg: #0f2c25; --mid-bg: #2c2410; --risk-bg: #321f12; --bad-bg: #33191e;
    --good-ink: #7fe3bd; --mid-ink: #f1cb72; --risk-ink: #f6ad86; --bad-ink: #f6a0a0;
    --warn-bg: #241f10; --warn-line: #5c4a1a; --blue-bg: #18224a; --blue-line: #33468c;
    --scrim: rgba(3, 6, 16, .78); --shadow: rgba(0, 0, 0, .6);
    --top: #060b1a; --top-2: #16214a; --top-line: #24315e; --top-ink: #c9cfe6;
    --paper-wrap: #0d1530;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1022; --surface: #111a33; --surface-2: #16203d; --ink: #e7ebf7; --muted: #9ba6c6; --line: #263157; --dashed: #3a4878;
  --track: #263157; --soft: #1c2747; --accent: #ff6a48; --accent-ink: #ff9274; --accent-soft: #2a1a1a; --accent-ring: #5a2a20;
  --btn-bg: #e7ebf7; --btn-ink: #0a1022; --btn-hover: #ffffff;
  --good: #3ccf98; --mid: #e8b23a; --risk: #f08a5a; --bad: #f07272;
  --good-bg: #0f2c25; --mid-bg: #2c2410; --risk-bg: #321f12; --bad-bg: #33191e;
  --good-ink: #7fe3bd; --mid-ink: #f1cb72; --risk-ink: #f6ad86; --bad-ink: #f6a0a0;
  --warn-bg: #241f10; --warn-line: #5c4a1a; --blue-bg: #18224a; --blue-line: #33468c;
  --scrim: rgba(3, 6, 16, .78); --shadow: rgba(0, 0, 0, .6);
  --top: #060b1a; --top-2: #16214a; --top-line: #24315e; --top-ink: #c9cfe6;
  --paper-wrap: #0d1530;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--font-body); }
a { color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
h2 { font-size: 1.2rem; margin-bottom: .8rem; }
p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.wrap { width: min(1120px, 100%); margin: 0 auto; padding-inline: 16px; }
.muted { color: var(--muted); }

/* en-tête */
.top { background: var(--top); color: #fff; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
.top__in { display: flex; align-items: center; gap: 18px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 1.15rem var(--font-display); background: none; border: 0; padding: 0; cursor: pointer; }
.brand svg { width: 34px; height: 34px; }
.brand svg rect { fill: var(--top-2); }
.brand svg path { fill: #ff5a36; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav button { color: var(--top-ink); background: none; border: 0; padding: 8px 14px; border-radius: 999px; font-weight: 500; cursor: pointer; }
.nav button.on, .nav button:hover { background: var(--top-2); color: #fff; }
.mode { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--top-ink); border: 1px solid var(--top-line); padding: 6px 12px; border-radius: 999px; }
.mode i { width: 8px; height: 8px; border-radius: 50%; background: #8b93ad; }
.mode--on i { background: #3ddc97; box-shadow: 0 0 0 4px rgba(61, 220, 151, .2); }

.main { padding-block: 28px 40px; display: flex; flex-direction: column; gap: 28px; }
.foot { padding-block: 0 32px; color: var(--muted); font-size: .85rem; display: flex; flex-direction: column; gap: 4px; }
.flash { background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 12px 14px; border-radius: 10px; }
.flash--ok { background: var(--good-bg); border-color: var(--good); color: var(--good-ink); }
.flash--ko { background: var(--bad-bg); border-color: var(--bad); color: var(--bad-ink); }

/* boutons et champs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border-radius: 10px; border: 2px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); font: 700 .95rem var(--font-body);
  text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--soft); border-color: var(--ink); }
.btn--big { min-height: 56px; font-size: 1.05rem; width: 100%; background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--big:hover:not(:disabled) { background: #c8401f; border-color: #c8401f; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: #c8401f; border-color: #c8401f; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: .88rem; }
.paper-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: .8rem; }
.paper-head h2 { margin: 0; }
.paper-dl { display: flex; gap: 8px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent-ink); text-decoration: underline; cursor: pointer; font: inherit; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: .9rem; min-width: 0; }
.field input, .field select { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit;
  font-weight: 400; background: var(--surface); color: var(--ink); width: 100%; }
.switch { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.switch input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.switch small { display: block; color: var(--muted); font-size: .82rem; }

/* accueil */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 14px; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 34em; }
.drop { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex;
  flex-direction: column; gap: 14px; box-shadow: 0 18px 40px -24px var(--shadow); }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop__zone { border: 2px dashed var(--dashed); border-radius: 12px; padding: 30px 16px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.drop__zone svg { width: 46px; height: 46px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.drop__zone strong { font-size: 1rem; overflow-wrap: anywhere; }
.drop__zone span { color: var(--muted); font-size: .88rem; }
.drop.is-over .drop__zone, .drop__zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.drop.has-file .drop__zone { border-style: solid; border-color: var(--good); background: var(--good-bg); }
.drop input[type=file]:focus-visible + .drop__zone { outline: 3px solid var(--accent); outline-offset: 2px; }
.drop__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }

.agents h2 { margin-bottom: 14px; }
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: s; }
.chain li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex;
  flex-direction: column; gap: 6px; counter-increment: s; min-width: 0; }
.chain li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink);
  display: grid; place-items: center; font: 700 .8rem var(--font-display); }
.chain b { font-family: var(--font-display); }
.chain span { color: var(--muted); font-size: .88rem; }
.chain--ia { border-color: var(--accent); }
.chain--ia::before { background: var(--accent) !important; color: #fff !important; }
.chain b i { font: 700 .68rem var(--font-body); font-style: normal; letter-spacing: .06em; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px; }

/* audit IA */
.audit { display: flex; flex-direction: column; gap: 14px; }
.audit h2 { margin: 0; }
.audit > .muted { margin: 0; }
.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tally__i { border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.tally__i b { font: 800 1.7rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tally__i span { font-size: .85rem; }
.tally--ok { background: var(--good-bg); color: var(--good-ink); }
.tally--warn { background: var(--mid-bg); color: var(--mid-ink); }
.tally--ko { background: var(--bad-bg); color: var(--bad-ink); }
.verif { font-size: .9rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; }
.defauts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.df { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.df p { overflow-wrap: anywhere; }
.df__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { font: 700 .72rem var(--font-body); letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.pill--grave { background: var(--bad-bg); color: var(--bad-ink); }
.pill--moyen { background: var(--risk-bg); color: var(--risk-ink); }
.pill--mineur { background: var(--soft); color: var(--muted); }
.tag { font-size: .78rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }
.st { margin-left: auto; font-size: .8rem; font-weight: 700; }
.st--corrige { color: var(--good-ink); }
.st--a_completer { color: var(--mid-ink); }
.st--reste { color: var(--bad-ink); }
.df__quote { font-family: var(--font-paper); color: var(--ink); background: var(--surface-2); border-radius: 6px; padding: 4px 8px; font-size: .9rem; }
.df__fix { color: var(--good-ink); font-size: .9rem; }
.df__fix::before { content: "Correction : "; font-weight: 700; }
.more summary { cursor: pointer; font-weight: 700; color: var(--accent-ink); padding: 10px 0; }
.photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.photo-row small { color: var(--muted); flex-basis: 100%; }
.photo-add { cursor: pointer; font-weight: 700; color: var(--accent-ink); text-decoration: underline; }
.photo-add span { font-weight: 400; color: var(--muted); text-decoration: none; }
.photo-thumb { width: 45px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.p-photo { float: right; width: 76px; height: 101px; object-fit: cover; margin: 0 0 8px 14px; border-radius: 2px; }
.paper h4 { clear: both; }
.offre { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
.offre[open] { padding-bottom: 14px; }
.offre summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style-position: inside; }
.offre summary span { font-weight: 400; color: var(--muted); }
.offre textarea { min-height: 110px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 400;
  background: var(--surface); color: var(--ink); width: 100%; resize: vertical; }
.offre .field > span { font-weight: 400; color: var(--muted); }
.offre-res { display: flex; flex-direction: column; gap: 12px; }
.offre-res h2, .offre-res > .muted { margin: 0; }
.lbl { font-weight: 700; font-size: .9rem; }
.chips.chips--ok li { border: 1px solid var(--good); color: var(--good-ink); background: var(--good-bg); cursor: default; }
.dfc { display: block; color: var(--muted); font-size: .8rem; margin-top: 6px; }

.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rows li + li { border-top: 1px solid var(--line); }
.rows button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; color: inherit;
  background: none; border: 0; text-align: left; cursor: pointer; }
.rows button:hover { background: var(--surface-2); }
.who { display: flex; flex-direction: column; min-width: 0; }
.who b { overflow-wrap: anywhere; }
.who small { color: var(--muted); }
.delta { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; flex: none; }
.delta i { color: var(--muted); font-style: normal; }
.sc { font: 700 .95rem var(--font-display); font-style: normal; padding: 3px 9px; border-radius: 8px; }
.sc--bon { background: var(--good-bg); color: var(--good-ink); }
.sc--moyen { background: var(--mid-bg); color: var(--mid-ink); }
.sc--risque { background: var(--risk-bg); color: var(--risk-ink); }
.sc--faible { background: var(--bad-bg); color: var(--bad-ink); }

/* écran d'attente */
.busy { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 50; padding: 16px; }
.busy__card { background: var(--surface); border-radius: 18px; padding: 24px; width: min(460px, 100%); display: flex; flex-direction: column; gap: 14px; }
.busy__title { font: 700 1.2rem var(--font-display); }
.busy__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.busy__steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.busy__steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dashed); flex: none; }
.busy__steps li.on { color: var(--ink); font-weight: 600; }
.busy__steps li.on::before { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.busy__steps li.done { color: var(--ink); }
.busy__steps li.done::before { background: var(--good); border-color: var(--good); }
.busy__hint { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.busy__skip { align-self: flex-start; }
@keyframes spin { to { transform: rotate(360deg); } }

/* résultat */
.res-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.res-who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.res-who h1 { overflow-wrap: anywhere; }
.crumb { font-size: .85rem; color: var(--muted); }
.scores { display: flex; align-items: center; gap: 14px; }
.gauge { margin: 0; position: relative; width: 132px; height: 132px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 11; }
.gauge__track { stroke: var(--track); }
.gauge__bar { stroke-linecap: round; }
.gauge--bon .gauge__bar { stroke: var(--good); }
.gauge--moyen .gauge__bar { stroke: var(--mid); }
.gauge--risque .gauge__bar { stroke: var(--risk); }
.gauge--faible .gauge__bar { stroke: var(--bad); }
.gauge figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge figcaption b { font: 800 2.2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.gauge figcaption small { color: var(--muted); font-size: .75rem; }
.gauge figcaption span { font-size: .78rem; color: var(--muted); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; white-space: nowrap; font-weight: 600; }
.gauge { margin-bottom: 26px; }
.arrow { display: flex; flex-direction: column; align-items: center; margin-bottom: 26px; }
.potentiel { margin-bottom: 26px; }
.up { font: 800 1.5rem var(--font-display); color: var(--good); font-variant-numeric: tabular-nums; }
.up--neg { color: var(--bad); }
.arrow small { color: var(--muted); font-size: .75rem; }
.verdict { padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.verdict--bon { background: var(--good-bg); color: var(--good-ink); }
.verdict--moyen { background: var(--mid-bg); color: var(--mid-ink); }
.verdict--risque { background: var(--risk-bg); color: var(--risk-ink); }
.verdict--faible { background: var(--bad-bg); color: var(--bad-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; }
.panel--warn { border-color: var(--warn-line); background: var(--warn-bg); }
.panel .muted { font-size: .9rem; margin-bottom: 10px; }
.cat + .cat { margin-top: 22px; }
.cat__head { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.cat__head span { color: var(--muted); white-space: nowrap; }
.cat__head strong { color: var(--ink); }
.bar { position: relative; height: 8px; background: var(--soft); border-radius: 99px; margin: 8px 0 10px; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dashed); border-radius: 99px; }
.bar .bar__after { background: var(--good); height: 4px; top: 2px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ck { display: flex; gap: 10px; }
.ck > div { min-width: 0; }
.ck small { color: var(--muted); font-variant-numeric: tabular-nums; }
.ck p { font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.ck .tip { color: var(--ink); margin-top: 2px; }
.ck__ico { flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px; position: relative; }
.ck--ok .ck__ico { background: var(--good); }
.ck--ok .ck__ico::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 10px; border: solid var(--surface); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ck--warn .ck__ico { background: var(--mid); }
.ck--warn .ck__ico::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--surface); font: 800 .8rem var(--font-display); }
.ck--ko .ck__ico { background: var(--bad); }
.ck--ko .ck__ico::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--surface); font: 800 1rem/1 var(--font-display); }
.list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.list li { overflow-wrap: anywhere; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px dashed var(--accent); color: var(--accent-ink); padding: 5px 12px; border-radius: 999px; font-size: .9rem; cursor: help; }

.paper-wrap { background: var(--paper-wrap); }
.paper { background: var(--paper); max-width: 760px; margin: 0 auto; padding: clamp(18px, 5vw, 48px); border-radius: 6px;
  box-shadow: 0 10px 30px -18px var(--shadow); font-family: var(--font-paper); font-size: .95rem; color: var(--paper-ink); overflow-wrap: anywhere; }
.paper h3 { font: 700 1.6rem var(--font-paper); color: var(--paper-head); letter-spacing: 0; }
.p-title { color: var(--paper-acc); font-weight: 700; font-size: 1.05rem; }
.p-contact { color: var(--paper-mut); font-size: .85rem; }
.paper h4 { margin: 18px 0 6px; padding-bottom: 3px; border-bottom: 1.5px solid var(--paper-rule); color: var(--paper-head); font-size: .95rem; letter-spacing: .02em; }
.p-job { margin-top: 8px; }
.p-date { color: var(--paper-mut); font-style: italic; font-size: .85rem; }
.paper ul { margin: 4px 0; padding-left: 20px; }
mark { background: var(--mark); color: var(--mark-ink); padding: 0 3px; border-radius: 3px; }

/* cabinet */
.filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; font-size: .8rem; color: var(--muted); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.board td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.board tr:last-child td { border-bottom: 0; }
.rank { font: 800 1.1rem var(--font-display); color: var(--muted); width: 56px; font-variant-numeric: tabular-nums; }
.cand { display: flex; flex-direction: column; min-width: 180px; }
.cand button { color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
.cand button:hover { text-decoration: underline; }
.cand small { color: var(--muted); overflow-wrap: anywhere; }
.dom { color: var(--muted); font-size: .9rem; }
.note { min-width: 130px; }
.mini { display: block; height: 5px; background: var(--soft); border-radius: 9px; margin-top: 8px; overflow: hidden; }
.mini i { display: block; height: 100%; background: var(--good); }
.statut { min-height: 36px; border-radius: 8px; border: 1px solid var(--line); padding: 0 8px; font: inherit; font-size: .88rem; background: var(--surface); color: var(--ink); }
.statut--preselection { background: var(--good-bg); border-color: var(--good); }
.statut--entretien { background: var(--blue-bg); border-color: var(--blue-line); }
.statut--ecarte { background: var(--soft); color: var(--muted); }
.acts { white-space: nowrap; }
.acts__in { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.link-danger { background: none; border: 0; padding: 0; color: var(--bad); font: inherit; cursor: pointer; text-decoration: underline; }
.link-danger.armed { font-weight: 700; }
.empty { background: var(--surface); border: 1px dashed var(--dashed); border-radius: var(--r); padding: 32px 20px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--btn-bg); color: var(--btn-ink);
  padding: 10px 16px; border-radius: 10px; font-weight: 600; z-index: 60; max-width: calc(100% - 32px); }

/* téléphone */
@media (max-width: 860px) {
  .hero, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .chain { grid-template-columns: minmax(0, 1fr); }
  .tally { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .chain li { flex-direction: row; align-items: flex-start; gap: 12px; }
  .chain li::before { flex: none; }
  .chain li b { min-width: 86px; }
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filters .field:first-child { grid-column: 1 / -1; }
  .nav { margin-left: 0; order: 3; width: 100%; }
  .mode { margin-left: auto; }
}
@media (max-width: 640px) {
  .scores { width: 100%; justify-content: center; }
  .gauge { width: 112px; height: 112px; }
  .tally { grid-template-columns: minmax(0, 1fr); }
  .tally__i { flex-direction: row; align-items: baseline; gap: 10px; }
  .st { margin-left: 0; width: 100%; }
  .board thead { display: none; }
  .board, .board tbody, .board tr, .board td { display: block; width: 100%; }
  .board tr { padding: 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 10px; }
  .board td { padding: 0; border: 0; }
  .board td.cand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .board td.dom, .board td.note, .board td.suivi, .board td.acts { grid-column: 2; }
  .board td.rank { grid-row: span 5; }
  .table-wrap { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- site en ligne : offre payante */
.small { font-size: .85rem; }
.unlock { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center;
  background: var(--surface); border: 2px solid var(--accent); border-radius: var(--r); padding: 22px; box-shadow: 0 18px 40px -26px var(--shadow); }
.unlock__txt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.unlock__txt h2 { margin: 0; }
.unlock__act { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
.unlock__act .linkbtn { align-self: center; }
.unlock__prix { font: 800 2.4rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.unlock__prix small { font: 700 1rem var(--font-body); color: var(--muted); }
.potentiel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 132px; height: 132px;
  border-radius: 50%; border: 3px dashed var(--good); color: var(--good-ink); text-align: center; padding: 10px; }
.potentiel b { font: 800 2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.potentiel span { font-size: .72rem; line-height: 1.25; }
.pay { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.pay__steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.pay__steps .list { margin-top: 6px; }
.ops { border: 0; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.ops legend { font-weight: 500; font-size: .9rem; margin-bottom: 6px; padding: 0; }
.ops label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.ops input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.ops label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.inline-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.inline-form .field { flex: 1 1 220px; }
.cab-acces { display: flex; flex-direction: column; gap: 4px; }
.cab-acces h2 { margin-bottom: 4px; }
.commande { display: flex; flex-direction: column; gap: 14px; max-width: 760px; width: 100%; margin: 0 auto; }
.commande h1 { font-size: clamp(1.4rem, 4vw, 2rem); }
.commande .busy__steps { margin: 4px 0; }
.lien { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.lien input { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: .85rem;
  background: var(--surface-2); color: var(--ink); width: 100%; }
.lien .btn { align-self: flex-start; }
.offre-tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tarif { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tarif b { font: 800 1.4rem var(--font-display); font-variant-numeric: tabular-nums; }
.tarif span { color: var(--muted); font-size: .9rem; }
.tarif--on { border: 2px solid var(--accent); }

@media (max-width: 860px) {
  .unlock { grid-template-columns: minmax(0, 1fr); }
  .offre-tarifs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .potentiel { width: 112px; height: 112px; }
  .potentiel b { font-size: 1.7rem; }
  .unlock { padding: 18px; }
}

/* ---------------------------------------------------------------- version Cloudflare : formules, espace client */
.drop textarea { min-height: 76px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 400;
  background: var(--surface); color: var(--ink); width: 100%; resize: vertical; }
.drop .field small { font-weight: 400; }
.formules { flex-direction: column; text-align: left; }
.formules label { width: 100%; }
.offre-tarifs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis-client { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.filtre { max-width: 320px; }
.filtre select { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; background: var(--surface); color: var(--ink); }
@media (max-width: 860px) { .offre-tarifs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .offre-tarifs, .kpis-client { grid-template-columns: minmax(0, 1fr); } }