@charset "utf-8";
/* CSS Document */


@media screen and (min-width:390px) and (max-width:1080px)
{
	
	.main-header{flex-direction:column; justify-content:center; align-items:flex-start;}
	.main-tilte-header{padding:10px;}
	.main-tilte-header h1{font-size:18px;}
	.main-tilte-header h2{font-size:12px;}
	
	.logo-header{height:360px; margin-right:0;}
	.dz-flag{width:100%; max-width:180px; height:50px; position:absolute; top:5px; right:0;
     background:url("../imgs/dz-flag.png")center center no-repeat; background-size:contain; margin-left:20px;}
	
    
    .envelope-main-navigation{justify-content:space-between;}
    
    .container-numvisits figure[role="num-visiteur"]{flex-direction:column; justify-content:center;}
    .container-numvisits figcaption{font-size:13px; margin-left:0;}
    
    /*TOGGLE MENU DU TOP*/
    .container-toggle-mainmenu{display:block; position:absolute; top:7px; right:230px;}
    #toggle-mainmenu{display:none;}
    .toggle-mainmenu{display:block; width:40px; height:40px; border-radius:2px;
    background:#fff url(../imgs/toggle-mainmenu.png) center center no-repeat; cursor:pointer;}
    #toggle-mainmenu:checked ~ .main-menu{right:0;}
    .toggle-mainmenu-close{display:block; width:40px; height:40px; border-radius:2px; 
    background:#fff url(../imgs/toggle-mainmenu-close.png) center  center no-repeat; cursor:pointer;}
    
    .main-menu{flex-direction:column; width:320px; height:auto; background:#7b9679; position:absolute; top:55px; right:-150%; 
     border-radius:0 0 8px 8px; margin-right:0; z-index:10; transition:0.3s;}
    
    .item-nav label, .item-nav a{background:#216a1c; padding:0 0 0 10px!important;}

    .item-nav{width:100%; margin:0 0 1px 0;}
    .item-nav:last-child{margin-bottom:0;}
    
    .item-nav label{width:100%; height:40px; line-height:40px; text-align:left; color:#fff; font-size:14px; 
	 padding:0 0 0 15px;}
    .item-nav a{width:100%; height:40px; line-height:40px; text-align:left; color:#fff; font-size:14px; 
	 padding:0 0 0 15px!important;}
	.item-nav label:hover, .item-nav a:hover{color:#fff;}
    
    .item-nav label[role="deroulant"]{background:#216a1c url("../imgs/arrow-white.png")98% center no-repeat;}
    .item-nav label[role="deroulant"]:hover{background:#0c4708 url("../imgs/arrow-white.png")98% center no-repeat;}
	.item-nav a[role="accueil"]{width:100%; height:40px; background:#216a1c url("../imgs/icone-accueil.png")10px center no-repeat;}
    
    .item-nav:last-child a, .item-nav:last-child label{border-radius:0 0 8px 8px;}
	
	.sub-item-nav{width:100%; position:static; background:none; background:#7b9679; padding:0; margin:0; transition:0.1s;}
    .sub-item-nav a{width:100%!important; color:#fff; background:#0c4708; padding:0 0 0 20px; border-radius:0; 
    border-bottom:none;}
	.sub-item-nav a:first-child{border-radius:0 0 0 0; margin-top:1px;}
    .sub-item-nav a:last-child{border-radius:0 0 0 0;}
    .sub-item-nav a:hover{background:#123262; transition:0.1s;}
	
	
    .sub-item-nav label{color:#fff; padding:0 0 0 20px; margin-bottom:1px;}
	.sub-sub-item-nav a{background:#123262!important; border-radius:0!important;}
	.sub-sub-item-nav a:hover{background:#142743!important; transition:0.3s;}
	
	
	
	
	
	
	
	
	
	 /*les actions effectué pour les menu lors l'ecran est smartphone*/
	.to-top{top:120px!important; transition: 0.3s;}
    .to-left{left:0%!important; transition: 0.3s;}
    .to-right{right:0px!important; transition: 0.3s;}
    .back-left{left:-150%;}
    .back-right{right:-150%;}
    
	
}





@media screen and (min-width:390px) and (max-width:1100px)
{
    .item-nav label, .item-nav a{padding:15px 10px 15px 10px;}
    .sub-item-nav a{padding:0 0 0 10px!important}
}