/**
 * services.css — styles de la page hub /services (dotflo)
 * Portage des styles scopés de services/index.astro. Tous les sélecteurs sont
 * préfixés par .page-services 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-services .block { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.page-services .hero-hub { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-services .hero-hub__inner { display: flex; flex-direction: column; gap: var(--space-2); max-width: 52rem; }
.page-services .hero-hub h1 { font-size: var(--text-h1); max-width: 16ch; }
.page-services .hero-hub .intro { color: var(--color-neutral-1); font-size: 1.1875rem; max-width: 52ch; line-height: 1.6; }

.page-services .offers { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .page-services .offers { grid-template-columns: repeat(3, 1fr); } }
.page-services .offer { border: 1px solid var(--color-neutral-2); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--color-surface), var(--color-bg-2)); padding: 1.75rem; display: flex; flex-direction: column; transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out); }
.page-services .offer:hover { border-color: color-mix(in srgb, var(--color-accent) 32%, transparent); transform: translateY(-3px); }
.page-services .offer .tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-1); }
.page-services .offer h2 { font-size: 1.375rem; margin-top: 0.75rem; }
.page-services .offer p { margin-top: 0.75rem; color: var(--color-neutral-1); font-size: 0.98rem; max-width: none; }
.page-services .offer .go { margin-top: auto; padding-top: 1.5rem; color: var(--color-accent); font-weight: 600; font-size: 0.9rem; }

/* Services additionnels : bande séparée + carte légèrement plus sobre */
.page-services .additional { border-top: 1px solid var(--color-neutral-2); }
.page-services .offer--add { background: var(--color-surface); }