:root {
  --bg: #F9F9F7;
  --surface: #FFFFFF;
  --ink: #161614;
  --ink-secondary: #55544F;
  --ink-muted: #8A8880;
  --hairline: #E4E3DC;
  --accent: #2F6B6B;
  --accent-hover: #245454;
  --accent-wash: rgba(47, 107, 107, 0.08);
  --row-hover: #F3F3EF;

  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: 48px; --sp-8: 64px; --sp-12: 96px;
  --radius-sm: 4px; --radius-md: 6px;

  /* Une seule famille système partout, y compris les grands chiffres :
     décision actée avec Pascal le 7 août 2026, conforme à prompt-design.md
     (le prototype utilisait Space Grotesk, écart au brief refermé). */
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  min-height: 100vh;
}

::selection { background: var(--accent); color: #fff; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 6px; }

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

.muted { color: var(--ink-muted); }
.muted-label { font-size: 12px; color: var(--ink-muted); margin-bottom: 6px; }
.mono { font-family: var(--font-mono); }
.small { font-size: 13px; }
.accent-strong { font-weight: 800; color: var(--accent); }

/* ---------- Layout shell ---------- */

#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 60px;
}
.logo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--ink);
  padding: 0;
}
.main-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
}
.nav-link {
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-secondary);
  font-weight: 400;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.nav-link.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.compare-badge {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

#site-main { width: 100%; }

.screen { max-width: 1280px; margin: 0 auto; padding: var(--sp-3); }

footer.site-footer {
  border-top: 1px solid var(--hairline);
  padding: var(--sp-3);
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------- Buttons & controls ---------- */

.btn-primary {
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-compact { padding: 10px 12px; font-size: 13px; }
.btn-continue { margin-top: 20px; }

.btn-outline {
  padding: 12px 20px;
  font-size: 14px;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink);
}
.btn-outline:hover { background: var(--row-hover); }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: inherit;
  cursor: pointer;
  text-align: left;
}
.link-btn:hover { color: var(--accent-hover); text-decoration: underline; }

.icon-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px;
}
.icon-btn:hover { color: var(--ink); }

select, input[type="text"] {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
}

input[type="range"] { width: 100%; accent-color: var(--accent); }

.source-note { font-size: 11px; color: var(--ink-muted); margin-top: 8px; }
.chart-caption { margin-bottom: 8px; font-size: 13px; color: var(--ink-secondary); }

details summary { cursor: pointer; font-size: 13px; color: var(--accent); margin-top: 12px; }
details[open] summary { margin-bottom: 12px; }

/* ---------- Ad slots ---------- */

.ad-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-3); }
.ad-wrap-narrow { max-width: 760px; }
.ad-slot {
  margin: var(--sp-4) 0;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ad-slot-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ad-slot-box {
  width: 100%;
  border: 1px solid var(--hairline);
  background: repeating-linear-gradient(135deg, var(--bg), var(--bg) 8px, var(--row-hover) 8px, var(--row-hover) 16px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-slot-box span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }

/* ---------- Accueil ---------- */

.home {
  max-width: 760px;
  padding: var(--sp-12) var(--sp-3) var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.home-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 300;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
.home-search { width: 100%; display: flex; gap: var(--sp-1); }
.home-search input { flex: 1; padding: 14px 16px; font-size: 16px; }
.home-search button { padding: 14px 22px; font-size: 15px; font-weight: 600; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; }
.home-search button:hover { background: var(--accent-hover); }

.home-suggestions {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  overflow: hidden;
}
.suggestion-row {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink);
}
.suggestion-row:last-child { border-bottom: none; }
.suggestion-row:hover { background: var(--row-hover); }

.home-cards { display: flex; gap: var(--sp-2); margin-top: 12px; width: 100%; flex-wrap: wrap; }
.home-card {
  flex: 1;
  min-width: 220px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.home-card:hover { border-color: var(--accent); }
.home-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.home-card-desc { font-size: 13px; color: var(--ink-secondary); line-height: 1.5; }

/* ---------- Exploration ---------- */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 20px;
}
.filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-field span { font-size: 12px; color: var(--ink-muted); }
.filter-count { margin-left: auto; font-size: 13px; color: var(--ink-muted); padding-bottom: 8px; }

.explore-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-3); align-items: start; }

.map-panel { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); padding: var(--sp-2); }
.map-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.map-area { position: relative; height: 520px; background: var(--bg); border-radius: var(--radius-sm); overflow: hidden; }
.map-dot { position: absolute; border-radius: 50%; border: 1px solid; cursor: pointer; transition: transform .1s; }
.map-tooltip {
  position: absolute;
  transform: translate(-50%, -130%);
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
}

.city-list { display: flex; flex-direction: column; }
.city-row {
  padding: 14px 4px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.city-row.is-hovered { background: var(--row-hover); }
.city-row-name { font-size: 15px; font-weight: 600; }
.city-row-meta { font-size: 12px; color: var(--ink-muted); }
.city-row-value { text-align: right; }
.city-row-price { font-size: 15px; font-weight: 600; }
.city-row-unit { font-size: 11px; color: var(--ink-muted); }

.empty-state { padding: 32px 4px; color: var(--ink-muted); font-size: 14px; text-align: center; }
.empty-state-block { padding: 64px var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--radius-md); }

/* ---------- Fiche ville ---------- */

.fiche {
  display: grid;
  grid-template-columns: 200px 1fr 260px;
  gap: var(--sp-4);
  align-items: start;
  padding-top: var(--sp-3);
  padding-bottom: 0;
}
.fiche-side-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
.fiche-nav-link {
  font-size: 13px;
  padding: 8px 10px;
  border-left: 2px solid transparent;
  color: var(--ink-secondary);
  font-weight: 400;
  text-decoration: none;
}
.fiche-nav-link.is-active { border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.fiche-side-nav .btn-primary { margin-top: 20px; }

.fiche-main { min-width: 0; }
.fiche-identity { padding-bottom: 20px; border-bottom: 1px solid var(--hairline); margin-bottom: 20px; }
.fiche-name { font-family: var(--font-display); font-size: 36px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.015em; }
.fiche-pop { font-size: 15px; color: var(--ink-secondary); margin-bottom: 8px; }
.fiche-synthesis { font-size: 17px; font-weight: 300; color: var(--ink); line-height: 1.6; max-width: 70ch; margin: 0; }
.fiche-synthesis strong { font-weight: 700; color: var(--accent); }

.fiche-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 12px;
}
.fiche-tile { background: var(--surface); padding: 16px 14px; }
.fiche-tile-label { font-size: 12px; color: var(--ink-muted); margin-bottom: 6px; }
.fiche-tile-value { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.fiche-tile-delta { font-size: 12px; color: var(--ink-secondary); }
.fiche-tile-delta.is-good { color: var(--ink); }

.fiche-section { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); margin-top: var(--sp-3); }
.fiche-section-last { padding-bottom: var(--sp-4); }
.section-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.section-num { font-family: var(--font-display); font-weight: 300; font-size: 16px; color: var(--accent); }
.section-head h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin: 0; }

.stat-pair { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.stat-big { font-family: var(--font-display); font-size: 34px; font-weight: 800; }
.stat-unit { font-size: 15px; font-weight: 400; color: var(--ink-secondary); }
.stat-label { font-size: 13px; color: var(--ink-secondary); }

.fiche-rail { position: sticky; top: 76px; }

/* ---------- Tables (detail, compare, ranking) ---------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
.detail-table { margin-top: 12px; }
.detail-table th { text-align: left; padding: 8px 4px; color: var(--ink-muted); font-weight: 500; border-bottom: 1px solid var(--hairline); }
.detail-table th.num, .detail-table td.num { text-align: right; }
.detail-table td { padding: 8px 4px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.detail-table tr:last-child td { border-bottom: none; }
.detail-text { margin-top: 12px; font-size: 14px; color: var(--ink-secondary); line-height: 1.6; }

.screen-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.screen-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin: 0; }

.table-scroll { overflow-x: auto; }
.compare-table th, .compare-table td { padding: 10px 12px; }
.compare-table thead th { border-bottom: 1px solid var(--hairline); min-width: 200px; text-align: left; vertical-align: top; }
.row-label-head { width: 180px; position: sticky; left: 0; background: var(--bg); }
.compare-head-cell { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.compare-city-name { font-size: 17px; font-weight: 700; }
.compare-city-region { font-size: 12px; color: var(--ink-muted); font-weight: 400; }
.compare-table tbody tr { border-bottom: 1px solid var(--hairline); }
.compare-table td.row-label { font-size: 13px; color: var(--ink-secondary); position: sticky; left: 0; background: var(--bg); }
.compare-table td { font-variant-numeric: tabular-nums; }
.compare-table td.is-best { font-weight: 700; color: var(--accent); background: var(--accent-wash); }

.ranking-table th { text-align: left; padding: 10px 8px; font-size: 12px; color: var(--ink-muted); font-weight: 500; border-bottom: 1px solid var(--hairline); cursor: default; }
.ranking-table th.sortable, .ranking-table th[data-action="sort"] { cursor: pointer; }
.ranking-table th.is-sorted { color: var(--ink); }
.ranking-table th.num { text-align: right; }
.ranking-table td { padding: 10px 8px; border-bottom: 1px solid var(--hairline); }
.ranking-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ranking-table td.muted-cell { color: var(--ink-secondary); }
.rank-col { width: 32px; }

/* ---------- Comparateur (empty state head) ---------- */

.compare .screen-head select { min-width: 200px; }

/* ---------- Questionnaire ---------- */

.questionnaire { max-width: 640px; padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.questionnaire h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin: 0 0 20px; }

.q-progress { margin-bottom: var(--sp-4); }
.q-progress-track { height: 4px; background: var(--hairline); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.q-progress-fill { height: 100%; background: var(--accent); }

.q-option-list { display: flex; flex-direction: column; gap: 8px; }
.q-option {
  text-align: left;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.q-option:hover { border-color: var(--accent); }
.q-option.is-selected { border-color: var(--accent); background: var(--row-hover); }

.q-slider-value { margin-bottom: var(--sp-3); }
.q-slider-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-muted); margin-top: 6px; }

.q-back { margin-top: var(--sp-2); display: block; color: var(--ink-secondary); font-size: 14px; }

.q-results { display: flex; flex-direction: column; }
.q-result { padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.q-result-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.q-result-name { font-size: 17px; font-weight: 700; }
.q-result-score { font-size: 17px; font-weight: 700; }
.q-result-bar { height: 6px; background: var(--hairline); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.q-result-bar-fill { height: 100%; background: var(--ink); }
.q-result-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.q-reason { font-size: 12px; color: var(--ink-secondary); border: 1px solid var(--hairline); border-radius: 3px; padding: 4px 8px; }
.q-result-rapport { display: block; margin-top: 10px; font-size: 13px; }

.resultats { max-width: 760px; }

/* ---------- Classements ---------- */

.ranking { max-width: 1000px; }

/* ---------- Rapport détaillé ---------- */

.rapport { max-width: 720px; }
.rapport-title { font-family: var(--font-display); font-size: 32px; font-weight: 800; margin: 16px 0 4px; letter-spacing: -0.015em; }
.rapport-section-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: var(--sp-3) 0 10px; }
.rapport-args { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rapport-args li { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; }
.rapport-args-positive li { background: var(--accent-wash); border-left: 3px solid var(--accent); }
.rapport-args-negative li { background: var(--row-hover); border-left: 3px solid var(--ink-muted); }
.rapport-disclaimer { margin-top: var(--sp-3); }

/* ---------- Blog ---------- */

.blog-intro { margin-bottom: var(--sp-2); max-width: 70ch; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.blog-card {
  text-align: left; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: var(--sp-2); cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 6px;
}
.blog-card:hover { border-color: var(--accent); }
.blog-card-date { text-transform: capitalize; }
.blog-card-title { font-size: 16px; font-weight: 700; line-height: 1.35; }
.blog-card-excerpt { font-size: 13px; color: var(--ink-secondary); line-height: 1.5; }
.blog-article { max-width: 700px; }
.blog-article-body { font-size: 16px; line-height: 1.7; color: var(--ink-secondary); max-width: 65ch; }

@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ---------- Charts (inline SVG) ---------- */

.bar-chart, .line-chart { display: block; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .explore-grid { grid-template-columns: 1fr; }
  .map-area { height: 360px; }

  .fiche {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .fiche-side-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 12px;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: var(--sp-2);
  }
  .fiche-side-nav .btn-primary { margin-top: 0; margin-left: auto; }
  .fiche-rail { position: static; }
  .fiche-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* L'en-tête passe sur deux lignes : à 375 px, le logo, la navigation et le
     bouton de comparaison ne tiennent pas côte à côte, et le bouton finissait
     par déborder hors de l'écran en écrasant la navigation. */
  .header-inner {
    height: auto;
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
  }
  .header-inner .logo { font-size: 17px; }
  .header-inner .main-nav { order: 3; flex-basis: 100%; }
  .compare-badge {
    margin-left: auto;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-title { font-size: 28px; }
  .home-cards { flex-direction: column; }
  .home-search { flex-direction: column; }

  .fiche-tiles { grid-template-columns: 1fr 1fr; }
  .fiche-name { font-size: 28px; }
  .stat-big { font-size: 26px; }

  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-count { margin-left: 0; }

  .screen-head { flex-direction: column; align-items: flex-start; }
}

/* Every section with a scoll-margin so anchor jumps clear the sticky header */
[id] { scroll-margin-top: 76px; }

/* ---------- Fiches statiques (générées par generateur/generer-fiches.py) ---------- */

/* Les mêmes classes servent au SPA (boutons) et aux fiches (liens). */
a.logo, a.nav-link, a.compare-badge, a.suggestion-row {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
a.btn-primary.btn-lien { text-decoration: none; text-align: center; display: block; }

.badge-maille {
  display: inline-block;
  font-size: 11px;
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  white-space: nowrap;
  vertical-align: 1px;
}
.table-famille { margin-top: var(--sp-3); }
.cellule-source { font-size: 12px; color: var(--ink-muted); }
.fiche-voisines a { white-space: nowrap; }

@media (max-width: 960px) {
  /* Un seul emplacement publicitaire par écran sur mobile : le rail (second
     emplacement de la fiche) disparaît sous 960 px. */
  .fiche-rail { display: none; }
}

/* ---------- Bandeau de consentement (consentement.js) ---------- */

#bandeau-consentement {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}
#bandeau-consentement p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-secondary);
  max-width: 70ch;
  line-height: 1.5;
}
.consentement-boutons { display: flex; gap: var(--sp-1); flex-shrink: 0; }

/* ---------- Écrans branchés sur les vraies données ---------- */

.map-dot.is-hovered { transform: scale(1.5); z-index: 2; }
.city-row:hover { background: var(--row-hover); }

/* Avertissements du scoring (filtre desserré, incompatibilité, classement
   par défaut) : visibles sans être criards, jamais confondus avec une pub. */
.avis {
  margin: var(--sp-2) 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  font-size: 14px;
  line-height: 1.5;
}
.avis-incompatibilite { border-left-color: #e34948; background: rgba(227, 73, 72, 0.07); }

.q-reason-faible { border-style: dashed; }

/* Bloc réservé du futur formulaire (questionnaire freemium, doc 30) :
   l'emplacement existe dès le MVP, rien n'y est actif. */
.bloc-reserve {
  margin: var(--sp-4) 0 var(--sp-2);
  padding: var(--sp-2);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  opacity: 0.65;
}

/* Legende separant les modes de la selection des blocs, question politique */
.q-bloc-legend { margin: 18px 0 8px; }