/*tous les commentaire avec "npt" signifient qu'ils ne doivent pas être modifié
 afin de ne pas casser ou rendre le visuel moche*/

body
/*effets généraux appliqués à la page*/
{
	background-image: url("./site/01_FICHIERS/99_COMMUN/body_bg.png");
	/*image de fond*/
	background-repeat: no-repeat;
	/*ne répète pas l'image*/
	background-size: cover;
	/*modifie l'image pour tout couvrir*/
	background-attachment: fixed;
	/*empêche les trous*/
	background-color: #cccccc;
	/*couleur de fond au cas où l'image ne marche pas*/
	margin: 0px;
	/*pour que le body prenner toute la page*/
	font-family: arial;
	/*police de caractères appliqué de base*/
	color: white;
	/*couleur de police de base*/
	font-weight: bold
	/*si texte de base est gras*/
}

/*---------------------------------------------------------------------------*/
/*MAQUETE : partie servant de base pour toutes les pages*/

header.maquette marquee 
/*option de l'élément de déplacement de la boule*/
{
	height: 69px;/*npt*/
	/*hauteur ajustée*/
	overflow: hidden;/*npt*/
	/*pour que l'image ne déborde pas de son cadre*/
	position: relative;/*npt*/
	/*position de base*/
	background-color: white;
	/*couleur fond zone de trajet, comme couleur de fond de image si possible*/
	margin-top: 42px;/*npt*/
	/*margin adapté afin que cela ne passe pas derrière la barre de navigation*/
}

header.maquette, footer.maquette 
/*éléments se trouvant aux extrémités verticales de la page*/
{
	text-align: center;
	/*alignement du texte*/
	background-color: #333;
	/*couleur de fond*/
	border-style: solid;
	/*type de bordure*/
	border-color: #333;
	/*couleur bordure, comme couleur de fond si possible*/
	margin-bottom: 0px;
	/*distance avec élément après, pour maquette mieux vaut le moins possible*/
	margin-top: 0px;
	/*distance avec élément avant, pour maquette mieux vaut le moins possible*/
	padding-top: 0px;
	/*distance avec la bordure supérieure*/
}

header.maquette h1 
/*titre de la page flottant devant le marquee*/
{
	font-size: 50px;
	/*taille de la police*/
	letter-spacing: 20px;
	/*distance entre les caractères*/
	color: black;
	/*couleur texte*/
	position: absolute; /*npt*/
	/*fait que position du texte soit décidée selon les paramètres ci-dessous*/
	top: 18px;/*npt*/
	/*distance de l'élément selon le haut de la page*/
	margin-left: 3%;/*npt*/
	/*marge de gauche de l'élément*/
}

footer.maquette
/*élément en bas de la page servant à remonter en haut*/
{
	padding-bottom: 16px;
	/*distance avec la bordure basse de la page*/
	padding-top: 16px;
	/*distance avec la bordure haute de la page*/
}

.maquette img
/*image utilisée dans le marquee*/
{
	border-style: none;/*npt*/
	/*élimination du style de bordure*/
	border-radius: 0px;/*npt*/
	/*élimination courbe des coins des bordures afin de ne pas couper l'image*/
}

/*---------------------------------------------------------------------------*/
/*NAVIGATION : tout le code de la barre se trouvant en haut de chaques pages*/

nav ul 
/*liste contenant les liens*/
{
	list-style-type: none;/*npt*/
	/*élimination du point devant chaque éléments li*/
	margin: 0;/*npt*/
	/*éliminations des distances avec les autres éléments*/
	padding: 0;/*npt*/
	/*élimination de la distance avec les bordures*/
	overflow: hidden;/*npt*/
	/*pour que les liens ne sortent pas de la zone voulue*/
	background-color: #333;
	/*couleur de fond de la barre*/
	position: fixed;/*npt*/
	/*position colée en permanence au même point de la fenêtre*/
	top: 0; /*npt*/
	/*positionne l'élément tout en haut de la page*/
	width: 100%;/*npt*/
	/*couvre la largeur totale de la page*/
	z-index: 10;/*npt*/
	/*positionne tout devant l'élément afin que d'autres éléments le cache*/
}

nav li
/*éléments de la liste de navigation*/
 {
	float: left;/*npt*/
	/*fait que les éléments se suivre horizontalement*/
	display: block;/*npt*/
	/*permet aux éléments de se suivre tels des blocks et non du texte*/
    padding: 14px 0px/*npt*/
	/*modifie distance avec bordures, augmente distance avec les autres liens*/
}

nav li:last-child
/*dernier élément de la liste, sert à aller tout en bas de la page*/
{
	float: right;/*npt*/
	/*fait venir le block à droite*/
}

nav li a
/*lien des éléments de la liste*/
{
	padding: 14px 16px;
	/*distance avec les bordures*/
}

nav li a:hover:not(.active)
/*liens de navigations sauf la page actuelle quand la souris passe dessus*/
{
	background-color: #111;
	/*couleur de fond quand souris sur élément*/
}

nav a.active
/*l'élément de la liste de la page active*/
{
	background-color: #4CAF50;
	/*couleur page active*/
}

nav a, footer.maquette a
/*lien de navigation en bas de la page pour remonter tout en haut*/
{
	text-decoration: none;
	/*élimination du soulignement du lien*/
	color: white;
	/*couleur du lien*/
}

footer.maquette a:hover
/*couleur du bouton pour remonter en haut*/
{
	color: #4CAF50;
	/*couleur quand souris sur élément*/
}
/*---------------------------------------------------------------------------*/
/*PARTIE CONTENU*/

article, table, td, img, .alntxt
/*attributs de bordures et de fond commun aux éléments classiques*/
{
	border-left-style: solid;
	/*type bordure gauche*/
	border-right-style: solid;
	/*type bordure droite*/
	border-color: #333;
	/*couleur de la bordure*/
	border-width: 2px;
	/*épaisseur de la bordure*/
	background-color: #333;	
	/*fond des éléments*/
	border-radius: 12px;
	/*arrondissement des*/
}

article, .alntxt
/*effets communs de la section article*/
{
	padding: 10px 30px 10px 30px;
	/*distances avec les bordures*/
	border-color: #4CAF50;
	/*couleur des bordures*/
	font-size: 16px;
	/*taille de base du texte*/
	text-align: justify;
	/*alignement du texte, justifié de préférable*/
	margin-top: 5px;
	/*distance avec élément au dessus*/
	margin-bottom: 5px;
	/*distance avec élément du dessous*/
}

article.explications 
/*section article des examinations des deux premières pages*/
{
	background-color: #4CAF50;
	/*couleur de fond*/
	border-color: #333;
	/*couleur des bordures*/
	color: black;
	/*couleur du texte*/
}

section
/*effet commun des section "section"*/
{
	margin-top: 15px;
	/*distance avec élément au dessus*/
	margin-bottom: 15px;
	/*distance avec élément en dessous*/
}

header#pagedesc h2
/*section de la page avec la brève description de celle-ci*/
{
	border-left-style: solid;
	/*style de la bordure gauche*/
	border-right-style: solid;
	/*style de la bordure droite*/
	border-color: #333;
	/*couleur bordure*/
	border-width: 3px;
	/*épaisseur bordure*/
	background-color: #333;
	/*couleur de fond*/
	padding: 5px 50px 10px 50px;
	/*distances avec les bordures*/
	margin-top: 0px;/*npt*/
	/*distance avec élément du dessus, dans ce cas le marquee*/
}

h3, h4, h2
/*effets communs des grands titres*/
{
	text-align: center;
	/*alignement du texte, ici centré pour renforcer l'effet de titre*/
}

h4
/*effets uniques balise h4*/
{
	font-size: 18px;
	/*taille de la police*/
	font-style: oblique;
	/*style de la police, ici en italique*/
}

h3
/*effets uniques de la balise h3*/
{
	text-decoration: underline;
	/*soulignement du texte*/
}

p
/*effet des paragraphes*/
{
	border-radius: 12px;
	/*arrondissement des bordures*/
}

/*TABLEAUX : zones où se trouvent les modifications des balises tableaux*/

table
/*effets communs des balises tableaux*/
{
	border-style: solid;
	/*style de bordure, ici simple ligne pleine*/
	border-width: 5px 3px 5px 3px;
	/*épaisseurs des bordures*/
	margin-left: 25%;
	/*distance avec le bord gauche de la page*/
	margin-right: 25%;
	/*distance avec le bord droit de la page*/
	width: 50%;
	/*largeur du tableau comparé à la page*/
}

td
/*code des cellules des tableaux*/
{
	border-style: solid;
	/*type de bordure*/
	background-color: transparent;
	/*couleur fond: ici aucun fond*/
}

td.blank
/*classe permettant de garder un certain espace dans une cellule même vide*/
{		
		width: 3%;
		padding: 0px 8px;
		/*distance bordure gauche*/
		color: #333;
		/*couleur de texte*/
		background-color: white;
		/*couleur de fond de la cellule*/
}

td:not(.blank)
/*application à tout sauf les .blank*/
{
	width: 97%;
	/*largeur prise par la cellule*/
}


td p
/* effets uniques des paragraphes dans les cellules*/
{
	padding: 5px 10px 5px 5px;
	/*distances avec les bordures et le texte*/
	color: #333;
	/*couleur du texte*/
	border-left-style: none;
	/*type de bordure gauche : ici aucune*/
	border-right-style: none;
	/*type de bordure droite : ici aucune*/
	background-color: white;
	/*couleur de fond*/
	margin-top: 10px;
	/*distance avec le haut de la cellule*/
	margin-bottom: 10px;
	/*distance avec le bas de la cellule*/
	width: 98%;/*npt*/
	/*adaptation largeur pour pas avoir des zones vides entre cellules*/
	text-align: justify;
	/*met le texte en justifié*/
}

section.pg3 td p, article.pg3 p
/*effets appliqués aux cellules de la page 3*/
{
	text-align: center;
	/*centrage du texte*/
}

/*IMAGES*/
div#contenu img
/*effets uniques aux images*/
{
	display: block;
	/*permet le centrage de l'image*/
	border-style: solid;
	/*type de bordure: ici simple ligne pleine*/
	margin-right: auto;
	/*distance avec bord drt: page auto pour center peut-importe taille image*/
	margin-left: auto;
	/*distance avec bord gch: page auto pour center peut-importe taille image*/
	max-width: 80%;
	/*largeur maximale de l'image : pour ne pas qu'elle déborde de la page*/
}

.dropdown-content img
/*paramètre des images dans un dropdown*/
{
	max-height: 200px;
	/*hauteur maximale de l'image*/
	max-width: 200px;
	/*largeur maximale de l'image*/
}

/*LIENS : effets des liens étant ni dans maquette ni dans barre de navigation*/

section.discret a
/*liens en gris fait pour être peu visible*/
{
	text-decoration: none;
	/*élimination du soulignement*/
	color: #333;
	/*couleur du lien*/
}

section.discret a:hover
/*lien discret quand la souris est dessus*/
{
	color: gray;
	/*couleur du lien avec hover*/
}

/*LISTES*/

section.pg2, section.pg4
/*unique à page 2: pour le flex qui a quelques peine sur les version mobiles*/
{
	display: flex;/*npt*/
	/*rend les objets flexibles et donc s'adaptant à la page*/
	-webkit-display: flex;/*npt*/
	-ms-display: flex;/*npt*/
	-moz-display: flex;/*npt*/
	-webkit-display: flex;/*npt*/
	flex-wrap: wrap;/*npt*/
	/*spécifie si l'objet doit se déplacer selon la place*/
	-webkit-flex-wrap: wrap;/*npt*/
	-ms-flex-wrap: wrap;/*npt*/
	-moz-flex-wrap: wrap;/*npt*/
	-webkit-flex-wrap: wrap;/*npt*/
	justify-content: space-between;/*npt*/
	/*type d'espacement entre les objets*/
	-webkit-justify-content: space-between;/*npt*/
	-ms-justify-content: space-between;/*npt*/
	-moz-justify-content: space-between;/*npt*/
	-webkit-justify-content: space-between;/*npt*/
	align-items: flex-start;/*npt*/
	/*spécifie comment les objets doivent se suivre, ici en ligne*/
	-webkit-align-items: flex-start;/*npt*/
	-ms-align-items: flex-start;/*npt*/
	-moz-align-items: flex-start;/*npt*/
	-webkit-align-items: flex-start;/*npt*/
	margin: 10px 19px 10px 10px;/*npt*/
	/*distances entre les différents éléments du flex*/
}

section ul
/*objet de la liste flex*/
{
	list-style-type: none;
	/*élimine le point des objets de liste*/
	margin: 15px;/*npt*/
	/*distance entre les objets*/
	margin-right: 30px;
	padding: 0;/*npt*/
	/*distance avec les autres sections*/
	overflow: hidden;/*npt*/
	/*empêche les objets de déborder*/
	background-color: #333;
	/*couleur de fond*/
	position: relative;/*npt*/
	/*position classique*/
	width: 92%;/*npt*/
	/*largeur prise par la liste sur la page*/
	border-radius: 12px;
	/*arrondissement des bordures*/
}

section ul li
/*éléments de la liste*/
{
	float: left;
	/*les éléments vont se suivre à gauche*/
	display: block;
	/*permet de rendre le tout plus joli en simplifiant utilisation bordures*/
    padding: 16px 0px;
	/*distances avec les bordures*/
	margin: 10px;
	/*distances avec les autres éléments*/
	background-color: #990F02;
	/*couleur de base*/
	border-style: solid;
	/*style des bordures*/
	border-width: 10px 5px;
	/*épaisseurs des bordures*/
	border-color: #990F02;
	/*couleur de base*/
	border-radius: 12px;
	/*arrondissement des bordures*/
	color: black;
	/*couleur du texte*/
}


section div ul:not(.contenu) li:first-child
/*premier élément de la liste ayant le nom de l'activité*/
{
	background: none;
	/*fond de base*/
	border-style: none;
	/*aucune bordures*/
	padding-top: 27px;
	/*distance avec le haut de la cellule*/
	color: white;
	/*couleur du texte*/
}

section.pg4 div ul:not(.contenu) li:first-child
/*premier élément de la première liste ayant le nom de l'activité*/
{
	padding-top: 16px;
	/*distance avec le haut de la cellule*/
	margin: 0px 0px -3px 10px;
	/*distance du texte avec le reste*/
}

section.pg4 div
/*margin des divisions de la page 4*/
{
	margin: 7px;
	/*margin spécial à la division*/
}

li.oui
/*classe signifiant que le critère est respecté*/
{
	background-color: #4CAF50;
	/*couleur de fond*/
	border-color: #4CAF50;
	/*couleur des bordures*/
}

li.non
/*classe signifiant que le critère n'est pas respecté*/
{
	background-color: #990F02;
	/*couleur de fond*/
	border-color: #990F02;
	/*couleur des bordures*/
}

/*DROPDOWN : éléments apparaissants quand notre souris est au dessus de objet*/
.dropdown 
/*balise contenant la zone affichant le dropdown*/
{
  position: relative;/*npt*/
  /*position normale*/
  display: inline-block;/*npt*/
  /*met en fomre de block en ligne*/
}

.dropdown-content
/*contenu ouvrable de la zone dropdown*/
{
	display: none;/*npt*/
	/*n'apparait pas dans cet état*/
	position: absolute;/*npt*/
	/*position ignorant d'être sur d'autres éléments*/
	min-width: 160px;
	/*largeur minimum du dropdown*/
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	/*ombre du dropdown*/
	padding: 10px 8px;
	/*distance du dropdown avec ses bordures*/
	z-index: 1;/*npt*/
	/*permet de passer devant les autres éléments ayant un z-index plus petit*/
	margin-left: 100%;
	/*distance avec la zone .dropdown*/
	margin-right: -280px;
	/*distance limite à la droite de la zone dropdown*/
	margin-top: -100px;
	/*distance verticale avec la zone dropdown*/
	

}

section.pg4 .dropdown-content
/*applications unique à la page 4*/
{
	margin-left: -15px;
	/*distance avec la zone .dropdown*/
	margin-right: 10px;
	/*distance limite à la droite de la zone dropdown*/
	margin-top: -15px;
	/*distance verticale avec la zone dropdown*/
	padding: 10px 2px;
	/*distance comparé au bordures*/
}
.dropdown:hover .dropdown-content 
/*quand la zone dropdown est séléctionnée*/
{
	display: block;/*npt*/
	/*fait apparaître le contenu dropdown*/
}

.dropdown:hover p
/*effet des paragraphes dans la zone dropdown quand la souris est dessus*/
{
	background-color: #333;
	/*couleur de fond*/
	color: white;
	/*couleur du texte*/
}

.pg3 .dropdown-content p
/*effet des paragraphes dans le contenu de la zone dropdown*/
{
	text-align: justify;
	/*met le texte en justifié : prend toute la largeur si possible*/
}