/* Cycles Duingt — bornes 6 à 9 : la rive est, le Roc de Chère, la coupure de Talloires, le tunnel. */

/* ——— Borne 6 : on partage la route, le VAE ——— */
.b6 { display: flex; flex-direction: column; padding: var(--haut) var(--marge) var(--sol) calc(var(--marge) + 40px); }
.voiture { position: absolute; z-index: 0; left: 72vw; bottom: calc(var(--sol) + 5vh); width: 11vw; color: var(--blanc); opacity: .4; }
.voiture svg { width: 100%; height: auto; overflow: visible; }
.voiture .t { fill: none; stroke: currentColor; stroke-width: 2.5px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.b6 .garage { position: relative; z-index: 1; }
.b6 .dessin-velo { --s: calc(2 * min(.125vw, .3vh)); }
@supports (height: 1svh) { .b6 .dessin-velo { --s: calc(2 * min(.125vw, .3svh)); } }
.plaque__faits li + li { margin-top: 2px; }
.commande {
  position: absolute; z-index: 2; right: var(--marge); top: calc(var(--haut) + 1vh);
  display: grid; grid-template-columns: repeat(3, auto); align-items: end; gap: 0;
  padding: 14px 16px 16px; border: 3px solid var(--blanc);
}
.commande legend { float: left; grid-column: 1 / -1; width: 100%; margin-bottom: 10px; font-size: 16px; font-weight: 700; }
.commande label { position: relative; display: grid; justify-items: center; gap: 8px; min-width: 74px; min-height: 64px; cursor: pointer; }
.commande label::before { content: ""; width: 4px; height: 18px; background: var(--blanc); }
.commande label:nth-of-type(2)::before { height: 26px; }
.commande label:nth-of-type(3)::before { height: 34px; }
.commande input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.commande span { display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 10px; font-size: 16px; font-weight: 500; }
.commande input:checked + span { background: var(--blanc); color: var(--encre); font-weight: 700; }
.commande input:focus-visible + span { outline: 2px solid var(--blanc); outline-offset: 3px; }

/* ——— Borne 7 : le Roc de Chère, la batterie fond ——— */
.b7 { display: flex; flex-direction: column; padding: var(--haut) var(--marge) var(--sol) calc(var(--marge) + 40px); }
.b7__txt { position: relative; z-index: 2; margin-top: 18px; max-width: 26ch; font-size: 20px; font-weight: 500; line-height: 1.3; }
.b7__txt b { display: block; font-size: 24px; margin-bottom: 4px; }
.batt-geante {
  position: relative; z-index: 2; margin-top: 2vh; font-size: clamp(120px, calc(19.5vw - 60px), 320px); font-weight: 900;
  line-height: .9; letter-spacing: -.045em; white-space: nowrap;
}
.batt-geante__vide, .batt-geante__plein { display: inline-block; }
.batt-geante__vide { color: transparent; -webkit-text-stroke: 3px var(--blanc); }
/* Le plein porte le même trait que le vide : les deux copies ont exactement le même contour, sans liseré. */
.batt-geante__plein {
  position: absolute; left: 0; top: 0; color: var(--blanc); -webkit-text-stroke: 3px var(--blanc);
  clip-path: inset(var(--vide, 0%) 0 0 0);
}
.batt-geante .unite { font-size: .42em; letter-spacing: 0; }
.batt-geante__lib { display: inline-block; margin-left: 18px; font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.colline { position: absolute; z-index: 1; left: 0; right: 0; bottom: var(--sol); width: 100%; height: calc(var(--jeu) * .4); transform-origin: 50% 100%; }
.colline .masse { fill: var(--profond); }
.colline .route { fill: none; stroke: var(--blanc); stroke-width: 10px; vector-effect: non-scaling-stroke; }

/* ——— Borne 8 : Talloires, le ruban coupé ——— */
.b8 { display: flex; flex-direction: column; padding: var(--haut) var(--marge) var(--sol) calc(var(--marge) + 40px); }
/* La plaque enjambe la coupure (de 20 à 60 vw) : deux poteaux fins rentrés sous elle, comme un panneau de chantier. */
.plaque--ferme { position: absolute; z-index: 3; left: 21vw; width: 38vw; bottom: calc(var(--sol) + var(--jeu) * .3); padding: 3.2vh 2.6vw 3vh; }
.plaque--ferme::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--rouge); }
.plaque--ferme .poteau-bois { top: 100%; bottom: auto; height: calc(var(--jeu) * .3); }
.plaque--ferme .poteau-bois:first-child { left: 35%; }
.plaque--ferme .poteau-g { left: auto; right: 35%; }
.plaque--ferme h2 { font-size: clamp(30px, 3.1vw, 60px); font-weight: 900; line-height: 1.02; letter-spacing: -.02em; }
.plaque--ferme p { margin-top: 12px; font-size: clamp(16px, 1.1vw, 21px); }
.b8__sorties { position: absolute; z-index: 3; left: calc(var(--marge) + 64px); right: var(--marge); bottom: calc(var(--sol) + 24px); display: flex; justify-content: space-between; }
.b8__sorties .btn:first-child { margin-right: auto; }
.b8__sorties .btn:last-child { position: absolute; left: calc(62vw - var(--marge) - 64px); }
.b8__sorties .btn { min-height: 48px; }
.sol--coupe .hachures {
  position: absolute; top: 0; bottom: 0; left: 25%; width: 50%;
  background: repeating-linear-gradient(-45deg, var(--blanc) 0 7px, var(--lac) 7px 19px);
  transform-origin: 50% 50%; transform: scaleX(0);
}
.b8.coupe .hachures { transform: scaleX(1); transition: transform .5s var(--courbe); }
.b8.rouvert .hachures, .b8.rouvert .b8__sorties [data-sauter] { display: none; }

/* ——— Borne 9 : le tunnel ——— */
.b9 { overflow: visible; z-index: 5; padding: var(--haut) var(--marge) var(--sol) calc(var(--marge) + 40px); }
.b9__enfants { max-width: 24ch; margin-bottom: 3vh; font-size: 20px; line-height: 1.3; }
.b9__photo {
  position: absolute; z-index: 1; top: var(--haut); left: 50vw; height: var(--jeu); aspect-ratio: 4 / 5; margin: 0;
  transform-origin: 50% 46%; pointer-events: none;
}
.b9__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.tunnel { position: absolute; z-index: 3; left: 0; top: 0; width: 100vw; height: 100%; pointer-events: none; }
.tunnel.sorti { opacity: 0 !important; visibility: hidden; transition: opacity .3s .2s, visibility 0s .5s; }
.tunnel__arche { transform-origin: 50% 50%; }
.tunnel.sorti .tunnel__arche { transform: scale(2.6); transition: transform .45s cubic-bezier(.5, 0, .7, .4); }
.b9__bas { transition: opacity .3s; }
.b9__bas.efface { opacity: 0; }
.b9 .sol { z-index: 1; }
.tunnel__noir { position: absolute; inset: 0 0 var(--sol) 0; background: #000; opacity: 0; }
/* Tube néon à angles droits dans son halo : jamais grossi plus de 1,6 fois. */
.tunnel__lampe {
  position: absolute; left: 50%; top: 42%; width: 220px; height: 64px; margin: -32px 0 0 -110px; opacity: 0;
  background: linear-gradient(var(--blanc), var(--blanc)) center / 150px 8px no-repeat,
    radial-gradient(closest-side, rgb(255 255 255 / .42), rgb(255 255 255 / .12) 55%, rgb(255 255 255 / 0)) center / 100% 100% no-repeat;
}
/* L'arche est tracée à la taille de l'écran à chaque image (bornes.js) : nette à toutes les tailles. */
.tunnel__arche { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - var(--sol)); fill: var(--blanc); overflow: visible; }
/* Au sortir de l'arche, la borne du tunnel est déjà blanche : le blanc se retire sur le comptoir, sans voile. */
.b9.blanc { background: var(--blanc); box-shadow: 3px 0 0 var(--blanc); }
.b9.blanc > :not(.sol):not(.tunnel) { visibility: hidden; }
/* Tant que le tunnel n'est pas passé, le comptoir qui approche reste un aplat du lac : rien ne transparaît sous le noir. */
.b10.attente { background: var(--lac); }
.b10.attente > .jalon, .b10.attente .defil > * { opacity: 0; }
.b9__bas { pointer-events: none; position: absolute; z-index: 4; left: calc(var(--marge) + 40px); bottom: calc(var(--sol) + 4vh); }
.b9__km { display: grid; justify-items: start; font-weight: 500; }
.b9__plus { font-size: 22px; font-weight: 700; letter-spacing: 0; }
.b9__un { font-size: clamp(120px, 17vw, 320px); font-weight: 900; line-height: .86; letter-spacing: -.045em; }
.b9__un .unite { font-size: .42em; letter-spacing: 0; }
.b9__feux { margin-top: 10px; font-size: 22px; font-weight: 700; }

/* ——— Téléphone (bornes 6 à 9) ——— */
@media (max-width: 1023.98px) {
  .b6 { padding: 0; }
  .voiture { left: auto; right: var(--marge); top: calc(var(--haut) + 96px); bottom: auto; width: 24vw; opacity: .3; }
  .b6 .garage { flex: 1 0 auto; margin-top: 10px; }
  .b6 .garage .dessin-velo { order: 0; min-height: 88px; padding: 0 0 10px; }
  .b6 .garage .plaque { order: 1; }
  .plaque__faits li { font-size: 16px; line-height: 1.3; }
  .plaque__faits li + li { margin-top: 0; }
  /* La commande d'assistance tient sur un rang de 44 px, sous le pouce. */
  .commande {
    position: relative; right: auto; top: auto; margin-top: 10px; grid-template-columns: auto repeat(3, minmax(0, 1fr));
    align-items: center; column-gap: 4px; padding: 4px 4px 4px 12px; border-width: 2px;
  }
  .commande legend { grid-column: 1; width: auto; margin: 0 6px 0 0; font-size: 16px; }
  .commande label { min-width: 0; min-height: 44px; gap: 0; }
  .commande label::before { display: none; }
  .commande span { width: 100%; min-height: 44px; }

  .b7 { padding: calc(var(--haut) + 16px) var(--marge) var(--sol); }
  .b7__txt { font-size: 16px; }
  .b7__txt b { font-size: 20px; }
  .batt-geante { font-size: 38vw; margin-top: 12px; }
  .batt-geante__lib { display: block; margin: 6px 0 0; font-size: 16px; }
  .colline { height: calc(var(--jeu) * .3); }

  /* La coupure traverse l'écran : les hachures prennent toute la place entre la plaque et les deux sorties. */
  .b8 { display: flex; flex-direction: column; padding: calc(var(--haut) + 16px) var(--marge) var(--sol); }
  .b8::before {
    content: ""; order: 2; flex: 1 1 auto; min-height: 36px; max-height: 42svh; margin: 18px calc(-1 * var(--marge)) 0;
    background: repeating-linear-gradient(-45deg, var(--blanc) 0 6px, var(--lac) 6px 17px);
    transform: scaleX(0); transform-origin: 50% 50%;
  }
  .b8__nom { order: 0; }
  .plaque--ferme { order: 1; }
  .b8__sorties { order: 3; }
  .b8.coupe::before { transform: scaleX(1); transition: transform .5s var(--courbe); }
  .b8.rouvert::before { display: none; }
  .plaque--ferme { position: relative; left: auto; bottom: auto; width: auto; margin-top: 18px; padding: 22px 18px 18px; }
  .plaque--ferme .poteau-bois { display: none; }
  .plaque--ferme h2 { font-size: 26px; }
  .plaque--ferme p { font-size: 16px; }
  .b8__sorties { position: relative; left: auto; right: auto; bottom: auto; margin: 0 0 14px; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .b8__sorties .btn:last-child { position: static; }
  .b8__sorties .btn { width: 100%; min-height: 48px; margin: 0; padding: 0 12px; }
  .sol--coupe .hachures { left: 0; width: 100%; }

  .b9 { padding: calc(var(--haut) + 16px) var(--marge) var(--sol); }
  .b9__photo { inset: 0; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .b9__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .72)); }
  /* La balade des enfants est posée sur l'aplat du lac, jamais sur la pierre claire du portail. */
  .b9__enfants {
    position: relative; left: auto; bottom: auto; z-index: 3; max-width: none; margin: -16px calc(-1 * var(--marge)) 0;
    padding: 14px var(--marge) 16px; background: var(--lac); font-size: 16px;
  }
  .tunnel { width: 100%; }
  .tunnel__noir, .tunnel__arche { display: none; }
  .tunnel__lampe { top: 42%; width: 120px; height: 36px; margin: -18px 0 0 -60px; background-size: 84px 5px, 100% 100%; }
  .b9__bas { display: contents; }
  .b9__km { position: absolute; z-index: 4; left: var(--marge); bottom: calc(var(--sol) + 18px); }
  .b9__plus, .b9__feux { font-size: 18px; }
  .b9__un { font-size: 38vw; }
}
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 480px) {
  .b8 > * { flex-shrink: 0; }
  .b8::before { min-height: 20px; margin-top: 10px; }
  .plaque--ferme { margin-top: 8px !important; padding: 12px 16px !important; }
  .b8__sorties { margin-bottom: 10px; padding-top: 10px; }
}
@media (max-width: 1023.98px) and (max-height: 700px) {
  .b6 .phrase { font-size: 28px; }
  .voiture { display: none; }
  .batt-geante { font-size: min(38vw, 20svh); }
  .colline { height: calc(var(--jeu) * .22); }
  .plaque--ferme { margin-top: 12px; padding: 18px 16px 16px; }
  .plaque--ferme h2 { font-size: 24px; }
  .b9__un { font-size: min(38vw, 24svh); }
}