@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------- MERCI DE NE RIEN TOUCHER ICI SVP !!-----------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*---------------------------------------------------------------NICOLAS------------*/
/*----------------------------------------------------------------------------------*/


/*------BANDEAU PROMO-------*/


.main.landing .offer{
	display: flex;
	min-height:22vh;
	text-align: center;
	background-color:#0096CA;
	padding:1rem;
}

.main.landing .offer h1{
	font-size:2.5vh;
	line-height:4vh;
	color:#fff;
	margin:auto;
	font-weight: 500;
	text-transform: none;
}

.main.landing .offer h1 em{
	font-size:5vh;
	line-height:5vh;
	font-weight: 600;
}

.main.landing .offer h1 em sup{
	font-size:2vh;
	vertical-align: super;
}

.main.landing .offer h1 span{
	display: block;
	font-size:2vh;
	line-height:3vh;
	font-weight: 400;
}

.main.landing .offer h1 span strong{
	color:yellow;
	font-weight: 600;
	text-transform: uppercase;
}


/*Style des blocs mode d'emploi*/

.main .howtouse{
    max-width: 1210px;
    margin:30px auto;  
    text-align: center;
}

.main .howtouse p.titlehow{
    margin:40px auto;
    font-size:20px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:#505050;
}

.main .howtouse ul{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-gap: 2rem;
}

.main .howtouse ul li{
    position: relative;
    background-color: #fff;
    border-radius:6px;
	box-shadow: 0 3px 4px rgba(0,0,0,0.05);
    text-align: center;
    padding:30px 40px;
	transition: all ease 0.3s;
}

.main .howtouse ul li:hover {
	box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

.main .howtouse ul li span{
    display: block;
    font-size:42px;
    color:#0A3782;
    font-weight: 600;
    margin-top:25px;
}

.main .howtouse ul li span:before{
    content:"";
    display: inline-block;
    width: 160px;
    height: 160px;
    border-radius:50%;
    position: absolute;
    background-color: rgba(0,0,0,0.05);
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.main .howtouse ul li p{
    margin-top:120px;
}

.main .howtouse ul li img{
    position: absolute;
    top: 100px;
    left: 50%;
    transform-origin: top left;
    transform: scale(0.5) translateX(-50%);
}

@media screen and (max-width: 1270px) {
    main.howtouse{
        padding-left: 20px!important;
        padding-right: 20px!important;
    }
}



/*Style des promos globales % et €*/


main.pourcent{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap:1rem;
    max-width:1210px;
	margin:2rem auto 0;
}

main.pourcent article{
	display: flex;
	flex-flow:column;
	text-align: center;
	background-color: #fff;
	padding: 0.5rem;
}

main.pourcent article strong{
	font-size:6rem;
	line-height:6rem;
	font-weight: 700;
}

main.pourcent article:nth-of-type(1) strong{
	color:#ffb61a;
}

main.pourcent article:nth-of-type(2) strong{
	color:#f1830b;
}

main.pourcent article:nth-of-type(3) strong{
	color:#F15F36;
}

main.pourcent article:nth-of-type(4) strong{
	color:#e93c3c;
}

main.pourcent article strong sup{
	font-size:2rem;
}

main.pourcent article span{
	font-size:1.5rem;
	line-height:1.5rem;
	font-weight: 500;
	color:#505050;
}

main.pourcent article em{
	font-size:1rem;
	line-height:1rem;
	font-weight: 400;
	margin-top:1rem;
	color:#969696;
}

main.pourcent article input{
	font-size:1rem;
	line-height:1rem;
	font-weight: 600;
	margin: 0.5rem 0 0 0;
	text-transform: uppercase;
	text-align: center;
	background-color: #e1e1e1!important;
	color:#505050;
}


/*bas de page*/

.landing a.button { 
    margin: 50px auto 0 auto;
    color: #ffffff;
	width: 200px;
	display: block;
}

.landing p.mentions {
	max-width:1210px;
    text-align: center;
	font-size:0.7rem;
	color: #999;
	line-height: 16px;
	margin:1rem auto;
	padding:1rem;
}

.landing p.mentions a {
	color: #999;
}