/* En-tête : posé sur la scène il prend le céruléen de la maquette, après défilement il passe à l'encre. */
.barre {
  position: sticky; top: 0; z-index: 50; height: var(--barre);
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px;
  padding: 0 max(var(--marge), env(safe-area-inset-right)) 0 max(var(--marge), env(safe-area-inset-left));
  background: var(--ceruleen); color: var(--encre);
  transition: background-color 0.25s, color 0.25s;
}
.barre.defile { background: var(--encre); color: var(--blanc); }
.barre-logo { display: flex; align-items: center; min-height: 44px; color: inherit; flex: none; }
.barre-logo .logo { width: 185px; height: 52px; }
.barre-nav { display: flex; justify-content: center; gap: clamp(18px, 2.4vw, 40px); }
.barre-nav a {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 560; font-size: 16px;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(100% - 9px); background-size: 0 2px;
  transition: background-size 0.2s;
}
.barre-nav a:hover, .barre-nav a[aria-current="true"] { background-size: 100% 2px; }
.barre-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.barre-tel svg { width: 18px; height: 18px; }
.barre-reserver { min-height: 46px; padding: 0 26px; background: var(--encre); color: var(--blanc); }
.barre-reserver:hover { background: #22323b; }
.barre.defile .barre-reserver { background: var(--ceruleen); color: var(--encre); }
.barre.defile .barre-reserver:hover { background: var(--ceruleen-appui); }
.barre :focus-visible { outline-color: var(--encre); }
.barre.defile :focus-visible { outline-color: var(--ceruleen); }

.barre-menu {
  display: none; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 4px 0 8px;
  background: none; border: 0; font-weight: 600; font-size: 15px;
}
.barre-menu svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.barre-menu path { transition: transform 0.25s; transform-origin: 12px 12px; }
.barre-menu-mot { display: grid; }
.barre-menu-mot > span { grid-area: 1 / 1; transition: opacity 0.2s; }
.mot-fermer { opacity: 0; }
.barre-menu[aria-expanded="true"] .mot-ouvrir { opacity: 0; }
.barre-menu[aria-expanded="true"] .mot-fermer { opacity: 1; }
.barre-menu[aria-expanded="true"] .m1 { transform: translateY(4px) rotate(45deg); }
.barre-menu[aria-expanded="true"] .m2 { transform: translate(-1px, -4px) rotate(-45deg) scaleX(1.5); }

@media (max-width: 1180px) { .barre-tel span { display: none; } .barre { gap: 20px; } }
@media (max-width: 1023px) {
  .barre { grid-template-columns: 1fr auto auto; gap: 8px; }
  .barre-nav, .barre-tel { display: none; }
  .barre-menu { display: inline-flex; }
  .barre-logo .logo { width: 150px; height: 42px; }
  .barre-reserver { min-height: 44px; padding: 0 16px; font-size: 15px; }
}
@media (max-width: 359px) { .barre-logo .logo { width: 128px; } .barre-menu-mot { display: none; } }

/* Menu du téléphone : plein écran à l'encre */
.menu {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--demobar-offset, 0px) + var(--barre) + 28px) var(--marge) calc(28px + env(safe-area-inset-bottom));
  background: var(--encre); color: var(--blanc); display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font-family: var(--titre); font-size: clamp(44px, 12vw, 72px); line-height: 1; padding: 8px 0; min-height: 48px; text-decoration: none; }
.menu nav a:hover { color: var(--ceruleen); }
.menu-pied { display: grid; gap: 8px; color: var(--gris-sombre); }
.menu-tel { display: inline-flex; align-items: center; min-height: 48px; font-size: 26px; font-weight: 600; color: var(--blanc); text-decoration: none; }
.menu :focus-visible { outline-color: var(--ceruleen); }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) nav a { animation: menu-entre 0.32s both; }
  .menu nav a:nth-child(2) { animation-delay: 0.03s; } .menu nav a:nth-child(3) { animation-delay: 0.06s; }
  .menu nav a:nth-child(4) { animation-delay: 0.09s; } .menu nav a:nth-child(5) { animation-delay: 0.12s; }
}
@keyframes menu-entre { from { opacity: 0; transform: translateY(14px); } }