/*contenu*/
.gras{
    font-weight: bold;
}
.imageDeFond {
    position: relative; /* Pour positionner l'overlay par rapport à ce conteneur */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 40vw; /* Ajustez la largeur */
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Couleur transparente */
    backdrop-filter: blur(10px); /* Applique le flou */
    z-index: 2; /* Assurez-vous qu'il est devant */
    display: flex;
    flex-direction: column;
    padding: 35vh 0 0 2vw;
}

.overlay h1, .overlay p {
    margin: 0;
    color: white; /* Couleur du texte */
    line-height: 1.5;
    font-weight: lighter;
}

.overlay h1 {
    font-size: 45px;

    margin-bottom: 1rem;
}

.overlay p {
    font-size: 30px;
}

@media only screen and (max-width: 768px) {
    #premiereImg .overlay {
        display: none; /* Masque l'overlay sur petit écran */
    }

    #premiereImg {
        height: auto; /* Permet à l'image de s'ajuster */
    }
    #chauffeEau
    {
        text-align: center;

    }
    #imgChauffeEau
    {
        max-width: 90vw;
    }
}

.contenu {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-evenly;
    padding: 5% 20% 5% 15%;
    background-color: white; /* Couleur de fond pour cacher l'image */
    color: #333;
    text-align: left;
}
.titre{
    padding-right: 10%;
    width: 50vw;
}
.contenu p, .contenu ul{
    font-size: 18px;
    line-height: 1.5;
}
#interfaceExemple
{
    width: 35vw;
}
@media only screen and (max-width: 1280px)
{
    .contenu
    {
        flex-direction: column;
    }
}
@media only screen and (max-width: 768px)
{
    #interfaceExemple
    {
        width: 100vw;
    }
    .imgDansLesDiv
    {
        display: none;
    }
    .contenu{
        padding: 5%;
    }
    .titre
    {
        width: 100%;
    }
    .imgLarges
    {
        max-width: 90vw;
    }
    .menu-items
    {
        top: 100%;
    }
}