:root {

    /*--oran-capi: #e36c0d;*/

    /*    --fonc: #dcdcdc;
        --moye: #dcdcdc;
        --clai: #dcdcdc;
        --tran: #ffffffdd;*/

    /*--menu > --them-fonc
    --coul-1 > --them-medi
    --coul-clai > --them-clai
    
    ----coul-2 > --noti-fonc
    
    --noti-*/


    --them-fonc: #445F73;         /* Couleur foncée */
    --them-medi : #ccc;         /* Couleur entre deux */
    --them-clai : #eee;     /* Couleur des fonds */


    --noti-fonc : #e36c0d;     /* Couleur des notifs */
    --noti-medi : #ccc;
    --noti-clai : #eee;


    --coul-tran : #eeeeeebb;

    --text-color : #212529;
    --fond: #fff;
    --fond-Edition: #f5f5f5;

    --coul-trav: #4f81be;
    --coul-prev: #90B34B;
    --coul-gamm: #90B34B;
    --coul-equi: #976532;
    --coul-comm: #7E64A1;
    --coul-piec: #C0504D;
    --coul-grou: #49ABC4;
    --coul-util: #49ABC4;
    --coul-arbo: #976532;
    --coul-four: #7E64A1;
    --coul-rapp: #555;
    --coul-admi: #555;


    --coul-acce-0: #953735;
    --coul-acce-1: #e88d06;
    --coul-acce-2: #909090;
    --coul-acce-3: #9bbb59;
    --coul-acce-4: #4f6228;
}



@font-face {
    font-family: 'logo-capi';
    src: url('../gene/logo-capi.ttf'); 
}

#page-menu{
    background-color: var(--them-fonc);
    transition: 0.2s;
    color: var(--fond);
}

.page-corp {
    background-color:var(--fond);
}

#page-head{
    background-color: var(--fond);
}


#page-head-navi{
    background-color: var(--them-fonc);
    color: var(--fond);
}

#page-head-navi .head-navi-bas{
    background-color: var(--fond);
    color: var(--text-color);
}

#page-head-navi #head-navi-agen:hover,
#page-head-navi #head-navi-aide:hover,
#page-head-navi #head-navi-foru:hover,
#page-head-navi #head-navi-deco:hover{
    background-color: var(--fond);
    color: var(--them-fonc);
}

.page-corp .corp-navi #corp-navi-notif{
    background-color:var(--noti-fonc);
    color:var(--fond);
}

.page-corp .corp-navi #corp-navi-chem .icon{
    color:var(--noti-fonc);
}

.accu-xs-navi .navi-bout{
    background-color: var(--them-fonc);
    color: var(--fond);
}

.accu-xs-navi .navi-bout#navi-bout-deco{
    background-color: var(--noti-fonc);
}

#filt-head,
#list-head,
#list-gran-head,
#edit-head,
#supp-head,
#rech-head,
#edit-menu,
#list-menu,
#supp-menu,
#rech-menu,
#rech-menu,
#list-gran-menu
{
    background-color: var(--them-fonc);
    color : var(--fond);
    border-top: 2px solid var(--fond);
}





@media (min-width: 576px) {
    .accu-cont-widg {
        border-top: 1px solid var(--them-fonc);
    }

    #filt-head,
    #list-head,
    #list-gran-head,
    #edit-head,
    #supp-head,
    #rech-head,
    #edit-menu,
    #list-menu,
    #supp-menu,
    #rech-menu,
    #rech-menu,
    #list-gran-menu
    {
        border:none;
    }

}

.actu-boite{
    background-color: #eee;
}

#accu-actu{
    background-color: #fff9;
}


#modu-list-gran,
#modu-list,
#modu-edit,
#modu-supp,
#modu-rech{
    background-color: var(--fond); 
}

#edit-corp {
    background-color: var(--fond); 
}

#page-modu-nouv {
    background-color: #f6f6f6;
}

#page-modu-nouv:hover {
    background-color: var(--fond);
}





#edit-choi,
#supp-choi{
    background-color: var(--them-medi);
}

.modu-choi-bout{   
    color: var(--them-fonc);
}

.modu-choi-bout-sele,
.modu-choi-bout:hover{
    background-color:var(--them-fonc);
    color:var(--them-medi);
}

/*#supp-choi div{
    background-color: var(--bleu-clai);
    color:  var(--bleu-fonc);  
}*/

#supp-choi button{
    background-color: var(--them-fonc);
    color:  var(--fond);  
}





::-webkit-scrollbar-thumb {
    background-color: var(--them-fonc);
}

.menu-sele{
    background-color: var(--them-fonc-hover);
}

/*#edit-corp h3{
    border-bottom-color: var(--them-fonc);
}*/

#actu-notif-titre{    
    background-color: var(--noti-fonc);
    color : var(--fond);
}

/*.widg h2{
    background-color: var(--them-medi)
}
.widg h3{
    
}*/
.widg-bouton{
    background-color: var(--coul-tran);
}

.widg {
    background-color: var(--coul-tran);
}

.widg-titr {
    background-color: var(--them-clai);
}

.widg-bouton:hover{
    background-color: var(--them-medi);
}

.widg-bouton .widg-bouton-cont{
    color: var(--noti-fonc)
}

h4{
    color:#666;
}


/*============================== couleur Modules ================================*/

.modu-four-fond{background-color : var(--coul-four);}
.modu-trav-fond{background-color : var(--coul-trav);}
.modu-equi-fond{background-color : var(--coul-equi);}
.modu-piec-fond{background-color : var(--coul-piec);}
.modu-util-fond{background-color : var(--coul-util);}
.modu-prev-fond{background-color : var(--coul-prev);}
.modu-gamm-fond{background-color : var(--coul-gamm);}
.modu-comm-fond{background-color : var(--coul-comm);}
.modu-grou-fond{background-color : var(--coul-grou);}
.modu-arbo-fond{background-color : var(--coul-arbo);}
.modu-rapp-fond{background-color : var(--coul-rapp);}
.modu-admi-fond{background-color : var(--coul-admi);}


.bg-fond{background-color : var(--fond);}



.gene-fond-clai{
    background-color:var(--them-clai);
    color:var(--them-fonc);
}



/*============================ couleurs prédéfinies ==========================*/
.a_definir{
    background-color : red;
    color:white;
}

.modu-serv:not(:empty){
    color: white;
    background-color: var(--them-fonc);
    padding: 2px 1px;
    text-align: left;
    text-overflow: ellipsis;
}
.modu-serv-edit {
    color: var(--them-fonc);
    font-weight: bold;
}
/*.modu-libe-serv {
    color: #445f73 !important;
    font-weight: bold !important;
    background-color: var(--them-medi) !important;
    padding: 0 2px;
}*/



.message-erreur{
    color: #fff;
    background-color: #212529;
    padding: 10px;
    align-items: center;
}

.important{
    width: 100%;
    border: 3px solid #FA6ADA;
    background-color: #fff;
}

.attention{
    color : #dc3545;
}

.gene-alert{
    color : var(--noti-fonc);
    font-weight: bold; 
}

.grpt-reta {
    background: linear-gradient(45deg, #cd0000 12.5%, #fff 12.5%, #fff 37.5%, #cd0000 37.5%, #cd0000 62.5%, #fff 62.5%, #fff 87.5%, #cd0000 87.5%);
    background-size: 10px 10px;
    background-position: 5px 5px;
}
.grpt-dela {
    background: linear-gradient(45deg, #8dc872 12.5%, #fff0 12.5%, #fff0 37.5%, #8dc872 37.5%, #8dc872 62.5%, #fff0 62.5%, #fff0 87.5%, #8dc872 87.5%);
    background-size: 10px 10px;
    background-position: 5px 5px;
}

.boutonActif{
    color: #fff;
    background-color: #E36B0A;
    border-radius: 50%;
}

.modu-impo { border-left: 3px solid #e36c0d; }



.bout-para {
    border: 1px solid var(--them-fonc); margin: 15px; color: var(--them-fonc);
}

/*============================ PLAN ========================*/
.modu-plan-case {
    background-color: #ffffffdd;
    border: 1px solid #999;
    border-radius: 3px;
    font-size: 85%;
}
.modu-plan-norm {
    background-color: #559d3a85;
}
.modu-plan-gris { /*si un autre est mis en avant*/
    background-color: #ddd;
}
.modu-plan-plansele { /*si mis en avant*/
    background-color: #fff;
}
.modu-plan-travsele { /*si mis en avant d une planif du meme travail*/
    border: 3px solid var(--noti-fonc) !important;
}
.modu-plan-avan { /*si en avance*/
    background-color: #5287ad42;
}
.modu-plan-reta { /*si en retard*/
    background-color: #ad525242;
}
.modu-plan-pros { /*si en action prospective*/
    background-color: var(--noti-medi);
}

.clignote {
  color: var(--noti-fonc);
  animation: clignote-doux 2s ease-in-out infinite;
}
@keyframes clignote {
  50% { opacity: 100; }
  51% { opacity: 0; }
  99% { opacity: 0; }
}

.clignotant {
  animation: clignotant 1s ease-in-out infinite;
}
@keyframes clignotant {
  0% { opacity: 100; }
  25% { opacity: 75; }
  50% { opacity: 50; }
  75% { opacity: 25; }
  100% { opacity: 0; }
}

@keyframes clignote-doux {
  0% { opacity: 100; }
  25% { opacity: 50; }
  50% { opacity: 0; }
  75% { opacity: 50; }
  100% { opacity: 100; }
}

/*============================ PLAN ========================*/
.modu-plan-feri {
    background: repeating-linear-gradient(45deg, #aaa, #aaa 2px, #fff0 2px, #fff0 5px);
}
