
*{padding:0; margin:0; box-sizing:border-box;}
body{font-family:'Inter Regular','Tajawal Medium'; color:#404646;}


.container-main-header{width:100%; background:linear-gradient(#fff, #e2e5e1);}

.main-header{width:100%; height:150px; position:relative; display:flex; justify-content:center; align-items:center;}

.logo-header{width:100%; max-width:294px; height:100px; background:url("../imgs/logoANPDP.jpg")center center no-repeat;
 background-size:contain; margin-right:20px;}

.main-tilte-header{text-align:center; padding:20px;}
.main-tilte-header h1{color:#455965; font-family:'Tajawal Bold'; font-size:30px; margin-bottom:5px;}
.main-tilte-header h2{color:#455965; font-family:'Inter Bold'; font-size:18px; text-transform:uppercase;}

.dz-flag{width:100%; max-width:180px; height:120px; 
 background:url("../imgs/dz-flag.png")center center no-repeat; background-size:contain; margin-left:20px;}







/*MAIN MENU*/
.envelope-main-menu{width:100%; background:#216a1c;}
.container-main-menu{width:100%; max-width:1200px; height:54px; display:flex; align-items:center; margin:0 auto;}

.main-menu{width:100%; display:flex;}
.main-menu a{display:inline-block; width:auto; height:54px; line-height:50px; color:#fff; font-family:'Inter Regular'; 
font-size:16px; padding:0 20px; border-right:1px solid #8aad7c; transition:0.3s;}
.container-main-menu a:hover{background:#154204;}

.container-main-menu a[role="accueil"]{display:block; width:54px; height:54px; 
 background:url("../imgs/icone-accueil.png")center center no-repeat;}
.container-main-menu a[role="accueil"]:hover{display:block; width:54px; height:54px; 
 background:#154204 url("../imgs/icone-accueil.png")center center no-repeat;}






/*USER BOX*/
.container-user-box{display:flex; width:260px; align-items:center; position:relative;/* background:#184408;
 padding:0 10px;*/ justify-content:space-between; z-index:9999;}
* i[role="icone-user"]{display:block; width:40px; height:50px; 
 background:url("../imgs/icone-user-blue.png")center center no-repeat;}
.container-user-box p{width:100%; color:#d2eac9; font-family:'Inter Medium'; font-size:13px; line-height:16px; margin-left:10px;}

.container-toggle-user-menu{}
#toggle-user-menu{display:none;}
.toggle-user-menu{display:block; width:24px; height:26px; background:url("../imgs/icone-user-params.png") 0 center no-repeat; 
margin-left:12px; cursor:pointer;}
.toggle-user-menu-close{display:block; width:24px; height:26px; background:url("../imgs/icone-user-params-close.png") 0 center no-repeat; margin-left:12px; cursor:pointer;}
#toggle-search:checked ~ .container-main-search{top:0;}

.sub-user-menu{position:absolute; width:160px; right:0; background:#dfdfe4; border-top:none; margin:-500px 0 0 0; transition:0.2s;}
.sub-user-menu a{display:block; height:40px; line-height:40px; background:#216a1c; color:#d2eac9; font-size:14px; padding:0 12px; 
 transition:0.6s; border-bottom:1px solid #b1cca6;}
.sub-user-menu a:hover{background:#153f06; transition:0.1s;}
.sub-user-menu a:last-child{border-bottom:none;}
.totop-usermenu{margin-top:134px!important;}








/*NOTIFICATION*/
.envelope-container-menu-notifs{width:100%; max-width:1200px; display:flex; justify-content:flex-end; margin:0 auto;}
.container-menu-notifs{width:200px; height:40px; background:url("../imgs/bg-notifs.png")center center no-repeat;
 position:relative;}

.container-toggle-notifs{width:100%; height:42px;}

.container-toggle-notifs em[role="notifs"]{display:block; color:#fff; font-family:'Inter Medium'; font-size:12px; 
 font-style:normal;}

#toggle-notifs{display:none;}
.toggle-notifs{width:120px; height:42px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; 
background: url("../imgs/fleche-notifs.png") 40px 32px no-repeat; margin:0 auto;}
.toggle-notifs figure{color:#d2eac9; font-size:13px;}
.notifs{width:24px; height:24px; line-height:24px; text-align:center; color:#216a1c; font-family:'Inter Medium';
 font-size:13px; background:#d2eac9; border-radius:20px;}
.toggle-notifs-close{}
#toggle-notifs:checked ~ .menu-notifs{top:0;}
.menu-notifs{position:absolute; width:180px; right:0; margin:-500px 0 0 0; transition:0.2s;}
.menu-notifs a{display:block; width:100%; height:40px; line-height:40px; background:#216a1c; color:#fff; 
 font-size:14px; padding:0 5px 0 20px; 
 border-radius:4px; margin-bottom:1px; transition:0.6s;}
.menu-notifs a:hover{background:#0b4807; transition:0.1s;}
.menu-notifs a:last-child{margin-bottom:0;}
.totop{margin-top:-1px!important;}








.container-main-content{width:100%;}

.wrraper-main-content{width:100%; max-width:1200px; padding:20px 0; margin:0 auto;}
.wrraper-titling-menu-notifs{width:100%;}



.colored-fullwidth{background:url("../imgs/bg-content.png")15% 0 no-repeat ,linear-gradient(#22414a, #051c23); 
 padding-bottom:50px; border-top:1px solid #8aad7c;}



/*LES TEXTES DANS LA PAGE ACCUEIL*/
.wrraper-double-zone-index{width:100%; max-width:1200px; display:flex; justify-content:flex-end;}
.container-double-zone-index{width:100%; max-width:900px;}
.container-double-zone-index h2{text-align:center; color:#92d050; font-family:'Tajawal Bold'; font-size:26px;
 text-shadow:0 1px 2px rgba(0,0,0,1);}
.container-double-zone-index h3{text-align:center; color:#92d050; font-family:'Inter Medium'; font-size:20px;
 text-shadow:0 1px 2px rgba(0,0,0,1);}
.double-zone-index{width:100%; display:flex; justify-content:space-between;}

.zone-index{width:100%; max-width:450px; padding:0 20px;}

.zone-index p, .zone-index ol li{text-align:justify;}
.zone-index ol li{color:#fff; padding-left:10px; margin-bottom:10px;}

.zone-index[lang="fr"] p{line-height:26px; color:#fff; font-size:18px; text-shadow:0 1px 2px rgba(0,0,0,1);}
.zone-index[lang="ar"] p{line-height:26px; color:#fff; font-size:18px; text-shadow:0 1px 2px rgba(0,0,0,0.8);}

.zone-index[lang="fr"] ol, .zone-index[lang="fr"] ul{padding-left:20px;}
.zone-index[lang="ar"] ol, .zone-index[lang="fr"] ul{padding-right:20px;}




.line-between{width:1px; background:#568492;}




.titling-special{width:338px; height:45px; line-height:45px; text-align:center; font-family:'Inter Medium'; font-size:16px;
 background:url("../imgs/icone-checklist.png")55px center no-repeat, url("../imgs/bg-wide-rubrique.png")center center no-repeat;
 margin:0 auto;}


.container-titling{width:100%; text-align:center;}
.container-titling h2[role="ar"]{color:#386c58; font-family:'Tajawal Bold'; font-size:26px;}
.container-titling h2[role="fr"]{color:#386c58; font-family:'Inter Semibold'; font-size:19px;}









.container-name-user{width:100%; display:flex; justify-content:center; align-items:center;}
.container-name-user h4[role="name-user"]{height:30px; line-height:30px; color:#b63d4d; font-family:'Inter Medium'; 
 font-size:18px; background:url("../imgs/icone-user-red.png")0 center no-repeat; padding-left:40px; margin:0 auto;}







.container-box-rubriques{width:100%; display:flex; justify-content:space-between; margin-bottom:30px;}

.container-box-rubriques-centred{width:100%; display:flex; justify-content:center; margin-bottom:30px;}
.container-box-rubriques-centred .box-rubrique{margin-right:30px;}
.container-box-rubriques-centred .box-rubrique:last-child{margin-right:0px;}

.box-rubrique{width:100%; max-width:380px; height:220px; display:flex; flex-direction:column; justify-content:space-between;
 background:url("../imgs/bg-box-rubriques.png")0 top no-repeat, linear-gradient(#fff,#e0f0e7); border-radius:10px;
 box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.34);}

.icone-box-rubrique{width:100%; align-content:center;}

.icone-box-rubrique[role="traitement"]{display:block; width:50px; height:50px; margin:15px auto 0 auto;
 background:url("../imgs/icone-big-trait.png")center center no-repeat;}

.icone-box-rubrique[role="declaration"]{display:block; width:50px; height:50px; margin:15px auto 0 auto;
 background:url("../imgs/icone-big-liste.png")center center no-repeat;}

.icone-box-rubrique[role="rdv"]{display:block; width:50px; height:50px; margin:15px auto 0 auto;
 background:url("../imgs/icone-big-calendrier.png")center center no-repeat;}

.icone-box-rubrique[role="recour"]{display:block; width:50px; height:50px; margin:15px auto 0 auto;
 background:url("../imgs/icone-big-declar.png")center center no-repeat;}

.icone-box-rubrique[role="conseil"]{display:block; width:50px; height:50px; margin:15px auto 0 auto;
 background:url("../imgs/icone-big-demande.png")center center no-repeat;}

.icone-box-rubrique[role="autorisation"]{display:block; width:50px; height:50px; margin:15px auto 0 auto;
 background:url("../imgs/icone-big-shield.png")center center no-repeat;}

.icone-box-rubrique[role="exploitation"]{display:block; width:50px; height:50px; margin:15px auto 0 auto;
 background:url("../imgs/icone-big-guide.png")center center no-repeat;}

.icone-box-rubrique[role="registre"]{display:block; width:50px; height:50px; margin:15px auto 0 auto;
 background:url("../imgs/icone-big-registre.png")center center no-repeat;}





.titre-box-rubrique{width:100%; height:60px; text-align:center;}
.titre-box-rubrique p[role="ar"]{color:#205170; font-family:'Tajawal Bold'; font-size:18px; margin-bottom:5px;}
.titre-box-rubrique p[role="fr"]{color:#205170; font-family:'Rubik medium'; font-size:16px;}

.link-box-rubrique{display:block; width:248px; height: 48px; text-align:center;
 background:url("../imgs/bg-buttons-rubrique.png")center center no-repeat; margin:0 auto;}
.link-box-rubrique figure[role="ar"]{color:#fff; font-family:'Tajawal Bold'; font-size:12px; margin:3px 0;}
.link-box-rubrique figure[role="fr"]{color:#fff; font-family:'Rubik medium'; font-size:13px;}





















/*LES TABLEAUX*/
.container-tableau{width:100%; overflow-x:auto; margin:0 auto;}

.tableau-responsive{width:100%; background:#a9c4b3;}
.tableau-responsive p{color:#6b7e7c; font-size:14px;}
.tableau-responsive thead p{color:#fff; font-family:'Inter Medium'; font-size:15px;}
.tableau-responsive tbody p{color:#3a4b68; font-size:15px;}
.tableau-responsive thead td{height:40px; background:#508d66;}
.tableau-responsive tbody tr:nth-child(even){background:#f4f7fa;}
.tableau-responsive tbody tr:nth-child(odd){background:#e9eff4;}
.tableau-responsive td{height:40px; text-align:center;}

.td-bleu{background:#2A64BD!important;}
.td-vert{background:#2daa9a!important;}

.td-bleu p{color:#fff!important;}
.td-vert p{color:#fff!important;}






*[role="fr"]{}
*[role="ar"]{}


.saut-05{margin:05px auto!important;}
.saut-10{margin:10px auto!important;}
.saut-20{margin:20px auto!important;}
.saut-30{margin:30px auto!important;}
.saut-40{margin:40px auto!important;}
.saut-50{margin:50px auto!important;}
.saut-60{margin:60px 0!important;}
.saut-haut-05{margin-top:05px!important;}.saut-bas-05{margin-bottom:05px!important;}
.saut-haut-10{margin-top:10px!important;}.saut-bas-10{margin-bottom:10px!important;}
.saut-haut-20{margin-top:20px!important;}.saut-bas-20{margin-bottom:20px!important;}
.saut-haut-30{margin-top:30px!important;}.saut-bas-30{margin-bottom:30px!important;}
.saut-haut-40{margin-top:40px!important;}.saut-bas-40{margin-bottom:40px!important;}
.saut-haut-50{margin-top:50px!important;}.saut-bas-50{margin-bottom:50px!important;}
.saut-haut-60{margin-top:60px!important;}.saut-bas-60{margin-bottom:60px!important;}





strong{font-family:'Inter Medium'; font-weight:normal;}
a{color:#0d89e9; text-decoration:none; outline:none;}
img{max-width:100%; height:auto;}

h1{font-weight:normal;}
h2{font-weight:normal; font-family:'Inter Semibold'; font-size:28px;}
h3{font-weight:normal;}
h4{font-weight:normal;}
h5{font-weight:normal;}
h6{font-weight:normal;}



@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;
}







