/* ============================================
   MIDDLF - Composant : Header / Navigation
   Injecte dynamiquement dans <div id="site-header"> par js/header.js
   ============================================ */
:root{--site-header-height:76px;}

header{
  position:fixed; top:0; left:0; width:100%; z-index:40;
  padding:10px 0;
  background:rgba(247, 249, 248, 0.94);
  border-bottom:1px solid rgba(15, 76, 58, 0.10);
  box-shadow:0 10px 28px rgba(9, 42, 32, 0.07);
  backdrop-filter:blur(14px);
}
header .wrap{display:flex; justify-content:space-between; align-items:center; gap:24px;}

.logo{display:flex; align-items:center; gap:10px; min-width:0;}
.logo-only{display:inline-flex;}
.logo-image{width:58px; height:58px; object-fit:contain; flex-shrink:0;}

nav ul{display:flex; gap:12px;}
nav a{
  position:relative; display:block; padding:9px 12px; text-decoration:none;
  font-size:13px; color:var(--green); border-radius:999px; font-weight:500;
}
nav a::after{
  content:''; position:absolute; left:12px; right:12px; bottom:5px; height:2px;
  transform:scaleX(0); transform-origin:center; background:var(--cyan); transition:transform .22s ease;
}
nav a:hover{
  color:var(--green-strong);
  background:rgba(39, 183, 230, 0.10);
}
nav a.active{
  color:var(--green-strong);
  font-weight:600;
  background:rgba(15, 76, 58, 0.08);
}
nav a.active::after, nav a:hover::after{transform:scaleX(1);}

.btn-nav{
  background:linear-gradient(135deg, var(--green) 0%, var(--green-strong) 100%);
  color:#fff; padding:11px 18px; border-radius:999px;
  font-size:13px; text-decoration:none; font-weight:600;
  box-shadow:0 12px 24px rgba(15, 76, 58, 0.18);
}
.btn-nav:hover{
  background:linear-gradient(135deg, #12614B 0%, #0B4132 100%);
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(15, 76, 58, 0.24);
}

.nav-toggle{
  display:none; background:var(--surface); border:1px solid rgba(15, 76, 58, 0.14); color:var(--green);
  width:40px; height:40px; border-radius:12px; font-size:16px; cursor:pointer;
  align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(8, 46, 36, 0.08);
}
.nav-toggle:hover{background:var(--cyan-soft); border-color:rgba(39, 183, 230, 0.35); color:var(--green-strong);}

@media (max-width:980px){
  :root{--site-header-height:68px;}
  nav{
    display:none; position:absolute; top:100%; left:0; width:100%;
    background:rgba(247, 249, 248, 0.98); padding:10px 0 12px;
    border-bottom:1px solid rgba(15, 76, 58, 0.10);
    box-shadow:0 16px 34px rgba(9, 42, 32, 0.10);
  }
  nav.open{display:block;}
  nav ul{flex-direction:column; gap:0; padding:0 32px;}
  nav li{border-bottom:1px solid rgba(15, 76, 58, 0.08);}
  nav a{display:block; padding:14px 0; color:var(--green); border-radius:0; background:none;}
  nav a:hover, nav a.active{background:none;}
  nav a::after{left:0; right:auto; width:52px; bottom:8px;}
  .nav-toggle{display:flex;}
  .btn-nav{display:none;}
  .logo-image{width:50px; height:50px;}
}