/* ============================================================================
 * Business Plan Express — feuille de style unique.
 *
 * Organisation : jetons de couleur → primitives → composants → document
 * → impression → adaptations mobiles.
 * Les couleurs des graphiques sont exposées en variables pour que le SVG
 * suive le thème sans être régénéré.
 * ==========================================================================*/

/* ── Jetons ──────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --plane:        #f9f9f7;
  --surface:      #fcfcfb;
  --surface-2:    #f2f1ed;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --muted:        #898781;
  --grid:         #e1e0d9;
  --axis:         #c3c2b7;
  --border:       rgba(11, 11, 11, .10);
  --border-strong:rgba(11, 11, 11, .18);

  --series-1:     #2a78d6;
  --series-2:     #eb6834;
  --accent:       #2a78d6;
  --accent-ink:   #ffffff;
  --accent-soft:  #eef4fc;

  --good:         #0ca30c;
  --good-soft:    #f0f9f0;
  --warning:      #fab219;
  --warning-soft: #fdf8ec;
  --critical:     #d03b3b;
  --critical-soft:#fdf3f3;

  --shadow-sm: 0 1px 2px rgba(11, 11, 11, .05), 0 1px 1px rgba(11, 11, 11, .04);
  --shadow-md: 0 4px 16px rgba(11, 11, 11, .07), 0 1px 3px rgba(11, 11, 11, .05);

  --radius:   12px;
  --radius-sm: 8px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:        #0d0d0d;
    --surface:      #1a1a19;
    --surface-2:    #232322;
    --ink:          #ffffff;
    --ink-2:        #c3c2b7;
    --muted:        #898781;
    --grid:         #2c2c2a;
    --axis:         #383835;
    --border:       rgba(255, 255, 255, .10);
    --border-strong:rgba(255, 255, 255, .20);

    --series-1:     #3987e5;
    --series-2:     #d95926;
    --accent:       #3987e5;
    --accent-ink:   #ffffff;
    --accent-soft:  #17283c;

    --good-soft:    #12240f;
    --warning-soft: #2a2110;
    --critical-soft:#2c1414;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:        #0d0d0d;
  --surface:      #1a1a19;
  --surface-2:    #232322;
  --ink:          #ffffff;
  --ink-2:        #c3c2b7;
  --muted:        #898781;
  --grid:         #2c2c2a;
  --axis:         #383835;
  --border:       rgba(255, 255, 255, .10);
  --border-strong:rgba(255, 255, 255, .20);

  --series-1:     #3987e5;
  --series-2:     #d95926;
  --accent:       #3987e5;
  --accent-ink:   #ffffff;
  --accent-soft:  #17283c;

  --good-soft:    #12240f;
  --warning-soft: #2a2110;
  --critical-soft:#2c1414;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, .45);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--accent); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { color: var(--accent); display: flex; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.brand-name b { font-weight: 750; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.save-badge {
  font-size: 12px; color: var(--muted);
  opacity: 0; transition: opacity .3s;
}
.save-badge.is-on { opacity: 1; }
.save-badge::before { content: '✓ '; color: var(--good); }

.icon-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.ico-moon { display: none; }
:root[data-theme="dark"] .ico-sun { display: none; }
:root[data-theme="dark"] .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sun { display: none; }
  :root:not([data-theme="light"]) .ico-moon { display: block; }
}

.topbar-progress { height: 3px; background: var(--grid); }
.topbar-progress span {
  display: block; height: 100%; width: 0;
  background: var(--accent); transition: width .35s ease;
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  font: inherit; font-weight: 550; font-size: 15px;
  padding: 10px 18px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, black); }

.btn-soft { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
.btn-soft:hover:not(:disabled) { background: var(--surface); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--border-strong); }

.btn-link { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 10px 6px; }
.btn-link:hover { color: var(--ink-2); }

.btn-lg { font-size: 17px; padding: 14px 26px; border-radius: 11px; }
.btn-sm { font-size: 13.5px; padding: 7px 13px; }

.linkish { color: var(--accent); text-decoration: underline; cursor: pointer; }

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 40px; }
.hero-inner { max-width: 780px; }

.eyebrow {
  font-size: 13px; color: var(--muted); margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.hero h1 { font-size: clamp(34px, 5.6vw, 56px); letter-spacing: -.03em; margin-bottom: 18px; }
.hero h1 .hl { color: var(--accent); }
.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-2); max-width: 62ch; }
/* La durée du questionnaire, annoncée franchement : mieux vaut le dire ici
   que perdre le visiteur à l'étape 6. Un cran plus discret que l'accroche. */
.lede-2 { font-size: clamp(15px, 1.8vw, 16.5px); color: var(--muted); max-width: 60ch; margin-top: 14px; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 18px; }

.hero-points { display: flex; gap: 26px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 14px; color: var(--ink-2); font-size: 15px; }
.hero-points li::before { content: '·'; color: var(--accent); font-weight: 700; margin-right: 8px; }
.hero-points li:first-child::before { content: '✓'; }

.hero-import { font-size: 14px; color: var(--muted); margin: 0; }

.section { padding: 44px 0; border-top: 1px solid var(--border); }
.section > h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 26px; letter-spacing: -.02em; }

.steps-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.steps-grid li { position: relative; padding-left: 46px; }
.step-num {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.steps-grid h3 { font-size: 17px; margin-bottom: 6px; }
.steps-grid p { color: var(--ink-2); font-size: 15px; margin: 0; }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 15.5px; margin-bottom: 5px; }
.card p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

.faq details {
  border-bottom: 1px solid var(--border); padding: 14px 0;
}
.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; max-width: 78ch; }

/* ── Questionnaire ───────────────────────────────────────────────────────── */
.wizard-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  gap: 34px;
  padding-top: 30px; padding-bottom: 60px;
  align-items: start;
}

.rail { position: sticky; top: 90px; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { margin-bottom: 2px; }
.rail button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; font: inherit; text-align: left;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--ink-2);
}
.rail button:hover:not(:disabled) { background: var(--surface-2); }
.rail button:disabled { opacity: .45; cursor: default; }
.rail-num {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 650;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.rail-label { font-size: 14.5px; }
.rail li.is-current button { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.rail li.is-current .rail-num { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.rail li.is-done .rail-num { background: var(--good); color: #fff; border-color: transparent; }
.rail-foot { font-size: 12.5px; color: var(--muted); margin: 18px 10px 0; line-height: 1.5; }

.wizard-main { min-width: 0; }
.step-head { margin-bottom: 24px; }
.step-meta { font-size: 13px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.step-head h2 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.025em; margin-bottom: 6px; }
.step-sub { color: var(--ink-2); margin: 0; font-size: 16px; }

.step-form { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 26px; }
.field { flex: 1 1 100%; min-width: 0; }
.f-half  { flex: 1 1 calc(50% - 9px); min-width: 220px; }
.f-third { flex: 1 1 calc(33.333% - 12px); min-width: 190px; }

.f-label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.f-label .req { color: var(--critical); }
.f-help { font-size: 13.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }

.f-input {
  width: 100%; font: inherit; font-size: 15.5px;
  padding: 11px 13px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.f-input::placeholder { color: var(--muted); opacity: .8; }
.f-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.f-textarea { resize: vertical; line-height: 1.55; min-height: 76px; }
.f-select { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.f-money { position: relative; display: flex; align-items: center; }
.f-money .f-input { padding-right: 68px; }
.f-suffix {
  position: absolute; right: 12px; font-size: 13.5px; color: var(--muted);
  pointer-events: none; white-space: nowrap;
}

.field.has-error .f-input { border-color: var(--critical); }
.field.has-error .f-label { color: var(--critical); }

.field.is-free .f-textarea { background: var(--accent-soft); border-style: dashed; }

.f-set { border: none; margin: 0; padding: 0; }
.f-set legend { padding: 0; }
.f-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 14.5px; cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: var(--accent); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 550; }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Listes répétables */
.rep { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.rep-row {
  display: flex; gap: 10px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px;
}
.rep-cell { min-width: 88px; }
/* hauteur réservée à deux lignes : les intitulés qui reviennent à la ligne
   ne décalent plus les champs les uns par rapport aux autres */
.rep-label { display: block; font-size: 12px; line-height: 1.25; color: var(--muted); margin-bottom: 4px; min-height: 2.5em; }
.rep-del {
  flex: 0 0 auto; width: 32px; height: 40px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.rep-del:hover { color: var(--critical); border-color: var(--critical); }
.rep-empty { color: var(--muted); font-size: 14.5px; margin: 0 0 10px; font-style: italic; }
.rep-sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.sugg {
  font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px;
  border: 1px dashed var(--border-strong); background: transparent; color: var(--ink-2); cursor: pointer;
}
.sugg:hover { border-style: solid; border-color: var(--accent); color: var(--accent); }

/* Volumes de vente */
.vol-grid { display: flex; flex-direction: column; gap: 10px; }
.vol-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px 120px;
  gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.vol-name { font-weight: 600; font-size: 15px; display: flex; flex-direction: column; gap: 2px; }
.vol-price { font-weight: 400; font-size: 13px; color: var(--muted); }
.vol-input { display: flex; flex-direction: column; gap: 4px; }
.vol-daily { font-size: 12.5px; color: var(--muted); }
.vol-total { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.vol-sum { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }
.vol-year { color: var(--muted); }

/* Saisonnalité mois par mois */
.m12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.m12-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m12-cell span { font-size: 11.5px; color: var(--muted); text-align: center; }
.m12-cell input {
  width: 100%; font: inherit; font-size: 14px; text-align: center;
  padding: 8px 2px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 6px;
  /* les flèches d'un champ numérique mangent la largeur et rognent le
     troisième chiffre : sur douze cellules, il n'y a pas la place */
  appearance: textfield; -moz-appearance: textfield;
}
.m12-cell input::-webkit-outer-spin-button,
.m12-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m12-cell input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.m12-hint { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

@media (max-width: 820px) {
  .m12 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}

.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--border); padding-top: 20px; }
.wizard-nav-right { display: flex; align-items: center; gap: 8px; }

.wizard-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }

/* Relais du contenu de la colonne de droite quand elle disparaît (≤ 1080 px).
   Les deux blocs sont exclusifs : jamais de doublon de publicité. */
.wizard-flow { display: none; margin-top: 30px; }
.wizard-flow .ad-wrap { margin-top: 22px; margin-bottom: 0; }

.tip-box {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.tip-box h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 6px; }
.tip-box p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55; }

/* ── Écran de génération ─────────────────────────────────────────────────── */
.gen-wrap { max-width: 620px; padding-top: 80px; padding-bottom: 80px; text-align: center; }
.gen-wrap h2 { font-size: 26px; margin-bottom: 24px; }
.gen-bar { height: 6px; background: var(--grid); border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.gen-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .35s ease; }
.gen-list { list-style: none; padding: 0; margin: 0 0 34px; text-align: left; display: inline-block; }
.gen-list li { color: var(--muted); padding: 5px 0 5px 28px; position: relative; font-size: 15px; transition: color .2s; }
.gen-list li::before { content: '○'; position: absolute; left: 0; }
.gen-list li.is-active { color: var(--ink); }
.gen-list li.is-done { color: var(--ink-2); }
.gen-list li.is-done::before { content: '✓'; color: var(--good); }

/* ── Barre d'outils du résultat ──────────────────────────────────────────── */
.result-toolbar {
  position: sticky; top: 60px; z-index: 30;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.toolbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.toolbar-left { display: flex; flex-direction: column; }
.toolbar-left strong { font-size: 16px; }
.toolbar-hint { font-size: 13px; color: var(--muted); }
.toolbar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar-btns .btn { font-size: 14px; padding: 9px 14px; }

.restart-wrap { padding: 10px 20px 60px; text-align: center; }

/* ── Le document ─────────────────────────────────────────────────────────── */
.doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 54px clamp(22px, 5vw, 68px) 44px;
  margin: 26px auto 26px;
  max-width: 900px;
  font-size: 16px;
}
.doc p { max-width: 72ch; color: var(--ink-2); }

.doc-cover { border-bottom: 2px solid var(--ink); padding-bottom: 26px; margin-bottom: 34px; }
.doc-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--muted); font-weight: 650; margin-bottom: 10px; }
.doc-cover h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.03em; margin-bottom: 10px; color: var(--ink); }
.doc-subtitle { font-size: 18px; color: var(--ink-2); max-width: 60ch; margin-bottom: 16px; }
.doc-author { font-weight: 650; color: var(--ink); margin-bottom: 6px; }
.doc-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 14px; }

.doc-toc {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 18px 22px; margin-bottom: 34px;
}
.doc-toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.doc-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 30px; }
.doc-toc li { margin-bottom: 4px; break-inside: avoid; }
.doc-toc a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.doc-toc a:hover { color: var(--accent); text-decoration: underline; }

.doc-h2 {
  /* l'en-tête et la barre d'outils sont fixes : sans cette marge, un titre
     atteint par le sommaire se range derrière elles */
  scroll-margin-top: 156px;
  font-size: clamp(21px, 3vw, 27px); letter-spacing: -.02em;
  margin: 46px 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 12px;
  color: var(--ink);
}
.doc-num {
  flex: 0 0 auto; font-size: 14px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 6px; padding: 2px 8px;
}
.doc-h3 { font-size: 17.5px; margin: 30px 0 10px; color: var(--ink); }

.doc-list { margin: 0 0 18px; padding-left: 22px; color: var(--ink-2); }
.doc-list li { margin-bottom: 5px; }

.doc-dl { margin: 0 0 20px; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.doc-dl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1px; background: var(--border); }
.doc-dl dt { background: var(--surface-2); padding: 10px 14px; font-weight: 600; font-size: 14.5px; }
.doc-dl dd { background: var(--surface); padding: 10px 14px; margin: 0; color: var(--ink-2); font-size: 15px; }

.doc-free { border-left: 3px solid var(--grid); padding-left: 18px; margin: 0 0 20px; }
.doc-free p { margin-bottom: .8em; }
.doc-free p:last-child { margin-bottom: 0; }

.doc-table-wrap { overflow-x: auto; margin: 0 0 24px; }
.doc-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.doc-table caption { text-align: left; color: var(--muted); font-size: 13.5px; padding-bottom: 8px; }
.doc-table th, .doc-table td {
  border-bottom: 1px solid var(--border);
  padding: 9px 12px; text-align: left; font-weight: 400; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.doc-table thead th {
  border-bottom: 1px solid var(--axis); color: var(--ink);
  font-weight: 650; font-size: 13.5px; white-space: nowrap;
}
.doc-table tbody th { color: var(--ink); font-weight: 550; }
.doc-table tr.is-total th, .doc-table tr.is-total td {
  border-top: 1px solid var(--axis); font-weight: 700; color: var(--ink);
}
.doc-table .al-r { text-align: right; }
.doc-table .al-c { text-align: center; }
.doc-table-wrap.is-wide .doc-table { font-size: 13px; }
.doc-table-wrap.is-wide th, .doc-table-wrap.is-wide td { padding: 7px 9px; white-space: nowrap; }

.doc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 24px 0 28px; }
.kpi {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-label { font-size: 12.5px; color: var(--muted); }
.kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.kpi-sub { font-size: 12.5px; color: var(--muted); }
.kpi-good .kpi-value { color: var(--good); }
.kpi-bad .kpi-value { color: var(--critical); }

.doc-callout {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 12px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 18px; font-size: 15px; color: var(--ink);
  max-width: none;
}
.doc-callout.callout-critical { border-left-color: var(--critical); background: var(--critical-soft); }
.doc-callout.callout-warn { border-left-color: var(--warning); background: var(--warning-soft); }
.doc-callout.callout-good { border-left-color: var(--good); background: var(--good-soft); }
.doc-callout.callout-critical::before { content: '⚠ '; font-weight: 700; }
.doc-callout.callout-warn::before { content: '⚑ '; font-weight: 700; }
.doc-callout.callout-good::before { content: '✓ '; font-weight: 700; }

.doc-swot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 24px; }
.swot-q { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface-2); }
.swot-q h4 { font-size: 14px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.swot-good h4 { color: var(--good); }
.swot-bad h4 { color: var(--critical); }
.swot-q ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); }
.swot-q li { margin-bottom: 4px; }
.swot-empty { color: var(--muted); margin: 0; }

.doc-chart { margin: 0 0 26px; }
.doc-disclaimer { margin-top: 46px; border-top: 1px solid var(--border); padding-top: 16px; }
.doc-disclaimer p { font-size: 13px; color: var(--muted); max-width: none; }

/* ── Graphiques ──────────────────────────────────────────────────────────── */
.viz {
  margin: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 14px 10px;
}
.viz svg { width: 100%; height: auto; display: block; }
.viz-title { font-size: 15px; font-weight: 650; color: var(--ink); margin-bottom: 10px; padding: 0 4px; display: flex; flex-direction: column; gap: 2px; }
.viz-sub { font-size: 13px; font-weight: 400; color: var(--muted); }

.viz-grid { stroke: var(--grid); stroke-width: 1; fill: none; }
.viz-zero { stroke: var(--axis); }
.viz-axis { stroke: var(--grid); stroke-width: 1; }
.viz-marker { stroke: var(--muted); stroke-width: 1; }
.viz-tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.viz-rowlabel { fill: var(--ink-2); font-size: 12px; font-family: var(--font); }
.viz-label { fill: var(--ink); font-size: 12px; font-weight: 600; font-family: var(--font); }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.s1 { stroke: var(--series-1); }
.viz-line.s2 { stroke: var(--series-2); }
.viz-area.s1 { fill: var(--series-1); opacity: .10; stroke: none; }
.viz-dot { stroke: var(--surface); stroke-width: 2; }
.viz-dot.s1 { fill: var(--series-1); }
.viz-dot.s2 { fill: var(--series-2); }
.viz-bar { transition: opacity .12s; }
.viz-bar.pos { fill: var(--series-1); }
.viz-bar.neg { fill: var(--critical); }
.viz-bar:hover, .viz-dot:hover { opacity: .78; }

.viz-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 4px 6px 4px; font-size: 13.5px; color: var(--ink-2); }
.viz-legend .key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.viz-legend .key.s1 { background: var(--series-1); }
.viz-legend .key.s2 { background: var(--series-2); }

/* ── Vérification de cohérence (offre payante) ───────────────────────────── */
.premium-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 26px clamp(20px, 4vw, 34px); margin: 26px auto 0; max-width: 900px;
}

.premium-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 20px; }
.premium-headtext { flex: 1 1 260px; min-width: 0; }
.premium-kicker {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--accent); margin: 0 0 4px;
}
.premium-head h2 { font-size: clamp(20px, 3vw, 26px); letter-spacing: -.02em; margin: 0 0 4px; }
.premium-sub { font-size: 14.5px; color: var(--muted); margin: 0; }

.score { position: relative; flex: 0 0 auto; width: 104px; height: 104px; display: grid; place-items: center; }
.score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score-track { fill: none; stroke: var(--grid); stroke-width: 9; }
.score-fill {
  fill: none; stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .8s ease;
}
.score-good .score-fill { stroke: var(--good); }
.score-warn .score-fill { stroke: var(--warning); }
.score-critical .score-fill { stroke: var(--critical); }
.score-num { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.score-num b { font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.score-num span { font-size: 11px; color: var(--muted); margin-top: 2px; }

.premium-list { list-style: none; padding: 0; margin: 0 0 22px; }
.premium-list li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.premium-list .sev {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 9px; border-radius: 999px;
}
.sev-critical .sev { background: var(--critical-soft); color: var(--critical); }
.sev-major .sev { background: var(--warning-soft); color: #8a5d00; }
.sev-minor .sev { background: var(--surface-2); color: var(--ink-2); }
:root[data-theme="dark"] .sev-major .sev { color: var(--warning); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sev-major .sev { color: var(--warning); }
}
.premium-list .ftitle { flex: 1 1 200px; font-weight: 550; font-size: 15.5px; }
.premium-list .flocked { display: flex; gap: 5px; flex: 0 0 auto; }
.premium-list .flocked i {
  display: block; width: 34px; height: 9px; border-radius: 3px;
  background: var(--grid);
}
.premium-list .flocked i:nth-child(2) { width: 22px; }
.premium-list .flocked i:nth-child(3) { width: 46px; }
.premium-more { color: var(--muted); font-style: italic; font-size: 14.5px; border-bottom: none !important; }
.premium-none { color: var(--ink-2); font-size: 15.5px; margin-bottom: 22px; }

.premium-offer {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 26px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: 22px 24px;
}
.premium-offer h3 { font-size: 18px; margin-bottom: 12px; }
.premium-offer ul { margin: 0 0 14px; padding-left: 20px; font-size: 15px; color: var(--ink-2); }
.premium-offer li { margin-bottom: 6px; }
.premium-honest {
  font-size: 13.5px; color: var(--ink-2); margin: 0;
  border-left: 2px solid var(--accent); padding-left: 12px;
}
.premium-offer-cta { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.premium-offer-cta .btn { width: 100%; }
.premium-fine { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }

.premium-h3 { font-size: 18px; margin: 30px 0 12px; }

.verdict { border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 24px; border-left: 3px solid; }
.verdict h3 { font-size: 16px; margin-bottom: 6px; }
.verdict p { margin: 0 0 8px; font-size: 15.5px; }
.verdict ul { margin: 0; padding-left: 20px; font-size: 15px; color: var(--ink-2); }
.verdict li { margin-bottom: 5px; }
.verdict-lead { font-weight: 600; margin-bottom: 6px !important; }
.verdict-good { background: var(--good-soft); border-left-color: var(--good); }
.verdict-good h3 { color: var(--good); }
.verdict-warn { background: var(--warning-soft); border-left-color: var(--warning); }
.verdict-critical { background: var(--critical-soft); border-left-color: var(--critical); }
.verdict-critical h3 { color: var(--critical); }

.finding {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 18px; margin-bottom: 12px; border-left: 3px solid var(--grid);
}
.finding.sev-critical { border-left-color: var(--critical); }
.finding.sev-major { border-left-color: var(--warning); }
.finding header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.finding .cat { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.finding h4 { flex: 1 1 100%; font-size: 16px; margin: 0; }
.finding dl { display: grid; gap: 1px; margin: 0 0 10px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.finding dl > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1px; background: var(--border); }
.finding dt { background: var(--surface-2); padding: 8px 12px; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.finding dd { background: var(--surface); padding: 8px 12px; margin: 0; font-size: 14.5px; }
.finding .prop dt { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.finding .prop dd { font-weight: 600; }
.finding .why { font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.6; }

.compare .delta.up { color: var(--good); font-weight: 600; }
.compare .delta.down { color: var(--critical); font-weight: 600; }

.premium-actions { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.switcher { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px; margin-bottom: 10px; }
.switcher button {
  font: inherit; font-size: 14px; padding: 7px 16px; border-radius: 999px;
  border: none; background: none; color: var(--ink-2); cursor: pointer;
}
.switcher button.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

@media (max-width: 820px) {
  .premium-card { border-radius: 0; margin-left: -20px; margin-right: -20px; max-width: none; }
  .premium-offer { grid-template-columns: minmax(0, 1fr); }
  .finding dl > div { grid-template-columns: minmax(0, 1fr); }
  .switcher { display: flex; width: 100%; }
  .switcher button { flex: 1 1 auto; }
}

/* ── Publicité ───────────────────────────────────────────────────────────── */
.ad-wrap { margin: 26px auto; display: flex; justify-content: center; }
.ad-slot { width: 100%; max-width: 970px; }
.ad-slot.is-placeholder {
  display: grid; place-items: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  color: var(--muted); font-size: 13px; background: var(--surface-2);
}
.wizard-aside .ad-slot { max-width: 300px; }
.wizard-flow .ad-slot { max-width: 336px; margin: 0 auto; }

/* Réservation de la hauteur avant l'arrivée de l'annonce : sans elle, le texte
   déjà lu se décale sous les yeux du visiteur au moment où la publicité se
   charge. La place est rendue par ads.js si la régie n'a rien à servir. */
.ad-slot.is-live[data-format="horizontal"] { min-height: 90px; }
.ad-slot.is-live[data-format="rectangle"]  { min-height: 250px; }
.ad-slot.is-live[data-format="vertical"]   { min-height: 320px; }
.ad-slot.is-live.is-settled { min-height: 0; }   /* annonce arrivée : elle impose sa taille */
.ad-slot.is-empty { display: none !important; }  /* rien à servir : pas de bandeau vide */

/* ── Offre de téléchargement ─────────────────────────────────────────────── */
.offer {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 26px;
  transition: box-shadow .3s;
}
.offer.is-flash { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); }
.offer h2 { font-size: 21px; margin-bottom: 8px; }
.offer-lede { color: var(--ink-2); margin-bottom: 14px; max-width: 60ch; }
.offer-list { list-style: none; padding: 0; margin: 0; }
.offer-list li { font-size: 15px; color: var(--ink-2); margin-bottom: 7px; padding-left: 22px; position: relative; }
.offer-list li::before { content: '✓'; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.offer-buy { text-align: center; align-self: center; }
.offer-price { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 0; color: var(--ink); }
.offer-once { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.offer-buy .btn { width: 100%; white-space: normal; line-height: 1.3; }
.offer-fine { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }

.offer.is-unlocked {
  display: block; border-left-color: var(--good);
  background: var(--good-soft); padding: 16px 20px;
}
.offer-done { margin: 0; font-size: 15px; color: var(--ink-2); }
.offer-done::before { content: '✓ '; color: var(--good); font-weight: 700; }

/* Bouton dont le téléchargement est encore fermé : visible et cliquable — le
   clic renvoie à l'offre — mais visiblement en attente. */
.btn.is-locked { opacity: .62; }
.btn.is-locked::after { content: ' 🔒'; font-size: 12px; }

@media (max-width: 780px) {
  .offer { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 20px; }
  .offer-buy { text-align: left; }
  .offer-price { font-size: 30px; }
}

/* ── Guides ──────────────────────────────────────────────────────────────── */
.guide-wrap { padding-top: 26px; padding-bottom: 20px; }
.guide-crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }
.guide-crumb a { color: var(--ink-2); }
.guide-crumb span { margin: 0 4px; }

.guide-intro { max-width: 66ch; margin-bottom: 34px; }
.guide-intro h1 { font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -.03em; margin-bottom: 16px; }
.guide-intro p { color: var(--ink-2); font-size: 17px; margin-bottom: 12px; }
.guide-intro-note { font-size: 15px !important; color: var(--muted) !important; }

.guide-list { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; }
.guide-list a {
  display: block; text-decoration: none; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); transition: border-color .15s, transform .15s;
}
.guide-list a:hover { border-color: var(--accent); transform: translateY(-1px); }
.guide-kicker { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); font-weight: 650; margin-bottom: 7px; }
.guide-list b { display: block; font-size: 19px; color: var(--ink); margin-bottom: 7px; line-height: 1.3; }
.guide-desc { display: block; font-size: 15px; color: var(--ink-2); line-height: 1.55; }

/* Le corps d'un guide reprend la mise en page du document généré, mais en
   colonne de lecture : au-delà de 70 caractères l'œil perd la ligne. */
.doc.guide { max-width: 74ch; margin: 0 auto; }
.doc.guide p { font-size: 16.5px; line-height: 1.7; margin-bottom: 16px; }
.doc.guide .doc-list li { margin-bottom: 10px; line-height: 1.65; }

.guide-cta {
  max-width: 74ch; margin: 44px auto 0; padding: 26px 28px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
}
.guide-cta h2 { font-size: 21px; margin-bottom: 10px; }
.guide-cta p { color: var(--ink-2); margin-bottom: 16px; max-width: 62ch; }

.guide-more { max-width: 74ch; margin: 44px auto 0; }
.guide-more h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 14px; }
.guide-more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.guide-more a {
  display: block; text-decoration: none; padding: 15px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.guide-more a:hover { border-color: var(--accent); }
.guide-more b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.guide-more span { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; }

@media (max-width: 700px) {
  .doc.guide { padding: 24px 20px; }
  .guide-cta, .guide-more { margin-top: 32px; }
  .guide-cta { padding: 22px 20px; }
}

/* ── Notification ────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--ink); color: var(--plane);
  padding: 12px 20px; border-radius: 10px; font-size: 14.5px;
  box-shadow: var(--shadow-md); z-index: 90; max-width: min(92vw, 520px);
  opacity: 0; transition: opacity .22s, transform .22s; text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding: 32px 0 46px; margin-top: 40px; }
.footer-inner { max-width: 760px; }
.site-footer p { font-size: 14.5px; color: var(--ink-2); }
.site-footer .fine { font-size: 13px; color: var(--muted); }
.site-footer a { color: var(--ink-2); }
.footer-links { margin-top: 14px; }
.footer-links a { text-decoration: underline; text-underline-offset: 2px; }
.footer-links a:hover { color: var(--accent); }

/* ── Adaptations mobiles ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .wizard-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .wizard-aside { display: none; }
  .wizard-flow { display: block; }
}

@media (max-width: 820px) {
  .wizard-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rail { position: static; }
  .rail ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .rail li { margin: 0; }
  .rail button { padding: 6px 10px; white-space: nowrap; }
  .rail-label { display: none; }
  .rail li.is-current .rail-label { display: inline; }
  .rail-foot { display: none; }

  .f-half, .f-third { flex: 1 1 100%; }
  .rep-row { flex-wrap: wrap; }
  .rep-cell { flex: 1 1 100% !important; }
  .rep-del { width: 100%; height: 34px; }
  .vol-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vol-total { text-align: left; }

  .doc { padding: 30px 20px; border-radius: 0; margin-left: -20px; margin-right: -20px; max-width: none; }
  .doc-dl > div { grid-template-columns: minmax(0, 1fr); }
  .doc-swot { grid-template-columns: 1fr; }
  .doc-toc ol { columns: 1; }
  .result-toolbar { position: static; }
  .toolbar-btns { width: 100%; }
  .toolbar-btns .btn { flex: 1 1 auto; }
  .hero { padding: 40px 0 26px; }
  .wizard-nav { flex-wrap: wrap; }
  .wizard-nav .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── Impression (« Enregistrer au format PDF ») ──────────────────────────── */
@media print {
  @page { size: A4; margin: 16mm 14mm; }

  :root {
    --plane: #fff; --surface: #fff; --surface-2: #f5f5f3;
    --ink: #000; --ink-2: #222; --muted: #666;
    --grid: #ddd; --axis: #999; --border: #ddd; --border-strong: #bbb;
    --accent: #1c5cab; --accent-soft: #eef4fc;
  }

  body { background: #fff; font-size: 10.5pt; }
  .no-print, .site-header, .site-footer, .toast, .ad-wrap, .ad-slot,
  .result-toolbar, .restart-wrap, .offer { display: none !important; }

  /* Document non payé : il reste entièrement lisible et imprimable — cacher
     le contenu serait malhonnête envers le visiteur et mal vu des régies —
     mais il porte une mention qui le distingue du fichier acheté. C'est elle
     qui donne sa valeur au téléchargement, puisque Ctrl+P reste possible. */
  body.is-locked .doc::before {
    content: 'Version gratuite — Business Plan Express';
    display: block; margin-bottom: 18px; padding: 8px 12px;
    border: 1px solid #999; border-radius: 4px;
    font-size: 9pt; color: #555; text-align: center; letter-spacing: .04em;
  }
  body.is-locked .doc-cover::after {
    content: 'Document produit gratuitement sur Business Plan Express. La version téléchargeable, sans cette mention, est disponible sur le site.';
    display: block; margin-top: 16px; font-size: 8.5pt; color: #777; font-style: italic;
  }

  .doc {
    box-shadow: none; border: none; border-radius: 0;
    padding: 0; margin: 0; max-width: none; background: #fff;
  }
  .doc p { color: #222; }

  .doc-cover { page-break-after: always; padding-top: 30mm; }
  .doc-toc { page-break-after: always; background: #fff; padding: 0; }

  .doc-h2 { page-break-after: avoid; page-break-inside: avoid; margin-top: 22pt; }
  .doc-h3 { page-break-after: avoid; margin-top: 14pt; }
  .doc-table-wrap, .doc-chart, .viz, .doc-kpis, .doc-swot, .doc-callout {
    page-break-inside: avoid;
  }
  /* la largeur d'une page A4 déclenche les règles mobiles : on rétablit
     les mises en page sur deux colonnes, la place est là */
  .doc-swot { grid-template-columns: 1fr 1fr; }
  .doc-toc ol { columns: 2; }

  .doc-table { font-size: 9pt; }
  .doc-table-wrap.is-wide .doc-table { font-size: 7.5pt; }
  .viz { border: 1px solid #ddd; }
  .doc-disclaimer { page-break-inside: avoid; }

  a { color: #000; text-decoration: none; }
}

.section-lede { color: var(--ink-2); max-width: 70ch; margin-bottom: 22px; font-size: 16px; }
.section-more { margin-top: 18px; }
.section-more a { font-weight: 600; }

/* Le prix, annoncé sur l'accueil. Un visiteur qui découvre le paiement après
   une heure de questionnaire se sent piégé, et il a raison. */
.lede-price {
  font-size: 15.5px; color: var(--ink-2); max-width: 62ch; margin-top: 16px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
}

/* Échec de génération : on parle au visiteur plutôt que de le laisser devant
   une barre pleine qui ne bascule jamais. */
.gen-fail-lede { color: var(--ink-2); max-width: 56ch; margin: 0 auto 14px; }
.gen-fail-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 24px 0 18px; }
.gen-fail-fine { font-size: 12.5px; color: var(--muted); margin: 0; word-break: break-word; }