/* ==========================================================================
   Bottin Jonction Argenteuil — maquette v3 « Aiguillage »
   Feuille unique. Toute valeur dérive des jetons ci-dessous.
   Parti : signalétique de transport (grille stricte, aplats, filets, aucune
   ombre). Jaune = action seulement. Couleur de famille = « couleur de ligne ».
   Signature : la ligne des 9 municipalités (voie + stations, Lachute = jonction).
   ========================================================================== */

/* ---------- 1. Jetons ---------------------------------------------------- */
:root {
  /* Primitives (matière) */
  --c-graphite: #16181B;
  --c-graphite-2: #1F2226;
  --c-anthracite: #3D4148;
  --c-ardoise: #636871;
  --c-acier: #8A8D93;
  --c-brume: #B9BCC2;
  --c-filet: #D9D9D4;
  --c-filet-doux: #E7E7E3;
  --c-filet-nuit: #33373D;
  --c-calcaire: #F3F3F0;
  --c-craie: #F8F8F6;
  --c-blanc: #FFFFFF;
  --c-jaune: #EBBF46;
  --c-jaune-ombre: #D9AA2E;
  --c-jaune-pale: #FAF0CF;

  /* Couleurs de famille (texte blanc AA sur chacune) */
  --f-manger: #A3242B;
  --f-construction: #94560F;
  --f-tourisme: #1E4E6E;
  --f-sante: #9A2F5C;
  --f-commerces: #0E5C5A;
  --f-services: #5E2F6B;
  --f-auto: #3E4A8C;
  --f-terre: #4F5B16;
  --f-communaute: #36503F;

  /* Sémantiques (rôle) — seules consommées par les composants */
  --bg: var(--c-calcaire);
  --surface: var(--c-blanc);
  --surface-2: var(--c-craie);
  --texte: var(--c-graphite);
  --texte-2: var(--c-anthracite);
  --muted: var(--c-ardoise);
  --bordure: var(--c-filet);
  --bordure-douce: var(--c-filet-doux);
  --bordure-forte: var(--c-acier);
  --action: var(--c-jaune);
  --action-survol: var(--c-jaune-ombre);
  --action-texte: var(--c-graphite);
  --inv-bg: var(--c-graphite);
  --inv-bg-2: var(--c-graphite-2);
  --inv-texte: var(--c-blanc);
  --inv-muted: var(--c-brume);
  --inv-bordure: var(--c-filet-nuit);
  --avis-bg: var(--c-jaune-pale);
  --focus: var(--c-graphite);
  --focus-inv: var(--c-jaune);
  --famille: var(--c-graphite); /* repointée par page ou par bloc */

  /* Typographie : Archivo seule, axe de chasse pour la signalétique */
  --police: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chasse-titre: 84%;
  --chasse-semi: 92%;
  --t-xs: 0.75rem;     /* 12 */
  --t-sm: 0.875rem;    /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-md: 1.125rem;    /* 18 */
  --t-lg: 1.25rem;     /* 20 */
  --t-xl: 1.5625rem;   /* 25 */
  --t-2xl: 1.953rem;   /* 31 */
  --t-3xl: 2.441rem;   /* 39 */
  --t-4xl: 3.052rem;   /* 49 */

  /* Espacement (base 4) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Rayons, mise en page, mouvement */
  --r-1: 2px; --r-2: 4px; --r-3: 6px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --largeur: 1240px;
  --bord-gauche: max(var(--gouttiere), calc((100cqw - var(--largeur)) / 2)); /* cqw : .une et .resultats sont des conteneurs */
  --h-entete: 68px;
  --h-outils: 69px;
  --duree: 160ms;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--h-entete) + var(--s-4));
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
[hidden] { display: none !important; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.entete :focus-visible, .une :focus-visible, .section--nuit :focus-visible,
.pied :focus-visible { outline-color: var(--focus-inv); }

.saut {
  position: absolute; left: var(--s-4); top: -120px; z-index: 100;
  background: var(--action); color: var(--action-texte);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  font-weight: 600; text-decoration: none;
}
.saut:focus { top: var(--s-3); }

.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.ico { width: 20px; height: 20px; flex: none; }
.ico--sm { width: 16px; height: 16px; }
.ico--lg { width: 24px; height: 24px; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 3. Typographie ---------------------------------------------- */
.titre-1, .titre-2, .titre-3 {
  font-stretch: var(--chasse-titre);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.02;
  text-wrap: balance;
}
.titre-1 { font-size: clamp(2.375rem, 1.55rem + 3.4vw, 4.25rem); }
.titre-2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); line-height: 1.06; }
.titre-3 { font-size: var(--t-xl); line-height: 1.12; letter-spacing: -0.012em; }
.chapeau {
  font-size: var(--t-md); line-height: 1.5; color: var(--texte-2);
  max-width: 58ch; text-wrap: pretty;
}
.etiquette {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase; line-height: 1.2; color: var(--texte-2);
}
.pastille {
  width: 10px; height: 10px; flex: none;
  border-radius: var(--r-1); background: var(--famille);
}
.pastille--jaune { background: var(--action); }
.lien-fleche {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  font-weight: 600; text-decoration: none; color: var(--texte);
  border-bottom: 1px solid currentColor;
  transition: gap var(--duree) var(--courbe);
}
.lien-fleche:hover { gap: 10px; }
.lien-fleche .ico { width: 18px; height: 18px; }

/* ---------- 4. Boutons --------------------------------------------------- */
.btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--btn-h); padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-2);
  font-size: var(--t-base); font-weight: 600; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 18px; height: 18px; }
.btn--action { background: var(--action); color: var(--action-texte); }
.btn--action:hover { background: var(--action-survol); }
.btn--contour { background: var(--surface); color: var(--texte); border-color: var(--bordure-forte); }
.btn--contour:hover { border-color: var(--texte); background: var(--surface-2); }
.btn--sombre { background: var(--inv-bg); color: var(--inv-texte); }
.btn--sombre:hover { background: var(--c-anthracite); }
.btn--nuit { background: transparent; color: var(--inv-texte); border-color: rgba(255, 255, 255, 0.4); }
.btn--nuit:hover { border-color: var(--inv-texte); background: rgba(255, 255, 255, 0.06); }
.btn--lg { --btn-h: 56px; padding: 0 var(--s-6); font-size: var(--t-md); }
.btn--sm { --btn-h: 40px; padding: 0 var(--s-4); font-size: var(--t-sm); }
.btn--icone { padding: 0; width: var(--btn-h); }
.btn--plein { width: 100%; }
.btn-texte {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  padding: 0 10px; border: 1px solid var(--bordure); border-radius: var(--r-2);
  background: var(--surface); font-size: var(--t-sm); font-weight: 550; color: var(--texte-2);
  transition: border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.btn-texte:hover { border-color: var(--bordure-forte); color: var(--texte); }
.btn-texte .ico { width: 16px; height: 16px; }

/* ---------- 5. En-tête --------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--inv-bg); color: var(--inv-texte);
  border-bottom: 1px solid var(--inv-bordure);
}
.entete__barre { display: flex; align-items: center; gap: var(--s-5); height: var(--h-entete); }
.entete__logo { display: block; flex: none; margin-right: auto; }
.entete__logo img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav__lien {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s-3);
  font-size: var(--t-sm); font-weight: 550; color: var(--inv-texte); text-decoration: none;
}
.nav__lien::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 8px;
  height: 2px; background: var(--action);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--duree) var(--courbe);
}
.nav__lien:hover::after, .nav__lien[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { display: none; }
.entete__cta { margin-left: var(--s-2); }
.entete__menu {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  background: transparent; border: 0; border-radius: var(--r-2); color: var(--inv-texte);
}
.entete__menu .ico { width: 24px; height: 24px; }
.entete__menu .ico-fermer { display: none; }

@media (max-width: 899px) {
  .entete__logo img { height: 38px; }
  .nav, .entete__cta { display: none; }
  .entete__menu { display: inline-flex; }
  .entete.est-ouvert .ico-menu { display: none; }
  .entete.est-ouvert .ico-fermer { display: block; }
  .entete.est-ouvert .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: var(--h-entete); left: 0; right: 0;
    padding: var(--s-2) var(--gouttiere) var(--s-6);
    background: var(--inv-bg); border-bottom: 1px solid var(--inv-bordure);
  }
  .entete.est-ouvert .nav__lien {
    min-height: 56px; padding: 0; font-size: var(--t-md);
    border-bottom: 1px solid var(--inv-bordure);
  }
  .nav__lien::after { display: none; }
  .entete.est-ouvert .nav__cta { display: inline-flex; margin-top: var(--s-5); }
}

/* ---------- 6. Une (accueil, ville) : panneau + photo ------------------- */
.une {
  container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--inv-bg); color: var(--inv-texte);
}
.une__photo { position: relative; order: -1; height: clamp(210px, 58vw, 340px); margin: 0; overflow: hidden; }
.une__photo picture { display: block; height: 100%; }
.une__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, 50% 50%); }
.une__plaque {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  display: flex; flex-direction: column; gap: 2px;
  max-width: calc(100% - 2 * var(--s-4));
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-3);
  background: var(--surface); color: var(--texte); border-radius: var(--r-2);
  border-left: 4px solid var(--c-graphite);
}
.une__plaque-lieu { font-size: var(--t-sm); font-weight: 700; font-stretch: var(--chasse-semi); line-height: 1.2; }
.une__plaque-credit { font-size: 11px; color: var(--muted); line-height: 1.3; }
.une__plaque-credit a { color: inherit; }
.une__contenu { padding: var(--s-6) var(--gouttiere) var(--s-7); }
.une .etiquette { color: var(--inv-texte); }
.une__titre { margin-top: var(--s-4); color: var(--inv-texte); }
.une__chapeau { margin-top: var(--s-4); font-size: var(--t-md); line-height: 1.5; color: #E2E3E6; max-width: 50ch; }
.une__chapeau strong { color: var(--inv-texte); font-weight: 650; }

@media (min-width: 1024px) {
  .une {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    min-height: clamp(560px, calc(100vh - var(--h-entete) - 96px), 680px);
  }
  .une__photo { order: 0; grid-column: 2; grid-row: 1; height: auto; }
  .une__contenu {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--s-9) var(--s-8) var(--s-9) var(--bord-gauche);
  }
  .une__plaque { left: var(--s-5); bottom: var(--s-5); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .une { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
  .une__contenu { padding-right: var(--s-7); }
}

/* ---------- 7. Recherche Quoi / Où --------------------------------------- */
.recherche {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
  margin-top: var(--s-6); max-width: 720px; padding: 6px;
  background: var(--surface); color: var(--texte); border-radius: var(--r-3);
}
.recherche__champ {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 64px; padding: 6px var(--s-4) 6px 46px; border-radius: var(--r-2);
}
.recherche__champ + .recherche__champ::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 1px; background: var(--bordure);
}
.recherche__champ > .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.recherche__champ label {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texte-2); line-height: 1.2;
}
.recherche__champ input {
  width: 100%; min-width: 0; padding: 3px 0 0; border: 0; background: transparent;
  font-size: var(--t-md); line-height: 1.3; outline: none;
}
.recherche__champ input::placeholder { color: #6B6F77; opacity: 1; }
.recherche__champ:focus-within { background: var(--surface-2); outline: 2px solid var(--focus); outline-offset: -2px; }
.recherche__champ:focus-within + .recherche__champ::before,
.recherche__champ:focus-within::before { opacity: 0; }
.recherche__bouton { min-height: 64px; padding: 0 var(--s-6); font-size: var(--t-md); }
.recherche__bouton:focus-visible { outline-offset: 2px; }

.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow: auto;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bordure-forte); border-radius: var(--r-2);
}
.suggestions li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-1); cursor: pointer;
}
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--c-calcaire); }
.suggestions .num { color: var(--muted); font-size: var(--t-sm); }

.rapides {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4);
  margin-top: var(--s-4); font-size: var(--t-sm); color: var(--inv-muted);
}
.rapides ul { display: contents; list-style: none; }
.rapides a {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--inv-texte); text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 0.28em;
  transition: text-decoration-color var(--duree) var(--courbe);
}
.rapides a:hover { text-decoration-color: var(--action); }

@media (max-width: 719px) {
  .recherche { grid-template-columns: minmax(0, 1fr); padding: 4px; }
  .recherche__champ { min-height: 60px; }
  .recherche__champ + .recherche__champ::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 1px; }
  .recherche__bouton { min-height: 56px; margin-top: 4px; }
}

/* ---------- 8. Bandeau de chiffres -------------------------------------- */
.chiffres { background: var(--surface); border-bottom: 1px solid var(--bordure); }
.chiffres__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.chiffre { padding: var(--s-6) var(--s-5); border-left: 1px solid var(--bordure); }
.chiffre:first-child { border-left: 0; padding-left: 0; }
.chiffre__valeur {
  display: block; font-size: clamp(1.875rem, 1.4rem + 1.3vw, 2.625rem);
  font-weight: 650; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.chiffre__libelle { display: block; margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.4; color: var(--muted); max-width: 26ch; }
@media (max-width: 719px) {
  .chiffres__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffre { padding: var(--s-5) var(--s-4); }
  .chiffre:nth-child(odd) { border-left: 0; padding-left: 0; }
  .chiffre:nth-child(n + 3) { border-top: 1px solid var(--bordure); }
}

/* ---------- 9. Sections -------------------------------------------------- */
.section { padding-block: clamp(56px, 3rem + 4vw, 112px); }
.section--blanc { background: var(--surface); }
.section--nuit { background: var(--inv-bg); color: var(--inv-texte); }
.section--nuit .etiquette { color: var(--inv-muted); }
.section--nuit .chapeau { color: var(--inv-muted); }
.section + .section--blanc, .section--blanc + .section { border-top: 1px solid var(--bordure); }
.section-tete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.section-tete__texte { max-width: 680px; }
.section-tete .titre-2 { margin-top: var(--s-3); }
.section-tete .chapeau { margin-top: var(--s-3); }

/* ---------- 10. Index des familles -------------------------------------- */
.familles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  list-style: none; background: var(--bordure);
  border: 1px solid var(--bordure); border-radius: var(--r-3); overflow: hidden;
}
.famille { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); background: var(--surface); }
.famille__tete { display: flex; align-items: center; gap: var(--s-3); }
.badge-ligne {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--r-2);
  background: var(--famille); color: #fff;
}
.badge-ligne .ico { width: 20px; height: 20px; }
.famille__nom { flex: 1; font-size: var(--t-lg); font-weight: 650; font-stretch: var(--chasse-semi); letter-spacing: -0.01em; line-height: 1.15; }
.famille__total { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.famille__cats { list-style: none; border-top: 1px solid var(--bordure-douce); }
.famille__cats a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 42px; padding: var(--s-2) 0;
  border-bottom: 1px solid var(--bordure-douce);
  font-size: 0.9375rem; color: var(--texte-2); text-decoration: none;
}
.famille__cats li:last-child a { border-bottom: 0; }
.famille__cats a:hover { color: var(--texte); }
.famille__cats a:hover .famille__cat-nom { text-decoration: underline; }
.famille__cats .num { color: var(--muted); font-size: var(--t-sm); }
.famille__plus {
  display: none; align-self: flex-start; min-height: 40px; padding: 0;
  background: none; border: 0; border-bottom: 1px solid currentColor;
  font-size: var(--t-sm); font-weight: 600; color: var(--texte);
}
@media (max-width: 1023px) { .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .familles { grid-template-columns: minmax(0, 1fr); }
  .famille:not(.est-ouvert) .famille__cats li:nth-child(n + 4) { display: none; }
  .famille__plus { display: inline-flex; align-items: center; }
  .famille.est-ouvert .famille__plus { display: none; }
}

/* ---------- 11. Signature : la ligne des municipalités ------------------ */
.ligne { --rail: var(--c-graphite); --traverse: var(--c-brume); --h-lib: 76px; --h-voie: 40px; }
.ligne__stations { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); list-style: none; }
.ligne__stations::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(100% / 18); right: calc(100% / 18);
  top: calc(var(--h-lib) + (var(--h-voie) - 14px) / 2); height: 14px;
  background:
    linear-gradient(var(--rail), var(--rail)) top / 100% 2px no-repeat,
    linear-gradient(var(--rail), var(--rail)) bottom / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--traverse) 0 2px, transparent 2px 11px);
}
.station {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: var(--h-lib) var(--h-voie) var(--h-lib);
  justify-items: center; padding-inline: 4px;
  text-align: center; text-decoration: none; color: inherit;
}
.station__point {
  grid-row: 2; align-self: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--c-graphite);
  transition: transform var(--duree) var(--courbe), background-color var(--duree) var(--courbe);
}
.station__texte {
  position: relative; grid-row: 1; align-self: end;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-bottom: var(--s-3);
}
.ligne__stations > li:nth-child(even) .station__texte { grid-row: 3; align-self: start; padding: var(--s-3) 0 0; }
.station__texte::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 8px; background: var(--bordure-forte);
}
.ligne__stations > li:nth-child(even) .station__texte::after { top: 0; bottom: auto; }
.station__prefixe { font-size: 11px; font-weight: 550; letter-spacing: 0.04em; color: var(--muted); line-height: 1.2; }
.station__nom { font-size: var(--t-base); font-weight: 650; font-stretch: 88%; line-height: 1.15; overflow-wrap: break-word; }
.station__compte { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.3; }
.station__chevron { display: none; }
.station:hover .station__point { transform: scale(1.2); background: var(--action); }
.station:hover .station__nom { text-decoration: underline; text-underline-offset: 0.2em; }
.station--jonction .station__point { width: 28px; height: 28px; background: var(--action); }
.station--jonction .station__nom { font-weight: 800; }
.station__ici {
  display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: var(--r-1);
  background: var(--c-graphite); color: #fff;
  font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
}
.ligne__bouts {
  display: flex; justify-content: space-between; margin-top: var(--s-2);
  padding-inline: calc(100% / 18 - 12px);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}

@media (max-width: 899px) {
  .ligne__stations { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--bordure-douce); }
  .ligne__stations::before {
    left: 20px; right: auto; top: 28px; bottom: 28px; width: 14px; height: auto;
    background:
      linear-gradient(var(--rail), var(--rail)) left / 2px 100% no-repeat,
      linear-gradient(var(--rail), var(--rail)) right / 2px 100% no-repeat,
      repeating-linear-gradient(180deg, var(--traverse) 0 2px, transparent 2px 11px);
  }
  .station {
    grid-template-rows: none; grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center; justify-items: start; min-height: 60px; padding: var(--s-2) 0;
    text-align: left; border-bottom: 1px solid var(--bordure-douce);
  }
  .station__point { grid-row: 1; grid-column: 1; justify-self: center; }
  .station__texte, .ligne__stations > li:nth-child(even) .station__texte {
    grid-row: 1; grid-column: 2; align-self: center; align-items: flex-start; padding: 0;
  }
  .station__texte::after { display: none; }
  .station__chevron { display: block; grid-column: 3; color: var(--muted); }
  .ligne__bouts { display: none; }
}

/* ---------- 12. Bandeau propriétaire ------------------------------------ */
.proprio__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.proprio .titre-2 { color: var(--inv-texte); margin-top: var(--s-3); }
.proprio .chapeau { margin-top: var(--s-4); }
.proprio__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.points { list-style: none; border-top: 1px solid var(--inv-bordure); }
.points li { display: flex; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--inv-bordure); }
.points .ico { margin-top: 2px; color: var(--action); }
.points strong { display: block; font-weight: 650; color: var(--inv-texte); }
.points span { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--inv-muted); }
@media (max-width: 899px) { .proprio__grille { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

/* ---------- 13. Pied de page -------------------------------------------- */
.pied { background: var(--inv-bg-2); color: var(--inv-muted); font-size: var(--t-sm); border-top: 1px solid var(--inv-bordure); }
.pied__haut {
  display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: var(--s-6); padding-block: var(--s-8) var(--s-7);
}
.pied__logo img { height: 44px; width: auto; }
.pied__desc { margin-top: var(--s-4); max-width: 34ch; line-height: 1.55; }
.pied__titre {
  margin-bottom: var(--s-3); font-size: var(--t-xs); font-weight: 650;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--inv-texte);
}
.pied ul { list-style: none; display: grid; gap: 2px; }
.pied a { display: inline-flex; align-items: center; min-height: 32px; color: var(--inv-muted); text-decoration: none; }
.pied a:hover { color: var(--inv-texte); text-decoration: underline; }
.pied__bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6);
  padding-block: var(--s-5); border-top: 1px solid var(--inv-bordure); font-size: var(--t-xs);
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.pied__credits { margin-top: var(--s-3); max-width: 90ch; font-size: var(--t-xs); line-height: 1.5; color: #9DA1A8; }
.pied__credits a { display: inline; min-height: 0; color: inherit; text-decoration: underline; }
@media (max-width: 899px) {
  .pied__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__marque { grid-column: 1 / -1; }
}

/* ---------- 14. Tête de page (catégorie, fiche) ------------------------- */
.page-tete { background: var(--surface); border-top: 4px solid var(--famille); border-bottom: 1px solid var(--bordure); }
.page-tete__interieur { padding-block: var(--s-6) var(--s-7); }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-bottom: var(--s-5); list-style: none; font-size: var(--t-sm); color: var(--muted); }
.fil li { display: inline-flex; align-items: center; gap: var(--s-2); }
.fil li + li::before { content: "/"; color: var(--bordure-forte); }
.fil a { display: inline-flex; align-items: center; min-height: 28px; color: var(--texte-2); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil [aria-current="page"] { color: var(--texte); font-weight: 550; }
.page-tete .titre-1 { margin-top: var(--s-3); font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); }
.page-tete__rangee { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-7); }
.meta-ligne { display: flex; flex-wrap: wrap; gap: var(--s-2) 0; margin-top: var(--s-4); list-style: none; color: var(--texte-2); }
.meta-ligne li { padding-right: var(--s-4); margin-right: var(--s-4); border-right: 1px solid var(--bordure); line-height: 1.3; }
.meta-ligne li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.meta-ligne strong { color: var(--texte); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- 15. Catégorie : outils, liste, carte ------------------------ */
.outils { position: sticky; top: var(--h-entete); z-index: 30; background: var(--surface); border-bottom: 1px solid var(--bordure); }
.outils__barre { display: flex; align-items: center; gap: var(--s-3); min-height: var(--h-outils); padding-block: var(--s-3); }
.filtre { position: relative; flex: 0 1 280px; }
.filtre > .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.champ {
  width: 100%; height: 44px; padding: 0 var(--s-3);
  background: var(--surface); border: 1px solid var(--bordure-forte); border-radius: var(--r-2);
  font-size: var(--t-base); color: var(--texte);
  transition: border-color var(--duree) var(--courbe);
}
.champ::placeholder { color: #6B6F77; opacity: 1; }
.champ:hover { border-color: var(--c-anthracite); }
.champ:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--c-graphite); }
.filtre .champ { padding-left: 40px; }
select.champ {
  appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.puces {
  display: flex; gap: var(--s-2); flex: 1; min-width: 0; padding-block: 2px;
  overflow-x: auto; scrollbar-width: none; list-style: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.puces::-webkit-scrollbar { display: none; }
.puces li:last-child { padding-right: 32px; }
.puce {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 14px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-2);
  font-size: var(--t-sm); font-weight: 550; color: var(--texte-2);
  transition: border-color var(--duree) var(--courbe), background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.puce:hover { border-color: var(--c-anthracite); color: var(--texte); }
.puce[aria-pressed="true"] { background: var(--c-graphite); border-color: var(--c-graphite); color: #fff; }
.puce .num { color: var(--muted); font-weight: 500; }
.puce[aria-pressed="true"] .num { color: var(--inv-muted); }
.outils__tri { flex: 0 0 176px; }
@media (max-width: 759px) {
  .outils { position: static; }
  .outils__barre { flex-wrap: wrap; row-gap: var(--s-2); }
  .filtre { flex: 1 1 160px; }
  .outils__tri { flex: 0 0 148px; }
  .puces { order: 3; flex: 1 1 100%; }
}

.resultats { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); }
.resultats__liste { padding: var(--s-5) var(--gouttiere) var(--s-9); }
.resultats__entete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-3); font-size: var(--t-sm); color: var(--muted); }
.resultats__entete strong { color: var(--texte); font-weight: 650; }
.resultats__carte { display: none; }
@media (min-width: 1100px) {
  .resultats { grid-template-columns: minmax(0, 1fr) minmax(400px, 42%); }
  .resultats__liste { padding-left: var(--bord-gauche); padding-right: var(--s-7); }
  .resultats__carte {
    display: block; position: sticky; top: calc(var(--h-entete) + var(--h-outils));
    height: calc(100vh - var(--h-entete) - var(--h-outils));
    border-left: 1px solid var(--bordure);
  }
}
.carte { width: 100%; height: 100%; background: #E6E6E2; }

.liste-resultats { list-style: none; border-top: 2px solid var(--c-graphite); counter-reset: none; }
.resultat {
  position: relative;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4);
  align-items: start; padding: var(--s-5) var(--s-3) var(--s-5) var(--s-2);
  border-bottom: 1px solid var(--bordure);
  transition: background-color var(--duree) var(--courbe);
}
.resultat:hover, .resultat:focus-within, .resultat.est-actif { background: var(--surface); }
.resultat__num {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px;
  border-radius: 50%; background: var(--c-graphite); color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.resultat.est-actif .resultat__num { background: var(--action); color: var(--c-graphite); outline: 2px solid var(--c-graphite); outline-offset: 0; }
.resultat__corps { min-width: 0; }
.resultat__nom { font-size: var(--t-md); font-weight: 650; line-height: 1.25; letter-spacing: -0.005em; }
.resultat__nom a { text-decoration: none; }
.resultat__nom a:hover { text-decoration: underline; }
.resultat__type { margin-left: var(--s-2); font-size: var(--t-sm); font-weight: 500; color: var(--muted); white-space: nowrap; }
.resultat__adresse { margin-top: 4px; font-size: 0.9375rem; color: var(--texte-2); }
.resultat__maj { margin-top: 2px; font-size: var(--t-xs); color: var(--muted); }
.resultat__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-2); }
.resultat__actions .btn { --btn-h: 40px; padding: 0 var(--s-3); font-size: var(--t-sm); }
.resultat__actions .btn .ico { width: 16px; height: 16px; }
@media (max-width: 1279px) and (min-width: 1100px), (max-width: 759px) {
  .resultat { grid-template-columns: 28px minmax(0, 1fr); }
  .resultat__actions { grid-column: 2; justify-content: flex-start; margin-top: var(--s-3); }
}
.vide { padding: var(--s-8) 0; border-bottom: 1px solid var(--bordure); }
.vide .titre-3 { font-size: var(--t-lg); }
.vide p { margin-top: var(--s-2); color: var(--texte-2); }
.vide .lien-fleche { margin-top: var(--s-4); }
.resultats__suite { margin-top: var(--s-6); }

.bascule-carte {
  position: fixed; left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); z-index: 40;
  transform: translateX(-50%);
}
@media (min-width: 1100px) { .bascule-carte { display: none; } }
@media (max-width: 1099px) {
  .resultats.voir-carte .resultats__carte {
    display: block; position: fixed; z-index: 35;
    top: var(--h-entete); left: 0; right: 0; bottom: 0;
  }
}

/* Repères de carte (Leaflet divIcon : className « repere-ancre », html = <span class="repere">) */
.repere-ancre { background: none; border: 0; }
.repere {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--c-graphite); color: #fff; border: 2px solid #fff;
  font: 700 11px/1 var(--police); font-variant-numeric: tabular-nums;
  transition: transform var(--duree) var(--courbe), background-color var(--duree) var(--courbe);
}
.repere.est-actif { background: var(--action); color: var(--c-graphite); border-color: var(--c-graphite); transform: scale(1.2); }
.repere--seul { width: 34px; height: 34px; background: var(--action); color: var(--c-graphite); border: 3px solid var(--c-graphite); }
.leaflet-container { font-family: var(--police); background: #E6E6E2; }
.leaflet-container a { color: var(--texte); }
.leaflet-bar { border: 1px solid var(--bordure-forte) !important; border-radius: var(--r-2) !important; }
.leaflet-bar a { width: 36px !important; height: 36px !important; line-height: 36px !important; color: var(--texte) !important; }
.leaflet-control-attribution { font-size: 11px; }

/* ---------- 16. Fiche ---------------------------------------------------- */
.fiche-tete__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: stretch; }
.fiche-tete__etiquettes { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.adresse { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); font-size: var(--t-md); color: var(--texte-2); }
.adresse > .ico { color: var(--muted); }
.maj { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); }
.maj .ico { width: 16px; height: 16px; }
.avis {
  display: flex; gap: var(--s-3); max-width: 62ch; margin-top: var(--s-5); padding: var(--s-4);
  background: var(--avis-bg); border-radius: var(--r-2);
  font-size: var(--t-sm); line-height: 1.5; color: var(--texte);
}
.avis > .ico { margin-top: 1px; }
.avis a { font-weight: 650; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.fiche-carte { display: flex; flex-direction: column; min-height: 340px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--bordure); border-radius: var(--r-3); }
.fiche-carte .carte { flex: 1; min-height: 280px; }
.fiche-carte__pied {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4); background: var(--surface); border-top: 1px solid var(--bordure); font-size: var(--t-sm);
}
.fiche-carte__pied a { font-weight: 600; }
@media (max-width: 899px) {
  .fiche-tete__grille { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .fiche-carte { min-height: 0; }
  .fiche-carte .carte { min-height: 220px; }
}

.fiche-corps { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-8); padding-block: var(--s-7) var(--s-9); }
.fiche-corps__aside { position: sticky; top: calc(var(--h-entete) + var(--s-5)); align-self: start; }
.bloc + .bloc { margin-top: var(--s-7); }
.bloc__titre {
  margin-bottom: var(--s-4); padding-top: var(--s-4); border-top: 2px solid var(--c-graphite);
  font-size: var(--t-xl); font-weight: 700; font-stretch: 88%; letter-spacing: -0.012em; line-height: 1.15;
}
.prose { max-width: 66ch; font-size: var(--t-md); line-height: 1.65; color: var(--texte-2); }
.coord { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); border-top: 1px solid var(--bordure); }
.coord dt, .coord dd { margin: 0; padding: var(--s-4) 0; border-bottom: 1px solid var(--bordure); }
.coord dt { padding-right: var(--s-4); font-size: var(--t-sm); font-weight: 550; color: var(--muted); }
.coord dd { overflow-wrap: anywhere; }
.coord dd a { font-weight: 550; }
.non-indique { color: var(--muted); }
.encart { padding: var(--s-6); background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-3); }
.encart--proprio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; }
.encart--incomplet { border-left: 4px solid var(--c-graphite); }
.encart__titre { font-size: var(--t-lg); font-weight: 650; font-stretch: var(--chasse-semi); line-height: 1.2; }
.encart p { margin-top: var(--s-2); color: var(--texte-2); }
.encart__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.voisins__liste { list-style: none; }
.voisin a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--bordure); text-decoration: none;
}
.voisin__nom { font-weight: 650; line-height: 1.3; }
.voisin a:hover .voisin__nom { text-decoration: underline; }
.voisin__type { grid-column: 1; font-size: var(--t-sm); color: var(--muted); }
.voisin__dist { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--t-sm); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.voisins .lien-fleche { margin-top: var(--s-4); }
@media (max-width: 899px) {
  .fiche-corps { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .fiche-corps__aside { position: static; }
  .encart--proprio { grid-template-columns: minmax(0, 1fr); }
}

/* Barre au pouce (fiche, téléphone) */
.barre-pouce { display: none; }
@media (max-width: 759px) {
  .barre-pouce {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-2);
    padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--bordure);
  }
  .barre-pouce--2 { grid-template-columns: 2fr 1fr; }
  .barre-pouce .btn { --btn-h: 52px; padding: 0 var(--s-2); font-size: var(--t-sm); }
  .barre-pouce .btn--empile { flex-direction: column; gap: 2px; font-size: var(--t-xs); }
  .a-barre { padding-bottom: 76px; }
  .fiche-actions { display: none; }
}

/* ---------- 17. Ville ---------------------------------------------------- */
.liste-cats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7);
  list-style: none; border-top: 2px solid var(--c-graphite);
}
.liste-cats a {
  display: flex; align-items: center; gap: var(--s-3); min-height: 60px; padding: var(--s-3) 0;
  border-bottom: 1px solid var(--bordure); font-size: var(--t-md); font-weight: 550; text-decoration: none;
}
.liste-cats .num { margin-left: auto; font-size: var(--t-sm); font-weight: 500; color: var(--muted); }
.liste-cats .ico { color: var(--muted); transition: transform var(--duree) var(--courbe); }
.liste-cats a:hover .liste-cats__nom { text-decoration: underline; }
.liste-cats a:hover .ico { transform: translateX(3px); color: var(--texte); }
@media (max-width: 719px) { .liste-cats { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 18. Retours ------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); z-index: 60;
  max-width: calc(100vw - 32px); padding: var(--s-3) var(--s-4);
  background: var(--c-graphite); color: #fff; border-radius: var(--r-2);
  font-size: var(--t-sm); font-weight: 550;
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px);
  transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.toast.est-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 759px) { .a-barre .toast { bottom: 92px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 19. Correctifs ouvrier ---------- */
/* Attribution Leaflet : contraste AA (le gris par défaut donne 3,64:1). */
.leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-attribution a { color: #1F2328; }
.leaflet-container .leaflet-control-attribution { background: rgba(255, 255, 255, 0.92); }
/* « Ouvrir dans Google Maps » : cible tactile d'au moins 24 px de haut. */
.fiche-carte__pied a { display: inline-flex; align-items: center; min-height: 24px; }

.fiche-actions .btn--lg:not(.btn--icone) { padding: 0 var(--s-5); }

/* ---------- 20. Polissage (direction artistique, 4-11) ---------------- */
/* Les volets Leaflet (z-index 400) passaient au-dessus de l'en-tête collant et de la barre au pouce. */
.carte { isolation: isolate; }
/* Adresse de fiche : pictogramme + texte sur une rangée, « Copier » dessous sur téléphone. */
.adresse { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; column-gap: var(--s-3); }
.adresse > .ico { margin-top: 3px; }
.adresse .btn-texte { grid-column: 2; justify-self: start; margin-top: var(--s-2); }
@media (min-width: 760px) {
  .adresse { grid-template-columns: 20px auto auto; justify-content: start; align-items: center; }
  .adresse > .ico { margin-top: 0; }
  .adresse .btn-texte { grid-column: auto; margin: 0 0 0 var(--s-2); }
}
/* Coordonnées : une colonne sur téléphone, plus de coupure au milieu d'une adresse web. */
.coord dd { overflow-wrap: break-word; }
@media (max-width: 599px) {
  .coord { grid-template-columns: minmax(0, 1fr); }
  .coord dt { padding-bottom: 0; border-bottom: 0; }
  .coord dd { padding-top: 4px; }
}
/* Lignes de résultat : les trois actions tiennent sur une rangée à 375 px. */
@media (max-width: 759px) {
  .resultat { column-gap: var(--s-3); }
  .resultat__actions .btn { padding: 0 10px; }
}