/* Importation de mes familles de police d'écriture*/

@import url('https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap');
@media only screen and (min-width: 1024px) {


	body{
		margin:0;
		padding:0;
		
	}

/* --- HEADER / LOGO / NAVIGATION --- */

header{
	position:relative;
	z-index: 2;
	position:fixed;
	top:0;
	left:0;
    font-family: 'Source Serif Pro', serif;
		width:100%;
		/*border:3px solid orange;*/
		background-color:#026838;
		height:125px;
	
		display:flex;
		justify-content: space-evenly;
		border:#e5ee3c 3px solid;
		
		
		
}


/* LOGO*/


header .logo img{
		
    
    
    height:120px;
    width:100%;
    background-color:#026838;
    /*border:2px solid rgb(225, 153, 38);*/
    
    grid-area:logo;
    
}

	

/* NAVIGATION */	

header nav ul{
		
		display:inline-flex;
		
		gap: 1em;
		
		
}

header nav ul li{
	background-color: #7AD299;
		margin-top:30px;
		
		list-style:none;
		
		font-weight:300;
		font-size:1.8em;
			
}

header nav ul li a{
		padding:2em 1em 0em 1em;
		text-decoration:none;
		color:#796b5e;
		

}

header nav ul li a:visited{
		text-decoration:none;
		color:#ffffff;
} 

header nav ul li a:hover,
header nav ul li a:focus{
		background-color:  #e5ee3c;
		color: #41538e;

		border-bottom-color:#ffffff;
		
		
		
		
				
}
/* FIN HEADER / LOGO / NAVIGATION  */	




#container{
    font-family: 'colibri','Lora', serif;
  /*mon container prend ici "100vh" donc	100% de la largeur du viewport (la zone d'affichage).*/
  height:100vh; 

  /*je demandes a mon container d'avoir un comportement de grille*/
  display:grid;
  /*je demandes a ma grille de faire 8 colonnes de 1 fraction*/
  grid-template-columns: repeat(8,1fr);
  /*je demandes a ma grille de faire 3 rangées de fractions différentes */
  grid-template-rows:0.1fr auto 0.05fr;
  /*après avoir donné un nom a ma zone de grille je leur attribue un emplacement spécifique*/
  grid-template-areas: 
  "logo nav nav nav nav nav nav nav"
  "accroche accroche accroche accroche accroche accroche accroche accroche"
  "contenu contenu contenu contenu contenu contenu contenu contenu"
  "footer footer footer footer footer footer footer footer";
  color: white;
}

/* SECTION 1  */
section.contenu{

	grid-area: contenu;
	background-color: #7AD299;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: rgb(0, 0, 0);
	font-size:1.5em;
	margin-bottom: 25px;
	

}

section h2{
	margin-top: 100px;
	margin-bottom: 50px;
}

.calltoaction{
	font-size: 1.2em;
	padding-bottom: 15px;

}
.calltoaction form input{
	position:relative;
	z-index: 1;
	background-color: #e5ee3c;
	margin-top: -50px;
	margin-bottom: 25px;;
	padding:15px;
	border-radius: 40%;
	font-size: 2em;
		-webkit-animation-name: bounceInDown;
		animation-name: bounceInDown;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		}
		@-webkit-keyframes bounceInDown {
		0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		
		0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
		}
		
		60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
		}
		
		75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
		}
		
		90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
		}
		
		100% {
		-webkit-transform: none;
		transform: none;
		}
		}
		
		@keyframes bounceInDown {
		0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		
		0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
		}
		
		60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
		}
		
		75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
		}
		
		90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
		}
		
		100% {
		-webkit-transform: none;
		transform: none;
		}
		} 
	
}
/* FIN DE SECTION 1  */

/* MAIN */ 
main{
	
	font-family: 'colibri','Lora', serif;
	grid-area: main;  
	height: 100%;
	display:flex;
	flex-direction:row;
	flex-flow: row wrap;
	justify-content:space-around;
	align-content:center;
	align-items: center;
	justify-content: center;
	font-size:2em;
	/* border: 2px solid black;*/
	text-align: center;
	color:#026838;

}

main figure{
	  padding:30px;
	  width:300px;
}
main figure p{
	color:dimgrey;
	font-size: 1em;

}
main figure img{ 

	width:auto;
	height:200px;
	box-shadow: 1px 1px 1px 1px rgb(47, 47, 47);
	margin-bottom: 30px;
	border-radius: 20%;
	
}
main figure h2{
	font-weight: bold;
	color: rgb(0, 0, 0);
}

/* MAIN */ 

/* SECTION 2 */ 
section.contenu2{
	grid-area:contenu2;
	background-color: #00b551;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.4em;
	color: rgb(0, 0, 0);
	font-family: 'Source Serif Pro', serif;
}
.contenu2 .calltoaction2{
	
	
	margin-top: 35px;
	font-size: 1.6em;
	
}
.contenu2 .calltoaction2 h2 {

	font-weight: bold;
	padding-top: 35px;
	
	
	
}
.contenu2 .calltoaction2 p{
	font-size: 1em;
	
	
	
	
}
/* FIN DE SECTION 2 */ 
footer{
    grid-area: footer;
    background-color: rgb(6, 37, 35);

    font-size: 1.4em;
    /*border: 2px solid black;*/

}
/* FOOTER */
footer{		
	grid-area: footer;
	background-color: rgb(17, 16, 16);

	font-size: 1.1em;
	/*border: 2px solid black;*/

}

footer cite{
	margin:15px;
	font-family: 'colibri','Lora', serif;
	color: white;
	text-align: center;
}
p.copyright{
	color: #ffffff;
}
/* FIN DE FOOTER */