/* ==========================================================================
   Mon Petit Nuage — Système typographique
   DM Serif Display (titres H1-H3, citations) + DM Sans (texte, H4+)

   Ce fichier est chargé APRÈS zaira-responsive.css et après Elementor,
   il gagne donc par ordre de source à spécificité égale.
   Ne jamais modifier le thème parent : tout se passe ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   Le thème parent injecte ses couleurs dans `html:root`. On utilise le même
   sélecteur pour les polices afin de passer devant le `:root` de zaira-core.css.
   -------------------------------------------------------------------------- */

html:root {

    /* Familles ------------------------------------------------------------ */
    --mpn-font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
    --mpn-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* ATTENTION — piège du thème.
       Dans Zaira, --tg-heading-font-family n'est PAS réservée aux titres.
       Elle habille aussi le menu, les boutons, le fil d'Ariane, la pagination,
       les champs de formulaire, les onglets et les étiquettes de catégorie :
       24 règles au total dans zaira-core.css et zaira-unit.css.
       Y mettre une display serif met DM Serif Display dans toute l'interface.

       On garde donc les 4 variables en DM Sans, et DM Serif Display est
       appliquée explicitement aux seuls endroits qui la méritent : h1-h3,
       titre d'article, titre de catégorie, citations et lettrine. */
    --tg-body-font-family: var(--mpn-font-sans);
    --tg-heading-font-family: var(--mpn-font-sans);
    --unit-body-font-family: var(--mpn-font-sans);
    --unit-heading-font-family: var(--mpn-font-sans);

    /* Échelle desktop ----------------------------------------------------- */
    --mpn-h1: 46px;
    --mpn-h2: 34px;
    --mpn-h3: 27px;
    --mpn-h4: 20px;
    --mpn-body: 17px;
    --mpn-chapo: 19px;
    --mpn-quote: 22px;

    /* En-tête d'article pleine largeur (§12). Le titre y est plus grand que
       le H1 courant : il est posé sur une photo, pas sur du blanc. */
    --mpn-hero-title: 54px;
    --mpn-hero-height: clamp(620px, 88vh, 900px);
    /* En-tête de page catégorie (§14) : un ou deux mots posés sur une image
       moins haute, donc un cran en dessous du titre d'article. */
    --mpn-hero-archive-title: 48px;

    /* Interlignages (identiques desktop et mobile) ------------------------ */
    --mpn-h1-lh: 1.10;
    --mpn-h2-lh: 1.15;
    --mpn-h3-lh: 1.20;
    --mpn-h4-lh: 1.30;
    --mpn-body-lh: 1.65;
    --mpn-chapo-lh: 1.55;
    --mpn-quote-lh: 1.45;

    /* Graisses ------------------------------------------------------------ */
    --mpn-fw-serif: 400;
    --mpn-fw-h4: 600;

    /* Variables du thème parent alignées sur la nouvelle échelle.
       DM Serif Display n'existe qu'en 400 : laisser 700 provoquerait un
       faux-gras synthétique très laid sur les titres. */
    --tg-body-font-size: var(--mpn-body);
    --tg-body-line-height: var(--mpn-body-lh);
    --tg-body-font-weight: 400;
    --tg-heading-font-weight: var(--mpn-fw-serif);
    --tg-heading-line-height: var(--mpn-h3-lh);
}

/* --------------------------------------------------------------------------
   2. Échelle mobile
   Breakpoint aligné sur celui du thème (zaira-responsive.css : 767.98px).
   Seules les tailles changent, les interlignages sont conservés.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    html:root {
        --mpn-h1: 34px;
        --mpn-h2: 28px;
        --mpn-h3: 23px;
        --mpn-h4: 19px;
        --mpn-body: 16px;
        --mpn-chapo: 18px;
        --mpn-quote: 19px;
        --mpn-hero-title: 32px;
        --mpn-hero-height: clamp(340px, 56vh, 460px);
        --mpn-hero-archive-title: 30px;
    }
}

/* --------------------------------------------------------------------------
   3. Corps de texte
   -------------------------------------------------------------------------- */

body {
    font-family: var(--mpn-font-sans);
    font-size: var(--mpn-body);
    line-height: var(--mpn-body-lh);
    font-weight: 400;
}

/* Les champs de formulaire n'héritent pas de la police par défaut */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   4. Titres — échelle générique
   Les titres de composants (.post-title, .widget-title .title, etc.) ont tous
   une taille définie par une règle de classe plus spécifique : ils gardent
   leurs dimensions, seule la famille change. C'est voulu — sinon les titres
   de cartes passeraient à 34px.
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
    font-family: var(--mpn-font-serif);
    font-weight: var(--mpn-fw-serif);
    font-style: normal;
}

h4,
h5,
h6 {
    font-family: var(--mpn-font-sans);
    font-weight: var(--mpn-fw-h4);
}

h1 {
    font-size: var(--mpn-h1);
    line-height: var(--mpn-h1-lh);
}

h2 {
    font-size: var(--mpn-h2);
    line-height: var(--mpn-h2-lh);
}

h3 {
    font-size: var(--mpn-h3);
    line-height: var(--mpn-h3-lh);
}

h4 {
    font-size: var(--mpn-h4);
    line-height: var(--mpn-h4-lh);
}

/* --------------------------------------------------------------------------
   5. Contenu éditorial (article, page, archive)
   Wrapper réel des articles : <article class="blog-details-content">
   -------------------------------------------------------------------------- */

/* Titre de l'article. Attention : le thème le sort en <h2 class="title">,
   pas en <h1>. On lui applique quand même l'échelle H1 (voir note SEO). */
.blog-details-content .title {
    font-size: var(--mpn-h1);
    line-height: var(--mpn-h1-lh);
    font-family: var(--mpn-font-serif);
    font-weight: var(--mpn-fw-serif);
}

.blog-details-content p,
.blog-details-content li,
.blog-details-content dd,
.blog-details-content .wp-block-list li {
    font-size: var(--mpn-body);
    line-height: var(--mpn-body-lh);
}

/* Intertitres dans le contenu Gutenberg */
.blog-details-content h2,
.blog-details-content .wp-block-heading:is(h2) {
    font-size: var(--mpn-h2);
    line-height: var(--mpn-h2-lh);
}

.blog-details-content h3,
.blog-details-content .wp-block-heading:is(h3) {
    font-size: var(--mpn-h3);
    line-height: var(--mpn-h3-lh);
}

.blog-details-content h4,
.blog-details-content .wp-block-heading:is(h4) {
    font-size: var(--mpn-h4);
    line-height: var(--mpn-h4-lh);
    font-family: var(--mpn-font-sans);
    font-weight: var(--mpn-fw-h4);
}

/* Titre et description de catégorie (archive.php) */
.page-header .page-title {
    font-size: var(--mpn-h1);
    line-height: var(--mpn-h1-lh);
}

.archive-description p {
    font-size: var(--mpn-chapo);
    line-height: var(--mpn-chapo-lh);
}

/* La lettrine et les intertitres de bloc Groupe passaient par la variable
   de titre : maintenant qu'elle est en sans, on les repasse en serif à la main.
   `.wp-block-group__inner-container h2` (0,1,1) bat un simple `h2`, d'où la
   surcharge à spécificité équivalente. */

.blog-details-content p.first-info::first-letter {
    font-family: var(--mpn-font-serif);
    font-weight: 400;
}

.blog-details-content .wp-block-group__inner-container h2 {
    font-family: var(--mpn-font-serif);
    font-weight: var(--mpn-fw-serif);
}

/* --------------------------------------------------------------------------
   6. Chapô
   Le thème n'a pas de style de chapô. Cette classe s'ajoute au paragraphe
   dans Gutenberg : Bloc → Avancé → « Classe(s) CSS additionnelle(s) » → chapo
   -------------------------------------------------------------------------- */

.chapo,
.blog-details-content p.chapo {
    font-family: var(--mpn-font-sans);
    font-size: var(--mpn-chapo);
    line-height: var(--mpn-chapo-lh);
    font-weight: 400;
    margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   7. Citations
   Le thème parent impose ici font-weight:700 et text-transform:capitalize —
   ce dernier met une majuscule à chaque mot, catastrophique en français.
   On neutralise les deux.
   -------------------------------------------------------------------------- */

.wp-block-quote p,
.blog-details-content blockquote p,
.blog-details-content blockquote,
blockquote p {
    font-family: var(--mpn-font-serif);
    font-style: italic;
    font-weight: var(--mpn-fw-serif);
    font-size: var(--mpn-quote);
    line-height: var(--mpn-quote-lh);
    text-transform: none;
}

/* L'attribution reste en sans, non italique */
.wp-block-quote cite,
.blog-details-content blockquote cite {
    font-family: var(--mpn-font-sans);
    font-style: normal;
    font-weight: 500;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   8. Filet de sécurité Elementor
   Le kit Elementor (elementor-kit-55396) contient une règle
   `.elementor-kit-55396 h4 { font-family:"Manrope"; font-weight:700 }`
   de spécificité (0,1,1) qui bat un simple `h4`.
   La vraie correction se fait dans Elementor → Réglages du site → Typographie.
   Ces règles couvrent le cas où le kit n'a pas encore été mis à jour.
   -------------------------------------------------------------------------- */

body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3 {
    font-family: var(--mpn-font-serif);
    font-weight: var(--mpn-fw-serif);
}

body[class*="elementor-kit-"] h4,
body[class*="elementor-kit-"] h5,
body[class*="elementor-kit-"] h6 {
    font-family: var(--mpn-font-sans);
    font-weight: var(--mpn-fw-h4);
}

/* --------------------------------------------------------------------------
   9. Page catégorie : titre + description
   Le thème sort le bloc avec la classe Bootstrap `d-none`
   (archive.php:86, `display:none!important`), donc invisible en front alors
   que le contenu est bien dans le HTML. On le réaffiche et on le remet en
   forme : le style d'origine est une bannière bleu nuit (#011D3A, 30px de
   padding) qui n'a rien d'éditorial.

   Scopé sur body.archive : ne touche pas au bandeau équivalent de la page
   de résultats de recherche (search.php:42), qui reste masqué.
   -------------------------------------------------------------------------- */

body.archive .page-header.d-none {
    display: block !important;
}

body.archive .page-header {
    background: none;
    padding: 0;
    margin-bottom: 40px;
}

body.archive .page-header .page-title {
    font-family: var(--mpn-font-serif);
    font-weight: var(--mpn-fw-serif);
    font-size: var(--mpn-h1);
    line-height: var(--mpn-h1-lh);
    margin: 0;
}

body.archive .archive-description {
    margin-top: 16px;
}

body.archive .archive-description p {
    font-family: var(--mpn-font-sans);
    font-size: var(--mpn-chapo);
    line-height: var(--mpn-chapo-lh);
}

body.archive .archive-description p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. Archives de catégorie — mise en page « Une à la une »
   Un article en vedette pleine largeur, puis une grille deux colonnes.
   S'appuie sur `weekly-post-three`, déjà stylé dans zaira-core.css : on ne
   règle ici que les dimensions, tout le reste (survol, zoom de l'image,
   soulignement du titre) vient du thème parent.
   -------------------------------------------------------------------------- */

/* --- Article à la une --- */

.mpn-featured {
    margin-bottom: 45px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--tg-border-color);
}

.mpn-featured .weekly-post-thumb img {
    height: 420px;
}

.mpn-featured .weekly-post-content .post-title {
    font-size: var(--mpn-h2);
    line-height: var(--mpn-h2-lh);
}

.mpn-featured .weekly-post-content p {
    font-size: var(--mpn-chapo);
    line-height: var(--mpn-chapo-lh);
    margin-bottom: 20px;
}

/* --- Grille --- */

.mpn-archive-grid .weekly-post-three .weekly-post-thumb img {
    height: 260px;
}

.mpn-archive-grid .weekly-post-three .weekly-post-content .post-title {
    font-size: 21px;
    line-height: 1.25;
    margin-bottom: 12px;
}

/* Le thème place l'étiquette à 30px des bords : trop pour une vignette
   de grille, qui fait la moitié de la largeur de la vedette. */
.mpn-archive-grid .weekly-post-three .weekly-post-thumb .post-tag {
    left: 16px;
    top: 16px;
}

/* --- Mobile --- */

@media (max-width: 767.98px) {

    .mpn-featured {
        margin-bottom: 32px;
        padding-bottom: 28px;
    }

    .mpn-featured .weekly-post-thumb img {
        height: 240px;
    }

    .mpn-archive-grid .weekly-post-three .weekly-post-thumb img {
        height: 220px;
    }

    .mpn-featured .weekly-post-thumb .post-tag {
        left: 16px;
        top: 16px;
    }
}

/* --------------------------------------------------------------------------
   11. Étiquettes de catégorie
   Le thème dessine `.post-tag` pour des libellés courts type « Travel ».
   Vos catégories réelles font jusqu'à 40 caractères — « Gâteaux, goûters,
   desserts & pâtisseries » — en capitales et avec 0,78px d'interlettrage.

   Dans le carrousel de la page d'accueil, l'étiquette est en position absolue
   (zaira-core.css:2403) avec `left:50%`, ce qui limite sa largeur disponible
   à la moitié de la carte : le libellé passait sur 3 ou 4 lignes et retombait
   par-dessus le titre.
   -------------------------------------------------------------------------- */

/* Une seule ligne partout, tronquée si nécessaire : une étiquette qui déborde
   ne doit jamais pouvoir recouvrir un titre. */
.post-tag {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Carrousel « À la une » : on remplace le centrage par translation, qui
   plafonnait la largeur à 50 %, par un centrage left/right qui laisse
   l'étiquette occuper toute la largeur de la carte. */
.featured-post-content .post-tag {
    left: 0;
    right: 0;
    transform: none;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin-inline: auto;
}

/* Étiquettes posées sur une image : on les décolle du bord pour qu'elles
   gardent de la marge une fois allongées. */
.weekly-post-thumb .post-tag,
[class*="banner-post"] .post-tag {
    max-width: calc(100% - 40px);
}

/* --------------------------------------------------------------------------
   12. Liens dans le corps de texte
   Le thème parent colore TOUS les liens en `--tg-primary-color` (#F4796C,
   zaira-core.css:128) : le corail des boutons et du menu se retrouve donc
   au milieu des paragraphes.

   On ne repeint que les liens éditoriaux — ceux posés dans un élément de
   texte du contenu — et on laisse le corail aux liens d'interface
   (étiquette de catégorie, méta, tags, boutons Gutenberg, commentaires),
   qui restent cohérents avec le reste du site.
   -------------------------------------------------------------------------- */

html:root {
    --mpn-link: #9A8CCA;
    --mpn-link-hover: #7A6AAF;
}

/* Les deux enveloppes de contenu du thème : `.blog-details-content` pour les
   articles (template-parts/content.php), `.zaira-page-post` pour les pages.
   La liste d'éléments limite volontairement la portée au texte courant :
   un bouton Gutenberg ou une carte n'est jamais dans un <p> ou un <li>. */
.blog-details-content :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a,
.zaira-page-post :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a {
    color: var(--mpn-link);
}

.blog-details-content :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:hover,
.blog-details-content :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:focus,
.zaira-page-post :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:hover,
.zaira-page-post :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:focus {
    color: var(--mpn-link-hover);
}

/* Zones d'interface situées à l'intérieur des mêmes enveloppes : la méta
   (date, auteur, commentaires) et les tags sont sortis en <li>, ils seraient
   donc attrapés par la règle ci-dessus. Deux classes contre une : ces
   sélecteurs (0,2,1) repassent devant (0,1,2). */
.blog-details-content .blog-details-content-top a,
.blog-details-content .blog-details-bottom a,
.blog-details-content .blog-post-meta a,
.blog-details-content .post-tags a,
.zaira-page-post .page-links a,
.zaira-page-post .blog-post-comment a {
    color: var(--tg-primary-color);
}

/* --------------------------------------------------------------------------
   12. Article : en-tête pleine largeur (photo en fond)
   Rendu par template-parts/single/hero.php, hors du `.container` de
   single.php. L'image est un vrai <img> en object-fit plutôt qu'un
   background-image : le srcset continue de fonctionner et le navigateur
   télécharge la bonne taille.
   -------------------------------------------------------------------------- */

.mpn-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--mpn-hero-height);
    /* La marge basse est portée par le `pt-60` de `.blog-details-area`. */
    overflow: hidden;
}

.mpn-hero-media {
    position: absolute;
    inset: 0;
}

.mpn-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Voile sombre. Renforcé en haut et en bas : le titre reste lisible même sur
   une photo claire, et l'étiquette de rubrique ne se perd pas dans un ciel. */
.mpn-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.28) 45%,
            rgba(0, 0, 0, 0.52) 100%);
}

.mpn-hero > .container {
    position: relative;
    /* Sans ceci le texte passerait sous le voile en ::after. */
    z-index: 1;
}

.mpn-hero-content {
    max-width: 820px;
    margin-inline: auto;
    padding-block: 60px;
    text-align: center;
}

/* Rubrique : capitales espacées, pas la pastille colorée des cartes
   d'archive — à cette échelle un aplat de couleur écraserait le titre. */
.mpn-hero-category,
.mpn-hero-category:visited {
    display: inline-block;
    font-family: var(--mpn-font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tg-white);
    margin-bottom: 20px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    transition: border-color 0.3s ease;
}

.mpn-hero-category:hover,
.mpn-hero-category:focus {
    color: var(--tg-white);
    border-bottom-color: var(--tg-white);
}

.mpn-hero-title {
    font-family: var(--mpn-font-serif);
    font-weight: var(--mpn-fw-serif);
    font-size: var(--mpn-hero-title);
    line-height: var(--mpn-h1-lh);
    color: var(--tg-white);
    margin: 0;
    /* Évite la ligne orpheline d'un mot sur les titres longs. */
    text-wrap: balance;
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

/* La méta reprend le composant du thème (icônes, réglages Personnaliser) :
   seule la couleur change. */
.mpn-hero .blog-post-meta {
    margin-top: 24px;
}

.mpn-hero .blog-post-meta .list-wrap li,
.mpn-hero .blog-post-meta .list-wrap li a {
    color: var(--tg-white);
}

.mpn-hero .blog-post-meta .list-wrap li a:hover {
    opacity: 0.7;
}

/* Boutons de partage conservés en haut de l'article quand l'option est
   active : sans le bloc titre qui les portait, ils ont besoin de leur
   propre séparation. */
.mpn-top-share {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--tg-border-color);
}

/* --- Mobile --- */

@media (max-width: 767.98px) {

    .mpn-hero-content {
        padding-block: 40px;
    }

    .mpn-hero-category {
        font-size: 12px;
        margin-bottom: 14px;
    }

    .mpn-hero .blog-post-meta {
        margin-top: 18px;
    }
}

/* --------------------------------------------------------------------------
   13. Page catégorie : description longue en bas de page
   Le H1 et la « description courte » (champs ACF) ouvrent la page ; la
   description de la catégorie WordPress la referme, après la pagination.
   Texte de fond, donc à l'échelle du corps, pas du chapô.
   -------------------------------------------------------------------------- */

.mpn-archive-outro {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--tg-border-color);
}

.mpn-archive-outro p,
.mpn-archive-outro li {
    font-family: var(--mpn-font-sans);
    font-size: var(--mpn-body);
    line-height: var(--mpn-body-lh);
}

.mpn-archive-outro > *:last-child {
    margin-bottom: 0;
}

.mpn-archive-outro h2 {
    font-family: var(--mpn-font-serif);
    font-weight: var(--mpn-fw-serif);
    font-size: var(--mpn-h3);
    line-height: var(--mpn-h3-lh);
}

.mpn-archive-outro h3 {
    font-family: var(--mpn-font-serif);
    font-weight: var(--mpn-fw-serif);
    font-size: var(--mpn-h4);
    line-height: var(--mpn-h4-lh);
}

@media (max-width: 767.98px) {

    .mpn-archive-outro {
        margin-top: 40px;
        padding-top: 24px;
    }
}

/* --------------------------------------------------------------------------
   14. Page catégorie : en-tête pleine largeur (image en fond)
   Rendu par template-parts/archive/hero.php, hors du `.container` de
   category.php. Reprend le squelette de l'en-tête d'article (§12) — mêmes
   classes `.mpn-hero*`, donc même image en <img> + object-fit pour garder le
   srcset — avec un bloc plus bas : c'est une intro de rubrique, pas une
   couverture d'article.
   -------------------------------------------------------------------------- */

.mpn-hero--archive {
    --mpn-hero-height: clamp(360px, 46vh, 480px);
    /* La marge basse est portée par le `pt-50` de `.blog__area`. */
}

/* Le titre de rubrique tient en un ou deux mots : il peut monter plus haut
   qu'un titre d'article sans jamais dépasser trois lignes. */
.mpn-hero--archive .mpn-hero-title {
    font-size: var(--mpn-hero-archive-title);
}

/* Surtitre : même traitement que l'étiquette de rubrique des articles, mais
   sans lien ni soulignement — c'est un libellé, pas une navigation. */
.mpn-hero-eyebrow {
    display: block;
    font-family: var(--mpn-font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 16px;
}

.mpn-hero-desc {
    max-width: 680px;
    margin: 22px auto 0;
}

.mpn-hero-desc p {
    font-family: var(--mpn-font-sans);
    font-size: var(--mpn-body);
    line-height: var(--mpn-body-lh);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

.mpn-hero-desc p:last-child {
    margin-bottom: 0;
}

/* --- Mobile --- */

@media (max-width: 767.98px) {

    .mpn-hero--archive {
        --mpn-hero-height: clamp(260px, 40vh, 340px);
    }

    .mpn-hero-eyebrow {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .mpn-hero-desc {
        margin-top: 16px;
    }
}

/* --------------------------------------------------------------------------
   15. Article : « Articles similaires » en bas de page
   Rendu par template-parts/single/related.php, qui remplace la navigation
   « Previous / Next Post » du thème parent. Trois cartes `weekly-post-three`,
   les mêmes que la grille d'archive (§10) : le lecteur retrouve le composant
   qu'il vient de quitter sur la page catégorie.
   -------------------------------------------------------------------------- */

.mpn-related {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--tg-border-color);
}

/* --- En-tête de rubrique --- */

/* `.widget-title` place le filet en absolu sur son bord bas : la marge doit
   donc vivre ici, pas sur le titre lui-même. */
.mpn-related-title {
    margin-bottom: 30px;
}

/* Le thème dessine ce titre à 22px pour la colonne latérale ; ici il ouvre
   une section pleine largeur et monte d'un cran. */
.mpn-related-title .title {
    font-size: var(--mpn-h3);
    line-height: var(--mpn-h3-lh);
}

/* --- Grille de trois cartes --- */

.mpn-related-grid .weekly-post-three .weekly-post-thumb img {
    height: 200px;
}

.mpn-related-grid .weekly-post-three .weekly-post-content .post-title {
    font-size: 19px;
    line-height: 1.3;
    margin-bottom: 10px;
}

/* Colonnes trois fois plus étroites que la vedette d'archive : l'étiquette
   revient dans le coin, comme sur la grille de catégorie (§10). */
.mpn-related-grid .weekly-post-three .weekly-post-thumb .post-tag {
    left: 14px;
    top: 14px;
}

/* Les trois cartes tiennent sur une ligne à partir de 768px : la marge basse
   du composant ne servirait qu'à creuser un blanc avant les commentaires. */
@media (min-width: 768px) {

    .mpn-related-grid .weekly-post-three {
        margin-bottom: 0;
    }
}

/* --- Tablette et mobile --- */

/* Deux cartes par ligne entre 576 et 767px : celle du bas garde sa marge. */
@media (max-width: 767.98px) {

    .mpn-related {
        margin-top: 40px;
        padding-top: 28px;
    }

    /* La carte est fille unique de sa colonne : c'est la dernière COLONNE
       qu'il faut viser, sans quoi les trois cartes empilées se colleraient. */
    .mpn-related-grid > [class*="col-"]:last-child .weekly-post-three {
        margin-bottom: 0;
    }

    .mpn-related-grid .weekly-post-three .weekly-post-thumb img {
        height: 210px;
    }
}