/* Animation d'introduction améliorée */
.intro-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
}

.intro-container {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro-logo {
    animation: logoZoomIn 1.5s ease forwards;
}

.intro-logo-image {
    width: 150px;
    height: auto;
}

.no-scroll {
    overflow: hidden;
    height: 100vh;
}
/* INTRO Slogan */
.intro-slogan {
    font-size: 1.5em;
    color: #555;
    margin-top: 20px;
    opacity: 0;
    animation: fadeInText 1.5s ease forwards 0.8s;
    line-height: 1.8em;
    text-align: center; /* Centre le texte */
}

.slogan-part {
    display: inline-block;
    opacity: 0;
    position: relative;
    animation: sweepIn 0.5s ease forwards;
    text-align: center;
}

.slogan-part:nth-child(1)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0px;
    left: 0;
    background-color: #7FB685; /* Vert */
    animation: underlineGrow 1s ease forwards 0.5s;
}

.slogan-part:nth-child(3)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0px;
    left: 0;
    background-color: #E57373; /* Rouge */
    animation: underlineGrow 1s ease forwards 0.7s;
}

.slogan-part:nth-child(5)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0px;
    left: 0;
    background-color: #64B5F6; /* Bleu */
    animation: underlineGrow 1s ease forwards 0.9s;
}

/* Keyframes pour animations intro */
@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sweepIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes underlineGrow {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

/* Cacher l'intro après l'animation */
.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}