@media (min-width: 1441px) {
    header{
    height: 110vh;
    background-image: url('../images/house31.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom:50px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    }

    .textIndex{
        background-color : rgba(255,255,255,0.8);
        width:80%;
        margin:auto;
        font-size:1.5rem;
        padding:30px;
        text-align:center;
        border-radius:20px;
        display:flex;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 1440px) {
    header{
        height: 60vh;
        background-image: url('../images/house31.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom:50px;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
        }
    
        .textIndex{
            background-color : rgba(255,255,255,0.8);
            width:80%;
            margin:auto;
            font-size:1.5rem;
            padding:30px;
            text-align:center;
            border-radius:20px;
            display:flex;
            box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
        }

}

@media (max-width: 800px) {
    header{
    height: 60vh;
    background-image: url('../images/house31.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom:50px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    }
}

h1{
    margin-top:10%;
    color:white;
    font-size:3.5rem;
    border-radius:20px;
    padding:20px;
   margin-left:24%;
   text-align:center;
    display:inline-block;
}

h2:hover{
    color:gray;
    background-color:white;
}

.indexheader a{
    color:#717787;
    margin-top:2%;
    font-size:2.5rem;
    background-color : rgba(255,255,255,0.8);
    border-radius:30px;
    padding:20px;
    margin-left:42%;
    display:inline-block;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.decouv{
    color:#717787;
}

a:hover{
    color:white;
}

.imgindex {
    width: 40%;
    border-radius: 20px;
    object-fit: cover; /* Pour ajuster la taille de l'image */
    object-position: center; /* Pour centrer l'image */
}

.textIndex p{
    width:40%;
    margin:7%;;
    margin-left:17%;;
}

h3{
    font-size:2rem;
    margin-top:3%;
    text-align:center;
    margin-bottom:3%;
}

h4{
    font-size:1.6rem;
    margin-bottom:10px;
}

.vignette{
    background-color : rgba(255,255,255,0.8);
    width:20%;
    margin:30px;
    font-size:1.2rem;
    border-radius:20px;
    padding:20px;
    text-align:center;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.avis{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:row;
    margin-bottom:7%;
}

.h3index {
   font-size:2.8rem;
   
}

.slidesHome {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
}

.slide-image {
    width: 100%;
    height: auto;
    max-width: 550px; /* Taille maximale des images */
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
    margin-left:8%;
    margin-top:20%;
    margin-bottom:10%;
}

.slide-image:hover {
    transform: scale(1.1);
}

.map {
    width: 100%; /* Assure que la div occupe toute la largeur disponible */
    height: 300px; /* Définissez la hauteur souhaitée pour la div */
    display: flex;
    justify-content: center; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement */
    margin-bottom:200px;
}

.map .slide-image2 {
 width:50%;
 border-radius: 15px;
 margin-top:10%;
 margin-bottom:10%;
}

.indexheaderbas a{
    color:#717787;
    margin-top:2%;
    font-size:2.5rem;
    background-color : rgba(255,255,255,0.8);
    border-radius:30px;
    padding:20px;
    margin-left:42%;
    display:inline-block;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.texteDescriptif p{
    margin-left:40px;
    margin-right:40px;
    background-color : rgba(255,255,255,0.8);
    font-size:1.2rem;
    border-radius:20px;
    padding:20px;
    text-align:center;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.newPiscine {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    background-color: #f8f8f8; /* Couleur de fond douce */
}

.pool-image {
    width: 30%;
    height: auto;
    border-radius: 10px; /* Coins arrondis pour un effet plus doux */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour donner de la profondeur */
    transition: transform 0.3s, box-shadow 0.3s; /* Transition pour l'effet de survol */
}

.pool-image:hover {
    transform: scale(1.05); /* Agrandissement léger au survol */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Ombre plus intense au survol */
}