/* ── Tokens Hootwave chaude (copiés de docs/mockups/f1-debate-coach.html) ─── */
:root {
    --c-bg-page:  #EDE8E0;
    --c-bg:       #F4F0E9;
    --c-panel:    #FFFFFF;
    --c-panel2:   #F8F4ED;
    --c-line:     #DCD3C4;
    --c-ink:      #2A2114;
    --c-mute:     #6E604D;
    --c-accent:   #C85A2E;
}

body {
    background: var(--c-bg-page);
    color: var(--c-ink);
    font-family: system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

.card, .alert, .form-control, .btn {
    border-color: var(--c-line);
}

.form-control:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 0.2rem rgba(200, 90, 46, 0.15);
}

.btn-primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

.btn-primary:hover {
    background: #B04A1E;
    border-color: #B04A1E;
}

.navbar {
    background: var(--c-panel) !important;
    border-bottom: 1px solid var(--c-line) !important;
}

.alert-info {
    background: var(--c-panel2);
    color: var(--c-ink);
    border-color: var(--c-line);
}
    --c-panel2:   #F8F4ED;
    --c-line:     #DCD3C4;
    --c-line-soft:#E8E1D5;
    --c-ink:      #2A2114;
    --c-mute:     #6E604D;
    --c-faint:    #9A8A74;
    --c-accent:   #B27A10;
    --c-accent-soft: rgba(178,122,16,.12);
    --c-ok:       #1E7E4A;
    --c-ok-soft:  rgba(30,126,74,.12);
    --c-warn:     #B25E14;
    --c-warn-soft:rgba(178,94,20,.12);
    --c-crit:     #C13832;
    --c-crit-soft:rgba(193,56,50,.10);
    --c-disp:     "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --c-mono:     "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg-page:  #0F0B06;
        --c-bg:       #16110A;
        --c-panel:    #1F1810;
        --c-panel2:   #272016;
        --c-line:     #3C3222;
        --c-line-soft:#2E261A;
        --c-ink:      #F2ECE1;
        --c-mute:     #B3A48D;
        --c-faint:    #83745E;
        --c-accent:   #ECB64D;
        --c-accent-soft: rgba(236,182,77,.13);
        --c-ok:       #57C784;
        --c-ok-soft:  rgba(87,199,132,.13);
        --c-warn:     #E08A3C;
        --c-warn-soft:rgba(224,138,60,.13);
        --c-crit:     #E5605A;
        --c-crit-soft:rgba(229,96,90,.12);
    }
}

/* F7 — Hootwave parcours minimal styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8f9fa; color: #1a1a2e; }
.page { max-width: 800px; margin: 0 auto; padding: 1.5rem; }
header { margin-bottom: 2rem; }
header h1 { font-size: 1.8rem; }
.subtitle { color: #666; font-style: italic; }

/* HW-LAUNCH-03A §5 — navigation commune (barre supérieure) */
.hw-topbar {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: .75rem; margin-bottom: .5rem;
    border-bottom: 1px solid #e0e0e0;
}
.hw-brand { margin: 0; font-size: 1.6rem; }
.hw-brand-link { color: #1a1a2e; text-decoration: none; }
.hw-brand-link:hover { color: #4a90d9; }
.hw-nav { display: flex; gap: .4rem; flex-wrap: wrap; }
.hw-nav-link {
    padding: .4rem .8rem; border-radius: 6px; text-decoration: none;
    color: #1a1a2e; font-size: .9rem; font-weight: 600;
}
.hw-nav-link:hover { background: #eef2fb; color: #4a90d9; }
.hw-auth { display: flex; align-items: center; gap: .5rem; }
.hw-account-badge {
    font-family: monospace; font-size: .8rem; color: #444;
    background: #f0f0f0; border: 1px solid #ddd; border-radius: 999px;
    padding: .25rem .6rem; max-width: 11ch; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.hw-logout, .hw-login {
    padding: .4rem .8rem; border-radius: 6px; cursor: pointer; font-size: .85rem;
    font-weight: 600; border: 1px solid #1a1a2e; text-decoration: none;
}
.hw-login { background: #1a1a2e; color: #fff; }
.hw-login:hover { background: #2d2d4a; }
.hw-logout { background: #fff; color: #1a1a2e; }
.hw-logout:hover { background: #f6f6f6; }
.hw-logout:disabled { opacity: .5; cursor: default; }
@media (max-width: 540px) {
    .hw-topbar { gap: .6rem; }
    .hw-brand { font-size: 1.3rem; flex: 1 1 100%; }
}

.sort-bar { display: flex; gap: .5rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.sort-bar button { padding: .4rem .8rem; border: 1px solid #ccc; border-radius: 6px; background: white; cursor: pointer; font-size: .9rem; }
.sort-bar button.active { background: #1a1a2e; color: white; border-color: #1a1a2e; }
.btn-small { font-size: .8rem; padding: .3rem .6rem; }

.question-card { background: white; border: 1px solid #e0e0e0; border-radius: 10px; padding: 1.2rem; margin-bottom: 1rem; }
.question-card.selected { border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,.3); }
.card-header { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.card-header h3 { font-size: 1.1rem; flex: 1; min-width: 200px; }
.deadline { font-size: .8rem; color: #666; }
.deadline.past { color: #c0392b; font-weight: 600; }
.heat { font-size: .9rem; font-weight: 600; }

.split { display: flex; gap: 1rem; font-size: .85rem; margin: .5rem 0; }
.split .h { color: #2e7d32; }
.split .ai { color: #6a1b9a; }
.split.muted { color: #aaa; font-style: italic; }

.btn-take-position { padding: .5rem 1rem; background: #1a1a2e; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.btn-take-position:hover { background: #2d2d4a; }

.commit-form { margin-top: .8rem; padding: 1rem; background: #f0f4ff; border-radius: 8px; }
.commit-form label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9rem; }
.prob-buttons { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .5rem; }
.prob-btn { padding: .3rem .6rem; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer; font-size: .8rem; }
.prob-btn.active { background: #4a90d9; color: white; border-color: #4a90d9; }
input[type=range] { width: 100%; margin: .3rem 0; }
.prob-display { font-weight: 700; font-size: 1.1rem; color: #1a1a2e; }

.form-actions { display: flex; gap: .5rem; margin-top: .8rem; align-items: center; }
.account-input { padding: .4rem .6rem; border: 1px solid #ccc; border-radius: 4px; font-size: .85rem; flex: 1; }
.btn-commit { padding: .4rem 1rem; background: #27ae60; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-commit:disabled { opacity: .5; cursor: default; }
.btn-cancel { padding: .4rem .8rem; background: #eee; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; }
.commit-result { margin-top: .5rem; font-size: .85rem; padding: .3rem .5rem; border-radius: 4px; }

/* Console éditoriale : rendue uniquement aux ContentOperator. */
.editorial-intro { color: #555; max-width: 48rem; }
.editorial-form { max-width: 56rem; padding: 1.25rem; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; }
.editorial-form, .editorial-form * { box-sizing: border-box; }
.editorial-form > fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.editorial-form label { display: block; margin: .85rem 0 .3rem; font-weight: 600; font-size: .9rem; }
.editorial-form input, .editorial-form textarea { width: 100%; padding: .55rem .65rem; border: 1px solid #bbb; border-radius: 6px; font: inherit; }
.editorial-form textarea { resize: vertical; }
.editorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 1rem; }
.editorial-grid > * { min-width: 0; }
.editorial-sources { margin: 1.25rem 0; padding: 1rem; border: 1px solid #dbe4f5; border-radius: 8px; background: #f8fbff; }
.editorial-sources h3, .editorial-source legend { font-size: 1rem; font-weight: 700; }
.editorial-sources p { margin: .2rem 0 .5rem; color: #555; font-size: .9rem; }
.editorial-source { display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; margin: 0; padding: .8rem; border: 1px solid #d7dce6; border-radius: 6px; background: #fff; }
.editorial-message { margin: 1rem 0; padding: .65rem .8rem; border-radius: 6px; }
.editorial-message.error { color: #842029; background: #f8d7da; }
.editorial-message.success { color: #0f5132; background: #d1e7dd; }
@media (max-width: 640px) { .editorial-grid { grid-template-columns: 1fr; } .editorial-form { padding: 1rem; } }
.commit-result.success { background: #e8f5e9; color: #2e7d32; }
.commit-result.error { background: #fbe9e7; color: #c62828; }

/* HW-LAUNCH-03A §4 (F5) — carte partageable + actions */
.card-preview { margin: 1rem 0; }
.card-img { max-width: 100%; height: auto; border: 1px solid #e0e0e0; border-radius: 10px; display: block; }
.card-state { padding: 1rem; background: #fbe9e7; color: #c62828; border: 1px solid #f5c6cb; border-radius: 8px; }
.card-empty { padding: 1rem; background: #f0f4ff; border: 1px solid #d6e0f7; border-radius: 8px; }
.card-empty code { background: #e6ecf7; padding: .1rem .3rem; border-radius: 3px; }
.card-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.card-btn {
    padding: .5rem .9rem; border-radius: 6px; cursor: pointer; font-size: .9rem; font-weight: 600;
    border: 1px solid #1a1a2e; background: #1a1a2e; color: #fff; text-decoration: none;
}
.card-btn:hover { background: #2d2d4a; }
.card-download { background: #fff; color: #1a1a2e; }
.card-download:hover { background: #f6f6f6; }
.card-hint { font-size: .8rem; color: #666; font-style: italic; }
.card-preview ~ p a { color: #0A58CA; }

/* F5/F7 — question detail + share */
.detail-grid { margin-bottom: 1rem; }
.detail-meta { display: flex; gap: 1rem; align-items: center; margin-bottom: .5rem; }
.detail-meta ~ p a { color: #0A58CA; }
.share-link { margin: .8rem 0; padding: .5rem .8rem; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 6px; font-size: .85rem; }
.share-link code { background: #eee; padding: .1rem .3rem; border-radius: 3px; }

.ledger-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
.ledger-table th { text-align: left; padding: .4rem .6rem; background: #f0f0f0; border-bottom: 2px solid #ccc; }
.ledger-table td { padding: .4rem .6rem; border-bottom: 1px solid #eee; }
.account-cell { font-family: monospace; font-size: .8rem; }
.ts-cell { font-size: .8rem; color: #666; }
.hash-cell code { font-size: .75rem; background: #f5f5f5; padding: .1rem .2rem; border-radius: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   F1 — Hootwave, coach de débat (PWA mobile)
   Palette réchauffée grège/brun (pendant chaleureux de la palette Harfang).
   Tokens light/dark hérités ; classes préfixées coach- pour éviter toute
   collision avec les styles F7 ci-dessus.
   ════════════════════════════════════════════════════════════════════════ */
.coach-page {
    --c-bg-page: #EDE8E0; --c-bg: #F4F0E9; --c-panel: #FFFFFF; --c-panel2: #F8F4ED;
    --c-line: #DCD3C4; --c-line-soft: #E8E1D5;
    --c-ink: #2A2114; --c-mute: #6E604D; --c-faint: #9A8A74;
    --c-accent: #B27A10; --c-accent-soft: rgba(178,122,16,.12);
    --c-ok: #1E7E4A; --c-ok-soft: rgba(30,126,74,.12);
    --c-warn: #B25E14; --c-warn-soft: rgba(178,94,20,.12);
    --c-crit: #C13832; --c-crit-soft: rgba(193,56,50,.10);
    --c-glow-ok: rgba(30,126,74,.45);
    --c-steel-line: #2A2114; --c-bubble-user: rgba(178,122,16,.10);
    --c-shadow: 0 24px 60px rgba(42,33,20,.16), 0 3px 10px rgba(42,33,20,.08);
    --c-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
    --c-disp: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

    background: var(--c-bg-page);
    color: var(--c-ink);
    padding: 24px 12px 40px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 14px; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
    .coach-page {
        --c-bg-page: #0F0B06; --c-bg: #16110A; --c-panel: #1F1810; --c-panel2: #272016;
        --c-line: #3C3222; --c-line-soft: #2E261A;
        --c-ink: #F2ECE1; --c-mute: #B3A48D; --c-faint: #83745E;
        --c-accent: #ECB64D; --c-accent-soft: rgba(236,182,77,.13);
        --c-ok: #57C784; --c-ok-soft: rgba(87,199,132,.13);
        --c-warn: #E08A3C; --c-warn-soft: rgba(224,138,60,.13);
        --c-crit: #E5605A; --c-crit-soft: rgba(229,96,90,.12);
        --c-glow-ok: rgba(87,199,132,.5);
        --c-steel-line: #ECB64D; --c-bubble-user: rgba(236,182,77,.10);
        --c-shadow: 0 26px 70px rgba(0,0,0,.55), 0 3px 12px rgba(0,0,0,.4);
    }
}

.coach-phone {
    max-width: 402px; margin: 0 auto;
    background: var(--c-bg);
    border: 1px solid var(--c-line); border-radius: 30px;
    box-shadow: var(--c-shadow); overflow: hidden;
}
@media (max-width: 480px) {
    .coach-page { padding: 0; }
    .coach-phone { max-width: none; border-radius: 0; border-left: none; border-right: none; box-shadow: none; }
}

/* ── En-tête ── */
.coach-appbar { display: flex; align-items: center; gap: 9px; padding: 10px 16px 12px; border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.coach-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.coach-brand-name { font-family: var(--c-disp); font-weight: 650; font-size: 15px; }
.coach-brand-name .coach-ctx { color: var(--c-mute); font-weight: 400; font-size: 12.5px; display: block; margin-top: -1px; }
.coach-modes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.coach-mode-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--c-mono); font-size: 10px; font-weight: 600;
    color: var(--c-ok); background: var(--c-ok-soft); border: 1px solid var(--c-ok); border-radius: 999px; padding: 3px 9px; }
.coach-mode-pill.off { opacity: .45; }
.coach-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 6px var(--c-glow-ok); }
.coach-btn-premium { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    color: var(--c-accent); background: transparent; border: 1px solid var(--c-accent); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.coach-btn-premium:hover { background: var(--c-accent-soft); }
.coach-btn-premium.on { background: var(--c-accent-soft); }
.coach-sonnet-tag { font-family: var(--c-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; }

/* ── Saisie de position ── */
.coach-ask { padding: 14px 16px 12px; border-bottom: 1px solid var(--c-line-soft); }
.coach-ask label { display: block; font-family: var(--c-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 6px; }
.coach-position-label { margin-top: 12px; }
.coach-topic-input { width: 100%; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 10px; padding: 9px 11px; font-size: 13px; color: var(--c-ink); margin-bottom: 4px; }
.coach-topic-input:focus { outline: none; border-color: var(--c-accent); }
.coach-askfield { display: flex; align-items: flex-start; gap: 8px; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 12px; padding: 11px 12px; }
.coach-askfield:focus-within { border-color: var(--c-accent); }
.coach-askfield textarea { flex: 1; min-width: 0; resize: none; border: none; background: transparent; font-family: var(--c-disp); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--c-ink); padding: 0; }
.coach-askfield textarea:focus { outline: none; }
.coach-askgo { flex: none; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; display: grid; place-items: center;
    background: var(--c-accent); border: 1px solid var(--c-accent); color: #14100a; font-size: 16px; }
.coach-askgo:disabled { opacity: .45; cursor: default; }
.coach-askgo:hover:not(:disabled) { filter: brightness(1.06); }
.coach-hint { margin: 7px 2px 0; font-size: 11px; color: var(--c-faint); }
.coach-hint b { color: var(--c-mute); font-weight: 600; }
.coach-tier-hint { margin: 8px 2px 0; font-size: 11px; color: var(--c-faint); }
.coach-tier-hint b { color: var(--c-accent); font-weight: 600; }
.coach-tier-model { color: var(--c-faint); font-family: var(--c-mono); font-size: 10px; }

/* ── Loading ── */
.coach-loading { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--c-mute); font-size: 13px; }
.coach-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-line); border-top-color: var(--c-accent); animation: coach-spin .8s linear infinite; }
@keyframes coach-spin { to { transform: rotate(360deg); } }

/* ── Error ── */
.coach-error { margin: 16px; padding: 14px; background: var(--c-crit-soft); border: 1px solid var(--c-crit); border-radius: 12px; color: var(--c-ink); }
.coach-error p { margin: 0 0 6px; font-size: 13px; }
.coach-error-detail { font-family: var(--c-mono); font-size: 11px; color: var(--c-mute); word-break: break-word; }
.coach-error-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ── Fil de débat ── */
.coach-thread { padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 12px; }
.coach-turn-user { display: flex; justify-content: flex-end; }
.coach-bubble-user { max-width: 88%; background: var(--c-bubble-user); border: 1px solid var(--c-accent); border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-size: 13.5px; }
.coach-who { font-family: var(--c-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-faint); display: block; margin-bottom: 3px; }

/* La carte steelman — le moment de valeur */
.coach-steelman { background: var(--c-panel); border: 1.5px solid var(--c-steel-line); border-radius: 14px; overflow: hidden; }
.coach-steelman.premium { box-shadow: 0 0 0 2px var(--c-accent-soft); }
.coach-steelman-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--c-line-soft); }
.coach-tag { font-family: var(--c-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--c-accent); }
.coach-sonnet-badge { font-family: var(--c-mono); font-size: 9.5px; font-weight: 700; color: var(--c-accent); background: var(--c-accent-soft);
    border: 1px solid var(--c-accent); border-radius: 4px; padding: 1px 6px; letter-spacing: .06em; }
.coach-free-badge { font-family: var(--c-mono); font-size: 9.5px; font-weight: 600; color: var(--c-ok); background: var(--c-ok-soft);
    border: 1px solid var(--c-ok); border-radius: 4px; padding: 1px 6px; }
.coach-latency { margin-left: auto; font-family: var(--c-mono); font-size: 10px; color: var(--c-faint); border: 1px solid var(--c-line-soft); background: var(--c-panel2); border-radius: 4px; padding: 1.5px 7px; }
.coach-latency b { color: var(--c-ok); font-weight: 600; }
.coach-steelman-body { padding: 12px 14px 13px; }
.coach-thesis { margin: 0 0 10px; font-family: var(--c-disp); font-size: 16.5px; font-weight: 650; line-height: 1.35; }
.coach-counter { border-top: 1px dashed var(--c-line-soft); padding-top: 9px; }
.coach-counter-tag { font-family: var(--c-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--c-warn); }
.coach-counter p { margin: 4px 0 0; font-size: 13px; }
.coach-steelman-foot { padding: 8px 14px 10px; border-top: 1px dashed var(--c-line-soft); font-size: 10.5px; color: var(--c-faint); }

/* État guardrail */
.coach-guardrail { padding: 12px 14px 13px; background: var(--c-warn-soft); }
.coach-guardrail p { margin: 0 0 6px; font-size: 13px; }
.coach-guardrail-ask { color: var(--c-mute); font-size: 12px; }

/* Chips de relance */
.coach-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 2px; }
.coach-chip { font-size: 11.5px; font-weight: 600; color: var(--c-mute); background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.coach-chip:hover:not(:disabled) { color: var(--c-ink); background: var(--c-panel2); }
.coach-chip:disabled { opacity: .5; cursor: default; }
.coach-chip.end { color: var(--c-accent); border-color: var(--c-accent); }

/* Composition (état replying) */
.coach-composer { display: flex; align-items: center; gap: 8px; padding: 4px 2px 0; }
.coach-field { flex: 1; display: flex; align-items: center; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 999px; padding: 8px 14px; }
.coach-field:focus-within { border-color: var(--c-accent); }
.coach-field input { flex: 1; border: none; background: transparent; font-size: 13px; color: var(--c-ink); }
.coach-field input:focus { outline: none; }
.coach-send { flex: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
    background: var(--c-accent); border: 1px solid var(--c-accent); color: #14100a; }
.coach-send:disabled { opacity: .45; cursor: default; }

/* Carte premium (distincte, jamais bloquante) */
.coach-premium-card { display: flex; gap: 10px; align-items: flex-start; background: var(--c-accent-soft); border: 1px solid var(--c-accent); border-radius: 12px; padding: 11px 13px; }
.coach-lock { flex: none; font-size: 16px; }
.coach-premium-body { min-width: 0; flex: 1; }
.coach-premium-tt { font-size: 12.5px; font-weight: 650; font-family: var(--c-disp); }
.coach-premium-tt .coach-sonnet { font-family: var(--c-mono); font-size: 9.5px; font-weight: 700; color: var(--c-accent); border: 1px solid var(--c-accent); border-radius: 4px; padding: 1px 6px; letter-spacing: .06em; }
.coach-premium-dd { font-size: 11.5px; color: var(--c-mute); margin-top: 2px; }
.coach-premium-free-note { font-size: 10.5px; color: var(--c-faint); margin-top: 4px; }
.coach-go { flex: none; align-self: center; font-size: 11.5px; font-weight: 600; color: var(--c-accent); background: transparent; border: none; cursor: pointer; white-space: nowrap; }
.coach-go:hover { text-decoration: underline; }

/* Fin de session + CTA prédiction */
.coach-session-end { display: flex; align-items: center; gap: 10px; font-family: var(--c-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-faint); margin: 4px 0 0; }
.coach-session-end::before, .coach-session-end::after { content: ""; flex: 1; height: 1px; background: var(--c-line-soft); }
.coach-cta-pred { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; }
.coach-cta-head { padding: 9px 14px; background: var(--c-panel2); border-bottom: 1px solid var(--c-line-soft); font-family: var(--c-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-mute); font-weight: 500; }
.coach-cta-body { padding: 12px 14px 13px; }
.coach-cta-q { margin: 0 0 4px; font-family: var(--c-disp); font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.coach-cta-why { font-size: 11.5px; color: var(--c-mute); margin: 0 0 11px; }
.coach-cta-actions { display: flex; gap: 8px; align-items: center; }

/* Boutons génériques coach */
.coach-btn { font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-ink); }
.coach-btn:hover { background: var(--c-panel2); }
.coach-btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: #14100a; flex: 1; }
.coach-btn.primary:hover { filter: brightness(1.06); }
.coach-btn.quiet { color: var(--c-mute); border-color: transparent; background: transparent; }

.coach-guard-footer { padding: 10px 16px 14px; font-size: 9.5px; color: var(--c-faint); text-align: center; }

/* ════════════════════════════════════════════════════════════════════════
   F3 (HW-LAUNCH-04) — Split H / AI en direct + carte partageable opt-in.
   Préfixe f3- pour éviter toute collision avec le .split simple de Home/QuestionDetail.
   Mobile-first (PWA comme F1/F7) ; tokens chauds --c-* hérités de :root.
   ════════════════════════════════════════════════════════════════════════ */
.f3-split {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    overflow: hidden;
    margin: .8rem 0;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--c-ink);
}
.f3-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-line-soft);
}
.f3-tag {
    font-family: var(--c-mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; font-weight: 600; color: #B04A1E;
}
.f3-push { margin-left: auto; font-family: var(--c-mono); font-size: 10px; color: var(--c-faint); white-space: nowrap; }
.f3-push .f3-ok { color: var(--c-ok); font-weight: 600; }
.f3-push .f3-warn { color: var(--c-warn); font-weight: 600; }

/* Pastille de connexion : « connecté » / « déconnecté », jamais « EN DIRECT »
   (LiveSplit ne porte aucun timestamp). */
.f3-conn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--c-mono); font-size: 10px; font-weight: 600;
    color: var(--c-ok); background: var(--c-ok-soft);
    border: 1px solid var(--c-ok); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.f3-conn .f3-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 6px var(--c-glow-ok, rgba(30,126,74,.45)); }
.f3-conn.off { color: var(--c-warn); background: var(--c-warn-soft); border-color: var(--c-warn); }
.f3-conn.off .f3-dot { background: var(--c-warn); box-shadow: none; }

.f3-refresh {
    font-family: var(--c-mono); font-size: 10px; font-weight: 600;
    color: var(--c-mute); background: var(--c-panel);
    border: 1px solid var(--c-line); border-radius: 999px; padding: 4px 11px; cursor: pointer; white-space: nowrap;
}
.f3-refresh:hover { color: var(--c-ink); background: var(--c-panel2); }

.f3-state { padding: 13px 14px; font-size: 12.5px; color: var(--c-mute); }

.f3-body { padding: 13px 14px 12px; display: flex; flex-direction: column; gap: 13px; }

.f3-row { display: flex; flex-direction: column; gap: 5px; }
.f3-row-top { display: flex; align-items: baseline; gap: 8px; }
.f3-co {
    flex: none; font-family: var(--c-mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: .06em; border-radius: 4px; padding: 2px 9px; white-space: nowrap;
}
.f3-co-h   { color: var(--c-ok);     background: var(--c-ok-soft);     border: 1px solid var(--c-ok); }
.f3-co-ai  { color: var(--c-accent); background: var(--c-accent-soft); border: 1.5px solid var(--c-accent); }
.f3-cohort-n { font-family: var(--c-mono); font-size: 10px; color: var(--c-faint); font-variant-numeric: tabular-nums; min-width: 0; }
.f3-cohort-pct {
    margin-left: auto; flex: none;
    font-family: var(--c-disp); font-size: 21px; font-weight: 650;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1;
}
.f3-row.h .f3-cohort-pct   { color: var(--c-ok); }
.f3-row.ai .f3-cohort-pct  { color: var(--c-accent); }

.f3-bar { position: relative; height: 14px; border-radius: 5px; background: var(--c-line-soft); overflow: hidden; }
.f3-bar i { display: block; height: 100%; border-radius: 5px 0 0 5px; transition: width .6s cubic-bezier(.3,.9,.4,1); }
.f3-row.h .f3-bar i   { background: var(--c-ok); }
.f3-row.ai .f3-bar i  { background: repeating-linear-gradient(-55deg, var(--c-accent) 0 7px, rgba(178,122,16,.6) 7px 11px); }
@media (prefers-reduced-motion: reduce) { .f3-bar i { transition: none; } }

/* L'écart H vs AI — le hook partageable. */
.f3-gap {
    display: flex; align-items: center; gap: 10px;
    background: var(--c-accent-soft);
    border: 1px dashed var(--c-accent); border-radius: 9px; padding: 9px 12px;
}
.f3-delta { flex: none; font-family: var(--c-disp); font-size: 22px; font-weight: 650; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.f3-gap-txt { font-size: 11.5px; color: var(--c-mute); line-height: 1.4; min-width: 0; }
.f3-gap-txt b { color: var(--c-ink); font-weight: 600; }

.f3-since { padding: 8px 14px; border-top: 1px dashed var(--c-line-soft); font-size: 11.5px; color: var(--c-mute); }
.f3-since b { font-weight: 650; font-variant-numeric: tabular-nums; }

/* DEC-004 partage opt-in : le deep-link est privé tant que non révélé. */
.f3-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--c-line-soft); }
.f3-share-btn {
    font-size: 12px; font-weight: 600; color: #B04A1E; background: transparent;
    border: 1px solid #B04A1E; border-radius: 999px; padding: 5px 14px; cursor: pointer;
}
.f3-share-btn:hover { background: var(--c-accent-soft); }
.f3-share-label { font-size: 10px; font-family: var(--c-mono); color: var(--c-faint); letter-spacing: .04em; }
.f3-share-input {
    flex: 1; min-width: 180px; font-family: var(--c-mono); font-size: 11px;
    background: var(--c-panel2); color: var(--c-ink);
    border: 1px solid var(--c-line); border-radius: 6px; padding: 5px 8px;
}
.f3-copy-btn {
    font-size: 11px; font-weight: 600; color: #14100a; background: var(--c-accent);
    border: 1px solid var(--c-accent); border-radius: 6px; padding: 5px 12px; cursor: pointer;
}
.f3-revoke-btn {
    font-size: 11px; color: var(--c-mute); background: transparent;
    border: 1px solid var(--c-line); border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
.f3-revoke-btn:hover { color: var(--c-ink); background: var(--c-panel2); }

.f3-foot { padding: 8px 14px 10px; border-top: 1px dashed var(--c-line-soft); font-size: 10.5px; color: var(--c-faint); line-height: 1.5; }
.f3-foot b { color: var(--c-mute); font-weight: 600; }

/* Responsive : sur écran étroit, le partage passe en pile et les % se resserrent. */
@media (max-width: 480px) {
    .f3-head { gap: 6px; padding: 9px 11px; }
    .f3-push { display: none; } /* le détail « poussé à chaque commit » est secondaire sur mobile */
    .f3-body { padding: 11px 12px; }
    .f3-cohort-pct { font-size: 18px; }
    .f3-share { flex-direction: column; align-items: stretch; }
    .f3-share-input { min-width: 0; }
}