@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Animation du header - descend du haut */
@keyframes slideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animation du logo - rotation + zoom */
@keyframes logoEntrance {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    70% {
        transform: scale(1.1) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}
@keyframes slideInRight {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation fade in simple */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ===== STYLES DU HEADER ===== */

.div-header {
    background: linear-gradient(#FFF6EE, #FFF1E4);
    /* Animation d'entrée du header */
    animation: slideDown 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.App-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 80px;
    height: 90px;
    position: relative;
}

/* Animation du logo */
.App-header img {
    animation: logoEntrance 1s ease-out 0.3s backwards;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
    display: inline-block;
    margin-right: 40px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
   
    animation: slideInRight 0.6s ease-out backwards;
}


ul li:nth-child(1) { animation-delay: 0.5s; }
ul li:nth-child(2) { animation-delay: 0.6s; }
ul li:nth-child(3) { animation-delay: 0.7s; }
ul li:nth-child(4) { animation-delay: 0.8s; }
ul li:nth-child(5) { animation-delay: 0.9s; }

ul li:hover {
    transition: transform 0.3s ease-in-out;
    transform: scale(1.1);
    border-bottom: 3px solid #FF802B;
}

/* Menu hamburger */
.menu-hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1001;
}

.menu-hamburger span {
    width: 30px;
    height: 3px;
    background-color: #333;
    margin: 4px 0;
    transition: 0.3s;
}

/* Animation du hamburger quand il apparait */
.menu-hamburger.visible {
    animation: fadeIn 0.5s ease-out;
}

/* Menu mobile */
.mobile-menu {
    display: none;
}

/* Media query pour mobile */
@media screen and (max-width: 768px) {
    .App-header {
        margin: 0 20px;
    }
    
    /* Cacher le menu desktop */
    .App-header nav {
        display: none;
    }
    
    /* Afficher le hamburger */
    .menu-hamburger {
        display: flex;
        animation: fadeIn 0.6s ease-out 0.5s backwards;
    }
    
    /* Menu mobile */
    .mobile-menu {
        position: fixed;
        top: 90px;
        left: 0;
        width: 100%;
        height: calc(100vh - 90px);
        z-index: 1000;
        padding: 40px 0;
        background: linear-gradient(135deg, #FFF6EE 0%, #FFE8D6 100%);
        /* Animation de gauche à droite */
        transform: translateX(-100%);
        transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .mobile-menu.active {
        display: block;
        transform: translateX(0);
    }
    
    .mobile-menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: 100%;
        margin: auto 20px;
        padding: auto 20px;
        justify-content: center;
    }
    
    /* Animation des items du menu mobile */
    .mobile-menu.active ul li {
        animation: slideInRight 0.5s ease-out backwards;
    }
    
    .mobile-menu.active ul li:nth-child(1) { animation-delay: 0.1s; }
    .mobile-menu.active ul li:nth-child(2) { animation-delay: 0.2s; }
    .mobile-menu.active ul li:nth-child(3) { animation-delay: 0.3s; }
    .mobile-menu.active ul li:nth-child(4) { animation-delay: 0.4s; }
    .mobile-menu.active ul li:nth-child(5) { animation-delay: 0.5s; }
    
    .mobile-menu ul li {
        display: block;
        margin: 20px 0;
        color: black;
        font-size: 28px;
    }
}

/* Animation au hover sur mobile */
@media screen and (max-width: 768px) {
    .mobile-menu ul li:hover {
        transform: scale(1.1);
        color: #FF802B;
        transition: all 0.3s ease;
    }
}