/* Barre de navigation de l'accueil (arbitrage 6 de l'audit de conversion, précisé par Joris le
   2 octobre 2026) : une bulle de verre centrée en haut de l'écran, sans logo (le hero le porte),
   Fonctionnalités, Forfaits, Contact et le bouton de réservation. Elle se distingue de la bulle de
   Marko par son rôle (des liens, aucun champ), sa place (en haut) et sa forme (une barre de 56 px,
   coins au tiers de la hauteur, jamais un rond). Le verre suit le fond traversé : fumé sur le lagon et
   les démonstrations, clair sur le papier (data-surface, écrit par barre-nav.js). Elle se compacte en
   descendant (bouton et menu seuls ; masquée sur téléphone), revient en remontant, et s'efface sur le
   message épinglé, sur la scène du portable, sous le calque de Marko et sous le menu. */

.barre-nav {
  --barre-h: 56px;
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + clamp(10px, 1.8vh, 18px)); left: 50%; z-index: 45;
  width: max-content; max-width: calc(100% - 24px);
  transform: translateX(-50%);
  pointer-events: none;
}
.barre-nav-bulle {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  height: var(--barre-h); padding: 4px;
  border-radius: calc(var(--barre-h) / 3);
  pointer-events: auto;
  color: var(--papier);
  background: linear-gradient(160deg, oklch(31% .046 198 / .5), oklch(17% .03 206 / .62));
  -webkit-backdrop-filter: blur(20px) saturate(1.7) brightness(.9);
  backdrop-filter: blur(20px) saturate(1.7) brightness(.9);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .16), inset 0 -8px 16px -10px rgb(0 0 0 / .45), 0 18px 44px -16px rgb(4 12 12 / .7), 0 2px 8px -2px rgb(0 0 0 / .3);
  transition: opacity .35s ease-out, transform .56s cubic-bezier(.16, 1, .3, 1), color .35s, background .35s, box-shadow .35s;
}
/* Le liseré de 1 px, peint par un dégradé masqué (Verre-liquide Rule). */
.barre-nav-bulle::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  padding: 1px; border-radius: inherit;
  background: linear-gradient(150deg, rgb(255 255 255 / .55), rgb(255 255 255 / .08) 46%, rgb(255 255 255 / .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.barre-nav[data-surface="papier"] .barre-nav-bulle {
  color: var(--encre);
  background: linear-gradient(160deg, rgb(255 255 255 / .76), rgb(255 252 246 / .56));
  -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(1.06);
  backdrop-filter: blur(18px) saturate(1.9) brightness(1.06);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .95), inset 0 -6px 14px -10px rgb(28 25 21 / .18), 0 14px 34px -14px rgb(28 25 21 / .32), 0 2px 6px -2px rgb(28 25 21 / .12);
}
.barre-nav[data-surface="papier"] .barre-nav-bulle::before {
  background: linear-gradient(150deg, rgb(255 255 255 / .95), rgb(255 255 255 / .4) 50%, rgb(11 110 99 / .22));
}

/* Les liens et le menu se replient sans saut : une piste de grille qui passe de 1fr à 0fr. */
.barre-nav-liens, .barre-nav-plus {
  display: grid; grid-template-columns: 1fr;
  transition: grid-template-columns .45s cubic-bezier(.16, 1, .3, 1), opacity .25s ease-out;
}
.barre-nav-liens > div, .barre-nav-plus > div { display: flex; min-width: 0; overflow: hidden; }
.barre-nav-liens > div { padding-inline: 4px 6px; }

.barre-nav-lien, .barre-nav-menu {
  display: inline-flex; align-items: center; flex: none;
  min-height: 48px; padding: 0 14px;
  border: 0; border-radius: 16px;
  font: 400 .9375rem/1.2 var(--font-texte); white-space: nowrap;
  color: inherit; background: transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s;
}
.barre-nav-lien { opacity: .94; }
.barre-nav-menu { margin-left: 2px; font-weight: 700; }
@media (hover: hover) {
  .barre-nav-lien:hover, .barre-nav-menu:hover { background: rgb(243 238 229 / .1); opacity: 1; }
  .barre-nav[data-surface="papier"] :is(.barre-nav-lien, .barre-nav-menu):hover { background: rgb(28 25 21 / .06); }
}

/* Le bouton de réservation : le seul bouton plein de la barre, une barre de 48 px (coins de 16 px). */
.barre-nav-cta {
  display: inline-flex; align-items: center; flex: none;
  min-height: 48px; padding: 0 18px;
  border-radius: 16px;
  font: 700 .9375rem/1.2 var(--font-texte); white-space: nowrap;
  color: var(--encre); background: var(--turquoise);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35);
  transition: background-color .15s, color .15s;
}
.barre-nav[data-surface="papier"] .barre-nav-cta { color: var(--papier); background: var(--turquoise-profond); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22); }
@media (hover: hover) {
  .barre-nav-cta:hover { background: var(--papier); }
  .barre-nav[data-surface="papier"] .barre-nav-cta:hover { background: var(--encre); }
}
.barre-nav-cta:active, .barre-nav-lien:active, .barre-nav-menu:active { transform: translateY(1px); }
.barre-nav :focus-visible { outline: 2px solid var(--turquoise-pale); outline-offset: 3px; }
.barre-nav[data-surface="papier"] :focus-visible { outline-color: var(--turquoise-profond); }

/* États. Pleine : liens, bouton. Compacte : bouton et menu. Masquée : rien, ni focus ni clic. */
.barre-nav[data-etat="pleine"] .barre-nav-plus,
.barre-nav[data-etat="compacte"] .barre-nav-liens { grid-template-columns: 0fr; opacity: 0; }
.barre-nav[data-etat="masquee"] .barre-nav-bulle { opacity: 0; transform: translateY(-14px) scale(.96); pointer-events: none; }
.barre-nav[data-etat="masquee"] { visibility: hidden; transition: visibility 0s .35s; }
body.menu-open .barre-nav { visibility: hidden; }

/* Téléphone : une bulle réduite, le bouton et le menu. */
@media (max-width: 760px) {
  .barre-nav[data-etat] .barre-nav-liens { grid-template-columns: 0fr; opacity: 0; }
  .barre-nav[data-etat] .barre-nav-plus { grid-template-columns: 1fr; opacity: 1; }
}
@media (max-width: 400px) {
  .barre-nav-cta { padding-inline: 16px; }
  .barre-nav-menu { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .barre-nav-bulle, .barre-nav-liens, .barre-nav-plus { transition-duration: 1ms !important; }
  .barre-nav[data-etat="masquee"] .barre-nav-bulle { transform: none; }
}
/* Sans flou d'arrière-plan, le verre devient mat (section 4 de DESIGN.md). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barre-nav-bulle { background: oklch(22% .03 205 / .95); }
  .barre-nav[data-surface="papier"] .barre-nav-bulle { background: oklch(98.6% .007 80); }
}

/* Le menu de l'accueil reprend le panneau lagon des pages intérieures (pages.css n'est pas chargé ici). */
.home .mobile-menu { isolation: isolate; color: var(--papier); background: var(--joint); }
.home .mobile-menu > .fond-mgf { z-index: -1; }
.home .mobile-menu .brand img { height: 42px; width: auto; }
.home .mobile-menu nav a { color: var(--papier); }
.home .mobile-menu nav a:hover { text-decoration: underline; text-underline-offset: 8px; }
.home .mobile-menu .menu-close { --h: 48px; min-height: 48px; padding: 10px 16px; border-radius: 16px; color: var(--papier); background: rgb(243 238 229 / .06); border: 1px solid rgb(243 238 229 / .32); font: 700 1rem/1.2 var(--font-texte); cursor: pointer; }
.home .mobile-menu .menu-close:hover, .home .mobile-menu .menu-close:focus-visible { color: var(--encre); background: var(--papier); border-color: var(--papier); }
.home .mobile-menu :focus-visible { outline: 2px solid var(--turquoise-pale); outline-offset: 3px; }
body.menu-open .dock { visibility: hidden; }
@media (max-width: 480px) { .home .mobile-menu .brand img { height: 34px; } }