/* ═══════════════════════════════════════════════════════════
   Auteurs Custom — Cartes articles (hla-*)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');

/* ── Grille ──────────────────────────────────────────────── */

.hla-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* ── Carte ───────────────────────────────────────────────── */
.hla-card {
    background    : #ffffff;
    border-radius : 14px;
    overflow      : hidden;
    display       : flex;
    flex-direction: column;
    border        : 1px solid rgba(0, 0, 0, 0.10);
    transition    : transform .2s ease, box-shadow .2s ease;
}

.hla-card:hover {
    transform : translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* ── Image : 100% × 270px ────────────────────────────────── */
.hla-card__img-link {
    display        : block;
    text-decoration: none !important;
}

.hla-card__img {
    width              : 100%;
    height             : 270px;
    background-color   : #3C4A38;
    background-size    : cover;
    background-position: center;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    transition         : opacity .2s ease;
}

.hla-card:hover .hla-card__img { opacity: .92; }

.hla-card__img-placeholder {
    color  : rgba(255, 255, 255, 0.28);
    display: flex;
}

/* ── Bloc infos : padding 24px ───────────────────────────── */
.hla-card__body {
    padding       : 24px !important;
    display       : flex;
    flex-direction: column;
    flex          : 1;
}

/* ── Tag catégorie ───────────────────────────────────────── */
.hla-card__cat {
    display         : inline-block !important;
    font-family     : 'Roboto', sans-serif !important;
    font-size       : 13px !important;
    line-height     : 15px !important;
    font-weight     : 500 !important;
    color           : #1C3A2A !important;
    background      : #EAEEEC !important;
    border          : 1px solid #BAC7C1 !important;
    border-radius   : 12px !important;
    padding         : 4.5px 20px !important;
    width           : fit-content;
    text-decoration : none !important;
    transition      : background .15s ease;
    margin          : 0 !important;
}

.hla-card__cat:hover { background: #dde4e0 !important; }

/* ── Titre h3 : 24/29 bold Roboto, 16px sous le tag ─────── */
.hla-card__title {
    font-family : 'Roboto', sans-serif !important;
    font-size   : 24px !important;
    line-height : 29px !important;
    font-weight : 700 !important;
    color       : #000000 !important;
    margin      : 16px 0 0 0 !important;
    padding     : 0 !important;
    border      : none !important;
}

.hla-card__title a {
    font-family     : 'Roboto', sans-serif !important;
    font-size       : 24px !important;
    line-height     : 29px !important;
    font-weight     : 700 !important;
    color           : #000000 !important;
    text-decoration : none !important;
}

.hla-card__title a:hover {
    text-decoration      : underline !important;
    text-underline-offset: 2px;
}

/* ── Extrait : 16/19 medium Roboto, 8px sous le titre ───── */
.hla-card__excerpt {
    font-family : 'Roboto', sans-serif !important;
    font-size   : 16px !important;
    line-height : 19px !important;
    font-weight : 500 !important;
    color       : #000000 !important;
    margin      : 8px 0 0 0 !important;
    padding     : 0 !important;
    flex        : 1;
}

/* ── Footer auteur : 24px au-dessus ─────────────────────── */
.hla-card__footer {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-top     : 24px !important;
    padding        : 0 !important;
}

.hla-card__author {
    display        : flex;
    align-items    : center;
    gap            : 10px;
    text-decoration: none !important;
}

.hla-card__avatar {
    width        : 36px !important;
    height       : 36px !important;
    border-radius: 50% !important;
    object-fit   : cover;
    background   : #d0d0cc;
    flex-shrink  : 0;
}

.hla-card__author-meta {
    display       : flex;
    flex-direction: column;
    gap           : 2px;
}

.hla-card__author-name {
    font-family : 'Roboto', sans-serif !important;
    font-size   : 13px !important;
    font-weight : 600 !important;
    color       : #000000 !important;
    line-height : 1.3 !important;
    margin      : 0 !important;
    padding     : 0 !important;
}

.hla-card__date {
    font-family : 'Roboto', sans-serif !important;
    font-size   : 11.5px !important;
    font-weight : 400 !important;
    color       : #6b6b68 !important;
    line-height : 1.3 !important;
    margin      : 0 !important;
    padding     : 0 !important;
}

/* ── Bouton Lire : 16/19 italic Roboto #1C3A2A ───────────── */
.hla-card__read-more {
    font-family     : 'Roboto', sans-serif !important;
    font-size       : 16px !important;
    line-height     : 19px !important;
    font-style      : italic !important;
    font-weight     : 400 !important;
    color           : #1C3A2A !important;
    text-decoration : none !important;
    white-space     : nowrap;
}

.hla-card__read-more:hover {
    text-decoration      : underline !important;
    text-underline-offset: 2px;
}

/* ── Responsive grille ───────────────────────────────────── */
@media (max-width: 960px) {
    .hla-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .hla-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   Article à la une (hla-une)
   ═══════════════════════════════════════════════════════════ */

.hla-une {
    display       : grid;
    grid-template-columns: 55% 45%;
    border-radius : 16px;
    overflow      : hidden;
}

/* Colonne image — remplit exactement la hauteur de la grille */
.hla-une__bg {
    background-color   : #1C2E25;
    background-size    : cover;
    background-position: center;
    background-repeat  : no-repeat;
    min-height         : 100%;
}

/* Dégradé sur le bord droit de l'image */
.hla-une__bg::after {
    content    : '';
    display    : block;
    height     : 100%;
    background : linear-gradient(
        to right,
        transparent 60%,
        rgba(255,255,255,0.08) 100%
    );
}

/* Colonne carte blanche */
.hla-une__card {
    background    : #ffffff;
    padding       : 24px;
    display       : flex;
    flex-direction: column;
    justify-content: center;
    gap           : 0;
    box-shadow    : -8px 0 32px rgba(0,0,0,0.08);
}

/* Tag catégorie dans la une */
.hla-une__cat {
    margin-bottom : 16px !important;
}

/* Titre */
.hla-une__title {
    font-family : 'Roboto', sans-serif !important;
    font-size   : 22px !important;
    line-height : 1.35 !important;
    font-weight : 700 !important;
    color       : #0a0a0a !important;
    margin      : 0 0 12px 0 !important;
    padding     : 0 !important;
    border      : none !important;
}

.hla-une__title a {
    color           : inherit !important;
    text-decoration : none !important;
}

.hla-une__title a:hover {
    text-decoration      : underline !important;
    text-underline-offset: 3px;
}

/* Extrait */
.hla-une__excerpt {
    font-family : 'Roboto', sans-serif !important;
    font-size   : 14px !important;
    line-height : 1.65 !important;
    font-weight : 400 !important;
    color       : #3a3a38 !important;
    margin      : 0 0 24px 0 !important;
    padding     : 0 !important;
}

/* Footer auteur */
.hla-une__footer {
    margin-bottom : 24px;
}

.hla-une__author {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

/* CTA */
.hla-une__cta {
    display         : inline-flex;
    align-items     : center;
    height          : 40px;
    padding         : 0 20px;
    border          : 1.5px solid #1C3A2A;
    border-radius   : 8px;
    font-family     : 'Roboto', sans-serif !important;
    font-size       : 14px !important;
    font-weight     : 500 !important;
    color           : #1C3A2A !important;
    text-decoration : none !important;
    align-self      : flex-start;
    transition      : background .2s ease, color .2s ease;
    white-space     : nowrap;
}

.hla-une__cta:hover {
    background : #1C3A2A;
    color      : #ffffff !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .hla-une {
        grid-template-columns : 1fr;
    }

    .hla-une__bg {
        min-height : 240px;
    }

    .hla-une__card {
        box-shadow : none;
        border-top : 1px solid rgba(0,0,0,0.08);
    }
}