/* =========================================================
   MAGRIBACHE — ARTICLE 1
   ARTICLE.CSS
   PARTIE 1 — BASE + STRUCTURE GÉNÉRALE
   Compatible avec le HTML réel de article1.html
========================================================= */


/* =========================================================
   01 — RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: #f7f8f6;

    color: #ffa202;

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

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    font: inherit;
}


/* =========================================================
   02 — VARIABLES DU DESIGN
========================================================= */

:root {

    --green: #16894d;
    --green-dark: #0d6338;
    --green-soft: #eaf6ef;

    --orange: #f59a23;

    --dark: #172b3a;
    --text: #52616d;
    --muted: #7b8790;

    --white: #ffffff;
    --background: #f7f8f6;
    --soft: #eef2ef;

    --border: #dfe6e2;

    --shadow:
        0 20px 60px rgba(17, 35, 49, 0.08);

    --shadow-large:
        0 35px 100px rgba(17, 35, 49, 0.13);

    --radius: 28px;

    --container:
        1180px;

    --transition:
        0.4s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   03 — CONTAINER
   Correspond directement à :
   <div class="container">
========================================================= */

.container {

    width: min(
        var(--container),
        calc(100% - 48px)
    );

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

}


/* =========================================================
   04 — PAGE
========================================================= */

.article-page {

    width: 100%;

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f8f6 100%
        );

}


/* =========================================================
   05 — SÉLECTION DU TEXTE
========================================================= */

::selection {

    background: var(--green);

    color: #ffffff;

}


/* =========================================================
   06 — FOCUS ACCESSIBLE
========================================================= */

a:focus-visible,
button:focus-visible {

    outline: 3px solid rgba(22, 137, 77, .35);

    outline-offset: 5px;

}


/* =========================================================
   07 — RESPONSIVE GLOBAL
========================================================= */

@media (max-width: 768px) {

    .container {

        width: calc(100% - 32px);

    }

}


@media (max-width: 480px) {

    .container {

        width: calc(100% - 24px);

    }

}
/* =========================================================
   MAGRIBACHE — ARTICLE 1
   HERO / COUVERTURE
   CSS COMPATIBLE AVEC LE HTML RÉEL
========================================================= */

/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL DE LA COUVERTURE
--------------------------------------------------------- */

.article-cover {
    position: relative;
    width: 100%;
    min-height: 680px;

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

    overflow: hidden;

    background: #10251c;
}


/* ---------------------------------------------------------
   IMAGE PRINCIPALE
--------------------------------------------------------- */

.article-cover-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 1;
}

.article-cover-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.02);

    transition:
        transform 1.2s cubic-bezier(.22, 1, .36, 1),
        filter 1s ease;
}


/* ---------------------------------------------------------
   INTERACTION SUR L'IMAGE
--------------------------------------------------------- */

.article-cover:hover .article-cover-image img {
    transform: scale(1.07);

    filter: brightness(.78);
}


/* ---------------------------------------------------------
   OVERLAY
--------------------------------------------------------- */

.article-cover-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(5, 20, 13, .12) 0%,
            rgba(5, 20, 13, .28) 45%,
            rgba(5, 20, 13, .62) 100%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   CONTENU DU HERO
--------------------------------------------------------- */

.article-cover-content {
    position: relative;

    z-index: 5;

    width: min(850px, calc(100% - 48px));

    margin: 0 auto;

    padding: 55px 60px;

    text-align: center;

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

    background:
        rgba(8, 25, 17, .34);

    border:
        1px solid rgba(255, 255, 255, .16);

    border-radius: 26px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .20);

    overflow: hidden;
}


/* ---------------------------------------------------------
   PETIT ÉLÉMENT DÉCORATIF
--------------------------------------------------------- */

.article-cover-content::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -70px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* ---------------------------------------------------------
   CATÉGORIE
--------------------------------------------------------- */

.article-cover-category {
    position: relative;
    z-index: 2;

    display: inline-block;

    margin-bottom: 22px;

    color: #9be5ba;

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

    font-size: .70rem;

    font-weight: 700;

    letter-spacing: 3.5px;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   PETITE LIGNE SOUS LA CATÉGORIE
--------------------------------------------------------- */

.article-cover-category::after {
    content: "";

    display: block;

    width: 42px;
    height: 2px;

    margin: 13px auto 0;

    background: #f59a23;

    transform-origin: center;

    animation:
        articleLineReveal
        1s
        cubic-bezier(.22, 1, .36, 1)
        .35s
        both;
}


/* ---------------------------------------------------------
   TITRE PRINCIPAL
--------------------------------------------------------- */

.article-cover-title {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    max-width: 800px;

    margin: 0;

    padding: 0;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2.4rem,
            5vw,
            4.35rem
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -.035em;

    text-align: center;

    text-shadow:
        0 5px 25px rgba(0, 0, 0, .32);

    animation:
        articleTitleReveal
        1.15s
        cubic-bezier(.22, 1, .36, 1)
        .15s
        both;
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.article-cover-description {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    max-width: 650px;

    margin: 27px auto 0;

    padding: 0;

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

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

    font-size: .94rem;

    font-weight: 400;

    line-height: 1.8;

    text-align: center;

    animation:
        articleDescriptionReveal
        1s
        cubic-bezier(.22, 1, .36, 1)
        .65s
        both;
}


/* ---------------------------------------------------------
   INFORMATIONS
--------------------------------------------------------- */

.article-info {
    position: relative;
    z-index: 5;

    display: flex;

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

    flex-wrap: wrap;

    gap: 10px 25px;

    margin-top: 30px;

    padding-top: 20px;

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

    animation:
        articleInfoReveal
        .9s
        cubic-bezier(.22, 1, .36, 1)
        1s
        both;
}


/* ---------------------------------------------------------
   INFORMATIONS — TEXTE
--------------------------------------------------------- */

.article-info span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

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

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

    font-size: .72rem;

    font-weight: 400;
}


/* ---------------------------------------------------------
   INFORMATIONS — ICÔNES
--------------------------------------------------------- */

.article-info i {
    color: #9be5ba;

    font-size: .75rem;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes articleLineReveal {

    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}


@keyframes articleTitleReveal {

    0% {
        opacity: 0;

        transform:
            translateY(35px)
            scale(.97);

        filter: blur(12px);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }
}


@keyframes articleDescriptionReveal {

    0% {
        opacity: 0;

        transform:
            translateY(20px);

        filter: blur(8px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);

        filter: blur(0);
    }
}


@keyframes articleInfoReveal {

    0% {
        opacity: 0;

        transform:
            translateY(15px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 900px) {

    .article-cover {
        min-height: 620px;
    }

    .article-cover-content {
        width: calc(100% - 50px);

        padding: 50px 40px;
    }

    .article-cover-title {
        font-size:
            clamp(
                2.2rem,
                6vw,
                3.7rem
            );
    }
}


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

@media (max-width: 600px) {

    .article-cover {
        min-height: 570px;
    }

    .article-cover-content {
        width: calc(100% - 30px);

        padding: 38px 22px;

        border-radius: 21px;
    }

    .article-cover-category {
        margin-bottom: 17px;

        font-size: .60rem;

        letter-spacing: 2.5px;
    }

    .article-cover-title {
        font-size: 2.15rem;

        line-height: 1.12;
    }

    .article-cover-description {
        margin-top: 22px;

        font-size: .84rem;

        line-height: 1.75;
    }

    .article-info {
        gap: 9px 15px;

        margin-top: 23px;

        padding-top: 17px;
    }

    .article-info span {
        font-size: .65rem;
    }
}/* =========================================================
   MAGRIBACHE — ARTICLE 1
   PARTIE 3 — CONTENU ÉDITORIAL
   Compatible avec le HTML réel de article1.html
========================================================= */


/* =========================================================
   23 — ZONE PRINCIPALE DE L'ARTICLE
========================================================= */

.article-content {

    width: min(
        820px,
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding: 110px 0 40px;

}


/* =========================================================
   24 — INTRODUCTION
========================================================= */

.article-introduction {

    position: relative;

    margin-bottom: 75px;

    padding: 0 0 0 34px;

    border-left: 3px solid var(--green);

}

.article-introduction p {

    color: var(--dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.38rem;

    line-height: 1.85;

}


/* =========================================================
   25 — PREMIÈRE LETTRE
========================================================= */

.article-introduction p::first-letter {

    float: left;

    margin:
        8px 12px 0 0;

    color: var(--green);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 4.8rem;

    font-weight: 600;

    line-height: .72;

}


/* =========================================================
   26 — SECTIONS
========================================================= */

.article-section {

    position: relative;

    margin-bottom: 90px;

}


/* =========================================================
   27 — NUMÉRO DE SECTION
========================================================= */

.section-number {

    display: block;

    margin-bottom: 15px;

    color: var(--green);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


/* =========================================================
   28 — TITRES H2
========================================================= */

.article-section h2 {

    margin-bottom: 28px;

    color: var(--dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -.025em;

}


/* =========================================================
   29 — PETIT TRAIT SOUS LE TITRE
========================================================= */

.article-section h2::after {

    content: "";

    display: block;

    width: 48px;

    height: 3px;

    margin-top: 20px;

    background: var(--green);

}


/* =========================================================
   30 — PARAGRAPHES
========================================================= */

.article-section p {

    margin-bottom: 27px;

    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.13rem;

    line-height: 2;

}


/* =========================================================
   31 — DERNIER PARAGRAPHE
========================================================= */

.article-section p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   32 — IMAGE DANS L'ARTICLE
========================================================= */

.article-image {

    margin: 70px 0 85px;

}


/* =========================================================
   33 — IMAGE
========================================================= */

.article-image img {

    width: 100%;

    height: auto;

    max-height: 650px;

    object-fit: cover;

    border-radius: 24px;

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

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        box-shadow .8s ease;

}


/* =========================================================
   34 — INTERACTION IMAGE
========================================================= */

.article-image:hover img {

    transform: translateY(-6px);

    box-shadow:
        0 45px 110px rgba(17,35,49,.17);

}


/* =========================================================
   35 — LÉGENDE
========================================================= */

.article-image figcaption {

    margin-top: 14px;

    padding-left: 3px;

    color: var(--muted);

    font-size: .74rem;

    line-height: 1.6;

}


/* =========================================================
   36 — LISTE DES CRITÈRES
========================================================= */

.criteria-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: 35px;

}


/* =========================================================
   37 — ITEM CRITÈRE
========================================================= */

.criteria-item {

    position: relative;

    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 22px;

    padding: 25px 28px;

    background: #ffffff;

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

    border-radius: 18px;

    box-shadow:
        0 10px 35px rgba(17,35,49,.045);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}


/* =========================================================
   38 — HOVER CRITÈRE
========================================================= */

.criteria-item:hover {

    transform: translateX(6px);

    border-color:
        rgba(22,137,77,.28);

    box-shadow:
        0 18px 45px rgba(17,35,49,.08);

}


/* =========================================================
   39 — ICÔNE / NUMÉRO DU CRITÈRE
========================================================= */

.criteria-item > i {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--green-soft);

    color: var(--green);

    font-size: 1rem;

}


/* =========================================================
   40 — TITRE CRITÈRE
========================================================= */

.criteria-item h3 {

    margin-bottom: 8px;

    color: var(--dark);

    font-size: 1.02rem;

    font-weight: 700;

}


/* =========================================================
   41 — TEXTE CRITÈRE
========================================================= */

.criteria-item p {

    margin: 0;

    color: var(--text);

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

    font-size: .92rem;

    line-height: 1.75;

}


/* =========================================================
   42 — BLOC ATTENTION
========================================================= */

.warning-box {

    position: relative;

    margin: 55px 0;

    padding: 32px 35px 32px 70px;

    background:
        linear-gradient(
            135deg,
            #fffaf1,
            #fffdf8
        );

    border: 1px solid #f3dfb9;

    border-radius: 20px;

    box-shadow:
        0 15px 40px rgba(112,77,20,.06);

}


/* =========================================================
   43 — ICÔNE WARNING
========================================================= */

.warning-box::before {

    content: "\f071";

    position: absolute;

    left: 25px;

    top: 31px;

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--orange);

    font-family:
        "Font Awesome 6 Free";

    font-weight: 900;

}


/* =========================================================
   44 — TEXTE WARNING
========================================================= */

.warning-box p {

    margin: 0;

    color: #685333;

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

    font-size: .9rem;

    line-height: 1.8;

}


/* =========================================================
   45 — BLOC EXPERT
========================================================= */

.expert-box {

    position: relative;

    margin: 70px 0;

    padding: 42px 45px;

    background:
        linear-gradient(
            135deg,
            #123b29,
            #16894d
        );

    border-radius: 25px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(22,137,77,.18);

}


/* =========================================================
   46 — DÉCOR EXPERT
========================================================= */

.expert-box::after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    right: -100px;

    top: -100px;

    border-radius: 50%;

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

}


/* =========================================================
   47 — ICÔNE EXPERT
========================================================= */

.expert-box > i {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    margin-bottom: 20px;

    border-radius: 50%;

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

    color: #ffffff;

}


/* =========================================================
   48 — TITRE EXPERT
========================================================= */

.expert-box h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 14px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.65rem;

    font-weight: 500;

}


/* =========================================================
   49 — TEXTE EXPERT
========================================================= */

.expert-box p {

    position: relative;

    z-index: 2;

    margin: 0;

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

    font-size: .94rem;

    line-height: 1.85;

}


/* =========================================================
   50 — RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 900px) {

    .article-content {

        padding-top: 90px;

    }

    .article-introduction p {

        font-size: 1.25rem;

    }

    .article-section {

        margin-bottom: 75px;

    }

    .criteria-item {

        grid-template-columns: 44px 1fr;

        gap: 17px;

    }

}


/* =========================================================
   51 — RESPONSIVE MOBILE
========================================================= */

@media (max-width: 600px) {

    .article-content {

        width: calc(100% - 28px);

        padding-top: 70px;

    }

    .article-introduction {

        padding-left: 22px;

        margin-bottom: 60px;

    }

    .article-introduction p {

        font-size: 1.08rem;

        line-height: 1.85;

    }

    .article-introduction p::first-letter {

        font-size: 3.8rem;

    }

    .article-section {

        margin-bottom: 65px;

    }

    .article-section h2 {

        font-size: 2rem;

    }

    .article-section p {

        font-size: 1rem;

        line-height: 1.9;

    }

    .article-image {

        margin: 55px 0 65px;

    }

    .article-image img {

        border-radius: 18px;

    }

    .criteria-list {

        gap: 12px;

    }

    .criteria-item {

        grid-template-columns: 1fr;

        gap: 14px;

        padding: 22px;

    }

    .criteria-item > i {

        width: 42px;

        height: 42px;

    }

    .criteria-item p {

        font-size: .86rem;

    }

    .warning-box {

        padding:
            28px
            25px
            28px
            60px;

    }

    .warning-box::before {

        left: 20px;

        top: 27px;

    }

    .expert-box {

        margin: 55px 0;

        padding: 35px 25px;

        border-radius: 21px;

    }

    .expert-box h3 {

        font-size: 1.45rem;

    }

}
/* =========================================================
   MAGRIBACHE — ARTICLE 1
   PARTIE 4 — NAVIGATION FINALE
========================================================= */


/* =========================================================
   52 — CONCLUSION
========================================================= */

.article-conclusion {

    position: relative;

    margin-top: 90px;
    margin-bottom: 55px;

    padding: 58px 65px;

    background: #ffffff;

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

    border-radius: 28px;

    box-shadow:
        0 25px 75px rgba(17, 35, 49, .08);

    overflow: hidden;
}

.article-conclusion::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 5px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            var(--green),
            #58c889
        );
}

.article-conclusion::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -110px;
    top: -110px;

    border-radius: 50%;

    background:
        rgba(22, 137, 77, .045);
}

.article-conclusion h2 {

    position: relative;

    z-index: 2;

    margin-bottom: 24px;

    color: var(--dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    font-weight: 500;

    line-height: 1.2;

    letter-spacing: -.025em;
}

.article-conclusion h2::after {

    content: "";

    display: block;

    width: 48px;

    height: 3px;

    margin-top: 20px;

    background: var(--green);
}

.article-conclusion p {

    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0;

    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.13rem;

    line-height: 2;
}


/* =========================================================
   53 — FOOTER
========================================================= */

.article-footer {

    width: 100%;

    padding-bottom: 90px;
}


/* =========================================================
   MAGRIBACHE
   NAVIGATION DES ARTICLES
   VERSION PROPRE ET INDÉPENDANTE
========================================================= */

.article-navigation {

    width: min(820px, calc(100% - 48px));

    margin: 0 auto 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


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

.article-nav-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: 190px;

    height: 54px;

    padding: 0 24px;

    border-radius: 50px;

    background: #ffffff;

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

    font-size: 0.82rem;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    overflow: hidden;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


/* =========================================================
   RETOUR AU BLOG
========================================================= */

.article-nav-back {

    color: #172b3a;

    border: 1px solid #dfe6e2;

    box-shadow:
        0 8px 25px rgba(17, 35, 49, 0.06);

}


/* =========================================================
   ARTICLE SUIVANT
========================================================= */

.article-nav-next {

    color: #16894d;

    border: 1px solid #16894d;

    box-shadow:
        0 8px 25px rgba(17, 35, 49, 0.06);

}


/* =========================================================
   ICÔNES
========================================================= */

.article-nav-btn i {

    position: relative;

    z-index: 2;

    font-size: 0.9rem;

    transition:
        transform 0.35s ease,
        color 0.35s ease;

}


/* =========================================================
   TEXTE
========================================================= */

.article-nav-btn span {

    position: relative;

    z-index: 2;

}


/* =========================================================
   HOVER — RETOUR AU BLOG
========================================================= */

.article-nav-back:hover {

    background: #16894d;

    border-color: #16894d;

    color: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(22, 137, 77, 0.18);

}


.article-nav-back:hover i {

    transform: translateX(-5px);

    color: #ffffff;

}


/* =========================================================
   HOVER — ARTICLE SUIVANT
========================================================= */

.article-nav-next:hover {

    background: #16894d;

    border-color: #16894d;

    color: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(22, 137, 77, 0.18);

}


.article-nav-next:hover i {

    transform: translateX(5px);

    color: #ffffff;

}


/* =========================================================
   RESPONSIVE — TABLETTE
========================================================= */

@media (max-width: 768px) {

    .article-navigation {

        width: calc(100% - 32px);

        gap: 20px;

    }

    .article-nav-btn {

        width: 180px;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 520px) {

    .article-navigation {

        width: calc(100% - 28px);

        flex-direction: column;

        align-items: stretch;

        gap: 14px;

    }

    .article-nav-btn {

        width: 100%;

    }

}

/* ========================================================================== */
/* MAGRIBACHE — DESIGN ÉDITORIAL COMMUN AUX ARTICLES 1 À 4                    */
/* ========================================================================== */

:root{
    --green:#f58220;
    --green-dark:#181818;
    --green-soft:#fff3e8;
    --orange:#f58220;
    --dark:#181818;
    --text:#555;
    --muted:#777;
    --background:#fff;
    --soft:#f6f3ed;
    --border:#e1ddd4;
}

.article-page{
    background:#fff;
    color:#181818;
    font-family:'Manrope',sans-serif;
}
.article-page ::selection{background:#f58220;color:#fff}
.article-page a:focus-visible,
.article-page button:focus-visible{outline-color:rgba(245,130,32,.38)}

/* Navigation de lecture */
.article-site-header{
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    width:100%;
    padding:13px 0;
    border-bottom:1px solid rgba(24,24,24,.08);
    background:rgba(255,255,255,.84);
    -webkit-backdrop-filter:blur(22px) saturate(1.4);
    backdrop-filter:blur(22px) saturate(1.4);
}
.article-site-nav{display:flex;align-items:center;gap:34px}
.article-logo{display:block;margin-right:auto}
.article-logo img{width:154px;height:auto}
.article-site-nav nav{display:flex;align-items:center;gap:28px}
.article-site-nav nav a{position:relative;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#444}
.article-site-nav nav a::after{position:absolute;right:0;bottom:-8px;left:0;height:2px;background:#f58220;content:"";transform:scaleX(0);transform-origin:right;transition:transform .3s}
.article-site-nav nav a:hover::after{transform:scaleX(1);transform-origin:left}
.article-journal-link{
    display:inline-flex;
    min-height:42px;
    padding:0 17px;
    align-items:center;
    gap:9px;
    border:1px solid #dcd8cf;
    border-radius:999px;
    background:#fff;
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:#181818;
    transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.article-journal-link:hover{border-color:#181818;background:#181818;color:#fff;transform:translateY(-2px)}
.article-journal-link i{color:#f58220}

/* Couverture claire avec une photographie propre à chaque article */
.article-page .article-cover{
    position:relative;
    display:flex;
    min-height:690px;
    padding:142px 0 72px;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
    border-bottom:1px solid #e1ddd4;
    background:#fff;
    isolation:isolate;
}
.article-page .article-cover::before{
    position:absolute;
    z-index:1;
    top:122px;
    right:5%;
    bottom:58px;
    width:41%;
    border-radius:30px;
    background-position:center;
    background-size:cover;
    box-shadow:0 28px 75px rgba(24,24,24,.13);
    content:"";
    animation:articleImageReveal 1.1s cubic-bezier(.16,1,.3,1) both;
}
.article-one .article-cover::before{background-image:url('atelier-fabrication-magribache-2026.jpg')}
.article-two .article-cover::before{background-image:url('citerne-souple-humanitaire-maroc.jpg')}
.article-three .article-cover::before{background-image:url('reserve-incendie-souple-maroc.jpg')}
.article-four .article-cover::before{background-image:url('equipe-magribache-maroc.jpg')}
.article-page .article-cover::after{
    position:absolute;
    z-index:0;
    bottom:-24px;
    left:4%;
    font-family:'Oswald',sans-serif;
    font-size:clamp(120px,17vw,250px);
    font-weight:700;
    line-height:1;
    letter-spacing:-.055em;
    color:rgba(24,24,24,.025);
    content:"JOURNAL";
    pointer-events:none;
}
.article-page .article-cover-overlay{display:none}
.article-page .article-cover-content{
    position:relative;
    z-index:5;
    display:flex;
    width:min(90%,1280px);
    max-width:1280px;
    margin:0 auto;
    padding:18px 48% 18px 0;
    align-items:flex-start;
    flex-direction:column;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    text-align:left;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}
.article-page .article-cover-content::before{
    z-index:-1;
    top:-105px;
    right:auto;
    left:-145px;
    width:330px;
    height:330px;
    border:1px solid rgba(245,130,32,.16);
    background:none;
    box-shadow:0 0 0 65px rgba(245,130,32,.025);
}
.article-page .article-cover-category{
    display:flex;
    margin:0 0 22px;
    align-items:center;
    gap:12px;
    font-family:'Manrope',sans-serif;
    font-size:9px;
    font-weight:800;
    letter-spacing:.17em;
    color:#f58220;
}
.article-page .article-cover-category::before{display:block;width:40px;height:2px;background:#f58220;content:""}
.article-page .article-cover-category::after{display:none}
.article-page .article-cover-title{
    max-width:670px;
    font-family:'Oswald',sans-serif;
    font-size:clamp(50px,6vw,82px);
    font-weight:600;
    line-height:.98;
    letter-spacing:-.035em;
    text-align:left;
    text-shadow:none;
    color:#181818;
    animation:articleTitleReveal .95s .12s cubic-bezier(.16,1,.3,1) both;
}
.article-page .article-cover-description{
    max-width:610px;
    margin:24px 0 0;
    font-family:'Manrope',sans-serif;
    font-size:13px;
    font-weight:500;
    line-height:1.78;
    text-align:left;
    color:#666;
}
.article-page .article-info{
    justify-content:flex-start;
    gap:11px 22px;
    margin-top:27px;
    padding-top:18px;
    border-color:#ddd9d0;
}
.article-page .article-info span{font-family:'Manrope',sans-serif;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#737373}
.article-page .article-info i{color:#f58220}
.article-page .article-scroll{
    display:grid;
    width:50px;
    height:50px;
    margin-top:27px;
    place-items:center;
    border:1px solid #d5d0c7;
    border-radius:50%;
    background:#fff;
    color:#181818;
    animation:articleScroll 2s 1.2s ease-in-out infinite;
    transition:background .3s,border-color .3s,color .3s;
}
.article-page .article-scroll:hover{border-color:#f58220;background:#f58220;color:#fff}

/* Corps éditorial */
.article-page .article-content{
    width:min(900px,calc(100% - 48px));
    margin:0 auto;
    padding:100px 0 35px;
    background:#fff;
}
.article-page .article-content > .container{width:100%;max-width:none}
.article-page .article-introduction{margin-bottom:70px;padding-left:31px;border-left-color:#f58220}
.article-page .article-introduction p{
    font-family:'DM Sans',sans-serif;
    font-size:1.28rem;
    font-weight:500;
    line-height:1.85;
    color:#282828;
}
.article-page .article-introduction p::first-letter{color:#f58220;font-family:'Oswald',sans-serif}
.article-page .article-section{margin-bottom:78px}
.article-page .section-number{margin-bottom:13px;font-family:'Manrope',sans-serif;color:#f58220}
.article-page .article-section h2,
.article-page .article-conclusion h2{
    font-family:'Oswald',sans-serif;
    font-size:clamp(38px,4.8vw,58px);
    font-weight:600;
    line-height:1.04;
    letter-spacing:-.025em;
    color:#181818;
}
.article-page .article-section h2::after,
.article-page .article-conclusion h2::after{height:2px;background:#f58220}
.article-page .article-section p,
.article-page .article-conclusion p{
    font-family:'DM Sans',sans-serif;
    font-size:1.05rem;
    line-height:1.95;
    color:#575757;
}
.article-page .article-image{margin:60px 0 75px}
.article-page .article-image img{border-radius:24px;box-shadow:0 28px 75px rgba(24,24,24,.12)}
.article-page .article-image:hover img{box-shadow:0 38px 90px rgba(24,24,24,.16)}
.article-page .article-image figcaption{font-family:'Manrope',sans-serif;color:#777}

.article-page .criteria-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.article-page .criteria-item{
    display:block;
    padding:25px 23px;
    border-color:#e1ddd4;
    border-radius:19px;
    box-shadow:none;
}
.article-page .criteria-item:hover{border-color:rgba(245,130,32,.55);box-shadow:0 18px 42px rgba(24,24,24,.08);transform:translateY(-5px)}
.article-page .criteria-item > i{
    display:grid;
    width:48px;
    height:48px;
    margin-bottom:18px;
    place-items:center;
    background:#fff2e6;
    color:#f58220;
}
.article-page .criteria-item h3{font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;color:#181818}
.article-page .criteria-item p{font-family:'Manrope',sans-serif;font-size:.82rem;line-height:1.7;color:#666}

.article-page .warning-box{
    margin:48px 0;
    padding:31px 34px 31px 70px;
    border-color:#f0d2b7;
    border-radius:19px;
    background:#fff8f1;
    box-shadow:none;
}
.article-page .warning-box p{font-family:'Manrope',sans-serif;color:#6a4d34}
.article-page .warning-icon{color:#f58220}
.article-page .expert-box{
    margin:62px 0;
    padding:42px 44px;
    border:1px solid #181818;
    border-radius:25px;
    background:#181818;
    box-shadow:0 24px 65px rgba(24,24,24,.16);
}
.article-page .expert-box::after{background:rgba(245,130,32,.12)}
.article-page .expert-box > i,
.article-page .expert-icon{
    display:grid;
    width:48px;
    height:48px;
    margin-bottom:19px;
    place-items:center;
    border-radius:50%;
    background:#f58220;
    color:#fff;
}
.article-page .expert-icon i{color:#fff}
.article-page .expert-box h2,
.article-page .expert-box h3{position:relative;z-index:2;margin:0 0 14px;font-family:'Oswald',sans-serif;font-size:31px;font-weight:600;color:#fff}
.article-page .expert-box p{font-family:'Manrope',sans-serif;color:rgba(255,255,255,.74)}
.article-page .article-conclusion{
    margin-top:78px;
    padding:50px 53px;
    border-color:#dfdbd2;
    border-radius:25px;
    box-shadow:0 20px 60px rgba(24,24,24,.07);
}
.article-page .article-conclusion::before{background:#f58220}
.article-page .article-conclusion::after{background:rgba(245,130,32,.055)}

/* Navigation entre les lectures */
.article-page .article-footer{padding-bottom:38px;background:#fff}
.article-page .article-navigation{width:min(900px,calc(100% - 48px));margin:15px auto 88px}
.article-page .article-nav-btn{
    width:auto;
    min-width:190px;
    height:56px;
    border-color:#dcd8cf;
    border-radius:999px;
    background:#fff;
    font-family:'Manrope',sans-serif;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#181818;
    box-shadow:none;
}
.article-page .article-nav-next{border-color:#181818;color:#181818}
.article-page .article-nav-back:hover,
.article-page .article-nav-next:hover{border-color:#181818;background:#181818;color:#fff;box-shadow:0 14px 35px rgba(24,24,24,.16)}
.article-page .article-nav-btn i{color:#f58220}

.article-brand-footer{border-top:1px solid #e1ddd4;background:#fff}
.article-brand-footer > .container{
    display:grid;
    min-height:190px;
    padding-top:42px;
    padding-bottom:42px;
    grid-template-columns:1fr 1.4fr 1fr;
    align-items:center;
    gap:35px;
}
.article-brand-footer img{width:155px}
.article-brand-footer p{margin:0;font-size:11px;line-height:1.7;color:#777;text-align:center}
.article-brand-footer > .container > div{display:flex;justify-content:flex-end;gap:18px}
.article-brand-footer a{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#555}
.article-brand-footer a:hover{color:#f58220}

@keyframes articleImageReveal{
    from{opacity:0;transform:translateX(45px) scale(.98)}
    to{opacity:1;transform:none}
}
@keyframes articleScroll{50%{transform:translateY(7px)}}

@media(max-width:920px){
    .article-site-nav nav{display:none}
    .article-page .article-cover::before{right:4%;width:40%;opacity:.9}
    .article-page .article-cover-content{width:92%;padding-right:45%}
    .article-page .article-cover-title{font-size:clamp(45px,7vw,65px)}
    .article-page .criteria-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
    .article-site-header{padding:10px 0}
    .article-logo img{width:137px}
    .article-journal-link{min-height:39px;padding:0 13px;font-size:8px}
    .article-page .article-cover{min-height:610px;padding:120px 0 65px}
    .article-page .article-cover::before{display:none}
    .article-page .article-cover-content{width:88%;padding:0;align-items:center;text-align:center}
    .article-page .article-cover-category{justify-content:center}
    .article-page .article-cover-title{font-size:clamp(43px,12vw,58px);text-align:center}
    .article-page .article-cover-description{text-align:center}
    .article-page .article-info{justify-content:center}
    .article-page .article-content{width:calc(100% - 32px);padding-top:75px}
    .article-page .criteria-list{grid-template-columns:1fr}
    .article-page .article-conclusion{padding:39px 28px}
    .article-page .article-navigation{width:calc(100% - 32px);flex-direction:column;align-items:stretch;gap:13px}
    .article-page .article-nav-btn{width:100%}
    .article-brand-footer > .container{grid-template-columns:1fr;text-align:center}
    .article-brand-footer img{margin-inline:auto}
    .article-brand-footer > .container > div{justify-content:center}
}

@media(prefers-reduced-motion:reduce){
    .article-page *,
    .article-page *::before,
    .article-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* Pied complet commun à toutes les pages */
.article-page .site-footer{
    position:relative;
    border-top:1px solid #e7e3da;
    background:#fff;
    color:#181818;
}
.article-page .site-footer::before{
    position:absolute;
    top:-1px;
    left:50%;
    width:170px;
    height:4px;
    border-radius:0 0 5px 5px;
    background:#f58220;
    content:"";
    transform:translateX(-50%);
}
.article-page .footer-main{
    display:grid;
    grid-template-columns:1.2fr .62fr .8fr 1fr;
    gap:54px;
    padding-top:82px;
    padding-bottom:65px;
}
.article-page .footer-brand img{width:165px;margin:0 0 23px}
.article-page .footer-brand p,
.article-page .footer-contact p,
.article-page .footer-social p{
    margin:0;
    font-family:'Manrope',sans-serif;
    font-size:12px;
    font-weight:500;
    line-height:1.8;
    color:#696969;
}
.article-page .footer-brand p{max-width:300px}
.article-page .site-footer h3{
    position:relative;
    margin:4px 0 28px;
    padding-bottom:15px;
    font-family:'Oswald',sans-serif;
    font-size:22px;
    font-weight:600;
    line-height:1.1;
    color:#181818;
}
.article-page .site-footer h3::after{
    position:absolute;
    bottom:0;
    left:0;
    width:34px;
    height:2px;
    background:#f58220;
    content:"";
}
.article-page .footer-nav{display:flex;align-items:flex-start;flex-direction:column;gap:14px}
.article-page .footer-nav h3{margin-bottom:14px}
.article-page .footer-nav a{
    font-family:'Manrope',sans-serif;
    font-size:13px;
    font-weight:650;
    color:#4f4f4f;
    transition:color .25s,transform .25s;
}
.article-page .footer-nav a:hover{color:#f58220;transform:translateX(5px)}
.article-page .footer-contact p{margin-bottom:15px}
.article-page .social-row{display:flex;gap:10px;margin-bottom:21px}
.article-page .social-row a{
    display:grid;
    width:48px;
    height:48px;
    place-items:center;
    border:1px solid #dcd8cf;
    border-radius:50%;
    background:#fff;
    color:#181818;
    transition:transform .3s,background .3s,border-color .3s,color .3s;
}
.article-page .social-row a:hover{border-color:#f58220;background:#f58220;color:#fff;transform:translateY(-5px)}
.article-page .footer-bottom{
    display:flex;
    padding-top:25px;
    padding-bottom:27px;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid #e7e3da;
}
.article-page .footer-bottom p,
.article-page .footer-bottom a{
    margin:0;
    font-family:'Manrope',sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:#777;
}
.article-page .footer-bottom a:hover{color:#f58220}
.article-page .article-whatsapp{
    position:fixed;
    z-index:900;
    right:24px;
    bottom:24px;
    display:grid;
    width:58px;
    height:58px;
    place-items:center;
    border-radius:50%;
    background:#25d366;
    color:#fff;
    font-size:27px;
    box-shadow:0 15px 40px rgba(37,211,102,.35);
    transition:transform .3s;
}
.article-page .article-whatsapp:hover{transform:translateY(-5px) scale(1.04)}

@media(max-width:1000px){
    .article-page .footer-main{grid-template-columns:1.15fr .75fr .9fr;gap:45px}
    .article-page .footer-social{grid-column:1 / -1}
}

@media(max-width:700px){
    .article-page .footer-main{grid-template-columns:1fr 1fr}
    .article-page .footer-brand{grid-column:1 / -1}
    .article-page .footer-social{grid-column:auto}
}

@media(max-width:520px){
    .article-page .footer-main{grid-template-columns:1fr;gap:38px;padding-top:66px;padding-bottom:48px}
    .article-page .footer-brand,
    .article-page .footer-social{grid-column:auto}
    .article-page .footer-bottom{align-items:flex-start;flex-direction:column;gap:18px}
}