html{
    background-color: #222;
}


/* Haut de la page */
.topContainer{
    margin-top: 12vh;
    background: url(../images/fondHautPageService.svg) no-repeat;
    background-size: cover;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 68vh;
}
/* Image presta */
.imgService{
    height: 40vh;
    width: auto;
    aspect-ratio: 20/9;
    object-fit: cover;
    border-radius: 1000px;
    outline: solid 3px #222;
    transition: 0.5s all;
}
/* Titre */
.titlePresta{
    font-family: 'Quicksand', 'Rubik', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.3vw;
    transition: 0.5s all;
    margin-top: 1vh;
}
/* Hover */
.imgService:hover ~ .titlePresta{
    text-decoration: underline 3px #f5f5f5;
}
.imgService:hover{
    outline: solid 3px #f5f5f5;
    transform: scale(1.1);
}
/* Fin des hovers */

@media screen and (max-width: 750px) {
    .imgService{
        height: 35vh;
    }
}
@media screen and (max-width: 620px) {
    .imgService{
        height: 30vh;
    }
    .titlePresta{
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 530px) {
    .imgService:hover{
        transform: scale(1) !important;
    }
}
@media screen and (max-width: 480px) {
    .imgService{
        aspect-ratio: 0.9/1;
        height: 50vh;
        border-radius: 70px;
    }
}
@media screen and (max-width: 330px) {
    .imgService{
        height: 40vh;
    }
}
/* Fin du haut de la page */

/* Infos */
.infoContainer{
    display: flex;
    min-height: 20vh;
    background-color: #222;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}
/* Icons */
#iconInfo{
    font-size: 4rem;
    background: linear-gradient(45deg, #87c9f8, #9fd3f8, #bee2fb);
    background-size: 200% 200%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    transition: 0.5s all;
}
.infoDiv:hover #iconInfo{
    color: #f5f5f5;
}
/* Fin des icons */
/* Texte */
.titleInfo{
    color: #f5f5f5;
    font-family: 'Quicksand', 'Rubik', sans-serif;
    line-height: 4vh;
}
@media screen and (max-width: 530px) {
    .titleInfo{
        font-size: 0.8rem;
    }
}
@media screen and (max-width: 380px) {
    .titleInfo{
        font-size: 0.5rem;
    }
    #iconInfo{
        font-size: 3.5rem;
    }
}
/* Fin des textes */
/* Fin des infos */

/* Description */
.descriptionContainer{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #f5f5f5;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 3% 5%;
    min-height: 40vh;
}
.servOrName{
    text-decoration: underline #87c9f8 3px;
    font-weight: bold !important;
}
/* Titre */
.titleDescr{
    font-family: 'Quicksand', 'Rubik', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.2vw;
    font-weight: 400;
    text-align: center;
    margin-bottom: 5vh;
}
/* Plus */
.plusDescr{
    color: #87c9f8;
    font-family: 'Quicksand', 'Rubik', sans-serif;
    font-weight: bolder !important;
}
/* Fin du plus */
/* Partie changeable */
.nameServDescr{
    font-family: 'Quicksand', 'Rubik', sans-serif;
    font-weight: bolder !important;
    text-decoration: underline #87c9f8 3px;
}
/* Fin de la partie changeable */
/* Fin du titre */
/* Fin de la description */

/* Avis Btn */
.globalAvisSection{
    background-color: #f5f5f5;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    justify-content: center;
    align-items: center;
    display: flex;
}
/* Lien */
.particulierLien{
    width: 90vw;
    height: 5vh;
    text-align: center;
    background-color: #bee2fb;
    color: #f5f5f5;
    display: flex;
    border: solid 3px #f5f5f5;
    margin-bottom: 5vh;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: 0.5s all linear;
}
.particulierLien:hover{
    color: #87c9f8;
    background-color: transparent;
    border-color: #87c9f8;
}
/* Fin du lien */
/* Fin des avis */

/* Image supplémentaire */
.imgSupplContainer{
    width: 100%;
    background-color: #D7E0E6;
    padding: 5vh 2vw;
    transition: 0.3s all;
    display: none;
}
.imgSupplContainer:hover{
    background-color: #DAECF8;
}
.imgSuppl{
    width: 100%;
    height: 70vh;
    object-fit: cover;
    border-radius: 50px;
}
/* Fin de l'image */