/* ==========================================================================
   header-footer.css — Nav, footer, call-bar (extrait du prototype)
   ========================================================================== */

/* ---- Reset anti-débordement horizontal ---- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ---- Skip link (accessibilité) ---- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:#fff; color:var(--blue-deep); padding:1rem; z-index:2000; border-radius: 0 0 10px 0;
}
.skip-link:focus{ left:0; top:0; }
 
   /* ---- NAVIGATION ---- */
.nav{
  position: fixed;
  
  left:0; right:0;
  z-index: 1000;
  height: var(--nav-h);
  width: 100%;
  display:flex;
  align-items:center;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease), backdrop-filter .45s var(--ease);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; width: 100%; }
 
.nav-brand{ display:flex; align-items:center; gap:.7rem; }
.nav-brand img{ height: 105px; width:auto; transition: height .4s var(--ease); }
.nav-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.nav-brand-text strong{ font-family:var(--font-display); font-size:1.05rem; color:#fff; letter-spacing:-.01em; transition: color .4s var(--ease); }
.nav-brand-text span{ font-size:.72rem; color: rgba(255,255,255,.75); font-weight:600; letter-spacing:.03em; transition: color .4s var(--ease); }
 
.nav-links{ display:flex; align-items:center; gap: 1.5rem; }
.nav-links a{
  font-weight:600;
  font-size:.9rem;
  color: rgba(255,255,255,.88);
  position:relative;
  padding: .3rem 0;
  white-space:nowrap;
  transition: color .3s var(--ease);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--accent);
  transition: width .35s var(--ease);
  border-radius:2px;
}
.nav-links a:hover::after, .nav-links li.current-menu-item > a::after{ width:100%; }
.nav-links li.current-menu-item > a{ color:#fff; }
 
/* wp_nav_menu() enveloppe toujours les liens dans <ul><li>, même avec
   menu_class vide. Sans ces règles, les <li> (blocs par défaut) s'empilent
   verticalement au lieu de suivre le flex de .nav-links. */
.nav-links ul{
  display:flex;
  align-items:center;
  gap: 1.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links li{
  list-style:none;
  margin:0;
  padding:0;
}
 
.nav-actions{ display:flex; align-items:center; gap:.7rem; }
.nav-actions .btn-primary{ padding: .65rem 1.2rem; font-size:.86rem; white-space:nowrap; }
.nav-call{
  display:flex; align-items:center; gap:.5rem;
  color:#fff; font-weight:700; font-size:.9rem;
  white-space:nowrap;
}
.nav-call svg{ width:18px; height:18px; }
 
.nav-burger{
  display:none;
  border: none;
  width: 44px; height:44px;
  border-radius: 12px;
  align-items:center; justify-content:center;
  /* background: rgba(255,255,255,.12); */
  flex-direction:column; gap:5px;
  background: none;
}

.nav-burger:hover {
  background: none !important;
}

.nav-burger span{ width:20px; height:2px; background:#fff; border-radius:2px; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
 
/* Scrolled state */
.nav.scrolled{
  height: 68px;
  background: rgba(10, 47, 92, 0.94) !important;
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 30px rgba(10,47,92,.18);
}
.nav.scrolled .nav-brand img{ height:38px; }
 
/* Mobile nav panel */
.nav-mobile{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--grad-brand);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: var(--space-3);
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
}
.nav-mobile.open{ transform: translateY(0); }
.nav-mobile li{ list-style:none; }
.nav-mobile a{ font-family: var(--font-display); font-size: 1.7rem; color:#fff; font-weight:700; }
.nav-mobile .btn-primary{ margin-top: var(--space-2); }
 
@media (max-width: 1180px){
  .nav-links{ display:none; }
  .nav-call span{ display:none; }
  .nav-burger{ display:flex; }
  .nav-actions{ gap: .5rem; }
  .nav-brand-text{ display:none; }
}

@media (max-width: 480px){
  .nav-actions .btn-primary{
    padding: .55rem .8rem;
    font-size: .78rem;
  }
  .nav-call{ display:none; }
}
 
/* --------------------------------------------------------------------------
 
   8. Footer
   -------------------------------------------------------------------------- */
.footer{
  background: var(--blue-deep);
  color: rgba(255,255,255,.82);
  padding-top: var(--space-6);
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--grad-accent);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand{ display:flex; align-items:center; gap:.7rem; margin-bottom: var(--space-2); }
.footer-brand img{ height:auto; }
.footer-brand strong{ font-family:var(--font-display); color:#fff; font-size:1.1rem; }
.footer p{ color: rgba(255,255,255,.65) !important; font-size:.94rem; max-width:34ch; }
.footer h4{ color:#fff; font-size:1rem; margin-bottom: var(--space-2); font-family:var(--font-display); }
.footer-links li{ margin-bottom:.65rem; }
.footer-links a{ color: rgba(255,255,255,.72); font-size:.94rem; transition: color .3s var(--ease), padding-left .3s var(--ease); }
.footer-links a:hover{ color:#fff; padding-left:4px; }
.footer-social{ display:flex; gap:.7rem; margin-top:var(--space-2); }
.footer-social a{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.footer-social a:hover{ background: var(--accent); transform: translateY(-3px); }
.footer-social svg{ width:18px; height:18px; color:#fff; }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: var(--space-3);
  font-size:.85rem;
  color: rgba(255,255,255,.55);
  flex-wrap:wrap; gap:.8rem;
}
.footer-bottom a:hover{ color:#fff; }
 
@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}
 
/* --------------------------------------------------------------------------
   9. Sticky mobile call bar
   -------------------------------------------------------------------------- */
.call-bar{
  position: fixed;
  bottom: 0; left:0; right:0;
  z-index: 900;
  display:none;
  background: var(--grad-brand);
  padding: .8rem 1rem;
  box-shadow: 0 -10px 30px rgba(10,47,92,.25);
}
.call-bar .btn{ width:100%; }
@media (max-width: 720px){
  .call-bar{ display:flex; }
  body{ padding-bottom: 76px; }
}