/* Container + Header + Footer */

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  width:100%;
}
@media (max-width:560px){ .container{ padding:0 20px; } }

/* HEADER sticky */
.site-header{
  position:sticky; top:0;
  z-index:var(--z-header);
  background:rgba(237,241,237,.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.site-header.is-scrolled{
  background:rgba(237,241,237,.98);
  border-bottom-color:var(--border);
}
.header-inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}

.brand{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--text);
}
.brand-mark{
  width:38px; height:38px;
  display:grid; place-items:center;
  color:var(--accent);
  flex-shrink:0;
}
.brand-mark svg{ width:100%; height:100%; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:1.35rem;
  letter-spacing:-0.005em;
  color:var(--text);
}
.brand-tag{
  font-family:var(--ff-ui);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-top:4px;
}

.nav-desk{ display:flex; align-items:center; gap:30px; }
.nav-desk a{
  font-family:var(--ff-ui);
  font-size:.94rem;
  color:var(--text-2);
  position:relative;
  padding:8px 0;
  transition:color .2s ease;
}
.nav-desk a:hover{ color:var(--accent); }
.nav-desk a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav-desk a:hover::after{ transform:scaleX(1); }

.header-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent);
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-family:var(--ff-ui);
  font-size:.9rem;
  font-weight:600;
  transition:background .2s ease, transform .2s ease;
}
.header-cta:hover{ background:var(--ink-dark); transform:translateY(-1px); }
.header-cta svg{ width:16px; height:16px; }

/* Burger (cache desktop) */
.burger{ display:none; }

@media (max-width:900px){
  .nav-desk{ display:none; }
  .header-cta{ display:none; }
  .header-inner{ height:var(--header-h-mobile); }
}

/* MENU MOBILE — pattern obligatoire */
.burger-wrap{ display:none; }
@media (max-width:900px){
  .burger{
    display:grid; place-items:center;
    position:fixed;
    top:calc((var(--header-h-mobile) - 44px) / 2);
    right:16px;
    width:44px; height:44px;
    z-index:calc(var(--z-header) + 10);
    background:transparent; border:0; cursor:pointer;
    border-radius:6px;
  }
  .burger span,
  .burger span::before,
  .burger span::after{
    content:""; display:block;
    width:24px; height:2px;
    background:var(--text);
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease, background .2s ease;
  }
  .burger span{ position:relative; }
  .burger span::before{ position:absolute; top:-8px; left:0; }
  .burger span::after{ position:absolute; top:8px; left:0; }
  .burger.is-open span{ background:transparent; }
  .burger.is-open span::before{ transform:translateY(8px) rotate(45deg); }
  .burger.is-open span::after{ transform:translateY(-8px) rotate(-45deg); }
}

.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) + 32px) 24px 40px;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  -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.55rem;
  padding:12px 0;
  color:var(--text);
  border-bottom:1px solid var(--border);
}
.menu-mobile a.menu-cta{
  font-family:var(--ff-ui);
  font-size:1rem;
  font-weight:600;
  background:var(--wa-green);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:14px 22px;
  margin-top:18px;
  text-align:center;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.menu-mobile a.menu-cta--tel{
  background:var(--accent);
}
@media (min-width:901px){
  .menu-mobile{ display:none; }
}

/* FOOTER */
.site-footer{
  background:var(--ink-dark);
  color:var(--on-dark);
  padding:56px 0 28px;
  margin-top:0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
}
.footer-brand{ color:var(--on-dark); }
.footer-brand .brand-name{ color:var(--on-dark); }
.footer-brand .brand-tag{ color:var(--on-dark-2); }
.footer-brand .brand-mark{ color:var(--accent-2); }
.footer-brand p{ color:var(--on-dark-2); margin-top:14px; max-width:36ch; font-size:.94rem; }
.footer-col h4{
  font-family:var(--ff-ui);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--accent-2);
  margin-bottom:14px;
  font-weight:700;
}
.footer-col ul li{ margin-bottom:8px; font-size:.94rem; color:var(--on-dark-2); }
.footer-col a{ color:var(--on-dark-2); transition:color .2s; }
.footer-col a:hover{ color:var(--on-dark); }
.footer-bottom{
  margin-top:36px;
  padding-top:22px;
  border-top:1px solid rgba(244,247,244,.12);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  font-size:.84rem; color:var(--on-dark-2);
}
.footer-bottom a{ color:var(--on-dark-2); text-decoration:underline; text-underline-offset:3px; }
.footer-bottom a:hover{ color:var(--on-dark); }
@media (max-width:768px){
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .site-footer{ padding:48px 0 24px; }
}

/* FAB mobile (bouton Appeler flottant) */
.fab-call{
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:900;
  background:var(--accent);
  color:#fff;
  width:58px; height:58px;
  border-radius:50%;
  display:none;
  align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(31,91,78,.35);
  transition:transform .2s ease;
}
.fab-call:hover{ transform:translateY(-2px) scale(1.04); }
.fab-call svg{ width:24px; height:24px; }
@media (max-width:900px){
  .fab-call{ display:flex; }
}