/* =============================== */
/* ===== SECTION OUR SERVICE ===== */
/* =============================== */

#video_mast, #img_mast{
    filter: brightness(0.8);
}
#after_mast{
    padding-bottom: 10%!important;
}
/* Section principale Our Service */
#our_service{
    width: 100%;
    height:110vh;
    position: relative;
    min-height: 600px;
}

/* Fond de la section avec arrondi */
#back_our_service{
    background-color: #40534d;
    height:100%;
    width: 100%;
    border-top-left-radius: 50%;
    border-top-right-radius: 0%;
    justify-content: end;
    align-items: end;
    display: flex;
}

/* Conteneur global de la section */
#container_service{
    position: relative;
    display: flex;
    width: 90%;
    height:90%;
}

/* Partie gauche (texte / contenu) */
#left_service{
    width: 50%;
    height:100%;
    padding-top: 15%;
}

/* Bouton de la section service */
#btn_service{
    margin-top: 3%;
}

/* Partie droite (images) */
#right_service{
    width: 45%;
    margin-left: 5%;
    height:100%;
}

/* Conteneur interne des images */
#right_service #in_service{
    width: 100%;
    height:90%;
    display: flex;
    gap:2%;
    position: relative;
}

/* Première colonne d’images */
#right_service #col1{
    width: 45%;
    height:100%;
    display: flex;
    gap:2%;
    flex-direction: column;
}

/* Images de la colonne 1 */
.img_grid1{
    height: 49%;
    width: 100%;
}

/* Deuxième colonne d’images */
#right_service #col2{
    width: 53%;
    height:auto;
    position: relative;
}

/* Image flottante en bas à droite */
#img_col2{
    width: 15vh;
    height: 15vh;
    min-height: 95px;
    min-width: 95px;
    position: absolute;
    bottom: -10%;
    right: -10%;
}

/* Image en cover */
.are_cover{
    width: 100%;
    height:100%;
    object-fit: cover;
}

/* Arrondi spécifique image service */
#img_border_service{
    border-top-left-radius: 50%;
}

/* Bouton service (rappel marge) */
#btn_service{
    margin-top: 3%;
}





/* =============================== */
/* ===== SECTION SERVICE ======== */
/* =============================== */

/* Section principale service */
#service{
    width: 100%;
    height:100vh;
    position: relative;
}

/* Fond coloré avec arrondi */
#background_service{
    background-color: #ad4c2f;
    height:100%;
    border-top-left-radius: 50%;
    border-top-right-radius: 0%;
    display: flex;
    padding-top: 5%;
}

/* Colonne gauche du service */
#service_left{
    width: 50%;
    height:100%;
    display: flex;
    align-items: center;
}

/* Conteneur interne gauche */
#container_left{
    width: 100%;
    height:auto;
    padding-left: 20%;
    padding-top: 15%;
}


/* =============================== */
/* ===== COLONNE DROITE SERVICE == */
/* =============================== */

/* Colonne droite service */
#service_right{
    width: 45%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 2%;
}






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

/* Titre de la galerie */
#cat_home{
    margin-top: -1px;
}
#gallerie_titre{
    width: 60%;
    height: auto;
    text-align: center;
}

/* Conteneur principal galerie */
#gallerie{
    width: 80%;
    height:100%;
    position: relative;
    overflow: hidden;
    margin-top: 3%;
    border-bottom-right-radius: 25%;
}

/* Slider horizontal */
#slider {
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
    display: flex;
    gap:0.5%;
}

/* Carte individuelle du slider */
.in_slider{
    width: 20vw;
    height:100%;
    background-color: #d3c2b5;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

/* Masquage scrollbar navigateur */
.in_slider::-webkit-scrollbar {
    display: none; /* Chrome, Edge, Safari */
}

/* Image principale du slider */
.image_slider{
    width: 100%;
    height: 55vh;
    min-height: 325px;
}


/* Image en cover */
.img_slide{
    width: 100%;
    height:100%;
    object-fit: cover;
    object-position: center;
}

/* Titre slide */
.titre_slide{
    font-weight: bold;
}

/* Marge titre slide */
.titre_slide{
    margin-top: 2vh;
}

/* Texte descriptif slide */
.text_slide{
    margin-top: 0.5vh;
}

/* Bouton du slider */
.slider_btn{
    width: 100%;
    text-align: center;
    margin-top: 3vh;
    height:10vh;
}

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

/* Section bouton galerie */
#section_button_gallery{
    margin-top: -1px;
    width: 100%;
    padding-top: 5vh;
    text-align: center;
    background-color: #40534d;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Conteneur bouton galerie */
#container_btn_gal{
    width: 40%;
    text-align: center;
}



/* =============================== */
/* ===== SECTION VIDEO =========== */
/* =============================== */

/* Section vidéo */
#video_section{
    margin-top: -1px;
    width: 100%;
    height:auto;
    padding-top: 16vh;
    text-align: center;
    background-color: #40534d;
    position: relative;
    min-height: 500px;
}

/* Conteneur vidéo */
#container_video{
    width: 90%;
    height:100%;
    margin: auto;
    position: relative;
    z-index: 1;
}

/* Vidéo principale */
#video_in_container{
    width: 100%;
    height:100%;
    object-fit: cover;
    border-radius: 15px;
    border: 1px solid #d3c2b574;
}

/* Fond décoratif rose */
#back_pink{
    position: absolute;
    width: 100%;
    height:30%;
    bottom: 0;
    left:0;
    background-color: #d3c2b5;
    z-index: 0;
    border-top-right-radius: 100%;
}



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

.section_gallerie{
    padding-top: 5%;
}


/* =============================== */
/* ===== SECTION APRES VIDEO ===== */
/* =============================== */

/* Section globale après la vidéo */
#info_after_video{
    width: 100%;
    height:80vh;
    min-height: 500px;
    margin-top: 5vh;
}

/* Conteneur principal */
#container_after_video{
    width: 100%;
    height:100%;
    display: flex;
}

/* Colonne gauche (images) */
#left_after{
    width: 40%;
    height: 100%;
    display: flex;
    gap: 2%;
    position: relative;
}

/* Colonne droite (texte) */
#right_after{
    width: 60%;
    padding-left: 2%;
    height: 100%;
    display: flex;
}

/* Image gauche */
#left_after #img_left{
    width: 55%;
    height:100%;
}

/* Image droite avec arrondi */
#left_after #img_right{
    width: 45%;
    height:100%;
    border-top-right-radius: 50%;
    overflow: hidden;
}

/* Image décorative côté droit */
#right_after #img_right{
    padding-right: 5%;
    width:20%;
    height:100%;
}

/* Texte principal à droite */
#text_right{
    width:80%;
    display: flex;
    justify-content: end;
    flex-direction: column;
    padding-bottom: 20vh;
    padding-right: 5%;
}

/* Bouton section after video */
#btn_after{
    margin-top: 3%;
}




/* =============================== */
/* ===== SECTION EVENEMENT ======= */
/* =============================== */

/* Section événement */
#section_event{
    width: 100%;
    height:50vh;
    display: flex;
    margin-top: 5vh;
    padding: 5%;
    min-height: 265px;
}

/* Colonne logo événement */
#left_event{
    width: 25%;
    height: 100%;
    text-align: center;
}

/* Logo événement */
#logo_event{
    width: 70%;
    height:auto;
}

/* Colonne droite événement */
#right_event{
    width: 100%;
    height: 100%;
    display: flex;
}

/* Conteneur infos événement */
#container_info_event{
    width: 50%;
}

/* Texte principal événement */
#text_in_right_event{
    width: 100%; 
}

/* Titre supérieur événement */
#titre_top_right{
    height:auto;
}

/* Bouton événement */
#btn_event{
    margin-top: 5%;
}

/* Espacement haut décoratif */
.div_top_in{
    height:5vh;
    padding-left: 2%;
}

/* Texte interne événement */
.text_in_right{
    padding: 2%;
}

/* Texte aligné à droite */
#right_text{
    width: 95%;
}

/* =============================== */
/* ===== SECTION GALERIE IMAGES == */
/* =============================== */

/* Section galerie */
#galery{
    min-height: 500px;
    width: 100%;
    height:90vh;
    margin-top: 25vh;
}

/* Conteneur principal galerie */
#container_gallerie{
    width: 100%;
    height:100%;
    margin-left:8%;
    position: relative;
    display: flex;
}

/* Conteneur texte galerie */
#contaienr_text{
    padding-top: 10%;
    width: 40%;
    text-align: left;
}

/* Conteneur bouton galerie */
#container_btn_galery{
    width: 100%;
    margin-top: 3%;
}

/* Conteneur images galerie */
#container_picture_gal{
    width: 60%;
    height:100%;
    display: flex;
    position: relative;
}

/* Demi-colonne image */
.half_pict{
    height: 100%;
    position: relative;
}

/* Colonne gauche images */
#left_half{
    width: 50%;
}

/* Colonne droite images */
#right_half{
    width: 50%;
}

/* Image galerie positionnée */
.picture_gal{
    position: absolute;
    overflow: hidden;
}

/* Image galerie 1 */
#gal_img1{
    width: 63%;
    height:55%;
    right:0;
    top:0;
    border-top-left-radius: 50%;
}

/* Image galerie 2 */
#gal2_img{
    width: 63%;
    height:38%;
    right:0;
    bottom:5%;
}

/* Image galerie 3 */
#gal3_img{
    width: 85%;
    height:95%;
    left:3%;
    top:0%;
}

/* Conteneur bas galerie */
#container_bottom{
    align-items: start;
    width: 65%;
    margin-left: 25%;
    bottom: -7%;
}





@media (max-width: 1366px){
    #info_after_video{
        margin-top: 20vh;
    }

}

@media (max-width: 1280px) and (max-height: 1024px){
    #our_service{
        height:90vh;
    }
    #video_section{
        height: 70vh;
    }
    #info_after_video{
        margin-top: 0;
        height:80vh;
    }
    #galery{
        margin-top: 15vh;
        height: 80vh;
    }
}
@media (max-width: 1280px) and (max-height: 800px){
    #our_service{
        height:110vh;
    }
    #video_section{
        height: 90vh;
    }
    #info_after_video{
        height:80vh;
        margin-top: 15vh;
    }
    #galery{
        height:90vh;
        margin-top: 15vh;
    }
}
@media (max-width: 1152px){
    #our_service{
        height:90vh;
    }
    #video_section{
        height: 70vh;
    }
    #info_after_video{
        margin-top: 0;
        height:70vh;
    }
    #galery{
        height:70vh;
    }
}


@media (max-width: 800px){
    .section_gallerie{
        height: 100vh!important;
        min-height: 400px;
    }
   #our_service, #masthead{
    min-height: 500px;
   }
   #video_section{
    min-height: 380px;
   }
   #info_after_video, #galery{
    min-height: 400px;
   }
}

@media (max-width: 700px){
    #our_service{
        min-height: auto;
        height:auto;
    }
    #back_our_service{
        border-top-left-radius: 0%;
    }
    #container_service{
        flex-direction: column;
        width: 100%;
    }
    #left_service{
        width: 75%;
        margin-left: 10%;
        margin-top: 5%;
    }
    #right_service{
        width: 80%;
        margin-left: 25%;
        margin-top: 10%;
        height:90vh;
        min-height: 300px;
    }
    #gallerie_titre{
        width: 90%;
    }
    .in_slider{
        width: 35vw;
        min-width: 200px;
    }

    /* */
    .section_gallerie{
        padding-top: 10%;
    }

    /* */
    #section_event{
        flex-direction: column;
        min-height: auto;
        height:auto;
    }
    #left_event{
        width: 30%;
    }
    #right_event{
        width: 100%;
    }

    /* */
    #info_after_video, #galery{
        min-height: auto;
        height:auto;
    }
    #container_after_video{
        flex-direction: column;
    }

    /* */
    #container_gallerie{
        flex-direction: column;
    }
    #container_picture_gal{
        height:50vh;
    }

    /* */
    #avis_house{
        height:auto;
        min-height: auto;
        padding-bottom: 20vh;
    }

    /* */
    #info_after_video{
        margin-top: 10%;
    }
    #left_event{
        text-align: left;
    }
    #left_after{
        height:85vh;
        min-height: 300px;
        width: 80%;
    }
    #right_event{
        flex-direction: column;
    }
    .div_top_in{
        display: none;
    }
    #right_after{
        width: 100%;
    }
    #text_in_right_event, #container_info_event{
        width: 100%;
    }
    #text_right{
        width: 80%;
        margin-left: 15%;
        margin-top: 15%;
        text-align: right;
        padding-bottom: 0;
        padding-right: 2.5%;
    }
    #right_after #img_right{
        display: none;
    }
    /* */
    #container_gallerie{
        margin-left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #galery{
        margin-top: 0%;
    }
    #contaienr_text{
        width: 85%;
    }
    #container_picture_gal{
        width: 75%;
        margin-top: 10%;
        height:80vh;
    }
    .half_pict{
        overflow: hidden;
    }
    .picture_gal{
        width: 100%!important;
    }
}