:root{
	--blanc : #fff;
	--bleu : #283891;
	--bleu-fonce : #252158;
	--bleu-ciel : #17a0f5;
	--marron : #9e4f23;
	--gris : #555555;
	--gris-light : #eee;
	--gris-light-2 : #ccc;
	--gris-semi-light : #9b9b9b;
	--gris-claire : #ababab;
	--gris-semi-sombre : #414141;
	--gris-sombre : #2e2e2e;
	--noire : #0b0b0b;
	--noire-classic : #2d2d2d;
	--noire-claire : #5d5d5d;
	--rouge : #ba0000;
	--rouge-pal : #fff0f0;
	--vert : #108d44;
	--vert-pal : #e7fff1;
	--bgtr : #edf5ff;
	--marron : #7e4209;
	--degradee-noir : rgba(0,0,0, .1);
}

*{
	padding: 0px;
	margin: 0px;
	font-family: 'Quicksand', 'Poppins', 'Montserrat', 'Roboto', sans-serif;
	box-sizing: border-box;
}

body{
	background-color: #f7f7f7;
}

p, a, button, span, strong, li, label{
	font-size: 16px;
}

h1, h2, h3, h4{
	font-family: 'Open Sans';
}

h1 a, h2 a, h3 a, h4 a{
	font-family: 'Open Sans';
}


p{
	font-family: 'Georgia';
	font-size: 16px;
	line-height: 20px;
}

input, textarea, select{
	font-size: 16px;
}

small{
	font-size: 12px;
}

.container_data_afrikmar{
	width: 1160px;
	margin: 0px auto;
}

.container_afrikmar{
	padding-top: 60px;
}

@media screen and (max-width: 1260px){
	.container_data_afrikmar{
		width: 95%;
	}
}

header{
	/*position: fixed;
	top: 0px;
	right: 0px;
	left: 0px;*/
	background-color: var(--blanc);
	z-index: 3;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
}

.header_elements{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.reseaux_sociaux_header, .logo_header, .btn_abonnement_header{
	width: 250px;
}

.reseaux_sociaux_header, .reseaux_sociaux_footer{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}


.reseaux_sociaux_footer{
	margin: 10px 0px 10px;
}

.reseaux_sociaux_header a{
	color: var(--blanc);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: .2s;
	margin-right: 10px;
	padding: 8px 10px;
	border-radius: 5px;
}


.reseaux_sociaux_footer a{
	color: var(--blanc);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: .2s;
	margin-right: 10px;
	padding: 8px 30px;
}

.reseaux_sociaux_header a:hover{
	transform: scale(1.1);
	border-radius: 5px;
}

.reseaux_sociaux_footer a:hover{
	transform: scale(1.1);
	border-radius: 5px;
}

.logo_header img{
	display: inline-block;
	width: 250px;
}

.btn_abonnement_header{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

.btn_abonnement_header a{
	display: inline-block;
	padding: 10px 15px;
	background-color: var(--bleu);
	color: var(--blanc);
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 3px;
	transition: .2s;
	font-size: 13px;
}

.btn_abonnement_header a i{
	font-size: 18px;
}


.btn_abonnement_header a:hover{
	background-color: var(--bleu-fonce);
}


nav{
	background-color: var(--bleu);
	padding: 0px 40px;
	z-index: 3;
}

.ul_nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	z-index: 3;
}

.ul_nav > li{
	position: relative;
}

.ul_nav > li > a{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: var(--blanc);
	text-decoration: none;
	text-transform: uppercase;
	padding: 15px 20px;
	font-weight: 600;
	font-size: 13px;
}

.ul_nav > li > a i{
	margin-left: 5px;
	transition: .2s;
	font-size: 16px;
}


.sous_ul_nav{
	position: absolute;
	top: 100%;
	left: 0px;
	width: 270px;
	background-color: var(--blanc);
	box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
	list-style: none;
	display: none;
	z-index: 3;
}

.sous_ul_nav li{
	padding: 0px 10px;
	transition: .2s;
	z-index: 3;
}

.sous_ul_nav li a{
	display: block;
	padding: 12px 0px;
	border-bottom: 1px dashed var(--gris-claire);
	text-decoration: none;
	color: var(--gris-sombre);
}

.sous_ul_nav li:hover{
	background-color: var(--gris-light);
}


.ul_nav > li:hover > a{
	color: var(--marron);
}

.ul_nav > li:hover > a > i{
	transform: rotate(-180deg);
}

.ul_nav > li:hover > .sous_ul_nav{
	display: block;
}


.bande_index{
	width: 100%;
	margin: 0px 0px 60px;
	overflow: hidden;
	z-index: 0;
}

.container_images_bande{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 5px;
}

.first_part{
	position: relative;
	width: calc(60% - 5px);
	height: 430px;
	border-radius: 10px;
	overflow: hidden;
	z-index: 0;
	transition: .4s;
}

.first_part img{
	display: block;
	width: 100%;
    max-height: 430px;
    object-fit: cover;
	transition: .4s;
}

.small_categorie_bande{
	position: absolute;
	top: 10px;
	right: 10px;
}


.seconde_part{
	width: 40%;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 5px;
	z-index: 0;
}

.content_seconde_part{
	position: relative;
	width: calc(50% - 2.5px);
	height: 212px;
	border-radius: 10px;
	background-color: red;
	overflow: hidden;
	z-index: 0;
}

.content_seconde_part img{
	display: block;
	width: 100%;
    min-height: 212px;
    max-height: 310px;
    object-fit: cover;
	transition: .4s;
}

.first_part:hover img, .content_seconde_part:hover img{
	transform: scale(1.1);
}

.title_bande_post{
	position: absolute;
	right: 0px;
	bottom: 0px;
	left: 0px;
	padding: 20px 15px 15px;
	background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .5) 35%, transparent 100%);
	color: var(--blanc);
}

.title_bande_post h4{
	font-size: 14px;
}

.title_bande_post small{
	display: block;
}

.small_tag{
	margin-top: 10px;
	color: var(--gris-claire);
}





/* Styles du carrousel */
.carousel-container {
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
}
.carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}
.carousel-item {
	position: relative;
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.carousel-item img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
}

.content_carroussel{
	position: absolute;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .5) 35%, transparent 100%);
	padding: 10px 15px;
	color: var(--blanc);
}

.carousel-item h2 {
    margin-top: 10px;
    font-size: 24px;
}
.content_carroussel p {
    font-size: 14px;
    line-height: 20px;
    padding: 10px 20px 20px;
}
.carousel-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}
.prev, .next {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
    border: none;
    font-size: 25px;
}



.all_articles{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 60px;
}

.contenair_articles{
	width: 66%;
}

.container_articles h2, .container_left_articles h2{
	display: block;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--gris-claire);
	margin-bottom: 15px;
	font-size: 27px;
}

.left_bar_articles{
	width: 30%;
}

.recent_articles{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.div_autres_articles_meme_categorie{
	margin-bottom: 80px;
}

.recent_article{
	width: 31.5%;
	margin-bottom: 30px;
}

.recent_article > span{
	display: block;
	width: 100%;
	height: 180px;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--noire);
}

.recent_article > span img{
	width: 100%;
    min-height: 190px;
    object-fit: cover;
    transition: .2s;
}

.recent_article > span img:hover{
	opacity: .8;
}

.details_articles{
	margin-top: 10px;
}

.details_articles small{
	display: block;
	margin-bottom: 2px;
	color: var(--gris-semi-light);
}

.details_articles h3 a{
	display: block;
	font-size: 20px;
	margin: 10px 0px;
	color: var(--noire-classic);
	text-decoration: none;
}

.grand_article_left h3 a{
	font-size: 19px;
	color: var(--noire-classic);
}

.details_articles p{
	color: var(--noire-claire);
	line-height: 20px;
}

.categories_article{
	margin-top: 10px;
	color: var(--bleu-ciel);
}

.categories_article a{
	margin-right: 5px;
	color: var(--bleu-ciel);
	text-decoration: none;
	font-size: 12px;
}

.categories_article a:hover{
	text-decoration: underline;
}


.reste_articles{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 60px;
}

.autres_articles_left{
	margin: 60px 0px;
}

.article_afrikmar{
	width: 48%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 40px;
/*	border-bottom: 1px dashed var(--gris-claire);*/
}

.article_afrikmar_left{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px dashed var(--gris-claire);
}

.image_article_afrikmar {
	width: 110px;
}

.image_article_afrikmar span{
	display: block;
	width: 100%;
	height: 90px;
	border-radius: 10px;
	overflow: hidden;
    background-color: var(--noire);
}

.image_article_afrikmar span img{
	display: block;
	width: 100%;
    min-height: 90px;
    object-fit: cover;
    transition: .2s;
}

.image_article_afrikmar span img:hover{
	opacity: .9;
}

.details_articles_afrikmar{
	width: calc(100% - 120px);
}

.details_articles_afrikmar h3 a{
	color: var(--noire-classic);
	font-size: 19px;
	text-decoration: none;
}

.details_articles_afrikmar small{
	display: block;
	width: 100%;
	color: var(--gris-semi-light);
}


.left_article_with_image{
	width: 100%;
}

.left_article_with_image span{
	display: block;
	width: 100%;
	max-height: 420px;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--noire);
}

.left_article_with_image span img{
	display: block;
	width: 100%;
    max-height: 420px;
    object-fit: cover;
    transition: .2s;
}

.left_article_with_image span img:hover{
	opacity: .8;
}

.quatres_articles_sans_images{
	margin-top: 60px;
}

.articles_sans_image{
	width: 100%;
	border-bottom: 1px dashed var(--gris-claire);
	margin: 20px 0px;
	padding-bottom: 20px;
}

.articles_sans_image h3{
	margin-top: 5px;
}

.articles_sans_image h3 a{
	font-size: 18px;
	text-decoration: none;
	color: var(--noire-classic);
}

.articles_sans_image > a{
	color: var(--bleu-ciel);
	text-decoration: none;
}

.articles_sans_image > a:hover{
	text-decoration: underline;
}

.articles_sans_image p a{
	text-decoration: none;
	color: var(--gris-semi-light);
}

.articles_sans_image p span{
	display: block;
	width: 100%;
	text-decoration: none;
	color: var(--gris-semi-light);
}




footer{
	width: 100%;
	background-color: var(--noire-classic);
}

.bande_footer_afrikmar{
	width: 100%;
	height: 160px;
	overflow: hidden;
}

.bande_footer_afrikmar img{
	display: block;
	width: 100%;
    max-height: 160px;
    object-fit: cover;
    transition: .4s;
}

.bande_footer_afrikmar img:hover{
	opacity: .8;
}

.container_footer_afrikmar{
	padding: 80px 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.zone_edito{
	width: 25%;
}

.content_footer > h3{
	color: var(--blanc);
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--gris-claire);
}

.image_edito{
	width: 100%;
	max-height: 250px;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
}

.image_edito img{
	display: block;
	width: 100%;
    min-height: 250px;
    object-fit: cover;
}

.content_footer p{
	color: var(--gris-claire);
	margin-bottom: 10px;
	line-height: 20px;
}

.content_footer > a{
	display: inline-block;
	padding: 5px 10px;
	background-color: var(--bleu);
	text-decoration: none;
	border-radius: 50px;
	color: var(--blanc);
	transition: .2s;
}

.content_footer > a:hover{
	background-color: var(--bleu-fonce);
}

.zone_footer_data{
	width: 31%;
}

.article_afrikmar_footer{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
}

.image_article_afrikmar_footer {
	width: 130px;
}

.image_article_afrikmar_footer span{
	display: block;
	width: 100%;
	height: 80px;
	border-radius: 10px;
	overflow: hidden;
}

.image_article_afrikmar_footer span img{
	display: block;
	width: 100%;
    min-height: 80px;
    object-fit: cover;
    transition: .2s;
}

.image_article_afrikmar_footer span img:hover{
	opacity: .8;
	cursor: pointer;
}

.details_articles_afrikmar_footer{
	width: calc(100% - 140px);
	padding-bottom: 5px;
	border-bottom: 1px dashed var(--gris-semi-sombre);
}

.details_articles_afrikmar_footer a{
	text-decoration: none;
	color: var(--gris-light);
}

.details_articles_afrikmar_footer a h4{
	font-size: 16px;
	margin-bottom: 5px;
}

.details_articles_afrikmar_footer a:hover{
	color: var(--blanc);
}

.details_articles_afrikmar_footer small{
	display: block;
	color: var(--gris-claire);
	flex-wrap: 400;
	margin-top: 3px;
}


.liste_des_categories a{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 11px 0px;
	text-decoration: none;
	border-bottom: 1px dashed var(--gris-semi-sombre);
	color: var(--gris-claire);
	transition: .2s;
}

.article_via_categorie a{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 11px 0px;
	text-decoration: none;
	border-bottom: 1px dashed var(--gris-semi-light);
	color: var(--gris-semi-light);
	transition: .2s;
}

.liste_des_categories a i, .article_via_categorie a i{
	display: inline-block;
	margin-right: 10px;
}

.article_via_categorie a:hover{
	color: var(--gris-sombre);
	padding: 11px 5px;
}

.liste_des_categories a:hover{
	color: var(--blanc);
	padding: 11px 5px;
}



.copyright_newsletter_afrikmar{
	width: 100%;
	margin-top: 80px;
	padding-top: 40px;
	border-top: 1px solid var(--gris-semi-sombre);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.copyright_afrikmar small{
	color: var(--gris-claire);
}

.newsletter_afrikmar{
	width: 350px;
}
.newsletter_afrikmar p {
	margin-bottom: 10px;
	color: var(--gris-claire);
}

.newsletter_afrikmar form{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	border-radius: 3px;
	overflow: hidden;
}


.newsletter_afrikmar form input{
	display: block;
	width: 260px;
	padding: 10px 10px;
	border: none;
	background-color: var(--blanc);
	color: var(--gris-semi-sombre);
	outline: none;
}

.newsletter_afrikmar form button{
	display: block;
	width: 90px;
	background-color: var(--bleu);
	border: none;
	cursor: pointer;
	color: var(--blanc);
	transition: .2s;
}


@media screen and (max-width: 450px){
	.zone_edito, .zone_footer_data{
		width: 100%;
		margin-bottom: 40px;
	}
}


@media screen and (max-width: 370px){

	.copyright_newsletter_afrikmar{
		width: 100%;
	}

	.newsletter_afrikmar form input{
		width: calc(100% - 90px);
	}

	.newsletter_afrikmar form button{
		width: 90px;
	}


	.reseaux_sociaux_header, .reseaux_sociaux_footer{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin: 0px;
	}

	.reseaux_sociaux_header a, .reseaux_sociaux_footer a{
		display: block;
		text-align: center;
		width: 49%;
		margin: 0px;
		margin-bottom: 10px;
	}
}


.newsletter_afrikmar form button:hover{
	background-color: var(--bleu-fonce);
}

.article_consulte{
	margin-bottom: 40px;
}


.menuCategories, .menuSousCategories{
	list-style: none;
	max-height: 300px;
	overflow: auto;
}

.menuCategories > li, .menuSousCategories > li{
	margin-bottom: 6px;
}

.menuCategories > li > label, .menuSousCategories > li > label{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	line-height: 17px;
}

.menuCategories > li > label > input, .menuSousCategories > li > label > input{
	width: 13px;
	height: 13px;
}

.menuCategories > li > label > small, .menuSousCategories > li > label > small{
	display: block;
	width: calc(100% - 20px);
	margin-top: 0px;
	line-height: 13px;
	margin-left: 5px;
}

.menuCategories > li > label > small:hover, .menuSousCategories > li > label > small:hover{
	text-decoration: underline;
}

.menuSousCategories{
	display: block;
	margin-top: 10px;
	margin-left: 25px;
	padding-left: 10px;
	border-left: 1px solid var(--gris-light-2);
}

.span_image_article_consulte{
	display: block;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	max-height: 580px;
	background-color: var(--noire);
}

.span_image_article_consulte img{
	display: block;
	width: 100%;
    max-height: 580px;
    object-fit: cover;
    transition: .2s;
}

.span_image_article_consulte img:hover{
	opacity: .8;
}

.datail_article_consulte{
	margin-top: 20px;
}

.datail_article_consulte > small, .datail_article_consulte > a{
	color: var(--gris-semi-sombre);
	text-decoration: none;
}

.datail_article_consulte > a:hover{
	text-decoration: underline;
}

.datail_article_consulte h1{
	font-size: 42px;
	margin: 10px 0px;
	color: var(--noire-classic);
}

.contenu_article_consulte{
	margin-top: 20px;
	line-height: 24px;
	color: var(--gris-semi-sombre);
	font-size: 15px;
}

.reseaux_sociaux{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin: 30px 0px;
}

.reseaux_sociaux h4{
	width: 100%;
	margin-bottom: 5px;
}

.reseaux_sociaux a{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	padding: 7px 30px;
	text-decoration: none;
	margin-right: 10px;
	transition: .2s;
	color: #fff;
}

.Facebook{
	background-color: #1877F2;
}

.Twitter{
	background-color: #1DA1F2;
}

.Whatsapp{
	background-color: #25D366;
}

.LinkedIn{
	background-color: #0A66C2;
}

.Instagram{
	background: linear-gradient(45deg, 
	  #f58529,  /* orange */
	  #dd2a7b,  /* rose fuchsia */
	  #8134af,  /* violet */
	  #515bd4   /* bleu */
	);
}

.Youtube{
	background-color: #FF0000;
}

.reseaux_sociaux a:hover{
	transform: scale(1.1);
	border-radius: 5px;
}

.btns_navigation{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.btns_navigation a{
	display: block;
	text-decoration: none;
	color: var(--gris-semi-light);
	padding: 10px 20px;
	border: 1px solid var(--gris-semi-light);
	border-radius: 3px;
	transition: .2s;
}

.btns_navigation a:hover{
	background-color: var(--gris-light);
	color: var(--gris-semi-sombre);
	border: 1px solid var(--gris-semi-sombre);
}


.formulaire_commentaire_article{
	border-top: 1px dashed var(--gris-claire);
	border-bottom: 1px dashed var(--gris-claire);
	width: 100%;
	margin: 40px 0px;
	padding: 40px 0px;
}

.response_comment_form{
	margin-top: 20px;
	font-size: 12px;
	width: 100%;
	display: none;
	text-align: center;
}

.lienAbonnement{
	color: var(--gris);
	font-size: 12px;
}

.formulaire_commentaire_article form label{
	display: block;
	width: 100%;
	margin-top: 10px;
}

.formulaire_commentaire_article form label span{
	color: var(--gris-semi-sombre);
}

.formulaire_commentaire_article form label textarea{
	display: block;
	width: 100%;
	border-radius: 10px;
	padding: 10px;
	margin-top: 3px;
	border: 1px solid var(--gris-claire);
	outline: none;
	color: var(--gris-sombre);
}

.btns_f_afrikmar{
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.btns_f_afrikmar button{
	display: inline-block;
	padding: 15px 20px;
	background-color: var(--bleu);
	color: var(--blanc);
	cursor: pointer;
	border: none;
	border-radius: 3px;
	transition: .2s;
}

.btns_f_afrikmar button:hover{
	background-color: var(--bleu-fonce);
}

.commentaire_article{
	position: relative;
	margin-bottom: 20px;
	border-left: 1px solid var(--gris-claire);
	padding-left: 20px;
}

.commentaire_article span{
	position: absolute;
	left: -15px;
}

.commentaire_article span i{
	padding: 5px;
	background-color: #f7f7f7;
	margin-right: 5px;
	font-size: 17px;
}

.commentaire_article p{
	color: var(--gris-semi-light);
	padding: 25px 0px 5px;
}

.btn_plus_de_donnees{
	display: inline-block;
	margin-top: 40px;
	font-size: 16px;
	color: var(--bleu-ciel);
	text-decoration: none;
}

.btn_plus_de_donnees i{
	display: inline-block;
	margin-right: 5px;
}

.btn_plus_de_donnees:hover{
	text-decoration: underline;
}








/*============== Barre de recherche ==============*/
.barre_de_recherche{
	padding: 20px 0px;
	background-color: var(--gris-light);
	border-bottom: 1px dashed var(--gris-claire);
}

.barre_de_recherche{
	width: 100%;
}

.barre_de_recherche form{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 380px;
	border-radius: 3px;
	border: 1px solid var(--gris-claire);
	background-color: var(--blanc);
	overflow: hidden;
}


.barre_de_recherche form input{
	display: block;
	width: calc(100% - 40px);
	border: none;
	padding: 10px 5px 10px 10px;
	border: none;
	outline: none;
}

.barre_de_recherche form button{
	background-color: transparent;
	cursor: pointer;
	border: none;
	width: 40px;
	font-size: 20px;
	color: var(--gris-semi-light);
	transition: .2s;
}

.barre_de_recherche form button:hover{
	color: var(--marron);
}


@media screen and (max-width: 400px){
	.barre_de_recherche form{
		width: 100%;
		border-radius: 50px;
		padding-right: 10px;
	}
}


.pagination_afrikmar{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 40px;
}

.btns_prev_and_next{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: var(--gris-semi-light);
	border-radius: 10px;
	width: 32px;
	height: 32px;
	transition: .2s;
	border: 1px solid var(--gris-claire);
}

.btns_prev_and_next i{
	font-size: 16px;
}


.btns_pagination_afrikmar{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px 5px;
}

.btns_pagination_afrikmar a{
	width: 32px;
	height: 32px;
	transition: .2s;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: var(--gris-semi-sombre);
	border-radius: 10px;
	border: 1px solid var(--gris-claire);
	margin: 0px 5px;
}


.btns_prev_and_next:hover, .btns_pagination_afrikmar a:hover{
	color: var(--gris-sombre);
	border: 1px solid var(--gris-sombre);
	background-color: var(--gris-light);
}










/*----------- Contact ------------*/
.section_bande_contact{
	width: 100%;
	height: 195px;
}

.section_bande_contact img{
	display: block;
	width: 100%;
    max-height: 195px;
    object-fit: cover;
}

.contact_form{
	padding: 80px 0px;
	border: dashed var(--gris-light);
	border-width: 1px 0px 0px 0px;
	width: 100%;
}

.container_formulaire_contact{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

.zone_contact_formulaire, .le_formulaire_de_contact{
	width: 45%;
}

.content_contact{
	width: 100%;
}

.content_contact h1{
	border-bottom: 1px dashed var(--gris-claire);
	padding: 0px 0px 10px;
	margin-bottom: 20px;
	font-size: 28px;
}

.le_contact{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.span_icone{
	width: 50px;
	height: 50px;
	font-size: 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background-color: var(--bleu-ciel);
	border-radius: 50%;
	color: var(--gris-light);
}

.h2_contact{
	width: calc(100% - 55px);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	line-height: 25px;
}

.h2_contact span{
	font-size: 18px;
	display: block;
	width: 100%;
	font-weight: 500;
	color: var(--noire-classic);
}

.h2_contact a{
	font-size: 17px;
	display: block;
	width: 100%;
	color: var(--gris-semi-light);
	font-weight: 400;
	text-decoration: none;
}


.content_contact label{
	display: block;
	width: 100%;
	margin-bottom: 15px;
}

.content_contact label input{
	display: block;
	width: 100%;
	padding: 10px 10px;
	border-radius: 3px;
	border: 1px solid var(--gris-claire);
	font-size: 14px;
}

.content_contact label textarea{
	display: block;
	width: 100%;
	padding: 10px 10px;
	border-radius: 3px;
	border: 1px solid var(--gris-claire);
	font-size: 14px;
}


.btns_form_subtmit button{
	display: inline-block;
	padding: 12px 30px;
	background-color: var(--bleu);
	border: none;
	cursor: pointer;
	border-radius: 3px;
	font-size: 16px;
	color: var(--blanc);
	transition: .2s;
	font-size: 14px;
}

.btns_form_subtmit button:hover{
	background-color: var(--bleu-fonce);
}


.carte_maps_afric_mar{
	width: 100%;
	height: 420px;
}

.carte_maps_afric_mar iframe{
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
}





/*======== Edito ==========*/
.section_edito{
	width: 100%;
}

.edito_container{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 40px 0px 80px;
}

.edito_picture_and_text{
	width: 65%;
	overflow: hidden;
}

.edito_picture{
	width: 220px;
	max-height: 250px;
	border-radius: 20px;
	overflow: hidden;
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
/*	background-color: var(--noire);*/
}


.edito_picture img{
	display: block;
	width: 100%;
    max-height: 250px;
    object-fit: cover;
    transition: .2s;
}

@media screen and (max-width: 700px){

	.edito_picture_and_text{
		width: 100%;
	}

}

@media screen and (max-width: 450px){

	.edito_picture{
		width: 90%;
		min-height: 350px;
		max-height: 450px;
		border-radius: 20px;
		clear: both;
		margin-right: 0px;
		margin-bottom: 10px;
	}

	.edito_picture img{
	    max-height: 350px;
	    object-fit: cover;
	}
}


@media screen and (max-width: 399px){

	.edito_picture{
		width: 100%;
		min-height: 280px;
		max-height: 280px;
		border-radius: 20px;
		clear: both;
		margin-right: 0px;
		margin-bottom: 10px;
	}

	.edito_picture img{
	    max-height: 280px;
	    object-fit: cover;
	}
}


.edito_picture img:hover{
	opacity: .8;
}

.edito_text h1{
	font-size: 45px;
}


.edito_text h3{
	font-size: 20px;
}

.edito_text p{
	font-size: 17px;
	line-height: 29px;
	margin: 20px 0px;
	text-align: justify;
}


.edito_text h4{
	font-size: 16px;
	font-weight: 500;
}











/*=========== Administration ===========*/
.section_admin_login{
	width: 100%;
}


.container_login_admin{
	width: 340px;
	margin: 40px auto;
}

.container_login_admin form img{
	display: block;
	width: 120px;
	margin: 0px auto 10px;
}

.container_login_admin form h2{
	text-align: center;
	margin-bottom: 10px;
}

.container_login_admin label{
	display: block;
	width: 100%;
	margin-bottom: 15px;
}

.container_login_admin label input{
	display: block;
	width: 100%;
	padding: 10px 10px;
	background-color: var(--blanc);
	border: 1px solid var(--gris-claire);
	font-size: 14px;
	border-radius: 3px;
}

.login_form{
	margin-top: 40px;
}

.login_form button{
	width: 100%;
}

.forget_password{
	text-align: center;
	margin-top: 20px;
}

.forget_password a{
	color: var(--bleu-ciel);
	text-decoration: none;
}

.forget_password a:hover{
	text-decoration: underline;
}

.loaderAfrikMar{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background-color: rgba(0, 0, 0, .5);
	z-index: 5;
	display: none;
}

.response_afrikmar{
	text-align: center;
}

/*======== Animation logo =============*/

/* Conteneur du logo */
.logo_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Animation du logo */
.logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    animation: scaleLogo 2s infinite alternate;
}

/* Rotation infinie du logo */
@keyframes rotateLogo {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
    90% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Changement de taille du logo */
@keyframes scaleLogo {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}





/*===== Header admin =====*/
.container_admin_header{
	width: 100%;
	padding: 0px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}



.option_header_admin_afrikmar{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

.option_header_admin_afrikmar > a{
	display: inline-block;
	margin-left: 20px;
	color: var(--gris-semi-light);
	text-decoration: none;
	transition: .2s;
}

.option_header_admin_afrikmar > a span{
	margin-left: 5px;
}

.option_header_admin_afrikmar > a:hover{
	color: var(--noire);
}

.user_header_admin{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	margin-left: 20px;
	padding-left: 20px;
	border-left: 1px solid var(--gris-claire);
}

.user_header_admin a{
	color: var(--noire);
	text-decoration: none;
	padding: 5px 10px;
	background-color: var(--blanc);
	border-radius: 3px;
	transition: .2s;
	border: 1px solid var(--gris-claire);
}

.user_header_admin a:hover{
	background-color: var(--gris-light);
}



.data_container{
	padding: 20px 20px 40px 40px;
}

.data_container form h4{
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

.titre_et_boutons{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.btns_options{
	display: inline-block;
	padding: 5px 10px;
	border-radius: 3px;
	text-decoration: none;
	transition: .2s;
}

.btn_nouveau{
	background-color: var(--bleu);
	color: var(--blanc);
}

.btn_nouveau:hover{
	background-color: var(--bleu-fonce);
}

.altern_bg_tr{
	background-color: var(--bgtr);
}

.container_article table{
	border-collapse: collapse;
	width: 100%;
	margin-top: 20px;
}

.container_article table thead tr th{
	padding: 10px 10px;
	background-color: var(--blanc);
	text-align: left;
	border-bottom: 1px dashed var(--gris-semi-light);
	font-size: 14px;
}

.container_article table tbody tr td{
	padding: 10px;
	font-size: 14px;
	border-bottom: 1px dashed var(--gris-claire);
}

.image_post{
	width: 90px;
}

.image_post p{
	width: 80px;
	border-radius: 10px;
	overflow: hidden;
}

.image_post p img{
	display: block;
	width: 100%;
}

.td_titre_contenu_annonce{
	min-width: 380px;
	max-width: 540px;
}

.td_titre_contenu{
	min-width: 280px;
	max-width: 340px;
}

.td_titre_contenu > p, .td_titre_contenu_annonce > p{
	margin-top: 10px;
}

.td_titre_contenu > p > a, .td_titre_contenu_annonce > p > a{
	text-decoration: none;
	margin-right: 10px;
}

.td_titre_contenu > p > a small, .td_titre_contenu_annonce > p > a small{
	margin-left: 5px;
}

.td_titre_contenu > p > a:hover, .td_titre_contenu_annonce > p > a:hover{
	text-decoration: underline;
}

.td_titre_contenu > p > a i, .td_titre_contenu_annonce > p > a i{
	font-size: 10px;
}

.update_link{
	color: var(--bleu);
}

.delete_link{
	color: var(--rouge);
	cursor: pointer;
}

.loaderSuppression{
	margin: 20px 0px;
	font-size: 14px;
	display: none;
}

.comments_link{
	color: var(--gris-sombre);
}

.text_contenu{
	margin-top: 5px;
}

.text_contenu{
	color: var(--gris-semi-sombre);
}

.td_categorie{
	max-width: 160px;
}

.ul_categorie_post{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style: none;
}

.ul_categorie_post span{
	display: block;
	width: 100%;
}

.ul_categorie_post li{
	margin-right: 10px;
}

.ul_categorie_post li a{
	text-decoration: none;
	color: var(--bleu-ciel);
}

.ul_categorie_post li a:hover{
	text-decoration: underline;
}

.td_categorie p a{
	font-size: 12px;
	color: var(--bleu-ciel);
	text-decoration: none;
}

.td_categorie p a:hover{
	text-decoration: underline;
}


.form_add_article{
	width: 100%;
	padding: 40px;
}

.f_add_article{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

.titre_formulaire{
	width: 100%;
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.zone_champs_formulaire{
	width: 73%;
}

.container_label_form{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.label_form{
	display: block;
	margin-bottom: 20px;
}

.p_liste_categorie{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.p_liste_categorie span{
	font-size: 12px;
}

.p_liste_categorie a{
	margin-left: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	text-decoration: none;
	transition: .2s;
}

.p_liste_categorie a i{
	font-size: 10px;
	margin-right: 5px;
}

.p_liste_categorie a:hover{
	text-decoration: underline;
}

.btn_update{
	color: var(--bleu);
}

.btn_delete{
	color: var(--rouge);
	cursor: pointer;
}

.label_form input, .label_form select, .label_form textarea{
	display: block;
	width: 100%;
	padding: 8px 10px;
	border-radius: 3px;
	background-color: var(--blanc);
	border: 1px solid var(--gris-claire);
	font-size: 16px;
	font-weight: 600;
}

.label_form_64{
	width: 64%;
}

.label_form_34{
	width: 34%;
}

.response_form{
	width: 100%;
	margin: 0px 0px 20px;
	font-size: 14px;
}

.content_zone_champs_formulaire label{
	display: block;
	width: 100%;
	margin-bottom: 20px;
}

.content_zone_champs_formulaire label input, .content_zone_champs_formulaire label select, 
.content_zone_champs_formulaire label textarea{
	display: block;
	width: 100%;
	padding: 8px 10px;
	border-radius: 3px;
	background-color: var(--blanc);
	border: 1px solid var(--gris-claire);
	font-size: 16px;
	font-weight: 600;
}

.zone_categories_article{
	width: 25%;
}

.btn_submit_form_add_article{
	margin-top: 20px;
}

.container_zone_categories_article h4{
	margin-bottom: 10px;
}

.container_preview_image{
	width: 100%;
    min-height: 90px;
    max-height: 290px;
	border: 1px dashed var(--gris-claire);
	border-radius: 10px;
	overflow: hidden;
}

.container_preview_image img{
	display: block;
	width: 100%;
    min-height: 90px;
    max-height: 290px;
    object-fit: cover;
}

.label_image_article input{
	display: none;
}

.label_image_article{
	display: block;
	width: 100%;
	padding: 5px 10px;
	background-color: var(--gris-light);
	border: 1px dashed var(--gris-claire);
	border-radius: 10px;
	margin-top: 10px;
	cursor: pointer;
}

.liste_categories{
	margin-top: 20px;
}

.btns_priorite{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.btns_priorite label{
	width: 48%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.btns_priorite label small{
	margin-left: 5px;
}

.liste_categories h4{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.liste_categories h4 a{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	background-color: var(--bleu);
	color: var(--blanc);
	border: none;
	cursor: pointer;
	border-radius: 50%;
	font-size: 18px;
	transition: .2s;
	text-decoration: none;
}

.liste_categories h4 a:hover{
	background-color: var(--bleu-fonce);
}

.ul_liste_categories{
	list-style: none;
	border: 1px dashed var(--gris-claire);
	border-radius: 10px;
}

.ul_liste_categories > li{
	border-bottom: 1px dashed var(--gris-claire);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.ul_liste_categories > li > label{
	margin-left: 10px;
	padding: 5px 0px;
	font-size: 13px;
	cursor: pointer;
}

.ul_liste_categories > li > button{
	margin-right: 10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--noire);
	color: var(--blanc);
	border: none;
	cursor: pointer;
}

.ul_sous_liste_categories{
	background-color: var(--gris-light);
	width: 100%;
	list-style: none;
/*	display: none;*/
}

.ul_sous_liste_categories li {
	display: inline-block;
	margin-left: 30px;
	padding: 5px 0px;
	border-bottom: 1px dashed var(--gris-claire);
	width: calc(100% - 30px);
}

.ul_sous_liste_categories li label{
	color: var(--gris-semi-sombre);
	font-size: 13px;
	cursor: pointer;
}


.alert_article{
	padding: 10px;
	border-radius: 3px;
	margin-bottom: 20px;
}

.success_alert_article{
	color: var(--vert);
	background-color: var(--vert-pal);
	border: 1px solid var(--vert);
}

.error_alert_article{
	color: var(--rouge);
	background-color: var(--rouge-pal);
	border: 1px solid var(--rouge);
}

.annoncePochette{
	margin-top: 40px;
}


.response_menu_afrikmar{
	width: 100%;
	padding: 10px 20px;
	border-top: 1px solid var(--marron);
	display: none;
}

.response_menu_afrikmar button{
	background-color: transparent;
	cursor: pointer;
	border: none;
}

.response_menu_afrikmar button i{
	font-size: 25px;
	color: var(--marron);
}

.Container_menu_responsif{
	position: fixed;
	top: 0px;
	right: -350px;
	bottom: 0px;
	overflow: auto;
	z-index: 7;
	background-color: var(--blanc);
	width: 300px;
	padding-bottom: 20px;
	transition: .4s;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
}

@media screen and (max-width: 350px){
	.Container_menu_responsif{
		width: 80%;
	}
}

.lien_logo_response_afrikmar{
	display: block;
	width: 100%;
	border-bottom: 4px solid var(--marron);
}

.lien_logo_response_afrikmar img{
	display: block;
	width: 80%;
	margin: 0px auto;
}

.btn_abonnement_header_response{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 20px;
	background-color: var(--degradee-noir);
	margin-bottom: 20px;
}

.btn_abonnement_header_response a{
	font-size: 14px;
	color: var(--gris-sombre);
	text-decoration: none;
}

.accompagne_menu_responsif_afrikmar{
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: var(--degradee-noir);
	z-index: 6;
	display: none;
}

.ul_nav_response{
	list-style: none;
	padding: 0px 20px;
}

.ul_nav_response li a{
	display: block;
	width: 100%;
	padding: 10px 0px;
	border-bottom: 1px solid var(--marron);
	text-decoration: none;
	color: var(--gris);
	font-size: 14px;
}

.ul_nav_response li a:hover{
	font-weight: 600;
	color: var(--noire);
}

.reseaux_sociaux_header_response{
	margin-top: 80px;
	padding: 0px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.reseaux_sociaux_header_response a{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 7px 20px;
	text-decoration: none;
	border-radius: 3px;
	width: 23.5%;
	color: var(--blanc);
	font-size: 20px;
}


/*Responsivité*/

@media screen and (max-width: 1220px){
	nav{
		background-color: var(--bleu);
		padding: 0px 20px;
		z-index: 3;
	}

	.ul_nav > li > a{
		padding: 15px 10px;
		font-size: 12px;
	}
}

@media screen and (max-width: 940px){
	nav{
		display: none;
	}

	.response_menu_afrikmar{
		display: block;
	}
}

@media screen and (max-width: 795px){
	.reseaux_sociaux_header{
		display: none;
	}
}

@media screen and (max-width: 760px){
	.contenair_articles, .left_bar_articles{
		width: 100%;
	}
}


@media screen and (max-width: 750px){

	.first_part{
		position: relative;
		width: 100%;
		max-height: 380px;
		border-radius: 10px;
		overflow: hidden;
		z-index: 0;
		transition: .4s;
	}

	.seconde_part{
		width: 100%;
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 5px;
		z-index: 0;
		margin-top: 5px;
	}

	.first_part img{
		display: block;
		width: 100%;
	    max-height: 430px;
	    object-fit: cover;
		transition: .4s;
	}

	.content_seconde_part{
		position: relative;
		width: calc(50% - 2.5px);
		height: 212px;
		border-radius: 10px;
		background-color: red;
		overflow: hidden;
		z-index: 0;
	}

	.content_seconde_part img{
		display: block;
		width: 100%;
	    min-height: 212px;
	    max-height: 310px;
	    object-fit: cover;
		transition: .4s;
	}

}




@media screen and (max-width: 615px){

	.image_article_afrikmar, .details_articles_afrikmar{
		width: 100%;
	}

	.image_article_afrikmar span{
		height: 180px;
		border-radius: 10px;
		overflow: hidden;
	    background-color: var(--noire);
	}

	.image_article_afrikmar span img{
		display: block;
		width: 100%;
	    min-height: 180px;
	    object-fit: cover;
	    transition: .2s;
	}
}

@media screen and (max-width: 528px){
	.btn_abonnement_header{
		display: none;
	}
}


@media screen and (max-width: 480px){
	.recent_article{
		width: 49%;
	}
}



@media screen and (max-width: 400px){
	.recent_article, .article_afrikmar{
		width: 100%;
	}
}


@media screen and (max-width: 390px){

	.content_seconde_part{
		position: relative;
		width: 100%;
		height: 212px;
	}

}