/**
 * Pages éditoriales simples (template-page-simple.php).
 * Hero liquid glass MH + prose lisible + capsule footer contact.
 *
 * Enqueue conditionnel : is_page_template('templates/template-page-simple.php').
 * Préfixe .sfc-page-simple__* — sans interférence avec .sfc-legal__ ni .sfc-favorites-page__.
 */

.sfc-page-simple {
    background: var(--color-cream);
    color: var(--color-ink);
    overflow: hidden;
}

/* ============================================================================
 * HERO — gradient rose poudré + halos liquid glass
 * Plus compact que looks/favoris (page texte = pas besoin d'un hero monumental)
 * ============================================================================ */
.sfc-page-simple__hero {
    position: relative;
    isolation: isolate;
    padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 7vw, 80px);
    background:
        radial-gradient(100% 70% at 50% 0%,
            color-mix(in srgb, var(--color-primary) 20%, transparent) 0%,
            color-mix(in srgb, var(--color-primary) 6%, transparent) 50%,
            transparent 80%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-cream) 65%, var(--color-white)) 0%,
            var(--color-cream) 100%);
    overflow: hidden;
}

.sfc-page-simple__hero-halo {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
}

.sfc-page-simple__hero-halo--rose {
    top: -80px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
}

.sfc-page-simple__hero-halo--cream {
    bottom: -80px;
    right: -40px;
    width: 320px;
    height: 220px;
    background: radial-gradient(ellipse,
        color-mix(in srgb, var(--color-gold, #c9a55c) 60%, transparent) 0%,
        transparent 70%);
    opacity: 0.35;
}

.sfc-page-simple__hero-inner {
    position: relative;
    text-align: center;
    max-width: 740px;
}

.sfc-page-simple__hero-eyebrow {
    display: inline-block;
    padding: 6px 18px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary-deep);
    background: color-mix(in srgb, var(--color-white) 75%, transparent);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
}

.sfc-page-simple__hero-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
    letter-spacing: -0.01em;
}

.sfc-page-simple__hero-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    max-width: 560px;
    margin: 0 auto var(--space-3);
}

.sfc-page-simple__hero-updated {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-soft);
    margin: var(--space-2) 0 0;
    opacity: 0.85;
}

/* ============================================================================
 * CORPS — Prose éditoriale (typo MH)
 * Colonne lisible centrée. Frank Ruhl pour les H, Josefin pour le corps.
 * ============================================================================ */
.sfc-page-simple__body-wrap {
    padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 80px);
}

.sfc-page-simple__body {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
}

.sfc-page-simple__body > *:first-child { margin-top: 0; }
.sfc-page-simple__body > *:last-child  { margin-bottom: 0; }

.sfc-page-simple__body h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    line-height: 1.15;
    color: var(--color-ink);
    margin: var(--space-7) 0 var(--space-3);
    letter-spacing: -0.005em;
}

.sfc-page-simple__body h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-xl);
    color: var(--color-ink);
    margin: var(--space-6) 0 var(--space-2);
}

.sfc-page-simple__body h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-base);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-primary-deep);
    margin: var(--space-5) 0 var(--space-2);
}

.sfc-page-simple__body p {
    margin: 0 0 var(--space-4);
}

.sfc-page-simple__body ul,
.sfc-page-simple__body ol {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-5);
}

.sfc-page-simple__body li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-relaxed);
}

.sfc-page-simple__body li::marker {
    color: var(--color-primary);
}

.sfc-page-simple__body a {
    color: var(--color-primary-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--duration-base) var(--ease-out);
}

.sfc-page-simple__body a:hover,
.sfc-page-simple__body a:focus-visible {
    color: var(--color-primary);
}

.sfc-page-simple__body strong {
    color: var(--color-ink);
    font-weight: 600;
}

.sfc-page-simple__body em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-primary-deep);
}

.sfc-page-simple__body blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-5) var(--space-6);
    border-left: 3px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-white));
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--color-ink);
}

.sfc-page-simple__body hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-primary) 40%, transparent) 50%,
        transparent 100%);
    margin: var(--space-7) 0;
}

.sfc-page-simple__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: var(--text-sm);
}

.sfc-page-simple__body th,
.sfc-page-simple__body td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.sfc-page-simple__body th {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-primary-deep);
}

/* ============================================================================
 * CAPSULE FOOTER — Contact CTA (réutilise le pattern liquid glass MH)
 * ============================================================================ */
.sfc-page-simple__capsule-wrap {
    margin: 0 auto var(--space-section);
}

.sfc-page-simple__capsule {
    position: relative;
    isolation: isolate;
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 56px) clamp(28px, 5vw, 48px);
    text-align: center;
    background:
        radial-gradient(120% 100% at 50% 0%,
            color-mix(in srgb, var(--color-primary) 18%, transparent) 0%,
            transparent 70%),
        color-mix(in srgb, var(--color-white) 72%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
            backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-radius: var(--radius-xl);
    box-shadow:
        0 1px 0 0 color-mix(in srgb, var(--color-white) 95%, transparent) inset,
        0 24px 60px -25px color-mix(in srgb, var(--color-primary-deep) 22%, transparent);
    overflow: hidden;
}

.sfc-page-simple__capsule::after {
    content: "";
    position: absolute;
    bottom: -80px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--color-gold, #c9a55c) 70%, transparent) 0%,
        transparent 70%);
    filter: blur(60px);
    opacity: 0.28;
    z-index: -1;
    pointer-events: none;
}

.sfc-page-simple__capsule-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.sfc-page-simple__capsule-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
}

.sfc-page-simple__capsule-text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    margin: 0 auto var(--space-5);
    max-width: 460px;
}

/* ============================================================================
 * RESPONSIVE
 * ============================================================================ */
@media (max-width: 600px) {
    .sfc-page-simple__hero {
        padding: clamp(40px, 12vw, 72px) 0 clamp(28px, 8vw, 56px);
    }
    .sfc-page-simple__body-wrap {
        padding: var(--space-7) 0;
    }
    .sfc-page-simple__capsule {
        padding: var(--space-7) var(--space-5);
    }
    .sfc-page-simple__body blockquote {
        padding: var(--space-4) var(--space-5);
    }
    .sfc-page-simple__body table {
        font-size: var(--text-xs);
    }
}