/* Assombrit la vidéo du masthead */
#video_mast, #img_mast{
    filter: brightness(0.7);
}



/* Texte avec léger décalage vertical */
.p_text{
    margin-top: 1vh;
}

/* Bouton en haut (petit, transparent, arrondi) */
.container_btn_top{
    width: 5vw;
    padding: 0% 1% 0% 1%;
    background-color: transparent;
    color: #40534d;
    border-radius: 20px;
    cursor: pointer;
    margin-left: 0.5%;
}

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

/* Section galerie principale */
#section_gallerie{
    background-color: #40534d!important;
    width: 100%;
    height:110vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 20vh;
    min-height: 500px;
    position: relative;
    margin-top: -1px;
}

/* Galerie en largeur automatique */
.gal_auto{
    width: 60%!important;
}

/* =========================
   SECTION PRÉSENTATION
   ========================= */

/* Conteneur global de présentation */
#presentation1{
    width: 100%;
    height:80vh;
    position: relative;
    display: flex;
    margin-top: 10vh;
    min-height: 500px;
}

/* Colonne gauche */
#left_pres{
    width: 55%;
    height:100%;
    display: flex;
    justify-content: center;
}

/* Contenu interne de la colonne gauche */
#container_left{
    width: 80%;
    padding-top: 10%;
}

/* Colonne droite (images) */
#right_pres{
    width: 40%;
    height:100%;
    position: relative;
    display: flex;
    gap:2%;
    margin-left: 10%;
}

/* Première sous-colonne droite */
#right_pres_1{
    width: 40%;
    height:100%;
    display: flex;
    flex-direction: column;
    gap:2%;
}

/* Image haute */
#top_right{
    width: 100%;
    height:40%;
}

/* Image basse avec arrondi */
#bot_right{
    width: 100%;
    height:60%;
    border-bottom-left-radius: 50%;
    overflow: hidden;
}

/* Deuxième sous-colonne droite */
#right_pres_2{
    width: 60%;
    height:100%;
}

/* Image plein format */
#full_pict_right{
    width: 100%;
    height:100%;
}

/* =========================
   SECTION CARACTÉRISTIQUES
   ========================= */

/* Section principale */
#carac{
    margin-top: 10%;
    width: 100%;
    height: 90vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
}

/* Texte positionné en haut */
#text_top{
    position: absolute;
    width: 50%;
    left: 27%;
}

/* Conteneur des colonnes */
#container_section_carac{
    width: 70%;
    height:100%;
    display: flex;
    position: relative;
    gap:1.2%;
    margin-left: 10%;
    margin-top: 10%;
}

/* Bord arrondi sur la colonne */
#border_carc{
    border-top-left-radius: 50%;
    overflow: hidden;
}

/* Colonne 1 */
.carc_col1{
    width: 25%;
    height:100%;
    display: flex;
    flex-direction: column;
    gap:2%;
}

/* Demi-bloc colonne 1 */
.div_col1{
    width: 100%;
    height:50%;
}

/* Conteneur central */
#container_carac{
    width: 50%;
}

/* Colonne 2 */
.carc_col2{
    width: 50%;
    height:100%;
    padding-top: 18%;
    color:white;
}

/* Variante colonne 2 */
#col2{
    padding-top: 15%;
}

/* Bloc haut colonne 2 */
#div2_1{
    height:60%;
    width: 100%;
}

/* Bloc bas colonne 2 */
#div2_2{
    height:40%;
    width: 100%;
}

/* =========================
   SECTION OBLIGATIONS
   ========================= */

/* Version desktop */
#obligation{
    width: 100%;
    height:auto;
    display: flex;
    padding-top: 20vh;
    gap:2%;
    justify-content: center;
    align-items: center;
    background-color: #40534d;
}

/* Version responsive (cachée par défaut) */
#obligation_resp{
    display: none;
    width: 100%;
    height:auto;
    margin-top: 20vh;
    gap:2%;
    justify-content: center;
    align-items: center;
}

/* Conteneur icône + texte */
.container_obli{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:5%;
    width: fit-content
}

/* Icône obligation */
.ic_obli{
    width: 3vw;
    height:auto;
}

/* =========================
   SECTION AVIS
   ========================= */

/* Section avis */
#avis_house{
    margin-top: 10%!important;
}

/* =========================
   SECTION INFO MAISON
   ========================= */

/* Section info principale */
.info_house{
    position: relative;
    width: 100%;
    height: 90vh!important;
    background-color: transparent!important;
    padding-top: 5vh!important;
}

/* Fond arrondi derrière la section */
#background{
    width: 100%;
    height:120%;
    position: absolute;
    background-color: #40534d;
    border-top-left-radius: 50%;

}

/* Section bouton galerie */
#section_button_gallery{
    width: 100%;
    height: 20vh;
    min-height: 200px;
    display: flex;
    padding-top: 0!important;
    flex-direction: column;
    margin-top: -1px;
}

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

/* Conteneur des images */
#gallery_picture{
    width: 100%;
    height:10vh;
}

/* Version responsive colonne 2 (cachée) */
#col2_carac_resp{
    display: none;
    background-color: #40534d;
    padding: 5%;
    margin-top: -1px;
}




/* =========================
   BREAKPOINT ≤ 1366px
   ========================= */
@media (max-width: 1366px){
}

/* =========================
   BREAKPOINT ≤ 1280px & hauteur ≤ 1024px (tablettes paysage)
   ========================= */
@media (max-width: 1280px) and (max-height: 1024px){

    /* Sections principales légèrement réduites */
    #presentation1{
        height: 80vh;
    }
    #carac{
        margin-top: 20%;
        height:80vh;
    }
    #section_gallerie{
        height:80vh!important;
    }

    /* Décalage contenu texte */
    #container_left{
        margin-top: 10%;
    }

    /* Ajustement colonne droite */
    #right_pres{
        margin-left: 5%;
        width: 45%;
    }

    /* Largeur globale des caractéristiques */
    #container_section_carac{
        gap:2%;
    }
}

/* =========================
   BREAKPOINT ≤ 1280px & hauteur ≤ 800px (laptops bas écran)
   ========================= */
@media (max-width: 1280px) and (max-height: 800px){
    /* Sections plus hautes pour éviter l’écrasement */
    #section_gallerie{
        height:90vh!important;
    }
    #presentation1{
        height: 90vh;
    }
    #carac{
        margin-top: 15%;
        height:90vh;
    }

    /* Réduction largeur container */
    #container_section_carac{
        width: 75%;
    }

    /* Ajustement marges avis */
    #avis_house{
        margin-top: 10vh!important;
    }
}

/* =========================
   BREAKPOINT ≤ 1152px
   ========================= */
@media (max-width: 1152px){
    /* Section avis compacte */
    #avis_house{
        height:60vh;
        margin-top: 10%!important;
    }

    /* Réduction hauteur sections */
    #section_gallerie{
        height:80vh!important;
    }
    #carac{
        height:80vh;
    }
    #presentation1{
        height: 80vh;
    }

}

/* =========================
   BREAKPOINT ≤ 1024px (tablettes)
   ========================= */
@media (max-width: 1024px){

}

/* =========================
   BREAKPOINT ≤ 800px
   ========================= */
@media (max-width: 800px){
    /* Section avis étendue */
    #avis_house{
        min-height: 400px!important;
    }

    /* Galerie plus grande */
    #section_gallerie{
        height: 90vh!important;
    }

    /* Hauteur minimale commune */
    #presentation1, 
    #carac, 
    #section_gallerie{
        min-height: 400px;
    }
}

/* =========================
   BREAKPOINT ≤ 700px (mobile)
   ========================= */
@media (max-width: 700px){

    /* ===== Présentation ===== */
    /* Inversion texte / images */
    #presentation1{
        flex-direction: column-reverse;
        margin-top: 0;
        min-height: auto;
        height:auto;
    }

    /* Colonne texte */
    #left_pres{
        width: 90%;
        margin-left: 5%;
        margin-top: 20%;
    }

    /* Container texte pleine largeur */
    #container_left{
        width: 100%;
    }
    #container_left{
        margin-top: 0;
        padding-top: 0;
    }

    /* Colonne images */
    #right_pres{
        width: 80%;
        margin-left: 0%;
        height:80vh;
        min-height: 400px;
        margin-top: 10%;
    }

    /* Suppression arrondi bas */
    #bot_right{
        border-bottom-left-radius:0;
    }

    /* Arrondi image principale */
    #full_pict_right{
        border-top-right-radius: 30%!important;
        overflow: hidden;
    }

    /* ===== Caractéristiques ===== */
    /* Suppression texte flottant */
    #text_top{
        display: none;
    }   

    /* Container carac décalé */
    #container_section_carac{
        width: 80%;
        height:80vh;
        min-height: 300px;
        margin-left: 30%;
    }

    /* Colonnes rééquilibrées */
    .carc_col1{
        width: 60%;
    }
    .col2{
        width: 40%;
    }

    /* Section carac en colonne */
    #carac{
        min-height: auto;
        height:auto;
        flex-direction: column;
    }

    /* Version responsive colonne 2 */
    #col2_carac_resp{
        display: block;
        width: 100%;
    }
    #col2_carac{
        display: none;
    }
    #background{
        height:100%;
    }
    /* ===== Obligations ===== */
    /* Masquage version desktop */
    #obligation{
        width: 95%;
        margin-left: 2.5%;
        display: none;
    }

    /* Affichage version mobile */
    #obligation_resp{
        display: flex;
        margin-top: 10%;
    }

    /* Cartes obligations en colonne */
    .container_obli{
        flex-direction: column;
        row-gap: 10%;
        width: 33.33%;
        min-height: 95px;
        padding: 2%;
        justify-content: start;
    }

    /* Bouton galerie */
    #section_button_gallery{
        height: 30vh;
        min-height: 300px;
    }

    /* ===== Galerie ===== */
    .gallerie{
        width: 90%!important;
    }

    /* Icônes adaptatives */
    .ic_obli{
        width: 5vw;
        min-width: 25px;
    }

    /* Texte centré sous icônes */
    .container_obli div{
        text-align: center;
    }

    /* ===== Avis ===== */
    #avis_house{
        margin-top: 20%!important;
    }

    /* Gestion du scroll tactile galerie */
    #gallerie,
    #slider {
        touch-action: pan-y;
    }
}