:root {
  /* IDENTITÉ — en-tête, pied, liens et boutons. Jamais pour encoder une carte. */
  --ep-turquoise: #53cdd4;
  --ep-turquoise-light: #7cd5de;
  --ep-blue: #437fb3;
  --ep-navy: #0066a8;

  /* DONNÉES — extension hors charte. Le pôle chaud est délibérément extérieur
     au logo : une palette uniquement froide n'exprime pas une polarité. Le
     navy reste une couleur d'identité et de texte, jamais une classe de carte. */
  --data-cool: #437fb3;
  --data-warm: #eb6834;
  --data-neutral: #e8e6e1;

  --brand-primary: var(--ep-navy);
  --brand-accent: var(--ep-blue);
  --brand-focus: var(--ep-turquoise);
  --brand-caution: var(--data-warm);
  --paper: #f7f8fc;
  --paper-bright: #ffffff;
  --ink: #0f172a;
  --muted: #58657a;
  --line: rgba(0, 102, 168, 0.14);
  --line-strong: rgba(0, 102, 168, 0.28);
  --paca: var(--brand-caution);
  --paca-soft: #f5b6b1;
  --grand-est: var(--brand-accent);
  --grand-est-soft: #a9d9df;
  --accent: var(--brand-primary);
  --accent-soft: var(--brand-focus);
  --surface-tint: #edf2f8;
  /* Échelle typographique — dix marches dérivées de la distribution réelle
     de la feuille. Aucune taille littérale hors de ces jetons ; les clamp()
     n'interpolent qu'entre deux marches existantes. */
  --fs-100: 12px;
  --fs-200: 14px;
  --fs-300: 16px;
  --fs-400: 18px;
  --fs-500: 21px;
  --fs-600: 26px;
  --fs-700: 34px;
  --fs-800: 44px;
  --fs-900: 56px;
  --fs-1000: 68px;

  --radius-sm: 8px;
  --radius-pill: 999px;
  --radius-md: 12px;
  --ease-out: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --rise: 16px;
  --motion-fast: var(--dur-1);
  --motion-normal: var(--dur-2);
  --header-height: 76px;
  --gutter: clamp(20px, 4vw, 68px);
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  color-scheme: light;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
}

h1,
h2,
.evidence-main-label {
  text-wrap: balance;
}

p,
li,
blockquote {
  text-wrap: pretty;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

/* Anneau de focus — ticket O6.
   Le décalage place l'anneau sur le fond de page, pas sur le composant : c'est donc
   contre ce fond qu'il doit atteindre 3:1 (WCAG 1.4.11).
   --brand-focus (#53cdd4) n'y arrivait pas — 1,79:1 sur --paper.
   --brand-primary (#0066a8) donne 5,71:1, et le liseré clair garantit la visibilité
   si l'anneau se retrouve un jour sur un fond sombre. */
button:focus-visible,
a:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--paper-bright);
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 12px;
  top: 10px;
  padding: 8px 16px;
  background: var(--ink);
  color: white;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  min-height: 100svh;
}

.site-header {
  position: relative;
  z-index: 20;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.publication-status {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px var(--gutter);
  border-bottom: 1px solid rgba(0, 102, 168, 0.16);
  background: #edf8fa;
  color: var(--ep-navy);
  font-size: var(--fs-100);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

.publication-status strong {
  font-weight: 800;
}

.publication-status strong::after {
  content: "·";
  margin-left: 8px;
  color: var(--ep-turquoise);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent), var(--brand-focus));
}

.brand,
.site-nav button,
.method-button,
.back-button,
.chart-tab,
.dialog-topline button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: -0.01em;
  min-height: 44px;
  min-width: 44px;
}

.brand-lockup {
  display: block;
  width: 148px;
  height: 28px;
  object-fit: contain;
}

.brand-mark {
  display: none;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.brand-atlas {
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-region-select {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-region-select > span {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-region-select select {
  width: min(28vw, 250px);
  padding: 8px 28px 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-100);
  font-weight: 700;
  cursor: pointer;
}

.site-region-select select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.site-nav button,
.method-button {
  position: relative;
  padding: 10px 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--dur-1) var(--ease-out);
}

.site-nav button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 4px;
  height: 1px;
  background: var(--accent);
  transition: right var(--dur-2) var(--ease-io);
}

.site-nav button:hover,
.site-nav button.is-active,
.method-button:hover {
  color: var(--ink);
}

.site-nav button.is-active::after {
  right: 0;
}

.method-button {
  justify-self: end;
}

#view {
  min-height: calc(100svh - var(--header-height));
}

#view:focus {
  outline: none;
}

.loading-state {
  min-height: calc(100svh - var(--header-height));
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: var(--muted);
  font-size: var(--fs-100);
}

.loading-state span {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-top-color: var(--paca);
  border-radius: 50%;
  animation: spin calc(var(--dur-3) * 2) linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.home-view {
  min-height: calc(100svh - var(--header-height));
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(480px, 1.12fr);
  overflow: hidden;
}

.home-copy {
  position: relative;
  z-index: 2;
  padding: clamp(46px, 8vh, 100px) var(--gutter) 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow,
.section-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.home-title {
  max-width: 680px;
  margin: 28px 0 24px;
  font-size: clamp(var(--fs-900),  6.4vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -0.068em;
  line-height: 0.82;
}

.home-title span {
  display: block;
  margin-left: clamp(24px, 5vw, 86px);
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.25;
  white-space: nowrap;
}

.home-intro {
  max-width: 510px;
  margin: 0;
  color: #48524e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-300),  1.6vw, var(--fs-500));
  line-height: 1.55;
}

.territory-picker {
  max-width: 570px;
  margin-top: clamp(36px, 6vh, 68px);
  border-top: 1px solid var(--line-strong);
}

.territory-button {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.territory-button .num {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.territory-button .name {
  font-size: clamp(var(--fs-300),  1.4vw, var(--fs-500));
  font-weight: 700;
  letter-spacing: -0.025em;
}

.territory-button .arrow {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: transform var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-io),
    color var(--dur-2) var(--ease-out);
}

.territory-button:hover .arrow {
  transform: translateX(5px);
  background: var(--ink);
  color: var(--paper);
}

.map-stage {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: #e7e4dc;
}

.map-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(23, 32, 29, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 32, 29, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 94%);
}

.map-stage svg {
  position: absolute;
  width: min(94%, 780px);
  height: 88%;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.map-region {
  fill: #d6d3cb;
  stroke: var(--paper-bright);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-1) var(--ease-out),
    filter var(--dur-1) var(--ease-out),
    opacity var(--dur-1) var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}

.map-region.is-available {
  cursor: pointer;
  animation: region-in var(--dur-3) var(--ease-out) both;
}

.map-region.is-available { fill: var(--region-fill, #b7c6bf); }

.map-region.is-region-transition,
.region-map-stage.is-region-transition {
  view-transition-name: var(--region-vt);
}

.map-region.is-available:hover,
.map-region.is-available:focus-visible {
  fill: var(--ink);
  filter: drop-shadow(0 10px 12px rgba(23, 32, 29, 0.18));
  outline: none;
  stroke: var(--brand-primary);
  stroke-width: 3;
}

@keyframes region-in {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to { opacity: 1; transform: translateY(0); }
}

.map-note {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 34px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-counter {
  position: absolute;
  right: 34px;
  bottom: 32px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.map-counter strong {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-800);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.map-tooltip {
  position: fixed;
  z-index: 50;
  max-width: 260px;
  padding: 8px 12px;
  background: var(--ink);
  color: white;
  pointer-events: none;
  opacity: 0;
  transform: translate(12px, 10px);
  transition: opacity var(--dur-1) var(--ease-out);
  font-size: var(--fs-100);
  font-weight: 700;
}

.map-tooltip.is-visible {
  opacity: 1;
}

.region-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  grid-template-columns: minmax(380px, 0.88fr) minmax(480px, 1.12fr);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.region-hero-copy {
  padding: 38px var(--gutter) 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.back-button {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(44px, 8vh, 92px);
  padding: 8px 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.back-button span {
  font-size: var(--fs-300);
  transition: transform var(--dur-1) var(--ease-out);
}

.back-button:hover span {
  transform: translateX(-4px);
}

.region-title {
  max-width: 760px;
  margin: 21px 0 24px;
  font-size: clamp(var(--fs-900),  6.4vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.88;
}

.region-deck {
  max-width: 650px;
  margin: 0;
  color: #46504c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-400),  1.55vw, var(--fs-500));
  line-height: 1.48;
}

.region-period {
  margin: clamp(40px, 8vh, 80px) 0 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.region-map-stage {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: var(--accent-soft);
}

.region-map-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, transparent 0 32%, rgba(23, 32, 29, 0.12) 78%);
  pointer-events: none;
}

.region-map-stage svg {
  position: absolute;
  z-index: 1;
  width: 76%;
  height: 60%;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.hero-map-toolbar {
  position: absolute;
  z-index: 4;
  top: 28px;
  left: 30px;
  right: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.hero-map-metric-control,
.hero-scale-switch {
  display: grid;
  gap: 8px;
}

.hero-map-metric-control > p,
.hero-scale-switch > span {
  margin: 0;
  color: rgba(23, 32, 29, 0.66);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hero-metric-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero-metric-tabs button {
  position: relative;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: rgba(23, 32, 29, 0.6);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-metric-tabs button::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--ink);
  transition: right var(--dur-2) var(--ease-io);
}

.hero-metric-tabs button:hover,
.hero-metric-tabs button.is-active {
  color: var(--ink);
}

.hero-metric-tabs button.is-active::after {
  right: 0;
}

.hero-scale-switch {
  justify-items: end;
}

.hero-scale-switch > div {
  display: flex;
  padding: 3px;
  border: 1px solid rgba(23, 32, 29, 0.28);
  background: rgba(250, 248, 242, 0.36);
}

.hero-scale-switch button {
  min-height: 36px;
  padding: 8px 8px;
  border: 0;
  background: transparent;
  color: rgba(23, 32, 29, 0.68);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 700;
}

.hero-scale-switch button.is-active {
  background: var(--ink);
  color: var(--paper-bright);
}

.hero-department {
  fill: rgba(250, 248, 242, 0.55);
  stroke: var(--ink);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  animation: department-rise var(--dur-3) var(--ease-out) both;
}

.hero-data-shape {
  stroke: rgba(23, 32, 29, 0.78);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill var(--dur-2) var(--ease-io),
    stroke var(--dur-1) var(--ease-out),
    stroke-width var(--dur-1) var(--ease-out),
    filter var(--dur-1) var(--ease-out),
    opacity var(--dur-1) var(--ease-out);
}

.hero-data-shape:hover {
  filter: drop-shadow(0 7px 8px rgba(23, 32, 29, 0.18));
  stroke: var(--paper-bright);
  stroke-width: 2.6;
}

.hero-data-shape:focus-visible,
.hero-data-shape.is-selected {
  outline: none;
  stroke: var(--brand-primary);
  stroke-width: 4;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.82))
    drop-shadow(0 5px 5px rgba(0, 102, 168, 0.38));
  animation: map-selection-settle 380ms var(--ease-out) both;
}

@keyframes map-selection-settle {
  from {
    stroke-width: 6;
    filter:
      drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
      drop-shadow(0 8px 9px rgba(0, 102, 168, 0.48));
  }
}

.region-map-stage:has(.hero-data-shape:hover, .hero-data-shape:focus-visible, .hero-data-shape.is-selected)
  .hero-data-shape:not(:hover):not(:focus-visible):not(.is-selected) {
  opacity: 0.46;
  filter: saturate(0.72);
}

.city-labels {
  pointer-events: none;
}

.city-label circle {
  fill: var(--ink);
  stroke: rgba(250, 248, 242, 0.96);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.city-label text {
  fill: var(--ink);
  stroke: rgba(250, 248, 242, 0.94);
  stroke-width: 3.2;
  stroke-linejoin: round;
  paint-order: stroke fill;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.025em;
}

.city-labels.is-hero text {
  font-size: var(--fs-100);
}

.city-labels.is-department text {
  font-size: var(--fs-100);
}

.city-labels.is-commune text {
  font-size: var(--fs-100);
}

.city-labels.is-commune circle {
  r: 3.7px;
}

.hero-department:nth-child(2n) { animation-delay: 20ms; }
.hero-department:nth-child(3n) { animation-delay: 40ms; }

@keyframes department-rise {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-map-label {
  position: absolute;
  z-index: 2;
  left: 30px;
  bottom: 20px;
  margin: 0;
  color: rgba(23, 32, 29, 0.72);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-map-readout {
  position: absolute;
  z-index: 4;
  left: 30px;
  bottom: 104px;
  width: min(310px, 43%);
}

.hero-readout-scope,
.hero-readout-period {
  margin: 0;
  color: rgba(23, 32, 29, 0.68);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-readout-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0 6px;
}

.hero-readout-main strong {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--hero-value-color, var(--ink));
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-700),  4.6vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
  transition: color var(--dur-2) var(--ease-out);
}

.hero-readout-main span {
  max-width: 100px;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hero-detail-link {
  margin-top: 8px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-map-legend {
  position: absolute;
  z-index: 4;
  right: 30px;
  bottom: 56px;
  width: min(245px, 36%);
}

.geometry-loading,
.commune-loading {
  position: absolute;
  z-index: 6;
  inset: 50% auto auto 50%;
  margin: 0;
  padding: 8px 12px;
  background: rgba(250, 248, 242, 0.9);
  color: var(--muted);
  transform: translate(-50%, -50%);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.geometry-loading.is-hidden,
.commune-loading.is-hidden {
  display: none;
}

.geometry-loading.is-error,
.commune-loading.is-error {
  color: #7c2929;
  text-transform: none;
}

.hero-map-legend p,
.hero-map-legend small {
  margin: 0;
  color: rgba(23, 32, 29, 0.68);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-legend-scale {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 8px 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-100);
}

.hero-legend-scale i {
  height: 7px;
  background: linear-gradient(90deg, var(--legend-start), var(--legend-end));
}

.hero-legend-scale.is-diverging i {
  position: relative;
  background: linear-gradient(90deg, var(--legend-negative), var(--legend-neutral) 50%, var(--legend-positive));
}

.hero-legend-scale.is-diverging i b {
  width: 1px;
  height: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.hero-legend-zero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin: -2px 0 5px;
}

.hero-legend-zero i {
  height: 1px;
  background: rgba(23, 32, 29, 0.34);
}

.hero-legend-zero span {
  color: rgba(23, 32, 29, 0.7);
  font-size: var(--fs-100);
  font-weight: 700;
}

.kpi-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}

.kpi-item {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  padding: 32px clamp(18px, 2.6vw, 48px) 28px 0;
  border-right: 1px solid var(--line);
}

.kpi-item:not(:first-child) {
  padding-left: clamp(18px, 2.6vw, 48px);
}

.kpi-item:last-child {
  border-right: 0;
}

.kpi-value {
  margin: 0 0 13px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-700),  3.6vw, var(--fs-900));
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}

.kpi-label {
  max-width: 220px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-transform: uppercase;
}

.kpi-reference {
  max-width: 230px;
  display: grid;
  gap: 8px;
  margin: 12px 0 22px;
  color: var(--ink);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.kpi-reference sup {
  font-size: inherit;
}

.kpi-rank-track {
  width: 100%;
  height: 2px;
  position: relative;
  display: block;
  background: var(--line-strong);
}

.kpi-rank-track::after {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: var(--rank-position);
  content: "";
  border: 2px solid var(--paper-bright);
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

.region-context-bar {
  position: sticky;
  z-index: 17;
  top: var(--axes-height, 44px);
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto minmax(190px, auto) auto;
  gap: 16px;
  align-items: center;
  padding: 8px var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  background: rgba(15, 23, 42, .96);
  color: var(--paper-bright);
  backdrop-filter: blur(12px);
}

.region-context-bar strong,
.region-context-bar b {
  font-size: var(--text-sm);
}

.region-context-bar > span,
.region-context-bar small {
  color: #cbd5e1;
  font-size: var(--text-xs);
  line-height: 1.35;
}

.region-context-bar button {
  min-height: 38px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--brand-focus);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 700;
}

.metric-source-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.metric-source-button span:last-child {
  flex: 0 0 auto;
}

.kpi-item .metric-source-button span:first-child {
  white-space: nowrap;
}

.kpi-item .metric-source-button span:last-child {
  width: 18px;
  overflow: hidden;
  font-size: 0;
  white-space: nowrap;
}

.kpi-item .metric-source-button span:last-child::after {
  content: "↗";
  font-size: var(--fs-100);
}

.metric-source-button:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.metric-source-button.compact {
  width: auto;
  margin: 0;
  padding: 6px 0 0;
  gap: 8px;
  min-height: 24px;
}

.metric-source-button.compact span:last-child {
  display: none;
}

.metric-source-button.on-map {
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 8px;
  padding-top: 8px;
  border-color: rgba(23, 32, 29, 0.28);
  color: rgba(23, 32, 29, 0.72);
}

.metric-source-button.on-map span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.metric-source-button.on-map span:last-child {
  margin-left: 12px;
}

.editorial-section,
.chart-section,
.department-section,
.commune-section,
.source-section {
  padding: clamp(76px, 11vw, 156px) var(--gutter);
}

.editorial-intro {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(40px, 8vw, 140px);
  align-items: start;
  margin-bottom: clamp(78px, 12vw, 170px);
}

.editorial-intro h2,
.chart-heading h2,
.department-heading h2,
.commune-heading h2,
.source-section h2,
.method-dialog h2 {
  margin: 0;
  font-size: clamp(var(--fs-700),  5vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.editorial-intro blockquote {
  margin: 0;
  color: #303a36;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3vw, var(--fs-800));
  line-height: 1.25;
}

.insight-list {
  border-top: 1px solid var(--line-strong);
}

.insight-row {
  display: grid;
  grid-template-columns: 70px minmax(220px, 0.85fr) minmax(300px, 1.45fr) auto;
  gap: clamp(22px, 4vw, 70px);
  align-items: baseline;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.insight-index {
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.insight-row h3 {
  margin: 0;
  font-size: clamp(var(--fs-400),  1.7vw, var(--fs-600));
  letter-spacing: -0.03em;
}

.insight-row p {
  max-width: 670px;
  margin: 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.6;
}

.insight-copy {
  max-width: 670px;
}

.insight-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
}

.insight-metric {
  margin: 0;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-700),  4.4vw, var(--fs-1000));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.chart-section {
  background: var(--ink);
  color: var(--paper-bright);
}

.chart-heading,
.department-heading {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 60px;
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 100px);
}

.chart-heading .section-label {
  color: var(--accent-soft);
  margin-bottom: 24px;
}

.chart-heading > p,
.department-heading > p {
  max-width: 570px;
  justify-self: end;
  margin: 0;
  color: #aeb7b2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  line-height: 1.55;
}

.department-heading > p {
  color: var(--muted);
}

.chart-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.chart-tab {
  padding: 8px 16px;
  border: 1px solid rgba(250, 248, 242, 0.22);
  border-radius: var(--radius-pill);
  color: #aeb7b2;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-2) var(--ease-io), color var(--dur-1) var(--ease-out);
}

.chart-tab.is-active,
.chart-tab:hover {
  background: var(--paper-bright);
  color: var(--ink);
}

.chart-frame {
  min-height: 450px;
  border-top: 1px solid rgba(250, 248, 242, 0.24);
  border-bottom: 1px solid rgba(250, 248, 242, 0.24);
  padding: 30px 0 18px;
}

.chart-frame svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart-grid {
  stroke: rgba(250, 248, 242, 0.14);
  stroke-width: 1;
}

.chart-axis-label,
.chart-point-label {
  fill: #9ca6a1;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.chart-point-label {
  fill: var(--paper-bright);
  font-size: var(--fs-100);
}

.chart-annotation line {
  stroke: var(--brand-caution);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}

.chart-annotation rect {
  fill: rgba(15, 23, 42, .9);
  stroke: rgba(255, 129, 120, .7);
}

.chart-annotation text {
  fill: var(--paper-bright);
  font-size: var(--fs-100);
  font-weight: 700;
}

.chart-annotation.is-boundary line {
  stroke: var(--brand-focus);
}

.chart-annotation.is-boundary rect {
  stroke: rgba(83, 205, 212, .7);
}

.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: draw-line var(--dur-3) var(--ease-out) both;
}

.chart-line.secondary { stroke: #f1d6ad; }
.chart-line.tertiary { stroke: #9bb7de; }

@keyframes draw-line {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

.chart-dot {
  fill: var(--ink);
  stroke: var(--accent);
  stroke-width: 2;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  color: #abb4af;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chart-legend i {
  width: 18px;
  height: 2px;
  background: var(--accent);
}

.chart-legend i.secondary { background: #f1d6ad; }
.chart-legend i.tertiary { background: #9bb7de; }

.chart-note {
  max-width: 810px;
  margin: 24px 0 0;
  color: #8e9993;
  font-size: var(--fs-100);
  line-height: 1.6;
}

.department-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.72fr) minmax(580px, 1.28fr);
  min-height: 630px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.department-visual {
  position: relative;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.department-visual svg {
  width: 100%;
  height: 430px;
  padding: 42px 30px 16px;
  overflow: visible;
}

.department-shape {
  fill: #d8d6cf;
  stroke: var(--paper-bright);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill var(--dur-2) var(--ease-io),
    opacity var(--dur-1) var(--ease-out),
    stroke var(--dur-1) var(--ease-out),
    stroke-width var(--dur-1) var(--ease-out);
}

.department-shape:hover,
.department-shape:focus-visible,
.department-shape.is-selected {
  fill: var(--accent);
  stroke: var(--paper-bright);
  stroke-width: 2.4;
}

.department-shape:focus-visible,
.department-shape.is-selected {
  outline: none;
  stroke: var(--brand-primary);
  stroke-width: 3.6;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.8))
    drop-shadow(0 4px 5px rgba(0, 102, 168, 0.34));
}

.department-visual:has(.department-shape:hover, .department-shape:focus-visible, .department-shape.is-selected)
  .department-shape:not(:hover):not(:focus-visible):not(.is-selected) {
  opacity: 0.48;
}

.department-focus {
  min-height: 180px;
  margin-top: auto;
  padding: 26px 0 26px;
  border-top: 1px solid var(--line);
}

.department-focus-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 0 26px 20px;
}

.department-focus h3 {
  margin: 0;
  font-size: clamp(var(--fs-600),  2vw, var(--fs-700));
  letter-spacing: -0.04em;
}

.department-focus-code {
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
}

.department-focus-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.department-focus-metrics div {
  padding: 17px 20px 0 26px;
  border-right: 1px solid var(--line);
}

.department-focus-metrics div:last-child { border-right: 0; }

.department-focus-metrics strong {
  display: block;
  margin-bottom: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
  font-weight: 400;
}

.department-focus-metrics span {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.department-focus-metrics button,
.department-table th button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-100);
  line-height: 22px;
  text-align: center;
}

.department-focus-metrics button:hover,
.department-table th button:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.department-focus-source {
  margin: 20px 26px 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.department-table-wrap {
  overflow: auto;
}

.department-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.department-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 16px 16px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}

.department-table th:first-child {
  padding-left: 24px;
  text-align: left;
}

.department-table th > span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.department-table tbody tr {
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}

.department-table tbody tr:hover,
.department-table tbody tr.is-selected {
  background: color-mix(in oklab, var(--accent) 9%, transparent);
}

.department-table td {
  padding: 20px 16px;
  border-bottom: 1px solid var(--line);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  text-align: right;
}

.department-table td:first-child {
  padding-left: 24px;
  font-family: inherit;
  font-size: var(--fs-200);
  font-weight: 700;
  text-align: left;
}

.department-table .dept-code {
  display: inline-block;
  width: 30px;
  color: var(--accent);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
}

.department-table .negative { color: #a64835; }
.department-table .positive { color: var(--grand-est); }

.table-source-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 16px 24px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.home-thesis {
  padding: clamp(90px, 12vw, 170px) var(--gutter);
  background: var(--ink);
  color: var(--paper-bright);
}

.home-thesis-heading {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(40px, 8vw, 130px);
  align-items: start;
  margin-bottom: clamp(72px, 10vw, 140px);
}

.home-thesis-heading .section-label {
  color: var(--accent-soft);
}

.home-thesis-heading h2 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(var(--fs-800),  7vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -0.062em;
  line-height: 0.92;
}

.home-thesis-heading > p:last-child {
  grid-column: 2;
  max-width: 720px;
  margin: 24px 0 0;
  color: #bcc5c0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2.1vw, var(--fs-600));
  line-height: 1.45;
}

.thesis-findings {
  border-top: 1px solid rgba(250, 248, 242, 0.24);
}

.thesis-finding {
  display: grid;
  grid-template-columns: 48px minmax(160px, 0.45fr) minmax(320px, 1.55fr);
  gap: clamp(24px, 5vw, 82px);
  align-items: start;
  padding: 38px 0;
  border-bottom: 1px solid rgba(250, 248, 242, 0.16);
}

.thesis-index {
  color: var(--accent-soft);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.thesis-finding > strong {
  color: var(--accent-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-800),  5.5vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.thesis-finding h3 {
  margin: 0 0 12px;
  font-size: clamp(var(--fs-500),  2vw, var(--fs-600));
  letter-spacing: -0.035em;
}

.thesis-finding p,
.research-boundary > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #aeb8b3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.6;
}

.home-thesis .metric-source-button {
  border-color: rgba(250, 248, 242, 0.2);
  color: #aeb8b3;
}

.home-thesis .metric-source-button:hover {
  border-color: var(--accent-soft);
  color: var(--paper-bright);
}

.research-boundary {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(40px, 8vw, 130px);
  margin-top: clamp(72px, 10vw, 140px);
  padding-top: 32px;
  border-top: 1px solid rgba(250, 248, 242, 0.24);
}

.research-boundary .section-label {
  color: var(--accent-soft);
}

.commune-section {
  background: var(--paper-bright);
}

.commune-heading {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(46px, 8vw, 130px);
  align-items: end;
  margin-bottom: clamp(56px, 8vw, 110px);
}

.commune-heading h2 {
  max-width: 820px;
  margin-top: 24px;
}

.scale-proof {
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}

.scale-proof > strong {
  display: block;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-900),  6vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.scale-proof > p {
  max-width: 440px;
  margin: 18px 0 14px;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  line-height: 1.5;
}

.commune-explorer {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.commune-toolbar {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 0;
}

.commune-toolbar p,
.commune-department-filter > span {
  display: block;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.commune-metric-tabs {
  display: flex;
  gap: 24px;
}

.commune-metric-tabs button {
  position: relative;
  padding: 0 0 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.commune-metric-tabs button::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--accent);
  transition: right var(--dur-2) var(--ease-io);
}

.commune-metric-tabs button.is-active {
  color: var(--ink);
}

.commune-metric-tabs button.is-active::after {
  right: 0;
}

.commune-department-filter select {
  min-width: 220px;
  padding: 8px 30px 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-100);
}

.commune-mobile-view-switch {
  display: grid;
  gap: 8px;
}

.commune-mobile-view-switch > span {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
}

.commune-mobile-view-switch > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line-strong);
  background: var(--surface-tint);
}

.commune-mobile-view-switch button {
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 700;
}

.commune-mobile-view-switch button.is-active {
  background: var(--ink);
  color: var(--paper-bright);
}

.commune-map-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
  border-top: 1px solid var(--line);
}

.commune-map-canvas {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #e7e7e0;
}

.commune-map-canvas svg {
  width: 100%;
  height: 660px;
  flex: 0 0 660px;
  display: block;
}

.commune-shape {
  stroke: rgba(250, 248, 242, 0.88);
  stroke-width: 0.55;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: opacity var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out);
}

.commune-shape:hover,
.commune-shape:focus-visible,
.commune-shape.is-selected {
  position: relative;
  z-index: 2;
  outline: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  filter: brightness(0.92);
}

/* La commune active doit rester repérable sans la couleur de remplissage.
   Le double contour clair/bleu se déplace avec les flèches et conserve plus
   de 3:1 contre toutes les classes de la carte. */
.commune-shape:focus-visible {
  stroke: var(--brand-primary);
  stroke-width: 3.4;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 1.5px var(--paper-bright))
    drop-shadow(0 0 4px rgba(0, 102, 168, 0.72))
    brightness(0.96);
}

.commune-readout:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: -5px;
}

.commune-shape.is-filtered-out {
  opacity: 0.12;
  pointer-events: none;
}

.commune-legend {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.1fr);
  gap: 8px 28px;
  width: 100%;
  padding: 22px 24px 24px;
  border-top: 1px solid var(--line);
  background: var(--paper-bright);
}

.commune-legend > p {
  grid-column: 1 / -1;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bivariate-legend {
  grid-column: 1;
  display: grid;
  grid-template-columns: 58px minmax(190px, 1fr);
  gap: 8px 10px;
  align-items: stretch;
}

.bivariate-y-axis {
  display: grid;
  grid-template-rows: auto 1fr auto 1fr;
  gap: 3px;
  align-items: center;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  text-align: right;
}

.bivariate-y-axis span,
.bivariate-x-axis span {
  font-weight: 800;
}

.bivariate-y-axis i,
.bivariate-x-axis i {
  color: var(--accent);
  font-style: normal;
}

.bivariate-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.bivariate-matrix button span {
  display: grid;
  gap: 1px;
}

.bivariate-matrix button b {
  display: block;
  font-weight: 700;
}

.bivariate-matrix button b:last-child {
  font-weight: 800;
}

.bivariate-matrix button {
  min-height: 66px;
  padding: 8px;
  border: 0;
  background: var(--swatch);
  color: var(--paper-bright);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  transition: filter var(--dur-1) var(--ease-out),
    opacity var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.bivariate-matrix button.is-stable {
  color: var(--ink);
}

.bivariate-matrix:has(button[aria-pressed="true"]) button[aria-pressed="false"] {
  opacity: 0.3;
}

.bivariate-matrix button:hover,
.bivariate-matrix button:focus-visible {
  filter: brightness(.92);
}

.bivariate-matrix button[aria-pressed="true"] {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 3px var(--ink);
}

/* La grille à quatre colonnes plaçait le libellé et sa graduation sur la même
   ligne : « … de plus de 65 » puis « Faible → Forte », et « ans » renvoyé seul
   en dessous. La graduation occupe désormais sa propre ligne, le libellé la
   sienne — il peut alors se replier sans se faire couper. */
.bivariate-x-axis {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: baseline;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
}

.bivariate-x-axis span {
  grid-column: 1 / -1;
  line-height: 1.35;
}

.bivariate-reset {
  grid-column: 2;
  justify-self: start;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 700;
}

.bivariate-reset:hover,
.bivariate-reset.is-active {
  border-bottom-color: currentColor;
  color: var(--ink);
}

.commune-continuous-legend {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-100);
  font-weight: 800;
}

.commune-continuous-legend i {
  position: relative;
  height: 10px;
  background: linear-gradient(90deg, #eb6834, #e8e6df 52.88%, #2670cb);
}

.commune-continuous-legend.fragility65 i {
  background: linear-gradient(90deg, #eeeae1, #7c2929);
}

.commune-continuous-legend.apl i b {
  width: 1px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 52.88%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.apl-median-note {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
}

.apl-median-note i {
  width: 12px;
  height: 1px;
  background: var(--ink);
}

.commune-legend small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-100);
}

.quadrant-relative-note {
  grid-column: 1;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  line-height: 1.35;
}

.quadrant-distribution {
  grid-column: 2;
  grid-row: 2 / span 2;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 5px 12px;
  align-items: center;
  margin: 0;
  padding: 0 0 0 28px;
  border-top: 0;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-100);
  font-variant-numeric: tabular-nums;
}

.quadrant-distribution > span:nth-child(-n + 3) {
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: right;
  text-transform: uppercase;
}

.quadrant-distribution > span:nth-child(3n + 1) {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.quadrant-distribution i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--swatch);
}

.quadrant-distribution strong {
  color: var(--ink);
  text-align: right;
}

.commune-mobile-list {
  display: none;
}

.commune-explorer[data-mobile-view="list"] .commune-map-layout,
.commune-explorer[data-mobile-view="map"] .commune-mobile-list {
  display: none;
}

.commune-explorer[data-mobile-view="list"] .commune-mobile-list {
  display: block;
}

.commune-mobile-list-heading {
  display: grid;
  gap: 8px;
  padding: 24px 0 16px;
}

.commune-mobile-list-heading p,
.commune-mobile-list-heading strong,
.commune-mobile-source {
  margin: 0;
}

.commune-mobile-list-heading p,
.commune-mobile-source {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.commune-mobile-table-wrap {
  max-height: 540px;
  overflow: auto;
  border-top: 1px solid var(--line-strong);
}

.commune-mobile-list table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.commune-mobile-list th,
.commune-mobile-list td {
  height: 44px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-100);
  text-align: right;
  vertical-align: middle;
}

.commune-mobile-list th:first-child,
.commune-mobile-list td:first-child {
  padding-left: 0;
  text-align: left;
}

.commune-mobile-list th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--paper-bright);
  color: var(--muted);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.commune-mobile-list td:first-child > button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 7px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}

.commune-mobile-list th button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: right;
}

.commune-mobile-list th button:hover,
.commune-mobile-list th button:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.commune-mobile-list td:last-child {
  min-width: 260px;
  color: var(--muted);
  line-height: 1.35;
  text-align: left;
}

.commune-mobile-list tr.is-selected {
  background: rgba(23, 32, 29, 0.06);
}

.commune-mobile-source {
  padding: 14px 0 24px;
}

.commune-map-count {
  position: absolute;
  top: 18px;
  left: 20px;
  margin: 0;
  padding: 8px 8px;
  background: rgba(250, 248, 242, 0.82);
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.commune-readout {
  min-height: 720px;
  display: flex;
  flex-direction: column;
  padding: clamp(34px, 4vw, 66px);
  background: var(--ink);
  color: var(--paper-bright);
}

.commune-readout-kicker,
.commune-code {
  margin: 0;
  color: #aeb8b3;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.45;
  text-transform: uppercase;
}

.commune-readout h3 {
  margin: 22px 0 12px;
  font-size: clamp(var(--fs-700),  4vw, var(--fs-900));
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.commune-readout-intro {
  max-width: 440px;
  margin: 10px 0 0;
  color: #b8c1bc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  line-height: 1.5;
}

.commune-summary-metrics {
  margin: 44px 0 0;
  border-top: 1px solid rgba(250, 248, 242, 0.22);
}

.commune-summary-metrics > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(250, 248, 242, 0.14);
}

.commune-summary-metrics dt {
  color: #aeb8b3;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.commune-summary-metrics dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
  font-variant-numeric: tabular-nums;
}

.commune-classification {
  margin-top: 32px;
}

.commune-classification > span {
  color: var(--accent-soft);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.commune-classification > p {
  margin: 12px 0 0;
  color: #b8c1bc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.55;
}

.commune-readout-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 32px;
}

.commune-readout .metric-source-button {
  border-color: rgba(250, 248, 242, 0.2);
  color: #aeb8b3;
}

.commune-readout .metric-source-button:hover {
  border-color: var(--accent-soft);
  color: var(--paper-bright);
}

.interpretation-list {
  margin-top: clamp(76px, 10vw, 142px);
  border-top: 1px solid var(--line-strong);
}

.interpretation-row {
  display: grid;
  grid-template-columns: 150px minmax(240px, 0.8fr) minmax(320px, 1.2fr);
  gap: clamp(26px, 5vw, 76px);
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.interpretation-label {
  margin: 3px 0 0;
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.interpretation-row.is-limit .interpretation-label {
  color: var(--muted);
}

.interpretation-row h3 {
  margin: 0;
  font-size: var(--fs-500);
  letter-spacing: -0.025em;
}

.interpretation-row > div > p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.6;
}

.source-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(50px, 9vw, 150px);
  align-items: start;
  border-top: 1px solid var(--line);
}

.source-section h2 {
  margin-top: 20px;
}

.source-copy {
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}

.source-copy p {
  margin: 0 0 20px;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  line-height: 1.6;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-footer {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.method-dialog,
.metric-dialog {
  width: min(840px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  margin: auto;
  padding: clamp(28px, 5vw, 66px);
  border: 0;
  background: var(--paper-bright);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(23, 32, 29, 0.28);
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--dur-2) var(--ease-io),
    translate var(--dur-2) var(--ease-out),
    overlay var(--dur-2) allow-discrete,
    display var(--dur-2) allow-discrete;
}

.method-dialog[open],
.metric-dialog[open] {
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .method-dialog[open],
  .metric-dialog[open] {
    opacity: 0;
    translate: 0 12px;
  }
}

.metric-dialog {
  width: min(720px, calc(100vw - 32px));
}

.method-dialog::backdrop,
.metric-dialog::backdrop {
  background: rgba(23, 32, 29, 0.64);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-io),
    overlay var(--dur-2) allow-discrete,
    display var(--dur-2) allow-discrete;
}

.method-dialog[open]::backdrop,
.metric-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .method-dialog[open]::backdrop,
  .metric-dialog[open]::backdrop {
    opacity: 0;
  }
}

.dialog-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 72px;
}

.dialog-topline button {
  padding: 8px 0;
  border-bottom: 1px solid currentColor;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.method-dialog h2,
.metric-dialog h2 {
  max-width: 680px;
  margin-bottom: 56px;
}

.metric-dialog-source {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.metric-plain-label {
  margin: -30px 0 8px;
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metric-dialog-definition {
  max-width: 610px;
  margin: 0 0 42px;
  color: #3f4945;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-400),  2.4vw, var(--fs-600));
  line-height: 1.48;
}

.metric-dialog-details {
  margin: 0 0 36px;
  border-top: 1px solid var(--line-strong);
}

.metric-dialog-details > div {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.metric-dialog-details dt {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.metric-dialog-details dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  line-height: 1.5;
}

.metric-official-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
}

.method-list,
.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.method-list li {
  position: relative;
  padding: 18px 0 18px 36px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.5;
}

.method-list li::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.source-list {
  margin-top: 56px;
}

.source-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.source-list strong {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-200);
}

.source-list small {
  color: var(--muted);
}

.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal.is-reveal-ready {
    opacity: 0;
    transform: translateY(var(--rise));
    transition: opacity var(--dur-3) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
  }

  .reveal.is-reveal-ready.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Même règle pour le repli par IntersectionObserver : les modules de commandes
     n'attendent pas d'être « révélés » pour être lisibles. */
  .reveal.is-reveal-ready:is(
    [data-indicator-explorer],
    .indicator-explorer,
    .commune-explorer,
    .region-map-stage,
    .territory-map-stage,
    .department-visual,
    .gateway-doors,
    .commune-section
  ) {
    opacity: 1;
  }

  @supports (animation-timeline: view()) {
    .reveal.is-reveal-ready {
      opacity: 1;
      transform: none;
      transition: none;
      animation: reveal-in linear both;
      animation-timeline: view();
      /* L'animation se terminait à « cover 28 % », c'est-à-dire bien après que
         l'élément soit lisible : un module haut restait à 0,28 d'opacité alors
         qu'il occupait déjà l'écran. Elle se termine désormais pendant l'entrée,
         donc avant que le lecteur ait quoi que ce soit à lire. */
      animation-range: entry 8% entry 80%;
    }

    /* Un module dont le contenu est fait de commandes ne doit jamais être
       estompé : à opacité partielle, il a l'air désactivé et aucun de ses textes
       ne tient le contraste. Ceux-là ne reçoivent que le mouvement. */
    .reveal.is-reveal-ready:is(
      [data-indicator-explorer],
      .indicator-explorer,
      .commune-explorer,
      .region-map-stage,
      .territory-map-stage,
      .department-visual,
      .gateway-doors,
      .commune-section
    ) {
      animation-name: reveal-in-motion;
    }
  }
}

/* Variante sans estompage, pour les modules interactifs. */
@keyframes reveal-in-motion {
  from { transform: translateY(var(--rise)); }
  to { transform: translateY(0); }
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to { opacity: 1; transform: none; }
}

/* Enquête éditoriale */

.home-investigation .home-copy {
  justify-content: center;
}

.investigation-title {
  max-width: 760px;
  font-size: clamp(var(--fs-900),  6vw, var(--fs-1000));
  line-height: 0.9;
}

.investigation-title span {
  max-width: 690px;
  margin-top: 12px;
  margin-left: 0;
  white-space: normal;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(32px, 5vh, 54px);
}

.home-empirical-hook {
  max-width: 620px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 18px;
  align-items: center;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
}

.home-empirical-hook > strong {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-800),  4vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.home-empirical-hook > p {
  margin: 0;
  font-size: var(--fs-100);
  font-weight: 800;
  line-height: 1.35;
}

.home-empirical-hook small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 600;
}

.home-empirical-hook .metric-source-button {
  grid-column: 2;
}

.primary-action,
.secondary-action,
.chapter-route-link,
.region-investigation-context button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 16px 16px;
  background: var(--ink);
  color: var(--paper-bright);
}

.secondary-action {
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-strong);
}

.hero-reading-contract {
  max-width: 560px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
}

.hero-question {
  position: absolute;
  z-index: 2;
  left: 34px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  color: rgba(23, 32, 29, 0.38);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3vw, var(--fs-800));
  line-height: 1;
}

.hero-question strong {
  color: var(--ink);
  font-size: 1.28em;
  font-style: italic;
  font-weight: 400;
}

.story-opening {
  min-height: 78vh;
  display: grid;
  grid-template-columns: 0.42fr 1.58fr;
  gap: clamp(46px, 9vw, 150px);
  align-items: start;
  padding: clamp(110px, 15vw, 220px) var(--gutter);
  background: var(--ink);
  color: var(--paper-bright);
}

.story-opening .section-label { color: var(--accent-soft); }

.story-opening-copy h2 {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(var(--fs-800),  6.7vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -0.063em;
  line-height: 0.94;
}

.story-opening-copy p {
  max-width: 760px;
  margin: 40px 0 0;
  color: #aeb8b3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-400),  2vw, var(--fs-600));
  line-height: 1.5;
}

.story-chapter {
  min-height: 92vh;
  display: grid;
  grid-template-columns: minmax(340px, 0.8fr) minmax(480px, 1.2fr);
  gap: clamp(56px, 10vw, 180px);
  align-items: center;
  padding: clamp(82px, 8vw, 132px) var(--gutter);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 56px;
}

.chapter-copy {
  max-width: 690px;
}

.chapter-number,
.proof-caption {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.45;
  text-transform: uppercase;
}

.chapter-copy h2 {
  margin: 24px 0 28px;
  font-size: clamp(var(--fs-800),  4.6vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -0.057em;
  line-height: 0.98;
}

.chapter-copy > p:not(.chapter-number) {
  margin: 0 0 28px;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-300),  1.6vw, var(--fs-500));
  line-height: 1.6;
}

.chapter-copy .metric-source-button {
  width: min(100%, 470px);
  margin-top: 20px;
}

.national-story .national-evidence:nth-child(even) {
  background: #e7e8e2;
}

.evidence-scope {
  padding-left: 12px;
  border-left: 2px solid var(--accent);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif !important;
  font-size: var(--fs-100) !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.45 !important;
  text-transform: uppercase;
}

.evidence-panel {
  min-height: 650px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 76px);
  border-left: 1px solid var(--line-strong);
}

.evidence-main-value {
  display: block;
  max-width: 820px;
  margin: 30px 0 12px;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-800),  6vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.94;
}

.evidence-main-label {
  max-width: 680px;
  margin: 0;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.evidence-plain {
  max-width: 720px;
  margin: 24px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-400),  1.7vw, var(--fs-600));
  line-height: 1.5;
}

/* Ticket Q3 — l'exemple concret remonté en surface.
   Les lieux et faits nommés de l'article étaient tous repliés dans les <details> :
   la surface ne portait que des abstractions. Un fait nommé par preuve, ici. */
.evidence-surface-example {
  max-width: 720px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--surface-tint);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: clamp(var(--fs-200),  1.2vw, var(--fs-300));
  line-height: 1.5;
}

.evidence-surface-example > span {
  margin-right: 8px;
  color: var(--brand-primary);
  font-weight: 700;
}

.evidence-surface-note {
  max-width: 720px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: clamp(var(--fs-200),  1.2vw, var(--fs-300));
  line-height: 1.55;
}

.evidence-surface-note strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: var(--fs-100);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.evidence-surface-caution {
  max-width: 720px;
  margin: 18px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: clamp(var(--fs-200),  1.2vw, var(--fs-300));
  line-height: 1.55;
}

.evidence-surface-caution strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: var(--fs-100);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.evidence-primary-source {
  width: min(100%, 470px);
  margin-top: 20px;
}

.plain-graphic {
  width: 100%;
  margin-top: clamp(34px, 5vw, 64px);
  padding: 26px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.ratio-graphic {
  display: grid;
  /* `1fr` vaut `minmax(auto, 1fr)` : le minimum est le contenu. Les capitales
     espacées de « Rendez-vous obtenu » y frôlent la largeur de colonne à
     375 px — `minmax(0, …)` laisse la piste se réduire quoi qu'il arrive. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  background: var(--line-strong);
}

.ratio-graphic > div {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: var(--paper);
  color: var(--muted);
}

.ratio-graphic > div.is-active {
  background: var(--accent);
  color: var(--paper-bright);
}

.ratio-graphic i::before {
  content: "☎";
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-800);
  font-style: normal;
}

.ratio-graphic span,
.function-graphic p,
.function-graphic small,
.flow-graphic span,
.timeline-graphic span,
.twins-graphic p,
.contrast-graphic span,
.idf-demo-toolbar span,
.idf-readout-kicker {
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.function-graphic,
.twins-graphic {
  display: grid;
  gap: 24px;
}

.function-graphic > div,
.twins-graphic > div {
  display: grid;
  grid-template-columns: minmax(130px, .65fr) minmax(90px, auto) minmax(150px, 1.5fr) minmax(120px, auto);
  gap: 16px;
  align-items: center;
}

.function-graphic p,
.twins-graphic p {
  margin: 0;
}

.function-graphic span,
.twins-graphic span {
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
}

.function-graphic i,
.twins-graphic i {
  height: 13px;
  background: rgba(23, 32, 29, 0.1);
}

.function-graphic i b,
.twins-graphic i b {
  display: block;
  width: var(--width);
  height: 100%;
  background: var(--accent);
}

.function-graphic strong,
.twins-graphic strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  font-weight: 400;
}

.function-graphic small {
  color: var(--muted);
}

.flow-graphic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  background: var(--line-strong);
}

.flow-graphic > div {
  min-width: 0;
  min-height: 190px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 24px;
  background: var(--paper);
}

.flow-graphic span {
  grid-column: 1 / -1;
  color: var(--muted);
}

.flow-graphic strong,
.flow-graphic b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2.2vw, var(--fs-700));
  font-weight: 400;
}

.flow-graphic i {
  color: var(--accent);
  font-size: var(--fs-600);
  font-style: normal;
}

.flow-graphic .is-high b {
  color: var(--accent);
}

.care-volume-graphic > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.care-volume-graphic > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
}

.care-volume-graphic article {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--paper);
}

.care-volume-graphic article > span,
.care-volume-graphic article > small,
.care-volume-graphic > small {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-transform: uppercase;
}

.care-volume-graphic article > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.care-volume-graphic strong,
.care-volume-graphic b,
.care-volume-graphic em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
}

.care-volume-graphic strong { font-size: clamp(var(--fs-500),  2.4vw, var(--fs-700)); }
.care-volume-graphic b { font-size: clamp(var(--fs-300),  1.6vw, var(--fs-500)); }
.care-volume-graphic i { display: none; }
.care-volume-graphic em { font-size: clamp(var(--fs-600),  2.8vw, var(--fs-700)); line-height: 1.06; }

/* Le +55 % était épinglé en haut de la carte, à hauteur de « 20 médecins » —
   où l'écart réel est de +100 %. Il porte sur les relations patient–médecin :
   il se lit donc contre ce nombre-là, sur la même ligne. */
.care-volume-total {
  margin: 0;
}

/* En flux inline plutôt qu'en boîte flex : le badge suit le dernier mot du
   nombre, même quand celui-ci se replie sur deux lignes. */
.care-volume-total em { display: inline }

.care-volume-graphic mark {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  padding: 4px 8px;
  border-radius: var(--radius-xs, 3px);
  background: var(--accent);
  color: var(--paper-bright);
  font-size: var(--fs-100);
  font-weight: 800;
  white-space: nowrap;
}

.care-volume-graphic > small {
  display: block;
  margin-top: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.timeline-graphic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.timeline-graphic::before {
  content: "";
  position: absolute;
  top: 35px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: var(--line-strong);
}

.timeline-graphic > div {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

.timeline-graphic i {
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-bottom: 24px;
  border: 5px solid var(--paper);
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 1px var(--line-strong);
}

.timeline-graphic .is-active i {
  width: 28px;
  height: 28px;
  margin-top: -5px;
  margin-bottom: 16px;
  background: var(--accent);
}

.timeline-graphic strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3.6vw, var(--fs-800));
  font-weight: 400;
}

.timeline-graphic span {
  margin-top: 8px;
  color: var(--muted);
}

.trajectory-map {
  padding-bottom: 0;
}

.trajectory-map-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 24px;
}

.trajectory-map-heading > div:first-child,
.trajectory-map-scale {
  display: grid;
  gap: 5px;
}

.trajectory-map-heading span,
.trajectory-map-group-head span,
.trajectory-map-highlights > p,
.trajectory-map-source {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-transform: uppercase;
}

.trajectory-map-heading strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-500);
  font-weight: 400;
}

.trajectory-map-instruction {
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 600;
  line-height: 1.4;
}

.trajectory-map-scale {
  grid-template-columns: auto 104px auto;
  align-items: center;
}

.trajectory-map-scale i {
  height: 8px;
  background: linear-gradient(90deg, var(--data-warm), #bfe4e8);
}

.trajectory-map-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
}

.trajectory-map-panels > article {
  min-width: 0;
  background: var(--paper);
}

.trajectory-map-panels header {
  min-height: 86px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 18px 20px 12px;
}

.trajectory-map-panels header strong {
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3vw, var(--fs-800));
  font-weight: 400;
}

.trajectory-map-panels header span {
  max-width: 145px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.trajectory-map-panels article > div {
  position: relative;
  min-height: 250px;
  display: grid;
  place-items: center;
  padding: 0 10px 12px;
}

.trajectory-map-panels svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.trajectory-map-loading {
  position: absolute;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-100);
}

.trajectory-map-loading.is-hidden { display: none; }

.trajectory-map-shape {
  stroke: rgba(23, 32, 29, 0.42);
  stroke-width: 0.7;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  transition: filter var(--dur-1) var(--ease-out),
    stroke var(--dur-1) var(--ease-out),
    stroke-width var(--dur-1) var(--ease-out);
}

.trajectory-map-shape.is-hovered,
.trajectory-map-shape:hover,
.trajectory-map-shape:focus-visible {
  filter: brightness(.94);
  stroke: var(--data-cool);
  stroke-width: 2.2;
  outline: none;
}

.trajectory-map-shape.is-selected {
  filter: drop-shadow(0 3px 3px rgba(15, 23, 42, .28));
  stroke: var(--ink);
  stroke-width: 3.6;
}

.trajectory-map-selected-value {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 2px;
  min-width: 112px;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper-bright);
  pointer-events: none;
}

.trajectory-map-selected-value[hidden] { display: none; }

.trajectory-map-selected-value strong {
  color: var(--selected-value-color, var(--brand-focus));
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
  font-weight: 400;
  letter-spacing: -.03em;
  transition: color var(--dur-2) var(--ease-out);
}

.trajectory-map-selected-value span {
  max-width: 130px;
  font-size: var(--fs-100);
  font-weight: 800;
  line-height: 1.25;
}

.trajectory-map-verdict {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(170px, .55fr) minmax(210px, .72fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(24px, 3vw, 38px);
  background: var(--ink);
  color: var(--paper-bright);
}

.trajectory-map-verdict-place,
.trajectory-map-verdict-change,
.trajectory-map-verdict-national {
  display: grid;
  gap: 8px;
}

.trajectory-map-verdict span,
.trajectory-map-verdict small {
  color: #aeb8b3;
  font-size: var(--fs-100);
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.trajectory-map-verdict-place > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3vw, var(--fs-800));
  font-weight: 400;
  letter-spacing: -.035em;
}

.trajectory-map-verdict-place small b {
  color: var(--paper-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  font-weight: 400;
}

.trajectory-map-verdict-place small i {
  margin: 0 5px;
  color: var(--brand-focus);
  font-style: normal;
}

.trajectory-map-verdict-change,
.trajectory-map-verdict-national {
  min-height: 84px;
  align-content: center;
  padding-left: clamp(18px, 2.5vw, 34px);
  border-left: 1px solid rgb(250 248 242 / 25%);
}

.trajectory-map-verdict-change > strong,
.trajectory-map-verdict-national > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-700),  4vw, var(--fs-900));
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
}

.trajectory-map-verdict-change > strong,
.trajectory-map-verdict-national > strong {
  color: #ff9a92;
}

.trajectory-map-verdict-change.is-positive > strong {
  color: var(--brand-focus);
}

.trajectory-map-verdict-national > strong {
  font-size: clamp(var(--fs-600),  3vw, var(--fs-800));
}

.trajectory-map-verdict > p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgb(250 248 242 / 25%);
  color: var(--paper-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-200),  1.4vw, var(--fs-400));
  line-height: 1.5;
}

.trajectory-map-benchmarks {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(190px, .72fr));
  gap: 20px 30px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-strong);
}

.trajectory-map-benchmarks > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trajectory-map-benchmarks > div span {
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.trajectory-map-benchmarks > div small,
.trajectory-map-benchmarks > small {
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.4;
}

.trajectory-map-benchmarks > p {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.trajectory-map-benchmarks > p span {
  max-width: 200px;
  font-size: var(--fs-100);
  font-weight: 700;
  line-height: 1.35;
}

.trajectory-map-benchmarks > p strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
  font-weight: 400;
}

.trajectory-map-benchmarks .is-alert strong { color: var(--accent); }

.trajectory-map-benchmarks > small {
  grid-column: 1 / -1;
}

.trajectory-map-source {
  margin: 18px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--line-strong);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.contrast-graphic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 0;
  background: var(--line-strong);
}

.contrast-graphic > div {
  min-height: 175px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: var(--paper);
}

.contrast-graphic .is-alert {
  background: var(--accent);
  color: var(--paper-bright);
}

.contrast-graphic strong {
  max-width: 260px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2.4vw, var(--fs-700));
  font-weight: 400;
  line-height: 1.1;
}

.convergence-graphic {
  padding: 0;
}

.convergence-graphic > header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-strong);
}

.convergence-graphic > header span,
.convergence-graphic aside > span,
.convergence-graphic footer > strong {
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.convergence-graphic > header strong {
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2vw, var(--fs-600));
  font-weight: 400;
}

.convergence-graphic-body {
  display: block;
}

.convergence-graphic ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.convergence-graphic li {
  min-height: 138px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  gap: 16px;
  align-items: center;
  position: relative;
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.convergence-graphic li:nth-child(odd) {
  padding-right: 24px;
  border-right: 1px solid var(--line);
}

.convergence-graphic li:nth-child(even) {
  padding-left: 24px;
}

.convergence-graphic li > span {
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
}

.convergence-graphic li div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.convergence-graphic li small {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.35;
}

.convergence-graphic li strong {
  max-width: 420px;
  font-size: clamp(var(--fs-200),  1.2vw, var(--fs-300));
  line-height: 1.35;
}

.convergence-graphic li i {
  height: 1px;
  position: relative;
  background: var(--line-strong);
  transition: background var(--dur-2) var(--ease-io), transform var(--dur-2) var(--ease-out);
}

.convergence-graphic li i::after {
  width: 7px;
  height: 7px;
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

@media (hover: hover) {
  .convergence-graphic li:hover {
    color: var(--accent);
    transform: translateX(4px);
  }

  .convergence-graphic li:hover i {
    background: var(--accent);
    transform: scaleX(1.12);
    transform-origin: right;
  }
}

.convergence-graphic aside {
  min-height: 230px;
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  gap: 24px 34px;
  align-content: center;
  padding: clamp(28px, 4vw, 48px);
  background: var(--accent);
  color: var(--paper-bright);
}

.convergence-graphic aside > span {
  grid-row: 1 / span 2;
  color: #c4e7ea;
}

.convergence-graphic aside > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3.1vw, var(--fs-800));
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.convergence-graphic aside p {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 32%);
  font-size: var(--fs-100);
  font-weight: 700;
  line-height: 1.5;
}

.convergence-graphic > footer {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--line-strong);
}

.convergence-graphic footer > strong {
  color: var(--accent);
}

.convergence-graphic footer p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  line-height: 1.55;
}

.missing-graphic {
  padding: 0;
}

.missing-graphic > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 76px;
  border-bottom: 1px solid var(--line);
}

.missing-graphic > div:last-child { border-bottom: 0; }
.missing-graphic span { color: var(--accent); font-size: var(--fs-100); font-weight: 800; }
.missing-graphic strong { font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500); font-weight: 400; }
.missing-graphic i { color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-700); font-style: normal; }

.evidence-details {
  margin-top: clamp(32px, 4vw, 54px);
}

.evidence-details summary {
  min-height: 54px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(-45deg, var(--surface-tint), var(--surface-tint) 5px, var(--paper-bright) 5px, var(--paper-bright) 10px);
  cursor: pointer;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0;
  list-style: none;
  text-transform: none;
}

.evidence-details summary::-webkit-details-marker { display: none; }
.evidence-details summary:hover,
.evidence-details summary:focus-visible {
  border-color: var(--accent);
}
.evidence-details-label { color: var(--ink); }
.evidence-details-chevron { color: var(--accent); font-size: var(--fs-500); transition: transform var(--dur-2) var(--ease-io); }
.evidence-details[open] .evidence-details-chevron { transform: rotate(180deg); }

.evidence-technical-headline {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.evidence-technical-headline strong {
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-700),  4vw, var(--fs-900));
  font-weight: 400;
  letter-spacing: -0.04em;
}

.evidence-technical-headline span { color: var(--muted); font-size: var(--fs-100); line-height: 1.4; }

.idf-demo {
  width: 100%;
  margin-top: clamp(34px, 5vw, 64px);
  border-top: 1px solid rgba(250, 248, 242, 0.28);
  border-bottom: 1px solid rgba(250, 248, 242, 0.28);
}

.idf-demo-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  padding: 20px 0;
}

.idf-demo-toolbar > div:first-child { display: grid; gap: 5px; }
.idf-demo-toolbar > div:first-child span { color: #aeb8b3; }
.idf-demo-toolbar > div:first-child strong { font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-500); font-weight: 400; }

.idf-human-scale {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(240px, 1.15fr);
  gap: 28px;
  align-items: center;
  padding: 24px 24px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper-bright);
}

.idf-human-scale > div {
  display: grid;
  grid-template-columns: repeat(31, 1fr);
  gap: 3px;
}

.idf-human-scale i {
  aspect-ratio: 1;
  display: block;
  border-radius: 50%;
  background: #d7dfea;
}

.idf-human-scale i.is-idf {
  background: var(--data-cool);
}

.idf-human-scale i.is-idf-partial {
  background: linear-gradient(90deg, var(--data-cool) var(--dot-share), #d7dfea var(--dot-share));
}

.idf-human-scale i.is-national-partial {
  background: linear-gradient(90deg, #d7dfea var(--dot-share), transparent var(--dot-share));
  box-shadow: inset 0 0 0 1px #d7dfea;
}

.idf-human-scale p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.45;
}

.idf-human-scale strong,
.idf-human-scale b {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  font-weight: 400;
}

.idf-human-scale span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-100);
}
.idf-demo-toolbar [role="group"] { display: flex; border: 1px solid rgba(250, 248, 242, 0.28); }

.idf-demo-toolbar button {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid rgba(250, 248, 242, 0.28);
  background: transparent;
  color: #aeb8b3;
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
}

.idf-demo-toolbar button:last-child { border-right: 0; }
.idf-demo-toolbar button.is-active { background: var(--paper-bright); color: var(--ink); }

.idf-demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: 1px;
  background: rgba(250, 248, 242, 0.22);
}

.idf-demo-map-canvas {
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 24px 24px;
  background: var(--ink);
}

#idf-demo-map { width: 100%; height: auto; overflow: visible; }
.idf-demo-loading { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: #aeb8b3; }
.idf-demo-loading.is-hidden { display: none; }

.idf-demo-shape {
  stroke: rgba(23, 32, 29, 0.68);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: filter var(--dur-1) var(--ease-out), stroke-width var(--dur-1) var(--ease-out);
}

.idf-demo-shape:hover,
.idf-demo-department:hover .idf-demo-shape,
.idf-demo-shape:focus-visible,
.idf-demo-department.is-selected .idf-demo-shape {
  filter: brightness(1.09);
  outline: none;
  stroke: var(--paper-bright);
  stroke-width: 3;
}

.idf-demo-label-hit {
  fill: transparent;
  cursor: pointer;
  pointer-events: all;
}

.idf-demo-label,
.idf-demo-value {
  fill: var(--paper-bright);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  font-weight: 800;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(23, 32, 29, 0.62);
  stroke-linejoin: round;
  stroke-width: 4px;
  text-anchor: middle;
}

.idf-demo-leader {
  stroke: rgba(250, 248, 242, 0.74);
  stroke-dasharray: 2 3;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.idf-demo-value { font-size: var(--fs-100); font-weight: 800; stroke-width: 3px; }

.idf-demo-legend {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: -8px;
}

.idf-demo-legend span { display: grid; gap: 3px; color: #aeb8b3; font-size: var(--fs-100); }
.idf-demo-legend span:last-child { text-align: right; }
.idf-demo-legend b { color: var(--paper-bright); font-size: var(--fs-100); }
.idf-demo-legend i { height: 8px; background: linear-gradient(90deg, #deded7, #a64f4f); }

.idf-demo-readout {
  min-height: 520px;
  padding: clamp(28px, 3vw, 46px);
  background: var(--paper-bright);
  color: var(--ink);
}

.idf-readout-kicker { margin: 0 0 18px; color: var(--accent); }
.idf-demo-readout h3 { margin: 0 0 24px; font-size: clamp(var(--fs-600),  3vw, var(--fs-800)); letter-spacing: -0.04em; line-height: 1; }
.idf-demo-readout > strong { display: block; margin-bottom: 16px; color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-size: clamp(var(--fs-800),  5vw, var(--fs-1000)); font-weight: 400; letter-spacing: -0.05em; }
.idf-demo-readout > p:not(.idf-readout-kicker, .idf-readout-caution) { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-300); line-height: 1.5; }
.idf-demo-readout dl { margin: 28px 0 0; border-top: 1px solid var(--line); }
.idf-demo-readout dl div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.idf-demo-readout dt { color: var(--muted); font-size: var(--fs-100); line-height: 1.35; }
.idf-demo-readout dd { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-400); }
.idf-readout-caution { margin: 24px 0 0; color: var(--muted); font-size: var(--fs-100); line-height: 1.55; }
.idf-readout-caution + .idf-readout-caution { margin-top: 12px; }
.idf-demo-readout .chapter-route-link { margin-top: 24px; padding: 10px 0; border-bottom: 1px solid var(--line-strong); text-align: left; }

.idf-readout-highlight { padding: 18px 0; border-top: 1px solid var(--line); }
.idf-readout-highlight span { display: block; margin-bottom: 8px; color: var(--muted); font-size: var(--fs-100); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.idf-readout-highlight strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-600); font-weight: 400; }
.idf-readout-highlight b { display: block; margin-top: 5px; color: var(--accent); font-size: var(--fs-100); }

.idf-demo-source {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(250, 248, 242, 0.22);
  color: #aeb8b3;
  font-size: var(--fs-100);
  line-height: 1.5;
}

.chapter-trajectory .evidence-main-label,
.chapter-urban .evidence-main-label,
.chapter-trajectory .evidence-plain,
.chapter-urban .evidence-plain,
.chapter-trajectory .evidence-details summary,
.chapter-urban .evidence-details summary,
.chapter-trajectory .evidence-technical-headline span,
.chapter-urban .evidence-technical-headline span,
.chapter-trajectory .evidence-reading p,
.chapter-urban .evidence-reading p,
.chapter-trajectory .evidence-facts span,
.chapter-urban .evidence-facts span {
  color: #c1c8c4;
}

.chapter-trajectory .evidence-details,
.chapter-urban .evidence-details,
.chapter-trajectory .evidence-details summary,
.chapter-urban .evidence-details summary,
.chapter-trajectory .evidence-facts,
.chapter-urban .evidence-facts,
.chapter-trajectory .evidence-facts > div,
.chapter-urban .evidence-facts > div,
.chapter-trajectory .evidence-reading,
.chapter-urban .evidence-reading,
.chapter-trajectory .evidence-reading > div {
  border-color: rgba(250, 248, 242, 0.23);
}

.chapter-trajectory .timeline-graphic {
  border-color: rgba(250, 248, 242, 0.28);
}

.chapter-trajectory .timeline-graphic::before { background: rgba(250, 248, 242, 0.28); }
.chapter-trajectory .timeline-graphic i { border-color: var(--ink); box-shadow: 0 0 0 1px rgba(250, 248, 242, 0.34); }
.chapter-trajectory .timeline-graphic span { color: #aeb8b3; }

.chapter-trajectory .trajectory-map,
.chapter-trajectory .trajectory-map-groups,
.chapter-trajectory .trajectory-map-groups > div,
.chapter-trajectory .trajectory-map-highlights,
.chapter-trajectory .trajectory-map-source {
  border-color: rgba(250, 248, 242, 0.25);
}

.chapter-trajectory .trajectory-map-heading span,
.chapter-trajectory .trajectory-map-group-head span,
.chapter-trajectory .trajectory-map-group-head b,
.chapter-trajectory .trajectory-map-highlights > p,
.chapter-trajectory .trajectory-map-source,
.chapter-trajectory .trajectory-map-groups > div:not(.is-alert) span,
.chapter-trajectory .trajectory-map-groups > div:not(.is-alert) strong {
  color: #aeb8b3;
}

.chapter-trajectory .trajectory-map-instruction,
.chapter-trajectory .trajectory-map-readout-heading > span,
.chapter-trajectory .trajectory-map-readout-heading > small,
.chapter-trajectory .trajectory-map-readout-values small,
.chapter-trajectory .trajectory-map-readout-values em,
.chapter-trajectory .trajectory-map-readout > p {
  color: #aeb8b3;
}

.chapter-trajectory .trajectory-map-readout {
  border-color: rgba(250, 248, 242, 0.25);
}

.chapter-trajectory .trajectory-map-heading strong { color: var(--paper-bright); }
.chapter-trajectory .trajectory-map-panels { background: rgba(250, 248, 242, 0.28); }
.chapter-trajectory .trajectory-map-panels > article,
.chapter-trajectory .trajectory-map-highlights span { background: #f1f0ea; color: var(--ink); }
.chapter-trajectory .trajectory-map-highlights > div { background: rgba(250, 248, 242, 0.22); }
}

.evidence-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}

.evidence-facts > div {
  min-height: 112px;
  padding: 18px 20px 16px 0;
  border-bottom: 1px solid var(--line);
}

.evidence-facts > div:nth-child(even) {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.evidence-facts strong,
.evidence-facts span {
  display: block;
}

.evidence-facts strong {
  margin-bottom: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2.4vw, var(--fs-700));
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.evidence-facts span {
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.42;
}

.evidence-reading {
  display: grid;
  margin-top: 32px;
  border-top: 1px solid var(--line-strong);
}

.evidence-reading > div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.evidence-reading span {
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.evidence-reading p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  line-height: 1.55;
}

.evidence-reading .is-limit p {
  color: var(--muted);
}

.function-proof,
.trajectory-proof,
.scale-proof-visual,
.urban-proof {
  min-height: 590px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 78px);
  border-left: 1px solid var(--line-strong);
}

.same-activity {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 26px;
  align-items: end;
  margin: 54px 0 52px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}

.same-activity span,
.function-bars span,
.same-activity small,
.function-bars small,
.proof-conclusion span {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.same-activity strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-800),  6vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.function-bars {
  display: grid;
  gap: 24px;
}

.function-bars > div {
  display: grid;
  grid-template-columns: 100px 1fr 80px;
  gap: 12px 18px;
  align-items: center;
}

.function-bars i {
  position: relative;
  height: 12px;
  background: rgba(23, 32, 29, 0.09);
}

.function-bars i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar);
  background: var(--accent);
  transform-origin: left;
  animation: proof-grow var(--dur-3) var(--ease-out) both;
}

@keyframes proof-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.function-bars strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
  font-weight: 400;
  text-align: right;
}

.function-bars small {
  grid-column: 2 / -1;
}

.proof-conclusion {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-top: 52px;
}

.proof-conclusion strong {
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-900),  7vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.06em;
}

.chapter-trajectory,
.chapter-urban {
  background: var(--ink);
  color: var(--paper-bright);
}

.evidence-trajectory {
  grid-template-columns: 1fr;
  gap: clamp(42px, 6vw, 86px);
}

.evidence-trajectory .chapter-copy {
  max-width: 980px;
}

.evidence-trajectory .evidence-panel {
  border-top: 1px solid var(--line-strong);
  border-left: 0;
}

.evidence-urban {
  grid-template-columns: 1fr;
  gap: clamp(42px, 6vw, 86px);
}

.evidence-urban .chapter-copy {
  max-width: 980px;
}

.evidence-urban .evidence-panel {
  padding: 0;
  border-top: 1px solid rgba(250, 248, 242, 0.28);
  border-left: 0;
}

.evidence-urban .evidence-main-value,
.evidence-urban .evidence-main-label,
.evidence-urban .evidence-plain,
.evidence-urban .evidence-primary-source,
.evidence-urban .proof-caption,
.evidence-urban .evidence-details {
  margin-right: clamp(28px, 5vw, 76px);
  margin-left: clamp(28px, 5vw, 76px);
}

.evidence-urban .proof-caption {
  margin-top: clamp(42px, 5vw, 72px);
}

.evidence-urban .evidence-details {
  margin-bottom: clamp(42px, 5vw, 72px);
}

.chapter-trajectory .chapter-copy > p:not(.chapter-number),
.chapter-urban .chapter-copy > p:not(.chapter-number),
.chapter-trajectory .proof-caption,
.chapter-urban .proof-caption,
.chapter-urban .urban-number span,
.chapter-urban .urban-proof > p {
  color: #aeb8b3;
}

.chapter-trajectory .metric-source-button,
.chapter-urban .metric-source-button {
  border-color: rgba(250, 248, 242, 0.24);
  color: #aeb8b3;
}

.trajectory-proof,
.urban-proof {
  border-color: rgba(250, 248, 242, 0.28);
}

.trajectory-axis {
  display: flex;
  justify-content: space-between;
  margin: 70px 0 24px 208px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(250, 248, 242, 0.22);
  color: #78827d;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.trajectory-line {
  display: grid;
  grid-template-columns: 190px 1fr 88px;
  gap: 16px;
  align-items: center;
  margin: 28px 0;
}

.trajectory-line span {
  color: #b5beb9;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trajectory-line i {
  position: relative;
  height: 2px;
  background: currentColor;
  transform-origin: left;
}

.trajectory-line i::before,
.trajectory-line i::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 50%;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

.trajectory-line i::after { right: 0; }
.trajectory-line.is-low { color: var(--accent-soft); }
.trajectory-line.is-low i { transform: rotate(7deg); }
.trajectory-line.is-high { color: #cbd4cf; }
.trajectory-line.is-high i { transform: rotate(4deg); }

.trajectory-line strong {
  color: currentColor;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
  font-weight: 400;
  text-align: right;
}

.proof-note {
  max-width: 480px;
  margin: 70px 0 0 208px;
  color: #aeb8b3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  line-height: 1.5;
}

.retention-signal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  margin: 34px 0 0 208px;
  padding-top: 24px;
  border-top: 1px solid rgba(250, 248, 242, 0.22);
}

.retention-signal > strong {
  color: var(--accent-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-900);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.retention-signal span {
  color: var(--accent-soft);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.retention-signal p {
  max-width: 380px;
  margin: 8px 0 12px;
  color: #aeb8b3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  line-height: 1.45;
}

.retention-signal .metric-source-button {
  border-color: rgba(250, 248, 242, 0.2);
  color: #aeb8b3;
}

.chapter-route-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink);
}

.scale-proof-visual > strong {
  display: block;
  margin-top: 72px;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-1000),  13vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.72;
}

.scale-proof-visual > p:not(.proof-caption) {
  max-width: 480px;
  margin: 38px 0 46px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2.4vw, var(--fs-700));
  line-height: 1.25;
}

.scale-composition {
  display: grid;
  grid-template-columns: var(--share) calc(100% - var(--share));
  gap: 0;
}

.scale-composition i {
  grid-column: 1 / -1;
  height: 14px;
  background: linear-gradient(90deg, var(--accent) 0 var(--share), #c8c7c0 var(--share) 100%);
}

.scale-composition span {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.scale-composition span:last-child { text-align: right; }

.scale-proof-visual > small {
  margin-top: 24px;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.5;
}

.urban-number {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: end;
}

.urban-number strong {
  color: var(--accent-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-1000),  10vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.78;
}

.urban-number span {
  max-width: 260px;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-transform: uppercase;
}

.urban-silhouette {
  height: 190px;
  display: flex;
  align-items: end;
  gap: 5px;
  margin: 70px 0 32px;
  border-bottom: 1px solid rgba(250, 248, 242, 0.28);
}

.urban-silhouette i {
  width: 100%;
  height: var(--height);
  background: linear-gradient(to top, var(--accent), var(--accent-soft));
  opacity: 0.82;
  transform-origin: bottom;
  animation: city-rise var(--dur-3) var(--ease-out) both;
}

.urban-silhouette i:nth-child(3n) { animation-delay: 90ms; }
.urban-silhouette i:nth-child(4n) { animation-delay: 160ms; }

@keyframes city-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.urban-proof > p {
  max-width: 620px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  line-height: 1.55;
}

.chapter-unseen {
  grid-template-columns: minmax(360px, 1fr) minmax(440px, 1fr);
  background: #dedbd2;
}

.blind-spots {
  border-top: 1px solid var(--line-strong);
}

.blind-spots article {
  display: grid;
  grid-template-columns: 46px minmax(120px, 0.7fr) minmax(220px, 1.3fr);
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.blind-spots span {
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.blind-spots h3 {
  margin: 0;
  font-size: var(--fs-500);
  letter-spacing: -0.025em;
}

.blind-spots p {
  margin: 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.55;
}

.national-discussion {
  min-height: 0;
  display: block;
  padding: clamp(96px, 11vw, 168px) var(--gutter);
  background: var(--ink);
  color: var(--paper-bright);
}

.discussion-heading {
  display: grid;
  grid-template-columns: minmax(190px, .42fr) minmax(420px, 1.08fr) minmax(260px, .62fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: start;
}

.discussion-heading .section-label {
  color: var(--accent-soft);
}

.discussion-heading h2 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(var(--fs-800),  6vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: .96;
}

.discussion-heading > p:last-child {
  margin: 0;
  color: #b8c2d1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-300),  1.5vw, var(--fs-500));
  line-height: 1.58;
}

.discussion-logic {
  margin-top: clamp(64px, 8vw, 110px);
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.discussion-logic > p {
  margin: 0;
  padding: 20px 0;
  color: var(--accent-soft);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.discussion-logic ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  list-style: none;
}

.discussion-logic li {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  padding: 24px clamp(20px, 2.7vw, 42px);
  border-right: 1px solid rgba(255, 255, 255, .16);
}

.discussion-logic li:last-child { border-right: 0; }

.discussion-logic li span {
  color: var(--brand-focus);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .08em;
}

.discussion-logic li strong {
  margin: auto 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3vw, var(--fs-800));
  font-weight: 400;
  letter-spacing: -.035em;
}

.discussion-logic li small {
  max-width: 260px;
  color: #b8c2d1;
  font-size: var(--fs-100);
  line-height: 1.4;
}

.discussion-outcome {
  display: grid;
  grid-template-columns: 50px minmax(180px, .55fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: center;
  padding: 25px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.discussion-outcome > span {
  color: var(--brand-focus);
  font-size: var(--fs-600);
  text-align: center;
}

.discussion-outcome small {
  color: #b8c2d1;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.discussion-outcome strong {
  color: var(--accent-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-700),  4vw, var(--fs-900));
  font-weight: 400;
  letter-spacing: -.04em;
}

.discussion-arguments {
  margin-top: clamp(72px, 9vw, 124px);
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.discussion-arguments > article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(160px, .28fr);
  gap: clamp(24px, 4vw, 68px);
  align-items: start;
  padding: clamp(32px, 4vw, 54px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.discussion-arguments > article > span {
  color: var(--brand-focus);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .08em;
}

.discussion-arguments h3 {
  max-width: 850px;
  margin: 0 0 15px;
  font-size: clamp(var(--fs-600),  2.8vw, var(--fs-800));
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.06;
}

.discussion-arguments p {
  max-width: 830px;
  margin: 0;
  color: #b8c2d1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-300),  1.45vw, var(--fs-500));
  line-height: 1.62;
}

.national-discussion .metric-source-button {
  border-color: rgba(255, 255, 255, .2);
  color: #b8c2d1;
}

.national-discussion .metric-source-button:hover {
  border-color: var(--brand-focus);
  color: var(--paper-bright);
}

.discussion-source {
  align-self: end;
  display: grid;
  gap: 8px;
}

.discussion-no-blame {
  display: grid;
  grid-template-columns: minmax(190px, .42fr) minmax(0, 1.58fr);
  gap: clamp(32px, 6vw, 92px);
  margin: clamp(66px, 8vw, 110px) 0 0;
  padding: 28px 0;
  border-top: 2px solid var(--brand-focus);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.discussion-no-blame span {
  color: var(--accent-soft);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.discussion-no-blame p {
  max-width: 900px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2.2vw, var(--fs-700));
  line-height: 1.4;
}

.discussion-more {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(62px, 8vw, 104px);
}

.discussion-more details {
  border-top: 1px solid rgba(255, 255, 255, .24);
}

.discussion-more summary {
  min-height: 72px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.45;
  list-style: none;
  text-transform: uppercase;
}

.discussion-more summary::-webkit-details-marker { display: none; }
.discussion-more summary span { color: var(--brand-focus); font-size: var(--fs-500); transition: transform var(--dur-2) var(--ease-io); }
.discussion-more details[open] summary span { transform: rotate(45deg); }

.discussion-more ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.discussion-more li {
  padding: 17px 0 17px 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #b8c2d1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.55;
}

.discussion-more li::before {
  content: "—";
  margin-left: -24px;
  padding-right: 8px;
  color: var(--brand-focus);
}

.discussion-data-needs article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.discussion-data-needs article > span {
  color: var(--brand-focus);
  font-size: var(--fs-100);
  font-weight: 800;
}

.discussion-data-needs h3 {
  margin: 0 0 6px;
  font-size: var(--fs-300);
}

.discussion-data-needs p {
  margin: 0;
  color: #b8c2d1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  line-height: 1.5;
}

.discussion-data-source { margin-top: 16px !important; }

.discussion-conclusion {
  max-width: 980px;
  margin: clamp(78px, 10vw, 140px) 0 0;
  color: var(--accent-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-800),  6.5vw, var(--fs-1000));
  letter-spacing: -.055em;
  line-height: .98;
}

.territory-entry {
  padding: clamp(100px, 14vw, 200px) var(--gutter);
  scroll-margin-top: 56px;
}

.territory-entry-heading {
  display: grid;
  grid-template-columns: 0.5fr 1.1fr 0.7fr;
  gap: clamp(36px, 7vw, 110px);
  align-items: start;
  margin-bottom: clamp(70px, 9vw, 130px);
}

.territory-entry-heading h2 {
  margin: 0;
  font-size: clamp(var(--fs-800),  6vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.territory-entry-heading > p:last-child {
  margin: 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  line-height: 1.55;
}

.home-boundary {
  margin: 0;
  padding: clamp(70px, 9vw, 130px) var(--gutter);
  background: var(--ink);
  color: var(--paper-bright);
}

.home-boundary .section-label { color: var(--accent-soft); }

.region-investigation-context {
  min-height: 128px;
  display: grid;
  grid-template-columns: 0.45fr 1.15fr 0.65fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
  padding: 26px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--paper-bright);
}

.region-investigation-context > p:nth-child(2) {
  max-width: 720px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.5;
}

.region-investigation-context > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.region-investigation-context button {
  padding: 7px 0;
  border-bottom: 1px solid var(--line-strong);
}

.region-investigation-context button span { margin-left: 16px; }

.metric-reading-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 0 36px;
  background: var(--line);
  border: 1px solid var(--line);
}

.metric-reading-grid > div {
  padding: 24px;
  background: var(--paper);
}

.metric-reading-grid p {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-reading-grid strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  font-weight: 400;
  line-height: 1.5;
}

/* Alignement léger avec la charte cartographique : identité et contrôles. */
.site-region-select select {
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
}

.site-region-select select:focus-visible {
  outline-color: var(--brand-focus);
}

.method-button {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
}

.method-button:hover {
  border-color: var(--brand-accent);
  background: var(--surface-tint);
  color: var(--brand-primary);
}

.loading-state span {
  border-top-color: var(--brand-accent);
}

.home-intro,
.region-deck,
.editorial-intro blockquote {
  color: var(--muted);
}

.primary-action {
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  transition: background var(--dur-2) var(--ease-io), transform var(--dur-2) var(--ease-out);
}

.primary-action:hover {
  background: color-mix(in oklab, var(--brand-primary) 34%, var(--brand-accent));
  transform: translateY(-2px);
}

.secondary-action:hover,
.chapter-route-link:hover,
.region-investigation-context button:hover {
  color: var(--brand-primary);
}

.map-stage {
  background: var(--surface-tint);
}

.map-stage::before {
  background-image: linear-gradient(rgba(0, 102, 168, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 102, 168, 0.045) 1px, transparent 1px);
}

.map-region {
  fill: #d7dfea;
  stroke: var(--paper-bright);
}

.map-region.is-available:hover,
.map-region.is-available:focus-visible {
  fill: var(--brand-primary);
  filter: drop-shadow(0 10px 12px rgba(0, 102, 168, 0.22));
}

.region-map-stage {
  background: linear-gradient(145deg, #dce9f3 0%, #a9d9df 100%);
}

.region-map-stage::after {
  background: radial-gradient(circle at 50% 48%, transparent 0 34%, rgba(0, 102, 168, 0.14) 82%);
}

.hero-metric-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(0, 102, 168, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.54);
}

.hero-metric-tabs button {
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  color: rgba(15, 23, 42, 0.66);
  letter-spacing: 0.045em;
}

.hero-metric-tabs button::after {
  display: none;
}

.hero-metric-tabs button:hover,
.hero-metric-tabs button.is-active {
  background: var(--paper-bright);
  color: var(--brand-primary);
  box-shadow: 0 1px 3px rgba(0, 102, 168, 0.1);
}

.national-story .national-evidence:nth-child(even) {
  background: var(--surface-tint);
}

.ratio-graphic > div,
.flow-graphic > div,
.contrast-graphic > div {
  background: var(--paper-bright);
}

.ratio-graphic > div.is-active,
.contrast-graphic .is-alert {
  background: var(--data-cool);
}

.idf-demo-toolbar [role="group"] {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.idf-demo-toolbar button.is-active {
  color: var(--brand-primary);
}

.idf-demo-legend i {
  background: linear-gradient(90deg, #dce9f3, var(--brand-caution));
}

.idf-demo-shape {
  stroke: rgba(15, 23, 42, 0.7);
}

.idf-demo-shape:focus-visible,
.idf-demo-department.is-selected .idf-demo-shape {
  stroke: var(--brand-focus);
}

.idf-demo-readout,
.metric-dialog,
.method-dialog {
  background: var(--paper-bright);
}

.metric-source-button:hover {
  border-color: var(--brand-accent);
  color: var(--brand-primary);
}

.home-boundary,
.story-opening,
.chapter-trajectory,
.chapter-urban,
.chart-section,
.idf-demo-map-canvas {
  background-color: var(--ink);
}

@media (min-width: 981px) and (max-width: 1280px) {
  .home-copy {
    padding-top: 32px;
    padding-bottom: 28px;
  }

  .investigation-title {
    margin-top: 20px;
    margin-bottom: 16px;
    font-size: var(--fs-1000);
  }

  .home-intro {
    font-size: var(--fs-400);
    line-height: 1.45;
  }

  .home-empirical-hook {
    margin-top: 20px;
    padding-top: 16px;
  }

  .home-actions {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 24px;
  }

  .primary-action {
    gap: 12px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .hero-reading-contract {
    display: none;
  }
}

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: var(--dur-3);
  animation-timing-function: var(--ease-out);
}

@media (max-width: 980px) {
  :root { --header-height: 66px; }

  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .site-nav {
    display: flex;
    justify-content: center;
  }

  .site-region-select > span { display: none; }

  .site-region-select select {
    width: min(32vw, 210px);
  }

  .home-view,
  .region-hero {
    grid-template-columns: 1fr;
  }

  .home-copy {
    min-height: 650px;
  }

  .map-stage,
  .region-map-stage {
    min-height: 600px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .region-hero-copy {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .kpi-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .kpi-item:nth-child(2) { border-right: 0; }
  .kpi-item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }

  .editorial-intro,
  .home-thesis-heading,
  .research-boundary,
  .commune-heading,
  .source-section {
    grid-template-columns: 1fr;
  }

  .home-thesis-heading > p:last-child {
    grid-column: 1;
  }

  .insight-row {
    grid-template-columns: 48px 1fr auto;
  }

  .insight-copy {
    grid-column: 2 / -1;
  }

  .insight-metric {
    grid-column: 3;
    grid-row: 1;
  }

  .department-layout {
    grid-template-columns: 1fr;
  }

  .commune-map-layout {
    grid-template-columns: 1fr;
  }

  .commune-readout {
    min-height: 560px;
  }

  .interpretation-row {
    grid-template-columns: 110px 1fr;
  }

  .interpretation-row > div {
    grid-column: 2;
  }

  .department-visual {
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .story-opening,
  .story-chapter,
  .chapter-unseen,
  .discussion-heading,
  .discussion-no-blame,
  .territory-entry-heading,
  .region-investigation-context {
    grid-template-columns: 1fr;
  }

  .story-opening {
    min-height: 0;
    gap: 56px;
  }

  .story-chapter {
    min-height: 0;
    gap: 64px;
  }

  .function-proof,
  .trajectory-proof,
  .scale-proof-visual,
  .urban-proof {
    min-height: 500px;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }

  .evidence-panel {
    min-height: 0;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }

  .chapter-trajectory .trajectory-proof,
  .chapter-urban .urban-proof {
    border-color: rgba(250, 248, 242, 0.28);
  }

  .territory-entry-heading {
    gap: 28px;
  }

  .discussion-heading,
  .discussion-no-blame {
    gap: 28px;
  }

  .discussion-arguments > article {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .discussion-arguments .discussion-source {
    grid-column: 2;
  }

  .region-investigation-context {
    gap: 20px;
    align-items: start;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .region-investigation-context > div {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 24px;
  }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }

  .site-header {
    gap: 8px;
  }

  .brand > span:last-child { display: none; }

  .site-region-select select {
    width: min(41vw, 160px);
    font-size: var(--fs-100);
  }

  .method-button {
    max-width: 92px;
    font-size: var(--fs-100);
    line-height: 1.25;
    text-align: right;
  }

  .home-copy {
    min-height: calc(100svh - var(--header-height));
    padding-top: 40px;
  }

  .home-title {
    margin-top: 24px;
    font-size: clamp(var(--fs-900),  17vw, var(--fs-1000));
  }

  .home-title span {
    margin-left: 0;
    white-space: normal;
  }

  .home-intro { font-size: var(--fs-300); }
  .territory-picker { margin-top: 40px; }

  .investigation-title {
    font-size: clamp(var(--fs-800),  15vw, var(--fs-1000));
  }

  .home-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-empirical-hook {
    grid-template-columns: 1fr;
  }

  .home-empirical-hook > strong,
  .home-empirical-hook .metric-source-button {
    grid-column: 1;
    grid-row: auto;
  }

  .primary-action,
  .secondary-action {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .hero-question {
    left: 20px;
    bottom: 22px;
  }

  .map-counter { right: 20px; }

  .story-opening,
  .story-chapter,
  .territory-entry {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .national-discussion {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .discussion-logic ol,
  .discussion-more {
    grid-template-columns: 1fr;
  }

  .discussion-logic li {
    min-height: 160px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }

  .discussion-logic li:last-child { border-bottom: 0; }

  .discussion-outcome {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .discussion-outcome strong {
    grid-column: 2;
  }

  .discussion-arguments > article {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 16px;
  }

  .discussion-arguments .discussion-source {
    grid-column: 2;
  }

  .discussion-no-blame {
    grid-template-columns: 1fr;
  }

  .discussion-more {
    gap: 32px;
  }

  .story-opening-copy h2 {
    font-size: clamp(var(--fs-800),  13vw, var(--fs-1000));
  }

  .story-opening-copy p { margin-top: 28px; }

  .chapter-copy h2 {
    font-size: clamp(var(--fs-800),  12vw, var(--fs-900));
  }

  .function-proof,
  .trajectory-proof,
  .scale-proof-visual,
  .urban-proof {
    min-height: 0;
    padding: 44px 0 10px;
  }

  .evidence-panel {
    padding: 44px 0 10px;
  }

  .evidence-main-value {
    margin-bottom: 32px;
    font-size: clamp(var(--fs-900),  17vw, var(--fs-1000));
  }

  .evidence-main-label {
    margin-top: -18px;
  }

  .evidence-plain {
    font-size: var(--fs-400);
  }

  .plain-graphic {
    margin-top: 36px;
  }

  .ratio-graphic > div {
    min-height: 138px;
    padding: 16px 12px;
  }

  .ratio-graphic i::before {
    font-size: var(--fs-700);
  }

  .ratio-graphic span {
    font-size: var(--fs-100);
  }

  .function-graphic > div,
  .twins-graphic > div {
    grid-template-columns: 1fr;
    gap: 8px 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }

  .function-graphic > div:last-of-type,
  .twins-graphic > div:last-child {
    border-bottom: 0;
  }

  .function-graphic i,
  .twins-graphic i {
    grid-column: 1;
  }

  .function-graphic strong,
  .twins-graphic strong,
  .function-graphic span,
  .twins-graphic span {
    grid-column: 1;
  }

  .flow-graphic {
    grid-template-columns: 1fr;
  }

  .flow-graphic > div {
    min-height: 150px;
  }

  .care-volume-graphic > div {
    grid-template-columns: 1fr;
  }

  .care-volume-graphic article {
    padding: 24px 16px;
  }

  .care-volume-graphic article > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .care-volume-graphic article > div i { display: none; }
  .care-volume-graphic mark { top: 18px; right: 18px; }

  .trajectory-map-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .trajectory-map-scale {
    grid-template-columns: auto minmax(60px, 1fr) auto;
  }

  .trajectory-map-panels {
    grid-template-columns: 1fr;
  }

  .trajectory-map-verdict {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 0;
    padding: 24px 24px;
  }

  .trajectory-map-verdict-place,
  .trajectory-map-verdict > p {
    grid-column: 1 / -1;
  }

  .trajectory-map-verdict-change,
  .trajectory-map-verdict-national {
    min-height: 96px;
    padding-left: 0;
  }

  .trajectory-map-verdict-national {
    padding-left: 16px;
  }

  .trajectory-map-verdict-change > strong,
  .trajectory-map-verdict-national > strong {
    font-size: var(--fs-700);
  }

  .trajectory-map-verdict > p {
    font-size: var(--fs-200);
  }

  .trajectory-map-panels header {
    min-height: 0;
  }

  .trajectory-map-panels article > div {
    min-height: 280px;
  }

  .trajectory-map-selected-value {
    right: 12px;
    bottom: 14px;
  }

  .trajectory-map-benchmarks {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .trajectory-map-benchmarks > div {
    margin-bottom: 12px;
  }

  .trajectory-map-benchmarks > p {
    min-height: 58px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .trajectory-map-benchmarks > small {
    margin-top: 12px;
  }

  .timeline-graphic {
    gap: 8px;
    padding-right: 0;
    padding-left: 0;
  }

  .timeline-graphic strong {
    font-size: var(--fs-600);
  }

  .timeline-graphic span {
    letter-spacing: 0.04em;
  }

  .contrast-graphic {
    grid-template-columns: 1fr;
  }

  .contrast-graphic > div {
    min-height: 145px;
  }

  .convergence-graphic > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .convergence-graphic-body {
    display: block;
  }

  .convergence-graphic ol {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .convergence-graphic li {
    min-height: 106px;
    grid-template-columns: 30px minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 16px 0;
    border-right: 0;
  }

  .convergence-graphic li:nth-child(odd),
  .convergence-graphic li:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
  }

  .convergence-graphic li > span {
    font-size: var(--fs-500);
  }

  .convergence-graphic aside {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 24px;
  }

  .convergence-graphic aside > span {
    margin-bottom: 16px;
  }

  .convergence-graphic aside p {
    margin-top: 24px;
  }

  .convergence-graphic > footer {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .evidence-technical-headline {
    align-items: flex-start;
    flex-direction: column;
  }

  .idf-demo-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .idf-demo-toolbar [role="group"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .idf-demo-toolbar button {
    min-height: 52px;
    padding: 8px;
  }

  .idf-demo-layout {
    grid-template-columns: 1fr;
  }

  .idf-demo-map-canvas {
    min-height: 380px;
    padding: 10px 8px 20px;
  }

  .idf-demo-readout {
    min-height: 0;
    padding: 28px 24px;
  }

  .idf-demo-label { font-size: var(--fs-100); }
  .idf-demo-value { font-size: var(--fs-100); }

  .idf-demo-legend {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0 12px;
  }

  .idf-demo-legend span:last-child {
    text-align: left;
  }

  .idf-demo-legend i {
    grid-row: 2;
  }

  .evidence-facts {
    grid-template-columns: 1fr;
  }

  .evidence-facts > div:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .evidence-reading > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .same-activity {
    margin-top: 40px;
  }

  .function-bars > div {
    grid-template-columns: 74px 1fr 62px;
    gap: 8px;
  }

  .function-bars strong { font-size: var(--fs-500); }

  .proof-conclusion {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin-top: 40px;
  }

  .trajectory-axis {
    margin: 50px 0 22px;
  }

  .trajectory-line {
    grid-template-columns: 1fr 74px;
    gap: 8px;
  }

  .trajectory-line span { grid-column: 1 / -1; }
  .trajectory-line i { grid-column: 1; }
  .trajectory-line strong { grid-column: 2; }

  .trajectory-line strong { font-size: var(--fs-500); }
  .proof-note { margin: 48px 0 0; }

  .retention-signal {
    margin-left: 0;
  }

  .scale-proof-visual > strong {
    margin-top: 56px;
    font-size: clamp(var(--fs-1000),  32vw, var(--fs-1000));
  }

  .urban-number {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .urban-number strong {
    font-size: clamp(var(--fs-1000),  29vw, var(--fs-1000));
  }

  .urban-silhouette { margin-top: 48px; }

  .blind-spots article {
    grid-template-columns: 34px 1fr;
  }

  .blind-spots p { grid-column: 2; }

  .home-boundary {
    padding: 72px 20px;
  }

  .metric-reading-grid {
    grid-template-columns: 1fr;
  }

  .map-stage,
  .region-map-stage {
    min-height: 480px;
  }

  .region-map-stage {
    min-height: 720px;
  }

  .hero-map-toolbar {
    top: 20px;
    right: 20px;
    left: 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .hero-map-metric-control,
  .hero-scale-switch {
    width: 100%;
  }

  .hero-scale-switch {
    justify-items: stretch;
  }

  .hero-scale-switch > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-metric-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 4px 15px;
    overflow: visible;
  }

  .hero-metric-tabs button {
    min-width: 0;
    text-align: left;
    line-height: 1.35;
  }

  .region-map-stage svg {
    width: 92%;
    height: 48%;
    top: 42%;
  }

  .hero-map-readout {
    right: 20px;
    bottom: 94px;
    left: 20px;
    width: auto;
  }

  .hero-readout-main strong {
    font-size: var(--fs-800);
  }

  .hero-map-legend {
    right: 20px;
    bottom: 24px;
    left: 20px;
    width: auto;
  }

  .hero-map-legend small,
  .hero-map-label {
    display: none;
  }

  .region-hero-copy {
    min-height: 0;
    padding-top: 24px;
  }

  .back-button { margin-bottom: 52px; }
  .region-title { font-size: clamp(var(--fs-800),  15vw, var(--fs-1000)); }

  .kpi-item {
    min-width: 0;
    min-height: 205px;
    padding-top: 24px;
    padding-right: 12px;
  }

  .kpi-item:not(:first-child) {
    padding-left: 12px;
  }

  .kpi-item .metric-source-button {
    min-width: 0;
  }

  .kpi-item .metric-source-button span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .kpi-item .metric-source-button span:last-child {
    display: none;
  }

  .kpi-value { font-size: var(--fs-700); }

  .editorial-section,
  .chart-section,
  .department-section,
  .commune-section,
  .source-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .editorial-intro {
    gap: 28px;
    margin-bottom: 80px;
  }

  .editorial-intro blockquote { font-size: var(--fs-600); }

  .insight-row {
    grid-template-columns: 34px 1fr;
    gap: 12px 16px;
    padding: 28px 0;
  }

  .insight-row h3 { font-size: var(--fs-400); }
  .insight-row p { grid-column: 2; font-size: var(--fs-300); }
  .insight-copy { grid-column: 2; }
  .insight-metric { grid-column: 2; grid-row: auto; font-size: var(--fs-800); }

  .home-thesis {
    padding: 88px 20px;
  }

  .home-thesis-heading {
    gap: 32px;
    margin-bottom: 72px;
  }

  .home-thesis-heading h2 {
    font-size: var(--fs-900);
  }

  .home-thesis-heading > p:last-child {
    margin-top: 0;
    font-size: var(--fs-500);
  }

  .thesis-finding {
    grid-template-columns: 34px 1fr;
    gap: 16px 16px;
    padding: 32px 0;
  }

  .thesis-finding > strong,
  .thesis-finding > div {
    grid-column: 2;
  }

  .thesis-finding > strong {
    font-size: var(--fs-900);
  }

  .research-boundary {
    gap: 24px;
  }

  .chart-heading,
  .department-heading,
  .commune-heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .chart-heading > p,
  .department-heading > p { justify-self: start; }
  .chart-frame { min-height: 290px; }
  .chart-tabs { overflow-x: auto; }

  .department-layout { min-height: 0; }
  .department-visual { min-height: 530px; }
  .department-visual svg { height: 350px; }
  .department-focus-metrics strong { font-size: var(--fs-500); }
  .department-focus-metrics div { padding-left: 16px; }

  .department-table th:nth-child(3),
  .department-table td:nth-child(3),
  .department-table th:nth-child(4),
  .department-table td:nth-child(4) {
    display: none;
  }

  .commune-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 22px 0;
  }

  .commune-metric-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    overflow: visible;
  }

  .commune-metric-tabs button {
    min-width: 0;
    text-align: left;
    line-height: 1.35;
  }

  .commune-metric-tabs button:last-child { grid-column: 1 / -1; }

  .commune-department-filter select {
    width: 100%;
  }

  .commune-mobile-view-switch {
    display: grid;
    gap: 8px;
  }

  .commune-mobile-view-switch > span {
    color: var(--muted);
    font-size: var(--fs-100);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .commune-mobile-view-switch > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-tint);
  }

  .commune-mobile-view-switch button {
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: var(--fs-100);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .commune-mobile-view-switch button.is-active {
    background: var(--paper-bright);
    color: var(--brand-primary);
    box-shadow: 0 1px 3px rgba(0, 102, 168, 0.12);
  }

  .commune-explorer[data-mobile-view="list"] .commune-map-layout,
  .commune-explorer[data-mobile-view="map"] .commune-mobile-list {
    display: none;
  }

  .commune-explorer[data-mobile-view="map"] .commune-map-layout {
    display: grid;
  }

  .commune-map-layout,
  .commune-map-canvas {
    min-height: 0;
  }

  .commune-map-canvas svg {
    height: 440px;
    flex-basis: 440px;
  }

  .commune-legend {
    position: static;
    display: block;
    width: 100%;
    padding: 20px;
    border-top: 1px solid var(--line);
    background: var(--paper-bright);
    backdrop-filter: none;
  }

  .quadrant-legend {
    grid-template-columns: 1fr;
  }

  .quadrant-distribution {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px 8px;
    margin-top: 12px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .commune-readout {
    min-height: 520px;
    padding: 40px 24px;
  }

  .commune-mobile-list {
    display: block;
  }

  .commune-readout h3 {
    font-size: var(--fs-800);
  }

  .interpretation-row {
    grid-template-columns: 34px 1fr;
    gap: 12px 16px;
    padding: 28px 0;
  }

  .interpretation-label {
    grid-column: 1 / -1;
  }

  .interpretation-row h3,
  .interpretation-row > div {
    grid-column: 2;
  }

  .source-section { gap: 48px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .method-dialog,
  .metric-dialog { max-height: 94vh; padding: 28px 22px 38px; }
  .dialog-topline { margin-bottom: 48px; }

  .metric-dialog-details > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

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

  .reveal,
  .reveal.is-reveal-ready {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Les capitales restent réservées aux repères courts. Les phrases, sources,
   légendes et libellés de données retrouvent une casse de lecture courante. */
.hero-reading-contract,
.evidence-scope,
.evidence-details summary,
.region-period,
.hero-metric-tabs button,
.commune-metric-tabs button,
.hero-map-label,
.hero-readout-scope,
.hero-readout-period,
.hero-readout-main span,
.hero-detail-link,
.hero-map-legend p,
.hero-map-legend small,
.kpi-label,
.metric-source-button,
.chart-tab,
.chart-legend,
.chart-note,
.department-table th,
.department-focus-source,
.table-source-note,
.commune-toolbar p,
.commune-department-filter > span,
.commune-map-count,
.commune-legend > p,
.commune-mobile-list-heading,
.commune-mobile-source,
.geometry-loading,
.commune-loading,
.trajectory-map-heading span,
.trajectory-map-scale span,
.trajectory-map-verdict span,
.trajectory-map-verdict small,
.trajectory-map-benchmarks span,
.trajectory-map-benchmarks small,
.convergence-graphic > header span,
.convergence-graphic li small,
.convergence-graphic aside > span,
.site-footer {
  letter-spacing: normal;
  text-transform: none;
}

@media (max-width: 980px) {
  .region-context-bar {
    grid-template-columns: auto minmax(130px, 1fr) auto auto;
  }

  .region-context-bar small {
    display: none;
  }
}

@media (max-width: 680px) {
  .region-context-bar {
    min-height: 50px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 20px;
  }

  .region-context-bar > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .region-context-bar button {
    display: none;
  }

  .idf-human-scale {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .idf-human-scale > div {
    grid-template-columns: repeat(20, 1fr);
  }
}

/* Plancher de lecture et cibles tactiles pour la couche grand public. */
.hero-metric-tabs button,
.commune-metric-tabs button,
.chart-tab,
.region-investigation-context button,
.site-nav button,
.method-button,
.back-button,
.primary-action,
.secondary-action,
.chapter-route-link {
  min-height: 44px;
}

.eyebrow,
.section-label,
.chapter-number,
.proof-caption,
.metric-source-button,
.kpi-label,
.hero-reading-contract,
.evidence-scope,
.evidence-reading span,
.commune-toolbar p,
.commune-department-filter > span,
.commune-map-count,
.table-source-note,
.department-table th,
.site-footer,
.hero-metric-tabs button,
.commune-metric-tabs button,
.chart-tab {
  font-size: var(--fs-100);
}

/* Bloc L — récit d’ouverture et recherche communale. */
.why-atlas {
  scroll-margin-top: 24px;
  padding: clamp(84px, 10vw, 150px) var(--gutter);
  background: var(--surface-tint);
}

.why-atlas-copy,
.why-comparison {
  width: min(100%, 700px);
  margin-inline: auto;
}

.why-atlas-copy {
  color: #263248;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-400),  1.45vw, var(--fs-500));
  line-height: 1.65;
}

.why-atlas-copy header {
  margin-bottom: 40px;
}

.why-atlas-copy header > p {
  margin: 0 0 12px;
  color: var(--ep-navy);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.why-atlas-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(var(--fs-800),  6vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.why-atlas-copy > p {
  margin: 0 0 30px;
}

.why-atlas-copy blockquote {
  margin: clamp(54px, 8vw, 86px) 0;
  padding: 0 0 0 30px;
  border-left: 4px solid var(--ep-turquoise);
  color: var(--ep-navy);
  font-size: clamp(var(--fs-600),  4vw, var(--fs-800));
  font-style: italic;
  line-height: 1.14;
}

.why-source {
  width: 100%;
  margin-top: -14px;
  margin-bottom: 8px;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
}

.why-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: -14px !important;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
}

.why-inline-links button,
.why-observation-bridge button {
  min-height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ep-navy);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
}

/* Ticket N3 — la note sur l'assistance par IA n'est pas un avertissement subi :
   c'est une déclaration volontaire qui construit la confiance. Elle reste dans
   la colonne et la police du récit, avec un simple filet de retrait. */
.why-ai {
  margin: 34px 0 44px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--ep-turquoise);
  font-size: clamp(var(--fs-300),  1.35vw, var(--fs-400));
  line-height: 1.6;
}

.why-ai p { margin: 0; }
.why-ai a {
  display: inline-block;
  margin-top: 8px;
  color: var(--ep-navy);
  font-weight: 800;
  text-decoration: none;
}

.why-comparison {
  margin-top: 36px;
  margin-bottom: 56px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.82);
}

.why-places {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 105px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.why-place p,
.why-place h3,
.why-place span,
.why-place small { margin: 0; }
.why-place p {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
}
.why-place h3 {
  min-height: 48px;
  margin-top: 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-500);
  line-height: 1.05;
}
.why-place > strong {
  display: block;
  margin-top: 16px;
  color: var(--ep-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-800),  5vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.why-place > span {
  display: block;
  min-height: 45px;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.35;
}
.why-place small {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 8px;
  border-left: 3px solid var(--data-warm);
  background: var(--paper-bright);
  font-size: var(--fs-100);
  font-weight: 800;
  line-height: 1.35;
}
.why-place-declin small { border-left-color: var(--data-cool); }

.why-journey {
  display: grid;
  grid-template-rows: auto 2px auto;
  gap: 8px;
  text-align: center;
}
.why-journey span,
.why-journey strong {
  color: var(--ep-navy);
  font-size: var(--fs-100);
  font-weight: 800;
}
.why-journey i {
  position: relative;
  height: 2px;
  background: var(--line-strong);
}
.why-journey i::before {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--ep-navy);
  border-right: 2px solid var(--ep-navy);
  transform: rotate(45deg);
}
.why-journey i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ep-turquoise);
  animation: why-journey 2.4s var(--ease-io) infinite;
}
@keyframes why-journey {
  0%, 18% { transform: translateX(0); }
  80%, 100% { transform: translateX(87px); }
}

.why-comparison figcaption {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: #364257;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.55;
}

.why-observation {
  margin: 64px 0 54px;
  padding: 28px;
  border-left: 4px solid var(--data-warm);
  background: var(--paper-bright);
}
.why-observation > p { margin: 0 0 18px; }
.why-observation-label {
  color: var(--data-warm);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
}
.why-observation small {
  display: block;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.55;
}
.why-observation-bridge {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 700;
}

.why-search-intro {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--line-strong);
}
.why-search-intro h3 {
  margin: 0;
  color: var(--ep-navy);
  font-size: clamp(var(--fs-700),  5vw, var(--fs-900));
  font-weight: 400;
  letter-spacing: -0.04em;
}
.why-search-intro > p { margin: 10px 0 24px; }

.commune-search {
  position: relative;
  width: min(100%, 290px);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.35;
}
.commune-search > label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
}
.commune-search-field {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: var(--paper-bright);
}
.commune-search-field > span {
  color: var(--ep-navy);
  font-size: var(--fs-500);
}
.commune-search input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-200);
}
/* Ticket O6 — même correction que la règle globale : le turquoise de marque
   ne tenait pas le 3:1 contre le fond clair. */
.commune-search-field:focus-within {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}
.commune-search-status {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-100);
}
.commune-search-list,
.commune-search-card {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  border: 1px solid var(--line-strong);
  background: var(--paper-bright);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
.commune-search-list {
  max-height: min(390px, 60vh);
  overflow-y: auto;
}
.commune-search-option {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.commune-search-option:last-child { border-bottom: 0; }
.commune-search-option strong { font-size: var(--fs-100); }
.commune-search-option span { color: var(--muted); font-size: var(--fs-100); }
.commune-search-option:hover,
.commune-search-option.is-active { background: var(--surface-tint); }
.commune-search-card {
  padding: 16px;
}
.commune-search-card > p:first-child,
.commune-search-card h3,
.commune-search-card div,
.commune-search-card .commune-search-situation { margin: 0; }
.commune-search-card > p:first-child {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
}
.commune-search-card h3 {
  margin-top: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
}
.commune-search-card > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}
.commune-search-card > div strong {
  color: var(--ep-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-700);
  font-weight: 400;
}
.commune-search-card > div span { color: var(--muted); font-size: var(--fs-100); }
.commune-search-situation {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-100);
  font-weight: 800;
}
.commune-search-card button,
.commune-search-card > a {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  border: 0;
  background: var(--ink);
  color: white;
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  text-decoration: none;
}
.commune-search.is-prominent {
  width: 100%;
}
.commune-search.is-prominent > label { font-size: var(--fs-100); }
.commune-search.is-prominent .commune-search-field { min-height: 58px; padding-inline: 16px; }
.commune-search.is-prominent input { font-size: var(--fs-300); }
.commune-search.is-prominent .commune-search-list,
.commune-search.is-prominent .commune-search-card {
  position: relative;
  top: 0;
  margin-top: 8px;
}

.header-commune-search .commune-search { width: 210px; }
.header-commune-search .commune-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.header-commune-search .commune-search-status { display: none; }
.header-commune-search .commune-search-field {
  min-height: 40px;
  border-width: 0 0 1px;
  background: transparent;
}
.header-commune-search .commune-search-list,
.header-commune-search .commune-search-card { top: calc(100% + 12px); }

@media (max-width: 1120px) {
  .site-header { gap: 16px; }
  .site-nav { gap: 16px; }
  .site-region-select select { width: min(22vw, 190px); }
  .header-commune-search .commune-search { width: min(21vw, 190px); }
}

@media (max-width: 760px) {
  .brand-lockup { display: none; }
  .brand-mark { display: block; }
  .brand-atlas { display: none !important; }
  .site-region-select select { width: min(30vw, 145px); }
  .header-commune-search .commune-search { width: min(31vw, 150px); }
  .header-commune-search .commune-search-field { padding-inline: 4px; grid-template-columns: 20px minmax(0, 1fr); }
  .header-commune-search .commune-search-field > span { font-size: var(--fs-400); }
  .header-commune-search .commune-search input { font-size: var(--fs-100); }
  .why-atlas { padding-inline: 20px; }
  .why-places { grid-template-columns: 1fr; gap: 24px; }
  .why-journey { grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; }
  .why-place h3,
  .why-place > span { min-height: 0; }
  .hero-question {
    max-width: 215px;
    font-size: var(--fs-600);
  }
  .hero-question strong { font-size: 1.08em; }
  .map-counter {
    max-width: 105px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    font-size: var(--fs-100);
    line-height: 1.2;
    text-align: right;
  }
  .map-counter strong { font-size: var(--fs-700); }
  @keyframes why-journey {
    0%, 18% { transform: translateX(0); }
    80%, 100% { transform: translateX(calc(100vw - 160px)); }
  }
}

@media (max-width: 540px) {
  .method-button { display: none; }
  .site-header { grid-template-columns: auto minmax(0, 1fr); }
  .site-nav { justify-content: flex-end; }
  .site-region-select select { width: 118px; }
  .header-commune-search .commune-search { width: 132px; }
  .why-atlas-copy blockquote { padding-left: 20px; }
  .why-comparison { padding: 24px 16px; }
}

@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .site-header,
  .back-button,
  .hero-map-toolbar,
  .chart-tabs,
  .commune-toolbar,
  .method-dialog,
  .metric-dialog,
  .map-tooltip {
    display: none !important;
  }

  .header-commune-search,
  .why-search-intro {
    display: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .home-thesis,
  .commune-readout,
  .chapter-trajectory,
  .chapter-urban {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  section,
  article,
  .department-layout,
  .commune-explorer {
    break-inside: avoid;
  }
}

/* Bloc K — identité éditoriale, statut et informations légales. */
.home-publication-note {
  max-width: 680px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 18px;
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 4px solid var(--ep-turquoise);
  background: rgba(237, 248, 250, 0.92);
}

.home-publication-note strong {
  grid-row: 1 / span 2;
  align-self: start;
  color: var(--ep-navy);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-publication-note p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.5;
}

.home-publication-note a {
  width: fit-content;
  color: var(--ep-navy);
  font-size: var(--fs-100);
  font-weight: 800;
  text-decoration: none;
}

.home-publication-note a:hover,
.home-publication-note a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  align-items: end;
  gap: clamp(38px, 8vw, 120px);
  padding: clamp(42px, 6vw, 82px) var(--gutter);
  border-top: 0;
  background: #071c2f;
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--fs-100);
  font-weight: 400;
  line-height: 1.55;
}

.footer-signature {
  max-width: 720px;
}

.footer-signature img {
  width: min(260px, 70vw);
  height: auto;
  display: block;
  margin-bottom: 28px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: white;
}

.footer-signature p,
.footer-meta p {
  margin: 0;
}

.footer-signature p + p {
  margin-top: 12px;
}

.footer-signature strong {
  color: white;
  font-weight: 700;
}

.site-footer a {
  color: var(--ep-turquoise-light);
  text-decoration-color: rgba(124, 213, 222, 0.42);
  text-underline-offset: 4px;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: white;
  text-decoration-color: currentColor;
}

.footer-meta {
  display: grid;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-meta nav {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.footer-meta nav a {
  width: fit-content;
  font-weight: 700;
}

.legal-view {
  padding-bottom: clamp(80px, 11vw, 150px);
  background: var(--paper);
}

.legal-hero {
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(42px, 7vw, 104px) var(--gutter);
  background:
    radial-gradient(circle at 88% 18%, rgba(83, 205, 212, 0.24), transparent 26%),
    linear-gradient(135deg, white 0 68%, #edf8fa 68%);
}

.legal-hero .back-button {
  align-self: flex-start;
  margin-bottom: auto;
}

.legal-hero .eyebrow {
  margin: 54px 0 16px;
  color: var(--ep-navy);
}

.legal-hero h1 {
  max-width: 980px;
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-900),  8vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.88;
}

.legal-hero > p:last-child {
  max-width: 720px;
  margin: 34px 0 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-400),  2.2vw, var(--fs-600));
  line-height: 1.45;
}

.legal-record-note {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 16px clamp(28px, 5vw, 78px);
  margin: clamp(44px, 7vw, 90px) var(--gutter) 0;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(0, 102, 168, 0.22);
  background: #edf8fa;
}

.legal-record-note .section-label {
  grid-column: 1 / -1;
  color: var(--ep-navy);
}

.legal-record-note h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3.5vw, var(--fs-800));
  font-weight: 400;
  line-height: 1.08;
}

.legal-record-note > p:last-child {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-100);
}

.legal-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(54px, 8vw, 110px) var(--gutter) 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

.legal-sections > section {
  min-width: 0;
  padding: clamp(30px, 5vw, 68px);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.6);
}

.legal-sections > .legal-wide {
  grid-column: 1 / -1;
}

.legal-sections .section-label {
  margin: 0 0 16px;
  color: var(--ep-navy);
}

.legal-sections h2 {
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3.4vw, var(--fs-800));
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.legal-sections section > p:not(.section-label) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.65;
}

.legal-sections section > p + p {
  margin-top: 16px !important;
}

.legal-facts {
  margin: 28px 0 0;
}

.legal-facts > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.2fr);
  gap: 20px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.legal-facts dt {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
}

.legal-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-100);
  line-height: 1.45;
}

.legal-facts a,
.license-list a {
  color: var(--ep-navy);
  text-underline-offset: 4px;
}

.is-missing {
  color: #9d3c18 !important;
  font-weight: 700;
}

.license-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 40px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

.license-list article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.license-list article > p:first-child {
  min-height: 42px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.35;
}

.license-list article > p:first-child strong {
  color: var(--ep-navy);
}

.license-list h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  font-weight: 400;
  line-height: 1.25;
}

.license-list article > p:nth-of-type(2) {
  margin: 18px 0 26px;
  color: var(--ink);
  font-size: var(--fs-100);
  line-height: 1.45;
}

.license-list article > div {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.license-list a {
  font-size: var(--fs-100);
  font-weight: 700;
}

.legal-sections .legal-data-note {
  max-width: 980px;
  margin-top: 28px !important;
  padding-left: 16px;
  border-left: 3px solid var(--ep-turquoise);
}

@media (max-width: 1100px) {
  .license-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .license-list article:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 920px) {
  .brand-lockup { display: none; }
  .brand-mark { display: block; }
  .brand > .brand-atlas { display: inline; }

  .site-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .footer-meta {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .publication-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
    padding-block: 8px;
    text-align: left;
  }

  .publication-status strong::after { display: none; }
  .brand { gap: 8px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand > span.brand-atlas {
    display: inline-block;
    max-width: 54px;
    padding-left: 8px;
    font-size: var(--fs-100);
    line-height: 1.05;
  }

  .site-region-select select {
    width: min(33vw, 128px);
  }

  .method-button {
    max-width: 76px;
    padding-inline: 8px;
    font-size: var(--fs-100);
  }

  .home-publication-note {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }

  .home-publication-note strong { grid-row: auto; }

  .site-footer {
    display: grid;
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .legal-hero {
    min-height: 390px;
    padding-top: 28px;
  }

  .legal-record-note,
  .legal-sections,
  .license-list {
    grid-template-columns: 1fr;
  }

  .legal-record-note {
    margin-inline: 20px;
    padding: 24px;
  }

  .legal-record-note > p:last-child,
  .legal-sections > .legal-wide,
  .license-list article:last-child {
    grid-column: auto;
  }

  .legal-sections {
    margin-inline: 20px;
  }

  .legal-sections > section {
    padding: 28px 24px;
  }

  .legal-facts > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media print {
  .publication-status,
  .footer-meta nav,
  .legal-hero .back-button {
    display: none !important;
  }
}

/* Bloc M — une porte d’entrée, deux intentions et un repère permanent. */
html[data-page="home"] .site-header {
  grid-template-columns: 1fr auto;
}

html[data-page="home"] .site-nav {
  display: none;
}

html[data-page="home"] .method-button {
  grid-column: 2;
}

.home-gateway {
  min-height: calc(100svh - var(--header-height) - 38px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vh, 22px);
  padding: clamp(24px, 3.2vh, 34px) var(--gutter) clamp(16px, 2.2vh, 24px);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(83, 205, 212, 0.08) 72% 100%),
    var(--paper);
}

/* Ticket N7 — le paragraphe d'accroche flottait en haut à droite, séparé de son
   titre par plusieurs centaines de pixels et aligné sur une autre ligne de base :
   deux fragments d'une même idée aux deux extrémités de l'écran. Il passe sous le
   titre, dans la même colonne — ce qui libère la moitié droite pour la carte. */
.gateway-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vh, 22px);
  align-items: start;
  max-width: min(100%, 62%);
}

.gateway-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -6px;
}

.gateway-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(var(--fs-800),  5vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -0.062em;
  line-height: 0.92;
}

.gateway-title span {
  display: block;
  margin-top: 8px;
  color: var(--brand-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.7em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.gateway-intro {
  max-width: 560px;
  margin: 0 0 2px;
  color: #364257;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-300),  1.45vw, var(--fs-500));
  line-height: 1.48;
}

.gateway-doors {
  min-height: 375px;
  display: grid;
  grid-template-columns: minmax(300px, 0.76fr) minmax(560px, 1.24fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.gateway-door {
  min-width: 0;
}

.gateway-door-kicker {
  margin: 0;
  color: var(--brand-primary);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.gateway-door h2 {
  margin: 8px 0 12px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  3vw, var(--fs-800));
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.gateway-door p:not(.gateway-door-kicker) {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.5;
}

.gateway-door p strong {
  color: var(--ink);
}

.gateway-demonstration {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 42px) clamp(24px, 3.5vw, 54px) clamp(24px, 3vw, 42px) 0;
  border-right: 1px solid var(--line-strong);
}

.gateway-door-action {
  width: fit-content;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: clamp(26px, 4vh, 44px);
  padding: 0 18px;
  border: 0;
  /* Ticket N5 — le noir n'appartient à aucun jeton de la charte et faisait de
     cette porte la seule à attirer l'œil, alors que les deux sont annoncées
     comme équivalentes. */
  background: var(--brand-primary);
  color: white;
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gateway-door-action:hover {
  background: var(--brand-primary);
}

.gateway-territory {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(280px, 1.18fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: stretch;
  padding-left: clamp(24px, 3.5vw, 54px);
}

.gateway-territory-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 24px;
}

.gateway-territory .commune-search {
  margin-top: 24px;
}

.gateway-territory .commune-search.is-prominent .commune-search-field {
  min-height: 52px;
}

.gateway-territory .commune-search.is-prominent input {
  font-size: var(--fs-200);
}

.gateway-territory .commune-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ticket N6 — le halo circulaire vignetait la carte et la faisait lire comme une
   illustration décorative. C'est un contrôle : la porte d'entrée territoriale. */
.gateway-map {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.gateway-map > p {
  order: 2;
  margin: 6px 0 0;
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 700;
  text-align: center;
}

.gateway-map svg {
  order: 1;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.gateway-map .map-region {
  stroke-width: 1.6;
}

@supports selector(:has(*)) {
  .gateway-map:has(.map-region:hover, .map-region:focus-visible) .map-region.is-available:not(:hover):not(:focus-visible) {
    opacity: 0.24;
  }
}

.gateway-services {
  display: flex;
  gap: 28px;
  align-items: center;
}

.gateway-services button {
  min-height: 38px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
}

.gateway-services button:hover {
  border-bottom-color: var(--brand-primary);
  color: var(--brand-primary);
}

.site-orientation {
  position: sticky;
  z-index: 19;
  top: var(--axes-height, 44px);
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(360px, 1fr) auto;
  align-items: stretch;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(247, 248, 252, 0.96);
  backdrop-filter: blur(14px);
}

.site-orientation button {
  min-height: 58px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.site-orientation button:first-child {
  border-left: 1px solid var(--line);
}

.site-orientation button:hover,
.site-orientation button.is-active {
  background: white;
  color: var(--brand-primary);
}

.site-orientation button.is-active {
  box-shadow: inset 0 -3px var(--ep-turquoise);
}

.site-orientation .orientation-demonstration {
  display: grid;
  grid-template-columns: 86px auto auto minmax(90px, 1fr);
  gap: 12px;
  align-items: center;
  text-align: left;
}

.orientation-demonstration strong {
  color: var(--brand-primary);
  white-space: nowrap;
}

.orientation-demonstration small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-100);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orientation-line {
  position: relative;
  height: 2px;
  background: var(--line-strong);
}

.orientation-line::before {
  content: "";
  position: absolute;
  inset: -3px auto auto 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ep-turquoise);
}

.orientation-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--orientation-progress, 0%);
  background: var(--brand-primary);
}

.site-orientation .orientation-commune {
  align-self: center;
  min-height: 38px;
  margin-left: 12px;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
}

.site-orientation .orientation-commune:hover {
  background: var(--brand-primary);
  color: white;
}

.why-atlas {
  scroll-margin-top: 56px;
  padding-top: clamp(56px, 6vw, 70px);
  padding-bottom: clamp(56px, 6vw, 70px);
}

/* Ticket N3 — mesure du récit.
   L'unité ch mesure la largeur du zéro, plus large que la moyenne des lettres :
   68ch donnait 811 px, soit 83 caractères par ligne. Mesuré dans le Georgia du
   site, 640 px placent la ligne autour de 65 caractères — la cible est 62–70. */
.why-atlas-copy {
  width: min(100%, 640px);
}

.why-comparison {
  width: min(100%, 700px);
}

.why-atlas-copy {
  font-size: clamp(var(--fs-400),  1.35vw, var(--fs-500));
  line-height: 1.53;
}

.why-atlas-copy header {
  margin-bottom: 24px;
}

.why-atlas-copy h2 {
  font-size: clamp(var(--fs-800),  5vw, var(--fs-1000));
  line-height: 0.98;
}

.why-atlas-copy > p {
  margin-bottom: 16px;
}

.why-atlas-copy blockquote {
  margin: 24px 0;
  padding-left: 24px;
  font-size: clamp(var(--fs-600),  3.2vw, var(--fs-800));
  line-height: 1.16;
}

.why-inline-links {
  margin-top: -8px !important;
}

.why-ai {
  margin: 20px 0 22px;
  padding: 16px 16px;
}

.why-comparison {
  min-height: 0;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 24px 28px;
}

.why-place h3 {
  min-height: 0;
  font-size: var(--fs-500);
}

.why-place > strong {
  margin-top: 8px;
  font-size: clamp(var(--fs-800),  4vw, var(--fs-900));
}

.why-place > span {
  min-height: 0;
  margin-top: 5px;
}

.why-place small {
  margin-top: 8px;
}

.why-comparison figcaption {
  margin-top: 20px;
  padding-top: 16px;
  font-size: var(--fs-300);
  line-height: 1.45;
}

.why-comparison .why-source {
  margin-bottom: 0;
}

.why-observation {
  margin: 28px 0 24px;
  padding: 20px 24px;
}

.why-observation > p {
  margin-bottom: 12px;
}

.why-observation-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.5;
}

.why-observation-note summary {
  color: var(--brand-primary);
  cursor: pointer;
  font-weight: 800;
}

.why-observation-note p {
  margin: 12px 0 0;
  color: var(--muted);
}

.story-opening,
.story-chapter,
.territory-entry {
  scroll-margin-top: 56px;
}

@media (max-width: 1080px) {
  .home-gateway {
    min-height: 0;
    overflow: visible;
  }

  .gateway-heading {
    grid-template-columns: minmax(360px, 1fr) minmax(260px, 0.72fr);
    gap: 36px;
  }

  .gateway-doors {
    grid-template-columns: minmax(260px, 0.68fr) minmax(480px, 1.32fr);
  }

  .gateway-territory {
    grid-template-columns: minmax(220px, 0.9fr) minmax(250px, 1.1fr);
    gap: 16px;
  }

  .site-orientation {
    grid-template-columns: auto minmax(300px, 1fr) auto;
  }

  .site-orientation .orientation-demonstration {
    grid-template-columns: 50px auto auto;
  }

  .orientation-demonstration small {
    display: none;
  }
}

@media (max-width: 820px) {
  .home-gateway {
    display: block;
    padding-top: 40px;
  }

  .gateway-heading {
    display: block;
  }

  .gateway-title {
    margin-top: 16px;
  }

  .gateway-intro {
    margin-top: 24px;
  }

  .gateway-doors {
    display: block;
    margin-top: 32px;
  }

  .gateway-demonstration {
    min-height: 300px;
    padding: 36px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .gateway-territory {
    min-height: 620px;
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .gateway-territory-copy {
    padding: 36px 0 0;
  }

  .gateway-map {
    min-height: 360px;
  }

  .gateway-services {
    padding-block: 16px;
  }

  .site-orientation {
    grid-template-columns: minmax(76px, .75fr) minmax(150px, 1.5fr) minmax(96px, .9fr);
    padding: 0;
  }

  .site-orientation button {
    min-width: 0;
    padding: 0 8px;
    font-size: var(--fs-100);
    letter-spacing: 0.025em;
  }

  .site-orientation .orientation-demonstration {
    display: flex;
    justify-content: center;
    gap: 5px;
  }

  .orientation-line,
  .orientation-demonstration small {
    display: none;
  }

  .orientation-demonstration > span:nth-child(2) {
    font-size: 0;
  }

  .orientation-demonstration > span:nth-child(2)::after {
    content: "Démo";
    font-size: var(--fs-100);
  }

  .site-orientation .orientation-commune {
    align-self: stretch;
    min-height: 58px;
    margin-left: 0;
    border-width: 0 1px 0 0;
  }
}

@media (max-width: 540px) {
  html[data-page="home"] .method-button {
    display: block;
  }

  .gateway-title {
    font-size: clamp(var(--fs-800),  14vw, var(--fs-900));
  }

  .gateway-services {
    justify-content: space-between;
    gap: 16px;
  }

  .gateway-services button {
    font-size: var(--fs-100);
  }

  .gateway-territory {
    min-height: 670px;
  }

  .gateway-map svg {
    inset-inline: -7%;
    width: 114%;
  }

  .site-orientation button {
    font-size: var(--fs-100);
  }

  .site-orientation .orientation-demonstration strong {
    font-size: var(--fs-100);
  }

  .why-atlas {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media print {
  .site-orientation,
  .gateway-services {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Ticket O4 — plancher typographique.
   Trois passes d'audit, trois régressions sous 12 px : chaque nouveau
   composant en réintroduisait. Cette règle rend la régression impossible
   plutôt que détectable. Ne pas contourner sans motif écrit.
   ───────────────────────────────────────────────────────────────────────── */
:where(main, header, footer) * {
  font-size: max(12px, 1em);
}

/* ─────────────────────────────────────────────────────────────────────────
   Ticket O4 — plancher typographique : 12 px minimum.
   Trois passes d'audit, trois régressions : chaque nouveau composant
   réintroduisait du 11 px. Les déclarations ont été corrigées à la source.
   Une règle :where() ne suffit pas — sa spécificité nulle laisse gagner
   toute déclaration explicite. Vérification avant chaque livraison :
     grep -nE "font-size: ?(8|9|10|11)(\.[0-9]+)?px" styles.css
   doit ne rien retourner.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   Ticket Q6 — bandes de distribution (preuve 05).
   Deux départements de moyenne identique, sur un axe commun. La hauteur des
   barreaux est la part de population du département dans chaque tranche
   d'accès. Le trait plein marque la moyenne, le repère creux le premier
   décile pondéré par la population.
   ───────────────────────────────────────────────────────────────────────── */
.distribution-graphic {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 22px 20px 18px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.distribution-graphic figcaption {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.distribution-row {
  display: grid;
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.distribution-label {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 700;
  line-height: 1.25;
}

.distribution-label small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 400;
}

.distribution-track {
  position: relative;
  height: 62px;
  border-bottom: 1px solid var(--line-strong);
}

.distribution-track i {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  background: var(--brand-accent);
  opacity: 0.55;
}

.distribution-track b {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: 2px;
  height: 100%;
}

.distribution-mean { background: var(--ink); }

.distribution-d1 {
  background: transparent;
  border-left: 2px dotted var(--data-warm, #eb6834);
}

.distribution-track b span {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 0;
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--fs-100);
  font-weight: 700;
  transform: translateX(-50%);
}

/* Le premier décile et la moyenne peuvent être proches — c'est même le cas dans
   la Vienne, où les deux libellés se chevauchaient. On les sépare verticalement :
   la moyenne au-dessus de la bande, le décile en dessous. */
.distribution-d1 span {
  bottom: auto;
  top: calc(100% + 3px);
  color: var(--data-warm, #eb6834);
}

.distribution-row { margin-bottom: 16px; }
.distribution-row:last-of-type { margin-bottom: 4px; }

.distribution-axis {
  position: relative;
  height: 16px;
  margin-left: calc(min(132px, 30%) + 14px);
}

.distribution-axis span {
  position: absolute;
  left: var(--x);
  color: var(--muted);
  font-size: var(--fs-100);
  transform: translateX(-50%);
}

.distribution-axis-label,
.distribution-graphic > small {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.5;
}

@media (max-width: 680px) {
  .distribution-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .distribution-axis { margin-left: 0; }
}

/* Ticket O7 — aide clavier de la carte communale.
   Discrète à l'écran, toujours lue par les technologies d'assistance via
   aria-describedby, et mise en évidence quand la carte prend le focus. */
.commune-map-help {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.5;
  opacity: 0.72;
  transition: opacity var(--motion-fast, 120ms) ease;
}

.commune-map-canvas:focus-within .commune-map-help {
  opacity: 1;
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   Ticket Q6 — comparaison de forces (preuve 08).
   Une seule teinte : la longueur encode la force du lien, jamais son signe.
   Le signe est dans le texte, parce qu'il dépend du sens de l'indicateur
   et non de la direction du diagnostic.
   ───────────────────────────────────────────────────────────────────────── */
.strength-graphic {
  margin: 0;
  padding: 22px 20px 18px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.strength-graphic figcaption {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.strength-graphic ul {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strength-label {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 700;
  line-height: 1.3;
}

.strength-track {
  display: flex;
  align-items: center;
  gap: 8px;
}

.strength-track i {
  height: 10px;
  width: var(--w);
  min-width: 4px;
  background: var(--brand-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.strength-track b {
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.strength-reading {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.45;
}

.strength-axis {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--fs-100);
}

.strength-target {
  margin: 14px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 700;
  line-height: 1.45;
}

.strength-graphic > small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.5;
}

/* Ticket N3 — les renvois de chapitre, regroupés en fin d'introduction
   plutôt que semés dans le récit. */
.why-chapter-links {
  width: min(100%, 600px);
  margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
}

.why-chapter-links p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.why-chapter-links button {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ep-navy);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 700;
}

.why-chapter-links button:hover { border-bottom-color: var(--ep-navy); }

/* ─────────────────────────────────────────────────────────────────────────
   Ticket Q6 — paire d'effets (preuve 07).
   Deux panneaux, deux échelles. Jamais d'axe commun : les deux grandeurs ne
   sont pas comparables, et les superposer inventerait une comparaison que la
   méthode n'autorise pas.
   ───────────────────────────────────────────────────────────────────────── */
.effect-pair {
  display: grid;
  gap: 16px;
  padding: 22px 20px 18px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@media (min-width: 900px) {
  .effect-pair { grid-template-columns: 1fr 1fr; gap: 24px; }
  .effect-pair > small { grid-column: 1 / -1; }
}

.effect-pair figure { margin: 0; }

.effect-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 800;
}

.effect-question {
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.4;
}

.effect-verdict {
  margin: 0 0 12px;
  font-size: var(--fs-300);
  font-weight: 800;
}

.effect-verdict.is-interval { color: var(--muted); }
.effect-verdict.is-strength { color: var(--data-warm, #eb6834); }

.effect-plot {
  position: relative;
  height: 34px;
  border-bottom: 1px solid var(--line-strong);
}

.effect-plot i { position: absolute; }

.effect-zero {
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 1px;
  background: var(--line-strong);
}

.effect-range {
  top: 14px;
  left: var(--x);
  width: var(--w);
  height: 6px;
  background: var(--brand-accent);
  opacity: 0.42;
  border-radius: var(--radius-sm);
}

.effect-point {
  top: 11px;
  left: var(--x);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--brand-primary);
  border-radius: 50%;
}

.effect-bar {
  bottom: 0;
  left: 0;
  width: var(--w);
  height: 14px;
  background: var(--data-warm, #eb6834);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.effect-axis {
  position: relative;
  height: 16px;
  margin-top: 3px;
}

.effect-axis span {
  position: absolute;
  left: var(--x);
  color: var(--muted);
  font-size: var(--fs-100);
  transform: translateX(-50%);
}

.effect-unit {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.45;
}

.effect-reading {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: var(--fs-100);
  line-height: 1.5;
}

.effect-pair > small {
  color: var(--muted);
  font-size: var(--fs-100);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────
   Tickets N5 / N6 — équilibre des deux portes et carte-contrôle.
   ───────────────────────────────────────────────────────────────────────── */

/* Le bouton et le champ de recherche prennent le même poids : les deux portes
   sont annoncées comme équivalentes, elles doivent le paraître. */
.gateway-door-action { min-height: 58px; }

/* Isolement au survol — ticket J6 appliqué à la carte d'accueil, qui en avait
   le plus besoin : c'est ainsi qu'elle se découvre cliquable. */
.gateway-map:has(.map-region.is-available:hover) .map-region.is-available:not(:hover),
.gateway-map:has(.map-region.is-available:focus-visible) .map-region.is-available:not(:focus-visible) {
  opacity: 0.5;
  transition: opacity var(--dur-1) var(--ease-out);
}

/* Ticket O3 — la carte est un composant d'interface : ses aplats sont à
   1,63–2,10:1 contre le fond, sous les 3:1 exigés. Un contour extérieur porte
   le contraste sans assombrir les régions. */
.gateway-map svg .map-region { stroke: var(--paper-bright); stroke-width: 1.6; }
.gateway-map svg .map-region.is-available { stroke: var(--brand-primary); stroke-width: 0.8; }

@media (max-width: 980px) {
  .gateway-heading { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Passage UX/UI — un atlas éditorial vivant.
   Les mouvements indiquent une entrée, une sélection ou un changement de
   lecture. Ils restent courts, réversibles et sont neutralisés plus bas par
   la préférence système « réduire les animations ».
   ───────────────────────────────────────────────────────────────────────── */

/* Le titre et son explication restent solidaires sur les petits desktops.
   Une ancienne règle 821–1080 px renvoyait le paragraphe seul à droite. */
@media (max-width: 1080px) {
  .gateway-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 1.6vh, 22px);
    max-width: min(100%, 720px);
  }
}

/* Deux portes sans effet de « cartes » : une ligne d’encre révèle l’intention
   active et le fond papier gagne juste assez de profondeur pour répondre. */
.gateway-door {
  position: relative;
  transition: background-color var(--dur-2) var(--ease-io);
}

.gateway-door::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--brand-focus);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}

.gateway-door:hover,
.gateway-door:focus-within {
  background: rgba(255, 255, 255, 0.52);
}

.gateway-door:hover::before,
.gateway-door:focus-within::before {
  transform: scaleX(1);
}

.gateway-door-action {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 102, 168, 0.14);
  transition: background-color var(--dur-2) var(--ease-io),
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.gateway-door-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.16);
  transform: translateX(-105%);
  transition: transform var(--dur-3) var(--ease-out);
}

.gateway-door-action .gateway-door-choice-label,
.gateway-door-action {
  isolation: isolate;
}

.gateway-door-action:hover {
  box-shadow: 0 16px 32px rgba(0, 102, 168, 0.2);
  transform: translateY(-2px);
}

.gateway-door-action:hover::before {
  transform: translateX(0);
}

.gateway-door-action .gateway-door-choice-label i {
  transition: transform var(--dur-2) var(--ease-out);
}

.gateway-door-action:hover .gateway-door-choice-label i {
  transform: translateY(3px);
}

.gateway-territory .commune-search-field {
  transition: border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.gateway-territory .commune-search:focus-within .commune-search-field {
  border-color: var(--brand-primary);
  box-shadow: 0 12px 30px rgba(0, 102, 168, 0.13);
  transform: translateY(-2px);
}

/* La France se construit région par région, puis chaque forme se soulève
   légèrement au survol. Le contour reste le vrai signal d’interactivité. */
.gateway-map svg {
  transition: filter var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}

.gateway-map:hover svg,
.gateway-map:focus-within svg {
  filter: drop-shadow(0 15px 22px rgba(0, 102, 168, 0.1));
  transform: translateY(-2px);
}

.gateway-map .map-region {
  transition: fill var(--dur-2) var(--ease-out),
    filter var(--dur-2) var(--ease-out),
    opacity var(--dur-2) var(--ease-out),
    stroke-width var(--dur-1) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.gateway-map .map-region.is-available:hover,
.gateway-map .map-region.is-available:focus-visible {
  transform: translateY(-4px) scale(1.025);
}

/* Le fil de lecture devient un objet vivant : le point suit réellement la
   progression au lieu de laisser une simple barre se remplir. */
.orientation-line i {
  transition: width var(--dur-3) var(--ease-out);
}

.orientation-line i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--paper-bright);
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(0, 102, 168, 0.2);
  transform: translateY(-50%);
}

/* Chaque preuve est un chapitre, pas une carte. Le numéro fantôme et le trait
   vertical donnent une cadence au long scroll sans ajouter de chrome. */
.national-evidence {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.chapter-ghost-number {
  position: absolute;
  z-index: 0;
  top: clamp(22px, 5vw, 72px);
  left: calc(var(--gutter) - 0.08em);
  color: var(--brand-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-1000),  19vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -0.09em;
  line-height: 0.72;
  opacity: 0.045;
  pointer-events: none;
}

.national-evidence > :not(.chapter-ghost-number) {
  position: relative;
  z-index: 1;
}

.evidence-panel {
  position: relative;
}

.evidence-panel::before {
  content: "";
  position: absolute;
  top: clamp(34px, 5vw, 76px);
  bottom: clamp(34px, 5vw, 76px);
  left: -2px;
  width: 3px;
  background: var(--brand-focus);
  transform: scaleY(0.16);
  transform-origin: top;
  transition: transform 700ms var(--ease-out);
}

.national-evidence:hover .evidence-panel::before,
.evidence-panel:focus-within::before {
  transform: scaleY(1);
}

.evidence-details summary {
  transition: color var(--dur-2) var(--ease-out),
    padding-left var(--dur-2) var(--ease-out);
}

.evidence-details summary:hover {
  color: var(--brand-primary);
  padding-left: 8px;
}

.evidence-details-chevron {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-out);
}

.evidence-details[open] .evidence-details-chevron {
  transform: rotate(180deg);
}

.evidence-details[open] > :not(summary) {
  animation: evidence-detail-in var(--dur-3) var(--ease-out) both;
}

@keyframes evidence-detail-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Les chiffres régionaux répondent comme des repères de lecture, sans devenir
   quatre cartes flottantes. */
.kpi-item {
  position: relative;
  transition: background-color var(--dur-2) var(--ease-io);
}

.kpi-item::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--brand-focus);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}

.kpi-item:hover,
.kpi-item:focus-within {
  background: rgba(83, 205, 212, 0.055);
}

.kpi-item:hover::before,
.kpi-item:focus-within::before {
  transform: scaleX(1);
}

.kpi-value {
  transition: color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.kpi-item:hover .kpi-value,
.kpi-item:focus-within .kpi-value {
  color: var(--brand-primary);
  transform: translateY(-4px);
}

/* Sur les cartes régionales, une sélection garde son sérieux mais acquiert une
   vraie sensation de couche cartographique manipulable. */
.hero-data-shape {
  transform-box: fill-box;
  transform-origin: center;
  transition: fill var(--dur-2) var(--ease-io),
    stroke var(--dur-1) var(--ease-out),
    stroke-width var(--dur-1) var(--ease-out),
    filter var(--dur-2) var(--ease-out),
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.hero-data-shape:hover,
.hero-data-shape:focus-visible {
  transform: translateY(-3px) scale(1.018);
}

.hero-map-readout.is-refreshing > * {
  animation: map-readout-in 220ms var(--ease-out) both;
}

.hero-map-readout.is-refreshing > *:nth-child(2) { animation-delay: 15ms; }
.hero-map-readout.is-refreshing > *:nth-child(3) { animation-delay: 30ms; }
.hero-map-readout.is-refreshing > *:nth-child(n + 4) { animation-delay: 45ms; }

@keyframes map-readout-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-page="home"] .gateway-heading .eyebrow,
  html[data-page="home"] .gateway-title,
  html[data-page="home"] .gateway-intro,
  html[data-page="home"] .gateway-doors,
  html[data-page="home"] .gateway-scope,
  html[data-page="home"] .gateway-services {
    animation: gateway-arrive 680ms var(--ease-out) both;
  }

  html[data-page="home"] .gateway-heading .eyebrow { animation-delay: 30ms; }
  html[data-page="home"] .gateway-title { animation-delay: 90ms; }
  html[data-page="home"] .gateway-intro { animation-delay: 160ms; }
  html[data-page="home"] .gateway-doors { animation-delay: 230ms; }
  html[data-page="home"] .gateway-scope { animation-delay: 310ms; }
  html[data-page="home"] .gateway-services { animation-delay: 350ms; }

  .gateway-map .map-region.is-available {
    animation-duration: 620ms;
    animation-delay: calc(300ms + var(--region-order, 0) * 28ms);
  }

  .chapter-copy.reveal.is-reveal-ready {
    transform: translate3d(-24px, var(--rise), 0);
  }

  .evidence-panel.reveal.is-reveal-ready {
    transform: translate3d(24px, var(--rise), 0);
  }

  .chapter-copy.reveal.is-reveal-ready.is-visible,
  .evidence-panel.reveal.is-reveal-ready.is-visible {
    transform: translate3d(0, 0, 0);
  }

  @supports (animation-timeline: view()) {
    .chapter-copy.reveal.is-reveal-ready {
      animation-name: chapter-copy-in;
    }

    .evidence-panel.reveal.is-reveal-ready {
      animation-name: evidence-panel-in;
    }
  }
}

@keyframes gateway-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chapter-copy-in {
  from { opacity: 0; transform: translate3d(-24px, var(--rise), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes evidence-panel-in {
  from { opacity: 0; transform: translate3d(24px, var(--rise), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 820px) {
  .home-gateway {
    background: var(--paper);
  }

  .gateway-door:hover,
  .gateway-door:focus-within {
    background: transparent;
  }

  .chapter-ghost-number {
    top: 42px;
    right: var(--gutter);
    left: auto;
    font-size: clamp(var(--fs-1000),  36vw, var(--fs-1000));
    opacity: 0.035;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .chapter-copy.reveal.is-reveal-ready,
  .evidence-panel.reveal.is-reveal-ready {
    transform: translate3d(0, var(--rise), 0);
  }

  .chapter-copy.reveal.is-reveal-ready.is-visible,
  .evidence-panel.reveal.is-reveal-ready.is-visible {
    transform: translate3d(0, 0, 0);
  }

  @supports (animation-timeline: view()) {
    .chapter-copy.reveal.is-reveal-ready,
    .evidence-panel.reveal.is-reveal-ready {
      animation-name: reveal-in;
    }
  }
}

@media (max-width: 540px) {
  html[data-page="home"] .method-button {
    min-width: 160px;
    white-space: nowrap;
  }

  .gateway-map {
    overflow: clip;
  }

  .gateway-map svg {
    inset-inline: 0;
    width: 100%;
  }
}

/* L'observation personnelle appartient au récit. Elle reprend donc son papier,
   ses règles et sa typographie, sans effet de fiche rapportée. */
.why-observation {
  position: relative;
  margin: 34px 0 28px;
  padding: 22px 0 20px 30px;
  border-top: 1px solid var(--line-strong);
  border-right: 0;
  border-bottom: 1px solid var(--line-strong);
  border-left: 0;
  background: transparent;
}

.why-observation::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 20px;
  left: 0;
  width: 2px;
  background: var(--brand-primary);
}

.why-observation-label {
  color: var(--brand-primary);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.why-observation > p:nth-of-type(2) {
  max-width: 660px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-300),  1.55vw, var(--fs-500));
  line-height: 1.48;
}

.why-observation-note {
  border-top-color: var(--line-strong);
}

.why-observation-note summary {
  width: fit-content;
  color: var(--brand-primary);
}

.why-observation-bridge {
  max-width: 660px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.why-observation-bridge button {
  color: var(--brand-primary);
}

/* Une seule porte cartographique remplace la mosaïque de régions. La carte
   demeure le contrôle principal ; le texte à gauche n'est qu'un mode d'emploi
   et un retour de sélection. */
.territory-map-stage {
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(270px, .68fr) minmax(520px, 1.32fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.territory-map-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 4vw, 58px) clamp(30px, 4vw, 60px) clamp(32px, 4vw, 48px) 0;
  border-right: 1px solid var(--line-strong);
}

.territory-map-kicker,
.territory-map-readout > span {
  margin: 0;
  color: var(--brand-primary);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.territory-map-readout {
  margin-block: auto;
  padding-block: clamp(34px, 5vw, 70px);
}

.territory-map-readout > strong {
  display: block;
  max-width: 420px;
  margin-top: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-700),  4.3vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .98;
}

.territory-map-readout > p {
  max-width: 430px;
  min-height: 74px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.55;
}

.territory-map-readout > p strong {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  font-weight: 400;
}

.territory-map-readout > p strong.is-negative { color: #9a3c24; }
.territory-map-readout > p strong.is-positive { color: #245f93; }

.territory-commune-link {
  width: fit-content;
  min-height: 44px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  text-align: left;
}

.territory-commune-link span {
  display: inline-block;
  margin-left: 8px;
  transition: transform var(--dur-2) var(--ease-out);
}

.territory-commune-link:hover span,
.territory-commune-link:focus-visible span {
  transform: translateY(-4px);
}

.territory-map.gateway-map {
  min-height: 640px;
  padding: 24px clamp(10px, 2vw, 30px) 16px clamp(30px, 4vw, 60px);
}

.territory-map.gateway-map > p {
  margin-top: -2px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .04em;
}

.territory-map.gateway-map svg {
  max-height: 580px;
}

@media (max-width: 980px) {
  .territory-map-stage {
    grid-template-columns: minmax(230px, .65fr) minmax(430px, 1.35fr);
  }
}

@media (max-width: 820px) {
  .why-observation {
    padding-left: 24px;
  }

  .territory-entry-heading {
    margin-bottom: 48px;
  }

  .territory-map-stage {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .territory-map-copy {
    min-height: 330px;
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .territory-map-readout {
    padding-block: 32px;
  }

  .territory-map-readout > p {
    min-height: 0;
  }

  .territory-map.gateway-map {
    min-height: 470px;
    padding: 26px 0 12px;
  }

  .territory-map.gateway-map svg {
    max-height: 420px;
  }
}

/* Preuve 01 : les deux refus installent le constat, puis le rendez-vous obtenu
   arrive à droite comme l'issue minoritaire. */
.evidence-availability .ratio-graphic > div.is-active {
  position: relative;
  isolation: isolate;
}

.evidence-availability .ratio-graphic > div.is-active::after {
  content: "1 sur 3";
  position: absolute;
  top: 20px;
  right: 20px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Preuve 03 : les deux interprétations ne sont plus une note de bas de page,
   mais le point de prudence central du résultat. */
.evidence-two-readings {
  width: 100%;
  max-width: 760px;
  margin-top: 24px;
  border-top: 2px solid var(--brand-primary);
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--brand-primary) 3%, var(--paper-bright));
}

.evidence-two-readings-heading {
  display: grid;
  grid-template-columns: minmax(110px, .36fr) 1fr;
  gap: 20px;
  align-items: baseline;
  margin: 0;
  padding: 17px 20px 15px;
  border-bottom: 1px solid var(--line-strong);
}

.evidence-two-readings-heading span {
  color: var(--brand-primary);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.evidence-two-readings-heading strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2vw, var(--fs-600));
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.evidence-two-readings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.evidence-two-readings-grid article {
  position: relative;
  min-height: 162px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px 14px;
  align-content: start;
  padding: 22px 20px 24px;
}

.evidence-two-readings-grid article + article {
  border-left: 1px solid var(--line-strong);
}

.evidence-two-readings-grid article::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--data-cool);
  transform: scaleX(.22);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}

.evidence-two-readings-grid article + article::before {
  background: var(--data-warm);
}

.evidence-two-readings-grid article:hover::before {
  transform: scaleX(1);
}

.evidence-two-readings-grid article > span {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand-primary);
  border-radius: 50%;
  color: var(--brand-primary);
  font-size: var(--fs-100);
  font-weight: 800;
}

.evidence-two-readings-grid article > strong {
  font-size: var(--fs-200);
  line-height: 1.35;
}

.evidence-two-readings-grid article > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.5;
}

.evidence-two-readings > small {
  display: block;
  padding: 13px 20px 15px;
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  line-height: 1.45;
}

/* Le chiffre de la preuve sociale est une notion, pas un score : on lui donne
   une taille éditoriale qui reste lisible sans dominer toute la page. */
.evidence-social .evidence-main-value {
  max-width: 660px;
  font-size: clamp(var(--fs-800),  4.8vw, var(--fs-1000));
}

@media (prefers-reduced-motion: no-preference) {
  .evidence-availability .evidence-panel.is-visible .ratio-graphic > div {
    animation: ratio-slot-in 460ms var(--ease-out) both;
  }

  .evidence-availability .evidence-panel.is-visible .ratio-graphic > div:nth-child(2) { animation-delay: 70ms; }
  .evidence-availability .evidence-panel.is-visible .ratio-graphic > div:nth-child(3) { animation-delay: 160ms; }

  .evidence-availability .ratio-graphic > div.is-active:hover i::before {
    display: inline-block;
    animation: phone-answer 420ms var(--ease-out);
  }

  .trajectory-map-selected-value.is-updating strong {
    animation: trajectory-value-pop 320ms var(--ease-out) both;
  }

  @supports (animation-timeline: view()) {
    .evidence-availability .ratio-graphic > div {
      animation: ratio-slot-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 27%;
    }

    .evidence-availability .ratio-graphic > div:nth-child(2) {
      animation-range: entry 9% cover 29%;
    }

    .evidence-availability .ratio-graphic > div:nth-child(3) {
      animation-range: entry 14% cover 32%;
    }
  }
}

@keyframes ratio-slot-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes phone-answer {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-8deg) translateY(-2px); }
  65% { transform: rotate(7deg) translateY(-2px); }
}

@keyframes trajectory-value-pop {
  from { opacity: .55; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
  .evidence-two-readings-heading {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .evidence-two-readings-grid {
    grid-template-columns: 1fr;
  }

  .evidence-two-readings-grid article {
    min-height: 0;
  }

  .evidence-two-readings-grid article + article {
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }

  .evidence-social .evidence-main-value {
    font-size: clamp(var(--fs-800),  13vw, var(--fs-1000));
  }
}

@media (prefers-reduced-motion: reduce) {
  .gateway-door-action:hover,
  .gateway-territory .commune-search:focus-within .commune-search-field,
  .gateway-map:hover svg,
  .gateway-map:focus-within svg,
  .gateway-map .map-region.is-available:hover,
  .gateway-map .map-region.is-available:focus-visible,
  .kpi-item:hover .kpi-value,
  .kpi-item:focus-within .kpi-value,
  .hero-data-shape:hover,
  .hero-data-shape:focus-visible {
    transform: none !important;
  }

  .evidence-panel::before {
    transform: scaleY(1);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Sommaire persistant — la démonstration longue devient directement navigable.
   ───────────────────────────────────────────────────────────────────────── */
.site-orientation {
  min-height: 76px;
  grid-template-columns: auto minmax(480px, 1fr) auto auto;
}

.site-orientation button {
  min-height: 76px;
}

.site-orientation .orientation-demonstration {
  grid-template-columns: 92px minmax(112px, auto) auto minmax(170px, 1fr);
  gap: 16px;
  padding-inline: 24px;
}

.orientation-summary-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--brand-primary);
  line-height: 1;
}

.orientation-summary-label b {
  font-size: var(--fs-100);
  letter-spacing: .08em;
}

.orientation-summary-label small {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: none;
}

.orientation-current {
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.orientation-current small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-100);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orientation-current i {
  color: var(--brand-primary);
  font-size: var(--fs-400);
  font-style: normal;
  transition: transform var(--dur-2) var(--ease-out);
}

.site-orientation.is-toc-open .orientation-current i {
  transform: rotate(180deg);
}

.site-orientation .orientation-indicators {
  border-left: 1px solid var(--line);
}

.site-orientation.is-toc-open::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: calc(var(--axes-height, 44px) + var(--orientation-height, 78px)) 0 0;
  background: rgba(10, 23, 45, .34);
  backdrop-filter: blur(2px);
}

.story-toc {
  position: absolute;
  z-index: 2;
  top: calc(100% + 1px);
  right: var(--gutter);
  left: var(--gutter);
  padding: 26px 30px 30px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--ep-turquoise);
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 28px 70px rgba(10, 23, 45, .22);
}

.story-toc-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
}

.story-toc-heading > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.story-toc-heading span {
  color: var(--brand-primary);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.story-toc-heading strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
  font-weight: 400;
}

.story-toc .story-toc-heading button {
  min-height: 36px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  font-size: var(--fs-100);
}

.story-toc ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 18px 0 0;
  list-style: none;
}

.story-toc li {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.story-toc li:nth-child(5n),
.story-toc li:last-child {
  border-right: 0;
}

.story-toc li:nth-child(n + 6) {
  border-bottom: 0;
}

.story-toc li button {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-content: center;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-transform: none;
}

.story-toc li button > span {
  color: var(--brand-primary);
  font-size: var(--fs-100);
  font-weight: 800;
}

.story-toc li button > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.story-toc li button:hover,
.story-toc li button.is-active {
  background: var(--surface-tint);
  box-shadow: inset 3px 0 var(--ep-turquoise);
  color: var(--brand-primary);
}

.story-opening,
.story-chapter,
.why-atlas,
.indicator-explorer,
.territory-entry {
  scroll-margin-top: 76px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Explorateur d'indicateurs — une question, un classement, une fiche à ouvrir.
   ───────────────────────────────────────────────────────────────────────── */
.indicator-explorer {
  padding: clamp(78px, 8vw, 128px) var(--gutter);
  background: #0d1a30;
  color: #f7f9fc;
}

.indicator-explorer-intro {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr);
  column-gap: clamp(42px, 8vw, 128px);
  row-gap: 16px;
  align-items: end;
  padding-bottom: clamp(32px, 4vw, 48px);
}

.indicator-explorer-intro .section-label {
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: var(--ep-turquoise);
}

.indicator-explorer-intro h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-800),  5vw, var(--fs-1000));
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .98;
}

.indicator-explorer-intro > p:last-child {
  max-width: 660px;
  margin: 0;
  color: #b9c5d9;
  font-size: clamp(var(--fs-300),  1.5vw, var(--fs-500));
  line-height: 1.55;
}

.indicator-explorer-workspace {
  display: grid;
  grid-template-columns: minmax(250px, .35fr) minmax(560px, 1fr);
  gap: clamp(34px, 6vw, 90px);
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.indicator-explorer-controls {
  min-width: 0;
  align-self: start;
  position: sticky;
  top: 110px;
}

.indicator-tabs {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.indicator-results {
  min-width: 0;
}

.indicator-tabs button {
  min-height: 58px;
  padding: 0 28px 0 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: #aebbd0;
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
  text-align: left;
  transition: color var(--dur-2) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}

.indicator-tabs button:hover,
.indicator-tabs button.is-active {
  padding-left: 16px;
  color: white;
}

.indicator-tabs button.is-active {
  box-shadow: inset 3px 0 var(--ep-turquoise);
}

.indicator-region-filter {
  display: grid;
  gap: 8px;
  margin-top: 32px;
}

.indicator-region-filter span {
  color: #8fa0ba;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.indicator-region-filter select {
  width: 100%;
  min-height: 46px;
  padding: 0 38px 0 13px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  background: #13243f;
  color: white;
  font: inherit;
}

.indicator-results-heading {
  display: grid;
  grid-template-columns: minmax(180px, .35fr) 1fr;
  gap: 8px 30px;
  align-items: baseline;
  padding-bottom: 24px;
}

.indicator-results-heading p {
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--ep-turquoise);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.indicator-results-heading h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  2.8vw, var(--fs-800));
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.12;
}

.indicator-results-heading > span {
  color: #9faec5;
  font-size: var(--fs-100);
  line-height: 1.5;
}

.indicator-ranking {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
  list-style: none;
}

.indicator-ranking li {
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}

.indicator-ranking button {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(190px, 1fr) minmax(120px, auto) 64px;
  gap: 16px;
  align-items: center;
  padding: 12px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-2) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}

.indicator-ranking button:hover,
.indicator-ranking button:focus-visible {
  padding-left: 16px;
  background: rgba(255, 255, 255, .065);
}

.indicator-rank {
  color: var(--ep-turquoise);
  font-size: var(--fs-100);
  font-weight: 800;
}

.indicator-place {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.indicator-place strong {
  overflow: hidden;
  font-size: var(--fs-200);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.indicator-place small {
  overflow: hidden;
  color: #91a1ba;
  font-size: var(--fs-100);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.indicator-ranking b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2.2vw, var(--fs-700));
  font-weight: 400;
  white-space: nowrap;
}

.indicator-open-label {
  color: #aebbd0;
  font-size: var(--fs-100);
  font-weight: 800;
  text-align: right;
}

.indicator-open-label i {
  color: var(--ep-turquoise);
  font-size: var(--fs-300);
  font-style: normal;
}

.indicator-results-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}

.indicator-results-note p {
  max-width: 660px;
  margin: 0;
  color: #9faec5;
  font-size: var(--fs-100);
  line-height: 1.55;
}

.indicator-results-note .metric-source-button {
  border-color: rgba(255, 255, 255, .24);
  color: white;
}

.department-focus-metrics {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .site-orientation {
    grid-template-columns: auto minmax(300px, 1fr) auto auto;
  }

  .site-orientation .orientation-demonstration {
    grid-template-columns: 58px minmax(106px, auto) auto;
    gap: 12px;
  }

  .orientation-current {
    display: none;
  }

  .orientation-demonstration .orientation-summary-label small {
    display: block;
  }

  .story-toc ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-toc li,
  .story-toc li:nth-child(5n) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .story-toc li:nth-child(3n),
  .story-toc li:last-child {
    border-right: 0;
  }

  .story-toc li:nth-child(n + 7) {
    border-bottom: 0;
  }

  .indicator-explorer-workspace {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 40px;
  }

  .indicator-results-heading {
    grid-template-columns: 1fr;
  }

  .indicator-results-heading p {
    grid-row: auto;
  }
}

@media (max-width: 820px) {
  /* Les tickets S6/S7 ont vidé cette barre de ses entrées d'axe : elle ne porte
     plus que le sommaire de la démonstration. La grille à trois colonnes et la
     règle « masquer le premier bouton » dataient d'avant — la seconde effaçait
     donc le seul bouton restant, ne laissant sur mobile qu'un bandeau vide de
     64 px au-dessus de trente-quatre écrans de démonstration. */
  .site-orientation {
    min-height: 64px;
    grid-template-columns: 1fr;
  }


  .site-orientation button {
    min-height: 64px;
  }

  .site-orientation .orientation-demonstration {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: stretch;
    padding-inline: 16px;
  }

  .site-orientation .orientation-line,
  .site-orientation .orientation-current {
    display: none;
  }

  .orientation-demonstration > .orientation-summary-label {
    display: flex;
    font-size: inherit;
  }

  .orientation-demonstration > .orientation-summary-label::after {
    content: none;
  }

  .orientation-demonstration .orientation-summary-label small {
    display: none;
  }

  .site-orientation .orientation-commune {
    min-height: 64px;
  }

  .site-orientation.is-toc-open::after {
    inset: calc(var(--axes-height, 44px) + var(--orientation-height, 64px)) 0 0;
  }

  .story-toc {
    right: 0;
    left: 0;
    max-height: calc(100svh - 64px);
    overflow-y: auto;
    padding: 22px 20px 26px;
  }

  .story-toc ol {
    grid-template-columns: 1fr 1fr;
  }

  .story-toc li,
  .story-toc li:nth-child(3n),
  .story-toc li:nth-child(5n) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .story-toc li:nth-child(2n) {
    border-right: 0;
  }

  .story-toc li:nth-child(n + 9) {
    border-bottom: 0;
  }

  .story-toc li button {
    min-height: 78px;
    padding: 12px;
  }

  .story-opening,
  .story-chapter,
  .why-atlas,
  .indicator-explorer,
  .territory-entry {
    scroll-margin-top: 64px;
  }

  .indicator-explorer {
    padding-inline: 20px;
  }

  .indicator-explorer-intro,
  .indicator-explorer-workspace {
    grid-template-columns: 1fr;
  }

  .indicator-explorer-intro {
    gap: 24px;
  }

  .indicator-explorer-intro .section-label {
    margin-bottom: 0;
  }

  .indicator-explorer-controls {
    position: static;
  }

  .indicator-tabs {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .indicator-tabs button {
    min-width: 170px;
    padding: 0 16px;
    border-right: 1px solid rgba(255, 255, 255, .16);
  }

  .indicator-tabs button:hover,
  .indicator-tabs button.is-active {
    padding-left: 16px;
    box-shadow: inset 0 -3px var(--ep-turquoise);
  }

  .indicator-region-filter {
    margin-top: 20px;
  }

  .indicator-results-heading {
    padding-top: 12px;
  }

  .indicator-ranking button {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .indicator-open-label {
    display: none;
  }

  .indicator-results-note {
    grid-template-columns: 1fr;
  }

  .indicator-results-note .metric-source-button {
    justify-self: start;
  }

  .department-focus-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .department-focus-metrics div {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }

  .department-focus-metrics div:nth-child(2n) {
    border-right: 0;
  }

  .department-focus-metrics div:nth-child(n + 3) {
    border-bottom: 0;
  }
}

@media (max-width: 430px) {
  .site-orientation {
    grid-template-columns: 1fr;
  }

  .site-orientation .orientation-indicators {
    font-size: var(--fs-100);
  }

  .site-orientation .orientation-indicators::after {
    content: none;
  }

  .story-toc-heading > div {
    display: grid;
    gap: 3px;
  }

  .story-toc-heading strong {
    font-size: var(--fs-500);
  }

  .story-toc ol {
    grid-template-columns: 1fr;
  }

  .story-toc li,
  .story-toc li:nth-child(2n),
  .story-toc li:nth-child(3n),
  .story-toc li:nth-child(5n),
  .story-toc li:nth-child(n + 9) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .story-toc li:last-child {
    border-bottom: 0;
  }

  .story-toc li button {
    min-height: 64px;
  }

  .indicator-tabs {
    overflow-x: visible;
  }

  .indicator-tabs button {
    min-width: 0;
    min-height: 76px;
    flex: 1 1 0;
    padding-inline: 8px;
    font-size: var(--fs-100);
    line-height: 1.25;
    text-align: center;
  }

  .indicator-tabs button:hover,
  .indicator-tabs button.is-active {
    padding-left: 8px;
  }

  .indicator-ranking button {
    min-height: 82px;
  }

  .indicator-ranking b {
    font-size: var(--fs-500);
  }
}

/* Portraits régionaux — composition éditoriale continue, sans grille de cartes. */
.regional-analysis {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--accent) 10%, transparent) 0, transparent 28%),
    var(--paper);
}

.regional-analysis::before {
  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0 15%, var(--line) 15% 100%);
  content: "";
}

.regional-analysis-heading {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr);
  gap: clamp(44px, 8vw, 138px);
  align-items: start;
  margin-bottom: clamp(72px, 10vw, 132px);
}

.regional-analysis-kicker {
  position: sticky;
  top: 126px;
}

.regional-analysis-kicker span {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
}

.regional-analysis-lead {
  max-width: 1040px;
}

.regional-analysis-lead > h2 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(var(--fs-800),  6.1vw, var(--fs-1000));
  font-weight: 600;
  letter-spacing: -.062em;
  line-height: .94;
  text-wrap: balance;
}

.regional-signature {
  max-width: 820px;
  margin: 38px 0 0;
  color: #34413c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-500),  2.1vw, var(--fs-700));
  line-height: 1.38;
}

.regional-national-comparison {
  display: grid;
  grid-template-columns: minmax(145px, .36fr) minmax(0, 1fr);
  gap: 16px 42px;
  max-width: 850px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}

.regional-national-comparison > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.55;
}

.regional-analysis-label {
  color: var(--accent) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--fs-100) !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

.regional-national-comparison .regional-analysis-sources {
  grid-column: 2;
}

.regional-analysis-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
}

.regional-analysis-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(310px, .58fr);
  gap: clamp(52px, 8vw, 126px);
  align-items: start;
}

.regional-synthesis {
  border-top: 1px solid var(--line-strong);
}

.regional-synthesis-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 24px;
  padding: clamp(36px, 5vw, 58px) 0;
  border-bottom: 1px solid var(--line);
}

.regional-synthesis-index {
  padding-top: 3px;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
}

.regional-synthesis-row h3 {
  max-width: 660px;
  margin: 9px 0 16px;
  font-size: clamp(var(--fs-600),  2.25vw, var(--fs-700));
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.regional-synthesis-row > div > p:not(.regional-analysis-label) {
  max-width: 750px;
  margin: 0;
  color: #485651;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400);
  line-height: 1.62;
}

.regional-markers {
  position: sticky;
  top: 126px;
  padding-top: 3px;
}

.regional-markers-heading {
  margin-bottom: 32px;
}

.regional-markers-heading h3 {
  margin: 12px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-600),  2.25vw, var(--fs-700));
  font-weight: 400;
  line-height: 1.12;
}

.regional-marker-list {
  border-top: 1px solid var(--line-strong);
}

.regional-marker {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.regional-marker > span {
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
}

.regional-marker h4 {
  margin: 0 0 9px;
  font-size: var(--fs-300);
  line-height: 1.32;
}

.regional-marker p {
  margin: 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  line-height: 1.5;
}

.regional-marker .regional-analysis-sources {
  gap: 8px;
  margin-top: 12px;
}

.regional-marker .metric-source-button span:last-child {
  display: none;
}

.regional-marker-link {
  min-height: 44px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--brand-primary);
  cursor: pointer;
  font-size: var(--fs-100);
  font-weight: 800;
}

.regional-marker-link span {
  display: inline-block;
  margin-left: 8px;
  transition: transform var(--dur-2) var(--ease-out);
}

.regional-marker-link:hover span,
.regional-marker-link:focus-visible span {
  transform: translateY(4px);
}

.regional-analysis-details {
  margin-top: clamp(64px, 9vw, 126px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.regional-analysis-details summary {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  font-size: var(--fs-200);
  font-weight: 800;
  list-style: none;
}

.regional-analysis-details summary::-webkit-details-marker {
  display: none;
}

.regional-analysis-details summary span:last-child {
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
  font-weight: 400;
  transition: transform var(--dur-2) var(--ease-out);
}

.regional-analysis-details[open] summary span:last-child {
  transform: rotate(45deg);
}

.regional-discussion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.regional-discussion article {
  min-height: 230px;
  padding: 34px clamp(22px, 3vw, 44px) 40px;
  border-right: 1px solid var(--line);
}

.regional-discussion article:last-child {
  border-right: 0;
}

.regional-discussion h3 {
  margin: 12px 0 18px;
  font-size: var(--fs-500);
  letter-spacing: -.025em;
  line-height: 1.18;
}

.regional-discussion article > p:last-child {
  margin: 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-300);
  line-height: 1.58;
}

.regional-discussion-limit {
  background: color-mix(in srgb, var(--accent) 7%, var(--paper-bright));
}

.department-focus {
  min-height: 0;
}

.department-focus-analysis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.department-focus-analysis article {
  min-width: 0;
  padding: 24px 20px 26px 26px;
  border-right: 1px solid var(--line);
}

.department-focus-analysis article:last-child {
  border-right: 0;
}

.department-focus-analysis-label {
  margin: 0 0 10px !important;
  color: var(--accent) !important;
  font-size: var(--fs-100) !important;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.department-focus-analysis article > p:nth-child(2) {
  margin: 0;
  color: #40504a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  line-height: 1.52;
}

.department-focus-analysis-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 16px;
}

.department-focus-analysis-sources .metric-source-button span:last-child {
  display: none;
}

@media (max-width: 1100px) {
  .regional-analysis-body {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 48px;
  }

  .regional-markers {
    position: static;
  }

  .department-focus-analysis {
    grid-template-columns: 1fr;
  }

  .department-focus-analysis article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .department-focus-analysis article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 820px) {
  .regional-analysis-heading,
  .regional-analysis-body {
    grid-template-columns: 1fr;
  }

  .regional-analysis-heading {
    gap: 28px;
    margin-bottom: 68px;
  }

  .regional-analysis-kicker {
    position: static;
  }

  .regional-analysis-lead > h2 {
    font-size: clamp(var(--fs-800),  12vw, var(--fs-900));
  }

  .regional-signature {
    margin-top: 24px;
    font-size: var(--fs-500);
  }

  .regional-national-comparison {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 32px;
  }

  .regional-national-comparison .regional-analysis-sources {
    grid-column: 1;
  }

  .regional-analysis-body {
    gap: 76px;
  }

  .regional-synthesis-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
    padding: 34px 0;
  }

  .regional-synthesis-row h3 {
    font-size: var(--fs-600);
  }

  .regional-synthesis-row > div > p:not(.regional-analysis-label) {
    font-size: var(--fs-300);
  }

  .regional-marker {
    padding: 24px 0;
  }

  .regional-discussion {
    grid-template-columns: 1fr;
  }

  .regional-discussion article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .regional-discussion article:last-child {
    border-bottom: 0;
  }

  .regional-analysis-details summary {
    align-items: flex-start;
    padding: 22px 0;
    line-height: 1.4;
  }
}

/* Ticket S1 — l'ancre de la section communale doit dégager les barres collantes
   (en-tête 64 px + barre de contexte). Sans cette marge, le titre arrive dessous. */
#communes { scroll-margin-top: 128px; }

/* Ticket S2 — dispersion interne affichée à côté d'un classement départemental,
   et avertissement d'échelle. Un classement départemental non qualifié
   contredirait la preuve 05. */
.indicator-spread {
  display: grid;
  gap: 1px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.indicator-spread small { color: var(--muted); font-size: var(--fs-100); opacity: .8 }
.indicator-spread i {
  display: block; width: 46px; height: 3px; margin-left: auto; margin-bottom: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--data-warm), var(--data-cool));
}
.indicator-scale-warning {
  margin: 14px 0 0; padding: 12px 16px;
  background: var(--surface-tint); border-radius: var(--radius-sm);
  color: var(--ink); font-size: var(--fs-100); line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bloc S — navigation à trois axes
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ticket S6 — barre d'axes, présente sur toutes les vues. */

/* L'en-tête n'est pas collant : il défile et disparaît. La barre d'axes se
   calait pourtant à 76 px du haut, hauteur de cet en-tête envolé — il restait
   donc une bande vide où le texte de la page défilait à découvert, tranché net
   par le bord de la barre. La bande ne se refermait qu'à l'arrivée du sommaire,
   collé à 0 et assez haut pour la couvrir.
   La barre d'axes se cale désormais tout en haut, et le sommaire vient se ranger
   sous elle. Aucune bande ne peut plus s'ouvrir, à aucun moment du défilement. */
.site-axes {
  position: sticky;
  top: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--gutter);
  background: var(--paper-bright);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.site-axes::-webkit-scrollbar { display: none }

.site-axes button {
  flex: none;
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-100);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.site-axes button:hover { color: var(--ink) }
.site-axes button.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary) }

.site-axes-here {
  margin-left: auto;
  padding-left: 16px;
  color: var(--muted);
  font-size: var(--fs-100);
  white-space: nowrap;
}
.site-axes-here:empty { display: none }

/* Ticket S5 — la troisième porte. */
/* Trois portes : la porte territoire portait une grille interne à deux colonnes
   — texte à gauche, carte à droite — dimensionnée pour la moitié de l'écran.
   Réduite au tiers, sa carte débordait sur la porte voisine. Elle empile. */
.gateway-doors {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
}
.gateway-territory {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 24px 20px;
  align-items: start;
}
.gateway-territory .gateway-map {
  min-height: 200px;
  max-height: 240px;
}
/* Les trois portes partagent le même remplissage : sans quoi leurs titres ne
   s'alignent pas et la première paraît décalée vers le bas. */
.gateway-door { padding: 24px 20px }
/* Les trois portes s'alignent en haut : la première était centrée
   verticalement, ce qui décalait son sur-titre d'une centaine de pixels. */
.gateway-demonstration,
.gateway-theme {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24px 20px;
}
.gateway-territory {
  padding: 24px 20px;
  align-content: start;
}
.gateway-territory-copy { justify-content: flex-start; padding-block: 0 }
.gateway-door > h2, .gateway-territory-copy > h2 { margin-top: 0 }
.gateway-door-kicker { margin-top: 0 }
.gateway-theme-list {
  margin: 12px 0 auto; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.gateway-theme-list li {
  padding: 4px 8px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); color: var(--muted); font-size: var(--fs-100);
}
.gateway-door-action.is-secondary { background: var(--brand-accent) }

/* La signature du premier écran. */
.gateway-byline {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-100); line-height: 1.45; color: var(--muted);
}
.gateway-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-primary); color: #fff;
  font-size: var(--fs-100); font-weight: 800;
}
.gateway-byline strong { color: var(--ink) }
.gateway-byline button {
  margin-top: 2px; padding: 0; border: 0; background: none;
  color: var(--brand-primary); font: inherit; font-size: var(--fs-100); font-weight: 700;
  cursor: pointer; border-bottom: 1px solid var(--line-strong);
}

/* L'origine, dans le fil — version courte. */
.origin { padding: clamp(40px, 6vh, 72px) var(--gutter) }
.origin-copy { width: min(100%, 640px); margin-inline: auto }
.origin-kicker {
  margin: 0 0 14px; color: var(--brand-primary);
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.origin-lede {
  margin: 0 0 10px; color: #263248;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-400),  1.35vw, var(--fs-500)); line-height: 1.55;
}
.origin-quote {
  margin: 22px 0; padding-left: 16px;
  border-left: 3px solid var(--ep-turquoise);
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: clamp(var(--fs-500),  2vw, var(--fs-600)); line-height: 1.2; color: var(--brand-primary);
}
.origin-follow { margin: 0; color: #263248; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-300),  1.3vw, var(--fs-400)); line-height: 1.55 }
.origin-follow button, .origin-signature button {
  padding: 0; border: 0; background: none; color: var(--brand-primary);
  font-family: var(--font-sans, Inter, Arial, sans-serif); font-size: var(--fs-200); font-weight: 700;
  cursor: pointer; border-bottom: 1px solid var(--line-strong);
}
.origin-signature { margin: 22px 0 0 }

/* Les deux pages autonomes. */
.about-page, .indicator-page { padding: clamp(28px, 4vh, 44px) var(--gutter) clamp(48px, 7vh, 82px) }
.about-head { width: min(100%, 720px); margin-inline: auto }
.about-kicker {
  margin: 22px 0 8px; color: var(--brand-primary);
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.about-head h1 {
  margin: 0 0 20px; font-size: clamp(var(--fs-700),  4vw, var(--fs-900));
  line-height: 1.02; letter-spacing: -.03em;
}
.about-author { display: flex; gap: 12px; align-items: center; padding-bottom: 24px }
.about-avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-primary); color: #fff; font-size: var(--fs-200); font-weight: 800;
}
.about-author p { margin: 0; font-size: var(--fs-200); line-height: 1.4 }
.about-author span { display: block; color: var(--muted) }
.about-body { width: min(100%, 640px); margin-inline: auto;
  color: #263248; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(var(--fs-400),  1.35vw, var(--fs-500)); line-height: 1.62 }
.about-body > p { margin: 0 0 20px }
.about-lede { font-size: clamp(var(--fs-400),  1.45vw, var(--fs-500)) }
.about-body blockquote {
  margin: 26px 0; padding-left: 16px; border-left: 3px solid var(--ep-turquoise);
  font-style: italic; font-size: clamp(var(--fs-500),  2vw, var(--fs-600)); line-height: 1.2;
  color: var(--brand-primary);
}
.about-closing { padding-top: 20px; border-top: 1px solid var(--line) }
.about-next {
  width: min(100%, 720px); margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid var(--line-strong);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
}
.about-next p {
  margin: 0; color: var(--muted);
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.about-next button {
  padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper-bright); color: var(--ink);
  font: inherit; font-size: var(--fs-200); font-weight: 700; cursor: pointer;
}
.about-next button:hover { border-color: var(--brand-primary); color: var(--brand-primary) }
.indicator-explorer.is-page { width: min(100%, 980px); margin: 28px auto 0; padding: 0 }

@media (max-width: 900px) {
  .gateway-doors { grid-template-columns: minmax(0, 1fr) }
  .site-axes { padding-inline: 16px }
}

/* Les ancres de section dégagent l'en-tête et la barre d'axes. */
#demonstration, #territories, #pourquoi, #indicators { scroll-margin-top: 128px; }

/* Ticket S4 — les croisements entre axes. */
.commune-summary-metrics.is-linked dd button {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-bottom: 1px solid var(--line-strong);
}
.commune-summary-metrics.is-linked dd button i {
  font-style: normal;
  font-size: var(--fs-100);
  color: var(--brand-focus);
}
.commune-summary-metrics.is-linked dd button:hover { border-bottom-color: currentColor }

.indicator-crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.indicator-crosslinks button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper-bright);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-100);
  font-weight: 700;
  cursor: pointer;
}
.indicator-crosslinks button:hover { border-color: var(--brand-primary); color: var(--brand-primary) }
.indicator-crosslinks i {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  color: var(--brand-primary);
  font-style: normal; font-size: var(--fs-100); font-weight: 800;
}

/* Les chapitres de preuve dégagent aussi les barres collantes. */
.national-evidence, .story-chapter { scroll-margin-top: 128px; }

/* Ticket G2 — b et strong héritent de « bolder » du navigateur : posés sur un
   parent déjà en 800, ils calculent 900 et introduisent une cinquième graisse
   que la feuille ne déclare nulle part. On les ramène dans le barème. */
b, strong { font-weight: 700 }
:where(.eyebrow, .section-label, .proof-caption, [class*="-kicker"], [class*="-label"]) b,
:where(.eyebrow, .section-label, .proof-caption, [class*="-kicker"], [class*="-label"]) strong {
  font-weight: 800;
}

/* ── Glossaire ────────────────────────────────────────────────────────────
   Les notions transversales, atteignables depuis n'importe quel endroit où
   elles apparaissent. Le dispositif « Comprendre ce chiffre » traite les 26
   indicateurs ; celui-ci traite les huit notions qui les traversent. */
.glossary-dialog { max-width: 620px }
#glossary-content h2 {
  margin: 0 0 8px;
  font-size: var(--fs-600);
  line-height: 1.15;
}
.glossary-short {
  margin: 0 0 20px;
  color: var(--brand-primary);
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: 1.4;
}
.glossary-body {
  margin: 0 0 16px;
  font-size: var(--fs-300);
  line-height: 1.6;
}
.glossary-limit {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--surface-tint);
  border-radius: var(--radius-sm);
  font-size: var(--fs-200);
  line-height: 1.55;
}
.glossary-limit strong { display: block; margin-bottom: 4px; color: var(--ink) }
.glossary-index {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.glossary-index p {
  width: 100%;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.glossary-index button {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper-bright);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-200);
  cursor: pointer;
}
.glossary-index button:hover { border-color: var(--brand-primary); color: var(--brand-primary) }

/* L'explication de « dépendance forte », dans le panneau communal. */
.dependence-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--surface-tint);
  border-radius: var(--radius-sm);
  font-size: var(--fs-200);
  line-height: 1.5;
}
.dependence-note strong { color: var(--ink) }
.dependence-note button {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-primary);
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px solid var(--line-strong);
}

/* Le glossaire est atteignable depuis la barre d'axes, donc de partout. */
.site-axes-glossary {
  margin-left: 12px;
  border-bottom: 0 !important;
  color: var(--brand-primary) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Légende par classes — chaque case se rapporte à une valeur lisible,
   ce qu'une bande dégradée ne permet pas. */
.commune-class-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 8px 0 6px;
}
.commune-class {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: var(--fs-100);
  font-variant-numeric: tabular-nums;
}
.commune-class i {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  background: var(--swatch);
  border: 1px solid rgba(15, 23, 42, .16);
}
.commune-class-legend + small button {
  display: inline;
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px solid var(--line-strong);
}

/* ── Repères sur les cartes départementales ──────────────────────────────
   Le viewBox est réduit par le conteneur : sans division par --map-scale, un
   texte déclaré à 12 px arrivait à 7 px à l'écran sur la carte de
   l'explorateur. Les tailles ci-dessous sont donc des tailles rendues. */
.map-shell svg,
#hero-region-map,
#department-map,
#commune-map { --map-scale: 1 }

.department-labels { pointer-events: none }

.department-label text {
  fill: var(--ink);
  stroke: var(--paper-bright, rgba(250, 248, 242, 0.94));
  stroke-width: calc(3.4px / var(--map-scale));
  stroke-linejoin: round;
  paint-order: stroke fill;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
}

.department-label-code {
  font-size: calc(11px / var(--map-scale));
  font-weight: 800;
  letter-spacing: 0.06em;
  fill: var(--muted, #5d5a52);
}

.department-label-name {
  font-size: calc(13px / var(--map-scale));
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* Nom trop large pour la forme : le numéro reste seul, recentré et agrandi. */
.department-label.is-code-only .department-label-name { display: none }
.department-label.is-hidden { display: none }
.department-label.is-code-only .department-label-code {
  font-size: calc(15px / var(--map-scale));
  fill: var(--ink);
  transform: translateY(calc(9px / var(--map-scale)));
}

/* Les étiquettes de ville souffraient du même écrasement : 7 px à l'écran. */
.city-label text { font-size: calc(12px / var(--map-scale)) }
.city-label circle {
  r: calc(3.2px / var(--map-scale));
  stroke-width: calc(1.8px / var(--map-scale));
}
.city-labels.is-hero text,
.city-labels.is-department text,
.city-labels.is-commune text { font-size: calc(12px / var(--map-scale)) }
.city-labels.is-commune circle { r: calc(3.7px / var(--map-scale)) }

@media (max-width: 720px) {
  .department-label-name { font-size: calc(12px / var(--map-scale)) }
}

/* ── Noms de région sur la carte de France ───────────────────────────────
   La carte d'accueil est le premier écran et la seule à ne rien nommer. Les
   tailles sont divisées par --map-scale : ce sont donc des tailles rendues. */
#france-map, #france-map-territories { --map-scale: 1 }

.region-labels { pointer-events: none }

.region-label-text {
  fill: var(--ink);
  stroke: var(--paper-bright, rgba(250, 248, 242, 0.94));
  stroke-width: calc(3.6px / var(--map-scale));
  stroke-linejoin: round;
  paint-order: stroke fill;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(12.5px / var(--map-scale));
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* La seconde ligne n'existe que pour les noms coupés. */
.region-label .is-second { display: none }
.region-label.is-two-lines .is-second { display: inline }

/* Point d'accroche et filet : seulement quand le nom est posé hors de sa forme. */
.region-label-dot,
.region-label-leader { display: none }
.region-label.is-outside .region-label-dot,
.region-label.is-outside .region-label-leader { display: inline }

.region-label-dot {
  fill: var(--ink);
  stroke: var(--paper-bright, rgba(250, 248, 242, 0.96));
  stroke-width: calc(1.6px / var(--map-scale));
  r: calc(3px / var(--map-scale));
}

.region-label-leader {
  stroke: var(--ink);
  stroke-width: calc(1.1px / var(--map-scale));
  opacity: 0.55;
}

.region-label.is-hidden { display: none }
.region-labels.is-too-small { display: none }

@media (prefers-reduced-motion: no-preference) {
  .region-label { transition: opacity 160ms ease }
}

/* ── Rapporté à la population, ou pas ────────────────────────────────────
   La barre du haut fait passer d'un indicateur à l'autre sans dire lequel
   tient compte du nombre d'habitants. On le signale à côté du chiffre. */
.hero-readout-scale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  background: none;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.hero-readout-scale::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.hero-readout-scale.is-per-capita {
  color: #0b5c3f;
  border-color: rgba(11, 92, 63, 0.28);
  background: rgba(11, 92, 63, 0.07);
}
.hero-readout-scale.is-raw {
  color: #8a4b12;
  border-color: rgba(138, 75, 18, 0.3);
  background: rgba(138, 75, 18, 0.07);
}
.hero-readout-scale:hover { border-color: currentColor }

/* Les liens croisés du glossaire, posés dans le corps d'une notice. */
.glossary-body button[data-glossary],
.glossary-limit button[data-glossary] {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ── Explorateur par indicateur : commandes ──────────────────────────────
   La classe .indicator-scope n'avait aucune règle : le libellé « Périmètre »
   et la liste native se chevauchaient. Et les cinq onglets, répartis sur une
   seule ligne à 375 px, tombaient à 70 px chacun — illisibles. */
.indicator-scope {
  display: grid;
  /* Une piste `auto` prend pour minimum le contenu minimal : l'option la plus
     longue de la liste imposait 263 px dans une colonne de 250. */
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
}

.indicator-scope > span,
.indicator-scope select { min-width: 0 }

.indicator-scope > span {
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.indicator-scope select {
  min-height: 44px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 4px);
  background: var(--paper-bright);
  color: var(--ink);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  font-weight: 600;
}

.indicator-scope select:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

/* L'échelle de chaque question, annoncée sur l'onglet : le texte disait « les
   deux premières portent sur les communes » alors que ce sont la troisième et
   la quatrième. Plutôt que de compter juste, on le dit sur chaque onglet. */
.indicator-tabs button {
  display: grid;
  gap: 1px;
  text-align: left;
}

.indicator-tabs button small {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.indicator-tabs button[aria-pressed="true"] small { color: inherit; opacity: .8 }

@media (max-width: 820px) {
  /* Deux colonnes plutôt que cinq onglets écrasés sur une ligne. */
  .indicator-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow-x: visible !important;
  }

  .indicator-tabs button {
    min-height: 56px;
    padding: 8px 10px;
  }

  /* La cinquième question occupe la largeur restante plutôt qu'une demi-case. */
  .indicator-tabs button:last-child:nth-child(odd) { grid-column: 1 / -1 }

  /* Le filtre régional prend sa propre ligne, pleine largeur. */
  .indicator-explorer-controls { display: grid; gap: 14px }
  .indicator-scope { min-width: 0 }
  .indicator-scope select { width: 100% }
}

/* La barre d'axes défile horizontalement sur mobile — « Ma commune » et « Par
   indicateur » sont hors champ à 375 px — sans que rien ne l'indique. Un dégradé
   sur le bord droit signale qu'il reste quelque chose au-delà, et disparaît
   quand on est au bout. */
@media (max-width: 820px) {
  .site-axes {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .site-axes.is-scroll-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .site-axes button { flex: 0 0 auto }
}

/* ── Outre-mer ───────────────────────────────────────────────────────────
   L'atlas s'arrêtait à la métropole sans le dire. Le bloc énonce le périmètre
   et donne les quatre valeurs ultramarines, pour que l'absence de carte ne
   passe pas pour une absence de données. */
.gateway-overseas {
  margin: 26px 0 0;
  padding: 0 24px;
  border: 1px solid var(--line);
  /* Même liseré que les autres blocs de réserve : une intention, un signal. */
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm, 4px);
  background: var(--paper-bright);
}

.gateway-overseas > summary {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
}

.gateway-overseas > summary::-webkit-details-marker {
  display: none;
}

.gateway-overseas > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.gateway-overseas > summary strong {
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: -0.005em;
}

.gateway-overseas > summary small {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 600;
}

.gateway-overseas-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: var(--brand-primary);
  font-size: var(--fs-100);
  font-weight: 800;
}

.gateway-overseas-toggle i {
  font-size: var(--fs-400);
  font-style: normal;
  font-weight: 400;
  transition: transform var(--dur-2) var(--ease-out);
}

.gateway-overseas[open] .gateway-overseas-toggle i {
  transform: rotate(45deg);
}

.gateway-overseas-body {
  padding: 4px 0 20px;
  border-top: 1px solid var(--line);
}

.gateway-overseas-body > p:first-child {
  padding-top: 16px;
}

.gateway-overseas p {
  margin: 0 0 12px;
  max-width: 68ch;
  font-size: var(--fs-200);
  line-height: 1.55;
}

.overseas-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.overseas-figures li {
  display: grid;
  background: var(--paper-bright);
}

.overseas-figures button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 84px;
  padding: 14px 16px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1, 140ms) var(--ease-out, ease);
}

.overseas-figures button:hover,
.overseas-figures button:focus-visible { background: var(--surface-tint, rgba(0, 102, 168, 0.05)) }
.overseas-figures button::after {
  content: "Ouvrir la fiche →";
  color: var(--brand-primary);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--dur-1, 140ms) var(--ease-out, ease);
}
.overseas-figures button:hover::after,
.overseas-figures button:focus-visible::after { opacity: 1 }

.overseas-figures b {
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.overseas-figures strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600);
  font-weight: 400;
  line-height: 1.05;
}

.overseas-figures small {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 600;
}

/* La Guyane est le cas qui justifie à lui seul de citer ces chiffres. */
.overseas-figures li.is-severe strong { color: var(--accent) }
.overseas-figures li.is-severe small { color: var(--ink); font-weight: 700 }

.overseas-note {
  color: var(--muted);
  font-size: var(--fs-100) !important;
  line-height: 1.5 !important;
}

.gateway-overseas button[data-glossary] {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .gateway-overseas { padding: 0 16px }
  .gateway-overseas > summary { min-height: 76px; gap: 12px }
  .gateway-overseas-toggle { font-size: 0 }
  .gateway-overseas-toggle i { font-size: var(--fs-400) }
  .overseas-figures { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* Un APL nul se lit « aucune offre libérale modélisée », jamais « aucun soin ».
   Dix communes de Guyane sur vingt-deux et 513 communes métropolitaines sont
   concernées ; sans cette mention, la carte affirme une absence de soins. */
.commune-zero-access {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--paper-bright);
  color: var(--ink);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.5;
}
.commune-zero-access strong { display: block; margin-bottom: 3px }
.commune-zero-access em { font-style: italic }
.commune-zero-access button[data-glossary] {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Les communes à accès nul occupent mécaniquement la tête du classement
   « accès le plus faible ». Elles y restent — les retirer masquerait des
   territoires — mais elles ne se comparent pas terme à terme aux suivantes. */
.indicator-zero-flag {
  display: block;
  margin-top: 2px;
  max-width: 12ch;
  /* Le bleu de marque tombait à 2,87 pour 1 sur le panneau sombre. */
  color: #7fd4dc;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

/* Même erreur sur le panneau sombre de l'explorateur : fond clair et texte clair
   donnaient 1,07 pour 1. Le voile s'assombrit, le texte reste clair. */
.indicator-zero-note {
  margin: 14px 0 0;
  padding: 13px 15px;
  border-left: 3px solid #7fd4dc;
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  background: #132540;
  color: #e8eef6;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.55;
}
.indicator-zero-note strong { color: #ffffff }
.indicator-zero-note button[data-glossary] { color: #7fd4dc }
.indicator-zero-note strong { display: block; margin-bottom: 3px }
.indicator-zero-note em { font-style: italic }
.indicator-zero-note button[data-glossary] {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* L'angle mort de l'indicateur, énoncé dans le contrat de lecture : il ne
   concerne pas que l'outre-mer, et c'est la limite la plus lourde de l'atlas. */
/* Ce bloc vit dans une section sombre. En lui donnant un fond blanc sans fixer
   sa couleur de texte, il héritait du gris clair de la section : 2,04 pour 1,
   illisible. Un bloc de réserve pose désormais toujours sa paire complète. */
/* La règle `.research-boundary > p:last-child` visait le paragraphe de clôture
   de la section. Ce bloc étant devenu le dernier enfant, il en héritait la
   couleur claire — sur son propre fond blanc. On le cible explicitement, à
   spécificité supérieure, plutôt que d'y opposer un !important. */
/* La règle concurrente vaut (0,2,1) : `.research-boundary` + `p` + `:last-child`.
   Il faut au moins l'égaler pour que l'ordre du fichier tranche. */
.research-boundary > p.boundary-blind-spot:last-child,
.boundary-blind-spot {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: var(--paper-bright);
  color: var(--ink);
  font-size: var(--fs-200);
  line-height: 1.55;
}
.boundary-blind-spot > strong:first-child { display: block; margin-bottom: 4px }
.boundary-blind-spot em { font-style: italic }
.boundary-blind-spot button[data-glossary] {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ── Les neuf points en une phrase ───────────────────────────────────────
   La démonstration fait trente-neuf écrans sur mobile. Ce sommaire des
   conclusions la rend parcourable en une minute, et chaque ligne ouvre son
   développement. Rien n'y est réécrit : ce sont les phrases « à retenir en
   dix secondes » de chaque point. */
/* .story-opening est une grille à deux colonnes : le libellé de section à
   gauche, le texte à droite. Sans placement explicite, ce bloc retombait dans
   la colonne étroite de 251 px — seize caractères par ligne, neuf lignes
   devenues neuf paragraphes. Il occupe la colonne du texte. */
.express-mode {
  grid-column: 2;
  margin: 26px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 4px);
  background: var(--paper-bright);
  color: var(--ink);
}

.express-mode-label {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.express-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.express-list li { border-bottom: 1px solid var(--line) }

.express-list button {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  gap: 14px;
  align-items: baseline;
  width: 100%;
  min-height: 48px;
  padding: 11px 4px;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1, 140ms) var(--ease-out, ease);
}

.express-list button:hover,
.express-list button:focus-visible { background: var(--surface-tint, rgba(0, 102, 168, 0.05)) }

.express-index {
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* La valeur et sa glose se suivent sans ponctuation : « Pas toujours médecin
   traitant être recensé comme généraliste… ». Un point médian les séparerait,
   mais la ligne 04 en contient déjà — « 2010 · 2017 · 2024 ». On distingue donc
   par la couleur, comme le fait la carte du point elle-même. */
.express-claim {
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.45;
}
.express-claim strong {
  color: var(--ink);
  font-weight: 700;
}

.express-open {
  color: var(--brand-primary);
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--dur-1, 140ms) var(--ease-out, ease);
}
.express-list button:hover .express-open,
.express-list button:focus-visible .express-open { opacity: 1 }

.express-mode-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .express-mode { grid-column: 1 / -1 }
}

@media (max-width: 560px) {
  .express-mode { padding: 18px 16px }
  .express-list button { grid-template-columns: 2.2em 1fr; gap: 10px }
  .express-open { display: none }
}

/* ── Fiche communale : repère national et contexte territorial ───────────
   Un pourcentage sans repère ne dit rien. Et les trois axes d'attractivité
   restent séparés : même graisse, même graduation, aucune couleur de valeur —
   un cadre de vie recherché n'est ni une qualité ni un défaut, c'est une
   caractéristique. Rien n'est cumulé ni moyenné. */
.commune-anchor {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-tint, rgba(0, 102, 168, .055));
  color: var(--ink);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  line-height: 1.5;
}
.commune-anchor strong { font-weight: 700 }

.commune-context {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.commune-context-label {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.commune-context-profile {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-tint, rgba(0, 102, 168, .055));
  color: var(--ink);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.commune-context-profile::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-primary);
}

.commune-context-axes { display: grid; gap: 10px }

.commune-context-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.commune-context-axis:last-child { border-bottom: 0; padding-bottom: 0 }

.commune-context-axis b {
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  font-weight: 600;
}
.commune-context-axis i {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-style: normal;
  line-height: 1.45;
}

.commune-context-rank {
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 700;
  text-align: right;
}

.commune-context-note {
  margin: 13px 0 0;
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.55;
}
.commune-context-note strong { color: var(--ink); font-weight: 600 }

/* Le panneau de lecture communal est sur fond sombre : `--muted`, taillé pour
   le papier clair, y tombait à 3,02 pour un. Les tons secondaires de ce bloc
   sont donc déclarés pour la surface où ils vivent réellement. */
/* Même défaut sur un bloc posé plus tôt : une boîte claire dans le panneau
   sombre, dont le texte héritait de la couleur claire du panneau — 1,64 pour un. */
.commune-readout .dependence-note { color: var(--ink) }
.commune-readout .dependence-note strong { color: var(--ink) }

.commune-readout .commune-context-label,
.commune-readout .commune-context-axis i,
.commune-readout .commune-context-rank,
.commune-readout .commune-context-note { color: #a3b0c4 }

.commune-readout .commune-context-note strong,
.commune-readout .commune-context-axis b { color: var(--paper-bright) }

.commune-readout .commune-context-axis { border-bottom-color: rgba(232, 238, 246, .16) }
.commune-readout .commune-context { border-top-color: rgba(232, 238, 246, .16) }

.commune-readout .commune-context-profile {
  border-color: rgba(232, 238, 246, .3);
  background: rgba(232, 238, 246, .08);
  color: var(--paper-bright);
}
.commune-readout .commune-context-profile::before { background: var(--ep-turquoise) }

.commune-readout .commune-anchor {
  border-left-color: var(--ep-turquoise);
  background: rgba(232, 238, 246, .08);
  color: var(--paper-bright);
}

@media (max-width: 560px) {
  .commune-context-axis { grid-template-columns: 1fr; gap: 3px }
  .commune-context-rank { text-align: left }
}

/* ── Fiche communale : les trois visuels ─────────────────────────────────
   Le panneau n'énonçait que des phrases. Une réglette situe la valeur sur
   l'échelle nationale, le croisement montre la position que le libellé se
   contentait d'affirmer, et une réglette par axe rend le territoire lisible
   d'un coup d'œil. Toutes ces couleurs sont déclarées pour le fond sombre du
   panneau, jamais héritées. */
.commune-scale { margin: 12px 0 0 }

.commune-scale-track {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(232, 238, 246, .16);
}

.commune-scale-median {
  position: absolute; top: -5px; bottom: -5px;
  width: 1px;
  background: rgba(232, 238, 246, .55);
}

.commune-scale-dot {
  position: absolute; top: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border: 2.5px solid #0f172a;
  border-radius: 50%;
  background: var(--ep-turquoise);
}

.commune-scale-legend {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  color: #a3b0c4;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
}
.commune-scale-legend .is-median { color: var(--paper-bright); font-weight: 700 }

/* Le croisement des deux mesures. */
.commune-quadrant {
  display: block;
  width: 100%; max-width: 320px; height: auto;
  margin: 16px auto 0;
}
.cq-fill         { opacity: .3 }
.cq-fill.is-here { opacity: .82 }
.cq-name         { font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
                   font-size: 8.5px; font-weight: 700; fill: #cbd5e6 }
.cq-name.is-here { font-weight: 800; fill: #ffffff }
.cq-axis         { stroke: rgba(232, 238, 246, .5); stroke-width: 1 }
.cq-tick         { font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
                   font-size: 8px; fill: #a3b0c4 }
.cq-axis-label   { font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
                   font-size: 8px; font-weight: 800; fill: #a3b0c4;
                   letter-spacing: .07em; text-transform: uppercase }
.cq-dot          { fill: var(--ep-turquoise); stroke: #0f172a; stroke-width: 2.2 }

/* Une réglette par axe de territoire. Teinte neutre, identique aux trois :
   une position n'est pas une note. */
.commune-axis-track {
  position: relative;
  height: 4px;
  /* Le repère de médiane déborde de 3 px sous la réglette : sans cette marge
     il touchait la ligne de texte suivante. */
  margin: 8px 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(232, 238, 246, .16);
}
.commune-axis-median {
  position: absolute; top: -3px; bottom: -3px; left: 50%;
  width: 1px;
  background: rgba(232, 238, 246, .4);
}
.commune-axis-dot {
  position: absolute; top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid #0f172a;
  border-radius: 50%;
  background: #e8eef6;
}

/* La ligne d'axe passe en pile : intitulé, fait, réglette, comparaison. */
.commune-readout .commune-context-axis {
  display: block;
  padding-bottom: 12px;
}
.commune-readout .commune-context-axis i { margin-top: 1px }
.commune-readout .commune-context-rank { display: block; text-align: left }

/* Le bloc « dépendance forte » était une carte blanche posée au milieu du
   panneau sombre : un corps étranger, en serif, qui cassait la lecture. Il
   reprend le registre du panneau — un simple filet, la teinte du fond, la
   typographie de l'interface. */
.commune-readout .dependence-note {
  padding: 12px 0 0;
  border-top: 1px solid rgba(232, 238, 246, .16);
  border-radius: 0;
  background: none;
  color: #a3b0c4;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.55;
}
.commune-readout .dependence-note strong { color: var(--paper-bright); font-weight: 700 }
.commune-readout .dependence-note button { color: var(--ep-turquoise) }

/* Pour qui ce territoire est attractif — la question que la section ne posait
   pas, et sans laquelle « attractive » ne veut rien dire. */
.commune-context-for {
  margin: 0 0 12px;
  color: #a3b0c4;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.55;
}
.commune-context-for strong { color: var(--paper-bright); font-weight: 600 }

/* La dynamique : ce que ces axes ont à voir avec les généralistes. Sans elle,
   le lecteur ne sait pas pourquoi cette section figure sur une page qui parle
   d'accès aux soins. */
.commune-dynamic {
  margin: 14px 0 0;
  padding: 0;
  border-left: 3px solid var(--ep-turquoise);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(232, 238, 246, .07);
}

.commune-dynamic > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px;
  color: var(--ep-turquoise);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
}
.commune-dynamic > summary::-webkit-details-marker { display: none }
.commune-dynamic > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.commune-dynamic[open] > summary::before { content: "–" }
.commune-dynamic > summary:focus-visible { outline: 3px solid var(--ep-turquoise); outline-offset: -3px }
.commune-dynamic > p { padding-inline: 15px }
.commune-dynamic > p:last-child { padding-bottom: 13px }

.commune-dynamic p {
  margin: 0 0 8px;
  color: #a3b0c4;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.55;
}
.commune-dynamic p:last-child { margin-bottom: 0 }
.commune-dynamic strong { color: var(--paper-bright); font-weight: 700 }

.commune-dynamic-warning {
  padding-top: 8px;
  border-top: 1px solid rgba(232, 238, 246, .16);
}
.commune-dynamic-warning button[data-glossary] {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ep-turquoise);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ── Deux entrées dans la démonstration ──────────────────────────────────
   Le bouton unique menait à l'introduction : il restait 1 183 px et deux
   écrans intermédiaires avant le premier résultat. Le lecteur pressé prend la
   lecture express, l'autre attaque directement au point 01. */
.gateway-door-choices { display: grid; gap: 8px; margin-top: 24px }

.gateway-door-choices button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}

.gateway-door-choices small {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0;
  opacity: .82;
  text-transform: none;
}

.gateway-door-choice-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gateway-door-choice-label i {
  font-style: normal;
}

@media (min-width: 821px) {
  .indicator-page .indicator-explorer-controls {
    padding-left: 16px;
  }
}

.gateway-door-express {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  font-weight: 700;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.gateway-door-express:hover,
.gateway-door-express:focus-visible {
  border-color: var(--brand-primary);
  background: var(--surface-tint, rgba(0, 102, 168, .05));
}

/* ── La commune demandée, en tête de la liste mobile ─────────────────────
   Le panneau de lecture vit dans la carte, masquée en vue tableau : un lien
   profond arrivait sur une liste générique où la commune se perdait. */
.commune-picked {
  scroll-margin-top: calc(var(--axes-height, 44px) + 64px);
  margin: 0 0 18px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
}

.commune-picked-kicker {
  margin: 0 0 3px;
  color: var(--brand-primary);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.commune-picked h4 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-600, 26px);
  font-weight: 400;
  letter-spacing: -0.012em;
}

.commune-picked-scope {
  margin: 2px 0 14px;
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.commune-picked-figures {
  display: grid;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
}
.commune-picked-figures > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.commune-picked-figures > div:last-child { border-bottom: 0; padding-bottom: 0 }
.commune-picked-figures dt {
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.4;
}
.commune-picked-figures dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-500, 22px);
  white-space: nowrap;
}

.commune-picked-situation {
  margin: 0 0 14px;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  font-weight: 700;
}

.commune-picked-actions { display: flex; flex-wrap: wrap; gap: 8px }
.commune-picked-actions button {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--brand-primary);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.commune-picked-actions button:hover,
.commune-picked-actions button:focus-visible {
  border-color: var(--brand-primary);
  background: var(--surface-tint, rgba(0, 102, 168, .05));
}

/* Le bouton « Plus » de la barre d'axes : visible seulement quand la barre
   déborde réellement, et jamais sur les écrans où tout tient. */
.site-axes button.site-axes-more {
  /* `.site-axes button` (0,1,1) l'emporterait sur `.site-axes-more` (0,1,0) :
     on qualifie le sélecteur pour reprendre la main sur fond et bordure.
     Le bouton vit dans la barre qui défile : sans « sticky » il part avec
     le contenu et se retrouve hors champ, exactement le défaut qu'il corrige. */
  position: sticky;
  /* La barre a une gouttière : sans ce retrait, une lisière de l'entrée
     précédente resterait visible à droite du bouton. */
  right: 0;
  flex: 0 0 auto;
  min-height: 36px;
  margin-left: auto;
  padding: 0 12px;
  /* La pastille reste entière ; les deux ombres couvrent la gouttière de part
     et d'autre, sinon une lisière de l'entrée précédente resterait visible. */
  box-shadow: -18px 0 14px -8px var(--paper), var(--gutter) 0 0 var(--paper-bright);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper-bright);
  color: var(--brand-primary);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.site-axes button.site-axes-more[hidden] { display: none }

@media (min-width: 821px) { .site-axes button.site-axes-more, .site-axes-menu { display: none } }

/* Le menu vit hors de la barre : « overflow-x: auto » l'y rognerait. */
.site-axes-menu {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 208px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.45);
}
.site-axes-menu[hidden] { display: none }
.site-axes-menu button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.site-axes-menu button:hover { background: var(--paper-muted) }
.site-axes-menu button[aria-current]:not([aria-current="false"]) { color: var(--brand-primary) }

/* Le bouton de reprise du bloc de chargement : présent seulement quand quelque
   chose a échoué, donc jamais dans le parcours normal. */
.loading-state button[data-loading-retry] {
  margin-top: 14px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: #ffffff;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  font-weight: 800;
  cursor: pointer;
}

/* Discussion : trois conclusions tiennent l'écran, le raisonnement complet est
   à un clic. Les règles existantes (.discussion-logic, .discussion-arguments…)
   s'appliquent inchangées à l'intérieur du dépliant.
   La section est sur fond nuit : chaque règle déclare ici son fond ET sa
   couleur, pour ne pas hériter d'un style pensé pour les surfaces claires.
   Contrastes mesurés sur rgb(15,23,42) : #ffffff 18:1, #b8c2d1 8,2:1,
   --brand-focus 9,4:1 — tous au-dessus du 4,5:1 exigé. */
.discussion-key-points {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.discussion-key-points li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--brand-focus);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .06);
}
.discussion-key-points li > span {
  flex: 0 0 auto;
  color: var(--brand-focus);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.discussion-key-points small {
  display: block;
  margin-bottom: 4px;
  color: #b8c2d1;
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.discussion-key-points strong {
  display: block;
  color: #ffffff;
  font-size: var(--fs-300);
  font-weight: 700;
  line-height: 1.35;
}

.discussion-full { margin-top: 28px }
.discussion-full > summary {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--brand-focus);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.discussion-full > summary::-webkit-details-marker { display: none }
.discussion-full > summary:hover { border-color: var(--brand-focus) }
.discussion-full[open] > summary { margin-bottom: 28px }
.discussion-full[open] > summary span { font-size: 0 }
.discussion-full[open] > summary span::before { content: "−"; font-size: var(--fs-300) }

/* Les neuf preuves portaient la même typographie d'affiche que l'ouverture :
   58 px dans une colonne de 420 px, soit jusqu'à huit lignes pour un seul titre
   et près de 2 700 px de titres cumulés. L'affiche reste au premier écran ; à
   partir du point 01, le titre redevient opératoire.
   `.chapter-copy h2` vaut (0,1,1) : on qualifie par la section pour l'emporter. */
.national-evidence .chapter-copy h2 {
  margin: 20px 0 22px;
  font-size: clamp(var(--fs-600), 2.6vw, var(--fs-800));
  letter-spacing: -0.035em;
  line-height: 1.06;
}

@media (max-width: 820px) {
  .national-evidence .chapter-copy h2 {
    font-size: clamp(var(--fs-600), 7vw, var(--fs-800));
  }
}

/* Le pas d'un point au suivant. Il ferme chaque section : le lecteur sait
   toujours où il en est (05 / 09) et ce qui vient, sans rouvrir le sommaire.
   Les sections de preuve sont sur fond clair — fond et couleur sont déclarés
   ici pour ne rien hériter d'ailleurs. */
.evidence-stepper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  /* La grille de la section pose déjà 64 px : une marge s'y ajouterait. */
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.evidence-step {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
  color: var(--ink);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}
.evidence-step:hover { border-color: var(--brand-primary) }
.evidence-step.is-next { flex-direction: row-reverse; justify-self: end; text-align: right }
.evidence-step.is-empty { border: 0; background: none; cursor: default }
.evidence-step > span[aria-hidden] {
  flex: 0 0 auto;
  color: var(--brand-primary);
  font-size: var(--fs-300);
  font-weight: 800;
}
.evidence-step small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.evidence-step strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 700;
}
.evidence-step-position {
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* Trois colonnes ne tiennent pas : le repère passe au-dessus des deux pas. */
  .evidence-stepper { grid-template-columns: 1fr 1fr }
  .evidence-step-position { grid-column: 1 / -1; order: -1; text-align: center }
}

/* Entre 681 px et ~900 px, le verdict de la carte de trajectoire gardait ses
   trois colonnes à minimum fixe (230 + 170 + 210 px, plus gouttières et
   marges intérieures) : la piste dépassait la section de 34 px et le bord
   droit du bloc était rogné. Le restack à deux colonnes existait déjà, mais
   seulement sous 680 px. On le remonte à la largeur où les trois colonnes
   cessent réellement de tenir ; au-delà, rien ne change. */
@media (min-width: 681px) and (max-width: 900px) {
  .trajectory-map-verdict {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
  }
  .trajectory-map-verdict-place,
  .trajectory-map-verdict > p {
    grid-column: 1 / -1;
  }
  .trajectory-map-verdict-change { padding-left: 0; border-left: 0 }
}

/* Compression de la démonstration — rien n'est masqué : les trois cartes de
   trajectoire restent les trois, et les blocs repliés sont des commentaires de
   figure, jamais la figure. Mesures mobiles (375 px) avant/après en fin de
   fichier de suivi. */

/* Un dépliant sobre pour les couches de commentaire d'une figure. */
.graphic-aside { border-top: 1px solid var(--line) }
.graphic-aside > summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--brand-primary);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.graphic-aside > summary::-webkit-details-marker { display: none }
.graphic-aside[open] > summary span::before { content: "−" }
.graphic-aside[open] > summary span { font-size: 0 }
.graphic-aside[open] > summary span::before { font-size: var(--fs-300) }
.graphic-aside > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  line-height: 1.5;
}

/* La note de surface était un paragraphe permanent sous le résultat. */
.evidence-surface-note-fold { border-top: 1px solid var(--line) }
.evidence-surface-note-fold > summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--ink);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-200);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.evidence-surface-note-fold > summary::-webkit-details-marker { display: none }
.evidence-surface-note-fold[open] > summary span { font-size: 0 }
.evidence-surface-note-fold[open] > summary span::before { content: "−"; font-size: var(--fs-300) }
.evidence-surface-note-fold > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-200);
  line-height: 1.55;
}

.trajectory-map-swipe-hint { display: none }

@media (max-width: 820px) {
  /* Les trois cartes empilées coûtaient 1 036 px. Elles deviennent une bande
     que l'on fait glisser : les trois restent lisibles, à la hauteur d'une
     seule. Le conteneur est focalisable, donc atteignable au clavier. */
  .trajectory-map-panels {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .trajectory-map-panels > article { scroll-snap-align: start }
  .trajectory-map-panels:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px }

  .trajectory-map-swipe-hint {
    display: block;
    margin: 0 0 10px;
    color: var(--muted);
    font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--fs-100);
    font-weight: 700;
  }

  /* Neuf sections à 88 px de bas de page et 64 px d'écart interne pesaient
     470 px à elles seules. */
  .national-evidence { padding-bottom: 56px; row-gap: 44px }
}

@media (max-width: 820px) {
  /* Les deux territoires empilés perdaient la comparaison qu'ils servent :
     côte à côte, on les lit d'un coup et le bloc raccourcit d'un bon tiers.
     La colonne ne fait plus que ~165 px : la typographie d'affiche y partait
     en quatre lignes et désalignait les deux cartes. On la redescend. */
  .care-volume-graphic > div { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .care-volume-graphic article { gap: 10px; padding: 18px 14px }
  .care-volume-graphic strong { font-size: var(--fs-400) }
  .care-volume-graphic em { font-size: var(--fs-500); line-height: 1.1 }
  .care-volume-graphic b { font-size: var(--fs-300) }
  .care-volume-graphic mark { margin: 6px 0 0; display: block; width: fit-content }
}

.trajectory-map-perimeter {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-100);
  line-height: 1.45;
}

@media (max-width: 820px) {
  /* Dans une vignette de 275 px, l'étiquette de valeur se posait en travers du
     Sud-Ouest. Elle passe en bandeau sous la carte : elle ne masque plus rien
     et reste lisible d'un coup d'œil. */
  .trajectory-map-panels article > div { min-height: 250px; padding-bottom: 0 }
  .trajectory-map-selected-value {
    position: static;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 8px 12px;
  }
  .trajectory-map-selected-value strong { font-size: var(--fs-500) }
  .trajectory-map-selected-value span { max-width: none }
}

/* ---------------------------------------------------------------------------
   Les graphiques vivent dans une colonne dont la largeur ne suit pas celle de
   l'écran : à 1024 px de fenêtre, le panneau ne fait que 500 px. Les points de
   rupture en largeur de fenêtre ne pouvaient donc pas les protéger — d'où un
   débordement horizontal de la page entière à 1024 px, et un autre à 768 px.
   On interroge la largeur du conteneur, pas celle de la fenêtre : la règle
   vaut alors pour toutes les tailles d'écran, y compris celles qu'on n'a pas
   testées. */
.plain-graphic, .idf-demo { container-type: inline-size }

@container (max-width: 560px) {
  .function-graphic > div,
  .twins-graphic > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .function-graphic > div:last-of-type,
  .twins-graphic > div:last-child { border-bottom: 0 }
  .function-graphic i, .twins-graphic i,
  .function-graphic strong, .twins-graphic strong,
  .function-graphic span, .twins-graphic span { grid-column: 1 }
}

@container (max-width: 700px) {
  .trajectory-map-benchmarks {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .trajectory-map-benchmarks > div { margin-bottom: 12px }
  .trajectory-map-benchmarks > p {
    min-height: 58px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .trajectory-map-benchmarks > small { margin-top: 12px }

  .trajectory-map-verdict {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
  }
  .trajectory-map-verdict-place,
  .trajectory-map-verdict > p { grid-column: 1 / -1 }
  .trajectory-map-verdict-change { padding-left: 0; border-left: 0 }
}

/* Le pas d'un point au suivant vit lui aussi dans la colonne étroite : à
   340 px, ses trois pistes en réclamaient 352. Elles peuvent désormais se
   réduire, et le libellé passe à la ligne plutôt que de pousser la grille. */
.evidence-stepper { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) }
.evidence-step > span:last-child { min-width: 0 }
.evidence-step strong { overflow-wrap: anywhere }

/* L'en-tête de la discussion demandait 190 + 420 + 260 px de pistes plus deux
   gouttières de 6vw : 993 px pour 942 disponibles à 1024 px de fenêtre. La page
   entière défilait alors de 10 px sur le côté. Les pistes gardent leurs
   proportions mais peuvent se réduire.
   La requête reprend le seuil du repli à une colonne (980 px) : sans elle,
   cette règle, plus tardive et de même spécificité, écraserait le repli. */
@media (min-width: 981px) {
  .discussion-heading {
    grid-template-columns: minmax(0, .42fr) minmax(0, 1.08fr) minmax(0, .62fr);
  }
}

@container (max-width: 560px) {
  /* À 1024 px de fenêtre, la colonne de preuve ne fait que 500 px : la liste
     de convergence s'y rangeait encore en deux colonnes, laissant 75 px de
     large au texte de chaque constat. Une colonne, et le libellé respire. */
  .convergence-graphic ol { grid-template-columns: minmax(0, 1fr); padding-right: 0 }
  .convergence-graphic li {
    min-height: 106px;
    grid-template-columns: 30px minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 16px 0;
    border-right: 0;
  }
  /* Le libellé « Pas de rendez-vous » dépassait sa case de 16 px. */
  .ratio-graphic > div { padding: 16px 12px }
  .ratio-graphic span { letter-spacing: .04em; overflow-wrap: anywhere }
}

/* La fiche départementale vit dans une colonne de 340 px sur la page régionale.
   Ses quatre tuiles de chiffres en réclamaient 504 : la quatrième sortait
   purement et simplement du cadre à 1024 px de fenêtre. Le repli à deux
   colonnes existait, mais seulement en dessous d'une largeur d'écran donnée —
   or c'est la colonne, pas l'écran, qui est étroite ici. */
.department-focus { container-type: inline-size }

@container (max-width: 520px) {
  .department-focus-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* Même cause côté explorateur d'indicateurs. */
.indicator-explorer-controls > * { min-width: 0 }
.indicator-explorer-controls { container-type: inline-size }
@container (max-width: 260px) {
  .indicator-explorer-controls { gap: 10px }
}

/* Deux légendes dépassaient encore leur cadre de quelques pixels dans la
   colonne étroite : les étiquettes peuvent se couper plutôt que pousser. */
.bivariate-legend, .quadrant-distribution { min-width: 0 }
.bivariate-legend *, .quadrant-distribution * { min-width: 0; overflow-wrap: anywhere }

/* L'animation d'entrée des trois cases décale de 16 px vers la droite. Tant
   qu'elle n'est pas terminée — et elle est pilotée par le défilement, donc
   elle reste en cours une bonne partie du temps — la dernière case sort du
   cadre : 296 px de contenu pour 280 px de large à 320 px de fenêtre.
   `clip` supprime le débordement sans créer de conteneur de défilement, ce que
   `hidden` aurait fait. */
.ratio-graphic { overflow-x: clip }

/* ---------------------------------------------------------------------------
   Contraste — deux manquements au 4,5:1 exigé pour du texte de 12 px.

   1. La démonstration Île-de-France est sur fond clair (#edf2f8) mais reprenait
      #aeb8b3, une teinte prévue pour les surfaces nuit : 1,81:1, illisible.
      Le gris de texte du site donne 5,24:1 sur ce fond. */
.idf-demo-toolbar > div:first-child span,
.idf-demo-toolbar button,
.idf-demo-source { color: var(--muted) }
/* Le message de chargement, lui, est posé sur la carte en fond nuit : il lui
   faut une teinte claire, pas le gris de texte. 8,2:1 sur rgb(15,23,42). */
.idf-demo-loading { color: #b8c2d1 }

/* 2. Le blanc sur --data-cool (#437fb3) plafonne à 4,26:1. Ces trois surfaces
      sont des aplats d'interface, pas des marques de donnée : les assombrir ne
      déplace aucune valeur encodée. #2f6496 donne 6,21:1. */
:root { --data-cool-ink: #2f6496 }
.gateway-door-action.is-secondary,
.ratio-graphic > div.is-active,
.contrast-graphic .is-alert { background: var(--data-cool-ink) }

/* ---------------------------------------------------------------------------
   Trois autres manquements au contraste, trouvés route par route.

   1. Les initiales « NN » de la page « Pourquoi » : `.about-avatar` pose bien
      color:#fff, mais `.about-author span` (0,1,1) l'emporte sur (0,1,0) et
      repeint en gris. Le résultat : 1,03:1, des initiales invisibles. */
.about-author span.about-avatar { color: #ffffff }

/* 2. L'explorateur d'indicateurs est sur fond nuit (rgb 13,26,48) : le gris de
      texte y tombe à 2,95:1, aussi bien pour le libellé « Périmètre » que pour
      la précision d'échelle de chaque onglet. Une teinte claire donne 9,7:1. */
.indicator-scope > span,
.indicator-tabs button small { color: #b8c2d1 }

/* 3. La matrice bivariée : le blanc ne passait ni sur l'orange (3,20:1) ni sur
      le bleu (4,42:1). L'orange reçoit de l'encre — 5,58:1 — et le bleu a été
      assombri d'un cran dans la palette elle-même (#2a78d6 → #2670cb, 4,93:1),
      côté carte comme côté légende, pour que les deux restent d'accord. */
.bivariate-matrix button.is-declin { color: var(--ink) }

/* Les deux liens autonomes du pied de page mesuraient 19 px de haut : sous le
   minimum de 24 px du critère 2.5.8. L'exception « lien dans une phrase » ne
   s'applique pas, ils sont isolés. Le lien de contact, lui, est dans une
   phrase : il reste tel quel. */
.site-footer a:not(p a) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Mêmes liens autonomes trop courts sur la page des mentions légales. */
.license-list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* 58 + 190 px de pistes plus 10 px de gouttière = 258 px, pour 255 disponibles
   dans la colonne régionale : la matrice bivariée dépassait de 3 px. */
.bivariate-legend { grid-template-columns: 58px minmax(0, 1fr) }