/* ===== STYLE COMPLET AUTONOME ===== */
:root {
--primary: #F16E00;
--primary-dark: #D86200;
--dark: #121212;
--light: #FFFFFF;
--gray: #F5F5F5;
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--navbar-height: 70px;
}
body {
padding-top: var(--navbar-height);
}
.es-nav-container {
background-color: var(--light);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 0 5%;
height: var(--navbar-height);
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
}
.es-logo {
display: none;
}
.es-logo img {
height: 40px;
width: auto;
}
/* ===== VERSION DESKTOP ===== */
.es-desktop-menu {
display: flex;
gap: 10px;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.es-desktop-menu > li {
position: relative;
display: flex;
align-items: center;
}
.es-desktop-link {
color: var(--dark);
text-decoration: none;
padding: 10px 15px;
transition: var(--transition);
font-weight: 500;
font-size: 0.95rem;
border-radius: 6px;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.es-desktop-link:hover {
color: var(--primary);
background-color: rgba(241, 110, 0, 0.05);
}
/* Dropdown desktop */
.es-dropdown-content {
position: absolute;
top: 100%;
left: 0;
background-color: var(--light);
min-width: 240px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 100;
list-style: none;
padding: 5px 0;
}
.es-dropdown:hover .es-dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.es-dropdown-content a {
padding: 12px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
display: flex;
align-items: center;
gap: 8px;
color: var(--dark);
text-decoration: none;
transition: var(--transition);
}
.es-dropdown-content a:hover {
color: var(--primary);
background-color: rgba(241, 110, 0, 0.05);
}
/* Bouton CTA */
.es-cta-button {
background-color: var(--primary);
color: white !important;
margin-left: 10px;
padding: 10px 20px !important;
border-radius: 50px !important;
transition: var(--transition);
}
.es-cta-button:hover {
background-color: var(--primary-dark) !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(241, 110, 0, 0.3);
}
/* Badges */
.es-badge {
position: relative;
}
.es-badge::after {
content: "Nouveau";
position: absolute;
background-color: var(--primary);
color: white;
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 10px;
font-weight: bold;
}
.es-badge-date::after { content: "Nouvelles dates"; }
.es-badge-testimonial::after { content: "Nouveaux témoignages de spectateurs"; }
.es-badge-association::after { content: "Nouveaux témoignages de spectateurs"; }
/* Position badges desktop */
@media (min-width: 1025px) {
.es-badge-date::after {
bottom: -15px;
left: 70%;
transform: translateX(-50%);
}
.es-badge-testimonial::after {
top: 5px;
right: -110px;
}
.es-badge-association::after {
top: 40px;
right: -90px;
}
}
/* ===== VERSION MOBILE ===== */
.es-mobile-trigger {
display: none;
cursor: pointer;
position: absolute;
left: 50%;
transform: translateX(-50%);
align-items: center;
gap: 8px;
padding: 10px 15px;
}
.es-mobile-trigger span {
font-weight: 500;
display: block;
}
.es-burger-icon {
display: flex;
flex-direction: column;
gap: 5px;
}
.es-burger-icon span {
display: block;
width: 25px;
height: 3px;
background-color: var(--dark);
transition: var(--transition);
}
.es-mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 400px;
height: 100%;
background-color: var(--light);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
z-index: 9999;
transition: right 0.3s ease;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
}
.es-mobile-menu.active {
right: 0;
}
.es-mobile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.es-mobile-overlay.active {
opacity: 1;
visibility: visible;
}
.es-mobile-header {
display: flex;
justify-content: flex-end;
padding-bottom: 20px;
margin-bottom: 20px;
}
.es-mobile-close {
font-size: 1.5rem;
cursor: pointer;
color: var(--dark);
}
.es-mobile-link {
display: flex;
align-items: center;
padding: 12px 15px;
color: var(--dark);
text-decoration: none;
gap: 10px;
border-radius: 6px;
transition: var(--transition);
}
.es-mobile-link:hover {
background-color: rgba(241, 110, 0, 0.05);
}
.es-mobile-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: 15px;
background-color: rgba(241, 110, 0, 0.03);
border-radius: 8px;
margin: 5px 0;
}
/* Badges mobile */
.es-mobile-badge {
background: var(--primary);
color: white;
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 10px;
margin-left: 10px;
font-weight: bold;
}
/* Animation burger */
.es-mobile-trigger.active .es-burger-icon span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.es-mobile-trigger.active .es-burger-icon span:nth-child(2) {
opacity: 0;
}
.es-mobile-trigger.active .es-burger-icon span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ===== MEDIA QUERIES ===== */
@media (max-width: 1024px) {
.es-desktop-menu {
display: none;
}
.es-mobile-trigger {
display: flex;
}
}
@media (min-width: 1025px) {
.es-mobile-trigger,
.es-mobile-menu,
.es-mobile-overlay {
display: none;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Éléments du menu
const mobileBtn = document.querySelector('.es-mobile-trigger');
const mobileMenu = document.querySelector('.es-mobile-menu');
const mobileOverlay = document.querySelector('.es-mobile-overlay');
const mobileClose = document.querySelector('.es-mobile-close');
// Fonction pour ouvrir/fermer le menu
function toggleMenu() {
mobileBtn.classList.toggle('active');
mobileMenu.classList.toggle('active');
mobileOverlay.classList.toggle('active');
document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : 'auto';
}
// Fonction pour fermer le menu
function closeMenu() {
mobileBtn.classList.remove('active');
mobileMenu.classList.remove('active');
mobileOverlay.classList.remove('active');
document.body.style.overflow = 'auto';
// Fermer tous les sous-menus
document.querySelectorAll('.es-mobile-submenu').forEach(submenu => {
submenu.style.maxHeight = null;
const icon = submenu.previousElementSibling.querySelector('.fa-chevron-down');
if (icon) icon.style.transform = 'rotate(0deg)';
});
}
// Bouton burger principal
if (mobileBtn) {
mobileBtn.addEventListener('click', function(e) {
e.stopPropagation();
toggleMenu();
});
}
// Bouton fermeture
if (mobileClose) {
mobileClose.addEventListener('click', closeMenu);
}
// Overlay
if (mobileOverlay) {
mobileOverlay.addEventListener('click', closeMenu);
}
// Gestion des sous-menus mobiles
document.querySelectorAll('.es-menu-trigger').forEach(trigger => {
trigger.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const submenu = this.nextElementSibling;
const icon = this.querySelector('.fa-chevron-down');
// Fermer les autres sous-menus
document.querySelectorAll('.es-mobile-submenu').forEach(sm => {
if (sm !== submenu) {
sm.style.maxHeight = null;
const otherIcon = sm.previousElementSibling.querySelector('.fa-chevron-down');
if (otherIcon) otherIcon.style.transform = 'rotate(0deg)';
}
});
// Ouvrir/fermer le sous-menu actuel
if (submenu.style.maxHeight) {
submenu.style.maxHeight = null;
if (icon) icon.style.transform = 'rotate(0deg)';
} else {
submenu.style.maxHeight = submenu.scrollHeight + 'px';
if (icon) icon.style.transform = 'rotate(180deg)';
}
});
});
// Fermer le menu après clic sur un lien
document.querySelectorAll('.es-mobile-link:not(.es-menu-trigger)').forEach(link => {
link.addEventListener('click', closeMenu);
});
// Empêcher la propagation des clics dans le menu
if (mobileMenu) {
mobileMenu.addEventListener('click', function(e) {
e.stopPropagation();
});
}
});