@charset "utf-8";
/* RESET */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
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% inherit;vertical-align:baseline}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}
/* Fin RESET */

/* GLOBAL */
html{
    font-family:verdana,arial;
    font-weight: normal;
    font-size:10px;
    color:#000;
}
body{     
    background:#FFF;
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;  
    background-size:cover;
    font-size: 1.4rem;
    line-height: 1.65rem;
}
.main{
    width:160rem;
    max-width: 96%;
    position:relative;
    min-height:calc(100vh - 6rem);
    margin:1rem auto 0;
    font-size:1.2rem;
    line-height: 1.4rem;
    background-color:#FFF;
}
footer{
    background-color: white;
    width:160rem;
    max-width: 96%;
    margin: 0 auto;
    border-top:5px solid #AAA;
    color: #AAA;
    font-size: 1.2rem;
    height: 4.5rem;
}
footer a{
    color:#AAA;
}
footer a:hover{
    color:#000;
}
@media only screen and (min-width: 481px) {
    body{
        font-size:1.40rem;
        line-height: 1.7rem;
    }
    .main, footer{        
        max-width: 90%;
    }
}
@media only screen and (min-width: 901px) {
    body{
        font-size:1.45rem;
        line-height: 1.8rem;
    }
    .main, footer{        
        max-width: 85%;
    }
}
@media only screen and (min-width: 1281px) {
    body{
        font-size:1.5rem;
        line-height: 1.9rem;
    }
    .main, footer{        
        max-width: 80%;
    }
}
@media only screen and (min-width: 1601px) {
    body{
        font-size:1.6rem;
        line-height: 2.1rem;
    }
    .main, footer{        
        max-width: 78%;
    }
}
.pageBreakAlways{
    page-break-after:always;
}
.orange, .vert, .orange a, .vert a{
    color: #FFF;
}
.orange a:hover, .vert a:hover {
    color:#666;
}
.orange{
    background-color: #FF9900;    
}
a .orange:hover, a .vert:hover {
    background-color: #666;    
}
.vert{
    background-color: #77BB44;
}
.paddingAll10{
    padding:1rem;
}
.noPadding{
    padding:0 !important;
}
.marginTop20{
    margin-top:2rem;
}
.overflowY{
    overflow-y:auto;
}
.tabulation{
    padding-left:2rem;
}
p{
    padding:0.5rem 0;
}
img{
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
a{    
    color: #333333;
}
/* Fin GLOBAL */
/* -------------------------------------------------- */
/* TYPOGRAPHIE */
h1.contenuH, h2.contenuH, h3.contenuH, h4.contenuH, h5.contenuH, h6.contenuH {
    line-height: 110%;
    font-weight: normal;
    margin: 0.8rem 0;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: 0.8rem 0;
}
h1.contenuH{  
    font-size: 2.5rem;
    line-height: 2.5rem; 
}
h2.contenuH{     
    font-size: 2rem;
    line-height: 2.2rem;
}
h1.contenuH.titrePage{
    text-align: center;
    color:#666;
    margin: 3rem auto 4.5rem;
}
h2.contenuH.textOrange{
    color: #FF9900;
    margin-bottom: 2rem;
}
h2.contenuH.textOranget15{
    color: #FF9900;
    margin-bottom: 1rem;
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 1.65rem;
}
.t40{
    font-size:4rem;
    line-height: 4rem;
}
.t30{
    font-size:3rem;
    line-height: 3rem;
}
.t25{
    font-size: 2.5rem;
    line-height: 2.5rem;
}
.t20{
    font-size:2rem;
    line-height: 2rem;
}
.t16{
    font-size:1.6rem;
    line-height: 1.7rem;
}
.t15{
    font-size:1.5rem;
    line-height: 1.65rem;
}
.t14{
    font-size:1.4rem;
    line-height: 1.6rem;
}
.t12{
    font-size:1.2rem;
    line-height: 1.4rem;
}
.textOrange {
    color: #FF9900;
}
.textCenter{
    text-align: center;
}
.textLeft{
    text-align: left;
}
.textRight{
    text-align: right;
}
.textBold{
    font-weight: bold;
}
/* Fin TYPOGRAPHIE */

/* MATERIAL-ICONS */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material-icons/MaterialIcons-Regular.eot'), /* For IE6-8 */
       url('../fonts/material-icons/MaterialIcons-Regular.woff2') format('woff2'),
       url('../fonts/material-icons/MaterialIcons-Regular.woff') format('woff'),
       url('../fonts/material-icons/MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
    font-family: 'Material Icons';
    font-style: normal;
    font-variant: initial;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: 'liga';
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}
/* Fin MATERIAL-ICONS */
/* -------------------------------------------------- */
/* FORM - Crédit Materialize */
fieldset{
    border: 1px solid #FF9900;
    margin: 1rem 0.2rem;
}
legend{
    text-align: center;
    color:#666;
    font-size: 2.5rem;
    padding: 0rem 0.5rem 1.7rem;
}
.input{    
    position: relative;
    margin-top: 1rem;
}
p.input {
    margin-bottom: 1rem;
    text-align: left;
}
p.inputLine {
    margin-bottom: 1rem;
    text-align: left;
    display: block;
}
.input input{
    line-height: normal;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 1.5rem;
    margin: 0 0 2rem 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: all 0.3s;
}
.inputLine input, .inputLine select{
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    box-shadow: none;
    box-sizing: content-box;
}
.inputLine.conteneur .col {
    padding: 0 1rem;
}
.inputCheck{    
    margin: 0 1rem;
    height: 2rem;
    line-height: 2rem;
    vertical-align: middle;
}
input[type="radio"], input[type="checkbox"] {
    background-color: #FFF;
    padding: initial;
    border: initial;
}
.inputLine label{
}
label {
    font-size: 1.2rem;
    color: #757575;
}
.input.col label {
    left: 0.75rem;
}
input[type="submit"], input[type="button"]{    
    text-decoration: none;
    color: #fff;
    background-color: #F90;
    text-align: center;
    letter-spacing: .5px;
    transition: .2s ease-out;
    cursor: pointer;
    height: 3rem !important;
    line-height: 3rem !important;
    border: none;
    border-radius: 2px;
    display: inline-block;
    font-size: 1.5rem;
    outline: 0;
    padding: 0 2rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* Fin FORM */
/* -------------------------------------------------- */
/* POSITIONNEMENT*/
/* Centrage vertical - Crédit Materialize */
.vertiAlign-conteneur { /* Il faut fixer la hauteur du conteneur pour que cela fonctionne et lui ajouter la class vertiAlign-conteneur. */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.vertiAlign-conteneur .vertiAlign { /*Sur l'élément à centrer, ajouter la class vertiAlign.*/
    display: block;
}
/* Flottement et position absolute */
.relative{
    position:relative;
}
.left {
    float: left;
}
.right {
    float: right;
}
/*  vm = vu mobile, inférieur à 480px;
    vt = vu tablette, inférieur à 720px;
    p = petit écran, inférieur à 900px;
    m = écran moyen, inférieur à 1024px;
    g = grand écran, inférieur à 1280px;
    tg = très grand écran, supérieur à 1280px;

    Les largeurs sont progressivement "écrasées" au besoin. 
    Vm est établi par défaut pour couvrir tous les écrans. 
    Si une class vt est ensuite définie, elle écrase vm quand la résolution est supérieur à 480px, ainsi de suite.
    Le chiffre correspond lui au pourcentage qu'occupera la col dans le conteneur.
*/
.conteneur {
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.8rem;
}
.conteneur:after {
    content: "";
    display: table;
    clear: both;
}
.conteneur .col {
    float: left;
    box-sizing: border-box;
    padding: 0 0.5rem;
    min-height: 0.1rem;
}
.col{
    margin-top:1rem;
    margin-bottom:1rem;
}
.conteneur .col.vm100 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.conteneur .col.vm75 {
    width: 75%;  
    margin-left: auto;
    left: auto;
    right: auto;
}
.conteneur .col.vm66 {
    width: 66.6666666667%;  
    margin-left: auto;
    left: auto;
    right: auto;
}
.conteneur .col.vm50 {
    width: 50%; 
    margin-left: auto;
    left: auto;
    right: auto; 
}
.conteneur .col.vm33 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.conteneur .col.vm25 {
    width: 25%;  
    margin-left: auto;
    left: auto;
    right: auto;
}
.conteneur .col.vm20 {
    width: 20%;  
    margin-left: auto;
    left: auto;
    right: auto;
}
.conteneur .col.vm60 {
    width: 60%;  
    margin-left: auto;
    left: auto;
    right: auto;
}
.conteneur .col.vm80 {
    width: 80%;  
    margin-left: auto;
    left: auto;
    right: auto;
}
@media only screen and (min-width: 481px) {
    .conteneur {
        padding: 0 0.8rem;
    }
    .conteneur .col {
        padding: 0 0.8rem;
    }
    .col{
        margin-top:1rem;
        margin-bottom:1rem;
    }
    .conteneur .col.vt100 {
        width: 100%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.vt75 {
        width: 75%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.vt66 {
        width: 66.6666666667%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.vt50 {
        width: 50%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.vt33 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.vt25 {
        width: 25%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
}
@media only screen and (min-width: 721px) {
    .conteneur {
        padding: 0 1.5rem;
    }
    .conteneur .col {
        padding: 0 1.5rem;
    }
    .col{
        margin-top:1rem;
        margin-bottom:1rem;
    }
    .conteneur .col.p100 {
        width: 100%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.p75 {
        width: 75%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.p66 {
        width: 66.6666666667%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.p50 {
        width: 50%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.p33 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.p25 {
        width: 25%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
}
@media only screen and (min-width: 901px) {
    .conteneur {
        padding: 0 1.5rem;
    }
    .conteneur .col {
        padding: 0 1.5rem;
    }
    .col{
        margin-top:1rem;
        margin-bottom:1rem;
    }
    .conteneur .col.m100 {
        width: 100%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.m75 {
        width: 75%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.m66 {
        width: 66.6666666667%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.m50 {
        width: 50%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.m33 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.m25 {
        width: 25%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
}
@media only screen and (min-width: 1025px) {
    .conteneur {
        padding: 0 1.5rem;
    }
    .conteneur .col {
        padding: 0 1.5rem;
    }
    .col{
        margin-top:1rem;
        margin-bottom:1rem;
    }
    .conteneur .col.g100 {
        width: 100%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.g75 {
        width: 75%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.g66 {
        width: 66.6666666667%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.g50 {
        width: 50%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.g33 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.g25 {
        width: 25%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
}
@media only screen and (min-width: 1281px) {
    .conteneur {
        padding: 0 2rem;
    }
    .conteneur .col {
        padding: 0 2rem;
    }
    .col{
        margin-top:1rem;
        margin-bottom:1rem;
    }
    .conteneur .col.tg100 {
        width: 100%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.tg75 {
        width: 75%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.tg66 {
        width: 66.6666666667%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.tg50 {
        width: 50%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.tg33 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.tg25 {
        width: 25%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
}
@media only screen and (min-width: 1601px) {
    .conteneur {
        padding: 0 3rem;
    }
    .conteneur .col {
        padding: 0 3rem;
    }
    .col{
        margin-top:1rem;
        margin-bottom:1rem;
    }
}
@media only print {
    .conteneur {
        padding: 0;
    }
    .conteneur .col {
        padding: 0 0.5rem;
    }
    .col{
        margin-top:1rem;
        margin-bottom:1rem;
    }
    .conteneur .col.print100 {
        width: 100%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.print75 {
        width: 75%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.print66 {
        width: 66.6666666667%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.print50 {
        width: 50%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.print33 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .conteneur .col.print25 {
        width: 25%;  
        margin-left: auto;
        left: auto;
        right: auto;
    }
}
/* Fin POSITIONNEMENT HORIZONTAL */
/* -------------------------------------------------- */
/* DISPLAY */
/* Éléments masqués en fonction du support */
.masquer{
    display: none;
}
@media only screen and (max-width: 480px){
    .masquer-vm{
        display: none;
    }
}
@media only screen and (min-width: 481px) and (max-width: 720px){
    .masquer-vt{
        display: none;
    }
}
@media only screen and (min-width: 721px) and (max-width: 900px) {
    .masquer-p{
        display: none;
    }
}
@media only screen and (min-width: 901px) and (max-width: 1024px) {
    .masquer-m{
        display: none;
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    .masquer-g{
        display: none;
    }
}
@media only screen and (min-width: 1281px) {
    .masquer-tg{
        display: none;
    }
}
@media only screen and (min-width: 721px) {
    .masquer-vt-et-moins{
        display: none;
    }
}
@media only screen and (max-width: 720px) {
    .masquer-p-et-plus{
        display: none;
    }
}
@media only screen and (min-width: 901px) {
    .masquer-m-et-plus{
        display: none;
    }
}
@media only screen and (max-width: 900px) {
    .masquer-p-et-moins{
        display: none;
    }
}
@media only screen and (min-width: 901px) and (max-width: 1281px) {
    .masquer-m-et-g{
        display: none;
    }
}
@media only screen and (min-width: 1025px) {
    .masquer-g-et-plus{
        display: none !important;
    }
}
/* Éléments visibles en fonction du support */
visible{
    display: block;
}
@media only screen and (max-width: 480px) {
    .visible-vm{
        display: block !important;
    }
}
@media only screen and (min-width: 481px) and (max-width: 720px){
    .visible-vt{
        display: block !important;
    }
}
@media only screen and (min-width: 721px) and (max-width: 900px) {
    .visible-p{
        display: block !important;
    }
}
@media only screen and (min-width: 901px) and (max-width: 1024px) {
    .visible-m{
        display: block !important;
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    .visible-g{
        display: block !important;
    }
}
@media only screen and (min-width: 1281px) {
    .visible-tg{
        display: block !important;
    }
}
@media only screen and (min-width: 901px) and (max-width: 1280px) {
    .visible-m-et-g{
        display: block !important;
    }
}
@media only screen and (min-width: 721px) {
    .visible-p-et-plus{
        display: block !important;
    }
}
@media only screen and (max-width: 720px) {
    .visible-vt-et-moins{
        display: block !important;
    }
}
@media only screen and (min-width: 1025px) {
    .visible-g-et-plus{
        display: block !important;
    }
}
/* Screen et Print */
@media only print{
    .noPrint{
        display:none;
    }
    .print{
        display:block !important;
    }
    .printTable{
        display:table !important;
    }
}
@media only screen{
    .noScreen{
        display:none;
    }
}
/* Fin DISPLAY */