*{padding:0; margin:0; box-sizing:border-box;}
body{font-family:'Inter Regular','Tajawal Medium'; color:#404646;}




.envelope-main-navigation{width:100%; display:flex; justify-content:space-around; background:#216a1c; position:relative;}


/*NOMPBRES VISTEURS*/
.container-numvisits{width:200px; display:flex; align-items:center; padding-left:10px;}
.container-numvisits figure[role="num-visiteur"]{height:54px; display:flex; align-items:center; color:#fff;
background:url("../imgs/icone-visiteurs.png")0 center no-repeat; padding-left:34px;}
.container-numvisits figcaption{margin-left:6px;}




/*MENU PRINCIPALE*/
.container-toggle-mainmenu{display:none;}
.main-menu{display:flex; justify-content:center; align-items:center;}

.item-nav{position:relative;}
.item-nav:last-child{}
.item-nav input[type="checkbox"]{display:none;}
.item-nav label, .item-nav a{display:block; height:54px; color:#fff; font-family:'Inter Medium'; font-size:16px; cursor:pointer; padding:15px 20px 15px 20px; white-space:nowrap;transition:0.2s;}
.item-nav label:hover, .item-nav a:hover{background:#0c4708;}

a[role="accueil"]{display:block; width:54px; height:54px; 
 background:url("../imgs/icone-accueil.png")center center no-repeat;}
a[role="accueil"]:hover{display:block; width:54px; height:54px; 
 background:#154204 url("../imgs/icone-accueil.png")center center no-repeat;}

.item-nav label[role="deroulant"]{background:url("../imgs/arrow-white.png")center 40px no-repeat;}
.item-nav label[role="deroulant"]:hover{background:#0c4708 url("../imgs/arrow-white.png")center 40px no-repeat;}

.sub-item-nav{display:none; width:250px; position:absolute; top:54px; left:0; background:#7b9679; z-index:999;
 border-radius:0 0 8px 8px; transition:0s;}
.sub-item-nav a{display:block; width:100%; height:40px; line-height:40px;
 color:#fff; font-size:14px; background:#0c4708; padding:0 0 0 10px; margin-bottom:1px; transition:0.3s;}
.sub-item-nav a:first-child{}
.sub-item-nav a:last-child{border-radius:0 0 4px 4px; margin-bottom:0;}
.sub-item-nav a:hover{color:#fff; background:#052d03; transition:0.2s;}
.sub-item-nav .spacer{display:inline-block; width:15px; height:auto;}

.sub-item-nav label{display:block; height:36px; line-height:36px; color:#214a80; font-family:'Rubik Regular'; font-size:13px; cursor:pointer; padding:0 0 0 10px; margin-bottom:1px; transition:0.2s;}
.sub-sub-item-nav a{background:#fff; border-radius:0!important; padding-left:20px;}
.sub-sub-item-nav a:last-child{margin-bottom:1px;}
.sub-item-nav label[role="co-instance"]{background:#fff url("../imgs/arrow-l-b.png")96% center no-repeat;}
.sub-item-nav label[role="co-instance"]:hover{color:#214a80; background:#d7dee7 url("../imgs/arrow-l-b.png")96% center no-repeat;}








/*MENU UTILISATEUR*/
.envelope-user-menu{width:auto; height:54px; display:flex; align-items:center; justify-content:space-between; position:relative;
padding-right:10px;}

.user-names-box{display:flex; align-items:center; white-space:nowrap; margin-right:15px;}
* i[role="icone-user"]{display:block; width:40px; height:50px; 
  background:url("../imgs/icone-user-blue.png")center center no-repeat;}
.user-names-box figure{color:#fff; font-size:14px;}

.user-menu{width:100%; height:54px; display:flex; justify-content:flex-end; align-items:center;}
.item-usermenu{height:54px; position:relative; padding-top:14px; margin-right:20px;}
.item-usermenu:last-child{margin-right:0;}
.item-usermenu input[type="checkbox"]{display:none;}
.item-usermenu label, .item-usermenu a{display:block; color:#fff; font-family:'Inter Regular'; font-size:15px; cursor:pointer; 
 padding:0px 0 16px 0; transition:0.2s;}
.item-usermenu label:hover, .item-usermenu a:hover{color:#8dd3f0;}

.item-usermenu label[role="profil"]{display:block; width:20px; height:27px; 
 background:url("../imgs/icone-user-params.png")center 0 no-repeat;}

.item-usermenu label[role="notification"]{display:block; width:20px; height:27px; 
 background:url("../imgs/icone-user-notifs.png")center 0 no-repeat;}

.sub-item-usermenu{display:none; width:200px; position:absolute; background:#afc9e1; border-radius:0 0 6px 6px; margin:13px 0 0 -180px; 
 z-index:999; transition:0s;}
.item-usermenu:first-child .sub-item-usermenu{margin:13px 0 0 -170px!important;}
.sub-item-usermenu a{display:block; width:100%; height:40px; line-height:36px;
 color:#fff; font-size:14px; background:#216a1c; padding:0 0 0 10px; margin-bottom:1px; transition:0.3s;}
.sub-item-usermenu a:last-child{border-radius:0 0 6px 6px; margin-bottom:0;}
.sub-item-usermenu a:hover{color:#fff; background:#0c4708; transition:0.2s;}
.sub-item-usermenu .spacer{display:inline-block; width:15px; height:auto;}

.sub-item-usermenu label{display:block; height:40px; line-height:36px; color:#fff; font-family:'Inter Regular'; font-size:14px; cursor:pointer; padding:0 0 0 10px; margin-bottom:1px; transition:0.2s;}
.sub-sub-item-usermenu a{background:#216a1c; border-radius:0!important;}
.sub-sub-item-usermenu a:last-child{margin-bottom:1px;}
.sub-item-usermenu label[role="special-note"]{background:#216a1c url("../imgs/arrow-white.png")96% center no-repeat;}
.sub-item-usermenu label[role="special-note"]:hover{color:#fff; background:#0c4708 url("../imgs/arrow-white.png")96% center no-repeat;}




a{color:#0d89e9; text-decoration:none; outline:none;}
img{max-width:100%; height:auto;}


@font-face {
  font-family:'Inter Regular';
  src:url("fonts/Inter-Regular.woff2?v=3.19") format("woff2"),
      url("fonts/Inter-Regular.woff?v=3.19") format("woff");
  font-style: normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:'Inter Medium';
  src:url("fonts/Inter-Medium.woff2?v=3.19") format("woff2"),
      url("fonts/Inter-Medium.woff?v=3.19") format("woff");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face {
  font-family:'Inter SemiBold';
  src:url("fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"),
      url("fonts/Inter-SemiBold.woff?v=3.19") format("woff");
  font-style:normal;
  font-weight:600;
  font-display:swap;	
}
@font-face {
  font-family:'Inter Bold';
  src:url("fonts/Inter-Bold.woff2?v=3.19") format("woff2"),
      url("fonts/Inter-Bold.woff?v=3.19") format("woff");
  font-style:normal;
  font-weight:700;
  font-display:swap;	
}
@font-face {
  font-family:'Inter ExtraBold';
  src:url("fonts/Inter-ExtraBold.woff2?v=3.19") format("woff2"),
      url("fonts/Inter-ExtraBold.woff?v=3.19") format("woff");
  font-style:normal;
  font-weight:800;
  font-display:swap;	
}
@font-face {
    font-family:'Tajawal Regular';
    src: url('fonts/Tajawal-Regular.woff2') format('woff2'),
         url('fonts/Tajawal-Regular.woff') format('woff');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}
@font-face {
    font-family:'Tajawal Medium';
    src: url('fonts/Tajawal-Medium.woff2') format('woff2'),
         url('fonts/Tajawal-Medium.woff') format('woff');
    font-weight:500;
    font-style:normal;
    font-display:swap;
}
@font-face {
    font-family:'Tajawal Bold';
    src: url('fonts/Tajawal-Bold.woff2') format('woff2'),
         url('fonts/Tajawal-Bold.woff') format('woff');
    font-weight:bold;
    font-style:normal;
    font-display:swap;
}