/* ==========================================================================
   En-tête mobile (≤ 1180px) — 2026-10-29, demande client
   Chargé par les partials header*.html eux-mêmes (une seule source, pas de
   ?v= à reporter dans chaque page) : bump le ?v= dans les 6 partials.
   - Pilule « espace client » à côté du téléphone : le bouton « Ma réservation »
     quitte la barre sur mobile (responsive.css), le client doit le voir
     sans ouvrir le menu.
   - Sélecteur de langue réduit au drapeau pour gagner la place de l'icône.
   ========================================================================== */
.nav__espace { display: none; }

@media (max-width: 1180px) {
  .nav__espace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 10px;
    border: .5px solid var(--c-border-lang);
    border-radius: var(--r-pill);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 4px 6px rgba(0, 0, 0, .07);
    transition: border-color var(--dur-fast) var(--ease);
  }
  .nav__espace:hover { border-color: var(--c-primary); }
  .nav__espace[aria-current="page"] { border-color: var(--c-primary); }
  .nav__espace img { width: 15px; height: 15px; flex: none; }

  .lang-switch__code { display: none; }
  .lang-switch { padding: 0 10px; gap: 6px; }
  .nav__end { gap: 8px; }
}

/* ≤ 360px : avec la pilule en plus, la barre débordait de quelques pixels à
   320px et le drapeau s'écrasait. Pilules rondes de 34px, écarts de 6px. */
@media (max-width: 360px) {
  .nav__inner { gap: 8px; }
  .nav__end { gap: 6px; }
  .nav__tel, .nav__espace { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .lang-switch { height: 34px; padding: 0 8px; gap: 4px; }
  .lang-switch__flag { flex: none; }
  .lang-switch__caret { display: none; }   /* il manquait 5px à 320px */
  .lang-switch { padding: 0 9px; }
  .nav__burger { width: 40px; height: 40px; }
}