@import url('https://fonts.googleapis.com/css?family=Tajawal&display=swap');
:root{--couleur1:#4075a1}
:root{--couleur2:#c946e9}
:root{--couleur3:#f4edf5bd}
:root{--couleur4:#0946792e}

*{margin:0;padding:0;}

.hid{display:none}
.hidimportant{display:none!important}
li,ul{list-style:none;vertical-align: middle;margin: 0;padding: 0;text-decoration:none;}
ul{display: flex;justify-content: center;}

#cMd{border-radius: 100%;
    display: none;
    margin: 0;
    padding: 2px;
    position: absolute;
    width: 31px;
    z-index: 99999;
    background: #fff;
    border: 1px solid #000;
    text-align: center;
    font-size: 21px;}

#body_ind{color:black;font-family:"Tajawal",Verdana,"Lucida Grande",Tahoma,Helvetica,Sans-Serif;font-size:15px;margin:0;padding:0;color:#304c63; 
background: #fff;height:100%;overflow-x: hidden;}

main{background: #fff;margin: 0px;z-index: 0;display: block;top: 0px;position: absolute; right: 0px;left: 0px;}

header{left: 0;right:0px;z-index: 3;top: 0px;position: fixed;}

.logo {
position: absolute;
top: 11px;
left: 3%;
font-size: 20px;
line-height: 18px;
text-align: right;
font-weight: bold;
}.logo b {
color: var(--couleur2);
font-size: 29px;
}


menu{display: flex;
width: 100%;
border-top: 1px solid #fff;
background: #dde3ed;
height: 45px;
border-bottom: 3px solid var(--couleur2);padding-left: 215px;}
nav {overflow: hidden;}

li.li_nivo1 {
    padding: 5px;
    vertical-align: middle;
    display: block;
    position: relative;
     height: 40px;
    line-height: 40px;
}

.bt_nivo1,.bt_nivo2{text-decoration: none;
text-align: center;
color: var(--couleur1);
font-size: 16px;
}

.bt_nivo1_active{color: var(--couleur2);text-decoration: none;}

.bt_nivo1:hover,.bt_nivo1_active:hover,.bt_nivo2:hover,.bt_nivo2_active:hover{text-decoration: none;color:#c946e9}


hr {color: #ccc;border: 1px solid #ccc;height: 0px;border-bottom: none;margin: 10px;}

section{    font-size: 18px;
    line-height: 130%;
    position: relative;
    top: 50px;
    min-height: 800px;}

span.lesfiltres{    position: fixed;
    background: #dde3ed;
    width: 90%;
    width: 100%;
    z-index: 100;
    text-align: center;
    display: block;
    border-bottom: 3px solid var(--couleur2);
    top: 30px;
    left: 0px;}

A, A:link , A:visited , A:active{text-decoration:none;color:var(--couleur2);outline:none;cursor:pointer}
A:hover{text-decoration:none;color:var(--couleur1);outline:none;}
legend a {color: #fff;}
.page_Accueil, .page_Page{font-size: 20px;color: #666;}
article {margin: 60px 10%;}


h1{color: var(--couleur1);font-size: 30px;margin-bottom: 10px;;font-weight: lighter;letter-spacing: -0.03em;}
h2{color: var(--couleur1);font-size: 26px;width: 100%;font-weight: lighter;}
h3 {color: var(--couleur1);}
h4{color: var(--couleur1);font-weight: bold;line-height: 0px;}
h5{color: #7dadcc;font-weight: 100;border-bottom: 1px solid #7dadcc;display: inline-block;line-height: 20px;}
h6{color:#4d7291;font-size:17px;font-weight:bold;display:inline}
h7 {font-size: 14px;display: block;}



.birdy {    border: 1px solid var(--couleur1);
    border-radius: 4px;
    padding: 3px;
    color: var(--couleur1);vertical-align: middle;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    height: 27px;font-size: 13px;}
.birdy2 {
height: 127px;
text-align: left;
width: 96%;
line-height: 18px;
}

.lien {cursor: pointer;    color: inherit !important;}
.lien:hover{text-decoration:underline;}


/*pour organigramme gris en compte*/
u{text-decoration: none;border-bottom: 1px solid #888;display: inline-block;line-height: 18px;}
d {display: inline-block;width: 6px;}
o {line-height: 27px;color: #999;font-size: 22px;}

.eleve {
    border-collapse: collapse;
}
.eleve td {
    border: 1px solid #eee;
    padding: 3px;
}
.sm{font-size:12px}

input#couleur {color: transparent;width: 16px;}


fieldset {
border: 1px solid var(--couleur1);
border-radius: 10px;
padding: 10px;background:var(--couleur3);
line-height: 21px;
margin: 50px auto 10px;
text-align: center;}



legend {border: 1px solid var(--couleur1);
border-radius: 7px;
color: var(--couleur3);
padding: 2px 10px;
background: var(--couleur1);
font-size: 15px;}


span#colonnegauche {
float: left;
width: 23%;font-size: 15px;
}


span#colonnedroite {
float: right;
width: 73%;
border-left: 1px solid #ccc;
padding: 0 0 0 20px;min-height: 500px;
}
.bt_save {
background: var(--couleur1);
border-radius: 4px;
padding: 6px 11px;
color: #fff;
border: none;
font-size: 15px;cursor: pointer;min-width: 160px;
}.bt_save:hover {background: var(--couleur2);}

.bt_grand {width: 200px;}
.bt_petit {width: 85px;font-size:11px}

i.descr {line-height: 16px;display: block;}


.textarea{width:99%;height:100px;border-radius: 5px;border: 1px solid var(--couleur1);padding:5px}
.red{color:#c54444!important}
.green{color:#61ad1c!important}
.orange{color:#e9a933!important}
.blue{color:#4793f1!important}
.gris{color:#888!important}.g2{color:#b9b8b8!important}



.w50{width: 50px;}
.w60{width: 60px!important;}
.w70{width: 70px!important;}
.w100{ width: 110px!important;}
.w200{ width: 200px!important;}
.w280{ width: 280px!important;}
.w300{ width: 300px!important;}
.w400{ width: 400px!important;}
.w1000{ width: 100%}
.w500{ width: 500px!important;}
.w800{ width: 800px!important;}
.w1200{ width: 1200px}
.right{float:right}
.gauche{text-align:left}
.droite{text-align:right}
.opa50 { opacity: 0.7;}
.bold,b{font-weight:bold}/*pour firefox*/


.color-picker-input{ line-height: 0;  font-size: 0;  cursor: pointer;  text-indent: -999em;  padding: 0;}

.color-picker-chooser {background: #fff;
padding: 1px;
list-style: none;
position: relative;
z-index: 1000;
border: 1px solid #666;
margin: 0;
height: 22px;
display: block;}

.color-picker-chooser li{ float: left;  cursor: pointer;  border: 1px solid #fff;}

.color-picker-chooser li.selected, .color-picker-chooser li:hover, .color-picker-chooser li:focus{ border-color: #000;  outline: none;  transform: scale(1.3);}

.disconn{cursor:pointer;text-align:right}




div#rideau {display:none;position: fixed;
background-color: var(--couleur1);
z-index: 1000;
filter: opacity(0.8);cursor: grab;
height: 100%;width: 100%; 
}
#TitrBulle {position: absolute;
left: 1px;
top: 1px;
font-size: 12px;
padding: 1px 7px;
border-radius: 0 0 10px 0;
background: #fff;}
#Bulle {display: none;
position: fixed;
cursor: default;
top: 25%;line-height: 17px;
left: 50%;
transform: translate(-50%, -50%);
min-width: 250px;
background-color: #ece8ec;
text-align: center;
padding: 30px 20px 20px 20px;
border-radius: 5px;
z-index: 1100;
box-shadow: 4px 4px 4px var(--couleur1);
}

#toTop{    cursor: pointer;
    color: #fff;
    position: fixed;
    bottom: 11%;
    right: 5%;
    z-index: 1000;
    border-radius: 100%;
    font-size: 43px;
    display: none;
    background: var(--couleur2);
    aspect-ratio: 1;
    width: 35px;
    height: 35px;
    border: 1px solid var(--couleurbase);
    padding: 8px;
    text-align: center;
    line-height: 35px;}
	#toTop:hover {background: var(--couleur1);;}



.rg0{background-color: #fce3e0; } .rg0c{color: #fce3e0; }  /* pâle mais visible */
.rg1{background-color: #f8cbc7; } .rg1c{color: #f8cbc7; }
.rg2{background-color: #f4b3af; } .rg2c{color: #f4b3af; }
.rg3{background-color: #f09a96; } .rg3c{color: #f09a96; }
.rg4{background-color: #ec827e; } .rg4c{color: #ec827e; }  /* plus doux que #ec7062 */

.vi0 { background-color: #fde4ec; } .vi0c { color: #fde4ec; }
.vi1 { background-color: #f9c3d9; } .vi1c { color: #f9c3d9; }
.vi2 { background-color: #f49fc5; } .vi2c { color: #f49fc5; }
.vi3 { background-color: #ef7cb1; } .vi3c { color: #ef7cb1; }
.vi4 { background-color: #ea589d; } .vi4c { color: #ea589d; }


.rs0{background-color: #f0e6f5; } .rs0c{color: #f0e6f5; }
.rs1{background-color: #e2d2ee; } .rs1c{color: #e2d2ee; }
.rs2{background-color: #d4bde7; } .rs2c{color: #d4bde7; }
.rs3{background-color: #c6a9df; } .rs3c{color: #c6a9df; }
.rs4{background-color: #b993d8; } .rs4c{color: #b993d8; }

.bl0{background-color: #e4f1fb; } .bl0c{color: #e4f1fb; }
.bl1{background-color: #cce4f7; } .bl1c{color: #cce4f7; }
.bl2{background-color: #b3d7f3; } .bl2c{color: #b3d7f3; }
.bl3{background-color: #9ac9ef; } .bl3c{color: #9ac9ef; }
.bl4{background-color: #82bcec; } .bl4c{color: #82bcec; }


.ve0{background-color: #e6f8f0; } .ve0c{color: #e6f8f0; }
.ve1{background-color: #c9eedf; } .ve1c{color: #c9eedf; }
.ve2{background-color: #ade4cf; } .ve2c{color: #ade4cf; }
.ve3{background-color: #90dabf; } .ve3c{color: #90dabf; }
.ve4{background-color: #74d0af; } .ve4c{color: #74d0af; }


.ja0{background-color: #fffbe6; } .ja0c{color: #fffbe6; }
.ja1{background-color: #fff3bf; } .ja1c{color: #fff3bf; }
.ja2{background-color: #ffe999; } .ja2c{color: #ffe999; }
.ja3{background-color: #ffdf73; } .ja3c{color: #ffdf73; }
.ja4{background-color: #ffd54d; } .ja4c{color: #ffd54d; }


.gr0{background-color: #f5f6f7; } .gr0c{color: #f5f6f7; }
.gr1{background-color: #e2e5e7; } .gr1c{color: #e2e5e7; }
.gr2{background-color: #cfd4d8; } .gr2c{color: #cfd4d8; }
.gr3{background-color: #bcc3c9; } .gr3c{color: #bcc3c9; }
.gr4{background-color: #aab2b9; } .gr4c{color: #aab2b9; }


.or0{background-color: #fff4e6; } .or0c{color: #fff4e6; }
.or1{background-color: #ffe0bf; } .or1c{color: #ffe0bf; }
.or2{background-color: #ffcc99; } .or2c{color: #ffcc99; }
.or3{background-color: #ffb873; } .or3c{color: #ffb873; }
.or4{background-color: #f6aa63; } .or4c{color: #f6aa63; }

.br0{background-color: #f9f6f2; } .br0c{color: #f9f6f2; }
.br1{background-color: #ede3d9; } .br1c{color: #ede3d9; }
.br2{background-color: #e0d0c0; } .br2c{color: #e0d0c0; }
.br3{background-color: #d4bda7; } .br3c{color: #d4bda7; }
.br4{background-color: #c8aa8e; } .br4c{color: #c8aa8e; }





@media (max-width: 1025px){

}




@media (max-width: 800px){


}