/*corps de la page en général*/
body{
	font-family:sans-serif;/*police d'écriture*/
	font-size:1.2em;/*taille de la police d'écriture*/
	color:#fff;
	background:#ddd;
	line-height:1.5;/*espace entre les lignes du paragraphe*/
	margin:0;/*définit la taille des marges sur les quatre côtés de l'élément*/
}
/*Ici sont mis en forme les titres en général, sauf mention dans la suite du CSS*/
h1{
	font-size:2em;
	font-family:sans-serif;
}
h2{
	font-size:1.6em;
	font-family:sans-serif;
}
h3{
	font-size:1.3em;
}
h4{
	font-size:1.1em;
	font-family:serif;
}
/* Marge réduite pour les titres */
h1, h2, h3, h4 {
  margin: 0.2em 0; /* Réduit la valeur de la marge */
}
/*tous liens hypertextes sont colorés, sauf mention dans la suite dans la suite du CSS*/
a{
	color:#f7ad39;/*couleur des liens hypertexte*/
	text-decoration:none;/*utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. Force l'absence de souligement aux liens*/
}
/*Selecteur d'enfant X > Y, la règle suivante applique un style à tous les enfants Y (ici a et .home) de l'élément X (ici .nav). Dans cette situation, une application de couleurs sur les liens hypertexte dans la balise nav*/
/*Mais franchement ça à pas l'air de marcher. Explication : affecte les éléments a qui sont descendants directs de l'élément .nav, ainsi que tous les éléments .home. La règle définit la couleur de texte de ces éléments en #b57209, enlève toutes les décorations de texte (comme les soulignements), et met en place l'affichage en utilisant la propriété flex. */
.nav>a, .home{
	color:#b57209;
	text-decoration:none;
	/* font-family:sans-serif; */
	display:flex;
}
/*Selecteur d'enfant X > Y, la règle suivante applique un style à tous les enfants Y (ici a) de l'élément X (ici p). Dans cette situation, une application de couleurs sur les liens hypertexte dans les paragraphes*/
p>a{
	color:#e7a5a5;/*couleur un poil plus clair que la couleur de fond*/
	text-decoration:none;/*utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. Force l'absence de souligement aux liens*/
}
/*Passage des liens hypertextes en vert lors du survol avec la souris*/
a:hover
{
	color:green;
}
/*tous les paragraphes sont mis en forme ici, sauf mention contraire dans la suite du CSS*/
p{
	max-width:80%;
	padding:0.5%;
}
/*listes à puces*/
ul{
	max-width:90%;
	line-height:1.3/*La propriété line-height définit la hauteur de la boîte d'une ligne.*/
	/*padding:2%;*/
	/*text-decoration:none;*/
}
/*lien hypertexte dans liste à puce*/
/*CA MARCHE PAS*/
/*ul>a{
	color:blue;
}*/
/*******************************************************************************************************************************************************************/
/*Image utilisés en figures dans l'article*/
.figure{
	width:100%;
	text-align:center;
}
.imagefigure{
	max-width:100%;	
}
/*******************************************************************************************************************************************************************/
/*Bannière de la page*/
#banniere{
	display:block;
	position:relative;
}
.ekasiliciumbanner{
	width:100%;
}
.imageban{
	width:100%;
}
/*******************************************************************************************************************************************************************/
/*Titre du site*/
#ekasiliciumtitle{
	position:absolute;
	font-size:5em;
	font-family:Impact, sans-serif;
	padding:2%;
	top:0;
}
#titrepage{
	font-size:3em;
	font-family:sans-serif;
	color:white;
	background:#b57209;
	padding:1%;
	display:block;
	text-align:center;
}

.wrapper{
	display:flex;
}
.nav{
	padding:3%;
	display:flex;
	flex-direction:column;
	font-size:1.4em;
	min-width:300px;/*largeur de la zone de text nav*/
}
.main{
	padding:3%;/*marge de l'article*/
	flex-grow:1;  
	background:#b57209;/*Couleur du fond de l'article*/
}
.footer{
	color:white;
	background:#a37834;
	display:flex;
	justify-content:center;
	align-items:flex-end;
}
/*******************************************************************************************************************************************************************/
/*Cette partie permet de mettres tout le monde en colonne pour les mobiles*/
@media all and (max-width: 1020px){
body{
	display:flex;
	flex-direction:column;
	font-size:1.5em;
	}
.wrapper{
	display:flex;
	flex-direction:column;
	font-size:1em;
	width:100%;
	}
.nav{
	font-size:2em;
	display:flex;
	align-items:center;
	justify-content:center;
}
#ekasiliciumtitle{
	position:absolute;
	font-size:3em;
	font-family:Impact, sans-serif;
	padding:2%;
}
#titrepage{
	font-size:2em;
}
p{
	font-size:1.3em;
	padding:3%;
	max-width:95%
	/*color:red;*/
}