@charset "utf-8";
/* CSS Document */

/* Couleurs de fond */
.fond-bleu-clair    { background-color: #009ffd; }
.fond-bleu          { background-color: #1b1b3a; }
.fond-jaune         { background-color: #ffae03; }
.fond-rouge         { background-color: #c41e3d; }		
.fond-violet        { background-color: #46237a; }
.fond-marron        { background-color: #424036; }
.fond-noir          { background-color: #000000; }
.fond-blanc         { background-color: #ffffff; }
.fond-gris          { background-color: #585858; }
.fond-gris-clair    { background-color: #f4f4f6; }
.fond-orange        { background-color: #fc7753; }
.fond-vert          { background-color: #2da16e; }
.fond-facebook      { background-color: #3b5998; }
.fond-twitter       { background-color: #55acee; }

/* Couleurs pour les textes */
.blanc      { color: #ffffff; }
.gris       { color: #585858; }
.rouge      { color: #c41e3d; }
.orange     { color: #fc7753; }
.bleu       { color: #1b1b3a; }
.bleu-clair { color: #009ffd; }
.vert       { color: #2da16e; }
.rose       { color: #e7273a; }
.violet     { color: #46237a; }
.marron     { color: #424036; }
.jaune      { color: #ffae03; }
.noir       { color: #000000; }
.facebook   { color: #3b5998; }
.twitter    { color: #55acee; }

/* divers styles utiles pour le texte */
.xxxpetit, .rikiki  { font-size: 0.6em; }
.xxpetit, .mini     { font-size: 0.7em; }
.xpetit             { font-size: 0.8em; }
.petit              { font-size: 0.9em; }
/* .medium          { font-size: 1em; } */
.plus-grand         { font-size: 1.1em; }
.large              { font-size: 1.25em; }
.xlarge             { font-size: 1.5em; }
.xxlarge            { font-size: 1.75em; }
.xxxlarge           { font-size: 2em; }
.enorme             { font-size: 3em; }

.capitale, .majuscule { text-transform: uppercase; }
.minuscule { text-transform: lowercase; }
.gras { font-weight: bold !important; }
.italique { font-style: italic !important; }
.souligne { text-decoration: underline; }
.interlettrage { letter-spacing: 0.15em; }
.insecable { white-space: nowrap; }

.cadre, .cadre-noir { border: 1px solid #000000; }
.cadre-arrondi, .arrondi { border-radius: 5px; }
.rond { border-radius: 50%; }

.ombre { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } 
.transparent { opacity: 0.5; }

.taille100 { width: 100%; 	/* permet de forcer la dimension d'un element à toute la place disponible */
	height: auto;  		/* de façon homothétique */
	} 
.taillemax  { 
	max-width: 100%; 	/* permet de forcer la dimension d'un element JUSQU'A sa taille originale maximum */
	height: auto;
	}
	
.milieu { vertical-align: middle; } /* pour aligner les images verticalement sur une ligne de texte */
.enhaut { vertical-align: top; } 
.enbas { vertical-align: bottom; } 

.masquer { display: none!important; }

.texte-gauche { text-align: left; }
.texte-centre { text-align: center; }
.texte-droite { text-align: right; }
.texte-justifie { text-align: justify; }

/* pour centrer un block */
.centre { 
    margin-left: auto;
    margin-right: auto;
    }
/* Les flottants */
.droite { float: right; }
.gauche { float: left; }
img.droite { margin-left: 20px; }
img.gauche { margin-right: 20px; }

/* LES 2 METHODES DE CLEARFIX : pour bien gerer les flottants */
/* 1) .clearfix moderne a appliquer au bloc div qui contient les flottants pour qu'il les englobe correctement (et ne croit pas etre vide) */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
    }
/* 2) .separation (ou .clear) : a appliquer a un <br> ou  <hr> sous les blocs flottants (pour stopper des flottants situés apres de remonter) */
.clear, .separation { clear: both; visibility: hidden; }
.relative{
    position: relative;
    min-height: 1px;
    height: auto;  
}