/* =========================================================
   HEADER.CSS
   RÔLE : design commun du header Zutil
   UTILISÉ PAR : toutes les pages
========================================================== */
/* =========================================================
       HEADER — logo + navigation + raccourci Ctrl K
    ========================================================== */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      padding: 16px 0;
      backdrop-filter: blur(20px);
      background: rgba(246,247,251,0.72);
      border-bottom: 1px solid rgba(15,23,42,0.05);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .logo {
      font-size: 1.9rem;
      font-weight: 900;
      letter-spacing: -1.5px;
      color: var(--dark);
    }

    .logo span { color: var(--blue); }

    .nav-center {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .nav-center a {
      padding: 10px 15px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 700;
      transition: 0.2s ease;
    }

    .nav-center a:hover {
      background: var(--white);
      color: var(--dark);
    }
    
    /* =========================================================
   RESPONSIVE HEADER
========================================================== */
@media (max-width: 650px) {
  header {
    position: static;
  }

  .nav-center {
    display: none;
  }
}