:root{
        --couleur-principale: brown;
            --marge-principale:50px 0px 25px 0px;
        --padding-de-base:6px;
        --couleur-fond-01: red;
    }
     #test1{
        color:var(--couleur-principale); 
        /* var(--couleur-fond-01)*/
    }



/* ================================================================ */
    /* Page */
/* ================================================================ */

* {box-sizing: border-box;}

html {font-size: 62.5%;} 

body {font-family: Verdana;}

body {font-size: 1.2rem;}

/*.containerGlobal{max-width: 1180px; margin: 0 auto; padding: 8px;}*/
.containerGlobal{
    max-width: 1180px; 
/*    margin: 0 0 0 240px ; */
/*    padding: 0px 0px 0px 0px;*/
/*    width: 995px;*/
    margin: 0 auto;
/*    display: flex;*/
}

/*.containerGlobal{bor__der: 1px dotted blue;}*/

.containerGlobal h1 {font-size: 24px; font-size: 2.4rem; margin: 0rem 0rem;}

main {margin-top: 0px;}

#titrePage span {font-size: 1.8rem; color: blue;}


/* ================================================================ */
    /* PAGE MAINTENANCE */
/* ================================================================ */

img.maintenance.center {display: block; margin-left: auto; margin-right: auto;}

/* ================================================================ */
    /* Navigation */
/* ================================================================ */

/*#btn-site {user-select:none;}*/
/*#btn-page {user-select:none;}*/

#btn-site ul {
    margin: 0 0 0 0 ;
    padding: 0.4em 0.2em 0 0.2em;
    background-color: #e9e9e9;
    border: 1px solid #dddddd;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-width: 0;
}

#btn-site li {
    /*margin: 0 1rem 0 0; 
    padding: 0 0.5rem; 
    list-style-type: none; */
    line-height: 18px; 
    cursor: pointer; 
    vertical-align: middle;
    list-style: none;
    float: left;
    padding: 0.5em 1em 0.2em 1em;
    font-family: Arial;
    font-size: 1.1em;
    color: #454545;
}

#btn-site li:not(.icone) {
    background-color: #f6f6f6;
    border: 1px #c5c5c5 solid;
    border-bottom-width: 0;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}


#btn-site li.icone {
    font-size: 25px;
    margin-left: 20px;
}

#btn-site>ul>li:hover {
    border: 1px #cccccc solid;
    border-bottom-width: 0;
    background-color: #ededed;
    color: #2b2b2b;
}

#btn-site>ul>li.actif {
    border: 1px #003eff solid;
    border-bottom-width: 0;
    background-color: #007fff;
    color: #ffffff;
}

#btn-site li+li {
    margin-left: 3px;
}

/*#btn-site li:not(.icone) {border: 1px solid blue;}*/
#btn-site li.masque {display: none;}

#btn-site .icone {font-size: 20px; padding:0;}


/* ================================================================ */
    /* Pagination */
/* ================================================================ */

#box-pagination.opacity-04 {opacity: 0.4;}


/* ================================================================ */
    /* Boutons dans pages */
/* ================================================================ */

#btn-page>ul {
    margin: 0 0 0 0 ;
    padding: 0.4em 0.2em 0 0.2em;
    background-color: #e9e9e9;
    border: 1px solid #dddddd;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-width: 0;
}

#btn-page>ul>li {
    list-style: none;
    float: left;
    padding: 0.5em 1em 0.2em 1em;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    font-family: Arial;
    font-size: 1.1em;
    border: 1px #c5c5c5 solid;
    border-bottom-width: 0;
    background-color: #f6f6f6;
    color: #454545;
    cursor: pointer; 
}

#btn-page>ul>li:hover {
    border: 1px #cccccc solid;
    border-bottom-width: 0;
    background-color: #ededed;
    color: #2b2b2b;
}

#btn-page>ul>li.actif {
    border: 1px #003eff solid;
    border-bottom-width: 0;
    background-color: #007fff;
    color: #ffffff;
}

#btn-page>ul>li+li {
    margin-left: 3px;
} 


/*.nav-02 ul:not(.masque) {*/
.nav-02 ul {
    margin: 0; 
    border: 1px #dddddd solid;
    border-top: 1px #c5c5c5 solid;
    background-color: #e9e9e9;
    padding: 0.4em 0.2em 0.2em 0.2em;
    display: inline-block;
}

.nav-02 li {
    margin: 0 0 0 0; 
    padding: 0 0.5rem; 
    /*border-bottom: 1px solid blue; */
    list-style-type: none; 
    line-height: 18px; 
    display: inline-block; 
    font-size: 1rem; 
    vertical-align: middle;

    background-color: #f6f6f6;
    color: #454545;
    border: 1px #c5c5c5 solid;
}

.nav-02 li:not(.read-only) {cursor: pointer;}
div.nav-02>div>ul>li.masque {display: none;} 
/*div.nav-02>div.masque {display: none !important;} */
/*ul.masque {display: none;}*/
div.nav-02>div>ul.masque {display: none;} 


#btn-ligne-ajout {background-color: #48D1CC;}



/* ================================================================ */
    /* Boutons dans pages (sous-fonctions) */
/* ================================================================ */

div.btn-table>ul.tableau.actif>li:first-child {
    border: 1px #003eff solid;
    border-bottom-width: 0;
    background-color: #007fff;
    color: #ffffff;
}




/* ================================================================ */
    /* Mises en forme diverses */
/* ================================================================ */

ul>li.btn:not(.read-only) {padding: 0 1rem; border: 1px solid blue; line-height: 18px; border-radius: 5px; cursor: pointer; font-size: 1rem; text-align: center;}

.btn {background-color: white;}

.msg-infos {margin: 0 0 1rem 0; padding: 0 1rem; border: 1px solid blue; min-height: 22px; border-radius: 5px; font-size: 1rem;}

/*.masque {display: none !important;}*/
#sectionTbl .masque, .masque {display: none!important;}
#sectionTbl .masque-01 {display: none;}
#sectionTbl .masque-02, #btn-page .masque-02, #btn-site .masque-02 {display: none;}
#sectionTbl .masque-03 {display: none;}

aside.masque, aside.masque-01, aside.masque-02, aside.masque-03 {display: none;}

.fond-rouge {background-color: #FF4500;}

.fond-orange {background-color: #FFA500 !important;}

select.forcage-rouge, input.forcage-rouge {color: red !important;}

input {font-family: verdana;}

/* Croix de fermeture de la box de modification */
.fermer-box {font-size: 2rem; margin:0; padding:0; position: absolute; top:0px; right: 5px; cursor: pointer;}


div:not(.style-02)>input, div:not(.style-02)>textarea, div:not(.style-02)>select, ul:not(.style-02)>li>input, ul:not(.style-02)>li>textarea, ul:not(.style-02)>li>select {border: 1px solid #87CEFA;}

input.read-only, select.read-only, textarea.read-only, td.read-only, li.read-only {background-color: #DCDCDC;}
input.read-only-02, select.read-only-02, textarea.read-only-02, td.read-only-02, li.read-only-02 {background-color: #DCDCDC;}
input.read-only-03, select.read-only-03, textarea.read-only-03, td.read-only-03, li.read-only-03 {background-color: #DCDCDC;}

/* Boutons d'onglets */
ul.btn>li.btn-suggere:not(.read-only) {background-color: blue; color: white;}


.nok {text-decoration: line-through;}

/*.nok {color:red !important;}*/
/*.cadreTbl.niveau-01 .genericA-table tbody tr.nok, .cadreTbl.niveau-01 .genericA-table tbody tr.valide {color:red;}*/

.gras {font-weight: bold;}

/*.box-ligne div+div {margin-left: 5px;}*/

/* ================================================================ */
    /* Messages info et défaut */
/* ================================================================ */

#msg {position: fixed; z-index: 31; display: block; top: 500px; left: 0; width: 100%;}


#msg>.info, #msg>.defaut
/*#msg>.info-02 {width: auto; height: auto;}*/
#msg>.defaut>p {margin: 0; padding-top: 5px;}
#msg>.info>p {margin: 0;}

#msg>.defaut {border-color: red; background-color: rgba(255, 181, 51, 0.95); color: black;}

/* ================================================================ */
    /* specifique pour box-ligne de mails */
/* ================================================================ */



/* ================================================================ */
    /* specifique pour box-ligne-ajout */
/* ================================================================ */

aside.box-ligne-ajout li.liste-doublons>select {background-color: red;}

/* ================================================================ */
    /* Box (ex: pour explorateur) avec titre et croix de fermeture */
/* ================================================================ */


.box-01 {border: 2px solid blue; border-radius: 5px; padding: 1rem; background-color: #FFF8DC;}

.box-01 div.header, .box-01 div.titre-02 {height: 20px; line-height: 20px; background-color: #DDDDDD; padding: 0px 5px; font-family: 'Trebuchet MS', sans-serif; font-weight: bold; text-transform: uppercase;
    border-radius: 5px; /*overflow: auto;*/ /* Evite ajout clear: both */;}

.box-01 div.header div.cmdCancel, aside.box-ligne>p.cmdCancel, aside.box-ligne-ajout>p.cmdCancel, aside.box-ligne>p.cmdCancel {background-color: red; color: white; float: right; cursor: pointer; padding: 0px 5px; border-radius: 5px; font-weight: bold; margin-left: 5px;}

.box-01 div.header div.cmdCancel:hover, aside.box-ligne>p.cmdCancel:hover, aside.box-ligne-ajout>p.cmdCancel:hover {background-color: white; color: red;}

aside.box-ligne>p.cmdCancel, aside.box-ligne>p.cmdCancel, aside.box-ligne-ajout>p.cmdCancel {margin-top: 0; margin-bottom: 0;}

.box-01 div.header>i {font-size: 20px; float: right; cursor: pointer; padding: 0px 5px; line-height: 20px; margin-left: 5px;}

/* ================================================================ */
    /* Bouton spécifique page + box box-btn-page */
/* ================================================================ */

#box-btn-page {
    /*position: absolute; z-index: 21; */
    position: absolute; z-index: 25; 
    max-width: 1200px;
}

#box-btn-page>.box2>h4, #box-btn-page>.box2>p {margin: 6px 0;}
#box-btn-page>.box1>h4 {margin: 6px 20px 6px 0;}

#btn-page.nav-02>p, #btn-page.nav-02>div>p {margin: 0 0; padding-top: 6px; }

#btn-page {width: 100%;}

#btn-page>hr, #btn-page>div>hr {color: blue; height: 2px; background-color: yellow; margin: 6px 0 0px 0;}

.box-ligne div.inline-block {display: inline-block; vertical-align: top;}

/*.box-ligne>div+div {margin-left: 10px;}*/

.box-ligne>div.margin-left-6 {margin-left: 6px;}

/* ================================================================ */
    /* Onglets */
/* ================================================================ */

.onglets .nav li{position: relative; float: left; list-style: none; padding: 0px 5px 5px; margin-right: 5px; border: 1px solid #1175AE; cursor: pointer; 
    background-color: #EEEEEE; 
    z-index: 1; 
}

/*VOIR SI UTILE*/
.onglets ul.nav li.actif{border-bottom: none; font-weight: bold; z-index: 10;}

/*On met en bleu le btn du tableau actif*/
nav.btn-page li.tableau.actif {color: blue;}
nav.btn-page li.tableau {font-weight: bold;}
/*nav.btn-page li.tableau {background-color: green;}*/


.onglets ul.nav {margin-top: 0px;}

.onglets .contenu{
clear: both;
position: relative;
border: 1px solid #0D5995;
z-index: 5;
top: -6px;
}

.onglets .item {padding: 0 5px 5px 5px; min-width: 800px;}

/*.onglets .item>section>div.box-03 {display: inline-block; vertical-align: top;}*/

.box-ligne .item div.nav-02>ul>li+li {margin-left: 5px;}

.box-ligne h4 {margin-top: 0px; margin-bottom: 5px;}


/* ================================================================ */
    /* Nouveau */
/* ================================================================ */

/*#titrePage span {font-size: 1.8rem; color: blue;}

#section-01>h2 {margin: 0.7rem 0 0.3rem 0; color: blue;}*/

/* Info sur le type d'utilisateur */
/*2017/01/05*/
/*#btn-site>p.droit-01 {background-color: #007fff; color: white; float: right; margin-top:9px; margin-bottom:0; padding-left: 5px; padding-right: 5px;}*/

.ligne-verticale
{
    width:5px;
    border-left: 2px solid red;
    /*height:100%;*/
    padding: 0;
}

#msg h4 {margin: 0 0 5px 0; text-align: center;}

#msg p {margin: 0 0 5px 0;}

a.boutonpdf, li.btn-pdf:not(.btn-texte), div.boutonpdf, li.boutonpdf {
    background: url("../img/btn-pdf.jpg") no-repeat;
    display: block;
    /*width: 59px;*/
    height: 52px;
}

li.btn-csv>i {
    font-size: 40px;
}

section.editions>div>ul>li.btn-csv {
    padding-left: 13px;
}

section.editions>div>ul>li {
    width: 100%;
    cursor: pointer;
}

section.editions>div>ul>li.btn-pdf>span, section>div>ul>li.boutonpdf>span {
    margin-left: 60px;
    line-height: 75px;
}

section.editions>div>ul>li.btn-csv>span {
    margin-left: 17px;
}





/* ================================================================ */
    /* Pour infos connexion */
/* ================================================================ */

/*#box-connexion__{position: fixed; top: 200px; z-index: 20;}*/

#box-connexion .container{display: flex; width: 100%; justify-content: center;
    border: 1px blue solid;}

#no-adh {max-width: 50px;}
#niv-adh {max-width: 15px;}
#infos-adh>li {display: inline-block;}
#infos-adh>li.niv-adh {float: right;}

#infos-ecran:not(.masque):not(.masque-01):not(.masque-02):not(.masque-03) {display: flex; flex-direction: column;}

#infos-ecran-02 {max-width: 130px;}
#infos-ecran>li {display: inline-block;}
/*#infos-terminal>li.hauteur-ecran {float: right;}*/

#infos-div-02 {max-width: 130px;}

#infos-connexion .container{margin: auto; padding:  0 10px; max-width: 1200px;}

/* ================================================================ */
    /* Cadre flexbox */
/* ================================================================ */

aside.style-cadre-02:not(.masque):not(.masque-01):not(.masque-02):not(.masque-03) {
    display: flex;
    flex-direction: column;
}

aside.style-cadre-02 {
    background-color: #FFF;
    border: 2px solid blue;
    border-radius: 5px;
    padding: 1rem;
    /*padding: 8px;*/
    margin: 5px;
}

aside.style-cadre-02>div:not(:last-child) {
    margin-bottom: 20px;
}


aside.style-cadre-02>div.header {
    line-height: 20px;
    background-color: #DDDDDD;
    padding: 0px 5px;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
}

aside.style-cadre-02 div.espace{flex-grow: 1;}

aside.style-cadre-02 div>ul {
    margin: 0;
    padding: 0;
}

aside.style-cadre-02 div>ul>li {
    margin: 0.3rem 0 0 0;
    padding: 0;
    list-style-type: none;
}

aside.style-cadre-02 div>ul>li.input {border-bottom: 1px red solid;}

aside.style-cadre-02 div>ul>li.lien {text-align: center; font-size: 13px; color: #0000ff; cursor: pointer;} /*2276f4*/

aside.style-cadre-02 div>ul>li.ou{text-align: center}

ul>li.btn-02:not(.read-only), div.btn01 {
    padding: 0 1rem;
    border: 1px solid blue;
    line-height: 18px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    color: #0000ff;
}

#box-btn-page div.btn01 {margin-top: 5px;}

ul>li.btn-02.actif:not(.read-only) {color: white; background-color: #0c67f1;}

aside.style-cadre-02 div>ul>li>input{border: none; outline: none;}


aside.style-cadre-02 div>ul>li>input[type=text] {padding: 0; width: 230px;}
aside.style-cadre-02 div>ul>li>input[type=password] {padding: 0; width: 230px;}


/*Croix de fermeture */

aside.style-cadre-02 div.header div.cmdCancel {
    background-color: red;
    color: white;
    float: right;
    cursor: pointer;
    padding: 0px 5px;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 5px;
}


#msg {
    /*position: static;*/
    /*max-width: 414px;*/
    width: 100%;
}

#msg>aside.defaut {
    /*max-width: 100%;*/
}

/* ================================================================ */
    /* Spécifique box-filtre */
/* ================================================================ */



/* ================================================================ */
    /* Pour infos inscription */
/* ================================================================ */

#box-inscription{
    /*width: 500px; height: 200px; */
    /*background-color: white;*/
}

/*#box-inscription{border: 3px green solid;}*/



div.masque {display: none;}



/* ================================================================ */
    /* Couleurs */
/* ================================================================ */

tr.normal {background-color: white;}

tr.alternate  {background-color: #DDDBCF;}

tr.vert-alternate {background-color: #EAF1CC;}

tr.vert-normal  {background-color: #CAE09C;}

tr.bleu-alternate {background-color: #E7EAF6;}

tr.bleu-normal {background-color: #BAC6E5;}

tr.nbleu-alternate {background-color: #DAEBEB;}

tr.nbleu-normal {background-color: #A5BED2;}

tr.ngris-alternate {background-color: #FBF9FC;}

tr.ngris-normal {background-color: #E7E7E5;}

tr.jaune-alternate {background-color: #FFFBCC;}

tr.jaune-normal {background-color: #FFF687;}




/* =============================================================================================================================== */
    /* Infos selon le type de terminal et l'orientation */
/* =============================================================================================================================== */

/* ================================================================ */
    /* Pour barre en tête de page */
/* ================================================================ */


#flexbox-02>div {border: 3px green solid;}

header>div.info-site-validation {
    background-color: red;
    text-align: center;
    font-weight: bold;
}

header>div.info-tempsDepasse {
    background-color: yellow;
    text-align: center;
    font-weight: bold;
    border: 4px green solid;
}


div.navbar-header{display: flex; align-items: center;}
div.navbar-header{width: 100%;}   

div.navbar-header>div.nom-site{margin: 0 10px;}

/*div.navbar-header>div.info-site-validation{margin: 0 10px; padding: 4px 10px; background-color: yellow; color: red;}*/

div.flex-espace{flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}

.navbar-not-logged, .navbar-logged, div.btn-menu-fonctions, .btn-session {display: flex; align-items: center;}

.navbar-not-logged>p, .navbar-logged>p, .navbar-header p {margin: 0 4px;}
.navbar-not-logged>p:not(.separateur), .navbar-logged>p:not(.separateur):not(.infos), .navbar-header p {cursor: pointer;}
.navbar-logged>p.infos {background-color: #007fff; color: white; padding: 0 5px;}


    /*$("div.navbar-header").on("click", "p.btn-filtre", function() {*/



#body[data-terminal="1"] div.navbar-header>div.nom-site {background-color: yellow;}
#body[data-terminal="2"] div.navbar-header>div.nom-site {background-color: red;}
#body[data-terminal="3"] div.navbar-header>div.nom-site {background-color: cyan;}



@media (max-width: 1024px) {

   /* .navbar-logged>p.infos {background-color: red; color: white; padding: 0 5px;}

    div.containerGlobal {margin-left: 0;}

    #box-filtre {position: fixed; top: 0; left: 0;}*/



}


/* ================================================================ */
    /* Onglet informations */
/* ================================================================ */

#data-onglet-informations {min-width: 650px; vertical-align: top;}

/*textarea[id$="_Memo"] {min-width: 650px !important; vertical-align: top;}

textarea[id$="_Titre"] {min-width: 650px !important; vertical-align: top;}

textarea[id$="_Descriptif"] {min-width: 650px !important; vertical-align: top;}
*/




/* ================================================================ */
    /* Menu pour mobile */
/* ================================================================ */
/* A CONSERVER //mod01 */
/*#T01 {overflow: auto;}*/
/*#T01 {
    overflow-y: auto;
    overflow-x: visible;
}
*/
/*#table-pr {overflow: auto;}*/

/*#T01 {min-height: 800px;} */ /* A METTRE DS MENU MOBILE */


#box-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /*min-height: 200px;*/
    z-index: 21;
    background-color: white;
    /*max-width: 500px;*/
}

/*#box-fonctions {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 21;
    background-color: white;
}*/

#box-menu {border: 3px red solid;}

#box-fonctions {border: 3px green solid;}


#box-menu div.header div.cmdCancel, #box-fonctions div.header div.cmdCancel {background-color: red; color: white; float: right; cursor: pointer; padding: 0px 5px; border-radius: 5px; font-weight: bold; margin-left: 5px; margin-right: 10px;}

#box-menu>ul, #box-fonctions>ul {
    padding-left: 5px;

}

#box-menu>ul>li, #box-fonctions>ul>li {
    line-height: 18px; 
    cursor: pointer; 
    /*vertical-align: middle;*/
    list-style: none;
    /*float: left;*/
    padding: 0.5em 1em 0.2em 1em;
    font-family: Arial;
    font-size: 1.1em;
    color: #454545;
}

#box-fonctions>ul>li.masque-02 {
    display: none;
}

#box-fonctions>ul>li>ul.tableau.actif>li:first-child {
    background-color: #007fff;
    /*color: #ffffff;*/
}

#box-fonctions>ul>li>ul.tableau>li:first-child {font-weight: bold;}

/*#btn-site {display: none;}*/





/* POUR MOBILE */


#box-ligne div.contenu section.informations {
    display: flex;
    flex-direction: row;
}

/*#data-onglet-informations {min-width: 100%; vertical-align: top;}

textarea[id$="_Memo"] {min-width: 100% !important; vertical-align: top;}

textarea[id$="_Titre"] {min-width: 100% !important; vertical-align: top;}

textarea[id$="_Descriptif"] {min-width: 100% !important; vertical-align: top;}

#box-ligne {width: 100%;}*/




.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*color: #cc0000;*/
}

/* PROVISOIRE POUR TESTER */
#T01 {border: 3px green solid;}


/* Adresses mail par défaut pour connexion */
div.adresses-par-defaut>span {
    display: block;
}



/* ================================================================ */
    /* PROVISOIRE POUR TESTS */
/* ================================================================ */

/*ul>li.masque {display: none;}*/