/* ============================================================================
   HANTOUT.BE · HEADER + PIED DE PAGE UNIFIÉS · v4.1
   SOURCE UNIQUE pour les 106 pages (3 homes + pages intérieures, FR/EN/NL).
   Chargée EN DERNIER, après v4.css (homes) et style.css + noir-content.css
   (pages intérieures) : les blocs nav/footer ont été retirés de ces deux
   fichiers, il ne doit plus y en avoir ailleurs.

   Référence : header de la home (design v4 validé) — 6 liens, CTA « Devis en
   24h », logo 24 px, padding 24px var(--pad) — complété par le sticky, le fond
   crème translucide et le menu mobile plein écran des pages intérieures.
   Toute modif de nav ou de footer se fait ICI et nulle part ailleurs.
   ============================================================================ */

/* ── BARRE (sticky, fond crème translucide, filet bas) ───────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px var(--pad);
  background:rgba(243,239,230,.85);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}

/* ── LOGO ────────────────────────────────────────────────────────────────── */
.nav .nav-logo,.nav .logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em;
  color:var(--ink);text-decoration:none;text-transform:lowercase;
}
.nav .nav-logo:hover,.nav .logo:hover{color:var(--ink)}
.nav-logo-text{font-family:var(--display)}
.nav-logo-text span{color:var(--accent)}
.nav .nav-logo .mark,.nav .logo .mark{width:30px;height:13px}

/* ── LIENS ───────────────────────────────────────────────────────────────── */
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:normal;
  color:var(--secondary);text-decoration:none;transition:color .25s ease;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}

/* ── SÉLECTEUR DE LANGUE ─────────────────────────────────────────────────── */
.nav-lang{
  display:flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.06em;
}
.nav-lang a{color:var(--faint);text-decoration:none;transition:color .25s ease}
.nav-lang a:hover,.nav-lang a:focus-visible{color:var(--ink)}
.nav-lang a[aria-current="true"]{color:var(--accent)}
.nav-lang .sep{opacity:.45;color:var(--faint)}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 26px;background:var(--ink);color:var(--bg) !important;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:normal;
  text-decoration:none;border-radius:999px;
  transition:background .25s ease,color .25s ease;white-space:nowrap;
}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--accent);color:var(--ink) !important}

/* ── BURGER ──────────────────────────────────────────────────────────────── */
.nav-burger{
  display:none;align-items:center;justify-content:center;padding:0;
  width:44px;height:44px;background:transparent;border:1.5px solid var(--line2);
  border-radius:14px;color:var(--ink);cursor:pointer;font-family:inherit;
}
.nav-burger svg{width:20px;height:20px}

/* ── MENU MOBILE PLEIN ÉCRAN ─────────────────────────────────────────────── */
.mobile-menu{
  /* z-index au-dessus des floats WhatsApp (900) / Reda IA (901) et de la cookie
     bar (1000), qui passaient par-dessus le menu plein écran. */
  position:fixed;inset:0;z-index:1100;background:var(--bg);
  display:none;flex-direction:column;padding:26px 22px;overflow-y:auto;
}
.mobile-menu.is-open{display:flex}
/* Menu ouvert : on neutralise tout ce qui flotte au-dessus de la page. */
body.menu-open .whatsapp-float,
body.menu-open .chatbot-btn,
body.menu-open .chatbot-panel,
body.menu-open .cookie-bar{display:none}
.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:44px}
.mobile-menu-top .nav-logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;
  color:var(--ink);text-decoration:none;text-transform:lowercase;
}
.mobile-menu-top .nav-logo .mark{width:30px;height:13px}
.mobile-menu-close{
  width:44px;height:44px;padding:0;background:transparent;border:1.5px solid var(--line2);
  border-radius:14px;color:var(--ink);cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
}
.mobile-menu-close svg{width:20px;height:20px}
.mobile-menu a.mlink{
  font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line);
}
.mobile-menu a.mlink:hover,.mobile-menu a.mlink:focus-visible{color:var(--accent)}
.mobile-menu .nav-lang{margin:26px 0 0;font-size:13px;gap:14px}
.mobile-menu a.mcta{
  margin-top:28px;text-align:center;padding:17px;
  background:var(--accent);color:var(--ink);font-weight:600;font-size:15px;
  border-radius:999px;text-decoration:none;
}
.mobile-menu a.mcta:hover,.mobile-menu a.mcta:focus-visible{background:var(--ink);color:var(--bg)}

/* ── RESPONSIVE HEADER (identique sur toutes les pages) ──────────────────── */
@media(max-width:1060px){
  .nav-links{gap:22px}
}
@media(max-width:960px){
  .nav{padding-left:var(--pad);padding-right:var(--pad)}
  .nav-links{display:none}
  /* Le CTA reste visible à toutes les largeurs, comme sur la home de référence.
     Seul le sélecteur de langue passe dans le menu plein écran, faute de place
     une fois le burger ajouté. */
  .nav > .nav-lang{display:none}
  .nav-cta{margin-left:auto}   /* CTA collé au burger, à droite, pas au centre */
  .nav-burger{display:flex}
}
@media(max-width:560px){
  .nav{padding:18px 16px;gap:10px}
  .nav .nav-logo,.nav .logo{font-size:20px}
  .nav .nav-logo .mark,.nav .logo .mark{width:26px;height:11px}
  .nav-cta{padding:10px 16px;font-size:13px}
  .nav-lang{font-size:11.5px;gap:6px}
  .mobile-menu a.mlink{font-size:26px}
}
@media(max-width:360px){
  .nav-cta{padding:10px 13px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .nav-links a,.nav-lang a,.nav-cta,.footer a{transition:none}
}

/* ============================================================================
   PIED DE PAGE (identique sur toutes les pages)
   ============================================================================ */
.footer{
  border-top:1px solid var(--line);background:var(--bg);
  padding:24px var(--pad) 28px;
  font-family:var(--sans);font-size:13px;color:var(--secondary);
}
.footer-top{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px 24px;flex-wrap:wrap;max-width:none;margin:0;
}
.footer a{color:var(--secondary);text-decoration:none;transition:color .25s ease}
.footer a:hover,.footer a:focus-visible{color:var(--ink)}
.footer-brand{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.footer-brand .mark{width:18px;height:8px}
.footer-slogan{color:var(--secondary);font-size:12.5px}
.footer .footer-logo{
  display:inline-flex;align-items:center;
  font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.03em;
  text-transform:lowercase;color:var(--ink);text-decoration:none;
}
.footer .footer-logo:hover,.footer .footer-logo:focus-visible{color:var(--accent)}
.footer-logo-text{font-family:var(--display)}
.footer-logo-text span{color:var(--accent)}
.footer-copy{color:var(--secondary)}
.footer-contact{display:flex;gap:18px;flex-wrap:wrap}
.footer-sub{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px 24px;flex-wrap:wrap;max-width:none;
  margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);
}
.footer-zones,.footer-legal{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
.footer-zones-label{color:var(--secondary)}
@media(max-width:960px){
  .footer{padding-left:var(--pad);padding-right:var(--pad)}
}
@media(max-width:560px){
  .footer-top,.footer-sub{flex-direction:column;align-items:flex-start}
}