body{
    margin:0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
    color: #666;
    font-weight: 300;
    line-height: 1.65em;
}
a {
    color: #62b5b3;
}
p {
    font-size: larger;
}
h1, h2, h3, h4, h5 {
    font-family: "Dancing Script", sans-serif;
    color: #031a44;
}
h1 {
    font-size: 50px;
}
h2 {
    margin-top: 20px; /* Ajoutez de l'espace au-dessus des titres */
    margin-bottom: 20px; /* Ajoutez de l'espace en dessous */
    font-size: 1.5em; /* Ajustez la taille de la police */
}

.about-me {
    padding: 20px;
    text-align: left; /* Alignement du texte à gauche */
}

.prices {
    margin-top: 40px; /* Espace supplémentaire pour séparer la section "Prices" */
}

h1, h2, h3 {
    line-height: 1.2em; /* Ajustement de la hauteur des lignes pour éviter le chevauchement */
}

/* Header */
div.header img{
    top: 50%;
    left: 50%;
    width: 500px;
    max-width: 50%;
}
div.header input {
    cursor: pointer;
    background-color: #62757c;
    color: white;
    padding: 1.5%;
    border-radius: 3px;
    border: none;
}
div.header input:hover {
    background-color: #031a44;
    padding: 1.5%;
    border-radius: 3px;
}

/* bloc 1 */
.header-bph {
    margin: 0%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: #fef8d9;
    background: #62b5b3;
}
.header-bph .groupe {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    display: flex;
    width: 30%;
}
img.logo {
    display: flex;
    width: 60%;
    margin: 5%;
    border-radius: 15px;
}
p.p-block-1 {
    font-size: x-large;
}
div.header-bph h2{
    text-align: center;
    font-size: 2em;
    line-height: 1.35em;
}
h2, h3 {
    font-weight: 400;
    line-height: 1.65em;
}
div.header-bph input.linkedin {
    font-size: larger;
    cursor: pointer;
    background-color: #096a7d;
    color: #fef8d9;
    padding: 2.5%;
    padding-inline: 20px;
    border-radius: 3px;
    border: none;
    border-width: 1.75px;
}
div.header-bph input.linkedin:hover {
    transition: 0.3s;
    background-color: #031a44;
}

/* Bloc 2 */
div.bloc-2 {
    font-size: 120%;
    margin: 5%;
}

/* Bloc 3 */
.bloc-3 {
    margin: 5%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.bloc-3 img {
    border-radius: 15px;
}
.bloc-3 .groupe {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
    width: 30%;
}
img .image-services {
    width: 100%;
}
p.p-block-3 {
    font-size: x-large;
}

/* block 4 */
div.bloc-4 {
    font-size: 120%;
}
div.about-me {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
    margin: 15px;
}
.partition { 
    width: 50%;
}
.about-me h1 {
    margin: 0px;
}
.about-me img {
    max-width: 100%; /* Assure que l'image n'excède pas la taille du conteneur */
    height: auto; /* Garde les proportions de l'image */
    margin-bottom: 15px; /* Ajoute un espace en dessous de l'image */
    border-radius: 15px; /* Arrondit les bords pour un look plus agréable */
}

.about-me .partition img {
    border-radius: 15px;
}
.partition p{
    max-width: 50%;
    text-align: left;
    vertical-align: baseline;
}
.partition .right{
    margin-left: 15px;
    text-align: left;
}
.partition .left{
    margin-right: 15px;
    text-align: right;
}

/* Certificates */
.certificates {
    text-align: center;
}
.certificates .cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.certificates img{
    width: 200px;
}
div.valeurs {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
}
.valeur img {
    max-width: 350px;
    width: 100%;
}
.valeur p{
    height: 79.17px;
    max-width: 370px;
    vertical-align: baseline;
}

/* Prices */
.prices {
    text-align: center;
}
.prices .cards {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
}
.prices .card {
    padding: 15px;
    border-radius: 15px;
    border: 2px solid #62b5b3;
    max-width: 350px;
    width: 100%;
}
.prices .card:hover {
    transition: 1s;
    background-color: #62b5b409;
}
.prices .card p{
    max-width: 370px;
    vertical-align: baseline;
}
.prices .cards a{
    margin: 1.5%;
}

.prices .card input {
    cursor: pointer;
    padding: 15px;
    font-size: large;
    color: #fff;
    border-radius: 15px;
    border: none;
    background-color: #62b5b3;
}

/* Reviews */
.review {
    text-align: center;
}
.all-review{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.review .card-review {
    margin-inline-end: 20px;
    margin-inline-start: 20px;
}
.review a {
    width: 33%;
}
.review button {
    cursor: pointer;
    background-color: #62b5b3;
    color: white;
    padding: 1%;
    border-radius: 20px;
    border: none;
    font-size: larger;
}
.review button:hover {  
    background-color: #031a44;
    transition: 0.7s;
    border-radius: 50px;
}

/* Footer */
.address, .prices-bot, .review {
    text-align: center;
}
.prices-bot {
    text-decoration: none;
    font-size: x-large;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: space-around;
}
.text-1, .bloc-4{
    margin: 5%;
}
.paragraphe p {
    font-size: large;
}
/* Media Queries */
@media screen and (max-width: 1024px) {
    div.header-bph {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    .header-bph .groupe {
        width: 100%;
        align-items: center;
    }
    .header-bph .groupe p{
        margin: 15px;
    }
    img .logo-bph {
        display: flex;
        width: 40%;
        margin: 5%;
        border-radius: 15px;
    }
    .prices .cards a {
        width: 40%;
    }

    .prices .card p, .valeur p, .partition p {
        max-width: 100%;
    }
    .all-review a {
        width: 100%;
    }
    .partition {
        width: 100%;
    }
    .partition .left {
        text-align: center;
    }
    .about-me h1 {
        text-align: center;
    }
    .prices .cards a {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .bloc-3 .groupe {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .bloc-3 .groupe img{
        width: 50%;
    }
}

@media screen and (max-width: 600px) {
    div.header img {
        max-width: 75%;
    }

    .bloc-1 .groupe, .bloc-3 .groupe, .prices .card {
        width: 100%;
    }

    .prices .cards a {
        width: 80%;
    }

    .prices .card p, .valeur p, .partition p {
        max-width: 100%;
    }

    h1 {
        font-size: 30px;
    }

    p, .bloc-1 h2 {
        font-size: medium;
    }
    .certificates .cards a {
        width: 100%;
    }
}
@media screen and (max-width: 600px) {
    .about-me, .prices {
        padding: 10px; /* Réduction de l'espacement pour les petits écrans */
    }

    h2 {
        font-size: 1.2em; /* Réduction de la taille de la police pour les titres sur mobile */
    }

    .about-me img {
        width: 80%; /* Ajuste la taille de l'image pour qu'elle occupe moins d'espace */
        margin: 0 auto; /* Centre l'image */
    }
}

img {
    max-width: 100%;
    height: auto;
}