/* Le cadre fixe : barre (modèle 7, se cache et revient), menu plein écran, jauge d'altitude, bande de l'altimètre. */

/* ---------- Barre ---------- */
.barre {
  position: fixed; z-index: 50; top: var(--demobar-offset, 0px); left: 0; right: 0;
  height: var(--barre-h); background: var(--sapin); color: var(--neige);
  padding-right: var(--rail-w);
  transition: transform .35s var(--courbe), box-shadow .25s;
}
.barre.est-defilee { box-shadow: inset 0 -1px 0 var(--filet), 0 8px 24px -16px #000; }
.barre.est-cache { transform: translateY(calc(-100% - 40px)); }
.barre__in {
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: min(100% - 2 * var(--marge), var(--max)); margin-inline: auto;
  padding-left: env(safe-area-inset-left);
}
.logo { flex: none; display: flex; align-items: center; min-height: 44px; color: var(--neige); text-decoration: none; }
.logo svg { height: 24px; width: auto; }
.barre__nav, .barre__droite { display: none; }

.bouton-menu {
  flex: none; display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 0 2px 0 8px;
  background: none; border: 0; color: var(--neige); font: 600 16px/1 var(--texte);
}
.bouton-menu svg { flex: none; width: 22px; height: 22px; color: var(--jaune); transition: transform .3s var(--courbe); }
.bouton-menu__mot { display: inline-grid; }
.bouton-menu__mot > * { grid-area: 1 / 1; }
.bouton-menu[aria-expanded="false"] .bouton-menu__mot > :last-child,
.bouton-menu[aria-expanded="true"] .bouton-menu__mot > :first-child { visibility: hidden; }
.bouton-menu[aria-expanded="true"] svg { transform: scaleX(-1); }

@media (min-width: 768px) { .logo svg { height: 28px; } }
@media (min-width: 1100px) {
  .barre__in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .barre__nav { display: block; }
  .barre__nav ul { display: flex; gap: 28px; }
  .barre__nav a {
    display: flex; align-items: center; min-height: 44px; font: 600 15.5px/1 var(--texte);
    text-decoration: none; color: var(--neige); position: relative;
  }
  .barre__nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--jaune);
    transform: scaleX(0); transform-origin: left; transition: transform .25s var(--courbe);
  }
  .barre__nav a[aria-current]::after { transform: none; }
  @media (hover: hover) { .barre__nav a:hover::after { transform: none; } }
  .barre__droite { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
  .barre__tel { display: flex; align-items: center; min-height: 44px; font: 600 15.5px/1 var(--texte); text-decoration: none; white-space: nowrap; }
  .barre__droite .panneau { width: 132px; }
  .bouton-menu { display: none; }
}

/* ---------- Menu plein écran ---------- */
.menu {
  position: fixed; z-index: 40; top: var(--demobar-offset, 0px); left: 0; right: 0; bottom: 0;
  display: none; flex-direction: column; justify-content: flex-end; gap: 28px;
  padding: calc(var(--barre-h) + 24px) max(var(--marge), env(safe-area-inset-right)) calc(var(--bande-tot) + 28px) max(var(--marge), env(safe-area-inset-left));
  background: var(--panneau); color: var(--neige); border-top: 1px solid var(--filet);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-100%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), display .45s allow-discrete;
}
.menu-ouvert .menu { display: flex; transform: none; }
@starting-style { .menu-ouvert .menu { transform: translateY(-100%); } }
.menu-ouvert { overflow: hidden; }
.menu-ouvert .barre { transform: none; box-shadow: inset 0 -1px 0 var(--filet); }
.menu ul { display: grid; }
.menu nav a {
  display: flex; align-items: center; min-height: 56px; text-decoration: none;
  font-family: var(--titre); font-size: clamp(40px, 11vw, 56px); line-height: 1; color: var(--neige);
}
.menu nav li:nth-child(1) a { font-weight: 700; }
.menu nav li:nth-child(2) a { font-weight: 300; }
.menu nav li:nth-child(3) a { font-weight: 500; }
.menu nav li:nth-child(4) a { font-weight: 200; }
.menu nav a[aria-current] { color: var(--jaune); }
.menu__pratique { display: grid; gap: 4px; padding-top: 20px; border-top: 1px solid var(--filet-clair); color: var(--lichen); }
.menu__pratique a { display: inline-flex; align-items: center; min-height: 48px; font: 600 22px/1 var(--texte); color: var(--neige); text-decoration: none; }
@media (min-width: 1100px) { .menu { display: none !important; } }

/* ---------- Jauge d'altitude (rail fixe à droite) ---------- */
.jauge {
  position: fixed; z-index: 45; top: var(--demobar-offset, 0px); right: 0; bottom: var(--bande-tot);
  width: calc(var(--rail-w) + env(safe-area-inset-right)); padding-right: env(safe-area-inset-right);
  background: var(--sapin); border-left: 1px solid var(--filet);
}
.jauge__echelle { position: absolute; left: 0; right: env(safe-area-inset-right); top: calc(var(--barre-h) + 18px); bottom: 18px; }
.jauge__trait { position: absolute; left: 0; width: 8px; height: 1px; background: rgb(157 176 169 / .45); }
.jauge__trait.fort { width: 14px; background: var(--lichen); }
.jauge__rep { position: absolute; left: 0; right: 0; height: 0; }
.jauge__rep::before { content: ""; position: absolute; left: 0; width: 14px; height: 2px; top: -1px; background: var(--lichen); }
.jauge__rep.est-ici::before { background: var(--jaune); width: 18px; }
.jauge__rep span {
  display: none; position: absolute; left: 22px; top: -9px;
  font: 600 15px/18px var(--titre); color: var(--lichen); white-space: nowrap;
}
.jauge__rep.est-ici span { color: var(--jaune); }
.jauge__index {
  position: absolute; left: -1px; right: 0; top: 0; height: 0;
  transform: translateY(var(--y, 100%)); will-change: transform;
}
.jauge__index::before { content: ""; position: absolute; left: 0; width: 18px; top: -1.5px; height: 3px; background: var(--jaune); }
.jauge__index::after {
  content: ""; position: absolute; left: -9px; top: -7px; width: 0; height: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 9px solid var(--jaune);
}
@media (min-width: 768px) { .jauge__rep span { display: block; } }

/* ---------- Bande de l'altimètre ---------- */
.bande {
  position: fixed; z-index: 48; left: 0; right: 0; bottom: 0;
  height: var(--bande-tot); padding: 0 max(var(--marge), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--marge), env(safe-area-inset-left));
  display: flex; align-items: center; gap: 14px;
  background: var(--sapin); border-top: 1px solid var(--filet);
}
.bande__alt {
  flex: none; font: 600 26px/1 var(--titre); color: var(--jaune); white-space: nowrap;
}
.bande__alt small { font-size: .62em; font-weight: 400; margin-left: .18em; color: var(--lichen); }
.bande__lecture { flex: 1 1 auto; min-width: 0; font: 500 14px/1.25 var(--texte); color: var(--neige); }
.bande__moto { display: none; }
.bande .panneau { margin-left: auto; }
@media (min-width: 768px) {
  .bande { gap: 28px; }
  .bande__alt { font-size: 44px; min-width: 4.3em; }
  .bande__lecture { font-size: 16px; padding-left: 24px; border-left: 1px solid var(--filet-clair); }
}
@media (min-width: 1024px) {
  .bande__moto { display: flex; flex-direction: column; flex: none; text-align: right; font: 500 14px/1.3 var(--texte); color: var(--lichen); }
  .bande__moto b { font: 600 22px/1.1 var(--titre); color: var(--neige); }
  .bande .panneau { margin-left: 0; width: 132px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  :root { --bande-h: 52px; --barre-h: 52px; }
  .bande__alt { font-size: 24px; }
}