/* ==========================================================================
   Conseils & questions — liste d'articles et page d'article
   --------------------------------------------------------------------------
   Mobile d'abord. La contrainte qui gouverne tout ici est la MESURE DE
   LECTURE : au-delà d'une soixantaine de caractères par ligne, l'œil perd le
   début de la ligne suivante. Le reste de la mise en page s'y plie.
   ========================================================================== */

/* ---- Liste d'articles ---------------------------------------------------- */
.articles {
    display: grid;
    gap: var(--sp-13);
    margin: var(--sp-15) 0 0;
    padding: 0;
    list-style: none;
}

.article-card {
    /* `position: relative` sert d'ancre au lien étendu ci-dessous : sans lui,
       le ::after se rattacherait au premier ancêtre positionné, c'est-à-dire
       à peu près n'importe quoi. */
    position: relative;
    block-size: 100%;
    padding: var(--sp-18) var(--sp-15);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-11);
    transition: border-color 0.15s ease;
}

.article-card:hover {
    border-color: var(--c-orange);
}

.article-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-6);
    margin: 0;
    font-size: var(--fs-meta);
    color: var(--c-meta);
}

.article-card__categorie {
    padding: 2px var(--sp-8);
    background: var(--c-blue-bg);
    border-radius: var(--r-pill);
    color: var(--c-blue);
    font-size: var(--fs-label);
    font-weight: 600;
}

.article-card__titre {
    margin: var(--sp-9) 0 0;
    font-size: var(--fs-h3);
    line-height: 1.3;
}

/*
   LIEN ÉTENDU : le titre porte le seul <a> du balisage, et son ::after couvre
   toute la carte. Un lecteur d'écran annonce donc un lien unique et explicite,
   là où une carte truffée de liens répéterait trois fois la même destination.
*/
.article-card__titre a {
    color: var(--c-heading);
}

.article-card__titre a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.article-card:hover .article-card__titre a {
    color: var(--c-blue);
}

.article-card__chapo {
    margin: var(--sp-9) 0 0;
    color: var(--c-body);
    line-height: var(--fs-body-lh);
}

.article-card__lire {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    margin: var(--sp-13) 0 0;
    color: var(--c-blue);
    font-size: var(--fs-meta);
    font-weight: 600;
}

.article-card:hover .article-card__lire {
    color: var(--c-orange);
}

/* ---- Bas de la section questions ---------------------------------------- */
.questions__reste {
    margin-block-start: var(--sp-24);
    padding-block-start: var(--sp-20);
    border-block-start: 1px solid var(--c-border);
}

.questions__reste-texte {
    margin: 0 0 var(--sp-13);
    color: var(--c-body);
}

/* ==========================================================================
   Page d'article
   ========================================================================== */
.article__entete {
    padding-block-end: 0;
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-6);
    margin: var(--sp-13) 0 0;
    font-size: var(--fs-meta);
    color: var(--c-meta);
}

.article__titre {
    margin: var(--sp-11) 0 0;
    max-inline-size: 22ch;
}

.article__chapo {
    margin: var(--sp-13) 0 0;
    max-inline-size: 60ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--c-muted);
}

.article__corps {
    padding-block: var(--sp-24);
}

.article__section + .article__section {
    margin-block-start: var(--sp-24);
}

.article__h2 {
    margin: 0 0 var(--sp-9);
    max-inline-size: 34ch;
}

.article__p {
    margin: 0;
    max-inline-size: 60ch;
    color: var(--c-body);
    line-height: 1.65;
}

/* La conclusion est détachée du corps par un filet orange : c'est le passage
   qui ramène vers l'intervention, il ne doit pas se confondre avec une
   section de plus. */
.article__conclusion {
    max-inline-size: 60ch;
    margin-block-start: var(--sp-26);
    padding-inline-start: var(--sp-15);
    border-inline-start: 3px solid var(--c-orange);
    color: var(--c-heading);
    line-height: 1.6;
}

.article__signature {
    margin-block-start: var(--sp-26);
    padding-block-start: var(--sp-15);
    max-inline-size: 60ch;
    border-block-start: 1px solid var(--c-border);
}

.article__signature-nom {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: var(--c-heading);
}

.article__signature-role {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-meta);
    color: var(--c-meta);
}

.article__suite-texte {
    margin: 0 0 var(--sp-15);
    max-inline-size: 52ch;
    color: var(--c-body);
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 768px) {
    /* Deux colonnes : dix articles empilés sur une seule font une page qu'on
       ne parcourt pas jusqu'au bout. */
    .articles {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-15);
    }

    .articles--compact {
        grid-template-columns: repeat(3, 1fr);
    }

    .article-card {
        padding: var(--sp-20);
    }

    .article__titre {
        max-inline-size: 24ch;
    }

    .article__corps {
        padding-block: var(--sp-34);
    }
}