/* ==========================================================================
   MK Journal — page d'un article
   Même charte que le reste du site : crème, brun, bordeaux, rose pétale,
   Marcellus pour les titres, Plus Jakarta Sans pour le texte.
   ========================================================================== */
body.mkj-article-body { background: #FFF3EF; }
/* Filet de sécurité : bannière du thème masquée sur les articles */
body.mkj-article-body .mk-hero { display: none !important; }

/* Pétales du thème (z-index 0) : ils tombent sur le fond crème mais passent
 * DERRIÈRE le contenu de l'article, comme sur le reste du site.
 * :where() = spécificité nulle, un élément qui a déjà sa position la garde. */
:where(
    .mkj-article > *,
    .mkj-article__texte > *,
    .mkj-suite
) {
    position: relative;
    z-index: 1;
}

.mkj-article-page {
    --mkj-fonce: #1D1510;
    --mkj-brun: #765741;
    --mkj-cta: #931637;
    --mkj-cta-hover: #7a1029;
    --mkj-rose: #FCA6C2;
    --mkj-rose-pale: #F9DDE3;
    --mkj-sable: #F3E2DA;
    --mkj-titre: 'Marcellus', Georgia, serif;
    --mkj-corps: 'Plus Jakarta Sans', system-ui, sans-serif;
    --mkj-colonne: 1102px;
    --mkj-pad-x: clamp(20px, 5vw, 60px);
    display: block;
    padding: 170px var(--mkj-pad-x) 150px;   /* 170px : place pour le header */
    color: var(--mkj-fonce);
}

/* ---------- En-tête ---------- */
.mkj-article__entete {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.mkj-article__entete > * { margin: 0; }
.mkj-fleur { display: block; width: 63px; height: auto; margin-bottom: 22px !important; }
.mkj-badge--lien { text-decoration: none; transition: background-color .2s, color .2s; }
.mkj-badge--lien:hover { background: var(--mkj-brun); color: #FFF3EF; }
.mkj-badge--lien:focus-visible { outline: 2px solid var(--mkj-cta); outline-offset: 2px; }
.mkj-article__titre {
    margin-top: 26px !important;
    font-family: var(--mkj-titre);
    font-weight: 400;
    font-size: clamp(34px, 4.2vw, 58px);
    line-height: 1.18;
    color: var(--mkj-fonce);
    text-wrap: balance;
}
.mkj-article__meta {
    margin-top: 22px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 26px;
    font-family: var(--mkj-titre);
    font-size: 19px;
    line-height: 1.4;
    color: var(--mkj-brun);
}
.mkj-article__lecture { position: relative; }
.mkj-article__lecture::before {        /* petit pétale entre la date et le temps de lecture */
    content: "";
    position: absolute;
    left: -18px; top: 50%;
    width: 9px; height: 12px;
    transform: translateY(-50%) rotate(-20deg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cpath d='M5.6 1.1C-1.3 7.5 5.2 16.9 9.2 20.7 19.5 9.9 16 3.2 12.8 1.2c-1.4.4-3 3.2-3.6 4.5C8.7 3.7 6.5 1.7 5.6 1.1Z' fill='%23FCA6C2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Photo ---------- */
.mkj-article__photo {
    max-width: 1102px;
    margin: 70px auto 0;
    border-radius: 40px;
    overflow: hidden;
    aspect-ratio: 1102 / 580;
    background: var(--mkj-sable);
}
.mkj-article__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Texte (blocs Gutenberg d'Emma) ---------- */
.mkj-article__texte {
    max-width: var(--mkj-colonne);
    margin: 80px auto 0;
    font-family: var(--mkj-corps);
    font-weight: 300;
    font-size: 17px;
    line-height: 30px;
    color: var(--mkj-fonce);
}
.mkj-article__texte > * { margin: 0 0 24px; max-width: 100%; }
.mkj-article__texte > *:last-child { margin-bottom: 0; }

/* Premier paragraphe = chapô, un peu plus grand */
.mkj-article__texte > p:first-child {
    font-size: 20px;
    line-height: 34px;
    color: var(--mkj-brun);
    margin-bottom: 40px;
}
.mkj-article__texte strong, .mkj-article__texte b { font-weight: 600; }

.mkj-article__texte h2,
.mkj-article__texte h3,
.mkj-article__texte h4 {
    font-family: var(--mkj-titre);
    font-weight: 400;
    color: var(--mkj-fonce);
}
.mkj-article__texte h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.25; margin: 64px 0 20px; }
.mkj-article__texte h3 { font-size: 25px; line-height: 1.3; margin: 44px 0 14px; color: var(--mkj-brun); }
.mkj-article__texte h4 { font-size: 20px; line-height: 1.35; margin: 32px 0 10px; }

.mkj-article__texte a {
    color: var(--mkj-cta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.mkj-article__texte a:hover { color: var(--mkj-cta-hover); text-decoration-thickness: 2px; }
.mkj-article__texte a:focus-visible { outline: 2px solid var(--mkj-cta); outline-offset: 2px; border-radius: 2px; }

/* Listes : puces en pétales roses */
.mkj-article__texte ul { list-style: none; padding-left: 0; }
.mkj-article__texte ul li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.mkj-article__texte ul li::before {
    content: "";
    position: absolute;
    left: 4px; top: 8px;
    width: 11px; height: 15px;
    transform: rotate(-20deg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cpath d='M5.6 1.1C-1.3 7.5 5.2 16.9 9.2 20.7 19.5 9.9 16 3.2 12.8 1.2c-1.4.4-3 3.2-3.6 4.5C8.7 3.7 6.5 1.7 5.6 1.1Z' fill='%23FCA6C2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mkj-article__texte ol { padding-left: 0; list-style: none; counter-reset: mkj-ol; }
.mkj-article__texte ol li { position: relative; padding-left: 40px; margin-bottom: 12px; counter-increment: mkj-ol; }
.mkj-article__texte ol li::before {
    content: counter(mkj-ol);
    position: absolute;
    left: 0; top: 1px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--mkj-rose-pale);
    color: var(--mkj-cta);
    font-family: var(--mkj-titre);
    font-size: 16px;
    line-height: 28px;
    text-align: center;
}
.mkj-article__texte li > ul, .mkj-article__texte li > ol { margin-top: 10px; }

/* Citation : grande guillemet rose, texte en Marcellus */
.mkj-article__texte .wp-block-quote,
.mkj-article__texte blockquote {
    position: relative;
    margin: 56px 0 !important;
    padding: 40px 44px 36px;
    border: 0;
    border-radius: 30px;
    background: var(--mkj-rose-pale);
}
.mkj-article__texte blockquote::before {
    content: "“";
    position: absolute;
    top: -28px; left: 34px;
    font-family: var(--mkj-titre);
    font-size: 110px;
    line-height: 1;
    color: var(--mkj-rose);
}
.mkj-article__texte blockquote p {
    margin: 0 0 12px;
    font-family: var(--mkj-titre);
    font-size: 23px;
    line-height: 1.5;
    color: var(--mkj-fonce);
}
.mkj-article__texte blockquote cite,
.mkj-article__texte blockquote .wp-block-quote__citation {
    display: block;
    margin-top: 8px;
    font-family: var(--mkj-corps);
    font-style: normal;
    font-size: 15px;
    color: var(--mkj-brun);
}

/* Images et galeries : arrondies comme partout sur le site */
.mkj-article__texte .wp-block-image,
.mkj-article__texte .wp-block-gallery { margin: 48px 0 !important; }
.mkj-article__texte .wp-block-image img,
.mkj-article__texte .wp-block-gallery img { border-radius: 24px; height: auto; }
.mkj-article__texte .wp-block-image.alignwide,
.mkj-article__texte .wp-block-gallery.alignwide {
    width: min(1102px, calc(100vw - 2 * var(--mkj-pad-x)));
    max-width: none;
    margin-left: 50% !important;
    transform: translateX(-50%);
}
.mkj-article__texte figcaption,
.mkj-article__texte .wp-element-caption {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mkj-brun);
    text-align: center;
}
.mkj-article__texte .wp-block-embed iframe { width: 100%; border-radius: 24px; }

/* Séparateur : remplacé par la fleur */
.mkj-article__texte hr,
.mkj-article__texte .wp-block-separator {
    border: 0 !important;
    height: 26px;
    margin: 56px auto !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 45'%3E%3Cpath d='M27.59 3.76C18.27 12.38 27 25.07 32.4 30.18 46.3 15.68 41.53 6.62 37.28 3.96c-1.85.53-4.05 4.33-4.8 6.12-.66-2.71-3.62-5.45-4.89-6.32Z' fill='%23FCA6C2'/%3E%3Cpath d='M58.35 19.99C47.53 13.31 37.63 25.09 34.15 31.65 51.87 41.17 59.32 34.17 60.75 29.37c-1-1.64-5.27-2.75-7.19-3 2.44-1.35 4.29-4.94 4.79-6.38Z' fill='%23FCA6C2'/%3E%3Cpath d='M3.59 29.96C9.74 41.07 24.17 35.67 30.42 31.67 19.65 14.69 9.71 17.13 6.11 20.6c.07 1.92 3.24 4.98 4.8 6.14-2.8-.02-6.17 2.2-7.31 3.21Z' fill='%23FCA6C2'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 1;
}

/* Tableau (au cas où) */
.mkj-article__texte table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mkj-article__texte th, .mkj-article__texte td { padding: 12px 14px; border-bottom: 1px solid var(--mkj-sable); text-align: left; }
.mkj-article__texte th { font-weight: 600; color: var(--mkj-brun); }

/* Bouton Gutenberg dans un article */
.mkj-article__texte .wp-block-button__link {
    background: var(--mkj-cta);
    color: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
}
.mkj-article__texte .wp-block-button__link:hover { background: var(--mkj-cta-hover); color: #fff; }

/* ---------- Pied d'article ---------- */
.mkj-article__pied {
    max-width: var(--mkj-colonne);
    margin: 90px auto 0;
    padding-top: 50px;
    border-top: 1px solid var(--mkj-sable);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.mkj-article__pied > * { margin: 0; }
.mkj-fleur--petite { width: 42px; margin-bottom: 14px !important; }
.mkj-article__signature {
    font-family: var(--mkj-titre);
    font-size: 22px;
    color: var(--mkj-brun);
}
.mkj-bouton--contour {
    margin-top: 28px !important;
    background: transparent;
    color: var(--mkj-cta) !important;
    border: 1px solid var(--mkj-cta);
    min-height: 44px;
}
.mkj-bouton--contour:hover { background: var(--mkj-cta); color: #fff !important; }

/* ---------- À lire aussi ---------- */
.mkj-suite {
    max-width: 1102px;
    margin: 140px auto 0;
}
.mkj-suite__titre {
    margin: 0 0 60px;
    text-align: center;
    font-family: var(--mkj-titre);
    font-weight: 400;
    font-size: clamp(32px, 3.2vw, 44px);
    line-height: 1.26;
    color: var(--mkj-fonce);
}

@media (max-width: 780px) {
    .mkj-article-page { padding-top: 130px; padding-bottom: 100px; }
    .mkj-article__photo { margin-top: 44px; border-radius: 28px; aspect-ratio: 4 / 3; }
    .mkj-article__texte { margin-top: 48px; font-size: 16px; line-height: 28px; }
    .mkj-article__texte > p:first-child { font-size: 18px; line-height: 30px; }
    .mkj-article__texte h2 { margin-top: 48px; }
    .mkj-article__texte blockquote { padding: 34px 24px 26px; }
    .mkj-article__texte blockquote p { font-size: 20px; }
    .mkj-article__pied { margin-top: 64px; }
    .mkj-suite { margin-top: 90px; }
    .mkj-suite__titre { margin-bottom: 40px; }
}