/***************************************
*
*    Reset CSS
*
***************************************/
html,
body,
div {
    margin: 0;
    padding: 0;
}

ul.unstyled {
    list-style: none;
    padding-left:0;
}

em { font-style: italic; }

strong { font-weight: bold; }

li p,
li ul,
li ol {
    margin-top: 0;
    margin-bottom: 0;
}

img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video {
    max-width: 100%;
}

a img { border: 0; }

body > script {display: none !important;}

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/***************************************
*
*    Lignes et modules
*
***************************************/
.mod { overflow: hidden; }

/* blocks à placer après les floats */
.clear,
.line {
    clear: both;
}
.clearLeft { clear: left; }
.clearRight { clear: right; }

/* blocks qui doivent contenir des floats */
.clearfix:after,
.line:after,
.mod:after {
    content: "";
    display: table;
    clear: both;
}

/***************************************
*
*    Layout basic
*
***************************************/
/* left elements */
.left    { float: left; }
img.left { margin-right: 1em; }

/* right elements */
.right    { float: right; }
img.right { margin-left: 1em; }

img.left,
img.right {
    margin-bottom: 5px;
}

.center     { margin-left: auto; margin-right: auto; }
.txtleft    { text-align: left; }
.txtright   { text-align: right; }
.txtcenter  { text-align: center; }
.txtjustify { text-align: justify; }
.txtmiddle  { vertical-align: middle; }

/***************************************
*
*    Mise en page avec tableaux
*
***************************************/
.tablerow {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.tablerow > *,
.col {
    display: table-cell;
    vertical-align: top;
}

.inbl {
    display: inline-block;
    vertical-align: top;
}

/***************************************
*
*    Gestion de la largeur des éléments
*
***************************************/
.w      { width: 5%; }
.w10    { width: 10%; }
.w15    { width: 15%; }
.w20    { width: 20%; }
.w25    { width: 25%; }
.w30    { width: 30%; }
.w33    { width: 33.3333%; }
.w40    { width: 40%; }
.w50    { width: 50%; }
.w60    { width: 60%; }
.w66    { width: 66.6666%; }
.w70    { width: 70%; }
.w75    { width: 75%; }
.w80    { width: 80%; }
.w90    { width: 90%; }
.w100   { width: 100%; }

.w50p   { width: 50px; }
.w100p  { width: 100px; }
.w150p  { width: 150px; }
.w200p  { width: 200px; }
.w300p  { width: 300px; }
.w400p  { width: 400px; }
.w500p  { width: 500px; }
.w600p  { width: 600px; }
.w700p  { width: 700px; }
.w800p  { width: 800px; }
.w960p  { width: 960px; }
.mw960p { max-width: 960px; }
.w1140p  { width: 1140px; }
.mw1140p { max-width: 1140px; }

/***************************************
*
*    Gestion des marges
*
***************************************/
/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
s,m,l,n,0 = small(10px),medium(20px),large(30px), zero or none(0)
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
*/
.m-reset { margin: 0 !important; }
.p-reset { padding: 0 !important; }

.ma0 { margin: 0; }
.ma1, .mas { margin: 10px; }
.ma2, .mam { margin: 20px; }
.ma3, .mal { margin: 30px; }
.pa1, .pas { padding: 10px; }
.pa2, .pam { padding: 20px; }
.pa3, .pal { padding: 30px; }

.mt0, .mtn { margin-top: 0; }
.mt1, .mts { margin-top: 10px; }
.mt2, .mtm { margin-top: 20px; }
.mt3, .mtl { margin-top: 30px; }
.mr0, .mrn { margin-right: 0; }
.mr1, .mrs { margin-right: 10px; }
.mr2, .mrm { margin-right: 20px; }
.mr3, .mrl { margin-right: 30px; }
.mb0, .mbn { margin-bottom: 0; }
.mb1, .mbs { margin-bottom: 10px; }
.mb2, .mbm { margin-bottom: 20px; }
.mb3, .mbl { margin-bottom: 30px; }
.ml0, .mln { margin-left: 0; }
.ml1, .mls { margin-left: 10px; }
.ml2, .mlm { margin-left: 20px; }
.ml3, .mll { margin-left: 30px; }
.m-auto {
    margin-left: auto;
    margin-right: auto;
}

.pa0 { padding: 0; }
.pt0, .ptn { padding-top: 0; }
.pt1, .pts { padding-top: 10px; }
.pt2, .ptm { padding-top: 20px; }
.pt3, .ptl { padding-top: 30px; }
.pr0, .prn { padding-right: 0; }
.pr1, .prs { padding-right: 10px; }
.pr2, .prm { padding-right: 20px; }
.pr3, .prl { padding-right: 30px; }
.pb0, .pbn { padding-bottom: 0; }
.pb1, .pbs { padding-bottom: 10px; }
.pb2, .pbm { padding-bottom: 20px; }
.pb3, .pbl { padding-bottom: 30px; }
.pl0, .pln { padding-left: 0; }
.pl1, .pls { padding-left: 10px; }
.pl2, .plm { padding-left: 20px; }
.pl3, .pll { padding-left: 30px; }

/***************************************
*
*    Gestion des marges des tableaux
*
***************************************/

.bs0 { border-spacing: 0; }
.bs1 { border-spacing: 10px; }
.bs2 { border-spacing: 20px; }
.bs3 { border-spacing: 30px; }


/***************************************
*
*    Viewport fixing
*
***************************************/
@-webkit-viewport {
    width: device-width;
    zoom: 1.0;
}
@-moz-viewport {
    width: device-width;
    zoom: 1.0;
}
@-ms-viewport {
    width: device-width;
    zoom: 1.0;
}
@-o-viewport {
    width: device-width;
    zoom: 1.0;
}
@viewport {
    width: device-width;
    zoom: 1.0;
}

/***************************************
*
*    Mise en page responsive avec tableaux
*
***************************************/
.contentBlock {
    display: table;
    /*table-layout: fixed;*/
    width: 100%;
}

.contentBlock > div,
.line {
    display: table-row;
    width: 100%;
}

.line > div,
.block {
    display: table-cell;
    padding: 15px;
    vertical-align: top;
}

.line > div[class~='alignMiddle'],
.block[class~='alignMiddle'] {
    vertical-align: middle;
}

/* De 600 a 1100 px */ /*De 576 à 991px*/
@media screen and (max-width: 991px) and (min-width: 576px) {
    .w10.redimention-tab,
    .w15.redimention-tab,
    .w20.redimention-tab,
    .w25.redimention-tab,
    .w30.redimention-tab,
    .w33.redimention-tab,
    .w40.redimention-tab,
    .w50.redimention-tab,
    .w60.redimention-tab,
    .w70.redimention-tab,
    .w75.redimention-tab,
    .w80.redimention-tab,
    .w90.redimention-tab,
    .w100.redimention-tab {
        display: inline-block !important;
        width: 100% !important;
        /*padding: 0 15px;*/
    }
    
    .no-display-tab {
        display: none;
    }
}

/* Moins de 700 px */
@media screen and (max-width: 700px) {
    .line > div.w10,
    .block.w10,
    .line > div.w15,
    .block.w15,
    .line > div.w20,
    .block.w20,
    .line > div.w25,
    .block.w25,
    .line > div.w30,
    .block.w30,
    .line > div.w33,
    .block.w33,
    .line > div.w40,
    .block.w40,
    .line > div.w50,
    .block.w50,
    .line > div.w60,
    .block.w60,
    .line > div.w66,
    .block.w66,
    .line > div.w70,
    .block.w70,
    .line > div.w75,
    .block.w75,
    .line > div.w80,
    .block.w80,
    .line > div.w90,
    .block.w90,
    .line > div.w100,
    .block.w100 {
        display: inline-block;
        width: 100%;
        margin: 0 0 15px 0;
        padding: 0 15px;
    }
}

/* Moins de 600 px */ /* Moins de 576px*/
@media screen and (max-width: 575px) {
    .w10.redimention-smart,
    .w10.redimention-tab,
    .w15.redimention-smart,
    .w15.redimention-tab,
    .w20.redimention-smart,
    .w20.redimention-tab,
    .w25.redimention-smart,
    .w25.redimention-tab,
    .w30.redimention-smart,
    .w30.redimention-tab,
    .w33.redimention-smart,
    .w33.redimention-tab,
    .w40.redimention-smart,
    .w40.redimention-tab,
    .w50.redimention-smart,
    .w50.redimention-tab,
    .w60.redimention-smart,
    .w60.redimention-tab,
    .w70.redimention-smart,
    .w70.redimention-tab,
    .w75.redimention-smart,
    .w75.redimention-tab,
    .w80.redimention-smart,
    .w80.redimention-tab,
    .w90.redimention-smart,
    .w90.redimention-tab,
    .w100.redimention-smart,
    .w100.redimention-tab {
        display: inline-block !important;
        width: 100% !important;
        /*padding: 0 15px;*/
    }
    
    .no-display-tab,
    .no-display-smart {
        display: none;
    }
}

/***************************************
*
*    Mise en forme des tableaux
*
***************************************/
.table {
    display:table;
    table-layout: fixed;
    width:100%;
}

.tableRow             { display:table-row; }
.tableRow:first-child { border-top:1px solid black; }

.tableHead {
    display:table-cell;
    padding:5px;
}

.tableHead:not(.noStyle) {
    font-weight:bold;
    border-bottom:1px solid black;
}

.tableCell {
    display:table-cell;
    height: 100%;
    border-bottom:1px solid black;
    padding:5px;
    vertical-align: middle;
}

/* Tous les enfants, sauf le premier */
.tableCell:nth-child(n+2) {
    width:100%;
    height: 100%;
    border-left:1px solid #C3C7C7;
}

.tableVcenter {
    vertical-align: middle;
}

/*.first { border-top:1px solid black; } Remplacé par .tableRow:first-child */

/*.inside { Remplacé par .tableCell:nth-child(n+2)
    display:inline-block;
    width:100%;
    border-left:1px solid #C3C7C7;
}*/
/*.space {
    height:10px;
}*/

/***************************************
*
*    Mise en forme des formulaires
*
***************************************/
form p.info { font-size:small; }

.description {
    display:block;
    float:left;
    width:210px;
}

.champ {
    clear:both;
    margin:5px 0 5px 0;
}

.champ input { margin-right:20px; }

.champ p {
    display:inline;
    color:#990000;
}

fieldset {
    padding-top:0;
    padding-bottom:0;
    margin:10px;
}

/*input[type="submit"] { margin-left:30px; }*/
input[disabled]      { color:black; }
.buttonForm          { text-decoration:none; }

/***************************************
*
*    Messages d'information (flash)
*
***************************************/
.userInfo {
    display: block;
    width:80%;
    padding: 5px;
    border: 1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.userInfo:nth-child(1) {
    text-align: right;
}

.userInfo:nth-last-child(1) {
    display: block;
    float: right;
    width: 5px;
    height: 100%;
}

.userInfo:nth-last-child(1):before {
    content: "⨯";
    /*content: "\10799;";*/
}

.userInfo.error {
    color: red;
    border-color: red;
}

.userInfo.warning {
    color: orange;
    border-color: orange;
}

.userInfo.information {
    color: green;
    border-color: green;
}

/***************************************
*
*    Design des boutons
*
***************************************/
.button {
    display:inline-block;
    border:1px solid gray;
    padding:10px 15px;
    margin:5px;
    /*background-color:#CCCCCC;*/
    color:black;
    font-weight:bold;
}

.button:hover {
    color:black;
    /*background-color:#DFDFDF;*/
    cursor:pointer;
}

.button.br {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}