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

/* Section de base */
.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); }

/* ─── Sections avec fond pattern/texture ────────────────────
   Usage : <div class="section section-pattern section-pattern-carreaux-fins">
   Le bloc de texte à l'intérieur devrait utiliser .banniere-bloc ou .container
   pour rester lisible sur le fond.

   Chemin relatif depuis src/styles/ → ../assets/patterns/
──────────────────────────────────────────────────────────── */
.section-pattern {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 13 patterns disponibles */
.section-pattern-carreaux-fins      { background-image: url('../assets/patterns/pattern-carreaux-fins-v1.jpg'); }
.section-pattern-carreaux-larges    { background-image: url('../assets/patterns/pattern-carreaux-larges-v1.jpg'); }
.section-pattern-vagues-douces      { background-image: url('../assets/patterns/pattern-vagues-douces-v1.jpg'); }
.section-pattern-vagues-multicolores{ background-image: url('../assets/patterns/pattern-vagues-multicolores-v1.jpg'); }
.section-pattern-boucles-spirales   { background-image: url('../assets/patterns/pattern-boucles-spirales-v1.jpg'); }
.section-pattern-ronds-superposes   { background-image: url('../assets/patterns/pattern-ronds-superposes-v1.jpg'); }
.section-pattern-filet-ondule       { background-image: url('../assets/patterns/pattern-filet-ondule-v1.jpg'); }
.section-pattern-rayures-pastel     { background-image: url('../assets/patterns/pattern-rayures-pastel-v1.jpg'); }
.section-pattern-squiggles-libres   { background-image: url('../assets/patterns/pattern-squiggles-libres-v1.jpg'); }
.section-pattern-barres-verticales  { background-image: url('../assets/patterns/pattern-barres-verticales-v1.jpg'); }
.section-pattern-bandes-horizontales{ background-image: url('../assets/patterns/pattern-bandes-horizontales-v1.jpg'); }
.section-pattern-patchwork-colore   { background-image: url('../assets/patterns/pattern-patchwork-colore-v1.jpg'); }
.section-pattern-cadre-colore       { background-image: url('../assets/patterns/pattern-cadre-colore-v1.jpg'); }

/* Variantes banniere avec fond pattern (même logique que banniere-corail etc.) */
.banniere-pattern-carreaux-fins      { background-image: url('../assets/patterns/pattern-carreaux-fins-v1.jpg'); background-size: cover; background-position: center; }
.banniere-pattern-carreaux-larges    { background-image: url('../assets/patterns/pattern-carreaux-larges-v1.jpg'); background-size: cover; background-position: center; }
.banniere-pattern-vagues-douces      { background-image: url('../assets/patterns/pattern-vagues-douces-v1.jpg'); background-size: cover; background-position: center; }
.banniere-pattern-boucles-spirales   { background-image: url('../assets/patterns/pattern-boucles-spirales-v1.jpg'); background-size: cover; background-position: center; }
.banniere-pattern-ronds-superposes   { background-image: url('../assets/patterns/pattern-ronds-superposes-v1.jpg'); background-size: cover; background-position: center; }
.banniere-pattern-filet-ondule       { background-image: url('../assets/patterns/pattern-filet-ondule-v1.jpg'); background-size: cover; background-position: center; }
.banniere-pattern-rayures-pastel     { background-image: url('../assets/patterns/pattern-rayures-pastel-v1.jpg'); background-size: cover; background-position: center; }

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