/*
Theme Name: L'Intelligence
Theme URI:
Description: Thème enfant personnalisé du site L'Intelligence
Author: L'Intelligence
Author URI:
Template: generatepress
Version: 1.0
*/


/* =========================================================
   IDENTITÉ VISUELLE — L'INTELLIGENCE
   ROUGE • BLEU • BLANC
========================================================= */

:root {

    /* 🔴 COULEUR PRINCIPALE */
    --li-red: #D71920;

    /* 🔵 COULEUR SECONDAIRE */
    --li-blue: #0057B8;

    /* 🔵 BLEU FONCÉ */
    --li-blue-dark: #0B1F3A;

    /* ⚪ BLANC */
    --li-white: #FFFFFF;

    /* TEXTE */
    --li-text: #17202A;

    /* GRIS CLAIR */
    --li-gray: #F4F6F8;

    /* BORDURE */
    --li-border: #E2E6EA;

}


/* =========================================================
   ZONE LOGO + SLOGAN + RÉSEAUX
   ========================================================= */

.li-header-main {
    width: 100%;
    background: var(--li-white);
    border-bottom: 1px solid var(--li-border);
}


/* =========================================================
   LOGO + PARTIE DROITE
   ========================================================= */

.li-branding {
    min-height: 95px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   LOGO
   ========================================================= */

.li-logo {
    flex: 0 1 auto;

    min-width: 0;
    max-width: 100%;

    display: flex;
    align-items: center;
}


/* LIEN DU LOGO */

.li-logo a {
    display: block;

    max-width: 100%;

    line-height: 0;

    text-decoration: none;
}


/* IMAGE DU LOGO */

.li-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 180px;
    max-height: 55px;

    object-fit: contain;

    transition: opacity .2s ease;
}


.li-logo a:hover img {
    opacity: .88;
}


/* =========================================================
   PARTIE DROITE
   ========================================================= */

.li-header-right {
    flex: 0 1 auto;

    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 20px;

    margin-left: auto;
}


/* =========================================================
   SLOGAN
   ========================================================= */

.li-tagline {
    color: #555555;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.4;

    white-space: nowrap;

    text-align: right;
}


/* =========================================================
   RÉSEAUX SOCIAUX
   ========================================================= */

.li-socials {
    display: flex;
    align-items: center;

    gap: 8px;

    flex: 0 0 auto;
}


.li-social {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--li-blue);
    color: var(--li-white);

    font-size: 14px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


.li-social:hover {
    background: var(--li-red);
    color: var(--li-white);

    transform: translateY(-2px);
}


/* =========================================================
   RÉSEAUX INDIVIDUELS
   ========================================================= */

.li-facebook,
.li-x {
    font-family: Arial, sans-serif;
}


.li-youtube {
    font-size: 13px;
}


/* =========================================================
   TABLETTE
   ========================================================= */

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

    .li-branding {
        min-height: 85px;
        gap: 18px;
    }

    .li-logo img {
        max-width: 165px;
        max-height: 52px;
    }

    .li-header-right {
        gap: 14px;
    }

    .li-tagline {
        font-size: 11px;
    }

    .li-social {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        font-size: 12px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

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

    .li-branding {
        min-height: auto;

        padding-top: 14px;
        padding-bottom: 14px;

        flex-direction: column;

        justify-content: center;
        align-items: center;

        gap: 9px;

        text-align: center;
    }


    /* LOGO CENTRÉ */

    .li-logo {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;
    }


    .li-logo a {
        display: block;

        max-width: 100%;
    }


    .li-logo img {
        width: auto;
        height: auto;

        max-width: 150px;
        max-height: 48px;

        margin-left: auto;
        margin-right: auto;
    }


    /* PARTIE DROITE */

    .li-header-right {
        width: 100%;

        margin-left: 0;

        flex-direction: column;

        justify-content: center;
        align-items: center;

        gap: 7px;

        text-align: center;
    }


    /* SLOGAN */

    .li-tagline {
        width: 100%;

        font-size: 11px;

        line-height: 1.4;

        white-space: normal;

        text-align: center;
    }


    /* RÉSEAUX */

    .li-socials {
        justify-content: center;

        gap: 6px;
    }


    .li-social {
        width: 30px;
        height: 30px;

        flex-basis: 30px;

        font-size: 12px;
    }
}


/* =========================================================
   TRÈS PETITS TÉLÉPHONES
   ========================================================= */

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

    .li-branding {
        padding-top: 12px;
        padding-bottom: 12px;

        gap: 7px;
    }


    .li-logo img {
        max-width: 130px;
        max-height: 42px;
    }


    .li-tagline {
        font-size: 10px;
    }


    .li-socials {
        gap: 5px;
    }


    .li-social {
        width: 28px;
        height: 28px;

        flex-basis: 28px;

        font-size: 11px;
    }
}





/* =========================================================
   NAVIGATION PRINCIPALE
   L'INTELLIGENCE RDC
   ROUGE — BLEU — BLANC
========================================================= */

.li-navigation {
    width: 100%;

    background: var(--li-red);

    border-bottom: 3px solid var(--li-blue);

    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}


/* =========================================================
   CONTENEUR
========================================================= */

.li-navigation-inner {
    min-height: 54px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: var(--li-red);

    box-sizing: border-box;
}


/* =========================================================
   CONTENEUR DU MENU
========================================================= */

.li-menu-wrapper {
    flex: 1 1 auto;

    min-width: 0;

    overflow-x: auto;
    overflow-y: visible;

    scrollbar-width: none;
}

.li-menu-wrapper::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   MENU PRINCIPAL
========================================================= */

.li-menu {
    width: max-content;
    min-width: 100%;

    display: flex;
    align-items: center;

    justify-content: center;

    flex-wrap: nowrap;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   ÉLÉMENTS DU MENU
========================================================= */

.li-menu > li {
    position: relative;

    flex: 0 0 auto;

    margin: 0;
    padding: 0;
}


/* =========================================================
   LIENS DU MENU PRINCIPAL
========================================================= */

.li-menu > li > a {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    background: var(--li-red);
    color: var(--li-white);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition:
        background-color .2s ease,
        color .2s ease;
}


/* =========================================================
   SURVOL + RUBRIQUE ACTIVE
========================================================= */

.li-menu > li > a:hover,
.li-menu > li.current-menu-item > a,
.li-menu > li.current-menu-ancestor > a,
.li-menu > li.current_page_item > a,
.li-menu > li.current_page_ancestor > a {
    background: var(--li-blue);
    color: var(--li-white);
}


/* =========================================================
   SOUS-MENUS — OUVERTURE AU SURVOL ET AU CLIC
========================================================= */

.li-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
    min-width: 220px;
    margin: 0;
    padding: 5px 0;
    background: var(--li-blue-dark);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}


/* ---------------------------------------------------------
   OUVERTURE AU SURVOL
--------------------------------------------------------- */

.li-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   OUVERTURE AU CLIC
--------------------------------------------------------- */

.li-menu li.li-submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   LIENS DU SOUS-MENU
--------------------------------------------------------- */

.li-menu .sub-menu li {
    position: relative;
    margin: 0;
    padding: 0;
}


.li-menu .sub-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    background: var(--li-blue-dark);
    color: var(--li-white);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-sizing: border-box;

    transition:
        background-color .2s ease,
        color .2s ease;
}


/* ---------------------------------------------------------
   SURVOL DU SOUS-MENU
--------------------------------------------------------- */

.li-menu .sub-menu a:hover,
.li-menu .sub-menu .current-menu-item > a,
.li-menu .sub-menu .current_page_item > a {
    background: var(--li-red);
    color: var(--li-white);
}


/* ---------------------------------------------------------
   FLÈCHE DU MENU AVEC SOUS-MENU
--------------------------------------------------------- */

.li-menu > li.menu-item-has-children > a::after {
    content: "▾";
    display: inline-block;
    margin-left: 7px;
    font-size: 10px;
    line-height: 1;
    transition: transform .2s ease;
}


/* Rotation de la flèche quand le sous-menu est ouvert */

.li-menu > li.li-submenu-open > a::after {
    transform: rotate(180deg);
}


/* =========================================================
   RECHERCHE
========================================================= */

.li-search {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}


.li-search-button {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--li-red);
    color: var(--li-white);
    cursor: pointer;
    border-radius: 2px;
    transition:
        background-color .2s ease,
        color .2s ease;
}


.li-search-button:hover,

.li-search-button:focus {
    background: var(--li-blue);
    color: var(--li-white);
    outline: none;
}


.li-search-icon {
    display: block;
    font-size: 23px;
    line-height: 1;
}


/* =========================================================
   TABLETTE
========================================================= */

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

    .li-menu > li > a {
        min-height: 50px;
        padding: 0 10px;
        font-size: 11px;
    }

    .li-menu .sub-menu {
        min-width: 200px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .li-navigation-inner {
        min-height: 48px;
        gap: 5px;
    }


    .li-menu {
        justify-content: flex-start;
        min-width: max-content;
    }


    .li-menu > li > a {
        min-height: 48px;
        padding: 0 10px;
        font-size: 10px;
    }


    .li-search-button {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }


    /* Sous-menu */

    .li-menu .sub-menu {
        min-width: 180px;
        max-width: calc(100vw - 30px);
        overflow: hidden;
    }
}


/* =========================================================
   TRÈS PETITS ÉCRANS
========================================================= */

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

    .li-menu > li > a {
        min-height: 46px;
        padding: 0 8px;
        font-size: 9px;
    }


    .li-menu .sub-menu {
        min-width: 170px;
    }

    .li-search-button {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}



/* =========================================================
   FIN NAVIGATION (MENU)
========================================================= */


/* =========================================================
   TICKER ACTUALITÉS
   ========================================================= */

.li-news-ticker {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #dddddd;
    box-sizing: border-box;
}


/* =========================================================
   CONTENEUR
   ========================================================= */

.li-news-ticker-inner {
    min-height: 42px;
    display: flex;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   ÉTIQUETTE ACTUALITÉS
   ========================================================= */

.li-ticker-label {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 125px;
    padding: 0 18px;
    background: #D71920;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    z-index: 3;
}


/* Petite pointe rouge */

.li-ticker-label::after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
    border-left: 12px solid #D71920;
}


/* =========================================================
   ZONE DÉFILANTE
   ========================================================= */

.li-ticker-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;

    background: #ffffff;
}


/* =========================================================
   PISTE
   ========================================================= */

.li-ticker-track {
    display: flex;
    align-items: center;

    width: max-content;

    min-width: 100%;

    animation: liTickerScroll 35s linear infinite;

    will-change: transform;
}


/* =========================================================
   ARTICLE DU TICKER
   ========================================================= */

.li-ticker-item {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    white-space: nowrap;

    padding: 0 25px;

    font-size: 13px;

    line-height: 42px;
}


/* Heure */

.li-ticker-item time {
    color: #D71920;

    font-size: 12px;
    font-weight: 900;
}


/* Séparateur */

.li-ticker-separator {
    margin: 0 9px;

    color: #0057B8;

    font-weight: 900;
}


/* Titre */

.li-ticker-item a {
    color: #111111;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .2s ease;
}


.li-ticker-item a:hover {
    color: #D71920;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes liTickerScroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}


/* =========================================================
   PAUSE AU SURVOL
   ========================================================= */

.li-news-ticker:hover .li-ticker-track {
    animation-play-state: paused;
}


/* =========================================================
   TABLETTE
   ========================================================= */

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

    .li-ticker-label {
        min-width: 110px;

        padding: 0 14px;

        font-size: 12px;
    }

    .li-ticker-item {
        padding: 0 18px;

        font-size: 12px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

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

    .li-news-ticker-inner {
        min-height: 38px;
    }

    .li-ticker-label {
        min-width: 95px;

        padding: 0 10px;

        font-size: 11px;
    }

    .li-ticker-label::after {
        right: -10px;

        border-top-width: 19px;
        border-bottom-width: 19px;
        border-left-width: 10px;
    }

    .li-ticker-item {
        padding: 0 14px;

        font-size: 11px;

        line-height: 38px;
    }

    .li-ticker-item time {
        font-size: 10px;
    }

    .li-ticker-separator {
        margin: 0 6px;
    }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

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

    .li-ticker-label {
        min-width: 85px;

        padding: 0 8px;

        font-size: 10px;
    }

    .li-ticker-item {
        padding: 0 12px;

        font-size: 10px;
    }

}



/* =========================================================
   FIN TICKET
========================================================= */


/* =========================================================
   PAGE D'ACCUEIL - L'INTELLIGENCE RDC
   CSS Compatible GeneratePress
   Identité : ROUGE / BLEU / BLANC
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --li-red: #D71920;
    --li-red-dark: #B51218;
    --li-blue: #0057B8;
    --li-blue-dark: #003B7A;
    --li-white: #FFFFFF;
    --li-black: #111111;
    --li-text: #20252B;
    --li-muted: #6B7280;
    --li-light: #F4F6F8;
    --li-border: #E2E5E8;
    --li-container: 1200px;
    --li-shadow: 0 4px 16px rgba(0,0,0,.08);
    --li-shadow-hover: 0 8px 24px rgba(0,0,0,.14);
}


/* =========================================================
   RESET PAGE D'ACCUEIL
   ========================================================= */

#li-homepage,
#li-homepage *,
#li-homepage *::before,
#li-homepage *::after {
    box-sizing: border-box;
}

#li-homepage {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--li-text);
    background: var(--li-white);
}

#li-homepage a {
    color: inherit;
}

#li-homepage img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   CONTENEUR
   ========================================================= */

.li-homepage > .li-container {
    width: 100%;
    max-width: var(--li-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}


/* =========================================================
   TITRES DE SECTIONS
   ========================================================= */

.li-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 18px;
    padding: 0;
    border-bottom: 3px solid var(--li-red);
}

.li-section-heading h2 {
    position: relative;
    margin: 0;
    padding: 0 0 8px;
    color: var(--li-black);
    font-size: 25px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.li-section-heading h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 55px;
    height: 3px;
    background: var(--li-blue);
}

.li-section-heading > a {
    flex: 0 0 auto;
    color: var(--li-red) !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.li-section-heading > a:hover {
    color: var(--li-blue) !important;
}


/* =========================================================
   ÉTIQUETTES CATÉGORIES
   ========================================================= */

.li-post-category {
    display: inline-block;
    margin: 0 0 6px;
    color: var(--li-red);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .4px;
}


/* =========================================================
   SECTION À LA UNE
   ========================================================= */

.li-top-news {
    margin: 0 0 35px;
    padding-top: 10px;
}

.li-top-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(250px, .85fr)
        minmax(230px, .70fr);
    gap: 18px;

    align-items: stretch;
}


   /* =========================================================
   SLIDER À LA UNE — L'INTELLIGENCE RDC
   ========================================================= */

.li-top-news {
    width: 100%;
    margin: 0 0 35px;
    padding-top: 10px;
    box-sizing: border-box;
}


/* =========================================================
   TITRE DE SECTION
   ========================================================= */

.li-section-heading {
    width: 100%;
    margin: 0 0 18px;
    padding: 0 0 10px;

    border-bottom: 3px solid var(--li-red);

    position: relative;
    box-sizing: border-box;
}

.li-section-heading::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -3px;

    width: 55px;
    height: 3px;

    background: var(--li-blue);
}

.li-section-heading h2 {
    margin: 0;

    color: var(--li-black);

    font-size: 28px;
    font-weight: 900;

    line-height: 1.1;
    text-transform: uppercase;
}


/* =========================================================
   GRILLE — HAUTEUR UNIFORME
   ========================================================= */

.li-top-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(250px, .85fr)
        minmax(230px, .70fr);

    gap: 18px;

    /*
     * HAUTEUR UNIQUE POUR LES 3 COLONNES
     */
    height: 420px;

    align-items: stretch;

    width: 100%;

    box-sizing: border-box;
}


/* Toutes les colonnes occupent exactement
   la même hauteur */

.li-top-grid > * {
    height: 420px;

    min-height: 420px;

    max-height: 420px;

    box-sizing: border-box;
}


/* =========================================================
   SLIDER — À LA UNE
   ========================================================= */

.li-featured-slider {
    position: relative;
    width: 100%;
    height: 420px;
    min-height: 420px;
    max-height: 420px;
    overflow: hidden;
    background: #111;
    box-sizing: border-box;
}


/* =========================================================
   PISTE
   ========================================================= */

.li-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* =========================================================
   SLIDES
   ========================================================= */

.li-slide {

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
    z-index: 1;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}


/* SLIDE ACTIVE */

.li-slide.is-active {
    opacity: 1;
    visibility: visible;
    
    pointer-events: auto;
    z-index: 2;
}


/* =========================================================
   IMAGE
   ========================================================= */

.li-slide-image {

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;
    width: 100%;
    height: 100%;

    overflow: hidden;
    z-index: 1;
}


.li-slide-image img {

    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    object-fit: cover;
    transition: transform .6s ease;
}


.li-slide.is-active .li-slide-image img {
    transform: scale(1.02);
}


/* =========================================================
   VOILE
   ========================================================= */

.li-slide-image::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.60) 38%,
            rgba(0,0,0,.15) 75%,
            rgba(0,0,0,.05) 100%
        );
}


/* =========================================================
   CONTENU DU SLIDER
   ========================================================= */

.li-slide-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 30px;
    color: #fff;
    box-sizing: border-box;
}


.li-slide-overlay .li-post-category {

    display: inline-block;
    margin-bottom: 9px;
    padding: 5px 10px;
    background: var(--li-red);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
}


.li-slide-overlay h1 {

    max-width: 850px;

    margin: 0 0 9px;

    color: #fff;

    font-size: 30px;
    font-weight: 900;

    line-height: 1.15;
}


.li-slide-overlay h1 a {

    color: #fff;

    text-decoration: none;
}


.li-slide-overlay h1 a:hover {
    color: #fff;
}


.li-slide-overlay p {

    max-width: 700px;

    margin: 0 0 8px;

    color: rgba(255,255,255,.90);

    font-size: 13px;

    line-height: 1.45;
}


.li-slide-overlay time {

    display: block;

    color: rgba(255,255,255,.75);

    font-size: 11px;
}


/* =========================================================
   NAVIGATION DU SLIDER
   ========================================================= */

.li-slider-navigation {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 14px;

    z-index: 20;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    pointer-events: none;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.li-slider-prev,
.li-slider-next {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(0,0,0,.70);
    color: #fff;

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;

    pointer-events: auto;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


.li-slider-prev:hover,
.li-slider-next:hover,
.li-slider-prev:focus,
.li-slider-next:focus {

    background: var(--li-red);

    color: #fff;

    transform: scale(1.05);

    outline: none;
}


/* =========================================================
   POINTS
   ========================================================= */

.li-slider-dots {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin: 0;
    padding: 0;

    pointer-events: auto;
}


.li-slider-dot {

    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.55);

    cursor: pointer;

    transition:
        width .2s ease,
        background-color .2s ease;
}


.li-slider-dot.is-active {

    width: 22px;

    flex-basis: 22px;

    border-radius: 5px;

    background: var(--li-red);
}


/* =========================================================
   DÉCRYPTAGE
   ========================================================= */

.li-top-decryptage {

    min-width: 0;

    height: 420px;
    min-height: 420px;
    max-height: 420px;

    padding: 0 0 12px;

    border: 1px solid var(--li-border);

    background: var(--li-white);

    box-shadow: var(--li-shadow);

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   TITRE DES WIDGETS
   ========================================================= */

.li-widget-title {

    display: flex;

    align-items: center;

    height: 42px;
    min-height: 42px;

    margin: 0 0 14px;

    padding: 0 14px;

    border-left: 5px solid var(--li-red);

    background: var(--li-blue);

    color: var(--li-white);

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;

    box-sizing: border-box;
}


/* =========================================================
   CARTE DÉCRYPTAGE
   ========================================================= */

.li-decryptage-feature {

    height: calc(420px - 58px);

    padding: 0 14px;

    box-sizing: border-box;

    overflow: hidden;
}


.li-decryptage-image {

    display: block;

    width: 100%;
    height: 180px;

    overflow: hidden;
}


.li-decryptage-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}


.li-decryptage-feature:hover .li-decryptage-image img {
    transform: scale(1.04);
}


.li-decryptage-content h2 {

    margin: 10px 0 7px;

    font-size: 19px;
    font-weight: 900;

    line-height: 1.2;
}


.li-decryptage-content h2 a {
    text-decoration: none;
}


.li-decryptage-content h2 a:hover {
    color: var(--li-red);
}


.li-decryptage-content p {

    margin: 0;

    color: var(--li-muted);

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   FIL D'ACTUALITÉS
   ========================================================= */

.li-news-feed {

    min-width: 0;

    height: 420px;
    min-height: 420px;
    max-height: 420px;

    border: 1px solid var(--li-border);

    background: var(--li-white);

    box-shadow: var(--li-shadow);

    overflow: hidden;

    box-sizing: border-box;
}


/* La liste s'adapte exactement
   à la hauteur disponible */

.li-news-feed .li-feed-list {

    height: calc(420px - 56px);

    max-height: none;

    overflow-y: auto;

    scrollbar-width: thin;

    box-sizing: border-box;
}


/* =========================================================
   ÉLÉMENTS DU FIL
   ========================================================= */

.li-feed-item {

    margin: 0;

    padding: 10px 13px;

    border-bottom: 1px solid var(--li-border);

    box-sizing: border-box;
}


.li-feed-item:last-child {
    border-bottom: 0;
}


.li-feed-item time {

    display: block;

    margin-bottom: 3px;

    color: var(--li-red);

    font-size: 10px;
    font-weight: 900;
}


.li-feed-item h3 {

    margin: 0;

    font-size: 13px;

    line-height: 1.3;
}


.li-feed-item h3 a {
    text-decoration: none;
}


.li-feed-item h3 a:hover {
    color: var(--li-red);
}


/* =========================================================
   TABLETTE
   ========================================================= */

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

    .li-top-grid {

        height: 380px;

        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(220px, .9fr)
            minmax(210px, .75fr);
    }

    .li-top-grid > *,
    .li-featured-slider,
    .li-top-decryptage,
    .li-news-feed {

        height: 380px;
        min-height: 380px;
        max-height: 380px;
    }

    .li-news-feed .li-feed-list {
        height: calc(380px - 56px);
    }

    .li-decryptage-feature {
        height: calc(380px - 58px);
    }

    .li-slide-overlay {
        padding: 25px;
    }

    .li-slide-overlay h1 {
        font-size: 26px;
    }
}


/* =========================================================
   TABLETTE ÉTROITE
   ========================================================= */

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

    .li-top-grid {

        height: auto;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        align-items: stretch;
    }

    .li-top-grid > *,
    .li-featured-slider,
    .li-top-decryptage,
    .li-news-feed {

        height: 360px;
        min-height: 360px;
        max-height: 360px;
    }

    .li-news-feed {
        grid-column: span 2;
    }

    .li-news-feed .li-feed-list {
        height: calc(360px - 56px);
    }

    .li-decryptage-feature {
        height: calc(360px - 58px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

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

    .li-top-news {
        margin-bottom: 25px;
    }

    .li-section-heading h2 {
        font-size: 23px;
    }

    .li-top-grid {

        display: grid;

        grid-template-columns: 1fr;

        height: auto;

        gap: 15px;
    }

    .li-top-grid > *,
    .li-featured-slider,
    .li-top-decryptage,
    .li-news-feed {

        width: 100%;

        height: 330px;
        min-height: 330px;
        max-height: 330px;

        grid-column: auto;
    }

    .li-news-feed .li-feed-list {
        height: calc(330px - 56px);
    }

    .li-decryptage-feature {
        height: calc(330px - 58px);
    }

    .li-slide-overlay {
        padding: 18px;
    }

    .li-slide-overlay h1 {
        font-size: 20px;
        line-height: 1.2;
    }

    .li-slide-overlay p {

        display: -webkit-box;

        max-width: 100%;

        margin-bottom: 7px;

        overflow: hidden;

        font-size: 12px;

        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .li-slide-overlay time {
        font-size: 10px;
    }

    .li-slider-navigation {
        bottom: 10px;
    }

    .li-slider-prev,
    .li-slider-next {

        width: 32px;
        height: 32px;

        flex-basis: 32px;

        font-size: 16px;
    }
}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

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

    .li-top-grid > *,
    .li-featured-slider,
    .li-top-decryptage,
    .li-news-feed {

        height: 300px;
        min-height: 300px;
        max-height: 300px;
    }

    .li-news-feed .li-feed-list {
        height: calc(300px - 56px);
    }

    .li-decryptage-feature {
        height: calc(300px - 58px);
    }

    .li-slide-overlay {
        padding: 14px;
    }

    .li-slide-overlay h1 {
        font-size: 18px;
    }

    .li-slide-overlay p {
        display: none;
    }
}

/* =========================================================
   FIN SLIDER
   ========================================================= */



/* =========================================================
   PLUS D'ACTUALITÉS
   ========================================================= */

.li-fil-actualites {
    margin: 0 0 35px;
    padding: 20px;
    border-top: 4px solid var(--li-blue);
    background: var(--li-light);
}

.li-fil-header {
    margin-bottom: 15px;
}

.li-fil-header h2 {
    margin: 0;

    color: var(--li-black);

    font-size: 20px;
    font-weight: 900;

    text-transform: uppercase;
}

.li-fil-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0;

    border-top: 1px solid var(--li-border);
    border-left: 1px solid var(--li-border);
}

.li-fil-item {
    padding: 14px;

    border-right: 1px solid var(--li-border);
    border-bottom: 1px solid var(--li-border);

    background: var(--li-white);
}

.li-fil-item time {
    display: block;

    margin-bottom: 5px;

    color: var(--li-red);

    font-size: 10px;
    font-weight: 900;
}

.li-fil-item h3 {
    margin: 0;

    font-size: 13px;
    line-height: 1.35;
}

.li-fil-item h3 a {
    text-decoration: none;
}

.li-fil-item h3 a:hover {
    color: var(--li-red);
}


/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

.li-home-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap: 25px;

    align-items: start;
}

.li-home-main {
    min-width: 0;
}

.li-home-sidebar {
    min-width: 0;
}


/* =========================================================
   SECTIONS CATÉGORIES
   ========================================================= */

.li-category-section {
    margin: 0 0 42px;
}


/* =========================================================
   POLITIQUE
   ========================================================= */

.li-politique-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(260px, .9fr);

    gap: 20px;

    align-items: start;
}

.li-politique-main {
    min-width: 0;
}

.li-politique-main-image {
    display: block;

    width: 100%;
    height: 300px;

    overflow: hidden;
}

.li-politique-main-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.li-politique-main:hover .li-politique-main-image img {
    transform: scale(1.035);
}

.li-politique-main h3 {
    margin: 5px 0;

    font-size: 22px;
    line-height: 1.2;
}

.li-politique-main h3 a {
    text-decoration: none;
}

.li-politique-main h3 a:hover {
    color: var(--li-red);
}

.li-politique-main p {
    margin: 0;

    color: var(--li-muted);

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   POLITIQUE — COLONNE DROITE
   ========================================================= */

.li-politique-right {
    min-width: 0;
}

.li-politique-secondary {
    display: grid;

    grid-template-columns: 105px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--li-border);
}

.li-politique-secondary-image {
    display: block;
    width: 105px;
    height: 80px;
    overflow: hidden;
}

.li-politique-secondary-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.li-politique-secondary-content h3 {
    margin: 2px 0;
    font-size: 14px;
    line-height: 1.3;
}

.li-politique-secondary-content h3 a {
    text-decoration: none;
}

.li-politique-secondary-content h3 a:hover {
    color: var(--li-red);
}


/* =========================================================
   À RETENIR
   ========================================================= */

.li-politique-retenir,
.li-monde-retenir {
    margin-top: 18px;
    border: 1px solid var(--li-border);
}

.li-politique-retenir-title,
.li-monde-retenir-title {
    padding: 9px 12px;

    background: var(--li-blue);

    color: var(--li-white);

    font-size: 12px;
    font-weight: 900;

    text-transform: uppercase;
}

.li-politique-retenir-list,
.li-monde-retenir-list {
    padding: 5px 12px;
}

.li-politique-retenir-item,
.li-monde-retenir-item {
    display: grid;

    grid-template-columns: 30px minmax(0, 1fr);

    gap: 8px;

    padding: 10px 0;

    border-bottom: 1px solid var(--li-border);
}

.li-politique-retenir-item:last-child,
.li-monde-retenir-item:last-child {
    border-bottom: 0;
}

.li-politique-retenir-number,
.li-monde-retenir-number {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--li-red);

    color: var(--li-white);

    font-size: 12px;
    font-weight: 900;
}

.li-politique-retenir-content h3,
.li-monde-retenir-content h3 {
    margin: 1px 0 3px;

    font-size: 13px;
    line-height: 1.3;
}

.li-politique-retenir-content h3 a,
.li-monde-retenir-content h3 a {
    text-decoration: none;
}

.li-politique-retenir-content h3 a:hover,
.li-monde-retenir-content h3 a:hover {
    color: var(--li-red);
}

.li-politique-retenir-content time,
.li-monde-retenir-content time {
    color: var(--li-muted);

    font-size: 10px;
}



/* =========================================================
   SOCIÉTÉ
   ========================================================= */

.li-societe-list,
.li-culture-list {
    display: grid;

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

    gap: 15px;
}

.li-horizontal-article {
    display: grid;

    grid-template-columns: 125px minmax(0, 1fr);

    gap: 13px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--li-border);
}

.li-horizontal-image {
    display: block;

    width: 125px;
    height: 90px;

    overflow: hidden;
}

.li-horizontal-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.li-horizontal-article:hover .li-horizontal-image img {
    transform: scale(1.04);
}

.li-horizontal-content h3 {
    margin: 2px 0 5px;

    font-size: 15px;
    line-height: 1.25;
}

.li-horizontal-content h3 a {
    text-decoration: none;
}

.li-horizontal-content h3 a:hover {
    color: var(--li-red);
}

.li-horizontal-content p {
    margin: 0 0 5px;

    color: var(--li-muted);

    font-size: 11px;
    line-height: 1.4;
}

.li-horizontal-content time {
    color: var(--li-muted);

    font-size: 10px;
}


/* =========================================================
   ÉCONOMIE
   ========================================================= */

.li-economie-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.li-economie-card {
    min-width: 0;
}

.li-economie-card > a {
    display: block;

    width: 100%;
    height: 190px;

    overflow: hidden;
}

.li-economie-card > a img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.li-economie-card:hover img {
    transform: scale(1.04);
}

.li-economie-card h3 {
    margin: 3px 0 0;

    font-size: 16px;
    line-height: 1.25;
}

.li-economie-card h3 a {
    text-decoration: none;
}

.li-economie-card h3 a:hover {
    color: var(--li-red);
}


/* =========================================================
   AFRIQUE
   ========================================================= */

.li-afrique-grid {
    display: grid;

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

    gap: 18px;
}

.li-afrique-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background: var(--li-black);
}

.li-afrique-card > a {
    display: block;

    height: 300px;
}

.li-afrique-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}

.li-afrique-card:hover img {
    transform: scale(1.05);
}

.li-afrique-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 55px 18px 18px;

    color: var(--li-white);

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.9),
            rgba(0,0,0,0)
        );
}

.li-afrique-overlay .li-post-category {
    color: var(--li-white);
}

.li-afrique-overlay h3 {
    margin: 4px 0 0;

    font-size: 20px;
    line-height: 1.2;
}

.li-afrique-overlay h3 a {
    color: var(--li-white) !important;

    text-decoration: none;
}

.li-afrique-overlay h3 a:hover {
    color: var(--li-red) !important;
}


/* =========================================================
   MONDE
   ========================================================= */

.li-monde-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(260px, .9fr);

    gap: 20px;

    align-items: start;
}

.li-monde-feature-image {
    display: block;

    height: 300px;

    overflow: hidden;
}

.li-monde-feature-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.li-monde-feature:hover img {
    transform: scale(1.04);
}

.li-monde-feature h3 {
    margin: 5px 0;

    font-size: 22px;
    line-height: 1.2;
}

.li-monde-feature h3 a {
    text-decoration: none;
}

.li-monde-feature h3 a:hover {
    color: var(--li-red);
}

.li-monde-feature p {
    margin: 0;

    color: var(--li-muted);

    font-size: 13px;
    line-height: 1.5;
}

.li-monde-secondary {
    display: grid;

    grid-template-columns: 105px minmax(0, 1fr);

    gap: 12px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--li-border);
}

.li-monde-secondary-image {
    width: 105px;
    height: 80px;

    display: block;

    overflow: hidden;
}

.li-monde-secondary-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.li-monde-secondary-content h3 {
    margin: 2px 0;

    font-size: 14px;
    line-height: 1.3;
}

.li-monde-secondary-content h3 a {
    text-decoration: none;
}


/* =========================================================
   CULTURE
   ========================================================= */

.li-culture-list .li-horizontal-article {
    min-width: 0;
}


/* =========================================================
   SPORTS
   ========================================================= */

.li-sports-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        repeat(2, minmax(0, .7fr));

    gap: 16px;

    align-items: start;
}

.li-sports-main {
    min-width: 0;
}

.li-sports-main > a,
.li-sports-secondary > a {
    display: block;

    overflow: hidden;
}

.li-sports-main > a {
    height: 280px;
}

.li-sports-secondary > a {
    height: 150px;
}

.li-sports-main img,
.li-sports-secondary img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.li-sports-main:hover img,
.li-sports-secondary:hover img {
    transform: scale(1.04);
}

.li-sports-main h3 {
    margin: 4px 0;

    font-size: 21px;
    line-height: 1.2;
}

.li-sports-secondary h3 {
    margin: 4px 0;

    font-size: 14px;
    line-height: 1.3;
}

.li-sports-main h3 a,
.li-sports-secondary h3 a {
    text-decoration: none;
}

.li-sports-main h3 a:hover,
.li-sports-secondary h3 a:hover {
    color: var(--li-red);
}


/* =========================================================
   ANALYSES
   ========================================================= */

.li-category-analyses {
    padding: 22px;

    background: var(--li-black);

    color: var(--li-white);
}

.li-category-analyses .li-section-heading {
    border-color: var(--li-red);
}

.li-category-analyses .li-section-heading h2 {
    color: var(--li-white);
}

.li-category-analyses .li-section-heading > a {
    color: #FFFFFF !important;
}

.li-analyses-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1px;

    background: #333;
}

.li-analysis-card {
    position: relative;

    min-width: 0;

    min-height: 270px;

    padding: 22px;

    background: #161616;

    transition: background .25s ease;
}

.li-analysis-card:hover {
    background: #202020;
}

.li-analysis-number {
    color: var(--li-red);

    font-size: 40px;
    font-weight: 900;

    line-height: 1;
}

.li-analysis-label {
    display: inline-block;

    margin: 12px 0 8px;
    padding: 4px 7px;

    background: var(--li-red);

    color: var(--li-white);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .5px;
}

.li-analysis-card h3 {
    margin: 0 0 10px;

    font-size: 18px;
    line-height: 1.25;
}

.li-analysis-card h3 a {
    color: var(--li-white) !important;

    text-decoration: none;
}

.li-analysis-card h3 a:hover {
    color: #FFFFFF !important;
}

.li-analysis-card p {
    margin: 0 0 18px;

    color: #BBBBBB;

    font-size: 12px;
    line-height: 1.5;
}

.li-analysis-footer {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.li-analysis-footer time {
    color: #888;

    font-size: 10px;
}

.li-analysis-read {
    color: var(--li-red) !important;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;
}


/* =========================================================
   DÉCRYPTAGES
   ========================================================= */

.li-decryptages-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.li-decryptage-card {
    min-width: 0;

    border: 1px solid var(--li-border);

    background: var(--li-white);

    box-shadow: var(--li-shadow);

    overflow: hidden;
}

.li-decryptage-card > a {
    display: block;

    height: 190px;

    overflow: hidden;
}

.li-decryptage-card > a img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.li-decryptage-card:hover > a img {
    transform: scale(1.04);
}

.li-decryptage-card-content {
    padding: 14px;
}

.li-decryptage-card-content h3 {
    margin: 3px 0 7px;

    font-size: 17px;
    line-height: 1.25;
}

.li-decryptage-card-content h3 a {
    text-decoration: none;
}

.li-decryptage-card-content h3 a:hover {
    color: var(--li-red);
}

.li-decryptage-card-content p {
    margin: 0;

    color: var(--li-muted);

    font-size: 12px;
    line-height: 1.45;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.li-sidebar-widget {
    margin-bottom: 22px;

    border: 1px solid var(--li-border);

    background: var(--li-white);

    box-shadow: var(--li-shadow);
}

.li-sidebar-widget .li-widget-title {
    margin-bottom: 0;
}


/* =========================================================
   SIDEBAR — À RETENIR
   ========================================================= */

.li-sidebar-list {
    padding: 5px 12px;
}

.li-sidebar-item {
    display: grid;

    grid-template-columns: 32px minmax(0, 1fr);

    gap: 8px;

    padding: 11px 0;

    border-bottom: 1px solid var(--li-border);
}

.li-sidebar-item:last-child {
    border-bottom: 0;
}

.li-sidebar-number {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--li-red);

    color: var(--li-white);

    font-size: 12px;
    font-weight: 900;
}

.li-sidebar-item h3 {
    margin: 1px 0;

    font-size: 13px;
    line-height: 1.3;
}

.li-sidebar-item h3 a {
    text-decoration: none;
}

.li-sidebar-item h3 a:hover {
    color: var(--li-red);
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.li-newsletter-widget {
    padding-bottom: 18px;
}

.li-newsletter-widget h3 {
    margin: 16px 16px 7px;

    font-size: 18px;
    line-height: 1.25;
}

.li-newsletter-widget p {
    margin: 0 16px 14px;

    color: var(--li-muted);

    font-size: 12px;
    line-height: 1.5;
}

.li-newsletter-form {
    display: flex;

    flex-direction: column;

    gap: 7px;

    margin: 0 16px;
}

.li-newsletter-form input[type="email"] {
    width: 100%;
    height: 40px;

    padding: 0 11px;

    border: 1px solid var(--li-border);

    background: var(--li-white);

    font-size: 12px;
}

.li-newsletter-form button {
    width: 100%;
    height: 40px;

    border: 0;

    background: var(--li-red);
    color: var(--li-white);

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
}

.li-newsletter-form button:hover {
    background: var(--li-blue);
}


/* =========================================================
   PUBLICITÉ
   ========================================================= */

.li-ad-placeholder {
    min-height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 14px;

    border: 1px dashed #C9CDD1;

    background: var(--li-light);

    color: #92979C;

    font-size: 11px;
    font-weight: 800;

    text-align: center;
}


/* =========================================================
   DERNIÈRES PUBLICATIONS
   ========================================================= */

.li-sidebar-latest {
    padding: 5px 12px;
}

.li-compact-article {
    display: grid;

    grid-template-columns: 82px minmax(0, 1fr);

    gap: 10px;

    padding: 11px 0;

    border-bottom: 1px solid var(--li-border);
}

.li-compact-article:last-child {
    border-bottom: 0;
}

.li-compact-image {
    display: block;

    width: 82px;
    height: 62px;

    overflow: hidden;
}

.li-compact-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.li-compact-article:hover img {
    transform: scale(1.04);
}

.li-compact-content h3 {
    margin: 2px 0 4px;

    font-size: 12px;
    line-height: 1.3;
}

.li-compact-content h3 a {
    text-decoration: none;
}

.li-compact-content h3 a:hover {
    color: var(--li-red);
}

.li-compact-content time {
    color: var(--li-muted);

    font-size: 9px;
}


/* =========================================================
   LES PLUS LUS
   ========================================================= */

.li-most-read {
    margin-top: 40px;
    margin-bottom: 45px;
    padding-top: 5px;
}

.li-most-read-grid {
    display: grid;

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

    gap: 15px;
}

.li-most-read-card {
    position: relative;

    min-width: 0;

    border: 1px solid var(--li-border);

    background: var(--li-white);

    box-shadow: var(--li-shadow);

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.li-most-read-card:hover {
    transform: translateY(-3px);

    box-shadow: var(--li-shadow-hover);
}

.li-most-read-number {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 3;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--li-red);

    color: var(--li-white);

    font-size: 15px;
    font-weight: 900;
}

.li-most-read-image {
    display: block;

    height: 150px;

    overflow: hidden;
}

.li-most-read-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.li-most-read-card:hover .li-most-read-image img {
    transform: scale(1.04);
}

.li-most-read-content {
    padding: 11px;
}

.li-most-read-content h3 {
    margin: 2px 0;

    font-size: 14px;
    line-height: 1.3;
}

.li-most-read-content h3 a {
    text-decoration: none;
}

.li-most-read-content h3 a:hover {
    color: var(--li-red);
}


/* =========================================================
   PLACEHOLDERS / ÉTATS VIDES
   ========================================================= */

.li-empty-widget,
.li-fil-empty {
    padding: 25px 15px;

    border: 1px dashed var(--li-border);

    background: var(--li-light);

    color: var(--li-muted);

    font-size: 13px;

    text-align: center;
}


/* =========================================================
   RESPONSIVE — TABLETTE
   769 — 1100 PX
   ========================================================= */

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

    .li-homepage > .li-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .li-top-grid {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(240px, .9fr);
    }

    .li-news-feed {
        grid-column: 1 / -1;
    }

    .li-feed-list {
        max-height: none;

        display: grid;

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

    .li-home-layout {
        grid-template-columns:
            minmax(0, 1fr)
            270px;
    }

    .li-most-read-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   TABLETTE COMPACTE
   701 — 768 PX
   ========================================================= */

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

    .li-homepage > .li-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .li-top-grid {
        grid-template-columns: 1fr;
    }

    .li-featured-slider {
        min-height: 380px;
    }

    .li-slider-track,
    .li-slide-image {
        height: 380px;
        min-height: 380px;
    }

    .li-top-decryptage {
        display: grid;

        grid-template-columns: 1fr 1.5fr;

        padding-bottom: 0;
    }

    .li-top-decryptage .li-widget-title {
        grid-column: 1 / -1;
    }

    .li-decryptage-feature {
        display: contents;
    }

    .li-decryptage-image {
        height: 180px;
        margin: 0 0 14px 14px;
    }

    .li-decryptage-content {
        padding: 0 14px 14px 0;
    }

    .li-home-layout {
        grid-template-columns: 1fr;
    }

    .li-home-sidebar {
        display: grid;

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

        gap: 18px;
    }

    .li-sidebar-widget {
        margin-bottom: 0;
    }

    .li-politique-layout,
    .li-monde-layout {
        grid-template-columns: 1fr;
    }

    .li-economie-grid,
    .li-decryptages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .li-sports-grid {
        grid-template-columns:
            1.5fr
            1fr;
    }

    .li-sports-main {
        grid-row: span 2;
    }

    .li-analyses-grid {
        grid-template-columns: 1fr;
    }

    .li-analysis-card {
        min-height: 230px;
    }

    .li-most-read-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE
   481 — 700 PX
   ========================================================= */

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

    .li-section-heading {
        margin-bottom: 14px;
    }

    .li-section-heading h2 {
        font-size: 20px;
    }

    .li-section-heading > a {
        font-size: 10px;
    }

    .li-top-news {
        padding-top: 5px;
        margin-bottom: 25px;
    }

    .li-featured-slider,
    .li-slider-track,
    .li-slide-image {
        height: 330px;
        min-height: 330px;
    }

    .li-slide-overlay {
        padding: 65px 16px 22px;
    }

    .li-slide-overlay h1 {
        font-size: 21px;
    }

    .li-slide-overlay p {
        font-size: 11px;
    }

    .li-top-decryptage {
        display: block;
    }

    .li-decryptage-image {
        margin: 0 14px 12px;
        width: calc(100% - 28px);
    }

    .li-decryptage-content {
        padding: 0 14px 14px;
    }

    .li-feed-list {
        display: block;
    }

    .li-feed-item {
        padding: 10px 12px;
    }

    .li-fil-actualites {
        padding: 15px;
    }

    .li-fil-grid {
        grid-template-columns: 1fr;
    }

    .li-home-sidebar {
        grid-template-columns: 1fr;
    }

    .li-societe-list,
    .li-culture-list {
        grid-template-columns: 1fr;
    }

    .li-economie-grid,
    .li-afrique-grid,
    .li-decryptages-grid {
        grid-template-columns: 1fr;
    }

    .li-economie-card > a {
        height: 210px;
    }

    .li-afrique-card > a {
        height: 250px;
    }

    .li-sports-grid {
        grid-template-columns: 1fr;
    }

    .li-sports-main {
        grid-row: auto;
    }

    .li-sports-main > a,
    .li-sports-secondary > a {
        height: 220px;
    }

    .li-category-analyses {
        padding: 15px;
    }

    .li-analysis-card {
        min-height: 250px;
        padding: 18px;
    }

    .li-most-read-grid {
        grid-template-columns: 1fr;
    }

    .li-most-read-image {
        height: 190px;
    }
}


/* =========================================================
   PETIT MOBILE
   380 PX ET MOINS
   ========================================================= */

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

    .li-homepage > .li-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .li-section-heading h2 {
        font-size: 18px;
    }

    .li-section-heading > a {
        font-size: 9px;
    }

    .li-featured-slider,
    .li-slider-track,
    .li-slide-image {
        height: 285px;
        min-height: 285px;
    }

    .li-slide-overlay {
        padding: 50px 12px 18px;
    }

    .li-slide-overlay h1 {
        font-size: 18px;
    }

    .li-slide-overlay p {
        display: none;
    }

    .li-slider-navigation {
        padding: 7px 10px;
    }

    .li-politique-main-image,
    .li-monde-feature-image {
        height: 230px;
    }

    .li-politique-main h3,
    .li-monde-feature h3 {
        font-size: 19px;
    }

    .li-horizontal-article {
        grid-template-columns: 95px minmax(0, 1fr);
        gap: 10px;
    }

    .li-horizontal-image {
        width: 95px;
        height: 72px;
    }

    .li-horizontal-content h3 {
        font-size: 13px;
    }

    .li-horizontal-content p {
        display: none;
    }

    .li-economie-card > a {
        height: 190px;
    }

    .li-afrique-card > a {
        height: 220px;
    }

    .li-analysis-card {
        min-height: 240px;
    }
}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

#li-homepage a:focus-visible,
#li-homepage button:focus-visible,
#li-homepage input:focus-visible {
    outline: 3px solid var(--li-blue);
    outline-offset: 2px;
}


/* =========================================================
   RÉDUCTION DES ANIMATIONS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #li-homepage *,
    #li-homepage *::before,
    #li-homepage *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}






/* DEBUT COLONNE ============================= */

/* =========================================================
   COLONNE DROITE — STRUCTURE PROFESSIONNELLE
   ========================================================= */

.li-politique-right {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 24px;

    box-sizing: border-box;
}


/* =========================================================
   TITRES DE SECTIONS
   ========================================================= */

.li-sidebar-title {
    display: flex;
    align-items: center;

    width: 100%;

    margin: 0 0 14px;

    border-bottom: 3px solid var(--li-red);

    box-sizing: border-box;
}

.li-sidebar-title span {
    display: inline-block;

    padding: 7px 12px;

    background: var(--li-red);
    color: #fff;

    font-size: 12px;
    font-weight: 900;

    line-height: 1;

    text-transform: uppercase;
    letter-spacing: .5px;
}


/* =========================================================
   ARTICLE SECONDAIRE
   ========================================================= */

.li-politique-secondary {
    width: 100%;

    margin: 0;
    padding: 0 0 20px;

    border-bottom: 1px solid #ddd;

    box-sizing: border-box;
}

.li-politique-secondary-image {
    display: block;

    width: 100%;
    height: 190px;

    overflow: hidden;

    background: #eee;
}

.li-politique-secondary-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}

.li-politique-secondary:hover
.li-politique-secondary-image img {
    transform: scale(1.04);
}

.li-politique-secondary-content {
    padding-top: 12px;
}

.li-politique-secondary-content .li-post-category {
    display: inline-block;

    margin-bottom: 7px;
    padding: 4px 8px;

    background: var(--li-red);
    color: #fff;

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
}

.li-politique-secondary-content h3 {
    margin: 0;

    font-size: 19px;
    line-height: 1.25;
    font-weight: 900;
}

.li-politique-secondary-content h3 a {
    color: var(--li-black);
    text-decoration: none;
}

.li-politique-secondary-content h3 a:hover {
    color: var(--li-red);
}


/* =========================================================
   À RETENIR
   ========================================================= */

.li-politique-retenir-list {
    display: flex;
    flex-direction: column;
}

.li-politique-retenir-item {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 12px 0;

    border-bottom: 1px solid #e5e5e5;
}

.li-politique-retenir-item:first-child {
    padding-top: 0;
}

.li-politique-retenir-item:last-child {
    border-bottom: 0;
}

.li-politique-retenir-number {
    flex: 0 0 29px;

    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--li-blue);
    color: #fff;

    font-size: 12px;
    font-weight: 900;
}

.li-politique-retenir-content {
    flex: 1;
    min-width: 0;
}

.li-politique-retenir-content h3 {
    margin: 0 0 5px;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 800;
}

.li-politique-retenir-content h3 a {
    color: var(--li-black);
    text-decoration: none;
}

.li-politique-retenir-content h3 a:hover {
    color: var(--li-red);
}

.li-politique-retenir-content time {
    color: #888;
    font-size: 10px;
}


/* =========================================================
   DÉCRYPTAGES
   ========================================================= */

.li-decryptages-list {
    display: flex;
    flex-direction: column;
}

.li-decryptage-item {
    display: flex;
    gap: 12px;

    padding: 12px 0;

    border-bottom: 1px solid #e5e5e5;
}

.li-decryptage-item:first-child {
    padding-top: 0;
}

.li-decryptage-item:last-child {
    border-bottom: 0;
}

.li-decryptage-image {
    flex: 0 0 90px;

    width: 90px;
    height: 68px;

    overflow: hidden;

    background: #eee;
}

.li-decryptage-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .3s ease;
}

.li-decryptage-item:hover .li-decryptage-image img {
    transform: scale(1.05);
}

.li-decryptage-content {
    flex: 1;
    min-width: 0;
}

.li-decryptage-label {
    display: block;

    margin-bottom: 4px;

    color: var(--li-red);

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
}

.li-decryptage-content h3 {
    margin: 0 0 5px;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 800;
}

.li-decryptage-content h3 a {
    color: var(--li-black);
    text-decoration: none;
}

.li-decryptage-content h3 a:hover {
    color: var(--li-red);
}

.li-decryptage-content time {
    color: #888;
    font-size: 10px;
}


/* =========================================================
   TRIBUNE
   ========================================================= */

.li-tribune-list {
    display: flex;
    flex-direction: column;
}

.li-tribune-item {
    padding: 13px 0;

    border-bottom: 1px solid #e5e5e5;

    position: relative;
}

.li-tribune-item:first-child {
    padding-top: 0;
}

.li-tribune-item:last-child {
    border-bottom: 0;
}

.li-tribune-label {
    display: inline-block;

    margin-bottom: 5px;

    color: var(--li-blue);

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: .5px;
}

.li-tribune-content h3 {
    margin: 0 0 5px;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 900;
}

.li-tribune-content h3 a {
    color: var(--li-black);
    text-decoration: none;
}

.li-tribune-content h3 a:hover {
    color: var(--li-red);
}

.li-tribune-content time {
    color: #888;
    font-size: 10px;
}


/* =========================================================
   LIRE AUSSI
   ========================================================= */

.li-lire-aussi-list {
    display: flex;
    flex-direction: column;
}

.li-lire-aussi-item {
    display: flex;

    gap: 11px;

    padding: 11px 0;

    border-bottom: 1px solid #e5e5e5;
}

.li-lire-aussi-item:first-child {
    padding-top: 0;
}

.li-lire-aussi-item:last-child {
    border-bottom: 0;
}

.li-lire-aussi-image {
    flex: 0 0 80px;

    width: 80px;
    height: 60px;

    overflow: hidden;

    background: #eee;
}

.li-lire-aussi-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.li-lire-aussi-item:hover .li-lire-aussi-image img {
    transform: scale(1.05);
}

.li-lire-aussi-content {
    flex: 1;
    min-width: 0;
}

.li-lire-aussi-content h3 {
    margin: 0 0 5px;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
}

.li-lire-aussi-content h3 a {
    color: var(--li-black);
    text-decoration: none;
}

.li-lire-aussi-content h3 a:hover {
    color: var(--li-red);
}

.li-lire-aussi-content time {
    color: #888;
    font-size: 9px;
}


/* =========================================================
   MESSAGE VIDE
   ========================================================= */

.li-sidebar-empty {
    margin: 0;

    padding: 12px;

    background: #f5f5f5;

    color: #777;

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.li-sidebar-newsletter {
    width: 100%;

    margin: 4px 0 0;

    padding: 22px;

    background: var(--li-blue);

    border-top: 5px solid var(--li-red);

    box-sizing: border-box;
}

.li-newsletter-content {
    color: #fff;
}

.li-newsletter-label {
    display: block;

    margin-bottom: 8px;

    color: #fff;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;
}

.li-newsletter-content h2 {
    margin: 0 0 8px;

    color: #fff;

    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
}

.li-newsletter-content p {
    margin: 0 0 15px;

    color: rgba(255,255,255,.88);

    font-size: 12px;
    line-height: 1.5;
}

.li-newsletter-form {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.li-newsletter-form input {
    width: 100%;
    height: 40px;

    padding: 0 11px;

    border: 0;

    background: #fff;
    color: #111;

    font-size: 12px;

    box-sizing: border-box;
}

.li-newsletter-form button {
    width: 100%;
    height: 40px;

    border: 0;

    background: var(--li-red);
    color: #fff;

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;

    cursor: pointer;

    transition: background .2s ease;
}

.li-newsletter-form button:hover {
    background: #fff;
    color: var(--li-red);
}

.li-newsletter-content small {
    display: block;

    margin-top: 9px;

    color: rgba(255,255,255,.65);

    font-size: 9px;
}


/* =========================================================
   TABLETTE
   ========================================================= */

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

    .li-politique-secondary-image {
        height: 170px;
    }

    .li-politique-secondary-content h3 {
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

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

    .li-politique-right {
        gap: 20px;
    }

    .li-politique-secondary-image {
        height: 210px;
    }

    .li-politique-secondary-content h3 {
        font-size: 19px;
    }

    .li-decryptage-image {
        flex-basis: 95px;
        width: 95px;
        height: 70px;
    }

}

/* FIN COLONNE ============================= */

/* =========================================================
   FIN PAGE D'ACCUEIL
========================================================= */



/* =========================================================
   DEBUT PIED DE PAGE
   FOOTER — L'INTELLIGENT RDC
   IDENTITÉ : ROUGE / BLEU / BLANC
   ========================================================= */

.li-footer {
    width: 100%;
    margin-top: 50px;

    background: #ffffff;
    color: #333333;

    border-top: 4px solid #D71920;

    box-sizing: border-box;
}


/* =========================================================
   CONTENEUR PRINCIPAL
   ========================================================= */

.li-footer-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 50px 20px;

    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        1.2fr
        1fr;

    gap: 45px;

    box-sizing: border-box;
}


/* =========================================================
   COLONNES
   ========================================================= */

.li-footer-column {
    min-width: 0;
}


/* =========================================================
   LOGO
   ========================================================= */

.li-footer-logo {
    margin-bottom: 20px;
}


.li-footer-logo a {
    display: inline-block;

    color: #D71920;

    font-size: 25px;
    font-weight: 900;

    line-height: 1.1;

    text-decoration: none;

    text-transform: uppercase;
}


.li-footer-logo a:hover {
    color: #0057B8;
}


/* Logo WordPress */

.li-footer-logo .custom-logo-link {
    display: inline-flex;

    align-items: center;

    line-height: 0;

    text-decoration: none;
}


.li-footer-logo .custom-logo {
    display: block;

    width: auto;
    height: auto;

    max-width: 190px;
    max-height: 65px;

    object-fit: contain;
}


/* =========================================================
   TEXTE À PROPOS
   ========================================================= */

.li-footer-about p {
    margin: 0;

    color: #555555;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   TITRES DES COLONNES
   ========================================================= */

.li-footer-title {
    position: relative;

    margin: 0 0 20px;

    padding-bottom: 10px;

    color: #0057B8;

    font-size: 17px;
    font-weight: 900;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: .3px;
}


/* Ligne rouge sous le titre */

.li-footer-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 40px;
    height: 3px;

    background: #D71920;
}


/* =========================================================
   LIENS UTILES
   ========================================================= */

.li-footer-links {
    margin: 0;
    padding: 0;

    list-style: none;
}


.li-footer-links li {
    margin: 0;

    padding: 0;

    border-bottom: 1px solid #eeeeee;
}


.li-footer-links li:last-child {
    border-bottom: 0;
}


.li-footer-links a {
    display: block;

    padding: 9px 0;

    color: #444444;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.li-footer-links a:hover {
    color: #D71920;

    padding-left: 6px;
}


/* =========================================================
   CONTACT
   ========================================================= */

.li-footer-contact p {
    margin: 0 0 16px;

    color: #555555;

    font-size: 14px;

    line-height: 1.6;
}


.li-footer-contact p:last-child {
    margin-bottom: 0;
}


.li-footer-contact strong {
    color: #222222;

    font-weight: 800;
}


.li-footer-contact a {
    color: #0057B8;

    font-weight: 700;

    text-decoration: none;

    transition: color .2s ease;
}


.li-footer-contact a:hover {
    color: #D71920;
}


/* =========================================================
   TEXTE RÉSEAUX SOCIAUX
   ========================================================= */

.li-footer-social-text {
    margin: 0 0 18px;

    color: #555555;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   RÉSEAUX SOCIAUX
   ========================================================= */

.li-footer-socials {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;
}


/* =========================================================
   BOUTONS SOCIAUX
   ========================================================= */

.li-footer-social {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #0057B8;
    color: #ffffff;

    font-size: 16px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


.li-footer-social:hover {
    background: #D71920;

    color: #ffffff;

    transform: translateY(-3px);
}


.li-footer-social span {
    display: block;

    line-height: 1;
}


/* =========================================================
   COULEURS DES RÉSEAUX
   ========================================================= */

.li-footer-social.li-facebook {
    background: #0057B8;
}


.li-footer-social.li-x {
    background: #111111;
}


.li-footer-social.li-youtube {
    background: #D71920;
}


.li-footer-social.li-instagram {
    background: #0057B8;
}


/* Hover uniforme */

.li-footer-social.li-facebook:hover,
.li-footer-social.li-x:hover,
.li-footer-social.li-youtube:hover,
.li-footer-social.li-instagram:hover {
    background: #D71920;
}


/* =========================================================
   BARRE COPYRIGHT
   ========================================================= */

.li-footer-bottom {
    width: 100%;

    background: #0057B8;

    border-top: 1px solid rgba(255,255,255,.15);

    box-sizing: border-box;
}


.li-footer-bottom-inner {
    width: 100%;
    max-width: 1200px;

    min-height: 60px;

    margin: 0 auto;

    padding: 15px 20px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    box-sizing: border-box;
}


.li-footer-bottom p {
    margin: 0;

    color: #ffffff;

    font-size: 12px;

    line-height: 1.5;
}


.li-footer-bottom p:last-child {
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .4px;
}


/* =========================================================
   TABLETTE
   701 — 1000 PX
   ========================================================= */

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

    .li-footer-container {
        grid-template-columns:
            1fr 1fr;

        gap: 35px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

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

    .li-footer {
        margin-top: 35px;
    }


    .li-footer-container {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 40px 20px;
    }


    .li-footer-column {
        width: 100%;
    }


    .li-footer-logo {
        margin-bottom: 15px;
    }


    .li-footer-logo .custom-logo {
        max-width: 160px;
        max-height: 55px;
    }


    .li-footer-about p {
        font-size: 13px;
    }


    .li-footer-title {
        font-size: 16px;

        margin-bottom: 15px;
    }


    .li-footer-links a {
        font-size: 13px;
    }


    .li-footer-contact p {
        font-size: 13px;
    }


    .li-footer-socials {
        gap: 8px;
    }


    .li-footer-social {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }


    .li-footer-bottom-inner {
        min-height: auto;

        padding: 15px 20px;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        gap: 6px;
    }

}


/* =========================================================
   PETITS TÉLÉPHONES
   380 PX ET MOINS
   ========================================================= */

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

    .li-footer-container {
        padding: 35px 15px;

        gap: 28px;
    }


    .li-footer-logo .custom-logo {
        max-width: 145px;
        max-height: 50px;
    }


    .li-footer-about p {
        font-size: 12px;

        line-height: 1.6;
    }


    .li-footer-title {
        font-size: 15px;
    }


    .li-footer-links a,
    .li-footer-contact p,
    .li-footer-social-text {
        font-size: 12px;
    }


    .li-footer-social {
        width: 36px;
        height: 36px;

        flex-basis: 36px;

        font-size: 14px;
    }


    .li-footer-bottom p {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

.li-footer a:focus-visible {
    outline: 2px solid #D71920;

    outline-offset: 3px;
}

/* =========================================================
   FIN PIED DE PAGE
   ========================================================= */
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
/* ===============DEBUT PAGE SINGLE ======================= */   
   
/* =========================================================
   CONTENEUR PRINCIPAL
========================================================= */

.li-single {
    width: 100%;
    padding: 45px 0 60px;
    background: #ffffff;
}

.li-single .li-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}


/* =========================================================
   STRUCTURE ARTICLE + SIDEBAR
========================================================= */

.li-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}


/* =========================================================
   ARTICLE PRINCIPAL
========================================================= */

.li-single-content {
    min-width: 0;
    width: 100%;
}


/* =========================================================
   CATÉGORIE
========================================================= */

.li-single-category {
    margin-bottom: 14px;
}

.li-single-category a {
    display: inline-block;

    padding: 6px 12px;

    background: #D71920;
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .5px;

    text-decoration: none;

    border-radius: 2px;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.li-single-category a:hover {
    background: #0057B8;
    color: #ffffff;
}


/* =========================================================
   TITRE DE L'ARTICLE
========================================================= */

.li-single-title {
    margin: 0 0 18px;

    max-width: 950px;

    color: #111111;

    font-size: 44px;
    font-weight: 900;

    line-height: 1.08;
    letter-spacing: -1px;
}


/* =========================================================
   CHAPÔ
========================================================= */

.li-single-excerpt {
    max-width: 900px;

    margin-bottom: 20px;

    color: #555555;

    font-size: 19px;
    font-weight: 500;

    line-height: 1.55;

    border-left: 4px solid #D71920;

    padding-left: 18px;
}


/* =========================================================
   MÉTADONNÉES
========================================================= */

.li-single-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;

    color: #777777;

    font-size: 13px;
    line-height: 1.5;
}

.li-single-meta strong {
    color: #222222;
    font-weight: 700;
}

.li-meta-separator {
    color: #D71920;
    font-weight: 900;
}


/* =========================================================
   IMAGE PRINCIPALE
========================================================= */

.li-single-thumbnail {
    width: 100%;

    margin: 0 0 25px;
    padding: 0;

    overflow: hidden;

    background: #f3f3f3;
}

.li-single-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 650px;

    object-fit: cover;
}


/* =========================================================
   PARTAGE
========================================================= */

.li-single-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 30px;

    padding: 14px 0;

    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.li-single-share strong {
    color: #222222;

    font-size: 13px;
    font-weight: 800;
}

.li-share-buttons {
    display: flex;
    align-items: center;

    gap: 7px;
}

.li-share-button {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.li-share-button:hover {
    color: #ffffff;
    transform: translateY(-2px);
    opacity: .88;
}


/* Facebook */

.li-share-facebook {
    background: #1877F2;
}


/* X */

.li-share-x {
    background: #111111;
}


/* WhatsApp */

.li-share-whatsapp {
    background: #25D366;
}


/* LinkedIn */

.li-share-linkedin {
    background: #0A66C2;
}


/* =========================================================
   CORPS DE L'ARTICLE
========================================================= */

.li-single-body {
    color: #222222;

    font-size: 17px;
    line-height: 1.8;

    max-width: 900px;
}


/* Paragraphes */

.li-single-body p {
    margin: 0 0 22px;
}


/* Titres */

.li-single-body h2 {
    margin: 38px 0 18px;

    color: #111111;

    font-size: 28px;
    font-weight: 900;

    line-height: 1.2;

    border-left: 4px solid #D71920;
    padding-left: 12px;
}

.li-single-body h3 {
    margin: 30px 0 15px;

    color: #111111;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.3;
}


/* Liens */

.li-single-body a {
    color: #0057B8;

    font-weight: 600;

    text-decoration: underline;
}

.li-single-body a:hover {
    color: #D71920;
}


/* Images dans l'article */

.li-single-body img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 28px auto;
}


/* Légendes */

.li-single-body figcaption {
    margin-top: -18px;
    margin-bottom: 25px;

    color: #777777;

    font-size: 12px;
    line-height: 1.5;

    text-align: center;
}


/* Citations */

.li-single-body blockquote {
    margin: 30px 0;

    padding: 20px 25px;

    background: #f3f5f7;

    border-left: 5px solid #D71920;

    color: #333333;

    font-size: 19px;
    font-weight: 600;

    line-height: 1.6;
}


/* Listes */

.li-single-body ul,
.li-single-body ol {
    margin: 0 0 25px;
    padding-left: 25px;
}

.li-single-body li {
    margin-bottom: 8px;
}


/* =========================================================
   NAVIGATION ARTICLE PRÉCÉDENT / SUIVANT
========================================================= */

.li-post-navigation {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 45px;

    padding-top: 25px;

    border-top: 2px solid #111111;
}


.li-post-navigation-prev,
.li-post-navigation-next {
    min-width: 0;
}


.li-post-navigation-next {
    text-align: right;
}


.li-post-navigation-label {
    display: block;

    margin-bottom: 7px;

    color: #D71920;

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: .5px;
}


.li-post-navigation-link {
    display: block;

    color: #222222;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;

    text-decoration: none;
}


.li-post-navigation-link:hover {
    color: #D71920;
}


/* =========================================================
   À LIRE AUSSI
========================================================= */

.li-single-related {
    margin-top: 50px;
    padding-top: 30px;

    border-top: 3px solid #111111;
}


.li-single-related .li-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;

    border-bottom: 2px solid #D71920;
}


.li-single-related .li-section-heading h2 {
    margin: 0;

    padding: 0 0 10px;

    color: #111111;

    font-size: 24px;
    font-weight: 900;

    text-transform: uppercase;
}


/* =========================================================
   GRILLE ARTICLES ASSOCIÉS
========================================================= */

.li-related-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
}


.li-related-card {
    min-width: 0;

    background: #ffffff;

    border: 1px solid #e5e5e5;

    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.li-related-card:hover {
    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}


.li-related-image {
    display: block;

    width: 100%;
    height: 160px;

    overflow: hidden;

    background: #f3f3f3;
}


.li-related-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}


.li-related-card:hover .li-related-image img {
    transform: scale(1.04);
}


.li-related-content {
    padding: 13px;
}


.li-related-content .li-post-category {
    display: inline-block;

    margin-bottom: 7px;

    color: #D71920;

    font-size: 10px;
    font-weight: 900;

    text-transform: uppercase;
}


.li-related-content h3 {
    margin: 0;

    font-size: 16px;
    line-height: 1.3;
}


.li-related-content h3 a {
    color: #111111;

    text-decoration: none;
}


.li-related-content h3 a:hover {
    color: #D71920;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.li-category-newsletter {
    margin-top: 50px;

    padding: 30px;

    background: #0057B8;

    border-top: 5px solid #D71920;

    box-sizing: border-box;
}


.li-category-newsletter-content {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);

    gap: 35px;

    align-items: center;
}


.li-category-newsletter-label {
    display: inline-block;

    margin-bottom: 8px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;
}


.li-category-newsletter-text h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 27px;
    font-weight: 900;

    line-height: 1.2;
}


.li-category-newsletter-text p {
    margin: 0;

    color: rgba(255,255,255,.88);

    font-size: 14px;
    line-height: 1.6;
}


.li-category-newsletter-form label {
    display: block;

    margin-bottom: 7px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
}


.li-category-newsletter-input {
    display: flex;

    gap: 7px;
}


.li-category-newsletter-input input {
    flex: 1 1 auto;

    min-width: 0;

    height: 44px;

    padding: 0 13px;

    border: 0;

    background: #ffffff;
    color: #111111;

    font-size: 14px;

    box-sizing: border-box;
}


.li-category-newsletter-input input:focus {
    outline: 2px solid #D71920;
    outline-offset: 1px;
}


.li-category-newsletter-input button {
    flex: 0 0 auto;

    height: 44px;

    padding: 0 18px;

    border: 0;

    background: #D71920;
    color: #ffffff;

    font-size: 12px;
    font-weight: 900;

    text-transform: uppercase;

    cursor: pointer;

    transition: background-color .2s ease;
}


.li-category-newsletter-input button:hover {
    background: #111111;
}


.li-category-newsletter-form small {
    display: block;

    margin-top: 8px;

    color: rgba(255,255,255,.75);

    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   SIDEBAR
========================================================= */

.li-single-sidebar {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 25px;
}


/* =========================================================
   WIDGET SIDEBAR
========================================================= */

.li-single-widget {
    width: 100%;

    background: #ffffff;

    border: 1px solid #e1e1e1;

    box-sizing: border-box;
}


/* =========================================================
   TITRE WIDGET
========================================================= */

.li-single-widget-title {
    position: relative;

    padding: 13px 15px;

    background: #D71920;
    color: #ffffff;

    font-size: 14px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: .3px;
}


/* =========================================================
   À RETENIR
========================================================= */

.li-sidebar-numbered {
    padding: 5px 15px;
}


.li-sidebar-numbered-item {
    display: grid;

    grid-template-columns: 34px minmax(0, 1fr);

    gap: 10px;

    padding: 15px 0;

    border-bottom: 1px solid #e5e5e5;
}


.li-sidebar-numbered-item:last-child {
    border-bottom: 0;
}


.li-sidebar-number {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #0057B8;
    color: #ffffff;

    font-size: 13px;
    font-weight: 900;
}


.li-sidebar-numbered-item .li-post-category {
    display: block;

    margin-bottom: 4px;

    color: #D71920;

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
}


.li-sidebar-numbered-item h3 {
    margin: 0;

    font-size: 14px;
    line-height: 1.35;
}


.li-sidebar-numbered-item h3 a {
    color: #222222;

    text-decoration: none;
}


.li-sidebar-numbered-item h3 a:hover {
    color: #D71920;
}


/* =========================================================
   PUBLICITÉ
========================================================= */

.li-single-ad {
    background: #f7f7f7;
}


.li-ad-box {
    min-height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    color: #999999;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .5px;

    text-align: center;
}


/* =========================================================
   DERNIÈRES PUBLICATIONS
========================================================= */

.li-sidebar-latest {
    padding: 5px 15px;
}


.li-sidebar-latest-item {
    display: grid;

    grid-template-columns: 85px minmax(0, 1fr);

    gap: 12px;

    padding: 14px 0;

    border-bottom: 1px solid #e5e5e5;
}


.li-sidebar-latest-item:last-child {
    border-bottom: 0;
}


.li-sidebar-latest-image {
    display: block;

    width: 85px;
    height: 65px;

    overflow: hidden;

    background: #eeeeee;
}


.li-sidebar-thumb {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.li-sidebar-latest-item .li-post-category {
    display: block;

    margin-bottom: 4px;

    color: #D71920;

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
}


.li-sidebar-latest-item h3 {
    margin: 0 0 5px;

    font-size: 13px;
    line-height: 1.3;
}


.li-sidebar-latest-item h3 a {
    color: #222222;

    text-decoration: none;
}


.li-sidebar-latest-item h3 a:hover {
    color: #D71920;
}


.li-sidebar-latest-item time {
    color: #999999;

    font-size: 10px;
}


/* =========================================================
   TABLETTE
========================================================= */

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

    .li-single {
        padding-top: 35px;
    }

    .li-single-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 25px;
    }

    .li-single-title {
        font-size: 36px;
    }

    .li-single-excerpt {
        font-size: 17px;
    }

    .li-single-body {
        font-size: 16px;
    }

    .li-category-newsletter-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }

}


/* =========================================================
   TABLETTE PETITE
========================================================= */

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

    .li-single-layout {
        grid-template-columns: 1fr;
    }

    .li-single-sidebar {
        display: grid;

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

        align-items: start;
    }

    .li-single-ad {
        grid-column: span 2;
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .li-single {
        padding: 25px 0 40px;
    }

    .li-single .li-container {
        padding-left: 15px;
        padding-right: 15px;
    }


    /* TITRE */

    .li-single-title {
        margin-bottom: 15px;

        font-size: 29px;
        line-height: 1.12;

        letter-spacing: -.5px;
    }


    /* CHAPÔ */

    .li-single-excerpt {
        font-size: 16px;
        line-height: 1.5;

        padding-left: 13px;
    }


    /* MÉTADONNÉES */

    .li-single-meta {
        font-size: 11px;
    }


    /* IMAGE */

    .li-single-thumbnail {
        margin-bottom: 20px;
    }

    .li-single-image {
        max-height: 450px;
    }


    /* PARTAGE */

    .li-single-share {
        margin-bottom: 25px;
    }


    /* CONTENU */

    .li-single-body {
        font-size: 16px;
        line-height: 1.75;
    }

    .li-single-body h2 {
        font-size: 23px;
    }

    .li-single-body h3 {
        font-size: 19px;
    }

    .li-single-body blockquote {
        font-size: 17px;
        padding: 17px;
    }


    /* NAVIGATION */

    .li-post-navigation {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 35px;
    }

    .li-post-navigation-next {
        text-align: left;
    }


    /* ARTICLES ASSOCIÉS */

    .li-single-related {
        margin-top: 35px;
    }

    .li-related-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .li-related-image {
        height: 190px;
    }


    /* NEWSLETTER */

    .li-category-newsletter {
        margin-top: 35px;

        padding: 22px 18px;
    }

    .li-category-newsletter-text h2 {
        font-size: 22px;
    }

    .li-category-newsletter-input {
        flex-direction: column;
    }

    .li-category-newsletter-input input,
    .li-category-newsletter-input button {
        width: 100%;
    }


    /* SIDEBAR */

    .li-single-sidebar {
        display: flex;

        flex-direction: column;

        gap: 18px;
    }

    .li-single-ad {
        grid-column: auto;
    }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
========================================================= */

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

    .li-single-title {
        font-size: 25px;
    }

    .li-single-excerpt {
        font-size: 14px;
    }

    .li-single-body {
        font-size: 15px;
    }

    .li-share-button {
        width: 31px;
        height: 31px;

        font-size: 12px;
    }

    .li-related-image {
        height: 160px;
    }

}

/* ===============FIN PAGE SINGLE ======================= */