/* ============================================================
   greffo : direction « Encre & Laiton »
   Encre profonde · papier ivoire · laiton en accent unique
   Typo : Source Serif 4 (titres) · Public Sans (texte) · IBM Plex Mono (données)
   Polices auto-hébergées (assets/fonts), aucun appel à un tiers.
   ============================================================ */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/public-sans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-600.woff2') format('woff2');
}

:root {
  --ink: #14243c;
  --ink-2: #1b2f4e;
  --ink-deep: #0f1d33;
  --paper: #fbf8f1;
  --paper-2: #f3edde;
  --ivory: #f4efe2;
  --tx: #26334d;
  --muted: #5d6b84;
  --muted-ivory: rgba(244, 239, 226, 0.72);
  --faint-ivory: rgba(244, 239, 226, 0.5);
  --brass: #b48a3c;
  --brass-2: #c9a050;
  --brass-3: #d9ae52;
  --gold: #e9c469;
  --gold-2: #f4d68c;
  --line: #e4dcc8;
  --line-ink: rgba(244, 239, 226, 0.16);
  --err: #8e3b2c;
  --radius: 4px;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
/* hidden doit gagner contre tout display posé par une classe (flex, grid…) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--tx);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--brass); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 780px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 550; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; margin: 0 0 18px; }
h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; margin: 0 0 16px; }
h3 { font-size: 20px; margin: 0 0 8px; }
p { margin: 0 0 14px; }
.fine { font-size: 13px; color: var(--muted); }
.mono { font-family: var(--mono); }
code { font-family: var(--mono); font-size: 0.88em; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--brass); color: var(--ink-deep); padding: 8px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 14px;
}

/* ---------------- Boutons ----------------
   Parti pris : bleu encre, texte or clair, fin cadre doré. Le doré plein est
   abandonné ; la hiérarchie se fait par la couleur du texte et du cadre. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--gold);
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 12px 24px; border-radius: var(--radius);
  text-decoration: none; border: 1px solid rgba(233, 196, 105, 0.65);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.btn:hover { background: var(--ink-2); color: var(--gold-2); border-color: var(--gold-2); }
.btn svg { width: 17px; height: 17px; }
.btn-s { padding: 8px 14px; font-size: 13.5px; }
.btn-big { padding: 14px 28px; font-size: 16px; }
.btn-ghost { background: rgba(15, 29, 51, 0.6); color: var(--ivory); border-color: rgba(244, 239, 226, 0.4); }
.btn-ghost:hover { background: var(--ink-deep); color: var(--gold-2); border-color: var(--gold); }
.btn-line { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.btn-line:hover { background: var(--ink-2); color: var(--gold-2); border-color: var(--gold); }
.btn-line-ivory { background: transparent; color: var(--ivory); border-color: rgba(244, 239, 226, 0.4); }
.btn-line-ivory:hover { background: rgba(244, 239, 226, 0.08); color: var(--gold-2); border-color: var(--gold); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.ctas.center { justify-content: center; }

/* ---------------- Header ---------------- */
.site-head { background: var(--ink); border-bottom: 1px solid var(--line-ink); position: sticky; top: 0; z-index: 50; }
.head-in { display: flex; align-items: center; gap: 22px; height: 64px; }
/* Le mot « greffo » est écrit dans la police du texte, pas dans celle des
   titres : c'est un nom de logiciel, pas un titre de page. */
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--ivory); text-decoration: none; letter-spacing: -0.01em; }
.brand svg { border-radius: 6px; flex: none; }
.site-nav { display: flex; align-items: center; gap: 20px; flex: 1; }
.site-nav a { color: var(--muted-ivory); text-decoration: none; font-size: 14px; font-weight: 500; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ivory); }
.site-nav a[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--brass); }
.head-right { display: flex; align-items: center; gap: 10px; }
.nav-t, .burger { display: none; }

.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em;
  color: var(--muted-ivory); border: 1px solid var(--line-ink);
  padding: 6px 12px; border-radius: var(--radius);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: " ▾"; font-size: 10px; }
.lang[open] summary { color: var(--ivory); border-color: var(--brass); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--ink-2); border: 1px solid var(--line-ink); border-radius: var(--radius);
  min-width: 150px; padding: 6px; display: flex; flex-direction: column; z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.lang-menu a { color: var(--muted-ivory); text-decoration: none; font-size: 13.5px; padding: 8px 12px; border-radius: 3px; }
.lang-menu a:hover { background: rgba(244, 239, 226, 0.08); color: var(--ivory); }

/* ---------------- Héro ---------------- */
.hero { background: var(--ink); color: var(--ivory); padding: 72px 0 0; }
.hero-in { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding-bottom: 64px; }
.hero-in > * { min-width: 0; }
.hero h1 { color: var(--ivory); }
.hero .sub { font-size: 18px; line-height: 1.6; color: var(--muted-ivory); max-width: 54ch; }
.hero-note { margin-top: 16px; font-size: 13.5px; color: var(--faint-ivory); }
.hero-note s { opacity: 0.75; margin-right: 2px; }

/* Le prix fondateur, dans le heros. ⛔ Le tarif PUBLIC reste ce qui s'affiche
   par defaut : ce bloc ne se decouvre qu'une fois /api/offre confirme, jamais
   l'inverse. Une remise annoncee par erreur est promise a vie, un tarif public
   affiche par erreur se corrige le jour meme.
   ⚠️ Pas de compte a rebours des places ici : il vit sur les pages Tarifs et
   Acheter, ou quelqu'un est deja en train de choisir. Sur l'accueil, il ferait
   de la premiere impression une brocante. */
.hero-fond { margin-top: 18px; }
.hero-fond .hf-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; }
.hero-fond .hf-line s { font-size: 19px; color: var(--faint-ivory); }
.hero-fond .hf-line strong { font-family: var(--serif); font-size: 40px; font-weight: 550;
  color: var(--gold-2); line-height: 1; font-variant-numeric: tabular-nums; }
.hero-fond .hf-line span { font-size: 14.5px; color: var(--muted-ivory); }
.hero-fond .hf-note { margin: 8px 0 0; font-size: 13.5px; color: var(--faint-ivory); }

.hero-panel { background: var(--ink-deep); border: 1px solid var(--line-ink); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.panel-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line-ink); }
.panel-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(244, 239, 226, 0.18); }
.panel-bar span { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--faint-ivory); letter-spacing: 0.04em; }
.panel-body { padding: 18px 20px 20px; font-family: var(--mono); font-size: 12.5px; line-height: 1.9; color: var(--muted-ivory); overflow-x: auto; }
.panel-body .ln { white-space: pre; }
.progress { height: 4px; background: rgba(244, 239, 226, 0.12); border-radius: 2px; margin: 12px 0; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--brass); border-radius: 2px; }
.panel-body .done { color: var(--brass-2); white-space: normal; }

.strip { display: flex; border-top: 1px solid var(--line-ink); }
.strip > div { flex: 1; padding: 20px 26px 26px; border-right: 1px solid var(--line-ink); display: flex; flex-direction: column; gap: 2px; }
.strip-ic svg { width: 22px; height: 22px; color: var(--brass-2); margin-bottom: 6px; }
.strip > div:last-child { border-right: none; }
.strip .v { font-family: var(--serif); font-size: 26px; font-weight: 550; color: var(--brass-2); font-variant-numeric: tabular-nums; }
.strip .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint-ivory); }

/* ---------------- Sections ---------------- */
.sec { padding: 72px 0; }
.sec.alt { background: var(--paper-2); }
.sec-more { margin-top: 28px; font-size: 15px; }
.sec-more a { font-weight: 600; text-decoration: none; }
.sec-more a:hover { text-decoration: underline; }

.page-hero { background: var(--ink); color: var(--ivory); padding: 56px 0; }
.page-hero h1 { color: var(--ivory); font-size: clamp(28px, 4vw, 42px); }
.page-hero .sub { color: var(--muted-ivory); font-size: 17px; max-width: 62ch; margin: 0; }

/* ---------------- Étapes ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 12px; }
.step { border-top: 2px solid var(--brass); padding-top: 18px; }
.step-n { font-family: var(--mono); font-size: 13px; color: var(--brass); letter-spacing: 0.1em; }
.step h3 { margin-top: 8px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }

/* ---------------- Fonctions (accueil) ---------------- */
.feat-group { margin: 36px 0 14px; color: var(--brass); font-family: var(--mono); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 15px; }
.feat-intro { color: var(--muted); max-width: 62ch; margin: -6px 0 16px; }
.feat-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sum-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: 8px; padding: 26px 26px 22px; }
.sum-card h2 { font-size: 22px; margin-bottom: 12px; }
.sum-card .checklist { flex: 1; }
.sum-card .checklist li { border-bottom-color: var(--line); color: var(--tx); font-size: 14.5px; }
.sum-card .checklist svg { color: var(--brass); }
.sum-tag { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 14px; margin: 16px 0 0; color: var(--ink); font-weight: 500; font-size: 15px; }
.sum-tag svg { width: 20px; height: 20px; color: var(--brass); flex: none; margin-top: 1px; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px 14px; }
.feat h4 { display: flex; gap: 9px; align-items: baseline; font-family: var(--sans); font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.feat h4 svg { width: 16px; height: 16px; color: var(--brass); flex: none; position: relative; top: 2px; }
.feat p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------------- Cartes ---------------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 26px 26px 24px; }
.sec.alt .card { background: var(--paper); }
.card-ic { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; color: var(--brass); margin-bottom: 14px; }
.card-ic svg { width: 20px; height: 20px; }
.card h2 { font-size: 20px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 14.5px; margin-bottom: 12px; }

.split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: start; }
.side-card { background: var(--ink); color: var(--ivory); border-radius: 8px; padding: 28px; }
.side-card .card-ic { border-color: var(--line-ink); }
.side-card h3 { color: var(--ivory); font-size: 20px; margin: 0 0 10px; }
.lead { font-size: 18.5px; font-weight: 600; color: var(--ink); }
.price-play { font-size: 18px; margin: 0 0 8px; }
.price-play s { color: var(--muted); }
.price-play.fond { font-size: 21px; color: var(--ink); font-weight: 600; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-ink); font-size: 14.5px; }
.checklist li:last-child { border-bottom: none; }
.checklist svg { width: 15px; height: 15px; color: var(--brass-2); flex: none; position: relative; top: 2px; }
.checklist.big li { border-bottom-color: var(--line); font-size: 15.5px; }
.checklist.big { max-width: 640px; }
.checklist.big svg { color: var(--brass); }

/* ---------------- Tableaux ---------------- */
.table-scroll { overflow-x: auto; margin: 18px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
tbody th { font-weight: 600; color: var(--ink); }
.price-table td, .price-table tbody th { font-variant-numeric: tabular-nums; }
.cmp-table td:nth-child(2) { color: var(--ink); font-weight: 500; }
.legal-table { font-size: 14px; }
.vat-note { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ---------------- Cartes de prix (tarifs) ---------------- */
.center { text-align: center; }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.toggle.center { display: flex; width: max-content; margin: 0 auto 30px; }
.toggle button { font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 10px 18px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.toggle button.on { background: var(--ink); color: var(--ivory); }
.badge { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--gold-2); color: var(--ink-deep); border-radius: 3px; padding: 2px 6px;
  /* Repliée sur deux lignes, chaque ligne garde son fond arrondi. */
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.price-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.pcard { position: relative; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: 8px; padding: 24px 22px 20px; }
.pcard h2 { font-size: 21px; margin-bottom: 2px; }
.pfor { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.pfond { margin: 0 0 8px; display: flex; flex-direction: column; align-items: flex-start; }
.pprice { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pprice s { color: var(--muted); font-size: 16.5px; }
.pprice .amount { font-family: var(--serif); font-size: 38px; font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; }
.pcard .per { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
/* La liste de ce qui est compris, dans une carte de prix : les puces de la
   checklist, mais sur fond clair et resserrées pour tenir à quatre colonnes.
   Le bouton garde son margin-top:auto : les quatre boutons restent alignés. */
.pcard .checklist { margin: 0 0 18px; }
.pcard .checklist li { border-bottom-color: var(--line); color: var(--tx); font-size: 13.5px; padding: 7px 0; gap: 8px; }
.pcard .checklist svg { color: var(--brass); width: 14px; height: 14px; }
.pcard .btn { margin-top: auto; justify-content: center; font-size: 14px; padding-left: 14px; padding-right: 14px; }
.pspin { margin: 0 0 10px; }
.pspin label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.pspin input { width: 92px; font-family: var(--mono); font-size: 18px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }

/* ---------------- Le bouton d'action ---------------- */
.btn-cta { background: var(--ink-deep); color: var(--gold-2); border: 1.5px solid var(--gold); font-weight: 700; box-shadow: 0 6px 16px rgba(10, 18, 31, 0.3); }
.btn-cta:hover { background: var(--ink); color: var(--gold-2); border-color: var(--gold-2); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10, 18, 31, 0.4); }
.btn-full { width: 100%; justify-content: center; padding: 16px 28px; font-size: 17px; }

/* ---------------- Récapitulatif (acheter) ---------------- */
.recap { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: 20px 22px; margin: 6px 0 14px; }
.recap-line { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; }
.recap-line strong { font-family: var(--serif); font-size: 26px; font-variant-numeric: tabular-nums; }
.recap-prix { margin: 0 0 14px; }
.recap-prix strong { font-family: var(--serif); font-size: 32px; font-weight: 550; color: var(--ink); }
.recap .prix-fond { margin-bottom: 14px; }

/* ---------------- Prix fondateur (acheter) ---------------- */
.prix-fond { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 18px; }
.prix-fond .badge { align-self: flex-start; }
.prix-fond .pf-line s { color: var(--muted); font-size: 17px; margin-right: 10px; }
.prix-fond .pf-line strong { font-family: var(--serif); font-size: 32px; font-weight: 550; color: var(--ink); }
.postes-cards .radio-card { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 112px; }
.rc-l { font-weight: 600; }
.rc-price { font-size: 12px; opacity: 0.85; }
.restants { font-family: var(--mono); font-size: 13px; color: var(--brass); font-weight: 600; margin: 10px 0 0; }
.recap .restants { margin-bottom: 12px; }
.rc-price s { opacity: 0.7; margin-right: 3px; }
.plus-field { margin: 10px 0 0; }
.plus-field input { width: 110px; font-family: var(--mono); font-size: 18px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }

/* ---------------- Formulaire (acheter) ---------------- */
.achat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px; margin: 26px 0; }
.form-field { margin-bottom: 20px; border: 0; padding: 0; }
.form-field label, .form-field legend { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-field input[type="text"], .form-field input[type="email"] { width: 100%; max-width: 420px; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-family: var(--sans); }
.form-field input[type="number"] { width: 110px; font-family: var(--mono); font-size: 18px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.radio-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-card { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 16px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--tx); background: var(--paper); }
/* Les puces radio vivent dans .form-field, dont la règle « label » (bloc,
   13,5 px, gras) les écraserait : on rétablit leur mise en forme. */
.form-field .radio-card { display: inline-flex; font-size: 15px; font-weight: 500; color: var(--tx); margin-bottom: 0; }
.radio-card:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.radio-card input { accent-color: var(--brass); }
.accept label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; color: var(--tx); }
.accept input { margin-top: 4px; accent-color: var(--brass); }
.field-err, .form-err { color: var(--err); font-size: 13.5px; margin: 6px 0 0; font-weight: 500; }
.form-err { border-left: 3px solid var(--err); padding: 8px 12px; background: #faf0ed; border-radius: 0 4px 4px 0; margin-bottom: 14px; }

/* ---------------- FAQ ---------------- */
.faq-h { margin-top: 44px; font-size: 22px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--mono); font-size: 18px; color: var(--brass); flex: none; }
.faq-item[open] summary::after { content: "×"; }
.faq-a { padding: 0 0 18px; color: var(--muted); font-size: 15px; max-width: 68ch; }
.faq-a p { margin-bottom: 10px; }

/* ---------------- Blocs divers ---------------- */
.note-box { display: flex; gap: 16px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: var(--radius); padding: 20px 22px; margin: 32px 0; }
.sec.alt .note-box { background: var(--paper); }
.note-box svg { width: 22px; height: 22px; color: var(--brass); flex: none; margin-top: 2px; }
.note-box p, .note-box ul { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.note-box ul { padding-left: 18px; }
.note-box strong { color: var(--ink); }
.note-box.already { border-left-color: var(--ink); }

/* ---------------- Guide ---------------- */
.guide .g-step { margin-bottom: 44px; }
.guide .g-step h2 { display: flex; align-items: baseline; gap: 14px; font-size: 24px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.guide ul { padding-left: 20px; color: var(--muted); }
.guide li { margin-bottom: 6px; }
.g-note { background: var(--paper-2); border-left: 3px solid var(--brass); padding: 12px 16px; border-radius: 0 4px 4px 0; margin: 14px 0; font-size: 14.5px; color: var(--muted); }
.g-tip { display: flex; gap: 12px; align-items: flex-start; }
.g-tip > svg { width: 20px; height: 20px; color: var(--brass); flex: none; margin-top: 2px; }
.ic-os { width: 16px; height: 16px; vertical-align: -2px; margin-right: 4px; color: var(--ink); display: inline-block; }

/* ---------------- Téléchargement ---------------- */
.os-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 26px 0; align-items: start; }
.os-col { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: 8px; padding: 26px; }
.os-h { display: flex; align-items: center; gap: 10px; font-size: 26px; margin: 0 0 4px; }
.os-h .ic-os { width: 24px; height: 24px; margin-right: 0; vertical-align: 0; color: var(--brass); }
.os-col .pfor { margin-bottom: 16px; }
.os-col .btn-full { margin-bottom: 14px; }
.os-col h3 { font-size: 17px; margin: 24px 0 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.os-col h4 { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 12px 0 4px; }
.os-col p { font-size: 14.5px; color: var(--muted); }
.dl-meta { font-size: 12.5px; color: var(--muted); word-break: break-all; line-height: 1.8; }
.dl-meta code { background: var(--paper-2); padding: 2px 6px; border-radius: 3px; }

/* ---------------- À propos ---------------- */
.sup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sup-grid .btn { margin: 6px 0 12px; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0; }
.person h2 { font-size: 19px; margin-bottom: 2px; }
.person .fine { margin-bottom: 8px; }
.editor-block { font-size: 14px; line-height: 2; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px 22px; display: inline-block; }

/* ---------------- Légal ---------------- */
.legal article { margin-bottom: 52px; }
.legal article > h2 { border-bottom: 2px solid var(--brass); padding-bottom: 8px; scroll-margin-top: 84px; }
.legal article { scroll-margin-top: 84px; }
.legal h3 { font-size: 17px; font-family: var(--sans); font-weight: 700; margin-top: 26px; }
.legal p, .legal li { font-size: 15px; color: var(--muted); }
.legal strong { color: var(--tx); }
.legal-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.legal-toc a { font-family: var(--mono); font-size: 12.5px; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--tx); }
.legal-toc a:hover { border-color: var(--brass); color: var(--brass); }

/* ---------------- Bande CTA ---------------- */
.cta-band { background: var(--ink); color: var(--ivory); padding: 72px 0; text-align: center; }
.cta-band h2 { color: var(--ivory); }
.cta-band p { color: var(--muted-ivory); max-width: 56ch; margin: 0 auto; }

/* ---------------- Footer ---------------- */
.site-foot { background: var(--ink-deep); color: var(--muted-ivory); padding: 56px 0 32px; }
.f-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line-ink); }
.f-brand p { font-size: 13.5px; color: var(--faint-ivory); margin-top: 10px; max-width: 34ch; }
.f-col { display: flex; flex-direction: column; gap: 8px; }
.f-col h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-2); margin: 0 0 6px; font-weight: 500; }
.f-col a { color: var(--muted-ivory); text-decoration: none; font-size: 14px; }
.f-col a:hover { color: var(--ivory); }
.f-bottom { padding-top: 24px; font-size: 12.5px; color: var(--faint-ivory); }
.f-bottom p { margin-bottom: 8px; max-width: 90ch; }

/* Le déroulé du menu : la hauteur s'ouvre, la marge intérieure vient avec.
   420 px est un plafond (sept liens en tiennent environ 350) : l'ouverture
   se termine donc un peu avant la fin de la course, ce que l'ease-out cache. */
@keyframes nav-deroule {
  from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
  to { max-height: 420px; padding-top: 8px; padding-bottom: 12px; opacity: 1; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1180px) {
  .site-nav { gap: 13px; }
  .head-in { gap: 14px; }
  .btn-s { padding: 8px 10px; font-size: 12.5px; }
  .site-nav a { font-size: 13px; }
}
@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; gap: 40px; }
  .steps, .feat-grid { grid-template-columns: 1fr 1fr; }
  .feat-sum { grid-template-columns: 1fr; }
  .price-cards { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .f-top { grid-template-columns: 1fr 1fr; }
  .os-grid, .people, .sup-grid { grid-template-columns: 1fr; }
  /* La barre de bureau ne tient plus sous ~930 px en NL : sept liens, le
     sélecteur de langue et deux boutons. Elle passe au menu déroulant ici,
     et non à 860 px, où elle débordait déjà de la page. */
  .head-in { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .burger { display: flex; flex-direction: column; gap: 4px; margin-left: auto; cursor: pointer; padding: 8px; order: 2; }
  .burger span { width: 20px; height: 2px; background: var(--ivory); display: block; transition: transform 0.26s ease, opacity 0.16s ease; }
  /* Ouvert, les trois barres se croisent : la première descend et pivote, la
     deuxième s'efface, la troisième monte et pivote. Le décalage est de 6 px,
     la distance entre deux centres de barre (2 px de barre + 4 px d'écart). */
  .nav-t:checked ~ .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-t:checked ~ .burger span:nth-child(2) { opacity: 0; }
  .nav-t:checked ~ .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .head-right { order: 3; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .site-nav { display: none; order: 4; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0 12px; }
  .site-nav a { font-size: 16px; padding: 8px 0; }
  /* Fermé, le menu reste en display:none : gardé dans le flux, il ajouterait
     à l'en-tête une ligne vide et son gap de 12 px. Le déroulé est donc joué
     par une animation, à l'ouverture seulement ; la fermeture est immédiate.
     overflow:hidden fait glisser les liens sous le bord qui s'ouvre. */
  .nav-t:checked ~ .site-nav { display: flex; overflow: hidden; animation: nav-deroule 0.3s ease-out; }
}
@media (max-width: 860px) {
  .steps, .feat-grid, .price-cards { grid-template-columns: 1fr; }
  .strip { flex-direction: column; }
  .strip > div { border-right: none; border-bottom: 1px solid var(--line-ink); }
  .sec { padding: 52px 0; }
  .hero { padding-top: 48px; }
  .calc-row { gap: 18px; }
}
/* ---------------- Typographie sur téléphone ----------------
   Sous 720 px, le texte courant gagne environ 1,5 px et les petites mentions
   1 px : tenu à bout de bras, 14,5 px se lisait mal. Les grands titres ne
   sont pas repris, leur clamp() suit déjà la largeur de l'écran. Ce bloc est
   la dernière requête de média : à spécificité égale, il l'emporte. */
@media (max-width: 720px) {
  body { font-size: 18px; }
  h3 { font-size: 21.5px; }
  .fine { font-size: 14.5px; }
  .eyebrow { font-size: 13px; }
  .lead { font-size: 19.5px; }

  /* En-tête */
  .btn { font-size: 16px; }
  .btn-s { font-size: 14px; }
  .btn-big { font-size: 17px; }
  .btn-full { font-size: 18px; }
  .site-nav a { font-size: 17px; }
  .lang summary { font-size: 13.5px; }
  .lang-menu a { font-size: 14.5px; }

  /* Héro */
  .hero .sub { font-size: 19.5px; }
  .hero-note { font-size: 15px; }
  .hero-fond .hf-line strong { font-size: 34px; }
  .hero-fond .hf-line s { font-size: 17px; }
  .hero-fond .hf-line span, .hero-fond .hf-note { font-size: 15px; }
  .page-hero .sub { font-size: 18.5px; }
  .panel-bar span { font-size: 12.5px; }
  .panel-body { font-size: 13px; }
  .strip .k { font-size: 11.5px; }

  /* Sections, cartes, listes */
  .sec-more, .step p, .sum-tag { font-size: 16.5px; }
  .step-n { font-size: 14px; }
  .feat-group { font-size: 16px; }
  .feat h4 { font-size: 16.5px; }
  .feat p { font-size: 15.5px; }
  .card p, .checklist li, .sum-card .checklist li,
  .note-box p, .note-box ul { font-size: 16px; }
  .checklist.big li { font-size: 17px; }
  .pcard .checklist li { font-size: 15px; }
  .card h2, .side-card h3, .person h2 { font-size: 21px; }

  /* Tableaux */
  table { font-size: 16px; }
  thead th { font-size: 12.5px; }
  .legal-table { font-size: 15px; }
  .vat-note { font-size: 14.5px; }

  /* Prix et achat */
  .toggle button { font-size: 15.5px; }
  .badge { font-size: 11px; }
  .pfor { font-size: 15px; }
  .pcard .btn { font-size: 15.5px; }
  .pspin label { font-size: 14px; }
  .rc-price { font-size: 13.5px; }
  .restants { font-size: 14.5px; }
  .form-field label, .form-field legend { font-size: 15px; }
  .form-field input[type="text"], .form-field input[type="email"] { font-size: 17px; }
  .radio-card, .form-field .radio-card, .accept label { font-size: 16px; }
  .field-err, .form-err { font-size: 15px; }

  /* FAQ, guide, téléchargement, pages légales */
  .faq-item summary { font-size: 17.5px; }
  .faq-a { font-size: 16.5px; }
  .g-note, .os-col h4, .os-col p { font-size: 16px; }
  .os-col h3, .legal h3 { font-size: 18px; }
  .dl-meta { font-size: 13.5px; }
  .editor-block { font-size: 15.5px; }
  .legal p, .legal li { font-size: 16.5px; }
  .legal-toc a { font-size: 13.5px; }

  /* Pied de page */
  .f-brand p { font-size: 15px; }
  .f-col h3 { font-size: 12px; }
  .f-col a { font-size: 15.5px; }
  .f-bottom { font-size: 13.5px; }
}

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