/**********
* ACCUEIL *
**********/

.main{
    margin-top: 4.5rem;
    min-height: 85vh;
    position: relative;
    padding: 0 10%;
}
.main::after{
    position: absolute;
    content: '';
    filter: brightness(80%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
}
.main__titre{
    color: var(--blanc);
    padding-top: 4rem;
}
.main .card{
    background-color: var(--blanc);
    padding: 1.5rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    position: absolute;
    left: 10%;
    bottom: -3rem;
    width: 80%;
    box-shadow: 0px 0px 31px rgba(0, 0, 0, 0.15);
}
.main .card__titre{
    color: var(--primaire);
}
/* Responsive desktop */
@media screen and (min-width: 1200px) {
    .main{
        margin-top: 12.5rem;
        min-height: 65vh;
    }
    .main__titre{
        max-width: 45%;
    }
    .main .card{
        left: 10%;
        bottom: -1rem;
        width: 40%;
    }
}

/**************
* ENTREPRISE *
**************/

.bloc-principal{
    margin: 6rem 10%;
    margin-top: 8rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.bloc-principal__conteneur{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.bloc-principal .btn{
    margin: 0 auto;
}
.bloc-principal__image{
    border-radius: 30px 30px 0 30px;
}
/* Clients */
.bloc-principal .clients{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.bloc-principal .client{
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--primaire);
    font-weight: 600;
}
.bloc-principal .client__picto{
    width: 2.5rem;
}
.graviers{
    display: none;
}
/* Responsive tablette */
@media screen and (min-width: 768px) {
    .bloc-principal .clients{
        flex-direction: row;
        gap: 4rem;
        justify-content: center;
    }
}
/* Responsive desktop */
@media screen and (min-width: 1000px) {
    .bloc-principal{
        flex-direction: row-reverse;
        gap: 5%;
        align-items: center;
        position: relative;
		justify-content: center;
    }
    .bloc-principal .btn{
        margin: 0;
    }
    .bloc-principal .clients{
        justify-content: flex-start;
    }
    .bloc-principal__image{
		height: 24rem;
    }
	.bloc-principal__conteneur{
		width: 50%;
	}
    .graviers{
        display: block;
        position: absolute;
        right: -13%;
        top: 12rem;
    }
	.bloc-principal .client__picto{
		transition: all .3s;
	}
	.bloc-principal .client:hover .client__picto{
		transform: rotate(5deg)
	}
}

/**************
* PRESTATIONS *
**************/
.prestations{
    position: relative;
    padding: 4rem 10%;
}
.prestations__titre{
    color: var(--blanc);
    margin-bottom: 2rem;
}
.prestations::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-position: center;
    background-size: cover;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.5);
}
.prestations::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(0, 77, 51, 0.7);
}
.prestations__conteneur{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.prestations .prestation{
    width: 50%;
    text-align: center;
    padding: 1rem;
}
.prestations .prestation__titre{
    color: var(--blanc);
    margin-top: 0.5rem;
}
.prestations .prestation__picto{
    background-color: var(--blanc);
    padding: 1rem;
    width: 6.25rem;
    height: 6.25rem;
    object-fit: contain;
    border-radius: 10px;
}

/* Responsive tablette */
@media screen and (min-width: 768px) {
    .prestations .prestation{
        width: 30%;
    }
}
/* Responsive desktop */
@media screen and (min-width: 1200px) {
    .prestations .prestation{
        width: 12rem;
    }
    .prestations .prestation__picto{
        transition: .3s all;
    }
    .prestations .prestation:hover .prestation__picto{
        transform: scale(1.1);
    }
}

/**********
* CHOISIR *
**********/

.choisir{
    padding: 2rem 10%;
}
.choisir .cards{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem auto;
}
.choisir .cards .card{
    background-color: var(--blanc);
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    text-align: center;
    height: 70vw;
    padding: 1rem;
}
.choisir .card__picto{
    width: 9.375rem;
}
/* Responsive tablette */
@media screen and (min-width: 768px) {
    .choisir .cards{
        flex-direction: row;
        justify-content: center;
    }
    .choisir .cards .card{
        width: 30%;
        height: 25vw;
    }
}
/* Responsive desktop */
@media screen and (min-width: 1200px) {
    .choisir .cards{
        padding: 2rem 10%;
    }
    .choisir .cards .card{
        width: 33%;
        height: 20vw;
    }
    .choisir .card:hover .card__picto{
        transform: rotateY(360deg);
    }
    .choisir .card__picto{
        width: 9.375rem;
        transform: rotateY(0deg);
        transition: .5s all;
    }
}

/***************
* REALISATIONS *
***************/

.realisations{
    padding: 2rem 10%;
}
.realisations .galerie{
    margin: 2rem 0;
}
.realisations .galerie img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 15rem;
}
.realisations .btn{
    margin: 0 auto;
}
/* Responsive tablette */
@media screen and (min-width: 768px) {
    .realisations .galerie{
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 
        "realisation-1 realisation-1 realisation-2"
        "realisation-3 realisation-4 realisation-4";
    }
    .realisations .galerie img:first-of-type{
        grid-area: realisation-1;
    }
    .realisations .galerie img:nth-of-type(2){
        grid-area: realisation-2;
    }
    .realisations .galerie img:nth-of-type(3){
        grid-area: realisation-3;
    }
    .realisations .galerie img:nth-of-type(4){
        grid-area: realisation-4;
    }
    .realisations .galerie img{
        transition: .3s all;
    }
    .realisations .galerie img:hover{
        filter: contrast(130%);
    }
}
/* Responsive desktop */
@media screen and (min-width: 1200px) {
    .realisations .galerie{
        padding: 2rem 10%;
    }
}