/************************************************** DECLARATION DE VARIABLE ***************************************/
 :root {
	--safran: rgb(243, 214, 23);
	--brun: rgb(126, 51, 0);
	--corail:rgb(231, 62, 1);
	--topaze:rgb(250, 234, 115);
	--brun_transparent: rgb(126, 51, 0, 0.7);
	--corail_transparent:rgba(231, 62, 1, 0.4);
	--bleu_koriolan: rgb(0, 118, 154);
	--bleu_koriolan_transparent: rgba(0, 118, 154, 0.4);
	
	--gris_anthracite: rgb(64, 70, 73);
//	--gris_anthracite: rgb(45, 45, 45);
	--gris_tres_fonce: rgb(60, 60, 60);
	--gris_tres_fonce_transparent: rgba(60, 60, 60, 0.4);
	--gris_fonce: rgb(80, 80, 80);
	--gris_moyen: rgb(110, 110, 110);
	--gris_pale: rgb(130, 130, 130);
	--gris_tres_pale: rgb(150, 150, 150);
	--gris_tres_tres_pale: rgb(200, 200, 200);
	--blanc_casse: rgb(230, 230, 230);
	--blanc:rgb(255, 255, 255);
	--rouge:rgb(255, 0, 0);
	--jaune_post_it: rgb(244, 208, 63);
	--jaune_post_it_transparent: rgba(244, 208, 63, 0.4);
	--orange: rgb(255,165,0);
	--rouge_orange: rgb(255,69,0);
	--green_yellow: rgb(173,255,47);
 }


/************************************************************ PAGE *************************************************/
html
{
//	background-color: var(--gris_anthracite);
background-image: url("images/fibre_carbone.png");
	color:var(--gris_tres_pale);
	font-family: 'Montserrat', sans-serif;  /* Classique, sympa */	
	font-size:0.95em;
}


/***************************************************** ZONE DE TRAVAIL *********************************************/
body {
	width:100%;
//	background-image: url("images/koriolan_binaire_vertical.png");
//	background-repeat:no-repeat;
//	background-position: left 0px top 100px;
//	background-size: 10px auto;
	max-width:880px;
	margin:auto;
	overflow: scroll; 		/* Force l'ascenseur latéral même quand il n'y en a pas besoin => evite les décalage d'écran entre pages longues et courtes... */
}

/********************************************************* ENTETE **************************************************/

#entete 	{
	width:100%;
	margin:10px 0px 10px 0px;
	display: grid;
	grid-template-columns: 1fr 2fr;
}
#entete 	#logo_site 	img	{
	width:100%;
}
#entete 	h1 	{
	font-size:3.5em;
	color:var(--gris_tres_tres_pale);
	margin:0px;
	font-weight:normal;
	text-align:right;
}



/************************************************************ MENU *************************************************/
#menu 	{
	
 }


/*********************************************************** PIED DE PAGE *********************************************/
#pied_de_page 	{
	width:100%;
	text-align:center;
	font-size:0.8em;
	margin:150px 0px 100px 0px;
}	
#pied_de_page 	a 	{
	display:block;
}

/********************************************************* TITRES ********************************************/

/* h1 est réservé au titre de la page dans l'entête... */

h2		{
}

h3		{
}


/****************************************************** TABLEAUX STANDARD *****************************************/
table /* Le tableau en lui-même */
{
	border-collapse: collapse;
	width:100%;
}

th /* Les cellules d'entête */
{
}

td /* Les cellules normales */	{
	padding:2px 5px;
}

legend	{
}


/***************************************************** FORMULAIRES ***************************************************/
input, textarea, select		{
	padding:2px;	
	margin:0px;
}

fieldset	{
}

button		{
}

button:hover {	
}


/********************************************************* LIENS HYPERTEXTES ***************************************/
a {
	color:var(--gris_tres_tres_pale);
	background-color: var(--bleu_koriolan_transparent);
	text-decoration:none;		/* Permet de ne pas avoir le soulignement des liens...*/
	padding:5px 10px;
	border-radius: 3px;
	transition-property: color, background-color;
	transition-timing-function:ease-in-out;
	transition-duration: 100ms;
}


a:hover { 	/* Quand on pointe sur un lien du menu */
	background-color: var(--bleu_koriolan);
	transition-property: color, background-color, font-weight;
	transition-timing-function:ease-in-out;
	transition-duration: 300ms;
}

a img {
	border:none;
}

ul		{
list-style-image : url(images/puce_koriolan.png);
}
ul	li	{
	text-align: justify;
}


/********************************************************* DIVERS ***************************************/
p			{
	text-align:justify;
}

.gras		{
	font-weight:bold;
	color:rgb(230, 230, 230);		/* Permet de renforcer le gras... */
}
.italique	{
	font-style:italic;
	color:rgb(150, 150, 150);		/* Permet de rnforcer l'effet italique... */
}
.souligne	{
	text-decoration:underline;
}


/************************************* MESSAGE D'ERREUR ***************************************/
.message_erreur   {
	display:block;
	width:60%;
	line-height:30px;
	text-align:center;
	margin:auto;
	margin-bottom:20px;
	padding:3px 20px;
	background-color:red;			/* Gris très clair */
	box-shadow: 5px 5px 8px rgb(110, 110, 110);		/* Gris moyen */
	font-size:0.8em;
	color:rgb(230, 230, 230);	
	font-weight:bold;
}
.message_erreur_mysql   {
	display:block;
	border-radius: 10px;
	width:60%;
	text-align:left;
	margin:auto;
	margin-top:20px;
	padding:3px 20px;
	background-color:red;			/* Gris très clair */
	box-shadow: 5px 5px 8px rgb(110, 110, 110);		/* Gris moyen */
	font-size:0.9em;
	color:rgb(230, 230, 230);	
	font-weight:bold;
}
.message_erreur_mysql   p:nth-child(1)	{
	text-align:center;
	font-size:1.2em;
	color:rgb(230, 230, 230);	
	font-variant: small-caps;
	font-weight:900;
}


/***********************************************************************************************************************
Fichier index.php
***********************************************************************************************************************/

#Index	.base_line		{
//	background-color:var(--gris_tres_fonce_transparent);
	padding:100px 10px;
	text-align:center;
	font-size:1.2em;
}
#Index	.message_mensuel	p	{ 
	text-align:center;
	font-size: 1.3em;
}
#Index	.message_mensuel	p	a	{ 
	background-color: transparent;
}
#Index	.message_mensuel	p	a	img { 
	width: 25%;

}


/***********************************************************************************************************************
Fichier mentions_legales.php
***********************************************************************************************************************/

#Mentions_legales	#accueil	a	{
	padding:0px 5px 1px 5px;
}
#Mentions_legales	#accueil	.adresse	{
	margin-left:50px;
}