* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}
@font-face {
	font-family: ss;
	/*src: url("../fonts/Roboto-Thin.ttf");*/
	src: url("../fonts/Roboto-Thin.woff2") format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	/*font-display: swap;
	font-display: optional;*/
	font-display: auto;
}
#page-main {
	margin: 0px auto;
	padding: 0;
	display: flex;
	justify-content: space-around;
	justify-content: center;
}

main {
	margin-bottom: 10px;
	padding: 15px;
	/*color: #B3B3B3;*/
	/*background-color:rgb(60,60,60);*/
	background-color: black;
	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*/
	box-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
	color: white;
}
/*simulation touches claviers : Controle du lecteur avec le clavier : https://sebsauvage.net/wiki/lib/exe/css.php?t=dokuwiki&tseed=cb64682d4fc81d5b79f586d31f99b6b0*/
kbd {
	font-family: monospace;
	background-color:#F2F2F2;
	border-style:outset;
	border-width:3px;
	border-radius:.3em;
	padding:0 2px !important;
	color: black;
}

main h1, main h2, main h3, main h4, main h5 {
	color: #F26615;
	/*font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;*/
	font-family: sans-serif;
	font-weight: 500;
}
main h1 {
  font-size: 3rem;
  font-weight: normal;
  margin-bottom: 1rem;
  margin-top: 1rem;
  padding-left: 0; /* Réinitialiser la valeur de padding */
}

main h2 {
  font-size: 2rem;
  font-weight: normal;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-left: 1rem; /* Ajouter une valeur de padding */
}

main h3 {
  font-size: 1.5rem;
  font-weight: normal;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  padding-left: 2rem; /* Ajouter une valeur de padding */
}

main h4 {
  font-size: 1.2rem;
  font-weight: normal;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-left: 3rem; /* Ajouter une valeur de padding */
}

main h5 {
  font-size: 1rem;
  font-weight: normal;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-left: 4rem; /* Ajouter une valeur de padding */
}
/*-----------------------------------
-------------For Mobile--------------
-----------------------------------*/
@media only screen and (max-width: 1023px) {
	body {font-family: Arial, "Arial Black", "Times New Roman";}
	#page-main { display: inherit; }
	#sommaire { display: none; }
	#menu { display: none; }
	#en_tete { display: none; }
	#pied_de_page { display: none; }
	.image_titre, .image_titre_white, .image_titre_right, .image_titre_right_white { display: none; }
	main { font-family: sans-serif, ss; }
	.menu_mobiles_bottom {
		padding: 15px;
		font-weight: bold;	/*permet de mettre en gras*/
		font-size: medium;
		text-align: center;
		background-image: url("../images/layout/bottom.webp");
		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: medium;
		/*text-decoration: yes;*/
		color: #F26615;
		padding: 0vw;
		display: inline;
		margin-left: 0px;
		margin-right: 0px;
		text-align: center;
	}
	code.code, pre.code /*pour les commandes utilisateurs*/ { font-size: 16px; }
	.menu_mobiles_top {
		height: auto;
		background-image: url("../images/layout/banniere_01.webp");
		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 */
		font-family: sans-serif;

	}
	.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: 5vw;
		display: block;	/*permet d'avoir des blocs cliquables*/
		}

	.images_autosize80, .images_autosize60, .images_autosize40, .images_autosize20, .images_autosize80_white, .images_autosize60_white, .images_autosize40_white, .images_autosize20_white {
		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;
	}
	.images_autosize_center80_white, .images_autosize_center60_white, .images_autosize_center40_white, .images_autosize_center20_white {
		display: block;
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		background-color: white;
	}
	main p
	{
		/*font-size: auto;*/
		margin-left: 0px;
		text-decoration: none;
	}
	main ul { margin-top: 0px; }
	strong, main b { font-weight: inherit; font-family: sans-serif;}
	a, main li /*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;*/
		
	}
	main li a { padding-bottom: 15px; padding-top: 15px; } /*padding haut bas si liste + lien*/
	main h1 { font-size: 2rem; 	}
	main h2 { font-size: 1.5rem; 	}
	main h3 { font-size: 1.2rem; 	}
	main h4 { font-size: 0.8rem; 	}
	main h1, main h2, main h3, main h4, main h5 {	font-family: sans-serif; }

} 
/*----------------------
-------End Mobile-------
------------------------*/

body
{
	/*width: 764px;*/
	width: auto;
	margin: auto;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	background-image: url("../images/layout/puce.jpg");
	background-repeat: repeat-x; /*l'image est répété uniquement sur la première ligne, horizontalement*/
	background-color: #f6f6f6;
	
}
::selection{
	color: black;
	background: #5cf;
}

#en_tete
{
	height: 194px;
	background-image: url("../images/layout/banniere_01.webp");
	background-position: left;
	background-size:     cover; 
	background-repeat: no-repeat;
	margin-bottom: 10px;
	border-radius: 13px;
	box-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
}

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

}

.element_menu
{
	font-family: sans-serif;
	line-height:4px; /*espacement entre les lignes*/
	background-image: url("../images/layout/menu.webp");
	border-radius: 0px 100px 0px 100px;
	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: normal;
	font-size: 24px;
	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;
	margin: 30px 0px 0px 0px;
}

[class*="menu"] ul
{
	font-weight: normal;
	padding: 0px;
	text-shadow:0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 5px #000000;
	text-align: center;
}	

.element_menu a
{
	/*font-size: 1.2em;*/
	font-size: 28px;
	/*color: #B3B3B3;*/
	text-decoration: none;
	color:rgb(250,250,250);
	text-shadow:0px 0px 1px #000000,0px 0px 1px #000000,1px 1px 1px #000000;
}

[class*="menu"] li
{
	padding: 7px;
}	
.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:visited, main a:visited, #pied_de_page a:visited /*quand le visiteur à déja vu la page concernée*/
{
	text-decoration: none;
}

/*-----------------------------------
-------------For Desktop-------------
-----------------------------------*/
@media only screen and (min-width: 1024px) {
	main
	{
		font-size: 1.1em;
		flex: 0 1 1720px;
		min-width: 0;
		/*font-family: Helvetica, Arial, sans-serif;*/
		font-family: sans-serif;
	}

	.menu_mobiles {	display: none;	}
	.menu_mobiles_bottom {	display: none;	}
	.element_menu ul
	{
		list-style-image: url("../images/layout/puce.png");
		list-style-position: inside;
	}

	code.code, pre.code /*pour les commandes utilisateurs*/ { font-size: medium; }
	.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_center80_white
	{
		display: block;
		max-width: 80%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		background-color: white;
	}
	.images_autosize_center60
	{
		display: block;
		max-width: 60%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.images_autosize_center60_white
	{
		display: block;
		max-width: 60%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		background-color: white;
	}
	.images_autosize_center40
	{
		display: block;
		max-width: 40%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.images_autosize_center40_white
	{
		display: block;
		max-width: 40%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		background-color: white;
	}
	.images_autosize_center20
	{
		display: block;
		max-width: 20%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.images_autosize_center20_white
	{
		display: block;
		max-width: 20%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		background-color: white;
	}
	main p, main ul, main li, main a /*id corps p et tout les liens*/
	{
		margin-left: 5px;
		text-decoration: none;
		text-align: justify;
		word-wrap: break-word;
		max-width: 1420px;
		margin-bottom: 0px;	
		
	}
	main li { margin-bottom: 0.3vw; margin-top: 0.2vw;}
	.image_titre
	{
		float: left;
		max-width: 30%;
		margin: 1% 1% 1% 1%;
	}
	.image_titre_white
	{
		float: left;
		max-width: 30%;
		margin: 1% 1% 1% 1%;
		background-color: white;
	}
	.image_titre_right
	{
		float: right;
		max-width: 30%;
		margin: 1% 1% 1% 1%;
	}
	.image_titre_right_white
	{
		float: right;
		max-width: 30%;
		margin: 1% 1% 1% 1%;
		background-color: white;
	}
}
/*-----------------------------------
-------------End Desktop-------------
-----------------------------------*/

/*-----------------------------------
---------For Small Desktop ----------
-----------------------------------*/
@media screen and ( min-width: 1024px) and (max-width: 2180px) {
	main{
		flex: 0 1 1280px;
		min-width: 0;
	}
	strong, main b
	{	
		font-size: 110%;
		font-family: sans-serif;
	}
}

/*-----------------------------------
----------End Small Desktop----------
-----------------------------------*/

@media only screen and (min-width: 1919px) {
	#en_tete {
		background-image: url("../images/layout/banniere_02.webp"); /*Meilleure qualité de la bannière pour les écrans > HD*/
	}
	strong, main b
	{	
		font-size: 110%;
		font-weight: normal;
		font-family: sans-serif;
	}
	main
	{
		font-size: 130%;
	}
}

.k_control 
{
	color: ghostwhite;
	text-shadow:0px 0px 1px #000000,0px 0px 1px #000000,1px 1px 1px #000000;
}
strong, main b
{
	color: #ff5722;
	padding-left: 2px;
	padding-right: 2px;
	font-weight: initial;
}
main a
{
	color: #ff5722;
	text-decoration: none;
	margin-left: 0px;
}

main a strong, main a b
{
	font-size: 100%;
	font-family: sans-serif;

}

#pied_de_page a:hover, main a:hover /*signifie dessus, permet ici la surbrillance des liens lors du passage du curseur dessus*/
{
	background-color: darkslateblue;
	text-decoration: none;
	color: #F77F7F;
	text-decoration: underline;
	
}
/*permet les puces en orange*/
main ul {
	list-style: none;
}
main 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;*/
}
main 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: medium;
	text-align: center;
	background-image: url("../images/layout/bottom.webp");
	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: medium;
	text-decoration: none;
	color: #F26615;
}
.rss:hover {
	opacity: .5;
}

/*----------------------------------------
----------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 white;
	/*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;
	color: #FF7A7A;
	color: #FF642E;*/
	color: #FC674F;
	font-weight: bold;
}
.green {
	color: greenyellow;
	font-weight: bold;
}
.orange {
	color: orange;
	font-weight: bold;
}


/*---Code---*/
/*code.code, pre.code, pre.code_sh, pre.code_ps */
code.code_ps, pre.code_ps /*pour les commandes utilisateurs*/
{
	background-color: #F3F5F7;
	color: black;
	font-family: consolas, monospace!important;
	border: 2pt solid black;
	display: block;
	font-size: 1.2em;
}
.code,
code,pre.code_sh,code.code_apache,code.code_python,code.code_sh,code.code_php,code.code_batch {
	overflow:auto;
	white-space: pre;
	font-size: .9em;
	margin: .5em 0;
	background-color: #272822;
	font-family: monospace, 'courier new';
	padding: 1em;
	overflow-x: auto;
	color: #f8f8f2;
	border-radius: 4px;
	display: block;
	border: 1pt solid white;
}
code.cisco {
	background-color: white;
	color: black;
	border: 1pt solid black;
}

/*----------------------------------------
------------------LES IMAGES--------------
----------------------------------------*/
.images_autosize
{
	display: block;
	max-width: 100%;
	height: auto;
}
.images_autosize_white
{
	display: block;
	max-width: 100%;
	height: auto;
	background-color: white;
}
figure, .images_autosize_center
{
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
figure img, .images_autosize_center_white
{
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	color: black;
}
figure img
{
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	background-color: transparent;
	color: black;
}
.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 h*/
main :is(.images_autosize40, .images_autosize60, .images_autosize80, .images_autosize20, .images_autosize_center80, .images_autosize_center60, .images_autosize_center40, .images_autosize_center20) + h4,
main :is(.images_autosize40, .images_autosize60, .images_autosize80, .images_autosize20, .images_autosize_center80, .images_autosize_center60, .images_autosize_center40, .images_autosize_center20) + h5,
main h5 + :is(.images_autosize40, .images_autosize60, .images_autosize80, .images_autosize20, .images_autosize_center80, .images_autosize_center60, .images_autosize_center40, .images_autosize_center20),
main h4 + :is(.images_autosize40, .images_autosize60, .images_autosize80, .images_autosize20, .images_autosize_center80, .images_autosize_center60, .images_autosize_center40, .images_autosize_center20)
{
	margin-top: 1vw;
}
/*----------------------------------------
--tabulation---
----------------------------------------*/
.tab
{
	margin-left:4em;
}
main ul li a * { 
	font-weight: normal;
	padding: 0px;
	background-color: inherit;
} /*padding haut bas si liste + lien*/

/*
DEBUT SOMMAIRE
*/
#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;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 11px;
}
/*---fin-puces-oranges------*/
#sommaire ul ul
{
	margin-top: 18px;
	font-size: 14px;
	padding-left: 25px;
	padding-top: 1px;
	/*line-height: 20px;*/
}
@media screen and (max-width: 1979px) {
#sommaire ul ul
	{
		margin-top: 0.1vw;
		margin-bottom: 0.2vw;
	}
}
#sommaire ul a
{
	margin-right: 18px;
	font-weight: 400;
	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;
	color: #F77F7F;
	background-color: transparent;
}
@media screen and ( min-width: 1024px) and (max-width: 1280px) {
	main nav ul { font-weight: 100; margin-bottom: 10px; margin-top: 10px; }
	main nav ul > li { font-weight: 100; margin: 0px; }
  	main nav ul li li { font-weight: 100; margin-bottom: 5px; }
	main nav ul li ul  { font-weight: 10; margin-top: 10px; }
}
@media screen and ( min-width: 1281px) and (max-width: 1979px) {
	main nav ul { font-weight: 100; margin-bottom: 10px; margin-top: 10px; }
	main nav ul > li { font-weight: 100;  margin-top: 12px; font-size:1.2vw; }
	main nav ul li li { font-weight: 100; margin-bottom: 10px; font-size:1.2vw; }
	main nav ul li ul  { font-weight: 10; margin-top: 0px;  }
	}

@media only screen and (min-width: 1980px) {
	main nav ul { font-weight: 100; margin-bottom: 25px;  }
	main nav ul > li { font-weight: 100;  margin-top: 0px; font-size:26px; }
	main nav ul li li { font-weight: 100; margin-bottom: 18px; font-size:23px; }
	main nav ul li ul  { font-weight: 10; margin-top: 10px;  }
	}
/*
FIN SOMMAIRE
*/