/* _content/VNFacade/Components/Layout/Footer.razor.rz.scp.css */
/* Footer global - Desktop first */

.container-footer[b-vv35ix7o93] {
    width:100%;
    display:flex;
    flex-direction:row;
    color: black;
    position:relative;
    padding-bottom: 4rem;
}

.footer-col1[b-vv35ix7o93] {
    border-right: solid #326a8b 1px;
}

.footer-col3[b-vv35ix7o93] {
    border-left: solid #326a8b 1px;

}

.footer-col1[b-vv35ix7o93], .footer-col3[b-vv35ix7o93] {
    width: 30%;
    display: flex;
    flex-direction: column;
    
    margin-top: 4rem;

}

.footer-col2[b-vv35ix7o93] {
    width: 30%;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    margin-top: 4rem;
}

/* Logo entreprise desktop */
.logo-general-footer[b-vv35ix7o93] {
    display: flex;
    justify-content: center;
    display: inline-block;
    padding-right: 0.8rem;
    /*margin: 0;*/
}

.logo-size1-footer[b-vv35ix7o93] {
    width: 7rem;
    height: auto;
}

.logo-size2-footer[b-vv35ix7o93] {
    width: 100px;
    height: auto;
}

.logo-size3-footer[b-vv35ix7o93] {
    width: 60px;
    height: auto;
}

.logo-size4-footer[b-vv35ix7o93] {
    width: 40px;
    height: auto;
}


.badge-footer[b-vv35ix7o93] {
    display:flex;
    flex-direction:column;
    justify-content:center;
    width: 10rem;
    height: 3rem;
    align-content:center;
    align-items:center;
    background-color: var(--color-CTA-secondary);
    color: white;
    padding: 0.2rem 0.5rem;
    margin-bottom:1rem;
    border-radius: 0.7rem;
    z-index: 1;
}





/* ================================
   MEDIA QUERIES
================================= */

/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {

    .f-size-medium[b-vv35ix7o93] {
        font-size: 1.8rem !important;
    }

    .f-size-big[b-vv35ix7o93] {
        font-size: 2.3rem !important;
    }


    .master-padding-left[b-vv35ix7o93] {
        padding-left: 3rem;
    }
    .container-footer[b-vv35ix7o93] {
        flex-wrap: wrap; /* Permet le passage à la ligne */
        justify-content: flex-start;

    }

    .footer-col1[b-vv35ix7o93] {
        width: 50%; 
        text-align: center;
    }

    .footer-col2[b-vv35ix7o93] {
        width: 50%;
        border-right: none;
        text-align: center;
    }


    .footer-col3[b-vv35ix7o93] {
        width: 100%; /* Prend toute la largeur en dessous */
        border-left: none;
        border-top: solid #326a8b 1px; /* Séparation horizontale */
        padding-left: 2rem;
        text-align: center;
    }

        .footer-col1 .container-row[b-vv35ix7o93],
        .footer-col2 .container-row[b-vv35ix7o93],
        .footer-col3 .container-row[b-vv35ix7o93] {
            justify-content: center; /* Centre les réseaux sociaux */
            align-content: center;
            align-items: center;
            margin: 0;
            padding: 1rem 0;
        }

    .badge-footer[b-vv35ix7o93] {
        margin-left: auto !important;
        margin-right: auto !important;
        /* Sécurité pour Blazor : s'assurer que le lien <a> à l'intérieur ne casse pas le flex */
        display: flex;
        justify-content: center;
        width:auto !important;
        min-width:15rem !important;

    }

    .logo-size1-footer[b-vv35ix7o93] {
        width: 15rem !important;
        height: auto;
    }
    
}



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {

    .master-padding-left[b-vv35ix7o93] {
        padding-left: 3rem;
    }
    .f-size-medium[b-vv35ix7o93] {
        font-size: 1.2rem !important;
    }

    .f-size-big[b-vv35ix7o93] {
        font-size: 1.4rem !important;
    }


    .container-footer[b-vv35ix7o93] {
        flex-wrap: wrap; /* Permet le passage à la ligne */
        justify-content: flex-start;

    }



    .footer-col1[b-vv35ix7o93] {
        width: 55%;
        border: none;
        text-align: left;
        padding-right: 2rem;
    }

    .footer-col2[b-vv35ix7o93] {
        display: none;
    }

    .footer-col3[b-vv35ix7o93] {
        width: 45%; 
        border: none;
        text-align: left;
        border-left: solid #326a8b 1px;
        padding-left: 2rem;
    }

        .footer-col3 .container-row[b-vv35ix7o93] {
            justify-content: flex-start;
        }
        .footer-col1 .container-row[b-vv35ix7o93],
        .footer-col2 .container-row[b-vv35ix7o93],
        .footer-col3 .container-row[b-vv35ix7o93] {
            justify-content: flex-start;
            align-content: flex-start;
            align-items: flex-start;
            margin: 0;
            padding: 1rem 0;
        }

    .badge-footer[b-vv35ix7o93] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* Sécurité pour Blazor : s'assurer que le lien <a> à l'intérieur ne casse pas le flex */
        display: flex;
        justify-content: center;
        align-content:center;
        align-items:center;
        width: auto !important;
        min-width: 10rem !important;
        max-width: 15rem !important;
    }
}



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {


    .f-size-medium[b-vv35ix7o93] {
        font-size: 1rem !important;
    }

    .f-size-big[b-vv35ix7o93] {
        font-size: 1.3rem !important;
    }


    .container-footer[b-vv35ix7o93] {
        flex-direction: column-reverse; /* Tout à la verticale */
        align-items: center;
        text-align: center;
    }

    .footer-col1[b-vv35ix7o93], .footer-col3[b-vv35ix7o93] {
        width: 100%;
        padding-left: 0 !important; /* On annule les marges */
        border: none !important;
        margin-top: 0;
        border-top: solid #326a8b 1px;
    }

    .footer-col2[b-vv35ix7o93] {
        display: none;
    }

    /* Centrage de tous les conteneurs internes */
    .container-row[b-vv35ix7o93] {
        justify-content: center !important;
        padding: 0;
        margin:0;
    }

    .badge-footer[b-vv35ix7o93] {
        margin-left: auto;
        margin-right: auto;
    }

    .logo-size1-footer[b-vv35ix7o93] {
        width: 5rem; /* Logo un peu plus petit sur mobile */
    }


    .badge-footer[b-vv35ix7o93] {
        margin-left: auto !important;
        margin-right: auto !important;
        /* Sécurité pour Blazor : s'assurer que le lien <a> à l'intérieur ne casse pas le flex */
        display: flex;
        justify-content: center;
        width: auto !important;
        min-width: 6rem !important;
        max-width: 10rem !important;
    }
}
/* _content/VNFacade/Components/Layout/MainLayout.razor.rz.scp.css */


#blazor-error-ui[b-en98ifh630] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-en98ifh630] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/VNFacade/Components/Layout/SectionContentLayout.razor.rz.scp.css */


/* Classe générique appliquée pour 
    tous les header de page de contenu */
.back-content-header-page[b-1sgxz80q07] {
    width: 100%;
    height: auto;
    min-height: 40vh;
    background-repeat: no-repeat;
    background-size: cover;
}

/* class de definition des container img réutilisé 
    dans toute les pages BlocContentPages */
.back-img-body-page[b-1sgxz80q07] {
    width: 100%;
    height: auto;
    min-height: 80vh;
    background-repeat: no-repeat;
    background-size: cover;
}


.back-img-footer-page[b-1sgxz80q07] {
    width: 100%;
    height: auto;
    min-height: 50vh;
    background-repeat: no-repeat;
    background-size: cover;
}

/*********************/

/* Ravalement_Renovation */

.back-ravalement-renov[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/ravalement.jpg');
    background-position: center center;
    overflow: hidden;
}


.img-body-ravalement-renovation[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/ravalement-renovation2.png');
    background-position: center center;
    overflow: hidden;
}

.img-footer-ravalement-renovation[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/ravalement-renovation.jpg');
    background-position: center center;
    overflow: hidden;
}


/*********************/

/* Ravalement_Entretien */

.back-ravalement-entretien[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/ravalement.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-body-ravalement-entretien[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/entretien-facade.webp');
    background-position: center center;
    overflow: hidden;
}

.img-footer-ravalement-entretien[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/entretien-facade2.jpg');
    background-position: center center;
    overflow: hidden;
}

/*********************/

/* Ravalement_Enduit projeté */
.back-enduit-projete[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduit-projete.webp');
    background-position: center center;
    overflow: hidden;
}

/* Ravalement_Enduit projeté */
.img-body-ravalement-enduitprojete[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/ravalement-enduit-projete.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-ravalement-enduitprojete[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduit-projete2.jpg');
    background-position: center center;
    overflow: hidden;
}

/*********************/

/* Ravalement_Enduit lissé/taloché */
.back-enduit-lisse[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduit.jpg');
    background-position: center center;
    overflow: hidden;
}


.img-body-ravalement-enduitlisse[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/ravalement-enduit-lisse.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-ravalement-enduitlisse[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduit-taloche.webp');
    background-position: center center;
    overflow: hidden;
}

/*********************/

/* Ravalement_Enduit ribbé */
.back-enduit-ribbe[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduit-ribbe.jpg');
    background-position: center center;
    overflow: hidden;
}


.img-body-ravalement-enduitribbe[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduit-ribbe2.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-ravalement-enduitribbe[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduit-ribbe3.jpg');
    background-position: center center;
    overflow: hidden;
}

/*********************/

/* Ravalement_Enduit décoratif */
.back-enduit-deco[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/enduit-decoratif.jpg');
    background-position: center center;
    overflow: hidden;
}


.img-body-ravalement-enduitdeco[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduitdeco1.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-ravalement-enduitdeco[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduitdeco2.jpg');
    background-position: right center;
    overflow: hidden;
}

/******************************/

/* Ravalement_Enduit aerogel */
.back-enduit-aerogel[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/enduit-aerogel.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-body-ravalement-aerogel[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/ravalement-enduit-aerogel.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-ravalement-aerogel[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/ravalement-enduit-aerogel-2.webp');
    background-position: center center;
    overflow: hidden;
}

/******************************/

/* Ravalement_Enduit aerogel */
.back-peinture-thermo[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/peinture-thermo.jpeg');
    background-position: center center;
    overflow: hidden;
}

.img-body-peinture-thermo[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/peinture-thermo2.jpeg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-peinture-thermo[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/peinture-thermo3.webp');
    background-position: center center;
    overflow: hidden;
}

/******************************/

/* HEADER PAGE Isolation - ITE */
.back-ITE[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/polystyrene-ite.webp');
    background-position: center center;
    overflow: hidden;
}
.img-body-isolation-ite[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/isolation-ITE.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-isolation-ite[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/isolation-thermique-exterieur.jpg');
    background-position: center center;
    overflow: hidden;
}

/******************************/


/* HEADER PAGE Isolation - INTERIEUR */
.back-ITI[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/ITI.webp');
    background-position: center center;
    overflow: hidden;
}

.img-body-isolation-iti[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/isolation-ITI.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-isolation-iti[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/ITI2.jpg');
    background-position: center center;
    overflow: hidden;
}

/******************************/

/* HEADER PAGE TOITURE */
.back-toiture[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/Toiture.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-body-couverture-renov[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/renovation-couverture.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-couverture-renov[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/entretien-toiture2.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-body-couverture-entretien[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/entretien-toiture.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-couverture-entretien[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/entretien-toiture2.jpg');
    background-position: center center;
    overflow: hidden;
}

/******************************/

/* HEADER PAGE MACONNERIE - GENERALE */
.back-maconnerie-generale[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/back-maconnerie.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-body-maconnerie-generale[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/maconnerie-generale1.jpeg');
    background-position: left center;
    overflow: hidden;
}

.img-footer-maconnerie-generale[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/maconnerie-generale2.jpg');
    background-position: center top;
    overflow: hidden;
}


/******************************/

/* HEADER PAGE DD - ENGAGEMENT */
.back-DD-engagement[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/DD-Engagement.jpg');
    background-position: center top;
    overflow: hidden;
}

.img-body-dd-engagements[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/engagement.jpg');
    background-position: left center;
    overflow: hidden;
}

.img-footer-dd-engagements[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/engagement2.jpg');
    background-position: center center;
    overflow: hidden;
}

/******************************/

/* HEADER PAGE DD - ECO-CERTIFICATION */
.back-DD-certif[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/DD-Certif.jpg');
    background-position: center center;
    overflow: hidden;
}


.img-body-dd-certif[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/eco-certif2.webp');
    background-position: center center;
    overflow: hidden;
}

.img-footer-dd-certif[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/eco-certif.jpg');
    background-position: center center;
    overflow: hidden;
}

/******************************/

/* HEADER PAGE DD - Environnement */
.back-DD-Environnement[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/DD-Environnement.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-body-dd-environnement[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/environnement.jpg');
    background-position: center center;
    overflow: hidden;
}

.img-footer-dd-environnement[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/environnement2.jpg');
    background-position: center center;
    overflow: hidden;
}

/******************************/

/* HEADER PAGE DD - REVUE */
.back-DD-revue[b-1sgxz80q07] {
    background-image: url('/Images/HEADER/DD-Revue.webp');
    background-position: center center;
    overflow: hidden;
}


.img-body-dd-revue-ete[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/revue-confort-ete2.png');
    background-position: center center;
    overflow: hidden;
}

.img-footer-dd-revue-ete[b-1sgxz80q07] {
    background-image: url('/Images/DETAILS-CONTENT/revue-confort-ete.jpg');
    background-position: center center;
    overflow: hidden;
}


/* ================================
   REGLES MEDIA QUERIES
================================= */
/* ============================================================
   RESPONSIVE : SECTION CONTENT LAYOUT (VN-FACADE)
   ============================================================ */

/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    .paddingT-height-taskbar[b-1sgxz80q07] {
        padding-top:10rem;
    }

    .f-size-extra-quadruple[b-1sgxz80q07] {
        font-size: 3rem !important;
    }

    .f-size-quadruple[b-1sgxz80q07] {
        font-size: 2.5rem !important;
    }

    /* Réduction du padding d'identité pour laisser respirer le texte */
    .paddingL12[b-1sgxz80q07] {
        padding-left: 5rem !important;
    }
}

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    /* 2. HEADER : Empilement Titre puis Image */
    .container-row.j-start.marginT4.w100[b-1sgxz80q07] {
        flex-direction: column !important;
    }

    .container-row.j-start.marginT8.w100[b-1sgxz80q07] {
        flex-direction: column-reverse !important;
    }

    .container-img1[b-1sgxz80q07], .back-content-header-page[b-1sgxz80q07] {
        display: none;
    }
    .container-img1.w50[b-1sgxz80q07] {
        width: 0;
    }

    .container-txt.w50[b-1sgxz80q07] {
        width: 90%;
    }

    .container-img2.w50[b-1sgxz80q07], .container-img3.w50[b-1sgxz80q07] {
        width: 100%;
        max-height: 500px !important;
    }

    .f-size-extra-quadruple[b-1sgxz80q07] {
        font-size: 2.2rem !important;
    }

    .f-size-double[b-1sgxz80q07] {
        font-size: 1.5rem !important;
    }

    .paddingL12[b-1sgxz80q07] {
        padding-left: 3rem !important;
    }
}

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {
    /* 1. GLOBAL : On force toutes les colonnes à 100% */
    /*.w50, .w80, .w33, .w90 {
        width: 100% !important;
    }
*/

    .paddingT-height-taskbar[b-1sgxz80q07] {
        padding-top: 3rem;
    }
    /* 3. AJUSTEMENT DES TEXTES */
    .master-margin-left[b-1sgxz80q07] {
        margin-left: 0 !important;
        padding: 0 1.5rem !important;
    }

    .f-size-extra-quadruple[b-1sgxz80q07], .f-size-quadruple[b-1sgxz80q07] {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    /* 4. LE CORPS DE PAGE (L'alternance Image/Texte) */
    /*.container-col.paddingT2.w100 > .container-row {
        flex-direction: column !important;*/ /* On empile tout */
        /*margin-top: 2rem !important;
    }*/

    /* Pour le bloc 1 : on veut l'Image (@TopImageClass) au dessus du texte */
    /* On utilise l'ordre flex pour s'en assurer sans toucher au HTML */
   /* .container-col.paddingL12 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        margin-top: 2rem !important;
    }*/

    /* Pour le bloc 2 : l'image est APRES le texte dans le HTML, 
       on inverse l'ordre pour avoir Image au dessus du texte sur mobile */
    .marginT8[b-1sgxz80q07] {
        margin-top: 3rem !important;
        display: flex !important;
        flex-direction: column-reverse !important; /* Image (col2) passe au dessus du texte (col1) */
    }

    /* 5. IMAGES : On adapte les hauteurs pour le mobile */
    /*.back-content-header-page {
        min-height: 250px !important;
        margin-top: 1rem;
    }

    .back-img-body-page {
        min-height: 300px !important;
    }

    .back-img-footer-page {
        min-height: 250px !important;
    }*/

    /* On désactive les clips-path qui mangent trop d'image sur petit écran */
    .clip-path-base[b-1sgxz80q07] {
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    /* 6. NETTOYAGE DES ESPACEMENTS */
    .paddingT4[b-1sgxz80q07] {
        padding-top: 1.5rem !important;
    }

    .marginT4[b-1sgxz80q07] {
        margin-top: 1rem !important;
    }
}
/* _content/VNFacade/Components/Pages/About/Carrieres.razor.rz.scp.css */


/* Classe générique appliquée pour 
    tous les header de page de contenu */
.back-content-header-page[b-980sthf6b6] {
    width: 100%;
    height: auto;
    min-height: 70vh;
    position: relative;
    top: 0;
    z-index: 10;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; /* Très important pour positionner l'overlay */
    overflow: hidden;
}

/* HEADER PAGE CARRIERES */
.back-carrieres[b-980sthf6b6] {
    background-image: url('/Images/DETAILS-CONTENT/recrutement.webp');
    background-position: center center;
    overflow: hidden;
}

/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
/*@media (max-width: 1599px) {}*/

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
/*@media (max-width: 1024px) {}*/

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    .w40[b-980sthf6b6] {
        width:100% !important;
    }
    .back-carrieres[b-980sthf6b6] {
        background-image: none;
    }
    .back-content-header-page[b-980sthf6b6] {
        min-height: 200px;
    }
}
/* _content/VNFacade/Components/Pages/About/Galerie.razor.rz.scp.css */

/* Le conteneur parent */
.gallery-grid[b-g2r72ppqdc] {
    display: grid;
    /* Crée autant de colonnes de 300px que possible */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 25px;
    padding: 20px;
    width: 100%;
    background-color: #FFFAFA;
    min-height: 50rem;
}

/* Le conteneur de chaque image */
.container-img-realisation[b-g2r72ppqdc] {
    aspect-ratio: 4 / 3; /* Format photo classique, plus élégant que le carré 1/1 */
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}



/* L'image elle-même */
.back-image-realisation[b-g2r72ppqdc] {
    width: 100%;
    height: 100%;
    background-size: cover;
   /* background-position: center;*/
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}


/* Style de la barre de titre */
.image-title-bar[b-g2r72ppqdc] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fond noir semi-transparent */
    color: white;
    padding: 10px;
    text-align: center;
    font-family: sans-serif;
    font-size: 0.9rem;
    backdrop-filter: blur(4px); /* Petit effet de flou élégant en arrière-plan */
    transition: background 0.3s ease;
}

/* Optionnel : Changement de couleur du titre au survol du bloc */
.container-img-realisation:hover .image-title-bar[b-g2r72ppqdc] {
    background: rgba(0, 0, 0, 0.8);
}


/* page realisation */
.img-realisation-1[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (1).jpg');
    background-position: center center;
    overflow: hidden;
}

.img-realisation-2[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (1).png');
    background-position: center center;
    overflow: hidden;
}




/*.container-img-realisation {
    flex-direction: column;
    display: inline-block;
    justify-content: center;
    align-content: center;
    margin: 2rem;
    padding: 2rem;
    background-color: #fff;
    width: 20rem;
    min-height: 10rem;
    max-height: 20rem;
    z-index: 9;
}*/

/*.back-image-realisation {
    width: 100%;
    height: auto;
    min-height: 10rem;
    max-height: 20rem;
    top: 0;
    z-index: 10;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;*/ /* Très important pour positionner l'overlay */
/*overflow: hidden;
}*/

.img-realisation-3[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (2).jpg');
    background-position: center center;
    overflow: hidden;
}

.img-realisation-4[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (3).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-5[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (4).jpg');
    background-position: center center;
    overflow: hidden;
}

.img-realisation-6[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (5).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-7[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (6).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-8[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (7).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-9[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (8).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-10[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (9).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-11[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (10).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-12[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (11).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-13[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (12).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-14[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (13).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-15[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (14).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-16[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (15).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-17[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (16).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-18[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (17).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-19[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (18).jpg');
    background-position: center center;
    overflow: hidden;
}



.img-realisation-21[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (20).jpg');
    background-position: center center;
    overflow: hidden;
}

.img-realisation-22[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (21).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-23[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (22).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-24[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (23).jpg');
    background-position: center center;
    overflow: hidden;
}


.img-realisation-25[b-g2r72ppqdc] {
    background-image: url('/Images/Gallerie/realisation-vnfacade (24).jpg');
    background-position: center center;
    overflow: hidden;
}


/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
/*@media (max-width: 1599px) {}*/

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
/*@media (max-width: 1024px) {}*/

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    .gallery-grid[b-g2r72ppqdc] {
        /* Par défaut (Mobile) : 1 seule colonne */
        grid-template-columns: minmax(300px, 1fr);
        
        gap: 15px;
        padding: 15px;
    }
}
/* _content/VNFacade/Components/Pages/About/Quid.razor.rz.scp.css */


.img-detail-quid[b-fg2akthrez] {
    width: 100%;
    height: auto;
    min-height: 75vh;
    /*top: 0;*/
    background-repeat: no-repeat;
    background-size: cover;
    /*position: relative; */ /* Très important pour positionner l'overlay */
    background-image: url('/Images/DETAILS-CONTENT/presentation1.jpg');
    background-position: center center;
    /*overflow: hidden;*/
    /* SOLUTION : Force la création d'un contexte d'empilement de plus haut niveau */
    /*transform: translateZ(0);*/
    /* Ceci est souvent la clé pour garantir la superposition d'un background-image sur un pseudo-élément enfant. */
    /*z-index: 3;*/ /* Doit être au-dessus du ::after (z-index: 1) */
}


.img-detail-quid-2[b-fg2akthrez] {
    width: 100%;
    height: auto;
    min-height: 35vh;
    /*top: 0;*/
    background-repeat: no-repeat;
    background-size: cover;
    /*position: relative; */ /* Très important pour positionner l'overlay */
    background-image: url('/Images/DETAILS-CONTENT/presentation.jpg');
    background-position: center center;
    /*overflow: hidden;*/
    /* SOLUTION : Force la création d'un contexte d'empilement de plus haut niveau */
    /*transform: translateZ(0);*/
    /* Ceci est souvent la clé pour garantir la superposition d'un background-image sur un pseudo-élément enfant. */
    /*z-index: 3;*/ /* Doit être au-dessus du ::after (z-index: 1) */
}


/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
/*@media (max-width: 1599px) {}*/

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .f-size-extra-quadruple[b-fg2akthrez] {
        font-size:3rem;
    }

    .container-img[b-fg2akthrez] {
        display:none;
    }

    .container-img.w50[b-fg2akthrez] {
        width: 0;
    }

    .container-txt.w50[b-fg2akthrez] {
        width:90%;
    }
}

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {
    .f-size-extra-quadruple[b-fg2akthrez] {
        font-size: 2rem;
    }
}
/* _content/VNFacade/Components/Pages/Legal/MentionsLegales.razor.rz.scp.css */
/* =============================
   MENTIONS LEGALES - responsive
   Desktop-first (>=1025px), tablette <=1024, mobile <=767
   ============================= */
/* CONTENT ANNEXE - desktop defaults */


/* title */
.title[b-gq6zqil6j3] {
    font-size: clamp(1rem, 2.2vw, 2.6rem);
    font-family: 'Biryani';
    font-weight: 700;
    line-height: 1;
    padding-top: 0;
    margin-bottom: 0.5rem;
    margin-left: clamp(2.5rem, 3vw, 4rem);
    color: var(--color-primary);
}

/* subtitle */
.sub-title[b-gq6zqil6j3] {
    padding: 0;
    font-size: clamp(3rem, 1vw + 0.6rem, 2rem);
    font-family: 'Biryani';
    font-weight: 200;
    max-width: 80ch;
    margin: 0 auto;
    box-sizing: border-box;
    color: var(--color-txt-primary);
}

            /* highlight first paragraph */
            .sub-title p:first-child[b-gq6zqil6j3] {
                color: var(--color-primary);
                font-weight: 600;
            }

            /* ensure long paragraphs don't span the full width on large screens */
            .sub-title p:last-child[b-gq6zqil6j3] {
                max-width: 70ch; /* comfortable reading width */
                margin: 0.5rem auto 0 auto;
                padding: 0;
                box-sizing: border-box;
            }


    /* Base (desktop-first) */
    .bloc-mention-annexe[b-gq6zqil6j3] {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        gap: 2rem;
        padding: 2rem 0;
        flex-wrap: wrap; /* permet de wrapper si l'espace manque */
        box-sizing: border-box;
    }

        /* chaque colonne dans bloc-mention-annexe */
        .bloc-mention-annexe > div[b-gq6zqil6j3] {
            /* 4 colonnes desktop : ~23% each, avec min-width pour sécurité */
            flex: 0 1 calc(30% - 2rem);
            min-width: 200px;
            box-sizing: border-box;
            text-align:left;
        }

        /* titre interne */
        .bloc-mention-annexe b[b-gq6zqil6j3] {
            font-size: clamp(1rem, 1.2vw + 0.8rem, 1.8rem);
            color: var(--color-primary);
            display: inline-block;
        }


/* cookie UI */
.cookie-reset[b-gq6zqil6j3] {
    margin-top: 1em;
    text-align: left;
}

.btn-reset-consent[b-gq6zqil6j3] {
    font-size: 1.3rem;
    color: var(--color-CTA-secondary);
    background-color: transparent;
    border: none;
    text-decoration: underline;
    padding: 0;
}

    .btn-reset-consent:hover[b-gq6zqil6j3] {
        color: var(--color-CTA-secondary-hover);
        transform: scale(1.1);
        cursor: pointer;
    }



/* utility classes used in HTML: .container-row .container-col etc assumed to exist elsewhere */

/* ===========================
   Tablet (<= 1024px) adjustments
   =========================== */
@media (max-width: 1024px) {

    /* bloc-mention layout: prefer 2 columns or wrap to 3 depending on width */
    .bloc-mention-annexe > div[b-gq6zqil6j3] {
        flex: 0 1 calc(33.333% - 2rem);
        min-width: 200px;
    }

    /* subtitle padding reduced for tablet */
    .bloc-txt-annexe .sub-title p:first-child[b-gq6zqil6j3] {
        padding: 0 2rem;
    }

    .bloc-txt-annexe .sub-title p:last-child[b-gq6zqil6j3] {
        padding: 0 1.5rem;
    }
}

/* ===========================
   Mobile (<= 767px) adjustments
   =========================== */
@media (max-width: 767px) {

        /* bloc-mention-annexe stacks vertically */
        .bloc-mention-annexe[b-gq6zqil6j3] {
            flex-direction: column;
            gap: 1rem;
            align-items: flex-start;
            padding: 1rem 0;
        }

            .bloc-mention-annexe > div[b-gq6zqil6j3] {
                width: 100%;
                flex: 0 1 100%;
                min-width: 0;
                padding: 0 0.25rem;
                box-sizing: border-box;
            }


    /* cookie button alignment */
    .cookie-reset[b-gq6zqil6j3] {
        margin-top: 1rem;
        text-align: left;
    }

    /* small tweaks to spacing */
    .bloc-txt-annexe[b-gq6zqil6j3] {
        padding-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}
/* _content/VNFacade/Components/Pages/Legal/PolitiqueConfident.razor.rz.scp.css */
/* =============================
   MENTIONS LEGALES - responsive
   Desktop-first (>=1025px), tablette <=1024, mobile <=767
   ============================= */
/* CONTENT ANNEXE - desktop defaults */



/* title */
.title[b-l1oz7p4ben] {
    font-size: clamp(0.8rem, 2.2vw, 2.6rem);
    font-family: 'Biryani';
    font-weight: 700;
    line-height: 1;
    padding-top: 0;
    margin-bottom: 0.5rem;
    margin-left: clamp(2.5rem, 3vw, 4rem);
    color: var(--color-primary);
}

/* subtitle */
.sub-title[b-l1oz7p4ben] {
    padding: 0;
    font-size: clamp(1rem, 0.9vw + 0.6rem, 1.4rem);
    font-family: 'Biryani';
    font-weight: 200;
    max-width: 80ch;
    margin: 0 auto;
    box-sizing: border-box;
    color: var(--color-txt-primary);
}

    /* highlight first paragraph */
    .sub-title p:first-child[b-l1oz7p4ben] {
        color: var(--color-primary);
        font-weight: 600;
    }

    /* ensure long paragraphs don't span the full width on large screens */
    .sub-title p:last-child[b-l1oz7p4ben] {
        max-width: 70ch; /* comfortable reading width */
        margin: 0.5rem auto 0 auto;
        padding: 0;
        box-sizing: border-box;
    }


/* Base (desktop-first) */
.bloc-mention-annexe[b-l1oz7p4ben] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem 0;
    flex-wrap: wrap; /* permet de wrapper si l'espace manque */
    box-sizing: border-box;
}

    /* chaque colonne dans bloc-mention-annexe */
    .bloc-mention-annexe > div[b-l1oz7p4ben] {
        /* 4 colonnes desktop : ~23% each, avec min-width pour sécurité */
        flex: 0 1 calc(30% - 2rem);
        min-width: 200px;
        box-sizing: border-box;
        text-align: left;
    }

    /* titre interne */
    .bloc-mention-annexe b[b-l1oz7p4ben] {
        font-size: clamp(1rem, 1.2vw + 0.8rem, 1.8rem);
        color: var(--color-primary);
        display: inline-block;
    }


/* ===========================
   Tablet (<= 1024px) adjustments
   =========================== */
@media (max-width: 1024px) {

    /* bloc-mention layout: prefer 2 columns or wrap to 3 depending on width */
    .bloc-mention-annexe > div[b-l1oz7p4ben] {
        flex: 0 1 calc(33.333% - 2rem);
        min-width: 200px;
    }

    /* subtitle padding reduced for tablet */
    .bloc-txt-annexe .sub-title p:first-child[b-l1oz7p4ben] {
        padding: 0 2rem;
    }

    .bloc-txt-annexe .sub-title p:last-child[b-l1oz7p4ben] {
        padding: 0 1.5rem;
    }
}

/* ===========================
   Mobile (<= 767px) adjustments
   =========================== */
@media (max-width: 767px) {

    .bloc-txt-annexe .sub-title[b-l1oz7p4ben] {
            font-size: clamp(0.95rem, 2.5vw, 1.05rem);
            text-align: left;
        }

            .bloc-txt-annexe .sub-title p:first-child[b-l1oz7p4ben] {
                padding: 0;
                margin-bottom: 0.5rem;
            }

            .bloc-txt-annexe .sub-title p:last-child[b-l1oz7p4ben] {
                padding: 0;
                margin: 0;
                max-width: 100%;
                text-align: left;
            }

        /* bloc-mention-annexe stacks vertically */
        .bloc-mention-annexe[b-l1oz7p4ben] {
            flex-direction: column;
            gap: 1rem;
            align-items: flex-start;
            padding: 1rem 0;
        }

            .bloc-mention-annexe > div[b-l1oz7p4ben] {
                width: 100%;
                flex: 0 1 100%;
                min-width: 0;
                padding: 0 0.25rem;
                box-sizing: border-box;
            }


    /* small tweaks to spacing */
    .bloc-txt-annexe[b-l1oz7p4ben] {
        padding-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}
/* _content/VNFacade/Components/Pages/Social/SocialBar.razor.rz.scp.css */
/* === SocialBar Responsive === */

/* Desktop par défaut (inchangé) */
.container-join-us[b-01kuy86kas] {
    width: 100%;
    height: auto;
    min-height: 58rem;
    max-height: 58rem;
    background-color: #2d2d2d;
    display: flex;
    justify-content: flex-start;
    border-top: 6px solid var(--color-CTA-primary);
    border-bottom: 4px solid var(--color-CTA-primary);
}

ContactForm[b-01kuy86kas] {
    width: 100%;
    height: auto;
}


.img-contact[b-01kuy86kas] {
    width: 100%;
    height: 100%;
    min-height: 58rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/Images/HEADER/DD-Engagement.jpg');
    background-position: center center;
}


.bloc-social[b-01kuy86kas] {
    display:flex;
    justify-content:center;
    /*flex-direction:column;
    align-items:center;
    align-content:center;*/
    overflow: hidden;
    width: 4.5rem;
    height: auto;
}

    .bloc-social a img[b-01kuy86kas] {
        width: 4rem;
        height: auto;
    }

    .bloc-social a img:hover[b-01kuy86kas] {
    transform: scale(1.15) rotate(-5deg);
    cursor: pointer;
}

/*    .bloc-social:hover {
        transform: scale(1.1) rotate(-5deg);
        transition: transform 0.5s ease-out;
        cursor: pointer;
    }*/
    .bloc-social a img[b-01kuy86kas] {
        width: clamp(60px, 150px - 10vw, 80px); /* plus petit écran → icône plus grosse */
        height: auto;
        margin-top: 0.5rem; /* clamp(0.5rem, 2vw, 1rem);*/
        transition: transform 0.3s ease-out;
    }

.container-form-contact[b-01kuy86kas] {
    width: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-img-contact[b-01kuy86kas] {
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.container-telnumber[b-01kuy86kas] {
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    margin-top:0;
}


.container-logosocial[b-01kuy86kas] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 0;
}


.container-infocontact[b-01kuy86kas] {
    width:90%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top:2rem;
}
/* ================================
   MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    .img-contact[b-01kuy86kas], .container-img-contact[b-01kuy86kas] {
        display: none;
    }
    .container-img-contact[b-01kuy86kas] {
        width: 0;
    }
    .container-form-contact[b-01kuy86kas] {
        width: 80vw;
        
    }
    .master-padding-left[b-01kuy86kas] {
        padding: 0 4rem;
        margin:0 auto;
    }
    .container-infocontact[b-01kuy86kas] {
        width: 60%;

    }

}



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .master-padding-left[b-01kuy86kas] {
        padding-left: 1rem;
    }

    .container-infocontact[b-01kuy86kas] {
        width: 100%;
    }
}



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    h3[b-01kuy86kas] {
        margin: 1rem auto;
    }

    .container-infocontact[b-01kuy86kas] {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 0 auto 1rem 2rem;
    }
    .container-logosocial[b-01kuy86kas] {
        justify-content: flex-start;
    }

    .container-telnumber[b-01kuy86kas] {
        margin-bottom: 2rem;
    }

    .container-form-contact[b-01kuy86kas] {
        width: 100vw;
    }
    .master-padding-left[b-01kuy86kas] {
        padding-left:0;
    }



}




/* _content/VNFacade/Components/Widgets/Brand/CompanyHighlights.razor.rz.scp.css */

/* ================================
   CompanyHighlights Scoped Responsive
================================= */

/* Container principal */
.container-compagny[b-vl8c1y8s2v] {
    width: 100%;
    height: fit-content;
    min-height: 50rem;
    max-height: 60rem;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: var(--color-white-break2);
}



.label[b-vl8c1y8s2v] {
    padding: 1rem 2rem 1rem 0;
    width: clamp(37rem, 1rem + 1vw, 50rem);
}

.label .sub-title[b-vl8c1y8s2v] {
    width:65%;
    vertical-align:top;
    text-align:justify;
    display: flex;
    justify-content: flex-start;
    color: var(--color-primary-hover);
    font-size: clamp(1rem, 0.8rem + 0.5vw, 1.2rem);
    font-weight: 400;
    margin: 0.8rem auto;
    opacity: 0.8;
}

.label .icon[b-vl8c1y8s2v] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 1rem;
}

    .label .icon img[b-vl8c1y8s2v] {
        width: 4rem;
        height: 4rem;
        opacity: 0.6;
        /*padding-top: 0.75rem;*/
    }

.icon-label[b-vl8c1y8s2v] {
    width: 50px;
    height: 50px;
}


.resize-video[b-vl8c1y8s2v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* ================================
   MEDIA QUERIES
================================= */

/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {

    .w60[b-vl8c1y8s2v] {
        width:0;
    }
    .resize-video[b-vl8c1y8s2v] {
        display: none;
    }

}



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .container-compagny[b-vl8c1y8s2v] {
        justify-content: center;
    }
}



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    h3[b-vl8c1y8s2v] { 
        justify-content:center; 
        text-align:center;
        align-items:center;
        align-content:center;

    }
    .master-padding-left[b-vl8c1y8s2v] {
        padding:0 0 0 2rem;
        margin: 0;
    }
    .container-compagny[b-vl8c1y8s2v] {
        justify-content: flex-start;
        max-height:auto;
        height:auto;
    }


    .w33[b-vl8c1y8s2v] {
        width: 100% !important; /* On prend toute la largeur dispo */
        padding-right: 1rem; /* Petite marge de sécurité à droite */
    }

    .label[b-vl8c1y8s2v] {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important; /* On occupe tout l'espace du parent */
        min-width: 0 !important; /* ON CASSE le 350px qui bloquait tout */
        padding: 1rem 0 !important;
        height: auto;
    }

        .label .icon[b-vl8c1y8s2v] {
            flex: 0 0 40px; /* Largeur fixe pour l'icône, elle ne bouge pas */
            margin-right: 15px;
            justify-content: flex-start; /* Aligne l'icône en haut du texte */
            padding-top: 5px;
        }

        .label .sub-title[b-vl8c1y8s2v] {
            flex: 1 1 auto; /* Le texte prend TOUT le reste de la place */
            width: auto !important; /* On annule le width: 65% */
            min-width: 0 !important; /* Autorise le texte à descendre sous 300px */
            margin: 0 !important;
            text-align: left; /* Plus lisible sur mobile que justify */
            line-height: 1.4;
            opacity: 0.9;
            /* Suppression du flex-shrink: 0 qui empêchait le retour à la ligne */
        }

        .label .icon img[b-vl8c1y8s2v] {
            width: 30px !important;
            height: 30px !important;
        }

}
/* _content/VNFacade/Components/Widgets/Brand/HeroSection.razor.rz.scp.css */

/* =================
   HeroSection Scoped
=================== */

.hero-section[b-ix4h8dl5e9] {
    font-family: var(--font-family-base);
    font-weight: 700;
    width: 100%;
    min-height: 85dvh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    opacity: 1;
}



LogoAnimed[b-ix4h8dl5e9] {
    justify-content: center;
    align-content:center;
    align-items:center;
    margin : 0 auto;
}
.container-hero-center[b-ix4h8dl5e9] {
    width: 30%;
    min-width:300px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 13vh;
}


    .hero-section .hero-slogan[b-ix4h8dl5e9] {
        align-items: center;
        opacity: 1;
        transform: translateX(0);
        transition: none;
    }

    /* Effet au survol */
    .hero-slogan:hover[b-ix4h8dl5e9] {
        /*cursor: pointer;*/
        color: var(--color-primary);
        transform: scale(1.01);
    }

    /* Lignes du slogan */
    .hero-slogan div[b-ix4h8dl5e9] {
        line-height: 1;
        /*color: #000;*/
    }


.badge-hero[b-ix4h8dl5e9] {
    min-width: 180px;
    min-height: 30px;
    background-color: var(--color-CTA-secondary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 0.7rem;
    margin-left: 8rem;
    margin-top: -1.7rem;
    z-index: 1;
}

.logo-entreprise-hero[b-ix4h8dl5e9] {
    /* Min: 20rem (~320px)
       Vitesse : 15vw (très réactif à la taille de l'écran)
       Max: 60rem (~960px)
    */
    width: clamp(20rem, 12vw, 60rem);
    height: auto;
}

.container-slogan-animed[b-ix4h8dl5e9] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-content:center;
    align-items:center;
    text-align:center;
    margin-top: -2.5rem;
}

.hero-logo-rge[b-ix4h8dl5e9] {
    width: 7rem;
    height: auto;
    margin-top: -0.3rem;
    margin-left: 12rem;
    z-index: 2;
}

.img-hero-left-pro[b-ix4h8dl5e9] {
    width: 100%;
    height: 80vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/Images/herosection/hero-left-pro.jpg');
    background-position: center center;
}


.img-hero-right-pro[b-ix4h8dl5e9] {
    width: 100%;
    height: 80vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/Images/herosection/hero-right-pro.png');
    background-position: center center;
}

.img-hero-left-part[b-ix4h8dl5e9] {
    width: 100%;
    height: 80vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/Images/herosection/hero-left-part.png');
    background-position: center center;
}

.img-hero-right-part[b-ix4h8dl5e9] {
    width: 100%;
    height: 80vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/Images/herosection/maison-individuelle.webp');
    background-position: center center;
}



/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    .hero-section[b-ix4h8dl5e9] {      
        min-height: 50dvh;
        /*margin-top: 12dvh;*/
    }
    .img-hero-right-part[b-ix4h8dl5e9], .img-hero-right-pro[b-ix4h8dl5e9],
    .img-hero-left-part[b-ix4h8dl5e9], .img-hero-left-pro[b-ix4h8dl5e9] {
        height: 65vh;
    }

    .logo-entreprise-hero[b-ix4h8dl5e9] {
        width: 17rem;
        height: auto;
    }

    .container-slogan-animed[b-ix4h8dl5e9] {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: -2.5rem;
    }

    .badge-hero[b-ix4h8dl5e9] {
        min-width: 150px;
        min-height: 28px;
        margin-left: 8rem;
        margin-top: -3rem;
        font-size: 1.3rem;
    }
    .hero-logo-rge[b-ix4h8dl5e9] {
        width: 7rem;
        height: auto;
        margin-top: -0.7rem;
        margin-left: 10rem;
        z-index: 2;
    }

    .f-size-triple[b-ix4h8dl5e9] {
        font-size: clamp(1rem, 1rem + 1vw, 3rem);
    }



}



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {

    .hero-section[b-ix4h8dl5e9] {
        min-height: 50dvh;
        /*margin-top: 12dvh;*/
    }

    .container-img-hero[b-ix4h8dl5e9], .img-hero-right-part[b-ix4h8dl5e9], .img-hero-right-pro[b-ix4h8dl5e9],
    .img-hero-left-part[b-ix4h8dl5e9], .img-hero-left-pro[b-ix4h8dl5e9] {
        display: none;
        width: 0;
    }


    .container-hero-center[b-ix4h8dl5e9] {
        width: 100%;
        padding-top: 5vh;
    }

    .logo-entreprise-hero[b-ix4h8dl5e9] {
        width: 15rem;
        height: auto;
    }

    .container-slogan-animed[b-ix4h8dl5e9] {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: -2.5rem;
    }

    .badge-hero[b-ix4h8dl5e9] {
        min-width: 120px;
        min-height: 25px;
        margin-left: 8rem;
        margin-top: -3rem;
        font-size: 1rem;
    }

    .hero-logo-rge[b-ix4h8dl5e9] {
        width: 6rem;
        height: auto;
        margin-top: -1.5rem;
        margin-left: 8rem;
        z-index: 2;
    }

    .f-size-triple[b-ix4h8dl5e9] {
        font-size: clamp(1.8rem, 1.6rem + 1vw, 3rem);
    }

}

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    .hero-section[b-ix4h8dl5e9] {
        min-height: 50dvh;
    }

    .marginT-height-taskbar[b-ix4h8dl5e9] {
        margin: 15dvh auto;
    }

    .container-img-hero[b-ix4h8dl5e9], .img-hero-right-part[b-ix4h8dl5e9], .img-hero-right-pro[b-ix4h8dl5e9],
    .img-hero-left-part[b-ix4h8dl5e9], .img-hero-left-pro[b-ix4h8dl5e9] {
        display: none;
        width: 0;
    }

    .container-hero-center[b-ix4h8dl5e9] {
        width: 100%;
        margin: 0;
        padding: 0;
    }


    .logo-entreprise-hero[b-ix4h8dl5e9] {
        width: 15rem;
        height: auto;
    }

    .container-slogan-animed[b-ix4h8dl5e9] {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: -2.5rem;
    }

    .badge-hero[b-ix4h8dl5e9] {
        min-width: 120px;
        min-height: 25px;
        margin-left: 8rem;
        margin-top: -3.2rem;
        font-size:1rem;
    }


    .hero-logo-rge[b-ix4h8dl5e9] {
        width: 4rem;
        height: auto;
        margin-top: -1.5rem;
        margin-left: 8rem;
        z-index: 2;
    }

    .f-size-triple[b-ix4h8dl5e9] {
        font-size: clamp(1rem, 1rem + 3vw, 3rem);
    }
}
/* _content/VNFacade/Components/Widgets/Brand/LogoAnimed.razor.rz.scp.css */

/* --- 1. Variables et Styles de Base --- */
:root[b-ttlf38tdk8] {
    --text-color: #000;
    --n-translation-x: 0px;
    --transition-speed: 0.4s;
}

.container[b-ttlf38tdk8] {
    width: 100%; /* Important: Il doit occuper 100% du conteneur parent */
    height: fit-content; /*100%;*/
    display: block;
    margin: 0 auto;
    justify-content: center;
    align-content: center;
    background-color: transparent;
    font-weight: 200;
    color: var(--text-color);
    font-family: 'segoe ui','Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- 2. Conteneur Slogan (Ancrage Absolu au Centre de la Page) --- */
.slogan-container[b-ttlf38tdk8] {
    height: 7em;
    min-width: 100%;
    display: flex;
    justify-content:center;
    text-align: center;
    align-items: center;
    position: relative; 
    background-color: transparent;
    font-weight: 800;
    overflow: hidden;
    z-index: 10;
}

 /*Conteneur pour l'animation du Slogan */
.slogan-line[b-ttlf38tdk8] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    white-space: nowrap;
    transition: opacity 0.1s ease-in;
    font-family: 'segoe ui','Helvetica Neue', Helvetica, Arial, sans-serif; /* 'Biryani';*/
}

/* Conteneur du Résultat Final (Absolument positionné et doublement ancré) */
.final-brand-line[b-ttlf38tdk8] {
    position: absolute;
    /* 1. On se place au centre du parent */
    top: 50%;
    left: 50%;
    /* 2. On décale de la moitié de sa propre taille vers le haut et la gauche */
    transform: translate(-50%, -50%);
    /* 3. On empêche l'élément de s'étaler bizarrement */
    width: 100%;
    white-space: nowrap; /* Indispensable pour garder le slogan sur une ligne */
    /* 4. Vos styles existants */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.05s ease-out;
    /*position: absolute;
    left: 0;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.05s ease-out;
    pointer-events: none;
    transform: translate(0, -50%);*/
}

/* Ciblage direct des spans dans la ligne d'animation et la ligne finale */

    .final-brand-line span[b-ttlf38tdk8] {
        font-size: 3.5rem;
        opacity: 0;
        transition: opacity 0.5s ease-out;
        display: inline-flex;
    }





/*     --- 3. Styles Commerciaux --- */
.cta-color[b-ttlf38tdk8] {
    color: var(--color-primary);
    text-transform: uppercase;
}

.cta-color-hover[b-ttlf38tdk8] {
    color: var(--color-primary-hover);
    text-transform: uppercase;
}

/* --- 4. Styles des Spans et État Initial (Masqué) --- */

.slogan-line span[b-ttlf38tdk8] {
    opacity: 0;
    display: inline-flex;
     /*Transition par défaut rapide pour les V et N (0.4s) */
    transition: opacity var(--transition-speed) ease-out, transform var(--transition-speed) ease-out;
    position: relative;
    /* Optimisation pour le GPU */
    will-change: opacity, transform;
}

 /*Transition lente d'opacité UNIQUEMENT pour l'apparition des mots du slogan (Augmenté à 2.0s) */
.word-ous[b-ttlf38tdk8], .word-ous-realisons[b-ttlf38tdk8] {
    transition: opacity 2.0s ease-out !important;
    color: var(--color-primary);
    font-size: 1.8rem;
    margin-top: 1.5rem;
    font-family: 'segoe ui','Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- 5. Keyframes & Classes d'Orchestration --- */
/* Animation de Glissement du N (Phase 2) */
@keyframes slide-N-left-b-ttlf38tdk8 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(var(--n-translation-x));
    }
}

 /*Glissement du N déclenché par JS */
.slide-n-active[b-ttlf38tdk8] {
    animation: slide-N-left-b-ttlf38tdk8 0.5s ease-out forwards;
    /*  Optimisation pour le GPU */
    will-change: transform;
    font-size: 3.5rem;
}

 /*Classes de Fondu et d'Apparition */
.fade-in[b-ttlf38tdk8] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

 /*Classe générique de disparition rapide (utilise 0.4s par défaut) */
.fade-out[b-ttlf38tdk8] {
    opacity: 0 !important;
}

 /*NOUVEAU: Disparition ultra-rapide pour éviter la superposition*/ 
.fast-fade-out[b-ttlf38tdk8] {
    opacity: 0 !important;
    transition: opacity 0.1s ease-out !important;  /*Disparaît en 100ms */
}

/* Retirer l'espace du flux pour les mots du slogan */
.collapse-space[b-ttlf38tdk8] {
    flex-basis: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
    opacity: 0 !important;
     /*Transition rapide pour le retrait du flux */
    transition: all 0.05s ease-out;
}

/* Transition SPÉCIFIQUE pour le fondu de Façade (1.5s) */
#finalFacade[b-ttlf38tdk8] {
    /*CLÉ : L'opacité initiale doit être ici pour être gérée par la classe .fade-in */
    font-size: 3.5rem;
    color: var(--color-primary);
}

/* CORRECTION ULTIME : Compense le micro-décalage de l'espacement des lettres sur le N final */
#finalN[b-ttlf38tdk8] {
    /* Légère correction pour compenser le kerning/espacement subpixel */
    transform: translateX(-1.5px);
    font-size: 3.5rem;
}

.vn-part[b-ttlf38tdk8] {
    font-size: 3.5rem;
}


/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    .word-ous[b-ttlf38tdk8], .word-ous-realisons[b-ttlf38tdk8] {
        font-size: 1.3rem;
        transform: translateY(-0.2rem); /* Plus précis que le margin et ne pousse pas les autres éléments */
    }

    .final-brand-line span[b-ttlf38tdk8], .slide-n-active[b-ttlf38tdk8], #finalFacade[b-ttlf38tdk8], #finalN[b-ttlf38tdk8], .vn-part[b-ttlf38tdk8] {
        font-size: 2.3rem;
    }

}

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .word-ous[b-ttlf38tdk8], .word-ous-realisons[b-ttlf38tdk8] {
        font-size: 1.8rem;
        transform: translateY(-0.4rem); /* Plus précis que le margin et ne pousse pas les autres éléments */
    }

    .final-brand-line span[b-ttlf38tdk8], .slide-n-active[b-ttlf38tdk8], #finalFacade[b-ttlf38tdk8], #finalN[b-ttlf38tdk8], .vn-part[b-ttlf38tdk8] {
        font-size: 2.5rem;
    }
}

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {


    .word-ous[b-ttlf38tdk8], .word-ous-realisons[b-ttlf38tdk8] {
        font-size: 1.6rem;
        transform: translateY(-0.4rem); /* Plus précis que le margin et ne pousse pas les autres éléments */
    }

    .final-brand-line span[b-ttlf38tdk8], .slide-n-active[b-ttlf38tdk8], #finalFacade[b-ttlf38tdk8], #finalN[b-ttlf38tdk8], .vn-part[b-ttlf38tdk8] {
        font-size: 2.4rem;
    }
}

/* --- 5. ULTRA SMALL RESIZE ( < 421px ) --- */
@media (max-width: 420px) {


    .word-ous[b-ttlf38tdk8], .word-ous-realisons[b-ttlf38tdk8] {
        font-size: 1rem;
        transform: translateY(-0.4rem); /* Plus précis que le margin et ne pousse pas les autres éléments */
    }

    .final-brand-line span[b-ttlf38tdk8], .slide-n-active[b-ttlf38tdk8], #finalFacade[b-ttlf38tdk8], #finalN[b-ttlf38tdk8], .vn-part[b-ttlf38tdk8] {
        font-size: 2rem;
    }
}
/* _content/VNFacade/Components/Widgets/Brand/SplitLayout.razor.rz.scp.css */

/* ================================
   SplitLayout Scoped Responsive
================================= */


.icon-container[b-952slymh6n] {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.part-label[b-952slymh6n] {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    flex-direction:row;
}

.with-icon[b-952slymh6n] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin: 0 0 3rem 0rem;
}

    .with-icon .label[b-952slymh6n] {
        width: 100%;
        color: var(--color-primary-hover);
        font-size: clamp(1rem, 0.8rem + 0.5vw, 1.2rem);
        font-weight: 400;
    }

.label .sub-title[b-952slymh6n] {
    display: flex;
    justify-content: left;
    font-size: clamp(2rem, 1rem + 1vw, 2.8rem);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0.8rem auto;
    opacity: 0.8;
}


.with-icon .icon[b-952slymh6n] {
    width: 8rem;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 1rem;
}

    .with-icon .icon img[b-952slymh6n] {
        width: 6rem;
        height: 6rem;
        opacity: 0.6;
    }

/* Images */
.img-splitlayout[b-952slymh6n] {
    width: 80%;
    height: auto;
    min-height: 40rem;
    max-height: 40rem;
    position: relative;
    top: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-image: url('/Images/DETAILS-CONTENT/build-animated.gif'); 
    margin-top: 0;
    background-size: cover;
}


.container-btn[b-952slymh6n] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 2rem;
}



/* ================================
   MEDIA QUERIES
================================= */

/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {


    .with-icon .label[b-952slymh6n] {
        font-size: 1.2rem;
    }

    .img-splitlayout[b-952slymh6n] {
        height:auto;
        min-height: 20rem;

    }
}



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {

    h3[b-952slymh6n] {
        width:80vw;
    }
    .with-icon .icon[b-952slymh6n] {
        width: 3.5rem;
    }

        .with-icon .icon img[b-952slymh6n] {
            width: 3rem;
            height: 3rem;
        }

    .with-icon .label[b-952slymh6n] {
        font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1rem);
    }
    .img-splitlayout[b-952slymh6n], container-img-splitlayout[b-952slymh6n] {
        width: 0;
        display: none;
    }

    .w50[b-952slymh6n] {
        width:100%;
    }
    .marginR12[b-952slymh6n]{
        margin-right:0;
    }

    .marginB4[b-952slymh6n] {
        margin-bottom:1rem;
    }

    .marginT2[b-952slymh6n] {
        margin-top:0.5rem;
    }

    .paddingLR2[b-952slymh6n] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

}



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    .w50[b-952slymh6n] {
        width: 95vw !important;
    }

    .with-icon .label[b-952slymh6n] {
        font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1rem);
    }

    .img-splitlayout[b-952slymh6n], container-img-splitlayout[b-952slymh6n] {
        width:0;
        display: none;
    }

    button[b-952slymh6n] {
        margin:1.5rem auto;
    }
    .container-btn[b-952slymh6n] {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }

    .marginR4[b-952slymh6n] {
        margin: 0 auto;
    }
    .marginR12[b-952slymh6n] {
        margin-right: 0;
    }       
}
/* _content/VNFacade/Components/Widgets/Error/Error403.razor.rz.scp.css */


/* Barre d'entête spécifique pour l'erreur 403 */
.error-bar-403[b-laq5986zxf] {
    min-width: 100%;
    height: 5rem; /* Hauteur spécifique */
    background: #a24b41; /* Couleur de fond spécifique au 403 (Rouge/Brun) */
    color: var(--color-white);
    border-bottom: var(--color-primary-light) 3px solid; /* Bordure d'accentuation */
}

/* Titre dans cette barre */
.error-title-text[b-laq5986zxf] {
    font-size: 2.2rem; /* Taille spécifique */
    flex-grow: 9;
    margin: 2rem 1rem;
    color: var(--color-white); /* Force la couleur blanche */
}

    .error-title-text img[b-laq5986zxf] {
        margin: 0 1rem;
    }
/* _content/VNFacade/Components/Widgets/Navigation/Menu/Menu.razor.rz.scp.css */

.container-large-menu[b-kti1jywall] {
    width: 100%;
    min-height:12rem;
    max-height: 100vh;
    position: absolute;
    left: 0;
    color: var(--color-text-on-light);
    background-color: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Ombre très légère */
    /* Les valeurs 0 1px 3px signifient : 
     - 0 : pas de décalage horizontal
     - 1px : très léger décalage vertical (vers le bas)
     - 3px : flou */
    z-index: 999;
    /* Définissez la transition pour TOUTES les propriétés avec la MÊME durée de base, 
       mais elles seront gérées par des délais dans les classes d'état. */
    transition-property: max-height, opacity, transform;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}

.menu-pos2[b-kti1jywall] {
    top: 8.8rem;
}


/* 2. État Initial (Fermé) : Le menu est invisible et replié */
.container-large-menu-closed[b-kti1jywall] {
    opacity: 0;
    max-height: 0;
    transform: translateY(0);
    pointer-events: none;
    /* Décalage de la fermeture (transition-delay) :
    1. max-height : 0s de délai (doit commencer immédiatement)
    2. opacity : 0.4s de délai (doit commencer APRÈS que max-height soit terminé)
    3. transform : 0s de délai (peut être immédiat)
    */
    transition-delay: 0s, 0s, 0s;
}

/* 3. État Final (Ouvert) : Le menu est visible et à sa position normale */
.container-large-menu-open[b-kti1jywall] {
    opacity: 1;
    max-height: 100vh;
    transform: translateY(0);
    pointer-events: auto;
    /* Pour l'ouverture : toutes les transitions sont immédiates (délai 0s) */
    transition-delay: 0s;
}

/* ---------- BACKGROUND ANIMATION ---------- */
#overlay[b-kti1jywall] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    visibility: hidden; /* ← initialement caché */
}

    #overlay.active[b-kti1jywall] {
        opacity: 1;
        visibility: visible; /* ← visible pendant l’animation */
        pointer-events: auto;
        transition: opacity 0.5s ease-in-out;
    }


/* ---------- PARTIE GAUCHE (LOGO) ---------- */
.menu-left[b-kti1jywall] {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    height: 5rem; /* ajuste cette hauteur comme tu veux */
}

    .menu-left .logo-menu[b-kti1jywall] {
        display: none;
        max-height: 4rem; /*limite la hauteur au conteneur parent */
        width: auto;
        padding: 0;
        margin: 0.5rem auto;
    }

.main-menu.scrolled .logo-menu[b-kti1jywall] {
    height: 2.5rem;
}

/* ---------- PARTIE CENTRALE (LIENS) ---------- */

.menu-center[b-kti1jywall] {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    text-align:center;
}



    .menu-center a[b-kti1jywall] {
        text-decoration: none;
        color: var(--color-primary);
        font-weight: 600;
        position: relative;
        padding-bottom: 0.5rem;
        transition: color 0.3s;
    }

.main-menu.scrolled .menu-center a[b-kti1jywall] {
    color: var(--color-primary);
}
.menu-center a:hover[b-kti1jywall] {
    color: var(--color-primary-hover);
}

.menu-center a[b-kti1jywall]::after {
    content: '';
    display: block;
    width: 0%;
    height: 3px;
    background-color: var(--color-primary-hover);
    transition: width 0.3s ease-in-out;
    margin: auto;
}

        .menu-center a:hover[b-kti1jywall]::after {
            width: 100%;
        }

/* ---------- PARTIE DROITE (AVIS) ---------- */

.menu-right[b-kti1jywall] {
    width: auto;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}


.menu-right .icon-menu[b-kti1jywall] {
    transition: transform 0.6s ease;
    transform-origin: center;
}

.menu-right img.icon-menu[b-kti1jywall] {
    width: 2rem;
    height: 2rem;
    padding: 0 1rem;
    border-radius: 0.3rem;
    transition: transform 0.2s ease-in-out;
}

    .menu-right .icon-menu:hover[b-kti1jywall] {
        transform: scale(1.3) rotate(360deg);
    }


.mobile-nav-container[b-kti1jywall], .nav-label[b-kti1jywall], .mobile-dropdown-wrapper[b-kti1jywall], .arrow[b-kti1jywall] {
    display: none;
}


/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    .f-size-medium[b-kti1jywall] {
        font-size: 1.3rem;
    }
}


/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .f-size-medium[b-kti1jywall] {
        font-size: 1rem;
        letter-spacing:-0.05rem;
    }
    .paddingLR2[b-kti1jywall] {
        padding-left:1rem;
        padding-right:1rem;
    }
}



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    #mainMenuContainer[b-kti1jywall] {
        display:none;

    }
    .arrow[b-kti1jywall] {
        height: 2.5rem
    }

    .mobile-nav-container[b-kti1jywall], .mobile-dropdown-wrapper[b-kti1jywall], MenuDropdownContent[b-kti1jywall] {
        width: 100%;
        margin: 0 !important;
        display: block;
    }




    /* Style de l'item de liste mobile */
    .mobile-nav-item[b-kti1jywall] {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #e0e0e0;
        transition: background-color 0.3s;
    }
       

    /* Style de l'entête (ex: Ravalement) */
    .nav-label[b-kti1jywall] {
        display: flex;
        font-weight: 500;
        border: solid 0.3px var(--color-primary);
        cursor: pointer;
        background-color: #ffffff;
        color: var(--color-primary);
        transition: background-color 0.3s;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 1.5rem; /* Réduire un peu le padding vertical */
        min-height: 3rem; /* Utiliser min-height au lieu de height fixe */
        height: auto; /* Permet l'extension si le texte double */
        font-size: 1.6rem; /* Réduire légèrement la taille (était à 1.8rem) */
        line-height: 1.2; /* Resserrer l'interligne pour le texte double */
    }

        .nav-label.active-label[b-kti1jywall] {
            background-color: #f8f9fa;
            color: #0056b3; /* Votre couleur primaire */
        }



    /* Style de base de la flèche */
    .arrow[b-kti1jywall] {
        display: inline-block;
        width: 20px; /* On définit une taille fixe */
        height: 20px;
        border-right: 3px solid var(--color-primary);
        border-bottom: 3px solid var(--color-primary);
        transition: transform 0.3s ease;
        vertical-align: middle;
    }

        /* État fermé (pointe vers le bas) */
        .arrow.down[b-kti1jywall] {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        /* État ouvert (pivote vers le haut) */
        .arrow.up[b-kti1jywall] {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            margin-top: 5px; /* Ajustement visuel lors de la rotation */
        }

    /* Conteneur du contenu déplié */
    .mobile-dropdown-wrapper[b-kti1jywall] {
        width: 100%;
        background-color: #fdfdfd;
    }

    /* Animation simple */
    .animated-fade-in[b-kti1jywall] {
        animation: slideDown-b-kti1jywall 0.2s ease-out;
    }

    @keyframes slideDown-b-kti1jywall {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

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

}
/* _content/VNFacade/Components/Widgets/Navigation/Menu/MenuDropdownContent.razor.rz.scp.css */


.sub-menu-col[b-zq7kpvacss] {
    width: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 2rem 0;
    margin: 0 1rem 0 0;
    text-align: start;
    vertical-align: top;
    padding-top: 0;
}

    .sub-menu-col.col1[b-zq7kpvacss] {
        margin-top: 0;
    }

    .sub-menu-col.col2[b-zq7kpvacss] {
        margin-top: 0;
        background-color: var(--color-background-light);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Ombre très légère */
    }

    .sub-menu-col.col3[b-zq7kpvacss] {
        margin-top: 0;
    }


    .sub-menu-col .sub-title[b-zq7kpvacss] {
        max-height: 3rem;
        padding: 0.75rem;
        font-family: var(--font-family-base);
        font-weight: 400;
        font-size: 1.2rem;
        color: var(--color-primary);
        border-bottom: solid var(--color-accent-light) 2px;
        margin: 0 1rem;
    }


    .sub-menu-col .link-col[b-zq7kpvacss] {
        width: auto;
        display: flex;
        flex-direction: row;
        justify-content: start;
        padding: 0.75rem;
        background-color: transparent;
        font-family: var(--font-family-base);
        font-weight: 400;
        font-size: 1rem;
        margin: 0 1rem;
    }

.sub-menu-col.col1 .link-col:hover[b-zq7kpvacss], .sub-menu-col.col3 .link-col:hover[b-zq7kpvacss] {
    background-color: var(--color-background-light);
    cursor: pointer;
}

.sub-menu-col.col2 .link-col:hover[b-zq7kpvacss] {
    background-color: #fff;
    cursor: pointer;
}



/* Définition de l'animation de base (glissement vers le bas) */
@keyframes slide-in-down-b-zq7kpvacss {
    0% {
        opacity: 0;
        transform: translateY(-20px); /* Commence 20px au-dessus */
    }

    100% {
        opacity: 1;
        transform: translateY(0); /* Termine à sa position normale */
    }
}

/* Classes d'animation pour chaque colonne */

/* Les propriétés communes aux colonnes animées */
.menu-col-animated[b-zq7kpvacss] {
    /* Assure que l'animation est appliquée */
    animation-name: slide-in-down-b-zq7kpvacss;
    /* Durée de l'animation */
    animation-duration: 0.6s;
    /* La colonne reste à l'état final de l'animation */
    animation-fill-mode: forwards;
    /* S'assure que la colonne est masquée au début */
    opacity: 0;
}

/* Décalage pour la COLONNE 1 (démarre immédiatement) */
.menu-col-delay-1[b-zq7kpvacss] {
    animation-delay: 0.2s;
}

/* Décalage pour la COLONNE 2 */
.menu-col-delay-2[b-zq7kpvacss] {
    animation-delay: 0.4s; /* 100ms de plus */
}

/* Décalage pour la COLONNE 3 */
.menu-col-delay-3[b-zq7kpvacss] {
    animation-delay: 0.6s; /* 200ms de plus */
}


/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    .sub-menu-col[b-zq7kpvacss] {
        width: 25vw;
        min-width:300px;
    }

}

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .sub-menu-col[b-zq7kpvacss] {
        width: 33vw;
        min-width: 250px;
        margin-right:0rem;
    }

        .sub-menu-col .sub-title[b-zq7kpvacss] {
            padding: 0.25rem;
            font-size: 1rem;
            margin: 0 0.5rem;
        }
}

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {


    .main-menu-dropdown[b-zq7kpvacss] {
        overflow-y: auto;
        flex-direction: column !important; /* On empile les colonnes verticalement */
        /* height: auto !important;*/
        width: 100% !important;
        padding: 0 !important; /* IMPORTANT : retire le padding qui pourrait exister */
        margin: 0 !important;
    }

    .sub-menu-col[b-zq7kpvacss] {
        width: 100% !important;
        padding: 0 !important; /* On gère le padding au niveau des liens */
        margin: 0 !important;
        background-color: transparent !important; /* Évite les blocs de couleur grisés */
        box-shadow: none !important;
    }
        .sub-menu-col.col2[b-zq7kpvacss] {
            background-color: transparent !important;
            box-shadow: none !important;
        }
        /* 3. On force les liens à prendre 100% sans marges externes */
        .sub-menu-col .link-col[b-zq7kpvacss] {
            width: 100% !important; /* Prend toute la largeur */
            margin: 0 !important; /* RETIRE le 1rem qui crée ton encadré rouge */
            background-color: #fcfcfc !important; /* Fond très légèrement grisé pour différencier */
            padding-left: 2.5rem !important; /* Plus d'indentation pour la hiérarchie */
            border-bottom: 1px solid #eee;
            display: block; /* Ou flex, mais sans marges */
            font-size: 1rem;
            font-weight: 400;
            color: #37474f;
        }


        /* Effet au clic (tactile) */
        .link-col:active[b-zq7kpvacss] {
            background-color: #f0f0f0 !important;
        }

        /* sous-titres (comme "Enduit") */
    .sub-menu-col .sub-title[b-zq7kpvacss] {
        margin: 0 !important; /* RETIRE le 1rem */
        padding: 1rem 1.5rem;
        width: 100% !important;
        background-color: #f9f9f9; /* Optionnel : léger fond pour les titres de section */
        font-size: 1rem;
        font-weight: 600;
    }
    /* Cache les titres répétés dans l'accordéon (uniquement ceux ciblés) */
    .hidden-mobile[b-zq7kpvacss] {
        display: none;
    }

}
/* _content/VNFacade/Components/Widgets/Navigation/Menu/Profil.razor.rz.scp.css */


.info-user[b-mvgwvifo32] {
    width: auto;
    height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    padding: 1rem 0.5rem 0 0.5rem;
    cursor: pointer;
}



.container-menu[b-mvgwvifo32] {
    width: auto;
    height: auto;
    min-height: 6rem;
    max-height: calc(100vh-3.1rem);
    position: absolute;
    top: 3.7rem;
    right: 0;
    border-left: var(--color-border-primary) 3px solid;
    border-bottom: #77A6F7 3px solid;
    color: var(--color-text-on-light);
    background-color: #2ebaf9;
}
/* _content/VNFacade/Components/Widgets/Navigation/Menu/Taskbar.razor.rz.scp.css */

/* CSS SCOPED Taskbar */
/* bloc barre haute - affichée sur toute les pages */

.container-HomeBarNav[b-0zuedudm9k] {
    position: fixed;
    width: 100%;
    height: var(--height-taskbar);
}

.HomeBarNav[b-0zuedudm9k] {
    background-color: var(--color-primary);
    color: white;
    width: 100%;
    height: var(--height-taskbar);
}


.top-row[b-0zuedudm9k] {
    width: 100%;
    height: 5.8rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--color-white);
    color: var(--color-primary);
    border-bottom: var(--color-accent-light) 1px solid;
    margin-bottom: 0;
}


.logo-entreprise[b-0zuedudm9k] {
    width:4rem;
    height: auto;
    align-items: center;
}

.logo-entreprise-min[b-0zuedudm9k] {
    width: auto;
    max-height: calc(var(--height-taskbar) - 0.5rem);
    align-items: center;
    filter: brightness(0) /* 1. Rend tout l'élément noir */
    invert(1) /* 2. Inverse le noir en blanc */
}


.container-badge[b-0zuedudm9k] {
    margin-top:-0.8vh;

}


/* Lignes du slogan */
.hero-slogan div[b-0zuedudm9k] {
    display: block;
    white-space: nowrap; /* évite les espaces parasites */
    margin-left: 0; /* supprime tout décalage */
    padding-left: 0; /* sécurité */
    font-family: "Biryani";
    position: relative;
    opacity: 0;
    transform: translateX(-250px);
    animation: punchIn-b-0zuedudm9k 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
}

    /* Décalage des deux parties */
    .hero-slogan div:nth-child(2)[b-0zuedudm9k] {
        animation-delay: 0.3s;
    }

    .hero-slogan div:nth-child(3)[b-0zuedudm9k] {
        animation-delay: 2s;
    }

@keyframes punchIn-b-0zuedudm9k {
    0% {
        opacity: 0;
        transform: translateX(-250px);
    }

    80% {
        opacity: 1;
        transform: translateX(10px); /* petit dépassement vers la droite */
    }

    100% {
        opacity: 1;
        transform: translateX(0); /* retour sec à la place */
    }
}
.container-burger-btn[b-0zuedudm9k] {
    display: none;
}
.burger-menu-btn[b-0zuedudm9k] {
    display: none;
    cursor: pointer;
    padding: 10px;
    z-index: 2001;
}

.container-menu-normal[b-0zuedudm9k] {
    display: block;
}

.container-menu-mobile[b-0zuedudm9k] {
    display: none;
}




/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    .container-logo-positionmenu2[b-0zuedudm9k] {
        display: none;
    }
}



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .HomeBarNav[b-0zuedudm9k] {
        justify-content: space-between !important; /* Pousse les deux blocs aux extrémités */
        padding: 0 0 0 1rem; /* Évite que les boutons ne collent aux bords de l'écran */
    }

    .paddingLR2[b-0zuedudm9k] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .marginL4[b-0zuedudm9k] {
        margin-left:0;
    }

    .master-margin-left[b-0zuedudm9k] {
        margin-left: 0;
    }
    .container-logo-positionmenu2[b-0zuedudm9k] {
        display: none;
    }


}



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    .HomeBarNav[b-0zuedudm9k] {
        display: flex !important;
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 !important;
    }


    .mobile-menu-overlay[b-0zuedudm9k] {
        position: fixed;
        top: var(--height-taskbar); /* Hauteur de ta taskbar */
        left: 0;
        width: 100%;
        height: calc(100dvh - var(--height-taskbar)); /*Prend toute la hauteur restante */
        
        /* Empêche le scroll de se propager au body quand on atteint les extrémités */
        /* PROPRIÉTÉS CLÉS POUR LE SCROLL */
        overflow-y: auto !important; /* Autorise le scroll vertical */
        -webkit-overflow-scrolling: touch; /* Fluidité sur iPhone/iOS */
        overscroll-behavior: contain; /* Empêche le rebond de propager le scroll au body */
        background-color: transparent;
        z-index: 1002;
        /*overflow: hidden;*/
        animation: slideDown-b-0zuedudm9k 0.4s ease-out forwards;
        transform-origin: top;
    }



    @keyframes slideDown-b-0zuedudm9k {
        from {
            opacity: 0;
            transform: scaleY(0);
        }

        to {
            opacity: 1;
            transform: scaleY(1);
        }
    }



    .mobile-menu-content[b-0zuedudm9k] {
        background-color: white; /* Le blanc s'arrête là où le contenu s'arrête */
        width: 100%;
        /* On laisse le contenu s'adapter à la taille de tes liens */
    }

    .menu-backdrop[b-0zuedudm9k] {
        position: fixed;
        top: var(--height-taskbar);
        left: 0;
        width: 100vw;
        height: calc(100dvh - var(--height-taskbar)); /* Prend toute la hauteur restante */
        /* Un léger voile sombre aide à comprendre que le fond est inactif */
        background-color: rgba(0, 0, 0, 0.2); /* Plus clair */
        backdrop-filter: blur(4px); /* Floute ce qu'il y a derrière */
        -webkit-backdrop-filter: blur(4px); /* Compatibilité iOS */
        z-index: 1001; /* Juste en dessous du container menu */
    }

    .container-menu-normal[b-0zuedudm9k], .container-button-annexe[b-0zuedudm9k], .container-logo-positionmenu2[b-0zuedudm9k] {
        display: none;
    }

    .container-menu-mobile[b-0zuedudm9k], .mobile-main-nav[b-0zuedudm9k] {
        display: block;
    }

     /***********/
     /* Ajustement des boutons de la taskbar */

    /* 1. On donne une limite aux blocs de texte */
    .container-menu-mobile .container-row.j-start[b-0zuedudm9k] {
        flex: 0 1 auto !important;
        min-width: 0 !important; /* Indispensable pour laisser rétrécir */
        overflow: hidden; /* Sécurité anti-chevauchement */
    }

    /* 2. On réduit la taille des boutons pour gagner de la place */
    .btn-primary.btnSize3Wauto[b-0zuedudm9k] {
        min-width: 0 !important; /* On casse la min-width de la lib */
        width: auto !important;
        font-size: 0.85rem !important;
        padding: 0 8px !important; /* On serre les paddings */
        white-space: nowrap;
        text-overflow: ellipsis; /* Si "Professionnels" est trop long, il devient "Profess..." */
        overflow: hidden;
    }

    /* 3. LE BURGER : On le verrouille à droite */
    .container-burger-btn[b-0zuedudm9k] {
        flex: 0 0 60px !important; /* On ajuste la taille du container si besoin */
        width: 60px !important;
        height: 60px !important;
        margin-left: auto !important;
        padding: 0 !important; /* On enlève tout padding qui réduirait l'image */
        display: flex !important;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    


    .burger-menu-btn[b-0zuedudm9k] {
        display: block !important;
        width: 100% !important; /* L'image prend toute la largeur du container */
        height: 100% !important; /* L'image prend toute la hauteur du container */
        object-fit: contain; /* "contain" pour ne pas déformer le SVG, ou "fill" si tu veux forcer */
        flex-shrink: 0 !important;
        margin: 0 !important; /* On retire les marges parasites */
    }
}
/* _content/VNFacade/Components/Widgets/Navigation/SkipLink/SkipLink.razor.rz.scp.css */
/* Bouton skip-link */
button.skip-link[b-0rxloljseo] {
    all: unset; /* réinitialise tous les styles hérités */
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    padding: 0.75rem 1rem;
    background-color: transparent; /* <-- transparent par défaut */
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    z-index: 1000;
    /* Masquage visuel mais reste focusable */
    clip: rect(0 0 0 0);
    overflow: hidden;
    height: 1px;
    width: 1px;
    white-space: nowrap;
}

    /* Etat focus ou actif : bouton visible */
    button.skip-link:focus[b-0rxloljseo],
    button.skip-link:active[b-0rxloljseo] {
        clip: auto; /* rend visible */
        width: auto;
        height: auto;
        white-space: normal;
        top: 0;
        left: 0;
        background-color: #f07e26;
        outline: 2px solid #ffc719;
        outline-offset: 2px;
        transition: all 0.3s ease;
    }
/* _content/VNFacade/Components/Widgets/Section/CommonActionBlock.razor.rz.scp.css */



/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    /* On réduit le retrait massif de 12rem */
    .master-padding-left[b-2xzewiz536] {
        padding-left: 4rem !important;
    }
    .f-size-extra-double[b-2xzewiz536] {
        font-size: 1.4rem;
    }

    .paddingL6[b-2xzewiz536] {
        padding-left: 2rem;
    }

    .j-around[b-2xzewiz536] {
        justify-content: flex-start;
    }


    .clip-path-content-left.container-row[b-2xzewiz536] {
        flex-direction: column !important;
        align-items: center;
    }
    /* On ajuste les largeurs relatives pour éviter les chevauchements */
/*    .w40vw {
        width: 35vw !important;
    }

    .w50vw {
        width: 50vw !important;
    }*/
}

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    /* Ajustement des titres */

    .f-size-triple[b-2xzewiz536] {
        font-size: 2.5rem !important;
    }
    .f-size-extra-double[b-2xzewiz536] {
        font-size:1.5rem;
    }
    /* Suppression des marges d'identité Desktop */
    .master-margin-left[b-2xzewiz536] {
        margin-left: 0 !important;
    }

    .master-padding-left[b-2xzewiz536] {
        padding: 5rem 1rem !important;
    }

    
    /* On force l'empilement du bloc Contact */
    .container-row.j-around.bgColor-black[b-2xzewiz536] {
        flex-direction: column !important;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    /* Passage en mode stack (empilé) */
    .container-common.container-row[b-2xzewiz536] {
        flex-direction: column !important;
        align-items: center;
    }
    /* Reset complet des structures complexes */
    .container-row[b-2xzewiz536], .container-col[b-2xzewiz536] {
        width: 100% !important;
        justify-content: center !important;
        align-items: center;
        text-align: center;
        margin: 0 auto;
        /*padding-left: 1rem !important;
        padding-right: 1rem !important;*/
    }

    /* Les conteneurs prennent toute la largeur moins les marges */
    .w40vw[b-2xzewiz536], .w50vw[b-2xzewiz536] {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Simplification des Clip-paths pour tablette (moins agressifs) */
    .clip-path-rightT100B84[b-2xzewiz536], .clip-path-leftT100B90[b-2xzewiz536] {
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }


    .marginTB10[b-2xzewiz536] {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
    .marginR4[b-2xzewiz536] {
        margin: 1.5rem auto;
    }
    /* Section Spécialités : On permet le wrap si les boites sont trop larges */
    .container-row.j-start.w100.marginTB1[b-2xzewiz536] {
        flex-wrap: wrap;
        justify-content: center !important;
    }
    /* Centrage des boutons et textes */
    .j-start[b-2xzewiz536], .j-center[b-2xzewiz536], .btn-CTA-1[b-2xzewiz536] {
        justify-content: center !important;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .box-shadow-primary[b-2xzewiz536] {
        border: solid var(--color-CTA-secondary) 1px;
    }
}

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {


    .marginTB10[b-2xzewiz536] {
        margin-top: 0;
        margin-bottom: 0;
    }



    .subTitleContent[b-2xzewiz536] {
        justify-content: center !important;
        font-size: 1.8rem;
        margin: 1.5rem auto;
    }

    /* Gestion des boites "Spécialités" */
    .container-col.displayInlineBlock[b-2xzewiz536] {
        width: 90% !important; /* Presque toute la largeur */
        margin: 1rem auto !important;
        display: flex !important; /* On casse l'inline-block pour le centrage */
    }

   
    /* Newsletter : on s'assure qu'elle ne déborde pas */
    .w80[b-2xzewiz536] {
        width: 95% !important;
    }

    /* Téléphone et Mail : réduction de taille pour éviter l'overflow */
    .f-size-extra-double[b-2xzewiz536] {
        font-size: 1.5rem !important;
    }

    .f-size-large[b-2xzewiz536] {
        font-size: 1.1rem !important;
    }
}
/* _content/VNFacade/Components/Widgets/Tools/Chatbot.razor.rz.scp.css */

.chatbot-fab[b-s0oa582vpo] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-CTA-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.chatbot-container[b-s0oa582vpo] {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 320px;
    max-height: 450px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    z-index: 998;
    overflow: hidden;
    border: 1px solid #ccc;
    animation: fadeInUp-b-s0oa582vpo 0.3s ease-out;
}

.chatbot-header[b-s0oa582vpo] {
    background-color: var(--color-CTA-primary);
    color: white;
    padding: 10px;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
}

.messages[b-s0oa582vpo] {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
}

.message[b-s0oa582vpo] {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 16px;
    max-width: 80%;
    animation: fadeInUp-b-s0oa582vpo 0.3s ease-out;
}

    .message.user[b-s0oa582vpo] {
        background-color: var(--color-primary);
        color: white;
        align-self: flex-end;
    }

    .message.bot[b-s0oa582vpo] {
        background-color: #f0f0f0;
        color: black;
        align-self: flex-start;
    }

.input-area[b-s0oa582vpo] {
    min-height: 3rem;
    width:90%;
    display: flex;
    border-top: 1px solid #ddd;
    margin: 0.8rem auto;
}

    .input-area input[type="text"][b-s0oa582vpo] {
        flex-grow: 1;
        padding: 8px;
        margin: 0.8rem auto;
        font-size: 1em;
        border: none;
        outline: none;
        border-radius: 0;
    }

    .input-area button[b-s0oa582vpo] {
        background-color: var(--color-CTA-primary);
        border: none;
        color: white;
        padding: 0 16px;
        font-size: 1em;
        cursor: pointer;
    }

@keyframes fadeInUp-b-s0oa582vpo {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

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

/* _content/VNFacade/Components/Widgets/UI/Avis.razor.rz.scp.css */


/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
/*@media (max-width: 1599px) {}*/

/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .w25[b-udzkunlnjx] {
        width:45%; 
    }
}

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {
    .master-margin-left[b-udzkunlnjx] {
        margin-left:0;
    }
    .master-padding-left[b-udzkunlnjx] {
        padding-left: 0;
    }
    .w25[b-udzkunlnjx] {
        width: 90%;
        margin: 0 auto;
    }

    .container-wrap[b-udzkunlnjx] {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-content:center;
        align-items:center;
    }

    .j-start[b-udzkunlnjx] {
        justify-content: center;
    }

    .btnSize4Wauto[b-udzkunlnjx] {
        max-width:300px;
    }

    .marginR4[b-udzkunlnjx] {
        margin-right:0;
    }

}

/*************************************/
/* Description - AVIS ET NOTE CLIENT */

/*.description {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 30rem;
    padding: 7rem 0 0 0;
    background-color: #fff;
    align-items: center;
}

.three-part .part {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 99;
    padding: 2rem 0 0 0;
}

    .three-part .part img {
        width: auto;
        height: 6rem;
    }

section .tag-line-description,
section .tag-line-description > * {
    color: #fff;
    font-size: 3rem;
    text-align: center;
    line-height: 4rem;
    margin-bottom: 0;
    z-index: 1;
}



.part-card1 .content-card-avis {
    width: 100%;
}

    .part-card1 .content-card-avis img {
        width: 7rem;
        height: auto;
    }

    .part-card1 .content-card-avis div {
        text-align: center;
        font-size: 5rem;
        color: #bf1122;
        font-family: 'Morn-Black-demiBold';
    }

section .sub-tag-line-description {
    color: black;
    text-align: center;
    font-size: 1.8rem;
}

    section .sub-tag-line-description p:first-child {
        color: #37454f;
        font-weight: 200;
    }

    section .sub-tag-line-description p:last-child {
        font-size: 1.6rem;
        font-style: italic;
        color: #37454f;
        font-family: 'Morn-Black-bold';
    }*/

/* CAROUSEL AVIS CLIENTS */
/*.global-container-carousel {
    width: 42%;
    height: auto;
}

.container-carousel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1rem;
    overflow: hidden;
}

.carousel {
}

.carousel-inner {
    background-color: white;
    opacity: 0.5;
    display: flex;
    overflow: hidden;
    height: 60vh;
    max-width: 100%;
}

.item {
    flex: 0 0 100%;
    height: 100%;
    transition: .5s ease-in-out;*/
    /*padding-left:2rem;*/
/*}

.title-item-carousel {
    color: #f8dc38;
    font-weight: bold;
    border-bottom: solid #b11b1d 1px;
    width: 80%;
}

    .title-item-carousel > p:first-child {
        color: #303030;
        line-height: 1.2rem;
        font-size: 1.5rem;
    }

    .title-item-carousel > p:last-child {
        color: #ffcb05;
        line-height: 0.8rem;
        font-size: 1rem;
    }


.content-item-carousel {
    width: 80%;
    margin-top: 2rem;
}

    .content-item-carousel > p {
        color: black;
        font-weight: 300;
        line-height: 1rem;
        font-size: 1.2rem;
    }*/

/***************************/
/* _content/VNFacade/Components/Widgets/UI/BadgeInfo.razor.rz.scp.css */
/* * Styles spécifiques au composant BadgeInfo
 * Utilise les classes de base .tooltip-container et .badge de LibFusion
 */

/* 1. Conteneur spécifique (anciennement .beta-badge-with-tooltip) */
.beta-badge[b-dpc05uqok2] {
    /* Marge spécifique requise par ce composant pour décaler le badge */
    margin-left: 1.4rem;
}

    /* 2. Style du badge "BETA" (couleur spécifique) */
    .beta-badge .badge[b-dpc05uqok2] {
        /* Surcharge la couleur de fond de la Lib pour correspondre à la couleur "Beta" (Orange/Jaune) */
        background-color: #f0ad4e;
    }

    /* 3. Positionnement du tooltip sur ce composant (bas et décalé) */
    .beta-badge .tooltip-content[b-dpc05uqok2] {
        /* Positionnement vertical : place le contenu sous le badge (100% est la hauteur du badge) */
        top: 135%;
        /* Positionnement horizontal : décale à 120% de la largeur du parent, puis centre */
        left: 120%;
        transform: translateX(-50%);
    }

        /* 4. Correction de la flèche du tooltip pour ce positionnement */
        .beta-badge .tooltip-content[b-dpc05uqok2]::before {
            /* La flèche se place sur le haut du contenu du tooltip, pointant vers le bas du badge */
            bottom: 100%;
            left: 5%;
            transform: translateX(-50%);
            /* Définit la couleur de la flèche (var(--color-text-dark) par défaut dans la Lib) */
            border-color: transparent transparent var(--color-text-dark) transparent;
        }
/* _content/VNFacade/Components/Widgets/UI/LogoWall/LogoWall.razor.rz.scp.css */
/* _content/VNFacade/Components/Widgets/UI/NewsletterSignup.razor.rz.scp.css */

.container-newsletter[b-ho2na2411l] {
    margin:0 auto;
    padding:2rem 0;
}



.form-newsletter[b-ho2na2411l] {
    /*height: auto;
    min-height: 7rem;
    width: 100% !important;
    max-width: 800px !important;*/ /* On lui donne de l'espace pour grandir */
    /*min-width: unset !important;*/ /* On enlève ton ancien 26rem qui peut brider */
    /*align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 1rem;*/
    width: 100% !important;
    min-width: 0 !important; /* On libère la contrainte pour éviter le débordement */
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
}

    /* 2. On donne 80% de l'espace à l'input et 20% au bouton (environ) */
    .form-newsletter .container-col.displayInlineBlock:first-child[b-ho2na2411l] {
        flex: 1 1 auto !important; /* Il prend tout l'espace disponible */
        min-width: 0 !important; /* Très important pour autoriser le rétrécissement */
        max-width: 500px; 
    }

    /* 3. L'input remplit son espace à 100% */
    .form-newsletter .inputselect[b-ho2na2411l] {
        width: 100% !important;
    }

    /* 4. On s'assure que le bouton ne bouge pas */
    .form-newsletter .txt-center[b-ho2na2411l] {
        flex: 0 0 auto !important;
        margin-left: 10px; /* Petit espace pour ne pas coller à l'input */
    }


    /*.form-newsletter div:first-child {
        flex: 0 0 500px !important;*/ /* FORCE la largeur à 500px sans négociation */
    /*}*/

    /* 3. On s'assure que l'input remplit ces 500px */
    /*.form-newsletter .inputselect {
        width: 100% !important;
        min-width: 100% !important;
    }*/
.btn-GO[b-ho2na2411l] {
    height: 4rem;
    width: 4rem;
    margin: 0;
    color: white;
    border-radius: 100%;
    margin-top: 0.5rem;
}
/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
/*@media (max-width: 1599px) {}*/
/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    /*.j-start {
        justify-content:center;
    }
    .form-newsletter {
        height: auto;
        min-height: 5rem;
        width:80vw;
        min-width: 500px;
        justify-content: center;
        margin:0 auto;
    }

    .btn-GO {
        margin-top: 0.7rem;
    }*/
    .j-start[b-ho2na2411l] {
        justify-content: center !important;
    }

    .form-newsletter[b-ho2na2411l] {
        height: auto;
        min-height: 5rem;
        /* On repasse en largeur relative par rapport à l'écran */
        width: 80vw !important;
        min-width: 0 !important; /* On casse le min-width qui pourrait faire déborder */
        max-width: 500px !important; /* On évite que ça soit trop large sur tablette */
        justify-content: center;
        margin: 0 auto !important;
    }

        /* On s'assure que l'input et le bouton restent bien en ligne */
        .form-newsletter .container-col.displayInlineBlock:first-child[b-ho2na2411l] {
            flex: 1 1 auto !important;
        }

    .btn-GO[b-ho2na2411l] {
        margin-top: 0.7rem;
    }
}
/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {
    /*.container-newsletter {
        padding: 2rem 0;
    }

    .form-newsletter {
        min-width: 300px;
    }

    .btn-GO {
        height: 3rem;
        width: 3rem;
        margin-top:0.9rem;
    }*/
    .container-newsletter[b-ho2na2411l] {
        padding: 2rem 0;
    }

    .form-newsletter[b-ho2na2411l] {
        width: 95vw !important; /* On prend presque toute la largeur sur petit téléphone */
        min-width: 0 !important;
        max-width: 100% !important;
    }

        .form-newsletter .txt-center[b-ho2na2411l] {
            margin-left: 5px; /* Petit espace pour ne pas coller à l'input */

        }
    .btn-GO[b-ho2na2411l] {
        height: 3rem;
        width: 3rem;
        margin-top: 0.9rem;
    }
}




@media (max-width: 330px) {
    .form-newsletter[b-ho2na2411l] {
        flex-direction: column !important; /* On empile l'input et le bouton */
        align-items: center !important;
        gap: 1rem;
    }

        .form-newsletter .container-col.displayInlineBlock:first-child[b-ho2na2411l] {
            width: 100% !important;
            flex: none !important;
        }

        .form-newsletter .txt-center[b-ho2na2411l] {
            margin-left: 0 !important; /* On enlève la marge latérale car on est en colonne */
            align-self: center !important;
        }

    .btn-GO[b-ho2na2411l] {
        margin-top: 0 !important; /* On remet à zéro pour le centrage vertical */
    }
}
/* _content/VNFacade/Modules/Contact/Components/ContactForm.razor.rz.scp.css */
/* ===============================
   Contact & Social Component CSS
   Responsive
=============================== */

/* === Desktop (>= 1025px) === */
/* => inchangé, ta base fonctionne bien */

/* Variables locales au composant */
.contact-us[b-ykbxju6qul] {
    width: 100%;
    /*Animation d’apparition globale */
    opacity: 1;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}

    .contact-us.cu-visible[b-ykbxju6qul] {
        opacity: 1;
        transform: translateY(0);
    }


 /*Carte du formulaire */
    .contact-us .container-form-add-big[b-ykbxju6qul] {
        width: 100%;
        max-width: 45rem;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: clamp(1rem, 2vw, 1.5rem);
        box-shadow: 0 12px 30px rgba(235,123,12,.06);
        /*animation-delay: 0.3s;*/
        margin: 0;
    }



/* Groupes de champs */
.contact-us .form-group[b-ykbxju6qul] {
    width:100%;
    position: relative;
    margin-bottom: 1rem;
}



 /*Placeholder */
.contact-us .form-group [b-ykbxju6qul]::placeholder {
        color: var(--text-muted);
        opacity: .9;
        font-size: 1rem;
    }

 /*Messages d’erreur */
.contact-us .warning-message[b-ykbxju6qul] {
    margin-top: .4rem;
    color: #c0392b;
    font-size: .9rem;
    line-height: 1.2;
}

/* Bouton principal */
.contact-us .btn[b-ykbxju6qul] {
    background: linear-gradient(45deg, var(--accent), #ff9b4a);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: .75rem 2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(240,126,38,.25);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    user-select: none;
}

    .contact-us .btn:hover[b-ykbxju6qul] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(240, 126, 38, 0.4);
        filter: brightness(1.05);
    }

    .contact-us .btn:active[b-ykbxju6qul] {
        transform: translateY(0);
        box-shadow: 0 3px 6px rgba(240, 126, 38, 0.3);
    }

    .contact-us .btn.is-loading[b-ykbxju6qul] {
        filter: grayscale(.15) brightness(.92);
        box-shadow: none;
        pointer-events: none;
    }



/* ================================
   REGLES MEDIA QUERIES
================================= */

/* Accessibilité - réduction des motions */
@media (prefers-reduced-motion:reduce) {
    .contact-us[b-ykbxju6qul] {
        transition: none;
    }

        .contact-us .container-form-add-big[b-ykbxju6qul] {
            animation: none;
        }

        .contact-us .form-group input:focus[b-ykbxju6qul],
        .contact-us .form-group textarea:focus[b-ykbxju6qul] {
            box-shadow: none;
        }
}


/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
/*@media (max-width: 1599px) {

}*/


/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .contact-us[b-ykbxju6qul] {
        width: 100vw;
        margin: 0;
    }
        .contact-us .container-form-add-big[b-ykbxju6qul] {
            width: 100%;
            
            padding: clamp(0.8rem, 2vw, 1.2rem);
            border-radius: 12px;
        }

    .contact-us .form-group .input[b-ykbxju6qul],
    .contact-us .form-group textarea[b-ykbxju6qul] {
        font-size: 0.95rem;
        padding: 0.75rem 0.9rem;
    }

    .contact-us .btn[b-ykbxju6qul] {
        padding: 0.7rem 1.5rem;
        font-size: 0.95rem;
    }
}



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {
    :root[b-ykbxju6qul] {
        --input-width: 100%; /* Pleine largeur sur mobile */
    }

    h3[b-ykbxju6qul] {
        padding-left: 3rem;
        font-size: 2rem;
    }

    /* Optionnel : si tu as des formulaires dans tes colonnes paddingL12 */
    input[b-ykbxju6qul], select[b-ykbxju6qul], textarea[b-ykbxju6qul] {
        max-width: 100% !important;
    }

    

        .contact-us .container-form-add-big[b-ykbxju6qul] {
            border-radius: 0;
            box-shadow: 0 6px 16px rgba(235,123,12,.1);
            padding: 1rem;
            margin: 0 auto !important;
        }

    .contact-us .form-group[b-ykbxju6qul] {
        width: 100%;
        margin-bottom: 0.8rem;
    }

        .contact-us .form-group textarea[b-ykbxju6qul] {
            min-height: 100px; /* réduit pour petits écrans */
        }

    .contact-us .btn[b-ykbxju6qul] {
        width: 100%; /* bouton prend toute la largeur */
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .contact-us .warning-message[b-ykbxju6qul] {
        font-size: 0.8rem;
    }


}

/* === Très petits mobiles (<= 480px) === */
@media (max-width: 480px) {
    .contact-us .container-form-add-big[b-ykbxju6qul] {
        width:100%;
        padding: 0.8rem;
        border-radius: 0;
    }

    .contact-us .form-group .input[b-ykbxju6qul],
    .contact-us .form-group textarea[b-ykbxju6qul] {
        font-size: 0.85rem;
        padding: 0.65rem 0.8rem;
    }

    .contact-us .btn[b-ykbxju6qul] {
        font-size: 0.85rem;
        padding: 0.65rem;
    }
}


/* _content/VNFacade/Modules/Cookies/Components/ConsentCookies.razor.rz.scp.css */
/* Styles généraux pour cookie-banner et cookie-settings-panel */
#cookie-banner[b-hpmncg8b5v],
#cookie-settings-panel[b-hpmncg8b5v] {
    width: 85%;
    max-width: 29.5rem;
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-white);
    color: #000;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 6px 15px rgba(0,0,0,0.35);
    z-index: 99999;
    animation: fadeIn-b-hpmncg8b5v 0.5s ease-out forwards;
}

    #cookie-settings-panel h2[b-hpmncg8b5v] {
        font-size:1.8rem;
    }

    #cookie-banner p[b-hpmncg8b5v],
    #cookie-settings-panel p[b-hpmncg8b5v] {
        text-align: center;
        line-height: 1.4;
        margin: 0 0 12px 0;
    }

.cookie-actions[b-hpmncg8b5v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.cookie-categories[b-hpmncg8b5v] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

    .cookie-categories label[b-hpmncg8b5v] {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 14px;
    }

    .cookie-categories input[type="checkbox"][b-hpmncg8b5v] {
        margin: 0 2rem 0 0;
        transform: scale(1.2);
        width: 2rem;
        height: 2rem;
        border: none;
    }

        .cookie-categories input[type="checkbox"]:hover[b-hpmncg8b5v] {
            cursor: pointer;
        }

    .cookie-categories .desc[b-hpmncg8b5v] {
        font-size: 12px;
        color: #ccc;
    }

/* Buttons */
.cookie-actions button[b-hpmncg8b5v] {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

#cookie-accept[b-hpmncg8b5v] {
    background-color: var(--color-success);
    color: #001624;
}

    #cookie-accept:hover[b-hpmncg8b5v] {
        background-color: var(--color-success-hover);
        transform: scale(1.1);
    }

#cookie-settings[b-hpmncg8b5v] {
    background-color: var(--color-primary);
    color: #fff;
}

    #cookie-settings:hover[b-hpmncg8b5v] {
        background-color: var(--color-primary-hover);
        transform: scale(1.1);
    }

#cookie-save[b-hpmncg8b5v] {
    background-color: var(--color-CTA-primary);
    color: #001624;
}

    #cookie-save:hover[b-hpmncg8b5v] {
        background-color: var(--color-CTA-primary-hover);
        transform: scale(1.1);
    }

#cookie-quit[b-hpmncg8b5v] {
    background-color: var(--color-error);
    color: #001624;
}

    #cookie-quit:hover[b-hpmncg8b5v] {
        background-color: var(--color-error-hover);
        transform: scale(1.1);
    }

/* Animations */
@keyframes fadeIn-b-hpmncg8b5v {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================
   Responsive design breakpoints
============================= */

/* Desktop / grand écran */
@media (min-width: 1025px) {
    #cookie-banner[b-hpmncg8b5v],
    #cookie-settings-panel[b-hpmncg8b5v] {
        bottom: 5rem;
        left: 30%;
        transform: translateX(-50%);
        font-size: 14px;
        max-width: 29.5rem;
    }

    .cookie-categories input[type="checkbox"][b-hpmncg8b5v] {
        margin-left: 2rem;
        transform: scale(1.2);
    }
}

/* Tablette portrait / moyen écran */
@media (min-width: 768px) and (max-width: 1024px) {
    #cookie-banner[b-hpmncg8b5v],
    #cookie-settings-panel[b-hpmncg8b5v] {
        bottom: 4rem;
        left: 40%;
        transform: translateX(-50%);
        font-size: 13px;
        max-width: 25rem;
    }

    .cookie-categories input[type="checkbox"][b-hpmncg8b5v] {
        margin-left: 1.5rem;
        transform: scale(1.1);
    }
}

/* Mobile */
@media (max-width: 767px) {
    #cookie-banner[b-hpmncg8b5v],
    #cookie-settings-panel[b-hpmncg8b5v] {
        bottom: 2rem;
        left: 5%;
        transform: translateX(-50%);
        font-size: 12px;
        max-width: 90%;
        padding: 12px 16px;
    }

    .cookie-actions button[b-hpmncg8b5v] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .cookie-categories input[type="checkbox"][b-hpmncg8b5v] {
        margin-left: 1rem;
        transform: scale(1);
        width: 1.5rem;
        height: 1.5rem;
    }

    .cookie-categories .desc[b-hpmncg8b5v] {
        font-size: 11px;
    }
}
/* _content/VNFacade/Modules/OverlayManager/Components/Modals/Modal.razor.rz.scp.css */
/* --- Styles Spécifiques à la Modale de Dialogue/Alerte --- */

/* Le Fond de la modale (.modal-bg) est maintenant géré par la classe Lib .modal-backdrop 
qui a le même comportement et le même Z-Index. Le code HTML/Razor doit utiliser .modal-backdrop. */

.modal-bg[b-qx9mfxq4h9] {
    /* Maintien de l'alignement spécifique si nécessaire, bien que .modal-backdrop fasse déjà center/center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .modal-bg.hidden[b-qx9mfxq4h9] {
        display: none;
    }

/* Conteneur de la modale de Dialogue/Alerte - Classe .modal d'origine */
.modal[b-qx9mfxq4h9] {
    display: flex;
    flex-direction: column;
    max-height: 95vh;
    /* On utilise les variables de la Lib pour le fond, le shadow et les coins */
    background-color: var(--color-white);
    border-radius: var(--radius); /* Coin simple pour ce dialogue */
    box-shadow: var(--shadow-modal);
    /* Dimensions spécifiques à ce Dialogue (Compact) */
    max-width: 600px;
    width: 90%;
    /* On retire z-index: 2000 car il est sur .modal-backdrop (le fond) */
    overflow: hidden;
}

    /* Corps de la modale - Classe .modal article d'origine */
    .modal article[b-qx9mfxq4h9] {
        /* C'est la max-width du contenu qui est spécifique à cette modale d'alerte. */
        max-width: 40rem;
        flex-grow: 1;
        overflow: hidden;
        padding: 1rem;
    }


/* --- Icones de Contexte --- */

.modal-icon-wrapper[b-qx9mfxq4h9]  svg {
    /* Donne une taille explicite au SVG inséré */
    height: 2rem;
    width: 2rem;
}

/* Info (Bleu) */
.modal-icon-wrapper.info[b-qx9mfxq4h9]  svg path {
    fill: var(--color-info);
}

/* Warning (Jaune/Orange) */
.modal-icon-wrapper.warning[b-qx9mfxq4h9]  svg path {
    fill: var(--color-warning);
}

/* Error (Rouge) */
.modal-icon-wrapper.error[b-qx9mfxq4h9]  svg path {
    fill: var(--color-error);
}

/* Success (Vert) */
.modal-icon-wrapper.success[b-qx9mfxq4h9]  svg path {
    fill: var(--color-success);
}



/* Les styles du header, footer, icônes, boutons sont maintenant gérés par les classes Lib :
   - .modal-header
   - .modal-body
   - .modal-footer
   - .modal-icon-wrapper
   - .btn-close-circle
   - .btn-secondary-light
*/
/* _content/VNFacade/Modules/OverlayManager/Components/Spinner.razor.rz.scp.css */
/* Class spécifique affichage en attente */

.spinner-bg[b-idlms9jdkx] {
    background-color: rgba(0, 0, 0, 0.63);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
}

    .spinner-bg.fullscreen[b-idlms9jdkx] {
        position: fixed;
        z-index: 10000;
    }

.spinner-container[b-idlms9jdkx] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.spinner[b-idlms9jdkx] {
    /* Utilisation de la couleur de fond neutre et de la couleur primaire */
    border: 16px solid var(--color-white); /* Utilise le blanc pour la couleur de base */
    border-top: 16px solid var(--color-primary); /* Utilise la couleur primaire pour l'animation */
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin-b-idlms9jdkx 1000ms linear infinite;
    top: 40%;
    left: 45%;
    position: absolute;
}

@keyframes spin-b-idlms9jdkx {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}
/* _content/VNFacade/Modules/SystemManager/Components/AdminControlApp.razor.rz.scp.css */
/* CONTENU FINAL POUR AdminControlApp.razor.css */

.top-right-status[b-e7ot9q77ef] {
    /* Positionnement et layout spécifiques à cet emplacement */
    /*position: fixed;
    top: 7rem;
    right: 1rem;*/
    z-index: 800; /* Garder un z-index élevé */
    max-width: 300px;
    /* Layout interne */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    /* Utilisation des variables LibFusion/Settings pour le style visuel */
    background-color: var(--color-white);
    border-radius: var(--radius-double);
    box-shadow: var(--shadow-card-light);
    padding: 0.75rem;
    /* Typographie */
    font-size: 0.85rem;
}

.status-time[b-e7ot9q77ef] {
    color: var(--color-text-secondary); /* Utiliser une variable de Settings si elle existe, sinon #6b7280 */
    font-size: 0.75rem;
}

.status-actions[b-e7ot9q77ef] {
    display: flex;
    gap: 0.4rem;
}

/* Vous pouvez garder l'alignement spécifique si nécessaire, sinon le layout vient de .top-right-status */
.fusion-badge[b-e7ot9q77ef] {
    /* Maintient l'alignement spécifique de cet élément dans le wrapper */
    align-self: flex-end;
}