@font-face{font-family:"Rubik";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/rubik-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Rubik";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/rubik-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Marchepied — nouveau design (2026-07-21).
   Charte : crème #F7F6F1, vert forêt #1C4B3C, sauge #E9EFE6.
   Typo arrondie : ui-rounded (SF Rounded) → Avenir Next → système. */

:root {
  --creme: #f8f5f0;
  --blanc: #ffffff;
  --vert: #1c4b3c;
  --vert-fonce: #123528;
  --vert-moyen: #3a6b58;
  --sauge: #e9efe6;
  --sauge-fonce: #d8e2d2;
  --texte: #1d2621;
  --texte-muted: #55625a;
  --bord: #e6e3da;
  --carte-ombre: 0 1px 2px rgba(28, 75, 60, 0.05), 0 4px 16px rgba(28, 75, 60, 0.06);
  --rayon: 16px;
  --rayon-petit: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--creme);
  color: var(--texte);
  font-size: 16px;
  line-height: 1.45;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: var(--vert); }

/* ===================== Layout ===================== */
/* 🪤 01/08 (constaté par Mathieu sur mobile) : `100vh` mesure la hauteur
   BARRE D'URL REPLIÉE, alors que le hero est calé sur `svh` = hauteur
   réellement visible. Le conteneur était donc plus haut que son contenu de
   la hauteur exacte de la barre (~100 px) → une bande crème sous
   l'illustration, et de quoi faire défiler la page pour tomber dessus.
   `dvh` suit la barre dans les DEUX sens : plus de bande, qu'elle soit
   dépliée ou repliée. Et comme plus rien ne déborde, il n'y a plus rien à
   faire défiler — la barre ne se replie donc plus toute seule.
   L'ordre des trois déclarations est la dégradation : un vieux navigateur
   s'arrête à celle qu'il comprend. */
.app { display: flex; min-height: 100vh; min-height: 100svh; min-height: 100dvh; }

.sidebar {
  width: 250px;
  flex: 0 0 250px;
  background: var(--blanc);
  border-right: 1px solid var(--bord);
  display: flex;
  flex-direction: column;
  padding: 1.6rem 0.75rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}

.contenu {
  flex: 1;
  min-width: 0;
  padding: 2.2rem 3rem 3rem;
}
/* Le contenu est centré dans l'espace restant (maquette), pas collé à la sidebar. */
.contenu > section { max-width: 1120px; margin: 0 auto; }
/* La vue recherche est PLEIN ÉCRAN : le hero occupe toute la zone contenu. */
.contenu > section#vue-recherche { max-width: none; margin: 0; }

/* ===================== Sidebar ===================== */
/* Marque (23/07, demande Mathieu) : médaillon illustré + wordmark en VRAIS
   caractères (même famille que le site), « .fr » dans le MÊME vert —
   remplace le wordmark bitmap du logo-locorando.webp. */
.brand { display: flex; align-items: center; gap: 0.5rem; padding: 0 0 1.6rem; }
.brand-mark { width: 40px; height: 34px; fill: var(--vert); }
.brand-medaillon { width: 48px; height: 48px; display: block; flex: none; }
.brand-word {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--vert);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.brand-tld { font-size: 0.62em; font-weight: 800; color: var(--vert); }
.brand-name { font-size: 1.35rem; font-weight: 800; color: var(--vert); letter-spacing: -0.01em; }
.brand-region {
  /* Sous le wordmark : aligné au début de « LocoRando »
     (médaillon 52px + gap 0.55rem). */
  margin: -1.55rem 0 1.5rem;
  padding-left: calc(48px + 0.5rem);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert-moyen);
}

.nav { display: flex; flex-direction: column; gap: 0.35rem; }
.burger { display: none; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texte);
  text-align: left;
}
.nav-item svg { width: 21px; height: 21px; flex: 0 0 21px; }
.nav-item.actif { background: var(--sauge); color: var(--vert); }
.nav-item.inactif { color: var(--texte-muted); cursor: default; opacity: 0.75; }
.nav-item:not(.inactif):hover { background: var(--sauge); }

.sidebar-foot { margin-top: auto; border-top: 1px solid var(--bord); padding: 1.1rem 0.4rem 0; }
.foot-verif { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--texte); }
.foot-verif svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--vert); margin-top: 0.1rem; }
.foot-verif strong { font-size: 0.83rem; font-weight: 700; display: block; line-height: 1.3; }
.foot-verif span { font-size: 0.74rem; color: var(--texte-muted); display: block; margin-top: 0.25rem; }
.foot-sources { display: block; font-size: 0.72rem; color: var(--texte-muted); margin-top: 0.8rem; }

/* ===================== Vue recherche ===================== */
/* Accueil plein écran (23/07, demande Mathieu) : plus de colonne à gauche,
   l'illustration occupe tout, la marque vit dans le ciel. */
/* 23/07 : la colonne de gauche disparaît PARTOUT (accueil ET résultats) —
   la vue résultats porte une topbar marque + « Nouvelle recherche ». */
.sidebar { display: none; }
body.accueil-plein .contenu { padding: 0; }
body.accueil-plein .hero { margin: 0; height: 100vh; height: 100svh; height: 100dvh; }
/* v2 image (23/07) : le ciel est DANS l'image (~40 % haut) — le fond du
   hero prolonge ce ciel (teinte échantillonnée) et les écrans larges ne
   rognent QUE du ciel (image ancrée en bas, overflow hidden). */
/* 29/07 v2 (retour Mathieu « nuages blancs ») : le bleu léger est désormais
   BAKÉ dans le ciel de l'image (masque qui préserve les nuages en blanc),
   plus de voile CSS. Le fond prolonge la teinte du haut de l'image. */
body.accueil-plein .hero { background: #c4d5df; }
/* 29/07 (demande Mathieu) : la marque devient un vrai HEADER — bandeau
   pleine largeur, logo + nom ancrés à GAUCHE, taille augmentée. Le titre
   et la barre restent centrés dessous. */
.hero-marque {
  align-self: stretch;
  display: flex; align-items: center; gap: 0.55rem;
  /* 29/07 : logo collé au bord gauche (retour Mathieu) — la gouttière
     gauche tombe à 1rem, le max possible sans sortir de l'écran. */
  padding: clamp(1rem, 2.6vh, 1.6rem) clamp(1.4rem, 3.5vw, 3rem)
           clamp(1rem, 2.6vh, 1.6rem) 1rem;
  margin-bottom: clamp(0.6rem, 2.2vh, 1.6rem);
}
/* 29/07 : marque réduite de 30 % (retour Mathieu). */
.hero-medaillon { width: 62px; height: 62px; margin-top: -4px; }
.hero-word { font-size: clamp(2.2rem, 3.6vw, 3rem); }
.hero-region {
  display: block; font-size: 0.52rem; font-weight: 700;
  /* 29/07 : essai bleu ardoise #274B63 (texte du header, comme le wordmark). */
  letter-spacing: 0.14em; text-transform: uppercase; color: #274B63;
  margin: 0.12rem 0 0 0.1rem;
}
.hero-marque .hero-word { line-height: 1; }
.hero-marque .bloc { display: flex; flex-direction: column; }
/* 24/07 : vue résultats sans logo (LocoRando retiré de cette page),
   contenu centré (1120px). */
.contenu > section#vue-resultats { max-width: none; margin: 0; }
/* 29/07 (retour Mathieu) : la vue résultats passe au BLEU du slogan —
   les variables vertes sont re-déclarées dans ce scope, tout ce qui
   était vert devient bleu ardoise, les textes noirs restent noirs. */
#vue-resultats {
  --vert: #26455C;
  --vert-fonce: #16293A;
  --vert-moyen: #4A6B85;
  --sauge: #E4EBF1;
  --sauge-fonce: #D2DEE8;
}
/* 29/07 (essai, à valider) : fond de la vue résultats en dégradé bleu
   léger qui se diffuse vers le crème. */
body:not(.accueil-plein) .contenu {
  background: linear-gradient(180deg, #DFE9EF 0%, #F8F5F0 340px);
}
.resultats-inner { max-width: 1120px; margin: 0 auto; }
.brand-mini { padding: 0; cursor: pointer; }
/* 24/07 : même taille que le titre « Résultats » (2.2rem). */
.brand-mini .brand-medaillon { width: 44px; height: 44px; }
.brand-mini .brand-word { font-size: 2.2rem; }
.pied-resultats { font-size: 0.74rem; color: var(--texte-muted); margin: 2rem 0 0.5rem; }
.pied-resultats a { color: inherit; }
/* 01/08 (demande Mathieu) : sur mobile ce pied concurrençait les résultats.
   Il passe en retrait — plus petit, plus clair, un peu plus détaché.
   ⚠️ « Moins visible » ne doit pas vouloir dire illisible : #67726a garde un
   contraste de 4,61:1 sur le crème (#f8f5f0), au-dessus du seuil AA de 4,5:1
   exigé pour du petit texte. Mesuré, pas estimé — le muted actuel est à
   5,89:1. Ne pas éclaircir davantage sans recalculer. */
@media (max-width: 760px) {
  .pied-resultats {
    font-size: 0.6rem;
    color: #67726a;
    margin: 2.6rem 0 0.5rem;
  }
}
/* Calendrier de date (23/07) : bouton + popover, seuls les jours AVEC
   données sont cliquables — prêt pour la fenêtre rolling 15 jours. */
.bloc-date { position: relative; }
.btn-date {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-weight: 700; color: var(--texte); padding: 0;
}
.btn-date .chev { width: 16px; height: 16px; color: var(--vert-moyen); }
.btn-date:hover strong { color: var(--vert); }
.cal-pop {
  position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 30;
  background: var(--blanc); border-radius: 14px; padding: 0.9rem;
  box-shadow: 0 14px 40px rgba(28, 75, 60, 0.22); width: 258px;
}
/* 20/08 : en-tête du calendrier avec navigation de mois. Le titre était seul
   et centré ; il devient le centre d'une barre ‹ mois › — les flèches sont
   indispensables depuis que les dates publiées débordent sur le mois suivant. */
.cal-tete { display: flex; align-items: center; justify-content: space-between; gap: .25rem; margin-bottom: 0.5rem; }
.cal-titre { font-weight: 800; color: var(--vert); text-align: center; font-size: 0.92rem; flex: 1; }
.cal-nav { border: 0; background: transparent; color: var(--vert); font-size: 1.15rem; line-height: 1;
           cursor: pointer; padding: .15rem .45rem; border-radius: 8px; font-weight: 700; }
.cal-nav:hover:not(:disabled) { background: var(--sauge); }
.cal-nav:disabled { opacity: .25; cursor: default; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-jourlbl { font-size: 0.62rem; font-weight: 700; color: var(--texte-muted); text-align: center; text-transform: uppercase; padding: 0.15rem 0; }
.cal-case { aspect-ratio: 1; border-radius: 9px; font-size: 0.82rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; color: #c8cfc9; cursor: default; }
.cal-case.dispo { color: var(--vert); background: var(--sauge); cursor: pointer; font-weight: 800; }
.cal-case.dispo:hover { background: var(--sauge-fonce); }
.cal-case.choisi { background: var(--vert); color: #fff; }
/* Lien légal discret en bas à droite du plein écran (la sidebar qui le
   portait est cachée sur l'accueil). */
.hero-sources {
  position: absolute; right: 1.1rem; bottom: 0.8rem;
  font-size: 0.72rem; color: var(--texte-muted); text-decoration: underline;
}
/* Le hero : illustration en grand, ancrée en bas ; le ciel crème de l'image
   se prolonge vers le haut via le fond du hero (même teinte) → « ciel infini »
   dans lequel flottent le titre et la barre de recherche. */
.hero {
  position: relative;
  /* Même unité que .app — voir le commentaire là-bas. Cette déclaration de
     base est aujourd'hui masquée par `body.accueil-plein .hero`, mais la
     laisser en `vh` seul rearmerait le piège au premier écran qui n'aurait
     pas cette classe. */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 620px;
  margin: -2.2rem -3rem 0;
  overflow: hidden;
  container-type: size;
}
.hero-illu { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; }
/* Image ENTIÈRE, jamais tronquée : pleine largeur, ancrée en bas ; le ciel
   crème du hero prolonge le haut de l'image sans couture. */
.hero-illu img { width: 100%; height: auto; display: block; }

/* Zone de contenu flottant dans le ciel (haut du hero). */
.hero-ciel {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  /* 29/07 : plus de gros padding-top — le header (.hero-marque) porte
     son propre espacement vertical. */
  padding-top: 0;
  pointer-events: none;
}
.hero-ciel > * { pointer-events: auto; }
/* 29/07 : le bloc texte descend un peu (retour Mathieu). */
.hero-texte { width: 100%; max-width: 740px; text-align: center; margin-top: clamp(0.5rem, 2.5vh, 1.5rem); }
.hero h1 {
  /* 29/07 : titre agrandi de 30 % (retour Mathieu). */
  font-size: clamp(2rem, 3.15vw, 2.75rem);
  line-height: 1.16;
  font-weight: 800;
  /* 29/07 : recherche bonnes pratiques — sur fond clair, titre quasi
     sombre obligatoire (jamais de gris/teinte moyenne), contraste cible
     4.5:1+. Bleu ardoise profond, même famille que le wordmark : 8:1. */
  color: #173555; /* marine profond, valide Mathieu 30/07 */
  letter-spacing: -0.015em;
  margin-bottom: 0.55rem;
}
.hero-sub { font-size: 1rem; color: var(--texte-muted); font-weight: 500; }

.carte-recherche {
  /* 23/07 (retour Mathieu « trop imposante ») : plus de carte blanche à
     double étage — une seule PILULE de recherche, le hint vit dans le
     placeholder. Empreinte verticale réduite = la montagne respire. */
  width: min(640px, 94%);
  /* Accueil plein écran (23/07) : la barre vit DANS LE FLUX, sous le
     titre — l'ancien ancrage absolu à la géométrie de l'image (règle
     montagne pâle) datait de la mise en page à colonne et faisait
     chevaucher barre et titre sur les écrans peu hauts (bug 15 pouces).
     `position: relative` reste nécessaire : le déroulant des gares est
     positionné en absolu par rapport à la carte. */
  position: relative;
  margin: clamp(1rem, 3vh, 1.8rem) auto 0;
}
.champ-recherche {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid rgba(28, 75, 60, 0.08);
  border-radius: 999px;
  padding: 0.95rem 1.5rem;
  background: var(--blanc);
  box-shadow: 0 10px 30px rgba(28, 75, 60, 0.16);
}
.champ-recherche:focus-within { border-color: var(--vert-moyen); }
.champ-recherche .ic { width: 20px; height: 20px; color: var(--texte-muted); flex: 0 0 20px; }
.champ-recherche input {
  flex: 1; border: none; outline: none; font: inherit; font-size: 1.05rem; color: var(--texte);
  background: transparent;
  /* 29/07 : sans min-width:0, le placeholder long impose sa largeur au
     flex item → débordement horizontal sur mobile. */
  min-width: 0;
}
.champ-recherche input::placeholder { color: #b3bdb5; }
.effacer { width: 26px; height: 26px; color: var(--texte-muted); }
.effacer svg { width: 100%; height: 100%; }
.champ-hint { display: none; }
.champ-hint-old {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.85rem; color: var(--texte-muted); padding: 0.75rem 0.3rem 0;
}
.champ-hint .ic { width: 17px; height: 17px; }
/* type=search (29/07, autofill Android) : sans decor natif — on a deja
   notre propre bouton effacer. */
#lr-q::-webkit-search-cancel-button,
#lr-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.deroulant {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.6rem);
  background: var(--blanc); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(28, 75, 60, 0.22);
  max-height: 46vh; overflow-y: auto; z-index: 5;
}
.deroulant-titre {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texte-muted); padding: 0.8rem 1.2rem 0.3rem;
}
.liste-gares { list-style: none; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--carte-ombre); overflow: hidden; }
.liste-gares li + li { border-top: 1px solid var(--bord); }
.gare-item {
  width: 100%;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.95rem 1.2rem;
  text-align: left;
}
.gare-item:hover { background: var(--sauge); }
.gare-item .pastille {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  background: var(--sauge);
  color: var(--vert);
  display: flex; align-items: center; justify-content: center;
}
.gare-item .pastille svg { width: 20px; height: 20px; }
.gare-item .pastille.duo { gap: 2px; }
.gare-item .pastille.duo svg { width: 15px; height: 15px; }
.gare-item .infos { flex: 1; min-width: 0; }
.gare-item .nom { display: block; font-weight: 700; font-size: 0.98rem; }
.gare-item .type { display: block; font-size: 0.8rem; color: var(--texte-muted); margin-top: 0.1rem; }
.gare-item .chevron { width: 18px; height: 18px; color: var(--texte-muted); flex: 0 0 18px; }
.gare-item mark { background: none; color: var(--vert); font-weight: 800; }

/* ===================== Vue résultats ===================== */
.lien-retour {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 600; color: var(--texte-muted);
  margin-bottom: 0.4rem;
}
.lien-retour svg { width: 17px; height: 17px; }
.lien-retour:hover { color: var(--vert); }
.titre-resultats { font-size: 2.2rem; font-weight: 800; color: #173555; /* marine de la marque (30/07) */ letter-spacing: -0.015em; margin-bottom: 1.2rem; }

.barre-resume {
  display: flex; align-items: center;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--carte-ombre);
  padding: 1rem 1.4rem;
  gap: 1.4rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.resume-bloc { display: flex; align-items: center; gap: 0.75rem; padding-right: 1.4rem; border-right: 1px solid var(--bord); }
.resume-bloc:last-of-type { border-right: none; }
.resume-bloc .ic { width: 24px; height: 24px; color: var(--vert); flex: 0 0 24px; }
.resume-bloc strong { display: block; font-size: 0.98rem; font-weight: 700; }
.resume-bloc span { display: block; font-size: 0.78rem; color: var(--texte-muted); margin-top: 0.05rem; }
.resume-heure { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--texte-muted); }
select {
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--vert);
  background: var(--sauge); border: none; border-radius: 9px; padding: 0.45rem 0.7rem;
  cursor: pointer; outline: none;
}

.barre-tri { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding: 0 0.2rem; }
#compteur-resultats { font-size: 0.9rem; color: var(--texte-muted); font-weight: 600; }
.tri { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--texte-muted); }

.trop-tard {
  background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--carte-ombre);
  padding: 1.6rem; margin-bottom: 1rem;
}
.trop-tard strong { color: var(--vert); }
.trop-tard p { color: var(--texte-muted); font-size: 0.92rem; margin-top: 0.3rem; }

.liste-resultats { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- Carte-itinéraire ---------- */
.res-carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--carte-ombre);
  overflow: hidden;
}
.res-ligne {
  /* 16/08 : composition d'ORIGINE restaurée sur grand écran (décision
     Mathieu — l'audit visait le mobile). Le gabarit compact ne s'applique
     qu'en dessous de 760 px, où il est rendu par estMobile(). */
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(300px, 1.6fr) minmax(190px, 1.1fr);
  gap: 1.2rem;
  align-items: center;
  padding: 1.15rem 1.4rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.res-transports { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.lt { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-size: 0.86rem; color: var(--texte-muted); }
.lt-ico { color: var(--vert-moyen); display: inline-flex; align-items: center; flex: none; }
.lt-ico svg { width: 17px; height: 17px; }
.lt-h { font-weight: 800; color: var(--texte); font-size: 0.95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lt-fleche { color: var(--texte-muted); flex: none; }
.lt-dest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; }
.lbl-heure-court { display: none; }
@media (max-width: 760px) { .lbl-heure-court { display: inline; } }
.lt-corr { white-space: nowrap; font-size: 0.74rem; color: var(--texte-muted); flex: none; }
.lt-dernier { white-space: nowrap; font-size: 0.76rem; margin-left: 0.2rem; }
.res-ligne:hover { background: #fbfaf6; }

/* segment transport (aller / retour) */
.seg { min-width: 0; }
.seg-haut { display: flex; align-items: center; gap: 0.5rem; }
.seg-heure { font-size: 1.22rem; font-weight: 800; color: var(--texte); white-space: nowrap; }
.seg-trait { flex: 1; display: flex; align-items: center; min-width: 34px; color: var(--vert-moyen); }
.seg-trait::before, .seg-trait::after {
  content: ""; flex: 1; border-top: 2px solid currentColor; opacity: 0.45;
}
.seg-trait::before { border-top-style: solid; }
.seg-trait svg { width: 19px; height: 19px; margin: 0 0.35rem; }
/* Trait entre deux icônes : même flex/épaisseur que les traits latéraux. */
.seg-trait .trait-lien { flex: 1; border-top: 2px solid currentColor; opacity: 0.45; }
.seg-trait .trait-plus { font-size: 0.68rem; font-weight: 800; margin-left: 0.15rem; }
.seg-gares { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 0.3rem; }
.seg-gares span { font-size: 0.8rem; color: var(--texte-muted); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-meta { margin-top: 0.35rem; font-size: 0.76rem; color: var(--texte-muted); display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.badge-ligne {
  background: var(--vert); color: #fff; font-weight: 800; font-size: 0.68rem;
  letter-spacing: 0.03em; padding: 0.12rem 0.42rem; border-radius: 5px; white-space: nowrap;
}
.badge-mode-ico { display: inline-flex; vertical-align: -0.16em; margin-right: 0.24em; }
.badge-mode-ico svg { width: 0.95em; height: 0.95em; }
.badge-corr {
  background: var(--sauge); color: var(--vert); font-weight: 700; font-size: 0.7rem;
  padding: 0.12rem 0.42rem; border-radius: 5px; white-space: nowrap;
}
.lien-recette { font-size: 0.76rem; color: var(--texte-muted); margin-top: 0.3rem; }
.badge-tad { background: #fff3d6; color: #8a6100; border-radius: 6px; padding: 0.1rem 0.45rem; font-size: 0.72rem; font-weight: 700; }
.leg .badge-tad { margin-right: 0.4rem; }
.seg-absent { font-size: 0.85rem; color: var(--texte-muted); font-style: italic; }

/* bloc central rando */
.res-rando {
  background: var(--sauge);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  min-width: 0;
}
.res-rando-haut { display: flex; align-items: baseline; gap: 0.7rem; }
.res-rando-heure { font-size: 1.1rem; font-weight: 800; color: var(--vert); white-space: nowrap; }
.res-rando-haut svg { width: 17px; height: 17px; color: var(--vert); align-self: center; }
.res-rando-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--vert-moyen); text-transform: uppercase; }
.res-rando-nom { font-size: 1.02rem; font-weight: 800; color: var(--vert-fonce); margin-top: 0.15rem; line-height: 1.25; }
.res-rando-stats { font-size: 0.8rem; color: var(--vert-moyen); font-weight: 600; margin-top: 0.3rem; }
.res-rando-badges { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.badge-chemin {
  background: var(--blanc); color: var(--vert); font-weight: 800; font-size: 0.7rem;
  padding: 0.14rem 0.45rem; border-radius: 5px;
}
.badge-boucle { background: var(--vert); color: #fff; font-weight: 700; font-size: 0.7rem; padding: 0.14rem 0.45rem; border-radius: 5px; }
.badge-verifie {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--blanc); color: var(--vert); font-weight: 700; font-size: 0.7rem;
  padding: 0.14rem 0.45rem; border-radius: 5px;
}
.badge-verifie svg { width: 11px; height: 11px; }
.badge-classique {
  font-weight: 800; font-size: 0.7rem; padding: 0.14rem 0.5rem; border-radius: 5px;
  background: var(--vert-fonce); color: #ffd763; letter-spacing: 0.01em;
}
.badge-classique-a { background: transparent; color: var(--vert-fonce); box-shadow: inset 0 0 0 1.5px var(--vert-fonce); }
.badge-urbain { background: #b7791f; color: #fff; font-weight: 700; font-size: 0.7rem; padding: 0.14rem 0.45rem; border-radius: 5px; }
.badge-alpin { background: #8f2d2d; color: #fff; font-weight: 700; font-size: 0.7rem; padding: 0.14rem 0.45rem; border-radius: 5px; }
.badge-longue { background: #7a4a12; color: #fff; font-weight: 700; font-size: 0.7rem; padding: 0.14rem 0.45rem; border-radius: 5px; }
.alpin-note { background: #fdecec; color: #7c2323; border-left: 3px solid #8f2d2d; padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; margin: 0.4rem 0 0.6rem; }

.approx { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }

/* ---------- Détail dépliable ---------- */
.res-detail { border-top: 1px solid var(--bord); padding: 1.4rem; background: #fcfbf8; }
.detail-grille { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.4rem; align-items: start; }
.detail-col { min-width: 0; }

.detail-section { background: var(--blanc); border: 1px solid var(--bord); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.detail-section h3 {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texte-muted); margin-bottom: 0.7rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.detail-section h3 .badge-verifie { font-size: 0.66rem; }

.option-aller { border: 1px solid var(--bord); border-radius: 9px; margin-bottom: 0.5rem; overflow: hidden; }
.option-aller summary {
  list-style: none; cursor: pointer; padding: 0.55rem 0.8rem;
  font-size: 0.88rem; font-weight: 700; color: var(--texte);
  display: flex; align-items: center; gap: 0.5rem;
}
.option-aller summary::-webkit-details-marker { display: none; }
.option-aller summary::before { content: "▸"; color: var(--texte-muted); font-size: 0.8rem; }
.option-aller[open] summary::before { content: "▾"; }
.option-aller summary:hover { background: var(--sauge); }
.option-aller.passe summary { color: var(--texte-muted); opacity: 0.75; }
.option-aller.sans-retour summary { color: var(--texte-muted); opacity: 0.75; }
.option-aller .legs { padding: 0.2rem 0.9rem 0.7rem 1.6rem; }

.leg { font-size: 0.82rem; padding: 0.18rem 0; color: var(--texte); }
.leg .badge-ligne { margin-right: 0.4rem; }
.leg-heure { font-weight: 800; color: var(--vert); }
.leg-reseau { font-size: 0.72rem; color: var(--texte-muted); }
a.badge-ligne-lien { text-decoration: none; }
a.badge-ligne-lien:hover { background: var(--vert-fonce); }
.leg-walk { color: var(--texte-muted); font-style: italic; }
.corr-serree {
  font-size: 0.72rem;
  font-weight: 700;
  color: #8a5a00;
  background: #fdf3dd;
  border-radius: 8px;
  padding: 0.15rem 0.5rem;
  margin: 0.15rem 0;
  display: inline-block;
}

.retours-grille { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.retour-chip {
  font-size: 0.85rem; font-weight: 700; color: var(--vert);
  background: var(--sauge); border-radius: 7px; padding: 0.3rem 0.6rem;
}
.retour-chip.passe { background: transparent; color: var(--texte-muted); opacity: 0.7; }

/* Lot C (16/08) : détail allégé — rangée de stats fine + mentions repliées */
.stat-ligne { font-size: 0.85rem; font-weight: 700; color: var(--vert-moyen); margin-top: 0.6rem; }
.mentions { margin-top: 0.5rem; }
.mentions > summary { list-style: none; cursor: pointer; font-size: 0.76rem; color: var(--texte-muted); }
.mentions > summary::-webkit-details-marker { display: none; }
.mentions[open] > summary { margin-bottom: 0.2rem; }

/* Lot B (16/08, audit mobile) : horaires morts repliés. Le barré sur du
   texte replié en 2 lignes était illisible (captures) — le gris + le
   groupe « plus tôt » disent déjà tout. */
.allers-passes { margin-bottom: 0.5rem; }
.allers-passes > summary { list-style: none; cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--texte-muted); border: 1px dashed var(--bord); border-radius: 9px; padding: 0.45rem 0.8rem; }
.allers-passes > summary::-webkit-details-marker { display: none; }
.allers-passes > summary::before { content: "▸ "; font-size: 0.75rem; }
.allers-passes[open] > summary { margin-bottom: 0.5rem; }
.allers-passes[open] > summary::before { content: "▾ "; }
.retours-passes { display: inline-block; }
.retours-passes > summary { list-style: none; cursor: pointer; display: inline-block; }
.retours-passes > summary::-webkit-details-marker { display: none; }
.retour-chip.chip-toggle { background: transparent; border: 1px dashed var(--bord); color: var(--texte-muted); }
.retours-passes[open] { flex-basis: 100%; }
.retours-passes[open] > .retours-grille { margin-top: 0.45rem; }
.retour-details { display: inline-block; }
.retour-details[open] { flex-basis: 100%; }
.retour-details summary { list-style: none; cursor: pointer; display: inline-block; }
.retour-details summary::-webkit-details-marker { display: none; }
.retour-corr-hint { font-size: 0.68rem; color: var(--vert-moyen); margin-left: 0.3rem; font-weight: 700; }
.retour-details .legs { padding: 0.4rem 0.2rem 0.3rem 0.6rem; border-left: 2px solid var(--sauge-fonce); margin: 0.3rem 0 0.2rem 0.4rem; }

.detail-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.option-aller.choisi > summary { background: var(--sauge); border-radius: 8px; }
.opt-retenu { color: var(--vert); font-weight: 700; }
.stat-tuile { flex: 1; min-width: 105px; background: var(--sauge); border-radius: 10px; padding: 0.7rem 0.9rem; }
.stat-tuile .val { font-size: 1.25rem; font-weight: 800; color: var(--vert); }
.stat-tuile .lib { font-size: 0.72rem; color: var(--vert-moyen); font-weight: 600; margin-top: 0.1rem; }

.profil-svg { width: 100%; height: 64px; display: block; }
.profil-meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--texte-muted); margin-top: 0.3rem; }
.profil-note { font-size: 0.7rem; color: var(--texte-muted); font-style: italic; margin-top: 0.4rem; }
.trace-note { font-size: 0.7rem; color: var(--texte-muted); font-style: italic; margin: 0.35rem 0 0.6rem; }
.trace-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.55rem 0 0.1rem; }
.btn-trace { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--vert); background: var(--blanc); border: 1px solid var(--sauge-fonce); border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1; }
.btn-trace:hover { background: var(--sauge); }
.btn-trace[hidden] { display: none; }
.opt-prix { color: var(--vert); font-weight: 700; white-space: nowrap; }
.retour-prix { color: var(--vert); font-weight: 700; white-space: nowrap; font-size: 0.72rem; margin-left: 0.3rem; }
.trace-apps { font-size: 0.68rem; color: var(--texte-muted); margin: 0.15rem 0 0.45rem; }

.detail-carte { height: 300px; border-radius: 12px; overflow: hidden; border: 1px solid var(--bord); position: relative; }
.detail-carte .map-slot { width: 100%; height: 100%; }
/* 30/07 : carte en plein écran, même geste sur mobile et sur ordinateur —
   la vignette de 300 px ne suffit pas à lire un itinéraire. */
.detail-carte.carte-plein {
  position: fixed; inset: 0; z-index: 2000; height: 100vh; height: 100dvh;
  width: 100vw; border-radius: 0; border: none;
}
.btn-agrandir {
  position: absolute; top: 10px; right: 10px; z-index: 500;
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--blanc); color: var(--vert); border: 1px solid var(--sauge-fonce);
  border-radius: 999px; padding: 0.4rem 0.7rem; font-size: 0.78rem; font-weight: 600;
  font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(28,75,60,.18);
}
.btn-agrandir svg { width: 15px; height: 15px; }
.carte-plein .btn-agrandir { top: max(14px, env(safe-area-inset-top)); right: 14px; }
/* La carte plein écran est `inset: 0`, donc elle s'étend sous la barre de
   gestes depuis `viewport-fit=cover`. Leaflet pose l'ATTRIBUTION en bas :
   sans ce décalage elle passerait dessous, et l'attribution OSM/CARTO n'est
   pas décorative — c'est la condition d'usage du fond de carte. */
.carte-plein .leaflet-bottom { margin-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 760px) { .detail-carte { height: 260px; } }

.liens-verif { display: flex; gap: 1rem; margin-top: 0.2rem; flex-wrap: wrap; }
.liens-verif a { font-size: 0.82rem; font-weight: 700; }
.liens-verif a.secondaire { color: var(--texte-muted); }

.note-bas { font-size: 0.78rem; color: var(--texte-muted); margin-top: 1.6rem; text-align: center; }

/* ===================== Responsive ===================== */
@media (max-width: 1080px) {
  .res-ligne { grid-template-columns: 1fr; gap: 0.55rem; padding: 0.85rem 1rem; }
  /* 16/08 : chrome compacté MOBILE seulement — le bloc compteur et le
     slogan restent affichés sur grand écran. */
  .barre-resume .resume-bloc.bloc-nb { display: none; }
  .bloc-date > span { display: none; }
  .lbl-heure-long { display: none; }
  .detail-grille { grid-template-columns: 1fr; }
}
/* Fenêtre très courte : le titre se resserre pour que la barre (qui remonte
   avec les montagnes) ne vienne jamais le chevaucher. */
@media (max-height: 800px) {
  .hero-marque { padding-top: 0.7rem; padding-bottom: 0.7rem; margin-bottom: 0.4rem; }
  /* Écran court : le titre se resserre un peu pour que la barre reste
     au-dessus des nuages de l'illustration. */
  .hero h1 { font-size: clamp(1.85rem, 2.8vw, 2.35rem); }
}
@media (max-width: 760px) {
  .app { flex-direction: column; }
  /* Mobile : la barre logo fond dans le ciel (pas de bande blanche),
     pas d'icônes de nav (demande Mathieu) — les icônes causaient aussi
     le débordement horizontal (429px > écran). Juste le logo sur crème. */
  .sidebar { width: 100%; flex: none; height: auto; position: relative; flex-direction: row; align-items: center; padding: 0.7rem 1rem; background: transparent; border-right: none; z-index: 20; }
  .brand { padding: 0; }
  .brand-region { display: none; }
  .burger { display: block; margin-left: auto; width: 40px; height: 40px; padding: 8px; color: var(--vert); border-radius: 10px; }
  .burger[aria-expanded="true"] { background: var(--sauge); }
  /* Le menu burger déroule la nav desktop (raccord d'interface). */
  .nav { display: none; }
  .sidebar.menu-ouvert .nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    right: 0.8rem;
    min-width: 220px;
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: 0 14px 40px rgba(28, 75, 60, 0.22);
    padding: 0.5rem;
  }
  .sidebar-foot { display: none; }
  .contenu { padding: 1.2rem 1.2rem 0; }
  /* Sur mobile : même composition que desktop mais en flux vertical —
     titre, barre, ciel, illustration ENTIÈRE ancrée en bas du hero.
     Les marges négatives compensent EXACTEMENT le padding .contenu
     (1.2rem), sinon la page déborde horizontalement. */
  .hero {
    height: auto;
    /* 100vh mobile compte la zone cachée par la barre d'URL → l'image
       passait sous le pli ; svh = hauteur réellement visible. */
    min-height: calc(100vh - 57px); /* fallback vieux navigateurs */
    min-height: calc(100svh - 57px); /* barre logo (57) */
    /* 01/08 : dvh, comme .app — les deux doivent suivre la MÊME unité,
       sinon l'écart entre elles réapparaît en bande crème. */
    min-height: calc(100dvh - 57px);
    margin: -1.2rem -1.2rem 0;
    display: flex;
    flex-direction: column;
    container-type: normal;
    overflow: hidden;
  }
  /* 29/07 (retour Mathieu) : le soleil au meme ecart du haut que du bord
     gauche (1.2rem = 1rem ciel + 0.2rem marque) ; +3px compense le
     margin-top optique du medaillon. */
  .hero-ciel { position: static; padding: calc(1.2rem + 3px) 1rem 0; flex: 0 0 auto; }
  /* Image ENTIÈRE (jamais recadrée — demande Mathieu), poussée au bas de
     l'écran ; le ciel crème remplit l'espace intermédiaire. */
  .hero-illu {
    position: static;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 1.2rem;
    /* 🪤 01/08 : bande beige résiduelle en bas, sur le téléphone de Mathieu,
       que je n'ai PAS su reproduire en headless — l'image y touche le bas au
       pixel près (hero 844, image 844, viewport 844), et ses dernières lignes
       sont vertes et opaques. Elle vient donc d'un arrondi du navigateur
       mobile sur `dvh`, ou d'un liseré sous le viewport. Plutôt que de
       deviner LEQUEL, on couvre les deux :
       ici l'illustration déborde de 16 px sous le hero, recoupés par son
       `overflow: hidden` — ça remplit un écart INTÉRIEUR. On ne perd que de
       la pente verte uniforme, rien d'identifiable.
       Le pendant EXTÉRIEUR est le fond de page, plus bas.
       ── 01/08, suite : la VRAIE cause a été trouvée (voir `viewport-fit=cover`
       dans index.html). Ce débordement passe donc de 16 px à 2 px : il ne
       sert plus qu'à absorber un arrondi sous-pixel, pas à masquer une
       bande. On récupère l'illustration presque entière. */
    margin-bottom: -2px;
    position: relative; /* ancre le prolongement ci-dessous */
  }
  /* PROLONGEMENT SANS COUTURE de l'illustration vers le bas (01/08).
     Un aplat de couleur sous l'image laisse une couture visible : le bas du
     dessin n'est pas uniforme (herbe sombre à gauche, sentier clair au
     centre — mesuré de 93,107,54 à 147,151,70 sur la même ligne).
     Astuce : on repeint la MÊME image, ancrée en bas, mais étirée à 160 000 px
     de haut. Seule sa toute dernière ligne tombe dans la bande, étirée
     verticalement — l'herbe et le sentier se prolongent chacun dans leur
     couleur. Aucune requête en plus (même URL, donc même entrée de cache que
     le <img>).
     ⚠️ L'ÉTIREMENT DOIT RESTER ÉNORME. À 12 000 px, la zone de 180 px
     couvrait 13 lignes source : la jonction reprenait 13 lignes trop haut et
     laissait une couture visible. Mesuré à 160 000 px : écart de couleur
     moyen ET maximal de 0/255 sur les 390 colonnes. Ne pas baisser cette
     valeur sans refaire la mesure.
     Ça remplit tout écart INTÉRIEUR au hero, dans n'importe quel navigateur
     et sans dépendre des unités de vue. Le débordement est recoupé par
     l'`overflow: hidden` du hero, donc invisible quand il n'y a pas d'écart. */
  .hero-illu::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 100%; height: 180px;
    /* 🪤 21/08 : ce comble telechargeait la variante 1536w (56 Kio) alors
       qu'il n'en affiche qu'une couleur etiree sur 160 000 px. La variante
       900w (17 Kio) fait le meme travail — dernieres lignes mesurees a
       rgb(110,122,59) contre rgb(111,122,59) : 1/255 d'ecart, invisible. */
    background-image: url("hero-illu-xs.webp?v=20260821");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 120% 160000px;
    pointer-events: none;
  }
  /* 29/07 (retour Mathieu) : zoom 20 % de l'illustration collee en bas —
     le haut de l'image remonte, les flancs sont rognes symetriquement. */
  .hero-illu img { width: 120%; margin-left: -10%; height: auto; display: block; }
  .carte-recherche { max-width: 100%; position: relative; left: auto; transform: none; bottom: auto; margin-top: 1.4rem; }
  .hero h1 { font-size: 2rem; }
  .hero-sub { font-size: 1rem; }
}

/* Typo web (2026-07-25) : wordmark = logo SVG, texte = Rubik. */
.brand-word, .hero-word { display: none !important; }
.wordmark-svg { display: block; width: auto; }
.brand .wordmark-svg { height: 1.5rem; }
.hero-marque .wordmark-svg { height: clamp(1.75rem, 2.7vw, 2.3rem); }
.brand-mini .wordmark-svg { height: 1.7rem; }
@media (max-width: 760px) {
  .hero-marque { padding: 0 0.2rem 0; margin-bottom: 0.7rem; gap: 0.45rem; }
  .hero-medaillon { width: 38px; height: 38px; margin-top: -3px; }
  .hero-marque .wordmark-svg { height: 1.35rem; }
  .hero-region { font-size: 0.46rem; }
  /* 29/07 : slogan + barre moins collés au header (retour Mathieu). */
  .hero-texte { margin-top: calc(3.5rem - 3px); }
  /* 29/07 : le ciel se DIFFUSE sur mobile — bleu plus profond en haut
     fondant vers la teinte de raccord (#c4d5df) bien avant le haut de
     l'illustration (l'image démarre vers 65 % de la hauteur). */
  body.accueil-plein .hero {
    background: linear-gradient(180deg, #b3cad7 0%, #c4d5df 55%);
  }
  /* Pendant EXTÉRIEUR du correctif ci-dessus : le fond de la page passe au
     vert du BAS de l'illustration, au lieu du crème. #717c3d est la moyenne
     MESURÉE de sa dernière ligne visible (1 280 px, en tenant compte du
     zoom 120 % qui rogne les flancs). Si un liseré subsiste sous le hero, il
     devient indiscernable de l'herbe au lieu de trancher en beige.
     Le fond du body se propage au canevas, donc il couvre aussi ce que le
     hero ne recouvre pas. */
  body.accueil-plein { background-color: #717c3d; }
}

/* 29/07 : recherche au clavier mobile — le haut du hero se replie au focus
   pour que la barre monte en haut et que les resultats restent visibles
   au-dessus du clavier. dvh : sur Android le viewport retrecit avec le
   clavier, le deroulant suit ; sur iOS (vh fige) le min() borne a 46vh. */
@media (max-width: 760px) {
  body.recherche-focus .hero-texte,
  body.recherche-focus .hero-sources,
  body.recherche-focus .champ-hint,
  body.recherche-focus .hero-illu { display: none; }
  body.recherche-focus .carte-recherche { margin-top: 0.5rem; }
  body.recherche-focus .deroulant { max-height: min(46vh, calc(100dvh - 210px)); }
}

/* Sélecteur de date sur l'accueil (droite de la barre) — 25/07 */
.champ-recherche .bloc-date-accueil { position: relative; flex: none; padding-left: 0.9rem; margin-left: 0.1rem; border-left: 1px solid rgba(28,75,60,0.12); }
.btn-date-accueil { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; color: var(--vert); font-weight: 700; padding: 0; cursor: pointer; background: none; border: none; font: inherit; }
.btn-date-accueil .ic-cal { width: 18px; height: 18px; color: var(--vert-moyen); flex: none; }
.btn-date-accueil strong { font-size: 0.95rem; }
.btn-date-accueil .chev { width: 15px; height: 15px; color: var(--vert-moyen); flex: none; }
.btn-date-accueil:hover strong { color: var(--vert-moyen); }
.cal-pop-accueil { left: auto; right: 0; }
@media (max-width: 560px) {
  .btn-date-accueil strong { display: none; }
  .champ-recherche .bloc-date-accueil { padding-left: 0.6rem; }
}

/* ---- pastilles V2 & plaques P1 (planches validées 28/07) ---- */
.plaque-ligne { display: inline-flex; vertical-align: -0.24em; color: var(--vert); }
.plaque-ligne svg { height: 1.15em; }
.ligne-nom { font-weight: 600; }
.leg .ligne-urbaine { margin-right: 0.4rem; color: inherit; text-decoration: none; }
a.ligne-urbaine:hover .ligne-nom, a.ligne-urbaine:focus .ligne-nom { text-decoration: underline; }


/* 29/07 mobile (retours Mathieu) : les separateurs verticaux du resume
   n'ont pas de sens quand les blocs s'empilent ; les deux pastilles de
   trace tiennent sur une seule ligne. */
@media (max-width: 760px) {
  .hero { position: relative; }
  /* Le pied de l'ACCUEIL — autre élément que .pied-resultats, posé sur
     l'illustration. Même intention (le rendre discret), mais on ne touche
     QUE la taille : sa couleur se lit par-dessus un dégradé variable, et
     l'éclaircir demanderait de mesurer le contraste sur le pixel le plus
     clair de l'illustration, pas sur le crème.
     ⚠️ Cette règle DOIT rester ici, après la déclaration de base ligne 218 :
     une media query n'ajoute aucune spécificité, donc placée plus haut dans
     le fichier elle serait écrasée sans bruit. Vécu le 01/08 — le test a
     mesuré 11,52 px là où on attendait 9,6. */
  /* `viewport-fit=cover` étend le viewport SOUS la barre de gestes Android.
     🪤 01/08 : j'avais ajouté l'inset ENTIER à la marge (0,45rem + ~24 px).
     Comme l'illustration, elle, descend maintenant jusqu'au bord, le lien
     s'est retrouvé 24 px plus haut PAR RAPPORT AU DESSIN — « beaucoup trop
     haut sur l'image » (retour Mathieu).
     Compromis : la MOITIÉ de l'inset, et jamais moins que la marge d'avant.
     Le lien retrouve presque sa place, tout en restant décollé du bord —
     la pastille de gestes Android est centrée alors que ce lien est à
     droite, il n'entre donc pas en conflit avec elle. */
  .hero-sources {
    position: absolute; right: 0.9rem; font-size: 0.6rem;
    bottom: max(0.45rem, calc(env(safe-area-inset-bottom, 0px) / 2));
  }
  /* Idem pour le pied des résultats, qui est le dernier élément du flux. */
  .pied-resultats { margin-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
  .resume-bloc { border-right: none; padding-right: 0; }
  /* Lot D (16/08, audit mobile) : le chrome mangeait ~1 écran avant la
     1ʳᵉ rando. La barre-résumé devient compacte et COLLANTE (on change
     date/heure sans remonter), le titre dégonfle. */
  .titre-resultats { font-size: 1.35rem; margin-bottom: 0.6rem; }
  .barre-resume {
    position: sticky; top: 0; z-index: 30;
    padding: 0.55rem 0.9rem; gap: 0.5rem 0.9rem; margin-bottom: 0.8rem;
    box-shadow: 0 6px 18px rgba(28, 75, 60, 0.14);
  }
  .resume-bloc .ic { width: 18px; height: 18px; flex: 0 0 18px; }
  .resume-bloc strong { font-size: 0.9rem; }
  .resume-bloc span { display: inline; font-size: 0.72rem; margin-left: 0.3rem; }
  .resume-bloc > div { display: flex; align-items: baseline; flex-wrap: wrap; }
  .resume-heure { margin-left: auto; gap: 0.35rem; font-size: 0.8rem; }
  .barre-tri { margin-bottom: 0.7rem; }
  /* 30/07 : le summary flex ecrasait ses fragments de texte en colonnes
     etroites sur mobile (vecu 03h58) — flux de texte normal, retours a
     la ligne naturels. */
  .option-aller summary { display: block; line-height: 1.55; }
  .option-aller summary::before { margin-right: 0.35rem; }
  .trace-actions { gap: 0.4rem; }
  .btn-trace { font-size: 0.72rem; padding: 0.32rem 0.6rem; white-space: nowrap; }
}


/* 30/07 (retour Mathieu) : le calendrier de l'ACCUEIL avait garde le vert
   d'origine — passage a la famille marine #173555 de la marque. La vue
   resultats garde son propre scope bleu. */
.champ-recherche .bloc-date-accueil { border-left-color: rgba(23, 53, 85, 0.15); }
.btn-date-accueil { color: #173555; }
.btn-date-accueil .ic-cal, .btn-date-accueil .chev { color: #35567a; }
.cal-pop-accueil .cal-titre { color: #173555; }
.cal-pop-accueil .cal-nav { color: #173555; }
.cal-pop-accueil .cal-nav:hover:not(:disabled) { background: #e3ecf2; }
.cal-pop-accueil .cal-case.dispo { color: #173555; background: #e3ecf2; }
.cal-pop-accueil .cal-case.dispo:hover { background: #cfdde9; }
.cal-pop-accueil .cal-case.choisi { background: #173555; color: #fff; }

/* Bandeau des jours fériés (01/08). Ambre discret : c'est un avertissement,
   pas une erreur — le catalogue du jour reste vérifié contre le GTFS. Il vise
   le RETOUR, parce qu'un aller manqué coûte une heure et un retour manqué
   laisse à pied. */
.bandeau-ferie {
  background: #fdf6e3; border: 1px solid #e8d9a8; border-left: 4px solid #c9a227;
  border-radius: var(--rayon); padding: 0.85rem 1.1rem; margin-bottom: 1rem;
  font-size: 0.93rem; line-height: 1.45; color: #6b5518;
}
.bandeau-ferie b { color: #4a3a0f; }

/* 03/08 — « Voir demain » dans le message de fin de journée. Le visiteur ne
   doit pas rester devant un écran vide avec une explication et rien à faire. */
.btn-demain {
  margin-top: 0.6rem; background: var(--vert); color: #fff; border: 0;
  font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  padding: 0.5rem 0.9rem; border-radius: 8px;
}
.btn-demain:hover { filter: brightness(1.08); }