/*العربية*/
*{padding:0; margin:0; box-sizing: border-box;}





@media screen and (min-width:320px) and (max-width:800px)
{
	img{max-width: 100%; height: auto;}
	
	p[role="seton"]{background:#189f38 url(../images/icone-seton.png) 4px 10px no-repeat; padding-bottom: 16px; border-radius: 6px;}
	
	h2[role="abonnements"]{width: 94%; text-align:right!important; margin-right: 8px;}
	
	.container-top{height: 80px; flex-direction: column;}
    .menu-lange{width: 100%; position: fixed; top: 0; justify-content:flex-end; border-top: 1px solid #34aadc;}
	.banner{width: 75%; height: 80px; position: fixed; margin: 5px 0 0 10px;}
	.banner img{width: 100%; height: auto;}
    .main-logo{width: 90%; margin: 0 auto;}
	.modal-container{width: 90%;}
	.modal-container:target .modal-content{top:56%;}
    .modal-content{transform: translate(-50% , -530%);}
    
    .container-bandel{flex-direction: column;}
    .logo-m{display: none;}
    .logo-m-responsive{display:block; margin:30px auto;}
    .container-nav-logos{display: flex; margin:40px 0 10px 0;}
    .nav-logos{height:auto; flex-direction:column;}

	
	
/*LE MENU TOP*/
	.toggle-icone{display: block;  position: fixed; top:1px; width:40px; height:40px; 
    background:#34AADC url(../images/toggle-icone-b.png)center center no-repeat; cursor: pointer; 
    padding:5px; border-radius:0 0 6px 0; margin:0 0 0 0;}
	#toggle-menu:checked ~ .main-menu{ transform:translateY(41px)!important; transition: 0.1s;}
    #toggle-menu:checked ~ .toggle-icone{border-radius:0 0 0 0;}
	
	.main-menu{position: fixed; top:0; width:90%; max-width:100%!important; display:flex; 
    flex-direction:column; background:#fff; transform:translateY(-300px)!important; border:4px solid #34AADC; transition: 0.2s;}
	
	.main-menu a{display: block; width: 100%; height:auto; padding:15px 0 15px 55px!important; 
	            border-bottom:1px solid #34AADC; margin-bottom:0; margin-right: 0;}
	
	.main-menu a:last-child{border-bottom:none;}
	
	.main-menu a[role="connexion"]{display: inline-block; text-align: left; font-size: 15px; 
     background:url(../images/icone-connexion.png) 15px center no-repeat;}
	
	.main-menu a[role="inscription"]{display: inline-block; text-align: left; font-size: 15px; 
     background: url(../images/icone-inscription.png) 15px center no-repeat;}
	
	.main-menu a[role="rechargement"]{display: inline-block; text-align: left; font-size: 15px; 
     background:url(../images/icone-rechargement.png) 15px center no-repeat;}
	
	.main-menu a[role="consultation"]{display: inline-block; text-align: left; font-size: 15px; 
     background:url(../images/icone-consultation.png) 15px center no-repeat;}
	
	.main-menu a[role="profil"]{display: inline-block; text-align: left; font-size: 15px; 
     background:url(../images/icone-profil.png) 15px center no-repeat;}
	
	.main-menu a[role="deconnexion"]{display: inline-block; text-align: left; font-size: 15px; 
     background:#fff url(../images/icone-deconnexion.png) 15px center no-repeat;}
	
	.main-menu a[role="membre"]{display: inline-block; text-align: left; font-size: 15px; 
     background:#fff url(../images/icone-membre.png) 15px center no-repeat;}
	
	.main-menu a:last-child{margin-left:0;}
	
	
	
	
	
	
	.main-content{margin:10px auto 0 auto;}
	
	.content-intro-2{flex-direction: column; padding:0 10px 10px 10px; margin-top:10px;}
	.intro-tex{padding-right:0; order: 2; margin: 0 auto 50px auto;}
	.container-intro-img{order: 1; margin: 10px auto 30px auto;}
	
	
	
	
	
	
	h3[role="workers"]{font-size: 18px;}
	h2[role="abonnements"]{width: 320px; text-align: center; margin: 0 auto;}
	.content-intro-4{width: 94%; flex-direction: column; align-items: center; padding: 0!important; margin: 30px auto 0 auto;}
	.offre{max-width: 320px; margin-right: 0; margin-bottom: 20px;}
	
	
	
	.form-500{width: 94%!important; padding:20px!important; margin: 120px auto 0 auto!important;}
	.form{width: 90%!important; margin: 20px auto 0 auto!important;}
	#msform{width: 94%!important; margin-top: 120px!important;}
	#msform fieldset{width: 96%!important; margin: 0 auto!important}
	#msform input, #msform textarea{padding:10px!important; margin-bottom:6px!important;}
	
	.eye-pass{margin: 16px 0 0 12%!important;}
	
	.radio-02{text-align: left!important; margin-left: 20px;}
	
	
	.titrage-offres{padding: 0 13px;}
	
	.container-offre{width: 94%; margin: 0 auto 40px auto;}
	.entete-offre{flex-direction: column; align-items:flex-start;}
	.entete-logo{width:100%; height:100%; padding:0 0 0 0; margin-left:0px; border-left:none;}
	.entete-map{width: 100%; max-width: 100%; display: flex; justify-content: flex-end; align-items: center;}
	.items-offres{height: auto; flex-direction: column; align-items:flex-start; padding:0 20px 0 20px;}
	.date-p{margin-bottom: 10px; margin-left: 0;}
	.d-button{width:100%; display:flex; justify-content:flex-start;}
	
	.items-buttons{height: auto; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
	.d-button{margin-bottom: 8px;}
	
	
	.two-btn{width: 94%; margin: 0 auto;}
	
	.two-btn a[role="lien-appels-offre"]{max-width:300px; background:#2556a2; margin-left:10px; border-radius:0 0 8px 8px;}
	.two-btn a[role="lien-appels-offre"]:hover{background:linear-gradient(#2556a2,#1a345d);}
	
	.two-btn a[role="lien-avis-consult"]{max-width:300px;background:#2556a2;line-height:18px;padding-top:20px;border-radius:0 0 8px 8px;}
	.two-btn a[role="lien-avis-consult"]:hover{background:linear-gradient(#2556a2,#1a345d);}
	
	#page-offre .active-lien-appels-offre{background:linear-gradient(#2556a2,#1a345d); border-radius:0 0 8px 8px; transition: 0.2s;}
	#page-offre .active-lien-appels-offre:hover{background:linear-gradient(#2556a2,#1a345d);}
	#page-consulter .active-lien-avis-consult{background:linear-gradient(#2556a2,#1a345d); border-radius:0 0 8px 8px; transition: 0.2s;}
	#page-consulter .active-lien-avis-consult:hover{background:linear-gradient(#2556a2,#1a345d);}
	
	
	
	/*RUBRIQUE RECHERCHE*/
    .paneau-recherche{width: 94%; margin: 20px auto 0 auto!important;}
    .items-recherche{flex-direction: column; margin-top: 10px;}
	
	.con-wilaya{max-width: 250px; margin-bottom: 30px;}
	.con-select-wilaya{margin:20px 0 20px 0!important;}
	.con-select-wilaya .champ-select{margin: 0 0 10px 0!important;}
	
	.con-numero{max-width: 250px; margin-bottom: 30px;}
	.con-champ-num{margin:20px 0 20px 0!important;}
	
	.con-titre {max-width: 250px; margin-bottom: 30px;}
	.con-champ-titre{margin:20px 0 20px 0!important;}
	
	.con-date-p{max-width: 220px; margin-bottom: 30px;}
	.con-champ-date-p{margin:20px 0 20px 0!important;}
	
	.con-date-l{max-width: 220px; margin-bottom: 40px;}
	.con-champ-date-l{margin:20px 0 20px 0!important;}
	
	.con-btn{width: 100%; max-width: 100px; display: flex; justify-content: flex-end; align-items: flex-end;}
    .con-btn .btn{height: 36px; padding: 10px; margin:0 0 2px 0;}
	
	
	
	.main-footer{width:94%; height: auto; flex-direction: column;}
	
	.reseaux-sociaux{width: 100%; max-width:320px; justify-content: center; margin:10px auto 20px auto!important;order: 1;}
	.copyright{width:100%; text-align: center; margin:0 0 10px 0!important; order: 2;}
	.main-footer p[ role="p-copyright"]{margin:0 0 10px 0!important; order: 3;}
}


@media screen and (min-width:720px) and (max-width:1024px)
{
    .container-nav-logos{width: 100%; margin:30px auto 20px auto;}
}