/*==================================================
    ANIMATIONS.CSS
    PARTIE 1/6
    FADE • SLIDE • ZOOM
==================================================*/


/*==================================================
    VARIABLES
==================================================*/

:root{

    --animation-fast:.3s;

    --animation-normal:.6s;

    --animation-slow:1s;

}


/*==================================================
    FADE IN
==================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade-in{

    opacity:0;

    animation:fadeIn var(--animation-normal) ease forwards;

}


/*==================================================
    FADE UP
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}


/*==================================================
    FADE DOWN
==================================================*/

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-down{

    opacity:0;

    animation:fadeDown .8s ease forwards;

}


/*==================================================
    SLIDE LEFT
==================================================*/

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-left{

    opacity:0;

    animation:slideLeft .8s ease forwards;

}


/*==================================================
    SLIDE RIGHT
==================================================*/

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-right{

    opacity:0;

    animation:slideRight .8s ease forwards;

}


/*==================================================
    ZOOM IN
==================================================*/

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in{

    opacity:0;

    animation:zoomIn .8s ease forwards;

}


/*==================================================
    ZOOM OUT
==================================================*/

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.2);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-out{

    opacity:0;

    animation:zoomOut .8s ease forwards;

}


/*==================================================
    ANIMATION DELAY
==================================================*/

.delay-1{

    animation-delay:.2s;

}

.delay-2{

    animation-delay:.4s;

}

.delay-3{

    animation-delay:.6s;

}

.delay-4{

    animation-delay:.8s;

}

.delay-5{

    animation-delay:1s;

}


/*==================================================
    FIN PARTIE 1/6
==================================================*/
/*==================================================
    ANIMATIONS.CSS
    PARTIE 2/6
    ROTATE • BOUNCE • PULSE • FLOAT
==================================================*/


/*==================================================
    ROTATION
==================================================*/

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.rotate{

    animation:rotate 2s linear infinite;

}


/*==================================================
    ROTATION LENTE
==================================================*/

.rotate-slow{

    animation:rotate 8s linear infinite;

}


/*==================================================
    BOUNCE
==================================================*/

@keyframes bounce{

    0%,

    20%,

    50%,

    80%,

    100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-18px);

    }

    60%{

        transform:translateY(-10px);

    }

}

.bounce{

    animation:bounce 2s infinite;

}


/*==================================================
    PULSE
==================================================*/

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}

.pulse{

    animation:pulse 1.8s ease-in-out infinite;

}


/*==================================================
    FLOAT
==================================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.float{

    animation:floating 3s ease-in-out infinite;

}


/*==================================================
    SHAKE
==================================================*/

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    25%{

        transform:translateX(-6px);

    }

    50%{

        transform:translateX(6px);

    }

    75%{

        transform:translateX(-4px);

    }

    100%{

        transform:translateX(0);

    }

}

.shake{

    animation:shake .6s ease;

}


/*==================================================
    HEARTBEAT
==================================================*/

@keyframes heartbeat{

    0%{

        transform:scale(1);

    }

    14%{

        transform:scale(1.15);

    }

    28%{

        transform:scale(1);

    }

    42%{

        transform:scale(1.15);

    }

    70%{

        transform:scale(1);

    }

}

.heartbeat{

    animation:heartbeat 1.8s infinite;

}


/*==================================================
    WOBBLE
==================================================*/

@keyframes wobble{

    0%{

        transform:translateX(0);

    }

    15%{

        transform:translateX(-12px) rotate(-5deg);

    }

    30%{

        transform:translateX(10px) rotate(3deg);

    }

    45%{

        transform:translateX(-8px) rotate(-3deg);

    }

    60%{

        transform:translateX(6px) rotate(2deg);

    }

    75%{

        transform:translateX(-3px) rotate(-1deg);

    }

    100%{

        transform:translateX(0);

    }

}

.wobble{

    animation:wobble 1s ease;

}


/*==================================================
    HOVER EFFECTS
==================================================*/

.hover-grow{

    transition:transform .3s ease;

}

.hover-grow:hover{

    transform:scale(1.05);

}

.hover-lift{

    transition:all .3s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

}


/*==================================================
    FIN PARTIE 2/6
==================================================*/
/*==================================================
    ANIMATIONS.CSS
    PARTIE 3/6
    LOADER • SPINNER • PROGRESS • RIPPLE
==================================================*/


/*==================================================
    LOADER
==================================================*/

.loader{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.98);

    z-index:99999;

    transition:opacity .5s ease,
               visibility .5s ease;

}

.loader.hidden{

    opacity:0;

    visibility:hidden;

}


/*==================================================
    SPINNER
==================================================*/

.spinner{

    width:70px;

    height:70px;

    border:6px solid rgba(0,0,0,.08);

    border-top:6px solid var(--primary);

    border-radius:50%;

    animation:spinner 1s linear infinite;

}

@keyframes spinner{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
    DOUBLE SPINNER
==================================================*/

.double-spinner{

    position:relative;

    width:80px;

    height:80px;

}

.double-spinner::before,

.double-spinner::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:5px solid transparent;

}

.double-spinner::before{

    border-top-color:var(--primary);

    animation:spinner 1.2s linear infinite;

}

.double-spinner::after{

    border-bottom-color:var(--secondary);

    animation:spinner 2s linear infinite reverse;

}


/*==================================================
    RIPPLE
==================================================*/

@keyframes ripple{

    from{

        transform:scale(.2);

        opacity:1;

    }

    to{

        transform:scale(2);

        opacity:0;

    }

}

.ripple{

    position:relative;

    overflow:hidden;

}

.ripple::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:25px;

    height:25px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    transform:translate(-50%,-50%) scale(0);

    pointer-events:none;

}

.ripple:hover::after{

    animation:ripple .8s ease-out;

}


/*==================================================
    PROGRESS BAR
==================================================*/

.progress{

    width:100%;

    height:8px;

    background:#e9ecef;

    border-radius:50px;

    overflow:hidden;

}

.progress-bar{

    width:0;

    height:100%;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--secondary)

    );

    animation:progressFill 2.5s ease forwards;

}

@keyframes progressFill{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}


/*==================================================
    SKELETON LOADING
==================================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:#ececec;

}

.skeleton::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:150%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.7),

        transparent

    );

    animation:skeleton 1.6s infinite;

}

@keyframes skeleton{

    from{

        left:-150%;

    }

    to{

        left:150%;

    }

}


/*==================================================
    CLIGNOTEMENT
==================================================*/

@keyframes blink{

    0%,

    100%{

        opacity:1;

    }

    50%{

        opacity:.3;

    }

}

.blink{

    animation:blink 1s infinite;

}


/*==================================================
    FIN PARTIE 3/6
==================================================*/
/*==================================================
    ANIMATIONS.CSS
    PARTIE 4/6
    HERO • CARTES • BOUTONS • ICÔNES
==================================================*/


/*==================================================
    HERO
==================================================*/

.hero-content{

    animation:heroFade 1.2s ease forwards;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.hero-image{

    animation:heroImage 1.5s ease forwards;

}

@keyframes heroImage{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*==================================================
    HERO BADGE
==================================================*/

.hero-badge{

    animation:badgeFloat 3s ease-in-out infinite;

}

@keyframes badgeFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
    HERO SCROLL
==================================================*/

.scroll-down{

    animation:scrollBounce 2s infinite;

}

@keyframes scrollBounce{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(12px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
    CARTES
==================================================*/

.service-card,

.technology-card,

.culture-card,

.livestock-card,

.news-card,

.partner-card,

.testimonial-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.service-card:hover,

.technology-card:hover,

.culture-card:hover,

.livestock-card:hover,

.news-card:hover,

.partner-card:hover,

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}


/*==================================================
    IMAGES DES CARTES
==================================================*/

.service-card img,

.technology-card img,

.culture-card img,

.livestock-card img,

.news-card img{

    transition:

        transform .6s ease;

}

.service-card:hover img,

.technology-card:hover img,

.culture-card:hover img,

.livestock-card:hover img,

.news-card:hover img{

    transform:scale(1.08);

}


/*==================================================
    BOUTONS
==================================================*/

.btn,

.btn-primary,

.btn-secondary,

.btn-outline{

    position:relative;

    overflow:hidden;

    transition:all .35s ease;

}

.btn:hover,

.btn-primary:hover,

.btn-secondary:hover,

.btn-outline:hover{

    transform:translateY(-3px);

}

.btn:active,

.btn-primary:active,

.btn-secondary:active,

.btn-outline:active{

    transform:scale(.98);

}


/*==================================================
    EFFET LUMIÈRE
==================================================*/

.btn::before,

.btn-primary::before,

.btn-secondary::before,

.btn-outline::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.35);

    transform:skewX(-25deg);

    transition:left .7s ease;

}

.btn:hover::before,

.btn-primary:hover::before,

.btn-secondary:hover::before,

.btn-outline:hover::before{

    left:140%;

}


/*==================================================
    ICÔNES
==================================================*/

.icon{

    transition:

        transform .3s ease,

        color .3s ease;

}

.icon:hover{

    transform:scale(1.15) rotate(8deg);

}


/*==================================================
    RÉSEAUX SOCIAUX
==================================================*/

.social-links a{

    transition:

        transform .35s ease,

        background .35s ease;

}

.social-links a:hover{

    transform:translateY(-6px);

}


/*==================================================
    FIN PARTIE 4/6
==================================================*/
/*==================================================
    ANIMATIONS.CSS
    PARTIE 5/6
    GALERIE • LIGHTBOX • FAQ • FORMULAIRES
==================================================*/


/*==================================================
    GALERIE
==================================================*/

.gallery-item{

    overflow:hidden;

    position:relative;

    border-radius:12px;

}

.gallery-item img{

    transition:

        transform .6s ease,

        filter .4s ease;

}

.gallery-item:hover img{

    transform:scale(1.12);

    filter:brightness(1.08);

}


/*==================================================
    OVERLAY GALERIE
==================================================*/

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.55);

    opacity:0;

    transition:opacity .4s ease;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay i,

.gallery-overlay svg{

    color:#ffffff;

    font-size:2rem;

    animation:zoomIn .4s ease;

}


/*==================================================
    LIGHTBOX
==================================================*/

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.88);

    opacity:0;

    visibility:hidden;

    transition:

        opacity .35s ease,

        visibility .35s ease;

    z-index:99999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:12px;

    animation:zoomIn .35s ease;

}

.lightbox-close{

    position:absolute;

    top:25px;

    right:30px;

    cursor:pointer;

    transition:transform .3s ease;

}

.lightbox-close:hover{

    transform:rotate(90deg);

}


/*==================================================
    FAQ
==================================================*/

.faq-item{

    transition:

        background .3s ease,

        box-shadow .3s ease;

}

.faq-item.active{

    box-shadow:0 12px 25px rgba(0,0,0,.08);

}

.faq-item h3{

    cursor:pointer;

    transition:color .3s ease;

}

.faq-item.active h3{

    color:var(--primary);

}

.faq-item p{

    animation:fadeDown .35s ease;

}


/*==================================================
    FORMULAIRES
==================================================*/

input,

textarea,

select{

    transition:

        border-color .3s ease,

        box-shadow .3s ease,

        background .3s ease;

}

input:focus,

textarea:focus,

select:focus{

    box-shadow:0 0 0 4px rgba(46,125,50,.15);

}

input.error,

textarea.error,

select.error{

    animation:shake .45s ease;

}


/*==================================================
    BOUTON ENVOI
==================================================*/

button[type="submit"]{

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

button[type="submit"]:hover{

    transform:translateY(-3px);

}

button[type="submit"]:active{

    transform:scale(.97);

}


/*==================================================
    CHAMPS VALIDÉS
==================================================*/

.is-valid{

    animation:pulse .5s ease;

}

.is-invalid{

    animation:shake .5s ease;

}


/*==================================================
    FIN PARTIE 5/6
==================================================*/
/*==================================================
    ANIMATIONS.CSS
    PARTIE 6/6
    PREMIUM • SCROLL • ACCESSIBILITÉ • OPTIMISATIONS
==================================================*/


/*==================================================
    APPARITION AU SCROLL
==================================================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/*==================================================
    EFFET PARALLAX
==================================================*/

.parallax{

    overflow:hidden;

}

.parallax img{

    transition:transform .2s linear;

    will-change:transform;

}


/*==================================================
    EFFET GLASSMORPHISM
==================================================*/

.glass{

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.25);

}


/*==================================================
    EFFET GRADIENT ANIMÉ
==================================================*/

.gradient-animation{

    background-size:300% 300%;

    animation:gradientMove 8s ease infinite;

}

@keyframes gradientMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}


/*==================================================
    EFFET BRILLANCE
==================================================*/

.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:skewX(-25deg);

}

.shine:hover::before{

    animation:shine 1s ease;

}

@keyframes shine{

    from{

        left:-150%;

    }

    to{

        left:160%;

    }

}


/*==================================================
    CURSEUR SUR ÉLÉMENTS CLIQUABLES
==================================================*/

a,

button,

.btn,

input[type="submit"],

input[type="button"]{

    cursor:pointer;

}


/*==================================================
    ACCESSIBILITÉ
==================================================*/

:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:3px;

}


/*==================================================
    RÉDUCTION DES ANIMATIONS
==================================================*/

@media (prefers-reduced-motion:reduce){

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==================================================
    ACCÉLÉRATION GPU
==================================================*/

.hero,

.gallery-item,

.service-card,

.technology-card,

.culture-card,

.livestock-card,

.news-card,

.partner-card,

.testimonial-card,

.btn{

    transform:translateZ(0);

    backface-visibility:hidden;

    will-change:transform;

}


/*==================================================
    FIN DU FICHIER animations.css
==================================================*/