/* Cycles Duingt — la ligne : scène, piste horizontale (ordinateur), rail à accroche (téléphone),
   colonne (mouvement réduit), sol, ruban du bas et règle des kilomètres. */

/* Le bandeau de démonstration recouvre le haut de la scène : la scène fait toujours l'écran entier. */
body:has(.am-demobar) main { margin-top: -36px; }

.scene { position: relative; overflow: clip; background: var(--lac); }
.piste { display: flex; }
.borne { position: relative; flex: none; overflow: clip; }
.sentinelle { position: absolute; left: 0; top: 0; width: 96px; height: 2px; pointer-events: none; }

/* ——— Ordinateur : scène collante, piste de 860 vw poussée par le défilement ——— */
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .scene-long { height: calc(100vh + 608vw); height: calc(100svh + 608vw); }
  .scene { position: sticky; top: 0; height: 100vh; height: 100svh; }
  .piste { position: absolute; left: 0; top: 0; bottom: var(--infos); width: max-content; will-change: transform; }
  .borne { height: 100%; }
  .b1, .b5, .b9, .b10 { width: 100vw; }
  .b8 { width: 80vw; }
  .b2, .b3 { width: 70vw; }
  .b4, .b6 { width: 90vw; }
  .b7 { width: 60vw; }
  .ruban { position: absolute; left: 0; right: 0; bottom: 0; }
}

/* ——— Téléphone et tablette tactile : la fenêtre ne défile pas, le rail glisse, une borne par écran ——— */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference), (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  html { scrollbar-gutter: auto; }
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .scene { height: 100vh; height: 100svh; }
  .piste {
    position: absolute; left: 0; right: 0; top: 0; bottom: var(--infos);
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .piste::-webkit-scrollbar { display: none; }
  .piste.glisse { scroll-snap-type: none; }
  .borne { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .ruban { position: absolute; left: 0; right: 0; bottom: 0; }
}

/* ——— Mouvement réduit : les bornes en colonne, la règle devient une liste de liens ——— */
@media (prefers-reduced-motion: reduce) {
  body { padding-bottom: var(--infos); }
  .scene { overflow: visible; }
  .piste { flex-direction: column; }
  .borne { width: 100%; min-height: calc(100vh - var(--infos)); min-height: calc(100svh - var(--infos)); }
  .ruban { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
  .regle { display: none !important; }
  .b1 { overflow: clip; }
  .affiche { white-space: normal; font-size: min(15vw, 30vh); }
  .voiture { left: 70vw; }
  .regle-liens { display: flex !important; }
  /* Aucune borne ne déborde en colonne (le tunnel et le titre débordent exprès sur la piste). */
  .piste > .borne { overflow: clip; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023.98px) {
  /* Au téléphone, la liste garde cinq arrêts ; le plan complet est dans le menu. */
  .regle-liens a:nth-child(2), .regle-liens a:nth-child(3), .regle-liens a:nth-child(6), .regle-liens a:nth-child(7), .regle-liens a:nth-child(9) { display: none; }
}

/* ——— Le sol : bord haut du ruban, planté sous chaque borne ——— */
.sol { position: absolute; left: 0; right: -1px; bottom: 0; height: var(--sol); background: var(--blanc); z-index: 2; }
/* Liseré de voie verte : sur la rive ouest et dans le tunnel, pas sur la route partagée. */
.sol--vv::after {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--lac) 0 34px, transparent 34px 58px);
}
@media (max-width: 1023.98px) { .sol--vv::after { top: 4px; height: 3px; } }

/* ——— Le ruban blanc du bas ——— */
.ruban {
  z-index: 20; height: var(--infos); display: flex; align-items: center; gap: 28px;
  padding: 0 max(var(--marge), env(safe-area-inset-right)) 8px max(var(--marge), env(safe-area-inset-left));
  background: var(--blanc); color: var(--encre);
}
.ruban__rang { display: contents; }
.mini-lac { flex: none; height: 60px; width: 36px; }
.mini-lac .eau { fill: var(--lac); }
.mini-lac .tour { fill: none; stroke: var(--gris-profil); stroke-width: 22; stroke-linejoin: round; }
.mini-lac .point { fill: var(--rouge); stroke: var(--blanc); stroke-width: 26; }

.position { flex: none; display: grid; width: 168px; line-height: 1.1; }
.position__km { font-size: 30px; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.position__u { font-size: 18px; font-weight: 500; letter-spacing: 0; }
.position__lieu { font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.batterie { flex: none; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; line-height: 1.1; }
.batterie svg { grid-row: span 2; width: 30px; height: 16px; fill: none; stroke: var(--encre); stroke-width: 2; }
.batterie .batterie__niveau { fill: var(--encre); stroke: none; transform-origin: 3.5px 0; }
.batterie b { font-size: 24px; letter-spacing: -.02em; white-space: nowrap; }
.batterie small { font-size: 12.5px; color: var(--gris); }

.engin { flex: none; display: flex; align-items: flex-end; gap: 12px; width: 250px; line-height: 1.15; }
.engin__dessin { flex: none; width: 64px; height: 42px; display: flex; align-items: flex-end; }
.engin__dessin svg { width: 100%; height: 100%; }
.engin__dessin .dessin { color: var(--encre); }
.engin__dessin .t { stroke-width: 1.6px; }
.engin__dessin .accent { stroke-width: 3px; }
.engin b { display: block; font-size: 16px; font-weight: 700; }
.engin [data-engin-prix] { font-size: 13px; color: var(--gris); }
.ruban .borne-action--ruban { display: none; }
.lieu-court { display: none; }

/* ——— La règle 0–40 ——— */
.regle { position: relative; flex: 1 1 auto; min-width: 0; height: 60px; touch-action: none; }
.regle__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.regle__svg text { font-size: 12.5px; font-weight: 500; fill: var(--gris); }
.regle__svg .profil { fill: var(--gris-profil); }
.regle__svg .base { stroke: var(--encre); stroke-width: 2; }
.regle__svg .grad { stroke: var(--encre); stroke-width: 1.5; }
.regle__svg .grad--forte { stroke-width: 2; }
.regle__svg .ferme-hach { fill: url(#hach); }
.regle__svg .grad-coupe { transition: opacity .5s; }
.regle.coupee .grad-coupe { opacity: 0; }
.regle__point {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 2;
  cursor: grab; touch-action: none;
}
.regle__point::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 3px var(--blanc), 0 0 0 4px rgb(4 48 47 / .25);
}
.regle__point:active { cursor: grabbing; }
.regle:has(.regle__range:focus-visible) .regle__point::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; outline: 2px solid var(--encre); outline-offset: 2px;
}
/* Curseur natif invisible posé sur toute la règle : un clic ou un toucher y amène la piste ; le point rouge reste au-dessus. */
.regle__range { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
.regle__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 44px; }
.regle__range::-moz-range-thumb { width: 20px; height: 44px; border: 0; }
.regle-liens { display: none; flex: 1 1 auto; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.regle-liens a {
  flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ruban { gap: 20px; }
  .position { width: 132px; }
  .engin { width: 190px; }
  .engin__dessin { display: none; }
}

/* ——— Ruban du téléphone : deux rangs, « Réserver » sous le pouce ——— */
@media (max-width: 1023.98px) {
  .ruban {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 24px 48px; column-gap: 14px; row-gap: 2px;
    align-content: start; padding-top: 4px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .lieu-long { display: none; }
  .lieu-court { display: inline; }
  .ruban__rang { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
  .mini-lac, .engin { display: none; }
  .position { display: flex; align-items: baseline; gap: 10px; width: auto; min-width: 0; }
  .position__km { font-size: 16px; font-weight: 900; order: 2; }
  .position__u { font-size: 12.5px; }
  .position__lieu { font-size: 13px; font-weight: 700; color: var(--encre); order: 1; }
  .batterie { grid-template-columns: auto auto auto; column-gap: 6px; }
  .batterie svg { grid-row: auto; width: 22px; height: 12px; }
  .batterie b { font-size: 15px; }
  .batterie small { font-size: 12.5px; }
  .regle { height: 48px; }
  .regle__svg text { display: none; }
  .ruban .borne-action--ruban { display: inline-flex; width: 104px; min-width: 104px; height: 48px; padding-top: 6px; font-size: 16px; box-shadow: inset 0 0 0 2px var(--encre); }
  .ruban .borne-action--ruban::before { top: 0; }
  .position__lieu { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .position { flex: 0 1 auto; }
  .batterie { flex: none; }
  .regle-liens { grid-row: 2; }
}
@media (max-width: 379.98px) {
  .ruban__rang { gap: 6px; }
  .position { gap: 6px; }
  .position__lieu { font-size: 12.5px; }
  .batterie svg { width: 18px; height: 10px; }
  .batterie { column-gap: 4px; }
}
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 480px) {
  .ruban { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 44px; padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .ruban__rang { grid-column: auto; }
  .ruban .borne-action--ruban { height: 44px; }
  .regle { height: 44px; }
  .sol { display: none; }
}