* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: 'Akzidenz-Grotesk Next', sans-serif !important;
background: #f5f5f5;
overflow-x: hidden;
}/* Contenu principal */
.content {
padding: 20px;
padding-bottom: 100px;
min-height: 100vh;
}/* Barre de navigation fixe en bas */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
display: flex;
justify-content: space-around;
align-items: center;
padding: 15px 20px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 9999;
}.nav-icon {
width: 30px;
height: 30px;
cursor: pointer;
}/* Bouton hamburger central */
.menu-trigger {
position: relative;
width: 65px;
height: 65px;
background: #0E1236;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(77, 184, 179, 0.4);
margin-top: -30px;
-webkit-tap-highlight-color: transparent;
}.hamburger {
width: 28px;
height: 20px;
position: relative;
}.hamburger span {
display: block;
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: white;
border-radius: 2px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8.5px; }
.hamburger span:nth-child(3) { top: 17px; }/* Animation hamburger vers X */
.menu-trigger.active .hamburger span:nth-child(1) {
top: 8.5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}.menu-trigger.active .hamburger span:nth-child(2) {
opacity: 0;
}.menu-trigger.active .hamburger span:nth-child(3) {
top: 8.5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}/* ============================================
MENU DÉROULANT - SLIDE UP DEPUIS LE BAS
============================================ */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 65px;
background: #0E1236;
z-index: 9998;
overflow-y: auto;
padding: 30px 25px;
/* État fermé : en dessous de l'écran */
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
/* Transition - IMPORTANT: all au lieu de transform seul pour iOS */
-webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
/* Forcer accélération GPU */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* Smooth scrolling iOS */
-webkit-overflow-scrolling: touch;
}/* État ouvert : visible */
.mobile-menu.active {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}.menu-header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}.menu-header .logo {
width: 140px;
}.menu-items {
list-style: none;
}.menu-item {
margin-bottom: 8px;
}.menu-item a {
display: flex;
align-items: center;
justify-content: space-between;
color: white;
text-decoration: none;
padding: 15px 0;
font-size: 17px;
-webkit-tap-highlight-color: transparent;
}.menu-item.has-submenu > a::after {
content: '›';
font-size: 24px;
display: inline-block;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}.menu-item.has-submenu.active > a::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}/* Sous-menu */
.submenu {
list-style: none;
max-height: 0;
overflow: hidden;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
padding-left: 20px;
}.submenu.active {
max-height: 500px;
}.submenu li a {
padding: 12px 0;
font-size: 16px;
color: rgba(255,255,255,0.85);
border-bottom: 1px solid rgba(255,255,255,0.05);
}.submenu li:last-child a {
border-bottom: none;
}.menu-footer {
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
}.help-text {
color: rgba(255,255,255,0.8);
font-size: 15px;
margin-bottom: 8px;
}.phone-number {
color: white;
font-size: 22px;
font-weight: 600;
text-decoration: none;
display: block;
}
.elementor-element-66a7855 .e-con-inner {
padding: 0;
}
(function() {
var menuTrigger = document.getElementById('menuTrigger');
var mobileMenu = document.getElementById('mobileMenu');if (!menuTrigger || !mobileMenu) return;menuTrigger.addEventListener('click', function(e) {
e.preventDefault();
this.classList.toggle('active');
mobileMenu.classList.toggle('active');
});// Sous-menus
document.querySelectorAll('.submenu-trigger').forEach(function(trigger) {
trigger.addEventListener('click', function(e) {
e.preventDefault();
var parentLi = this.closest('.has-submenu');
var submenu = parentLi.querySelector('.submenu');
document.querySelectorAll('.has-submenu').forEach(function(item) {
if (item !== parentLi) {
item.classList.remove('active');
var otherSubmenu = item.querySelector('.submenu');
if (otherSubmenu) otherSubmenu.classList.remove('active');
}
});
parentLi.classList.toggle('active');
if (submenu) submenu.classList.toggle('active');
});
});// Fermer le menu sur clic lien
document.querySelectorAll('.menu-item a:not(.submenu-trigger), .submenu a').forEach(function(link) {
link.addEventListener('click', function() {
menuTrigger.classList.remove('active');
mobileMenu.classList.remove('active');
});
});
})();
5/5
