body { 
	margin : 0px;
	background-color: #FFF;
	color: #000;
	font-size: 14px;
	font-family: 'Manrope', sans-serif;
    font-weight: 300;
	line-height: 22px 
}

#haut {
    width: 60px;
    height: 100%;
    z-index: 4000;
    position: fixed;
    top: 0;
    left: 0;
}
#haut .contenu {
    position: relative;
    height: 100%;
}

#menu {
    height: 100%;
    top: 0;
    padding-left: 60px;
}

nav {
    position: fixed;
    top: 50px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 50px);
    z-index: 3000;
    box-sizing: content-box;
    padding-bottom: 50%;
    scrollbar-width: none;
    overflow-y: scroll;
}

i { vertical-align: middle }

a:hover { color: #000 }
strong { font-weight: 800 }

.bloc_QCM { float: left; width: 28.5%; padding: 1.5%; margin: 1.5% 1.5% 1.5% 0; background: #f7f7f7; text-align: center; height: 220px; border-radius: 0 20px 0 0; }
.stat { float: left; padding: 30px 2%; width: 27%; margin: 0 2% 20px 0; text-align: center; }
.intitule_stat { font-size: 200%; color: #FFF }
.chiffre_stat { font-size: 400%; color: #FFF; font-weight: 800 }
.label_input { line-height: 40px; }

.fichier_down { position: relative; float: left; margin: 10px 2% 0 0; width: 19%; padding: 2%; color: #FFF; text-align: center; border-radius: 0 20px 0 0; box-shadow: 0 0 25px rgba(0,0,0,0.1); }
.fichier_down::after { content: ''; display: block; padding-bottom: 100%; }
.fichier_down .content { position: absolute; width: 83%; height: 83%; }
a.lien_fichier_down { color: #FFF; font-weight: 700; font-size: 125%; text-decoration: none }


.bouton_ok { text-decoration: none; cursor: pointer; padding: 5px; border: 2px solid #e6903d; color: #e6903d; background: #FFF; border-radius: 10px; margin: 3px 5px; width: 70px; font-size: 80%; font-weight: 900; }
.bouton_ko { text-decoration: none; cursor: pointer; padding: 5px; border: 2px solid #c0c0c0; color: #c0c0c0; background: #FFF; border-radius: 10px; margin: 3px 5px; width: 70px; font-size: 80%; font-weight: 900; }
.div_tableau { position: relative; width: 95%; padding: 0 2.5%; box-shadow: 0 0 25px rgba(0,0,0,0.1); border: 10px solid #FFFFFF; }
.div_bloc { float: left; padding: 30px 2%; width: 27%; margin: 0 1% 20px 1%; text-align: center; border-radius: 0 20px 0 0 }
a:link.bloc , a:visited.bloc{ color: #FFF; font-weight: 700; font-size: 150% }
a:hover.bloc{ font-weight: 700; font-size: 150% }
a.reseau { padding: 20px 0 }


#header_pictos { position: absolute; right: 20px; margin-top: 20px }
#ticket { float: right; margin: 10px 20px; font-size: 100%; text-align: center }
#box { float: right; margin: 10px 20px; font-size: 100%; text-align: center }
#user { float: right; margin: 10px 20px; font-size: 100%; text-align: center }
#deconnect { float: right; margin: 10px 20px; font-size: 100%; text-align: center }
#ticket a:link, #ticket a:visited, #box a:link, #box a:visited, #user a:link, #user a:visited, #deconnect a:link, #deconnect a:visited { color: #000; text-decoration: none }
#ticket a:hover, #box a:hover, #user a:hover, #deconnect a:hover { color: #415986; text-decoration: none }

.message_ok { padding: 5px 10px; border-radius: 10px; color: #FFF; background-color: #81b135; display: table }
.icon_align { vertical-align: bottom; }

hr { content:url('../medias/res/hr.png'); max-width:100%; border: none; margin:20px auto; }

/* LOGIN */
#ident { clear: both; }
    #ident h1 {
        font-family: 'Unna', serif; font-size: 340%;
        font-weight: normal; margin: 30px 0 15px 0
    }
    #ident h2 {
        font-family: 'Unna', serif; font-size: 200%;
        font-weight: normal; margin: 20px 0 15px 0
    }
    #ident h3 {
        font-family: 'Unna', serif; font-size: 150%;
        font-weight: normal; margin: 15px 0 15px 0
    }

    #ident a:link, #ident a:visited {
        font-family: 'Unna', serif; color: #000000; font-size: 115%;
        font-weight: normal; margin: 15px 0 15px 0
    }
    #ident a:hover {
        font-family: 'Unna', serif; font-size: 115%;
        font-weight: normal; margin: 15px 0 15px 0
    }
    
    .erreur { color: #FF0000; font-weight: bold; font-size: 150% }
    
    #valider_ident { position: relative;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 0 10px 0 0;
    font-family: 'Unna', serif;
    font-weight: 700;
    text-align: center;
    border: none;
    font-size: 150%;
    right: 0; top: 0
    }
    

/* ACCUEIL */

#header_accueil0 { width: 100%; height: 100vh; margin: 0 auto; }
#header_accueil { width: 1200px; margin: 0 auto; text-align: left }
#header_accueil ul { padding: 0 }
#header_accueil li { list-style: none }
#header_accueil li:before{
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
    font-size: 120%; 
    font-weight: 400;
    padding-right: 5px;
}

#header_accueil h1 { font-size: 250%; font-family: 'Unna', serif; font-weight: 800; }

.bloc_connexion { position: absolute; bottom: 20px }
.intitule_accueil { line-height: 50px; font-size: 125% }


.logo_out { padding-top: 50px; width: 300px }

/* FIN ACCUEIL */


#header {  width: 100%; padding-left: 60px; height: 100px; background: #e7e7e7; box-sizing: border-box; }

#centre { width: 100%; padding-left: 60px; box-sizing: border-box; }
#contenu { width: 1100px; margin: 0 50px; padding-bottom: 100px; }
#contenu_accueil { width: 100%; margin: 0 auto; padding-bottom: 100px; }

#accueilG {  width: 300px; left: -150px; margin: 0 50%; position: relative }

.ligne1 { background: #FFFFFF; border-top: 1px dotted #c0c0c0; padding: 10px; }
.ligne2 { background: #F7F7F7; border-top: 1px dotted #c0c0c0; padding: 10px; }
.droite { text-align: right }
.centre { text-align: center }
.center { text-align: center }
.gauche { text-align: left }
.action { clear: both; padding-top: 30px }
.vert { color: #81b135 }
.rouge { color: #FF0000 }
.bleu { color: #008bec }

a.lien_action:link, a.lien_action:visited, a.lien_action:hover  { font-weight: 800; text-decoration: none; color: #64b6ea }

#colonneG { float: left; width: 55%; margin-right: 5% }
#colonneD { float: left; width: 35%; margin-right: 5% }

#colonneG2 { float: left; width: 45%; margin-right: 5% }
#colonneD2 { float: left; width: 45%; margin-right: 5% }

.tableau { width: 100%; box-shadow: 0 0 25px rgba(0,0,0,0.1); border: 10px solid #FFFFFF }
td.lign1 { background-color: #ffffff; border-bottom: 1px dotted #c0c0c0 }
td.lign2 { background-color: #ffffff; border-bottom: 1px dotted #c0c0c0 }

.titre { position: relative; }
#contenu h1, #contenu_accueil h1 { font-size: 260%; font-family: 'Unna', serif; font-weight: 400; border-radius: 0 20px 0 0;
    display: inline-block; padding: 20px; line-height: 34px
}
#contenu h2, #contenu_accueil h2 {
    font-family: 'Unna', serif; font-size: 200%;
    font-weight: normal; margin: 15px 0 15px 0; line-height: 30px;
}
#contenu h3, #contenu_accueil h3 {
    font-family: 'Unna', serif; font-size: 170%;
    font-weight: normal; margin: 15px 0 15px 0; line-height: 30px;
}
#contenu h4, #contenu_accueil h4 {
    font-family: 'Unna', serif; font-size: 150%;
    font-weight: normal; margin: 15px 0 15px 0; line-height: 30px;
}
#contenu_accueil p, #contenu p {
    font-size: 120%; line-height: 27px
}

input[type="submit"] {
    font-family: FontAwesome;
}
input:required, textarea:required { border: 1px solid #fff; }
input:invalid, textarea:invalid { border: 1px solid #ff0000; }
input:valid, textarea:valid { border: 1px solid #81b135; }

input[type="text"], input[type="date"], input[type="password"], input[type="file"], select { background: #FFF;
    border: none; padding: 5px 10px; font-size: 115%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    color: #444;
    line-height: 30px;
    font-weight: 400;
    width: 95%;
    margin-bottom: 5px;
    border-radius: 10px; 
}

#valider_client {
  position: relative;
  color: #FFF;
  background-color: #e6903d;
  padding: 10px 20px;
  border-radius: 0 10px 0 0;
  font-family: 'Unna', serif;
  font-weight: 700;
  text-align: center;
  border: none;
  font-size: 150%;
  right: 0;
  top: 0;
}

.titre1 { clear: both; font-size: 150%;  font-family: 'Unna', serif; font-weight: 700; line-height: 30px }
.titre2 { clear: both; font-size: 125%;  font-family: 'Unna', serif; line-height: 30px; padding-top: 10px }
.surligne { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #415986; } 
.detail_produit { font-size: 80%; line-height: 16px; padding: 0; margin: 0 }

.surligne_vert { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #81b135; } 
.surligne_orange { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #ff8b00; } 
.surligne_rouge { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #ff0000; } 
.surligne_bleu { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #64b6ea; } 
.surligne_gris { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #bbbbbb; } 

#valider { color: #415986; padding: 5px 10px; border-radius: 9999px; position: absolute; right: 10px; top: 3px; }
.ajouter { position: relative; left: -10px; color: #000; background-color: #415986; padding: 10px; border-radius: 9999px; font-family: 'Unna', serif; font-weight: 700; text-align: center }
.ajouter_on { background-color: #5e9b00; }
.design-input { border-radius: 10px; background-color: #f1f3f5; border: none; padding: 15px 25px 15px 25px }

.valid_doc, .refus_doc { float: left; width: 50%; text-align: center; color: #808080; font-weight: 800; cursor: pointer }
.valid_doc_on { color: #81b135; font-weight: 800; text-align: center }
.refus_doc_on { color: #ff0000; font-weight: 800; text-align: center }

#valider2 { position: relative;
    color: #000;
    background-color: #415986;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: 'Unna', serif;
    font-weight: 700;
    text-align: center;
    border: none;
    font-size: 150%;
    right: 0; top: 0;
    cursor: pointer
    }
    
.b25{ width: 25px; }
.b50 { width: 50px; }
.b75 { width: 75px; }
.b100 { width: 100px; }
.b150 { width: 150px; }
.b200 { width: 200px; }
.b250 { width: 250px; }
.b80PC { width: 80% }

.bouton { cursor: pointer; float: left; margin-right: 5px; margin-bottom: 5px; background: #f7f7f7; color: #000; padding: 5px 10px; border-radius: 5px; font-weight: 700 }
.bouton_on { background: #000; color: #415986; padding: 5px 10px; border-radius: 5px }

.visuel { display: none; clear: both; width: 100% }
.visuel_show { display: inline-block; clear: both; width: 100% }

.cadre_client { float: left; margin: 0 0 20px 0; width: 80%; background-color: #e7e7e7; border: 2px solid #FFF; border-radius: 20px; padding: 20px }
.cadre_imagidee { float: right; margin: 0 0 20px 0; width: 80%; background-color: #fff; border-radius: 20px; border: 2px solid #e7e7e7; padding: 20px }

.PV { color: #415986; font-family: 'Unna', serif; font-weight: 700; font-size: 300% }
.PV2 { color: #415986; font-family: 'Unna', serif; font-weight: 700; font-size: 200% }

.invalide { background: #FF6347; color: #FFF; padding: 10px 20px; border-radius: 10px; }
.valide { background: #5e9b00; color: #FFF; padding: 10px 20px; border-radius: 10px; }

#quantite { left: -10px; position: relative; }
.quantite { font-weight: 700 }
.quantite::before {
    font-family: "Font Awesome 6 Pro";
    font: var(--fa-font-light);
    content: "\e19e";
    font-size: 300%; 
}

.logo { margin: 20px 0 0 20px; }

#bas { clear: both; width: 100%; text-aliggn: center; padding: 50px 0 }