/* ============================================================================
   cherchertrouver.immo — composants additionnels
   ---------------------------------------------------------------------------
   Les tokens de design (couleur primaire, navbar, btn-primary, links) sont
   INLINE dans <style> au sein de layouts/main.ejs — garantit qu'ils sont
   toujours appliqués même en cas de cache navigateur ou de 404 sur ce fichier.

   Ce fichier ne contient que des composants non critiques (cards, grain,
   stat-card, etc.) — si jamais il ne se charge pas, le site reste utilisable.
   ============================================================================ */

/* ---------- Typographie ---------- */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; }
.display-5, .display-6 { letter-spacing: -0.03em; font-weight: 700; }

/* ---------- Animations ----------
   IMPORTANT : `animation-fill-mode: backwards` (et PAS `both`) pour que
   l'élément revienne à son style de base (sans transform) après l'animation.
   Sinon, un transform non-`none` crée un nouveau stacking context — et un
   dropdown absolument positionné (ex: place-autocomplete) serait clippé
   visuellement par les éléments frères qui ont aussi un stacking context. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp 0.6s ease-out backwards;
}
.fade-in-up-delay-1 { animation-delay: 0.1s; }
.fade-in-up-delay-2 { animation-delay: 0.2s; }
.fade-in-up-delay-3 { animation-delay: 0.3s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.float-anim {
  animation: float 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-up, .float-anim { animation: none !important; }
}

/* ---------- Eyebrow label ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0f766e;
  margin-bottom: 0.5rem;
}

/* ---------- Hero avec blobs décoratifs ---------- */
.hero-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
}
.hero-wrap .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}
.hero-wrap .blob-teal {
  width: 380px;
  height: 380px;
  background: #14b8a6;
  opacity: 0.22;
  top: -140px;
  right: -140px;
}
.hero-wrap .blob-warm {
  width: 260px;
  height: 260px;
  background: #f59e0b;
  opacity: 0.18;
  bottom: -100px;
  left: -80px;
}

/* ---------- Testimonial / quote card ---------- */
.quote-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.25rem;
  height: 100%;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}
.quote-card .quote-mark {
  font-size: 2.4rem;
  line-height: 1;
  color: #0f766e;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}
.quote-card .quote-text {
  font-size: 0.95rem;
  color: #0f172a;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.quote-card .quote-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quote-card .avatar-initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* ---------- Number badge (pour les key facts chaleureux) ---------- */
.fact-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem 1.25rem;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.fact-card .fact-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
}
.fact-card .fact-icon.icon-teal { background: #ccfbf1; color: #0f766e; }
.fact-card .fact-icon.icon-warm { background: #fef3c7; color: #b45309; }
.fact-card .fact-icon.icon-sky  { background: #dbeafe; color: #1d4ed8; }

/* ---------- Footer multi-colonnes ---------- */
footer.site-footer {
  background: #0f172a;
  color: #cbd5e1;
  padding: 3rem 0 1.5rem;
  margin-top: auto;
}
footer.site-footer h6 {
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 1rem;
}
footer.site-footer a {
  color: #94a3b8;
  font-size: 0.88rem;
  text-decoration: none;
  display: inline-block;
  padding: 2px 0;
}
footer.site-footer a:hover { color: #5eead4; }
footer.site-footer .footer-brand .brand-tagline {
  color: #94a3b8;
  font-size: 0.88rem;
  max-width: 280px;
  line-height: 1.55;
}
footer.site-footer .bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  color: #64748b;
  font-size: 0.78rem;
}
footer.site-footer .bottom-bar a {
  color: #94a3b8;
  font-size: 0.78rem;
  margin-left: 1rem;
}

/* ---------- Grain ----------
   Utilise un SVG inline en background pour texturer le fond de certaines
   sections. IMPORTANT : `border-radius: inherit` sur le pseudo-element
   garantit que la texture est CLIPÉE aux coins arrondis du parent
   (sinon elle déborde visuellement sur les 4 coins). */
.grain {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
.grain-soft::before { opacity: 0.15; }

/* ---------- Cards hover ---------- */
.card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.card.border:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }

/* ---------- Stat card ---------- */
.stat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  height: 100%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #0f766e;
  line-height: 1.1;
}
.stat-card .stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-top: 0.35rem;
  font-weight: 600;
}

/* ---------- Feature / step card ---------- */
/* ---------- Nav feature links (header Annonces/Carte/Indicateurs) ----------
   Icônes plus grandes avec un fond coloré arrondi, label en gras, et une
   animation de pulse subtile sur hover pour attirer le clic. */
.nav-feature {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem !important;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.nav-feature:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.nav-feature.active {
  background: rgba(13, 148, 136, 0.15);
}
.nav-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.2), rgba(94, 234, 212, 0.15));
  color: #5eead4;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.2s ease;
}
.nav-feature:hover .nav-feature-icon {
  transform: scale(1.12);
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.35), rgba(94, 234, 212, 0.25));
}
.nav-feature.active .nav-feature-icon {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #fff;
}
.nav-feature-label {
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

@media (max-width: 991.98px) {
  .nav-feature {
    padding: 0.6rem 0.75rem !important;
  }
  .nav-feature-icon {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }
}

.feature-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  height: 100%;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.feature-card:hover {
  border-color: #5eead4;
  transform: translateY(-2px);
}
.feature-card .feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #ccfbf1;
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* ---------- City chip ---------- */
.city-card {
  display: block;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
  height: 100%;
}
.city-card:hover {
  border-color: #2dd4bf;
  transform: translateY(-1px);
  color: #0f766e;
}

/* ---------- Hero search (agrandie, design premium) ---------- */
.hero-search-form {
  margin-top: 0.5rem;
}
.hero-input-wrap {
  position: relative;
}
.hero-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--immo-primary-dark, #0f766e);
  font-size: 1.1rem;
  z-index: 2;
  pointer-events: none;
}
.hero-input {
  padding-left: 42px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 1rem !important;
  height: 52px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-input:focus {
  border-color: #5eead4 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}
.hero-input::placeholder { color: #94a3b8; }
.hero-type-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #0f172a;
  background: #fff !important;
}
.hero-type-btn::after { display: none !important; }
.hero-type-chevron {
  font-size: 0.75rem;
  color: #64748b;
  transition: transform 0.2s ease;
}
.hero-type-btn[aria-expanded="true"] .hero-type-chevron {
  transform: rotate(180deg);
}
.hero-search-menu {
  min-width: 260px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  margin-top: 8px !important;
}
.hero-search-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: #0f172a;
  transition: background 0.12s ease, color 0.12s ease;
}
.hero-search-menu .dropdown-item i {
  color: #64748b;
  font-size: 1rem;
  width: 18px;
  text-align: center;
}
.hero-search-menu .dropdown-item:hover,
.hero-search-menu .dropdown-item:focus {
  background: #f0fdfa;
  color: var(--immo-primary-dark, #0f766e);
}
.hero-search-menu .dropdown-item:hover i,
.hero-search-menu .dropdown-item:focus i {
  color: var(--immo-primary-dark, #0f766e);
}
.hero-search-menu .dropdown-item.is-active {
  background: #f0fdfa;
  color: var(--immo-primary-dark, #0f766e);
  font-weight: 600;
}
.hero-search-menu .dropdown-item.is-active i {
  color: var(--immo-primary-dark, #0f766e);
}
.hero-search-btn {
  height: 52px;
  border: 0;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hero-search-btn:hover {
  transform: translateY(-1px);
  color: #fff;
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.42);
}
.hero-search-btn:active {
  transform: translateY(0);
}
.hero-search-btn:focus-visible {
  outline: 3px solid rgba(94, 234, 212, 0.55);
  outline-offset: 2px;
}

/* ---------- Place autocomplete dropdown ----------
   Largeur : min 320px pour afficher le nom complet d'une ville sans
   troncation, même quand l'input parent est étroit (col-md-2 sur la
   page liste). Le dropdown déborde à droite si nécessaire (visible
   grâce au z-index au-dessus des cards/sticky-top).

   max-height ≈ 5 × (~54px par item) + padding, avec scroll interne
   au-delà → on cape visuellement à 5 suggestions pour éviter de
   masquer trop de contenu sous le dropdown.

   z-index: 1035 → au-dessus de .sticky-top (1020) et .sticky-lg-top des
   sidebars, mais en-dessous de .offcanvas (1045) et des modals (1055).
   Même valeur que .dropdown-menu (voir layouts/main.ejs). */
.place-autocomplete {
  /* fixed au lieu de absolute : le dropdown échappe aux overflow:auto
     des conteneurs parents (map sidebar, offcanvas, modals). La position
     est recalculée dynamiquement par le JS (getBoundingClientRect). */
  position: fixed;
  width: max-content;
  min-width: 320px;
  max-width: 480px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1035;
  display: none;
}
@media (max-width: 575.98px) {
  /* Sur mobile le JS cale le dropdown sur la largeur de l'input via
     style.width. On enlève le min-width fixe pour ne pas déborder. */
  .place-autocomplete {
    min-width: 0;
    max-width: calc(100vw - 24px);
  }
}
.place-autocomplete.open {
  display: block;
}
.place-autocomplete-empty {
  padding: 1rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.85rem;
}
.place-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}
.place-autocomplete-item:last-child {
  border-bottom: 0;
}
.place-autocomplete-item:hover,
.place-autocomplete-item.is-active {
  background: #f0fdfa;
}
.place-autocomplete-item .pa-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ccfbf1;
  color: #0f766e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}
.place-autocomplete-item .pa-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.place-autocomplete-item .pa-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.place-autocomplete-item .pa-sub {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.3;
}
.place-autocomplete-item .pa-meta {
  font-size: 0.72rem;
  color: #94a3b8;
  flex-shrink: 0;
  white-space: nowrap;
}
.place-autocomplete-wrap {
  position: relative;
}

/* ---------- API teaser (collapsible) ---------- */
.api-teaser {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.api-teaser:hover,
.api-teaser[aria-expanded="true"] {
  border-color: #2dd4bf;
  background: #f0fdfa;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.06);
}
.api-teaser-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #ccfbf1;
  color: #0f766e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.api-teaser-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.api-teaser-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.95rem;
}
.api-teaser-sub {
  font-size: 0.8rem;
  color: #64748b;
}
.api-teaser-chevron {
  color: #64748b;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.api-teaser[aria-expanded="true"] .api-teaser-chevron {
  transform: rotate(180deg);
  color: #0f766e;
}

/* ---------- Terminal-like code snippet (API section) ---------- */
.code-terminal {
  background: #0f172a;
  color: #cbd5e1;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  padding: 1.5rem;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}
.code-terminal .t-prompt  { color: #0d9488; }
.code-terminal .t-string  { color: #fbbf24; }
.code-terminal .t-key     { color: #5eead4; }
.code-terminal .t-number  { color: #f472b6; }
.code-terminal .t-comment { color: #64748b; }
.code-terminal .term-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 1rem;
}
.code-terminal .term-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

/* ---------- Filter pill ---------- */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  color: #115e59;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ---------- Bandeau cookies ----------
   Floating en bas à droite sur desktop, plein width en bas sur mobile.
   Animé avec translateY + opacity. Caché par défaut, affiché via JS en
   ajoutant la classe `.show`. */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.1rem 1.25rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  z-index: 2000;
  transform: translateY(28px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.cookie-banner.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-banner .cookie-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ccfbf1;
  color: #0f766e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.cookie-banner-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
}
.cookie-banner-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

@media (max-width: 576px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

/* ---------- Bannière "version de test" (POC) ----------
   Strip full-width fixé en bas du viewport, couleur ambre pour tirer
   l'œil sans être agressif. Z-index 1950 (au-dessus du contenu mais
   en-dessous du cookieBanner à 2000 qui peut se superposer au-dessus).
   Quand visible, le body reçoit la classe `.beta-banner-visible` qui
   décale le cookieBanner vers le haut pour éviter l'overlap en
   bas-droite. */
.beta-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1950;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-top: 1px solid #f59e0b;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
  color: #0f172a;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.beta-banner.show {
  transform: translateY(0);
  pointer-events: auto;
}
.beta-banner-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.6rem 3rem 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  position: relative;
}
.beta-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fbbf24;
  color: #78350f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.beta-banner-text {
  flex: 1 1 240px;
  min-width: 0;
  line-height: 1.35;
  color: #451a03;
}
.beta-banner-cta {
  flex-shrink: 0;
  font-weight: 600;
}
.btn-warm {
  background: #f59e0b;
  border: 0;
  color: #fff;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-warm:hover {
  background: #d97706;
  color: #fff;
  transform: translateY(-1px);
}
.btn-warm:focus-visible {
  outline: 3px solid rgba(251, 191, 36, 0.6);
  outline-offset: 2px;
}
.beta-banner-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #78350f;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}
.beta-banner-close:hover {
  background: rgba(120, 53, 15, 0.12);
}
/* Quand les DEUX bandeaux sont visibles, on remonte le cookieBanner
   au-dessus du strip beta pour éviter qu'il chevauche. */
body.beta-banner-visible .cookie-banner {
  bottom: 84px;
}
@media (max-width: 576px) {
  .beta-banner-inner {
    padding: 0.6rem 2.6rem 0.6rem 0.8rem;
    gap: 0.6rem;
  }
  .beta-banner-text {
    flex-basis: 100%;
  }
  .beta-banner-cta {
    width: 100%;
    justify-content: center;
  }
  body.beta-banner-visible .cookie-banner {
    /* Sur mobile, le strip beta peut faire 2-3 lignes → on laisse plus
       de marge au-dessus pour le cookieBanner. */
    bottom: 170px;
  }
}

/* ---------- Widget NPS (feedback "1 to 10 would you recommend") ----------
   Carte flottante bottom-right qui apparaît après 5 visites ou 3 minutes.
   z-index 1960 (au-dessus du strip beta 1950, en-dessous du cookie banner
   2000). Les trois bandeaux peuvent théoriquement coexister : le JS des
   cookies et du beta banner s'affichent dès le 1er visit alors que le NPS
   attend le 5e, donc en pratique les deux premiers sont déjà dismissés
   quand le NPS apparaît. */
.nps-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 340px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.1rem 1.25rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  z-index: 1960;
  transform: translateY(28px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nps-widget.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nps-widget-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
}
.nps-widget-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.nps-widget-body {
  padding-right: 1.5rem;  /* laisse de la place à la croix */
}
.nps-scale {
  display: flex;
  gap: 4px;
  margin: 0.5rem 0 0;
}
.nps-score {
  flex: 1;
  aspect-ratio: 1;
  min-width: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.1s ease;
}
.nps-score:hover {
  background: #f0fdfa;
  border-color: #5eead4;
  color: #0f766e;
  transform: translateY(-1px);
}
.nps-score.is-selected {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}
.nps-score:focus-visible {
  outline: 2px solid rgba(13, 148, 136, 0.4);
  outline-offset: 2px;
}
/* Coexistence avec les autres bandeaux : si le bandeau beta (full-width
   strip) est encore affiché, remonter le NPS au-dessus. */
body.beta-banner-visible .nps-widget {
  bottom: 84px;
}
@media (max-width: 576px) {
  .nps-widget {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
  body.beta-banner-visible .nps-widget {
    bottom: 170px;
  }
}

/* ---------- Messagerie interne ---------- */
.msg-unread {
  background: #f0fdfa;
  position: relative;
}
.msg-unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--immo-primary, #0d9488);
}
.msg-thread {
  max-height: 60vh;
  overflow-y: auto;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg-row {
  display: flex;
}
.msg-row.msg-mine {
  justify-content: flex-end;
}
.msg-row.msg-theirs {
  justify-content: flex-start;
}
.msg-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.msg-mine .msg-bubble {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  border-color: transparent;
  border-bottom-right-radius: 4px;
}
.msg-theirs .msg-bubble {
  border-bottom-left-radius: 4px;
}
.msg-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.92rem;
  line-height: 1.5;
}
.msg-meta {
  margin-top: 4px;
  font-size: 0.68rem;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 6px;
}
.msg-mine .msg-meta {
  justify-content: flex-end;
  color: rgba(255, 255, 255, 0.85);
}
.msg-mine .msg-meta button {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Badge unread dans la navbar (messages + notifs) */
.nav-badge {
  position: absolute;
  top: 2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #dc2626;
  color: #fff;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------- Espace pro : KPIs + chart ---------- */
.pro-kpi {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.pro-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.pro-kpi .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.pro-kpi .value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f766e;
  margin-top: 0.2rem;
  line-height: 1.1;
}
.pro-kpi .sub {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.4rem;
}

/* Bar chart maison — 12 colonnes côte à côte, hauteurs en pourcentage
   via `height:<X>%`. Aucune dépendance JS. Tooltip natif via `title`. */
.pro-chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 6px;
  min-height: 220px;
}
.pro-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.pro-chart-bar-wrap {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pro-chart-bar {
  width: 70%;
  background: linear-gradient(180deg, #2dd4bf 0%, #0d9488 100%);
  border-radius: 6px 6px 0 0;
  transition: opacity 0.15s ease;
  min-height: 0;
}
.pro-chart-col:hover .pro-chart-bar {
  opacity: 0.85;
}
.pro-chart-value {
  font-size: 0.65rem;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}
.pro-chart-label {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .pro-chart { gap: 2px; }
  .pro-chart-value { display: none; }
  .pro-chart-label { font-size: 0.6rem; }
}

/* ---------- Back to top button ----------
   Floating en bas à droite. Apparaît via .visible (ajoutée en JS).
   z-index élevé pour rester au-dessus de tout contenu sticky mais
   sous les modals/offcanvas. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--immo-primary-dark, #0f766e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
  z-index: 1040;
}
.back-to-top:hover {
  background: #115e59;
}
.back-to-top:focus-visible {
  outline: 2px solid #5eead4;
  outline-offset: 3px;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (max-width: 576px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s linear; transform: none; }
}

/* ---------- Éditeur de description (deposit) ----------
   Textarea stylisée + toolbar minimale (bouton Gras). Reste un plain
   textarea : la mise en gras utilise la syntaxe `**texte**` qui est
   rendue au display comme <strong>. Safe (pas de HTML utilisateur). */
.rich-text-editor {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rich-text-editor:focus-within {
  border-color: var(--immo-primary, #0d9488);
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15);
}
.rich-text-editor .rte-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.rich-text-editor .rte-toolbar button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.rich-text-editor .rte-toolbar button:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.rich-text-editor .rte-toolbar .rte-sep {
  flex: 1 1 auto;
  font-size: 0.72rem;
  color: #94a3b8;
  padding-right: 6px;
  text-align: right;
}
.rich-text-editor textarea {
  display: block;
  width: 100%;
  min-height: 130px;
  border: 0;
  outline: none;
  padding: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #0f172a;
  resize: vertical;
  background: #fff;
}
.rich-text-editor textarea::placeholder {
  color: #94a3b8;
}

/* Rendu de la description (show.ejs) : pre-wrap pour préserver
   les sauts de ligne de l'utilisateur, avec <strong> natif pour le gras. */
.annonce-description {
  white-space: pre-wrap;
  line-height: 1.6;
  color: #334155;
}
.annonce-description strong {
  color: #0f172a;
  font-weight: 600;
}

/* ---------- Icônes d'aide (i) dans les formulaires ---------- */
.form-info-icon {
  cursor: help;
  font-size: 0.85rem;
  transition: color 0.15s ease;
}
.form-info-icon:hover {
  color: var(--immo-primary-dark, #0f766e) !important;
}

/* ---------- Drop-zone d'upload (deposit photos) ---------- */
.image-dropzone {
  position: relative;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
}
.image-dropzone:hover {
  border-color: #5eead4;
  background: #f0fdfa;
}
.image-dropzone.is-dragover {
  border-color: var(--immo-primary, #0d9488);
  background: #ccfbf1;
  transform: scale(1.005);
}
.image-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.image-dropzone-inner {
  position: relative;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.image-dropzone-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #ccfbf1;
  color: var(--immo-primary-dark, #0f766e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  transition: transform 0.2s ease;
}
.image-dropzone:hover .image-dropzone-icon,
.image-dropzone.is-dragover .image-dropzone-icon {
  transform: scale(1.08);
}
.image-dropzone-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}
.image-dropzone-subtitle {
  font-size: 0.88rem;
  color: #64748b;
}
.image-dropzone-meta {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.5rem;
}

/* ---------- Prévisualisation d'images (deposit) ----------
   Chaque vignette a deux boutons en overlay : "définir comme principale"
   (étoile en haut-gauche) et "supprimer" (X en haut-droite).
   Badge "Principale" affiché sur la photo active (index 0). */
.image-preview {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.image-preview .ratio {
  border-radius: 10px;
  overflow: hidden;
}
.image-preview .ratio img {
  object-fit: cover;
}
.image-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
.image-preview-actions {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.image-preview-actions > * { pointer-events: auto; }

.image-preview-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
  transition: background 0.12s ease, transform 0.12s ease, color 0.12s ease;
  opacity: 0;
}
.image-preview:hover .image-preview-btn {
  opacity: 1;
}
.image-preview-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  opacity: 1;
}

.image-preview-main {
  background: rgba(255, 255, 255, 0.95);
  color: #f59e0b;
}
.image-preview-main:hover {
  background: #fef3c7;
  color: #d97706;
  transform: scale(1.08);
}

.image-preview-remove {
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
}
.image-preview-remove:hover {
  background: #b91c1c;
  transform: scale(1.08);
}

.image-preview-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.image-preview.is-main {
  outline: 2px solid var(--immo-primary, #0d9488);
  outline-offset: -2px;
}

/* ---------- Badges DPE / GES (échelle A-G) ----------
   Couleurs officielles de l'affichage réglementaire français.
   Utilisés sur les pages détail d'annonce. */
.energy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.energy-badge .energy-letter {
  /* Size OVERRIDE pour la variante détail-annonce (grande). Le base
     `.energy-letter` plus bas fournit display/centrage/font-weight. */
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 0.9rem;
}
.energy-badge .energy-label {
  display: flex;
  flex-direction: column;
  color: #64748b;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
}
.energy-badge .energy-label .energy-value {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #0f172a;
  margin-top: 1px;
}

/* Valeur exacte à côté du titre de l'échelle (ex: "185 kWh/m²/an") */
.energy-scale-value {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
}
/* ----------------------------------------------------------------
   BASE `.energy-letter` — s'applique partout où on met la classe,
   indépendamment du parent (.energy-badge, .annonce-card-dpe, etc.).
   Les classes parentes ne font ensuite qu'OVERRIDE la taille
   (width/height/font-size) pour obtenir une version compacte ou
   étendue selon le contexte.

   IMPORTANT : `display: inline-flex` + `line-height: 1` +
   `flex-shrink: 0` garantissent que la pastille est bien un carré
   de la taille demandée (et pas un span inline qui s'étire à la
   hauteur de la ligne du parent, ce qui causait le bug visible
   sur la liste des annonces où la pastille DPE prenait ~30% de
   l'image au lieu des ~22px attendus).
   ---------------------------------------------------------------- */
.energy-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Couleurs officielles DPE (en vigueur depuis 2021) */
.energy-letter.dpe-A { background: #00A651; }
.energy-letter.dpe-B { background: #50B848; }
.energy-letter.dpe-C { background: #AED136; color: #1a1a1a; }
.energy-letter.dpe-D { background: #FFF200; color: #1a1a1a; }
.energy-letter.dpe-E { background: #FDB814; color: #1a1a1a; }
.energy-letter.dpe-F { background: #F36E22; }
.energy-letter.dpe-G { background: #ED1C24; }

/* Grande échelle verticale pour la page détail (DPE + GES côte à côte) */
.energy-scale {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-width: 220px;
}
.energy-scale-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.energy-scale-row {
  display: flex;
  align-items: stretch;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  transition: opacity 0.15s ease;
  opacity: 0.35;
}
.energy-scale-row.is-active {
  opacity: 1;
  transform: scale(1.03);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
  z-index: 1;
}
.energy-scale-row .scale-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 0.82rem;
  padding: 0 10px;
  min-width: 28px;
}
.energy-scale-row.is-C .scale-letter,
.energy-scale-row.is-D .scale-letter,
.energy-scale-row.is-E .scale-letter {
  color: #1a1a1a;
}
.energy-scale-row .scale-fill {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 0.72rem;
  color: #fff;
  font-weight: 600;
}
.energy-scale-row.is-C .scale-fill,
.energy-scale-row.is-D .scale-fill,
.energy-scale-row.is-E .scale-fill {
  color: #1a1a1a;
}
.energy-scale-row.row-A { background: #00A651; }
.energy-scale-row.row-A .scale-letter { background: #00843d; }
.energy-scale-row.row-B { background: #50B848; width: 92%; }
.energy-scale-row.row-B .scale-letter { background: #3d9438; }
.energy-scale-row.row-C { background: #AED136; width: 84%; }
.energy-scale-row.row-C .scale-letter { background: #8ba82a; }
.energy-scale-row.row-D { background: #FFF200; width: 76%; }
.energy-scale-row.row-D .scale-letter { background: #d9cc00; }
.energy-scale-row.row-E { background: #FDB814; width: 68%; }
.energy-scale-row.row-E .scale-letter { background: #cc9108; }
.energy-scale-row.row-F { background: #F36E22; width: 60%; }
.energy-scale-row.row-F .scale-letter { background: #c3551a; }
.energy-scale-row.row-G { background: #ED1C24; width: 52%; }
.energy-scale-row.row-G .scale-letter { background: #b8141b; }

/* ---------- Annonce card hover ---------- */
.annonce-card {
  overflow: hidden;
  border-radius: 12px;
}
.annonce-card .annonce-card-img {
  transition: transform 0.4s ease;
}
.annonce-card:hover .annonce-card-img {
  transform: scale(1.04);
}

/* ---------- Annonce card cover (image wrapper) ----------
   On implémente l'aspect ratio 4:3 SOI-MÊME via `aspect-ratio: 4/3`
   au lieu de s'appuyer sur Bootstrap `.ratio`. Raison : sur certains
   navigateurs et avec certains layouts flex/grid parents, le
   padding-bottom trick de Bootstrap ne calcule pas correctement la
   hauteur du conteneur — l'image restait alors invisible (parent
   avec `height: 0`).

   Avec `aspect-ratio`, la hauteur est déterminée directement par la
   largeur du conteneur, sans trick CSS. Supporté par tous les
   navigateurs evergreen depuis 2021.

   L'image et le placeholder sont tous les deux en `position: absolute;
   inset: 0` pour remplir 100% du parent. Le placeholder est rendu
   EN PREMIER dans le DOM → il est en fond. L'image est rendue
   APRÈS → elle se superpose en haut (même z-index, paint order).
   Si l'image échoue au chargement, `onerror="this.remove()"` la
   retire → le placeholder redevient visible. */
.annonce-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e2e8f0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.annonce-card-img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  /* z-index explicite pour être bien AU-DESSUS du placeholder */
  z-index: 1;
}
.annonce-card-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  color: #64748b;
}
.annonce-card-placeholder i {
  font-size: 2.4rem;
  opacity: 0.4;
}
.annonce-card-placeholder .small {
  opacity: 0.7;
  font-weight: 500;
}

/* Badge brand "annonce interne" sur la vignette annonce.
   Positionné au-dessus de l'image (z-index:2). */
.annonce-card-brand {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--immo-primary-dark, #0f766e);
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid rgba(13, 148, 136, 0.2);
}
.annonce-card-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--immo-primary-dark, #0f766e);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.annonce-card-brand-text {
  line-height: 1;
  font-weight: 600;
}
.annonce-card-brand-text strong {
  color: var(--immo-dark, #0f172a);
  font-weight: 700;
}
.annonce-card-brand-text .text-accent {
  color: var(--immo-primary-dark, #0f766e);
  font-weight: 600;
}

/* Badge "annonce externe / agrégée" */
.annonce-card-external-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}
.annonce-card-external-badge i {
  font-size: 0.7rem;
}

/* Variante externe : on indique visuellement que le clic quitte le site */
.annonce-card-external:hover {
  border-color: #cbd5e1;
}
.annonce-card-internal:hover {
  border-color: #5eead4;
}

/* Badge DPE compact sur la carte d'annonce (liste) :
   positionné top-right par-dessus l'image. */
.annonce-card-dpe {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 3px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  line-height: 1;
  max-width: calc(100% - 16px);
}
.annonce-card-dpe .energy-letter {
  /* SIZE OVERRIDE — le base .energy-letter assure le display:inline-flex */
  width: 22px;
  height: 22px;
  font-size: 0.78rem;
  border-radius: 4px;
}
.annonce-card-dpe-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- Page carte (layout pleine hauteur) ---------- */
body.page-map {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
body.page-map footer { display: none; }
body.page-map main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.map-layout {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .map-sidebar {
    width: 300px;
    min-width: 300px;
    overflow-y: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .map-mobile-toolbar { display: none !important; }
}

.map-canvas {
  flex: 1 1 0%;
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.map-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 16px rgba(15, 23, 42, 0.08);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0.2s;
  z-index: 500;
  display: flex;
  flex-direction: column;
}
.map-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15, 23, 42, 0.7);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  pointer-events: none;
  transition: opacity 0.3s;
}
.map-loader.d-none { opacity: 0; }

.map-panel.open { transform: translateX(0); visibility: visible; }
.map-panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  flex-shrink: 0;
}
.map-panel-body { flex: 1 1 auto; overflow-y: auto; }

.leaflet-interactive.immo-point {
  transition: stroke-width 0.12s ease;
  cursor: pointer;
}
.leaflet-interactive.immo-point:hover { stroke-width: 3px; }

.marker-cluster-small, .marker-cluster-small div,
.marker-cluster-medium, .marker-cluster-medium div,
.marker-cluster-large, .marker-cluster-large div {
  background-color: rgba(15, 118, 110, 0.85);
  color: #fff;
}
.marker-cluster div { font-weight: 600; font-family: inherit; }
.leaflet-container { font-family: inherit; }

@media (max-width: 767.98px) {
  .map-layout { flex-direction: column; }
  .map-mobile-toolbar {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 700;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  /* Compensation de la toolbar fixe pour que la carte ne soit pas cachée dessous */
  .map-canvas { margin-top: 42px; }
  .map-sidebar.offcanvas-md { z-index: 1050; }
  .map-panel {
    width: 85%;
    max-width: 400px;
    z-index: 1035;
    top: 56px; /* hauteur du header mobile */
  }
}

/* ---------- Fun Facts Carousel (homepage) ---------- */
.fun-fact-item {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.fun-fact-item.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fun-fact-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--immo-border, #e2e8f0);
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.fun-fact-dot.active {
  background: var(--immo-primary, #0d9488);
  transform: scale(1.3);
}
.fun-fact-dot:hover { background: var(--immo-primary-dark, #0f766e); }