/* =========================================================
   BIOUTYAGENCY — SHARED HEADER
   Identique sur toutes les pages / PC / tablette / mobile
========================================================= */
.ba-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  padding:14px 0;
  background:transparent;
  transition:padding .35s ease, background .35s ease, box-shadow .35s ease;
}
.ba-header.scrolled{
  padding:8px 0;
  background:rgba(250,247,242,.90);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 12px 40px rgba(31,25,19,.08);
}
.ba-header-shell{
  position:relative;
}
.ba-nav{
  min-height:68px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:7px 9px 7px 20px;
  border:1px solid rgba(231,222,211,.88);
  border-radius:18px;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 35px rgba(31,25,19,.05);
}
.ba-logo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:-.045em;
  white-space:nowrap;
}
.ba-logo-mark{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#151311;
  color:#dfc79f;
  font-family:"Playfair Display",serif;
  font-size:.9rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.ba-logo-name{color:#151311}
.ba-logo-name span{color:#98733e}
.ba-nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}
.ba-nav-link{
  position:relative;
  padding:10px 12px;
  border-radius:10px;
  color:#625d57;
  font-size:.78rem;
  font-weight:700;
  white-space:nowrap;
  transition:color .2s ease,background .2s ease;
}
.ba-nav-link::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:5px;
  height:1px;
  background:#98733e;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}
.ba-nav-link:hover,
.ba-nav-link.active{
  color:#151311;
  background:#faf7f2;
}
.ba-nav-link:hover::after,
.ba-nav-link.active::after{transform:scaleX(1)}
.ba-nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.ba-audience{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid #e7ded3;
  border-radius:999px;
  color:#77716a;
  background:rgba(250,247,242,.72);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ba-audience i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c6a16b;
  box-shadow:0 0 0 3px rgba(198,161,107,.15);
}
.ba-nav-cta{
  padding:12px 16px !important;
  font-size:.72rem !important;
  white-space:nowrap;
}
.ba-menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid #e7ded3;
  border-radius:12px;
  background:#faf7f2;
  color:#151311;
  padding:0;
  place-items:center;
  cursor:pointer;
}
.ba-menu-toggle span{
  display:block;
  width:18px;
  height:1.5px;
  background:currentColor;
  transition:transform .3s ease,opacity .3s ease;
}
.ba-menu-toggle span+span{margin-top:4px}
.ba-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.ba-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.ba-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.ba-mobile-menu{
  display:none;
}

/* Tablette */
@media (max-width:1100px){
  .ba-nav{padding-left:16px}
  .ba-nav-link{padding-inline:9px;font-size:.75rem}
  .ba-audience{display:none}
  .ba-nav-cta{padding-inline:13px !important}
}

/* Tablette étroite */
@media (max-width:850px){
  .ba-nav-links,
  .ba-nav-cta{display:none !important}
  .ba-menu-toggle{display:grid}
  .ba-mobile-menu{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    padding:0 18px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    border:1px solid transparent;
    border-radius:20px;
    background:rgba(250,247,242,.98);
    box-shadow:0 25px 60px rgba(31,25,19,.13);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    transition:max-height .45s ease,padding .45s ease,opacity .3s ease,transform .45s ease,visibility .45s ease,border-color .3s ease;
  }
  .ba-mobile-menu.open{
    max-height:520px;
    padding:10px 18px 18px;
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    border-color:#e7ded3;
  }
  .ba-mobile-links{
    display:flex;
    flex-direction:column;
  }
  .ba-mobile-link{
    padding:16px 4px;
    border-bottom:1px solid #e7ded3;
    font-family:"Playfair Display",serif;
    font-size:1.45rem;
    line-height:1.1;
    color:#151311;
    transition:padding-left .25s ease,color .25s ease;
  }
  .ba-mobile-link:hover,
  .ba-mobile-link.active{
    color:#98733e;
    padding-left:10px;
  }
  .ba-mobile-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:16px;
  }
  .ba-mobile-cta{
    padding:12px 15px !important;
    font-size:.68rem !important;
  }
}

/* Mobile */
@media (max-width:560px){
  .ba-header{padding:9px 0}
  .ba-header.scrolled{padding:6px 0}
  .ba-nav{
    min-height:58px;
    padding:6px 7px 6px 12px;
    border-radius:15px;
  }
  .ba-logo{font-size:1.12rem;gap:7px}
  .ba-logo-mark{width:28px;height:28px;border-radius:9px}
  .ba-menu-toggle{width:40px;height:40px;border-radius:11px}
  .ba-mobile-menu{
    top:calc(100% + 6px);
    border-radius:17px;
  }
  .ba-mobile-menu.open{padding:8px 14px 14px}
  .ba-mobile-link{font-size:1.28rem;padding:14px 3px}
  .ba-mobile-footer{
    flex-direction:column;
    align-items:stretch;
  }
  .ba-mobile-footer .ba-audience{
    display:flex;
    justify-content:center;
  }
  .ba-mobile-cta{width:100%}
}

/* Empêche le défilement de la page quand le menu mobile est ouvert */
body.ba-menu-open{overflow:hidden}