/* HEADER sticky */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  background:rgba(244,239,231,0.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(216,207,192,0.5);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  height:var(--header-h-mobile);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--text);
  position:relative;
  z-index:2;
}
.brand-mark{
  width:38px;
  height:38px;
  flex-shrink:0;
  display:grid;
  place-items:center;
}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-name{
  font-family:var(--ff-display);
  font-size:1.35rem;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--text);
  white-space:nowrap;
}
.brand-name em{
  font-style:normal;
  color:var(--accent);
}

/* Status open/closed */
.brand-status{
  display:none;
  align-items:center;
  gap:.4rem;
  font-size:.78rem;
  color:var(--text-2);
  margin-left:.7rem;
  padding-left:.7rem;
  border-left:1px solid var(--border);
}
.brand-status .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--text-mute);
  display:inline-block;
}
.brand-status.is-open .dot{background:var(--ok);box-shadow:0 0 0 3px rgba(47,122,77,.18)}
.brand-status.is-closed .dot{background:var(--warn)}

/* Nav desktop */
.nav-desktop{display:none}
.nav-desktop ul{display:flex;list-style:none;margin:0;padding:0;gap:1.8rem;align-items:center}
.nav-desktop a{
  color:var(--text);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.01em;
  padding:.4rem 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s, color .2s;
}
.nav-desktop a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.header-actions{display:none;gap:.6rem;align-items:center}

/* Burger : fixed top right, enfant direct du body, z-index > menu */
.burger{
  position:fixed;
  top:calc((var(--header-h-mobile) - 44px) / 2);
  right:14px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:transparent;
  border:0;
  cursor:pointer;
  z-index:var(--z-burger);
  border-radius:50%;
  transition:background .2s;
}
.burger:hover{background:rgba(46,42,36,.06)}
.burger span,
.burger span::before,
.burger span::after{
  content:"";
  display:block;
  width:24px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  position:relative;
  transition:transform .3s ease, opacity .2s ease, top .3s ease;
}
.burger span::before{position:absolute;top:-7px;left:0}
.burger span::after{position:absolute;top:7px;left:0}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0;transform:rotate(45deg)}
.burger.is-open span::after{top:0;transform:rotate(-45deg)}

/* Menu mobile : enfant direct de body, fixed, dvh, opaque */
.menu-mobile{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100dvh;
  background:var(--bg);
  z-index:var(--z-menu);
  padding:calc(var(--header-h-mobile) + 1.6rem) 1.6rem 2.4rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateY(-100%);
  opacity:0;
  visibility:hidden;
  transition:transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
}
.menu-mobile.is-open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  transition:transform .35s ease, opacity .35s ease;
}
.menu-mobile a{
  font-family:var(--ff-display);
  font-size:1.95rem;
  font-weight:500;
  color:var(--text);
  padding:.5rem 0;
  border-bottom:1px solid rgba(46,42,36,0.08);
  letter-spacing:-0.01em;
}
.menu-mobile a:last-of-type{border-bottom:0}
.menu-mobile .menu-cta-group{
  margin-top:auto;
  padding-top:1.6rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.menu-mobile .btn{
  width:100%;
  font-family:var(--ff-body);
  font-size:1rem;
  border-bottom:0;
}
/* override .menu-mobile a color for btn variants (fix contraste) */
.menu-mobile .btn,
.menu-mobile .btn:hover{
  color:inherit;
}
.menu-mobile .btn-primary,
.menu-mobile .btn-primary:hover{color:var(--surface)}
.menu-mobile .btn-primary:hover{color:#fff}
.menu-mobile .btn-wa,
.menu-mobile .btn-wa:hover{color:#fff}
.menu-mobile .btn-accent,
.menu-mobile .btn-accent:hover{color:#fff}
.menu-mobile .btn-ghost{color:var(--text)}
.menu-mobile-foot{
  margin-top:1.4rem;
  font-size:.85rem;
  color:var(--text-mute);
  line-height:1.5;
}

@media (min-width: 880px){
  .header-inner{height:var(--header-h)}
  .brand-mark{width:42px;height:42px}
  .brand-name{font-size:1.5rem}
  .brand-status{display:inline-flex}
  .nav-desktop{display:block}
  .header-actions{display:flex}
  .burger{display:none}
  .menu-mobile{display:none}
}

/* Section spacing */
.section{padding:4.2rem 0;position:relative}
.section-lg{padding:5.6rem 0}
@media(min-width:768px){
  .section{padding:6rem 0}
  .section-lg{padding:8rem 0}
}
.section-alt{background:var(--bg-alt)}
.section-dark{background:var(--dark);color:var(--on-dark)}
.section-dark h1,
.section-dark h2,
.section-dark h3{color:var(--on-dark)}
.section-dark p,
.section-dark li{color:var(--on-dark-2)}

/* Section header bloc */
.section-head{
  max-width:780px;
  margin:0 auto 3rem;
  text-align:center;
}
.section-head.align-left{text-align:left;margin-left:0}
.section-head p{margin:1rem auto 0;max-width:60ch}
.section-head.align-left p{margin-left:0;margin-right:0}

/* Footer */
.site-footer{
  background:var(--dark);
  color:var(--on-dark);
  padding:4rem 0 2rem;
}
.site-footer h4{color:var(--accent-soft);margin-bottom:1rem}
.site-footer p,
.site-footer li,
.site-footer a{color:var(--on-dark-2)}
.site-footer a:hover{color:var(--accent-soft)}
.footer-grid{
  display:grid;
  gap:2.5rem;
  grid-template-columns:1fr;
}
.footer-brand{
  font-family:var(--ff-display);
  font-size:1.8rem;
  color:var(--on-dark);
  margin-bottom:.6rem;
  letter-spacing:-0.01em;
}
.footer-brand em{color:var(--accent-soft);font-style:normal}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.footer-col li{font-size:.95rem}
.footer-bottom{
  border-top:1px solid rgba(251,247,239,.12);
  margin-top:3rem;
  padding-top:1.6rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  align-items:flex-start;
  font-size:.85rem;
  color:rgba(251,247,239,.55);
}
.footer-bottom a{color:rgba(251,247,239,.55);text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:var(--accent-soft)}

@media(min-width:768px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center}
}