@charset "UTF-8";

/******************************
LP - Devenez testeur
******************************/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/*==============================================================================
======>> GENERAL <<=============================================================
==============================================================================*/
*, *:before, *:after {box-sizing: border-box; outline:none; scrollbar-color: #70B810 #fff; scrollbar-width: thin;}
html {font-size: 62.5%;}
body {margin: 0; padding: 0; background: #fff; color:#000; font-family: 'Montserrat', Helvetica, Arial,  "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; font-size: 1.6rem; line-height: 1.4;}
#global {}
.wrap {width:1200px; margin: 0 auto 0 auto;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', Helvetica, Arial,  "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif";}
section {}
/* scrollbar */
::-webkit-scrollbar {background:#fff; width:7px;}
::-webkit-scrollbar-thumb {background:#70B810;}
.dualCol {display: flex;}
img {width: 100%; height: auto;}
/* CTA */
.cta {text-decoration:none; background:#70B810; display:inline-block; padding:5px 20px 5px 20px; color:#fff; border-radius:50px;}
.cta:hover {background: #9CDA48;}

/*==============================================================================
======>> ENTETE <<==============================================================
==============================================================================*/
header {position:fixed; z-index:10; top:0; background:#fff; box-shadow:0 2px 2px rgba(0,0,0,0.2); width:100%;}
.headerInner {display: flex; justify-content: space-between; align-items: center; padding:12px 0 12px 0;}
header .wrap {}
/*************** logo *********************/
#logo {width: 100px;}

/*************** CTA ***************/
#topCTA {}

/*==============================================================================
======>> CONTENU <<=============================================================
==============================================================================*/

/*========== HERO =====================*/
#topContent {padding:120px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
.intro {width:50%; display: flex; flex-direction: column; align-content: center; align-items: center; justify-content: center;}
.intro h1 {color:#609912; font-size:2.6em; line-height: 1.2em; text-align: center; padding: 0; margin: 0 0 20px;}
.intro p {text-align: center; margin: 0;}
.intro ul {}
.intro ul li {}
.intro .cta {margin:10px 0 0 0; text-align: center; min-width:300px; padding: 10px;  text-transform: uppercase; font-weight: 500;}

.introPic {width:40%;}
.introPic img {border-radius:10px;}

/*========== COMMENT ==================*/
#comment {margin-top:80px;}
#comment h2 {color:#609912; text-transform: uppercase;}
#comment .steps {display: flex; justify-content: space-between; align-items: top; margin:75px 0 0 0;}
.step {background:#357d88; border-radius:10px; width: calc(100%/3); padding: 15px;}
.stePic {background: #fff; width: 110px; border:5px solid #357d88; border-radius: 200px; margin: -60px auto 0 auto;}
.stePic img {}
.step h3 {color:#fff; text-align:center; text-transform: uppercase; font-weight:500; font-size:1.1em;}
.step p {color:#fff; text-align: justify;}
/* var */
.step02 {margin: 0 30px 0 30px;}

/*========== AVANTAGE =================*/
#avantage {margin-top:80px;}
#avantage .dualCol {justify-content: space-between; align-items: center; flex-direction:row-reverse;}
#avantage h2 {color:#609912; text-transform: uppercase;}
#avantageContent {width:47%;}
#avantageContent ul {font-size:1.1em; margin: 0; padding: 0}
#avantageContent li {padding: 10px 0 10px 0;}
.avantagePic {width:47%;}
.avantagePic img {border-radius:10px;}

/*========== LIEU =====================*/
#lieu {margin-top:80px;}
#lieu .dualCol {justify-content: space-between; align-items: center; flex-direction:row;}
#lieu h2 {color:#609912; text-transform: uppercase;}
#lieuContent {width:47%;}
#lieuContent p {text-align:justify;}
#lieuContent p span {font-weight:500;}
.lieuPic {width:47%;}
.lieuPic img {border-radius:10px;}


/*==============================================================================
======>> FOOTER <<==============================================================
==============================================================================*/
footer {background: #f2f2f2; margin-top:60px;}
.footerInner {text-align: center; padding: 30px 0 50px 0;}
footer h2 {color:#609912; font-size:2.2em; line-height: 1.2em; text-align: center; padding: 0; margin: 0 0 20px; text-transform:uppercase;}
footer .cta {margin-top:20px; min-width:300px; padding: 10px;  text-transform: uppercase; font-weight: 500;}


/*==============================================================================
======>> RESPONSIVE <<==========================================================
==============================================================================*/

/********* 980 > 1200 *******************************************************************/
@media(min-width:980px) and (max-width:1199px)
{
		.wrap {width:950px;}
		.intro {width:57%;}
		.intro h1 {font-size:2em; margin: 0 0 15px;}
		.intro .cta {margin:0;}
		#comment, #avantage, #lieu {margin-top:60px;}
		#comment .steps {margin:50px 0 0 0;}
		.stePic {width: 80px; border:3px solid #357d88;  margin: -45px auto 0 auto;}
		.step h3 {font-size:0.9em;}
		.step p {font-size:0.95em;}
		.step02 {margin: 0 25px 0 25px;}
}

/********* 768 > 980 ********************************************************************/
@media(min-width:768px) and (max-width:979px)
{
	.wrap {width:750px;}
	intro {width:57%;}
	.intro h1 {font-size:1.6em; margin: 0 0 15px;}
	.intro .cta {margin:0; min-width:250px;}
	#comment, #avantage, #lieu {margin-top:50px;}
	#comment h2, #avantage h2, #lieu h2 {font-size: 1.2em;}
	#comment .steps {flex-direction:column; margin:25px 0 0 0;}
	.step {width: 100%; padding:10px 15px 10px 150px; position:relative;}
	.stePic {position:absolute; top:calc(100% - 110px)/2; left: 10px; margin: 0;}
	.stePic img {}
	.step h3 {text-align:left; font-size:1em;}
	.step01 {margin:0 0 20px 0;}
	.step02 {margin:0 0 20px 0;}
	.step03 {margin:0;}
}


/********* 768 < ************************************************************************/
@media(max-width:767px)
{
	.wrap {width:calc(98% - 20px);}
	#topContent {padding:100px 0 0 0; flex-direction:column;}
	.intro {width:100%;}
	.intro h1 {font-size:2.2em; margin: 0 0 15px;}
	.intro .cta {margin:15px0 0 0; min-width:250px;}
	.introPic {width:100%; margin:40px 0 0 0;}
	#comment, #avantage, #lieu {margin-top:40px;}
	#comment h2, #avantage h2, #lieu h2 {font-size: 1.2em;}
	#comment .steps {flex-direction:column; margin:25px 0 0 0;}
	.step {width: 100%; padding:10px 15px 10px 120px; position:relative;}
	.stePic {position:absolute; width: 80px; border:none; top:calc(50% - 40px); left: 10px; margin: 0;}
	.step h3 {text-align:left; font-size:1em;}
	.step01 {margin:0 0 20px 0;}
	.step02 {margin:0 0 20px 0;}
	.step03 {margin:0;}
	#avantage .dualCol, #lieu .dualCol {flex-direction:column;}
	#avantageContent, #lieuContent {width:100%;}
	#avantageContent li {padding: 2px 0 2px 0; margin: 0 0 0 20px}
	.avantagePic, .lieuPic {width: 100%; margin:20px 0 0 0;}
	#lieuContent p {margin: 0 0 10px 0; padding: 0;}
	footer h2 {font-size:1.4em; }
}



/********* 500 < ************************************************************************/
@media(max-width:500px)
{
	.wrap {width:calc(96% - 20px);}
	#logo {width: 70px;}
	#topContent {padding:80px 0 0 0;}
	.intro h1 {font-size:1.8em;}
	#comment h2, #avantage h2, #lieu h2 {font-size: 1.1em;}
	#comment .steps {flex-direction:column; margin:25px 0 0 0;}
	.step {width: 100%; padding:10px 15px 10px 15px; position:relative;}
	.stePic {position:absolute; width: 50px; height:50px; border:none; top:20px; left: 10px; margin: 0;}
	.step h3 {text-align:left; font-size:0.9em; padding:0 0 0 60px; min-height: 50px; display:flex; align-items:center;}
	.step01 {margin:0 0 20px 0;}
	.step02 {margin:0 0 20px 0;}
	.step03 {margin:0;}
	footer {margin-top:30px;}
	footer h2 {font-size:1.3em;}
}