.background-card {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card {
  margin-bottom: 10px; /* Ajoute de l'espace en dessous de chaque carte */
}

.highlight-card {
    background-color: rgba(255, 255, 0, 0.5); /* Fond jaune avec 50% de transparence */
}


.jumbotron {
  background-color: #e9ecef;
}


.google-map-placeholder {
  background-color: #f0f0f0;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  font-size: 20px;
  border: 1px solid #ddd;
}


.social-icons i {
  font-size: 24px; /* Augmente la taille de l'icône */
  color: #007bff; /* Change la couleur de l'icône en bleu */
  margin-right: 10px; /* Ajoute un espace entre les icônes */
}


.btn-primary {
  margin-bottom: 0.5rem; /* Ajoute un espace en bas de chaque bouton */
}



.navbar .btn-primary {
  margin-bottom: 0;
}


.custom-jumbotron {
  padding-top: 10px;
  padding-bottom: 1px;
}


.h1listing {
  font-size: 1.5rem;
}

.navbar-nav .nav-item {
  margin-left: 4px; /* espacement resserré pour tenir sur une ligne */
}

/* Filet de sécurité : aucun libellé de la navbar ne casse sur deux lignes
   (Bootstrap 5 ne met pas white-space:nowrap sur .btn). */
.navbar .nav-link,
.navbar .btn {
  white-space: nowrap;
}

/* ============================================
   HEADER REFONTE - Styles pour la navigation
   ============================================ */

/* Barre de recherche avec icône */
.search-wrapper {
  position: relative;
  display: inline-block;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  z-index: 1;
  pointer-events: none;
}

.search-input {
  padding-left: 40px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 400px;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-input:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
}

/* Ajustements pour la barre de recherche dans la navbar */
.navbar-nav .nav-item .search-wrapper {
  margin-left: 10px;
}

/* Mobile search container */
.mobile-search-container {
  padding: 12px 0;
}

.mobile-search-container .search-wrapper {
  width: 100%;
}

.mobile-search-container .search-input {
  max-width: 100%;
  width: 100%;
}

/* Hiérarchie des boutons CTA */
.navbar-cta-primary {
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  transition: all 0.2s ease;
}

.navbar-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.navbar-cta-secondary {
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  transition: all 0.2s ease;
  border-width: 2px;
}

.navbar-cta-secondary:hover {
  background-color: rgba(25, 135, 84, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2);
}

/* Menu latéral mobile */
.mobile-side-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background-color: #212529;
  z-index: 1050;
  transition: right 0.3s ease;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

.mobile-side-menu.active {
  right: 0;
}

.mobile-side-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1049;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-side-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-side-menu-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-side-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-side-menu-header h5 {
  color: white;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.mobile-side-menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.mobile-side-menu-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-menu-link {
  display: block;
  padding: 1rem 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 1rem;
}

.mobile-menu-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  padding-left: 2rem;
}

.mobile-menu-link.btn-link {
  color: rgba(255, 255, 255, 0.8);
}

.mobile-menu-link.btn-link:hover {
  color: white;
}

/* Ajustements responsive pour les boutons */
@media (max-width: 767.98px) {
  .navbar-cta-primary {
    font-size: 0.875rem;
    padding: 0.4rem 1rem;
  }
  
  .navbar-brand {
    font-size: 1rem;
  }
}

/* Amélioration de l'espacement dans la navbar */
.navbar {
  padding: 0.75rem 1rem;
}

.navbar-nav .nav-link {
  padding: 0.5rem 0.7rem;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Masquer le collapse Bootstrap sur mobile très petit pour utiliser le menu latéral */
@media (max-width: 767.98px) {
  #navbarNav.collapse {
    display: none !important;
  }
  
  #navbarNav.collapse.show {
    display: none !important;
  }
}

/* ============================================
   AUTOCOMPLETE VILLE - Dropdown
   ============================================ */

[data-controller="city-search"] {
  position: relative;
}

.city-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1060;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 320px;
  overflow-y: auto;
  display: none;
}

.city-search-results.open {
  display: block;
}

.city-search-results li {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #212529;
  border-bottom: 1px solid #f0f0f0;
}

.city-search-results li:last-child {
  border-bottom: none;
}

.city-search-results li:hover,
.city-search-results li.active {
  background-color: #f8f9fa;
}

.city-search-results .no-results {
  padding: 10px 16px;
  color: #6c757d;
  font-size: 0.9rem;
  cursor: default;
}

/* Styles for the map overlay and popup */

/* Mobile: fullscreen overlay triggered by button */
.map-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Hidden on mobile by default, toggled via JS */
.map-hidden-mobile {
  display: none !important;
}

.map-popup {
  background: white;
  border-radius: 10px;
  width: 90%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  position: relative;
}

.map-popup #close-map-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 1;
}

/* Desktop: inline sticky map in right column */
@media (min-width: 768px) {
  .map-overlay {
    position: sticky !important;
    top: 10px;
    margin-bottom: 1rem;
    height: 90vh;
    overflow: hidden;
    background: #fff;
  }

  /* Show the map on desktop — override mobile hide */
  .map-hidden-mobile {
    display: flex !important;
  }

  .map-popup {
    width: 100%;
    max-width: none;
  }

  .map-popup #close-map-btn {
    display: none;
  }
}

/* ============================================
   AUTOCOMPLETE ADRESSE LEAD - Dropdown
   (fond sombre pour le formulaire de devis)
   ============================================ */

.lead-address-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1060;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}

.lead-address-results.open {
  display: block;
}

.lead-address-results li {
  padding: 10px 16px;
  cursor: pointer;
  color: #fff;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lead-address-results li:last-child {
  border-bottom: none;
}

.lead-address-results li:hover,
.lead-address-results li.active {
  background-color: rgba(255, 255, 255, 0.2);
}

.lead-address-results li.no-results {
  color: rgba(255, 255, 255, 0.6);
  cursor: default;
}

/* Variante claire du dropdown (formulaire entreprise sur fond blanc) */
.lead-address-results.light {
  background: #fff;
  border: 1px solid #dee2e6;
  box-shadow: 0 8px 24px rgba(15, 39, 68, 0.12);
}

.lead-address-results.light li {
  color: #212529;
  border-bottom: 1px solid #f1f3f5;
}

.lead-address-results.light li:hover,
.lead-address-results.light li.active {
  background-color: #eef3fa;
}

.lead-address-results.light li.no-results {
  color: #6c757d;
}

/* ============================================
   DASHBOARD PRO - refonte UX (CRA-173)
   Contraste WCAG AA + couleur d'étape robuste (variable CSS)
   ============================================ */
.dashboard-pro { background-color: #f5f7fa; min-height: 100vh; }
.dashboard-pro .card {
  border: 1px solid #eaecf0;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
  border-radius: .75rem;
}
/* Titre de section : liseré bleu + texte foncé (#344054 ~8.9:1 sur blanc) */
.dashboard-pro .dash-section-title {
  font-size: .9375rem;
  font-weight: 700;
  color: #344054;
  padding-left: .625rem;
  border-left: 3px solid #1b66ff;
  margin-bottom: .5rem;
}
/* Bandeau action accentué */
.dashboard-pro .dash-action { background-color: #eef4ff; border-left: 4px solid #1b66ff !important; }
.dashboard-pro .dash-stale { background-color: #fff8e6; }
.dashboard-pro .dash-stale-text { color: #7a4f01; }
/* Tuiles de stats */
.dashboard-pro .dash-stat {
  background: #f9fafb;
  border: 1px solid #eaecf0;
  border-radius: .625rem;
  padding: .875rem .5rem;
  height: 100%;
}
/* Lignes chantier : couleur d'étape pilotée par --ws-color (robuste vs clés d'enum) */
.dashboard-pro .ws-card {
  background: #fff;
  border: 1px solid #eaecf0;
  border-left: 4px solid var(--ws-color, #1b66ff);
  border-radius: .625rem;
  transition: box-shadow .15s, transform .15s;
  text-decoration: none;
}
.dashboard-pro .ws-card:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .12); transform: translateY(-1px); }
.dashboard-pro .ws-card.is-stale { background: #fff8e6; }
.dashboard-pro .min-w-0 { min-width: 0; }

/* Onboarding pro (CRA-156) : bandeau d'accueil + empty-state pipeline + parcours guidé */
.dashboard-pro .dash-onboarding { background-color: #eef4ff; }
.dashboard-pro .dash-onboarding__icon { font-size: 1.75rem; line-height: 1; }
.dashboard-pro .dash-empty { background-color: #f9fafb; }
.dashboard-pro .dash-pipeline__step { border: 1px solid #eaecf0; }
.dashboard-pro .dash-pipeline__icon { font-size: 1.375rem; line-height: 1; }

/* Fil d'étapes de l'onboarding (pages /espace-pro/bienvenue) */
.onboarding-steps { margin: 0; padding: 0; }
.onboarding-step { color: #98a2b3; }
.onboarding-step:not(:last-child)::after {
  content: "";
  width: 1.25rem; height: 2px;
  background: #e4e7ec;
  display: inline-block;
}
.onboarding-step__bullet {
  width: 1.5rem; height: 1.5rem;
  font-size: .75rem; font-weight: 700;
  background: #e4e7ec; color: #475467;
}
.onboarding-step--current { color: #1b66ff; }
.onboarding-step--current .onboarding-step__bullet { background: #1b66ff; color: #fff; }
.onboarding-step--done { color: #12814f; }
.onboarding-step--done .onboarding-step__bullet { background: #12814f; color: #fff; }
.onboarding-howto__icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.onboarding-zone-count .display-6 { color: #1b66ff; }

/* ============================================
   ACCESSIBILITÉ (CRA-186)
   ============================================ */
/* Lien d'évitement : invisible jusqu'au focus clavier, puis bien visible. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  margin: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: #fff;
  color: #0d6efd;
  border: 2px solid #0d6efd;
  border-radius: 0.375rem;
  font-weight: 600;
}
/* Focus clavier toujours visible sur les liens et boutons (CRA-241/243). */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #1b66ff;
  outline-offset: 2px;
  border-radius: 2px;
}
/* Contraste AA du bouton vert sur la navbar sombre (vert clair ; hover Bootstrap inchangé). */
.navbar .btn-outline-success {
  --bs-btn-color: #6ee7a8;
  --bs-btn-border-color: #6ee7a8;
}
/* Terme technique survolable lié au glossaire (CRA-221). */
.glossary-term {
  border-bottom: 1px dotted #6c757d;
  cursor: help;
  text-decoration: none;
}
/* Terme/acronyme de glossaire balisé explicitement dans les guides /c/ (CRA-221).
   Soulignement pointillé discret pour signaler qu'une explication existe ; l'info-bulle
   est portée par l'attribut title natif (survol + focus clavier, sans JavaScript). */
.terme-glossaire {
  position: relative;
  border-bottom: 1px dotted currentColor;
  cursor: help;
  text-decoration: none;
}
/* Info-bulle CSS instantanée (data-tip) : s'affiche sans le délai du title natif. */
.terme-glossaire::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 60;
  width: max-content;
  max-width: 280px;
  white-space: normal;
  background: #0f2744;
  color: #fff;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(2, 28, 57, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.05s linear;
}
.terme-glossaire:hover::after,
.terme-glossaire:focus::after,
.terme-glossaire:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
/* Focus clavier visible : l'info-bulle est atteignable au Tab (tabindex="0"). */
.terme-glossaire:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: 2px;
}
/* Impression soignée du suivi de demande (espace client). Masque la navigation et les
   éléments interactifs, évite les coupures de cartes. Permet d'archiver ou de transmettre
   son dossier sur papier (syndic, assurance). */
@media print {
  .navbar { display: none !important; }
  .ec-printable nav[aria-label="Sommaire de la demande"],
  .ec-printable form,
  .ec-printable .btn,
  .ec-printable details > summary { display: none !important; }
  .ec-printable details > *:not(summary) { display: block !important; }
  .ec-printable .card { break-inside: avoid; border: 1px solid #ccc !important; }
  .ec-printable { max-width: 100% !important; }
}

/* Espace client : simplification du workflow (CRA-156). Sort les saisies ponctuelles du
   chemin de scroll vers les devis, garde l'action prioritaire sous la main et corrige
   l'ancrage des liens internes (aujourd'hui masqués par la navbar collante). */

/* Décalage d'ancrage : sommaire, complétude et « Prochaine étape » ne doivent plus
   atterrir sous la navbar (.sticky-top, z-index 1020) ni sous la barre d'action collante.
   :where() garde une spécificité nulle (n'écrase rien). */
.ec-printable :where([id]) { scroll-margin-top: 7rem; }

/* Barre « Prochaine étape » collante : le CTA du moment reste visible pendant tout le
   scroll. Passe sous la navbar (top = hauteur navbar ; z-index strictement inférieur). */
.ec-sticky-actions {
  position: sticky;
  top: 56px;
  z-index: 1019;
  background: #fff;
}
.ec-sticky-actions .alert { margin-bottom: .75rem; }
.ec-sticky-actions .btn { margin-bottom: 0; }

/* Sections de profil repliables : accordéon léger avec marqueur personnalisé. */
details.ec-collapsible { border: 1px solid #e9ecef; }
details.ec-collapsible > summary {
  list-style: none;
  padding: .85rem 1rem;
  cursor: pointer;
}
details.ec-collapsible > summary::-webkit-details-marker { display: none; }
details.ec-collapsible > summary::before {
  content: "\25B8"; /* triangle vers la droite */
  margin-right: .4rem;
  color: #6c757d;
}
details.ec-collapsible[open] > summary::before { content: "\25BE"; } /* triangle vers le bas */
details.ec-collapsible > .ec-section-body { padding: 0 1rem 1rem; }

/* Comparatif de devis : sur mobile (défilement horizontal des installateurs), la colonne
   des critères reste figée à gauche, sinon les valeurs deviennent illisibles. */
.ec-compare-table th[scope="row"],
.ec-compare-table thead th:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

@media print {
  .ec-sticky-actions { position: static !important; }
}