/* ============================================
   MaloBatPRO — Pages SEO local (services, zones, FAQ, CTA)
   ============================================ */

/* --- Header : opaque hors page d'accueil (lisibilité) --- */
body:not(.page-home) .site-header { background-color: var(--color-primary-dark); }
.header-phone {
  display: none; color: var(--color-accent); font-weight: 600;
  font-size: 0.95rem; white-space: nowrap; margin-left: auto; margin-right: var(--space-md);
}
@media (min-width: 1025px) {
  .nav-link { padding: var(--space-sm) 0.6rem; font-size: 0.85rem; }
}
@media (min-width: 1280px) { .header-phone { display: inline-block; } }
@media (max-width: 1024px) { .header-phone { display: inline-block; } }
@media (max-width: 420px) { .header-phone { font-size: 0.85rem; margin-right: var(--space-sm); } }

/* --- Hero --- */
.hero-bg { width: 100%; height: 100%; object-fit: cover; }
.hero-kicker {
  color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.8rem; font-weight: 600; margin-bottom: var(--space-md);
}
.hero-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-lg); }
.page-header .hero-actions { margin-top: var(--space-lg); margin-bottom: 0; }
.hero-trust {
  display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap;
  font-size: 0.9rem; color: var(--color-text-light); opacity: 0.9;
}
.hero-trust li::before { content: '✓ '; color: var(--color-accent); font-weight: 700; }
.btn-outline-light {
  background: transparent; color: var(--color-text-light);
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.btn-outline-light:hover, .btn-outline-light:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
.btn-small { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.btn-block { display: block; width: 100%; }

/* --- Sections génériques --- */
.section-light, .section-alt { padding: var(--space-2xl) 0; }
.section-light { background: var(--color-bg-light); }
.section-alt { background: var(--color-bg-section); }
.narrow { max-width: 820px; }
.small { font-size: 0.85rem; color: #666; }
.page-wrapper { padding-bottom: var(--space-2xl); }
.page-wrapper .page-header, .zone-page .page-header {
  background: transparent; color: inherit; text-align: left; padding: var(--space-lg) 0;
}
.page-wrapper .page-header h1, .zone-page .page-header h1 { color: var(--color-primary-dark); }
.page-wrapper .page-intro, .zone-page .page-intro { text-align: left; max-width: 820px; margin: 0 0 var(--space-md); font-size: 1.05rem; }
.zone-page { padding: 0 0 var(--space-xl); max-width: none; }

/* --- Fil d'Ariane --- */
.breadcrumbs { padding: var(--space-lg) 0 0; font-size: 0.85rem; color: #666; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.breadcrumbs li + li::before { content: '›'; margin: 0 var(--space-xs); color: var(--color-accent); }
.breadcrumbs a { color: var(--color-primary); text-decoration: underline; }
.page-header .breadcrumbs, .page-realisations .breadcrumbs { color: inherit; }

/* --- Cartes services --- */
.services-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg); margin: var(--space-lg) 0 var(--space-xl);
}
.service-card {
  display: flex; flex-direction: column; background: #fff;
  border-radius: var(--border-radius-lg); overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); border-top: 3px solid var(--color-accent);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.service-card img { width: 100%; height: 180px; object-fit: cover; }
.service-card__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); flex: 1; }
.service-card__title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--color-primary-dark); }
.service-card__text { font-size: 0.92rem; color: #555; flex: 1; }
.service-card__link { color: var(--color-accent); font-weight: 600; font-size: 0.9rem; }

/* --- Page service --- */
.service-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-xl); margin-top: var(--space-lg); }
.service-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--border-radius-lg); margin-bottom: var(--space-lg); }
.service-aside { background: var(--color-bg-section); padding: var(--space-lg); border-radius: var(--border-radius-lg); align-self: start; }
.service-aside h2 { font-size: 1.3rem; }
.zone-links li { padding: var(--space-xs) 0; font-size: 0.92rem; }
.zone-links a { color: var(--color-primary); text-decoration: underline; }
.check-list { margin: var(--space-md) 0 var(--space-lg); }
.check-list li { padding: var(--space-xs) 0 var(--space-xs) 1.6rem; position: relative; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }

/* --- Zones --- */
.zones-intro { max-width: 720px; margin: 0 auto var(--space-lg); text-align: center; }
.zone-city-link small { opacity: 0.7; margin-left: 0.3rem; font-size: 0.75em; }
.zone-city-link--main { background: var(--color-accent); color: var(--color-primary-dark) !important; font-weight: 700; }
.zone-city-link--plain { cursor: default; }
.zones-others { max-width: 900px; margin: var(--space-lg) auto; text-align: center; font-size: 0.9rem; color: #555; }
.zones-departments { display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; }
.zones-departments a { font-weight: 600; color: var(--color-primary); text-decoration: underline; }
.zone-context, .zone-nearby, .zone-page .zone-services { margin: var(--space-xl) 0; max-width: 900px; }
.zone-services-list li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
.zone-services-list a { font-weight: 600; color: var(--color-primary); text-decoration: underline; }
.zone-page .zones-cities { justify-content: flex-start; }
.zone-cta { background: var(--color-bg-section); padding: var(--space-xl); border-radius: var(--border-radius-lg); text-align: center; }
.zone-cta .btn { margin: var(--space-xs); }
.zones-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.zone-card { background: #fff; padding: var(--space-lg); border-radius: var(--border-radius-lg); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.zone-card h2 { font-size: 1.25rem; margin-bottom: var(--space-xs); }
.zone-card__meta { font-size: 0.8rem; color: var(--color-accent); font-weight: 600; margin-bottom: var(--space-sm); }

/* --- Étapes --- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); }
.steps li { counter-increment: step; background: #fff; padding: var(--space-lg); border-radius: var(--border-radius-lg); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); }
.steps li::before {
  content: counter(step); display: inline-flex; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  align-items: center; justify-content: center; background: var(--color-accent);
  color: var(--color-primary-dark); font-weight: 700; margin-bottom: var(--space-sm);
}
.steps strong { display: block; margin-bottom: var(--space-xs); color: var(--color-primary-dark); }
.steps--compact { grid-template-columns: 1fr; gap: var(--space-sm); }
.steps--compact li { padding: var(--space-md); box-shadow: none; }
.steps--compact li::before { width: 1.8rem; height: 1.8rem; margin: 0 var(--space-sm) 0 0; }
.steps--compact strong { display: inline; }

/* --- FAQ --- */
.faq-section { padding: var(--space-2xl) 0; background: var(--color-bg-section); }
.faq-list { max-width: 860px; }
.faq-item { background: #fff; border-radius: var(--border-radius); margin-bottom: var(--space-sm); border-left: 3px solid var(--color-accent); }
.faq-item summary { cursor: pointer; padding: var(--space-md) var(--space-lg); font-weight: 600; color: var(--color-primary-dark); }
.faq-item p { padding: 0 var(--space-lg) var(--space-md); margin: 0; color: #444; }

/* --- Bandeau CTA --- */
.cta-band { padding: var(--space-2xl) 0; }
.cta-band p { max-width: 640px; margin: 0 auto var(--space-lg); opacity: 0.9; }
.cta-band__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

/* --- Formulaires --- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-row--wrap { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.contact-form select {
  width: 100%; padding: 0.75rem 1rem; font-size: 1rem; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--border-radius); margin-top: var(--space-xs);
}
.contact-form select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2); }
.form-privacy { font-size: 0.78rem; color: #666; margin-top: var(--space-md); }
.form-privacy a { text-decoration: underline; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-section h1 { font-size: 2.25rem; }

/* --- Galerie : étiquettes avant/après --- */
.comparison-label {
  position: absolute; top: var(--space-sm); z-index: 3; padding: 0.2rem 0.6rem;
  background: rgba(15, 15, 26, 0.75); color: #fff; font-size: 0.75rem; border-radius: var(--border-radius);
}
.comparison-label--before { left: var(--space-sm); }
.comparison-label--after { right: var(--space-sm); }

/* --- Blog --- */
.blog-list .page-intro { margin-bottom: var(--space-xl); }
.blog-article__cta { margin: var(--space-xl) 0; padding: var(--space-xl); background: var(--color-bg-section); border-radius: var(--border-radius-lg); text-align: center; }
.blog-article__content a { color: var(--color-primary); text-decoration: underline; }

/* --- Footer --- */
.footer-title { font-size: 1.1rem; color: var(--color-accent); margin-bottom: var(--space-md); }
.footer-section li { margin-bottom: 0.35rem; font-size: 0.88rem; }

/* --- Mobile --- */
@media (max-width: 767px) {
  .service-layout, .form-row { grid-template-columns: 1fr; gap: 0; }
  .hero-trust { flex-direction: column; gap: var(--space-xs); }
  .contact-section h1 { font-size: 1.6rem; }
  .contact-wrapper { grid-template-columns: 1fr; }
  .page-devis .contact-form-wrapper { order: -1; }
  .contact-info { padding: var(--space-lg); }
  .hero { min-height: 88vh; }
  .hero-title { font-size: 2.1rem; }
}
.page-wrapper .page-header .hero-actions, .zone-page .page-header .hero-actions { justify-content: flex-start; }

/* --- Formulaire de devis : photos --- */
.form-optional { font-weight: 400; color: #666; font-size: 0.85em; }
.form-hint { display: block; font-size: 0.82rem; color: #666; margin-top: var(--space-xs); }
.form-file {
  width: 100%; padding: 0.75rem 1rem; margin-top: var(--space-xs); background: #fff; cursor: pointer;
  border: 1px dashed var(--color-border); border-radius: var(--border-radius);
}
.form-file:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2); }