/* Menu du téléphone : cinq lignes à l'encre ancrées en bas, chacune avec son signal hissé (la table des signaux). */
.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(--entete-h) + 16px) 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(--encre);
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  transition: transform .34s var(--courbe), display .34s;
  transition-behavior: allow-discrete;
  --lisere: #fff;
}
.menu-ouvert .menu { display: flex; transform: none; }
@starting-style { .menu-ouvert .menu { transform: translateY(-100%); } }
.menu-ouvert { overflow: hidden; background: var(--encre); }
.menu-ouvert .entete { --fond-barre: var(--encre); --texte-barre: #fff; --lisere: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / .14); }
.menu-ouvert .entete .guidon { --fond: var(--vert); color: var(--encre); }

.menu__liens a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  font: 900 40px/1 var(--titre);
  letter-spacing: -.01em;
  text-decoration: none;
  color: #fff;
}
.menu__liens a[aria-current] { color: var(--vert); }
.signal { width: 22px; height: 53px; flex: none; color: #fff; }

.menu__pied { display: grid; gap: 6px; color: var(--sur-encre); }
.menu__tel {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
}
.menu :focus-visible { outline-color: #fff; }
@media (min-width: 600px) {
  .menu__liens a { font-size: 52px; height: 72px; }
}
@media (min-width: 1100px) { .menu { display: none !important; } }