@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');





:root {

    --main-nav-background: #1f2024;

    --main-nav-secondry-background: rgba(0,0,0,0.2);

    --main-nav-primary-color: #0088ff;

    --main-nav-secondry-text-color: rgba(225,255,255,0.5);

    --main-nav-main-border-color: rgba(255,255,255,0.07);

    --main-nav-secondry-border-color: rgba(255,255,255,0.04);

    --brand-color: #0669ff;

    --dark-brand-color: #0051cc;

    --base-color: #2c2f34;

    --Soft-orange: rgb(233, 171, 83);

    --Soft-red: hsl(5, 85%, 63%);

    --color--vivid-purple: #9b51e0;

    --color--light-green-cyan: #7bdcb5;

    --color--vivid-green-cyan: #00d084;

}



*, *::before, *::after {

    margin: 0;

    padding: 0;

    outline: none;

    border: none;

    list-style: none;

    text-decoration: none;

    box-sizing: border-box;

}







body {

    max-width: 1580px;

    height: auto;

    font-family: 'Poppins', sans-serif;

    background: #fff;

    position: relative;

}



body.fixed {

    overflow: hidden;

}



section {

    width: 100%;

    padding: 3rem 0;

    display: grid;

    height: fit-content;

    place-items: center;

}



.container {

    width: 96%;

    transition: .3s ease;

}



h3 {

    font-weight: 500;

}



@media screen and (min-width: 1180px) {

    .container {

        width: 86%;

    }

}



img {

    width: 100%;

    display: block;

    overflow: hidden;

}



.text {

    font-size: .9rem;

    font-weight: 400;

    letter-spacing: 0.7px;

    line-height: 1.3;

}



.alert {

    width: 100%;

    padding: .8rem 1rem;

    display: block;

    border-radius: 5px;

}



.error {

    color: rgba(168, 3, 3, 0.747);

    background: rgba(255, 4, 4, 0.24);

    border: 1px solid rgba(168, 3, 3, 0.747);

}



.success {

    color: rgba(3, 168, 72, 0.747);

    background: rgba(4, 255, 117, 0.24);

    border: 1px solid rgba(3, 168, 72, 0.747);

}









/* -------------------------- Header Style -------------------------- */





.nav-btn {

    display: block;

    font-size: 25px;

    color: #fff;

    background: transparent;

    display: none;

    cursor: pointer;

}





header {

    width: 100%;

    height: auto;

    display: grid;

    place-items: center;

    position: relative;

    box-shadow: 0 0 20px rgba(0,0,0,0.2);

}



header .nav-overlay {

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    position: fixed;

    background: var(--main-nav-secondry-background);

    display: none;

    z-index: 10;

    transition: 400ms linear;

}



.header-container {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.header-container .nav1 {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: .7rem;

    background: #fff;

    border-bottom: 1px solid #ddd;

}



.header-container .nav1 ul {

    display: flex;

    gap: 1rem;

}



.header-container .nav1 ul li a {

    color: var(--base-color);

    font-size: 11px;

    letter-spacing: 1px;

    font-weight: 600;

    text-transform: uppercase;

    transition: .3s ease;

}



.header-container .nav1 ul li a:hover {

    color: var(--main-nav-primary-color);

}



.header-container .nav1 .socials {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.header-container .nav1 .socials a {

    font-size: 15px;

    transition: .3s ease;

    color: #555;

}



.header-container .nav1 .socials a:hover {

    color: var(--main-nav-secondry-background);

}





.header-container .nav2 {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5rem;

}



.header-container .nav2 .logo {

    width: 10rem;

    margin-left: .7rem;

}



.header-container .nav2 .ads,

.m-aside2 .m-aside-container main .ads {

    max-width: 728px;

    transition: 300ms ease;

}



.header-container .nav2 .mob-ad,
.m-aside-container main .categorie-container .mob-ad,
.header-container #afrikad-slot-2738-mob-ads {

    display: none !important;

    transition: 300ms ease;

}





.header-container nav {

    width: 100%;

    height: 3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: var(--main-nav-background);

}





@media screen and (min-width: 1100px) {

    

    .nav-content .ref {

        display: none;

    }

    

    .nav-content {

        width: 100%;

        height: 100%;

    }

    

    .links-content {

        width: 100%;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    

    .links-content ul {

        display: flex;

        align-items: center;

        height: 100%;

    }

    

    .links-content ul li {

        height: 100%;

        position: relative;

    }

    

    .links-content ul li a {

        height: 100%;

        padding: 0 .7rem;

        color: #f1f1f1;

        text-transform: uppercase;

        font-size: 14px;

        font-weight: 500;

        display: grid;

        place-items: center;

        letter-spacing: .5px;

        transition: .3s ease;

        position: relative;

    }

    

    .links-content ul li a.active,

    .links-content ul li a:hover {

        background: var(--main-nav-primary-color);

    }

    

    .links-content ul li a.active::after {

        content: '';

        position: absolute;

        display: block;

        height: 6px;

        width: 100%;

        background: var(--main-nav-primary-color);

        bottom: -4px;

    }



    .nav-content .search-form {

        display: none;

    }



    .links-content .socials {

        display: none;

    }



}





nav form {

    height: 100%;

    width: fit-content;

    display: flex;

    align-items: center;

    gap: .4rem;

    padding: 0 .7rem;

    border-left: 1px solid var(--base-color);

}



nav form input {

    width: 170px;

    background: transparent;

    color: #f0f0f0;

    font-size: 14px;

    font-weight: 400;

    padding: .2rem;

}



nav form input::placeholder {

    color: #777;

}



nav form button {

    background: transparent;

    font-size: 20px;

    color: #777;

    cursor: pointer;

}







/* ****************************** Fin Header ****************************** */









/* ****************************** La Une Section ****************************** */





.la-une-container {

    display: grid;

    gap: 0.4rem;

    grid-template-columns: repeat(4, auto);

}



.la-une-container .bloc1 {

    grid-column: span 2;

    grid-row: span 2;

    height: 370px;

}



.la-une-container .bloc {

    position: relative;

    display: block;

    overflow: hidden;

}



.la-une-container .bloc:hover a img {

    transform: scale(1.05);

}



.la-une-container .bloc::before {

    position: absolute;

    content: "";

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: .5;

    transition: all 100ms ease-in;

    z-index: 1;

    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000000 100%);

}



.la-une-container .bloc:hover::before {

    opacity: .6;

}



.la-une-container .bloc > a {

    width: 100%;

    height: 100%;

    position: absolute;

}



.la-une-container .bloc > a img {

    height: 100%;

    object-fit: cover;

    object-position: center;

    position: absolute;

    top: 0;

    left: 0;

    transition: 300ms ease;

}



.la-une-container .bloc .content {

    width: 100%;

    height: 100%;

    position: relative;

    z-index: 3;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

}



.la-une-container .bloc .content .txt .category-btn {

    width: fit-content;

    height: fit-content;

}



.category-btn {

    padding: .4rem .6rem;

    width: fit-content;

    height: fit-content;

    font-size: 12px;

    letter-spacing: 0.5px;

    color: #f1f1f1;

    border-radius: 3px;

    font-weight: 500;

    background: var(--dark-brand-color);

}



.la-une-container .bloc .content .txt {

    width: 100%;

    height: fit-content;

    color: #f1f1f1;

    word-wrap: break-word;

    display: flex;

    flex-direction: column;

    padding: 0.7rem;

    gap: 0.4rem;

}



.la-une-container .bloc1 .content .txt h1 {

    font-size: 25px;

    font-weight: 600;

}



.la-une-container .bloc .content .txt h2 {

    font-size: 16px;

    font-weight: 600;

}



.la-une-container .bloc1 .content .txt h1 a,

.la-une-container .bloc .content .txt h2 a {

    color: #f1f1f1;

    letter-spacing: 0.4px;

}









/* ****************************** Fin La Une ****************************** */









/* ****************************** M-Aside Style ****************************** */







.m-aside {

    width: 100%;

    height: auto;

    display: grid;

    place-items: center;

    margin-bottom: 3rem;

}



.m-aside-container {

    display: grid;

    grid-template-columns: auto 33%;

    gap: 2rem;

}



.m-aside-container main {

    display: flex;

    flex-direction: column;

    gap: 3rem;

}



.m-aside-container main .posts-recents {

    display: grid;

    grid-template-columns: 1fr;

    gap: .5rem;

}



.m-aside-container main .posts-recents > .span {

    width: 100%;

    font-size: 17px;

    font-weight: 500;

    color: var(--Soft-red);

    position: relative;

}



.m-aside-container main .posts-recents > .span::after {

    content: "";

    width: 3rem;

    position: absolute;

    height: 2px;

    background: var(--Soft-red);

    bottom: -10px;

    left: 0;

}



.posts-recents-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    border-top: 2px solid var(--main-nav-secondry-background);

    padding-top: 1.5rem;

}



.posts-recents-container .bloc1 {

    display: block;

    position: relative;

    overflow: hidden;

    min-height: 350px;

}



.posts-recents-container .bloc1::before {

    position: absolute;

    content: "";

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: .5;

    transition: all 100ms ease-in;

    z-index: 1;

    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000000 100%);

}



.posts-recents-container .bloc1:hover::before {

    opacity: .6;

}



.posts-recents-container .bloc1 > a {

    height: 100%;

    width: 100%;

    display: block;

    position: absolute;

}



.posts-recents-container .bloc1 a img {

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    object-fit: cover;

    object-position: center;

}



.posts-recents-container .bloc1 .content {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: flex-end;

    z-index: 5;

    position: relative;

}



.posts-recents-container .bloc1 .content .txt {

    display: flex;

    flex-direction: column;

    gap: .7rem;

    color: #f1f1f1;

    letter-spacing: 0.5px;

    padding: 0.8rem;

    width: 100%;

}



.posts-recents-container .bloc1 .content .txt > a {

    background: var(--Soft-red);

}



.posts-recents-container .bloc1 .content .txt h2 {

    font-weight: 500;

    font-size: 16px;

    letter-spacing: 1px;

}



.posts-recents-container .bloc1 .content .txt h2 a {

    color: #f1f1f1;

    transition: 300ms ease;

}



.posts-recents-container .bloc1 .content .txt h2 a:hover {

    color: var(--Soft-red);

}





.posts-recents-container .bloc2 {

    display: grid;

    grid-template-columns: 1fr;

    gap: .7rem;

}



.posts-recents-container .bloc2 article {

    display: grid;

    grid-template-columns: 7.5rem auto;

    gap: .7rem;

}



.posts-recents-container .bloc2 article  > a {

    transition: 300ms ease;

}



.posts-recents-container .bloc2 article  > a:hover {

    filter: saturate(50%);

}



.posts-recents-container .bloc2 article .content {

    display: flex;

    flex-direction: column;

    gap: .5rem;

}



.posts-recents-container .bloc2 article .content h3 {

    font-size: 12px;

    letter-spacing: 0.5px;

    font-weight: 500;

}



.posts-recents-container .bloc2 article .content h3 a {

    color: var(--base-color);

    transition: 300ms ease;

}



.posts-recents-container .bloc2 article .content h3 a:hover {

    color: var(--Soft-red);

}









/* ****************************** Politique Section ****************************** */







.politique {

    width: 100%;

    display: grid;

    gap: .5rem;

    grid-template-columns: auto;

    background: var(--main-nav-background);

    padding: 1.5rem;

    color: #ccc;

}



.politique > .span {

    width: 100%;

    font-size: 17px;

    font-weight: 500;

    color: var(--Soft-orange);

    position: relative;

}



.politique > .span::after {

    content: "";

    width: 3rem;

    position: absolute;

    height: 2px;

    background: var(--Soft-orange);

    bottom: -0.65rem;

    left: 0;

}



.politique .content {

    width: 100%;

    display: grid;

    gap: 2.2rem;

    grid-template-columns: auto;

    padding-top: 1.5rem;

    border-top: 2px solid var(--main-nav-main-border-color);

}



.politique .content .a1 {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

}



.politique .content .a1 > a img,

.politique .content .a2 article > a img {

    transition: 300ms linear;

}



.politique .content .a1 > a img:hover,

.politique .content .a2 article > a img:hover {

    filter: saturate(0);

}



.politique .content .a1 .txt {

    display: flex;

    justify-content: space-between;

    flex-direction: column;

    gap: .3rem;

}



.politique .content .a1 .txt h2 {

    font-size: 16px;

    font-weight: 600;

}



.politique .content .a1 .txt h2 a,

.politique .content .a2 article .txt h3 a {

    color: #f1f1f1;

    transition: 300ms ease;

}



.politique .content .a1 .txt h2 a:hover,

.politique .content .a2 article .txt h3 a:hover {

    color: var(--Soft-orange);

}



.politique .content .a1 .txt p {

    font-size: 13px;

    line-height: 19px;

    letter-spacing: 0.5;

    font-weight: 400;

}



.politique .content .a1 .txt .link {

    width: fit-content;

    height: auto;

    font-size: 12.5px;

    font-weight: 400;

    border-radius: 3px;

    padding: .4rem .8rem;

    color: #f1f1f1;

    background: var(--Soft-orange);

    transition: 300ms ease;

    letter-spacing: .5px;

}



.politique .content .a1 .txt .link:hover {

    background: #ce9545;

}





.politique .content .a2 {

    width: 100%;

    gap: 2rem;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

}



.politique .content .a2 article {

    display: grid;

    grid-template-columns: 8rem auto;

    gap: 1rem;

}



.politique .content .a2 article .txt {

    display: flex;

    flex-direction: column;

    gap: .5rem;

}



.politique .content .a2 article .txt h3 {

    font-size: 12px;

}











/* ****************************** M-Aside Aside ****************************** */





.m-aside-container aside {

    height: 100%;

}



.m-aside-container aside .content {

    display: grid;

    gap: 1rem;

    grid-template-columns: 1fr;

}



.m-aside-container aside .content.mobile {

    display: none;

    transition: all 300ms ease;

}



.m-aside-container aside .content .pub,

.m-aside-container aside .content .socials,

.m-aside-container aside .content .derniers-articles,

.m-aside2 .m-aside-container aside .content .newsletter,

.m-aside2 .m-aside-container aside .content .categories {

    display: grid;

    grid-template-columns: 1fr;

    gap: .5rem;

}



.m-aside-container aside .content .pub span,

.m-aside-container aside .content .socials span,

.m-aside-container aside .content .derniers-articles span,

.m-aside2 .m-aside-container aside .content .newsletter span,

.m-aside2 .m-aside-container aside .content .categories span {

    font-size: 17px;

    color: var(--base-color);

    width: 100%;

    letter-spacing: .5px;

    position: relative;

    font-weight: 500;

}



.m-aside-container aside .content .pub span::after,

.m-aside-container aside .content .socials span::after,

.m-aside2 .m-aside-container aside .content .newsletter span::after,

.m-aside .m-aside-container aside .content .derniers-articles span::after,

.m-aside2 .m-aside-container aside .content .categories span::after {

    content: "";

    position: absolute;

    width: 3rem;

    left: 0;

    height: 2px;

    bottom: -10px;

    background: var(--base-color);

}



.m-aside-container aside .content .pub .img{

    max-width: 100%;

    display: grid;

    place-items: center;

    padding: 1.5rem 0;

    border-top: 2px solid var(--main-nav-secondry-background);

}



.m-aside-container aside .content .pub .img a {

    max-width: 500px;

}





.m-aside-container aside .content .socials .links {

    display: grid;

    grid-template-columns: 1fr;

    width: 100%;

    gap: 1rem;

    padding: 1.5rem 0;

    border-top: 2px solid var(--main-nav-secondry-background);

}



.m-aside-container aside .content .socials .links a {

    width: 100%;

    padding: 1rem 1.2rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    color: #f1f1f1;

    transition: 300ms linear;

    font-size: 17px;

}



.m-aside-container aside .content .socials .links a.fb {

    background: var(--dark-brand-color) !important;

}



.m-aside-container aside .content .socials .links a.ing {

    background: #c13584 !important;

}



.m-aside-container aside .content .socials .links a.twitter {

    background: var(--brand-color) !important;

}



.m-aside-container aside .content .socials .links a:hover {

    background: var(--base-color) !important;

}







/* ****************************** M-Aside2 Sport ****************************** */







.m-aside .m-aside-container main .politique.sport {

    background: #161646;

}



.m-aside .m-aside-container main .politique.sport > .span {

    color: var(--main-nav-primary-color);

}



.m-aside .m-aside-container main .politique.sport > .span::after {

    background: var(--main-nav-primary-color);

}





.m-aside .m-aside-container main .politique.sport .content .a1 .txt h2 a:hover,

.m-aside .m-aside-container main .politique.sport .content .a2 article .txt h3 a:hover {

    color: var(--main-nav-primary-color);

}





.m-aside .m-aside-container main .politique.sport .content .a1 .txt .link {

    background: var(--dark-brand-color);

}



.m-aside .m-aside-container main .politique.sport .content .a1 .txt .link:hover {

    background: var(--brand-color);

}









/* ----------------------------------- Fin M-Aside ----------------------------------- */









/* ----------------------------------- C-Plans Section ----------------------------------- */





.c-plans {

    background: #eee;

}



.c-plans-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

}



.c-plans-container .content {

    display: block;

}



.c-plans-container .content h4 {

    padding: .5rem 1rem;

    color: #f1f1f1;

    width: fit-content;

    border-radius: 3px;

}



.c-plans-container .culture-container h4 {

    background: var(--brand-color);

}



.c-plans-container .bplans-container h4 {

    background: var(--color--vivid-purple);

}



.c-plans-container .content .articles {

    margin-top: 1.5rem;

    display: grid;

    grid-template-columns: auto auto;

    gap: .5rem;

}



.c-plans-container .content .articles .bloc1,

.c-plans-container .content .articles .bloc2 {

    min-height: 300px;

}



.c-plans-container .content .articles .bloc1 {

    display: block;

    position: relative;

}



.c-plans-container .content .articles .bloc1::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: .5;

    z-index: 1;

    transition: 300ms linear;

    background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 0%,#000 100%);

}



.c-plans-container .content .articles .bloc1:hover::before {

    opacity: .4;

}



.c-plans-container .content .articles .bloc1 > a {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

}



.c-plans-container .content .articles .bloc1 a img {

    height: 100%;

}



.c-plans-container .content .articles .bloc1 .content {

    height: 100%;

    width: 100%;

    z-index: 5;

    display: flex;

    position: relative;

    align-items: flex-end;

}



.c-plans-container .content .articles .bloc1 .content .txt {

    width: 100%;

    height: fit-content;

    display: flex;

    flex-direction: column;

    gap: .6rem;

    padding: .5rem;

    color: #f1f1f1;

}



.c-plans-container .content .articles .bloc1 .content .txt .category-btn {

    background: var(--brand-color);

}



.c-plans-container .bplans-container .articles .bloc1 .content .txt .category-btn {

    background: var(--color--vivid-purple);

}



.c-plans-container .content .articles .bloc1 .content .txt h2 {

    font-size: 16px;

}



.c-plans-container .content .articles .bloc1 .content .txt h2 a {

    color: #f1f1f1;

}





.c-plans-container .content .articles .bloc2 {

    display: grid;

    grid-template-columns: 1fr;

    gap: .5rem;

    height: fit-content;

}



.c-plans-container .content .articles .bloc2 article {

    display: grid;

    grid-template-columns: 7rem auto;

    gap: .5rem;

    height: fit-content;

}



.c-plans-container .content .articles .bloc2 article a {

    transition: 300ms linear;

}



.c-plans-container .content .articles .bloc2 article > a:hover {

    filter: saturate(0);

}



.c-plans-container .content .articles .bloc2 article .txt {

    color: var(--base-color);

}



.c-plans-container .content .articles .bloc2 article .txt h3 {

    font-size: 12px;

}



.c-plans-container .content .articles .bloc2 article .txt h3 a {

    color: var(--base-color);

    transition: 300ms ease;

}



.c-plans-container .content .articles .bloc2 article .txt h3 a:hover {

    color: var(--brand-color);

}



.c-plans-container .bplans-container .articles .bloc2 article .txt h3 a:hover {

    color: var(--color--vivid-purple);

}









/* ----------------------------------- C-Plans Section ----------------------------------- */









/* ----------------------------------- M-Aside Section 2 ----------------------------------- */





.m-aside2 {

    padding: 3rem 0;

    margin-bottom: 0;

}



.m-aside-container .societe {

    background: #e4f7f6;

    padding: 1.5rem;

}



.m-aside-container .posts-recents.societe > .span {

    color: #0ab3af;

}



.m-aside-container .posts-recents.societe > .span::after,

.posts-recents.societe .posts-recents-container .bloc1 .content .txt > a {

    background: #0ab3af;

}



.posts-recents.societe .posts-recents-container,

.posts-recents.societe .posts-recents-container .bloc2 article {

    display: grid;

    grid-template-columns: 1fr;

}



.posts-recents.societe .posts-recents-container .bloc1 {

    height: 300px;

}



.posts-recents.societe .posts-recents-container .bloc1 .content .txt h2 a:hover {

    color: #f1f1f1;

}



.posts-recents.societe .posts-recents-container .bloc2 {

    grid-template-columns: repeat(5, 1fr);

}



.posts-recents.societe .posts-recents-container .bloc2 article .content h3 a:hover {

    color: #009591  ;

}









/* ****************************** M-Aside2 Ads ****************************** */





.m-aside-container main .main-ads,
.m-aside-container main .main-pub {

    width: 100%;

    display: grid;

    place-items: center;

}



.m-aside-container aside .main-ads {

    margin: 1rem auto 2rem;

    max-width: 728px;

}



.m-aside-container main .main-pub.mobile {

    display: none;

}



.m-aside-container main .main-pub a {

    max-width: 400px;

}







/* ****************************** M-Aside2 Sport ****************************** */







.m-aside2 .m-aside-container main .politique.sport {

    background: var(--main-nav-background);

}



.m-aside2 .m-aside-container main .politique.sport > .span {

    color: var(--color--vivid-green-cyan);

}



.m-aside2 .m-aside-container main .politique.sport > .span::after {

    background: var(--color--vivid-green-cyan);

}



.politique.sport .content {

    grid-template-columns: 1fr 1fr;

}



.m-aside2 .m-aside-container main .politique.sport .content .a1 .txt .link {

    background: var(--color--vivid-green-cyan);

}



.m-aside2 .m-aside-container main .politique.sport .content .a1 .txt .link:hover {

    background: var(--color--light-green-cyan);

}



.politique.sport .content .a1,

.politique.sport .content .a2 {

    grid-template-columns: 1fr;

}



.politique.sport .content .a2,

.politique.sport .content .a2 article {

    height: fit-content;

}





.m-aside2 .m-aside-container main .politique.sport .content .a1 .txt h2 a:hover,

.m-aside2 .m-aside-container main .politique.sport .content .a2 article .txt h3 a:hover {

    color: var(--color--vivid-green-cyan);

}





.m-aside2 .m-aside-container main .educ > .span,

.m-aside2 .m-aside-container main .educ-container .bloc1 .content .txt h2 a:hover,

.m-aside2 .m-aside-container main .educ-container .bloc2 article .content h3 a:hover {

    color: #f7b731;

}



.m-aside2 .m-aside-container main .educ > .span::after,

.m-aside2 .m-aside-container main .educ-container .bloc1 .content .txt > a {

    background: #f7b731;

}









/* ****************************** M-Aside2 Aside ****************************** */





.newsletter-container {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 1rem;

    padding: 1.5rem 0;

    border-top: 2px solid var(--main-nav-secondry-background);

}



.newsletter-container h4 {

    font-size: 24px;

    color: #777;

    text-align: center;

}



.newsletter-container form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.newsletter-container form .row {

    width: 100%;

    display: flex;

    gap: 0.5rem;

    align-items: center;

    padding: 0.8rem;

    border: 1px solid var(--main-nav-secondry-background);

    border-radius: 3px;

    transition: 300ms linear;

}



.newsletter-container form .row:hover {

    background: rgba(0,0,0,0.05);

}



.newsletter-container form .row i {

    color: rgba(0, 0, 0, .2);

    font-size: 18px;

}



.newsletter-container form .row input {

    font-size: 14px;

    width: 100%;

    text-align: center;

    font-weight: 400;

    background: transparent;

}



.newsletter-container form button {

    width: 100%;

    padding: .8rem;

    font-size: 15px;

    color: #f1f1f1;

    cursor: pointer;

    font-weight: 400;

    transition: 300ms linear;

    background: var(--brand-color);

}



.newsletter-container form button:hover {

    background: var(--dark-brand-color);

}



.categories-container {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    align-items: center;

    padding: 1.5rem 0;

    border-top: 2px solid var(--main-nav-secondry-background);

}



.categories-container a {

    width: fit-content;

    padding: .5rem 1.2rem;

    font-size: 15px;

    letter-spacing: 1px;

    border-radius: 3px;

    transition: 250ms linear;

    font-weight: 500;

    color: var(--dark-brand-color);

    border: 1px solid var(--dark-brand-color);

}



.categories-container a:hover {

    color: #f1f1f1;

    background: var(--dark-brand-color);

}









/* ****************************** Footer Section ****************************** */







footer {

    width: 100%;

    padding: 1rem 0;

    display: grid;

    place-items: center;

    background: var(--main-nav-background);

}



.footer-container {

    display: flex;

    align-items: center;

    position: relative;

    letter-spacing: 1px;

    justify-content: space-between;

}



.footer-container .bloc {

    display: flex;

    gap: .8rem;

    align-items: center;

}



.footer-container .bloc .logo {

    width: 7rem;

}



.footer-container span {

    font-size: 12px;

    color: #f1f1f1;

    font-weight: 400;

}



.footer-container span a {

    color: var(--main-nav-primary-color);

    font-weight: 500;

    position: relative;

}



.footer-container span.web-master {

    justify-items: right;

}



.footer-container span a::after {

    width: 0%;

    content: '';

    position: absolute;

    height: 2px;

    left: 0;

    bottom: -3px;

    transition: 300ms ease;

    background: #777;

}



.footer-container span a:hover::after {

    width: 3.5rem;

}



.footer-container .footer-nav {

    display: flex;

    align-items: center;

}



.footer-container .footer-nav li {

    position: relative;

}



@media screen and (min-width: 878px) {

    

    .footer-container .footer-nav li:not(:first-child)::before {

        content: '';

        position: absolute;

        width: 1.5px;

        height: 1.1rem;

        background-color: #777;

        transform: rotate(25deg);

    }



}



.footer-container .footer-nav li a {

    padding: 0 1rem;

    position: relative;

    font-size: 12px;

    font-weight: 400;

    color: #d6d6d6;

    transition: 300ms ease;

}



.footer-container .footer-nav li a:hover {

    color: var(--main-nav-primary-color);

}









/* ****************************** Fin Footer ****************************** */







/* ****************************** Categorie Page ****************************** */





.categorie-container {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

}



.categorie-container h1,

.categorie-container.search .bloc h1 {

    width: fit-content;

    font-size: 30px;

    color: var(--base-color);

    letter-spacing: .5px;

}



.categorie-container.search .bloc {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 1rem;

}



.categorie-container.search .bloc span {

    font-size: 19px;

    font-weight: 400;

    letter-spacing: .5px;

}



.categorie-container .content {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 2rem;

}



.categorie-container .content article {

    display: grid;

    grid-template-columns: auto;

    gap: .7rem;

}



.categorie-container .content article:hover > a img {

    filter: saturate(0);

}



.categorie-container .content article > a img {

    transition: 300ms linear;

}



.categorie-container .content article .txt {

    color: #666;

}



.categorie-container .content article .txt h2 {

    font-size: 20px;

    margin-top: .4rem;

}



.categorie-container .content article .txt h2 a {

    display: block;

    transition: 400ms ease;

    color: #333;

}



.categorie-container .content article .txt h2 a:hover {

    color: var(--main-nav-primary-color);

}





.categorie-container .pagination {

    width: 100%;

    padding: 1.5rem 1rem;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 1rem;

}



.categorie-container .pagination a {

    border-radius: 5px;

    font-weight: 500;

    padding: 0.7rem 1rem;

    overflow: hidden;

    color: #0c21e24f;

    background: transparent;

    border: 1px solid #0c21e24f;

    transition: all 300ms linear;

    box-shadow: 0 0 10px rgba(0, 0, 0, .05);

}



.categorie-container .pagination a.actif {

    color: #fff;

    background: #0c21e24f;

    border: 1px solid transparent;

}



.categorie-container .pagination a:hover {

    color: #fff;

    background: #0c21e24f;

    border: 1px solid transparent;

}





.m-aside .m-aside-container aside .content .derniers-articles span {

    color: var(--Soft-red);

}



.m-aside .m-aside-container aside .content .derniers-articles span::after {

    background: var(--Soft-red);

}



.derniers-articles .content {

    padding: 1.5rem 0;

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: .7rem;

    border-top: 2px solid var(--main-nav-secondry-background);

}



.derniers-articles .content article {

    display: grid;

    grid-template-columns: 7rem auto;

    gap: .5rem;

}



.derniers-articles .content article .txt {

    color: #666;

    display: flex;

    flex-direction: column;

    gap: .5rem;

}



.derniers-articles .content article .txt a {

    font-size: 13px;

    letter-spacing: .5px;

    font-weight: 600;

    color: var(--base-color);

    transition: 400ms ease;

}



.derniers-articles .content article .txt a:hover {

    color: var(--Soft-red);

}









/* ****************************** Fin Categorie Page ****************************** */









/* ****************************** Article Page ****************************** */







.article-container {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 3rem;

}



.article-container article {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.article-container article h1 {

    font-size: 35px;

    color: var(--base-color);

}



.article-container article .bloc {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.article-container article .bloc .auteur {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.article-container article .bloc .auteur .img {

    width: 3rem;

    height: 3rem;

    border-radius: 5px;

    overflow: hidden;

}



.article-container article .bloc .auteur .ref {

    display: block;

    color: #555;

}



.article-container article .bloc .auteur .ref .nom {

    font-size: 15px;

}



.article-container article .bloc .vues {

    display: flex;

    gap: .4rem;

    align-items: center;

    font-size: 23px;

    color: var(--main-nav-primary-color);

}



.article-container article .bloc .vues i {

    color: var(--main-nav-secondry-background);

}



.article-container article .bloc .vues p {

    font-weight: 600;

}



.article-container article .img {

    margin-bottom: 1rem;

}



.article-container article .texte {

    font-size: 13.5px;

    text-align: left;
    
    font-weight: 400;

    overflow-clip-margin: content-box;

    overflow: clip;

}



.article-container article .texte p img {
    width: 100% !important;
    height: auto !important;
    margin: auto !important;
}









/* ****************************** Page Contact ****************************** */







.contact-container {

    display: grid;

    align-items: center;

    justify-content: space-between;

    grid-template-columns: 40% auto;

}



.contact-container .infos {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.contact-container .infos .bloc {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.contact-container .infos .bloc span,

.contact-container form span {

    font-size: 19px;

    position: relative;

    font-weight: 500;

    letter-spacing: 1px;

}



.contact-container .infos .bloc span::after {

    content: '';

    position: absolute;

    width: 2rem;

    height: 2px;

    bottom: 0;

    left: 0;

    background: var(--brand-color);

}



.contact-container .infos .bloc p {

    font-size: 15px;

    font-weight: 400;

}



.contact-container .infos .bloc a {

    display: flex;

    gap: .5rem;

    align-items: center;

    width: fit-content;

    font-size: 15px;

    letter-spacing: 1px;

    transition: 300ms ease;

    font-weight: 600;

    color: var(--base-color);

}



.contact-container .infos .bloc a:hover {

    color: var(--dark-brand-color);

}



.contact-container .infos .bloc a i {

    font-size: 18px;

    color: #777;

}





.contact-container form,

.login-container form {

    width: 500px;

    display: flex;

    flex-direction: column;

    gap: 1.3rem;

    padding: 3rem 2rem;

    border-radius: 5px;

    transition: 300ms ease;

    background: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);

    box-shadow: 0 0 20px rgba(0,0,0,0.05);

}



.contact-container form > span::after,

.login-container form > span::after {

    content: '';

    width: 3.5rem;

    height: 2px;

    bottom: 0;

    left: 0;

    background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);

    position: absolute;

}



.contact-container form input,

.contact-container form textarea {

    width: 100%;

    background: transparent;

    color: var(--base-color);

    padding: .5rem;

    font-size: 15px;

    resize: none;

    letter-spacing: 1px;

    font-weight: 500;

    border-bottom: 2px solid var(--main-nav-secondry-background);

}



.contact-container form .submit,

.login-container form .submit {

    width: 100%;

    letter-spacing: 1px;

    font-size: 16px;

    font-weight: 500;

    padding: .7rem;

    background: var(--dark-brand-color);

    color: #f1f1f1;

    cursor: pointer;

    transition: 300ms linear;

}



.contact-container form .submit:hover,

.login-container form .submit:hover {

    background: var(--brand-color);

}







/* ****************************** Page Connexion ****************************** */







.login {

    min-height: 65vh;

}



.login-container {

    display: grid;

    place-items: center;

}



.login-container form > span {

    font-size: 19px;

    font-weight: 500;

    color: #333;

    position: relative;

}



.login-container form input,

.login-container form textarea {

    width: 100%;

    background: transparent;

    color: var(--base-color);

    padding: .5rem;

    font-size: 15px;

    letter-spacing: 1px;

    font-weight: 500;

    border-bottom: 2px solid var(--main-nav-secondry-background);

}



.login-container form input::placeholder,

.login-container form textarea::placeholder {

    color: #666;

}







/* ****************************** About Page****************************** */







.about {

    padding: 3rem 0 6rem;

}



.about-container {

    display: flex;

    gap: 3rem;

    flex-direction: column;

}



.about-container h1 {

    font-size: 35px;

    letter-spacing: 1px;

    color: var(--base-color);

    position: relative;

}



.about-container h1::before {

    content: '';

    position: absolute;

    left: 0;

    bottom: -3px;

    width: 5rem;

    height: 3px;

    background: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);

}



.about-container .content {

    display: grid;

    gap: 6.5rem;

    grid-template-columns: auto 350px;

}



.about-container .content .txt {

    display: block;

}



.about-container .content .txt p {

    margin-top: 1rem;

    font-size: 15px;

    font-weight: 400;

    color: var(--base-color);

}



.about-container .content .pprofil {

    width: 100%;

    height: fit-content;

    position: relative;

    margin-left: -3rem;

    transition: all 400ms ease;

}



.about-container .content .pprofil::before {

    position: absolute;

    content: "";

    bottom: -1rem;

    left: -1rem;

    z-index: -1;

    width: calc(50% + 1rem);

    height: calc(50% + 1rem);

    background: -webkit-linear-gradient(to left, #d3cce3, #e9e4f0); /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(to left, #d3cce3, #e9e4f0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    transition: 400ms ease;

}



.about-container .content .pprofil:hover::before {

    width: calc(100% + 2rem);

    height: calc(100% + 2rem);

}



.about-container .content .pprofil .infos {

    position: absolute;

    top: 50%;

    right: -2.5rem;

    width: fit-content;

    padding: .7rem;

    border-radius: 7px;

    background: -webkit-linear-gradient(to left, #6441a5, #2a0845); /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(to left, #6441a5, #2a0845); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    display: flex;

    flex-direction: column;

    gap: .8rem;

    color: #fff;

    transition: 400ms ease;

}



.about-container .content .pprofil .infos span {

    font-size: .853rem;

    font-weight: 500;

}



.about-container .content .pprofil .infos .role,

.about-container .content .pprofil .infos .nom {

    font-weight: 700;

    letter-spacing: 1px;

    font-size: 1.2rem;

}









/* ****************************** Mentions L�gales ****************************** */







.mentions-container {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1rem;

}



.mentions-container h1 {

    margin-bottom: 1rem;

    font-size: 2.5rem;

}



.mentions-container h2 {

    margin: 0.5rem 0;

}





.mentions-container ul li {

    margin-top: 0.5rem;

    list-style-type: square;

}

















/* ****************************** Media Queries ****************************** */









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



    .nav-btn {

        display: block;

    }



    .open-nav {

        margin-left: 1rem;

    }



    .nav-content {

        position: fixed;

        top: 0;

        left: -100%;

        width: 17rem;

        height: 100vh;

        z-index: 15;

        display: block;

        padding-top: 1.5rem;

        visibility: hidden;

        transition: all 400ms ease;

        background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);

    }



    .nav-content.active {

        left: 0;

        visibility: visible;

    }



    header .nav-overlay.active {

        display: block;

    }



    .nav-content .close-nav {

        position: absolute;

        margin: 0 10px;

        right: 0;

        height: 2rem;

        width: 2rem;

        font-size: 16px;

        color: #fff;

        border-radius: 50%;

        background: var(--main-nav-secondry-background);

        box-shadow: 0 0 10px rgba(0,0,0,0.15);

    }



    .nav-content .links-content {

        width: 100%;

        height: 100%;

        padding: 2.5rem 0 8.3rem;

        overflow: auto;

    }



    .nav-content .links-content::-webkit-scrollbar {

        display: none;

    }



    .nav-content .links-content ul {

        width: 100%;

        height: auto;

        display: block;

    }



    .nav-content .links-content ul li {

        width: 100%;

        position: relative;

    }



    .nav-content .links-content ul li a {

        width: 100%;

        display: block;

        height: auto;

        padding: .5rem .7rem;

        font-size: 14px;

        letter-spacing: 1px;

        font-weight: 600;

        color: #f1f1f1;

        transition: .3s ease;

    }



    .nav-content .links-content ul li a:hover,

    .nav-content .links-content ul li a.active {

        color: var(--main-nav-secondry-text-color);

    }



    .nav-content .links-content .ref {

        margin-top: 10px;

        padding: .7rem .5rem;

        border-top: 1px solid var(--main-nav-secondry-text-color);

    }



    .nav-content .links-content .socials {

        padding: 10px 0 0 1.3rem;

        width: 100%;

        display: flex;

        align-items: center;

        gap: 2rem;

    }



    .nav-content .links-content .socials a {

        color: #f1f1f1;

        transition: .3s ease;

    }



    .nav-content .links-content .socials a:hover {

        color: var(--main-nav-secondry-text-color);

    }





    .nav-content .search-form {

        width: 17rem;

        height: fit-content;

        bottom: 0;

        padding: .6rem 0;

        position: fixed;

        background: rgba(155, 81, 224, 0.267);

        backdrop-filter: blur(15px);

    }



    .nav-content form {

        height: fit-content;

        width: 90%;

        padding: .5rem;

        margin: 10px auto;

        border: 1px solid #dfdfdf;

        overflow: hidden;

        border-radius: 30px;

    }



    .nav-content form input {

        width: 100%;

        color: #f0f0f0;

    }



    .nav-content form input::placeholder {

        color: #dfdfdf;

    }



    .nav-content form button {

        color: #dfdfdf;

    }



}



@media screen and (min-width: 991px) {



    

    .m-aside-container aside .content {

        position: sticky;

        top: 30px;

    }



    

}




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

    
    .header-container .nav2 .ads {

        display: none !important;
        
    }
    
    
    
    .m-aside-container main .categorie-container .mob-ad,
    .header-container .nav2 .mob-ad, 
    .header-container #afrikad-slot-2738-mob-ads {

        display: block !important;

    }



    /* M-aside */



    .m-aside-container aside {

        width: 100%;

        display: grid;

        place-items: center;

    }



    .m-aside-container aside .content {

        width: 100%;

    }



    .m-aside-container {

        grid-template-columns: auto;

    }





    /* C-Plans */





    .c-plans-container .content .articles {

        grid-template-columns: auto;

    }



    .c-plans-container .content .articles .bloc1 {

        height: 300px;

    }



    .c-plans-container .content .articles .bloc2 {

        min-height: 0;

    }



    .c-plans-container .content .articles .bloc2 article > a {

        max-width: 8rem;

    }





    /* Footer */



    .footer-container .bloc {

        gap: .3rem;

        flex-direction: column;

    }







    /* About page */





    .about-container .content {

        gap: 4rem;

        grid-template-columns: auto;

    }



    .about-container .content .pprofil {

        width: 86%;

        max-width: 350px;

        margin: 0 auto;

    }



    

}




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





    /* Footer */



    .footer-container {

        gap: 1rem;

    }



    .footer-container,

    .footer-container .footer-nav {

        flex-direction: column;

    }



    .footer-nav {

        gap: .5rem;

    }





    /* Contact Page */



    

    .contact-container {

        gap: 1rem;

        grid-template-columns: 1fr 1fr;

    }



    .contact-container .infos,

    .contact-container form {

        width: 100%;

    }





}



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

    

    .m-aside-container main .main-ads,
    .m-aside-container main.home .main-ads,
    .m-aside-container aside .main-ads {

        display: none !important;

    }



}




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

    

    .la-une-container {

        grid-template-columns: auto auto;

    }



    .la-une-container .bloc {

        height: 180px;

    }



    .la-une-container .bloc1 {

        height: 300px;

    }





    /* M-Aside */



    .posts-recents-container {

        grid-template-columns: 1fr;

    }





    .posts-recents.societe .posts-recents-container .bloc2 {

        grid-template-columns: 1fr;

    }



    .posts-recents.societe .posts-recents-container .bloc2 article {

        grid-template-columns: 8rem auto;

    }



    .politique .content .a1,

    .politique .content .a2 {

        grid-template-columns: 1fr;

    }



    .politique.sport .content {

        grid-template-columns: 1fr;

    }





    

    .contact-container {

        gap: 3rem;

        grid-template-columns: 1fr;

    }





    

    .about-container .bloc {

        flex-direction: column;

        gap: 1rem;

    }



}



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


    .header-container .nav2 {

        gap: 3rem;
        flex-wrap: wrap;
        justify-content: center;

    }



    .la-une-container .bloc1 .content .txt h1 {

        font-size: 20px;

    }



    .la-une-container .bloc .content .txt h2 {

        font-size: 13px;

    }



    .m-aside-container main .main-pub.mobile {

        display: grid;

    }



    .article-container article h1 {

        font-size: 25px;

    }



    .m-aside .m-aside-container main.home {

        display: none;

    }



    .m-aside-container aside .content {

        width: 100%;

    }



    .m-aside-container aside .content.mobile {

        display: grid;

    }



    .m-aside-container aside .content.desk {

        display: flex;

        flex-direction: column-reverse;

    }



    



    .m-aside-container aside .content.desk .pub,

    .m-aside2 .m-aside-container aside .content .pub {

        display: none;

    }



    .posts-recents-container .bloc1 {

        height: auto;

    }



    .c-plans {

        display: none;

    }

    

    .c-plans-container {

        grid-template-columns: 1fr;

    }



    .categorie-container .content {

        grid-template-columns: auto;

    }



    .categorie-container .content article {

        padding: 1rem;

        background: rgba(0, 0, 0, .05);

        border-radius: 3px;

    }





    .contact-container form,

    .login-container form {

        padding: 3rem 1rem;

    }



    .login-container form {

        width: 100%;

    }







    .about-container .content .pprofil .infos {

        right: -1.5rem;

    }



    .about-container .content .pprofil .infos span {

        font-size: .73rem;

    }

    

    .about-container .content .pprofil .infos .role,

    .about-container .content .pprofil .infos .nom {

        font-size: 1rem;

    }



}





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

    .header-container .nav1 {

        flex-direction: column-reverse;

        gap: 1rem;

    }



    .categorie-container h1,

    .categorie-container.search .bloc h1 {

        font-size: 25px;

    }

}