/* En-tête : barre pleine (le média du héros peut être animé dessous : aucun flou), menu plein écran typographique, bande basse du téléphone. */
.entete {
  position: fixed; z-index: 50; top: var(--demobar-offset, 0px); left: 0; right: 0; height: var(--entete-h);
  padding-inline: max(var(--marge), env(safe-area-inset-left)) max(var(--marge), env(safe-area-inset-right));
  background: var(--nuit); transition: background-color .3s var(--doux);
}
.entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bleu);
  opacity: 0; transition: opacity .25s;
}
.entete[data-etat="defile"]::after { opacity: 1; }
/* Ossature (b) : logo | liens centrés sur la grille | téléphone et action. Au téléphone : logo | action | menu.
   Le HTML suit l'ordre de l'écran : deux boutons « Menu », celui du centre (ordinateur) et celui du bout (téléphone). */
.entete__dans {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "logo droite menu"; align-items: center; gap: 8px;
  height: 100%; max-width: var(--grille); margin-inline: auto;
}
.logo { grid-area: logo; justify-self: start; }
.entete__case { grid-area: case; display: none; }
.entete__droite { grid-area: droite; }
.bouton-menu--bout { grid-area: menu; }

.logo { --logo-h: 22px; display: flex; align-items: center; flex: none; min-height: 44px; min-width: 44px; color: var(--ecume); text-decoration: none; }
.logo svg { flex: none; width: auto; overflow: visible; fill: currentColor; }
.logo__signe { height: var(--logo-h); }
.logo__mot { height: calc(var(--logo-h) * .74); margin-left: calc(var(--logo-h) * .25); }
@media (max-width: 379px) { .logo__mot { display: none; } }

.entete__droite { display: flex; align-items: center; flex: none; gap: 8px; }
.entete__case > * { grid-area: 1 / 1; }
.entete__liens { display: none; }
.entete__tel { display: none; }
/* L'action : le bloc écume au libellé en sérif, seul bouton en sérif de la collection. */
.entete__resa { width: 104px; padding: 0; font: 400 22px/1 var(--titre); }

.bouton-menu { display: flex; align-items: center; gap: 10px; flex: none; min-height: 44px; min-width: 44px; padding-left: 8px; font: 400 16px/1 var(--texte); }
.bouton-menu__traits { position: relative; flex: none; width: 18px; height: 8px; }
.bouton-menu__traits::before, .bouton-menu__traits::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: transform .3s var(--doux);
}
.bouton-menu__traits::before { top: 0; }
.bouton-menu__traits::after { bottom: 0; width: 9px; }
.bouton-menu[aria-expanded="true"] .bouton-menu__traits::after { width: 18px; }
.bouton-menu[aria-expanded="true"] .bouton-menu__traits::before { transform: translateY(3.25px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .bouton-menu__traits::after { transform: translateY(-3.25px) rotate(-45deg); }
/* « Menu » et « Fermer » superposés : le bouton garde sa largeur, rien ne se décale ; au bout de la barre, le mot tombe sur le bord de la grille. */
.bouton-menu__mot { display: inline-grid; justify-items: end; }
.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; }

@media (min-width: 768px) {
  .logo { --logo-h: 26px; }
  .entete__dans { gap: 24px; }
  .entete__resa { width: 140px; min-height: 48px; font-size: 24px; }
}
@media (min-width: 1024px) {
  .entete__dans { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "logo case droite"; gap: 32px; }
  .entete__droite { display: flex; align-items: center; justify-self: end; }
  .entete__case { display: grid; align-items: center; justify-items: center; }
  .bouton-menu--bout { display: none; }
  .bouton-menu--centre .bouton-menu__mot { justify-items: start; }
  .entete__tel { display: flex; align-items: center; min-height: 44px; margin-right: 24px; font-size: 15.5px; font-variant-numeric: tabular-nums; text-decoration: none; }
  .entete__liens { display: block; }
  .entete__liens ul { display: flex; gap: 28px; }
  .entete__liens a { display: flex; align-items: center; min-height: 44px; font-size: 15.5px; text-decoration: none; }
  .entete__liens a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
  .entete__liens, .bouton-menu { transition: opacity .25s, visibility 0s .25s; }
  /* Posé : trois liens. Défilé : ils cèdent la case à « Menu », sauf tant que l'un d'eux garde le focus. */
  .entete[data-etat="pose"] .bouton-menu--centre { display: none; }
  @starting-style { .entete[data-etat="defile"] .bouton-menu--centre { opacity: 0; } }
  .entete[data-etat="defile"] .entete__liens:not(:focus-within),
  .entete[data-etat="defile"] .entete__liens:focus-within + .bouton-menu { opacity: 0; visibility: hidden; }
  .entete[data-etat="defile"] .bouton-menu--centre, .entete[data-etat="pose"] .entete__liens { transition-delay: 0s; }
  .menu-ouvert .entete .bouton-menu--centre { display: flex; opacity: 1; visibility: visible; }
  .menu-ouvert .entete .entete__liens { opacity: 0; visibility: hidden; }
}
@media (hover: hover) {
  .entete__liens a:hover, .entete__tel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
}

/* ---------- menu : frère de l'en-tête, qui reste au-dessus avec « Réserver » ---------- */
.menu {
  container-type: inline-size; position: fixed; z-index: 40; top: var(--demobar-offset, 0px); left: 0; right: 0; bottom: 0;
  display: none; grid-template-columns: minmax(0, 1fr); background: var(--bleu); color: var(--ecume);
  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: grid; transform: none; }
@starting-style { .menu-ouvert .menu { transform: translateY(-100%); } }
.menu-ouvert { overflow: hidden; }
.menu-ouvert .entete { background: var(--bleu); }
.menu-ouvert .entete::after { opacity: 0; }
.menu__texte {
  display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 4svh, 40px); min-width: 0;
  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));
}
.menu nav a {
  display: flex; align-items: center; min-height: 64px; font: 300 clamp(44px, 13vw, 60px)/1 var(--titre);
  text-decoration: none; text-underline-offset: .12em; text-decoration-thickness: 1px;
}
.menu nav a[aria-current] { text-decoration: underline; }
.menu__pratique { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid rgb(230 238 242 / .22); font-size: 16px; }
.menu__pratique a { display: flex; align-items: center; min-height: 48px; font-size: 24px; font-variant-numeric: lining-nums; text-decoration: none; }
.menu__pratique span { color: var(--reflet); }
.menu__image { display: none; }
@media (min-width: 768px) {
  .menu nav a { font-size: clamp(60px, 9svh, 88px); min-height: clamp(64px, 11svh, 104px); }
}
@media (min-width: 1024px) {
  .menu { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
  .menu-ouvert .menu { display: grid; }
  /* Le bord gauche des liens tombe sur celui du logo, qui suit la grille de la page. */
  .menu__texte { padding-right: 32px; padding-bottom: 40px; padding-left: max(var(--marge), env(safe-area-inset-left), calc((100cqw - var(--grille)) / 2)); }
  .menu__image { display: block; position: relative; margin: var(--entete-h) 0 0; overflow: hidden; }
  .menu__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--heros-x-tel) var(--heros-y-tel); }
}
@media (hover: hover) { .menu nav a:hover { text-decoration: underline; } }
@media (max-height: 480px) and (orientation: landscape) {
  .menu__texte { justify-content: flex-start; gap: 12px; }
  .menu nav ul { display: grid; grid-template-columns: 1fr 1fr; }
  .menu nav a { font-size: 34px; min-height: 48px; }
}

/* ---------- bande basse (téléphone) : une seule cible, le prix du plan en cours ---------- */
.bande {
  position: fixed; z-index: 49; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
  height: calc(var(--bande-h) + env(safe-area-inset-bottom));
  padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  background: var(--nuit); border-top: 1px solid var(--bleu); color: var(--ecume); text-decoration: none;
  transform: translateY(100%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
}
.bande.est-visible { transform: none; visibility: visible; transition-delay: 0s; }
.bande__nom { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.bande__prix { flex: none; font: 400 24px/1 var(--titre); font-variant-numeric: lining-nums; }
.bande__action { flex: none; font-size: 16px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.menu-ouvert .bande, :root:has(input:focus, select:focus, textarea:focus) .bande, html:has(dialog[open]) .bande { display: none; }
@media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) { .bande { display: none; } }