* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}
#page-main {
	margin: 0px auto;
	padding: 0;
	display: flex;
	justify-content: space-around;
	justify-content: center;
}

#corps {
	margin-bottom: 10px;
	padding: 15px;
	/*color: #B3B3B3;*/
	/*background-color:rgb(60,60,60);*/
	background-color: aliceblue;
	background-repeat: repeat;
	/*background-color: #626262;*/
	/*background-color: black;*/

	/*border: 2px solid black;*/
	border-radius: 13px;
	text-align: justify; /*on justifie le texte présent dans le corps*/
	font-family: Helvetica, Arial, sans-serif;
	box-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
	color: black;
}

@media only screen and (max-width: 1023px) {
	/*-----------------------------------
	-------------For Mobile--------------
	-----------------------------------*/
	#page-main { display: inherit; }
	#sommaire { display: none; }
	#menu { display: none; }
	#en_tete { display: none; }
	#pied_de_page { display: none; }
	.image_titre { display: none; }
	.image_titre_right { display: none; }
	/*#corps { margin-left: none; float: right; }*/
	.menu_mobiles_bottom {
		padding: 15px;
		font-weight: bold;	/*permet de mettre en gras*/
		font-size: medium;
		text-align: center;
		background-image: url("../images/pied.jpg");
		background-size:     cover; 
		color: #B3B3B3;
		border-radius: 13px;
		font-family: sans-serif;
		box-shadow: 7px 10px 5px #888888,0px 0px 10px #000000,0px 0px 5px #000000;
		background-position: center;
	}
	.menu_mobiles_bottom a
	{
		font-size: normal;
		text-decoration: yes;
		color: #F26615;
		padding: 0vw;
		display: inline;
		margin-left: 0px;
		margin-right: 0px;
		text-align: center;
	}
	pre.code /*pour les commandes utilisateurs*/ { font-size: 16px; }
	.menu_mobiles_top {
		height: auto;
		background-image: url("../images/banniere_01.jpg");
		background-position: left;
		background-size:     cover; 
		/*border: 2px solid black;*/
		background-repeat: no-repeat;
		margin-bottom: 10px;
		border-radius: 13px;
		padding: 5px;
		box-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
		overflow:auto; /*empécher l'image de fond de disparaitre (lorsque l'on utilise (float: left)) : https://stackoverflow.com/questions/9538247/css-background-disappears-when-using-floatleft */

	}
	.menu_mobiles
	{
		padding: 2%;
		background-size: cover; 
		/*margin-bottom: 1%;*/
		width: 33.33%;
		float: left;
		text-align: center;
	}
	.title  { 
		font-weight: bold;
		font-size: 4vw;
		color: #F26615;
		font-family: sans-serif;
		text-align: center;
		text-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
	}
	.menu_mobiles a { 
		margin: auto;
		font-weight: bold;
		padding: 0px;
		text-shadow:0px 0px 1px #000000,0px 0px 1px #000000,1px 1px 1px #000000;
		text-decoration: none;
		color:rgb(250,250,250);
		font-size: 5.3vw;
		display: block;	/*permet d'avoir des blocs cliquables*/
		}
	#corps h1 { font-size: 5.5vw; }
	#corps h2 { font-size: 5vw; }
	#corps h3 { font-size: 4.5vw; }
	#corps h4 { font-size: 4.5vw; }
	#corps h5 { font-size: 4.5vw; }
	.images_autosize60, .images_autosize40, .images_autosize20 {
		display: block;
		max-width: 100%;
		height: auto;
	}
	.images_autosize_center80, .images_autosize_center60, .images_autosize_center40, .images_autosize_center20 {
		display: block;
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	#corps p
	{
		/*font-size: auto;*/
		margin-left: 0px;
		text-decoration: none;
	}
	#corps ul { margin-top: 0px; }
	#corps li, a /*id corps p et tout les liens*/
	{
		/*font-size: auto;*/
		margin-left: -20px;
		text-decoration: none;
		padding-bottom: 0px;
		padding-top: 15px;
		/*display: inline-block;*/
	}
	#corps li a { padding-bottom: 15px; padding-top: 15px; } /*padding haut bas si liste + lien*/

} /*-------fin mobile-------*/
body
{
	/*width: 764px;*/
	width: auto;
	margin: auto;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	background-image: url("../images/puce.jpg");
	background-repeat: repeat-x; /*l'image est répété uniquement sur la première ligne, horizontalement*/
	font-family: Arial, "Arial Black", "Times New Roman";
	/*text-align: center;*/
	background-color: aliceblue;
}
::selection{
	/*background-color: gold;*/ /*couleur de la sélection/surlignage du texte avec le curseur*/
	color: black;
	background: #5cf;
}

#en_tete
{
	/*width: 760px;*/
	/*width: auto;*/
	height: 194px;
	/*height: auto;*/
	background-image: url("../images/banniere_01.jpg");
	background-position: left;
	background-size:     cover; 
	/*border: 2px solid black;*/
	background-repeat: no-repeat;
	margin-bottom: 10px;
	border-radius: 13px;
	box-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;

	/*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/

}

#menu
{
  flex: 0 0 190px;
  margin-top: 1%;
  margin-right: 3%;
  min-width: 0;
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- this is the fix */

}

.element_menu
{
	/*background-color: #787878;*/
	font-family: sans-serif;
	line-height:18px; /*espacement entre les lignes*/
	background-image: url("../images/menu.gif");
	/*background-color:rgb(96, 118, 183);*/
	/*border: 0.5px solid black;*/
	border-radius: 13px;
	padding: 8px;
	margin-bottom: 20px;
	text-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
	box-shadow: 7px 10px 5px #888888,0px 0px 10px #000000,0px 0px 5px #000000;
}

[class*="menu"] h3
{
	/*color: #B3B3B3;*/
	font-weight: bold;
	font-size: 1.4em;
	color: #F26615;
	font-family: sans-serif;
	/*font-family: Arial, "Arial Black", "Times New Roman";*/
	text-align: center;
	text-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
}

[class*="menu"] ul
{
	font-weight: bold;
	padding: 0px;
	padding-left: 20px;
	margin: 20px;
	margin-bottom: 20px;
	text-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
	margin-left: 17%;
}	

.element_menu a
{
	/*font-size: 1.2em;*/
	font-size: 1.15em;
	/*color: #B3B3B3;*/
	text-decoration: none;
	color:rgb(250,250,250);
	text-shadow:0px 0px 1px #000000,0px 0px 1px #000000,1px 1px 1px #000000;
}
.firefox_menu
{
	text-align: center;
	font-size: 1em;
	color: #F26615;
	font-family: sans-serif;
	/*text-shadow:0px 0px 5px #000000,0px 0px 5px #000000,0px 0px 5px #000000;*/
	text-shadow:0px 0px 1px #000000,0px 0px 1px #000000,1px 0px 1px #000000;
	font-weight: bold;
	margin-bottom: 150px; /*Evite le chevauchement de l'icone avec le pied de page*/
}

[class*="menu"] a:hover /*signifie dessus, permet ici la surbrillance des liens lors du passage du curseur dessus*/
{
	background-color: none;
	text-decoration: none;
	color: #F77F7F;
}
[class*="menu"] a:focus, #corps a:focus /*effet quand le visiteur clique sur le lien*/
{
	background-color: black;
}
[class*="menu"] a:visited, #corps a:visited, #pied_de_page a:visited /*quand le visiteur à déja vu la page concernée*/
{
	text-decoration: none;
}
@media only screen and (min-width: 1024px) {
	/*-----------------------------------
	-------------For Desktop-------------
	-----------------------------------*/
	#corps
	{
		font-size: 1.1em;
		flex: 0 1 1720px;
		min-width: 0;
	}

	.menu_mobiles {	display: none;	}
	.menu_mobiles_bottom {	display: none;	}
	.element_menu ul
	{
		list-style-image: url("../images/puce.png");
	}
	#corps h1 { font-size: xxx-large; }
	#corps h2 { font-size: xx-large; }
	#corps h3 { font-size: x-large; }
	#corps h4 { font-size: large; height: 25px; margin: 1vw auto 0.1vw auto; /*haut droite bas gauche*/ }
	#corps h5 { font-size: medium; }
	pre.code /*pour les commandes utilisateurs*/ { font-size: normal; }
	.images_autosize80 {
		display: block;
		max-width: 80%;
		height: auto;
	}
	.images_autosize60 {
		display: block;
		max-width: 60%;
		height: auto;
	}
	.images_autosize40 {
		display: block;
		max-width: 40%;
		height: auto;
	}
	.images_autosize20 {
		display: block;
		max-width: 20%;
		height: auto;
	}
	.images_autosize_center80
	{
		display: block;
		max-width: 80%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.images_autosize_center60
	{
		display: block;
		max-width: 60%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.images_autosize_center40
	{
		display: block;
		max-width: 40%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.images_autosize_center20
	{
		display: block;
		max-width: 20%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	#corps p, #corps h1, #corps h2, #corps h3, #corps h4, #corps h5, #corps ul, #corps li, #corps a /*id corps p et tout les liens*/
	{
		/*font-size: auto;*/
		margin-left: 5px;
		text-decoration: none;
		text-align: justify;
		word-wrap: break-word;
		max-width: 1420px;
	}
	.image_titre
	{
		float: left;
		max-width: 30%;
		padding: 1%;
	}
	.image_titre_right
	{
		float: right;
		max-width: 30%;
		padding: 1%;
	}
}
@media screen and ( min-width: 1024px) and (max-width: 2180px) {
    #corps{
	font-size: 1.1em;
	flex: 0 1 1280px;
	min-width: 0;
    }
}
@media only screen and (min-width: 1919px) {
	#en_tete {
		background-image: url("../images/banniere_02.jpg"); /*Meilleure qualité de la bannière pour les écrans > HD*/
	}
}


#corps h1, #corps h2, #corps h3, #corps h4, #corps h5 {
	color: #F26615;
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
}

#corps h1
{
	margin: auto auto auto 0px; /*haut droite bas gauche*/
}

#corps h2
{
	padding-left: 15px;
	text-align: left;
	margin: 1vw auto 0.2vw 0px; /*haut droite bas gauche*/
	/*padding-top: 1vw;*/
}
#corps h3
{
	padding-left: 30px;
	text-align: left;
	margin: 0.5vw auto 0.3vw 0px; /*haut droite bas gauche*/
	/*padding-top: 0.5vw;*/
}
#corps h4
{
	padding-left: 45px;
	text-align: left;
	margin: auto auto 0.4vw 0px; /*haut droite bas gauche*/
}
#corps h5
{
	height: 15px;
	padding-left: 60px;
	text-align: left;
	margin: 0.1vw auto 0.4vw 0px; /*haut droite bas gauche*/
	/*padding-top: 0.1vw;*/
}
.k_control 
{
	color: ghostwhite;
	text-shadow:0px 0px 1px #000000,0px 0px 1px #000000,1px 1px 1px #000000;
}
#corps b, strong
{
	/*font-weight: bold;*/	/*permet de mettre en gras*/
	/*font-style: normal;*/	/*permet de ne pas mettre en italique*/
	/*color: crimson;*/
	/*background-color: ghostwhite;*/
	/*color: #F26615;
	background-color: #f1f1f1;
	font-weight: normal;
	font-family: courier, sans-serif;
	color: black;
	color: orangered;
	font-family: Helvetica, Arial, sans-serif;
	color: #F26615;*/
	/*color: crimson;*/
	color: orangered;
	background-color: ghostwhite;

	font-weight: 100;
	padding-left: 4px;
	padding-right: 4px;
	font-size: 110%;
	font-family: sans-serif;
}
#corps a
{
	color: #ff5722;
	text-decoration: none;
	margin-left: 0px;
}

#corps a strong, #corps a b
{
	color: #F26615;
	font-size: 100%;
	font-family: sans-serif;
	
}

#corps a:hover,  #pied_de_page a:hover /*signifie dessus, permet ici la surbrillance des liens lors du passage du curseur dessus*/
{
	background-color: gold;
	text-decoration: none;
	color: #F77F7F;
		text-decoration: underline;
}
/*permet les puces en orange*/
#corps ul {
	list-style: none;
}
#corps li::before
{
	margin-left: -1em;
        content: '';
        margin-right: 11px;
        background-color: #F26615;
        height: 12px;
        width: 12px;
        margin-top: -4px;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
	/*box-shadow: 1px 1px 1px #000000,1px 1px 1px #000000,1px 1px 1px #000000;*/
}
#corps ul * li::before
{
        height: 8px;
        width: 8px;
}
/*fin puces en orange*/

#pied_de_page
{
	padding: 13px;
	font-weight: bold;	/*permet de mettre en gras*/
	font-size: normal;
	text-align: center;
	background-image: url("../images/pied.jpg");
	color: #B3B3B3;
	/*background-color: #626262;*/
	border-radius: 13px;
	font-family: sans-serif;
	box-shadow: 7px 10px 5px #888888,0px 0px 10px #000000,0px 0px 5px #000000;
	background-position: center;
}
#pied_de_page a
{
	font-size: normal;
	text-decoration: none;
	color: #F26615;
}
.rss:hover {
	opacity: .5;
}

#sommaire
{
	position: -webkit-sticky; /*permet de rester visible malgrès le scrolling*/
	position: sticky; /*permet de rester visible malgrès le scrolling*/
	top: 0; /*permet de rester visible malgrès le scrolling*/
	float: right;
	width: auto;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: -15px;
	margin-top: -15px;
	padding: 10px;
	color: black; /*couleur du texte présent dans le corps*/
	background-color:rgb(150,150,150,0.8); /*0.8 spécifie le niveau de transparence*/
	line-height: 0px; /*espacement entre les lignes*/
	border-radius: 13px; /*forme arrondie du sommaire*/
	text-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
	box-shadow:0px 0px 1px #000000,0px 0px 1px #000000,0px 0px 5px #000000;
}
/*---puces-oranges------*/
#sommaire ul {
	list-style: none;
}
#sommaire li::before
{
	margin-left: -1em;
	content: '';
	margin-right: 11px;
	background-color: #F26615;
	height: 7px;
	width: 7px;
	margin-top: -4px;
	display: inline-block;
	border-radius: 50%;
	vertical-align: middle;
}
#sommaire ul * li::before
{
        height: 5px;
        width: 5px;
}
/*---fin-puces-oranges------*/
#sommaire ul ul
{
	margin-top: 18px;
	font-size: 14px;
	padding-left: 25px;
	/*line-height: 20px;*/
}
#sommaire ul a
{
	margin-right: 18px;
	font-weight: 600;
	text-decoration: none;
	color: whitesmoke;
	font-family: sans-serif;
	text-shadow:0px 0px 0px #000000,0px 0px 0px #000000,1px 1px 1px #000000;
}
#sommaire a:hover
{
	text-decoration: inherit;
}
/*----------------------------------------
----------Les Tableaux--------------------
----------------------------------------*/
th /*première ligne du tableau*/
{
	/*border: 2px solid white;*/
	padding: 8px; /*évite aux cellules d'être trop collé au texte*/
	padding-right: 26px;
	/*background-color: blue;*/
	background-color: rgb(156,158,219);
	color: white;
	font-size: 16px;
	/*font-family: Arial;*/
	font-family: sans-serif;
}
td
{
	border: 2px solid white;
	padding: 5px;
	font-size: small;
	/*width: 555px;*/
	font-family: sans-serif;
}
table
{
	border-collapse: collapse;
	border: 3px solid black;
	/*border: 4px outset black;*/
	margin: auto;
}
caption /*titre du tableau*/
{
	margin: auto;
	font-family: sans-serif;
	font-weight: bold;
	font-size: medium;
	color: blue;
	margin-bottom: 20px; /*pour éviter que le titre ne soit trop coller au tableau*/
}
.centrer 
{
	text-align: center; /*centrer le texte*/
}
.signature
{
	border: transparent;
	text-align: center; /*centrer le texte*/
        padding: 2px; /*évite aux cellules d'être trop collé au texte*/
        padding-right: 0px;
        /*background-color: blue;*/
        background-color: transparent;
        color: white;
        font-size: 16px;
	background-image: none;
        font-family: Arial;
	text-shadow:0px 0px 5px #000000,0px 0px 5px #000000,0px 0px 5px #000000;
}
#red {
	color: red;
	font-weight: bold;
}


/*----------------------------------------
----------------Test----------------------
----------------------------------------*/
/*pre.code
{
  padding:0.2em 1em;
  background-color:#D4D4D4;
  border-top:1px solid #313131;
  border-left:4px solid #313131;
  color:#000;
  font-family:monospace !important;
  overflow:auto; 
}*/
pre.code /*pour les commandes utilisateurs*/
{
	overflow:auto; 
/*	text-align:left;*/
	background-color: #F3F5F7;
	/*border: 1pt solid #AEBDCC;*/
	border: 2pt solid black;
	color: black;
	/* font-family: courier,monospace; */
	font-family: consolas, arial, monospace !important;
/*	padding: 5pt;*/
	  padding:0.2em 1em;
	/*white-space: normal;*/
	/*font-size: small; */
	/*font-size: 1.5em;*/
	font-weight: normal;
}
/*----------------------------------------
--Gérer l'agrandissement auto des images---
----------------------------------------*/
div.popup
{
	/*width: 500px;*/
	min-width: 500px;
	width: 50%;
	margin-left: 15px;
}
div.popup > img
{
	width: 100%;
}
div.popup > img:hover
{
	min-width: 500px;
	width: 150%;
	position: relative;
	-o-transition: height 2s, width 1s;
	-webkit-transition: height 1s, width 1s;
	-moz-transition: height 3s, width 2s;
}
/*----------------------------------------
------------------LES IMAGES--------------
----------------------------------------*/
.images_autosize
{
	display: block;
	max-width: 100%;
	height: auto;
}
.images_autosize_center
{
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.centrer_image
{
	/*margin-top: 0px;
	margin-left: 80px;*/
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	  /*width: 50%;*/
}
div.images_big
{
        /*width: 500px;*/
	min-width: 200px;
        width: 30%;
	margin-top: 0px;
	margin-left: 15px;
}
div.images_big > img
{
        width: 100%;
}
/*ajouter un espace si image puis balise h4*/
#corps .images_autosize + h4, #corps .images_autosize + h5
{
	margin-top: 10px;
}
/*----------------------------------------
--tabulation---
----------------------------------------*/
.tab
{
	margin-left:4em;
}
#corps ul li a * { 
	font-weight: bold;
	padding: 0px;
	background-color: inherit;
} /*padding haut bas si liste + lien*/