/*
 * Page Blog — fiche article.
 */

.blog-article {
    background: var(--mr-gris-fond-2);
    padding: 44px 0 60px;
}

.blog-article__inner {
    max-width: 900px;
}

.blog-article__title {
    text-align: center;
    color: var(--mr-brun);
    font-weight: 900;
    font-size: clamp(28px, 2.4vw, 44px);
    line-height: 1.2;
    margin: 24px 0 18px;
    text-wrap: balance;
}

.blog-article__date {
    text-align: center;
    /* Couleur reprise directement (pas de variable dédiée) : ce ton
       provenait auparavant d'une variable du panneau d'accessibilité,
       supprimée avec le panneau — cet usage-ci n'avait rien à voir avec
       le contraste élevé, juste la même teinte réutilisée comme couleur
       de design normale. */
    color: #8a4200;
    font-weight: 900;
    font-size: 17px;
    margin: 0 0 34px;
}

.blog-article__badge {
    display: flex;
    justify-content: center;
    margin: 0 0 44px;
}

.blog-article__media {
    border-radius: var(--mr-r-m);
    overflow: hidden;
    margin: 0 0 46px;
}

/* Photo posée sur le gris-fond-2 de la page, sans cadre propre. */
html.a11y-contrast .blog-article__media,
html.a11y-enhanced .blog-article__media {
    border: 2px solid var(--mr-encre);
}

.blog-article__media img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-article__body,
.blog-article__excerpt {
    font-size: 17px;
    line-height: 1.75;
    color: var(--mr-brun);
}

.blog-article__body h2 {
    color: var(--mr-brun);
    font-weight: 900;
    font-size: 20px;
    line-height: 1.35;
    margin: 44px 0 12px;
}

/* Absente jusqu'ici (voir blog-show.php) : un bloc "sous-titre" retombait
   sur le style d'un paragraphe, faute de règle dédiée. */
.blog-article__body h3 {
    color: var(--mr-brun);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
    margin: 32px 0 10px;
}

.blog-article__body p,
.blog-article__excerpt {
    margin: 0 0 26px;
    /* Un seul bloc de texte peut désormais regrouper tout le corps de
       l'article (paragraphes/étapes séparés par une ligne vide dans la
       donnée) : sans ce réglage, ces sauts de ligne sont ignorés par HTML
       et tout s'affiche à la suite en un seul pavé. */
    white-space: pre-line;
}

/* Blocs liste du corps d'article. Mêmes valeurs que les pages légales,
   qui portent déjà ce type de bloc : un article et une page légale
   affichent la même liste à puces. */
.blog-article__body ul {
    margin: 0 0 26px;
    /* 34px (pas 22px) : retour utilisateur, le retrait par rapport au texte
       courant restait trop discret pour bien distinguer une liste à puces
       du reste du corps de l'article. */
    padding-left: 34px;
}

.blog-article__body li {
    margin-bottom: 8px;
}

/* Les liens sont désormais conservés dans le corps d'article : sans mise
   en évidence propre, un lien y serait indistinguable du texte — ce que
   la couleur seule ne suffirait pas à corriger (RGAA 3.1), d'où la
   graisse en renfort. */
.blog-article__body a {
    color: var(--mr-bleu-leclerc);
    font-weight: 600;
}

/* Encart coloré (ingrédients d'une recette, notamment) : regroupe
   titre/sous-titre/liste dans un fond teinté à part — équivalent du
   <div class="box"> de l'ancien site, teinté ici avec --mr-ciel (pas de
   nouvelle teinte, voir tokens.css) plutôt que la couleur par catégorie
   de l'ancien site (recette/astuce/jeu…), qui n'a pas d'équivalent dans
   la palette de marque actuelle. */
.blog-article__box {
    background: rgba(91, 184, 224, 0.22);
    border-radius: var(--mr-r-xl);
    padding: 24px 28px;
    margin: 32px 0;
}

.blog-article__box > :first-child {
    margin-top: 0;
}

.blog-article__box > :last-child {
    margin-bottom: 0;
}

html.a11y-contrast .blog-article__box,
html.a11y-enhanced .blog-article__box {
    border: 2px solid var(--mr-encre);
}

/* Image insérée dans le corps de l'article (barre de mise en forme du
   back-office, bloc "image") — mêmes coins arrondis que la photo de
   couverture ci-dessus (.blog-article__media), pour rester cohérent avec
   le reste de la page. */
.blog-article__inline-image {
    margin: 32px 0;
    border-radius: var(--mr-r-m);
    overflow: hidden;
}

.blog-article__inline-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Taille (back-office, barre de mise en forme du bloc image) : proportion
   de la largeur du corps de texte, pas une dimension fixe — l'image reste
   nette quel que soit l'écran. Pleine largeur (défaut) : pas de classe
   dédiée, c'est déjà le comportement de .blog-article__inline-image seule. */
.blog-article__inline-image--petit {
    width: 33%;
}

.blog-article__inline-image--moyen {
    width: 50%;
}

.blog-article__inline-image--grand {
    width: 75%;
}

/* Position (uniquement visible si la taille ci-dessus est < 100%) : l'image
   reste un bloc à part entière sur sa propre ligne, comme le reste du
   corps de texte — pas de flottement avec renvoi à la ligne du texte
   voisin, non demandé et plus fragile en lecture d'écran. */
.blog-article__inline-image--gauche {
    margin-right: auto;
}

.blog-article__inline-image--droite {
    margin-left: auto;
}

.blog-article__inline-image--centre {
    margin-left: auto;
    margin-right: auto;
}

/* Lien posé sur l'image (barre de mise en forme) : le lien doit couvrir
   exactement la photo, pas déborder en dessous (un <a> est en ligne par
   défaut, laissant un filet d'espace sous l'image comme sous du texte). */
.blog-article__inline-image a {
    display: block;
}

/* Rangée de 2-3 images (back-office : images posées à la suite l'une de
   l'autre, sans texte entre les deux — voir App\Support\RichText::blocks()
   et blog-show.php). Colonnes égales, quel que soit le nombre d'images :
   pas de règle par nombre, 1fr répété s'occupe déjà de les partager. */
.blog-article__image-row {
    display: grid;
    grid-template-columns: repeat(var(--mr-image-row-count, 3), 1fr);
    gap: 16px;
    margin: 32px 0;
}

.blog-article__image-row--2 {
    --mr-image-row-count: 2;
}

.blog-article__image-row__item {
    margin: 0;
    border-radius: var(--mr-r-m);
    overflow: hidden;
}

.blog-article__image-row__item img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-article__image-row__item a {
    display: block;
}

/* Sur petit écran, une rangée de 3 vignettes devient trop étroite pour
   rester lisible (RGAA 1.4.4 : le contenu doit rester compréhensible en
   zoom/petite largeur) — on repasse en une colonne, comme les images
   seules du corps d'article juste au-dessus. */
@media (max-width: 560px) {
    .blog-article__image-row {
        grid-template-columns: 1fr;
    }
}

html.a11y-contrast .blog-article__inline-image,
html.a11y-enhanced .blog-article__inline-image,
html.a11y-contrast .blog-article__image-row__item,
html.a11y-enhanced .blog-article__image-row__item {
    border: 2px solid var(--mr-encre);
}

/* Précédent à gauche, suivant à droite (ordre de lecture naturel) : même
   bouton .cta--coral des deux côtés, pas de variante propre à chacun. */
.blog-article__nav {
    margin: 60px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* space-between suffit quand les deux boutons sont présents, mais un seul
   des deux peut manquer (premier/dernier article publié, voir
   BlogController::show) : sans ça, "suivant" tout seul se retrouverait
   collé à gauche au lieu de garder sa place habituelle à droite. */
.blog-article__nav-next {
    margin-left: auto;
}

@media (max-width: 560px) {
    .blog-article__nav {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-article__nav-next {
        margin-left: 0;
    }
}

.blog-related {
    background: var(--mr-gris-fond-2);
    padding: 0 0 110px;
}

.blog-related__title {
    margin: 0 0 44px;
    text-align: center;
    color: var(--mr-corail-fonce);
    /* Contraste RGAA 3.2 : le corail de marque (2,9:1) est trop clair même pour un grand titre (3:1 requis) ; corail-fonce = 3,8:1. */
    font-weight: 900;
    font-size: clamp(24px, 2.4vw, 38px);
    line-height: 1.1;
}

/* Flex (pas grid) + justify-content:center : jusqu'à 3 articles "liés"
   ici (BlogController::show), et leur nombre réel varie (1 à 3) — un
   grid-template-columns figé à 3 laissait 1 ou 2 cartes collées à gauche
   dans des colonnes vides plutôt que centrées (retour utilisateur). Les
   flex-basis ci-dessous reproduisent exactement les largeurs de carte du
   grid précédent à chaque palier (3 puis 2 puis 1 par ligne) — seul le
   centrage change quand il y a moins de cartes que de colonnes. */
.blog-related__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 36px;
    row-gap: 60px;
    align-items: stretch;
}

.blog-related__grid > li {
    flex: 0 1 calc((100% - 2 * 36px) / 3);
}

@media (max-width: 1100px) {
    .blog-related__grid {
        column-gap: 24px;
        row-gap: 52px;
    }

    .blog-related__grid > li {
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media (max-width: 640px) {
    .blog-related__grid > li {
        flex-basis: 100%;
    }
}

html.a11y-contrast .blog-related__title,
html.a11y-enhanced .blog-related__title {
    color: var(--mr-a11y-accent) !important;
}