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

/* Hero */
.main{
    background-color: var(--bleu);
    padding: 5rem 12%;
    position: relative;
    padding-bottom: 8rem;
}
.main__titre{
    color: var(--bleu);
    font-weight: 400;
    font-size: 1.25rem;
    margin-bottom: 1rem;
	text-align: left;
}
.main__titre .surligner{
    background-color: var(--orange);
    padding: 0 .5rem;
    width: fit-content;
}
.main__titre .surligner:last-child{
    display: block;
    margin-top: 4px;
}
.main__sous-titre{
    font-family: 'DMSerifDisplay';
    font-weight: 400;
    color: var(--blanc);
    font-size: 1.875rem;
}
.main__logo{
    width: 8rem;
    margin-bottom: 1rem;
}
.main::before{
    content: url(../img/design/groupe-plus.svg);
    position: absolute;
    top: 3rem;
    right: 2rem;
}
.main::after{
    content: url('../img/design/trait-orange.svg');
    position: absolute;
    bottom: 2rem;
    left: -3rem;
    transform: translateY(70%);
}


/* Responsive desktop */
@media screen and ( min-width:1170px ) {
    .main{
        padding: 0 20%;
        padding-top: 30vh;
        padding-bottom: 18rem;
        position: relative;
        min-height: 100vh;
    }
    .main__logo{
        display: none;
    }
    .main__titre{
        font-size: 1.5rem;
    }
    .main__sous-titre{
        font-size: 3rem;
        line-height: 1.1;
    }
    .main::before{
        content: 'none';
    }
    .main::after {
        content: url(../img/design/trait-orange.svg);
        position: absolute;
        bottom: -30%;
        transform: translateY(-40%);
        left: 20%; 
        animation: appearFromLeftBottom .8s ease-in-out forwards;
        animation-delay: .5s;
        z-index: 0;
        opacity: 0;
    }
}



/* Intro */

.intro{
    padding: 0 12%;
    position: relative;
}
.intro__image{
    margin-top: -4rem;
    z-index: 2;
    position: relative;
}
.image-marrante {
    display: none;
}
.intro__titre{
    font-family: 'DMSerifDisplay';
    font-weight: 400;
    color: var(--bleu);
    margin-top: 2rem;
    font-size: 1.25rem;
    margin-bottom: 1rem;
	text-align: center;
}

/* Responsive desktop */
@media screen and ( min-width:1170px ) {
    .intro{
        padding: 0 20%;
    }
    .intro__images-conteneur{
        z-index: 2;
        position: absolute;
        width: 40%;
        right: 12%;
        top: -5rem;
    }
	.intro__images-conteneur:hover .image-marrante {
    	display: block; /* Affichez l'image marrante lorsque vous survolez l'image sérieuse */
	}
	.intro__image{
		position: absolute;
	}
    .intro__contenu{
        width: 40%;
        position: relative;
        bottom: -10rem;
        max-width: 320px;
    }
    .intro__titre{
        font-size: 2.25rem;
		text-align: left;
    }
}



/* Chiffres clés */

.chiffres-cles{
    padding: 4rem 12%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.chiffre-cle{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -1rem 1rem;
}
.chiffre-cle__chiffre{
    color: var(--orange);
    opacity: 24%;
    font-weight: bold;
    font-size: 5rem !important;
}
.chiffres-cles :nth-child(2) .chiffre-cle__chiffre{
	font-size: 4rem !important;
}
.chiffre-cle__texte{
    font-family: 'DMSerifDisplay';
    font-size: 1.25rem;
    color: var(--bleu);
    position: relative;
    bottom: 3.2rem;
    font-weight: bold;
    text-align: center;
}
/* Responsive desktop */
@media screen and ( min-width:1170px ) {
    .chiffres-cles{
        gap: 5%;
        margin-top: 15rem;
        margin-bottom: 7rem;
    }
    .chiffre-cle__texte{
        font-size: 1.75rem;
        bottom: 3.85rem;
    }
	.chiffres-cles :nth-child(2) .chiffre-cle__chiffre{
		font-size: 5rem !important;
	}
}



/* Choisir */
.choisir{
    background-color: var(--creme);
    padding: 4rem 12%;
    position: relative;
}
.choisir__titre{
    font-weight: 300;
    color: var(--bleu);
    font-size: 2rem;
    margin-bottom: 2rem;
}
.choisir__titre span{
    font-weight: 600;
    font-family: 'DMSerifDisplay';
    display: block;
}
.raisons{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.raisons img{
	width: 6rem;
}
.raisons .raison__titre{
    color: var(--orange);
    margin-bottom: .5rem;
    font-weight: 400;
    font-family: 'DMSerifDisplay';
    font-size: 1.25rem;
}
.raisons .raison__texte{
    color: var(--bleu);
}
.choisir::before{
    content: url(../img/design/lune-etoiles.svg);
    position: absolute;
    top: -4rem;
    right: -6rem;
}
/* Responsive desktop */
@media screen and ( min-width:1170px ) {
    .choisir{
        margin: 0 12%;
        z-index: 1;
        position: relative;
        padding: 6rem;
    }
    .choisir__titre{
        font-size: 4rem;
        line-height: 1.1;
        margin-bottom: 3rem;
    }
    .raisons{
        gap: 3rem
    }
    .raisons .raison{
        width: calc(33% - 3rem);
    }
    .raisons .raison__titre{
        font-size: 1.5rem;
    }
    .choisir::before{
        right: 16%;
    }
    .choisir::after{
        content: url(../img/design/trait-orange3.svg);
        position: absolute;
        bottom: -10%;
        right: -20%;
        opacity: 0;
    }
    .choisir::before{
        content: url(../img/design/cercle.svg);
    }
}



/* Expertises */

.expertises{
    padding: 7rem 12%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}
.expertises__titre{
    font-size: 2.25rem;
    color: #e6ebf0;
    position: relative;
    width: fit-content;
}
.expertises__titre span{
    position: absolute;
    font-family: 'DMSerifDisplay';
    color: var(--bleu);
    display: block;
    font-size: 1rem;
    position: absolute;
    top: 1.6rem;
    right: 2rem;
}
.expertises__conteneur{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
}
.expertise__img{
    width: 5rem;
    height: auto;
}
.expertise__titre{
    font-weight: 400;
    color: var(--orange);
    font-size: 1.25rem;
	margin: 0.5rem 0;
}
.expertise li{
    position: relative;
    margin-left: 1rem;
}
.expertise li::before{
    position: absolute;
    content: "\002022";
    color: var(--orange);
    margin-left: -1rem;
}
/* Responsive desktop */
@media screen and ( min-width:1170px ) {
    .expertises__conteneur{
        gap: 5rem;
        justify-content: center;
    }
    .expertises__titre{
        font-size: 4rem !important;
    }
    .expertises__titre span{
        position: absolute;
        font-family: 'DMSerifDisplay';
        color: var(--bleu);
        display: block;
        font-size: 1.5rem;
        position: absolute;
        top: 3rem;
        right: 4rem;
    }
    .expertise{
        max-width: calc(33% - 5rem);
    }
    .expertise__header{
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-bottom: 1rem;
    }
    .expertise__titre{
        font-size: 1.5rem;
    }
    .expertises{
        position: relative;
    }
    .expertises::before{
        content: url(../img/design/cercle.svg);
        position: absolute;
        top: 5rem;
        right: -.5rem;
        z-index: 3;
        transform: scale(1.8);
        opacity: 0;
    }
}



/* L'équipe */

.equipe{
    position: relative;
}
.equipe::before{
    content: url(../img/design/groupe-plus2.svg);
    position: absolute;
    bottom: 1rem;
    right: 2rem;
}
.equipe::after{
    content: url(../img/design/trait-bleu.svg);
    position: absolute;
    top: 30%;
    right: 2rem;
	pointer-events: none;
}
.equipe__titre{
    font-family: 'DMSerifDisplay';
    color: var(--bleu);
    text-align: center;
    font-size: 2.25rem;
    position: relative;
    z-index: 1;
}
.equipe__encart-orange{
    background-color: var(--orange);
    width: 100vw;
    padding: 3rem 12%;
    margin-top: -.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding-bottom: 6rem;
}
.equipe__encart-orange p{
    font-family: 'DMSerifDisplay';
    color: var(--blanc);
    font-size: 1.5rem;
    line-height: 1.2;
    max-width: 60%;
    text-align: center;
}
.equipe__encart-orange p > span{
    font-family: 'Poppins';
    font-size: 1rem;
    line-height: initial;
    display: block;
    font-weight: 300;
}
.equipe__photo{
    width: calc(100% - 24%);
    position: relative;
    left: 12%;
    top: -3rem;
    z-index: 2;
}
.equipe__texte{
    padding: 0 12%;
    color: var(--bleu);
    font-size: 1.125rem;
    max-width: 70%;
    font-size: 1.5rem;
    font-weight: 300;
    margin-top: -1rem;
}
.equipe__texte span{
    display: block;
    font-family: 'DMSerifDisplay';
    font-size: 1.75rem;
    line-height: 1.1;
    margin-top: .5rem;
}

/* Responsive tablette */
@media screen and ( min-width:750px ) {
    .equipe__encart-orange{
        align-items: flex-start;
        padding-bottom: 4rem;
    }
    .equipe__encart-orange p{
        text-align: left;
        max-width: 40%;
    }
    .equipe__photo{
        width: 40%;
        left: 50%;
        top: -10rem;
    }
    .equipe__texte{
        max-width: 50%;
        margin-top: -10rem;
    }
}

/* Responsive desktop */
@media screen and ( min-width:1170px ) {
    .equipe{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 5rem;
    }
    .equipe::before{
        content: none;
    }
    .equipe__titre{
        font-size: 4rem;
        padding-right: 30%;
    }
    .equipe__encart-orange{
        width: 48%;
        align-items:flex-start;
        padding: 4rem 10% 4rem 10rem;
        margin-top: -1rem;
    }
    .equipe__encart-orange p{
        font-size: 1.75rem;
        max-width: 60%;
    }
    .equipe__encart-orange p > span{
        font-size: 1.25rem;
    }
    .equipe__photo{
        width: 40%;
        position: absolute;
        top: 9rem;
        right: 43%;
        left: initial;
        max-height: 35rem;
        object-fit: cover;
    }
    .equipe__texte{
        margin-top: 6rem;
        max-width: 35%;
    }
    .equipe::after{
        content: url(../img/design/trait-bleu.svg);
        position: absolute;
        top: initial;
        left: initial;
        bottom: 0;
        right: 0;
        opacity: 0;
    }
}



/* Formations */

.formations{
    padding: 7rem 12%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.formations__contenu{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.formations__titre{
    font-family: 'DMSerifDisplay';
    color: var(--bleu);
    text-align: center;
    font-size: 2.25rem;
}
.formations__sous-titre{
    font-family: 'DMSerifDisplay';
    color: var(--bleu);
    font-size: 1.25rem;
}
.formations__texte{
    color: var(--bleu);
}
.formations-bouton__texte{
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 1rem;
}
.formations-bouton .btn{
    position: relative;
}
.formations-bouton .btn::after{
    content: url(../img/design/arrow2.svg);
    position: absolute;
    right: -1.5rem;
    bottom: 1.5rem;
    transform: rotate(60deg);
}
.formations-bouton{
    width: 60%;
}
/* Responsive desktop */
@media screen and ( min-width:1170px ) {
    .formations{
        width: 53%;
        padding-left: 20%;
        margin: 8rem 0;
        position: relative;
    }
    .formations__image{
        position: absolute;
        right: -28vw;
        top: 10%;
        z-index: -1;
        height: 30rem;
        width: 35vw;
        object-fit: cover;
    }
    .formations__titre{
        font-size: 4rem;
        width: max-content;
    }
    .formations-boutons > *{
        width: 45%;
    }
}