/* =======================================================
   LES JEUX DU PLATEAU — PAGE ADHÉRER
   Sprint 2.6.1
======================================================= */

.membership-page { background: var(--color-background); }
.membership-page main { overflow: hidden; }

.membership-hero {
    padding: 150px 0 120px;
    background: linear-gradient(135deg, #eef5f2 0%, #fafaf8 65%);
    text-align: center;
}
.membership-hero .container { max-width: 900px; }
.membership-hero h1 { margin-bottom: 24px; }
.membership-hero p { max-width: 760px; margin: 0 auto 36px; font-size: 1.25rem; line-height: 1.75; }

.membership-story { padding: var(--space-section) 0; background: var(--color-white); }
.membership-story-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 80px; align-items: center; }
.membership-story-content h2 { margin-bottom: 28px; }
.membership-story-content p { margin-bottom: 18px; line-height: 1.8; }
.membership-story-image { min-height: 520px; overflow: hidden; border-radius: var(--radius-large); box-shadow: var(--shadow-medium); }
.membership-story-image img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }

.membership-benefits { padding: var(--space-section) 0; background: var(--color-section-green); text-align: center; }
.membership-benefits h2, .membership-steps h2 { margin-bottom: 22px; }
.section-intro { max-width: 720px; margin: 0 auto 54px; font-size: 1.12rem; }
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: left; }
.benefit-card { min-height: 285px; padding: 34px 30px; background: var(--color-white); border: 1px solid rgba(47,111,98,.08); border-radius: var(--radius-medium); box-shadow: var(--shadow-small); transition: var(--transition-normal); }
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); }
.benefit-number { display: block; margin-bottom: 28px; color: var(--color-primary); font-family: var(--font-title); font-size: .9rem; font-weight: 700; letter-spacing: .08em; }
.benefit-card h3 { margin-bottom: 16px; font-size: 1.35rem; }
.benefit-card p { margin: 0; line-height: 1.7; }

.membership-pricing { padding: var(--space-section) 0; background: var(--color-white); }
.pricing-heading { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.pricing-heading h2 { margin-bottom: 18px; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 430px)); justify-content: center; gap: 30px; }
.pricing-card { position: relative; padding: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-large); background: var(--color-background); text-align: center; }
.pricing-card-featured { border: 2px solid var(--color-primary); background: var(--color-white); box-shadow: var(--shadow-medium); }
.pricing-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-text); font-size: .82rem; font-weight: 700; }
.pricing-label { margin-bottom: 18px; font-family: var(--font-title); font-weight: 600; color: var(--color-text); }
.price { display: flex; justify-content: center; align-items: flex-start; gap: 5px; margin: 0 0 18px; color: var(--color-primary); }
.price strong { font-family: var(--font-title); font-size: 4.6rem; line-height: .9; }
.price span { margin-top: 8px; font-size: 1.65rem; font-weight: 700; }
.first-visit-note { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 890px; margin: 38px auto 0; padding: 30px 34px; border-radius: var(--radius-medium); background: var(--color-section-green); }
.first-visit-note h3 { margin-bottom: 8px; font-size: 1.3rem; }
.first-visit-note p { margin: 0; }
.pricing-action { margin-top: 38px; text-align: center; }
.pricing-action p { margin-top: 14px; font-size: .9rem; color: var(--color-text-light); }

.membership-steps { padding: var(--space-section) 0; background: #f4f3ee; text-align: center; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; text-align: left; }
.steps-grid article { padding: 36px; border-radius: var(--radius-medium); background: var(--color-white); }
.steps-grid article > span { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; margin-bottom: 25px; border-radius: 50%; background: var(--color-accent); font-family: var(--font-title); font-weight: 800; }
.steps-grid h3 { margin-bottom: 12px; font-size: 1.3rem; }
.steps-grid p { margin: 0; }

.membership-cta { padding: var(--space-section) 0; background: var(--color-white); }
.membership-cta-card { padding: 76px 50px; border-radius: var(--radius-large); background: var(--color-primary); color: var(--color-white); text-align: center; }
.membership-cta-card .section-tag { background: rgba(255,255,255,.12); color: var(--color-white); }
.membership-cta-card h2 { max-width: 820px; margin: 0 auto 22px; color: var(--color-white); }
.membership-cta-card p { max-width: 720px; margin: 0 auto 34px; color: rgba(255,255,255,.84); }
.membership-cta-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.membership-cta-card .button-primary { background: var(--color-accent); color: var(--color-text); }
.membership-cta-card .button-primary:hover { background: var(--color-accent-light); }
.membership-cta-card .button-secondary { border-color: rgba(255,255,255,.6); color: var(--color-white); }
.membership-cta-card .button-secondary:hover { background: var(--color-white); color: var(--color-primary); }

@media (max-width: 1050px) {
    .membership-story-grid { gap: 48px; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .membership-hero { padding: 110px 0 82px; }
    .membership-hero p { font-size: 1.08rem; }
    .membership-story, .membership-benefits, .membership-pricing, .membership-steps, .membership-cta { padding: 78px 0; }
    .membership-story-grid { grid-template-columns: 1fr; gap: 38px; }
    .membership-story-image, .membership-story-image img { min-height: 360px; }
    .benefits-grid, .pricing-grid, .steps-grid { grid-template-columns: 1fr; }
    .benefit-card { min-height: 0; }
    .pricing-card { padding: 40px 26px; }
    .first-visit-note { align-items: flex-start; flex-direction: column; }
    .membership-cta-card { padding: 58px 24px; }
    .membership-cta-buttons { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .membership-hero .button, .first-visit-note .button, .pricing-action .button { width: 100%; }
    .first-visit-note { padding: 25px; }
    .price strong { font-size: 4rem; }
}

/* =======================================================
   CORRECTIF 2.6.1 — HEADER LISIBLE SUR FOND CLAIR
======================================================= */
.membership-page .site-header {
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid rgba(47, 111, 98, .10);
    box-shadow: 0 8px 28px rgba(31, 62, 55, .06);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.membership-page .site-header.scrolled {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: var(--color-border);
    box-shadow: 0 10px 30px rgba(31, 62, 55, .10);
}

.membership-page .main-nav a,
.membership-page .site-header.scrolled .main-nav a {
    color: var(--color-primary-dark);
}

.membership-page .main-nav a:hover,
.membership-page .main-nav a[aria-current="page"] {
    color: var(--color-primary);
}

.membership-page .main-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.membership-page .menu-toggle span,
.membership-page .site-header.scrolled .menu-toggle span {
    background: var(--color-primary-dark);
}

/* Le header étant fixe, le hero conserve une respiration nette. */
.membership-page .membership-hero {
    padding-top: calc(150px + var(--header-height));
}

@media (max-width: 760px) {
    .membership-page .membership-hero {
        padding-top: calc(110px + var(--header-height));
    }
}