/*
 * Corps d'un article — Figma node 2644:70982.
 *
 * Colonne de texte de 888 centrée, et le rythme vertical de la maquette : 56 entre deux grands
 * blocs, 40 après un titre de niveau 2, 32 entre deux paragraphes et après un sous-titre.
 *
 * Ce fichier habille du contenu que l'éditeur écrit librement dans WordPress. Les règles portent
 * donc sur les BALISES et non sur des classes : un h2 tapé dans l'éditeur doit sortir juste, sans
 * que personne ait à penser à poser une classe.
 */

.article {
    /* 888 dans la maquette. */
    width: min(888px, 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding-block-end: var(--space-big-hero);
}

.article__content {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-900);
}

.article__content > :first-child {
    margin-block-start: 0;
}

.article__content > :last-child {
    margin-block-end: 0;
}

/* ---- Rythme ---- */

.article__content p {
    margin-block: 0 var(--space-bloc);
}

/*
 * Titre de niveau 2 : Orbital Bold 20px en primary, à ne pas confondre avec le h2 des sections
 * (49px). C'est un titre DANS un texte, la maquette le traite en conséquence.
 */
.article__content h2 {
    margin-block: var(--space-page) var(--space-section);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}

/*
 * Sous-titre : Basic Sans Bold 16/26 en primary, en capitales. La maquette montre le texte déjà
 * saisi en majuscules ; c'est le CSS qui s'en charge ici, pour que le rédacteur écrive
 * normalement — et qu'un lecteur d'écran n'épelle pas le mot lettre par lettre, ce que font
 * certains sur du texte réellement en capitales.
 */
.article__content h3 {
    margin-block: var(--space-xl) var(--space-bloc);
    font-family: var(--font-family-body);
    font-size: var(--font-size-p);
    font-weight: 700;
    line-height: var(--line-height-body);
    color: var(--color-primary);
    text-transform: uppercase;
}

.article__content h4,
.article__content h5,
.article__content h6 {
    margin-block: var(--space-bloc) var(--space-m);
    font-family: var(--font-family-body);
    font-size: var(--font-size-p);
    font-weight: 700;
    line-height: var(--line-height-body);
    color: var(--color-primary);
}

/* ---- Listes, citations, liens ---- */

.article__content ul,
.article__content ol {
    margin-block: 0 var(--space-bloc);
    padding-inline-start: var(--space-list);
}

.article__content li + li {
    margin-block-start: var(--space-compact);
}

.article__content blockquote {
    margin-block: var(--space-xl);
    margin-inline: 0;
    padding-inline-start: var(--space-list);
    border-inline-start: 3px solid var(--color-secondary);
    color: var(--color-primary);
}

.article__content a {
    color: var(--color-primary-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Images ---- */

/*
 * Une image dans le corps occupe toute la colonne, rayon 8. WordPress enveloppe les images dans
 * une figure : les deux cas sont couverts, l'image seule comme la figure légendée.
 */
.article__content figure,
.article__content img {
    margin-block: var(--space-page);
}

.article__content img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xs);
}

.article__content figure img {
    margin-block: 0;
}

.article__content figcaption {
    margin-block-start: var(--space-s);
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    color: var(--color-neutral-600);
}

/* ---- Tableaux ---- */

/*
 * Pas de tableau dans la maquette : filets fins aux couleurs du texte, en-tête en primary.
 * L'enveloppe défile horizontalement sur mobile plutôt que d'écraser les colonnes.
 */
.article__table {
    margin-block: var(--space-xl);
    overflow-x: auto;
}

.article__content table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
}

.article__content th,
.article__content td {
    padding: var(--space-s) var(--space-m);
    border-bottom: 1px solid var(--color-primary-alpha-10);
    text-align: left;
    vertical-align: top;
}

.article__content th {
    background-color: var(--color-primary);
    color: var(--color-primary-50);
    font-weight: 700;
}

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .article {
        --container-gutter: var(--space-bloc);
        padding-block-end: var(--space-large);
    }
}

@media (max-width: 768px) {
    .article {
        --container-gutter: var(--space-m);
    }

    .article__content h2 {
        margin-block: var(--space-xl) var(--space-bloc);
    }

    .article__content figure,
    .article__content img {
        margin-block: var(--space-xl);
    }
}