/**
 * service.css — styles de la page détail /services/{slug} (dotflo)
 * Portage des styles scopés de services/[slug].astro. Tous les sélecteurs sont
 * préfixés par .page-service pour éviter toute fuite vers les autres pages
 * (Blade ne scope pas automatiquement comme Astro). Le reveal (.rv) n'est pas
 * utilisé sur cette page (fidèle à la source Astro).
 */

.page-service .block { padding: clamp(3.5rem, 8vw, 7rem) 0; }

/* Hero */
.page-service .hero-svc { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); }
.page-service .hero-svc__inner { display: flex; flex-direction: column; gap: var(--space-3); max-width: 56rem; }
.page-service .breadcrumb { align-self: flex-start; font-size: var(--text-small); }
.page-service .hero-svc h1 { font-size: var(--text-h1); max-width: 18ch; }
.page-service .hero-svc .intro { color: var(--color-neutral-1); font-size: 1.1875rem; max-width: 52ch; line-height: 1.6; }
.page-service .hero-svc .btn { margin-top: var(--space-1); }

/* Ce qu'on fait */
.page-service .cqf-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 1024px) { .page-service .cqf-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; } }
.page-service .cqf-grid h2 { font-size: var(--text-h2); margin-top: 0.9rem; }

/* Méthode */
.page-service .methode__head { max-width: 46rem; }
.page-service .steps { max-width: 46rem; border-top: 1px solid var(--color-neutral-2); margin-top: var(--space-4); }
.page-service .step { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-neutral-2); }
.page-service .step__n { font-family: var(--font-display); font-size: 2rem; font-weight: var(--font-weight-black); color: var(--color-accent); line-height: 1; min-width: 3rem; font-variant-numeric: tabular-nums; }
.page-service .step h3 { font-size: var(--text-h3); margin-bottom: 0.3rem; }
.page-service .step p { color: var(--color-neutral-1); font-size: 0.95rem; max-width: none; }

/* Pour qui */
.page-service .who-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .page-service .who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .page-service .who-grid { grid-template-columns: repeat(3, 1fr); } }
.page-service .who { border: 1px solid var(--color-neutral-2); background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.5rem; }
.page-service .who h3 { font-size: 1.125rem; }
.page-service .who p { margin-top: 0.5rem; color: var(--color-neutral-1); font-size: 0.95rem; max-width: none; }

/* Autres offres */
.page-service .autres { border-top: 1px solid var(--color-neutral-2); }
.page-service .autres__inner { display: flex; flex-direction: column; gap: var(--space-3); max-width: 46rem; }
.page-service .autres h2 { font-size: var(--text-h3); }
.page-service .autres__list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.page-service .autres__list a { font-weight: var(--font-weight-medium); }