/* ===================================================
   Om Karyann — components.css
   Classes utilitaires pour remplacer les styles inline
   répétés dans patterns/*.php (Sprint 3 Lot A — 2026-06-19).
   =================================================== */

/* ===== CARTES MASSAGES / STAGES — IMAGE WRAP ===== */
/* Remplace: style="height:200px;border-radius:20px 20px 0 0;overflow:hidden;position:relative;" */
.ok-card__img-wrap {
    height: 200px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    position: relative;
}
.ok-card__img-wrap > img,
.ok-card__img-wrap .ok-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Placeholder (sans image featured) */
.ok-card__img-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ok-linen-warm), var(--ok-linen-deep));
    display: flex;
    align-items: center;
    justify-content: center;
}
.ok-card__img-fallback-label {
    font-family: 'Marcellus', serif;
    font-size: 16px;
    color: var(--ok-text-muted);
    font-style: italic;
}
/* Badge positionné en absolute top-left sur image */
.ok-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

/* ===== CARTES MASSAGES / STAGES — TITRE & EXCERPT ===== */
/* Remplace les inline `font-family:'Marcellus'…;font-size:20px;font-weight:500;margin:0 0 8px;` */
.ok-card__title {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 8px;
    line-height: 1.2;
}
.ok-card__title a {
    color: var(--ok-text-primary);
    text-decoration: none;
}
.ok-card__excerpt {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ok-text-secondary);
    margin: 0 0 16px;
}
.ok-card__excerpt--italic {
    font-style: italic;
}

/* ===== CARTE BOUTIQUE (section-boutique.php) ===== */
/* Remplace style="border-radius:20px;" inline + le wrap img inline */
.ok-card--boutique {
    border-radius: 20px;
}
.ok-boutique__img {
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.ok-boutique__img > img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.ok-card--boutique .ok-card__title {
    text-align: center;
    margin: 20px 20px 8px;
}
.ok-card--boutique .ok-card__body-text {
    text-align: center;
    font-size: 14px;
    color: var(--ok-text-secondary);
    padding: 0 20px;
    margin: 0 0 20px;
    line-height: 1.6;
}
.ok-card--boutique .wp-block-buttons {
    padding-bottom: 24px;
}

/* ===== TRUST INLINE — items SVG + texte ===== */
/* Remplace style="display:inline-flex;align-items:center;gap:8px;" répété 6× */
.ok-trust-inline__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ===== UTILITAIRES GÉNÉRIQUES ===== */
/* Bouton pill (border-radius:999px) — souvent inliné dans wp:button */
.ok-pill {
    border-radius: 999px !important;
}
/* Eyebrow centré (remplace style="text-align:center;" sur .ok-eyebrow) */
.ok-eyebrow--center {
    text-align: center;
}
/* Or accent en em ou span (remplace style="color:var(--ok-sage-600);font-weight:500;font-style:normal;") */
.ok-em-sage {
    color: var(--ok-sage-600);
    font-weight: 500;
    font-style: normal;
}
/* Séparateur or avec marge spécifique */
.ok-gold-separator--mt0 { margin-top: 0; }
.ok-gold-separator--mb-lg { margin-bottom: 48px; }
.ok-gold-separator--inline { margin: 24px auto; }

/* ===== HERO HOMEPAGE — visuels icons inline ===== */
/* Remplace style="background:var(--ok-sage-light);color:var(--ok-sage-600);" + variant gold */
.ok-hero__card-icon--sage {
    background: var(--ok-sage-light);
    color: var(--ok-sage-600);
}
.ok-hero__card-icon--gold {
    background: var(--ok-gold-light);
    color: var(--ok-gold-500);
}
/* Hero img placeholder fallback bg */
.ok-hero__img--placeholder {
    background: linear-gradient(135deg, var(--ok-linen-warm), var(--ok-linen-deep));
}
/* Hero img (avec featured image) — remplace style inline */
.ok-hero__img--cover {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 200px 200px 20px 20px;
    display: block;
}

/* ===== RELATED-MASSAGES — séparateur or avec margin-bottom 48px ===== */
/* déjà couvert par .ok-gold-separator--mb-lg */

/* ===== ALIGNEMENTS FINS — déjà fréquemment inlinés ===== */
.ok-mt-0 { margin-top: 0 !important; }
.ok-mb-0 { margin-bottom: 0 !important; }
.ok-text-center { text-align: center; }