/* ============================================================
   Sostenutoo — Calculateur d'équilibre d'orchestre
   Habillage aligné sur la refonte 2026 de l'app (crème / marine / or,
   police Hanken Grotesk, icônes Lucide). Pages FR/EN/ES, clair uniquement.
   ============================================================ */

:root {
  /* Palette (miroir des tokens app-v2) */
  --ob-bg: #F4F1EA;
  --ob-surface: #FFFFFF;
  --ob-surface-2: #FAF8F2;
  --ob-ink: #1B1C22;
  --ob-muted: #6C6A73;
  --ob-faint: #9A98A0;
  --ob-line: #E7E2D7;
  --ob-line-2: #EFEBE2;
  --ob-primary: #36497C;
  --ob-primary-soft: #E7E9F2;
  --ob-primary-ink: #36497C;
  --ob-accent: #A9772E;
  --ob-accent-soft: #F3EBDA;
  --ob-green: #2E7D5B;
  --ob-green-soft: #E4F0E9;
  --ob-amber: #A9772E;
  --ob-amber-soft: #F3EBDA;
  --ob-danger: #BB4A38;
  --ob-danger-soft: #F6E6E2;

  --ob-shadow: 0 1px 2px rgba(25,24,30,.04), 0 16px 36px -22px rgba(25,24,30,.22);
  --ob-shadow-hover: 0 1px 2px rgba(25,24,30,.05), 0 22px 44px -22px rgba(25,24,30,.28);
  --ob-shadow-sm: 0 1px 2px rgba(25,24,30,.06);
  --ob-btn-sh: 0 10px 22px -12px rgba(54,73,124,.55);

  --ob-radius: 16px;
  --ob-radius-sm: 12px;
  --ob-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Neutralise le mode sombre natif des contrôles : page toujours claire */
  color-scheme: light;
}

* { box-sizing: border-box; }

body.ob-body {
  margin: 0;
  font-family: var(--ob-font);
  color: var(--ob-ink);
  background: var(--ob-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ob-body [data-lucide] { display: inline-flex; }
.ob-body svg { stroke-width: 2; }

/* ---------- En-tête ---------- */
.ob-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 1120px; margin: 0 auto; padding: 1.1rem 1.5rem;
}
.ob-logo { font-weight: 700; font-size: 1.2rem; color: var(--ob-ink); text-decoration: none; letter-spacing: -.02em; }
.ob-header-right { display: flex; align-items: center; gap: 1.1rem; }
.ob-back {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ob-primary); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.ob-back:hover { text-decoration: underline; }
.ob-back svg { width: 15px; height: 15px; }

.ob-page { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 5rem; }

/* ---------- Hero ---------- */
.ob-hero { max-width: 780px; margin: 1.5rem 0 2rem; }
.ob-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ob-accent); margin-bottom: .85rem;
}
.ob-eyebrow svg { width: 14px; height: 14px; }
.ob-hero h1 {
  font-size: 2.35rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.08;
  margin: 0 0 .7rem; color: var(--ob-ink);
}
.ob-hero p { color: var(--ob-muted); font-size: 1.08rem; margin: 0; font-weight: 500; }
@media (max-width: 640px) { .ob-hero h1 { font-size: 1.85rem; } }

/* ---------- Sélecteur de type d'ensemble ---------- */
.ob-types {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: 1.6rem;
}
@media (max-width: 860px) { .ob-types { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ob-types { grid-template-columns: 1fr; } }

.ob-type {
  position: relative; display: block; text-align: left; font-family: inherit;
  background: var(--ob-surface); border: 1.5px solid var(--ob-line); border-radius: var(--ob-radius-sm);
  padding: .85rem 1rem; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.ob-type:hover { border-color: #D9CFBB; transform: translateY(-2px); box-shadow: var(--ob-shadow); }
.ob-type.active {
  border-color: var(--ob-primary); background: var(--ob-primary-soft);
  box-shadow: inset 0 0 0 1px var(--ob-primary);
}
.ob-type-name { display: block; font-weight: 600; font-size: .96rem; color: var(--ob-ink); line-height: 1.25; letter-spacing: -.01em; padding-right: 1.2rem; }
.ob-type.active .ob-type-name { color: var(--ob-primary-ink); }
.ob-type-sub { display: block; color: var(--ob-faint); font-size: .78rem; margin-top: .22rem; line-height: 1.35; font-weight: 500; }
.ob-type.active .ob-type-sub { color: #5e6789; }
.ob-type-check {
  position: absolute; top: .8rem; right: .85rem; display: inline-flex;
  color: var(--ob-primary); opacity: 0; transform: scale(.6); transition: opacity .16s ease, transform .16s ease;
}
.ob-type-check svg { width: 16px; height: 16px; stroke-width: 2.5; }
.ob-type.active .ob-type-check { opacity: 1; transform: scale(1); }

/* ---------- Note « effectif chargé depuis le compte » (deep-link) ---------- */
.ob-connect { margin-bottom: 1.4rem; }
.ob-connect:empty { display: none; }
.ob-loaded {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  border: 1px solid #BFE0CF; border-left: 3px solid var(--ob-green); background: var(--ob-green-soft);
  border-radius: var(--ob-radius-sm); padding: .7rem 1rem;
}
.ob-loaded-ico { display: inline-flex; color: var(--ob-green); flex-shrink: 0; }
.ob-loaded-ico svg { width: 18px; height: 18px; }
.ob-loaded-body { flex: 1; min-width: 180px; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.ob-loaded-title { font-weight: 700; font-size: .92rem; color: #1c5c40; }
.ob-loaded-cov { font-size: .82rem; color: #3d6b54; font-weight: 500; }
.ob-loaded-select {
  font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--ob-ink);
  border: 1px solid #BFE0CF; border-radius: 9px; padding: .35rem .6rem; background: #fff; cursor: pointer; max-width: 220px;
}
.ob-loaded-select:focus { outline: none; border-color: var(--ob-green); }

/* ---------- Fenêtre « Enregistrer mon bilan » ---------- */
.ob-modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 24, .5); padding: 1.25rem; animation: obFade .18s ease;
}
@keyframes obFade { from { opacity: 0; } to { opacity: 1; } }
.ob-modal {
  position: relative; width: 100%; max-width: 420px; background: var(--ob-surface);
  border: 1px solid var(--ob-line); border-radius: var(--ob-radius); box-shadow: 0 24px 60px -20px rgba(0,0,0,.4);
  padding: 1.9rem 1.6rem 1.5rem; text-align: center; animation: obPop .2s cubic-bezier(.22,1,.36,1);
}
@keyframes obPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.ob-modal-x {
  position: absolute; top: .8rem; right: .8rem; width: 32px; height: 32px; border-radius: 9px;
  border: none; background: none; color: var(--ob-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ob-modal-x:hover { background: var(--ob-surface-2); color: var(--ob-ink); }
.ob-modal-x svg { width: 18px; height: 18px; }
.ob-modal-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 15px; background: var(--ob-primary-soft); color: var(--ob-primary); margin: 0 auto .9rem;
}
.ob-modal-ico.green { background: var(--ob-green-soft); color: var(--ob-green); }
.ob-modal-ico svg { width: 25px; height: 25px; }
.ob-modal-title { font-size: 1.2rem; font-weight: 700; color: var(--ob-ink); margin: 0 0 .4rem; letter-spacing: -.02em; }
.ob-modal-sub { font-size: .93rem; color: var(--ob-muted); margin: 0 0 1.2rem; font-weight: 500; line-height: 1.5; }
.ob-save-form { display: flex; flex-direction: column; gap: .7rem; text-align: left; }
.ob-save-email {
  font-family: inherit; font-size: .95rem; color: var(--ob-ink); background: var(--ob-surface-2);
  border: 1px solid var(--ob-line); border-radius: 11px; padding: .7rem .9rem; width: 100%;
}
.ob-save-email:focus { outline: none; border-color: var(--ob-primary); background: #fff; }
.ob-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; color: var(--ob-muted); line-height: 1.45; cursor: pointer; }
.ob-consent input { margin-top: .15rem; flex-shrink: 0; accent-color: var(--ob-primary); width: 16px; height: 16px; }
.ob-consent a { color: var(--ob-primary); }
.ob-save-err { color: var(--ob-danger); font-size: .82rem; font-weight: 600; min-height: 0; }
.ob-save-err:empty { display: none; }
.ob-modal-notice { font-size: .76rem; color: var(--ob-faint); line-height: 1.45; margin: .5rem 0 0; text-align: center; }
.ob-modal-notice a { color: var(--ob-muted); text-decoration: underline; }
.ob-btn.block { width: 100%; justify-content: center; padding: .72rem 1rem; font-size: .95rem; }
.ob-modal-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%;
  background: none; border: none; color: var(--ob-muted); font-family: inherit; font-size: .87rem; font-weight: 600;
  padding: .7rem; margin-top: .55rem; cursor: pointer; border-radius: 10px;
}
.ob-modal-link:hover { background: var(--ob-surface-2); color: var(--ob-primary); }
.ob-modal-link svg { width: 15px; height: 15px; }
.ob-upsell { background: var(--ob-surface-2); border: 1px solid var(--ob-line); border-radius: 12px; padding: 1rem; margin: .3rem 0 .2rem; }
.ob-upsell-txt { font-size: .9rem; color: var(--ob-ink); font-weight: 600; margin-bottom: .7rem; line-height: 1.4; }

/* ---------- Zone outil ---------- */
.ob-tool { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 1.4rem; align-items: start; }
@media (max-width: 940px) { .ob-tool { grid-template-columns: 1fr; } }

.ob-panel {
  background: var(--ob-surface); border: 1px solid var(--ob-line);
  border-radius: var(--ob-radius); box-shadow: var(--ob-shadow); padding: 1.4rem 1.5rem;
}

.ob-input-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .3rem; }
.ob-input-head h2 { font-size: 1.18rem; font-weight: 700; margin: 0; color: var(--ob-ink); letter-spacing: -.02em; }
.ob-input-actions { display: flex; gap: .3rem; }
.ob-linkbtn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: none; padding: .35rem .55rem; border-radius: 9px;
  color: var(--ob-primary); font-size: .84rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s ease;
}
.ob-linkbtn:hover { background: var(--ob-primary-soft); }
.ob-linkbtn svg { width: 15px; height: 15px; }
.ob-input-hint { color: var(--ob-muted); font-size: .9rem; margin: 0 0 1.2rem; font-weight: 500; }

.ob-family { margin-bottom: 1.25rem; }
.ob-family:last-child { margin-bottom: 0; }
.ob-family-title {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  color: var(--ob-accent); margin: 0 0 .55rem; display: flex; align-items: center; gap: .6rem;
}
.ob-family-title::after { content: ''; flex: 1; height: 1px; background: var(--ob-line); }

.ob-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: .3rem .9rem; }
.ob-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .4rem .55rem; border-radius: 11px; transition: background .15s ease;
}
.ob-row:hover { background: var(--ob-surface-2); }
.ob-row-label { min-width: 0; }
.ob-row-name { display: block; line-height: 1.25; font-size: .93rem; font-weight: 500; color: var(--ob-ink); }
.ob-row-target { display: flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--ob-faint); line-height: 1.2; min-height: 1.05em; margin-top: .1rem; font-weight: 500; }
.ob-row-target svg { width: 12px; height: 12px; flex-shrink: 0; }
.ob-row.status-low .ob-row-target { color: var(--ob-amber); }
.ob-row.status-critical .ob-row-target { color: var(--ob-danger); font-weight: 600; }
.ob-row.status-high .ob-row-target { color: var(--ob-primary); }

.ob-stepper { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; }
.ob-step {
  width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--ob-line);
  background: var(--ob-surface); color: var(--ob-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; padding: 0; transition: all .13s ease;
}
.ob-step svg { width: 15px; height: 15px; }
.ob-step:hover { border-color: var(--ob-primary); color: var(--ob-primary); background: var(--ob-primary-soft); }
.ob-step:active { transform: scale(.9); }
.ob-count {
  width: 40px; text-align: center; border: 1px solid transparent; background: none;
  font: inherit; font-weight: 700; font-size: .98rem; color: var(--ob-ink); border-radius: 9px; padding: .15rem 0;
  -moz-appearance: textfield; appearance: textfield;
}
.ob-count::-webkit-outer-spin-button, .ob-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-count:focus { outline: none; border-color: var(--ob-primary); background: var(--ob-surface-2); }
.ob-count.nonzero { background: var(--ob-primary-soft); color: var(--ob-primary-ink); }

/* ---------- Diagnostic ---------- */
.ob-results { position: sticky; top: 1rem; }
@media (max-width: 940px) { .ob-results { position: static; } }

.ob-res-empty { color: var(--ob-muted); font-size: .95rem; text-align: center; padding: 2.5rem 1rem; font-weight: 500; }
.ob-res-empty .ob-res-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: .9rem;
  background: var(--ob-accent-soft); color: var(--ob-accent);
}
.ob-res-empty .ob-res-empty-icon svg { width: 27px; height: 27px; }

/* Score */
.ob-score-wrap { display: flex; align-items: center; gap: 1.15rem; padding: .3rem 0 .2rem; }
.ob-gauge { width: 104px; height: 104px; flex-shrink: 0; }
.ob-gauge-track { stroke: var(--ob-line); }
.ob-gauge-value { transition: stroke-dashoffset .7s cubic-bezier(.22,1,.36,1), stroke .3s ease; }
.ob-gauge-num { font-size: 1.75rem; font-weight: 700; fill: var(--ob-ink); font-family: var(--ob-font); }
.ob-gauge-outof { font-size: .58rem; fill: var(--ob-faint); font-weight: 600; font-family: var(--ob-font); letter-spacing: .04em; }
.ob-score-info { min-width: 0; }
.ob-score-label { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.1rem; color: var(--ob-ink); line-height: 1.25; letter-spacing: -.01em; }
.ob-score-label svg { width: 19px; height: 19px; flex-shrink: 0; }
.ob-score-total { color: var(--ob-muted); font-size: .88rem; margin-top: .2rem; font-weight: 500; }
.ob-score-wrap.s-excellent .ob-gauge-value { stroke: var(--ob-green); }
.ob-score-wrap.s-excellent .ob-score-label { color: var(--ob-green); }
.ob-score-wrap.s-good .ob-gauge-value { stroke: var(--ob-primary); }
.ob-score-wrap.s-good .ob-score-label { color: var(--ob-primary); }
.ob-score-wrap.s-unbalanced .ob-gauge-value { stroke: var(--ob-accent); }
.ob-score-wrap.s-unbalanced .ob-score-label { color: var(--ob-accent); }
.ob-score-wrap.s-critical .ob-gauge-value { stroke: var(--ob-danger); }
.ob-score-wrap.s-critical .ob-score-label { color: var(--ob-danger); }

.ob-divider { height: 1px; background: var(--ob-line-2); margin: 1.2rem 0; border: 0; }

.ob-res-h {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--ob-faint); margin: 0 0 .65rem;
}
.ob-res-h svg { width: 14px; height: 14px; }
.ob-res-block { margin-bottom: 1.25rem; }
.ob-res-block:last-child { margin-bottom: 0; }

/* Barres par famille */
.ob-fam-row { margin-bottom: .7rem; }
.ob-fam-row:last-child { margin-bottom: 0; }
.ob-fam-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: .84rem; margin-bottom: .28rem; }
.ob-fam-name { font-weight: 600; color: var(--ob-ink); }
.ob-fam-pct { color: var(--ob-faint); font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 500; }
.ob-fam-pct strong { color: var(--ob-ink); font-weight: 700; }
.ob-fam-bar { position: relative; height: 11px; border-radius: 6px; background: var(--ob-surface-2); border: 1px solid var(--ob-line); overflow: hidden; }
.ob-fam-band { position: absolute; top: 0; bottom: 0; background: rgba(54,73,124,.12); border-left: 1px dashed rgba(54,73,124,.5); border-right: 1px dashed rgba(54,73,124,.5); }
.ob-fam-fill { position: absolute; top: 1px; bottom: 1px; left: 1px; border-radius: 5px; background: var(--ob-primary); min-width: 3px; transition: width .6s cubic-bezier(.22,1,.36,1), background .3s ease; }
.ob-fam-row.status-low .ob-fam-fill, .ob-fam-row.status-high .ob-fam-fill { background: var(--ob-accent); }

/* Chips */
.ob-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ob-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600; border-radius: 999px; padding: .3rem .75rem .3rem .5rem;
  background: var(--ob-accent-soft); color: #7c5514; border: 1px solid #E4D3B2;
}
.ob-chip svg { width: 14px; height: 14px; opacity: .85; }
.ob-chip .qty {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 .3rem; border-radius: 999px; background: rgba(169,119,46,.18); font-weight: 700; font-size: .78rem;
}
.ob-chip.critical { background: var(--ob-danger-soft); color: #8f2f20; border-color: #E6C6BE; }
.ob-chip.critical .qty { background: rgba(187,74,56,.16); }
.ob-chip.surplus { background: var(--ob-primary-soft); color: var(--ob-primary-ink); border-color: #CDD3E6; }
.ob-chip.surplus .qty { background: rgba(54,73,124,.14); }

/* Observations */
.ob-findings { list-style: none; margin: 0; padding: 0; }
.ob-findings li {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .87rem; padding: .6rem .7rem; border-radius: 11px; margin-bottom: .45rem; font-weight: 500;
  background: var(--ob-amber-soft); border: 1px solid #E4D3B2; color: #6f4e15;
}
.ob-findings li:last-child { margin-bottom: 0; }
.ob-findings li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .08rem; }
.ob-findings li.severity-critical { background: var(--ob-danger-soft); border-color: #E6C6BE; color: #7f281b; }
.ob-findings li.severity-info { background: var(--ob-primary-soft); border-color: #CDD3E6; color: #2c3860; }
.ob-findings li.severity-ok { background: var(--ob-green-soft); border-color: #BFE0CF; color: #1c5c40; }

/* Actions */
.ob-res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.3rem; }
.ob-btn-link {
  display: inline-flex; align-items: center; gap: .4rem; background: none; border: none;
  color: var(--ob-muted); font-family: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  padding: .5rem .7rem; border-radius: 9px; transition: .15s;
}
.ob-btn-link:hover { color: var(--ob-primary); background: var(--ob-surface-2); }
.ob-btn-link svg { width: 15px; height: 15px; }
.ob-btn {
  display: inline-flex; align-items: center; gap: .45rem; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 600; padding: .58rem 1rem; transition: all .15s ease;
  border: 1px solid var(--ob-line); background: var(--ob-surface); color: var(--ob-ink);
}
.ob-btn svg { width: 16px; height: 16px; }
.ob-btn:hover { border-color: var(--ob-primary); color: var(--ob-primary); background: var(--ob-surface-2); }
.ob-btn.primary { background: var(--ob-primary); border-color: var(--ob-primary); color: #fff; box-shadow: var(--ob-btn-sh); }
.ob-btn.primary:hover { background: #2d3d6b; color: #fff; transform: translateY(-1px); }
.ob-methodo-note { display: flex; gap: .4rem; font-size: .78rem; color: var(--ob-faint); margin-top: 1.1rem; font-weight: 500; line-height: 1.5; }
.ob-methodo-note svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: .15rem; }
.ob-methodo-note a { color: var(--ob-primary); }

/* ---------- Contenu SEO ---------- */
.ob-prose { max-width: 820px; margin-top: 3.5rem; }
.ob-prose h2 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em; color: var(--ob-ink); margin: 2.6rem 0 .8rem; }
.ob-prose h3 { font-size: 1.12rem; font-weight: 600; color: var(--ob-ink); margin: 1.7rem 0 .5rem; }
.ob-prose p, .ob-prose li { font-size: .98rem; color: var(--ob-ink); font-weight: 400; }
.ob-prose p { line-height: 1.7; }
.ob-prose strong { font-weight: 600; }
.ob-prose a { color: var(--ob-primary); }

.ob-tablewrap { overflow-x: auto; margin: 1.1rem 0 1.6rem; border: 1px solid var(--ob-line); border-radius: var(--ob-radius-sm); background: var(--ob-surface); box-shadow: var(--ob-shadow-sm); }
.ob-table { border-collapse: collapse; width: 100%; font-size: .89rem; min-width: 480px; }
.ob-table th, .ob-table td { padding: .5rem .85rem; text-align: left; border-bottom: 1px solid var(--ob-line-2); }
.ob-table th { background: var(--ob-surface-2); font-weight: 700; color: var(--ob-ink); font-size: .8rem; }
.ob-table tr:last-child td { border-bottom: none; }
.ob-table td:not(:first-child), .ob-table th:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }
.ob-table tbody tr:hover td { background: var(--ob-surface-2); }

/* FAQ */
.ob-faq details { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-sm); padding: .95rem 1.2rem; margin-bottom: .6rem; transition: box-shadow .15s ease; }
.ob-faq details[open] { box-shadow: var(--ob-shadow-sm); }
.ob-faq summary { font-weight: 600; cursor: pointer; color: var(--ob-ink); font-size: .98rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ob-faq summary::-webkit-details-marker { display: none; }
.ob-faq summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--ob-accent); line-height: 1; flex-shrink: 0; transition: transform .2s ease; }
.ob-faq details[open] summary::after { transform: rotate(45deg); }
.ob-faq details p { margin: .65rem 0 0; color: var(--ob-muted); font-weight: 400; }

/* ---------- CTA + liens ---------- */
.ob-cta {
  margin-top: 3.5rem; background: linear-gradient(135deg, #36497C, #2A3660);
  border-radius: var(--ob-radius); padding: 2.4rem 2rem; color: #E7E9F2; text-align: center;
  box-shadow: var(--ob-shadow);
}
.ob-cta h3 { color: #fff; font-size: 1.35rem; margin: 0 0 .55rem; letter-spacing: -.02em; font-weight: 700; }
.ob-cta p { margin: 0 auto 1.4rem; max-width: 580px; color: #C4CBE0; font-size: .98rem; font-weight: 500; }
.ob-cta a {
  display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--ob-primary); text-decoration: none;
  font-weight: 700; padding: .75rem 1.6rem; border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease;
}
.ob-cta a svg { width: 17px; height: 17px; }
.ob-cta a:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }

.ob-related { margin-top: 2.75rem; }
.ob-related h3 { font-size: 1.05rem; color: var(--ob-ink); margin-bottom: .75rem; font-weight: 600; }
.ob-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.ob-links a {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: 999px;
  color: var(--ob-primary); text-decoration: none; font-size: .88rem; font-weight: 600; padding: .5rem 1.05rem; transition: all .15s ease;
}
.ob-links a svg { width: 15px; height: 15px; color: var(--ob-accent); }
.ob-links a:hover { border-color: var(--ob-primary); transform: translateY(-1px); box-shadow: var(--ob-shadow-sm); }

.ob-footer { border-top: 1px solid var(--ob-line); margin-top: 3.5rem; }
.ob-footer p { max-width: 1120px; margin: 0 auto; padding: 1.5rem; color: var(--ob-faint); font-size: .85rem; font-weight: 500; }
.ob-footer a { color: var(--ob-muted); text-decoration: none; }
.ob-footer a:hover { color: var(--ob-primary); }

/* ---------- Toast ---------- */
.ob-toast {
  position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%) translateY(20px);
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ob-ink); color: #fff; font-size: .9rem; font-weight: 600;
  padding: .65rem 1.25rem; border-radius: 12px; opacity: 0; pointer-events: none; transition: .25s ease; z-index: 50;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.5);
}
.ob-toast svg { width: 16px; height: 16px; color: #56B98C; }
.ob-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Impression : tout sur une page A4 ---------- */
@media print {
  @page { size: A4; margin: 11mm; }

  /* Éléments hors diagnostic + steppers (inutiles sur papier : on garde le nombre) */
  .ob-header, .ob-types, .ob-hero, .ob-input-actions, .ob-res-actions,
  .ob-cta, .ob-related, .ob-footer, .ob-prose, .ob-toast, .ob-methodo-note,
  .ob-step { display: none !important; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body.ob-body { background: #fff; font-size: 10.5px; }
  .ob-page { max-width: none; padding: 0; margin: 0; }

  /* Les deux panneaux côte à côte, sans coupure interne */
  .ob-tool { grid-template-columns: 1.08fr 1fr; gap: 12px; align-items: start; break-inside: avoid; }
  .ob-panel { box-shadow: none; border: 1px solid #D9D4C8; border-radius: 10px; padding: 11px 13px; break-inside: avoid; }
  .ob-results { position: static; }

  .ob-input-head { margin-bottom: 6px; }
  .ob-input-head h2 { font-size: 13.5px; }
  .ob-input-hint { display: none; }

  /* Liste d'instruments compacte, sur 2 colonnes */
  .ob-family { margin-bottom: 7px; break-inside: avoid; }
  .ob-family-title { font-size: 8.5px; margin-bottom: 3px; }
  .ob-rows { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .ob-row { padding: 1px 0; break-inside: avoid; }
  .ob-row:hover { background: none; }
  .ob-row-name { font-size: 10px; font-weight: 500; }
  .ob-row-target { font-size: 8px; min-height: 0; margin-top: 0; }
  .ob-stepper { gap: 0; }
  .ob-count { width: 24px; font-size: 10.5px; padding: 0; border: none !important; background: none !important; }
  .ob-count:not(.nonzero) { color: #b9b6ae; }

  /* Diagnostic compact */
  .ob-score-wrap { gap: 12px; padding: 0 0 4px; break-inside: avoid; }
  .ob-gauge { width: 76px; height: 76px; }
  .ob-score-label { font-size: 12.5px; }
  .ob-score-total { font-size: 9px; margin-top: 1px; }
  .ob-divider { margin: 8px 0; }
  .ob-res-block { margin-bottom: 8px; break-inside: avoid; }
  .ob-res-h { font-size: 8.5px; margin-bottom: 4px; }
  .ob-fam-row { margin-bottom: 4px; break-inside: avoid; }
  .ob-fam-bar { height: 9px; }
  .ob-chips { gap: 4px; }
  .ob-chip { font-size: 9.5px; padding: 1px 7px 1px 5px; break-inside: avoid; }
  .ob-findings li { font-size: 9.5px; padding: 4px 6px; margin-bottom: 3px; break-inside: avoid; }
}