/* Site de licences Tauri Migration : mêmes couleurs que l'application (sarcelle = source, indigo = cible). */
:root {
    --ink: #1C2433;
    --ink-soft: #4A5568;
    --muted: #6B7587;
    --paper: #F2F4F7;
    --surface: #FFFFFF;
    --line: #DCE1E8;
    --line-strong: #C3CAD5;
    --source: #0E7C7B;
    --source-tint: #E3F2F1;
    --target: #5145CD;
    --target-tint: #ECEBFB;
    --ok: #23794A;
    --warn: #9A5B0E;
    --warn-tint: #FBF1E2;
    --err: #B4231B;
    --err-tint: #FBE9E7;
    --focus: #2F6FEB;
    --radius-s: 4px;
    --radius-m: 8px;
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ink: #E6E9EF; --ink-soft: #BAC2CF; --muted: #8D97A8;
        --paper: #141821; --surface: #1C212C; --line: #2D3442; --line-strong: #3C4557;
        --source: #3FB8B5; --source-tint: #15302F; --target: #9C94F5; --target-tint: #24223F;
        --ok: #5CC28A; --warn: #E0A54A; --warn-tint: #33280F; --err: #F0776D; --err-tint: #3A1C1A; --focus: #7AA5FF;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #E6E9EF; --ink-soft: #BAC2CF; --muted: #8D97A8;
    --paper: #141821; --surface: #1C212C; --line: #2D3442; --line-strong: #3C4557;
    --source: #3FB8B5; --source-tint: #15302F; --target: #9C94F5; --target-tint: #24223F;
    --ok: #5CC28A; --warn: #E0A54A; --warn-tint: #33280F; --err: #F0776D; --err-tint: #3A1C1A; --focus: #7AA5FF;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased;
    min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--target); }
code { font-family: var(--mono); font-size: .88em; background: var(--paper); padding: 1px 5px; border-radius: var(--radius-s); }
h1 { font: 600 clamp(28px, 4vw, 40px)/1.15 var(--font-display); letter-spacing: -.015em; margin: 0 0 12px; }
h2 { font: 600 22px/1.25 var(--font-display); margin: 0 0 8px; }
h3 { font: 600 17px/1.3 var(--font-display); margin: 0 0 6px; }
p { margin: 0 0 12px; }
.lede { color: var(--ink-soft); font-size: 18px; max-width: 62ch; }
.muted { color: var(--muted); }
.small-text { font-size: 14px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.page { padding-top: 40px; padding-bottom: 64px; }
.narrow { max-width: 460px; }

/* ---------- En-tête et pied ---------- */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 17px/1 var(--font-display); }
.brand img { object-fit: contain; }
.top-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.top-nav > a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.top-nav > a:not(.btn):hover { color: var(--ink); }
.foot { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14px; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.foot a { color: var(--muted); margin-left: 16px; }
.inline { display: inline; margin: 0; }

/* ---------- Boutons, formulaires, messages ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-s);
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 15px/1.2 var(--font);
    text-decoration: none; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--ink-soft); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--target); border-color: var(--target); color: #fff; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.danger { color: var(--err); }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn.block { width: 100%; }
button.link { background: none; border: 0; padding: 0; color: var(--ink-soft); font: 500 16px var(--font); cursor: pointer; }
button.link:hover { color: var(--ink); text-decoration: underline; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 24px; margin-bottom: 20px; }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
input:not([type=checkbox]):not([type=radio]), select {
    width: 100%; padding: 10px 12px; font: 16px var(--font); color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--radius-s); }
input:focus, select:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
input[type=checkbox] { accent-color: var(--target); width: 16px; height: 16px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.field-error, .validation-summary-errors { color: var(--err); font-size: 14px; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }
.alert { background: var(--warn-tint); border-left: 4px solid var(--warn); padding: 12px 16px; border-radius: 0 var(--radius-s) var(--radius-s) 0; margin: 0 0 20px; }
.alert.error { background: var(--err-tint); border-left-color: var(--err); }
.alert.ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border-left-color: var(--ok); }
.alert.info { background: var(--target-tint); border-left-color: var(--target); }
.pill { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.pill.bad { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); background: var(--err-tint); }
.pill.live { color: var(--target); border-color: color-mix(in srgb, var(--target) 40%, transparent); background: var(--target-tint); }

/* ---------- Accueil ---------- */
.hero { padding: 64px 0 48px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.flow-visual { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; display: grid; gap: 12px; }
.flow-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-size: 14px; }
.flow-row .src, .flow-row .tgt { padding: 8px 10px; border-radius: var(--radius-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-row .src { background: var(--source-tint); color: var(--source); }
.flow-row .tgt { background: var(--target-tint); color: var(--target); }
.flow-row svg { width: 36px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.section { padding: 40px 0; }
.section > h2 { margin-bottom: 18px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px; }
.feature p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.price-card.featured { border-color: var(--target); box-shadow: inset 0 3px 0 var(--target); }
.price { font: 600 24px/1.2 var(--font-display); }
.price-card ul { margin: 4px 0 8px; padding-left: 18px; color: var(--ink-soft); font-size: 15px; }
.price-card .btn { margin-top: auto; }
.faq { display: grid; gap: 12px; max-width: 760px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 18px; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin: 10px 0 0; color: var(--ink-soft); }

/* ---------- Compte ---------- */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 12px 0 16px; font-size: 15px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.devices { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.devices li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-s); flex-wrap: wrap; }
.devices .name { font-weight: 600; }
.devices .meta { color: var(--muted); font-size: 14px; }
.seat-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 8px; }
.seat-form .field { width: 120px; }
.code { font: 600 28px/1.2 var(--mono); letter-spacing: .12em; }

/* ---------- Pages légales ---------- */
.legal { max-width: 760px; }
.legal h2 { margin-top: 28px; }
.todo { background: var(--warn-tint); padding: 0 4px; border-radius: 3px; }

@media (max-width: 820px) {
    .hero { grid-template-columns: 1fr; padding-top: 40px; }
    .features, .account-grid { grid-template-columns: 1fr; }
    .foot a { margin: 0 16px 0 0; }
}

/* ---------- Back-office ---------- */
.admin-nav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 8px 0 22px; }
.admin-nav a { padding: 8px 14px; color: var(--ink-soft); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-nav a:hover { color: var(--ink); }
.admin-nav a.current { color: var(--ink); border-bottom-color: var(--target); }
.crumbs { margin: 0 0 4px; font-size: 14px; }
.crumbs a { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; }
.stat span { display: block; color: var(--muted); font-size: 13px; }
.stat strong { font: 600 26px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar input:not([type=checkbox]) { max-width: 340px; }
.toolbar select { width: auto; }
.table-card { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
    padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.revoked td { opacity: .6; }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }
.actions.end { justify-content: flex-end; }
.admin-action { border-top: 1px solid var(--line); padding: 12px 0 0; margin-top: 12px; }
.admin-action summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.inline-form, .invite-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 8px 0; }
.inline-form .field, .invite-form .field { min-width: 150px; }
.inline-form .narrow-field { min-width: 0; width: 100px; }
.inline-form .wide-field, .invite-form .field:first-child { flex: 1 1 220px; }
.invite-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.narrow-card { max-width: 640px; }
textarea { width: 100%; padding: 10px 12px; font: 15px/1.4 var(--font); color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--radius-s); resize: vertical; }
.top-nav .link { font-size: 16px; }

/* Validation : erreurs bien visibles, champ en faute encadré. */
.field-error { font-weight: 600; }
input.input-validation-error { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.alert.validation-summary-valid { display: none; }

/* Champ mot de passe avec bouton « œil » (password-toggle.js). */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px;
    display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-s); background: none;
    color: var(--muted); cursor: pointer; }
.pw-toggle:hover { color: var(--ink); background: var(--paper); }
.pw-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }