/* ==========================================================================
   Accès et transports — /acces-transports/
   Parcours : on choisit d’abord un mode (train ou voiture, à parité visuelle),
   puis on se situe (bandes de proximité, valables pour n’importe quelle ville
   de départ). Aucun tableau à scroll, aucune carte à la géographie inventée.
   Sections : hero + repères · 01 modes · 02 proximité · 03 avant le départ
              · 04 derniers mètres · 05 sans voiture · 06 FAQ · 07 final
   ========================================================================== */

.page-access {
  --night: #080a0e;
  --deep: #0d1118;
  --pearl: #f0efec;
  --silver: #aeb8c8;
  --rail: #84b6dc;
  --line: rgba(184, 194, 209, 0.25);
  color: rgba(255, 255, 255, 0.84);
  background: var(--night);
}

.page-access .section {
  padding-block: clamp(76px, 9vw, 132px);
}

/* --- Hero ---------------------------------------------------------------- */

.access-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.82fr);
  align-items: center;
  gap: clamp(42px, 6vw, 100px);
  min-height: min(820px, 100svh);
  padding: calc(var(--header-h) + 60px) var(--page-x) 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 43%, rgba(124, 140, 166, 0.17), transparent 30%),
    linear-gradient(135deg, #07090c, #10151d 62%, #080a0e);
}

.route-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 31% 13%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.4px),
    radial-gradient(circle at 57% 31%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 17%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 94% 39%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px);
}

.route-sky i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px #fff;
  animation: accessTwinkle 3s ease-in-out infinite alternate;
}

.route-sky i:nth-child(1) { top: 22%; left: 18%; }
.route-sky i:nth-child(2) { top: 12%; left: 67%; animation-delay: 1s; }
.route-sky i:nth-child(3) { top: 62%; left: 92%; animation-delay: 2s; }

.route-sky b {
  position: absolute;
  top: 20%;
  right: 12%;
  width: 120px;
  height: 1px;
  opacity: 0.45;
  transform: rotate(-24deg);
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: shoot 7s ease-in-out infinite;
}

.access-hero-copy,
.departure-board {
  position: relative;
  z-index: 2;
}

.access-hero-copy { max-width: 760px; }

.access-hero h1 {
  margin: 18px 0 25px;
  color: #f4f2ee;
  font-family: var(--sans);
  font-size: clamp(44px, 4.7vw, 78px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.access-hero h1 em,
.compact-heading h2 em,
.last-copy h2 em,
.without-car h2 em,
.access-final h2 em {
  color: var(--silver);
  font-family: var(--serif);
  font-weight: 300;
}

.access-hero-copy > p:not(.section-label) {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(16px, 1.15vw, 19px);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 32px;
}

/* --- Panneau de départ (hero) : train et voiture à parité ----------------- */

.departure-board {
  border: 1px solid rgba(205, 214, 227, 0.27);
  background: rgba(4, 7, 11, 0.78);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(12px);
}

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--silver);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.board-head small { color: rgba(255, 255, 255, 0.42); }

.board-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.board-compare > div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 24px 26px;
}

.board-compare > div:first-child { border-right: 1px solid var(--line); }

.board-compare i {
  color: var(--silver);
  font-family: var(--sans);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.board-compare strong {
  font-family: var(--serif);
  font-size: clamp(21px, 1.9vw, 28px);
  font-weight: 400;
  line-height: 1.05;
}

.board-compare small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  line-height: 1.5;
}

.board-foot {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px 16px;
  align-items: baseline;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(126, 165, 216, 0.14), rgba(112, 105, 168, 0.09));
}

.board-foot i {
  color: var(--silver);
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.board-foot div {
  display: grid;
  gap: 6px;
}

.board-foot strong {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.1;
}

.board-foot small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  line-height: 1.5;
}

.departure-board > p {
  margin: 0;
  padding: 14px 24px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.5;
}

/* --- Bande de repères ---------------------------------------------------- */

.access-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
  background: #0c1016;
}

.access-proof article {
  display: grid;
  gap: 7px;
  padding: 25px clamp(18px, 3vw, 50px);
  border-right: 1px solid var(--line);
}

.access-proof article:last-child { border-right: 0; }

.access-proof small {
  color: var(--silver);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.access-proof strong { font-weight: 500; }

/* --- Titres de section --------------------------------------------------- */

.compact-heading {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(440px, 1.2fr);
  column-gap: clamp(45px, 8vw, 130px);
  align-items: end;
  margin-bottom: clamp(42px, 6vw, 82px);
}

.compact-heading .section-label { align-self: start; }

.compact-heading h2,
.last-copy h2,
.without-car h2,
.access-final h2 {
  margin: 0;
  color: inherit;
  font-family: var(--sans);
  font-size: clamp(40px, 4.5vw, 70px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.compact-heading > p:last-child {
  grid-column: 2;
  max-width: 650px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.62);
}

/* --- 01 · Train ou voiture, côte à côte -----------------------------------
   Les deux colonnes portent les mêmes composants dans le même ordre : le
   regard compare ligne à ligne au lieu de lire deux blocs successifs.
   -------------------------------------------------------------------------- */

.modes { background: #0a0d12; }

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

.mode {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: clamp(30px, 4vw, 60px);
  background:
    radial-gradient(circle at 20% 12%, rgba(184, 195, 211, 0.08), transparent 42%),
    #0d1117;
}

.mode + .mode { border-left: 1px solid var(--line); }

.mode-kicker {
  margin: 0;
  color: var(--silver);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mode h3 {
  margin: -12px 0 0;
  color: #f2f4f7;
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1;
}

.mode-figure {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-bottom: 4px;
}

.mode-figure strong {
  color: #eef1f5;
  font-size: clamp(23px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mode-figure span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
}

/* Chaîne d’étapes : une ligne ferroviaire est une ligne, un itinéraire aussi.
   Le flex-wrap évite tout débordement quelle que soit la largeur. */
.mode-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mode-line li {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Connecteur porté par l’élément précédent : si la chaîne passe à la ligne,
   elle se termine par un trait de continuation plutôt que d’en commencer un. */
.mode-line li:not(:last-child)::after {
  content: "";
  width: clamp(11px, 1.2vw, 20px);
  height: 1px;
  margin: 0 9px;
  background: rgba(174, 184, 200, 0.42);
}

.mode-line .is-here {
  padding-bottom: 6px;
  border-bottom: 1px solid #f2f4f7;
  color: #f2f4f7;
}

.mode-facts {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mode-facts li {
  padding: 17px 0;
  border-top: 1px solid var(--line);
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  line-height: 1.65;
}

.mode-facts strong {
  color: #e9edf2;
  font-weight: 500;
}

.mode-verdict {
  margin: 0;
  color: var(--silver);
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.32;
}

.mode .button {
  align-self: flex-start;
  margin-top: auto;
}

/* --- 02 · Carte de situation ----------------------------------------------
   Villes projetées depuis leurs coordonnées réelles (équirectangulaire
   corrigée par cos(latitude), une seule échelle X/Y : aucune déformation).
   La géographie porte l’information ; les anneaux de temps de l’ancienne
   version sont supprimés — c’est eux qui contredisaient les positions.
   Les libellés grossissent et se raréfient à mesure que l’écran rétrécit,
   pour qu’aucun texte ne descende sous le seuil de lisibilité.
   -------------------------------------------------------------------------- */

.access-map {
  margin: 0;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 62% 58%, rgba(96, 122, 156, 0.16), transparent 58%),
    #070a0f;
}

/* Enfant direct : sinon la règle attrape aussi les pictogrammes de la légende,
   qui sont des SVG imbriqués dans le figcaption. */
.access-map > svg {
  display: block;
  width: 100%;
  height: auto;
}

.map-seine path,
.map-roads path,
.map-rail {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seine-large {
  stroke: #6f9dc4;
  stroke-width: 11;
  stroke-opacity: 0.13;
}

/* Le fleuve reste une texture de fond : la voie ferrée suit le même couloir,
   et deux traits de même intensité rendraient le tout illisible. */
.seine-fine {
  stroke: #8ab4d6;
  stroke-width: 1.4;
  stroke-opacity: 0.3;
}

.map-roads .road {
  stroke: #d2d8e1;
  stroke-width: 2.6;
  stroke-opacity: 0.5;
}

.map-roads .road-branch {
  stroke-width: 1.8;
  stroke-opacity: 0.34;
}

.map-rail {
  stroke: var(--rail);
  stroke-width: 2.2;
  stroke-opacity: 0.85;
  stroke-dasharray: 9 7;
}

/* Les pictogrammes accolés aux durées sont des <use> : le contenu cloné n’est
   pas atteint par les sélecteurs CSS, seules les propriétés héritées passent.
   D’où `fill` posé sur le conteneur, et les évidements (vitres, jantes) fixés
   par attribut de présentation dans les <defs>. */
.ico { fill: currentColor; }

.ico-rail { color: var(--rail); }
.ico-road { color: rgba(214, 220, 229, 0.85); }

.map-water-label {
  fill: #7ba3c6;
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  opacity: 0.72;
}

.map-city circle {
  fill: #070a0f;
  stroke: #e2e9f1;
  stroke-width: 2;
}

.city-name {
  fill: #eef2f7;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
}

.city-major .city-name { font-size: 19px; }

.city-time {
  fill: rgba(255, 255, 255, 0.58);
  font-family: var(--sans);
  font-size: 13px;
}

.map-destination .dest-dot {
  fill: #f2f6fb;
  stroke: none;
}

.map-destination .dest-ring {
  fill: none;
  stroke: #cfe0f2;
  stroke-width: 1.2;
  stroke-opacity: 0.65;
}

.dest-name {
  fill: #fff;
  font-family: var(--sans);
  font-size: 29px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.dest-sub {
  fill: #a9c4dd;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.access-map figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 2.6vw, 40px);
  padding: 17px clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.06em;
}

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

.key::before {
  content: "";
  width: 26px;
  height: 2px;
  flex: none;
}

.key-icon {
  width: 24px;
  height: 17px;
  margin-right: -2px;
  flex: none;
}

.key-icon path,
.key-icon circle,
.key-icon rect { fill: currentColor; }

.key-icon .glyph-cut { fill: #070a0f; }

.key-road::before { background: rgba(210, 216, 225, 0.6); }
.key-road .key-icon { color: rgba(210, 216, 225, 0.75); }
.key-rail::before { background: repeating-linear-gradient(90deg, var(--rail) 0 6px, transparent 6px 10px); }
.key-rail .key-icon { color: var(--rail); }
.key-seine::before { background: rgba(138, 180, 214, 0.55); }

.key-note { color: rgba(255, 255, 255, 0.4); }

.map-more {
  max-width: 1000px;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
}

.map-more p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.85;
}

.map-more strong {
  color: #e9edf2;
  font-weight: 500;
}

.map-more a {
  border-bottom: 1px solid rgba(174, 184, 200, 0.45);
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.map-more a:hover,
.map-more a:focus-visible {
  border-color: #fff;
  color: #fff;
}

/* --- 03 · Avant le départ ------------------------------------------------- */

.section-dark { background: #080a0e; }

.travel-check {
  color: #11151c;
  background: #dfe2e6;
}

.travel-check .compact-heading h2 { color: #11151c; }
.travel-check .compact-heading h2 em { color: #687488; }
.travel-check .compact-heading > p:last-child { color: #59616d; }

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(16, 20, 27, 0.18);
}

.check-grid article {
  padding: clamp(30px, 4vw, 54px);
  border-right: 1px solid rgba(16, 20, 27, 0.18);
}

.check-grid article:last-child { border-right: 0; }

.check-grid span {
  color: #687488;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.check-grid h3 {
  margin: 22px 0 14px;
  font: 400 clamp(27px, 2.6vw, 38px) var(--serif);
}

.check-grid p {
  margin: 0;
  color: #59616d;
}

/* --- 04 · Les derniers mètres --------------------------------------------- */

.last-metres {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(48px, 8vw, 130px);
  align-items: center;
  color: #10141b;
  background: var(--pearl);
}

.walk-visual {
  display: grid;
  justify-content: center;
  gap: 0;
  padding: clamp(44px, 5vw, 72px) clamp(26px, 3vw, 44px);
  border: 1px solid rgba(16, 20, 27, 0.16);
  background: radial-gradient(circle at 30% 40%, rgba(115, 130, 154, 0.14), transparent 60%);
}

.walk-point {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  margin: 0;
}

.walk-point i {
  grid-row: span 2;
  justify-self: center;
  width: 11px;
  height: 11px;
  border: 1px solid #5f6c80;
  border-radius: 50%;
  background: var(--pearl);
}

.walk-point b {
  font-family: var(--serif);
  font-size: clamp(23px, 2.5vw, 31px);
  font-weight: 400;
  line-height: 1.05;
}

.walk-point em {
  color: #6c7484;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.walk-end i {
  border-color: #10141b;
  background: #10141b;
}

.walk-path {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 22px 0;
}

.walk-path::before {
  content: "";
  justify-self: center;
  width: 1px;
  height: 100%;
  min-height: 62px;
  background: repeating-linear-gradient(180deg, #7a8596 0 5px, transparent 5px 11px);
}

.walk-path span {
  color: #4d5566;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.last-copy h2 { color: #10141b; }
.last-copy h2 em { color: #697589; }

.last-copy > p:not(.section-label) {
  max-width: 720px;
  color: #515865;
}

.last-copy ol {
  list-style: none;
  margin: 35px 0 0;
  padding: 0;
  border-top: 1px solid rgba(16, 20, 27, 0.2);
}

.last-copy li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 20px;
  padding: 21px 0;
  border-bottom: 1px solid rgba(16, 20, 27, 0.2);
}

.last-copy li > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #7a8596;
  border-radius: 50%;
  font-size: 11px;
}

.last-copy li strong { font: 400 24px var(--serif); }

.last-copy li p {
  margin: 6px 0 0;
  color: #5e6470;
}

/* --- 05 · Vernon sans voiture --------------------------------------------- */

.without-car {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(50px, 8vw, 130px);
  align-items: center;
}

.without-car > div > p:not(.section-label) {
  max-width: 650px;
  color: rgba(255, 255, 255, 0.62);
}

.without-car > div > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}

.without-car figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
}

.without-car img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition:
    filter 0.5s ease,
    transform 0.7s var(--ease);
}

.without-car figure:hover img {
  filter: grayscale(0.3);
  transform: scale(1.025);
}

/* --- 06 · FAQ ------------------------------------------------------------- */

.access-faq {
  color: #11151c;
  background: var(--pearl);
}

.access-faq .compact-heading { margin-bottom: 45px; }
.access-faq .compact-heading h2 em { color: #697589; }

.access-accordion { border-top: 1px solid rgba(16, 20, 27, 0.2); }

.access-accordion details { border-bottom: 1px solid rgba(16, 20, 27, 0.2); }

.access-accordion summary {
  position: relative;
  padding: 24px 55px 24px 0;
  cursor: pointer;
  list-style: none;
  font: 400 clamp(21px, 2vw, 29px) var(--serif);
}

.access-accordion summary::-webkit-details-marker { display: none; }

.access-accordion summary::after {
  content: "+";
  position: absolute;
  right: 10px;
  color: #4d5666;
}

.access-accordion details[open] summary::after { content: "−"; }

.access-accordion details p {
  max-width: 820px;
  margin: 0;
  padding: 0 0 25px;
  color: #4f5765;
}

.access-accordion a { color: #26364f; }

/* --- 07 · Final ----------------------------------------------------------- */

.access-final {
  position: relative;
  overflow: hidden;
  padding: clamp(85px, 11vw, 165px) clamp(30px, 11vw, 210px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(116, 132, 158, 0.17), transparent 33%),
    #07090d;
}

.access-final > div:last-child {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: auto;
}

.access-final p:not(.section-label) {
  max-width: 660px;
  margin: 24px auto;
  color: rgba(255, 255, 255, 0.65);
}

.access-final > div > div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

/* .button-outline-light n’est pas défini dans styles.css : chaque page sombre
   porte sa propre déclinaison. */
.access-final .button-outline-light {
  border-color: rgba(240, 239, 236, 0.42);
  color: var(--pearl);
  background: transparent;
}

.access-final .button-outline-light:hover,
.access-final .button-outline-light:focus-visible {
  border-color: #fff;
  color: #fff;
}

.access-final small {
  display: block;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Animations ----------------------------------------------------------- */

@keyframes accessTwinkle {
  to {
    opacity: 0.25;
    transform: scale(0.7);
  }
}

@keyframes shoot {
  0%, 78%, 100% {
    opacity: 0;
    transform: translate(0, 0) rotate(-24deg);
  }
  82% { opacity: 0.6; }
  90% {
    opacity: 0;
    transform: translate(-180px, 90px) rotate(-24deg);
  }
}

/* --- Adaptations ---------------------------------------------------------- */

@media (max-width: 1079px) {
  .access-hero { grid-template-columns: 1fr; }
  .departure-board { max-width: 640px; }
  .compact-heading { grid-template-columns: 1fr; }
  .compact-heading > p:last-child { grid-column: 1; }
  .last-metres,
  .without-car { grid-template-columns: 1fr; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode + .mode {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .check-grid { grid-template-columns: 1fr; }
  .check-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(16, 20, 27, 0.18);
  }
  .check-grid article:last-child { border-bottom: 0; }
  .access-proof { grid-template-columns: 1fr 1fr; }
  .access-proof article:nth-child(2) { border-right: 0; }
  .access-proof article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

/* Carte — palier intermédiaire : on retire les villes d’appoint et on
   agrandit le reste, le SVG étant réduit par la largeur de page. */
@media (max-width: 1099px) {
  .city-tertiaire { display: none; }
  .city-name { font-size: 22px; }
  .city-major .city-name { font-size: 26px; }
  .city-time { font-size: 18px; }
  .map-water-label { font-size: 24px; }
  .dest-name { font-size: 38px; }
  .dest-sub { font-size: 15px; }
  .map-city circle { r: 8px; }
  .map-destination .dest-dot { r: 11px; }
  .map-destination .dest-ring { r: 22px; }
  .seine-large { stroke-width: 15; }
  .seine-fine { stroke-width: 2.2; }
  .map-roads .road { stroke-width: 3.6; }
  .map-rail {
    stroke-width: 3;
    stroke-dasharray: 12 9;
  }
}

/* Carte — palier mobile. Réduire la carte entière donnerait un ruban de
   150 px de haut aux libellés illisibles : on la recadre plutôt sur la zone
   utile (Rouen → Vernon → Paris) en agrandissant le SVG et en le décalant
   dans un conteneur qui rogne. Caen et Le Havre sortent du cadre mais
   restent cités dans .map-more. */
@media (max-width: 759px) {
  .access-map { overflow: hidden; }
  .access-map > svg {
    width: 168%;
    margin-left: -67.5%;
  }
  .city-tertiaire,
  .city-times,
  .map-water-label { display: none; } /* le libellé du fleuve tombe hors cadre */
  .city-name,
  .city-major .city-name { font-size: 34px; }
  .dest-name { font-size: 46px; }
  .dest-sub { font-size: 22px; }
  .map-city circle {
    r: 10px;
    stroke-width: 3.4;
  }
  .map-destination .dest-dot { r: 14px; }
  .map-destination .dest-ring {
    r: 29px;
    stroke-width: 2.2;
  }
  .seine-large { stroke-width: 21; }
  .seine-fine { stroke-width: 3; }
  .map-roads .road { stroke-width: 4.8; }
  .map-roads .road-branch { stroke-width: 3.2; }
  .map-rail {
    stroke-width: 4.2;
    stroke-dasharray: 15 11;
  }
}

@media (max-width: 620px) {
  .access-hero { padding-top: calc(var(--header-h) + 48px); }
  .access-hero h1 { font-size: clamp(39px, 12vw, 56px); }
  .board-compare { grid-template-columns: 1fr; }
  .board-compare > div:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .access-proof { grid-template-columns: 1fr; }
  .access-proof article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .compact-heading h2,
  .last-copy h2,
  .without-car h2,
  .access-final h2 { font-size: clamp(36px, 11vw, 52px); }
  .mode { padding: 30px 22px; }
  .walk-visual { padding: 30px 22px; }
  .last-copy li { grid-template-columns: 32px minmax(0, 1fr); }
  .without-car { gap: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .route-sky i,
  .route-sky b { animation: none; }
  .without-car img { transition: none; }
}

/* V10.3 — la checklist reste claire ; l’arrivée et les réponses passent en ciel nocturne */
.last-metres,
.access-faq {
  color: #f4f2ed;
  background:
    radial-gradient(circle at 82% 18%, rgba(105, 122, 147, 0.16), transparent 29%),
    linear-gradient(145deg, #151a22, #0a0d12 58%, #07090c);
}
.last-metres h2,
.walk-point b,
.access-faq .compact-heading h2,
.access-accordion summary { color: #f6f3ed; }
.last-metres p,
.walk-point em,
.access-faq .compact-heading > p:last-child,
.access-accordion details p { color: rgba(255, 255, 255, 0.66); }
.walk-visual,
.access-accordion,
.access-accordion details {
  border-color: rgba(255, 255, 255, 0.18);
}
.walk-visual {
  background: radial-gradient(circle at 30% 40%, rgba(115, 130, 154, 0.13), transparent 60%);
}
.walk-point i {
  border-color: #aebbd0;
  background: #111720;
}
.walk-path { background: transparent; }
.walk-path::before {
  background: repeating-linear-gradient(180deg, #aebbd0 0 5px, transparent 5px 11px);
}
.access-faq .compact-heading h2 em,
.access-accordion summary::after,
.access-accordion a { color: #b8c5d8; }