/* =========================================================
   ARTICLES - article.css
   ========================================================= */


/* =========================================================
   CONTENEURS
   ========================================================= */

.article-container,
.article-admin-container {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   BANNIÈRE
   ========================================================= */

.article-banner {
    position: relative;
    width: 100%;
    min-height: 220px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 12px;
    background: url('/_Ressources/images/Bannieres/Article_journal.png') center center / cover no-repeat;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .15);
}

.article-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.72),
        rgba(0,0,0,.30)
    );
}

.article-banner-content {
    position: relative;
    z-index: 1;
    min-height: 220px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    color: #fff;
}

.article-banner-content h1 {
    margin: 0 0 8px;
    font-size: 2.2rem;
}

.article-banner-content p {
    max-width: 600px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}


/* =========================================================
   TITRE ADMIN
   ========================================================= */

.article-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.article-admin-header h1 {
    margin: 0 0 5px;
    font-size: 1.8rem;
}

.article-admin-header p {
    margin: 0;
    color: #777;
}


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

.article-btn,
.article-admin-actions .module-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 13px;
    border: 0;
    border-radius: 7px;
    background: #f2c94c;
    color: #222;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.article-btn:hover,
.article-admin-actions .module-btn:hover {
    transform: translateY(-1px);
    background: #e3b83d;
}


/* =========================================================
   GRILLE PUBLIC
   ========================================================= */

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


/* =========================================================
   CARTE PUBLIC
   ========================================================= */

.article-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 11px;
    box-shadow: 0 4px 14px rgba(0,0,0,.07);
    transition: .2s;
}

.article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(0,0,0,.11);
}


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

.article-image {
    width: 100%;
    height: 175px;
    overflow: hidden;
    background: #eee;
}

.article-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.article-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    color: #999;
}


/* =========================================================
   CONTENU PUBLIC
   ========================================================= */

.article-content {
    padding: 16px;
}

.article-content h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    line-height: 1.3;
}

.article-content h2 a {
    color: #222;
    text-decoration: none;
}

.article-content h2 a:hover {
    color: #b28700;
}

.article-resume {
    margin: 0 0 12px;
    color: #666;
    font-size: .95rem;
    line-height: 1.45;
}

.article-meta {
    margin-bottom: 12px;
    color: #888;
    font-size: .82rem;
}


/* =========================================================
   STATUT
   ========================================================= */

.article-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: .78rem;
    font-weight: 600;
}

.article-status-publie {
    background: #dff5e5;
    color: #24733a;
}

.article-status-brouillon {
    background: #fff2c7;
    color: #8a6500;
}


/* =========================================================
   ADMIN - GRILLE
   ========================================================= */

.article-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/* =========================================================
   ADMIN - CARTE
   ========================================================= */

.article-admin-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    background: #d9dae3;
    border: 1px solid #e4e4e4;
    border-radius: 11px;
    box-shadow: 0 4px 14px rgba(0,0,0,.07);
    color: #0b0a74;
}


/* =========================================================
   ADMIN - IMAGE
   ========================================================= */

.article-admin-image {
    flex: 0 0 170px;
    width: 170px;
    min-height: 185px;
    overflow: hidden;
    background: #eee;
}

.article-admin-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.article-admin-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #999;
}


/* =========================================================
   ADMIN - CONTENU
   ========================================================= */

.article-admin-content {
    flex: 1;
    min-width: 0;
    padding: 15px;
}

.article-admin-status {
    margin-bottom: 7px;
}

.article-admin-content h2 {
    margin: 0 0 7px;
    font-size: 1.15rem;
    line-height: 1.3;
}

.article-admin-resume {
    margin: 0 0 10px;
    color: #666;
    font-size: .9rem;
    line-height: 1.4;
}

.article-admin-meta {
    margin-bottom: 12px;
    color: #888;
    font-size: .78rem;
    line-height: 1.5;
}


/* =========================================================
   ADMIN - ACTIONS
   ========================================================= */

.article-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.article-admin-actions form {
    margin: 0;
}

.article-delete {
    background: #dc3545 !important;
    color: #fff !important;
}

.article-delete:hover {
    background: #bb2d3b !important;
}


/* =========================================================
   PAGE VOIR
   ========================================================= */

.article-detail {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0,0,0,.08);
}


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

.article-detail-image {
    width: 100%;
    max-height: 420px;
    overflow: hidden;
    background: #eee;
}

.article-detail-image img {
    width: 100%;
    max-height: 420px;
    display: block;
    object-fit: cover;
}


/* =========================================================
   CONTENU ARTICLE
   ========================================================= */

.article-detail-content {
    padding: 30px;
}

.article-detail-content h1 {
    margin: 0 0 10px;
    color: #302b26;
    font-size: 2rem;
    line-height: 1.25;
}


/* =========================================================
   META
   ========================================================= */

.article-detail-meta {
    margin-bottom: 20px;
    color: #777;
    font-size: .85rem;
    line-height: 1.5;
}


/* =========================================================
   RÉSUMÉ
   ========================================================= */

.article-detail-resume {
    margin-bottom: 20px;
    padding: 22px 25px;
    background:
        linear-gradient(
            135deg,
            #bfae99,
            #cfc0ad
        );
    border: 1px solid #aa9984;
    border-left: 5px solid #b87532;
    border-radius: 10px;
    color: #342d26;
    font-size: 1.05rem;
    line-height: 1.7;
    box-shadow:
        0 7px 18px rgba(50,40,30,.10);
}


/* =========================================================
   TEXTE ARTICLE ADMIN
   ========================================================= */

.article-detail-text {
    padding: 35px 40px;
    background:
        linear-gradient(
            135deg,
            #d8d0c6,
            #cec5ba
        );
    border: 1px solid #b9afa3;
    border-radius: 14px;
    box-shadow:
        0 10px 25px rgba(50,40,30,.13);
    color: #302c28;
    font-size: 1.05rem;
    line-height: 1.85;
}


/* =========================================================
   PARAGRAPHES
   ========================================================= */

.article-detail-text p {
    margin: 0 0 24px;
}


/* =========================================================
   TITRES H2
   ========================================================= */

.article-detail-text h2 {
    margin: 40px 0 18px;
    color: #46301d;
    font-size: 1.7rem;
    line-height: 1.3;
}

.article-detail-text h2:first-child {
    margin-top: 0;
}

.article-detail-text h2::after {
    content: "";
    display: block;
    width: 55px;
    height: 3px;
    margin-top: 10px;
    background: #b87532;
    border-radius: 4px;
}


/* =========================================================
   TITRES H3
   ========================================================= */

.article-detail-text h3 {
    margin: 30px 0 12px;
    color: #563a23;
    font-size: 1.25rem;
    line-height: 1.4;
}


/* =========================================================
   LISTES
   ========================================================= */

.article-detail-text ul {
    margin: 0 0 28px;
    padding: 20px 25px 20px 45px;
    background: #bfb4a8;
    border: 1px solid #ada196;
    border-radius: 10px;
}

.article-detail-text ol {
    margin: 0 0 28px;
    padding: 20px 25px 20px 45px;
    background: #bfb4a8;
    border: 1px solid #ada196;
    border-radius: 10px;
}

.article-detail-text li {
    margin-bottom: 9px;
}

.article-detail-text li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CITATION
   ========================================================= */

.article-detail-text blockquote {
    margin: 35px 0;
    padding: 25px 30px;
    background:
        linear-gradient(
            135deg,
            #bca991,
            #cbbca8
        );
    border-left: 5px solid #a9672b;
    border-radius: 0 12px 12px 0;
    color: #45382c;
    font-size: 1.08rem;
    font-style: italic;
    line-height: 1.7;
}


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

.article-detail-text a {
    color: #9a5b25;
    font-weight: 600;
    text-decoration: underline;
}

.article-detail-text a:hover {
    color: #6f3f18;
}


/* =========================================================
   IMAGES DANS LE TEXTE
   ========================================================= */

.article-detail-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 25px auto;
    border-radius: 10px;
    box-shadow:
        0 8px 20px rgba(40,30,20,.15);
}


/* =========================================================
   GRAS / ITALIQUE
   ========================================================= */

.article-detail-text strong {
    font-weight: 700;
}

.article-detail-text em {
    font-style: italic;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.article-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e5e5;
}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.article-form {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 22px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0,0,0,.07);
}

.article-form-group {
    margin-bottom: 16px;
}

.article-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
}

.article-form-group input[type="text"],
.article-form-group input[type="file"],
.article-form-group textarea,
.article-form-group select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 7px;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: .95rem;
}

.article-form-group textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.5;
}

.article-form-group input:focus,
.article-form-group textarea:focus,
.article-form-group select:focus {
    outline: none;
    border-color: #f2c94c;
    box-shadow: 0 0 0 2px rgba(242,201,76,.18);
}

.article-form-group small {
    display: block;
    margin-top: 5px;
    color: #777;
    font-size: .8rem;
}


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

.article-current-image {
    margin-top: 8px;
}

.article-current-image img {
    display: block;
    width: 180px;
    max-width: 100%;
    max-height: 130px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid #ddd;
}


/* =========================================================
   ACTIONS FORMULAIRE
   ========================================================= */

.article-form-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e5e5;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.article-message {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 11px 15px;
    border-radius: 8px;
    font-weight: 600;
}

.article-message-success {
    background: #dff5e5;
    border: 1px solid #a9dfb7;
    color: #216e35;
}

.article-message-error {
    background: #fde2e2;
    border: 1px solid #f1aaaa;
    color: #a32626;
}

.article-message-info {
    background: #e3f0ff;
    border: 1px solid #b7d4f5;
    color: #205b91;
}


/* =========================================================
   AUCUN ARTICLE
   ========================================================= */

.article-empty {
    padding: 35px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 11px;
}

.article-empty-icon {
    margin-bottom: 8px;
    font-size: 45px;
}

.article-empty h2 {
    margin: 0 0 7px;
}

.article-empty p {
    margin: 0 0 18px;
    color: #777;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

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

    .article-admin-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .article-banner {
        min-height: 180px;
    }

    .article-banner-content {
        min-height: 180px;
        padding: 22px;
    }

    .article-banner-content h1 {
        font-size: 1.8rem;
    }

    .article-header,
    .article-admin-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-grid {
        grid-template-columns: 1fr;
    }

    .article-admin-card {
        display: block;
    }

    .article-admin-image {
        width: 100%;
        height: 180px;
        min-height: 180px;
    }

    .article-detail-content {
        padding: 20px;
    }

    .article-detail-text {
        padding: 30px 23px;
    }

    .article-detail-text h2 {
        font-size: 1.5rem;
    }
}


@media (max-width: 500px) {

    .article-banner {
        min-height: 150px;
    }

    .article-banner-content {
        min-height: 150px;
        padding: 18px;
    }

    .article-banner-content h1 {
        font-size: 1.5rem;
    }

    .article-detail-content {
        padding: 18px;
    }

    .article-detail-content h1 {
        font-size: 1.6rem;
    }

    .article-detail-text {
        padding: 25px 18px;
        font-size: 1rem;
    }

    .article-form {
        padding: 16px;
    }

    .article-form-actions {
        flex-direction: column;
    }

    .article-admin-actions {
        flex-direction: column;
    }

    .article-admin-actions .module-btn,
    .article-admin-actions form,
    .article-admin-actions form button {
        width: 100%;
    }
}


/* =========================================================
   RASPIPHIL ARTICLES — FOND SOMBRE COMPLET
   ========================================================= */

.raspiphil-articles,
.raspiphil-article-page {
    position: relative;
    background: #0b0b0b;
    color: #e5e5e5;
}


/* Le conteneur prend réellement toute la largeur visuelle */

.raspiphil-articles::before,
.raspiphil-article-page::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 100vw;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle at 50% 0%,
            #1a1a1a 0%,
            #0b0b0b 45%,
            #070707 100%
        );
}


/* =========================================================
   INTRO
   ========================================================= */

.raspiphil-articles-intro {
    color: #e8e8e8;
}

.raspiphil-articles-intro > span {
    color: #777;
}

.raspiphil-articles-intro h2 {
    color: #fff;
}

.raspiphil-articles-intro p {
    color: #888;
}


/* =========================================================
   CARTES
   ========================================================= */

.raspiphil-article-card {
    background:
        linear-gradient(
            145deg,
            #1b1b1b,
            #111
        );

    border-color: #282828;

    box-shadow:
        0 12px 35px rgba(0,0,0,.45);
}

.raspiphil-article-card:hover {
    background:
        linear-gradient(
            145deg,
            #202020,
            #141414
        );

    border-color: #383838;

    box-shadow:
        0 20px 50px rgba(0,0,0,.65);
}


/* =========================================================
   CONTENU CARTE
   ========================================================= */

.raspiphil-article-card-content {
    background: transparent;
}

.raspiphil-article-card-meta {
    color: #666;
}

.raspiphil-article-card-meta span:first-child {
    color: #aaa;
}

.raspiphil-article-card h3,
.raspiphil-article-card h3 a {
    color: #f2f2f2;
}

.raspiphil-article-card-content > p {
    color: #888;
}


/* =========================================================
   PAGE ARTICLE
   ========================================================= */

.raspiphil-article-content {
    color: #d0d0d0;
}

.raspiphil-article-back {
    color: #888;
}

.raspiphil-article-back:hover {
    color: #fff;
}


/* =========================================================
   INTRODUCTION ARTICLE
   ========================================================= */

.raspiphil-article-introduction {
    background:
        linear-gradient(
            135deg,
            #191919,
            #111
        );

    border-left-color: #555;

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

.raspiphil-article-introduction p {
    color: #d2d2d2;
}


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

.raspiphil-article-text {
    color: #c1c1c1;
}

.raspiphil-article-text h2 {
    color: #fff;
}

.raspiphil-article-text h3 {
    color: #eee;
}


/* =========================================================
   CITATION
   ========================================================= */

.raspiphil-article-text blockquote {
    background:
        linear-gradient(
            135deg,
            #191919,
            #101010
        );

    border-left-color: #555;

    color: #d5d5d5;

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


/* =========================================================
   SÉPARATION BAS DE PAGE
   ========================================================= */

.raspiphil-article-bottom {
    border-top-color: #252525;
}


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

@media (max-width: 700px) {

    .raspiphil-articles::before,
    .raspiphil-article-page::before {
        background:
            linear-gradient(
                180deg,
                #111,
                #080808
            );
    }

}


/* =========================================================
   RASPIPHIL - ARTICLES
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;

    background:
        radial-gradient(
            circle at 15% 10%,
            #d8c8b5 0,
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 40%,
            #cfc1af 0,
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #c9beb0,
            #ded7ce 45%,
            #c8bcae
        );

    color: #302b26;
}


/* =========================================================
   PAGE ARTICLES
   ========================================================= */

.articles-page {
    min-height: 100vh;
    padding-bottom: 60px;
}


/* =========================================================
   BANNIÈRE
   ========================================================= */

.articles-banner {
    position: relative;

    width: 100%;
    min-height: 280px;

    overflow: hidden;

    border-radius: 12px;

    background:
        url('/_Ressources/images/Bannieres/articles.png')
        center center / cover no-repeat;

    box-shadow:
        0 8px 25px rgba(40, 30, 20, .22);
}

.articles-banner::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(35, 27, 21, .82),
            rgba(35, 27, 21, .42),
            rgba(35, 27, 21, .15)
        );
}

.articles-banner-content {
    position: relative;

    z-index: 1;

    min-height: 280px;

    padding: 40px;

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

    color: #fff;
}

.articles-banner-content h1 {
    margin: 0 0 10px;

    font-size: 2.6rem;
    line-height: 1.1;
}

.articles-banner-content p {
    max-width: 650px;

    margin: 0;

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

    font-size: 1.05rem;
    line-height: 1.6;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.articles-intro {
    margin: 25px 0;

    padding: 25px 30px;

    background:
        linear-gradient(
            135deg,
            #bfae99,
            #cfc0ad
        );

    border: 1px solid #aa9984;
    border-radius: 14px;

    box-shadow:
        0 7px 18px rgba(50, 40, 30, .12);
}

.articles-intro h2 {
    margin: 0 0 8px;

    color: #46301d;

    font-size: 1.5rem;
}

.articles-intro p {
    margin: 0;

    color: #3d352d;

    line-height: 1.6;
}


/* =========================================================
   GRILLE DES ARTICLES
   ========================================================= */

.articles-grid {
    display: grid;

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

    gap: 20px;
}


/* =========================================================
   CARTE ARTICLE
   ========================================================= */

.article-card {
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #d8d0c6,
            #c9bfb3
        );

    border: 1px solid #b5aa9e;
    border-radius: 13px;

    box-shadow:
        0 8px 20px rgba(50, 40, 30, .14);

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

.article-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 13px 28px rgba(50, 40, 30, .20);
}


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

.article-card-image {
    position: relative;

    width: 100%;
    height: 220px;

    overflow: hidden;

    background: #a99d90;
}

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

    display: block;

    object-fit: cover;

    transition:
        transform .3s ease;
}

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


/* =========================================================
   CONTENU CARTE
   ========================================================= */

.article-card-content {
    padding: 22px;
}

.article-card-category {
    display: inline-block;

    margin-bottom: 10px;
    padding: 6px 11px;

    background: #a9672b;

    border-radius: 20px;

    color: #fff;

    font-size: .7rem;
    font-weight: bold;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.article-card-content h2 {
    margin: 0 0 9px;

    color: #403125;

    font-size: 1.35rem;
    line-height: 1.3;
}

.article-card-date {
    margin-bottom: 13px;

    color: #6d6258;

    font-size: .78rem;
}

.article-card-content p {
    margin: 0 0 18px;

    color: #443c35;

    font-size: .94rem;
    line-height: 1.6;
}


/* =========================================================
   LIEN ARTICLE
   ========================================================= */

.article-card-link {
    display: inline-flex;

    align-items: center;
    gap: 7px;

    padding: 9px 14px;

    background: #a9672b;

    border-radius: 7px;

    color: #fff;

    font-size: .85rem;
    font-weight: bold;

    text-decoration: none;

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

.article-card-link:hover {
    background: #8f5522;

    transform: translateX(2px);
}


/* =========================================================
   PAGE ARTICLE
   ========================================================= */

.article-page {
    min-height: 100vh;

    padding-bottom: 80px;
}


/* =========================================================
   HERO ARTICLE
   ========================================================= */

.article-hero {
    position: relative;

    height: 500px;

    overflow: hidden;

    background: #40372f;

    box-shadow:
        0 10px 30px rgba(40, 30, 20, .25);
}

.article-hero img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.article-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(32, 24, 18, .86),
            rgba(32, 24, 18, .48),
            rgba(32, 24, 18, .18)
        );
}

.article-hero-content {
    position: absolute;

    z-index: 2;

    left: 50%;
    bottom: 0;

    width: min(1100px, calc(100% - 50px));

    transform: translateX(-50%);

    padding: 60px 0;
}

.article-category {
    display: inline-block;

    margin-bottom: 15px;
    padding: 7px 13px;

    background: #b87532;

    border-radius: 20px;

    color: #fff;

    font-size: .72rem;
    font-weight: bold;

    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.article-hero h1 {
    max-width: 900px;

    margin: 0 0 13px;

    color: #fff;

    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
}

.article-date {
    color: rgba(255, 255, 255, .8);

    font-size: .9rem;
}


/* =========================================================
   CONTENU ARTICLE
   ========================================================= */

.article-content {
    width: min(900px, calc(100% - 40px));

    margin: 35px auto 0;
}


/* =========================================================
   BOUTON RETOUR
   ========================================================= */

.article-back {
    display: inline-flex;

    padding: 10px 15px;

    margin-bottom: 20px;

    background: #bdb1a3;

    border: 1px solid #aa9d8e;
    border-radius: 8px;

    color: #493b2f;

    font-size: .88rem;
    font-weight: bold;

    text-decoration: none;

    box-shadow:
        0 4px 10px rgba(50, 40, 30, .10);
}

.article-back:hover {
    background: #c9bbaa;
}


/* =========================================================
   INTRODUCTION ARTICLE
   ========================================================= */

.article-introduction {
    margin-bottom: 20px;

    padding: 28px 32px;

    background:
        linear-gradient(
            135deg,
            #bfae99,
            #cfc0ad
        );

    border: 1px solid #aa9984;
    border-radius: 14px;

    box-shadow:
        0 8px 20px rgba(50, 40, 30, .12);
}

.article-introduction-label {
    display: block;

    margin-bottom: 10px;

    color: #67451f;

    font-size: .72rem;
    font-weight: bold;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.article-introduction p {
    margin: 0;

    color: #342d26;

    font-size: 1.12rem;
    line-height: 1.7;
}


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

.article-text {
    padding: 40px 45px;

    background:
        linear-gradient(
            135deg,
            #d8d0c6,
            #cec5ba
        );

    border: 1px solid #b9afa3;
    border-radius: 14px;

    box-shadow:
        0 10px 25px rgba(50, 40, 30, .13);

    color: #302c28;

    font-size: 1.05rem;
    line-height: 1.85;
}

.article-text p {
    margin: 0 0 24px;
}


/* =========================================================
   TITRES ARTICLE
   ========================================================= */

.article-text h2 {
    margin: 40px 0 18px;

    color: #46301d;

    font-size: 1.7rem;
    line-height: 1.3;
}

.article-text h2:first-child {
    margin-top: 0;
}

.article-text h2::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin-top: 10px;

    background: #b87532;

    border-radius: 4px;
}

.article-text h3 {
    margin: 30px 0 12px;

    color: #563a23;

    font-size: 1.25rem;
}


/* =========================================================
   LISTES
   ========================================================= */

.article-text ul {
    margin: 0 0 28px;

    padding: 20px 25px 20px 45px;

    background: #bfb4a8;

    border: 1px solid #ada196;
    border-radius: 10px;
}

.article-text li {
    margin-bottom: 9px;
}

.article-text li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CITATION
   ========================================================= */

.article-text blockquote {
    margin: 35px 0;

    padding: 25px 30px;

    background:
        linear-gradient(
            135deg,
            #bca991,
            #cbbca8
        );

    border-left: 5px solid #a9672b;
    border-radius: 0 12px 12px 0;

    color: #45382c;

    font-size: 1.08rem;
    font-style: italic;

    line-height: 1.7;
}


/* =========================================================
   FIN ARTICLE
   ========================================================= */

.article-end {
    margin-top: 20px;

    padding: 20px;

    background: #bdb2a6;

    border: 1px solid #a99d90;
    border-radius: 12px;

    text-align: center;
}

.article-end .article-back {
    margin: 0;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .articles-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .articles-banner {
        min-height: 220px;
    }

    .articles-banner-content {
        min-height: 220px;

        padding: 25px;
    }

    .articles-banner-content h1 {
        font-size: 2rem;
    }

    .article-hero {
        height: 420px;
    }

    .article-hero-content {
        width: calc(100% - 35px);

        padding: 40px 0;
    }

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

    .article-text {
        padding: 30px 23px;
    }

    .article-introduction {
        padding: 23px;
    }

}


@media (max-width: 500px) {

    .article-banner {
        min-height: 150px;
    }

    .article-banner-content {
        min-height: 150px;
        padding: 18px;
    }

    .article-banner-content h1 {
        font-size: 1.5rem;
    }

    .article-detail-content {
        padding: 18px;
    }

    .article-detail-content h1 {
        font-size: 1.6rem;
    }

    .article-form {
        padding: 16px;
    }

    .article-form-actions {
        flex-direction: column;
    }

    .article-admin-actions {
        flex-direction: column;
    }

    .article-admin-actions .module-btn,
    .article-admin-actions form,
    .article-admin-actions form button {
        width: 100%;
    }

}