/* Style général du bouton Hamburger */
.hamburger {
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    display: inline-block;
    padding: 0px; /* Réduction du padding */ 
}

.hamburger:hover {
    background-color: transparent !important;
}

/* Conteneur du menu */
.mobile-menu-overlay {
    position: fixed;
    top: 76px; /* Ajuste selon la hauteur de ton header Astra */
    left: 0;
    width: 100%;
    height: calc(100vh - 76px);
    background: rgba(0, 0, 0, 0.9);
    display: none;
    z-index: 999;
}

/* Activation du menu */
.mobile-menu-overlay.active {
    display: block;
}

/* Contenu du menu */
.mobile-menu-container {
    width: 100%;
    height: 100%;
    background: var(--ast-global-color-1);
    overflow-y: auto;
    padding: 0px;
}

/* Animation Hamburger */
.hamburger-box {
    height: 10px; /* Réduction */
    display: inline-block;
    position: relative;
    width: 28px; /* Réduction */
}

.hamburger-inner {
    display: block;
    position: relative;
    top: 50%;
    transition: transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: var(--ast-global-color-1);
    border-radius: 4px;
    content: "";
    display: block;
    height: 3px; /* Épaisseur réduite */
    position: absolute;
    width: 28px; /* Largeur réduite */
    transition: transform 0.15s ease;
}

.hamburger-inner::before {
    top: -8px; /* Espacement réduit */
}

.hamburger-inner::after {
    bottom: -8px; /* Espacement réduit */
}

/* Animation "Squeeze" */
.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.1s;
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.1s 0.14s ease, opacity 0.1s ease;
}

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.1s 0.14s ease, transform 0.1s ease;
}

/* Animation lors de l'activation */
.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.14s;
}

.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease, opacity 0.1s 0.14s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease, transform 0.1s ease;
}

/* Ajustements pour une taille plus compacte */
button.hamburger {
    padding: 0 !important;
    border: none !important;
    width: 32px; /* Ajustement */
    height: 32px; /* Ajustement */
}