/* ===========================================================================
   CSS custom MINIMAL du template (tout le reste = Bootstrap).
   Couvre uniquement ce que Bootstrap ne fait pas :
     1) la mécanique du formulaire multi-étapes (piloté par lead-form.js)
     2) le réagencement SEO de la page ville (DOM ≠ ordre visuel)
   Les couleurs suivent les variables Bootstrap (--bs-*).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1) LEAD FORM (widget multi-étapes)
   --------------------------------------------------------------------------- */
.lead-form-step { display: none; }
.lead-form-step.active { display: block; animation: lf-fade .25s ease; }

@keyframes lf-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.lead-form-progress { display: flex; align-items: center; margin-bottom: 1.5rem; }

.lead-form-progress-step {
    flex: 0 0 auto;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .875rem;
    background: var(--bs-tertiary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    transition: background-color .2s ease, color .2s ease;
}
.lead-form-progress-step.active,
.lead-form-progress-step.done { background: var(--bs-primary); color: #fff; }

.lead-form-progress-bar {
    flex: 1 1 auto; height: 3px; margin: 0 .5rem;
    background: var(--bs-tertiary-bg, #e9ecef);
}
.lead-form-progress-fill {
    height: 100%; width: 0;
    background: var(--bs-primary);
    transition: width .3s ease;
}
.lead-form-progress-fill.filled { width: 100%; }

.lead-form-service-card { cursor: pointer; }
.lead-form-service-card.selected {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

.error { border-color: var(--bs-danger) !important; }
label.error { color: var(--bs-danger); }

/* Survol : remplacer le gris terne de btn-outline-secondary par une teinte
   discrète de la couleur primaire (cards service + chips du maillage). */
.lead-form-service-card:hover {
    background-color: rgba(var(--bs-primary-rgb), .08);
    border-color: var(--bs-primary);
    color: inherit;
}
.city-chip:hover {
    background-color: rgba(var(--bs-primary-rgb), .08);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* ---------------------------------------------------------------------------
   2) PAGE VILLE — réagencement SEO
   FAQ + Services sont placés tôt dans le DOM ; on rétablit l'ordre visuel.
   (Bootstrap ne propose order-0..5 et pas de display:contents.)
   --------------------------------------------------------------------------- */
.city-content { display: flex; flex-direction: column; }

.city-content .section--experts   { order: 1; }
.city-content .section--services  { order: 2; }
.city-content .section--maps      { order: 3; }
.city-content .section--why       { order: 4; }
.city-content .section--faq       { order: 5; }
.city-content .section--neighbors { order: 6; }
.city-content .section--top20     { order: 7; }

/* Hero ville : sur mobile/tablette (< lg), le formulaire remonte sous le H1.
   --bs-gutter-x: 0 annule la marge négative de la .row et le padding de colonne ;
   sans ça, .hero-content en display:contents perd le padding de gouttière et le
   contenu (breadcrumb, H1, pitch) se colle au bord gauche. Le .container fournit
   déjà le padding horizontal de la page. */
@media (max-width: 991.98px) {
    .hero-city { display: flex; flex-direction: column; gap: 1rem; --bs-gutter-x: 0; }
    .hero-city .hero-content { display: contents; }
    .hero-city .hero-heading  { order: 1; }
    .hero-city .hero-form-col { order: 2; }
    .hero-city .hero-pitch    { order: 3; }
}