/* Ligne 125 — barre flottante détachée (modèle 3), menu typographique, barre basse du téléphone. */
.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

.entete {
  position: fixed; z-index: 50;
  top: calc(var(--demobar-offset, 0px) + 16px);
  /* Le logo tombe sur la marge de la page, l'action sur la marge opposée */
  left: max(16px, calc(var(--marge) - 20px), env(safe-area-inset-left)); right: max(16px, calc(var(--marge) - 8px), env(safe-area-inset-right));
  height: 64px;
  display: flex; align-items: center;
  padding: 0 8px 0 20px; border-radius: 12px; color: var(--blanc);
}
.entete::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--repli); border: 1px solid rgb(255 255 255 / .12);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .55);
  opacity: 0; transition: opacity .25s var(--courbe);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .entete::before {
    background: rgb(13 14 15 / .88);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
  }
}
.entete[data-etat="defile"]::before { opacity: 1; }
.menu-ouvert .entete::before { opacity: 0; }

.logo { flex: none; display: flex; align-items: center; min-height: 44px; color: var(--blanc); }
.logo svg { height: 26px; width: auto; }
.resume {
  flex: none; display: none; align-items: center; min-height: 44px; margin-left: 28px;
  font-size: 15px; font-weight: 500; font-stretch: 110%; text-decoration: none; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--courbe), visibility 0s .25s;
}
.entete[data-phrase="sortie"] .resume { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 24px; }
.nav a, .tel {
  display: flex; align-items: center; min-height: 44px;
  font-size: 15.5px; font-weight: 500; font-stretch: 110%; text-decoration: none; white-space: nowrap;
  text-underline-offset: 7px; text-decoration-thickness: 2px;
}
.nav a[aria-current] { text-decoration-line: underline; }
@media (hover: hover) { .nav a:hover, .tel:hover { text-decoration-line: underline; } }
.tel { flex: none; margin-left: 32px; font-variant-numeric: tabular-nums; }
.action {
  flex: none; display: inline-grid; margin-left: 20px; height: 48px; padding: 0 18px;
  border: 0; border-radius: 8px; background: var(--blanc); color: var(--asphalte);
  font-size: 16px; font-weight: 700; font-stretch: 110%; white-space: nowrap;
}
.action > span { grid-area: 1 / 1; display: block; line-height: 48px; text-align: center; }
.action > span:last-child, .entete[data-phrase="sortie"] .action > span:first-child { visibility: hidden; }
.entete[data-phrase="sortie"] .action > span:last-child { visibility: visible; }
.action:focus-visible { outline-color: var(--blanc); outline-offset: 3px; }
.bouton-menu { display: none; }
@media (min-width: 1280px) { .resume { display: flex; } }

/* Téléphone et tablette : logo complet, bouton « Menu », action en bas */
@media (max-width: 1023px) {
  .entete {
    top: calc(var(--demobar-offset, 0px) + 10px);
    left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
    height: 56px; padding: 0 6px 0 14px;
  }
  .logo svg { height: 22px; }
  .nav, .tel, .action, .resume { display: none; }
  .bouton-menu {
    flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto;
    min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--blanc);
    font-size: 16px; font-weight: 600; font-stretch: 110%;
  }
  .arret { flex: none; width: 30px; height: 14px; fill: currentColor; }
  .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; }
}

/* Menu plein écran : quatre mots de largeurs différentes, ancrés en bas */
.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: 96px 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(--repli); 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, .chapitre-ouvert { overflow: hidden; }
.menu__liens a {
  display: flex; align-items: center; min-height: 60px;
  font-size: clamp(40px, 13vw, 56px); font-weight: 700; line-height: 1;
  font-stretch: calc(var(--w) * 1%); text-decoration: none;
}
.menu__liens a[aria-current] { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
.menu__pied { display: grid; gap: 8px; justify-items: start; font-size: 16px; color: var(--gris); }
.menu__tel { display: inline-flex; align-items: center; min-height: 48px; font-size: 22px; font-weight: 700; color: var(--blanc); text-decoration: none; }
.menu__resa { margin-top: 8px; width: 100%; }
@media (min-width: 1024px) { .menu { display: none !important; } }

/* Barre basse détachée, blanche : l'action à portée de pouce */
.resa { display: none; }
@media (max-width: 1023px) {
  body { padding-bottom: 80px; }
  .resa {
    position: fixed; z-index: 49;
    left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 56px; padding: 0 18px; border: 0; border-radius: 10px;
    background: var(--blanc); color: var(--asphalte); font-size: 16px; font-weight: 700; font-stretch: 105%;
    box-shadow: 0 12px 30px -10px rgb(0 0 0 / .7);
    transform: translateY(calc(100% + 24px)); visibility: hidden;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
  }
  .resa > span:first-child { font-weight: 500; }
  .resa.est-visible { transform: none; visibility: visible; transition-delay: 0s; }
  .menu-ouvert .resa, .chapitre-ouvert .resa { visibility: hidden; }
  :root:has(select:focus) .resa { display: none; }
}
@media (max-height: 480px) and (orientation: landscape) and (max-width: 1023px) {
  .entete { height: 52px; }
  .resa { height: 48px; }
}