/* HEADER */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--header-h-mobile);
  background:rgba(243,234,224,0.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  z-index:var(--z-header);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background-color .3s ease;
}
.site-header.is-scrolled{
  background:rgba(243,234,224,0.97);
  border-bottom-color:var(--border);
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text);}
.brand-mark{
  width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  border-radius:50%;
  color:var(--accent);
  flex-shrink:0;
}
.brand-mark svg{width:22px;height:22px;}
.brand-name{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.25rem;
  line-height:1;
  letter-spacing:.005em;
}
.brand-tag{
  display:none;
  font-family:var(--ff-ui);
  font-size:.7rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--text-mute);
  margin-top:4px;
}
@media (min-width:1024px){
  .brand-block{display:flex;flex-direction:column;justify-content:center;}
  .brand-tag{display:inline-block;}
}

.nav-desktop{display:none;}
@media (min-width:768px){
  .site-header{height:var(--header-h);}
  .nav-desktop{display:flex;align-items:center;gap:30px;}
  .nav-desktop a{
    font-family:var(--ff-ui);
    font-size:.92rem;
    font-weight:500;
    color:var(--text);
    position:relative;
  }
  .nav-desktop a::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-6px;
    height:1px;background:var(--accent);
    transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease;
  }
  .nav-desktop a:hover::after{transform:scaleX(1);}
  .header-cta{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--ff-ui);font-weight:600;
    background:var(--accent);color:#FBF6EE;
    padding:11px 18px;border-radius:999px;
    transition:background-color .2s ease;
  }
  .header-cta:hover{background:var(--text);color:#FBF6EE;}
}

/* BURGER (mobile) - position fixed top-right, enfant direct du body */
.burger{
  position:fixed;
  top:calc((var(--header-h-mobile) - 44px) / 2);
  right:16px;
  width:44px;height:44px;
  display:grid;place-items:center;
  background:rgba(243,234,224,0.7);
  border-radius:50%;
  z-index:var(--z-burger);
}
.burger span,
.burger span::before,
.burger span::after{
  display:block;
  width:22px;height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .3s ease, opacity .2s ease, top .3s ease;
  position:relative;
}
.burger span::before{content:"";position:absolute;left:0;top:-7px;}
.burger span::after{content:"";position:absolute;left:0;top:7px;}
.burger.is-open span{background:transparent;}
.burger.is-open span::before{transform:rotate(45deg);top:0;background:#FBF6EE;}
.burger.is-open span::after{transform:rotate(-45deg);top:0;background:#FBF6EE;}
@media (min-width:768px){
  .burger{display:none;}
}

/* MENU MOBILE - enfant DIRECT du body */
.menu-mobile{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:100dvh;
  background:var(--surface-dark);
  color:#F3EAE0;
  z-index:var(--z-menu);
  padding:calc(var(--header-h-mobile) + 32px) 24px 40px;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  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:not(.btn){
  font-family:var(--ff-display);
  font-size:1.7rem;
  font-weight:500;
  color:#FBF6EE;
  padding:10px 0;
  border-bottom:1px solid rgba(251,246,238,0.12);
}
.menu-mobile a.btn{margin-top:18px;}
.menu-mobile a.btn-primary{color:#FBF6EE;}
.menu-mobile a.btn-wa{color:#FBF6EE;}
.menu-mobile-foot{
  margin-top:auto;
  padding-top:24px;
  font-family:var(--ff-ui);
  font-size:.85rem;
  color:rgba(251,246,238,0.6);
}
.menu-mobile-foot strong{display:block;font-size:1.05rem;color:#FBF6EE;font-weight:500;}
@media (min-width:768px){
  .menu-mobile{display:none;}
}

/* PAGE OFFSET */
main{padding-top:var(--header-h-mobile);}
@media (min-width:768px){main{padding-top:var(--header-h);}}

/* FOOTER */
.site-footer{
  background:var(--surface-dark);
  color:rgba(243,234,224,0.78);
  padding:60px 0 30px;
  margin-top:0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
@media (min-width:768px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;}
}
.footer-brand .brand{color:#FBF6EE;}
.footer-brand .brand-mark{background:rgba(232,194,174,0.18);color:var(--accent-on-dark);}
.footer-brand p{color:rgba(243,234,224,0.7);margin:18px 0 0;max-width:36ch;font-size:.95rem;}
.footer-col h4{
  font-family:var(--ff-ui);
  font-size:.78rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--accent-on-dark);
  margin-bottom:18px;
}
.footer-col ul li{margin-bottom:10px;font-size:.95rem;}
.footer-col a:hover{color:#FBF6EE;}
.footer-bottom{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid rgba(243,234,224,0.12);
  display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;
  font-family:var(--ff-ui);font-size:.8rem;
  color:rgba(243,234,224,0.55);
}
.footer-bottom button{color:rgba(243,234,224,0.7);text-decoration:underline;text-underline-offset:3px;}
.footer-bottom button:hover{color:#FBF6EE;}

/* FAB Mobile */
.fab-call{
  position:fixed;
  bottom:18px;right:18px;
  width:56px;height:56px;
  border-radius:50%;
  background:var(--accent);
  color:#FBF6EE;
  display:grid;place-items:center;
  box-shadow:0 10px 28px -10px rgba(126,63,44,0.6), 0 4px 10px rgba(0,0,0,0.18);
  z-index:var(--z-fab);
  opacity:0;
  pointer-events:none;
  transform:translateY(20px) scale(.85);
  transition:opacity .3s ease, transform .3s ease;
}
.fab-call.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.fab-call svg{width:24px;height:24px;}
@media (min-width:768px){.fab-call{display:none;}}