/* ═══════════════════════════════════════════════════════════
   BordAtlantique — Menu « Liquid Glass » (partagé, toutes pages)
   Version BA4 · barre & boutons « liquid glass » (très transparents, lisibles)
   Ne dépend que des variables de main.css (--ink,--gold,--azure…).
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════ NAVIGATION — LIQUID GLASS ═══════════════ */
.site-nav.ba-nav{
  display:block;
  height:auto;
  top: clamp(.5rem,1.4vw,1rem);
  padding: 0 clamp(.7rem,3vw,2rem);
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}
.ba-nav-shell{
  position:relative;
  display:flex;
  align-items:center;
  gap: clamp(.35rem,1vw,1.1rem);
  max-width:1360px;
  margin:0 auto;
  padding: .35rem .5rem .35rem .85rem;
  border-radius:50px;
  background: rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(20px) saturate(195%) brightness(1.32);
  backdrop-filter: blur(20px) saturate(195%) brightness(1.32);
  border:1px solid rgba(255,255,255,.42);
  box-shadow: 0 12px 34px rgba(13,27,42,.16);
  transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
}
/* (reflet spéculaire retiré — l'effet liquid-glass seul suffit) */
/* léger halo sur les intitulés → lisibles même barre très transparente */
.ba-nav .nav-link{ text-shadow: 0 1px 2px rgba(255,255,255,.5); }
.site-nav.ba-nav.scrolled .ba-nav-shell{
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.12);
  backdrop-filter: blur(24px) saturate(190%) brightness(1.12);
  box-shadow: 0 8px 24px rgba(13,27,42,.16);
}

/* Logo à gauche */
.ba-nav .nav-logo{ flex:0 0 auto; margin-right:.15rem; }
.ba-nav .nav-logo-inner,
.ba-nav .nav-logo-front,
.ba-nav .nav-logo-back{ width:54px !important; height:54px !important; }

/* Menu */
.ba-nav-menu{
  display:flex; align-items:center;
  gap: clamp(.35rem,1vw,1.25rem);
  margin: 0 auto 0 .35rem;
  flex-wrap:nowrap;
}
.ba-nav .nav-link{
  color: var(--ink);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.045em;
  white-space:nowrap;
  padding:.4rem 0;
}
.ba-nav .nav-link::after{ bottom:.1rem; height:2px; background:var(--gold); border-radius:2px; }
.ba-nav .nav-link:hover{ color: var(--azure); }
.ba-nav .nav-link--dropdown::after{ content:'▾'; background:none; position:static; width:auto; height:auto; }

/* Bouton Webcams (CTA) */
/* Bouton Webcams — SEUL bouton en verre BLEU TRÈS FONCÉ translucide,
   avec effet loupe (distortion optique du fond via filtre SVG #ba-lens). */
.ba-nav .btn-webcam{
  flex:0 0 auto;
  position:relative;
  color:#fff;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  border-radius:999px;
  background:
    radial-gradient(120% 85% at 30% 8%, rgba(255,255,255,.30), rgba(255,255,255,0) 50%),
    linear-gradient(180deg, rgba(20,58,104,.44), rgba(7,26,58,.62));
  -webkit-backdrop-filter: blur(2px) saturate(175%) contrast(1.08) brightness(1.02);
  backdrop-filter: blur(2px) saturate(175%) contrast(1.08) brightness(1.02);
  /* effet loupe (distortion) là où le navigateur le supporte ; sinon la ligne
     ci-dessus reste active → simple verre bleu foncé */
  backdrop-filter: blur(2px) saturate(175%) contrast(1.08) brightness(1.02) url(#ba-lens);
  border:1px solid rgba(150,195,235,.55);
  box-shadow:
    0 8px 22px rgba(4,18,42,.42),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -9px 16px -6px rgba(0,0,0,.5);
}
.ba-nav .btn-webcam:hover{
  background:
    radial-gradient(120% 85% at 30% 8%, rgba(255,255,255,.36), rgba(255,255,255,0) 50%),
    linear-gradient(180deg, rgba(26,70,120,.52), rgba(9,32,68,.7));
  border-color: rgba(180,215,245,.75);
  color:#fff;
}

/* Burger foncé (lisible sur verre clair) + position normalisée (certaines pages le mettaient en absolute) */
.ba-nav .burger{ position: static; }
.ba-nav .burger span{ background: var(--ink) !important; }

/* Dropdowns — panneaux verre */
.ba-nav .nav-dropdown-menu{
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:16px !important;
  box-shadow: 0 22px 54px rgba(13,27,42,.20) !important;
  padding:.55rem !important;
  top: calc(100% + 14px);
}
.ba-nav .nav-dropdown-menu::before{
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(255,255,255,.7) !important;
}
.ba-nav .nav-dropdown-menu a{
  border-radius:10px;
  padding:.55rem .85rem !important;
  color:#0d1b2a !important;
}
.ba-nav .nav-dropdown-menu a:hover{
  background: rgba(40,128,190,.10) !important;
  color: var(--azure) !important;
}
/* Panneau Météo large — 2 colonnes */
.ba-nav .nav-dropdown-menu--wide{
  left:0; transform:none;
  min-width: 520px; max-width:min(560px,92vw);
}
.menu-cols{ display:grid; grid-template-columns:1fr 1fr; gap:.15rem .9rem; }
.menu-col{ display:flex; flex-direction:column; }
.menu-col-title{
  font-family:var(--font-ui); font-size:.6rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  padding:.45rem .85rem .3rem;
}
.menu-divider{ border:none; border-top:1px solid rgba(13,27,42,.10); margin:.35rem .6rem; }
/* Guides (dernier dropdown) aligné à droite */
.ba-nav .nav-dropdown:last-of-type .nav-dropdown-menu{ left:auto; right:0; transform:none; }

/* Responsive nav → burger (replié à 1200px : marge de sécurité vs scrollbar) */
@media (max-width:1200px){
  .ba-nav-menu{ display:none; }
  .ba-nav .btn-webcam{ display:none; }
  .ba-nav .burger{ display:flex; margin-left:auto; }
  .ba-nav-shell{ justify-content:space-between; }
}


/* ═══════════════ TIROIR MOBILE — VERSION CLAIRE (verre) ═══════════════ */
.ba-nav .nav-drawer{
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border-left: 1px solid rgba(13,27,42,.10);
  box-shadow: -24px 0 60px rgba(13,27,42,.18);
}
.ba-nav .nav-drawer a{
  color: var(--ink);
  border-bottom: 1px solid rgba(13,27,42,.08);
}
.ba-nav .nav-drawer a:hover{ color: var(--azure); }
.ba-nav .nav-drawer-group{ border-bottom: 1px solid rgba(13,27,42,.08); }
.ba-nav .nav-drawer-sub-label{
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.ba-nav .nav-link--sub{ color: var(--slate) !important; }
.ba-nav .nav-link--sub:hover{ color: var(--azure) !important; }
.ba-nav .burger.open span{ background: var(--ink) !important; }

/* Overlay — scrim plus doux derrière le tiroir clair */
.nav-overlay{ background: rgba(13,27,42,.30) !important; }

/* ═══════════════ BOUTONS — GLASSMORPHISM ÉPURÉ (d'après votre image) ═══════════════ */
/* Pilule de verre frosté quasi transparent (prend la couleur du fond au travers),
   fin liseré clair, texte blanc + ombre douce. Pas de gloss/glow/dégradé bleu. */
.btn-primary{
  position:relative;
  color:#fff !important;
  text-shadow:0 0 2px rgba(6,24,48,.9), 0 1px 3px rgba(6,24,48,.55);
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.13)) !important;
  border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 8px 22px rgba(18,60,110,.18),
    inset 0 1px 1px rgba(255,255,255,.6);
}
.btn-primary:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.22)) !important;
  color:#fff !important;
  border-color: rgba(255,255,255,.72);
  transform: translateY(-2px);
}
.btn-secondary{
  position:relative;
  color:#fff !important;
  text-shadow:0 0 2px rgba(6,24,48,.9), 0 1px 3px rgba(6,24,48,.5);
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10)) !important;
  border:1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 7px 18px rgba(18,60,110,.16),
    inset 0 1px 1px rgba(255,255,255,.55);
}
.btn-secondary:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.2)) !important;
  color:#fff !important;
  border-color: rgba(255,255,255,.68);
}

/* ═══════════════ REPLI DE SÉCURITÉ (navigateurs sans backdrop-filter) ═══════════════ */
/* Sans flou, un verre transparent serait illisible → fond bleu semi-opaque de secours. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .ba-nav-shell{ background: rgba(255,255,255,.82); }
  .site-nav.ba-nav.scrolled .ba-nav-shell{ background: rgba(255,255,255,.9); }
  .ba-nav .nav-drawer{ background: rgba(255,255,255,.97); }
  .ba-nav .btn-webcam{
    background: linear-gradient(180deg, #163a68, #071a3a) !important;
    border-color: rgba(150,195,235,.6);
  }
  .btn-primary,
  .btn-secondary{
    background: rgba(46,120,180,.9) !important;
    border-color: rgba(255,255,255,.6);
  }
}