/* Lynx by mjkn — design system « Précision suisse ».
   Tokens repris des maquettes Claude Design (cti/design/maquettes). */

/* Polices auto-hébergées : static/fonts/ (nLPD, aucun appel à Google Fonts). */

:root {
  --bg: #FAFAF7; --surf: #FFFFFF; --surf2: #EFEEEA; --sel: #F3F2EE;
  --ink: #111111; --ink2: #4A4843; --mute: #6B6862;
  --line: #E6E4DF; --line2: #D3D0C9;
  --acc: #D52B1E; --btn: #111111; --btn-ink: #FAFAF7;
  --crit: #B3231A; --crit-bg: #FBE9E7; --crit-fill: #D52B1E; --crit-off: #D52B1E;
  --high: #A84B0C; --high-bg: #FBEDE2; --high-fill: #C2570F; --high-off: #E3CDBB;
  --med: #7F6206; --med-bg: #F5EED8; --med-fill: #B08A12; --med-off: #E0D4AE;
  --low: #3F5C7A; --low-bg: #E7EDF3; --low-fill: #4F6F91; --low-off: #C5D1DD;
  --info: #5E5B55; --info-bg: #EFEEEA; --info-fill: #D3D0C9; --info-off: #D3D0C9;
  --ok: #2F6B47; --ok-bg: #E5F0E9;
  --font: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F0F0E; --surf: #171716; --surf2: #262523; --sel: #262523;
    --ink: #EDECE8; --ink2: #BDBAB2; --mute: #9A968E;
    --line: #2A2927; --line2: #3A3936;
    --acc: #E5483B; --btn: #EDECE8; --btn-ink: #111111;
    --crit: #F0675B; --crit-bg: #3A1916; --crit-fill: #E5483B; --crit-off: #E5483B;
    --high: #E8904F; --high-bg: #38230F; --high-fill: #E8904F; --high-off: #5A4030;
    --med: #D9B44A; --med-bg: #322A10; --med-fill: #D9B44A; --med-off: #554A26;
    --low: #94AFCC; --low-bg: #1B2633; --low-fill: #94AFCC; --low-off: #34465A;
    --info: #A9A59D; --info-bg: #262523; --info-fill: #45433F; --info-off: #45433F;
    --ok: #6FBF8E; --ok-bg: #15291D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F0F0E; --surf: #171716; --surf2: #262523; --sel: #262523;
  --ink: #EDECE8; --ink2: #BDBAB2; --mute: #9A968E;
  --line: #2A2927; --line2: #3A3936;
  --acc: #E5483B; --btn: #EDECE8; --btn-ink: #111111;
  --crit: #F0675B; --crit-bg: #3A1916; --crit-fill: #E5483B; --crit-off: #E5483B;
  --high: #E8904F; --high-bg: #38230F; --high-fill: #E8904F; --high-off: #5A4030;
  --med: #D9B44A; --med-bg: #322A10; --med-fill: #D9B44A; --med-off: #554A26;
  --low: #94AFCC; --low-bg: #1B2633; --low-fill: #94AFCC; --low-off: #34465A;
  --info: #A9A59D; --info-bg: #262523; --info-fill: #45433F; --info-off: #45433F;
  --ok: #6FBF8E; --ok-bg: #15291D;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/20px var(--font); }
a { color: var(--ink); }
a:hover { color: var(--ink2); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--mute); }
.ink2 { color: var(--ink2); }
.eyebrow { font: 500 12px/16px var(--font-mono); color: var(--mute); text-transform: uppercase; }
.label { font: 600 11px/16px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; display: flex; flex-wrap: wrap; }
.shell__nav { flex: 1 1 232px; max-width: 100%; background: var(--surf); border-right: 1px solid var(--line); }
.shell__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 32px; border-bottom: 1px solid var(--line); background: var(--surf); flex-wrap: wrap; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.content { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 640px) { .content, .topbar { padding-inline: 16px; } }

.search { flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; color: var(--mute); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/1 var(--font); color: var(--ink); }
.kbd { font: 400 12px/1 var(--font-mono); border: 1px solid var(--line); padding: 3px 6px; border-radius: 2px; }

/* ---------- Navigation ---------- */
.nav { min-height: 100%; padding: 20px 16px; display: flex; flex-direction: column; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; text-decoration: none; color: var(--ink); }
.brand__word { font: 700 24px/24px var(--font-display); letter-spacing: -.06em; }
.logo-eye circle { fill: var(--acc); }
.logo-eye path { fill: var(--surf); }
.org-switch { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 4px; background: var(--surf); color: var(--ink); text-align: left; font: inherit; }
.org-switch__badge { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--surf); font: 600 11px/1 var(--font); border-radius: 2px; }
.org-switch__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__group { display: flex; flex-direction: column; gap: 2px; }
.nav__group > .label { padding: 0 10px 6px; }
.nav__link { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 4px; text-decoration: none; color: var(--ink2); font-weight: 500; }
.nav__link[aria-current="page"] { background: var(--sel); color: var(--ink); font-weight: 600; }
.nav__link--disabled { opacity: .55; pointer-events: none; }
.nav__count { margin-left: auto; font: 500 12px/1 var(--font-mono); padding: 4px 6px; border-radius: 2px; background: var(--crit-bg); color: var(--crit); }
.nav__dot { margin-left: auto; width: 8px; height: 8px; border-radius: 999px; background: var(--acc); }
.nav__foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding: 0 8px; font-size: 12px; line-height: 16px; }
.meter { height: 4px; background: var(--line); }
.meter > span { display: block; height: 4px; background: var(--ink); }
.chip-ch { font: 500 11px/1 var(--font-mono); padding: 3px 4px; border: 1px solid var(--line2); color: var(--ink); }
.user { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.avatar { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--surf2); display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font); color: var(--ink); }

/* ---------- Boutons & formulaires ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 4px; background: var(--surf); color: var(--ink); font: 600 13px/1 var(--font); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn--primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.btn--primary:hover { color: var(--btn-ink); opacity: .9; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--sm { height: 32px; padding: 0 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
.segmented { display: inline-flex; border: 1px solid var(--line2); border-radius: 4px; padding: 2px; gap: 2px; }
.segmented a, .segmented button { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: 2px; background: transparent; color: var(--ink); font: 600 13px/1 var(--font); text-decoration: none; cursor: pointer; }
.segmented [aria-pressed="true"], .segmented [aria-current="true"] { background: var(--btn); color: var(--btn-ink); }
select, input[type="text"], input[type="search"], textarea { font: 400 14px/20px var(--font); color: var(--ink); background: var(--surf); border: 1px solid var(--line2); border-radius: 2px; }
select { height: 40px; padding: 0 12px; }
textarea { width: 100%; padding: 10px 12px; resize: vertical; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-weight: 600; font-size: 13px; }

/* ---------- Badges de sévérité (4 barres, lisibles sans couleur) ---------- */
.sev { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; border-radius: 2px; font: 600 12px/1 var(--font); white-space: nowrap; }
.sev__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sev__bars i { width: 3px; }
.sev__bars i:nth-child(1) { height: 4px; } .sev__bars i:nth-child(2) { height: 7px; }
.sev__bars i:nth-child(3) { height: 10px; } .sev__bars i:nth-child(4) { height: 12px; }
.sev--crit { background: var(--crit-bg); color: var(--crit); } .sev--crit i { background: var(--crit-fill); }
.sev--high { background: var(--high-bg); color: var(--high); } .sev--high i { background: var(--high-off); } .sev--high i:nth-child(-n+3) { background: var(--high-fill); }
.sev--med { background: var(--med-bg); color: var(--med); } .sev--med i { background: var(--med-off); } .sev--med i:nth-child(-n+2) { background: var(--med-fill); }
.sev--low { background: var(--low-bg); color: var(--low); } .sev--low i { background: var(--low-off); } .sev--low i:nth-child(1) { background: var(--low-fill); }
.sev--info { background: var(--info-bg); color: var(--info); } .sev--info i { background: var(--info-off); }
.fill-crit { background: var(--crit-fill); } .fill-high { background: var(--high-fill); } .fill-med { background: var(--med-fill); }
.fill-low { background: var(--low-fill); } .fill-info { background: var(--mute); }

/* ---------- Statuts ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 2px; font: 600 12px/1 var(--font); white-space: nowrap; }
.status__dot { width: 7px; height: 7px; }
.status--new { border-color: var(--ink); } .status--new .status__dot { background: var(--ink); }
.status--in_progress .status__dot { border: 1.5px solid var(--ink); border-radius: 999px; }
.status--resolved { color: var(--ok); } .status--resolved .status__dot { background: var(--ok); border-radius: 999px; }
.status--false_positive { border-style: dashed; color: var(--ink2); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 2px; font: 600 12px/1 var(--font); }
.pill__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--error { background: var(--crit-bg); color: var(--crit); } .pill--error .pill__dot { border-radius: 0; }
.pill--pending { background: var(--surf2); color: var(--ink2); }
.tag { font: 500 12px/1 var(--font-mono); padding: 5px 6px; border: 1px solid var(--line2); border-radius: 2px; color: var(--ink2); }

/* ---------- Cartes, KPI, listes ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font: 600 32px/40px var(--font-display); letter-spacing: -.025em; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card { background: var(--surf); border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card--flush { padding: 0; gap: 0; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.card--flush .card__head { padding: 20px 24px; }
.card h2 { font: 600 18px/24px var(--font-display); letter-spacing: -.01em; }
.card__link { font-size: 13px; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.kpi { background: var(--surf); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.kpi__value { font: 600 40px/44px var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi__value small { font-size: 20px; color: var(--mute); }
.kpi__note { font-size: 13px; color: var(--ink2); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; }
.split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.split__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.split__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.rowlist > * { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--line); }
.sevbars-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 32px; gap: 16px; align-items: center; height: 44px; border-bottom: 1px solid var(--line); }
.hbar { height: 8px; background: var(--surf2); } .hbar > span { display: block; height: 100%; }
.num { text-align: right; font: 500 15px/1 var(--font-mono); }

.chart { height: 160px; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--ink); }
.chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.chart .c { background: var(--acc); } .chart .o { background: var(--ink2); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink2); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; }

.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px 32px; }
.groups > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 28px; gap: 12px; align-items: center; min-height: 32px; font: 500 13px/1 var(--font-mono); }
.groups .hbar { height: 6px; } .groups .hbar > span { background: var(--ink); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font: 600 11px/16px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 10px 12px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.table td { padding: 0 12px; height: 44px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: var(--sel); }
.table .title a { font-weight: 600; text-decoration: none; }
.table .title a:hover { text-decoration: underline; }
.table .ellip { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.density-comfy .table td { height: 56px; font-size: 14px; }
.latest a { display: grid; grid-template-columns: 112px minmax(0, 1fr) 150px 96px; gap: 16px; align-items: center; min-height: 52px; padding: 0 24px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.latest .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Liste des alertes ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; text-decoration: none; color: var(--ink2); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .count { font: 500 12px/1 var(--font-mono); color: var(--mute); }
.filters { flex: 1 1 240px; max-width: 280px; display: flex; flex-direction: column; gap: 20px; }
.filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.filters legend { padding: 0 0 8px; }
.filters .opt { display: flex; align-items: center; gap: 10px; }
.filters .opt .n { margin-left: auto; font: 500 12px/1 var(--font-mono); color: var(--mute); }
.filters select { width: 100%; }
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: var(--btn); color: var(--btn-ink); }
.bulkbar select { height: 32px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; font-size: 13px; color: var(--mute); }

/* ---------- Détail d'une alerte ---------- */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.crumbs a { color: var(--ink2); }
.detail-head { display: flex; flex-direction: column; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 20px; }
.detail-head h1 { font: 700 clamp(28px, 3vw, 40px)/1.1 var(--font-display); letter-spacing: -.03em; }
.detail-head__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--ink2); }
.inline-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai { border-top: 3px solid var(--ink); }
.ai p { margin: 0; font-size: 16px; line-height: 26px; }
.why { background: var(--surf2); padding: 16px 20px; }
.why ul { margin: 8px 0 0; padding-left: 18px; }
.confidence { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; background: var(--med-bg); color: var(--med); border-radius: 2px; font: 600 12px/1 var(--font); }
.checklist form { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.checklist button { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--surf); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--btn-ink); padding: 0; }
.checklist .done button { background: var(--ink); }
.checklist .done .lbl { text-decoration: line-through; color: var(--ink2); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: grid; grid-template-columns: 20px 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; align-items: baseline; }
.timeline .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--ink); }
.timeline .todo .dot { background: transparent; border: 2px solid var(--acc); }
.evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.evidence figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.evidence pre { margin: 0; padding: 16px; background: var(--surf2); font: 400 13px/20px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.onion { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px; border: 1px dashed var(--line2); }
.onion code { flex: 1; min-width: 0; font: 400 13px/20px var(--font-mono); overflow-wrap: anywhere; user-select: all; }
.notice { padding: 12px 16px; border: 1px solid var(--line); border-top: 3px solid var(--med-fill); background: var(--surf); font-size: 13px; }
.comment { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.dl { margin: 0; display: flex; flex-direction: column; }
.dl > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.dl dt { font: 600 11px/16px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dl dd { margin: 0; }

.messages { list-style: none; margin: 0; padding: 0; }
.messages li { padding: 10px 32px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.messages .messages--error { background: var(--crit-bg); color: var(--crit); }

/* ---------- Formulaires de configuration ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; align-items: end; }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="password"], .field select, .field textarea { width: 100%; }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="password"] { height: 40px; padding: 0 12px; font: 400 14px/20px var(--font); color: var(--ink); background: var(--surf); border: 1px solid var(--line2); border-radius: 2px; }
.field .help { font-size: 12px; color: var(--mute); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; }
.btn--danger { color: var(--crit); border-color: var(--crit); }
.danger-zone { border-top: 3px solid var(--crit-fill); }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.kv dt { margin: 0; } .kv dd { margin: 0; font: 500 15px/22px var(--font-mono); overflow-wrap: anywhere; }
.secret-once { padding: 16px; border: 1px solid var(--line); border-top: 3px solid var(--med-fill); background: var(--surf); display: flex; flex-direction: column; gap: 8px; }
.secret-once code, .codes code { font: 500 14px/22px var(--font-mono); overflow-wrap: anywhere; user-select: all; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 16px; background: var(--surf2); }
.qr svg { width: 200px; height: 200px; max-width: 100%; }
.narrow { max-width: 720px; }

/* ---------- Connexion ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth form { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; background: var(--surf); border: 1px solid var(--line); border-top: 3px solid var(--ink); padding: 32px; }
.auth input { height: 44px; padding: 0 12px; width: 100%; }
.errorlist { color: var(--crit); margin: 0; padding-left: 18px; }

/* ---------- Sélecteur d'organisation ---------- */
.org-menu > summary { list-style: none; cursor: pointer; }
.org-menu > summary::-webkit-details-marker { display: none; }
.org-menu__list { margin-top: 4px; border: 1px solid var(--line2); border-radius: 4px; background: var(--surf); padding: 4px; display: flex; flex-direction: column; }
.org-menu__list button { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }

/* ---------- Pages publiques ---------- */
.pub-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.pub-head { border-bottom: 1px solid var(--line); background: var(--surf); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
.pub-head__in { min-height: 64px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pub-nav { display: flex; gap: 20px; font-weight: 500; }
.pub-nav a { text-decoration: none; color: var(--ink2); }
.pub-head__cta { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn--lg { height: 48px; padding: 0 20px; font-size: 15px; }
.hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-block: clamp(40px, 8vw, 96px); }
.hero__text { flex: 999 1 480px; display: flex; flex-direction: column; gap: 20px; }
.hero__text h1 { font: 700 clamp(40px, 6vw, 72px)/1.02 var(--font-display); letter-spacing: -0.04em; text-wrap: balance; }
.lead { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink2); max-width: 640px; }
.hero__alert { flex: 1 1 340px; border-top: 3px solid var(--crit-fill); }
.pub-band { background: var(--surf); border-block: 1px solid var(--line); padding-block: 64px; }
.pub-band--ink { background: var(--btn); color: var(--btn-ink); border: 0; }
.pub-band--ink p { color: inherit; opacity: .8; }
.pub-section { padding-block: 64px; display: flex; flex-direction: column; gap: 24px; }
.pub-h2 { font: 700 clamp(28px, 3.4vw, 44px)/1.08 var(--font-display); letter-spacing: -0.03em; margin: 0 0 24px; text-wrap: balance; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 32px; }
.steps h3 { font: 600 20px/26px var(--font-display); margin: 8px 0; }
.steps p { margin: 0; color: var(--ink2); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.tiles--small { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.tiles h3 { font: 600 17px/24px var(--font-display); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tiles p { margin: 0; }
.tiles--plans .card { gap: 12px; }
.plan--featured { border: 2px solid var(--ink); }
.plan__price { font: 700 32px/36px var(--font-display); letter-spacing: -0.02em; }
.plan__price small { font-size: 14px; color: var(--mute); font-weight: 500; }
.plan__list { margin: 0; padding-left: 18px; color: var(--ink2); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pub-foot { border-top: 1px solid var(--line); padding-block: 32px; background: var(--surf); }