/*Définition du code CSS pour le site a2t-68, 
*Définition de la première page*/
/*date du 15/12, création des 4 pages avec le menu déroulant
reste le fond d'écran et pages mentions légales et contacts,
et trouver le format de base pour les pages réalisations*/
/*date du 13/02, mise en ligne prete, reste le détail intermédiaire a boucler et création pages réalisations dès que possible*/ 


@media only screen and (max-width : 900px) {/* petit écran validé, à voir si besoin en dessous de 300 px*/
	body{/*Fond de page*/		
		background-size: 100%;
		background-repeat: repeat;
	}
	
	main{/*fond du contenu*/
		width: 95%;
		margin-left:2.5%;
		background-color: white ;
		clear: right; 
	}
	
	h1{font-size:2vW;}

	h2{font-size:5vW;}

	h3 {font-size:4vW;}

	h4{font-size:1.5vW;}

	p, li {font-size:3vW;}	
	
	.deroulant li {font-size: 4vw;}
	
	.paragraphe {margin-left: 3%;
	margin-right: 3%; 
	margin-top:3%;
	}
/* toute les tailles de police*/ 

	header div{/*Fond d'entête*/
		width:100%;
		overflow: hidden;
		font-style:normal;
		text-decoration: none;
		text-align: center;
		color: Black ; 
		background-color: #ffc000;
		border-bottom-style:solid;
	}

	img.logo {/*Cadre avec le logo et le nom, attention position absolue*/
		float: left;
		width:27%;
		border-top-left-radius:2%
	}

	/*nav{Définition de la barre de navigation en absolu pour que le menu puisse déborder
		position:absolute;
		left:36%;
		width:60%;
	}*/

	nav ul{/*paramètrage liste horizontale dans l'entête*/
		padding:0;
		margin:auto;
		list-style-type:none;
		overflow:hidden;
	}

	nav ul li{/*paramètrage des blocks en liste horizontale dans l'entête*/
		margin-left: 4%;
		float: left;
		width:auto;
	}

	nav ul li a {/*mise en page et affichage en block des boutons de l'entête*/
		display:flex;
		flex-direction: column;
		font-weight : bold;
		margin-top: 1.5vW;
		margin-bottom: 1.5vW;
		padding: 0.25vw;
		color: black;
		text-decoration: none;
		border-style: solid; 
		border-color: black;
		border-radius:2%;
	}

	/*.deroulant li:hover ul li { /*affichage du menu déroulant au passage de la souris
		display:block;
		padding:0;
		margin-top: -1.5vW;
		margin-left:0;
		overflow:hidden;
		transition: 200ms;
		vertical-align: middle;	
	} */

	.sous{/*Largeur du menu pour affichage correct, a corriger si possible*/
		width:100%;
	}

	.sous li {/*définition du menu déroulant sous format caché*/
		width:100%;
		padding: 0;
		display:none ;
	}

	.sous li a {/*Définition des éléments du menu déroulant*/
		height:auto;
		padding: 0;
		font-weight : bold;
		text-decoration: none;
		border-style: solid; 
		border-color: black;
		background-color: #ffc000;
		height:100%;
																	
	}
	
	ol.titre { /* paramétrage liste numéroté réalisations*/
		margin:0; 
		padding:0;
	}
	
	ol.titre > li { margin-left: 3% ;font-weight:bold;font-size:4vW;}
	
	.left > ul { margin-left : 5%; margin-bottom:5%; padding: 0;font-weight:normal;}
	.right > ul { margin-left : 5%; margin-bottom:5%; padding: 0;font-weight:normal;}

	h1.header{/*Cadre avec le logo et le nom*/
		font-weight:bold;
		font-size:5vw;
		margin-left: 35%;
		margin-right:5%;
		line-height: 1.2;
		border: 1vW solid gray;
	}

	article{
		padding-left: 3%;
		padding-right: 3%;
		background-color:#E2E2E2;
		text-align: justify;
		clear:both;
		overflow:hidden;
	}
	
	img.img_left{/*Paramètrage image a droite pour texte gauche*/
		width:30%;
		margin:0.2%;
	}

	img.img_right{/*Paramètrage image a gauche pour texte droite*/
		float:left;
		width:30%;
		margin:0.2%;
		margin-bottom:3%;
	}

	div.right{/*paramètrage texte à droite*/
		float:none;
		margin-right:0%;
	}

	div.left{/*paramètrage texte à gauche*/
		float:none;
	}

	footer{/*Définition du pied de page*/
		clear: right;
		background-color : #ffc000; 
		text-align : center;
		padding-top:0.1%;
		padding-bottom:0.1%;
		width:95%;
		margin-left:2.5%;
		line-height:0.8;
	}
	
}


@media only screen and (min-width : 900px){/* grand écran*/
	body{/*Fond de page*/	
		background-size: 100%;
		background-repeat: repeat;
	}

	main{/*fond du contenu*/
		width: 80%;
		margin-left:10%;
		background-color: white ;
		clear: right; 
	}
	
	h1{font-size:3vW;}

	h2{font-size:2.5vW;}

	h3{font-size:2vW;}

	h4{font-size:1.5vW;}

	p, li{font-size:1.5vW;}
	
	.deroulant li {font-size: 4vw;}
		
	.paragraphe {margin-left: 5%;
	margin-right: 3%; 
	margin-top:3%;
	}
 	
	/*tailles de police */
	
		ol.titre { /* paramétrage liste numéroté réalisations*/
		margin:0; 
		padding:0;
	}
	
	ol.titre > li { margin-left: 3% ; clear:both; font-weight:bold; font-size:2vW; }
	
	.left > ul { margin : 4%; padding: 0; font-weight:normal;}
	.right > ul { margin : 4%; padding: 0; font-weight:normal;}


	header div{/*Fond d'entête*/
		width:100%;
		overflow: hidden;
		font-style:normal
		font-family: Arial, Helvetica, sans-serif;
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
		color: Black ; 
		background-color: #ffc000;
		border-bottom-style:solid;
		margin-bottom: none;
	}

	img.logo{/*Cadre avec le logo et le nom*/
		float : left;
		width:23%;
		border-top-left-radius:2%
	}

	nav{/*Définition de la barre de navigation en absolu pour que le menu puisse déborder*/
		position:absolute;
		left:29%;
		width:60%;
	}

	nav ul{/*paramètrage liste horizontale dans l'entête*/
		padding:0;
		margin:auto;
		list-style-type:none;
		overflow:hidden;
	}

	nav ul li{/*paramètrage des blocks en liste horizontale dans l'entête*/
		margin-left: 4%;
		float: left;
		width:auto;
	}

	nav ul li a {/*mise en page et affichage en block des boutons de l'entête*/
		display:block;
		font-size : 2vW;
		font-weight : bold;
		margin-top: 1.5vW;
		padding: 0.25vw;
		color: black;
		text-decoration: none;
		border-style: solid; 
		border-color: black;
		border-radius:2%;
	}

	/*.deroulant li:hover ul li { /*affichage du menu déroulant au passage de la souris
		display:block;
		padding:0;
		margin-top: -1.5vW;
		margin-left:0;
		overflow:hidden;
		transition: 200ms;
		vertical-align: middle;	
	} */

	.sous{/*Largeur du menu pour affichage correct, a corriger si possible*/
		width:15vW;
	}

	.sous li {/*définition du menu déroulant sous format caché*/
		width:100%;
		padding: 0;
		display:none ;
	}

	.sous li a {/*Définition des éléments du menu déroulant*/
		height:auto;
		padding: 0;
		font-size : 1.5vW;
		font-weight : bold;
		text-decoration: none;
		border-style: solid; 
		border-top-style:none;
		border-color: black;
		background-color: #ffc000;
		height:3.5vw;														
	}

	li.titre{
		font-size : 2vW;
		margin-left : 2%; 
	}

	li.right {
		float: right;
		margin-right: 5%
	}

	h1.header{/*Cadre avec le logo et le nom*/
		font-weight:bold;
		font-size:2.5vw;
		margin-left: 25%;
		margin-right:5%;
		line-height: 1.2;
		border: 0.5vW solid gray;
	}

	article{/*paramètrage du fil*/
		padding-left: 2%;
		padding-right: 2%;
		background-color:#E2E2E2;
		text-align: justify;
		clear:both;
		overflow:hidden;
	}

	img.img_left{/*Paramètrage image a droite pour texte gauche*/
		float:right;
		width:20%;
		margin:0.2%;
		margin-bottom: 2%;
	}

	img.img_right{/*Paramètrage image a gauche pour texte droite*/
		float:left;
		width:20%;
		margin:0.2%;
		margin-bottom: 2%;
	}

	div.right{/*paramètrage texte à droite*/
		float:right;
		width:36%;
		margin-right:0%;
	}

	div.left{/*paramètrage texte à gauche*/
		left:-5%;
		float:left ;
		width : 36% ;
	}

	footer{/*Définition du pied de page*/
		clear: right;
		background-color : #ffc000; 
		text-align : center;
		padding-top:0.1%;
		padding-bottom:0.1%;
		width:80%;
		margin-left:10%;
		line-height:0.8%;
	}

}