/* ========================================================= HEADER GLOBAL — NOUVELLE STRUCTURE - Desktop: bulles fines + hover - Mobile: drawer latéral (hamburger) ========================================================= */ /* -------- Base (valable desktop & mobile) ---------------- */ .site-header { background-color: #0d1b2a; color: #fff; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; font-family: 'Inter', sans-serif; position: relative; /* pas de z-index ici ! */ box-sizing: border-box; } .site-header .brand h1 { margin: 0; font-size: 1.25rem; line-height: 1.2; font-weight: 600; color: #fff; } /* Bouton hamburger (masqué en desktop) */ .nav-toggle { display: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid #ccc; background: #fff; color: #333; font-size: 20px; font-weight: 700; cursor: pointer; } /* Nav (desktop par défaut) */ .site-nav { position: static; } .nav-list { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; } /* Liens nav “plats” par défaut (mobile stylé plus bas) */ .nav-link, .btn-link { display: inline-block; padding: 8px 10px; text-decoration: none; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; } /* Backdrop mobile (caché par défaut) */ .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 20000; } /* -------- Desktop (>= 721px) ----------------------------- */ @media (min-width: 721px){ /* Bulles fines bord blanc + hover plein (style ancien) */ .site-header .nav-link, .site-header .btn-link{ color: #fff; background: transparent; border: 1px solid #fff; padding: 0.4rem 1rem; border-radius: 0.4rem; text-decoration: none; font-size: 0.9rem; line-height: 1; transition: background-color .3s, color .3s, border-color .3s; } .site-header .nav-link:hover, .site-header .btn-link:hover{ background-color: #fff; color: #0d1b2a; } } /* -------- Mobile (<= 720px) ------------------------------ */ @media (max-width: 720px){ /* Montrer le hamburger en mobile */ .nav-toggle { display: grid; place-items: center; } /* Le nav devient un drawer à droite */ .site-nav { position: fixed; top: 0; right: 0; height: 100dvh; width: min(82vw, 320px); background: #fff; color: #333; border-left: 1px solid #ddd; transform: translateX(100%); transition: transform .22s ease; z-index: 20010; /* > backdrop */ padding: 76px 16px 16px; box-shadow: -8px 0 24px rgba(0,0,0,.15); } :root[data-theme="dark"] .site-nav { background:#11161d; color:#e6e8eb; border-left-color:#1f242b; box-shadow: -8px 0 24px rgba(0,0,0,.35); } /* Liens en colonne, style “texte” (pas de bulles) */ .nav-list { flex-direction: column; gap: 4px; } .nav-link, .btn-link { width: 100%; text-align: left; padding: 10px 4px; border: 0 !important; background: transparent !important; } .nav-link + .nav-link, .btn-link + .nav-link, .nav-link + .btn-link { border-top: 1px solid #eee; } :root[data-theme="dark"] .nav-link + .nav-link, :root[data-theme="dark"] .btn-link + .nav-link, :root[data-theme="dark"] .nav-link + .btn-link { border-top-color: #283042; } /* États ouverts (classe ajoutée sur par le JS) */ .nav-open .site-nav { transform: translateX(0); } .nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } site-nav .nav-link, .site-nav .btn-link{ padding: 12px 10px; /* un peu plus de confort tactile */ border-radius: 10px; /* pastilles légères */ } /* Survol / focus (simulateur souris ou clavier) */ .site-nav .nav-link:hover, .site-nav .btn-link:hover, .site-nav .nav-link:focus-visible, .site-nav .btn-link:focus-visible{ background: rgba(0,0,0,.06); text-decoration: none; outline: none; } /* Appui (tactile) */ .site-nav .nav-link:active, .site-nav .btn-link:active{ background: rgba(0,0,0,.12); } /* Thème sombre */ :root[data-theme="dark"] .site-nav .nav-link:hover, :root[data-theme="dark"] .site-nav .btn-link:hover, :root[data-theme="dark"] .site-nav .nav-link:focus-visible, :root[data-theme="dark"] .site-nav .btn-link:focus-visible{ background: rgba(255,255,255,.06); } :root[data-theme="dark"] .site-nav .nav-link:active, :root[data-theme="dark"] .site-nav .btn-link:active{ background: rgba(255,255,255,.12); } }