html, body{ 
    margin: 0; padding: 0; /* reset au cas ou */
    font-family: 'Open Sans', sans-serif;
    background-color: rgb(34, 34, 34);
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(233, 233, 233); /*rgb(161, 187, 218);*/
    font-size: 1.2em;
}

/* Dédut du header */
header{ /* garde le header toujours en haut de page et audessus des autres éléments */
    position: fixed; 
    top: 0;
    width: 100%;
    z-index: 1; /* pour être audessu des autre éléments */
    display: flex;
    justify-content: space-evenly;
    font-size: 1.2em;

    background-color: rgb(24, 35, 60, 0.9); /* couleur avec une opacité de 0.9 */
    height: 72px;  /* hauteur du header */
    align-items: center;
} 

h2, h3{
    width: 100%;
    text-align:center;
}



.active{ /* liens vers les encres  */
    text-decoration: none;
    color: #ffffff;
    margin: 0 5px;
    padding-right: 10px;
    padding-left: 10px;
    height: 64px;
    border-bottom: 2px solid transparent; /* ajoute des bordure en bas */
    border-radius: 6px; /* arrondi les angles */
    display: flex;
    align-items: center;
}

.lien {
    display: inline-flex;
    justify-content: center;
}


.accueil{
    margin-top: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 425px;
    background-image: url(img/giammarco.jpg);
    background-size: cover; 
    background-position: top;
    font-size: 23px;
    
}
.soustitre{
    color: white;
    margin: 20px 40px 20px 40px;
    padding: 10px;
}

.propos{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60%;
    margin: 3%;

}

.propos h2{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;

}


.content{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}


.photo{
    margin: 20px;
    border-radius: 2%;
    background-image: url(img/photo.jpg);
    background-size: cover; 
}


.Prestations{
    width: 100%;
    /*background-color: rgb(30, 32, 34);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.Prestations h2{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;

}

.cub{
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    justify-content: space-evenly;


}

.comp{
    display: flex;
    flex-direction: column;
    margin: 15px;
    padding: 15px;
    width: 280px;
    height: 280px;
    border-radius: 2%;
    justify-content: center;
    align-items: center;
    background-size: cover; 
    background-color: rgb(0, 0, 0, 0.5); /* pour faire resortire les textes blanc */
}

#immobilier{
    background-image: url(img/lomig1.jpg);
    color: white;
    text-shadow: 0 0 10px #000000;  /* ombre pour mieux voir */
}

#contrats{
    background-image: url(img/scott-graham1.jpg);
    color: white;
    text-shadow: 0 0 10px #000000;
}
#personnes{
    background-image: url(img/tyler-nix1.jpg);
    color: white;
    text-shadow: 0 0 10px #000000;
}
#patrimoine{
    background-image: url(img/george-evans1.jpg);
    color: white;
    text-shadow: 0 0 10px #000000;
}


.comp h3{
    text-align: center;
    text-decoration: underline;  /* souligne les titres  */
    text-decoration-color: #E8B960;
    font-size: 20px;
    letter-spacing: 2px;
}

.honoraires{
    width: 60%;
}

.Contact{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.box{
    margin: 20px;
    padding: 10px;
    width: 400px;
    height: 300px;
    background-color: rgb(30, 32, 34);
    text-align: center;

}

.big{
    font-size: 23px;
}
.space{
    margin: 20px;
}
.tel{
    color: #E8B960;
    text-decoration: none;
}


@media only screen and (max-width:580px){
    html, body{
        width: 100%;
        padding: 0;
        margin: 0;
        font-size: 1em;
    }
    header{
        font-size: 1em;
    }
    .accueil{
        font-size: 1em;
        height: 280px;
    }
    .photo{
        width: 45%;
    }
    .propos{
       width: 85%;
   }
   .cub{
    width: 100%;
    }
    .honoraires{
        width: 85%;
    }
    .text{
        width: 100%;
    }
    .box{
        width: 90%;
    }

}

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: rgb(229, 229, 229);
    }
    .text, .titre, h2, .honoraires {
        color: black;
    }
    
}
    /* Dark mode */
@media (prefers-color-scheme: dark) {
    /* Mode par défaut*/
}