/* ==========================================================================
   sections.css — Section Variants, Separators, Title Treatments,
                  Dark/Light Ambiances, Card Variants
   Part of the Romain Recovery theme stylesheet.
   ========================================================================== */

/* ==========================================================================
   1. Section Variants — Light Mist & Dark Energy
   ========================================================================== */

/* --- Light Mist: white-ish + subtle radial green glow --- */
.section-light-mist,
.wp-block-group.is-style-section-light-mist {
	position: relative;
	background: var(--gradient-light-mist);
}

.section-light-mist::after,
.wp-block-group.is-style-section-light-mist::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, var(--accent-06) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.section-light-mist > *,
.wp-block-group.is-style-section-light-mist > * {
	position: relative;
	z-index: 1;
}

/* --- Dark Energy: anthracite + green glow energy --- */
.section-dark-energy,
.wp-block-group.is-style-section-dark-energy {
	position: relative;
	background: var(--wp--preset--color--dark) !important;
	overflow: hidden;
}

.section-dark-energy::before,
.wp-block-group.is-style-section-dark-energy::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 80%, var(--accent-07) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Grain overlay now centralized in glass.css */

.section-dark-energy > *,
.wp-block-group.is-style-section-dark-energy > * {
	position: relative;
	z-index: 1;
}

/* --- Dark Energy: text color overrides --- */
.section-dark-energy,
.wp-block-group.is-style-section-dark-energy {
	color: var(--wp--preset--color--dark-muted);
}

.section-dark-energy h1,
.section-dark-energy h2,
.section-dark-energy h3,
.section-dark-energy h4,
.section-dark-energy h5,
.section-dark-energy h6,
.wp-block-group.is-style-section-dark-energy h1,
.wp-block-group.is-style-section-dark-energy h2,
.wp-block-group.is-style-section-dark-energy h3,
.wp-block-group.is-style-section-dark-energy h4,
.wp-block-group.is-style-section-dark-energy h5,
.wp-block-group.is-style-section-dark-energy h6 {
	color: var(--wp--preset--color--surface) !important;
}

.section-dark-energy p,
.section-dark-energy li,
.section-dark-energy span,
.wp-block-group.is-style-section-dark-energy p,
.wp-block-group.is-style-section-dark-energy li,
.wp-block-group.is-style-section-dark-energy span {
	color: var(--wp--preset--color--dark-muted);
}

.section-dark-energy a,
.wp-block-group.is-style-section-dark-energy a {
	color: var(--wp--preset--color--accent);
}

/* Outline buttons in dark sections */
.section-dark-energy .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent) !important;
}

.section-dark-energy .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Fill buttons in dark sections — keep dark text on accent bg */
.section-dark-energy .wp-block-button.is-style-fill .wp-block-button__link,
.section-dark-energy .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	color: var(--wp--preset--color--contrast) !important;
}

/* ==========================================================================
   2. Section Separators
   ========================================================================== */

.section-separator {
	position: relative;
	height: 1px;
	margin: 0;
	border: none;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--border-light) 20%,
		var(--accent-30) 50%,
		var(--border-light) 80%,
		transparent 100%
	);
}

.section-separator::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120px;
	height: 30px;
	background: radial-gradient(ellipse at center, var(--accent-20) 0%, transparent 70%);
	pointer-events: none;
}

/* Dark-to-light separator variant */
.section-separator--dark {
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.05) 20%,
		var(--accent-25) 50%,
		rgba(255, 255, 255, 0.05) 80%,
		transparent 100%
	);
}

/* ==========================================================================
   3. Section Title Treatment — Micro-label + H2 + Accent Bar
   ========================================================================== */

.section-label {
	display: block;
	text-align: center;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 12px !important;
}

.section-dark-energy .section-label,
.wp-block-group.is-style-section-dark-energy .section-label {
	color: var(--wp--preset--color--accent) !important;
}

.section-title-bar {
	display: block;
	width: 60px;
	height: 3px;
	background: var(--wp--preset--color--accent);
	margin: 16px auto 0;
	border-radius: 2px;
}

/* ==========================================================================
   4. Card / Glass Dark Variant
      Also applies to: step-card, dark testimonial-card, faq details
   ========================================================================== */

.card-glass-dark,
.wp-block-group.is-style-card-glass-dark,
.section-dark-energy .step-card,
.section-dark-energy .testimonial-card,
.faq-section .wp-block-details {
	position: relative;
	background: var(--glass-dark) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--border-dark);
	border-top: 1px solid var(--border-dark-top);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: var(--transition-card);
}

.card-glass-dark:hover,
.wp-block-group.is-style-card-glass-dark:hover,
.section-dark-energy .step-card:hover,
.section-dark-energy .testimonial-card:hover,
.faq-section .wp-block-details:hover {
	transform: translateY(-2px);
	border-color: var(--accent-30);
	box-shadow: 0 0 20px var(--accent-08);
}

/* Grain on dark cards — now centralized in glass.css */

.card-glass-dark > *,
.wp-block-group.is-style-card-glass-dark > * {
	position: relative;
	z-index: 1;
}

/* Dark card text overrides */
.card-glass-dark h3,
.card-glass-dark h4,
.wp-block-group.is-style-card-glass-dark h3,
.wp-block-group.is-style-card-glass-dark h4 {
	color: var(--wp--preset--color--surface) !important;
}

.card-glass-dark p,
.wp-block-group.is-style-card-glass-dark p {
	color: var(--wp--preset--color--dark-muted);
}

/* ==========================================================================
   5. Services Section — Platform, Icon Glow, Left Bar
   ========================================================================== */

/* Platform container wrapping the 3 service cards */
.services-platform {
	border: 1px solid var(--border-light-subtle);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--50);
	background: rgba(255, 255, 255, 0.4);
}

/* Service card accent border */
.section-light-mist .service-card,
.section-light-mist .wp-block-group.service-card {
	border: 3px solid var(--wp--preset--color--accent);
}

/* Service icon glow halo */
.service-icon-glow {
	position: relative;
	display: inline-block;
}

.service-icon-glow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70px;
	height: 70px;
	background: radial-gradient(circle, var(--accent-20) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}

/* Duration pill with border */
.service-card-duration {
	display: inline-block;
	background: var(--accent-10);
	color: var(--wp--preset--color--accent) !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 4px 16px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--accent-35);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Service card price */
.service-card-price {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: clamp(1.75rem, 2.5vw, 2.25rem);
	font-weight: 700;
	color: var(--wp--preset--color--accent) !important;
	line-height: 1;
}

/* Service cards in dark context — neutralise light defaults */
.card-glass-dark.service-card,
.section-dark-energy .service-card {
	background: transparent;
}

/* ==========================================================================
   6. Session Process / Steps — Dark Cards, Timeline, Gradient Numbers
   ========================================================================== */

/* Step number gradient text */
.step-number {
	background: linear-gradient(135deg, var(--wp--preset--color--accent), var(--accent-soft));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Timeline connector between step cards */
.steps-timeline {
	position: relative;
}

.steps-timeline > .wp-block-column {
	position: relative;
}

/* Horizontal line between steps (desktop) */
.steps-timeline > .wp-block-column:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 2rem;
	left: -2rem;
	width: 4rem;
	height: 1px;
	background: linear-gradient(90deg, var(--accent-50), var(--accent-10));
}

/* Step-card padding (base dark-glass style is in section 4) */
.section-dark-energy .step-card {
	padding: var(--wp--preset--spacing--50);
}

/* Step text colors in dark */
.section-dark-energy .step-number {
	-webkit-text-fill-color: transparent;
}

/* Mobile: vertical timeline */
@media (max-width: 781px) {
	.steps-timeline > .wp-block-column:not(:first-child)::before {
		top: -1rem;
		left: 1.5rem;
		width: 1px;
		height: 2rem;
		background: linear-gradient(180deg, var(--accent-50), var(--accent-10));
	}
}

/* ==========================================================================
   7. Proof Cards — Dark, Icon Circles, Labels
   ========================================================================== */

/* Proof icon circle container */
.proof-icon-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--accent-40);
	border-radius: 50%;
	margin: 0 auto var(--wp--preset--spacing--30);
	font-size: 1.5rem;
	color: var(--wp--preset--color--accent);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card-glass-dark:hover .proof-icon-circle,
.wp-block-group.is-style-card-glass-dark:hover .proof-icon-circle {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 16px var(--accent-15);
}

/* Equal-height proof cards */
.proof-cards-grid { align-items: stretch !important; }
.proof-cards-grid > .wp-block-column {
	display: flex !important;
	flex-direction: column !important;
	align-self: stretch !important;
}
.proof-cards-grid > .wp-block-column > .proof-card {
	flex: 1 !important;
	height: auto !important;
}

/* Proof card micro-label */
.proof-card-label {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--accent) !important;
	text-align: center;
	margin-bottom: 6px !important;
}

/* ==========================================================================
   8. Zones — Map Glass, Badge, Wave Pattern
   ========================================================================== */

.zone-slideshow-wrap {
	position: relative;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow:
		0 4px 24px var(--border-light-subtle),
		0 8px 30px var(--accent-06);
}

.zone-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 10;
	display: inline-block;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--accent-30);
	border-radius: var(--radius-pill);
	padding: 6px 16px;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	letter-spacing: 0.02em;
}

/* "Pas sûr" CTA card — dark contrast */
.zone-cta-card {
	background: var(--wp--preset--color--dark) !important;
	border: 1px solid var(--accent-20);
	border-radius: var(--radius-card);
	padding: var(--wp--preset--spacing--60);
	position: relative;
	overflow: hidden;
}

.zone-cta-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 100%, var(--accent-08) 0%, transparent 60%);
	pointer-events: none;
}

.zone-cta-card > * {
	position: relative;
	z-index: 1;
}

.zone-cta-card h3 {
	color: var(--wp--preset--color--surface) !important;
}

.zone-cta-card p {
	color: var(--wp--preset--color--dark-muted) !important;
}

/* Wave pattern background for zones section */
.section-light-mist.has-wave-pattern::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 200px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='none' stroke='rgba(26,255,163,0.08)' stroke-width='1' d='M0,100 C360,150 720,50 1080,100 C1260,125 1360,112 1440,100'/%3E%3Cpath fill='none' stroke='rgba(26,255,163,0.05)' stroke-width='1' d='M0,130 C360,80 720,180 1080,130 C1260,105 1360,118 1440,130'/%3E%3C/svg%3E") no-repeat center bottom;
	background-size: 100% auto;
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   9. Testimonials — Dark Section, Rating, Proof Badge
   ========================================================================== */

/* Dark testimonial cards — base dark-glass style is in section 4 */

.section-dark-energy .testimonial-card::before {
	color: var(--wp--preset--color--accent);
	opacity: 0.2;
}

.section-dark-energy .testimonial-quote {
	color: var(--wp--preset--color--dark-muted) !important;
}

.section-dark-energy .testimonial-author {
	color: var(--wp--preset--color--surface) !important;
}

.section-dark-energy .testimonial-sport {
	color: var(--wp--preset--color--accent) !important;
}

/* Rating label */
.testimonial-rating {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent) !important;
	letter-spacing: 0.04em;
	margin-bottom: 12px !important;
}

/* Social proof badge above testimonials */
.section-proof-badge {
	display: inline-block;
	background: rgba(21, 26, 32, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--accent-20);
	border-radius: var(--radius-pill);
	padding: 8px 24px;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent) !important;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   10. FAQ — Glass Accordion
   ========================================================================== */

/* FAQ-specific overrides — base dark-glass style is in section 4 */
.faq-section .wp-block-details {
	border: 1px solid var(--border-dark) !important;
	border-top: 1px solid var(--border-dark-top) !important;
	border-radius: var(--radius-card) !important;
	margin-bottom: 12px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
}

.faq-section .wp-block-details:hover {
	border-color: var(--accent-30) !important;
	box-shadow: 0 0 20px var(--accent-08);
}

.faq-section .wp-block-details summary {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 600;
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.faq-section .wp-block-details p {
	color: var(--wp--preset--color--dark-muted);
	line-height: 1.7;
	margin-top: var(--wp--preset--spacing--30);
}

.faq-section .wp-block-details summary::-webkit-details-marker,
.faq-section .wp-block-details summary::marker {
	display: none;
	content: "";
}

.faq-section .wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--wp--preset--color--accent);
	flex-shrink: 0;
	margin-left: 1rem;
	transition: transform 0.3s ease;
}

.faq-section .wp-block-details[open] summary::after {
	content: "−";
	transform: rotate(0deg);
}

/* ==========================================================================
   11. CTA Final — Mini Hero Bis
   ========================================================================== */

/* Wave / energy background for CTA */
.cta-final-section {
	position: relative;
	padding-top: var(--wp--preset--spacing--80) !important;
	padding-bottom: var(--wp--preset--spacing--80) !important;
}

.cta-final-section.section-dark-energy::before {
	background:
		radial-gradient(ellipse at 30% 70%, rgba(26, 255, 163, 0.14) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 30%, rgba(91, 207, 181, 0.1) 0%, transparent 50%);
}

.cta-final-section h2 {
	font-size: clamp(2rem, 5vw, 3.5rem) !important;
	letter-spacing: -0.02em !important;
	text-transform: uppercase !important;
	line-height: 1.1 !important;
}

/* Trust strip — 3 micro proof icons */
.cta-trust-strip {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
}

.cta-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--dark-muted);
}

.cta-trust-item svg,
.cta-trust-item .trust-icon {
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

/* CTA title — impact hero-lite */
.cta-final-title {
	text-transform: uppercase !important;
	letter-spacing: -0.02em !important;
}

/* ==========================================================================
   12. Site Footer
   ========================================================================== */

/*
 * Même style que section-light-mist (Zones d'intervention / Déroulé séance).
 * !important sur background écrase l'inline style #3d6fd4 stocké en base.
 * Les deux sélecteurs couvrent : wrapper template-part + groupe interne du pattern.
 */
.wp-block-template-part.site-footer-section .wp-block-group.alignfull,
.site-footer-section.wp-block-group.alignfull,
.site-footer-section {
	position: relative;
	background: var(--gradient-light-mist) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Radial glow vert — identique à section-light-mist */
.wp-block-template-part.site-footer-section .wp-block-group.alignfull::after,
.site-footer-section.wp-block-group.alignfull::after,
.site-footer-section::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, var(--accent-06) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}

/* Enfants au-dessus du glow */
.wp-block-template-part.site-footer-section .wp-block-group.alignfull > *,
.site-footer-section.wp-block-group.alignfull > *,
.site-footer-section > * {
	position: relative;
	z-index: 1;
}

/* Texte principal */
.wp-block-template-part.site-footer-section h1,
.wp-block-template-part.site-footer-section h2,
.wp-block-template-part.site-footer-section h3,
.wp-block-template-part.site-footer-section h4,
.wp-block-template-part.site-footer-section p,
.wp-block-template-part.site-footer-section li,
.site-footer-section h1,
.site-footer-section h2,
.site-footer-section h3,
.site-footer-section h4,
.site-footer-section p,
.site-footer-section li {
	color: var(--wp--preset--color--contrast);
}

/* Textes secondaires (description, copyright, mentions légales) */
.wp-block-template-part.site-footer-section .has-contrast-muted-color,
.site-footer-section .has-contrast-muted-color {
	color: var(--wp--preset--color--contrast-muted) !important; /* #5A7A7A */
}

/* Liens : lisibles sur fond clair — vert accent au survol comme sur les autres sections */
.wp-block-template-part.site-footer-section a,
.site-footer-section a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.wp-block-template-part.site-footer-section a:hover,
.wp-block-template-part.site-footer-section a:focus,
.site-footer-section a:hover,
.site-footer-section a:focus {
	color: var(--wp--preset--color--accent); /* #1AFFA3 */
	text-decoration-color: currentColor;
}

/* Séparateur */
.wp-block-template-part.site-footer-section .wp-block-separator,
.site-footer-section .wp-block-separator {
	border-color: var(--wp--preset--color--contrast-muted);
	opacity: 0.35;
}

/* ==========================================================================
   13. Reduced Motion Override
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.card-glass-dark:hover,
	.wp-block-group.is-style-card-glass-dark:hover,
	.section-dark-energy .testimonial-card:hover,
	.section-dark-energy .step-card:hover,
	.faq-section .wp-block-details:hover,
	.faq-section .wp-block-details summary::after {
		transform: none;
		transition: none;
	}
}