/* ------------------------------ */
/* En-tête d'article : titre à gauche, vignette à droite */
/* ------------------------------ */

.head_article {
    align-items: center;
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;

    @media (min-width: 992px) {
        gap: 50px;
        grid-template-columns: 1fr 1fr;
    }
}

.head_article--no_image {
    grid-template-columns: 1fr;

    @media (min-width: 992px) {
        grid-template-columns: 1fr;
    }
}

.head_article__infos {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

.head_article__image {
    min-width: 0;

    img {
        border-radius: var(--border-radius);
        display: block;
        object-fit: cover;
        width: 100%;
    }
}

.temps_lecture {
    color: var(--main-color1);
    font-size: 14px;
    font-weight: 300;
}

/* ------------------------------ */
/* Résumé de l'article */
/* ------------------------------ */

.article__resume {
    background-color: var(--main-color4);
    border-radius: var(--border-radius);
    margin: 30px 0;
    padding: 25px 30px;
    border-left: 2px solid var(--main-color2);
}

.article__resume_title {
    color: var(--main-color1);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.article__resume_texte {

    p {
        color: var(--main-color1);
        font-size: 16px;
        line-height: 1.6;

        &:not(:last-child) {
            margin-bottom: 10px;
        }
    }
}

/* ------------------------------ */
/* Mise en page de l'article : bannière à gauche, contenu à droite */
/* ------------------------------ */

.article__layout {
    display: flex;
    flex-direction: column;
    gap: 30px;

    @media (min-width: 992px) {
        align-items: flex-start;
        flex-direction: row;
        gap: 40px;
    }
}

.article__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Sans bannière (champs vides), .article__body est seul dans .article__layout
   et occupe donc naturellement toute la largeur. */
.article__layout .banniere {
    flex: 0 0 auto;
    margin-bottom: 0;
    width: 100%;

    @media (min-width: 992px) {
        flex: 0 0 28%;
    }
}

.article__layout .banniere__link {
    @media (min-width: 992px) {
        flex-direction: column;
        height: 100%;
    }
}

.article__layout .banniere__image {
    @media (min-width: 992px) {
        width: 100%;
    }
}

/* ------------------------------ */
/* Bannière de fin d'article (bloc entièrement cliquable) */
/* ------------------------------ */

.banniere {
    margin-bottom: 30px;
}

.banniere__link {
    align-items: center;
    background-color: var(--main-color1);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 25px;
    overflow: hidden;
    padding: 30px;
    text-decoration: none;
    transition: var(--transition);

    &:hover {
        background-color: var(--main-color3);
    }

    @media (min-width: 768px) {
        flex-direction: row;
        gap: 40px;
        padding: 40px;
    }
}

.banniere__image {
    flex: 0 0 auto;
    width: 100%;

    @media (min-width: 768px) {
        width: 285px;
    }

    img {
        border-radius: var(--border-radius);
        display: block;
        object-fit: cover;
        width: 100%;
    }
}

.banniere__texte {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;

    * {
        color: var(--white) !important;
    }
}

.banniere__surtitre {
    color: var(--main-color4);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.banniere__titre {
    color: var(--white);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;

    @media (min-width: 992px) {
        font-size: 28px;
    }
}

.banniere__description {
    color: var(--white);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
}

.banniere__bouton {
    margin-top: 8px;
}

.banniere__link:hover .banniere__bouton {
    background-color: var(--dark);
}


/* ------------------------------ */
/* Citation insérée dans le corps de l'article via le shortcode [citation] */
/* Tout est scopé sur .kn-citation : le blockquote natif garde le style défini */
/* dans css/style.css partout ailleurs sur le site. */
/* ------------------------------ */

.article__body .kn-citation {
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(32, 46, 94, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 30px 0;
    overflow: hidden;
    padding: 30px 25px 30px 30px;
    position: relative;

    /* Filet vertical collé au bord gauche, sur toute la hauteur de la carte */
    &::before {
        background-color: var(--main-color3);
        border-radius: 8px;
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        top: 0;
        width: 5px;
    }

    @media (min-width: 768px) {
        align-items: center;
        flex-direction: row;
        gap: 40px;
        padding: 48px 48px 48px 64px;

        &::before {
            width: 8px;
        }
    }
}

.article__body .kn-citation__portrait {
    background-color: var(--main-color4);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 80px;
    overflow: hidden;
    width: 80px;

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

    @media (min-width: 768px) {
        height: 110px;
        width: 110px;
    }
}

.article__body .kn-citation__contenu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

.article__body .kn-citation__texte {
    /* Neutralise le filet et la largeur maximale du blockquote global */
    border: 0;
    color: var(--main-color1);
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
    max-width: none;
    padding: 0;

    p {
        color: var(--main-color1);
        font-size: inherit;
        font-style: inherit;
        font-weight: inherit;
        line-height: inherit;
        margin: 0;
    }

    @media (min-width: 768px) {
        font-size: 20px;
    }
}

.article__body .kn-citation__auteur {
    align-items: center;
    color: var(--main-color1);
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    gap: 12px;
    padding: 0;
    text-align: left;
}

.article__body .kn-citation__nom {
    font-weight: 700;
}

.article__body .kn-citation__separateur {
    background-color: var(--main-color3);
    display: block;
    height: 16px;
    opacity: 0.35;
    width: 1px;
}

.article__body .kn-citation__poste {
    font-weight: 400;
}