/* ==========================================================================
   Menu Styles - Centralized
   ========================================================================== */

/* --- Menu Toggle & Overlay --- */
.menu-toggle {
    color: var(--textehomeColor);
    font-size: 35px;
    cursor: pointer;
    z-index: 5001; /* Doit être supérieur à l'overlay du menu */
    transition: transform 0.3s ease;
}

.menu-toggle:hover {
    color: var(--textehomeHoverColor);
}

.menu-toggle.active {
    transform: rotate(90deg);
    color: black !important; /* var(--closeMenuColor, black)  Use a variable for the active color */
}

.menu-toggle.active i::before {
    content: "\f00d";
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(-100%);
    transition: transform 0.4s ease, background-color 0.4s ease;
}

.menu-overlay.active {
    transform: translateY(0);
    background-color: rgba(255, 255, 255, 1);
}

.close-menu {
    position: absolute;
    top: 50px;
    right: 40px;
    color: var(--closeMenuColor, white); /* Default to white, can be overridden */
    font-size: 30px;
    cursor: pointer;
    z-index: 3;
}

/* --- Menu Content --- */
.menu-columns {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    max-width: 500px;
    position: relative;
    z-index: 2;
}

.menu-column {
    align-items: center;
}

.menu-link {
    color: var(--texteMenuLink, rgba(126, 126, 126, 0.5));
    text-decoration: none;
    font-family: var(--liensFont);
    font-size: 18px;
    margin: 10px 0;
    display: block;
    transition: color 0.3s;
    position: relative; /* For underline effect */
}

.menu-link:hover {
    color: var(--texteMenuHover, black); /* Default to black, can be overridden */
}

/* Style pour le lien actif quand le menu est ouvert */
.menu-overlay.active .menu-link.active {
    color: var(--texteMenuActive, black);
    font-weight: bold;
}

/* --- Menu Footer Image --- */
.menu-footer-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    z-index: 1; 
}

.menu-overlay.active .menu-footer-image {
    visibility: visible;
    opacity: 1;
    transition: opacity 1.5s ease 1.5s; 
}

/* --- Underline Effect --- */
.underline-svg {
  --path-distance: -2; /* Default offset */
  position: absolute;
  bottom: calc(var(--path-distance) * 1px);
  left: 0;
  width: 100%;
  height: 12px;
  pointer-events: none;
  opacity: 0;
}

.underline-svg svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.underline-svg path {
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: round;
  fill: none;
  --path-length: 1000; /* Default, calculated by JS */
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
}

@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}
@keyframes drawOut {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: calc(var(--path-length) * -1); }
}

.menu-link:hover .underline-svg { opacity: 1; }
.menu-link:hover .underline-svg path { animation: drawIn calc(0.24s * 2) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.menu-link:not(:hover) .underline-svg path { animation: drawOut 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-delay: 0.1s; }

/* --- Responsive Menu Adjustments --- */
@media (max-width: 768px) {
    .menu-columns {
        width: 90%;
        text-align: center;
    }
    .menu-column {
        padding: 10px 0;
    }
    .menu-link {
        font-size: 20px;
        margin: 15px 0;
    }
    .close-menu {
        top: 30px;
        right: 30px;
    }
}

@media (max-width: 480px) {
    .menu-link {
        font-size: 18px;
    }
}