@charset "utf-8";
/* CSS Document */
/* MES STYLES UTILES */

/* Couleurs de fond */
.fond-orange { background-color: #ef8700; }
.fond-bleu { background-color: #359ac7; }
.fond-bleu-clair { background-color: #b8dae9; }
.fond-bleu-clair2 { background-color: #9ed4eb; }
.fond-bleu-vert { background-color: #08afa5; }
.fond-jaune { background-color: #e5cf32; }
.fond-jaune2 { background-color: #e9d651; }
.fond-rouge { background-color: #e6001e; }		
.fond-rose { background-color: #c6127b; }
.fond-rose2 { background-color: #f4bac2; }
.fond-noir { background-color: #000000; }
.fond-blanc { background-color: #ffffff; }
.fond-blanc-casse { background-color: #f8f8f8; }
.fond-gris { background-color: #333333; }
.fond-gris-moyen { background-color: #888888; }
.fond-gris-clair { background-color: #e7e7e7; }
.fond-gris-tres-clair { background-color: #f2f2f2; }
.fond-vert { background-color: #96c33d; }
.fond-vert2 { background-color: #a6cc5a; }
.fond-marron { background-color: #7f5233; }
.fond-facebook { background-color: #3b5998; }
.fond-twitter { background-color: #55acee; }

/* Couleurs pour les textes */
.blanc { color: #ffffff; }
.gris { color: #333333; }
.gris-moyen { color: #888888; }
.gris-clair { color: #e7e7e7; }
.gris-tres-clair { color: #f2f2f2; }
.rouge { color: #e6001e; }
.orange { color: #ef8700; }
.bleu { color: #359ac7; }
.bleu-vert { color: #08afa5; }
.vert { color: #96c33d	; }
.rose { color: #c6127b; }
.jaune { color: #e5cf32; }
.marron { color: #7f5233; }
.noir { color: #000000; }
.facebook { color: #3b5998; }
.twitter { color: #55acee; }

/* divers styles utiles pour le texte */
.rikiki { font-size: 0.6em; }
.mini { font-size: 0.7em; }
.petit { font-size: 0.8em; }
.moins-grand { font-size: 0.9em; }
.plus-grand { font-size: 1.1em; }
.large { font-size: 1.25em; }
.xlarge { font-size: 1.5em; }
.xxlarge { font-size: 2em; }
.xxxlarge { font-size: 3em; }
.enorme { font-size: 5em; }
.majuscule { text-transform: uppercase; }
.minuscule { text-transform: lowercase; }
.gras { font-weight: bold; }
.italique { font-style: italic; }
.souligne { text-decoration: underline; }
.interlettrage { letter-spacing: 0.4em; }
.insecable { white-space: nowrap; }

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

.ombre { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); } 
.lumiere { box-shadow: 1px 1px 6px rgba(255, 255, 255, 0.75); }
.transparent { opacity: 0.5; }

.taille100 { width: 100%; 	/* permet de forcer la dimension d'un element a toute la place disponible */
	height: auto;  		/* de facon homothetique */
	} 
.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; }
.invisible { visibility: hidden; }

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

/* pour centrer un block */
.central { 
    margin-left: auto;
    margin-right: auto;
    }
.relatif { position: relative; }

/* 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 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 situes apres et les empecher de remonter) */
.clear, .separation { clear: both; visibility: hidden; }

/* --- TRICK VIDEO IFRAME 100% --- */
.videowrapper {
	position: relative;
	padding-top: 25px;
	padding-bottom: 54.25%; /* 16:9 */
	height: 0;
	}
.videowrapper iframe, .videowrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

/* ---- LES ESPACEMENTS VERTICAUX (padding) ---- */
.space25 {
    padding-top: 25px;
    padding-bottom: 25px;
    }
.space50 {
    padding-top: 50px;
    padding-bottom: 50px;
    }
.space75 {
    padding-top: 75px;
    padding-bottom: 75px;
    }
.space100 {
    padding-top: 100px;
    padding-bottom: 100px;
    }