/* sections.css — Sections de page Outillée */

.section {
  padding: var(--space-4xl) 0;
}

.section-creme { background-color: var(--color-creme); }
.section-blanche { background-color: white; }
.section-rose { background-color: color-mix(in srgb, var(--color-rose) 20%, white); }
.section-fonce {
  background-color: var(--color-fonce);
  color: white;
}
.section-fonce h1,
.section-fonce h2,
.section-fonce h3 { color: white; }

/* Hero */
.hero {
  padding: var(--space-4xl) 0;
  text-align: center;
}

.hero-titre {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-lg);
}

.hero-sous-titre {
  font-size: var(--size-lg);
  color: #555;
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
}

/* Grille de cartes */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--col-gap);
}

/* Footer */
.footer {
  background-color: var(--color-fonce);
  color: white;
  padding: var(--space-3xl) 0;
  text-align: center;
}

.footer a { color: var(--color-rose); }

@media (max-width: 768px) {
  .section { padding: var(--space-3xl) 0; }
  .hero { padding: var(--space-3xl) 0; }
}