/* Cycles Duingt — en-tête (modèle 13 : barre de chapitres et progression) et menu « plan de ligne ». */
.entete {
  position: fixed; top: var(--demobar-offset, 0px); left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; height: var(--entete-h);
  padding-inline: max(var(--marge), env(safe-area-inset-left)) max(var(--marge), env(safe-area-inset-right));
  color: var(--blanc);
}
/* Le verre est sur un calque : un flou sur l'en-tête lui-même piégerait le menu, qui est son frère. */
.entete::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--profond); border-bottom: 1px solid rgb(255 255 255 / .16);
  opacity: 0; transition: opacity .25s var(--courbe);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .entete::before {
    background: rgb(7 94 92 / .9);
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  }
}
.entete[data-etat="defile"]::before { opacity: 1; }
.menu-ouvert .entete::before { opacity: 0; }

.logo { flex: none; display: flex; align-items: center; min-height: 44px; min-width: 44px; color: inherit; text-decoration: none; }
.logo svg { height: 26px; width: auto; }

.borne-courante { flex: none; margin-left: 24px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.borne-courante [data-commune]::after { content: " · "; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 28px; }
.nav a {
  position: relative; display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
/* Borne courante : un point blanc devant le mot, comme un arrêt sur la ligne. */
.nav a[aria-current]::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--blanc); border-radius: 50%;
}
@media (hover: hover) { .nav a:hover, .tel:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } }

.tel { flex: none; display: flex; align-items: center; min-height: 44px; margin-left: 32px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.entete .borne-action { margin-left: 24px; }

/* Progression en kilomètres, filet de 2 px au bas de la barre. */
.progression {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blanc);
  transform-origin: 0 50%; transform: scaleX(0);
}

.bouton-menu { display: none; }

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .borne-courante [data-commune] { display: none; }
  .nav ul { gap: 20px; }
  .tel { margin-left: 24px; }
  .entete .borne-action { margin-left: 20px; min-width: 104px; padding-inline: 14px; }
}

@media (max-width: 1023.98px) {
  .logo svg { height: 24px; max-width: 45vw; }
  .borne-courante { margin-left: 14px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
  .nav, .tel, .entete .borne-action { display: none; }
  .bouton-menu {
    flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; margin-left: auto; margin-right: -6px;
    padding: 0 6px 0 10px; border: 0; background: none; color: inherit; font-size: 15px; font-weight: 700;
  }
}
@media (max-width: 599.98px) {
  .borne-courante [data-commune] { display: none; }
}
/* Sous 380 px, le mot-symbole reste entier, un peu plus petit : jamais le seul signe du lac. */
@media (max-width: 379.98px) {
  .logo svg { height: 21px; }
  .borne-courante { margin-left: 12px; }
}

/* Signe du bouton : un point rouge cerclé de blanc sur un trait blanc (le rouge ne touche jamais le turquoise). */
.bouton-menu__signe { position: relative; flex: none; width: 26px; height: 14px; }
.bouton-menu__signe::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--blanc); }
.bouton-menu__signe::after {
  content: ""; position: absolute; left: 8px; top: 2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rouge); box-shadow: 0 0 0 2px var(--blanc); transition: transform .25s var(--courbe);
}
[aria-expanded="true"] .bouton-menu__signe::after { transform: translateX(8px); }
.bouton-menu__mot { display: inline-grid; }
.bouton-menu__mot > * { grid-area: 1 / 1; }
[aria-expanded="false"] .bouton-menu__mot > :last-child, [aria-expanded="true"] .bouton-menu__mot > :first-child { visibility: hidden; }

/* Le menu : plan de ligne, plein écran, ancré en bas (pouce). */
.menu {
  position: fixed; top: var(--demobar-offset, 0px); left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; flex-direction: column; justify-content: flex-end; gap: 22px;
  padding: calc(var(--entete-h) + 12px) max(var(--marge), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(var(--marge), env(safe-area-inset-left));
  background: var(--profond); color: var(--blanc); overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1), display .45s; transition-behavior: allow-discrete;
}
.menu-ouvert .menu { display: flex; transform: none; }
@starting-style { .menu-ouvert .menu { transform: translateY(-100%); } }
.menu-ouvert, .menu-ouvert body { overflow: hidden; }

.ligne { position: relative; }
.ligne::before {
  content: ""; position: absolute; left: 11px; top: 28px; bottom: 28px; width: 4px; background: var(--blanc);
  transform-origin: 50% 0; transition: transform .6s var(--courbe) .1s;
}
@starting-style { .menu-ouvert .ligne::before { transform: scaleY(0); } }
.ligne li { position: relative; }
.ligne a {
  position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; column-gap: 16px;
  min-height: 56px; font-size: clamp(26px, 7.6vw, 30px); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; text-decoration: none;
}
.ligne a::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--profond); box-shadow: inset 0 0 0 4px var(--blanc);
}
.ligne a[aria-current]::before { background: var(--rouge); box-shadow: inset 0 0 0 4px var(--blanc), inset 0 0 0 7px var(--blanc); }
.ligne__km { font-size: 16px; font-weight: 500; letter-spacing: 0; }
/* Talloires : la ligne est coupée jusqu'au tunnel. */
.ligne li.coupe::after {
  content: ""; position: absolute; left: 7px; top: 44px; width: 12px; height: 24px; z-index: 1;
  background: repeating-linear-gradient(-45deg, var(--blanc) 0 3px, var(--profond) 3px 7px);
}
.ligne .coupe .ligne__km::after { content: " · coupé"; }

.menu__pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-left: 42px; }
.menu__pratique { display: grid; gap: 2px; min-width: 0; font-size: 16px; }
.menu__pratique a { display: inline-flex; align-items: center; min-height: 48px; font-size: 22px; font-weight: 700; text-decoration: none; }
/* Menu ouvert, « Réserver » reste sous le pouce : la même borne que dans la barre. */
.menu .borne-action { height: 48px; margin-bottom: 4px; font-size: 16px; }
.menu-ouvert .progression { opacity: 0; }

@media (min-width: 1024px) { .menu { display: none !important; } }
@media (max-height: 560px) { .ligne a { min-height: 48px; font-size: 24px; } }