/* Partie 1 Définitions des balises de zones générales - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body {
	background-color : #4a829f;
	min-height: 100%;
	width: 100%;
	margin:0px;	/* Pour que body prenne bien toute la page */
	font-family: Arial;
	/* Description du flex */
	display: -webkit-flex; /* Safari */
	display : flex;
	-webkit-flex-direction: column;
	flex-direction: column;  /* On affiche verticalement */
	justify-content: flex-start; /* en commençant le plus en haut */
	align-items:flex-start; /* on leur fait remplir l'espace horinzontal */
}

#en_haut {
	box-sizing: border-box;
	color: white;
	text-align: center;
	font-size: x-large;
	text-transform: uppercase;
	width:100%;
	margin:auto;
}
.lien_connexion {
	display:inline-block;
	font-weight:bold;
	text-decoration: none;
	margin : 5px;
	margin-right:0%;
	padding : 5px;
	background-color:#2f2f5f;
	width:auto;
	font-size: small;
	text-align: right;
	color: white;
}
#affichage_titre		{	width:auto;}

#affichage_bas {
	box-sizing: border-box;
	margin:0;
	margin-top: 15px;
	margin-bottom: 15px;
	width:100%;
	max-width:2200px;
	height:100%;
	/* Description du flex */
	display: flex;
	display: -webkit-flex; /* Safari */
	-webkit-flex-direction: row;
	flex-direction: row;	/* Affichage horizontal */
	justify-content: space-between;	/* On commence à gauche */
	align-items: stretch;	/* On remplit l'espace verticalement */
}

nav {
	box-sizing: border-box;
	margin-top : 10px;
	/* Description du flex */
	display: -webkit-flex; /* Safari */
	display : flex;
	-webkit-flex-direction: column;
	flex-direction: column;  /* On affiche verticalement */
	justify-content: flex-start; /* en commençant le plus en haut */
	align-items:flex-start; /* on leur fait remplir l'espace horinzontal */
}

nav a {
	box-sizing: border-box;
	display: block;
	width:150px;
	text-decoration: none;
	color: black;
	margin-right: 10px;
	padding : 15px;
	background-color:#91a0e1;
	font-size: 0.75em;
	text-align: left;
	font-weight: bold;
}

nav a:hover /* Apparence au survol des liens */ {
   background-color: #FFF168;
}

nav a.inactif{
   background-color: #333333;
   color: #666666;
}

.choix_sous_menu {font-weight: normal;text-align: right;}
.choix_menu_sel {background-color:#eeeeee;}
.choix_sous_menu_sel{background-color:#eeeeee;font-weight: normal;text-align: right;}

.projet{font-weight: normal;text-align: right;background-color:#b1a0e1;}
.projet_sel{background-color:#eeeeee;font-weight: normal;text-align: right;}


main {
	scroll-behavior: smooth;
	box-sizing: border-box;
	margin:0px;
	margin-left:5px;
	width:100%;
	height:100%;
	border: 10px #ffffff solid;
	border-radius: 20px;
	overflow: scroll;
	background-color: #ffffff;
	position:relative;
}

main header, main footer {
	background-color: #e5e5ff;
	border-top: 20px #4a829f solid;
  padding: 10px;
	margin-top: 50px;
	padding-top:25px;
	padding-bottom:25px;
}

main nav{
	margin:auto;
	padding:2px;
	text-align:center;
	display:block;
}

main nav a{display:inline-block;margin:5px;text-align:center;}
.couleurnav {background-color:#91a0e1;}

section header, section footer {
  background-color: #eeeeee;
	border-top: 0px;
	border-left: 10px #dddddd double;  /* #4a829f */
	padding:10px;
}

section header {margin-bottom: 40px}
section footer {margin-top: 40px}

#en_bas {
	box-sizing: border-box;
	text-align: center;
	background-color: #7f7f9f;
	color: white;
	font-size: small;
	margin : 0px;
	margin-bottom:10px;
	width:100%;
}

#en_bas nav {
	margin : 0;
	width:100%;
	/* Description du flex */
	display: -webkit-flex; /* Safari */
	display : flex;
	-webkit-flex-direction: row;
	flex-direction: row;  /* On affiche verticalement */
	justify-content: center; /* en commençant le plus en haut */
	align-items:center; /* on leur fait remplir l'espace horinzontal */
	flex-wrap: wrap;
}

#en_bas nav a {
	text-decoration: none;
	color: black;
	margin : 20px;
	margin-left : 10px;
	margin-right: 10px;
	padding : 10px;
	background-color:#9f9fbf;
	width:150px;
	font-size: x-small;
	text-align: center;
	font-weight: bold;
}

#en_bas nav a:hover {background-color:#FFF168;}
#en_bas p {text-align:center;}

/*
.vers_haut_page {display:block;text-align:right;color:#4a829f;}
.vers_haut_page i:hover {color:#91a0e1;}
*/
.separateur p.vers_suivant, .vers_suivant {text-align:right;margin-top:0px;margin-bottom:45px;}
p.vers_suivant a {color: #4a829f; font-size: x-large;text-decoration: none;}
p.vers_suivant a:hover {color: #91a0e1;}
#en_haut p {margin:0px}
.vers_autre{text-align:center;margin-top:30px;margin-bottom:10px;}
p.vers_autre a{color: #4a829f;}
p.vers_autre a:hover{color: #91a0e1;}
h2.fleches{margin-bottom: 0px;}


@media only screen and (max-device-width:500px)
{
	/* gestion de l'affichage vertical ou horizontal du bandeau et de la barre de navigation */
	#affichage_bas
	{
		-webkit-flex-direction: column;
		flex-direction: column; /* Affichage vertical */
	}

	nav
	{
		/* Redefinition du sens du positionnement */
		-webkit-flex-direction: row;
		flex-direction: row;	/* Dispersion horizontale sur un petit écran */
		justify-content: center;	/* On centre les objets horizontalement */
		align-items:stretch;	/* On remplit l'espace verticale */
		flex-wrap: wrap;	/* On permet le repositionnement sur la "ligne" du dessous */
	}

	nav a, .choix_sous_menu, .choix_menu_sel, .choix_sous_menu_sel, .projet, .projet_sel
	{
		margin: 0px;
		text-align: center;
		border:1px black;
	}

	main
	{
		margin:0px;
		margin-top : 15px;
		padding: 10px;
		width:100%;
	}

	#affichage_titre		{	transform:translate(0px,0%);}

}

@media only screen and (max-width:1000px)
{
	/* gestion de l'affichage vertical ou horizontal du bandeau et de la barre de navigation */
	#affichage_bas
	{
		-webkit-flex-direction: column;
		flex-direction: column; /* Affichage vertical */
	}

	nav
	{
		/* Redefinition du sens du positionnement */
		-webkit-flex-direction: row;
		flex-direction: row;	/* Dispersion horizontale sur un petit écran */
		justify-content: center;	/* On centre les objets horizontalement */
		align-items:stretch;	/* On remplit l'espace verticale */
		flex-wrap: wrap;	/* On permet le repositionnement sur la "ligne" du dessous */
	}

	nav a, .choix_sous_menu, .choix_menu_sel, .choix_sous_menu_sel, .projet, .projet_sel
	{
		margin: 0px;
		text-align: center;
		border:1px black;
	}

	main
	{
		margin:0px;
		margin-top : 15px;
		padding: 10px;
		width:100%;
	}

	#affichage_titre		{	transform:translate(0px,0%);}

}




/* Partie 2 MODIFICATIONS DES BALISES GENERALES - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
p{
	overflow-wrap : break-word;
	text-align: justify;
	font-size: medium;
}

h1{
	border: 3px #0a425f  solid;
  text-align: center;
	background-color: #C08AF5;
	margin-top: 15px;
	margin-bottom: 0px;	/* Emule l'utilisation de la balise br*/
  padding-top:10px;
  padding-bottom: 10px;
	text-transform: uppercase;
}

h2{
	background-color: #5A9B65;
	color: white;
	border: 3px #0a425f  solid;
	font-weight: bold;
	margin-top: 90px; /* Emule l'utilisation de la balise br*/
	margin-bottom: 45px;/* Emule l'utilisation de la balise br*/
  padding-top:10px;
  padding-bottom: 10px;
	text-align: center;
	text-transform: uppercase;
}

h3{
	background-color: #91a0e1;
	color: white;
	border: 3px #0a425f  solid;
	font-weight: bold;
	margin-top: 30px; /* Emule l'utilisation de la balise br*/
	margin-bottom: 30px;/* Emule l'utilisation de la balise br*/
	text-align: left;
	text-transform: uppercase;
}

h4{
	color: #552222;
  margin-top: 45px; /* Emule l'utilisation de la balise br*/
	text-transform: uppercase;
  text-decoration: underline;
}

h6{
	font-size: medium;
	font-weight: normal;
}

hr {border-width:1px;border-color:#4a829f; width: 50%; margin:auto; margin-top:40px; margin-bottom:40px;}

mark {background-color: #FFF168;color: #4a829f;font-weight:bold;}

li {margin-top:10px;margin-bottom:10px;}

a.lien {
	display : inline-block;
	padding : 10px;
	margin: 10px;
	background-color : #4a829f;
	color : white;
	border-radius:15px;
	text-decoration: none;
	transition: margin 1s, text-background 1s, padding 1s;
	text-overflow: ellipsis;
}

a.lien:hover {
   margin: 5px;
   background-color : #FFF168;
   padding: 15px;
   color : black;
}


/* Partie 3 Id et Class propres au site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.gras {font-weight: bold;}

/* CSS GENERALISTE couleur texte */
.txt_vrai {color:#5555ee;} /* True Pour les codes */
.txt_faux {color:#ee5555;} /* False Pour les codes */
.txt_inv {text-decoration: overline;}  /* Pour les formules complémentées */
.txt_blocinv {border-top :solid 2px; padding-top : 5px;}
.txt_r {color:#DD5050;}
.txt_v {color:#DD50DD;}
.txt_b {color:#5050DD;}
.txt_bc {color:#9999EE;}
.txt_g {color:#55ee55;}
.txt_o {color:#BB8833;}
.txt_m {color:#87591A;} /* marron */
.txt_gr{color:grey;}

.txt_che {color:#BD30BD;} /* linux : virtual env et chemin */
.affichage_console .txt_che {color:#DD50DD;}
.txt_env {color:#DD90DD;} /* linux : virtual env et chemin */
.txt_w {color:#DDDDDD;}   /* Invite de commande. linux : $, windows > ...   --> a faire disparaitre */
.txt_user {color:#33aa33;} /* linux : user - Vert plus foncé */
.txt_rep {color:#BAB863;} /* orange jaune orange clair  --> a faire disparaitre  : go */

/* CSS GENERALISTE fond texte */
.en_rouge {background-color:#ee5555;}
.en_bleu {background-color:#5555ee;}
.en_vert {background-color:#55ee55;}
.en_orange {background-color:#FFA500;}
.marktype1 /* plutôt jaune */ {background-color: #FFF168;color: #4a829f;font-weight:bold;}
.marktype2 /* plutôt bleu */ {background-color: #68F1FF;color: #4a829f;font-weight:bold;}
.marktype3 /* plutôt vert */ {background-color: #C1CF68;color: #3a922f;font-weight:bold;}
.convertir {background-color:#FFFF99;width:80%;}

/* CSS GENERALISTE plutôt code ou formule */
.formule {font-family: "Courier New", Courier, monospace;}/* Pour placer un bout de formule dans du texte normal */
.fonction {color: #DD5555;}
.valeur {color: #5555DD;}/* strong en bleu pour les codes */
.iden {font-weight: bold;background-color: #FFF7A8;}/* pour les identif de balises ... en html, css et js */
.table_ip {background-color: #444444;color:yellow;text-align:center;} /* Affichage texte ip ou bits */
.contenu_octet{	background-color: #444444;	color:yellow;} /* Affichage commun des octets   */
.console {background-color: #222222;color:#FFF168;} /* Affichage sous forme de console  - */

/* Affichage du texte de référence de l'image */
figcaption, .cc_images {
	text-align:center;
	font-size: medium;
	color:#777777;
}

/* class liée aux questions */
.qu  {
	background-color: #4a829f;
	color: white;
	border: 3px #0a425f solid;
	font-weight: bold;
	font-family: "Source Code Pro", "Arial Black", Arial, Verdana, sans-serif;
}

.que {
  border: 2px #4a829f  solid;
  border-left: 10px #4a829f  solid;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* class qui permet de souligner les remarques */
.remarque	{	text-decoration : underline;	font-weight: bold;}

/* gestion des réponses cachées */
.essai_magie {min-height:100px;width:300px;display:none;}
.essai_magie:hover{	min-height:100px;width:auto;}
.essai_magie:hover .p1 {display:none;}
.essai_magie:hover .p2 {display:block;}
.essai_magie .p2 {display:none;}

.lcor {background-color:#dddddd;padding:5px;margin-top:10px;margin-bottom:30px; display:inline-block}
.correction {display:none;border-left: 10px #dddddd double;padding-bottom:20px;}
.correction .p1 code{background-color:#dddddd;}
.boutcorrection:checked + .correction {display:block;}

.theme_separateur {	text-align:center;	font-size: medium;	color:#888888;}

.note {
	background-color: #e5e5ff;
	border-left: 10px #ca829f solid;
  padding: 10px;
	margin-top: 20px;
	padding-top:15px;
	padding-bottom: 15px;
}

.cours {
	background-color: #e5e5ff;
	border-left: 10px #aac29f solid;
  	padding: 10px;
	margin-top: 20px;
	padding-top:15px;
	padding-bottom: 15px;
}

.cours h3{ background-color: #aac29f; color: black;}

.digression {
	background-color: #bbbbbb;
  padding: 10px;
  margin-left: 5%;
  margin-right: 5%;
	margin-top: 20px;
	padding-top:15px;
	padding-bottom: 15px;
}

.digression p {overflow-wrap : break-word;text-align: justify;font-size: medium;}
.digression p.cc_images {text-align:center;font-size: small;color:#777777;}/* Affichage référence de l'image */

.separateur /* Affichage dans une ZONE bordurée des digressions */ {
	border: 10px #cccccc solid;
	border-radius: 20px;
	margin : auto;
	padding : 15px;
	height:auto;
	margin-bottom: .8em;
	width: 90%;
}
.separateur p {overflow-wrap : break-word;text-align: justify;font-size: medium;}
.separateur p.cc_images {text-align:center;font-size: small;color:#777777;}/* Affichage reference de l'image */

.test	/* une ZONE pour voir le résultat d'un code*/ {
	background-color: #eeeecc;
	margin-top: 10px;
	margin-bottom: 10px;
}

.test_html /* une ZONE pour voir le résultat html */{border:1px dotted black;padding: 10px;}

.explorateur_dossier /* Pour l'affichage des structures de dossiers */ {
	/*border: 10px #ffffff solid;*/
	border-radius: 20px;
	margin : 20px;
	margin-left:40px;
	padding : 15px;
	height:auto;
	background-color: #aaaaee;
	margin-bottom: .8em;
	width: 400px;
}


/* CSS GENERALISTE placement */
.tleft {text-align : left;} /* Permet de placer à gauche, notamment les tableaux */
.disposition_type_a {text-align: center;} /* Pour centrer les txt ou images dans le paragraphe*/
.a_droite {float:right;}
.a_gauche {float:left;}
.margegauche {margin-left: 15px;}
.transition {margin-top: 90px !important;}
.transition2 {margin-top: 45px !important;}
.transition3 {margin-top: 150px !important;}
.retrait_1 {margin-left: 30px;}
.retrait_2 {margin-left: 60px;}
.retrait_3 {margin-left: 90px;}
.padding10 {padding-left:10px;padding-right:10px;}
.pad10 {padding:6px;margin:3px;}
.action_compte {margin-top:0px;margin-bottom:20px}

/* Partie 4 Balises propres à l'affichage du code - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.linenodiv, .codehilite { margin-left: 10px; margin-right: 5px;}
.codehilite  { background: #dddddd; } /*  MODIFI */

code	/* Pour placer un bout de code dans du texte normal */{
	/*font-weight: bold;*/
	font-family: "Courier New", Courier, monospace;
	/*font-family: "Verdana", "Arial Black", Arial, Verdana, sans-serif;*/
	background-color: #dddddd;
  color : #0a324f;
	font-size : medium;
}
code .comm {color : #5a92af;}
code .docu {color : #999977;}
code em	{color : #5a92af;}

.lignescode, .codehilitetable {
	box-sizing: border-box;
	background-color: #dddddd;
	margin-left:5%;
	margin-top: 10px;
	margin-bottom: 10px;	/* Emule l'utilisation de la balise br*/
	padding-left: 10px;
	padding-top:10px;
	padding-bottom:10px;
	overflow: scroll;
	max-width : 90%;
	border: 3px solid #4a829f;}

.affichage_console {
	box-sizing: border-box;
	margin : 20px;
	margin-left:50px;
	padding : 15px;
  padding-bottom : 0px;
	background-color: #222222;
	color:#FFF168;
	font-family: "Courier New", Courier, monospace;
	margin-left:5%;
	margin-top: 10px;
	margin-bottom: 10px;
	overflow: scroll;
	max-width : 90%;
/*border: 3px solid #4a829f;*/}

.lignescode code, .affichage_console code, .codehilite code, .linenodiv code{
	white-space:pre;
	overflow: scroll;
	max-width:100%;
	margin-top: 0px;
	margin-bottom: 0px;	/* Emule l'utilisation de la balise br*/
	text-align: left;
}

.affichage_console code{
	background-color: inherit;
	color:inherit;
}
/* ancien
code em	{
	color : #5a92af;
}*/

.lignescode p:first-child {margin-top: 10px;}
.lignescode p:last-child 	{margin-bottom: 10px;}

/* Affichage des codes sur plusieurs lignes  avec fond vert initialement------------------------------ */
.lignescodeordi	{
	background-color: #222222;
	margin-top: 10px;
	margin-bottom: 10px;	/* Emule l'utilisation de la balise br*/
	margin-left: 20px;
	margin-right:5px;
	padding-left: 10px;
	border: 3px solid #4a829f;
	display:block;
}

.lignescodeordi p	{
	font-family: "Courier New", Courier, monospace;
	margin-top: 0px;
	margin-bottom: 0px;	/* Emule l'utilisation de la balise br*/
	color : #22cc22;
	text-align: left;
	overflow-wrap : break-word;
	font-size: medium;
}

/* Partie 5 Image  - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - */

img,video {
	overflow:scroll;
	max-width: 100%;
	height: auto;
}

svg {
	max-width: 100%;
	preserveAspectRatio: xMaxYMax;
}

.affichage_image_a		/* IMAGE BLOCK */{
	/* text-align: center; ne peut pas servir à centrer l'image car on s'adresse ici directement à l'image et pas au paragraphe la contenant */
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.affichage_image_b		/* BLOCK et CENTREE, on centre également le texte alternatif en cas de défaut d'images */{
	text-align: center;    /* Sera utilisé sur le texte alternatif s'il y a besoin */
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.affichage_img_b		/* Pour ne pas être gérer par le script */{
	text-align: center;    /* Sera utilisé sur le texte alternatif s'il y a besoin */
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.affichage_f img {
  border: 2px #4a829f  solid;
  border-left: 10px #4a829f  solid;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}

.affichage_f {
  color: #4a829f;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Partie 6 Menu des activités et des fiches */

.menu_parties
{
	margin : 0;
	width:100%;
	/* Description du flex */
	display: -webkit-flex; /* Safari */
	display : flex;
	-webkit-flex-direction: row;
	flex-direction: row;  /* On affiche verticalement */
	justify-content: center; /* en commençant le plus en haut */
	align-items:center; /* on leur fait remplir l'espace horinzontal */
	flex-wrap: wrap;
}

.menu_parties a
{
	display:block;
	padding : 10px;
	margin: 10px;
	background-color : #4a829f;
	color : white;
	width: 200px;
	height: 40px;
	border-radius:15px;
	text-decoration: none;
	transition: margin 1s, text-background 1s, padding 1s;
}

.menu_parties a p
{
	margin : 5px;
	padding: 0px;
	text-overflow: ellipsis;
}

.menu_parties a:hover /* Apparence au survol des liens */
{
   margin: 0px;
   background-color : #2a627f;
   padding: 20px;
}


/* GESTION DU MUR DES ACTIVITES */

.menu_lecons {
	margin : 0;
	width:100%;
	/* Description du flex */
	display: -webkit-flex; /* Safari */
	display : flex;
	-webkit-flex-direction: row;
	flex-direction: row;  /* On affiche verticalement */
	justify-content: center; /* en commençant le plus en haut */
	align-items:center; /* on leur fait remplir l'espace horinzontal */
	flex-wrap: wrap;
}

.menu_lecons a {
	display:block;
	padding : 10px;
	margin: 10px;
	background-color : #4a829f;
	color : white;
	width: 280px;
	height: 280px;
	border-radius:15px;
	text-decoration: none;
	transition: margin 1s, text-background 1s, padding 1s;
	text-overflow: ellipsis;
}

.menu_lecons a h1 {
	border: 3px #0a425f  solid;
	text-align: center;
	background-color: #FFF168;
  margin-top: 5px;
	margin-bottom: 15px;/* Emule l'utilisation de la balise br*/
	text-transform: uppercase;
	color: black;
}

.menu_lecons a h1.option {
	color:#666666;
}


.menu_lecons a:hover /* Apparence au survol des liens */ {
   margin: 0px;
   background-color : #2a627f;
   padding: 20px;
}


.menu_chapitres {
	margin : 0;
	margin-bottom: 45px;
	width:100%;
	height:40px;
	/* Description du flex */
	display: -webkit-flex; /* Safari */
	display : flex;
	-webkit-flex-direction: row;
	flex-direction: row;  /* On affiche verticalement */
	justify-content: right; /* en commençant le plus en haut */
	align-items: stretch; /* on leur fait remplir l'espace horinzontal */
	flex-wrap: wrap;
}

.menu_chapitres a {
	display:block;
	padding : 5px;
	margin: 10px;
	background-color : #4a829f;
	color : white;
	width: 50px;
	height: 25px;
	text-decoration: none;
	transition: margin 1s, text-background 1s, padding 1s;
}

.menu_chapitres a p {
	margin : 5px;
	padding: 0px;
	text-overflow: ellipsis;
	text-align: center;
}

.menu_chapitres a:hover /* Apparence au survol des liens */ {
   background-color : #FFF168;
   color : black;
}




/* Partie 7 Css des codes animées - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.bloc_variable {width:250px;	margin:5px;	display:inline-block;}
.var_fonc {background-color:#9999FF;	}
.var_pp {background-color:#FFFF99;}
.bloc_variable p {padding:10px;}
.but_anim {padding:10px;}
.undefinedcolor{color:#333333;font-weight: normal;font-size: small;} /* 'boites-variables' undefined */




/* Partie 8 MODIFICATIONS DES BALISES TABLE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

table{
	border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
  text-align :left;
  /*text-align :center;*/
	margin:auto;
}

table.exemple {font-size: x-small;}

td {border: 1px solid black;}
th {border: 2px solid black;}
td.selec {background-color: #777777;color:yellow;text-align:center;}

table.table_ip tr {border: 2px solid black;}
table.table_ip tr td {border: 0px;width:10px;padding:10px;text-align:center;}
table.table_ip tr td:nth-child(odd){width:80px;}

table.ip45 tr td:nth-child(odd) {width:45px;}

table.table_base {text-align:center;}
table.table_base tr td {text-align:center;width:40px;}
table.table_base tr td:first-child {width:120px;font-size: small;}

/* Premier type de tableau avec en-tête coloré */
.color tr td, .color tr th {padding: 15px;text-align: center;}
.color tr th {background-color: #4a829f;color: white;}

/* Fond différent une ligne sur deux */
.color2 tr td, .color2 tr th {padding: 15px;text-align: center;}
.color2 tr th {background-color: #4a829f;color: white;}
.color2 tr:nth-child(even) {background-color: #f2f2f2;}

/* Premier type de tableau avec en-tête coloré */
.color3 tr td, .color3 tr th {padding: 15px;text-align: center;}
.color3 tr th {background-color: #4a829f;color: white;}
.color3 tr:hover {	background-color: #f2f2f2;}

/* Premier type de tableau avec en-tête coloré */
.color4 tr td, .color4 tr th {padding: 15px;text-align: center;border: 3px white solid;}
.color4 tr th {background-color: #4a829f;color: white;}
.color4 tr:hover {background-color: #f2f2f2;}

/* Texte à gauche */
.color5 tr td, .color5 tr th {padding: 15px;text-align: left;}
.color5 tr th {background-color: #4a829f;color: white;}
.color5 tr:nth-child(even) {background-color: #f2f2f2;}

/* Premier type de tableau avec en-tête coloré */
.color6 tr td, .color6 tr th {padding: 5px;text-align: center;border: 3px white solid;width:25px;}
.color6 tr th {background-color: #4a829f;color: white;}
.color6 tr:hover {background-color: #f2f2f2;}
.color6 tr.index, .color6 tr.index td {padding-bottom:0px;padding-top:0px;}
.color6 tr td.pilier {background-color: #AAAA22;color:white;font-weight: bold;}
.color6 tr td.ext {background-color: #0a425f;color:white;font-weight: bold;}
.color6 tr td.val {background-color: #3a728f;color:white;font-weight: bold;}
.color6 tr td.rejet {background-color: #AA2222;color:white;font-weight: bold;}
.color6 tr td.trouve {background-color: #3a8f3a;color:white;font-weight: bold;}

.largeurmax {width:95%;}
.largeurmax tr th {width:auto;overflow-wrap : break-word;}
.largeurmax tr th:first-child {width:150px;overflow-wrap : break-word;}



/* Partie 9 CSS BDD - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - */
.sql_com {color:#fd9f00;} /* Pour les codes */
.sql_champ {color:#dd8888;} /* Pour les codes */
.sql_tab {color:#77bbee;} /* Pour les codes */
.sql_txt {color:#55ee55;} /* Pour les codes */
.sql_num {color:#aaaa22;} /* Pour les codes */
.sql_bdd{color:pink;}



/* Partie 10 Menu logo en image sur la page d'accueil  - - - - - - - - - - - - - - - - - - - - -  */
.menu_logos{
	margin : 0;
	width:100%;
	/* Description du flex */
	display: -webkit-flex; /* Safari */
	display : flex;
	-webkit-flex-direction: row;
	flex-direction: row;  /* On affiche verticalement */
	justify-content: center; /* en commençant le plus en haut */
	align-items:center; /* on leur fait remplir l'espace horinzontal */
	flex-wrap: wrap;
}

.menu_logos a{
	display:block;
	padding : 10px;
	margin: 10px;
	color : white;
	width: 150px;
	height: 150px;
	border-radius:15px;
	text-decoration: none;
	transition: margin 1s, text-background 1s, padding 1s;
}

.menu_logos a h1{
	border: 3px #0a425f  solid;
	text-align: center;
	background-color: #FFF168;
	margin-top: 5px;
	margin-bottom: 15px;/* Emule l'utilisation de la balise br*/
	text-transform: uppercase;
	color:black;
}

.menu_logos a:hover /* Apparence au survol des liens */{
   margin: 0px;
   background-color : #FFF168;
   padding: 20px;
}









.but_anim{	/* CSS pour l'état normal */
	font-weight: bold;
	text-align: center;
	background-color : #4a829f;
	color:#FFF168;
}

.but_anim:hover { /* CSS pour l'état survolé */
	background-color : #2a627f;
}

.but_anim:active { /* CSS pour l'état enfoncé */
	font-weight: bold;
	text-align: center;
	background-color : #1a627f;
	color:#DFD148;
}

.but_anim:disabled { /* CSS pour l'état enfoncé */
	font-weight: bold;
	text-align: center;
	background-color : #6a828f;
	color:#555555;
}
















/* -------------------------------------- */
/* Partie 11 : Les class pour les exemples du cours HTML CSS : ne pas modifier */
/* -------------------------------------- */

p.bouton {
	border-radius:5px;
	padding:5px;
	background-color:#9f9fbf;
	color:black;
	width:200px;
	margin:auto;
}

p.bouton:hover {
	background-color:#FFF168;
}