/* Header + footer */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:var(--z-header);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.site-header.is-scrolled{
  border-bottom-color:var(--border);
  background:color-mix(in srgb,var(--bg) 98%,transparent);
  box-shadow:0 4px 18px -16px rgba(31,53,49,.35);
}
.header-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;height:var(--header-h);
}

.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);}
.brand-mark{
  width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,var(--bg));
  border-radius:50%;color:var(--accent);
}
.brand-mark svg{width:24px;height:24px;}
.brand-name-wrap{display:flex;flex-direction:column;gap:1px;line-height:1;}
.brand-name{font-family:var(--ff-display);font-weight:600;font-size:1.2rem;color:var(--text);}
.brand-tag{font-family:var(--ff-ui);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;}

.nav-desktop{display:none;gap:28px;align-items:center;}
.nav-desktop a{
  font-family:var(--ff-ui);font-size:.94rem;color:var(--text);font-weight:500;
  text-decoration:none;padding:6px 2px;border-bottom:1.5px solid transparent;transition:border-color var(--t-fast);
}
.nav-desktop a:hover{border-bottom-color:var(--accent);}

.header-cta{display:flex;align-items:center;gap:10px;}
.btn-call-head{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  padding:9px 16px;border-radius:999px;
  font-family:var(--ff-ui);font-weight:600;font-size:.92rem;
  text-decoration:none;transition:background var(--t-fast);
}
.btn-call-head:hover{background:var(--accent-strong);color:#fff;}
.btn-call-head svg{width:16px;height:16px;}

.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:10px;
  background:transparent;border:1px solid var(--border);
  cursor:pointer;padding:0;position:relative;color:var(--text);
}
.burger span,.burger span::before,.burger span::after{
  content:"";display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--t-fast),opacity var(--t-fast);
}
.burger span{position:relative;}
.burger span::before{position:absolute;left:0;top:-7px;}
.burger span::after{position:absolute;left:0;top:7px;}
.burger.is-open span{background:transparent;}
.burger.is-open span::before{transform:translateY(7px) rotate(45deg);}
.burger.is-open span::after{transform:translateY(-7px) rotate(-45deg);}

@media (min-width:880px){
  .nav-desktop{display:inline-flex;}
  .burger{display:none;}
}
@media (max-width:879px){
  .header-inner{height:var(--header-h-mobile);padding:8px 18px;}
  .brand-name{font-size:1.1rem;}
  .brand-mark{width:36px;height:36px;}
  .btn-call-head .btn-text{display:none;}
  .btn-call-head{padding:9px 11px;}
}

/* Menu mobile : ENFANT DIRECT DE BODY, jamais nested */
.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) + 24px) 24px 40px;
  display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-100%);opacity:0;visibility:hidden;
  transition:transform var(--t-mid),opacity var(--t-mid),visibility 0s linear var(--t-mid);
}
.menu-mobile.is-open{
  transform:translateY(0);opacity:1;visibility:visible;
  transition:transform var(--t-mid),opacity var(--t-mid);
}
.menu-mobile a:not(.btn){
  font-family:var(--ff-display);font-size:1.5rem;color:var(--text);
  text-decoration:none;padding:14px 0;border-bottom:1px solid var(--border);
}
.menu-mobile .btn{margin-top:18px;}
.menu-mobile .btn-primary{color:#fff;}
.menu-mobile .btn-wa{color:#fff;}
.menu-mobile-foot{margin-top:auto;padding-top:24px;font-size:.85rem;color:var(--text-mute);}
@media (min-width:880px){.menu-mobile{display:none;}}

/* Footer */
.site-footer{
  background:var(--text);color:#E8F0EC;
  padding:64px 0 28px;margin-top:80px;
}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
  max-width:var(--container);margin:0 auto;padding:0 24px;
}
.foot-col h4{font-family:var(--ff-display);font-size:1.05rem;color:#fff;margin:0 0 14px;}
.foot-col p,.foot-col li,.foot-col a{color:#C5D2CD;font-size:.93rem;line-height:1.6;}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.foot-col a{text-decoration:none;}
.foot-col a:hover{color:var(--accent-2);}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.foot-brand-mark{
  width:38px;height:38px;display:grid;place-items:center;
  background:rgba(232,240,236,.10);border-radius:50%;color:var(--accent-2);
}
.foot-brand-mark svg{width:24px;height:24px;}
.foot-brand-name{font-family:var(--ff-display);font-size:1.15rem;color:#fff;}
.foot-bottom{
  max-width:var(--container);margin:36px auto 0;padding:18px 24px 0;
  border-top:1px solid rgba(232,240,236,.14);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  font-size:.84rem;color:#9CABA6;
}
.foot-bottom a{color:#9CABA6;text-decoration:underline;text-underline-offset:3px;}
.foot-bottom a:hover{color:#fff;}
@media (max-width:880px){
  .foot-grid{grid-template-columns:1fr;gap:32px;}
  .site-footer{padding-top:48px;margin-top:64px;}
}

/* FAB Appeler mobile */
.fab-call{
  position:fixed;right:18px;bottom:18px;
  display:none;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  padding:14px 18px;border-radius:999px;
  font-family:var(--ff-ui);font-weight:700;font-size:.95rem;
  text-decoration:none;z-index:900;
  box-shadow:0 10px 26px -8px rgba(31,53,49,.45);
}
.fab-call svg{width:18px;height:18px;}
@media (max-width:879px){
  .fab-call.is-visible{display:inline-flex;}
}