/* Ecoute la Terre */
/* =============== */
/* FEUILLE de STYLE pour les Affichages de MESSAGES */ 

@charset "utf-8";

/* ############
     MESSAGES
	 ############
	 
	 <div class="message type_X couleur [icone] [zone_X] largeur_X [marge_X] [padding_X] [alignement]">
	   <p>Texte du message...</p>
	 </div>
	 
	 avec...
	 # type_1 | type_2 | type_3 où...
	   - type_1 = Fond coloré sans bordure mais avec une épaisse bordure gauche
	 	 - type_2 = Fond coloré avec bordure moyenne décalée, et zone pour IMAGE
		 - type_3 = Fond coloré avec bordure fine en 2 angles arrondis
	 # couleur = rouge | orange | jaune | vert | bleu | violet (si non précisé : gris)
	 # icone (uniquement pour type_2 : obligatoire) = confirme | erreur | triangle (si couleur = orange, rouge ou violet) | email | info | ...
	 # zone_X (uniquement pour type_2 : optionnel) avec X = 60 | 80 | 100 (par défaut) | 120 | 140 (largeur de la zone gauche, contenant l'icone)
	 # largeur_X (obligatoire) avec X = 300 | 350 | 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800 (largeur totale de l'encadré)
	 # marge_X (optionnel) avec X = 0 | 10 | 20 (par défaut) | 30 | 40 | 50 (marges en haut et eb bas)
	 # marge_bas_X (optionnel) avec X = 0 | 10 | 20 (par défaut) | 30 | 40 | 50 (marges en bas, la marge du haut étant gérée avant par marge_X)
	 # padding_X (optionnel) avec X = 15 (par défaut) | 20 | 25 | 30 (pour jouer sur la hauteur de la zone de texte : paddings haut et bas autour du texte)
	 # alignement (optionnel) = gauche | centre | droite (si non précisé : justifié)
	 
	 Les dimensions de l'image (en type_2) s'adaptent à la place disponible, d'où l'intérêt de pouvoir faire varier la hauteur (avec padding_X) et la largeur de la zone d'image (avec zone_X)...
	 
*/

.message { margin: 20px auto 20px auto; }

.message.marge_0  { margin:  0px auto  0px auto; }
.message.marge_10 { margin: 10px auto 10px auto; }
.message.marge_20 { margin: 20px auto 20px auto; }
.message.marge_30 { margin: 30px auto 30px auto; }
.message.marge_40 { margin: 40px auto 40px auto; }
.message.marge_50 { margin: 50px auto 50px auto; }

.message.marge_bas_0  { margin-bottom:  0px; }
.message.marge_bas_10 { margin-bottom: 10px; }
.message.marge_bas_20 { margin-bottom: 20px; }
.message.marge_bas_30 { margin-bottom: 30px; }
.message.marge_bas_40 { margin-bottom: 40px; }
.message.marge_bas_50 { margin-bottom: 50px; }

.message.confirme_connexion,
.message.informe_redirection { margin-top: 40px; }  /* Messages de confirmation furtifs de connexion/déconnexion */
.message.confirme_connexion.ariane,
.message.informe_redirection.ariane { margin-top: 30px; margin-bottom: 13px; }
.message.confirme_connexion.menu_vertical,
.message.informe_redirection.menu_vertical { margin-left: 356px; }  /* S'alignera à gauche là-dessus, ce qui correspond à un centrage sur la colonne... */
.message.informe_redirection.second_message { margin-top: 9px; }  /* S'il y a déjà eu un message au-dessus... */

.message.type_1 {  /* Fond coloré sans bordure mais avec une épaisse bordure gauche... */
	border-radius: 4px;	
	border-left: 10px solid #949494;
	padding: 0;
}

.message.type_2 {  /* Fond coloré avec bordure moyenne décalée, et zone pour IMAGE... */
	border: 3px solid #949494;
	border-radius: 5px;	
	padding: 8px;
	background-color: #FFF;
}

.message.type_3 {  /* Fond coloré avec bordure fine en 2 angles arrondis... */
	border: 1px solid #949494;
	border-radius: 15px 0;	
}

.message.largeur_300 { width: 300px; }
.message.largeur_350 { width: 350px; }
.message.largeur_400 { width: 400px; }
.message.largeur_450 { width: 450px; }
.message.largeur_500 { width: 500px; }
.message.largeur_550 { width: 550px; }
.message.largeur_600 { width: 600px; }
.message.largeur_650 { width: 650px; }
.message.largeur_700 { width: 700px; }
.message.largeur_750 { width: 750px; }
.message.largeur_800 { width: 800px; }

.message p {
	color: #575757;
	padding: 15px 20px;
	text-align: justify;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: normal;
}

.message.gauche p { text-align: left; }
.message.centre p { text-align: center; }
.message.droite p { text-align: right; }

.message p span.r80 { font-size: 80%; }
.message p span.r90 { font-size: 90%; }

.message.padding_15 p { padding-top: 15px; padding-bottom: 15px; }
.message.padding_20 p { padding-top: 20px; padding-bottom: 20px; }
.message.padding_25 p { padding-top: 25px; padding-bottom: 25px; }
.message.padding_30 p { padding-top: 30px; padding-bottom: 30px; }

.message.type_1 p, .message.type_2 p, .message.type_3 { background-color: #E9E9E9;	}

.message p strong { font-weight: 700; }

.message p a { color: #c01800; text-decoration: underline; }  /* Rouge */
.message p a:hover { text-decoration: none; }

.message.type_1 p {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.message.type_2 p {
	position: relative;
	margin-left: 101px;
}

.message.type_3 p { text-align: center; }

.message.type_2 p::before {
	content: '';
	width: 100px;
	height: 100%;
	padding: 6px;
	background-color: #E9E9E9;
	margin-right: 2px;
	position: absolute;
	top: 0;
	left: -101px;
	background-position: center;
	background-repeat: no-repeat;
	background-origin: content-box;  /* Limite pour l'étendue des images d'arrière-plan */
	background-size: contain;  /* La taille de l'image sera adaptée */
}

.message.type_2.zone_60 p::before  { width: 60px;  left: -61px;  padding: 3px; }
.message.type_2.zone_80 p::before  { width: 80px;  left: -81px;  padding: 4px; }
.message.type_2.zone_100 p::before { width: 100px; left: -101px; padding: 6px; }
.message.type_2.zone_120 p::before { width: 120px; left: -121px; padding: 8px; }
.message.type_2.zone_140 p::before { width: 140px; left: -141px; padding: 10px; }

.message.type_2.zone_60 p  { margin-left: 60px; }
.message.type_2.zone_80 p  { margin-left: 80px; }
.message.type_2.zone_100 p { margin-left: 100px; }
.message.type_2.zone_120 p { margin-left: 120px; }
.message.type_2.zone_140 p { margin-left: 140px; }

.message.type_2.confirme p::before        { background-image: url("../images/coche_100.png"); }
.message.type_2.erreur p::before          { background-image: url("../images/erreur_100.png"); }
.message.type_2.orange.triangle p::before { background-image: url("../images/triangle_100_orange.png"); }
.message.type_2.rouge.triangle p::before  { background-image: url("../images/triangle_100_rouge.png"); }
.message.type_2.violet.triangle p::before { background-image: url("../images/triangle_100_violet.png"); }
.message.type_2.email p::before           { background-image: url("../images/mail_120.png"); }

.message.type_1.rouge p,   .message.type_2.rouge p,   .message.type_2.rouge p::before,   .message.type_3.rouge   { background-color: #F8CAD0; }
.message.type_1.orange p,  .message.type_2.orange p,  .message.type_2.orange p::before,  .message.type_3.orange  { background-color: #FBEACC; }
.message.type_1.jaune p,   .message.type_2.jaune p,   .message.type_2.jaune p::before,   .message.type_3.jaune   { background-color: #FBF6D8; }
.message.type_1.vert p,    .message.type_2.vert p,    .message.type_2.vert p::before,    .message.type_3.vert    { background-color: #E9F2D8; }
.message.type_1.bleu p,    .message.type_2.bleu p,    .message.type_2.bleu p::before,    .message.type_3.bleu    { background-color: #CCEBF8; }
.message.type_1.violet p,  .message.type_2.violet p,  .message.type_2.violet p::before,  .message.type_3.violet  { background-color: #EFD8F1; }
.message.type_1.origine p, .message.type_2.origine p, .message.type_2.origine p::before, .message.type_3.origine { background-color: #E1EEC8; }

.message.rouge p,   .message.rouge p::before,   .message.rouge a   { color: #CD001B; }
.message.orange p,  .message.orange p::before,  .message.orange a  { color: #E75121; }
.message.jaune p,   .message.jaune p::before,   .message.jaune a   { color: #CD8B24; }
.message.vert p,    .message.vert p::before,    .message.vert a    { color: #579A1E; }
.message.bleu p,    .message.bleu p::before,    .message.bleu a    { color: #115FCA; }
.message.violet p,  .message.violet p::before,  .message.violet a  { color: #72007E; }
.message.origine p, .message.origine p::before, .message.origine a { color: #334914; }

.message.rouge   { border-color: #DE0029; }
.message.orange  { border-color: #F09228; }
.message.jaune   { border-color: #EBD24C; }
.message.vert    { border-color: #93C147; }
.message.bleu    { border-color: #1D9BDD; }
.message.violet  { border-color: #9900A2; }
.message.origine { border-color: #92C73C; }

/* ################################################################################## */