/* ===================================================
   Om Karyann — pages.css
   Styles des templates de pages internes
   =================================================== */

/* ===== TEMPLATE PAGE MASSAGE ===== */

.ok-massage-hero__img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    display: block;
}

.ok-massage-infos {
    margin: 32px 0;
    padding: 28px 32px;
    background: var(--ok-linen-warm, #F3E9DD);
    border-radius: 16px;
    border-left: 3px solid var(--ok-gold-accent, #A07D58);
}

.ok-massage-infos__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.ok-massage-infos__price {
    font-family: 'Marcellus', 'Marcellus', Georgia, serif;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 500;
    color: var(--ok-earth-600, #6B4F6E);
    line-height: 1;
}

.ok-massage-infos__duration {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ok-text-muted, #8C7F74);
    font-weight: 600;
}

.ok-massage-infos__short {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ok-text-secondary, #5A4D5C);
    margin: 0;
}

.ok-massage-infos__mention {
    font-size: 13px;
    color: var(--ok-text-muted, #8C7F74);
    margin-top: 12px;
    margin-bottom: 0;
}

/* ===== TEMPLATE PAGE STAGE ===== */

.ok-stage-hero {
    position: relative;
}

.ok-stage-infos {
    margin: 28px 0;
}

.ok-stage-infos__subtitle {
    font-family: 'Marcellus', 'Marcellus', Georgia, serif;
    font-size: clamp(18px, 1.6vw, 22px);
    font-style: italic;
    color: var(--ok-text-secondary, #5A4D5C);
    margin-bottom: 20px;
}

.ok-stage-infos__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.ok-stage-infos__objectifs {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ok-text-secondary, #5A4D5C);
}

.ok-stage-infos__objectifs ul {
    padding-left: 24px;
}

.ok-stage-infos__objectifs li {
    margin-bottom: 8px;
}

.ok-stage-infos__prerequis {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--ok-linen-bg, #FBF7F2);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ok-text-secondary, #5A4D5C);
}

/* ===== BREADCRUMB ===== */

/* Spécificité renforcée pour battre la règle WP :root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 } */
nav.ok-breadcrumb.wp-block-breadcrumbs,
.wp-site-blocks .ok-breadcrumb {
    margin-top: 48px !important;
    margin-bottom: 32px !important;
}

.wp-block-breadcrumbs {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: var(--ok-text-muted, #8C7F74);
}

.wp-block-breadcrumbs a {
    color: var(--ok-sage-600, #5C3F6E);
    text-decoration: none;
}

.wp-block-breadcrumbs a:hover {
    text-decoration: underline;
}

.ok-breadcrumb__sep {
    margin: 0 8px;
    color: var(--ok-text-muted, #8C7F74);
}

.ok-breadcrumb [aria-current="page"] {
    color: var(--ok-text-secondary, #5A4D5C);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .ok-massage-hero__img {
        aspect-ratio: 4 / 3;
    }

    .ok-massage-infos {
        padding: 20px;
    }

    .ok-massage-infos__price {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ok-massage-infos,
    .ok-stage-infos {
        transition: none;
    }
}

/* ===== CTA INLINE (fiches massage/stage) ===== */

.ok-cta-inline .ok-btn--primary:hover {
    background: var(--ok-sage-700, #3E5A30);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(125, 87, 144, 0.25);
}

.ok-cta-inline a[href^="tel"] {
    font-weight: 600;
}

@media (max-width: 768px) {
    .ok-cta-inline .ok-btn--primary {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* ===== BARRE REASSURANCE INLINE ===== */

.ok-trust-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding: 16px 24px;
    background: var(--ok-linen-warm);
    border: 1px solid var(--ok-cream-border);
    border-radius: 12px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ok-text-secondary);
}

.ok-trust-inline svg {
    color: var(--ok-sage-600);
}

@media (max-width: 768px) {
    .ok-trust-inline {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ===== INFOS PRATIQUES (massages et stages) ===== */

.ok-pratique-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

.ok-pratique-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ok-text-secondary, #5A4D5C);
}

.ok-pratique-item svg {
    flex-shrink: 0;
    color: var(--ok-sage-600, #5C3F6E);
    margin-top: 2px;
}

.ok-pratique-item a {
    color: var(--ok-sage-600, #5C3F6E);
    text-decoration: none;
}

.ok-pratique-item a:hover {
    text-decoration: underline;
}

/* ===== SECTION RELATED MASSAGES ===== */

.ok-section--related .ok-card--massage {
    height: 100%;
}

/* ===== RESPONSIVE TEMPLATES FORMATIONS ===== */

@media (max-width: 768px) {
    .ok-stage-hero {
        padding-top: 48px;
    }

    .ok-pratique-grid {
        gap: 16px;
    }
}

/* ===== TEMPLATE SINGLE BLOG ===== */

.ok-post-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ok-post-meta__cat a,
.wp-block-post-terms a {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ok-sage-600, #5C3F6E);
    text-decoration: none;
    background: var(--ok-sage-light, #EFE5F2);
    padding: 4px 10px;
    border-radius: 999px;
}

.ok-post-meta__date,
.wp-block-post-date {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: var(--ok-text-muted, #8C7F74);
}

.ok-post-meta__sep {
    color: var(--ok-text-muted, #8C7F74);
}

.ok-post-tags a {
    color: var(--ok-text-muted, #8C7F74);
    text-decoration: none;
    font-size: 13px;
}

.ok-post-tags a:hover {
    color: var(--ok-sage-600, #5C3F6E);
}

.ok-post-separator {
    border-color: var(--ok-cream-border, #E5D8C4) !important;
}

/* ===== TEMPLATE ARCHIVE BLOG ===== */

.ok-section--archive-hero {
    text-align: center;
}

.ok-card--blog {
    background: white;
    box-shadow: var(--ok-shadow-card, 0 2px 20px rgba(43,31,24,.06));
    transition: var(--ok-transition-card);
}

.ok-card--blog:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(43,31,24,.12);
}

/* ═══════════════════════════════════════════════════════════
   ARTICLE (single) — hero + cartes "articles similaires"
   Refonte 2026-06-29 : image hero pleine hauteur (~1070px sur grand écran)
   et cartes similaires démesurément hautes (image non contrainte, 2x la largeur).
   ═══════════════════════════════════════════════════════════ */

/* Image mise en avant du haut d'article : bannière pleine largeur mais de hauteur
   maîtrisée (était en 16/9 pleine largeur = viewport entier). */
.ok-post-hero {
    margin: 0 !important;
    overflow: hidden;                        /* le border-radius bas clippe l'image */
    aspect-ratio: auto !important;           /* annule le 16/9 (posé sur la figure) qui faisait ~1070px */
    height: clamp(240px, 42vh, 460px) !important;
}
.ok-post-hero img {
    width: 100%;
    height: 100%;                            /* remplit la figure (déjà en inline) */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Cartes "Continuer la lecture" : image contrainte à la largeur de carte en 16/9,
   cartes de hauteur égalisée, corps aéré mais compact. */
.ok-card--blog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.ok-card--blog .wp-block-post-featured-image {
    margin: 0;
    width: 100%;
}
.ok-card--blog .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 16px 16px 0 0;
}
.ok-card--blog .ok-card__body {
    flex: 1;
    gap: 6px;
}

/* Grilles d'articles (query/post-template : "articles similaires", archive blog) :
   WP fixe 3 colonnes (columnCount) SANS stacking responsive → cartes de ~110px sur
   mobile. On empile : 2 colonnes ≤900px, 1 colonne ≤600px. */
@media (max-width: 900px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

.ok-pagination {
    justify-content: center;
}

.wp-block-query-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.wp-block-query-pagination a,
.wp-block-query-pagination span {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--ok-cream-border, #E5D8C4);
    color: var(--ok-text-secondary, #5A4D5C);
    text-decoration: none;
    transition: all 0.2s;
}

.wp-block-query-pagination a:hover {
    border-color: var(--ok-sage-primary, #7D5790);
    color: var(--ok-sage-primary, #7D5790);
}

.wp-block-query-pagination .current {
    background: var(--ok-sage-primary, #7D5790);
    border-color: var(--ok-sage-primary, #7D5790);
    color: white;
}

/* ===== TEMPLATE CONTACT ===== */

.ok-contact-infos {
    padding: 0;
}

.ok-contact-infos__title {
    font-family: 'Marcellus', 'Marcellus', Georgia, serif;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 500;
    color: var(--ok-text-primary, #2A2230);
    margin-bottom: 8px;
}

.ok-contact-infos__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ok-text-muted, #8C7F74);
    margin-bottom: 40px;
    line-height: 1.5;
}

.ok-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ok-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ok-text-secondary, #5A4D5C);
}

.ok-contact-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ok-sage-light, #EFE5F2);
    border-radius: 50%;
    color: var(--ok-sage-600, #5C3F6E);
}

.ok-contact-item a {
    color: var(--ok-sage-600, #5C3F6E);
    text-decoration: none;
}

.ok-contact-item a:hover {
    text-decoration: underline;
}

.ok-contact-item small {
    color: var(--ok-text-muted, #8C7F74);
    font-size: 12px;
}

.ok-contact-form__title {
    font-family: 'Marcellus', 'Marcellus', Georgia, serif;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 500;
    color: var(--ok-text-primary, #2A2230);
    margin-bottom: 28px;
}

/* ===== RESPONSIVE TEMPLATES GÉNÉRIQUES ===== */

/* Tablette */
@media (max-width: 1024px) {
    .ok-massage-hero__img {
        aspect-ratio: 16 / 9;
    }

    .ok-massage-infos {
        padding: 24px 28px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .ok-section--contact-body .wp-block-columns {
        flex-direction: column;
    }

    .ok-section--contact-body .wp-block-column {
        flex-basis: 100% !important;
    }

    .ok-contact-infos {
        margin-bottom: 48px;
    }

    .wp-block-query-pagination a,
    .wp-block-query-pagination span {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Stage/massage templates : boutons pleine largeur */
    .ok-massage-infos .wp-block-button__link,
    .ok-stage-infos .wp-block-button__link {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Stage meta : empiler */
    .ok-stage-infos__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ok-card--blog {
        transition: none;
    }
}

/* ===== CTA STICKY MOBILE ===== */
.ok-cta-sticky {
    display: none;
}

@media (max-width: 768px) {
    .ok-cta-sticky {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: white;
        border-top: 1px solid var(--ok-cream-border, #E5D8C4);
        padding: 12px 16px;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 -4px 20px rgba(43, 36, 32, 0.08);
    }

    .ok-cta-sticky__price {
        font-family: 'Marcellus', 'Marcellus', serif;
        font-size: 22px;
        font-weight: 600;
        color: var(--ok-earth-600, #6B4F6E);
        line-height: 1;
    }

    .ok-cta-sticky__price small {
        display: block;
        font-family: 'Jost', sans-serif;
        font-size: 11px;
        font-weight: 600;
        color: var(--ok-text-muted, #8B7E8B);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .ok-cta-sticky__btn {
        display: inline-block;
        padding: 14px 28px;
        border-radius: 999px;
        background: var(--ok-sage-600);
        color: var(--ok-white);
        font-family: 'Jost', sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        flex-shrink: 0;
    }

    /* Padding en bas du body pour ne pas masquer le contenu */
    body:has(.ok-cta-sticky) {
        padding-bottom: 72px;
    }
}

/* ═══════════════════════════════════════════
   PAGE MASSAGE — RICH ACF CONTENT
   ═══════════════════════════════════════════ */

.ok-massage-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
}

/* ── Hero : badge + sous-titre + CTA box ── */
.ok-massage-hero {
    margin: 32px 0;
}

.ok-massage-hero .ok-badge {
    margin-bottom: 12px;
}

.ok-massage-hero__subtitle {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(18px, 1.6vw, 22px);
    font-style: italic;
    color: var(--ok-text-secondary, #5A4D5C);
    margin-bottom: 24px;
}

.ok-massage-hero__cta-box {
    background: white;
    border: 1px solid var(--ok-cream-border, #E5D8C4);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 2px 20px rgba(43, 31, 24, 0.06);
    text-align: center;
}

.ok-massage-hero__cta-box h2 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--ok-text-primary, #2A2230);
    margin: 0 0 8px;
}

.ok-massage-hero__cta-box > p {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ok-text-secondary, #5A4D5C);
    margin: 0 0 20px;
}

.ok-massage-hero__tel {
    display: block;
    font-size: 13px;
    color: var(--ok-text-muted, #8B7E8B);
    margin-top: 12px;
}

.ok-massage-hero__tel a {
    color: var(--ok-sage-primary, #7D5790);
}

/* ── Stats grille ── */
.ok-massage-stats {
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
    padding: 32px;
    background: var(--ok-linen-warm, #F3E9DD);
    border-radius: 16px;
}

.ok-massage-stat {
    text-align: center;
    flex: 1;
}

.ok-massage-stat__value {
    display: block;
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 500;
    color: var(--ok-gold-accent, #A07D58);
    line-height: 1;
    margin-bottom: 6px;
}

.ok-massage-stat__label {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ok-text-muted, #8B7E8B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Citation / étymologie ── */
.ok-massage-citation {
    border-left: 3px solid var(--ok-gold-accent, #A07D58);
    padding: 20px 24px;
    margin: 32px 0;
    background: var(--ok-sage-light, #EFE5F2);
    border-radius: 0 12px 12px 0;
}

.ok-massage-citation p {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-style: italic;
    font-size: clamp(16px, 1.4vw, 18px);
    color: var(--ok-text-secondary, #5A4D5C);
    line-height: 1.6;
    margin: 0;
}

/* ── Sections génériques ── */
.ok-massage-section {
    margin: 48px 0;
}

.ok-massage-section h2 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 300;
    color: var(--ok-text-primary, #2A2230);
    margin-bottom: 20px;
}

.ok-massage-section p,
.ok-massage-section li {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ok-text-secondary, #5A4D5C);
}

.ok-massage-section--highlight {
    background: var(--ok-linen-warm, #F3E9DD);
    padding: 32px;
    border-radius: 16px;
}

/* ── Bienfaits — grille 3 colonnes ── */
.ok-massage-bienfaits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.ok-massage-bienfait {
    background: white;
    border: 1px solid var(--ok-cream-border, #E5D8C4);
    border-radius: 16px;
    padding: 24px;
    transition: var(--ok-transition-card);
}

.ok-massage-bienfait:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(43, 31, 24, 0.08);
}

.ok-massage-bienfait__icon {
    margin-bottom: 12px;
    color: var(--ok-sage-primary, #7D5790);
}

.ok-massage-bienfait h3 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--ok-text-primary, #2A2230);
    margin-bottom: 12px;
}

.ok-massage-bienfait p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ok-text-secondary, #5A4D5C);
    margin: 0;
}

/* ── Contre-indications warning ── */
.ok-massage-warning {
    border-left: 3px solid var(--ok-terra-accent, #B07A8A);
    background: var(--ok-terra-light, #F2E5EA);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin-top: 20px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ok-text-secondary, #5A4D5C);
}

/* ── FAQ accordéon ── */
.ok-massage-faq {
    margin: 48px 0;
}

.ok-massage-faq h2 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 300;
    margin-bottom: 24px;
}

.ok-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ok-faq-item {
    border: 1px solid var(--ok-cream-border, #E5D8C4);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.ok-faq-item:hover {
    border-color: var(--ok-sage-100, #E0D2E6);
}

.ok-faq-item summary {
    padding: 16px 20px;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--ok-text-primary, #2A2230);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.ok-faq-item summary::-webkit-details-marker {
    display: none;
}

.ok-faq-item summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: var(--ok-sage-primary, #7D5790);
    flex-shrink: 0;
    transition: transform 0.3s;
}

.ok-faq-item[open] summary::after {
    content: '−';
}

.ok-faq-item[open] summary {
    border-bottom: 1px solid var(--ok-cream-border, #E5D8C4);
}

.ok-faq-item p {
    padding: 16px 20px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ok-text-secondary, #5A4D5C);
    line-height: 1.7;
    margin: 0;
}

/* ── Infos pratiques ── */
.ok-massage-pratique {
    margin: 48px 0;
    padding: 32px;
    background: var(--ok-linen-bg, #FBF7F2);
    border-radius: 16px;
}

.ok-massage-pratique h2 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 300;
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════
   PAGE STAGE — RICH ACF CONTENT
   ═══════════════════════════════════════════ */

.ok-stage-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
}

/* ── Stage icon ── */
.ok-stage-page__icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: 32px;
    font-weight: 500;
    color: white;
    margin-bottom: 16px;
}

/* ── Prochaines dates ── */
.ok-stage-dates-section {
    margin: 48px 0;
}

.ok-stage-dates-section h2 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 300;
    margin-bottom: 24px;
}

.ok-stage-dates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.ok-stage-date-card {
    background: white;
    border: 1px solid var(--ok-cream-border, #E5D8C4);
    border-radius: 12px;
    padding: 20px;
    transition: var(--ok-transition-card);
}

.ok-stage-date-card:hover {
    border-color: var(--ok-sage-100, #E0D2E6);
    box-shadow: 0 4px 16px rgba(43, 31, 24, 0.06);
}

.ok-stage-date-card__date {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--ok-sage-primary, #7D5790);
    margin-bottom: 4px;
}

.ok-stage-date-card__lieu {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ok-text-secondary, #5A4D5C);
    margin-bottom: 8px;
}

.ok-stage-date-card__places {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ok-terra-accent, #B07A8A);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Objectifs du stage ── */
.ok-stage-objectifs {
    margin: 32px 0;
}

.ok-stage-objectifs ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ok-stage-objectifs li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ok-text-secondary, #5A4D5C);
}

.ok-stage-objectifs li::before {
    content: '✦';
    color: var(--ok-gold-accent, #A07D58);
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 4px;
}

/* ── Prérequis warning ── */
.ok-stage-prerequis {
    border-left: 3px solid var(--ok-gold-accent, #A07D58);
    background: var(--ok-gold-light, #F5E8D5);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 24px 0;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ok-text-secondary, #5A4D5C);
}

/* ── Sections stage réutilisant les classes massage ── */
.ok-stage-page .ok-massage-section,
.ok-stage-page .ok-massage-faq,
.ok-stage-page .ok-massage-pratique,
.ok-stage-page .ok-massage-stats,
.ok-stage-page .ok-massage-hero__cta-box,
.ok-stage-page .ok-massage-hero__subtitle {
    /* Les classes massage sont réutilisées — pas de redéfinition nécessaire */
}

.ok-stage-page .ok-stage-objectifs h2 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 300;
    margin-bottom: 20px;
}

/* ═══════════════════════════════════════════
   LAYOUT SEKHEM-STYLE — HERO SPLIT
   ═══════════════════════════════════════════ */

/* ── Hero Split 2 colonnes ── */
.ok-massage-hero-split {
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: 48px;
    align-items: start;
    margin: 24px 0 64px;
}

.ok-massage-hero-split__img {
    position: relative;
}

.ok-massage-hero-split__img img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

.ok-massage-hero-split__content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 8px;
}

.ok-massage-hero-split__content h1,
.ok-massage-hero-split__title {
    margin-top: 8px;
    margin-bottom: 20px;
}

.ok-massage-hero-split__content .ok-badge {
    align-self: flex-start;
    margin-bottom: 12px;
}

.ok-massage-hero-split__eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ok-sage-primary, #7D5790);
    margin: 0 0 8px;
}

.ok-massage-hero-split__subtitle {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(18px, 1.6vw, 22px);
    color: var(--ok-text-secondary, #5A4D5C);
    margin: 0 0 20px;
    line-height: 1.4;
}

.ok-massage-hero-split__content .ok-gold-separator {
    margin: 0 0 20px;
}

.ok-massage-hero-split__desc {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ok-text-secondary, #5A4D5C);
    margin: 0 0 24px;
}

/* ── Stats inline avec borders ── */
.ok-massage-stats-inline {
    display: flex;
    gap: 0;
    margin: 0 0 28px;
    border-top: 1px solid var(--ok-cream-border, #E5D8C4);
    border-bottom: 1px solid var(--ok-cream-border, #E5D8C4);
    padding: 20px 0;
}

.ok-massage-stat-item {
    flex: 1;
    text-align: center;
    position: relative;
}

.ok-massage-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--ok-cream-border, #E5D8C4);
}

.ok-massage-stat-item__val {
    display: block;
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 500;
    color: var(--ok-gold-accent, #A07D58);
    line-height: 1;
    margin-bottom: 4px;
}

.ok-massage-stat-item__label {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ok-text-muted, #8B7E8B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── CTA dans hero ── */
.ok-massage-hero-split__content .ok-btn--gold,
.ok-massage-hero-split__content .ok-btn--primary {
    align-self: flex-start;
}

.ok-massage-hero-split__phone {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: var(--ok-text-muted, #8B7E8B);
    margin-top: 12px;
}

.ok-massage-hero-split__phone a {
    color: var(--ok-sage-primary, #7D5790);
}

/* ── Trust mini dans hero ── */
.ok-massage-hero-split__content .ok-trust-inline-mini {
    justify-content: flex-start;
    margin-top: 16px;
    gap: 16px;
    font-size: 12px;
}

/* ═══════════════════════════════════════════
   SECTION SOMBRE — DÉROULEMENT
   ═══════════════════════════════════════════ */

.ok-massage-dark-section {
    background: var(--ok-section-dark, #4E3C57);
    border-radius: 28px;
    padding: clamp(40px, 6vw, 80px);
    position: relative;
    overflow: hidden;
    margin: 48px 0;
    color: white;
}

.ok-massage-dark-section__glows {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ok-massage-dark-section__glow {
    position: absolute;
    border-radius: 50%;
}

.ok-massage-dark-section__glow--1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(160, 125, 88, 0.08), transparent 70%);
    top: -150px;
    right: -100px;
}

.ok-massage-dark-section__glow--2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(125, 87, 144, 0.06), transparent 70%);
    bottom: -80px;
    left: -50px;
}

.ok-massage-dark-section__inner {
    position: relative;
    z-index: 1;
}

.ok-massage-dark-section h2 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 300;
    color: white;
    margin-bottom: 16px;
}

.ok-massage-dark-section .ok-gold-separator {
    background: var(--ok-gold-accent, #A07D58);
    margin-bottom: 28px;
}

.ok-massage-dark-section .ok-gold-separator::after {
    background: var(--ok-gold-accent, #A07D58);
}

.ok-massage-dark-section__text {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.75;
}

.ok-massage-dark-section__text p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 16px;
}

.ok-massage-dark-section :focus-visible {
    outline-color: var(--ok-gold-accent, #A07D58);
}

/* Sekhem — historique & témoignages injectés dans la dark section */
.ok-massage-dark-section__text h3 {
    font-family: 'Marcellus', serif;
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 400;
    color: var(--ok-gold-accent, #C9A96E);
    letter-spacing: 0.02em;
    margin: 40px 0 16px;
}

.ok-massage-dark-section__text h3:first-child {
    margin-top: 0;
}

.ok-massage-dark-section__text blockquote {
    border-left: 3px solid var(--ok-gold-accent, #C9A96E);
    padding: 12px 20px;
    margin: 20px 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
}

.ok-massage-dark-section__text blockquote cite {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-style: normal;
    color: var(--ok-gold-accent, #C9A96E);
    letter-spacing: 0.03em;
}

.ok-massage-dark-section__text strong {
    color: #FFF;
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   BIENFAITS SECTION (fond linen-warm)
   ═══════════════════════════════════════════ */

.ok-massage-bienfaits-section {
    background: var(--ok-linen-warm, #F3E9DD);
    border-radius: 20px;
    padding: 40px;
    margin: 48px 0;
}

.ok-massage-bienfaits-section h2 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 300;
    color: var(--ok-text-primary, #2A2230);
    margin-bottom: 28px;
}

/* ── CTA inline amélioré ── */
.ok-cta-inline {
    margin: 48px 0;
    padding: 32px;
    background: var(--ok-sage-light, #EFE5F2);
    border-radius: 16px;
    text-align: center;
}

.ok-cta-inline__title {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 500;
    color: var(--ok-text-primary, #2A2230);
    margin: 0 0 16px;
}

.ok-cta-inline__phone {
    display: block;
    font-size: 13px;
    color: var(--ok-text-muted, #8B7E8B);
    margin-top: 12px;
}

.ok-cta-inline__phone a {
    color: var(--ok-sage-primary, #7D5790);
}

/* ── Stage icon overlay sur hero image ── */
.ok-stage-icon-overlay {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: 24px;
    font-weight: 500;
    color: white;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════
   RESPONSIVE — LAYOUT SEKHEM
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .ok-massage-hero-split {
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .ok-massage-hero-split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ok-massage-hero-split__img img {
        aspect-ratio: 16 / 10;
        border-radius: 20px;
    }

    .ok-massage-hero-split__content .ok-btn--gold,
    .ok-massage-hero-split__content .ok-btn--primary {
        align-self: stretch;
        text-align: center;
        display: block;
    }

    .ok-massage-hero-split__content .ok-trust-inline-mini {
        justify-content: center;
    }

    .ok-massage-stats-inline {
        flex-direction: column;
        gap: 16px;
        padding: 16px 0;
    }

    .ok-massage-stat-item:not(:last-child)::after {
        display: none;
    }

    .ok-massage-stat-item {
        padding: 8px 0;
        border-bottom: 1px solid var(--ok-cream-border, #E5D8C4);
    }

    .ok-massage-stat-item:last-child {
        border-bottom: none;
    }

    .ok-massage-dark-section {
        border-radius: 20px;
        padding: 32px 24px;
    }

    .ok-massage-bienfaits-section {
        padding: 28px;
        border-radius: 16px;
    }

    .ok-cta-inline {
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ok-massage-dark-section__glow {
        display: none;
    }
}

/* ── Bouton small ── */
.ok-btn--small {
    padding: 10px 20px !important;
    font-size: 13px !important;
    display: inline-block;
    text-decoration: none;
}

/* ── Dates section fond ── */
.ok-stage-dates-section {
    background: var(--ok-linen-warm, #F3E9DD);
    padding: 32px;
    border-radius: 16px;
    margin: 48px 0;
}

/* ── Date card bouton inscription ── */
.ok-stage-date-card .ok-btn--gold {
    margin-top: 12px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — RICH CONTENT
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .ok-massage-bienfaits__grid {
        grid-template-columns: 1fr;
    }

    .ok-massage-stats {
        flex-direction: column;
        gap: 20px;
        padding: 24px;
    }

    .ok-massage-hero__cta-box {
        padding: 20px;
    }

    .ok-massage-section--highlight {
        padding: 24px;
    }

    .ok-massage-pratique {
        padding: 24px;
    }

    .ok-stage-dates {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ok-massage-bienfait,
    .ok-faq-item,
    .ok-stage-date-card {
        transition: none;
    }
}

/* ===== FORMULAIRE CONTACT NATIF ===== */
.ok-contact-form-native {
    font-family: 'Jost', sans-serif;
}

.ok-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ok-form-field--full {
    grid-column: 1 / -1;
}

.ok-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ok-text-secondary, #5A4D5C);
    margin-bottom: 6px;
}

.ok-form-field label span {
    color: var(--ok-terra-accent, #B07A8A);
}

.ok-form-field input,
.ok-form-field select,
.ok-form-field textarea {
    width: 100%;
    padding: 14px 20px;
    border: 1.5px solid var(--ok-cream-border, #E5D8C4);
    border-radius: 8px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ok-text-primary, #2A2230);
    background: white;
    transition: border-color 0.2s;
}

.ok-form-field input:focus,
.ok-form-field select:focus,
.ok-form-field textarea:focus {
    border-color: var(--ok-sage-primary, #7D5790);
    outline: none;
}

.ok-form-field input::placeholder,
.ok-form-field textarea::placeholder {
    color: var(--ok-text-muted, #8B7E8B);
}

@media (max-width: 768px) {
    .ok-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Focus visible clavier (l'outline:none ci-dessus est compensé par un anneau net) */
.ok-form-field input:focus-visible,
.ok-form-field select:focus-visible,
.ok-form-field textarea:focus-visible {
    outline: 2px solid var(--ok-sage-primary, #7D5790);
    outline-offset: 2px;
    border-color: var(--ok-sage-primary, #7D5790);
}
.ok-form-field input[aria-invalid="true"],
.ok-form-field textarea[aria-invalid="true"],
.ok-form-field select[aria-invalid="true"] {
    border-color: var(--ok-terra-accent, #B07A8A);
}

/* Honeypot anti-spam : hors flux, invisible, non focalisable au clavier */
.ok-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Bannières de retour (succès / erreur) */
.ok-form-alert {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 24px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}
.ok-form-alert--success {
    background: #EAF1E4;
    color: #3C5A2E;
    border: 1px solid #C3D8B2;
}
.ok-form-alert--error {
    background: #F6E9EC;
    color: #7A3B4A;
    border: 1px solid #E3C3CC;
}
.ok-form-alert a { color: inherit; text-decoration: underline; }

/* Case de consentement RGPD */
.ok-form-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ok-text-secondary, #5A4D5C);
    cursor: pointer;
}
.ok-form-consent input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--ok-sage-primary, #7D5790);
}
.ok-form-consent a { color: var(--ok-sage-primary, #7D5790); }

/* Bouton d'envoi centré */
.ok-form-submit {
    text-align: center;
    margin-top: 8px;
}
.ok-form-submit .ok-btn {
    cursor: pointer;
    border: none;
}

/* Note bas de formulaire (email / SMS) */
.ok-form-note {
    font-size: 12px;
    color: var(--ok-text-muted, #8B7E8B);
    text-align: center;
    margin-top: 18px;
    font-family: 'Jost', sans-serif;
}
.ok-form-note a { color: var(--ok-sage-primary, #7D5790); }

/* ===== TRUST BAR MINI INLINE ===== */
.ok-trust-inline-mini {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ok-text-muted, #8B7E8B);
    margin: 16px 0 0;
    padding: 0;
}

.ok-trust-inline-mini span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ok-trust-inline-mini {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════
   ARTICLE BLOG — LAYOUT ÉDITORIAL
   ═══════════════════════════════════════════ */

.ok-article-layout {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
}

/* ── Barre meta ── */
.ok-article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ok-article-meta__cat {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ok-sage-primary, #7D5790);
    text-decoration: none;
    background: var(--ok-sage-light, #EFE5F2);
    padding: 4px 12px;
    border-radius: 999px;
}

.ok-article-meta__cat:hover {
    background: var(--ok-sage-100, #E0D2E6);
}

.ok-article-meta__sep {
    color: var(--ok-text-muted, #8B7E8B);
}

.ok-article-meta__date,
.ok-article-meta__reading {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: var(--ok-text-muted, #8B7E8B);
}

.ok-article-meta__reading svg {
    color: var(--ok-sage-primary, #7D5790);
}

/* ── Titre H1 ──
   Les !important sont nécessaires pour battre la règle globale Sprint 2
   (`main h1 { font-family:italiana; font-size:clamp(3rem,6.5vw,5.5rem) !important }`)
   qui forçait sinon le titre d'article à l'échelle du H1 hero (88px = "énorme").
   Marcellus (au lieu d'Italiana) = plus lisible sur un titre multi-lignes et
   cohérent avec les titres du site ; Italiana reste réservé au H1 signature de la home. */
.ok-article-layout .ok-article-title {
    font-family: 'Marcellus', 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(30px, 4vw, 50px) !important;
    font-weight: 400 !important;
    line-height: 1.14 !important;
    letter-spacing: 0.005em;
    color: var(--ok-text-primary, #2A2230);
    margin: 0 0 20px;
}

.ok-article-layout > .ok-gold-separator {
    margin: 0 0 32px;
}

/* ── Chapeau / Introduction ── */
.ok-article-chapeau {
    border-left: 3px solid var(--ok-sage-primary, #7D5790);
    background: var(--ok-linen-warm, #F3E9DD);
    padding: 24px 28px;
    border-radius: 0 16px 16px 0;
    margin-bottom: 32px;
}

.ok-article-chapeau p {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(16px, 1.4vw, 18px);
    font-style: italic;
    line-height: 1.6;
    color: var(--ok-text-secondary, #5A4D5C);
    margin: 0;
}

/* ── Points clés — À retenir ── */
.ok-article-points-cles {
    background: var(--ok-sage-light, #EFE5F2);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 32px;
}

.ok-article-points-cles__title {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ok-sage-primary, #7D5790);
    margin: 0 0 16px;
}

.ok-article-points-cles__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ok-article-points-cles__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ok-text-secondary, #5A4D5C);
}

.ok-article-points-cles__list li::before {
    content: '✓';
    color: var(--ok-sage-primary, #7D5790);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Table des matières ── */
.ok-article-toc {
    border: 1px solid var(--ok-cream-border, #E5D8C4);
    border-radius: 12px;
    margin-bottom: 40px;
    overflow: hidden;
}

.ok-article-toc__summary {
    padding: 16px 20px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ok-text-primary, #2A2230);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ok-linen-bg, #FBF7F2);
}

.ok-article-toc__summary::-webkit-details-marker {
    display: none;
}

.ok-article-toc__summary::after {
    content: '▼';
    font-size: 10px;
    color: var(--ok-text-muted, #8B7E8B);
    transition: transform 0.3s;
}

.ok-article-toc__details[open] .ok-article-toc__summary::after {
    transform: rotate(180deg);
}

.ok-article-toc__list {
    padding: 16px 20px 20px 36px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ok-article-toc__list li {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.ok-article-toc__list li a {
    color: var(--ok-text-secondary, #5A4D5C);
    text-decoration: none;
    transition: color 0.2s;
}

.ok-article-toc__list li a:hover {
    color: var(--ok-sage-primary, #7D5790);
}

/* ── Contenu principal ── */
.ok-article-content {
    margin-bottom: 48px;
}

.ok-article-content p {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--ok-text-secondary, #5A4D5C);
    margin-bottom: 24px;
}

.ok-article-content h2 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 300;
    color: var(--ok-text-primary, #2A2230);
    margin: 48px 0 20px;
    padding-bottom: 12px;
    position: relative;
}

.ok-article-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--ok-gold-accent, #A07D58);
    border-radius: 2px;
}

.ok-article-content h3 {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    color: var(--ok-text-primary, #2A2230);
    margin: 32px 0 12px;
}

.ok-article-content blockquote {
    border-left: 3px solid var(--ok-sage-primary, #7D5790);
    background: var(--ok-sage-light, #EFE5F2);
    padding: 20px 24px;
    border-radius: 0 12px 12px 0;
    margin: 32px 0;
    font-style: italic;
}

.ok-article-content blockquote p {
    color: var(--ok-text-secondary, #5A4D5C);
    margin-bottom: 0;
}

.ok-article-content ul,
.ok-article-content ol {
    padding-left: 0;
    margin: 24px 0;
}

.ok-article-content ul {
    list-style: none;
}

.ok-article-content ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ok-text-secondary, #5A4D5C);
}

.ok-article-content ul li::before {
    content: '✦';
    color: var(--ok-gold-accent, #A07D58);
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 6px;
}

.ok-article-content a {
    color: var(--ok-sage-primary, #7D5790);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ok-article-content a:hover {
    color: var(--ok-sage-hover, #5C3F6E);
}

.ok-article-content img {
    border-radius: 16px;
    margin: 32px 0;
}

/* ── Citation mise en avant ── */
.ok-article-citation {
    text-align: center;
    padding: 48px 32px;
    margin: 48px 0;
    background: var(--ok-linen-warm, #F3E9DD);
    border-radius: 20px;
    position: relative;
}

.ok-article-citation__quote {
    display: block;
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: 64px;
    line-height: 0.6;
    color: var(--ok-gold-accent, #A07D58);
    margin-bottom: 16px;
}

.ok-article-citation p {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(20px, 2vw, 24px);
    font-style: italic;
    line-height: 1.5;
    color: var(--ok-text-secondary, #5A4D5C);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ── CTA contextuel ── */
.ok-article-cta {
    background: linear-gradient(135deg, var(--ok-sage-primary, #7D5790) 0%, var(--ok-sage-hover, #5C3F6E) 100%);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    margin: 48px 0;
    position: relative;
    overflow: hidden;
}

.ok-article-cta__label {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 8px;
}

.ok-article-cta__titre {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 300;
    color: white;
    margin: 0 0 24px;
    line-height: 1.3;
}

/* ── Conclusion ── */
.ok-article-conclusion {
    background: var(--ok-linen-warm, #F3E9DD);
    border-radius: 16px;
    padding: 32px;
    margin: 48px 0 32px;
}

.ok-article-conclusion p {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ok-text-secondary, #5A4D5C);
}

.ok-article-conclusion em {
    font-family: 'Marcellus', 'Marcellus', serif;
    font-size: 18px;
    color: var(--ok-gold-dark, #7C5E3F);
}

/* ── Tags ── */
.ok-article-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 32px 0;
}

.ok-article-tag {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ok-text-muted, #8B7E8B);
    text-decoration: none;
    padding: 4px 14px;
    border: 1px solid var(--ok-cream-border, #E5D8C4);
    border-radius: 999px;
    transition: all 0.2s;
}

.ok-article-tag:hover {
    border-color: var(--ok-sage-primary, #7D5790);
    color: var(--ok-sage-primary, #7D5790);
}

/* ── Responsive article ── */
@media (max-width: 768px) {
    .ok-article-chapeau {
        padding: 20px;
    }

    .ok-article-points-cles {
        padding: 20px 24px;
    }

    .ok-article-citation {
        padding: 32px 24px;
    }

    .ok-article-citation__quote {
        font-size: 48px;
    }

    .ok-article-cta {
        padding: 28px 24px;
    }

    .ok-article-conclusion {
        padding: 24px;
    }

    .ok-article-content h2 {
        margin-top: 36px;
    }
}