/* menu.css ---------------------------------------------------- CSS global du menu TeuTeu. Ce fichier doit être chargé sur toutes les pages : index.html, minecraft.html, equipe.html, etc. Il stylise uniquement le menu injecté par : /JS/menu.js À mettre dans le de chaque page : */ /* ========================= VARIABLES MENU ========================= */ :root { --menu-bg: rgba(7, 9, 18, 0.84); --menu-border: rgba(255, 255, 255, 0.12); --menu-text: #f7f9ff; --menu-muted: #a9b5d6; --menu-cyan: #58f0ff; --menu-blue: #00b7ff; --menu-green: #39ff88; --menu-green-light: #8dffbd; --menu-purple: #d8b4fe; --menu-magenta: #ff4fd8; } /* ========================= HEADER GLOBAL ========================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--menu-bg); backdrop-filter: blur(18px); border-bottom: 1px solid var(--menu-border); } /* Conteneur du menu */ .navbar { width: min(1180px, calc(100% - 32px)); margin: auto; min-height: 78px; display: flex; align-items: center; justify-content: space-between; } /* ========================= LOGO / MARQUE ========================= */ .brand { display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--menu-text); text-decoration: none; } /* IMPORTANT : Cette règle empêche le logo du menu de s'afficher en énorme. */ .brand-logo { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(88, 240, 255, 0.45)); } .brand-text { font-size: 1.1rem; } /* ========================= LIENS DU MENU ========================= */ .nav-links { display: flex; align-items: center; gap: 26px; color: var(--menu-muted); font-weight: 700; } /* Liens normaux */ .nav-links a { color: inherit; text-decoration: none; transition: color 0.2s ease, text-shadow 0.2s ease; } /* Survol des liens normaux */ .nav-links a:hover { color: var(--menu-cyan); text-shadow: 0 0 14px rgba(88, 240, 255, 0.34); } /* Liens de jeux ---------------------------------------------------- Pour le lien Minecraftclass="mc-link". */ .nav-links a.mc-link { color: var(--menu-green); } .nav-links a.mc-link:hover { color: var(--menu-green-light); text-shadow: 0 0 14px rgba(57, 255, 136, 0.42); } /* Liens de membres ---------------------------------------------------- Pour le lien vers la page Membres, ajouter class="member-link" dans menu.js */ .nav-links a.member-link { color: var(--menu-magenta); } .nav-links a.member-link:hover { color: var(--menu-purple); text-shadow: 0 0 14px rgba(255, 79, 216, 0.42); } /* Lien actif ---------------------------------------------------- Optionnel. Tu peux ajouter class="active-link" dans menu.js pour afficher la page actuelle. */ .nav-links a.active-link { color: var(--menu-magenta); text-shadow: 0 0 14px rgba(255, 79, 216, 0.42); } /* ========================= BOUTON BURGER MOBILE ========================= */ .nav-toggle { display: none; width: 46px; height: 42px; border: 1px solid var(--menu-border); background: rgba(255, 255, 255, 0.05); border-radius: 12px; cursor: pointer; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--menu-text); margin: 5px auto; } /* ========================= RESPONSIVE MENU ========================= */ @media screen and (max-width: 720px) { .nav-toggle { display: block; } .nav-links { position: absolute; top: 78px; left: 16px; right: 16px; display: none; flex-direction: column; align-items: stretch; gap: 0; background: rgba(13, 19, 36, 0.98); border: 1px solid var(--menu-border); border-radius: 18px; overflow: hidden; } .nav-links.open { display: flex; } .nav-links a { padding: 16px 18px; border-bottom: 1px solid var(--menu-border); } .nav-links a:last-child { border-bottom: none; } }