/*
Theme Name: hello-elementor-child
Theme URI: 
Description: Thème enfant pour VDArchitecture - Version optimisée CLS
Author: Jim
Template: hello-elementor
Version: 3.1.0
*/

/* ==========================================================================
   1. FIXES PRIORITAIRES POUR LE CLS (LOGO & IMAGES)
   ========================================================================== */

/* Fix Logo : On utilise les dimensions exactes pour réserver l'espace */
.header_logo img,
.attachment-full.size-full.wp-image-9 {
    max-width: 180px !important;
    /* Largeur d'origine */
    height: auto !important;
    /* Empêche la déformation constatée */
    aspect-ratio: 299 / 160 !important;
    /* Réserve la place */
    display: inline-block;
}

/* Fix Hero Image Mobile */
@media (max-width: 767px) {

    .home-heroImg img,
    .wp-image-2779 {
        /*width: 100vw !important;*/
        height: 100vh;
        aspect-ratio: 600 / 1024 !important;
        /* Ratio mobile */
        display: block;
    }
}

/* ==========================================================================
   2. ÉTATS PAR DÉFAUT (MOBILE & GLOBALE) - SCORE CLS = 0
   ========================================================================== */

/* On force tout à être visible par défaut pour éviter le "pop" sur mobile */
.home-heroTitle,
.home-heroDivider,
.home-heroTxt,
.container-projets,
.home-divider,
.gsapOther-page__title,
.js-split {
    opacity: 1;
    visibility: visible !important;
    transform: none;
    /*animation: none;*/
}

.section__titre,
.home-domaine__txt {
    opacity: 0;
}

/* On s'assure que la ligne occupe sa place */
.home-heroDivider {
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
}

/* ==========================================================================
   3. ANIMATIONS DESKTOP (UNIQUEMENT >= 1024px)
   ========================================================================== */

@media (min-width: 1024px) {

    /* On cache pour lancer les animations keyframes */
    /* On utilise l'ID ou la classe body pour être plus précis qu'Elementor */
    body.home .home-heroImg {
        transform: scale(1.1);
        animation: heroScale 1s ease-out 0.8s forwards !important;

    }

    body.home .home-heroTitle {
        opacity: 0;
        animation: fadeInUp 1s ease-out 0.8s forwards !important;
    }

    body.home .home-heroDivider {
        width: 0%;
        height: 1px;
        background-color: #fff;
        transform-origin: left center;
        animation: lineGrow 1s ease-out 1s forwards !important;
    }

    body.home .home-heroTxt {
        opacity: 0;
        animation: fadeInUp 1s ease-out 1.3s forwards !important;
    }

    /* Préparation des éléments pour GSAP plus bas dans la page */
    .section__titre {
        opacity: 0;
    }

    .home-domaine__txt {
        opacity: 1;
    }

    .home-divider {

        width: 0%;
        opacity: 1;
    }

    .container-projets {
        opacity: 1;
        transform: translateY(100px);
    }

    #home-section2_video {
        transform: scale(0.8);
    }


}

.home-domaine__txt {
    opacity: 1;
}

.home-title {
    opacity: 0;
}

.home-text_muted {
    opacity: 0;
}

/* ==========================================================================
   4. DÉFINITION DES KEYFRAMES
   ========================================================================== */
@keyframes heroScale {
    from {
        transform: scale(1.1);
    }

    to {
        transform: scale(1);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: ÒtranslateY(0);
    }
}

@keyframes lineGrow {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* ==========================================================================
   5. FALLBACK SÉCURITÉ (SI JS DÉSACTIVÉ OU PRELOAD BLOQUÉ)
   ========================================================================== 

html.no-js .home-title,
html.no-js .home-heroDivider,
html.no-js .home-heroTxt {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}*/