/* Bandeau utile, caisson (l'en-tête), menu en rideau, comptoir (la barre basse du guichet). */

/* Bandeau utile : émail blanc, dans le flux, il part au défilement. Tout le bandeau mène aux sorties. */
.bandeau { display: block; height: var(--bandeau-h); background: var(--blanc); color: var(--bleu); text-decoration: none; }
.bandeau .grille { height: 100%; display: flex; align-items: center; }
.bandeau__txt { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 15px/1.2 var(--meca); }
.bandeau__txt b { font-weight: 700; }
.bandeau:focus-visible { outline: 2px solid var(--bleu); outline-offset: -4px; }
@media (hover: hover) { .bandeau:hover .bandeau__txt { text-decoration: underline; text-underline-offset: 4px; } }

/* Le caisson : tôle bleu profond, pleine dans les deux états. */
.caisson {
  position: sticky; top: var(--demobar-offset, 0px); z-index: 50;
  height: var(--caisson-h); background: var(--caisson); color: var(--blanc);
}
.caisson::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--levre); transition: opacity .25s var(--ressort);
}
.caisson::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-bottom: 1px solid rgb(255 255 255 / .14); box-shadow: 0 8px 24px -16px rgb(0 0 0 / .6);
  opacity: 0; transition: opacity .25s var(--ressort);
}
.caisson[data-etat="defile"]::after { opacity: 0; }
.caisson[data-etat="defile"]::before { opacity: 1; }
.caisson .grille { height: 100%; display: flex; align-items: center; }
.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 96px; pointer-events: none; }

.logo { flex: none; display: flex; align-items: center; min-height: 44px; min-width: 44px; }
.logo svg { flex: none; }
.logo__court, .logo__r { display: none; }

.nav { margin-left: 32px; }
.nav ul { display: flex; gap: 28px; }
.nav a, .caisson__tel {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 17px/1 var(--meca); color: var(--blanc); text-decoration: none; white-space: nowrap;
}
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
@media (hover: hover) { .nav a:hover, .caisson__tel:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; } }
.caisson__tel { margin-left: auto; }
.plaque-vissee { margin-left: 24px; min-width: 200px; }

.bouton-menu {
  display: none; flex: none; align-items: center; gap: 10px; margin-left: auto;
  min-height: 44px; min-width: 44px; padding: 0 2px 0 8px; font: 600 17px/1 var(--meca); color: var(--blanc);
}
.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; }
/* Signe : deux lames de rideau, la seconde remonte quand le menu est ouvert. */
.bouton-menu__signe { position: relative; flex: none; width: 22px; height: 14px; }
.bouton-menu__signe::before, .bouton-menu__signe::after {
  content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 1px;
  background: var(--blanc); box-shadow: inset 0 -1.5px 0 rgb(14 39 102 / .45);
  transition: transform .3s var(--ressort);
}
.bouton-menu__signe::before { top: 0; }
.bouton-menu__signe::after { bottom: 0; }
.bouton-menu[aria-expanded="true"] .bouton-menu__signe::after { transform: translateY(-9px); }

@media (min-width: 1024px) and (max-width: 1199px) {
  .nav { margin-left: 24px; }
  .nav ul { gap: 20px; }
  .plaque-vissee { margin-left: 18px; min-width: 168px; }
}
@media (max-width: 1023px) {
  .nav, .caisson__tel, .plaque-vissee { display: none; }
  .bouton-menu { display: inline-flex; }
}
@media (max-width: 767px) {
  .logo__long { display: none; }
  .logo__court { display: block; }
}
@media (max-width: 379px) {
  .logo__court { display: none; }
  .logo__r { display: block; }
}

/* Menu : le rideau redescend sous le caisson, les liens sont peints sur ses lames. */
.menu {
  position: fixed; top: var(--demobar-offset, 0px); left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; padding-top: var(--caisson-h); overflow: hidden; background: var(--caisson);
  transition: display .45s allow-discrete;
}
.menu-ouvert .menu { display: block; }
html.menu-ouvert { overflow: hidden; }
.menu__rideau {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 28px;
  padding: 24px max(var(--marge), env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(var(--marge), env(safe-area-inset-left));
  background-color: var(--bleu);
  background-image: repeating-linear-gradient(180deg, transparent 0 21px, rgb(255 255 255 / .1) 21px 22px, var(--caisson) 22px 27px, rgb(14 39 102 / .6) 27px 28px);
  transform: translateY(-100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.menu-ouvert .menu__rideau { transform: none; }
@starting-style { .menu-ouvert .menu__rideau { transform: translateY(-100%); } }
.menu nav a {
  display: flex; align-items: center; min-height: 60px;
  font: 400 44px/1 var(--script); color: var(--blanc); text-decoration: none;
}
.menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; }
.menu__pied { display: grid; gap: 14px; justify-items: start; }
.menu__horaire {
  padding: 10px 16px; border-radius: 3px; background: var(--blanc); color: var(--bleu);
  font: 600 16px/1.2 var(--meca); box-shadow: inset 0 0 0 3px var(--blanc), inset 0 0 0 5px var(--bleu);
}
.menu__tel { display: inline-flex; align-items: center; min-height: 48px; font: 600 22px/1 var(--meca); color: var(--blanc); }
.menu__adresse { font-size: 17px; color: var(--pale); }
.menu .plaque-btn { width: 100%; min-height: 52px; }
@media (min-width: 768px) { .menu .plaque-btn { width: auto; } }

/* Le comptoir : bande fixe en bas, sur toutes les pages. */
.comptoir {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--comptoir-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--caisson); color: var(--blanc); box-shadow: 0 -1px 0 rgb(255 255 255 / .14);
}
.comptoir .grille { height: var(--comptoir-h); display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }
.comptoir__mot { flex: none; font: 400 28px/1 var(--script); padding-top: 4px; }
.comptoir__resume { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; color: var(--pale); }
.comptoir__resume b { color: var(--blanc); font-weight: 600; }
.comptoir__cadrans { flex: none; display: flex; gap: 8px; }
.mini { width: 44px; height: 44px; }
.mini .aiguille { transform-origin: 22px 22px; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.comptoir__total { flex: none; min-width: 4.2ch; text-align: right; font: 700 28px/1 var(--meca); }
.comptoir .plaque-btn { flex: none; }
.comptoir__court { display: none; }
@media (max-width: 767px) {
  .comptoir__mot, .comptoir__total, .comptoir__cadrans .mini--caution { display: none; }
  .comptoir__long { display: none; }
  .comptoir__court { display: inline; }
  .comptoir .plaque-btn { min-width: 128px; }
  .comptoir__resume { font-size: 16px; color: var(--blanc); }
}
@media (max-width: 379px) {
  .comptoir .grille { gap: 10px; }
  .comptoir .plaque-btn { min-width: 112px; padding: 0 24px; }
  .comptoir__resume { font-size: 15px; }
}
:root:has(.guichet select:focus) .comptoir { display: none; }
@media (max-height: 480px) and (orientation: landscape) {
  :root { --comptoir-h: 56px; }
  .bandeau { display: none; }
}
@media (min-width: 1024px) {
  .bandeau__txt { display: flex; justify-content: space-between; gap: 32px; width: 100%; }
  .bandeau__sep { display: none; }
}
.bandeau__sep { font-style: normal; }