/* =========================
   HEADER PREMIUM - BN
   Dégradé "verre d'eau" -> blanc
   Hover rose (sans fond verre)
   Responsive clean
   + Drawer mobile à droite (unique)
   ========================= */

:root{
  --bn-radius: 18px;
  --bn-shadow: 0 16px 46px rgba(0,0,0,.10);
  --bn-shadow-soft: 0 10px 28px rgba(0,0,0,.08);

  /* Nuances pour le dégradé (plus marqué) */
  --bn-teal-1: rgba(26,159,153,0.90);
  --bn-teal-2: rgba(26,159,153,0.70);
  --bn-white: rgba(255,255,255,0.88);

  --bn-pink: var(--couleur-secondaire);
  --bn-teal: var(--couleur-principale);
}

/* Container */
.bn-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* A11y */
.screen-reader-text{
  border:0;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute!important;
  width:1px;
  white-space:nowrap;
}

.bn-header{
  position: relative;
  z-index: 60;
}

/* Barre principale */
.bn-mainbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;

  background:
    radial-gradient(1200px 600px at 20% -10%, var(--bn-teal-1), transparent 60%),
    radial-gradient(1000px 500px at 80% -20%, var(--bn-teal-2), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.92), var(--bn-white));

  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}


.bn-mainbar__inner{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0;
}

/* Branding */
.bn-branding{
  display:flex;
  align-items:center;
  gap: .85rem;
  min-width: 0;
}

.bn-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  flex: 0 0 auto;
}

.bn-logo img{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
  border-radius:14px;
}

.bn-branding__text{ min-width:0; }

.bn-title{
  margin:0;
  line-height:1.05;
  font-size:1.18rem;
  font-weight:900;
  color: var(--couleur-texte);
}

.bn-title a{ color: var(--couleur-texte); text-decoration:none; }
.bn-title a:hover{ color: var(--bn-teal); }

.bn-subtitle{
  margin:.25rem 0 0;
  font-size:.92rem;
  color: rgba(51,51,51,0.70);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Nav desktop */
.bn-nav{
  display:flex;
  align-items:center;
  gap: .9rem;
}

.bn-menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:.2rem;
  margin:0;
  padding:0;
}

.bn-menu > li > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding: .55rem .75rem;
  border-radius:999px;
  color: rgba(51,51,51,0.92);
  font-weight:750;
  text-decoration:none;
  transition: color .2s ease, transform .15s ease;
}

.bn-menu > li > a::after{
  content:"";
  position:absolute;
  left:.8rem;
  right:.8rem;
  bottom:.35rem;
  height:2px;
  background: var(--bn-pink);
  border-radius:10px;
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .18s ease;
  opacity:.95;
}

.bn-menu > li > a:hover{
  color: var(--bn-teal);
  transform: translateY(-1px);
}
.bn-menu > li > a:hover::after{ transform: scaleX(1); }

.bn-menu > li.is-current > a{
  color: var(--bn-teal);
}
.bn-menu > li.is-current > a::after{ transform: scaleX(1); }

/* CTA desktop */
.bn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .78rem 1.05rem;
  border-radius:999px;
  background: var(--bn-teal);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  box-shadow: var(--bn-shadow-soft);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  white-space:nowrap;
}
.bn-cta:hover{
  transform: translateY(-2px);
  box-shadow: var(--bn-shadow);
  background:#178f8a;
  color:#fff;
}

/* Burger */
.bn-burger{
  display:none;
  background:transparent;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:999px;
  padding:.55rem .75rem;
  cursor:pointer;
}

.bn-burger__lines{
  width:24px;
  height:16px;
  display:inline-block;
  position:relative;
}

.bn-burger__lines::before,
.bn-burger__lines::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  border-radius:10px;
  background: rgba(51,51,51,0.85);
  transition: transform .2s ease, top .2s ease;
}
.bn-burger__lines::before{ top:3px; }
.bn-burger__lines::after{ top:11px; }

.bn-mainbar.is-open .bn-burger__lines::before{
  top:7px;
  transform: rotate(45deg);
}
.bn-mainbar.is-open .bn-burger__lines::after{
  top:7px;
  transform: rotate(-45deg);
}

/* =========================
   RESPONSIVE HEADER
   ========================= */
@media (max-width: 600px){
  .bn-mainbar__inner{ padding:.85rem 0; }
  .bn-logo img{ width:46px; height:46px; border-radius:12px; }
  .bn-title{ font-size:1.05rem; }
  .bn-subtitle{ font-size:.86rem; }

  .bn-nav{ display:none; }
  .bn-burger{ display:inline-flex; align-items:center; justify-content:center; }
}

@media (min-width: 601px) and (max-width: 1024px){
  .bn-nav{ display:none; }
  .bn-burger{ display:inline-flex; align-items:center; justify-content:center; }
  .bn-logo img{ width:54px; height:54px; }
}

@media (min-width: 1025px) and (max-width: 1366px){
  .bn-container{ max-width:1120px; }
  .bn-menu > li > a{ padding:.52rem .65rem; }
}

@media (min-width: 1600px){
  .bn-container{ max-width:1360px; }
  .bn-title{ font-size:1.28rem; }
  .bn-subtitle{ font-size:1rem; }
  .bn-menu > li > a{ padding:.62rem .85rem; }
  .bn-cta{ padding:.88rem 1.15rem; }
}

/* =========================
   MENU MOBILE — DRAWER À DROITE (UNIQUE)
   ========================= */

/* overlay */
.bn-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  display: none;
}

/* drawer */
.bn-mobile{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(86vw, 420px);

  background: rgba(255,255,255,0.98);
  border-left: 1px solid rgba(0,0,0,0.08);
  box-shadow: -18px 0 60px rgba(0,0,0,0.18);
  z-index: 9999;

  transform: translateX(100%);
  transition: transform .24s ease;
}

/* ouvert */
body.bn-menu-open .bn-backdrop{ display:block; }
body.bn-menu-open .bn-mobile{ transform: translateX(0); }

/* inner layout */
.bn-mobile__inner{
  height: 100%;
  overflow: auto;
  padding: 1.15rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

/* liste */
.bn-mobile-menu{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: .55rem;
}

.bn-mobile-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .95rem 1rem;
  border-radius: 16px;
  background: rgba(0,0,0,0.03);
  color: rgba(51,51,51,0.92);
  font-weight: 850;
  text-decoration:none;
  transition: transform .14s ease, background-color .18s ease, color .18s ease;
}

.bn-mobile-menu a::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid rgba(26,159,153,0.75);
  border-bottom:2px solid rgba(26,159,153,0.75);
  transform: rotate(-45deg);
  border-radius:2px;
  opacity:.65;
}

.bn-mobile-menu a:hover{
  background: rgba(26,159,153,0.08);
  color: var(--couleur-principale);
  transform: translateY(-1px);
}

.bn-mobile-menu a:hover::after{
  border-right-color: var(--couleur-secondaire);
  border-bottom-color: var(--couleur-secondaire);
  opacity: .9;
}

/* =========================
   CTA "Réservation" — PARFAIT (drawer)
   ========================= */
.bn-mobile .bn-cta--full{
  padding: 1rem 1.15rem;
  border-radius: 18px;

  background: var(--couleur-principale);
  color: #fff;
  font-weight: 950;
  font-size: 1.05rem;
  text-align: center;

  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
}

/* un peu d’air en bas */
.bn-mobile .bn-cta--full{ margin-bottom: .25rem; }

/* contact */
.bn-mobile__contact{
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(0,0,0,0.07);
  font-size: .95rem;
  color: rgba(51,51,51,0.70);
}

.bn-mobile__contact a{
  color: var(--couleur-principale);
  font-weight: 900;
  text-decoration:none;
}

/* bloque scroll arrière */
body.bn-menu-open{ overflow:hidden; }

/* Contact phone + email */
.bn-contact{
  display: flex;
  flex-direction: column;   /* 👈 l’un en dessous de l’autre */
  gap: .35rem;
}

.bn-contact a{
  color: var(--couleur-principale);
  font-weight: 900;
  text-decoration: none;
  line-height: 1.3;
}

.bn-contact a:hover{
  text-decoration: underline;
}