html {

    margin: 0 auto;
    padding: 0px;
    border: 0px;

    width: 100%;
    height: 100%;

    font-family: 'Open_sanslight', Verdana, Arial, sans-serif;
    font-size: 2vh;
    line-height: 3vh;

    overflow-y: scroll;
    overflow-x: hidden;
}

body {

    margin: 0 auto;
    padding: 0px;
    border: 0px;

    height: 100%;
    width: 100%;

    text-align: center;

    background-color: #FFF;
}

.loader-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #80808075;
    z-index: 1000;
}

.loader-cont-non-bloc {
    width: 100vw;
    height: 0.5vh;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
}

.loader {
    width: 100%;
    height: 0.5vh;
    background-color: #427D6F; /* Couleur de la barre de chargement */
    animation: progress 5s linear infinite; /* Nom de l'animation, durée, type de timing, répétition infinie */
}

@keyframes progress {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

ul {
    list-style-type: none;
    margin: 0vh 0vh 0vh;
}

iframe {
    border: 0;
}

/* ---------------------------------------------*/
/* --- FONTS --- */
/* voir css dedie */
/* ---------------------------------------------*/
.font-13-2 {
    font-size: 1.3vh;
    line-height: 2vh;
}

.font-17-21 {
    font-size: 1.7vh;
    line-height: 2.1vh;
}

.font-17-3 {
    font-size: 1.7vh;
    line-height: 3vh;
}

.font-2-3 {
    font-size: 2vh;
    line-height: 3vh;
}

.font-2-6-bold {
    font-size: 2vh;
    line-height: 6vh;
    font-weight: bold;
}

.font-27-4 {
    font-size: 2.7vh;
    line-height: 4vh;
}

.font-3-5 {
    font-size: 3vh;
    line-height: 5vh;
}

.font-3-6 {
    font-size: 3vh;
    line-height: 6vh;
}

.font-3-8 {
    font-size: 3vh;
    line-height: 8vh;
}

.font-4-8 {
    font-size: 4vh;
    line-height: 8vh;
}

/* ---------------------------------------------*/
/* --- GENERAL --- */
/* ---------------------------------------------*/
.couleur-noire {
    color: #000;
}

.couleur-fonce {
    color: #0B213B; /* 11 / 33 / 59 */
}

.couleur-theso {
    color: #1D456C; /* 29 / 69 / 108 */
}

.couleur-public {
    color: #90AB4A; /* 144 / 171 / 73 */
}

.couleur-pro {
    color: #427D6F; /* 66 / 125 / 111 */
}

.couleur-etsad {
    color: #5096A7; /* 80 / 150 / 167 */
}

.couleur-qr {
    color: #6E824B; /* 110 / 130 / 175 */
}

.couleur-jaune {
    color: #EDB600; /* 237 / 182 / 0 */
}

.couleur-orange {
    color: #D76513; /* 215 / 101 / 19 */
}

.couleur-rouge {
    color: #A9231B; /* 169 / 35 / 27 */
}

.couleur-blanc {
    color: #FFFFFF;
}

.couleur-gris {
    color: #EEEEEE; /* 169 / 35 / 27 */
}

.couleur-encadre {
    color: #d0dedb;
}

.BG-couleur-fonce {
    background-color: #0B213B; /* 11 / 33 / 59 */
}

.BG-couleur-theso {
    background-color: #1D456C; /* 29 / 69 / 108 */
}

.BG-couleur-public {
    background-color: #90AB4A; /* 144 / 171 / 73 */
}

.BG-couleur-pro {
    background-color: #427D6F; /* 66 / 125 / 111 */
}

.BG-couleur-pro-fade {
    background-color: RGBa(66, 125, 111, 0.5); /* 66 / 125 / 111 */
}

.BG-couleur-etsad {
    background-color: #5096A7; /* 80 / 150 / 167 */
}

.BG-couleur-qr {
    background-color: #6E824B; /* 110 / 130 / 175 */
}

.BG-couleur-jaune {
    background-color: #EDB600; /* 237 / 182 / 0 */
}

.BG-couleur-jaune-pale {
    background-color: #eddf6b; /* 237 / 182 / 0 */
}

.BG-couleur-orange {
    background-color: #D76513; /* 215 / 101 / 19 */
}

.BG-couleur-rouge {
    background-color: #A9231B; /* 169 / 35 / 27 */
}

.BG-couleur-blanc {
    background-color: #ffffff;
}

.BG-couleur-gris {
    background-color: #EEEEEE; /* 169 / 35 / 27 */
}

.BG-couleur-encadre-pro {
    background-color: #d0dedb;
}

.BG-couleur-encadre-etsad {
    background-color: #d4e5e9;
}

.BG-couleur-encadre-public {
    background-color: #dfebd1;
}

.BG-couleur-encadre-theso {
    background-color: #cad0db;
}

.BG-couleur-encadre-rouge {
    background-color: #fdbfba;
}

.BG-couleur-encadre-orange {
    background-color: #fbcbbc;
}

.BG-couleur-encadre-jaune {
    background-color: #fadea7;
}

.Border-couleur-fonce {
    border-color: #0B213B; /* 11 / 33 / 59 */
}

.Border-couleur-theso {
    border-color: #1D456C; /* 29 / 69 / 108 */
}

.Border-couleur-public {
    border-color: #90AB4A; /* 144 / 171 / 73 */
}

.Border-couleur-pro {
    border-color: #427D6F; /* 66 / 125 / 111 */
}

.Border-couleur-etsad {
    border-color: #5096A7; /* 80 / 150 / 167 */
}

.Border-couleur-qr {
    border-color: #6E824B; /* 110 / 130 / 175 */
}

.Border-couleur-jaune {
    border-color: #EDB600; /* 237 / 182 / 0 */
}

.Border-couleur-orange {
    border-color: #D76513; /* 215 / 101 / 19 */
}

.Border-couleur-rouge {
    border-color: #A9231B; /* 169 / 35 / 27 */
}

.Border-top-noir {
    border-top: solid 1px black;
}

.ombre {
    -moz-box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3);

}

.centrer {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.centrer-vert {
    margin-top: auto;
    margin-bottom: auto;
}

p, a:visited /* --- texte général noir (+liens visités) --- */
{
    color: #333;
    font-family: 'Open_sansregular', Arial, sans-serif;
    font-size: 1.7vh;
    line-height: 3vh;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: justify;

}

a, a:focus, a:hover /* --- lien, liens au survol --- */
{
    color: #000;
    font-family: 'Open_sansregular', Arial, sans-serif;
    font-size: 1vh;
    line-height: 3vh;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: justify;

    font-weight: bold;

}

.bold {
    /* font-family: 'montserratlight', Arial, sans-serif; */
    font-weight: bold;
}

.alignCenter {
    text-align: center;
}

.pointer {
    cursor: pointer;
}

.clear {
    clear: both;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.inline-flex {
    display: inline-flex;
}

.none {
    display: none;
}

legend {
    background-color: #427D6F;
    color: white;
    cursor: pointer;
}

fieldset {
    background-color: #d0dedb;
}

.picHauteur100pc {
    position: relative;
    height: 100%;

    border: 0;

}

.picLargeur100pc {
    position: relative;
    width: 100%;
    height: auto;

    border: 0;

}

.italic {
    font-style: italic;
}

.date-input {
    width: 75px;
}

.ligne-tab {
    display: inline-flex;
    flex-flow: row nowrap;

    width: 100%;
}

.colonne-tab {
    display: inline-flex;
    flex-flow: column nowrap;
}

.col-tab-10pc {
    width: calc(10% - 1vh);
}

.col-tab-16pc {
    width: calc(16% - 1vh);
}

.col-tab-20pc {
    width: calc(20% - 1vh);
}

.col-tab-40pc {
    width: calc(40% - 1vh);
}

.col-tab-33pc {
    width: calc(33% - 1vh);
}

.col-tab-50pc {
    width: calc(50% - 1vh);
}

.col-tab-66pc {
    width: calc(66% - 1vh);
}

.col-tab-80pc {
    width: calc(80% - 1vh);
}

.col-tab-90pc {
    width: calc(90% - 1vh);
}

.on-3-col {
    display: inline-block;
    width: calc(33.3% - 1vh);
    vertical-align: top;
}

.on-2-col {
    display: inline-block;
    width: calc(50% - 1vh);
    vertical-align: top;
}

.picto-menu {

    display: none;

}

.picto-cadenas {

    display: block;

    position: fixed;

    height: 2vh;
    top: 8.7vh;

    width: auto;
    right: 6.5%;

    text-align: right;

}

.picto-qrcode {

    display: none;

}

/* ---------------------------------------------*/
/* --- FOOTER --- */
/* ---------------------------------------------*/

.footer {
    display: block;

    position: fixed;

    left: 0;
    width: 100%;

    bottom: 0;
    height: 3vh;

    text-align: center;

    z-index: 100000;

    color: #FFF;
    font-family: 'Open_sanslight', Arial, sans-serif;
    font-size: 1.2vh;
    line-height: 3vh;
    letter-spacing: 1px;
    text-decoration: none;

}

/* ---------------------------------------------*/
/* --- TITRE RUBRIQUE --- */
/* ---------------------------------------------*/

.titre-rubrique {

    display: block;

    position: fixed;

    top: 94vh;
    left: 0;

    height: 5vw;

    /*color : #FFF;*/
    font-family: 'Open_sanslight', Arial, sans-serif;
    font-size: 2vw;
    line-height: 5vw;
    letter-spacing: 1px;

    text-align: left;
    text-transform: uppercase;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);

    z-index: 100000;

}

.TR-couleur-theso {
    color: #1D456C; /* 29 / 69 / 108 */
    background-color: #FFFFFF;
}

.TR-couleur-public {
    color: #90AB4A; /* 144 / 171 / 73 */
    background-color: #FFFFFF;
}

.TR-couleur-pro {
    color: #427D6F; /* 66 / 125 / 111 */
    background-color: #FFFFFF;
}

.TR-couleur-qr {
    color: #6E824B; /* 110 / 130 / 175 */
    background-color: #FFFFFF;
}

.TR-couleur-etsad {
    color: #5096A7;
    background-color: #FFFFFF;
}

/* ---------------------------------------------*/
/* --- CONTENU --- */
/* ---------------------------------------------*/

.contenu-test {

    display: block;

    position: absolute;

    left: 5%;
    width: calc(93% - 6vh);

    margin-top: 13vh;
    margin-bottom: 5vh;

    padding: 2vh 3vh 2vh 3vh;

    background-color: #EEE;

    text-align: left;

}

.contenu {

    display: block;

    position: absolute;

    left: 5%;
    width: calc(93% - 6vh);

    margin-top: 13vh;
    margin-bottom: 5vh;

    padding: 3vh;

    /* background-color:#EEE; */

    text-align: left;

}

/* ---------------------------------------------*/
/* --- SELECTION --- */
/* ---------------------------------------------*/

/*.selectable {*/
/*background-color: transparent;*/
/*}*/

.selectable:hover, .selectable:active {
    background-color: #d7d7d7;

    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

/*.selectable-darker {*/
/*background-color: transparent;*/
/*}*/

.selectable-darker:hover, .selectable-darker:active {
    background-color: #bbbbbb;

    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

/* ---------------------------------------------*/
/* --- ERREURS --- */
/* ---------------------------------------------*/
.erreur-zone {
    display: inline-flex;
    flex-flow: row nowrap;
    position: fixed;

    bottom: 1em;
    left: 1em;

    height: 8em;
    width: 90%;

    z-index: 3000000;
}

.erreur-attention {

    margin: auto 1vh;
}

.erreur-texte {
    margin: auto 1vh;
    text-align: left;
}

.erreur-croix {
    position: absolute;

    height: 3vh;

    right: 1vh;
    top: 1vh;
}

/* ----------------------------------------------*/
/* --- BOUTONS RECHERCHES LORSQUE ECRAN VIDE --- */
/* ----------------------------------------------*/
.petite-bulle {
    height: 5vh;
    border-radius: 6vh;
    border: 1.7vh solid;
    margin: auto;
}

.grande-bulle {
    height: 19vh;
}

.recherche {
    display: inline-flex;
    flex-flow: row nowrap;

    margin-top: 20vh;
}

.recherche > div {
    position: relative;

}

.pdt {
    font-size: 4vh;
    margin-top: 2vh;
}

.btt-plus-rech {
    width: 28vh;
    right: -1vh;
    top: 7.5vh;
    position: absolute;
    text-align: right;
}

.btt-rech {
    left: 1vh;
    top: 18.5vh;
    position: absolute;
    text-align: center;
}

.btt-histo-rech {
    width: 19vh;
    text-align: left;
    left: -1vh;
    top: 7.5vh;
    position: absolute;
}

iframe {
    border: 0;
    height: 0;
    /*width: 100%;*/
}

input:invalid {
    color: red;
}

.btt-rouge {
    border-radius: 2em;
    padding: 0 0.25em;
    font-weight: bold;
    background-color: #A9231B;
    color: white;
}

.btt-vert {
    border-radius: 2em;
    padding: 0.25em 0.5em;
    font-weight: bold;
    background-color: #90AB4A;
    color: white;
}

.btt-orange {
    padding: 0 0.4em;
    margin: 0.2em;
    font-weight: bold;
    background-color: #D76513;
    color: white;
}

.btt-etsad {
    padding: 0 0.4em;
    margin: 0.2em;
    font-weight: bold;
    background-color: #5096A7;
    color: white;
}

.waiting {
    cursor: wait !important;
}