/****************************************/
/*                                      */
/*            Created by 3WD            */
/*                 2018                 */
/*                                      */
/****************************************/
/*                                      */
/*   1. Général                         */
/*   2. Header                          */
/*   3. Article                         */
/*   4. Matrice                         */
/*   5. Footer                          */
/*   6. Formulaires                     */
/*   7. Boutons                         */
/*   8. Tipsy                           */
/*   9. Popup                           */
/*   10. Wysiwyg                        */
/*                                      */
/****************************************/


@import url(menus.css);
@import url(base_responsive.css);

@font-face {
    font-family: 'muliregular';
    src: url('fonts/muli-webfont.woff2') format('woff2'),
         url('fonts/muli-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'mulibold';
    src: url('fonts/muli-bold-webfont.eot');
    src: url('fonts/muli-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/muli-bold-webfont.svg#mulibold') format('svg'),
         url('fonts/muli-bold-webfont.woff2') format('woff2'),
         url('fonts/muli-bold-webfont.woff') format('woff'),
         url('fonts/muli-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'mulibolditalic';
    src: url('fonts/muli-bolditalic-webfont.eot');
    src: url('fonts/muli-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/muli-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/muli-bolditalic-webfont.woff') format('woff'),
         url('fonts/muli-bolditalic-webfont.ttf') format('truetype'),
         url('fonts/muli-bolditalic-webfont.svg#mulibold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'muliregularitalic';
    src: url('fonts/muli-italic-webfont.woff2') format('woff2'),
         url('fonts/muli-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'mulilight';
    src: url('fonts/muli-light-webfont.woff2') format('woff2'),
         url('fonts/muli-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'mulilightitalic';
    src: url('fonts/muli-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/muli-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'muliblack';
    src: url('fonts/muli-black-webfont.woff2') format('woff2'),
         url('fonts/muli-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'muliblack_italic';
    src: url('fonts/muli-blackitalic-webfont.woff2') format('woff2'),
         url('fonts/muli-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'muliextrabold';
    src: url('fonts/muli-extrabold-webfont.eot');
    src: url('fonts/muli-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/muli-extrabold-webfont.woff2') format('woff2'),
         url('fonts/muli-extrabold-webfont.woff') format('woff'),
         url('fonts/muli-extrabold-webfont.ttf') format('truetype'),
         url('fonts/muli-extrabold-webfont.svg#muliextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'muliextrabold_italic';
    src: url('fonts/muli-extrabolditalic-webfont.eot');
    src: url('fonts/muli-extrabolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/muli-extrabolditalic-webfont.woff2') format('woff2'),
         url('fonts/muli-extrabolditalic-webfont.woff') format('woff'),
         url('fonts/muli-extrabolditalic-webfont.ttf') format('truetype'),
         url('fonts/muli-extrabolditalic-webfont.svg#muliextrabold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  
	@font-face {
		 font-family: 'mulibold';
		 src: url('fonts/muli-extrabold-webfont.svg#muliextrabold') format('svg');
		 font-weight: bold;
	}
}
*/

/*==============================================================*/
/*                         1. Général                           */
/*==============================================================*/

*{
/*	padding:0;
	margin:0; */
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, 
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, 
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure {
	padding:0;
	margin:0;
}

body {
	background: #fff;
	padding: 0;
	margin: 0;
	color: #000;
	font: 11px 'mulilight', Arial, Helvetica, sans-serif;
	font-family: 'mulilight';
}

a {
	color: #000;
	text-decoration: underline
}
a:hover {
	color: #000;
}

a {
	outline: none;
}
:focus {
	outline: none;
	-moz-outline-style: none;
}

object, embed {
	outline: 0;
}

.cl {
	clear: both
}
.cl1 {
	clear: both;
	height: 1px;
}

#wrapper {
	position: relative;
	margin: 0px auto;
}
.fl_g {
	float: left;
}
.fl_d {
	float: right;
}
.div_row {
	display: table-row;
}
.div_table {
	display: table;
}
.block {
	display: block;
}
.inline_block {
	display: inline-block;
}



/*========================================================================*/
/*                              2. Header                                 */
/*========================================================================*/

#header {
	position: relative;
}
#logo {
	position: relative;
	z-index: 3;
}
#logo a {
	display: block;
}



/*========================================================================*/
/*                             3. Article                                 */
/*========================================================================*/


#home_intro {
	margin: 50px;
	font-size: 20px;
}
#home_intro h1 {
	margin: 15px 0 5px;
	color: #25b8cd;
	font-size: 36px;
	font-weight: bold;
}
#bloc_article {
	font-size: 16px;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.selector:not(*:root), #bloc_article p strong {
	font-family: 'muliextrabold';
	font-weight: bold;
	font-size: 1.1em;
}
#bloc_article ul,
#bloc_article ol {
	list-style-position: outside;
	margin-left: 20px;
}
#bloc_article .case_img {
	padding: 20px 0 5px;
}
#bloc_article .data_ssbloc {
	padding-left: 25px;
}
#bloc_article .data_ssbloc.interligne2 {
	line-height: 2em;
}
#bloc_article .case_data {
	background: #e7e8e9;
	padding: 20px;
	padding-top: 15px;
	margin-top: 20px;
}



/*========================================================================*/
/*                             4. Matrice                                 */
/*========================================================================*/

/*
.matrice_colonne {
	position: relative;
	display: inline-block;
	width: 162px;
	margin-left: 25px;
}
.matrice_colonne.colonne_intitule {
	margin-left: 0;
}
.matrice_cellule {
	position: relative;
	width: 160px;
	height: 80px;
	margin-bottom: 15px;
	border: solid 1px #0f0;
}
.matrice_cellule img {
	border: solid 1px #999b9e;
}
.matrice_stage,
.matrice_fleches,
.matrice_challenge {
	width: 160px;
	height: 80px;
	margin-bottom: 15px;
	border: solid 1px #0f0;
}
*/

#matrice_container {
	background: #d1d3d4;
	padding: 30px 5px;
}
#matrice_container a {
	text-decoration: none;
}
.matrice_table {
	display: table;
}
.matrice_ligne {
	display: table-row;
}
.matrice_cellule {
	display: table-cell;
	width: 190px;
	height: 80px;
	overflow: hidden;
	vertical-align: middle;
}
.matrice_cellule:not(.fleche) img {
	display: block;
}
.matrice_cellule:not(.premiere_cellule) {
	padding-left: 30px;
}
.matrice_cellule:not(.fleche) {
	padding-bottom: 15px;
}
.matrice_cellule.fleche {
	text-align: right;
	vertical-align: bottom;
	padding-bottom: 10px;
}
.matrice_cellule .div_challenge_hover,
.matrice_cellule .div_challenge_titre {
	height: 80px;
	overflow: hidden;
	display: table;
	width: 158px;
}
.div_challenge_hover .cellule_defaut,
.div_challenge_hover .cellule_active {
	height: 80px;
	width: 158px;
	display: table-cell;
	vertical-align: middle;
}
.matrice_cellule .div_challenge_hover .cellule_defaut {
	display: table-cell;
	display: none;
	background: #e9ebec;
}
.matrice_cellule .div_challenge_hover .cellule_active {
	display: none;
	display: table-cell;
	opacity: .6;
}
.matrice_cellule .div_challenge_hover:hover .cellule_defaut {
	display: none;
}
.matrice_cellule .div_challenge_hover:hover .cellule_active {
	display: table-cell;
	opacity: 1;
}
.matrice_cellule .div_challenge_hover .cellule_active .cellule_overflow {
	height: 78px;
	overflow: hidden;
}
.matrice_cellule .div_challenge_titre {
	position: relative;
	height: 80px;
	width: 158px;
}
.matrice_cellule .div_challenge_titre .cellule_titre_fond {
	position: absolute;
	height: 80px;
	width: 158px;
	background-size: cover;
	opacity: .7;
	z-index: 1;
}
.matrice_cellule .div_challenge_titre .cellule_titre_fond a {
	display: block;
}
.matrice_cellule .cellule_title {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 14px;
	text-transform: uppercase;
	z-index: 2;
	/* background: url(../imgs/matrice_bg_title.png) repeat-x; */
	background: #000;
}
.matrice_cellule .cellule_title a {
	display: block;
	padding: 18px 0;
	color: #fff;
}


hr.hr_bleu {
	background: #25b8cd;
	border: solid 1px #25b8cd;
	height: 6px;
	margin: 40px 0 20px;
}




/*========================================================================*/
/*                               5. Footer                                */
/*========================================================================*/

#footer {
	position: relative;
}
#footer_menu {
	background: #939598;
	color: #fff;
}




/*========================================================================*/
/*                            6. Formulaires                              */
/*========================================================================*/

[disabled] {
}
.formulaire8 {
	margin: 1px;
	height: 16px;
	font: 11px Arial, Helvetica, sans-serif;
	color: #555;
	border: solid #b0907d 1px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	-khtml-border-radius: 3px;
}
.formulaire81, .normal, .focus {
	margin: 1px;
	height: 14px;
	font: 11px Arial, Helvetica, sans-serif;
	color: #555;
	border: solid #ccc1ba 1px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	-khtml-border-radius: 3px;
}
.formulaire_recherche {
	width: 220px;
	height: 26px;
	margin: 0;
	border: solid 1px #999b9e;
	background: #ddd;
}
.bt_search_top {
	margin: 0;
}



/*========================================================================*/
/*                         7. Notifications                               */
/*========================================================================*/


.notification {
	position: relative;
	margin: 0 10px 15px 10px;
	padding: 0;
	border: 1px solid;
	background-position: 10px 11px !important;
	background-repeat: no-repeat !important;
	font-size: 1.1rem;
	width: 97%;
	}
.attention {
	background: #fffbcc url('../imgs/ico_notif_warning.png') 10px 11px no-repeat;
	border-color: #e6db55;
	color: #666452;
	}
.information {
	background: #dbe3ff url('../imgs/ico_notif_info.png');
	border-color: #a2b4ee;
	color: #585b66;
	}
.success {
	background: #d5ffce url('../imgs/ico_notif_ok.png');
	border-color: #9adf8f;
	color: #319731;
	}

.error {
	background: #ffcece url('../imgs/ico_notif_error.png');
	border-color: #df8f8f;
	color: #665252;
	}
.notification div {
	display:block;
	font-style:normal;
	padding: 10px 10px 10px 36px;
	line-height: 1.5em;
	}
.notification .close {
	color:#990000;
	font-size:9px;
	position:absolute;
	right:5px;
	top:5px;
	}



/*========================================================================*/
/*                               8. Tipsy                                 */
/*========================================================================*/

.tipsy { 
	padding: 10px; 
	font: bold 11px Arial, Helvetica, sans-serif; 
	opacity: 0.80; 
	filter: alpha(opacity=80); 
	background-repeat: no-repeat;  
	background-image: url(../imgs/tipsy.gif);
}
.tipsy-inner { 
	padding: 5px 8px 4px 8px; 
	background-color: #000; 
	color: white; 
	max-width: 200px; 
	text-align: center; 
}
.tipsy-inner { 
	border: solid 1px #000;
	-moz-border-radius:4px; 
	-webkit-border-radius:4px; 
	border-radius: 4px;
}
.tipsy-north { 
	background-position: top center; 
}
.tipsy-south { 
	background-position: bottom center;
	padding-bottom: 5px;
}
.tipsy-east { 
	background-position: right center; 
}
.tipsy-west { 
	background-position: left center;
}



/*========================================================================*/
/*                               9. Popup                                 */
/*========================================================================*/

.pop {
	font: 10px Arial, Helvetica, sans-serif;
	color: #555;
	text-transform: uppercase;
}
.pop_body {
	background: #fff;
	margin-top: 20px;
}
.pop_close {
	float: right;
	margin-right: 3px;
	width: 13px;
	cursor: pointer;
	text-align: center;
	border: transparent 1px solid;
}
.pop_close:hover {
	border: #fff 1px solid;
}
.pop_div {
	/*behavior: url(css/border-radius.htc); */
	border: solid #ccc1ba 1px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px;
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.3); 
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.3); 
	background: #fff;
	margin: 0 auto;
}

#fd_gris {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #666666 50% 50% repeat; 
	opacity: .60;
	filter: Alpha(Opacity=60);
	display: none;
	z-index:10;
}
.pop_content {
	border: solid #ddd 1px;
	background-color:#fafafa;
	padding: 5px;
}



/*========================================================================*/
/*                              10. Wysiwyg                               */
/*========================================================================*/

#bloc_article h1 {
	margin: 5px 0 10px 0;
	color: #000;
	font-size: 40px;
	font-weight: normal;
}
#bloc_article h2 {
	margin: 15px 0 5px;
	color: #25b8cd;
	font-weight: normal;
}
#bloc_article h2.txt_bleu_fonce {
	margin: 0px 0 5px;
	color: #1e72b9;
}
#bloc_article h3 {
	color: #25b8cd;
	font-weight: normal;
}
#bloc_article h3.h3_contribute {
	color: #25b8cd;
	font-weight: normal;
	font-size: 22px;
	margin-top: 20px;
}
#bloc_article .case_ss_titre {
	margin: 5px 0;
	color: #000;
	font-size: 25px;
}
.texte {
	font-size: 10px;
	font-family: 'mulilight', Arial, Helvetica, sans-serif;
}
.txt_bleu,
.txt_bleu a,
a.txt_bleu,
.text_bleu,
.text_bleu a,
a.text_bleu {
	color: #25b8cd;
}
.txt_bleu_fonce {
	color: #1e72b9;
}
.txt_noir {
	color: #000;
}
.inter_titre {
	font-size: 20px;
	font-weight: bold;
}
.mot_recherche {
	color: #1e72b9;
	font-weight: bold;
	font-style: italic;
}