/* ═══════════════════════════════════════════════════════════════
   MonPrestataire — Styles partagés des landing pages SEO
   (dj-mariage-metz, dj-mariage-nancy, photographe-mariage-metz, etc.)
═══════════════════════════════════════════════════════════════ */

.seo-hero {
  padding: 90px 24px 50px;
  background: linear-gradient(180deg, #fdfaf5, #f7f0e3);
  text-align: center;
}
.seo-hero h1 {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  color: #1a1410;
  margin: 16px auto 14px;
  max-width: 900px;
  line-height: 1.15;
}
.seo-hero h1 em { color: #B5815A; font-style: italic; }
.seo-hero .eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #B5815A;
  font-weight: 600;
}
.seo-hero .lead {
  max-width: 720px;
  margin: 0 auto;
  color: #5c4a3a;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 300;
}
.seo-cta-row {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 36px;
}
.seo-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all .2s;
}
.seo-cta-primary { background: #1a1410; color: #fff; }
.seo-cta-primary:hover { background: #B5815A; }
.seo-cta-secondary { background: #fff; color: #1a1410; border: 1px solid #ede8e0; }
.seo-cta-secondary:hover { background: #faf6ee; }

.seo-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 70px 24px;
}
.seo-content h2 {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  color: #1a1410;
  margin: 50px 0 18px;
  line-height: 1.25;
}
.seo-content h2 em { color: #B5815A; font-style: italic; }
.seo-content h3 {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1a1410;
  margin: 32px 0 12px;
}
.seo-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: #3a2f24;
  font-weight: 300;
  margin: 12px 0;
}
.seo-content strong { color: #1a1410; font-weight: 500; }
.seo-content a { color: #B5815A; text-decoration: none; border-bottom: 1px solid rgba(181,129,90,.3); }
.seo-content a:hover { border-color: #B5815A; }
.seo-content ul { margin: 12px 0 18px; padding-left: 22px; }
.seo-content li { font-size: 1rem; line-height: 1.8; color: #3a2f24; font-weight: 300; }

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin: 30px 0;
}
.empty-state {
  text-align: center; padding: 50px 30px;
  color: #7a6a5a;
  background: #faf6ee;
  border-radius: 14px;
  border: 1px dashed rgba(181, 129, 90, .3);
}
.empty-state a { color: #B5815A; font-weight: 500; }

.seo-faq {
  background: #fdfaf5;
  padding: 70px 24px;
}
.seo-faq-wrap { max-width: 800px; margin: 0 auto; }
.seo-faq h2 {
  text-align: center;
  font-family: 'Bodoni Moda', serif;
  font-size: 2rem;
  font-weight: 400;
  color: #1a1410;
  margin-bottom: 30px;
}
.faq-item {
  background: #fff;
  border: 1px solid #ede8e0;
  border-radius: 12px;
  margin-bottom: 14px;
  padding: 20px 26px;
  cursor: pointer;
}
.faq-q {
  font-weight: 500;
  color: #1a1410;
  font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-q::after { content: '+'; color: #B5815A; font-size: 1.4rem; font-weight: 300; }
.faq-item.open .faq-q::after { content: '–'; }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .3s, margin .3s;
  color: #5c4a3a;
  line-height: 1.7;
}
.faq-item.open .faq-a {
  max-height: 400px;
  margin-top: 12px;
}

.nearby-cities {
  background: #fff;
  padding: 50px 24px;
  border-top: 1px solid #ede8e0;
}
.nearby-cities-wrap { max-width: 980px; margin: 0 auto; text-align: center; }
.nearby-cities-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.4rem;
  color: #1a1410;
  margin-bottom: 20px;
}
.nearby-list {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.nearby-chip {
  padding: 10px 20px;
  background: #faf6ee;
  border: 1px solid #ede8e0;
  border-radius: 99px;
  color: #5c4a3a;
  text-decoration: none;
  font-size: .9rem;
  transition: all .2s;
}
.nearby-chip:hover { background: #B5815A; color: #fff; border-color: #B5815A; }