/* =====================================================================
 * ASTRA Agency - sections.css
 * Nouvelles sections d'accueil : Services, Chiffres-clés, Process, Témoignages.
 * Réutilise les tokens de global.css (palette/espacements conservés).
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * SERVICES
 * ------------------------------------------------------------------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.service-card {
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 2.5vw, 2.25rem); box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
	display: flex; flex-direction: column; gap: var(--s-3);
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.service-card__num { font-family: var(--font-label); font-size: 1.4rem; line-height: 1; color: var(--color-accent-text); letter-spacing: 0.05em; }
.service-card h3 { margin: 0; font-size: clamp(1.3rem, 1.9vw, 1.65rem); }
.service-card p { margin: 0; color: var(--color-text-light); font-size: 0.98rem; line-height: 1.6; }
.service-card::after { content: ""; height: 2px; width: 40px; background: var(--color-accent); margin-top: auto; transition: width var(--transition); }
.service-card:hover::after { width: 72px; }

/* ---------------------------------------------------------------------
 * CHIFFRES-CLÉS (sur fond sombre)
 * ------------------------------------------------------------------- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.stat { text-align: left; border-left: 2px solid var(--color-accent); padding-left: var(--s-4); }
.stat__num { font-family: var(--font-label); font-size: clamp(2.8rem, 6vw, 4.5rem); line-height: 0.95; color: var(--on-dark); letter-spacing: 0.02em; }
.stat__label { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--on-dark-mute); margin-top: var(--s-2); }

/* ---------------------------------------------------------------------
 * PROCESS (4 étapes)
 * ------------------------------------------------------------------- */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); counter-reset: step; }
.process-step { position: relative; padding-top: var(--s-5); border-top: 2px solid var(--color-border-strong); }
.process-step__num { font-family: var(--font-label); font-size: 1.1rem; letter-spacing: 0.1em; color: var(--color-accent-text); display: block; margin-bottom: var(--s-3); }
.process-step h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 0 0 var(--s-3); }
.process-step p { margin: 0; color: var(--color-text-light); font-size: 0.96rem; line-height: 1.6; }

/* ---------------------------------------------------------------------
 * TÉMOIGNAGES
 * ------------------------------------------------------------------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.testimonial {
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; gap: var(--s-5);
	box-shadow: var(--shadow-sm);
}
.testimonial__quote { font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.35; color: var(--color-text); margin: 0; }
.testimonial__quote::before { content: "“"; display: block; font-family: var(--font-display); font-size: 3rem; line-height: 0.5; color: var(--color-accent); margin-bottom: var(--s-3); }
.testimonial__author { margin-top: auto; }
.testimonial__name { font-weight: 700; font-size: 0.98rem; color: var(--color-text); }
.testimonial__role { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--color-text-light); margin-top: 0.2rem; }

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media (max-width: 1024px) {
	.services-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
	.stats-row, .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2rem, 5vw, 3rem); }
}
@media (max-width: 600px) {
	.services-grid, .testimonials-grid, .stats-row, .process-steps { grid-template-columns: 1fr; }
}