/* > NORMALIZE
-------------------------------------------------------------------------------------------------------------------------------- */
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* > HTML5 ---------------------------------------- */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, 
q:before, q:after {
	content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ul { list-style: none; }
ul li { list-style:none }
a { color:inherit; text-decoration:none; }
a img{ border:none; }
em { font-style:italic; }
strong { font-weight:700; }

/* à voir si ça fout pas trop le bordel !! */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

/* > VISIBILITE
-------------------------------------------------------------------------------------------------------------------------------- */
.hidden { visibility:hidden !important; }
.hide { display:none !important; }

/* > MARGES
-------------------------------------------------------------------------------------------------------------------------------- */
/* > Espacement vertical -------------------------- */
.hspace_10 { clear:both; height:10px; }
.hspace_20 { clear:both; height:20px; }
.hspace_30 { clear:both; height:30px; }
.hspace_50 { clear:both; height:50px; }

/* > Marge extérieur ------------------------------ */
.marg0    { margin:0; }
.margt0   { margin-top:0; }
.margt10  { margin-top:10px; }
.margt20  { margin-top:20px; }
.margt30  { margin-top:30px; }
.margt50  { margin-top:50px; }
.margl0   { margin-left:0; }
.margl10  { margin-left:10px; }
.margl20  { margin-left:20px; }
.margl30  { margin-left:30px; }
.margl50  { margin-left:50px; }
.margr0   { margin-right:0; }
.margr10  { margin-right:10px; }
.margr20  { margin-right:20px; }
.margr30  { margin-right:30px; }
.margr50  { margin-right:50px; }
.margb0   { margin-bottom:0; }
.margb10  { margin-bottom:10px; }
.margb20  { margin-bottom:20px; }
.margb30  { margin-bottom:30px; }
.margb50  { margin-bottom:50px; }
.margauto { margin-left:auto; margin-right:auto; }

/* > Marge intérieur ------------------------------ */
.pad0    { padding:0; }
.pad10   { padding:10px; }
.pad15   { padding:15px; }
.pad20   { padding:20px; }
.pad30   { padding:30px; }
.pad40   { padding:40px; }
.padt0   { padding-top:0; }
.padt10  { padding-top:10px; }
.padt15  { padding-top:15px; }
.padt20  { padding-top:20px; }
.padt30  { padding-top:30px; }
.padt50  { padding-top:50px; }
.padl0   { padding-left:0; }
.padl10  { padding-left:10px; }
.padl15  { padding-left:15px; }
.padl20  { padding-left:20px; }
.padl30  { padding-left:30px; }
.padl50  { padding-left:50px; }
.padr0   { padding-right:0; }
.padr10  { padding-right:10px; }
.padr15  { padding-right:15px; }
.padr20  { padding-right:20px; }
.padr30  { padding-right:30px; }
.padr50  { padding-right:50px; }
.padb0   { padding-bottom:0; }
.padb10  { padding-bottom:10px; }
.padb15  { padding-bottom:15px; }
.padb20  { padding-bottom:20px; }
.padb30  { padding-bottom:30px; }
.padb50  { padding-bottom:50px; }
.padlr0  { padding-left:0; padding-right:0 }
.padlr10 { padding-left:10px; padding-right:10px }
.padlr15 { padding-left:15px; padding-right:15px }
.padlr20 { padding-left:20px; padding-right:20px }
.padlr30 { padding-left:30px; padding-right:30px }
.padlr40 { padding-left:40px; padding-right:40px }
.padtb0  { padding-top:0; padding-bottom:0 }
.padtb10 { padding-top:10px; padding-bottom:10px }
.padtb15 { padding-top:15px; padding-bottom:15px }
.padtb20 { padding-top:20px; padding-bottom:20px }
.padtb30 { padding-top:30px; padding-bottom:30px }
.padtb40 { padding-top:40px; padding-bottom:40px }

/* > TEXTES
-------------------------------------------------------------------------------------------------------------------------------- */
/* > graisse -------------------------------------- */
.fw-300     { font-weight:300; }
.fw-400     { font-weight:400; }
.fw-500     { font-weight:500; }
.fw-700     { font-weight:700; }
.fw-900     { font-weight:900; }
.fw-norm    { font-weight:normal; }
.fw-bold    { font-weight:bold; }
.fs-italic  { font-style:italic; }
.fs-norm    { font-style:normal; }

/* > style ---------------------------------------- */
.undernone { text-decoration:none; }
.underline { text-decoration:underline; }
.uppercase { text-transform:uppercase; }
.lowercase { text-transform:none; }
.text-justify   { text-align:justify; }
.text-center    { text-align:center; }
.text-right     { text-align:right; }
.text-left      { text-align:left; }

/* > taille --------------------------------------- */
.fs-11 { font-size:11px; }
.fs-12 { font-size:12px; }
.fs-13 { font-size:13px; }
.fs-14 { font-size:14px; }
.fs-15 { font-size:15px; }
.fs-16 { font-size:16px; }
.fs-18 { font-size:18px; }
.fs-20 { font-size:20px; }
.fs-24 { font-size:24px; }
.fs-28 { font-size:28px; }
.fs-30 { font-size:30px; }
.fs-32 { font-size:32px; }
.fs-36 { font-size:36px; }
.fs-40 { font-size:40px; }
.fs-46 { font-size:46px; }
.fs-50 { font-size:50px; }
.fs-60 { font-size:60px; }
.fs-72 { font-size:72px; }

/* > FORMULAIRES
-------------------------------------------------------------------------------------------------------------------------------- */
form .form-row { display:block; }
form label {
	display:block;
	box-sizing:border-box;
	padding:10px;
}
form input[type="text"], 
form input[type="password"], 
form textarea, form select {
	box-sizing:border-box;
	width:100%;
	height: 40px;
	margin-top:10px;
	padding:10px 15px;
	border:solid 1px #dedede;
	font-family:Arial, sans-serif;
	font-size:14px;
	color:inherit;
}
form textarea { height: auto }
form label.inline {
	float:none;
	width:100%;
}

/* COMMITTER */
.committer {
    position: relative; background:#e1e1e1;
	display:inline-block; vertical-align: middle;
	height:25px; width:56px; margin-right:10px; padding: 2px;
	background:#fff; border:#cacaca 1px solid; border-radius:12px;
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-ms-transition:all .2s linear;
	-o-transition:all .2s linear;
	transition:all .2s linear;
}
.committer .commit-texte {
    position: absolute; z-index: 0;
    top: 0; left: 4px; right: 2px;
    line-height: 25px; padding: 0 4px;
    font-size: 9px; font-weight: 600;
    text-transform: uppercase;
}
.committer .commit-handler {
    /*border-radius:12px;*/
    position: relative; z-index: 1;
	display:inline-block; cursor:pointer;
	width:20px; height:20px; margin:-1px;
	border-radius:12px;
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-ms-transition:all .2s linear;
	-o-transition:all .2s linear;
	transition:all .2s linear;
}
.committer.commit-off { background:#e1e1e1; }
.committer.commit-off .commit-handler {	background-color:#fff; margin:-1px; }
.committer.commit-off .commit-texte { text-align: right; color: #999999 }
.committer.commit-on { background-color:#0f53a2; }
.committer.commit-on .commit-handler { background-color:#fff; margin:-1px -1px -1px 31px; }
.committer.commit-on .commit-texte { text-align: left; color: #fff }
.block-label .committer {
    display:block; margin: 16px 0 10px;
}
.committer:hover .commit-handler {
	-webkit-box-shadow:#0f53a2 0 0 5px;
	box-shadow:#0f53a2 0 0 5px;
}

/* > OUTPUT
-------------------------------------------------------------------------------------------------------------------------------- */
.output-error, 
.output-warning, 
.output-success  {
	position:relative;
	margin:10px 0;
	padding:10px 20px 10px 20px;
	color:#fff;
	cursor:pointer;
}
.output-error em, .output-warning em, .output-success em { display:none; }
.output-error .fa, 
.output-warning .fa, 
.output-success .fa  {
	position:absolute; 
	left:10px; top:50%;
	margin-top:-10px;
	width:20px; height:20px; 
	line-height:20px;
}
.output-error {
	background:#be0000;
	border:#be0000 1px solid;
}
.output-warning {
	background:#ff9c00;
	border:#ff9c00 1px solid;
}
.output-success {
	color:#fff;
	background:#5bc336;
	border:#5bc336 1px solid;
}
.errorfield { border-color:#be0000 !important; border-width: 2px !important; }
.validfield { border-color:#a0f235 !important; }

/* > BLOCS
-------------------------------------------------------------------------------------------------------------------------------- */
/* > Flux ----------------------------------------- */
.left { float:left; }
.right { float:right }
.clearleft { clear:left; }
.clearight { clear:right; }
.clear { display:block; clear: both; height: 0; }
.clearfix { display:block; }
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

/* > Lignes --------------------------------------- */
.row { 
	width:100%;
	/*-webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;*/
}
.box { 
	position:relative;
	width:100%;
	margin:0 auto;
	/*-webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;*/
}
.box:after {
    content:"";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
}

.flex-box {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
}
.flex-box.jc-center { justify-content: center; }
.flex-box.jc-right { justify-content: flex-end; }
.flex-box.jc-left { justify-content: flex-start; }
.flex-box.flex-top { align-items: flex-start; }
.flex-box.flex-center { align-items: center; }
.flex-box.flex-bottom { align-items: flex-end; }

/* > Colonnes ------------------------------------- */
.col-1 { width:8.33333333%; }
.col-2 { width:16.66666667%; }
.col-3 { width:25%; }
.col-4 { width:33.33333333%; }
.col-5 { width:41.66666667%; }
.col-6 { width:50%; }
.col-7 { width:58.33333333%; }
.col-8 { width:66.66666667%; }
.col-9 { width:75%; }
.col-10 { width:83.33333333%; }
.col-11 { width:91.66666667%; }
.col-12 { width:100%; }

.box [class*="col-"] {
	float:left;
	/*-webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;*/
}
div[class*="col-"] figure img, 
figure[class*="col-"] img {
	display: block;
	max-width:100%;
	margin: 0 auto;
}


.flex-box [class*="col-"] { padding: 20px; }

/* > QUERIES
-------------------------------------------------------------------------------------------------------------------------------- */
/* > Large ---------------------------------------- */
@media only screen and (max-width : 1200px) {
	
}

/* > Medium, Bureau ------------------------------- */
@media only screen and (max-width : 992px) {
	
}

/* > Small, Tablettes ----------------------------- */
@media only screen and (max-width : 768px) {
	.col-1 { width:16.66666667%; }
	.col-2 { width:33.33333333%; }
	.col-3 { width:50%; }
	.col-4 { width:66.66666667%; }
	.col-5 { width:83.33333333%; }
	.col-6 { width:100%; }
	.col-7 { width:100%; }
	.col-8 { width:100%; }
	.col-9 { width:100%; }
	.col-10 { width:100%; }
	.col-11 { width:100%; }
	.col-12 { width:100%; }
}

/* > Extra Small, Smartphones --------------------- */
@media only screen and (max-width : 480px) {
	.col-1 { width:33.33333333%; }
	.col-2 { width:66.66666667%; }
	.col-3 { width:100%; }
	.col-4 { width:100%; }
	.col-5 { width:100%; }
	.col-6 { width:100%; }
	.col-7 { width:100%; }
	.col-8 { width:100%; }
	.col-9 { width:100%; }
	.col-10 { width:100%; }
	.col-11 { width:100%; }
	.col-12 { width:100%; }
	
	form label {
		width:100%;
	}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	
	[class*="col-"] { width:100%; }
}