/* assets/css/header.css — styles du header ateliersap */

:root{
  --as-indigo:#24345C;
  --as-indigo-dark:#182541;
  --as-ocre:#D9A441;
  --as-ocre-dark:#BE8A31;
  --as-brique:#8C4A3A;
  --as-lin:#F4EFE4;
  --as-encre:#221B14;
  --as-blanc:#FFFFFF;
}

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(244,239,228,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #E4D9BE;
  font-family:'Work Sans', sans-serif;
}
.site-header .header-inner{
  max-width:1180px;
  margin:0 auto;
  padding:14px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

/* logo */
.site-header .brand-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.site-header .brand-mark{
  width:44px;height:44px;flex:0 0 auto;
  background:var(--as-indigo);
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  padding:6px;
}
.site-header .brand-word-group{display:flex;flex-direction:column;line-height:1.1;}
.site-header .brand-word{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:21px;
  color:var(--as-indigo);
}
.site-header .brand-word .sap{color:var(--as-brique);}
.site-header .brand-tagline{
  font-size:10.5px;
  letter-spacing:.06em;
  color:#8A7D63;
  margin-top:1px;
}

/* nav */
.site-header .main-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  justify-content:center;
}
.site-header .main-nav a{
  font-size:14.5px;
  font-weight:500;
  color:var(--as-encre);
  text-decoration:none;
  padding:9px 16px;
  border-radius:8px;
}
.site-header .main-nav a:hover{background:#EAE1CE;}
.site-header .main-nav a.active{color:var(--as-indigo);font-weight:600;}

/* actions */
.site-header .header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.site-header .btn-ghost{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--as-indigo);
  background:transparent;
  border:1.5px solid #D6C9A8;
  border-radius:999px;
  padding:9px 20px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.site-header .btn-ghost:hover{border-color:var(--as-indigo);background:#EAE1CE;}
.site-header .btn-solid{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--as-blanc);
  background:var(--as-indigo);
  border:1.5px solid var(--as-indigo);
  border-radius:999px;
  padding:9px 20px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.site-header .btn-solid:hover{background:var(--as-indigo-dark);}

/* mobile toggle */
.site-header .menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  flex-direction:column;
  gap:5px;
}
.site-header .menu-toggle span{width:22px;height:2px;background:var(--as-indigo);display:block;}

.site-header .mobile-panel{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:6px 28px 22px;
  border-top:1px solid #E4D9BE;
}
.site-header .mobile-panel a{
  padding:13px 4px;
  font-size:15.5px;
  font-weight:500;
  color:var(--as-encre);
  text-decoration:none;
  border-bottom:1px solid #E7DDC3;
}
.site-header .mobile-panel .btn-row{display:flex;gap:10px;margin-top:14px;}
.site-header .mobile-panel .btn-row a{border:none;flex:1;text-align:center;padding:11px;}

@media (max-width:880px){
  .site-header .main-nav{display:none;}
  .site-header .header-actions .btn-ghost{display:none;}
  .site-header .menu-toggle{display:flex;}
  .site-header.open .mobile-panel{display:flex;}
}
