/* Taxi Vézère, maquette de site dans le système SD-1 Lascaux.
   Les jetons viennent de ../tokens.css, lié et jamais recopié. Le socle et les composants
   reprennent systeme.html (lignes 18 à 314, hors partie « Le système »). Les ajouts propres
   aux pages sont regroupés plus bas, sous « Pages ». */

/* ---------- Transition entre pages ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---------- Socle ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paroi);
  color: var(--noir);
  font-family: var(--famille-texte);
  font-size: var(--t-texte);
  line-height: var(--interligne-texte);
  font-weight: 400;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
  overflow-x: clip;
  /* 26/09/2026 (RGAA 10.4) : texte seul agrandi, un mot plus long que sa colonne se coupe au lieu de
     pousser la page de cote. Sans effet tant qu'aucun mot ne deborde, donc a taille normale. */
  overflow-wrap: break-word;
}
p, li, dd, figcaption, label { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; hyphens: manual; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Chiffres : Bricolage Grotesque, qui n'a pas de zero barre. Atkinson barre ses zeros,
   refuse par Thomas le 18/09/2026 (« pas de 0 barre »). */
.chiffres { font-family: var(--famille-titre); font-variation-settings: "opsz" 14, "wdth" 96, "wght" 600;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: 0.01em; white-space: nowrap; }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--noir);
    transition: text-decoration-color var(--d-survol) var(--courbe-survol), text-decoration-thickness var(--d-survol) var(--courbe-survol); }
a:hover { text-decoration-color: var(--ocre-rouge); text-decoration-thickness: 4px; }
:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: var(--focus-ecart); box-shadow: 0 0 0 var(--focus-ecart) var(--paroi-claire); border-radius: 2px; }

.evitement {
  position: absolute; left: var(--marge); top: -10rem; z-index: 50;
  background: var(--noir); color: var(--paroi-claire); padding: var(--e-3) var(--e-5);
  min-height: 44px; display: inline-flex; align-items: center; text-decoration-color: var(--paroi-claire);
}
.evitement:focus-visible { top: var(--e-3); }

.page { position: relative; isolation: isolate; }
.paroi { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; display: block; pointer-events: none; will-change: transform; }
.situation { position: relative; z-index: 1; }
.sonde-marge { position: absolute; width: var(--marge); height: 0; visibility: hidden; }

.cadre {
  --bord: max(var(--marge), calc((100% - var(--largeur-max)) / 2));
  padding-inline: var(--bord);
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  column-gap: var(--gouttiere);
}

/* ---------- Le trait ---------- */
.trait { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; will-change: transform; }
.sans-js .trait { display: none; }
.trait path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trait .brin-principal { stroke: var(--ocre-rouge); stroke-width: var(--trait-principal); }
.trait .brin-second { stroke: var(--ocre-rouge); stroke-width: var(--trait-brin); }
.trait .brin-jaune { stroke: var(--ocre-jaune); stroke-width: var(--trait-brin-jaune); }
.situation > :not(.trait) { position: relative; z-index: 1; }
.sillon { grid-column: 1 / -1; height: var(--sillon); }

/* ---------- Titres ---------- */
.titre-affiche {
  font-family: var(--famille-titre);
  font-size: var(--t-affiche);
  line-height: var(--interligne-affiche);
  letter-spacing: var(--approche-affiche);
  font-weight: var(--graisse-affiche);
  font-variation-settings: var(--axes-affiche);
}
.titre-bloc {
  font-family: var(--famille-titre);
  font-size: var(--t-titre);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre);
  font-weight: var(--graisse-titre);
  font-variation-settings: var(--axes-titre);
}
.intertitre {
  font-family: var(--famille-titre);
  font-size: var(--t-intertitre);
  line-height: 1.05;
  letter-spacing: var(--approche-intertitre);
  font-weight: var(--graisse-intertitre);
  font-variation-settings: var(--axes-intertitre);
}
.chapeau { font-size: var(--t-chapeau); line-height: 1.4; hyphens: manual; }
.surtitre, .etat, .horaires, .intertitre, .etiquette { hyphens: manual; }
.discret { color: var(--brun); }

/* ---------- En-tête ---------- */
.entete { padding-block: var(--e-5) var(--e-4); align-items: center; row-gap: var(--e-2); }
.marque {
  grid-column: 1 / span 7; font-family: var(--famille-titre); font-weight: 700;
  font-variation-settings: var(--axes-marque); font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1.1;
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; justify-self: start;
}
.marque-logo { padding: 0; }
/* Le logo remplace le nom compose dans l'en-tete (20/09/2026). Sa hauteur commande sa
   largeur ; le fichier est detoure, il se pose sur le fond du site. */
.entete .marque-logo { grid-column: 1 / span 5; align-self: center; }
.marque-logo img { display: block; height: 3.75rem; width: auto; }
@media (max-width: 64rem) { .marque-logo img { height: 3rem; } }
@media (max-width: 40rem) { .marque-logo img { height: 2.5rem; } }
/* 26/09/2026 (RGAA 10.4) : texte seul a 200 % en 320 px, le logo (hauteur en rem) depassait l'ecran.
   Il ne deborde plus de sa colonne, sans se deformer. */
.marque-logo img { max-width: 100%; object-fit: contain; object-position: left center; }
.entete-tel { grid-column: 8 / -1; justify-self: end; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1.25rem; }
/* Six entrées : la navigation prend sa propre ligne, sous le nom et le numéro */
.nav { grid-column: 1 / -1; }
.nav ul { display: flex; flex-wrap: wrap; column-gap: var(--e-6); row-gap: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; }
.nav a[aria-current="page"] { font-weight: 700; text-decoration-color: var(--ocre-rouge); text-decoration-thickness: 4px; }
/* Le menu burger. Remis le 19/09/2026 sur ordre de Thomas, a la place du bouton libelle « Menu ».
   Trois traits dessines a la main, dans le geste du site. Aucune boite, aucune bordure : le trait
   se suffit. Zone de tap de 44 px tenue par le bouton lui-meme. */
.bouton-menu {
  /* En HAUT A DROITE, sur la ligne de la marque : c'est la place du burger, et la seule.
     Thomas, 19/09/2026 : « tu as deja vu un burger en bas a gauche du head toi ? » Il etait pose
     en `grid-column: 1 / -1`, donc seul sur sa ligne, sous les numeros. */
  display: none; grid-row: 1; grid-column: -3 / -1; justify-self: end; align-self: center;
  align-items: center; justify-content: center;
  width: 52px; height: 44px; padding: 0;
  background: transparent; border: 0; cursor: pointer; color: var(--noir);
}
.burger { width: 38px; height: 26px; overflow: visible; }
.burger-trait {
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
  transform-origin: 18px 12px;
  transition: transform var(--d-etat) var(--courbe-survol), opacity 160ms var(--courbe-survol);
}
.bouton-menu:hover { color: var(--ocre-rouge); }
.bouton-menu:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: var(--focus-ecart); border-radius: var(--rayon-champ); }

/* Ouvert : le trait du milieu s'efface, les deux autres se croisent. */
.bouton-menu[aria-expanded="true"] .burger-milieu { opacity: 0; }
.bouton-menu[aria-expanded="true"] .burger-haut { transform: translateY(6px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .burger-bas { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) { .burger-trait { transition: none; } }

/* ---------- Accueil ---------- */
/* Fond de vallee derriere le titre d'accueil (20/09/2026). Le bloc devient le cadre de la video ;
   le voile assombrit surtout le haut, ou le ciel et le soleil ecrasent le sur-titre. */
.accueil.avec-fond { position: relative; isolation: isolate; }
.fond-accueil { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--paroi); }
.fond-accueil-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.fond-accueil-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,26,21,0.68) 0%, rgba(14,26,21,0.60) 40%, rgba(14,26,21,0.76) 100%),
    linear-gradient(to right, rgba(14,26,21,0.58) 0%, rgba(14,26,21,0.10) 60%, rgba(14,26,21,0.38) 100%);
}
/* 26/09/2026 (RGAA 13.8) : commande de la video, creee par le script seulement quand elle tourne.
   En haut a droite du cadre : en bas, elle passait sous le rail des contacts flottants. */
.fond-accueil-pause {
  position: absolute; right: var(--marge); top: var(--e-5); z-index: 1;
  min-height: 44px; padding: var(--e-2) var(--e-4);
  font: inherit; font-size: var(--t-mention); font-weight: 700;
  color: var(--noir); background: var(--paroi); border: 1px solid var(--noir); border-radius: var(--rayon-bouton);
  cursor: pointer;
}
.fond-accueil-pause:hover { background: var(--noir); color: var(--paroi); }
.fond-accueil-pause:focus-visible {
  outline: var(--focus-anneau) solid var(--noir); outline-offset: var(--focus-ecart);
  box-shadow: 0 0 0 var(--focus-ecart) var(--paroi);
}
@media (prefers-reduced-motion: reduce) {
  .fond-accueil-media { display: none; }
  .fond-accueil { background: url("/fond-accueil/poster.jpg") center / cover no-repeat; }
}
@media (max-width: 64rem) {
  .fond-accueil-media { display: none; }
  .fond-accueil { background: url("/fond-accueil/poster.jpg") center / cover no-repeat; }
}
.accueil { padding-top: clamp(2.5rem, 1rem + 5vw, 6rem); padding-bottom: var(--e-9); row-gap: 0; }
.surtitre { grid-column: 1 / span 8; color: var(--brun); font-size: var(--t-texte); margin-bottom: var(--e-5); }
/* Le sur-titre de l'accueil gagne en presence sans grossir ni changer de couleur (20/09/2026) :
   plus de graisse, plus d'interlettrage, et une ombre douce qui le decolle de la video. */
.accueil.avec-fond .surtitre {
  font-weight: 700;
  letter-spacing: 0.07em;
  text-shadow: 0 1px 12px rgba(14, 26, 21, 0.85), 0 1px 2px rgba(14, 26, 21, 0.6);
}
.accueil h1 { grid-column: 1 / -1; }
.accueil .sillon { height: clamp(4rem, 2.4rem + 4vw, 6.5rem); }
.promesse { grid-column: 1 / span 5; grid-row: 4; align-self: start; }
.promesse .chapeau + p { margin-top: var(--e-5); }
.appel { grid-column: 8 / -1; align-self: start; }
.accueil .appel { grid-row: 4; }

/* Bouton d'appel */
.bouton-appel {
  display: grid; gap: 0.1em; justify-items: start;
  background: var(--ocre-rouge); color: var(--sur-plein);
  text-decoration: none; border-radius: var(--rayon-bouton);
  padding: var(--e-4) var(--e-6) var(--e-5) var(--e-5);
  min-height: 44px; width: 100%; position: relative; container-type: inline-size;
  transition: background-color var(--d-etat) var(--courbe-survol);
}
.bouton-appel .libelle { font-size: var(--t-texte); font-weight: 700; letter-spacing: 0.01em; }
.bouton-appel .numero {
  font-family: var(--famille-titre); font-weight: 700; font-variation-settings: "opsz" 48, "wdth" 88;
  font-size: clamp(1.5rem, calc(100cqi / 6.3), 3rem); line-height: 1; letter-spacing: -0.01em;
}
/* 26/09/2026 (RGAA 10.4) : texte seul agrandi, le plancher de 1,5 rem faisait sortir le numero du
   bouton en 320 px. Plancher borne par son equivalent en px (24 px) : identique a taille normale. */
.bouton-appel .numero { font-size: clamp(min(1.5rem, 24px), calc(100cqi / 6.3), 3rem); }
.bouton-appel .jauge { position: absolute; left: var(--e-5); right: var(--e-6); bottom: 0.65rem; height: 3px; background: var(--sur-plein); transform-origin: left center; transform: scaleX(0.18); transition: transform 420ms var(--courbe-survol); }
.bouton-appel:hover { background: var(--brun); }
.bouton-appel:hover .jauge, .bouton-appel:focus-visible .jauge { transform: scaleX(1); }
.bouton-appel:active { background: var(--noir); transform: translateY(1px); }
.bouton-appel:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: var(--focus-ecart); box-shadow: 0 0 0 var(--focus-ecart) var(--paroi); border-radius: var(--rayon-bouton); }

.etat { margin-top: var(--e-6); }
.etat p[data-etat] { font-weight: 700; font-size: var(--t-chapeau); line-height: 1.25; }
.etat .souligne { display: block; height: 4px; width: 7.5rem; margin-top: var(--e-2); background: var(--ocre-rouge); border-radius: 2px 6px 3px 5px; transform-origin: left center; }
/* Le souligne est TOUJOURS le frere du paragraphe de nuit dans le HTML, meme quand cet etat est
   cache : le selecteur de voisinage le rendait brun a toute heure. Seul l'etat pose par le
   script sur le bloc fait foi. Corrige le 20/09/2026. */
.etat[data-actif="nuit"] .souligne { background: var(--brun); }
.horaires { color: var(--brun); margin-top: var(--e-2); }
.canaux { margin-top: var(--e-5); display: grid; gap: 0; }
.canaux a, .canaux span { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Blocs ---------- */
.bloc { padding-bottom: var(--e-9); }
.bloc .titre-bloc { grid-column: 1 / span 10; }
.bloc .intro { grid-column: 1 / span 5; align-self: start; }
.intro p + p { margin-top: var(--e-4); }
.liste-motifs { grid-column: 7 / -1; }
.liste-motifs li, .liste-lieux li, .liste-fauteuil li {
  position: relative; display: block;
  border-top: 1px solid var(--brun); padding-block: var(--e-4) var(--e-4);
}
.liste-motifs li:last-child, .liste-lieux li:last-child { border-bottom: 1px solid var(--brun); }
/* Sur chaque filet, un court morceau du trait, jamais deux fois le même */
.marque-trait { position: absolute; left: -0.25rem; top: -0.4rem; width: 4.5rem; height: 0.8rem; overflow: visible; }
.marque-trait path { fill: none; stroke: var(--ocre-rouge); stroke-width: 4.5; stroke-linecap: round; }
.liste-motifs .intertitre { font-variation-settings: "opsz" 36, "wdth" 82; }

.gares .titre-bloc { grid-column: 3 / -1; }
.gares .colonne-gares { grid-column: 1 / span 5; }
.gares .colonne-aeroports { grid-column: 7 / span 5; }
.liste-lieux { margin-top: var(--e-4); }
.liste-lieux .intertitre { font-variation-settings: "opsz" 36, "wdth" 80; }
.etiquette { font-weight: 700; color: var(--brun); font-size: var(--t-texte); letter-spacing: 0.02em; }
.aussi { grid-column: 3 / span 8; margin-top: var(--e-7); }
.aussi .chapeau + .chapeau, .aussi .chapeau + p { margin-top: var(--e-3); }

.fauteuil .titre-bloc { grid-column: 1 / span 9; }
.lavis-contenu { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-block: var(--e-7); position: relative; }
.lavis-contenu > ul, .lavis-contenu > p { position: relative; z-index: 1; }
.lavis { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
.sans-js .lavis { display: none; }
.sans-js .lavis-contenu { background: var(--lavis-ocre); border-radius: 40% 60% 45% 55% / 8% 12% 10% 14%; }
.liste-fauteuil { grid-column: 2 / span 10; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gouttiere); }
.liste-fauteuil li { border-color: var(--noir); }

.contact .titre-bloc { grid-column: 1 / span 10; }
.contact .appel { grid-column: 8 / -1; grid-row: 3; }
.formulaire { grid-column: 1 / span 6; grid-row: 3; }
.formulaire h3 { margin-bottom: var(--e-4); }
.champ { display: grid; gap: var(--e-2); margin-top: var(--e-5); }
.champ label { font-weight: 700; }
.champ .aide { color: var(--brun); }
/* 26/09/2026 (RGAA 11.10) : message d'erreur ecrit sous le champ, pose par maquette.js. */
.champ-erreur { margin: var(--e-2) 0 0; font-size: var(--t-mention); font-weight: 700; color: var(--noir); }
.champ input, .champ textarea {
  font: inherit; color: var(--noir); background: var(--paroi);
  border: var(--bordure-champ) solid var(--brun); border-radius: var(--rayon-champ);
  padding: var(--e-3) var(--e-4); min-height: 3.25rem; width: 100%;
}
.champ textarea { min-height: 6.5rem; resize: vertical; }
.champ input:hover, .champ textarea:hover { border-color: var(--noir); }
.champ input:focus-visible, .champ textarea:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: 2px; box-shadow: none; }
.bouton-secondaire {
  margin-top: var(--e-6); font: inherit; font-weight: 700; color: var(--noir); background: transparent;
  border: var(--bordure-champ) solid var(--noir); border-radius: var(--rayon-bouton);
  padding: var(--e-3) var(--e-6); min-height: 44px; cursor: pointer;
  transition: background-color var(--d-etat) var(--courbe-survol), color var(--d-etat) var(--courbe-survol);
}
.bouton-secondaire:hover { background: var(--noir); color: var(--paroi-claire); }
/* Le bouton secondaire porte aussi un lien : sans boite, le padding d'un <a> en ligne
   deborde sur le texte du dessus au lieu de pousser la ligne. */
a.bouton-secondaire { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; }
/* 26/09/2026 (RGAA 10.4) : texte seul agrandi, « Appeler le » passe au-dessus du numero au lieu de
   sortir de l'ecran ; le retrait lateral est borne par son equivalent en px (36 px = 2,25 rem). */
a.bouton-secondaire { flex-wrap: wrap; max-width: 100%; padding-inline: min(var(--e-6), 36px); }
.note-maquette { margin-top: var(--e-4); color: var(--brun); }

/* ---------- Pied ---------- */
.pied { padding-block: var(--e-7) var(--e-8); border-top: 1px solid var(--noir); row-gap: var(--e-5); }
/* Quatre colonnes depuis le 20/09/2026 : la marque prend sa propre ligne, les quatre colonnes
   de 3 remplissent la grille de 12 en dessous. */
.pied .marque { grid-column: 1 / -1; align-self: start; }
.pied-col { grid-column: span 3; }
.pied a { display: inline-flex; align-items: center; min-height: 44px; }
/* 26/09/2026 (RGAA 10.4) : texte seul agrandi, le prenom passe au-dessus du numero. */
.pied a { flex-wrap: wrap; }
.pied { hyphens: manual; }
.pied .etiquette { margin-bottom: var(--e-1); }
/* Le titre de la colonne « Notre secteur » est un lien vers la page mere : il garde l'aspect
   des trois autres etiquettes, sans hauteur de cible ni soulignement, et se souligne au survol. */
.pied .etiquette a { color: inherit; min-height: 0; display: inline; text-decoration: none; }
.pied .etiquette a:hover, .pied .etiquette a:focus-visible { text-decoration: underline; }
.pied-col p + p, .pied-col ul + p { margin-top: var(--e-3); }

/* ================= Pages ================= */

.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pied a[aria-current="page"] { font-weight: 700; text-decoration-color: var(--ocre-rouge); text-decoration-thickness: 4px; }
.bloc .intro-large { grid-column: 1 / span 8; }
.texte-jour p + p { margin-top: var(--e-4); }
.texte-jour .chapeau { margin-bottom: var(--e-2); }

/* Fil d'Ariane, à la place du surtitre */
.ariane { grid-column: 1 / -1; margin-bottom: var(--e-5); color: var(--brun); }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; }
.ariane li { display: inline-flex; align-items: center; min-height: 44px; }
.ariane li + li::before { content: "\203A" / ""; margin-inline: var(--e-3); color: var(--brun); }
.ariane a { display: inline-flex; align-items: center; min-height: 44px; }

/* Les quatre chauffeurs */
.liste-chauffeurs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: var(--e-5); row-gap: var(--e-1); }
.liste-chauffeurs .commune { color: var(--brun); text-align: right; }

/* Une ligne par trajet : le nom à gauche, la phrase à droite */
.liste-trajets { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.liste-trajets li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; position: relative; border-top: 1px solid var(--brun); padding-block: var(--e-5); }
.liste-trajets li:last-child { border-bottom: 1px solid var(--brun); }
.liste-trajets .intertitre { grid-column: 1 / span 6; font-variation-settings: "opsz" 36, "wdth" 82; }
.liste-trajets .intertitre a { text-decoration-thickness: 2px; text-underline-offset: 0.14em; padding-block: 0.2em; }
.liste-trajets .intertitre a:hover { text-decoration-thickness: 5px; }
.liste-trajets li > p { grid-column: 7 / -1; }
.liste-motifs li p, .liste-lieux li p { margin-top: var(--e-2); }

/* Bloc à composition inversée : liste à gauche, texte à droite */
.inverse .intro { grid-column: 8 / -1; grid-row: 3; }
.inverse .liste-motifs { grid-column: 1 / span 6; grid-row: 3; }

/* Fauteuil : la phrase d'entrée, dans le lavis */
.lavis-intro { grid-column: 2 / span 8; margin-bottom: var(--e-6); }
.liste-fauteuil li p { margin-top: var(--e-2); }

/* À bord et paiement */
.colonne-gauche { grid-column: 1 / span 5; }
.colonne-droite { grid-column: 7 / span 6; }
.liste-simple { margin-top: var(--e-4); }
.liste-simple li { border-top: 1px solid var(--brun); padding-block: var(--e-3); }
.liste-simple li:last-child { border-bottom: 1px solid var(--brun); }
.vehicules { margin-top: var(--e-5); }

/* Secteur : les communes */
.communes { grid-column: 1 / -1; columns: 3 16rem; column-gap: var(--gouttiere); margin-top: var(--e-7); }
.communes li { break-inside: avoid; border-top: 1px solid var(--brun); padding-block: var(--e-3); }
.secteur-note { grid-column: 1 / span 8; margin-top: var(--e-5); }

/* Réserver, dans le bloc contact */
.reserver { grid-column: 1 / span 6; grid-row: 3; }
.reserver .intertitre { margin-bottom: var(--e-4); }
.reserver p + p { margin-top: var(--e-4); }
/* Accueil : le formulaire occupe la gauche sur deux rangs, « Quand réserver » passe sous l'appel */
.contact .formulaire { grid-row: 3 / span 2; }
.contact .reserver-accueil { grid-column: 8 / -1; grid-row: 4; margin-top: var(--e-7); align-self: start; }

/* Étapes numérotées */
.etapes { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.etapes > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; position: relative; border-top: 1px solid var(--brun); padding-block: var(--e-5) var(--e-6); }
.etapes > li:last-child { border-bottom: 1px solid var(--brun); }
.numero-etape {
  grid-column: 1 / span 1; font-family: var(--famille-titre); font-size: var(--t-titre); line-height: 0.8;
  font-weight: var(--graisse-titre); font-variation-settings: var(--axes-titre); letter-spacing: var(--approche-titre);
}
.contenu-etape { grid-column: 2 / span 8; }
.contenu-etape .liste-simple { margin-block: var(--e-3) var(--e-4); }
.contenu-etape .intertitre { font-variation-settings: "opsz" 36, "wdth" 82; }
.contenu-etape .intertitre + p { margin-top: var(--e-4); }
.contenu-etape p + p { margin-top: var(--e-3); }

/* Renvoi court, sans sillon */
.renvoi { padding-bottom: var(--e-8); }
.renvoi > div { grid-column: 3 / span 8; border-top: 1px solid var(--noir); padding-top: var(--e-5); position: relative; }
.renvoi .intertitre + p { margin-top: var(--e-3); }

/* Sommaire des pages du hub, non maquettées */
.hub-sommaire { grid-column: 1 / -1; columns: 2 22rem; column-gap: var(--gouttiere); margin-top: var(--e-5); }
.hub-sommaire li { break-inside: avoid; border-top: 1px solid var(--brun); padding-block: var(--e-3); }
.hub-note { grid-column: 1 / span 8; }

/* Le récit */
.recit { grid-column: 3 / span 8; margin: var(--e-8) 0 0; position: relative; border-top: 1px solid var(--noir); padding-top: var(--e-6); }
.recit blockquote { margin: 0; }
.recit blockquote p + p { margin-top: var(--e-4); }
.recit figcaption { margin-top: var(--e-4); color: var(--brun); }

.reserver-accueil .intertitre { margin-bottom: var(--e-4); }
.reserver-accueil p + p { margin-top: var(--e-4); }
.lien-seul { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Appel rapide, fixé pendant tout le défilement ---------- */
/* Sur ordinateur, le bouton vit dans un couloir réservé à droite de la grille : aucun texte,
   aucun bouton ni le trait ne passent dessous, à aucune position de défilement. */
:root { --hauteur-appel-fixe: 4.5rem; --ecart-appel-fixe: var(--e-5); --largeur-appel-fixe: 13rem; --rail-appel: calc(var(--largeur-appel-fixe) + 3.5rem); }
@media (min-width: 64.0625rem) {
  .cadre { padding-right: calc(var(--bord) + var(--rail-appel)); }
}
.situation > .appel-fixe {
  position: fixed; z-index: 40; width: var(--largeur-appel-fixe);
  right: max(var(--marge), calc((100% - var(--largeur-max)) / 2));
  bottom: calc(var(--ecart-appel-fixe) + env(safe-area-inset-bottom, 0px));
}
/* Contacts flottants, 20/09/2026. Une pastille par contact ; le libelle se deplie au survol et au
   clavier, en animant la colonne de grille (0fr vers 1fr), donc sans sortir de l'ecran et sans
   JavaScript. Le bloc garde l'emplacement de l'ancien bouton d'appel. */
.situation > .appel-fixe { width: auto; display: grid; justify-items: end; gap: var(--e-2); }
.contact-fixe {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 3rem; min-width: 44px;
  background: var(--ocre-rouge); color: var(--sur-plein); text-decoration: none;
  border-radius: var(--rayon-bouton);
  transition: background-color var(--d-etat) var(--courbe-survol);
}
.contact-libelle {
  display: block; max-width: 0; overflow: hidden;
  font-size: var(--t-texte); font-weight: 700; line-height: 1.15; letter-spacing: 0.01em;
  transition: max-width var(--d-etat) var(--courbe-survol);
}
.contact-libelle > span { display: block; white-space: nowrap; padding-inline-start: var(--e-4); }
/* 26/09/2026 (RGAA 10.4) : libelle court dans la barre pleine largeur, sous 64 rem (voir plus bas). */
.contact-libelle .libelle-court { display: none; }
.contact-icone { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; }
.contact-fixe:hover .contact-libelle,
.contact-fixe:focus-visible .contact-libelle { max-width: 16rem; }
.contact-fixe:hover { background: var(--brun); }
.contact-fixe:active { background: var(--noir); transform: translateY(1px); }
.contact-fixe:focus-visible {
  outline: var(--focus-anneau) solid var(--noir); outline-offset: var(--focus-ecart);
  box-shadow: 0 0 0 var(--focus-ecart) var(--paroi); border-radius: var(--rayon-bouton);
}
@media (prefers-reduced-motion: reduce) { .contact-libelle { max-width: 16rem; } }

.bouton-fixe {
  display: grid; align-content: center; justify-items: start; gap: 0.15em;
  min-height: var(--hauteur-appel-fixe); min-width: 44px; width: 100%;
  padding: var(--e-2) var(--e-4);
  background: var(--ocre-rouge); color: var(--sur-plein);
  text-decoration: none; border-radius: var(--rayon-bouton);
  transition: background-color var(--d-etat) var(--courbe-survol);
}
.bouton-fixe .libelle { font-size: var(--t-texte); font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; }
.bouton-fixe .numero {
  font-family: var(--famille-titre); font-weight: 700; font-variation-settings: "opsz" 48, "wdth" 88;
  font-size: 1.75rem; line-height: 1; letter-spacing: -0.01em;
}
.bouton-fixe:hover { background: var(--brun); }
.bouton-fixe:active { background: var(--noir); transform: translateY(1px); }
.bouton-fixe:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: var(--focus-ecart); box-shadow: 0 0 0 var(--focus-ecart) var(--paroi); border-radius: var(--rayon-bouton); }
@media print {
  .appel-fixe { display: none !important; }
  body { padding-bottom: 0; }
}

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 64rem) {
  .promesse { grid-column: 1 / span 7; grid-row: 5; margin-top: var(--e-7); }
  .accueil .appel { grid-column: 1 / span 8; grid-row: 4; }
  .bloc .titre-bloc, .gares .titre-bloc, .fauteuil .titre-bloc, .contact .titre-bloc { grid-column: 1 / -1; }
  .bloc .intro { grid-column: 1 / span 8; }
  .liste-motifs { grid-column: 1 / -1; margin-top: var(--e-6); }
  .inverse .intro { grid-column: 1 / span 8; grid-row: 3; }
  .inverse .liste-motifs { grid-column: 1 / -1; grid-row: 4; }
  .gares .colonne-gares { grid-column: 1 / span 6; }
  .gares .colonne-aeroports { grid-column: 7 / -1; }
  .aussi { grid-column: 1 / span 10; }
  .liste-fauteuil { grid-column: 1 / -1; }
  .vehicule .chapeau { grid-column: 1 / -1; }
  .lavis-intro { grid-column: 1 / span 10; }
  .contact .appel { grid-column: 1 / span 8; grid-row: 3; }
  .contact .formulaire { grid-column: 1 / span 8; grid-row: 5; margin-top: var(--e-7); }
  .contact .reserver, .contact .reserver-accueil { grid-column: 1 / span 8; grid-row: 4; margin-top: var(--e-7); }
  .colonne-gauche { grid-column: 1 / span 6; }
  .colonne-droite { grid-column: 7 / -1; }
  .contenu-etape { grid-column: 2 / -1; }
  .renvoi > div, .recit { grid-column: 1 / span 10; }
  .pied .marque, .pied-col { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .entete-tel { font-size: 1.1875rem; }
  .marque { font-size: 1.1875rem; }
  .accueil { padding-top: var(--e-5); }
  .surtitre { margin-bottom: var(--e-3); }
  .ariane { margin-bottom: var(--e-3); }
  .surtitre, .accueil .appel, .contact .appel, .contact .formulaire, .contact .reserver, .contact .reserver-accueil, .promesse, .bloc .intro, .inverse .intro { grid-column: 1 / -1; }
  .gares .colonne-gares, .gares .colonne-aeroports { grid-column: 1 / -1; }
  .gares .colonne-aeroports { margin-top: var(--e-6); }
  .aussi, .secteur-note, .hub-note, .renvoi > div, .recit { grid-column: 1 / -1; }
  .liste-fauteuil { grid-template-columns: minmax(0, 1fr); }
  .lavis-contenu { padding-inline: var(--e-4); }
  .lavis-intro { grid-column: 1 / -1; }
  .liste-trajets .intertitre, .liste-trajets li > p { grid-column: 1 / -1; }
  .liste-trajets li > p { margin-top: var(--e-2); }
  .colonne-gauche, .colonne-droite { grid-column: 1 / -1; }
  .colonne-droite { margin-top: var(--e-6); }
  .liste-chauffeurs .commune { text-align: left; }
  .numero-etape { grid-column: 1 / span 2; font-size: var(--t-intertitre); line-height: 1.05; }
  .contenu-etape { grid-column: 3 / -1; }
  .communes { columns: 1; }
  .nav ul { column-gap: var(--e-4); }
  /* Menu replié derrière un vrai bouton, seulement si le script tourne */
  .avec-js .bouton-menu { display: inline-flex; }
  .avec-js .nav:not(.ouverte) { display: none; }
  .avec-js .nav.ouverte { max-height: calc(100dvh - var(--hauteur-entete, 8rem) - var(--e-6)); overflow-y: auto; }
  .avec-js .nav ul { flex-direction: column; margin-top: var(--e-2); }
  .avec-js .nav li { border-top: 1px solid var(--brun); }
  .avec-js .nav li:last-child { border-bottom: 1px solid var(--brun); }
  .avec-js .nav a { width: 100%; }
}
@media (max-width: 64rem) {
  /* Appel rapide : barre pleine largeur, collée en bas (téléphone et tablette) */
  :root { --hauteur-appel-fixe: 3.625rem; --ecart-appel-fixe: 0px; }
  body { padding-bottom: calc(var(--hauteur-appel-fixe) + env(safe-area-inset-bottom, 0px)); }
  .situation > .appel-fixe { left: 0; right: 0; bottom: 0; width: auto; }
  .bouton-fixe {
    display: flex; align-items: center; justify-content: space-between; column-gap: var(--e-4);
    width: 100%; min-height: calc(var(--hauteur-appel-fixe) + env(safe-area-inset-bottom, 0px));
    padding: var(--e-2) var(--marge) calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
    border-radius: 0.375rem 1.25rem 0 0;
  }
  .situation > .appel-fixe {
    display: flex; gap: 0;
    background: var(--ocre-rouge);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .contact-fixe {
    flex: 1; justify-content: center; gap: var(--e-2);
    min-height: var(--hauteur-appel-fixe); border-radius: 0;
  }
  .contact-fixe + .contact-fixe { border-inline-start: 1px solid var(--sur-plein); }
  .contact-libelle { max-width: none; }
  .contact-libelle > span { padding-inline-start: 0; }
  .contact-libelle .libelle-long { display: none; }
  .contact-libelle .libelle-court { display: inline; }
  .contact-icone { width: auto; height: auto; }
  .contact-fixe:focus-visible { outline-offset: -9px; box-shadow: inset 0 0 0 var(--focus-anneau) var(--noir); border-radius: 0; }
  .bouton-fixe .numero { font-size: 1.625rem; }
  /* Collée aux bords, la barre porte son anneau à l'intérieur : liseré clair puis noir, couleurs du système */
  .bouton-fixe:focus-visible { outline: var(--focus-anneau) solid var(--paroi-claire); outline-offset: -9px; box-shadow: inset 0 0 0 var(--focus-anneau) var(--noir); border-radius: 0.375rem 1.25rem 0 0; }
}
@media (max-width: 22.5rem) {
  /* 26/09/2026 (RGAA 10.4) : a 320 px, « WhatsApp » et son icone ne tenaient pas cote a cote dans
     un tiers de barre (92 px de texte pour 76). Sous 360 px, l'icone passe au-dessus du mot. */
  .contact-fixe { flex-direction: column-reverse; gap: 0.125rem; }
  .contact-libelle { font-size: var(--t-mention); }
  /* 26/09/2026 : texte seul agrandi, le libelle reste dans sa case au lieu de chevaucher le voisin. */
  .contact-libelle { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
}


/* Strate des avis, ajoutee le 18/09/2026. Classes neuves : aucune regle existante modifiee.
   Les enfants se placent dans la grille de 12 colonnes du cadre, comme les autres blocs. */
.avis .avis-note { grid-column: 1 / span 10; margin-bottom: var(--e-6); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.avis .avis-note-texte { font-variant-numeric: tabular-nums; }
.avis .logo-google { width: 5.5rem; height: auto; display: block; }
.liste-avis { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-7); }
.liste-avis > li { display: grid; gap: var(--e-3); align-content: start; }
.liste-avis .marque-trait { position: static; left: auto; top: auto; width: 3.25rem; height: 0.7rem; }
.liste-avis .marque-trait path { stroke-width: 3.2; }
.liste-avis blockquote { margin: 0; }
.liste-avis blockquote p { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--noir); }
.liste-avis .signature { margin: 0; display: grid; gap: 0.15rem; font-weight: 700; }
.liste-avis .signature .discret { font-weight: 400; }
.avis .avis-source { grid-column: 1 / span 8; margin-top: var(--e-6); }
@media (min-width: 64rem) {
  .liste-avis { grid-template-columns: repeat(3, 1fr); column-gap: var(--gouttiere); }
}


/* Photos du vehicule adapte, ajoutees le 18/09/2026, revues le meme jour :
   deux images fixes, AUCUN defilement horizontal (refuse par Thomas). */
/* Le chapeau de la section « Le vehicule » : sans placement, la grille de 12 colonnes
   lui en donnait UNE SEULE et le texte tombait mot par mot (vu le 18/09/2026). */
.vehicule .chapeau { grid-column: 2 / span 10; margin-bottom: var(--e-5); }
.fauteuil .photos-vehicule { grid-column: 2 / span 10; margin: var(--e-6) 0 var(--e-7); position: relative; z-index: 1; }
.photos-piste { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: grid; gap: var(--e-4); }
.photos-piste figure { margin: 0; }
.photos-piste img { display: block; width: 100%; height: 15rem; object-fit: cover; border-radius: 0.5rem; background: var(--lavis-ocre); }
.photos-note { margin: 0; }
@media (min-width: 48rem) {
  .photos-piste { grid-template-columns: 1fr 1fr; }
  .photos-piste img { height: 16rem; }
}


/* Telephone sous le nom des chauffeurs, ajoute le 18/09/2026. Zone de touche de 44 px. */
.liste-chauffeurs .tel-chauffeur { display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 0.15rem; font-size: 1.125rem; font-weight: 700; color: var(--brun);
  text-decoration: underline; text-underline-offset: 0.2em; }
.liste-chauffeurs .tel-chauffeur:hover { color: var(--noir); }
.liste-chauffeurs .tel-chauffeur:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: var(--focus-ecart); }


/* Bouton d'appel fixe : au MILIEU de la hauteur sur ordinateur, ordre de Thomas du 18/09/2026.
   Sur telephone, il reste la barre basse pleine largeur, inchangee. */
@media (min-width: 64rem) {
  .situation > .appel-fixe { top: 50%; bottom: auto; transform: translateY(-50%); }
}


/* Logo WhatsApp dans la liste des canaux, ajoute le 18/09/2026. Servi depuis notre domaine. */
.canaux .canal-whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; }
.canaux .logo-whatsapp { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------- Menu de navigation ----------
   Barre exposee sur grand ecran, repliee derriere le bouton Menu sous 64 rem seulement.
   Composition en Bricolage condense (la police de titre du systeme), le trait brosse d'ocre
   remplace le chevron, le sous-menu s'ouvre par decoupe. Une seule courbe, celle du systeme. */
.situation > .entete {
  position: sticky; top: 0; z-index: 30;
  background: var(--paroi);
  padding-block: var(--e-4) var(--e-3);
}
/* Un filet apparait seulement quand la page a defile sous l'en-tete */
.situation > .entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--noir); opacity: 0; transition: opacity var(--d-etat) var(--courbe-survol);
}
.detachee .situation > .entete::after { opacity: 1; }
/* Les ancres ne passent plus sous l'en-tete fixe */
[id] { scroll-margin-top: calc(var(--hauteur-entete, 8rem) + var(--e-4)); }
.nav { grid-column: 1 / -1; margin-top: var(--e-4); }
.nav .nav-niveau1 { display: flex; flex-wrap: nowrap; column-gap: clamp(var(--e-3), 0.3rem + 0.95vw, var(--e-5)); }
/* 26/09/2026 (RGAA 10.4) : texte seul agrandi a 200 % entre 75 et 80 rem, la ligne depassait de
   12 a 33 px. Elle passe a la ligne seulement quand elle ne tient plus ; a taille normale, rien ne bouge. */
.nav .nav-niveau1 { flex-wrap: wrap; }

.nav-entree { position: relative; display: flex; flex-direction: column; }
.nav-lien {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--famille-titre); font-weight: 600;
  font-variation-settings: "opsz" 14, "wdth" 80; font-size: 1.125rem; letter-spacing: -0.01em;
  line-height: 1.1; text-decoration: none; color: var(--noir);
  transition: font-variation-settings var(--d-survol) var(--courbe-survol);
}
/* « Autres trajets » n'a pas de page mere, donc son libelle n'est pas un lien. Il etait brun,
   les autres noirs. Thomas, 19/09/2026 : « devrait etre de la meme couleur, corriger ». */
.nav-sans-lien { color: var(--noir); }
.nav-lien[aria-current="page"] { font-variation-settings: "opsz" 14, "wdth" 92; font-weight: 700; }

.nav-trait { position: absolute; left: -0.1rem; right: -0.1rem; bottom: 0.15rem; width: auto; height: 0.6rem; overflow: visible; pointer-events: none; }
.nav-trait path {
  fill: none; stroke: var(--ocre-rouge); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.02;
  transition: stroke-dashoffset 320ms var(--courbe-survol);
}
.nav-entree[data-filles] .nav-trait path { stroke-width: 5.5; }
.nav-entree:hover .nav-trait path, .nav-entree:has(:focus-visible) .nav-trait path { stroke-dashoffset: 0; }

.nav .sous-menu {
  position: absolute; top: 100%; left: 0; z-index: 20; min-width: 17rem;
  display: block; background: var(--paroi-claire); border: 0; border-top: 1px solid var(--noir);
  padding: var(--e-3) var(--e-5) var(--e-4);
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path 180ms var(--courbe-survol), visibility 0s 180ms;
}
/* 26/09/2026 (RGAA 10.4) : texte seul agrandi a 200 %, les sous-menus de Mariages, Autres trajets
   et Equipements depassaient a droite (jusqu'a 284 px a 1 210 px de large, mesure). Les trois
   dernieres entrees qui en portent un l'ancrent a droite ; la derniere n'en porte pas. */
.nav .nav-niveau1 > .nav-entree:nth-last-child(-n+4) > .sous-menu { left: auto; right: 0; }
.nav .nav-entree:hover > .sous-menu, .nav .nav-entree:has(:focus-visible) > .sous-menu {
  visibility: visible; clip-path: inset(0 0 0 0);
  transition: clip-path 320ms var(--courbe-survol), visibility 0s;
}
.nav .sous-menu li { position: relative; border-top: 1px solid var(--brun); padding-block: var(--e-2); color: var(--brun); font-size: var(--t-mention); }
.nav .sous-menu li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 3px;
  background: var(--ocre-rouge); border-radius: 2px; transform: translateY(-50%);
  transition: width 220ms var(--courbe-survol);
}
.nav .sous-menu li:hover::before, .nav .sous-menu li:has(:focus-visible)::before { width: 0.9rem; }
.nav .sous-menu li:first-child { border-top: 0; }
.nav .sous-menu li a, .nav .sous-menu li { transition: padding-left 220ms var(--courbe-survol), color 180ms var(--courbe-survol); }
.nav .sous-menu li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--noir); text-decoration: none; }
.nav .sous-menu li:hover, .nav .sous-menu li:has(:focus-visible) { padding-left: 1.4rem; color: var(--ocre-rouge); }
.nav .sous-menu li:hover a, .nav .sous-menu li:has(:focus-visible) a { color: var(--ocre-rouge); }
.nav-note { display: none; }
/* 27/09/2026 : bouton qui deplie un groupe du menu replie, masque au-dela de 75 rem. */
.nav-deplier { display: none; }

@media (max-width: 90rem) and (min-width: 75.0625rem) {
  /* De 1201 a 1440 px, la ligne se resserre plutot que de deborder */
  .nav .nav-niveau1 { column-gap: var(--e-3); }
  .nav-lien { font-size: 1.0625rem; font-variation-settings: "opsz" 14, "wdth" 75; }
  .nav-lien[aria-current="page"] { font-variation-settings: "opsz" 14, "wdth" 86; }
}

@media (max-width: 75rem) {
  /* Sous 1200 px, dix entrees ne tiennent pas sur une ligne : la navigation se replie.
     Pas de survol au doigt : la navigation se replie derriere le bouton Menu,
     et les sous-menus restent deployes en retrait sous leur page mere. */
  .avec-js .bouton-menu { display: inline-flex; }
  .avec-js .nav:not(.ouverte) { display: none; }
  .avec-js .nav.ouverte { max-height: calc(100dvh - var(--hauteur-entete, 8rem) - var(--e-6)); overflow-y: auto; }
  .nav { border-top: 1px solid var(--noir); margin-top: var(--e-5); padding-top: var(--e-4); padding-bottom: var(--e-4); }
  /* 26/09/2026 (RGAA 10.7) : menu ouvert, les derniers liens ne prennent plus le focus sous la barre de contact. */
  .avec-js .nav.ouverte {
    padding-bottom: calc(var(--e-4) + var(--hauteur-appel-fixe) + var(--ecart-appel-fixe) + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(var(--hauteur-appel-fixe) + var(--ecart-appel-fixe) + env(safe-area-inset-bottom, 0px));
  }
  .nav .nav-niveau1 { flex-wrap: wrap; flex-direction: column; column-gap: 0; }
  .nav-entree { border-top: 1px solid var(--brun); }
  .nav-entree:first-child { border-top: 0; }
  .nav-lien { font-size: 1.25rem; font-variation-settings: "opsz" 14, "wdth" 85; }
  .nav-trait { display: none; }
  .nav .sous-menu {
    position: static; visibility: visible; clip-path: none; transition: none;
    border-top: 0; background: transparent; padding: 0 0 var(--e-3) var(--e-5); min-width: 0;
  }
  .nav-note { display: block; margin-top: var(--e-4); }
  /* 27/09/2026 (Thomas : sous-categories « ployees par defaut ») : chaque groupe s'ouvre replie,
     un bouton a cote de l'intitule deplie ses pages. Seulement quand le script a pose les boutons. */
  .nav.menu-pliable .nav-entree[data-filles] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .nav.menu-pliable .nav-entree[data-filles] > .sous-menu { grid-column: 1 / -1; }
  .nav.menu-pliable .nav-entree[data-filles]:not(.depliee) > .sous-menu { display: none; }
  .nav-deplier {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    background: transparent; color: var(--noir); border: 0; border-radius: var(--rayon-champ); cursor: pointer;
  }
  .nav-deplier svg { transition: transform var(--d-etat) var(--courbe-survol); }
  .nav-deplier[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav-deplier:hover { color: var(--ocre-rouge); }
  .nav-deplier:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: calc(var(--focus-ecart) * -1); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-lien, .nav-trait path, .nav .sous-menu, .nav .nav-entree:hover > .sous-menu,
  .nav .nav-entree:has(:focus-visible) > .sous-menu { transition: none; }
}

/* La page interieure demarre plus haut : moins d'air entre la barre de navigation et le fil */
.accueil.interieur { padding-top: clamp(1.25rem, 0.6rem + 1.6vw, 2.25rem); }

/* ---------- Carrousel de photos : une vue a la fois, deux boutons, rien qui bouge tout seul ---------- */
.carrousel { position: relative; z-index: 1; }
.carrousel-piste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.avec-js .carrousel-piste { display: flex; gap: 0; transition: transform 320ms var(--courbe-survol); will-change: transform; }
.avec-js .carrousel { overflow: hidden; }
.avec-js .carrousel-vue { flex: 0 0 100%; }
.carrousel-vue figure { margin: 0; }
.carrousel-vue img { display: block; width: 100%; height: clamp(13rem, 9rem + 12vw, 22rem); object-fit: cover; border-radius: 0.5rem; background: var(--lavis-ocre); }
.carrousel-barre { display: flex; align-items: center; column-gap: var(--e-4); margin-top: var(--e-3); }
.carrousel-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--e-3); cursor: pointer;
  background: transparent; color: var(--noir);
  border: var(--bordure-champ) solid var(--noir); border-radius: var(--rayon-bouton);
  transition: background-color var(--d-etat) var(--courbe-survol), color var(--d-etat) var(--courbe-survol);
}
.carrousel-bouton:hover { background: var(--noir); color: var(--paroi-claire); }
.carrousel-bouton svg { width: 1.5rem; height: 0.75rem; }
.carrousel-bouton svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carrousel-compte { color: var(--brun); font-size: var(--t-mention); margin: 0; }
.carrousel-note { margin-top: var(--e-3); }
.vehicule .carrousel { grid-column: 3 / span 8; margin-bottom: var(--e-5); }
@media (max-width: 48rem) { .vehicule .carrousel { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .avec-js .carrousel-piste { transition: none; } }

/* Le champ du jour souhaite, aligne sur les autres champs */
.formulaire input[type="date"] { font-family: var(--famille-texte); font-size: var(--t-texte); }
/* Le site est sombre : les elements que le navigateur dessine lui-meme (icone du calendrier et de
   l horloge, fleches des nombres, cases et boutons radio natifs, fenetre du calendrier) doivent
   l etre en version sombre, sinon l icone reste noire sur vert fonce (RGAA 3.3, 26/09/2026). */
input, select, textarea { color-scheme: dark; }
.formulaire input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 1; }

/* ---------- Liste des adresses proposees, dessinee dans le systeme ---------- */
.champ { position: relative; }
.suggestions {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 25;
  margin-top: 0.25rem; padding: var(--e-2) 0; list-style: none;
  background: var(--paroi); border: var(--bordure-champ) solid var(--noir);
  border-radius: var(--rayon-champ);
  max-height: 19rem; overflow-y: auto;
}
.suggestions li {
  padding: var(--e-3) var(--e-4); font-size: var(--t-texte); line-height: 1.35;
  color: var(--noir); cursor: pointer; border-top: 1px solid var(--souris);
}
.suggestions li:first-child { border-top: 0; }
.suggestions li[aria-selected="true"], .suggestions li:hover {
  background: var(--paroi-claire); color: var(--noir);
  box-shadow: inset 0.25rem 0 0 var(--ocre-rouge);
}

/* ---------- LES APLATS DE SECTION ----------
   Decision de Thomas du 18/09/2026 : la couleur du site est portee par des aplats, et les photos
   a venir s'y adapteront. Pistes retenues par lui : A (chaque section porte son fond), B (le bloc
   fauteuil en ocre plein), C (les grands titres en ocre), G (les numeros d'etape en ocre).
   Ecartees par lui : F (filets colores, trop proche de la pastille) et H (pied sombre).

   Deux contraintes tenues ici :
   1. L'aplat s'arrete aux bords de la grille et commence SOUS le sillon, pour que le trait brosse
      continue de courir dans les marges et de traverser chaque saignee. Le trait garde son z-index.
   2. Contrastes mesures au prealable : ocre sur paroi 5,67 (4,70 au pire cas), paroi claire sur
      ocre 6,13, noir sur lavis 11,95, ocre sur lavis 4,52. */

.bloc { position: relative; }
.bloc[class*=" "]::before { content: none; }

.bloc.chauffeurs::before, .bloc.a-bord.aplat-clair::before, .bloc.avis::before,
.bloc.avant::before, .bloc.groupes::before, .bloc.vehicule::before,
.bloc.trajets::before, .bloc.gares::before, .bloc.contact::before, .bloc.fauteuil::before {
  content: "";
  position: absolute; z-index: -1;
  top: 0; bottom: 0;
  /* l'aplat deborde de la grille : le texte respire au lieu de coller a la couleur */
  left: calc(var(--bord) - var(--air-aplat)); right: calc(var(--bord) - var(--air-aplat));
}
@media (min-width: 64.0625rem) {
  /* a droite, l'aplat s'arrete avant le couloir reserve au bouton d'appel */
  .bloc.chauffeurs::before, .bloc.avis::before, .bloc.avant::before, .bloc.groupes::before,
  .bloc.vehicule::before, .bloc.trajets::before, .bloc.gares::before, .bloc.contact::before,
  .bloc.fauteuil::before { right: calc(var(--bord) + var(--rail-appel) - var(--air-aplat)); }
}

/* Les fonds, par role. Le hero, le renvoi et le pied restent sur la paroi nue. */
.bloc.chauffeurs::before, .bloc.avis::before, .bloc.avant::before,
.bloc.groupes::before, .bloc.vehicule::before { background: var(--paroi-claire); }
.bloc.trajets::before, .bloc.gares::before, .bloc.contact::before { background: var(--lavis-ocre); }
.bloc.fauteuil::before { background: var(--ocre-rouge); }

/* C. Les grands titres passent en ocre rouge */
.titre-affiche, .titre-bloc { color: var(--ocre-rouge); }
/* G. Les numeros d'etape aussi */
.numero-etape { color: var(--ocre-rouge); }

/* B. Le bloc fauteuil, aplat plein : tout son texte passe en paroi claire */
.bloc.fauteuil { color: var(--sur-plein); }
.bloc.fauteuil .titre-bloc, .bloc.fauteuil .intertitre, .bloc.fauteuil .numero-etape { color: var(--sur-plein); }
.bloc.fauteuil .discret, .bloc.fauteuil .etiquette { color: var(--lavis-ocre); }
.bloc.fauteuil a { color: var(--sur-plein); text-decoration-color: var(--lavis-ocre); }
.bloc.fauteuil a:hover { text-decoration-color: var(--sur-plein); }
.bloc.fauteuil li, .bloc.fauteuil .liste-fauteuil li, .bloc.fauteuil .liste-simple li,
.bloc.fauteuil .etapes > li { border-color: var(--lavis-ocre); }
.bloc.fauteuil .marque-trait path { stroke: var(--lavis-ocre); }
.bloc.fauteuil :focus-visible { outline-color: var(--sur-plein); box-shadow: 0 0 0 var(--focus-ecart) var(--ocre-rouge); }
/* la tache de lavis n'a plus de role : l'aplat la remplace */
.bloc.fauteuil .lavis { display: none; }
.sans-js .bloc.fauteuil .lavis-contenu { background: transparent; border-radius: 0; }
/* le bouton d'appel garde son ocre : sur l'aplat, il passe en negatif */
.bloc.fauteuil .bouton-appel, .bloc.fauteuil .bouton-secondaire { background: var(--paroi-claire); color: var(--ocre-rouge); border-color: var(--paroi-claire); }
.bloc.fauteuil .bouton-appel:hover, .bloc.fauteuil .bouton-secondaire:hover { background: var(--lavis-ocre); color: var(--noir); }
.bloc.fauteuil .bouton-appel .jauge { background: var(--ocre-rouge); }

/* Les capitales accentuees debordent au-dessus de leur boite : l'interligne du titre (0,9) est plus
   petit que le corps, donc l'accent du « A » touchait l'aplat de la section precedente (vu par Thomas
   le 18/09 sur « A bord, et pour payer », ecart mesure a 0 px). Un peu d'air en haut du titre. */
.titre-bloc { padding-top: 0.16em; }
/* Et une vraie respiration entre deux sections : sans elle, le titre d'un bloc demarre au pixel ou
   finit l'aplat du bloc precedent. L'air se retrouve DANS l'aplat quand la section en porte un. */
.bloc { padding-top: var(--e-6); }

:root { --air-aplat: min(calc(var(--marge) * 0.45), 1.75rem); }

/* Les deux numeros de l'en-tete, prenom sous le numero (18/09/2026) */
.entete-tels { grid-column: 6 / -1; justify-self: end; display: flex; gap: var(--e-5); }
.entete-tel { flex-direction: column; align-items: center; gap: 0; line-height: 1.15; }
.entete-prenom { font-size: 0.875rem; font-weight: 400; text-decoration: none; }
@media (max-width: 40rem) {
  .entete-tels { grid-column: 1 / -1; justify-self: start; gap: var(--e-4); }
  /* 26/09/2026 (RGAA 10.4) : texte seul a 200 %, les deux numeros passent l'un sous l'autre au lieu
     de faire defiler la page de cote ; a taille normale ils tiennent sur une ligne. */
  .entete-tels { flex-wrap: wrap; }
  .entete-tel { font-size: 1.0625rem; }
}

/* Estimation du prix de la course (18/09/2026).
   Parti pris : le prix est l'affiche du bloc. Les reglages reprennent les composants
   du systeme (bordure brune, rayon de champ, ocre plein pour l'etat choisi) : aucun
   menu deroulant natif, dont la liste ouverte est dessinee par le systeme d'exploitation. */
.sans-js .estimation-affiche { display: none; }
.estimation-affiche { grid-column: 1 / span 8; }
.estimation-montant {
  font-family: var(--famille-titre);
  font-size: var(--t-affiche);
  font-variation-settings: var(--axes-affiche);
  font-weight: var(--graisse-affiche);
  letter-spacing: var(--approche-affiche);
  line-height: var(--interligne-affiche);
  color: var(--ocre-rouge);
  transition: font-variation-settings 260ms var(--courbe-survol);
}
.estimation-montant.recompose { font-variation-settings: "opsz" 96, "wdth" 100; }
.estimation-phrase {
  font-size: var(--t-chapeau);
  line-height: 1.6;
  margin-top: var(--e-4);
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  flex-wrap: wrap;
}
.estimation-km {
  font-size: inherit; line-height: inherit; width: 4.5em; text-align: center;
  color: var(--noir); background: var(--paroi);
  border: var(--bordure-champ) solid var(--brun); border-radius: var(--rayon-champ);
  padding: var(--e-2) var(--e-3); min-height: 3.25rem;
}
/* Les fleches du champ nombre sont dessinees par le navigateur, en gris sur blanc :
   retirees, la saisie se fait au clavier et au pave numerique du telephone. */
.estimation-km { appearance: textfield; -moz-appearance: textfield; }
.estimation-km::-webkit-outer-spin-button,
.estimation-km::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.estimation-km:hover { border-color: var(--noir); }
.estimation-km:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: 2px; }
.estimation-distance { display: inline-flex; align-items: center; gap: var(--e-2); }
.estimation-pas {
  font-family: var(--famille-titre); font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--noir); background: transparent;
  border: var(--bordure-champ) solid var(--noir); border-radius: var(--rayon-bouton);
  min-width: 44px; min-height: 44px; cursor: pointer;
  transition: background-color var(--d-etat) var(--courbe-survol), color var(--d-etat) var(--courbe-survol);
}
.estimation-pas:hover { background: var(--noir); color: var(--paroi-claire); }
.estimation-pas:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: 3px; }
.estimation-pas[disabled] { opacity: 0.4; cursor: not-allowed; }
.estimation-pas[disabled]:hover { background: transparent; color: var(--noir); }
.estimation-groupe {
  border: 0; padding: 0; margin: var(--e-5) 0 0; display: flex; flex-wrap: wrap;
  gap: var(--e-3); align-items: center;
}
.estimation-groupe legend {
  float: left; width: 100%; margin-bottom: var(--e-3);
  font-family: var(--famille-titre); font-variation-settings: var(--axes-intertitre);
  font-weight: var(--graisse-intertitre); color: var(--brun);
}
.estimation-bascule { display: inline-flex; }
.estimation-bascule input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.estimation-bascule span {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--noir); background: transparent;
  border: var(--bordure-champ) solid var(--noir); border-radius: var(--rayon-bouton);
  padding: var(--e-2) var(--e-5); cursor: pointer;
  transition: background-color var(--d-etat) var(--courbe-survol), color var(--d-etat) var(--courbe-survol);
}
.estimation-bascule span:hover { background: var(--noir); color: var(--paroi-claire); }
.estimation-bascule input:checked + span { background: var(--ocre-rouge); border-color: var(--ocre-rouge); color: var(--sur-plein); }
.estimation-bascule input:focus-visible + span { outline: var(--focus-anneau) solid var(--noir); outline-offset: 3px; }
.estimation-detail { margin-top: var(--e-5); max-width: 46ch; }
.estimation-grille { grid-column: 9 / -1; align-self: start; }
.estimation-grille .liste-simple { margin-top: var(--e-3); }
.estimation-mentions { grid-column: 1 / -1; margin-top: var(--e-6); }
@media (prefers-reduced-motion: reduce) {
  .estimation-montant { transition: none; }
}
@media (max-width: 60rem) {
  .estimation-affiche, .estimation-grille { grid-column: 1 / -1; }
  .estimation-grille { margin-top: var(--e-6); }
}

/* ==========================================================================
   Bloc 9 : « la carte est la page ».
   Ecrit le 19/09/2026 en REMPLACEMENT du bloc 9 du matin, refuse par Thomas
   (« bas de gamme »). Aucune regle existante d'un autre bloc n'est modifiee.

   Etat par defaut, ci-dessous : aucun JavaScript, mouvement reduit, ou telephone.
   La carte est tracee entiere et les six volets se suivent, chacun sous son nom.
   Le dispositif epingle n'arrive qu'avec la classe .pret, posee par le JavaScript
   APRES avoir verifie que GSAP repond : si la bibliotheque tombe, la page reste
   celle-ci, complete et lisible.
   ========================================================================== */

.vallee { position: relative; margin-block: var(--e-9) 0; }
.vallee-scene { position: relative; display: grid; row-gap: var(--e-7); }

/* ---------- Le plan ---------- */
.vallee-carte { position: relative; padding-inline: var(--marge); }
/* 26/09/2026 (RGAA 10.4, decision de Thomas) : texte seul agrandi, une etiquette de bord de carte ne pousse
   plus la page de cote. Effet mesure a taille normale : 1 a 4 px sur deux circuits, accepte. */
.vallee-carte { overflow-x: clip; }
.vallee-camera { position: relative; }
.vallee-plan { position: relative; width: 100%; aspect-ratio: var(--ratio, 1000 / 873); }
.carte-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.carte-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.carte-eau path { stroke: var(--ocre-rouge); stroke-width: 2.4px; opacity: 0.6; }
.carte-route { stroke: var(--noir); stroke-width: 4.5px; }
.carte-halo { fill: var(--paroi); stroke: var(--paroi); stroke-width: 3px; }
.carte-point { fill: var(--ocre-rouge); }
/* 01/10/2026, retour de Thomas (« le tracé du trajet est complètement coupé en passant un village ») :
   l'étiquette pleine centrée sur le village masquait la route, et le numéro, sombre sans disque, ne se
   voyait pas. Désormais le disque numéroté EST l'arrêt, posé sur le trait comme sur un plan de ligne ;
   le nom se pose à côté, sans fond, détaché par un halo serré qui ne couvre que les lettres.
   Les repères SVG restent mesurés par le script (caméra) mais ne se peignent plus : visibility, pas display. */
.carte-reperes { visibility: hidden; }

/* ---------- Les bornes : le survol sort la vignette, en CSS ---------- */
.vallee-borne {
  --disque: 1.65rem;
  position: absolute;
  left: calc(var(--px) * 100%); top: calc(var(--py) * 100%);
  /* Le centre du disque tombe exactement sur le village. */
  translate: calc(var(--disque) / -2) -50%;
  display: grid; grid-auto-flow: column; align-items: center; column-gap: var(--e-2);
  min-height: 44px; padding-left: calc(var(--disque) + 0.45rem); padding-right: var(--e-3);
  color: var(--noir); text-decoration: none;
}
.borne-rang {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: var(--disque); height: var(--disque);
  border-radius: 50%;
  background: var(--ocre-rouge);
  box-shadow: 0 0 0 3px var(--paroi);
  font-family: var(--famille-titre);
  font-variation-settings: "opsz" 14, "wdth" 96, "wght" 700;
  font-size: 0.95rem; line-height: 1; color: var(--sur-plein);
  transition: background-color var(--d-etat) var(--courbe-survol);
}
.borne-nom {
  font-family: var(--famille-titre);
  font-variation-settings: "opsz" 14, "wdth" 82, "wght" 620;
  font-size: var(--t-mention); line-height: 1;
  padding: 0.28em 0.4em 0.34em;
  text-shadow:
    0 0 2px var(--paroi), 0 0 2px var(--paroi), 0 0 4px var(--paroi),
    1px 1px 0 var(--paroi), -1px -1px 0 var(--paroi), 1px -1px 0 var(--paroi), -1px 1px 0 var(--paroi);
  transition: background-color var(--d-etat) var(--courbe-survol), color var(--d-etat) var(--courbe-survol);
}
/* 22/09/2026 : deux bornes trop proches (Font-de-Gaume et les Combarelles, 2 km) se couvraient.
   « data-ancre » pose le NOM d'un côté du disque ; le disque, lui, reste sur le village. */
.vallee-borne[data-ancre="gauche"] {
  padding-left: var(--e-3); padding-right: calc(var(--disque) + 0.45rem);
  translate: calc(-100% + var(--disque) / 2) -50%; white-space: nowrap;
}
.vallee-borne[data-ancre="gauche"] .borne-rang { left: auto; right: 0; }
.vallee-borne[data-ancre="dessous"] {
  padding: calc(var(--disque) + 0.3rem) var(--e-3) 0;
  min-height: 0;
  translate: -50% calc(var(--disque) / -2);
}
.vallee-borne[data-ancre="dessous"] .borne-rang { left: 50%; top: 0; translate: -50% 0; }
.vallee-borne[data-ancre="dessus"] {
  padding: 0 var(--e-3) calc(var(--disque) + 0.3rem);
  min-height: 0;
  translate: -50% calc(-100% + var(--disque) / 2);
}
.vallee-borne[data-ancre="dessus"] .borne-rang { left: 50%; top: auto; bottom: 0; translate: -50% 0; }
@media (min-width: 64rem) { .borne-nom { white-space: nowrap; } }
.vallee-borne:hover .borne-nom,
.vallee-borne:focus-visible .borne-nom { background: var(--noir); color: var(--paroi-claire); box-shadow: 0 0 0 1px var(--noir); text-shadow: none; }

.borne-vignette {
  position: absolute; left: 0; bottom: calc(100% + 0.6rem);
  width: 10.5rem; aspect-ratio: 4 / 5; overflow: hidden;
  border: 2px solid var(--noir); background: var(--lavis-ocre);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 300ms var(--courbe-survol);
  pointer-events: none;
}
.borne-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vallee-borne:hover .borne-vignette,
.vallee-borne:focus-visible .borne-vignette { clip-path: inset(0 0 0 0); }

/* ---------- Les volets ---------- */
.vallee-volets { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--e-8); }
.vallee-volet { position: relative; }
/* 26/09/2026 (RGAA 3.2) : « height: auto » et le 4/5 valent a toutes les largeurs. En mouvement
   reduit ou sans GSAP au-dela de 64 rem, la legende debordait sur la photo suivante. Le dispositif
   epingle (.vallee.pret) remet la hauteur pleine plus bas. */
.vallee-volet figure { position: relative; margin: 0; height: auto; }
.vallee-volet img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; background: var(--lavis-ocre); }
.vallee-volet figcaption {
  display: grid; row-gap: var(--e-2);
  padding: var(--e-4) var(--marge) 0;
}
.volet-rang {
  font-family: var(--famille-titre);
  font-variation-settings: var(--axes-affiche);
  font-weight: var(--graisse-affiche);
  font-size: clamp(3.5rem, 1.5rem + 7vw, 8rem); line-height: 0.8;
  letter-spacing: var(--approche-affiche);
  color: var(--ocre-rouge);
}
.volet-nom {
  font-family: var(--famille-titre);
  font-variation-settings: "opsz" 14, "wdth" 78, "wght" 700;
  font-size: var(--t-mention); line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.volet-marque { font-size: var(--t-mention); color: var(--ocre-rouge); }
.volet-vu { max-width: 30rem; line-height: var(--interligne-texte); }

/* ==========================================================================
   Le dispositif : ecran entier, carte epinglee, le volet entre par un masque.
   Conditions cumulees : JavaScript, GSAP repond (.pret), grand ecran, mouvement
   non reduit. Une seule qui manque, et la page ci-dessus reste telle quelle.
   ========================================================================== */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .vallee.pret { margin-block: var(--e-9) 0; }
  .vallee.pret .vallee-scene {
    display: block; height: 100dvh; overflow: hidden;
    background: var(--paroi);
    border-top: 1px solid var(--noir); border-bottom: 1px solid var(--noir);
  }

  .vallee.pret .vallee-carte { position: absolute; inset: 0; padding: 0; }
  .vallee.pret .vallee-camera { position: absolute; inset: 0; will-change: transform; }
  .vallee.pret .vallee-plan {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    height: 122%; width: auto; aspect-ratio: var(--ratio, 1000 / 873);
  }

  /* Le volet occupe la moitie droite, du haut en bas de l'ecran. Les six sont empiles :
     chacun s'ouvre par-dessus le precedent, personne ne se referme. */
  .vallee.pret .vallee-volets {
    position: absolute; right: 0; top: 0; width: 50%; height: 100%;
    display: block; row-gap: 0;
  }
  .vallee.pret .vallee-volet {
    position: absolute; inset: 0;
    clip-path: inset(0 0 0 100%);
    border-left: 1px solid var(--noir);
  }
  .vallee.pret .vallee-volet:first-child { clip-path: inset(0 0 0 0); }
  .vallee.pret .vallee-volet figure { height: 100%; }
  .vallee.pret .vallee-volet img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }

  .vallee.pret .vallee-volet figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--e-7) var(--e-6) var(--e-5);
    color: var(--sur-voile);
    background: linear-gradient(to top, rgb(15 29 23 / 0.82) 0%, rgb(15 29 23 / 0.55) 45%, rgb(15 29 23 / 0) 100%);
  }
  .vallee.pret .volet-rang { color: var(--sur-voile); font-size: clamp(4rem, 1rem + 6vw, 7rem); }
  .vallee.pret .volet-marque { color: var(--sur-voile); }
  .vallee.pret .volet-vu { max-width: 26rem; }

  /* Le repere eteint reste visible : le trait n'est pas la seule facon de lire la carte. */
  .vallee.pret .carte-repere .carte-point { transition: fill var(--d-etat) var(--courbe-survol); }
  .vallee.pret .carte-repere:not(.atteint) .carte-point { fill: var(--brun); opacity: 0.45; }
  .vallee.pret .vallee-borne:not(.atteinte) .borne-nom { opacity: 0.55; }
  /* 01/10/2026 : le disque prend le relais du point SVG, éteint tant que le trait ne l'a pas atteint. */
  .vallee.pret .vallee-borne:not(.atteinte) .borne-rang { background: var(--brun); opacity: 0.55; }
  .vallee.pret .vallee-borne { transition: opacity var(--d-etat) var(--courbe-survol); }
}

/* ---------- Telephone et tablette : le doigt fait le travail ---------- */
@media (max-width: 63.999rem) {
  /* 22/09/2026 : « height: auto » et le 4/5 des volets sont remontes hors de ce bloc le 26/09. */
  .carte-route { stroke-width: 5px; }
  .borne-nom { font-size: 1rem; }
  .borne-vignette { display: none; }
  /* 01/10/2026 : sur téléphone, Font-de-Gaume et les Combarelles (2 km) sont à 16 px l'un de
     l'autre ; un disque plus petit garde les deux numéros lisibles. */
  .vallee-borne { --disque: 1.3rem; }
  .borne-rang { font-size: 0.8rem; box-shadow: 0 0 0 2px var(--paroi); }
}

/* ---------- La route, d'un village au suivant : le texte administratif, descendu ----------
   Il vient APRES le dispositif, jamais avant : c'est l'un des trois interdits tires du
   refus du 19/09. */
.etapes-mesure .liste-etapes { grid-column: 1 / span 7; list-style: none; margin: 0; padding: 0; }
.liste-etapes li {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-4);
  align-items: baseline; padding-block: var(--e-3);
  border-top: 1px solid var(--brun);
}
.liste-etapes li:last-child { border-bottom: 1px solid var(--brun); }
.etape-rang { color: var(--ocre-rouge); font-family: var(--famille-titre); font-variation-settings: "opsz" 24, "wdth" 96, "wght" 600; }
.etape-nom { font-family: var(--famille-titre); font-variation-settings: var(--axes-intertitre); font-size: var(--t-texte); }
.etape-route { grid-column: 2; font-size: var(--t-mention); }
/* 26/09/2026 (RGAA 10.4) : texte seul agrandi, la colonne du texte peut se resserrer sous son contenu. */
.liste-etapes li { grid-template-columns: auto minmax(0, 1fr); }
.etapes-mesure .carte-mesure { grid-column: 9 / -1; align-self: start; margin: 0; font-size: var(--t-mention); }
.etapes-mesure .secteur-note { grid-column: 1 / span 7; margin-top: var(--e-4); font-size: var(--t-mention); }
@media (max-width: 63.999rem) {
  .etapes-mesure .liste-etapes,
  .etapes-mesure .carte-mesure,
  .etapes-mesure .secteur-note { grid-column: 1 / -1; }
  .etapes-mesure .carte-mesure { margin-top: var(--e-5); }
}

/* Reprise du 19/09, apres avoir regarde la premiere capture du dispositif. Trois defauts vus :
   1. la moitie gauche lisait VIDE : le plan etait trop agrandi (168 %), la vallee sortait du cadre.
      Ramene a 122 %, et le point vise se pose a 28 % de la largeur au lieu de 25 %.
   2. les contours de communes disparaissaient sur la paroi une fois la carte au premier plan.
   3. la legende du volet debordait sous le bas de l'ecran : son air de tete etait de 11 rem. */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .vallee.pret .carte-eau path { stroke-width: 3px; opacity: 0.75; }
  .vallee.pret .carte-route { stroke-width: 6px; }
  .vallee.pret .vallee-volet figcaption { max-height: 100%; overflow: hidden; }
}

/* Sans le bouton d'appel fixe (pages de tourisme), le telephone n'a plus besoin de la reserve
   de hauteur en bas de page. Ordre de Thomas du 19/09/2026. */
body.sans-appel-fixe { padding-bottom: 0; }

/* ---------- Le mode d'emploi de la scene ----------
   Ajoute le 19/09 sur retour de Thomas : « a gauche du clocher, dans la zone vide il manque un
   petit message explicatif ». A l'entree du dispositif, la carte n'est pas encore sous les yeux et
   la moitie gauche est nue. Le message dit ce que le defilement va faire, puis il s'efface. */
.vallee-mode-emploi {
  padding-inline: var(--marge);
  display: grid; row-gap: var(--e-2);
  margin-bottom: var(--e-6);
}
.mode-emploi-phrase {
  font-family: var(--famille-titre);
  font-variation-settings: var(--axes-intertitre);
  font-weight: var(--graisse-intertitre);
  font-size: var(--t-intertitre); line-height: 1.15;
  letter-spacing: var(--approche-intertitre);
  max-width: 22ch; margin: 0;
}
.mode-emploi-mesure { margin: 0; font-size: var(--t-mention); }

@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .vallee.pret .vallee-mode-emploi {
    position: absolute; z-index: 3;
    left: 0; top: 0; width: 46%;
    padding: var(--e-7) var(--e-6) 0 var(--marge);
    margin: 0;
  }
}

/* Reprise du 19/09, apres regard : le mode d'emploi passait SOUS l'en-tete collant et son titre
   etait coupe. Il descend maintenant sous la hauteur de l'en-tete. */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .vallee.pret .vallee-mode-emploi {
    top: calc(var(--hauteur-entete, 12rem) + var(--e-6));
    padding-top: 0;
  }
}

/* Reprise du 19/09 : place du burger dans l'en-tete repliee.
   Ligne 1 : la marque a gauche, le burger a droite. Ligne 2 : les deux numeros.
   La marque cede deux colonnes au burger, sinon elles se chevauchent. */
@media (max-width: 75rem) {
  .avec-js .entete .marque { grid-row: 1; grid-column: 1 / span 9; }
  .avec-js .entete .entete-tels { grid-row: 2; }
}
@media (max-width: 40rem) {
  .avec-js .entete .marque { grid-column: 1 / span 8; }
}

/* ============================================================================
   LA CARTE DES SIX CIRCUITS (19/09/2026).
   Une seule vallee, cinq traces reels, dix-neuf points, un menu qui commande.
   Sans JavaScript : tout est trace, le premier circuit est allume, les six
   volets se suivent sous la carte.
   ============================================================================ */
.atlas { padding-bottom: var(--e-8); position: relative; }
.atlas .titre-bloc { grid-column: 1 / -1; }
.atlas-scene { grid-column: 1 / -1; position: relative; margin-top: var(--e-5); }

.atlas-carte { display: block; width: 100%; height: clamp(20rem, 58vh, 34rem); overflow: visible; }
.atlas-eau path { fill: none; stroke: var(--ocre-jaune); stroke-width: 5; stroke-linecap: round; }
.atlas-route {
  fill: none;
  stroke: var(--brun);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
  transition: stroke var(--d-survol, 0.24s) ease, stroke-width var(--d-survol, 0.24s) ease, opacity var(--d-survol, 0.24s) ease;
}
.atlas-route.est-actif { stroke: var(--ocre-rouge); stroke-width: 7; opacity: 1; }
.atlas-halo { fill: none; }
.atlas-pastille {
  fill: var(--paroi-claire);
  stroke: var(--brun);
  stroke-width: 3;
  transition: fill var(--d-survol, 0.24s) ease, stroke var(--d-survol, 0.24s) ease;
}
.atlas-point.est-actif .atlas-pastille { fill: var(--ocre-rouge); stroke: var(--noir); }
.atlas-point.est-actif .atlas-halo { fill: var(--ocre-rouge); opacity: 0.16; }

/* Le menu : des boutons, aucune pastille de couleur, aucune carte a ombre. */
.atlas-menu ul { list-style: none; margin: var(--e-3) 0 0; padding: 0; }
.atlas-menu li { border-top: 1px solid var(--brun); }
.atlas-menu li:last-child { border-bottom: 1px solid var(--brun); }
.atlas-choix {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--e-3) 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.atlas-nom {
  display: block;
  font-family: var(--famille-titre);
  font-variation-settings: var(--axes-intertitre);
  font-weight: var(--graisse-intertitre);
  font-size: var(--t-intertitre);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.atlas-choix[aria-pressed='true'] .atlas-nom { color: var(--ocre-rouge); }
.atlas-mesure { display: block; margin-top: var(--e-1); font-size: var(--t-mention); }

/* Les volets : les arrets du circuit allume, avec leur vignette quand elle existe. */
.atlas-volets { grid-column: 1 / -1; margin-top: var(--e-5); }
/* align-items: flex-start, sinon les vignettes s'etirent sur la hauteur de la rangee et
   le rapport 4/5 saute : les photos devenaient des bandes verticales. */
.atlas-arrets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-4); }
.atlas-arrets li { flex: 0 1 10rem; }
.atlas-vignette {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--lavis-ocre);
}
/* Un arret sans photo ne reserve AUCUN bloc vide : il tient sur son nom et sa distance. */
.atlas-arrets li.sans-photo { flex: 0 1 12rem; border-top: 1px solid var(--brun); padding-top: var(--e-2); }
.atlas-arret-nom { display: block; margin-top: var(--e-2); font-weight: 700; }
.atlas-arret-route { display: block; margin-top: var(--e-1); font-size: var(--t-mention); }
.atlas-libre { max-width: var(--mesure); }
.atlas-lien { margin-top: var(--e-4); }

@media (min-width: 64rem) {
  /* TROIS colonnes : le menu commande a gauche, la vallee au milieu et SERREE contre le menu,
     les arrets du circuit allume en colonne a droite. Ils etaient sous la carte, donc hors
     de l'ecran au moment du survol : Thomas ne les voyait jamais (19/09/2026). */
  .atlas-scene {
    display: grid;
    grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr) minmax(14rem, 19rem);
    column-gap: var(--e-5);
    align-items: start;
  }
  /* La carte est AVANT le menu dans le document (elle est le sujet). Sans grid-row, elle
     prenait la premiere rangee et le menu passait dessous. */
  .atlas-menu { grid-column: 1; grid-row: 1; }
  .atlas-carte { grid-column: 2; grid-row: 1; height: clamp(26rem, 68vh, 42rem); }
  .atlas-volets {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
    padding-left: var(--e-4);
    border-left: 1px solid var(--brun);
  }
  /* DEUX colonnes de petites vignettes : six arrets tiennent en trois rangees, sans ascenseur.
     Thomas, 19/09/2026 : « l'ascenseur ca craint quand meme ». */
  .atlas-arrets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-4) var(--e-3);
  }
  .atlas-arrets li { width: auto; }
  /* Hauteur fixe plutot que rapport 4/5 : c'est la hauteur qui doit tenir dans l'ecran, pas la
     largeur. Le recadrage devient paysage dans cette colonne, et les six arrets tiennent. */
  .atlas-vignette { width: 100%; height: 6.5rem; aspect-ratio: auto; }
  .atlas-arret-nom { font-size: var(--t-mention); line-height: 1.2; }
  .atlas-arret-route { font-size: var(--t-mention); }
  .atlas-arrets li.sans-photo { border-top: 1px solid var(--brun); padding-top: var(--e-2); }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-route, .atlas-pastille { transition: none; }
}

/* La photo qui sort au survol d'un point, sur la carte. CSS seul : elle marche sans JavaScript
   et sous mouvement reduit. Demande de Thomas du 19/09/2026. */
.atlas-point { cursor: pointer; }
.atlas-point:focus { outline: none; }
/* display:none et non opacity:0 : a zero d'opacite, la photo cachee COMPTE ENCORE dans la boite
   du groupe, elle gonfle la zone sensible et vole le survol des points voisins. En display:none
   la boite du groupe se limite a la pastille, et l'image n'est meme pas telechargee avant. */
.atlas-bulle { display: none; pointer-events: none; }
.atlas-point:hover .atlas-bulle,
.atlas-point:focus .atlas-bulle,
.atlas-point:focus-within .atlas-bulle { display: block; }
/* Le point survole passe AU-DESSUS des autres, sinon sa photo passe sous le point suivant. */
.atlas-points:hover .atlas-point:hover,
.atlas-point:focus { isolation: isolate; }
.atlas-cadre-photo { fill: var(--paroi-claire); stroke: var(--noir); stroke-width: 2; }
.atlas-fil { stroke: var(--noir); stroke-width: 2; }
.atlas-point:hover .atlas-pastille,
.atlas-point:focus .atlas-pastille { fill: var(--noir); stroke: var(--noir); }
.atlas-point:focus-visible .atlas-halo { fill: none; stroke: var(--noir); stroke-width: 3; }

@media (prefers-reduced-motion: reduce) { .atlas-bulle { transition: none; } }

/* La cible de survol des points : invisible, mais elle recoit le pointeur. « transparent » et
   non « none » : avec « none » le disque n'est pas touchable et rien ne se declenche. */
.atlas-cible { fill: transparent; }
.atlas-point > .atlas-bulle { pointer-events: none; }

@media (min-width: 64rem) {
  /* Tout doit tenir dans la hauteur de la carte, sans jamais defiler : les cinq parcours a
     gauche, les arrets a droite. Thomas, 19/09/2026. */
  .atlas-menu .etiquette { font-size: var(--t-mention); }
  .atlas-menu ul { margin-top: var(--e-2); }
  .atlas-choix { padding-block: var(--e-2); }
  .atlas-nom { font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.08; }
  .atlas-mesure { margin-top: 0.1rem; }
  .atlas-volets { padding-left: var(--e-3); }
  .atlas-arrets { gap: var(--e-3) var(--e-3); }
  .atlas-vignette { height: 5.25rem; }
  .atlas-arret-nom { margin-top: 0.25rem; }
  .atlas-arret-route { margin-top: 0.1rem; }
  .atlas-lien { margin-top: var(--e-3); font-size: var(--t-mention); }
}

/* ============================================================================
   LA PAGE DES AEROPORTS (19/09/2026).
   Direction tranchee par Thomas : LES DUREES EN AFFICHE. Le chiffre est le sujet
   visuel de la page, pas une photo. Classes neuves uniquement, prefixe .aero- :
   aucune regle existante d'un autre bloc n'est modifiee.
   Etat par defaut ci-dessous : sans JavaScript, sous mouvement reduit, ou si GSAP
   ne repond pas, les trois nombres sont la, a leur taille finale. La page dit la
   meme chose.
   ============================================================================ */

.aero .titre-bloc { grid-column: 1 / -1; }
.aero-legende { grid-column: 1 / span 8; margin-top: calc(var(--e-5) * -1); margin-bottom: var(--e-7); }
.aero-reference { font-weight: 700; color: var(--noir); }

.aero-liste { grid-column: 1 / -1; display: grid; row-gap: var(--e-8); }
.aero-item { border-top: 2px solid var(--noir); padding-top: var(--e-4); }

.aero-nom {
  font-family: var(--famille-titre);
  font-variation-settings: "opsz" 14, "wdth" 78, "wght" 700;
  font-size: var(--t-mention); line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.14em;
}

/* L'affiche. Corps 64 a 180 px, ocre, approche negative : le corpus mesure un display
   bimodal, on est du cote de l'affiche et pas du ventre mou a 48 px. */
.aero-duree {
  font-family: var(--famille-titre);
  font-size: var(--t-affiche);
  line-height: var(--interligne-affiche);
  letter-spacing: var(--approche-affiche);
  font-weight: var(--graisse-affiche);
  font-variation-settings: var(--axes-affiche);
  color: var(--ocre-rouge);
  margin-top: var(--e-2);
  display: flex; align-items: baseline; column-gap: 0.06em;
}
.aero-unite {
  font-size: 0.34em; font-weight: 700;
  font-variation-settings: "opsz" 24, "wdth" 92;
  letter-spacing: 0; align-self: center;
}
.aero-route { margin-top: var(--e-3); font-weight: 700; }
.aero-complet { color: var(--brun); }
.aero-phrase { margin-top: var(--e-4); max-width: var(--mesure); }

@media (min-width: 64rem) {
  /* Les trois en colonnes : l'ecart entre les deux aeroports regionaux et Bordeaux
     se lit d'un seul coup d'oeil, sans defiler. */
  .aero-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gouttiere); row-gap: 0; }
  .aero-phrase { font-size: var(--t-mention); }
}

/* ---------- Le tableau des douze mesures ---------- */
.aero-tableau { grid-column: 1 / -1; margin-top: var(--e-7); overflow-x: auto; }
/* 26/09/2026 (RGAA 7.3) : la zone qui defile prend le focus, avec l'anneau du site. */
.aero-tableau:focus-visible { outline: var(--focus-anneau) solid var(--noir); outline-offset: var(--focus-ecart); }
.aero-tableau table { width: 100%; border-collapse: collapse; }
.aero-tableau th, .aero-tableau td { text-align: left; padding: var(--e-3) var(--e-4) var(--e-3) 0; border-top: 1px solid var(--brun); vertical-align: baseline; }
.aero-tableau thead th {
  border-top: 0; border-bottom: 2px solid var(--noir);
  font-family: var(--famille-titre); font-variation-settings: "opsz" 14, "wdth" 82, "wght" 700;
  font-size: var(--t-mention); text-transform: uppercase; letter-spacing: 0.1em;
}
.aero-tableau tbody th {
  font-family: var(--famille-titre); font-variation-settings: var(--axes-intertitre);
  font-weight: var(--graisse-intertitre); font-size: var(--t-texte);
}
.aero-cellule-duree { display: block; font-weight: 700; }
.aero-cellule-duree .aero-unite { font-size: 0.7em; }
.aero-cellule-km { display: block; color: var(--brun); font-size: var(--t-mention); }

@media (max-width: 40rem) {
  .aero-legende, .aero-liste { grid-column: 1 / -1; }
  .aero-tableau th, .aero-tableau td { padding-right: var(--e-3); }
}

/* Reprise du 19/09, APRES avoir regarde la capture a 1 440 px : en trois colonnes, les trois
   durees se touchaient et se lisaient comme une seule suite de chiffres (« 1h03 1h07 2h16 »).
   Le corps d'affiche plein est fait pour UNE ligne, pas pour trois cote a cote. Le corps est
   borne dans cette disposition, l'ecart passe a --e-7, et un filet separe les colonnes. */
@media (min-width: 64rem) {
  .aero-liste { column-gap: var(--e-7); }
  .aero-duree { font-size: clamp(2.75rem, 4.4vw, 5.25rem); }
  .aero-item + .aero-item { border-left: 1px solid var(--brun); padding-left: var(--e-6); }
}

/* Reprise du 19/09, APRES mesure au navigateur : le mouvement etait INOPERANT.
   L'animation posait `font-variation-settings` sur le <p>, mais les chiffres sont dans un
   `.chiffres`, qui porte SON PROPRE `font-variation-settings` ("opsz" 14, "wdth" 96, "wght" 600)
   et ecrasait tout. Mesure : wdth passait de 80 a 100, largeur du texte 48,3 px a chaque fois.
   Corrige par une variable CSS que l'enfant consomme. Le « h » garde sa largeur fixe : seul le
   nombre respire. */
.aero-duree .chiffres {
  font-variation-settings: "opsz" 96, "wdth" var(--aero-wdth, 80), "wght" 690;
}

/* ============================================================================
   LA PAGE DES MARIAGES (19/09/2026), gabarit « ce qui explique » choisi par Thomas.
   L'idee : la journee se lit sur une HORLOGE. L'heure est l'affiche de chaque moment, et le
   dernier chiffre est celui qui compte, 3 h du matin. Classes neuves .mariage-* uniquement,
   aucune regle existante modifiee.
   Les chiffres consomment --mariage-wdth : NE JAMAIS poser font-variation-settings sur le
   parent d'un .chiffres, il porte le sien et ecrase tout (defaut verifie sur la page aeroport).
   ============================================================================ */

.mariage .titre-bloc { grid-column: 1 / -1; }
.mariage-avertissement { grid-column: 1 / span 8; margin-top: calc(var(--e-5) * -1); margin-bottom: var(--e-7); }

.mariage-heures { grid-column: 1 / -1; display: grid; row-gap: 0; }
.mariage-moment {
  display: grid; grid-template-columns: 1fr; row-gap: var(--e-3);
  border-top: 1px solid var(--brun); padding-block: var(--e-5) var(--e-6);
}
.mariage-moment:last-child { border-bottom: 1px solid var(--brun); }
/* 26/09/2026 (RGAA 10.4) : texte seul agrandi, la colonne unique peut se resserrer sous son contenu. */
.mariage-moment { grid-template-columns: minmax(0, 1fr); }

.mariage-heure {
  font-family: var(--famille-titre);
  font-size: clamp(3rem, 1.2rem + 6vw, 6rem);
  line-height: var(--interligne-affiche);
  letter-spacing: var(--approche-affiche);
  color: var(--ocre-rouge);
  display: flex; align-items: baseline; column-gap: 0.04em;
}
.mariage-heure .chiffres {
  font-variation-settings: "opsz" 96, "wdth" var(--mariage-wdth, 82), "wght" 690;
}
.mariage-h {
  font-size: 0.3em; font-weight: 700; align-self: center;
  font-variation-settings: "opsz" 24, "wdth" 92; letter-spacing: 0;
}
.mariage-corps { max-width: var(--mesure); }
.mariage-corps .intertitre { margin-bottom: var(--e-3); }

@media (min-width: 64rem) {
  /* L'heure a gauche, le texte a droite : l'oeil descend la colonne des heures comme un
     programme de journee, sans avoir a lire les textes. */
  .mariage-moment { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); column-gap: var(--e-7); row-gap: 0; align-items: start; }
  .mariage-heure { justify-content: flex-end; text-align: right; }
}

/* La derniere ligne, 3 h du matin, est le moment qui compte : elle change de valeur.
   Pas d'aplat sombre (ecarte par Thomas le 18/09), l'ocre plein du systeme suffit. */
.mariage-moment.est-nuit { background: var(--ocre-rouge); color: var(--sur-plein); padding-inline: var(--e-5); border-color: var(--ocre-rouge); }
.mariage-moment.est-nuit .mariage-heure { color: var(--sur-plein); }
.mariage-moment.est-nuit .intertitre { color: var(--sur-plein); }

@media (min-width: 64rem) {
  .mariage-moment.est-nuit { padding-inline: var(--e-6); }
}

/* Reprise du 19/09, apres regard : l'aplat de la ligne de nuit porte un padding-inline, qui
   decalait sa grille. Resultat, le « 3 h 00 » ne finissait plus sur la meme verticale que les
   quatre heures au-dessus, et la colonne des heures perdait son alignement sur la derniere
   ligne, celle qui compte. Le padding est compense par une marge negative : l'aplat deborde,
   le contenu reste sur la grille. */
.mariage-moment.est-nuit { margin-inline: calc(var(--e-5) * -1); }
@media (min-width: 64rem) {
  .mariage-moment.est-nuit { margin-inline: calc(var(--e-6) * -1); }
}

/* ============================================================================
   LA PAGE DU SECTEUR (19/09/2026). Direction tranchee par Thomas : une carte, mais L'INVERSE
   de celle des circuits. Des contours de communes, aucun itineraire : on voit un territoire,
   pas des lignes. Classes .secteur-* neuves, aucune regle existante modifiee.
   Etat par defaut ci-dessous : sans JavaScript ou sous mouvement reduit, la carte est pleine
   et tracee entiere. Le trace progressif n'est qu'une amelioration.
   ============================================================================ */

.secteur-carte { grid-column: 1 / -1; position: relative; margin-top: var(--e-5); }
.secteur-svg { display: block; width: 100%; height: auto; max-height: 76vh; overflow: visible; }

.secteur-contour {
  fill: var(--paroi-claire);
  stroke: var(--brun);
  stroke-width: 1.2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--d-etat) var(--courbe-survol);
}
/* Les quatre communes d'autorisation de stationnement portent l'ocre plein. */
.secteur-commune.est-ads .secteur-contour { fill: var(--ocre-rouge); stroke: var(--noir); stroke-width: 1.6px; }
.secteur-commune:hover .secteur-contour { fill: var(--lavis-ocre); }
.secteur-commune.est-ads:hover .secteur-contour { fill: var(--brun); }

.secteur-point { fill: var(--noir); }
.secteur-nom {
  font-family: var(--famille-titre);
  font-variation-settings: "opsz" 14, "wdth" 82, "wght" 700;
  font-size: 19px; fill: var(--noir);
  paint-order: stroke; stroke: var(--paroi); stroke-width: 5px; stroke-linejoin: round;
}

.secteur-legende { margin-top: var(--e-4); max-width: 46rem; }
.secteur-cle {
  display: inline-block; width: 0.9rem; height: 0.9rem; margin-right: 0.35rem;
  vertical-align: -0.05rem; background: var(--paroi-claire); border: 1px solid var(--brun);
}
.secteur-cle.est-ads { background: var(--ocre-rouge); border-color: var(--noir); }
.secteur-legende .secteur-cle:not(:first-child) { margin-left: var(--e-4); }

/* La liste des 19 communes : la classe .communes du systeme, plus la mention d'autorisation. */
.secteur-marque {
  display: block; font-size: var(--t-mention); color: var(--ocre-rouge); font-weight: 700;
}

@media (max-width: 48rem) {
  .secteur-svg { max-height: none; }
  .secteur-nom { font-size: 26px; }
  .secteur-legende .secteur-cle:not(:first-child) { margin-left: 0; }
}

/* Reprise du 19/09, APRES avoir regarde la capture : la carte etait INVISIBLE, deux causes.
   1. Les contours sortaient vides (Douglas-Peucker degenere sur un anneau ferme), corrige
      dans outils/secteur.mjs.
   2. Le remplissage --paroi-claire sur le fond --paroi ne se distinguait pas (valeurs SD-1 de l'époque, #fef4e2 sur #f6ebd9) :
      deux tons a 2 % d'ecart de clarte. Les communes passent au lavis ocre, qui se detache.
   Et le trace progressif ne met plus la lisibilite en jeu : le remplissage n'est PLUS anime,
   il est la des le depart. Piege 3 d'animation-gsap.md, que j'avais lu puis reproduit. */
.secteur-contour { fill: var(--lavis-ocre); stroke-width: 1.4px; }
.secteur-commune:hover .secteur-contour { fill: var(--paroi-claire); }

/* Reprise du 19/09, apres la capture a 390 px : a 26 px, « Rouffignac » et « Plazac » se
   touchaient. Les deux communes sont voisines, leurs centres sont a quelques pixels l'un de
   l'autre : c'est la taille du nom qu'il faut reduire, pas la carte. */
@media (max-width: 48rem) {
  .secteur-nom { font-size: 21px; stroke-width: 4px; }
}

/* ------------------------------------------------------------------ AUTRES TRAJETS, LE COMPTEUR
   Page mere /autres-trajets/, 19/09/2026. Un seul objet tenu du haut en bas de la scene, et ce
   qu'il compte change selon la formule. Le boitier est COLLANT (position: sticky), pas epingle :
   un pin de ScrollTrigger dans une grille CSS pose son pin-spacer comme element de grille et
   sort la scene du cadre de 12 colonnes (piege verifie sur ce depot).
   SANS JAVASCRIPT, les cinq unites sont TOUTES lisibles : le compteur est une amelioration. */

.compteur-scene { grid-column: 1 / -1; display: grid; column-gap: var(--gouttiere); row-gap: var(--e-6); }
@media (min-width: 60rem) {
  .compteur-scene { grid-template-columns: 4fr 7fr; }
  .compteur-colonne { grid-column: 1; }
  .compteur-formules { grid-column: 2; }
}

.compteur-boitier {
  position: sticky; top: var(--e-8);
  background: var(--noir); color: var(--paroi);
  border-radius: var(--rayon-champ);
  padding: var(--e-5) var(--e-5) var(--e-4);
}

.compteur-etat {
  font-family: var(--famille-titre); font-variation-settings: var(--axes-marque);
  font-size: var(--t-mention); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ocre-jaune); margin: 0 0 var(--e-4);
}

.compteur-unites { list-style: none; margin: 0; padding: 0; }

.compteur-unite {
  font-family: var(--famille-titre); font-variation-settings: var(--axes-titre);
  font-size: var(--t-intertitre); line-height: 1.2;
  padding-block: calc(var(--e-2) / 1.5);
}

/* Avec JavaScript seulement, une seule unite est allumee a la fois. Sans lui, les cinq restent
   pleinement lisibles : c'est l'etat par defaut, et il est complet. */
/* 26/09/2026 (RGAA 3.2) : 0,22 donnait 1,59 de contraste ; 0,5 est mesure plus bas dans la fiche. */
.compteur-scene.pret .compteur-unite { opacity: 0.5; transition: opacity var(--d-etat) var(--courbe-survol); }
.compteur-scene.pret .compteur-unite[data-actif] { opacity: 1; }

.compteur-chute { margin: var(--e-4) 0 var(--e-3); height: 2px; background: color-mix(in oklab, var(--paroi) 26%, transparent); }
.compteur-chute-barre { display: block; height: 100%; width: 0; background: var(--souris); }
.compteur-scene:not(.pret) .compteur-chute-barre { width: 100%; }

.compteur-mention { font-size: var(--t-mention); color: color-mix(in oklab, var(--paroi) 72%, transparent); margin: 0; }

.compteur-formules { list-style: none; margin: 0; padding: 0; }
.compteur-formule { border-top: 1px solid var(--brun); padding-block: var(--e-5); }
.compteur-formule:last-child { border-bottom: 1px solid var(--brun); }
.compteur-formule p + p { margin-top: var(--e-3); }
.compteur-formule .intertitre { margin: var(--e-2) 0 var(--e-3); }

.compteur-mesure {
  font-size: var(--t-mention); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ocre-rouge); margin: 0;
}
.compteur-mesure strong { font-weight: inherit; color: var(--noir); }

/* Le tableau des plafonds de l'arrete. Ce sont des MAXIMUMS reglementaires, jamais les prix de
   l'entreprise : la formule tenue partout est « l'arrete plafonne a X ». */
.compteur-tableau { grid-column: 1 / -1; width: 100%; border-collapse: collapse; margin-top: var(--e-5); }
.compteur-legende { text-align: left; font-size: var(--t-mention); color: var(--brun); padding-bottom: var(--e-3); }
.compteur-tableau th, .compteur-tableau td { border-top: 1px solid var(--brun); padding-block: var(--e-3); text-align: left; vertical-align: baseline; }
.compteur-tableau th { font-weight: 400; padding-right: var(--e-4); }
.compteur-tableau td { font-family: var(--famille-titre); font-variation-settings: var(--axes-intertitre); white-space: nowrap; }
/* 26/09/2026 (RGAA 10.4) : texte seul agrandi, les cellules passent a la ligne au lieu d'elargir le tableau. */
.compteur-tableau td { white-space: normal; }
.compteur-tableau tr:last-child th, .compteur-tableau tr:last-child td { border-bottom: 1px solid var(--brun); }

.compteur-apres { grid-column: 1 / -1; margin-top: var(--e-4); max-width: var(--mesure); }

@media (min-width: 60rem) {
  .compteur-tableau { grid-column: 1 / span 8; }
  .compteur-apres { grid-column: 1 / span 6; }
}

/* Defaut vu a l'image le 19/09 : sur large ecran, « le compteur compte les arrivees » repetait
   mot pour mot l'unite deja allumee dans le boitier, juste a cote, et cinq fois de suite. La
   mention ne sert que quand le boitier n'est plus en vue, donc sur ecran etroit. */
@media (min-width: 60rem) { .compteur-mesure { display: none; } }

/* --------------------------------------------- EQUIPEMENTS ET SERVICES : deja la, ou a demander
   Page mere /equipements-et-services/, 19/09/2026. Deux colonnes qui repondent a la seule question
   utile avant de monter. Registre 0, aucun mouvement ajoute : le gabarit « ce qui explique ». */

.equip-colonnes { grid-column: 1 / -1; display: grid; column-gap: var(--gouttiere); row-gap: var(--e-7); }
@media (min-width: 55rem) { .equip-colonnes { grid-template-columns: 1fr 1fr; } }

.equip-tete {
  font-family: var(--famille-titre); font-variation-settings: var(--axes-marque);
  font-size: var(--t-mention); letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 var(--e-4); padding-bottom: var(--e-3);
  border-bottom: 2px solid var(--brun);
}
.equip-deja .equip-tete { color: var(--ocre-rouge); border-bottom-color: var(--ocre-rouge); }
.equip-demande .equip-tete { color: var(--brun); }

.equip-liste { list-style: none; margin: 0; padding: 0; }
.equip-liste li { border-top: 1px solid var(--brun); padding-block: var(--e-4); }
.equip-liste li:first-child { border-top: 0; padding-top: 0; }
.equip-liste .intertitre { margin: 0 0 var(--e-2); }
.equip-liste p { margin: 0; }

/* Defauts vus a l'image le 19/09 : les titres des deux listes sortaient au corps d'intertitre,
   deux lignes de titre pour deux lignes de texte, et la page partait en hauteur pour rien. Et les
   deux colonnes ne se distinguaient que par la couleur d'un filet, trop peu pour porter
   l'opposition qui EST le sujet de la page. */
.equip-liste .intertitre { font-size: var(--t-texte); line-height: 1.25; }
.equip-deja { background: var(--paroi-claire); border-radius: var(--rayon-champ); padding: var(--e-5); }
@media (min-width: 55rem) { .equip-demande { padding-top: var(--e-5); } }

/* ------------------------------------------------ QUI SOMMES-NOUS : le reseau, et les questions
   Page /qui-sommes-nous.html, 19/09/2026. Registre 0, aucun mouvement ajoute.
   Le dispositif est le tableau des quatre autorisations : le fait le plus inattendu du dossier. */

.reseau-tableau { grid-column: 1 / -1; width: 100%; border-collapse: collapse; margin-top: var(--e-5); }
.reseau-legende { text-align: left; font-size: var(--t-mention); color: var(--brun); padding-bottom: var(--e-3); }
.reseau-tableau th, .reseau-tableau td { border-top: 1px solid var(--brun); padding-block: var(--e-3); text-align: left; vertical-align: baseline; }
.reseau-tableau th { font-weight: 400; padding-right: var(--e-4); }
.reseau-tableau td { font-family: var(--famille-titre); font-variation-settings: var(--axes-intertitre); }
.reseau-tableau tr:last-child th, .reseau-tableau tr:last-child td { border-bottom: 1px solid var(--brun); }

.reseau-apres { grid-column: 1 / -1; margin-top: var(--e-4); max-width: var(--mesure); }

.reseau-liste { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; column-gap: var(--gouttiere); row-gap: var(--e-5); }
.reseau-liste li { border-top: 1px solid var(--brun); padding-top: var(--e-4); }
.reseau-liste .intertitre { margin: 0 0 var(--e-2); }
.reseau-liste p { margin: 0; }
.reseau-commune { font-size: var(--t-mention); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ocre-rouge); margin-bottom: var(--e-2) !important; }

@media (min-width: 55rem) {
  .reseau-tableau, .reseau-apres { grid-column: 1 / span 7; }
  .reseau-liste { grid-template-columns: 1fr 1fr; }
}

/* LES QUESTIONS A MICKAEL. Ordre de Thomas du 19/09 : les trous se posent sur la page, il y
   repondra. Ce sont du CONTENU VISIBLE, pas des commentaires : `sans-notes.mjs` retire tout
   commentaire de dist/ et arrete le build s'il en reste un.
   ELLES NE DOIVENT JAMAIS ETRE SERVIES AU PUBLIC. D'ou le traitement volontairement etranger au
   reste du site : trame diagonale, bordure franche, rien qui puisse passer pour du contenu fini. */
.question-client, .question-recap {
  grid-column: 1 / -1; margin-top: var(--e-6);
  border: 2px dashed var(--ocre-rouge);
  border-radius: var(--rayon-champ);
  padding: var(--e-5);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--ocre-jaune) 14%, transparent) 0 10px,
    transparent 10px 22px
  );
}
@media (min-width: 55rem) { .question-client, .question-recap { grid-column: 1 / span 8; } }

.question-tete {
  font-family: var(--famille-titre); font-variation-settings: var(--axes-marque);
  font-size: var(--t-mention); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ocre-rouge); margin: 0 0 var(--e-3);
}
.question-client p, .question-recap p { margin: 0 0 var(--e-3); }
.question-client ul, .question-liste { margin: 0; padding-left: var(--e-5); }
.question-client li, .question-liste li { margin-bottom: var(--e-3); }
.question-note { font-size: var(--t-mention); color: var(--brun); }

/* Defaut vu a l'image le 19/09 : la liste recapitulative perdait ses numeros, alors que Mickael
   repondra « pour la 3 ». Le numero est l'adresse de la question, il doit se voir. */
.question-liste { list-style: decimal; }
.question-liste::marker, .question-liste li::marker { color: var(--ocre-rouge); font-family: var(--famille-titre); }

/* Defaut vu a l'image le 19/09 : dans un bloc a aplat (.fauteuil, .groupes, .avant), l'encadre
   de question heritait du fond colore et perdait son identite d'outil de travail. Il porte
   desormais son propre fond opaque : il doit rester etranger au site partout, sans exception. */
.question-client, .question-recap { background-color: var(--paroi-claire); color: var(--noir); }

/* ============================================================================
   LA PAGE DES AEROPORTS : LE TAXI ET L'ENVOL (23/09/2026).
   Demande de Thomas : un taxi qui avance, arrive a un avion et le fait decoller.
   Dessin a main levee dans l'ecriture du site : trait vert pale sur la paroi vert nuit,
   le panneau TAXI jaune du logo en seul accent. Classes neuves .envol-* uniquement.
   Etat par defaut : l'image fixe (taxi gare, avion qui vient de quitter le sol). Sans
   JavaScript et sous mouvement reduit, c'est elle qu'on voit.
   ============================================================================ */
.envol { margin: 0; padding-bottom: var(--e-8); --envol-jaune: #F4B860; }
.envol-scene { grid-column: 1 / -1; display: block; width: 100%; height: auto; overflow: hidden; }
.envol-scene path, .envol-scene circle { stroke-linecap: round; stroke-linejoin: round; }
.envol-calcul { fill: none; stroke: none; }
.envol-sol { fill: none; stroke: var(--ocre-rouge); stroke-width: 4; }
.envol-piste { fill: none; stroke: var(--souris); stroke-width: 3; stroke-dasharray: 34 26; }
.envol-sillage { fill: none; stroke: var(--ocre-rouge); stroke-width: 4; }
.envol-corps { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.envol-detail { fill: none; stroke: var(--brun); stroke-width: 2; }
.envol-trait-fin { fill: none; stroke: var(--brun); stroke-width: 2; }
.envol-hublots { fill: none; stroke: var(--brun); stroke-width: 3; stroke-dasharray: 5 11; }
.envol-roue { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.envol-moyeu { fill: none; stroke: var(--brun); stroke-width: 2; }
.envol-rayon { fill: none; stroke: var(--brun); stroke-width: 2; }
.envol-enseigne { fill: var(--envol-jaune); stroke: none; }
.envol-enseigne-mot {
  fill: var(--paroi); font-family: var(--famille-titre); font-size: 12px; letter-spacing: 0.08em;
  font-variation-settings: "opsz" 12, "wdth" 90, "wght" 800;
}
.envol-crete { fill: none; stroke: var(--souris); stroke-width: 2; }
.envol-eau { fill: none; stroke: var(--ocre-jaune); stroke-width: 3; }
@media (max-width: 40rem) {
  /* Au telephone, la scene passe de bord a bord : chaque pixel de largeur compte. */
  .envol { padding-bottom: var(--e-7); }
  .envol-scene { margin-inline: calc(var(--bord) * -1); width: calc(100% + var(--bord) * 2); max-width: none; }
}

/* ============================================================================
   LA PAGE DES GARES : LE TAXI ET LE TRAIN QUI PART (23/09/2026).
   Demande de Thomas : « idem mais pour le train », apres l'envol des aeroports.
   Meme ecriture que .envol-* : trait vert pale sur la paroi vert nuit, le panneau TAXI jaune
   du logo en seul accent. Classes neuves .depart-* uniquement.
   Regle metier : en gare, le taxi depose et repart, il n'attend jamais. L'image fixe (sans
   JavaScript, sous mouvement reduit) montre le train qui entre dans le tunnel et le taxi deja
   dans la descente, jamais un taxi gare devant la gare.
   Au telephone, la scene RESTE dans la grille (pas de bord a bord) : elle ne croise pas le
   trait du site dans la marge, et le train disparait dans son tunnel a l'interieur du cadre.
   ============================================================================ */
.depart { margin: 0; padding-bottom: var(--e-8); --depart-jaune: #F4B860; }
.depart-scene { grid-column: 1 / -1; display: block; width: 100%; height: auto; overflow: hidden; }
.depart-scene path, .depart-scene circle { stroke-linecap: round; stroke-linejoin: round; }
.depart-calcul { fill: none; stroke: none; }
.depart-sol { fill: none; stroke: var(--ocre-rouge); stroke-width: 4; }
.depart-rail { fill: none; stroke: var(--ocre-rouge); stroke-width: 3; }
.depart-traverses { fill: none; stroke: var(--souris); stroke-width: 4; stroke-dasharray: 3 11; }
.depart-corps { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.depart-corps-seul { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.depart-masse { fill: var(--paroi); stroke: none; }
.depart-detail { fill: none; stroke: var(--brun); stroke-width: 2; }
.depart-trait-fin { fill: none; stroke: var(--brun); stroke-width: 2; }
.depart-roue { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 2.5; }
.depart-roue-taxi { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.depart-moyeu { fill: none; stroke: var(--brun); stroke-width: 2; }
.depart-rayon { fill: none; stroke: var(--brun); stroke-width: 2; }
.depart-phare { fill: var(--ocre-rouge); stroke: none; }
.depart-horloge { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 2.5; }
.depart-aiguille { fill: none; stroke: var(--ocre-rouge); stroke-width: 2.5; }
.depart-enseigne { fill: var(--depart-jaune); stroke: none; }
.depart-enseigne-mot {
  fill: var(--paroi); font-family: var(--famille-titre); font-size: 12px; letter-spacing: 0.08em;
  font-variation-settings: "opsz" 12, "wdth" 90, "wght" 800;
}
.depart-crete { fill: none; stroke: var(--souris); stroke-width: 2; }
.depart-eau { fill: none; stroke: var(--ocre-jaune); stroke-width: 3; }
@media (max-width: 40rem) {
  .depart { padding-bottom: var(--e-7); }
}

/* ============================================================================
   LA PAGE DES MARIAGES : LE CORTEGE (24/09/2026).
   Demande de Thomas : « il faut sentir la joie et l'allegresse d'un mariage », piste retenue :
   « Le cortege ». Meme ecriture que .envol-* et .depart-* : trait vert pale sur la paroi vert
   nuit. La joie vient de trois matieres claires, et d'elles seules : le jaune du panneau TAXI
   pour les petales, le blanc casse du texte pour le tulle, la robe et le voile, et la lumiere
   jaune qui sort de l'eglise quand les portes s'ouvrent. Classes neuves .cortege-* uniquement.
   Etat par defaut : l'image fixe (le cortege en route, les petales tombes devant l'eglise).
   ============================================================================ */
.cortege { margin: 0; padding-bottom: var(--e-8); --cortege-jaune: #F4B860; }
.cortege-scene { grid-column: 1 / -1; display: block; width: 100%; height: auto; overflow: hidden; }
.cortege-scene path, .cortege-scene circle { stroke-linecap: round; stroke-linejoin: round; }
.cortege-sol { fill: none; stroke: var(--ocre-rouge); stroke-width: 4; }
.cortege-corps { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.cortege-corps-seul { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.cortege-detail { fill: none; stroke: var(--brun); stroke-width: 2; }
.cortege-trait-fin { fill: none; stroke: var(--brun); stroke-width: 2; }
.cortege-crete { fill: none; stroke: var(--souris); stroke-width: 2; }
.cortege-battant { fill: var(--ocre-rouge); stroke: none; }
.cortege-lumiere { fill: var(--cortege-jaune); fill-opacity: 0.85; stroke: none; }
.cortege-battant-porte { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 2; }
.cortege-roue { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.cortege-moyeu, .cortege-rayon { fill: none; stroke: var(--brun); stroke-width: 2; }
.cortege-enseigne { fill: var(--cortege-jaune); stroke: none; }
.cortege-enseigne-mot {
  fill: var(--paroi); font-family: var(--famille-titre); font-size: 12px; letter-spacing: 0.08em;
  font-variation-settings: "opsz" 12, "wdth" 90, "wght" 800;
}
.cortege-robe { fill: var(--noir); stroke: var(--noir); stroke-width: 2; }
.cortege-voile { fill: none; stroke: var(--noir); stroke-width: 2.5; }
.cortege-bouquet { fill: var(--cortege-jaune); stroke: none; }
.cortege-noeud-tulle { fill: none; stroke: var(--noir); stroke-width: 2.5; }
.cortege-ruban { fill: none; stroke: var(--noir); stroke-width: 2.5; }
.cortege-ruban-fin { stroke: var(--cortege-jaune); stroke-width: 2; }
.cortege-petale { stroke: none; }
.cortege-petale-jaune { fill: var(--cortege-jaune); }
.cortege-petale-blanc { fill: var(--noir); }
.cortege-petale-vert { fill: var(--ocre-rouge); }
@media (max-width: 40rem) {
  .cortege { padding-bottom: var(--e-7); }
}

/* ============================================================================
   QUI SOMMES-NOUS : LE RELAIS DES QUATRE VEHICULES (24/09/2026).
   Les quatre vehicules arrivent l'un apres l'autre, chacun devant son decor : l'hopital, la gare,
   le village perche, la falaise sur la Vezere. Le quatrieme est le monospace a place fauteuil de
   Pascale. Meme ecriture que .cortege-* ; classes neuves .relais-* uniquement.
   ============================================================================ */
.relais { margin: 0; padding-bottom: var(--e-8); --relais-jaune: #F4B860; }
.relais-scene { grid-column: 1 / -1; display: block; width: 100%; height: auto; overflow: hidden; }
.relais-scene path, .relais-scene circle { stroke-linecap: round; stroke-linejoin: round; }
.relais-sol { fill: none; stroke: var(--ocre-rouge); stroke-width: 4; }
.relais-corps, .relais-corps-seul { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.relais-detail, .relais-trait-fin { fill: none; stroke: var(--brun); stroke-width: 2; }
.relais-trait { fill: none; stroke: var(--ocre-rouge); stroke-width: 3; }
.relais-fenetres { fill: none; stroke: var(--brun); stroke-width: 8; stroke-dasharray: 12 14; stroke-linecap: butt !important; }
.relais-roue { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.relais-moyeu { fill: none; stroke: var(--brun); stroke-width: 2; }
.relais-enseigne { fill: var(--relais-jaune); stroke: none; }
.relais-enseigne-mot {
  fill: var(--paroi); font-family: var(--famille-titre); font-size: 12px; letter-spacing: 0.08em;
  font-variation-settings: "opsz" 12, "wdth" 90, "wght" 800;
}
.relais-robe { fill: var(--noir); stroke: var(--noir); stroke-width: 2; }
.relais-appareil { fill: var(--relais-jaune); stroke: none; }
@media (max-width: 40rem) { .relais { padding-bottom: var(--e-7); } }

/* Equipements et services : un pictogramme par ligne (Thomas, 24/09/2026 : « ce serait bien d'avoir
   des picto »). Dessines au trait, dans l'ecriture des scenes animees : trait vert pale, bouts ronds,
   aucune pastille, aucun fond. Le texte reste seul porteur du sens (aria-hidden). */
.equip-liste li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--e-4); align-items: start; }
.equip-picto { width: 2.75rem; height: 2.75rem; fill: none; stroke: var(--ocre-rouge); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.equip-demande .equip-picto { stroke: var(--brun); }

/* ============================================================================
   AUTRES TRAJETS : LE PARE-BRISE (24/09/2026, valide par Thomas : « je valide »).
   Un OBJET en gros plan, vu de la place du passager, plus de taxi de profil sur une route.
   Meme ecriture que .cortege-* et .relais-* ; classes .pb-* uniquement.
   Etat par defaut : l'image fixe, l'arret au chateau. Sans JavaScript et sous mouvement reduit,
   c'est elle qu'on voit.
   ============================================================================ */
.pb { margin: 0; padding-bottom: var(--e-8); --pb-jaune: #F4B860; }
.pb-scene { grid-column: 1 / -1; display: block; width: 100%; height: auto; overflow: hidden; }
.pb-scene path, .pb-scene circle, .pb-scene rect { stroke-linecap: round; stroke-linejoin: round; }
/* Mise en conformite du 24/09/2026 (Thomas : « il faut que ca soit conforme aux autres et responsive
   aussi ») : memes epaisseurs que .cortege-*, .envol-*, .depart-*, .relais-* (4 pour le trait fort,
   3 pour les corps, 2 pour les details), a l'echelle de la scene. Les objets du paysage sont agrandis
   par la perspective : leur groupe porte --k, l'inverse de ce grossissement, pose par le composant et
   par maquette.js, et le trait redevient 3 ou 2 unites du dessin, comme ailleurs. */
.pb-corps { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: calc(3px * var(--k, 1)); }
.pb-habitacle-plein { fill: var(--paroi); stroke: none; }
.pb-trait { fill: none; stroke: var(--ocre-rouge); stroke-width: calc(3px * var(--k, 1)); }
.pb-epais, .pb-volant { stroke-width: 4px; }
.pb-detail { fill: none; stroke: var(--brun); stroke-width: calc(2px * var(--k, 1)); }
.pb-souris { fill: none; stroke: var(--souris); stroke-width: 2px; }
.pb-ecrit { fill: none; stroke: var(--paroi); stroke-width: calc(3px * var(--k, 1)); }
.pb-jaune { fill: var(--pb-jaune); stroke: none; }
.pb-reflet { fill: none; stroke: var(--souris); stroke-width: 2px; }
.pb-soleil-plein { fill: var(--pb-jaune); stroke: none; }
.pb-sentier { fill: none; stroke: var(--brun); stroke-width: calc(2px * var(--k, 1)); stroke-dasharray: calc(2px * var(--k, 1)) calc(6px * var(--k, 1)); }
.pb-cadran { fill: var(--paroi); stroke: var(--pb-jaune); stroke-width: calc(2.5px * var(--k, 1)); }
.pb-aiguille { fill: none; stroke: var(--noir); stroke-width: calc(2px * var(--k, 1)); }
.pb-panneau { fill: var(--paroi-claire); stroke: var(--noir); stroke-width: calc(2px * var(--k, 1)); }
.pb-panneau-fleche { fill: none; stroke: var(--noir); stroke-width: calc(2px * var(--k, 1)); }
.pb-panneau-mot {
  fill: var(--noir); font-family: var(--famille-titre); font-size: 1px; letter-spacing: 0.02em;
  font-variation-settings: "opsz" 12, "wdth" 90, "wght" 700;
}
/* Deux habitacles (ParebriseTrajets.astro) : le large, et l'etroit du telephone. */
.pb-etroit { display: none; }
/* Le volant remonte de 46 unites : la jante, les branches et le moyeu tiennent entiers au-dessus du
   bord bas, comme chaque objet des autres scenes tient entier dans son cadre. */
.pb-volant-pose { transform: translate(0px, -46px); }
@media (max-width: 40rem) {
  /* Au telephone, la scene est RECADREE (preserveAspectRatio slice) sur les unites 340 a 860 : un
     personnage y fait au moins 60 px a 390, ou les autres scenes, reduites en entier, tombent sous
     15 px. Rien n'y est coupe pour autant : l'habitacle etroit est dessine DANS cette fenetre
     (montants, tableau de bord, autoradio), la vitre etroite decoupe le paysage, et le paysage
     seul se decale par .pb-camera (maquette.js le fait glisser de -45 a -20 autour du deuxieme arret). Les arrets de la voiture sont regles pour ce cadre dans
     maquette.js (condition « telephone »). La scene reste dans la grille, comme cortege, depart et
     relais : elle ne croise jamais le trait du site dans la marge. */
  .pb { padding-bottom: var(--e-7); }
  .pb-scene { aspect-ratio: 520 / 460; height: auto; }
  .pb-large { display: none; }
  .pb-etroit { display: inline; }
  .pb-vue { clip-path: url(#pb-vitre-etroit); }
  .pb-camera { transform: translate(-45px, 0px); }
  .pb-miroir-pose { transform: translate(75px, 0px); }
  .pb-volant-pose { transform: translate(322px, -46px); }
}

/* ---------- Formulaires de demande dediees (24/09/2026) ----------
   Composant DemandeCourse.astro. Reemploi du systeme : `.champ` de l'accueil, bascules du
   simulateur. Le formulaire prend la place laissee libre a droite de l'intro, sur deux colonnes
   de champs, et passe en pleine largeur sous 64 rem. */
.bloc .demande { grid-column: 7 / -1; grid-row: auto; align-self: start; }
.bloc .demande > .discret { max-width: 46ch; }
.demande-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-5); }
.demande-grille .champ-large { grid-column: 1 / -1; }
.demande-grille > .champ { align-content: end; }
.demande-grille .estimation-groupe { margin-top: var(--e-6); }
.demande-grille .estimation-groupe legend { color: var(--noir); font-family: inherit; font-variation-settings: normal; font-weight: 700; }
.demande-aide { display: block; width: 100%; color: var(--brun); margin-top: calc(var(--e-2) * -1); }
.demande .facultatif { font-weight: 400; color: var(--brun); }
.demande .estimation-bascule input[type="checkbox"]:checked + span { background: var(--ocre-rouge); border-color: var(--ocre-rouge); color: var(--sur-plein); }
.demande .champ input[type="time"] { font-family: var(--famille-texte); font-size: var(--t-texte); }
.demande-leurre { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demande-robot { margin-top: var(--e-6); min-height: 65px; }
.demande .bouton-secondaire { margin-top: var(--e-5); }
.demande .bouton-secondaire[disabled] { opacity: 0.5; cursor: wait; }
.demande-etat { margin-top: var(--e-4); font-weight: 700; min-height: 1.5em; }
.demande-mention { margin-top: var(--e-3); max-width: 52ch; }
@media (max-width: 64rem) {
  .bloc .demande { grid-column: 1 / -1; margin-top: var(--e-7); }
}
@media (max-width: 40rem) {
  .demande-grille { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   EQUIPEMENTS ET SERVICES : LA VOITURE VUE DU CIEL (25/09/2026, validee par Thomas : « je valide »).
   Meme ecriture que .relais-* et .pb-* (4, 3 et 2 unites de trait). Deux cadrages : large,
   et etroit au telephone. Classes .ciel-* uniquement.
   ============================================================================ */
.ciel { margin: 0; padding-bottom: var(--e-8); --equip-jaune: #F4B860; }
.ciel-scene { grid-column: 1 / -1; display: block; width: 100%; height: auto; overflow: hidden; }
.ciel-scene path { stroke-linecap: round; stroke-linejoin: round; }
.ciel-etroit { display: none; }
@media (max-width: 40rem) {
  .ciel-large { display: none; }
  .ciel-etroit { display: block; }
  .ciel { padding-bottom: var(--e-7); }
}
.ciel-sol { fill: none; stroke: var(--souris); stroke-width: 2; }
.ciel-axe { stroke-dasharray: 26 22; }
.ciel-corps { fill: var(--paroi); stroke: var(--ocre-rouge); stroke-width: 3; }
.ciel-epais { stroke-width: 4; }
.ciel-detail { fill: none; stroke: var(--brun); stroke-width: 2; }
.ciel-trait { fill: none; stroke: var(--ocre-rouge); stroke-width: 3; }
.ciel-trait-fin { fill: none; stroke: var(--brun); stroke-width: 2; }
.ciel-jaune { fill: var(--equip-jaune); stroke: none; }
.ciel-note { fill: var(--noir); stroke: none; }
.ciel-flux { fill: none; stroke: var(--ocre-rouge); stroke-width: 2; stroke-dasharray: 8 10; }
.ciel-onde { fill: none; stroke: var(--ocre-rouge); stroke-width: 3; }
.ciel-lumiere { fill: var(--noir); opacity: 0.09; stroke: none; }
/* Ce qui se dit en reservant : trait souris clair, et pointille tant que ce n'est pas pose. */
[data-ciel-dit] .ciel-corps { stroke: var(--brun); }
[data-ciel-dit].ciel-en-route .ciel-corps, [data-ciel-dit].ciel-en-route .ciel-detail { stroke-dasharray: 7 9; fill: none; }