/* =========================================================================
   Auctionify — vitrine
   Système : une grotesque pour l'interface, une serif à fort contraste pour
   le registre « maison de ventes ». Deux thèmes, un seul jeu de jetons.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* marque */
  --brand: #0C377B;
  --brand-deep: #071F49;
  --brand-ink: #04142F;
  --gold: #E1A730;
  --gold-deep: #C88D18;
  /* L'or du texte, plus profond sur fond clair (décision d'Anthony, 26/09) : #E1A730 tombait à
     2:1. Titres en italique : 3,3 à 3,6:1 ; petits textes dorés : 4,7 à 5,4:1. */
  --gold-title: #B07A12;
  --gold-text: #8F620B;
  --perte: #A63A28; /* solde négatif du calculateur : 6,2:1 sur --bg, où il s'affiche */

  /* surfaces claires */
  --bg: #FBFAF8;
  --surface: #FFFFFF;
  --surface-alt: #F3F1EC;
  --line: #E2DED6;
  --line-strong: #CFC9BD;

  /* textes */
  --ink: #12182A;
  --ink-soft: #4B5568;
  --ink-faint: #646D7E; /* 4,6:1 au pire (sur --surface-alt) ; #767F90 tombait à 3,6:1 — Lighthouse, 26/09/2026 */
  /* Graphique de l'observatoire : 3:1 au moins sur tous les fonds clairs (élément graphique). */
  --obs-plage: #6F8AC0;
  --obs-mediane: #0C377B;
  --on-dark: #F4F1EA;
  --on-dark-soft: #A9B6CE;

  /* surfaces sombres */
  --dark: #071F49;
  --dark-2: #04142F;
  --dark-line: rgba(255, 255, 255, .14);
  --dark-card: rgba(255, 255, 255, .05);

  --radius-s: 6px;
  --radius: 14px;
  --radius-l: 24px;
  --shadow-s: 0 1px 2px rgba(10, 20, 45, .06), 0 6px 16px -8px rgba(10, 20, 45, .14);
  --shadow: 0 2px 4px rgba(10, 20, 45, .05), 0 24px 48px -24px rgba(10, 20, 45, .28);

  --gutter: clamp(20px, 5vw, 56px);
  --wrap: 1200px;
  --pace: clamp(64px, 9vw, 128px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --gold-title: #E1A730;
    --gold-text: #E1A730;
    --perte: #F2937F;
    --bg: #070C18;
    --obs-plage: #5575B3;
    --obs-mediane: #CFDDF7;
    --surface: #0D1526;
    --surface-alt: #111B30;
    --line: #1E2A42;
    --line-strong: #2B3A58;
    --ink: #EDF1F8;
    --ink-soft: #A7B2C6;
    --ink-faint: #7F8BA2;
    --dark: #0A142A;
    --dark-2: #060D1D;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .6);
    --shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 48px -24px rgba(0, 0, 0, .8);
  }
}

:root[data-theme='dark'] {
  --gold-title: #E1A730;
  --gold-text: #E1A730;
  --perte: #F2937F;
  --bg: #070C18;
  --obs-plage: #5575B3;
  --obs-mediane: #CFDDF7;
  --surface: #0D1526;
  --surface-alt: #111B30;
  --line: #1E2A42;
  --line-strong: #2B3A58;
  --ink: #EDF1F8;
  --ink-soft: #A7B2C6;
  --ink-faint: #7F8BA2;
  --dark: #0A142A;
  --dark-2: #060D1D;
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.08; letter-spacing: -.022em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: 16px; top: -120px; z-index: 60;
  padding: 12px 18px; border-radius: var(--radius-s);
  background: var(--gold); color: #1A1204; font-weight: 600; text-decoration: none;
  transition: top .18s ease;
}
.skip:focus-visible { top: 16px; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

/* --------------------------------------------------------------- display */

.display {
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.02;
}
.display em { font-style: italic; color: var(--gold-title); }
.section-dark .display em { color: var(--gold); }

h1.display { font-size: clamp(2.7rem, 7.2vw, 5.1rem); }
h2.display { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h3.display { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 18px;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold); }
.on-dark .eyebrow, .section-dark .eyebrow { color: var(--on-dark-soft); }

.lede { max-width: 56ch; color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.12rem); }
.section-dark .lede { color: var(--on-dark-soft); }

/* --------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 13px 22px;
  border: 1px solid transparent; border-radius: 100px;
  font-size: .94rem; font-weight: 600; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn .icon { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.btn-gold { background: var(--gold); border-color: var(--gold); color: #1A1204; }
.btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn-ink { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-ink:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-outline-light { border-color: rgba(255, 255, 255, .34); color: var(--on-dark); background: transparent; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }
.btn-sm { min-height: 40px; padding: 10px 16px; font-size: .85rem; }

.textlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
}
.textlink .icon { width: 16px; height: 16px; }
.textlink:hover { color: var(--gold-text); }
.section-dark .textlink:hover { color: var(--gold); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(225, 167, 48, .16); color: var(--gold-text);
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.chip-soft { background: var(--surface-alt); color: var(--ink-faint); }
.section-dark .chip-soft { background: rgba(255, 255, 255, .08); color: var(--on-dark-soft); }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ------------------------------------------------------------- révélation */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }
.reveal:nth-child(5) { transition-delay: .24s; }
.reveal:nth-child(6) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- entête */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.masthead.is-stuck {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-s);
}
.masthead-inner { display: flex; align-items: center; gap: 22px; min-height: 78px; }

.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.brand img { width: 132px; height: auto; }
.brand-note {
  display: none; padding-left: 14px; border-left: 1px solid var(--line);
  color: var(--ink-faint); font-size: .7rem; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase;
}
/* 1400 px : en dessous, avec « Guides » dans la navigation, la mention se tassait sur sept lignes (26/09/2026). */
@media (min-width: 1400px) { .brand-note { display: block; } }

.site-nav { display: flex; align-items: center; gap: 26px; }
/* `:not(.btn)` est indispensable : sans lui, cette règle est plus spécifique que `.btn-ink`
   et repeint le texte du bouton en bleu marine sur un fond bleu marine. */
.site-nav a { font-size: .93rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-nav a:not(.btn) { color: var(--ink); }
.site-nav a:not(.btn) { padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover { border-bottom-color: var(--gold); }
.site-nav a[aria-current='page']:not(.btn) { border-bottom-color: var(--gold); }

.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.menu-toggle span { display: block; width: 18px; height: 9px; border-top: 1.5px solid; border-bottom: 1.5px solid; }

@media (max-width: 1080px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px var(--gutter) 24px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 14px; }
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
  background: radial-gradient(120% 120% at 12% 0%, #10386E 0%, var(--dark) 46%, var(--dark-2) 100%);
  color: var(--on-dark);
}
.hero::after {
  content: ''; position: absolute; inset: auto -10% -45% 40%; z-index: -1;
  height: 70%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(225, 167, 48, .22), transparent 70%);
  filter: blur(10px);
}
.hero-grid {
  display: grid; gap: clamp(36px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr); align-items: center; } }

.hero h1 { margin-bottom: 22px; }
.hero h1 .display-line { display: block; }
.hero-lead { max-width: 50ch; color: var(--on-dark-soft); font-size: clamp(1rem, 1.35vw, 1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.hero-note {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--on-dark); font-size: .92rem; font-weight: 500;
}
.hero-note .icon { width: 18px; height: 18px; color: var(--gold); }
.hero-house {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px;
  padding-top: 22px; border-top: 1px solid var(--dark-line);
  color: var(--on-dark-soft); font-size: .84rem;
}
.hero-house span { display: inline-flex; align-items: center; gap: 8px; }
.hero-house .icon { width: 16px; height: 16px; color: var(--gold); }

/* -------------------------------------------------------------- simulateur */

.sim {
  border: 1px solid var(--dark-line); border-radius: var(--radius-l);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  backdrop-filter: blur(8px);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.sim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sim-head .eyebrow { margin: 0; }
.sim-title { margin: 0 0 20px; font-size: 1.05rem; font-weight: 600; color: var(--on-dark); }

.sim-field { margin-bottom: 18px; }
.sim-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sim-field label { color: var(--on-dark-soft); font-size: .88rem; }
.sim-field output { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.5rem; color: var(--on-dark); }

input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18);
}
input[type='range']::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px;
  border: 0; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 5px rgba(225, 167, 48, .2);
}
input[type='range']::-moz-range-thumb {
  width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 5px rgba(225, 167, 48, .2);
}

.sim-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 22px 0 16px; padding: 14px 16px;
  border: 1px solid rgba(225, 167, 48, .32); border-radius: var(--radius);
  background: rgba(225, 167, 48, .1);
}
.sim-plan-label { display: block; color: var(--on-dark-soft); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.sim-plan strong { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.85rem; font-weight: 400; color: var(--on-dark); }
.sim-plan-note { display: block; color: var(--on-dark-soft); font-size: .82rem; }

.sim-lines { border-top: 1px solid var(--dark-line); }
.sim-lines > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--dark-line);
  font-size: .92rem; color: var(--on-dark-soft);
}
.sim-lines b { color: var(--on-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.sim-lines .sim-total { border-bottom: 0; padding-top: 14px; color: var(--on-dark); font-weight: 600; }
.sim-lines .sim-total b { font-size: 1.1rem; }

.sim-net {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-top: 16px; padding: 16px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
}
.sim-net span { color: var(--on-dark-soft); font-size: .82rem; }
.sim-net strong { font-family: 'Instrument Serif', Georgia, serif; font-size: 2.1rem; font-weight: 400; color: var(--gold); }
.sim-foot { margin-top: 14px; color: var(--on-dark-soft); font-size: .8rem; line-height: 1.5; }
.sim-advice { display: flex; gap: 9px; margin-top: 12px; color: var(--on-dark); font-size: .86rem; }
.sim-advice .icon { width: 17px; height: 17px; color: var(--gold); margin-top: 2px; }

/* -------------------------------------------------------------- sections */

.section { padding: var(--pace) 0; }
.section-paper { background: var(--surface-alt); }
.section-surface { background: var(--surface); }
.section-dark { background: var(--dark); color: var(--on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--on-dark); }
.section-tight { padding: clamp(40px, 5vw, 64px) 0; }

.section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.section-head.split {
  display: grid; gap: 22px 56px; align-items: end;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .section-head.split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.card {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--surface);
}

/* ---------------------------------------------------------------- preuves */

.proof-band { background: var(--dark-2); color: var(--on-dark); padding: 26px 0; }
.proof-band .proofs { display: grid; gap: 14px 34px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.proof { display: flex; flex-direction: column; gap: 3px; }
.proof strong { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.6rem; font-weight: 400; color: var(--gold); }
.proof span { color: var(--on-dark-soft); font-size: .86rem; line-height: 1.35; }

/* ----------------------------------------------------------------- marché */

.market-figure { padding: 26px 0; border-top: 1px solid var(--line); }
.market-figure strong {
  display: block; font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 400; line-height: 1;
}
.market-figure p { margin: 10px 0 12px; color: var(--ink-soft); font-size: .95rem; max-width: 34ch; }
.market-figure .delta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold-text); font-size: .82rem; font-weight: 600;
}
.market-figure .delta .icon { width: 15px; height: 15px; }
.market-figure .source { margin: 12px 0 0; font-size: .78rem; line-height: 1.4; color: var(--ink-faint); max-width: 34ch; }
.market-figure .source a { color: inherit; }

/* ----------------------------------------------------------------- étapes */

.steps { counter-reset: step; }
.step {
  display: grid; gap: 10px 32px; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: 26px 0; border-top: 1px solid var(--line);
}
@media (min-width: 860px) { .step { grid-template-columns: 120px minmax(0, .8fr) minmax(0, 1.2fr); } }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-number { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.7rem; color: var(--gold); }
.step-icon { display: inline-flex; color: var(--ink-faint); }
.step h3 { font-size: 1.2rem; }
.step dl { display: grid; gap: 12px; }
.step dl > div { display: grid; gap: 2px; grid-template-columns: 62px minmax(0, 1fr); align-items: baseline; }
.step dt { color: var(--ink-faint); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.step dd { color: var(--ink-soft); font-size: .95rem; }

/* ------------------------------------------------------------------ rôles */

.role { padding: 26px; border: 1px solid var(--dark-line); border-radius: var(--radius-l); background: var(--dark-card); }
.role-index { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.3rem; color: var(--gold); }
.role-kicker { display: block; margin: 10px 0 6px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); }
.role h3 { font-size: 1.4rem; margin-bottom: 10px; }
.role p { color: var(--on-dark-soft); font-size: .95rem; }
.role-auctionify { background: rgba(225, 167, 48, .12); border-color: rgba(225, 167, 48, .3); }

/* --------------------------------------------------------------- forfaits */

.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
@media (min-width: 1180px) { .plans-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
.plans-5 .plan { padding: 24px 20px 22px; }
.plans-5 .plan h3 { font-size: 1.7rem; }
.plans-5 .plan-price strong { font-size: 1.75rem; }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--surface);
}
.plan-featured { border-color: var(--brand); box-shadow: var(--shadow); }
.plan-badge {
  position: absolute; top: -12px; left: 24px;
  padding: 5px 12px; border-radius: 100px;
  background: var(--brand); color: #fff;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.plan-kicker { color: var(--ink-faint); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.plan h3 { margin: 8px 0 6px; font-family: 'Instrument Serif', Georgia, serif; font-size: 2rem; font-weight: 400; }
.plan-desc { color: var(--ink-soft); font-size: .93rem; min-height: 2.9em; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 18px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.plan-price strong { font-size: 2.1rem; font-weight: 600; letter-spacing: -.03em; }
.plan-price span { color: var(--ink-faint); font-size: .85rem; }

.plan-terms { display: grid; gap: 10px; margin-bottom: 18px; }
.plan-terms li { display: grid; gap: 1px; }
.plan-terms span { color: var(--ink-faint); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.plan-terms b { font-size: .93rem; font-weight: 600; }
.plan-terms em { font-style: normal; font-weight: 400; color: var(--ink-faint); }

.plan-adds { display: grid; gap: 8px; margin-bottom: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.plan-adds li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start; color: var(--ink-soft); font-size: .9rem; }
.plan-adds .icon { width: 16px; height: 16px; margin-top: 4px; color: var(--gold-deep); stroke-width: 2; }
.plan .btn { margin-top: auto; width: 100%; }
.plan-quote { background: var(--surface-alt); }

/* ------------------------------------------------------------- comparatif */

.matrix-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.matrix { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .92rem; }
.matrix th, .matrix td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix thead th { position: sticky; top: 0; background: var(--surface); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.matrix tbody th { font-weight: 500; color: var(--ink-soft); width: 28%; }
.matrix td { color: var(--ink-soft); }
.matrix b { color: var(--ink); font-weight: 600; }
.matrix .is-featured { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.matrix thead .is-featured { color: var(--brand); }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------ règles/prix */

.rule { padding: 24px 0; border-top: 1px solid var(--line); }
.rule-index { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.2rem; color: var(--gold); }
.rule h3 { margin: 8px 0 8px; font-size: 1.12rem; }
.rule p { color: var(--ink-soft); font-size: .95rem; }

.thresholds { display: grid; gap: 10px; margin-top: 18px; }
.thresholds li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--ink-soft); font-size: .95rem; }
.thresholds li::before { content: '→'; color: var(--gold); }
.thresholds b { color: var(--ink); }

/* -------------------------------------------------------------- exemples */

.example { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.example-code { color: var(--gold-text); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.example h3 { margin: 8px 0 10px; font-size: 1.25rem; }
.example-setup { color: var(--ink-soft); font-size: .92rem; }
/* Ce qui reste au vendeur : le chiffre qu'on lit en premier, et la part de ses adjudications. */
.example-result { margin-top: 18px; padding: 18px 18px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.example-result-label { color: var(--ink-soft); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.example-result-value { margin-top: 4px; color: var(--ink); font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2.1rem, 6vw, 2.6rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.example-bar { display: block; height: 8px; margin-top: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.example-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.example-result-part { margin-top: 8px; color: var(--ink-soft); font-size: .88rem; }
.example-result-part b { color: var(--ink); }
.example-lines { margin: 16px 0 0; }
.example-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.example-lines dt { color: var(--ink-soft); }
.example-lines dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.example-lines .is-muted { color: var(--ink-faint); }
.example-lines .is-muted dd { font-weight: 500; }
.example-total { border-bottom: 0 !important; padding-top: 14px !important; font-size: 1rem !important; }
.example-total dt { color: var(--ink) !important; font-weight: 600; }
.example-note { margin-top: 10px; color: var(--ink-faint); font-size: .84rem; }
.example-compare { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--gold) 12%, transparent); font-size: .92rem; }
.example-strong { border-color: var(--line-strong); }

/* --------------------------------------------------------------- réglages */

.mode { padding: 26px; border: 1px solid var(--dark-line); border-radius: var(--radius-l); background: var(--dark-card); }
.mode-icon { display: inline-flex; padding: 10px; border-radius: 12px; background: rgba(225, 167, 48, .16); color: var(--gold); }
.mode-tag { display: block; margin: 16px 0 6px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); }
.mode h3 { font-size: 1.3rem; margin-bottom: 10px; }
.mode > p { color: var(--on-dark-soft); font-size: .94rem; }
.mode dl { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dark-line); }
.mode dt { color: var(--on-dark-soft); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mode dd { color: var(--on-dark); font-size: .92rem; }

.commitments { display: grid; gap: 14px; margin-top: 26px; }
.commitments li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .98rem; }
.commitments .icon { width: 19px; height: 19px; margin-top: 4px; color: var(--gold); stroke-width: 2; }

/* --------------------------------------------------------------- compteur */

.counter { margin: 0; padding: 24px; border: 1px solid var(--dark-line); border-radius: var(--radius-l); background: rgba(255, 255, 255, .05); }
.counter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.counter-title { color: var(--on-dark-soft); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.counter-value { display: flex; align-items: baseline; gap: 9px; margin: 16px 0 14px; }
.counter-value strong { font-family: 'Instrument Serif', Georgia, serif; font-size: 3.2rem; font-weight: 400; line-height: 1; color: var(--on-dark); }
.counter-value span { color: var(--on-dark-soft); font-size: .92rem; }
.counter-bar { position: relative; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .12); overflow: visible; }
.counter-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct); border-radius: 10px; background: linear-gradient(90deg, var(--gold), #F3C45B); }
.counter-mark { position: absolute; top: -5px; bottom: -5px; left: var(--at); width: 1px; background: rgba(255, 255, 255, .5); }
.counter-mark i { position: absolute; top: -20px; left: 0; transform: translateX(-50%); color: var(--on-dark-soft); font-size: .66rem; font-style: normal; white-space: nowrap; }
.counter-projection, .counter-carry { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--on-dark); font-size: .9rem; }
.counter-carry { margin-top: 8px; color: var(--on-dark-soft); }
.counter-projection .icon, .counter-carry .icon { color: var(--gold); width: 17px; height: 17px; }
.counter-rows { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--dark-line); }
.counter-rows li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--on-dark-soft); font-size: .88rem; }
.counter-rows .icon { width: 17px; height: 17px; margin-top: 2px; }
.counter-legend { margin-top: 18px; color: var(--on-dark-soft); font-size: .76rem; font-style: italic; }

/* ---------------------------------------------------------------- canaux */

.channel { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.channel-icon { display: inline-flex; padding: 11px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); margin-bottom: 16px; }
.channel .chip { margin-bottom: 10px; }
.channel h3 { font-size: 1.3rem; margin-bottom: 10px; }
.channel p { color: var(--ink-soft); font-size: .95rem; }

/* ------------------------------------------------------------- fonctions */

.feature-group + .feature-group { margin-top: clamp(40px, 5vw, 64px); }
.feature-group-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.feature-group-icon { display: inline-flex; padding: 11px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); }
.feature-group-head h3 { font-size: 1.5rem; margin-bottom: 6px; }
.feature-group-head p { color: var(--ink-soft); font-size: .95rem; }
.feature-list { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.feature { padding: 18px; border-radius: var(--radius); }
.feature:hover { background: var(--surface-alt); }
.feature-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.feature h4 { font-size: 1rem; }
.feature-from { color: var(--ink-faint); font-size: .74rem; white-space: nowrap; }
.feature p { color: var(--ink-soft); font-size: .9rem; }
.feature .chip { margin-top: 10px; }

/* -------------------------------------------------------------- entreprise */

.enterprise-units { display: grid; gap: 0; margin-top: 8px; }
.enterprise-units > div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--dark-line); font-size: .93rem; }
.enterprise-units dt { color: var(--on-dark); }
.enterprise-units dd { color: var(--on-dark-soft); text-align: right; }

/* ------------------------------------------------------------ témoignages */

.testimonial { margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.testimonial-mark { display: inline-flex; color: var(--gold); }
.testimonial-mark .icon { width: 26px; height: 26px; stroke-width: 1.2; }
.testimonial blockquote { margin: 16px 0 20px; font-family: 'Instrument Serif', Georgia, serif; font-size: 1.25rem; line-height: 1.35; }
.testimonial figcaption { display: grid; gap: 1px; padding-top: 16px; border-top: 1px solid var(--line); }
.testimonial figcaption strong { font-size: .95rem; }
.testimonial figcaption span { color: var(--ink-faint); font-size: .85rem; }

/* ---------------------------------------------------------------- appel */

.cta {
  display: grid; gap: 26px 56px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(32px, 4vw, 52px);
  border-radius: var(--radius-l);
  background: linear-gradient(120deg, #E1A730 0%, #F0CE72 100%);
  color: #1A1204;
}
@media (min-width: 900px) { .cta { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.cta h2 { color: #14100A; }
.cta p { color: #3A2E13; max-width: 46ch; }
.cta .eyebrow { color: #6A551F; }
.cta .eyebrow::before { background: #6A551F; }
.cta .btn-ink { background: #14100A; border-color: #14100A; }
.cta .btn-ink:hover { background: #000; border-color: #000; }

/* ------------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 1.03rem; font-weight: 500;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary i {
  position: relative; flex: none; width: 20px; height: 20px;
  border: 1px solid var(--line-strong); border-radius: 50%;
}
.qa summary i::before, .qa summary i::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px;
  background: currentColor; transform: translate(-50%, -50%); transition: transform .2s ease;
}
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa[open] summary { color: var(--brand); }
.qa-body { padding-bottom: 22px; }
.qa-body p { max-width: 74ch; color: var(--ink-soft); font-size: .97rem; }
.section-dark .qa, .section-dark .faq { border-color: var(--dark-line); }
.section-dark .qa-body p { color: var(--on-dark-soft); }
.section-dark .qa[open] summary { color: var(--gold); }

/* ------------------------------------------------------------------ pied */

.site-footer { background: var(--dark-2); color: var(--on-dark); padding: clamp(48px, 6vw, 76px) 0 32px; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer-grid > div:first-child { grid-column: span 1; max-width: 34ch; }
.footer-grid p { color: var(--on-dark-soft); font-size: .9rem; margin-top: 14px; }
.footer-label { display: block; margin-bottom: 14px !important; color: var(--on-dark) !important; font-size: .74rem !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.footer-grid a { display: block; padding: 5px 0; color: var(--on-dark-soft); font-size: .92rem; text-decoration: none; }
.footer-grid a:hover { color: var(--gold); }
.footer-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--dark-line); color: var(--on-dark-soft); font-size: .78rem; line-height: 1.6; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; color: var(--on-dark-soft); font-size: .78rem; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }

/* ---------------------------------------------------------- utilitaires */

.stack-s > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 20px; }
.mt-l { margin-top: clamp(28px, 3.5vw, 44px); }
.center { text-align: center; }
.center-action { display: flex; justify-content: center; margin-top: clamp(28px, 3.5vw, 44px); }
.note { color: var(--ink-faint); font-size: .84rem; }
.section-dark .note { color: var(--on-dark-soft); }

/* ------------------------------------------------------- logo en thème sombre */
/* Le logo fourni est en bleu marine sur fond transparent : illisible sur une surface
   sombre. Tant qu'il n'existe pas de version claire de la marque, on le pose sur une
   pastille claire — les couleurs de marque restent exactes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brand img,
  :root:not([data-theme='light']) .site-footer .brand img {
    padding: 7px 11px;
    background: #FBFAF8;
    border-radius: 10px;
    box-sizing: content-box;
  }
}
:root[data-theme='dark'] .brand img {
  padding: 7px 11px;
  background: #FBFAF8;
  border-radius: 10px;
  box-sizing: content-box;
}

/* Le pied de page est toujours sombre : même traitement dans les deux thèmes. */
.site-footer .brand img {
  padding: 7px 11px;
  background: #FBFAF8;
  border-radius: 10px;
  box-sizing: content-box;
}

/* ----------------------------------------------------------------- besoins */

/* Nombre de colonnes fixé, pas `auto-fit` : le nombre de besoins est un multiple de 4,
   la dernière ligne est donc toujours pleine quelle que soit la largeur. */
.needs { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .needs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.need { padding: 24px; border-radius: var(--radius-l); }
.need:hover { background: var(--surface); }
.need-icon { display: inline-flex; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-deep); margin-bottom: 16px; }
.need h3 { font-size: 1.12rem; margin-bottom: 8px; }
.need p { color: var(--ink-soft); font-size: .93rem; }

.conditions-card {
  display: grid; gap: 24px 48px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(28px, 3.5vw, 44px); padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface);
}
@media (min-width: 880px) { .conditions-card { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.conditions { display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.conditions li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; font-size: .94rem; font-weight: 500; }
.conditions .icon { width: 16px; height: 16px; color: var(--gold-deep); stroke-width: 2.2; }

/* ------------------------------------------------------ compteur de marché */

.ticker-card {
  padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-l);
  border: 1px solid var(--line); background: var(--surface);
}
.ticker-value {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.ticker-lead { margin-top: 12px; max-width: 46ch; color: var(--ink-soft); font-size: 1rem; }
.ticker-basis { margin-top: 14px; color: var(--ink-faint); font-size: .8rem; }

/* --------------------------------------------------------------- cookies */

.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  padding: 18px 20px; border-radius: var(--radius-l);
  border: 1px solid var(--line-strong); background: var(--surface);
  box-shadow: 0 24px 60px -20px rgba(6, 13, 29, .45);
  animation: consent-in .35s cubic-bezier(.2, .7, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
@keyframes consent-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.consent-inner {
  display: grid; gap: 16px 40px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  width: min(var(--wrap), 100%); margin-inline: auto;
}
@media (min-width: 820px) { .consent-inner { grid-template-columns: minmax(0, 1fr) auto; } }
.consent strong { display: block; margin-bottom: 4px; font-size: .95rem; }
.consent p { color: var(--ink-soft); font-size: .88rem; max-width: 70ch; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.consent-link { color: var(--ink-faint); font-size: .84rem; }

/* ------------------------------------------------- deux appels à l'action */

.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------ chiffre sous un besoin */

.need-figure { display: flex; align-items: baseline; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.need-figure b { flex: none; white-space: nowrap; font-family: 'Instrument Serif', Georgia, serif; font-size: 1.55rem; font-weight: 400; color: var(--gold-deep); line-height: 1.1; }
.need-figure span { color: var(--ink-faint); font-size: .82rem; line-height: 1.3; }

/* ------------------------------------------------------------ estimateur */

.estimator {
  display: grid; gap: clamp(28px, 4vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) { .estimator { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }

.estimator-panel {
  padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-l);
  border: 1px solid var(--dark-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  backdrop-filter: blur(8px);
}
.est-fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.est-field { display: grid; gap: 7px; }
.est-field label { color: var(--on-dark-soft); font-size: .84rem; }
.est-input { position: relative; display: flex; align-items: center; }
.est-input input {
  width: 100%; padding: 13px 15px; padding-right: 44px;
  border: 1px solid var(--dark-line); border-radius: var(--radius);
  background: rgba(0, 0, 0, .22); color: var(--on-dark);
  font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.est-input input::-webkit-outer-spin-button, .est-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-input input:focus { border-color: var(--gold); outline: none; }
.est-suffix { position: absolute; right: 15px; color: var(--on-dark-soft); font-size: .88rem; pointer-events: none; }

.est-result { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--dark-line); }
.est-result-label { color: var(--on-dark-soft); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.est-range { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.est-range strong { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 400; line-height: 1; color: var(--gold); }
.est-range span { color: var(--on-dark-soft); font-size: 1.1rem; }
.est-mid { margin-top: 12px; color: var(--on-dark); font-size: .92rem; }
.est-mid b { font-weight: 600; }
.est-detail { margin-top: 14px; color: var(--on-dark-soft); font-size: .86rem; line-height: 1.5; }
.est-basis { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dark-line); color: var(--on-dark-soft); font-size: .78rem; line-height: 1.5; }
.est-actions { margin-top: 20px; }

/* ------------------------------------------------------- pages de texte */

.prose { max-width: 74ch; }
.prose h2 { margin: clamp(30px, 4vw, 46px) 0 14px; font-size: 1.35rem; }
.prose h3 { margin: 26px 0 10px; font-size: 1.08rem; }
.prose p, .prose li { color: var(--ink-soft); font-size: .98rem; }
.prose p + p { margin-top: 12px; }
.prose ul { display: grid; gap: 8px; margin-top: 12px; }
/* La puce est posée en absolu, pas dans une grille : dans une grille, chaque bout de texte et
   chaque lien d'un élément devenaient des cases séparées (capture du 26/09). */
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
/* `li { list-style: none }` vaut pour tout le site ; les étapes d'une page de texte gardent leurs numéros. */
.prose ol > li { list-style: decimal; padding-left: 6px; }
.prose ol > li::marker { color: var(--gold); font-weight: 600; }
.prose a { color: var(--brand); text-underline-offset: .2em; }
.prose dl { display: grid; gap: 0; margin-top: 14px; }
.prose dl > div { display: grid; gap: 4px 24px; grid-template-columns: minmax(0, 1fr); padding: 11px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .prose dl > div { grid-template-columns: 230px minmax(0, 1fr); } }
.prose dt { color: var(--ink-faint); font-size: .88rem; }
.prose dd { color: var(--ink); font-size: .96rem; }
.page-head { padding: clamp(40px, 6vw, 72px) 0 clamp(18px, 2.5vw, 28px); }

/* ---------------------------------------------------------- formulaire */

.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.field { display: grid; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 500; }
.field .hint { color: var(--ink-faint); font-size: .8rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-size: .98rem;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); outline: none; }
.form-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 20px; }
.form-consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brand); }
.form-consent label { color: var(--ink-soft); font-size: .86rem; }
.form-note { margin-top: 18px; color: var(--ink-faint); font-size: .82rem; }

.contact-aside { display: grid; gap: 14px; align-content: start; }
.contact-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.contact-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.contact-card p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 16px; }

/* ------------------------------------------------------------- à propos */

.about-lead { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; max-width: 30ch; }
.about-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.about-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.about-card .chip { margin-bottom: 14px; }
.about-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.about-card p { color: var(--ink-soft); font-size: .94rem; }

/* Confirmation d'envoi du formulaire : révélée par l'ancre, sans JavaScript. */
#merci { display: none; }
#merci:target { display: block; }

/* Deux sections de même fond qui se suivent : la respiration double sinon. */
.section-pull { padding-top: clamp(24px, 3vw, 44px); }

/* Champ leurre anti-robot : hors écran et hors parcours clavier, jamais lu par un humain. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form-error {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--radius);
  background: color-mix(in srgb, #C0392B 12%, transparent);
  color: #922B21; font-size: .9rem;
}

/* --------------------------------------------- prestations opérationnelles */

.services { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.service { padding: 22px; border-radius: var(--radius-l); }
.service:hover { background: rgba(255, 255, 255, .05); }
.service h3 { font-size: 1.02rem; margin-bottom: 7px; }
.service p { color: var(--on-dark-soft); font-size: .88rem; }

/* Les micro-libellés en capitales tournent autour de 11,5 px : lisibles sur un écran large,
   un peu justes sur un téléphone. On les remonte sous 640 px. */
@media (max-width: 640px) {
  .eyebrow,
  .chip,
  .plan-kicker,
  .role-kicker,
  .mode-tag,
  .plan-badge,
  .plan-terms span,
  .footer-label,
  .sim-plan-label,
  .est-result-label,
  .example-code,
  .counter-title { font-size: .78rem; }
  .brand-note { font-size: .74rem; }
  .feature-from,
  .need-figure span,
  .est-detail,
  .sim-foot { font-size: .86rem; }
}

/* Le tableau comparatif déborde volontairement de son cadre sur petit écran : on le dit,
   et on donne un repère visuel au bord droit pour que le défilement soit deviné. */
.matrix-scroll { position: relative; }
.matrix-hint { display: none; margin-top: 10px; }
@media (max-width: 900px) {
  .matrix-hint { display: block; }
  /* Les libellés restent fixes à gauche : on compare les forfaits sans perdre la ligne. */
  .matrix { min-width: 620px; font-size: .86rem; }
  .matrix th, .matrix td { padding: 12px 12px; }
  .matrix tbody th, .matrix thead th:first-child { position: sticky; left: 0; z-index: 1; width: 128px; min-width: 128px; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .matrix thead th:first-child { z-index: 2; }
  .matrix-scroll {
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) left / 40px 100% no-repeat,
      linear-gradient(to left, var(--surface) 30%, transparent) right / 40px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(10, 20, 45, .16), transparent) left / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(10, 20, 45, .16), transparent) right / 14px 100% no-repeat,
      var(--surface);
    background-attachment: local, local, scroll, scroll, local;
  }
}
.matrix-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* iOS zoome automatiquement sur un champ dont le texte fait moins de 16 px, et la page
   reste décalée après la saisie. On force 16 px sur les champs en dessous de 900 px. */
@media (max-width: 900px) {
  .field input,
  .field select,
  .field textarea,
  .est-input input { font-size: 16px; }
  .field input:not([type='checkbox']),
  .field select { min-height: 46px; }
}

/* Emplacement de la vérification anti-robot, avant le bouton d'envoi. */
.form-verify:not(:empty) { margin-top: 20px; }

/* --------------------------------------------- bandeau « le cadre de la vente » */

.trust-band { background: var(--dark-2); color: var(--on-dark); padding: clamp(28px, 4vw, 44px) 0; }
.trust-grid { display: grid; gap: 24px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.trust-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(225, 167, 48, .16); color: var(--gold);
}
.trust h3 { font-size: 1rem; margin-bottom: 5px; }
.trust p { color: var(--on-dark-soft); font-size: .9rem; line-height: 1.5; }
.trust .textlink { color: var(--gold); font-size: .88rem; }

/* ------------------------------- estimateur de gain, en premier écran */

.hero-estimator { display: flex; flex-direction: column; }
.est-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.est-head .eyebrow { margin: 0; }
.est-title {
  margin: 14px 0 22px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; color: var(--on-dark);
}

/* Le simulateur de coût vit désormais sur une section claire : il lui faut son propre
   fond sombre, le voile translucide ne fonctionnait que sur une section sombre. */
.sim-solid {
  background: linear-gradient(165deg, var(--dark) 0%, var(--dark-2) 100%);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------ pages éditoriales : guides et solutions */
/* Rendues au build depuis pages/*.md (editorial/). Une colonne de lecture, des tableaux qui
   défilent dans leur cadre sur mobile, et les couleurs du thème (clair comme sombre). */
.wrap-narrow { width: min(780px, 100% - var(--gutter) * 2); margin-inline: auto; }
.fil { font-size: .85rem; color: var(--ink-faint); margin-bottom: 22px; }
.fil a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.fil a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.editorial .display { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.editorial .display + .lede { margin-top: 20px; }
.page-meta { margin-top: 16px; font-size: .88rem; color: var(--ink-faint); }
/* Calculateur d'impôt d'un stock qui dort (guide « stock vendu à perte », ::: calculateur-impot). */
.calc-impot { margin: 28px 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-s); }
.calc-impot .calc-oeil { margin: 0 0 14px; color: var(--gold-text); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.calc-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.calc-impot .calc-champ { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.calc-champ label { font-size: .86rem; line-height: 1.35; color: var(--ink-soft); }
.calc-champ input, .calc-champ select { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.calc-champ input:focus-visible, .calc-champ select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.calc-impot .calc-resultats { margin: 20px 0 0; border-top: 1px solid var(--line); }
.calc-comparaison { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calc-scenario { padding: 14px 16px 4px; border: 1px solid var(--line); border-top-width: 3px; border-radius: var(--radius-s); background: var(--bg); }
.calc-scenario-invendu { border-top-color: var(--perte); }
.calc-scenario-vendu, .calc-scenario-don { border-top-color: var(--gold); }
.calc-scenario-asso { grid-column: 1 / -1; border-top-color: var(--obs-plage); }
.calc-impot .calc-scenario-titre { margin: 0 0 4px; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.calc-impot .calc-scenario dl { margin: 0; }
.calc-scenario .calc-ligne:last-child { border-bottom: 0; }
.calc-scenario-invendu .calc-total dd { color: var(--perte); }
.calc-impot .calc-ecart { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--radius-s); background: var(--surface-alt); line-height: 1.5; color: var(--ink); }
.calc-ecart strong { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.6rem; color: var(--gold-title); white-space: nowrap; }
.calc-ecart span[data-ci], .calc-ecart span[data-cd] { font-weight: 600; white-space: nowrap; }
/* .prose dl > div met les définitions en grille (glossaire) : le calculateur garde ses lignes en flex. */
.calc-impot dl { display: block; }
.calc-impot .calc-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.calc-ligne dt { color: var(--ink-soft); font-size: .92rem; line-height: 1.4; }
.calc-ligne dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--ink); }
.calc-total dt { color: var(--ink); font-weight: 600; }
.calc-total dd { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.6rem; color: var(--gold-title); }
.calc-impot .calc-note { margin: 14px 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-faint); }
@media (max-width: 640px) { .calc-champs, .calc-comparaison { grid-template-columns: 1fr; } .calc-impot { padding: 18px 16px; } }
.editorial .auteur { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .95rem; max-width: 65ch; }
.prose { margin-top: 40px; font-size: 1.04rem; line-height: 1.72; color: var(--ink); }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.15; margin-top: 52px; }
.prose h3 { font-size: 1.12rem; line-height: 1.35; margin-top: 32px; }
.prose h4 { font-size: 1rem; margin-top: 24px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote { margin-inline: 0; padding: 14px 20px; border-left: 3px solid var(--gold); background: var(--surface-alt); border-radius: var(--radius-s); }
.prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.5; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 120px; }
.prose th { background: var(--surface-alt); font-weight: 600; }
/* Sur téléphone, un tableau de trois ou quatre colonnes se tassait en cellules de 80 px : chaque
   ligne devient une fiche, chaque valeur sous l'intitulé de sa colonne (data-label, posé par le
   rendu Markdown). Un navigateur sans :has() garde le tableau. */
@media (max-width: 640px) {
  .prose table:has(td[data-label]) { display: block; overflow: visible; border: 0; }
  .prose table:has(td[data-label]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose table:has(td[data-label]) tbody, .prose table:has(td[data-label]) tr, .prose table:has(td[data-label]) td { display: block; }
  .prose table:has(td[data-label]) tr { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .prose table:has(td[data-label]) tr + tr { margin-top: 10px; }
  .prose table:has(td[data-label]) td { min-width: 0; padding: 5px 0; border: 0; }
  .prose table:has(td[data-label]) td::before { content: attr(data-label); display: block; margin-bottom: 1px; color: var(--ink-faint); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .prose table:has(td[data-label]) td:first-child { color: var(--ink); font-size: 1rem; font-weight: 600; }
  .prose table:has(td[data-label]) td:first-child::before { display: none; }
}
.liees { margin-top: 56px; }
.liees h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.6rem; }
.liees ul { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 14px; }
.liees li { display: grid; gap: 4px; }
.liees a { color: var(--brand); font-weight: 600; }
.liees span { color: var(--ink-soft); font-size: .95rem; }
.cta-editorial { margin-top: 56px; }
.cta-editorial h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.6rem; }
.cta-editorial p + p { margin-top: 14px; }
.rubrique-liste { list-style: none; padding: 0; margin-top: 40px; display: grid; gap: 18px; }
.rubrique-liste h2 { font-size: 1.2rem; line-height: 1.35; }
.rubrique-liste h2 a { color: var(--ink); text-decoration: none; }
.rubrique-liste h2 a:hover { color: var(--brand); }
.rubrique-liste p { margin-top: 8px; color: var(--ink-soft); }

/* ------------------------------------------------ observatoire : graphique et tableau */
.obs-graphique { margin: 28px 0; }
.obs-graphique svg { display: block; width: 100%; height: auto; }
.obs-graphique figcaption { margin-top: 10px; font-size: .88rem; color: var(--ink-faint); }
.obs-grille { stroke: var(--line); stroke-width: 1; }
.obs-graduation { fill: var(--ink-faint); font-size: 12px; font-family: 'Inter', sans-serif; }
.obs-famille { fill: var(--ink); font-size: 13px; font-family: 'Inter', sans-serif; }
.obs-cible { fill: transparent; }
.obs-ligne:hover .obs-cible { fill: var(--surface-alt); }
.obs-plage { fill: var(--obs-plage); }
.obs-mediane { fill: var(--obs-mediane); stroke: var(--bg); stroke-width: 2; }
.obs-tableau caption { text-align: left; font-size: .88rem; color: var(--ink-faint); margin-bottom: 8px; }
.obs-tableau tbody th { background: transparent; font-weight: 600; }
.apercu-bandeau { margin-bottom: 24px; padding: 10px 14px; border-radius: var(--radius-s); background: var(--gold); color: #1A1204; font-weight: 600; }