@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 */