/**********
* DEFAULT * 
**********/

/* Hero */
.main{
    background-color: var(--bleu);
    padding: 5rem 12%;
    position: relative;
}
.main__titre{
    color: var(--bleu);
    font-weight: 400;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
}
.main__titre .surligner{
    background-color: var(--orange);
    padding: 0 .5rem;
    width: fit-content;
}
.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: 5rem;
    right: -8rem;
    transform: translateY(40%);
}


/* Responsive desktop */
@media screen and ( min-width:1170px ) {
    .main{
        padding: 0 20%;
        padding-top: 25vh;
        padding-bottom: 13vh;
        position: relative;
    }
    .main__logo{
        display: none;
    }
    .main__titre{
        font-size: 1.5rem;
    }
    .main::before{
        content: none;
    }
    .main::after {
        content: url(../img/design/trait-orange.svg);
        position: absolute;
        bottom: -70%;
        right: -5rem;
        animation: appearFromLeftBottom .8s ease-in-out forwards;
        animation-delay: .5s;
        z-index: 0;
        opacity: 0;
    }
}

.default{
	padding: 5rem 12%;
}
.default ul{
    margin-left: .5rem;
    margin-top: .5rem;
}
.default li{
    position: relative;
    margin-left: 1rem;
}
.default li::before{
    position: absolute;
    content: "\002022";
    color: var(--orange);
    margin-left: -1rem;
}
.default *{
	margin-top: .5rem
}
.default h2{
	margin-top: 2rem;
}



/* Responsive desktop */
@media screen and ( min-width:1170px ) {
	.default{
		padding: 5rem 25%;
	}
}