:root {
	--vert: #E4F7E3;
	--vert2: #336C32;
	--rouge: #E9D4D1;
	--rouge2: #A31B0E;
	--bleu: #0404B4;
	--noir: #58585B;
	--couleur_entete: #336C32;
	--couleur_menu: #336C32;
	--couleur_fb: #202B76;
	--couleur_piaille: #5166FA;
	--rayon_coin: 15px;
}


@media all and (min-width: 800px)
{
	body
	{
		width: 100%;
		height: 100vh;
		display: grid;
		/* Ajustement des blocs:
		------------------------------------
		|	header                           |
		------------------------------------
		| nav   | main                     |
		|       |                          |
		|       |                          |
		|       |                          |
		------------------------------------
		| footer                           |
		------------------------------------
		*/
		grid-template-row: 200px 1fr 6ex;
		grid-template-columns: 120px 1fr;
		grid-template-areas:
			"header header"
			"nav main"
			"footer footer";
		background-color: var(--vert); 
		color: var(--noir);		
		font-size: 1em;
		font-style: normal;
		font-weight: normal;
		font-family: "Libertinus Serif", "Times New Roman", sans-serif;
	}

	/* ------------   entête  ---------- */
	header
	{
		grid-area: header;
		width: 100%;
		height: 100px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: var(--couleur_entete);
		/*
		border-bottom-style: solid;
		border-bottom-color: black;
		border-bottom-width: 2px;
		*/
	}

	#PhotoIdentité
	{
		height: 95px;
		margin-left: 30px;
		border-radius: 10px;
	}

	.fond_sonor
	{
		margin-right: 30px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: white; 
		border-radius: 15px;
	}
	 
	.fond_sonor > p
	{
		margin: 5px;
		padding: 0px;
		text-align: center;
	}

	.fond_sonor > audio
	{
		max-height: 20px;
	}

	/* ------------   barre latérale  ---------- */
	nav
	{
		grid-area: nav; 
		width: 120px;
		height: 100%;
		/*flex-direction: column;
		justify-content: space-evenly;*/
		padding-left: 10px;
		background-color: var(--couleur_menu);
		border-right-style: solid;
		border-right-color: black;
		border-right-width: 2px;
	}

	nav .nav-item
	{
		position: relative;
		width: 95%;
		border-top: 5px;
	}

	#nav-item1
	{
		height: 65px;
	}

	#nav-item2, #nav-item4
	{
		height: 100px;
	}

	#nav-item3
	{
		height: 46px;
	}

	#nav-item5
	{
		height: 77px;
	}

	nav .nav-item > a > img
	{
		position: absolute;
		z-index: 1;
		width: 95%;
		border-radius: var(--rayon_coin);
		border-right: 3px black solid;
	}

	nav .nav-item p
	{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		color: rgb(0,0,0);
		font-size: 1em;
		font-style: normal;
		font-weight: normal;
		font-family: "Libertinus Serif", "Times New Roman", sans-serif;

	}

	nav .nav-item a img:hover
	{
		opacity: 0.6;
	}

	nav .nav-item:hover p
	{
		transform: translateX(110px);
		z-index: 1;
		background-color: var(--couleur_menu);
		border-radius: 0px var(--rayon_coin) var(--rayon_coin) 0px;
	}

	/* ------------   Page principale  ---------- */
	main
	{
		grid-area: main;
		width: 100%;
		height: 100%;
		overflow: scroll;
	}

	article
	{
		width: 96%;
		margin-right: 2%;
		margin-left: 2%;
	}

	.Image_Intro, #Affiche_trans_eco
	{
		width: 100%;
		height: 460px;
		padding: 2%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Image_Intro > img, #Affiche_trans_eco > img
	{
		max-width: 90%;
		max-height: 90%;
		box-shadow: 16px 16px 8px var(--noir);
		margin: 10px;
	}
	
	#Affiche_trans_eco:hover {
		opacity: 0.5;
	}

	hr
	{
	  border: 4px solid var(--vert2);
	  border-radius: 4px;
	  overflow: visible;
	  text-align: center;
	  height: 0px;
	  width: 80%;
	}

	h1, h2, h3
	{
		color: var(--bleu);
		font-family: "Creamy Chalk", cursive, arial;
		border-top: 1em;
		border-bottom: 1em;
	}
	h1 { font-size: 1.5em; }
	h2 { font-size: 1.1em; }
	h3 { font-size: 1em; }

	.tuile > h2
	{
		text-align: center;
	}

	.citation, li
	{
		line-height: 1.5em;
	}

	p.partage
	{
		white-space: pre-line;
		color: var(--couleur_fb);
		background-color: white;
		padding: 10pt;
		width: 80%;
	}

	p.piaille
	{
		white-space: pre-line;
		color: var(--couleur_piaille);
		background-color: white;
		padding: 10pt;
		width: 80%;
	}

	a[class="encadre_lien"]
	{
		background: white;
		padding: 1em;
		border-radius: 1em;
		box-shadow: 2px 2px 5px var(--noir);
		margin: 10px;	
	}

	a[class="encadre_lien"]:hover
	{
		background: var(--vert2);
	}

	ul[class="menu_trans_ecologique"] li
	{
		padding: 1.5em;
	}

	mark
	{
		background-color: white;
		color: var(--rouge2);
	}
		
	.photo
	{
		margin: 5px;
		box-shadow: 4px 8px 4px var(--noir);
		border-radius: var(--rayon_coin);
		gap: 20px;
	}

	.flex-pdf-diapo
	{
		width: 700px;
		height: 550px;
	}

	.flex-pdf
	{
		width: 90%;
	}


	.flex-illustration
	{
		margin: 30px;
	}

	iframe, video
	{
		border-radius: var(--rayon_coin);
		border: 1px solid black;
		background-color: var(--noir);
		display: block;
		justify-content: center;
	}

	iframe .video_youtube
	{
		width: 560px;
		height: 315px;
	}

	iframe .soundcloud
	{
		width: 400px; 
	}

	embed
	{
		display: block;
		justify-content: center;
	}

	.tuile
	{
		width: 90%;
		padding-left: 2em;
		padding-right: 2em;
		padding-top: 20px;
		padding-bottom: 20px;
		margin: 20px;	
		border-radius: var(--rayon_coin);
		box-shadow: 0px 8px 4px var(--noir);
		background-color: white;
	}

	.bloc_photos, .LangagesInformatique, .MesLoisirs, #images_agriculture, #images_velo
	{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}


	#photos_impression_3D, #images_agriculture, #images_velo
	{
		gap: 20px;
		/* max-width: 380px; */
	}

	#banniere
	{
		margin-top: 2ex;
		margin-bottom: 2ex;
		width: 95%;
		margin-left: 2.5%;
		margin-right: 2.5%;
		box-shadow: 0px 8px 4px var(--noir);
		border-radius: var(--rayon_coin);
	}

	.références
	{
		color: var(--noir);
		font-family: tt;
	}



	/* ------------  Pied de page  ---------- */
	footer
	{
		grid-area: footer;
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		text-align: center;
		background-color: var(--vert2);
		color: white;
	}

	#licence
	{
		padding-bottom: 1ex;
	}

	#adresse
	{
		padding: 5px;
		background-color: var(--vert2);
		border-radius: 5px;
		margin-left: 20px;
	}

	#adresse:hover
	{
		background-color: var(--rouge2);
	}

}

@media all and (max-width: 800px)
{

	body
	{
		display: flex;
		flex-direction: column;
		/* Ajustement des blocs:
		------------------------------------
		|	header                         |
		------------------------------------
		|  nav                             |
		------------------------------------
		|  main                            |
		|                                  |
		|                                  |
		|                                  |
		------------------------------------
		| footer                           |
		------------------------------------
		*/
		background-color: var(--vert); 
		color: var(--noir);		
		font-size: 1em;
		font-style: normal;
		font-weight: normal;
		font-family: "Libertinus Serif", "Times New Roman", sans-serif;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	/* ------------   entête  ---------- */
	header
	{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		background-color: var(--couleur_entete);
		/*
		border-bottom-style: solid;
		border-bottom-color: black;
		border-bottom-width: 2px;
		*/
	}

	/* ------------   barre horizontale  ---------- */
	nav
	{
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		padding-left: 10px;
		background-color: var(--couleur_menu);
		border-right-style: solid;
		border-right-color: black;
		border-right-width: 2px;
	}

	nav .nav-item
	{
		position: relative;
		width: 100px;
	}

	#nav-item1
	{
		height: 65px;
		margin-top: 20px;
	}

	#nav-item2, #nav-item4
	{
		height: 100px;
		margin-top: 20px;
	}

	#nav-item3
	{
		height: 46px;
		margin-top: 20px;
	}

	#nav-item5
	{
		height: 77px;
		margin-top: 20px;
	}

	nav .nav-item a img
	{
		position: absolute;
		z-index: 1;
		width: 100px;
		border-radius: var(--rayon_coin);
		border-right: 3px black solid;
	}

	nav .nav-item p
	{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		color: rgb(0,0,0);
		font-size: 1em;
		font-style: normal;
		font-weight: normal;
		font-family: "Libertinus Serif", "Times New Roman", sans-serif;

	}

	nav .nav-item a img:hover
	{
		opacity: 0.6;
	}

	nav .nav-item:hover p
	{
		transform: translateX(100px) translateY(-18px);
		z-index: 1;
		background-color: var(--couleur_menu);
		border-radius: 0px var(--rayon_coin) var(--rayon_coin) 0px;
	}

	/* ------------   Page principale  ---------- */
	main
	{
		grid-area: main;
		width: 100%;
		height: 100%;
		overflow: scroll;
	}

	article
	{
		width: 96%;
		margin-right: 2%;
		margin-left: 2%;
	}


	article #Image_Intro
	{
		width: 100%;
		height: 460px;
		padding: 2%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	article #Image_Intro > img
	{
		max-width: 90%;
		max-height: 90%;
		box-shadow: 16px 16px 8px var(--noir);
		margin: 10px;
	}

	/*
	.espace{

	}
	*/

	hr
	{
	  border: 4px solid var(--vert2);
	  border-radius: 4px;
	  overflow: visible;
	  text-align: center;
	  height: 0px;
	  width: 80%;
	}

	h1, h2, h3
	{
		color: var(--bleu);
		font-family: "Creamy Chalk", cursive, arial;
		border-top: 1em;
		border-bottom: 1em;
	}
	h1 { font-size: 1.5em; }
	h2 { font-size: 1.1em; }
	h3 { font-size: 1em; }

	.tuile > h2
	{
		text-align: center;
	}

	.citation, li
	{
		line-height: 1.5em;
	}

	p.partage
	{
		white-space: pre-line;
		color: var(--couleur_fb);
		background-color: white;
		padding: 10pt;
		width: 80%;
	}

	p.piaille
	{
		white-space: pre-line;
		color: var(--couleur_piaille);
		background-color: white;
		padding: 10pt;
		width: 80%;
	}

	a[class="encadre_lien"]
	{
		background: white;
		padding: 1em;
		border-radius: 1em;
		box-shadow: 2px 2px 5px var(--noir);
		margin: 10px;	
	}

	a[class="encadre_lien"]:hover
	{
		background: var(--vert2);
	}

	ul[class="menu_trans_ecologique"] li
	{
		padding: 1.5em;
	}

	mark
	{
		background-color: white;
		color: var(--rouge2);
	}
		
	.photo
	{
		box-shadow: 4px 8px 4px var(--noir);
		margin: 5px;
		border-radius: var(--rayon_coin);
		gap: 20px;
	}

	.flex-pdf-diapo
	{
		width: 700px;
		height: 550px;
	}

	.flex-pdf
	{
		width: 90%;
	}


	.flex-illustration
	{
		margin: 30px;
	}

	iframe, video
	{
		border-radius: var(--rayon_coin);
		border: 1px solid black;
		background-color: var(--noir);
		display: block;
		justify-content: center;
	}

	iframe .video_youtube
	{
		width: 560px;
		height: 315px;
	}

	iframe .soundcloud
	{
		width: 400px; 
	}

	embed
	{
		display: block;
		justify-content: center;
	}

	.tuile
	{
		width: 90%;
		padding-left: 2em;
		padding-right: 2em;
		padding-top: 20px;
		padding-bottom: 20px;
		margin: 20px;	
		border-radius: var(--rayon_coin);
		box-shadow: 0px 8px 4px var(--noir);
		background-color: white;
	}

	.bloc_photos, .LangagesInformatique, .MesLoisirs, #images_agriculture, #images_velo
	{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}


	#photos_impression_3D, #images_agriculture, #images_velo
	{
		gap: 20px;
		/* max-width: 380px; */
	}

	#banniere
	{
		margin-top: 2ex;
		margin-bottom: 2ex;
		width: 95%;
		margin-left: 2.5%;
		margin-right: 2.5%;
		box-shadow: 0px 8px 4px var(--noir);
		border-radius: var(--rayon_coin);
	}

	.références
	{
		color: var(--noir);
		font-family: tt;
	}



	/* ------------  Pied de page  ---------- */
	footer
	{
		grid-area: footer;
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		text-align: center;
		background-color: var(--vert2);
		color: white;
	}

	#licence
	{
		padding-bottom: 1ex;
	}

	#adresse
	{
		padding: 5px;
		background-color: var(--vert2);
		border-radius: 5px;
		margin-left: 20px;
	}

	#adresse:hover
	{
		background-color: var(--rouge2);
	}

}