/* ORGANISATION DE LA FEUILLE DE STYLES */

/* 1) Styles associés aux balises html (a, body, hr) */
/* 2) Styles associés aux id. Les id servent pour des éléments uniques dans une page.*/
/* 3) Styles associés aux class. Les class servent pour des éléments multiples dans une page.*/

/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* 1) Styles associés aux balises html */

/* Liens */
a
{
	color: #CB5A2B;
	text-decoration: underline;
}

a:hover
{
	color: red;
}

/*
a:visited
{
	color: red;
}
*/


body /*UTILISÉ*/
{
	/* Paramètres valables par défaut pour toute la page */
	
	/* D'abord centrer la page (résolution 1600 x 900) */
	width: 1560px;
	margin:0px auto;/* 0px ht et bas, auto gauche et droite */


	/* Ensuite définir les caractères par dédaut */
	font-family: Comic Sans MS, sans-serif;
	font-size: 18px;
	font-style: normal;/*italic*/
	font-weight: normal;/*100à900,normal=400,bold=700,bolder,lighter*/
	text-decoration: none;/*line-through, underline*/
	color: #CB5A2B;
	text-align: left;
	
	/* Curseur uniforme */
	cursor: default;
}

/* Règle horizontale pour annuler la flottaison */
hr /*UTILISÉ*/
{
	clear: both;
	border: 0px solid red;
	margin: 0;
}

/*Annulation marge intempestive Chrome 12/10/21 */
img
{
	margin-bottom:-4px;
}

r
{
	color: red;
}


/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* 2) Styles associés aux id. Les id servent pour des éléments uniques dans une page.*/







/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* 3) Styles associés aux class. Les class servent pour des éléments multiples dans une page.*/

/* Corps de page. Ne sert que pendant la mise au point, dans le cas où je dois repérer l'enveloppe de tout ce qui suit le menu et précède le pied */
.corps /*utilisé*/
{	
	border: px solid red;
	padding: 0px 0px 0px 0px; /*haut droite bas gauche*/
	margin: 0px 0px 0px 0px; /*haut droite bas gauche*/
}

/* Bandeau */
.en_tete /*utilisé*/
{			
	width: 1560px;
	height: 162px;
}

.en_tete_image /*utilisé*/
{
	display: inline-block;				
	width: 160px;
	height: 160px;
	
	border: 1px solid black;

}

.en_tete_texte /*UTILISÉ*/
{
	display: inline-block;
	vertical-align : top;
	width: 1389px;
	height: 160px;		

	border: 1px solid black;		
	margin-left:6px;

	text-align: center;
	color: #fff;
	background-color : #CB5A2B;					
}


.expliquer /*UTILISÉ*/
{
	cursor: help; /*help, pointer*/
	text-decoration: underline;/*none, line-through, underline*/
}

.explication /*UTILISÉ*/
{
	display: none;
}

.expliquer:active .explication /*UTILISÉ*/
{
	display: block;
	position: fixed;
	z-index: 10;
	top: 250px;
	left: 150px;
	width: 1000px;

	border: 1px solid red;
	background: #ff0;

	/*font-family: Segoe print;*/
	/*font-size: 1.6em;*/


	text-align: justify;
	color: #000;
	/*background: #f00;*/
	/*background: linear-gradient( #ff0, #f00);*/
	border-radius: 8px;
	text-shadow: 0px 1px 0px white;
	box-shadow: -7px 7px 7px 7px rgba(255, 0, 0, 1); /* 1) horizontal, positif ou non 2) vertical, positif ou non 3) vertical*/
}

.imag_cent /*Image centrée : combinable avec imag_comm et display:inline-block*/ /*UTILISÉ*/
{
	border: 0px solid red;
	text-align: center;
}

.imag_comm /*Image commentée : contenant ajusté pour une image et sa légende. div width doit être adaptée*/
{
	margin:0px;
	border: 0px dotted black;
	padding:0px;
}

.image_flottante_droite 
{
	border: 1px solid blue;
	float : right;
	margin-left : 20px;
	margin-bottom : 20px;
}

.imag_flot_gauc  /*. div width doit être adaptée*//* utilisé */
{
	border: 0px solid red;
	float : left;
	margin-right : 10px;
	margin-bottom : 10px;
}

.imag_flot_gauc_mr0
{
	border: 0px solid red;
	float : left;
	margin-right : 0px;
	margin-bottom : 10px;
}
.image_flottante_gauche_grandissante
{
	/* Petite image */
	float : left;	
	margin-right : 20px;
	margin-bottom : 20px;
	width: 80px;
	border: 1px solid white;	
}

.image_flottante_gauche_grandissante:hover
{
	/* Petite image survolée */	
	cursor: zoom-in;
	border: 1px solid;
}

.image_flottante_gauche_grandissante:active
{
	/* Grande image */	
	width: 160px;
}



.image_grandissante
{
	/* Petite image */
	margin: 0px;
	padding : 0px;
	width: 150px;
}

.image_grandissante:hover
{
	/* Grande image */	
	margin: 0px;
	padding : 0px;
	width: 450px;
}

.menu	/*utilisé*/
{
	/* Menu sert pour la "boîte" et rubrique... pour le texte */
	border: 1px solid black;
	border-top-width : 0px;
	margin-top:6px;
	height: 25px;
	text-decoration: none;
	background-color : #CB5A2B;
}


.menu_rubrique /*utilisé*/
{
	/* Menu sert pour la "boîte" et rubrique... pour le texte */
	float: left; /* Très important, dans chacune des quatre possibilités pour que les textes se suivent et restent collés */
	margin: 0;
	padding: 0;
	color: #fff;
	text-decoration: none;
}

.menu_rubrique:hover /*utilisé*/
{
	color: #f5f404;
	background-color: #f00;
	text-decoration: underline;
}

.menu_rubrique_active /*utilisé*/
{
	float: left;
	margin: 0;
	padding: 0;
	color: #f5f404;
	background-color: #f00;
	text-decoration: none;/*line-through, underline*/
}

.menu_rubrique_active:hover /*utilisé*/
{
	color: #f5f404;
	text-decoration: underline;/*line-through, underline*/
}

.pied	
{
	border: 1px solid black;
/*	position: relative;		11/10/21 J'ai neutralisé cette instruction qui semble inutile */
	padding: 0;
	margin: 0;
	margin-bottom:6px; /* 11/10/21 ajoutée pour améliorer l'esthétique */
	height: 28px;
	top: 0;
	left: 0;
	color: #Fff;
	background-color : #CB5A2B;
}

.pied_text
{
	text-align: center;
	font-weight: bold;/*100à900,normal=400,bold=700,bolder,lighter*/
}


.presentation_paragraphe  /*utilisé*/
{
	border: 0px solid red;
	margin-left : 10px; 	/*11/10/21 j'ai remplacé padding par margin */
	margin-right : 10px;	/*11/10/21 j'ai remplacé padding par margin */
	margin-top : 10px;
	margin-bottom : 10px;	
}

.presentation_paragraphe_centre
{
	/* Pour rassembler un texte dans un rectangle centré */
	border: 0px solid green;
	width: 1260px;
	margin-left: auto;
	margin-right: auto;
}

.presentation_paragraphe_encadre 
{
	border: 5px solid red;
	padding-left : 10px;
	padding-right : 10px;	
	margin-top : 10px;
	margin-bottom : 10px;	
}

.texte_centre
{
	text-align: center;
}

.text_lege /*Destiné à la légende d'image. Aucune enluminure car le navigateur crée un espace, inexpliqué, entre l'image et le texte*/	/*utilisé*/
{
	text-align: center;
	font-size: 14px;
	font-weight : bold; /*normal, bold*/	
	line-height : 14px ;	
	margin:0px;
	border: 0px dotted black;
	padding:0px;
}

.text_comm /*UTILISÉ*/
{
	margin: 10px;
	border-top: solid 1px grey;
	border-bottom: solid 1px grey;
	text-align: center;
	font-family: segoe print;
	font-style: italic;
	font-size: 14px;
	color: grey;
}
.texte_commentaire
{
	margin: 5px;
	border-top: solid 1px grey;
	border-bottom: solid 1px grey;
	text-align: center;
	font-family: "segoe print",arial;
	font-size: 14px;
	color: grey;
}

.text_seul /* Paragraphe sans enluminure pour éviter p qui reçoit des valeurs par défaut du navigateur*//*UTILISÉ*/
{
	margin: 0px;
	border: 0px dotted black;
	padding: 0px;
}
.tm_bouton /*UTILISÉ*/
{
	/* Bouton utilisé pour la table des matières et le retour en début de page */
	width: 60px;
	height: 30px;
	padding: 0px;
	border: 1px solid rgba(150,150,150,1.0);	
	margin: 0px;
	font-size: 15px;
	font-family: Segoe print;
	text-align: center;
	color: #0F056B;
	background: linear-gradient( #fff, #ddd);
	border-radius: 4px;
	text-shadow: 1px 1px 0px white;
	box-shadow: 7px 7px 7px 0px rgba(130,130,130,1.0);
}

.tm_cadre /*UTILISÉ*/
{
	display: none;
}

.tm_cadre2
{
	display: none;
}
.tm_bouton:hover .tm_cadre /*UTILISÉ*/
{
	
		position: fixed;
		top: 31px;
		right: 81px;
		cursor: pointer;
		display: block;
		margin: 0px;
		
		font-size: 15px;
		width: 580px;
		height: 680px;
		border: 1px solid rgba(150,150,150,1);
		text-align: right;
		text-decoration: none;
		padding-right: 5px;
		color: #0F056B;
		background: #fdfdfd;
		border-radius: 4px;
		text-shadow: 1px 1px 0px white;
		box-shadow: 7px 7px 7px 0px rgba(130,130,130,1);
}

.tm_rubrique:hover .tm_cadre2
{
	
		position: fixed;
		top: 31px;

		cursor: pointer;
		display: block;
		margin: 0px;
		
		font-size: 15px;
		width: 400px;
		height: 675px;
		border: 1px solid rgba(150,150,150,1);
		text-align: right;
		text-decoration: none;
		padding-right: 5px;
		color: #0F056B;
		background: #fdfdfd;
		border-radius: 4px;
		text-shadow: 1px 1px 0px white;
		box-shadow: 7px 7px 7px 0px rgba(130,130,130,1);
}
.tm_rubrique /*UTILISÉ*/
{
	color: #0F056B;
	text-decoration : none;
}

.tm_rubrique:hover /*UTILISÉ*/
{
	border: 1px solid black;
	color: #F00;
	background-color : #FF0;
}