/* ============================================================
   SIKA IMMO — Design System Minimal
   Inspiré du template Minimal : espaces, typographie, sobriété
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* --- Tokens CSS --- */
:root {
  /* Couleurs */
  --sika-white:          #FFFFFF;
  --sika-bg:             #F8F9FB;
  --sika-text:           #111827;
  --sika-text-muted:     #6B7280;
  --sika-border:         #E5E7EB;
  --sika-primary:        #0F766E;
  --sika-primary-light:  #CCFBF1;
  --sika-primary-dark:   #0D5D57;
  --sika-accent:         #F59E0B;
  --sika-on-primary:     #FFFFFF;
  --sika-muted-bg:       #F3F4F6;
  --sika-card:           #FFFFFF;
  /* Ombres — échelle premium */
  --sika-shadow-sm:      0 1px 2px rgba(17,24,39,.05);
  --sika-shadow:         0 8px 20px rgba(17,24,39,.07);
  --sika-shadow-md:      0 16px 32px rgba(17,24,39,.10);
  --sika-shadow-lg:      0 28px 56px rgba(17,24,39,.14);
  --sika-shadow-primary: 0 14px 28px rgba(15,118,110,.24);
  /* Dégradés */
  --sika-gradient-primary: linear-gradient(135deg, var(--sika-primary) 0%, var(--sika-primary-dark) 100%);
  --sika-gradient-dark:    linear-gradient(135deg, #0B2B27 0%, #0F766E 100%);
  /* Typographie */
  --sika-font:           'Montserrat', system-ui, sans-serif;
  --sika-font-display:   'Fraunces', Georgia, serif;
  /* Rayon — plus doux pour un rendu premium */
  --sika-radius:         6px;
  --sika-radius-md:      12px;
  --sika-radius-lg:      22px;
  /* Espacement */
  --sika-gap:            1.5rem;
  /* Transitions */
  --sika-transition:     .2s ease;
  --sika-transition-lg:  .35s cubic-bezier(.22,1,.36,1);
}

/* --- Reset minimal --- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--sika-border); }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--sika-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sika-text);
  background: var(--sika-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sika-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 600; line-height: 1.25; color: var(--sika-text); }
p { margin: 0 0 1rem; }
ul { list-style: none; padding: 0; margin: 0; }
button { font-family: var(--sika-font); cursor: pointer; }

/* --- Conteneur --- */
.sika-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) { .sika-container { padding: 0 2rem; } }

/* ============================================================
   HEADER STICKY
   ============================================================ */
.sika-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--sika-border);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(15,23,42,.04);
}
.sika-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  gap: 1.5rem;
}

/* Logo */
.sika-logo { display: flex; align-items: center; flex-shrink: 0; }
.sika-logo img,
.sika-logo a { transition: opacity .2s ease, transform .2s ease; }
.sika-logo img:hover,
.sika-logo a:hover { opacity: .85; transform: translateY(-1px); }
.sika-logo img { height: 2.25rem; width: auto; }
.sika-logo-text {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--sika-text);
  text-decoration: none;
}
.sika-logo-text span { color: var(--sika-primary); }

/* Navigation desktop */
.sika-nav {
  display: none;
  align-items: center;
  gap: 2rem;
  flex: 1;
  justify-content: center;
}
.sika-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--sika-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.sika-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--sika-primary);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.sika-nav a:hover,
.sika-nav a.current-menu-item,
.sika-nav li.current-menu-item > a,
.sika-nav li.current_page_item > a,
.sika-nav li.current-menu-parent > a {
  color: var(--sika-primary);
}
.sika-nav a:hover::after,
.sika-nav a.current-menu-item::after,
.sika-nav li.current-menu-item > a::after,
.sika-nav li.current_page_item > a::after,
.sika-nav li.current-menu-parent > a::after {
  width: 100%;
}
@media (min-width: 1024px) { .sika-nav { display: flex; } }

/* Sous-menus déroulants (Apparence > Menus, éléments imbriqués) */
.sika-nav-item { position: relative; list-style: none; }
.sika-has-dropdown > a > svg { transition: transform .2s ease; }
.sika-has-dropdown:hover > a > svg,
.sika-has-dropdown:focus-within > a > svg { transform: rotate(180deg); }
.sika-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 210px;
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: var(--sika-white);
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  box-shadow: 0 16px 32px rgba(15,23,42,.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.sika-has-dropdown:hover > .sika-dropdown,
.sika-has-dropdown:focus-within > .sika-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.sika-dropdown li { list-style: none; }
.sika-dropdown a {
  display: block;
  padding: .625rem .875rem;
  border-radius: var(--sika-radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--sika-text);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.sika-dropdown a::after { display: none; }
.sika-dropdown a:hover { background: var(--sika-bg); color: var(--sika-primary); }

/* Actions header */
.sika-header-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

/* Bouton hamburger */
.sika-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius);
  background: transparent;
  color: var(--sika-text);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.sika-hamburger:hover {
  background: var(--sika-primary-light);
  border-color: var(--sika-primary);
  color: var(--sika-primary);
}
.sika-hamburger[aria-expanded="true"] {
  background: var(--sika-primary);
  border-color: var(--sika-primary);
  color: var(--sika-on-primary);
}
@media (min-width: 1024px) { .sika-hamburger { display: none; } }

/* Mobile menu */
.sika-mobile-nav {
  display: none;
  flex-direction: column;
  padding: 1rem 0;
  border-top: 1px solid var(--sika-border);
  background: var(--sika-white);
}
.sika-mobile-nav.is-open { display: flex; }
.sika-mobile-nav a {
  padding: .75rem 0;
  font-weight: 500;
  color: var(--sika-text);
  border-bottom: 1px solid var(--sika-bg);
}
/* Élément de menu mobile avec sous-menu : ligne parent + flèche, le
   sous-menu étant replié tant qu'on ne clique/survole pas la flèche. */
.sika-mobile-item > .sika-mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border-bottom: 1px solid var(--sika-bg);
}
.sika-mobile-row > a {
  flex: 1;
  padding: .75rem 0;
  border-bottom: 0;
}
.sika-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--sika-text-muted);
  cursor: pointer;
}
.sika-mobile-toggle svg { transition: transform .2s ease; }
.sika-mobile-item.is-open > .sika-mobile-row .sika-mobile-toggle svg { transform: rotate(180deg); }
.sika-mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.sika-mobile-item.is-open > .sika-mobile-submenu,
.sika-mobile-item:has(.sika-mobile-toggle:focus-visible) > .sika-mobile-submenu {
  max-height: 30rem;
}
/* Ouverture au survol réservée aux appareils qui ont vraiment un pointeur
   (souris, trackpad) : sur un téléphone tactile, un simple tap laisse
   souvent l'état :hover "collé" sans déclencher is-open — le sous-menu
   restait alors visible alors que la flèche, elle, ne tournait pas
   (pilotée uniquement par is-open), incohérence qui donnait l'impression
   d'un menu à moitié cassé. */
@media (hover: hover) {
  .sika-mobile-item:hover > .sika-mobile-submenu { max-height: 30rem; }
}
.sika-mobile-nav a.sika-mobile-sub {
  display: block;
  padding: .625rem 0 .625rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--sika-text);
  border-bottom: 1px solid var(--sika-bg);
  position: relative;
}
.sika-mobile-nav a.sika-mobile-sub::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--sika-primary);
}
.sika-mobile-nav a:active,
.sika-mobile-row:active,
.sika-mobile-toggle:active {
  background: var(--sika-bg);
}

/* ============================================================
   BOUTONS
   ============================================================ */
.sika-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6875rem 1.375rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--sika-radius-md);
  border: 1px solid transparent;
  transition: background var(--sika-transition), color var(--sika-transition), border-color var(--sika-transition), transform var(--sika-transition), box-shadow var(--sika-transition);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
}
.sika-btn-primary {
  background: var(--sika-primary);
  color: var(--sika-on-primary);
  border-color: var(--sika-primary);
  box-shadow: 0 1px 2px rgba(15,118,110,.15);
}
.sika-btn-primary:hover {
  background: var(--sika-primary-dark);
  border-color: var(--sika-primary-dark);
  color: var(--sika-on-primary);
  transform: translateY(-1px);
  box-shadow: var(--sika-shadow-primary);
}
.sika-btn-outline {
  background: transparent;
  color: var(--sika-primary);
  border-color: var(--sika-primary);
}
.sika-btn-outline:hover {
  background: var(--sika-primary-light);
  transform: translateY(-1px);
}
.sika-btn-ghost {
  background: transparent;
  color: var(--sika-text);
  border-color: var(--sika-border);
}
.sika-btn-ghost:hover {
  background: var(--sika-bg);
  border-color: var(--sika-primary);
  color: var(--sika-primary);
  transform: translateY(-1px);
}

/* Bouton icône circulaire (compte, favoris...) */
.sika-icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}
.sika-icon-btn:hover {
  background: var(--sika-primary) !important;
  border-color: var(--sika-primary) !important;
  color: var(--sika-on-primary) !important;
  box-shadow: var(--sika-shadow-primary);
  transform: translateY(-2px) scale(1.05);
}
.sika-btn-accent {
  background: var(--sika-accent);
  color: var(--sika-text);
  border-color: var(--sika-accent);
}
.sika-btn-whatsapp {
  background: #25D366;
  color: #ffffff;
  border-color: #25D366;
  box-shadow: 0 1px 2px rgba(37,211,102,.25);
}
.sika-btn-whatsapp:hover {
  background: #1EBE5A;
  border-color: #1EBE5A;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37,211,102,.35);
}
.sika-btn-sm  { padding: .4rem .875rem; font-size: .8125rem; }
.sika-btn-lg  { padding: .875rem 2rem; font-size: 1rem; }
.sika-btn-block { width: 100%; }
.sika-btn-icon { padding: .5rem; }

/* Séparateur "ou" entre le bouton WhatsApp et le formulaire de contact */
.sika-form-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: var(--sika-text-muted);
  font-size: .8125rem;
}
.sika-form-divider::before,
.sika-form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sika-border);
}

/* ============================================================
   BADGES
   ============================================================ */
.sika-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .625rem;
  border-radius: 9999px;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sika-badge-sale     { background: var(--sika-primary-light); color: var(--sika-primary-dark); }
.sika-badge-rent     { background: #DBEAFE; color: #1D4ED8; }
.sika-badge-sold     { background: #FEE2E2; color: #B91C1C; }
.sika-badge-rented   { background: #F3E8FF; color: #7C3AED; }
.sika-badge-featured { background: var(--sika-accent); color: var(--sika-text); }
.sika-badge-neutral  { background: var(--sika-muted-bg); color: var(--sika-text-muted); }

/* ============================================================
   CARDS — biens immobiliers
   ============================================================ */
.sika-property-card {
  background: var(--sika-card);
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--sika-transition-lg), box-shadow var(--sika-transition-lg), transform var(--sika-transition-lg);
}
.sika-property-card:hover {
  border-color: transparent;
  box-shadow: var(--sika-shadow-md);
  transform: translateY(-4px);
}
.sika-property-card-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--sika-muted-bg);
}
.sika-property-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.sika-property-card:hover .sika-property-card-image img { transform: scale(1.04); }
.sika-property-card-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.sika-property-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.sika-property-card-title {
  font-size: .9375rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sika-text);
  margin-bottom: .25rem;
}
.sika-property-card-title a { color: inherit; }
.sika-property-card-title a:hover { color: var(--sika-primary); text-decoration: none; }
.sika-property-card-location {
  font-size: .8125rem;
  color: var(--sika-text-muted);
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: .75rem;
}
.sika-property-card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .8125rem;
  color: var(--sika-text-muted);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--sika-bg);
}
.sika-property-card-meta span { display: flex; align-items: center; gap: .3rem; }
.sika-property-card-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sika-primary);
  margin-left: auto;
}
.sika-property-card-ref {
  font-size: .75rem;
  color: var(--sika-text-muted);
  margin-top: .25rem;
}

/* ============================================================
   GRILLES
   ============================================================ */
.sika-grid-auto {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.sika-grid-2 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
.sika-grid-3 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
.sika-grid-4 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .sika-grid-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px)  { .sika-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .sika-grid-3 { grid-template-columns: repeat(3,1fr); } .sika-grid-4 { grid-template-columns: repeat(4,1fr); } }
/* Une carte de grille (titre/texte éditable depuis Elementor) ne doit
   jamais forcer sa colonne à s'élargir hors du cadre : par défaut une
   grille garde la largeur du contenu le plus long (ex : un mot long sans
   espace), d'où un débordement sur mobile. min-width:0 laisse la colonne
   rétrécir, overflow-wrap fait alors vraiment céder le texte. */
.sika-grid-auto > *, .sika-grid-2 > *, .sika-grid-3 > *, .sika-grid-4 > * { min-width: 0; }
.sika-property-card { overflow-wrap: anywhere; }

/* Vue "liste" du catalogue (bouton ☰ à côté du tri) : le JS bascule juste
   une classe sur .sika-properties-grid, mais aucun style n'existait encore
   pour la mettre en forme — le bouton ne "faisait" donc rien visuellement.
   Une colonne unique, chaque carte en ligne (photo à gauche, infos à
   droite) plutôt qu'empilée. */
.sika-properties-grid.sika-list-view {
  grid-template-columns: minmax(0, 1fr);
}
.sika-list-view .sika-property-card {
  flex-direction: row;
}
.sika-list-view .sika-property-card-image {
  width: 15rem;
  flex-shrink: 0;
  aspect-ratio: auto;
}
.sika-list-view .sika-property-card-body {
  min-width: 0;
}
.sika-list-view .sika-property-card-title { white-space: normal; }
@media (max-width: 640px) {
  /* Photo à gauche + texte à droite n'a plus la place de respirer sur un
     petit écran : on repasse la carte en pile (comme la vue grille). */
  .sika-list-view .sika-property-card { flex-direction: column; }
  .sika-list-view .sika-property-card-image { width: 100%; aspect-ratio: 4/3; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sika-section { padding: 4rem 0; }
.sika-section-sm { padding: 2.5rem 0; }
.sika-section-muted { background: var(--sika-bg); }
.sika-section-header { margin-bottom: 2.5rem; }
.sika-section-title {
  font-family: var(--sika-font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: 1.625rem;
  margin-bottom: .5rem;
}
@media (min-width: 768px) { .sika-section-title { font-size: 2.125rem; } }
.sika-section-subtitle { color: var(--sika-text-muted); max-width: 36rem; }

/* Eyebrow — petit label au-dessus des titres de section */
.sika-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sika-primary);
  margin-bottom: .75rem;
}
.sika-eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background: var(--sika-accent);
  display: inline-block;
  flex-shrink: 0;
}
.sika-text-center .sika-eyebrow { justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.sika-hero {
  position: relative;
  /* Plein écran quel que soit le conteneur Elementor (boxed ou non) qui
     l'entoure : le Hero — et donc l'image qu'il porte en arrière-plan —
     doit toujours occuper toute la largeur de l'écran, jamais une largeur
     de colonne restreinte, pour que le contenu (titre, étiquette, etc.)
     ait toute la place voulue pour s'ajuster sur mobile. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 540px;
  display: flex;
  align-items: center;
  background: var(--sika-bg);
  overflow: hidden;
}
@media (min-width: 768px) { .sika-hero { min-height: 640px; } }
.sika-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sur mobile, le Hero est bien plus haut que large (proche du carré,
     parfois plus) : recadrer sur le centre pur (réglage par défaut) montre
     souvent surtout le bas de la photo (sol, zone plus terne) plutôt que
     le sujet principal. Recadrer plus haut règle ça pour la grande
     majorité des photos d'intérieur/façade, sans dépendre de l'image
     choisie. */
  object-position: center 25%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.sika-hero-bg.is-active { opacity: 1; } /* la 1ère image porte cette classe dès le rendu PHP : pas d'écran vide avant le script */
.sika-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(6,20,18,.82) 0%, rgba(6,20,18,.45) 55%, rgba(6,20,18,.18) 100%);
  z-index: 1;
}
/* Hero simple (À propos, Services...) : sur mobile, une photo large
   recadrée dans un cadre bien plus haut que large ne peut presque pas être
   rognée en hauteur par object-fit:cover (le rognage se fait surtout sur
   les côtés) — le bas de la photo (souvent le sol, une zone plus terne)
   reste donc quasiment toujours visible, quel que soit l'object-position.
   Un fondu sombre en bas — motif courant et volontaire sur ce type de
   bannière — rend n'importe quelle photo présentable, sans dépendre de son
   contenu précis. */
.sika-hero-simple .sika-hero-overlay {
  background:
    linear-gradient(180deg, transparent 45%, rgba(6,20,18,.8) 100%),
    linear-gradient(120deg, rgba(6,20,18,.82) 0%, rgba(6,20,18,.45) 55%, rgba(6,20,18,.18) 100%);
}
.sika-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 4rem 0;
}
@media (max-width: 640px) {
  /* Un padding fixe de 4rem en haut ET en bas, cumulé à un titre/sous-titre
     qui prend plus de lignes sur un écran étroit, rendait le Hero bien
     plus haut que son min-height de base sur mobile — obligeant l'image de
     fond à couvrir une zone bien plus grande que prévu, ce qui exposait
     davantage la partie la moins intéressante de la photo. */
  .sika-hero-content { padding: 2.5rem 0; }
}
/* Le Hero de l'Accueil (étiquette + titre + sous-titre + barre de
   recherche + badges de confiance) a bien plus de contenu que les Hero
   "simples" des autres pages (À propos, Services : juste étiquette + titre
   + sous-titre). Un seul padding partagé était forcément un compromis pour
   les deux — trop généreux pour un Hero simple (donc une image de fond
   plus haute que nécessaire, exposant plus souvent une zone moins
   intéressante de la photo), ou trop juste pour l'Accueil. Ils sont
   maintenant réglés indépendamment via .sika-hero-simple.  */
.sika-hero-simple .sika-hero-content { padding: 2.5rem 0; }
@media (max-width: 640px) {
  .sika-hero-simple .sika-hero-content { padding: 1.75rem 0; }
}
.sika-hero-content .sika-eyebrow { color: #5EEAD4; }
.sika-hero-content .sika-eyebrow::before { background: var(--sika-accent); }
.sika-hero-title {
  font-family: var(--sika-font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: 2.125rem;
  color: #fff;
  max-width: 38rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .sika-hero-title { font-size: 3.25rem; } }

/* Titre animé (effet machine à écrire, assets/js/main.js) : curseur clignotant
   affiché seulement pendant la frappe. */
.sika-typewriter.is-typing::after {
  content: '';
  display: inline-block;
  width: .09em;
  height: .95em;
  margin-left: .06em;
  background: currentColor;
  vertical-align: -.08em;
  animation: sika-cursor-blink .8s step-end infinite;
}
@keyframes sika-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sika-typewriter.is-typing::after { animation: none; opacity: 0; }
}

.sika-hero-subtitle {
  color: rgba(255,255,255,.85);
  max-width: 32rem;
  margin-bottom: 2rem;
  font-size: 1.0625rem;
}

/* Alignement du widget Héro (réglage "Alignement" dans Elementor, réglable
   par appareil) : les titres/sous-titres ont une largeur maximale fixe,
   donc text-align seul ne suffit pas à les centrer — il leur faut aussi
   des marges auto. Les classes -tablet-/-mobile- sont générées automati-
   quement par Elementor selon l'appareil choisi dans chaque onglet. */
.sika-hero-align-left .sika-hero-content { text-align: left; }
.sika-hero-align-left .sika-hero-title,
.sika-hero-align-left .sika-hero-subtitle,
.sika-hero-align-left .sika-search-bar { margin-left: 0; margin-right: auto; }
.sika-hero-align-left .sika-trust-badges { justify-content: flex-start; }

.sika-hero-align-center .sika-hero-content { text-align: center; }
.sika-hero-align-center .sika-hero-title,
.sika-hero-align-center .sika-hero-subtitle,
.sika-hero-align-center .sika-search-bar { margin-left: auto; margin-right: auto; }
.sika-hero-align-center .sika-trust-badges { justify-content: center; }

.sika-hero-align-right .sika-hero-content { text-align: right; }
.sika-hero-align-right .sika-hero-title,
.sika-hero-align-right .sika-hero-subtitle,
.sika-hero-align-right .sika-search-bar { margin-left: auto; margin-right: 0; }
.sika-hero-align-right .sika-trust-badges { justify-content: flex-end; }

@media (max-width: 1024px) {
  .sika-hero-tablet-align-left .sika-hero-content { text-align: left; }
  .sika-hero-tablet-align-left .sika-hero-title,
  .sika-hero-tablet-align-left .sika-hero-subtitle,
  .sika-hero-tablet-align-left .sika-search-bar { margin-left: 0; margin-right: auto; }
  .sika-hero-tablet-align-left .sika-trust-badges { justify-content: flex-start; }

  .sika-hero-tablet-align-center .sika-hero-content { text-align: center; }
  .sika-hero-tablet-align-center .sika-hero-title,
  .sika-hero-tablet-align-center .sika-hero-subtitle,
  .sika-hero-tablet-align-center .sika-search-bar { margin-left: auto; margin-right: auto; }
  .sika-hero-tablet-align-center .sika-trust-badges { justify-content: center; }

  .sika-hero-tablet-align-right .sika-hero-content { text-align: right; }
  .sika-hero-tablet-align-right .sika-hero-title,
  .sika-hero-tablet-align-right .sika-hero-subtitle,
  .sika-hero-tablet-align-right .sika-search-bar { margin-left: auto; margin-right: 0; }
  .sika-hero-tablet-align-right .sika-trust-badges { justify-content: flex-end; }
}

@media (max-width: 767px) {
  .sika-hero-mobile-align-left .sika-hero-content { text-align: left; }
  .sika-hero-mobile-align-left .sika-hero-title,
  .sika-hero-mobile-align-left .sika-hero-subtitle,
  .sika-hero-mobile-align-left .sika-search-bar { margin-left: 0; margin-right: auto; }
  .sika-hero-mobile-align-left .sika-trust-badges { justify-content: flex-start; }

  .sika-hero-mobile-align-center .sika-hero-content { text-align: center; }
  .sika-hero-mobile-align-center .sika-hero-title,
  .sika-hero-mobile-align-center .sika-hero-subtitle,
  .sika-hero-mobile-align-center .sika-search-bar { margin-left: auto; margin-right: auto; }
  .sika-hero-mobile-align-center .sika-trust-badges { justify-content: center; }

  .sika-hero-mobile-align-right .sika-hero-content { text-align: right; }
  .sika-hero-mobile-align-right .sika-hero-title,
  .sika-hero-mobile-align-right .sika-hero-subtitle,
  .sika-hero-mobile-align-right .sika-search-bar { margin-left: auto; margin-right: 0; }
  .sika-hero-mobile-align-right .sika-trust-badges { justify-content: flex-end; }
}

/* Badges de confiance sous la barre de recherche du hero */
.sika-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 1.75rem;
}
.sika-trust-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.88);
  font-size: .8125rem;
  font-weight: 500;
}
.sika-trust-badge strong {
  font-family: var(--sika-font-display);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
}
.sika-trust-badge svg { color: var(--sika-accent); flex-shrink: 0; }

/* Barre de recherche hero */
.sika-search-bar {
  background: var(--sika-white);
  border-radius: var(--sika-radius-md);
  padding: 1.25rem;
  max-width: 800px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.sika-search-bar-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}
.sika-search-bar-tab {
  padding: .4rem 1rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius);
  font-size: .875rem;
  font-weight: 500;
  background: transparent;
  color: var(--sika-text-muted);
  cursor: pointer;
  transition: all var(--sika-transition);
}
.sika-search-bar-tab.active, .sika-search-bar-tab:hover {
  background: var(--sika-primary);
  color: #fff;
  border-color: var(--sika-primary);
}
.sika-search-bar-fields {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .sika-search-bar-fields { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .sika-search-bar-fields { grid-template-columns: repeat(4,1fr) auto; } }

/* ============================================================
   FORMULAIRES
   ============================================================ */
.sika-form-group { margin-bottom: 1.125rem; }
/* Dans .sika-form-row/.sika-form-row-3, l'espacement est déjà géré par le
   gap de la grille : le margin-bottom ci-dessus s'ajoutait par-dessus,
   doublant l'écart entre certains champs par rapport aux autres (ex :
   Prénom/Nom plus espacés que Nom/Email) — même correctif déjà appliqué à
   .sika-contact-grid, généralisé ici. */
.sika-form-row .sika-form-group,
.sika-form-row-3 .sika-form-group {
  margin-bottom: 0;
}
.sika-form-group:last-child { margin-bottom: 0; }
.sika-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--sika-text);
}
.sika-input, .sika-select, .sika-textarea {
  display: block;
  width: 100%;
  padding: .6875rem .875rem;
  border: 1.5px solid var(--sika-border);
  border-radius: var(--sika-radius);
  background: var(--sika-white);
  color: var(--sika-text);
  font-size: .9375rem;
  font-family: var(--sika-font);
  line-height: 1.4;
  transition: border-color var(--sika-transition), box-shadow var(--sika-transition);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: var(--sika-shadow-sm);
}
.sika-input:hover, .sika-select:hover, .sika-textarea:hover { border-color: #C7CCD4; }
.sika-input:focus, .sika-select:focus, .sika-textarea:focus {
  outline: none;
  border-color: var(--sika-primary);
  box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
.sika-input::placeholder, .sika-textarea::placeholder { color: var(--sika-text-muted); }
.sika-textarea { min-height: 6rem; resize: vertical; }
.sika-select-wrap select.sika-select { padding-right: 2.25rem; cursor: pointer; }
.sika-input[type=number]::-webkit-inner-spin-button,
.sika-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
.sika-select-wrap { position: relative; }
.sika-select-wrap::after {
  content: '';
  position: absolute;
  right: .875rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--sika-text-muted);
}
.sika-form-error {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  color: #DC2626;
}

/* Range prix */
.sika-price-range { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* ============================================================
   FILTRES SIDEBAR / EN-TÊTE CATALOGUE
   ============================================================ */
.sika-filters-panel {
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  background: var(--sika-card);
  padding: 1.5rem;
  box-shadow: var(--sika-shadow-sm);
}
.sika-filters-title {
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1.5rem;
  color: var(--sika-text-muted);
}
.sika-save-search {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sika-bg);
  display: flex;
  justify-content: center;
}

/* Infobulle générique (survol/focus) — utilisée par le bouton d'alerte de
   recherche, réutilisable ailleurs pour tout bouton icône seule. */
.sika-tooltip { position: relative; display: inline-block; }
.sika-tooltip-text {
  position: absolute;
  bottom: calc(100% + .625rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 14rem;
  max-width: 70vw;
  padding: .5rem .75rem;
  border-radius: var(--sika-radius);
  background: var(--sika-text);
  color: #fff;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 20;
  box-shadow: var(--sika-shadow-md);
}
.sika-tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--sika-text);
}
.sika-tooltip:hover .sika-tooltip-text,
.sika-tooltip:focus-within .sika-tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Alertes de recherche — /agent/alertes/ */
.sika-alerts-list { display: flex; flex-direction: column; gap: .75rem; }
.sika-alert-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  background: var(--sika-card);
}
.sika-alert-card-label { font-weight: 600; font-size: .9375rem; }
.sika-alert-card-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.sika-filter-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sika-bg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem .625rem;
}
/* Sans ça, une grille garde par défaut la largeur du contenu le plus long
   ("Local commercial") au lieu de laisser la colonne rétrécir — le texte
   se retrouvait alors coupé n'importe où plutôt que de revenir à la ligne
   proprement après un espace. */
.sika-filter-section > * { min-width: 0; }
.sika-filter-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.sika-filter-label { font-size: .875rem; font-weight: 500; margin-bottom: .25rem; grid-column: 1 / -1; }
.sika-filter-section .sika-select-wrap,
.sika-filter-section .sika-price-range,
.sika-filter-section .sika-fixed-filter {
  grid-column: 1 / -1;
}
@media (max-width: 420px) {
  .sika-filter-section { grid-template-columns: 1fr; }
}
.sika-checkbox-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  cursor: pointer;
  font-size: .875rem;
  color: var(--sika-text-muted);
}
.sika-checkbox-item input[type=checkbox],
.sika-checkbox-item input[type=radio] { accent-color: var(--sika-primary); width: 1rem; height: 1rem; flex-shrink: 0; }
/* Cases "encadrées" pour les filtres du catalogue (Statut/Type de bien) —
   même esprit que .sika-features-grid .sika-checkbox-item plus bas, mais
   sans son overflow-wrap:anywhere : .sika-filter-section > * { min-width:0 }
   suffit déjà ici à empêcher "Local commercial" de forcer la grille en
   largeur, donc le texte revient à la ligne normalement entre les mots. */
.sika-filter-section .sika-checkbox-item {
  padding: .5rem .625rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius);
  transition: border-color var(--sika-transition), background var(--sika-transition);
}
.sika-filter-section .sika-checkbox-item:hover { border-color: var(--sika-primary); background: var(--sika-primary-light); }
.sika-fixed-filter {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem .875rem;
  border: 1px solid rgba(15,118,110,.18);
  border-radius: var(--sika-radius);
  background: var(--sika-primary-light);
  color: var(--sika-primary-dark);
}
.sika-fixed-filter strong { font-size: .9rem; }
.sika-fixed-filter span { font-size: .78rem; line-height: 1.45; opacity: .82; }

/* Sort/Pagination */
.sika-catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.sika-results-count { font-size: .875rem; color: var(--sika-text-muted); }

/* ============================================================
   VUE LISTE/GRILLE toggle
   ============================================================ */
.sika-view-toggle { display: flex; gap: .375rem; }
.sika-view-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius);
  background: transparent;
  color: var(--sika-text-muted);
  cursor: pointer;
}
.sika-view-btn.active { background: var(--sika-primary); color: #fff; border-color: var(--sika-primary); }

/* ============================================================
   PAGE FICHE BIEN
   ============================================================ */
.sika-property-layout {
  display: grid;
  gap: 2.5rem;
  /* minmax(0, 1fr) et non 1fr seul : une piste "1fr" garde par défaut un
     minimum "auto" basé sur le contenu le plus large de main/aside (photos,
     miniatures en ligne, etc.), ce qui forçait toute la mise en page à
     dépasser la largeur de l'écran sur mobile — texte et cadres coupés sur
     la droite, invisibles à cause du overflow-x:hidden global (pas de
     barre de défilement pour le trahir). minmax(0, 1fr) autorise vraiment
     la piste à rétrécir jusqu'à la largeur réelle disponible. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) { .sika-property-layout { grid-template-columns: minmax(0, 1fr) 360px; } }

.sika-gallery-main {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--sika-radius-md);
  background: var(--sika-muted-bg);
  cursor: zoom-in;
}
.sika-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

/* Loupe façon Amazon : agrandissement qui suit le curseur, à côté de
   l'image. Uniquement sur les appareils avec souris (hover:hover) — sur
   tactile, un tap ouvre plutôt la visionneuse plein écran ci-dessous, où
   le zoom pincer natif du navigateur fait le travail. */
@media (hover: hover) and (pointer: fine) {
  .sika-gallery-zoom-pane {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 1rem);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 200%;
    border: 1px solid var(--sika-border);
    border-radius: var(--sika-radius-md);
    box-shadow: var(--sika-shadow-lg);
    background-color: var(--sika-muted-bg);
    pointer-events: none;
    z-index: 20;
  }
  .sika-gallery-main:hover .sika-gallery-zoom-pane { display: block; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 1400px) {
  /* Pas assez de place à droite de l'image pour loger la loupe sans
     déborder de l'écran sur un écran moins large : on la masque plutôt
     que de la laisser couper. */
  .sika-gallery-zoom-pane { display: none !important; }
}

.sika-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: rgba(15, 23, 42, .92);
}
.sika-lightbox[hidden] { display: none; }
.sika-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sika-lightbox-close,
.sika-lightbox-nav {
  position: absolute;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--sika-transition);
}
.sika-lightbox-close:hover,
.sika-lightbox-nav:hover { background: rgba(255,255,255,.3); }
.sika-lightbox-close {
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  line-height: 1;
}
.sika-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 1.75rem;
  line-height: 1;
}
.sika-lightbox-prev { left: 1rem; }
.sika-lightbox-next { right: 1rem; }
.sika-lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: .875rem;
  background: rgba(0,0,0,.4);
  padding: .25rem .75rem;
  border-radius: 999px;
}
.sika-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: none;
  cursor: pointer;
  color: var(--sika-text);
  transition: background var(--sika-transition);
}
.sika-gallery-nav:hover { background: #fff; }
.sika-gallery-prev { left: .75rem; }
.sika-gallery-next { right: .75rem; }
.sika-gallery-thumbs {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sika-border) transparent;
}
.sika-gallery-thumb {
  flex-shrink: 0;
  width: 5.5rem;
  height: 3.75rem;
  border: 2px solid transparent;
  border-radius: var(--sika-radius);
  overflow: hidden;
  cursor: pointer;
  background: none;
  padding: 0;
}
.sika-gallery-thumb.active { border-color: var(--sika-primary); }
.sika-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sika-prop-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) { .sika-prop-info-grid { grid-template-columns: repeat(4, 1fr); } }
.sika-prop-info-grid > * { min-width: 0; }
.sika-prop-info-item {
  padding: 1rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius);
  background: var(--sika-card);
  overflow-wrap: anywhere;
}
.sika-prop-info-item small { font-size: .75rem; color: var(--sika-text-muted); display: block; }
.sika-prop-info-item strong { font-size: .9375rem; font-weight: 600; }

.sika-equip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
@media (min-width: 640px) { .sika-equip-grid { grid-template-columns: repeat(3, 1fr); } }
.sika-equip-grid > * { min-width: 0; }
.sika-equip-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--sika-text-muted);
}
.sika-equip-item svg { color: var(--sika-primary); flex-shrink: 0; }
/* Le libellé doit être un vrai enfant flex (pas juste du texte brut à même
   .sika-equip-item) pour pouvoir rétrécir sous sa largeur "min-content" par
   défaut (même bug flex/grid que min-width:auto) — sinon, sur un intitulé
   avec plusieurs mots ("Sécurité / gardien"), il déborde de sa carte au
   lieu de revenir à la ligne. */
.sika-equip-item span { min-width: 0; overflow-wrap: anywhere; }

/* Aside sticky */
.sika-aside-sticky {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (max-width: 1099px) {
  /* En dessous du seuil où la fiche bien passe en 2 colonnes, la colonne
     contact suit le flux normal de la page plutôt que de "coller" à l'écran
     au défilement — plus confortable sur mobile/tablette. */
  .sika-aside-sticky { position: static; top: auto; margin-top: 1.5rem; }
}
.sika-price-box {
  padding: 1.5rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  background: var(--sika-card);
}
.sika-price-box .price-label { font-size: .75rem; color: var(--sika-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sika-price-box .price-value { font-size: 1.75rem; font-weight: 700; color: var(--sika-primary); margin: .25rem 0 1.25rem; }

/* ============================================================
   STATS COMPTEUR
   ============================================================ */
.sika-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.sika-stat { text-align: center; }
.sika-stat-number { font-size: 2rem; font-weight: 700; color: var(--sika-primary); }
.sika-stat-label  { font-size: .875rem; color: var(--sika-text-muted); margin-top: .25rem; }

/* ============================================================
   COLLECTIONS / VILLES
   ============================================================ */
.sika-collection-card {
  position: relative;
  border-radius: var(--sika-radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  display: block;
  text-decoration: none !important;
  background: var(--sika-bg); /* évite un flash vide pendant le chargement de l'image */
}
.sika-collection-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* l'image remplit toujours le cadre 4/3, sans déformation ni bande vide */
  object-position: center;
  transition: transform .5s ease;
}
.sika-collection-card:hover img { transform: scale(1.05); }
.sika-collection-overlay {
  position: absolute;
  inset: 0;
  /* fondu resserré près du bas : l'image reste bien visible, seul le texte a un fond sombre net */
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.4) 28%, rgba(0,0,0,0) 62%);
  pointer-events: none;
}
.sika-collection-info {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  color: #fff;
}
.sika-collection-info h3 { font-size: 1rem; margin-bottom: .2rem; line-height: 1.3; }
.sika-collection-info span { font-size: .8125rem; color: rgba(255,255,255,.85); }

/* ============================================================
   FAQ ACCORDÉON
   ============================================================ */
.sika-faq-item {
  border-bottom: 1px solid var(--sika-border);
}
.sika-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  background: transparent;
  border: none;
  font-family: var(--sika-font);
  font-size: 1rem;
  font-weight: 500;
  color: var(--sika-text);
  text-align: left;
  cursor: pointer;
  gap: 1rem;
}
.sika-faq-question svg { flex-shrink: 0; transition: transform var(--sika-transition); color: var(--sika-primary); }
.sika-faq-question.active svg { transform: rotate(180deg); }
.sika-faq-answer {
  display: none;
  padding-bottom: 1.25rem;
  color: var(--sika-text-muted);
  line-height: 1.7;
}
.sika-faq-answer.open { display: block; }

/* ============================================================
   AVIS CLIENTS
   (le style de base de .sika-review-card est défini plus bas,
   section "Reviews widget" — pas dupliqué ici)
   ============================================================ */
/* Carrousel : défilement horizontal avec un léger effet de fondu sur les
   bords, avancée automatique gérée en JS (assets/js/main.js), swipe/scroll
   tactile toujours possible en plus. */
.sika-reviews-carousel {
  position: relative;
  margin: 0 -.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.sika-reviews-track {
  display: flex;
  gap: 1.25rem;
  padding: .25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.sika-reviews-track::-webkit-scrollbar { display: none; }
.sika-reviews-track > .sika-review-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
@media (min-width: 640px)  { .sika-reviews-track > .sika-review-card { flex-basis: calc(50% - .625rem); } }
@media (min-width: 1024px) { .sika-reviews-track > .sika-review-card { flex-basis: calc(33.333% - .84rem); } }

/* Guillemet décoratif sur les cartes d'avis */
.sika-review-card { position: relative; overflow: hidden; }
.sika-review-card::before {
  content: '\201C';
  position: absolute;
  top: -.5rem;
  right: 1rem;
  font-family: var(--sika-font-display);
  font-size: 5rem;
  color: var(--sika-primary-light);
  line-height: 1;
  z-index: 0;
}
.sika-review-card > * { position: relative; z-index: 1; }

/* ============================================================
   PROCESSUS EN ÉTAPES ("Comment ça marche")
   ============================================================ */
.sika-steps {
  counter-reset: sika-step;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .sika-steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.sika-step { position: relative; }
.sika-step-number {
  counter-increment: sika-step;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--sika-gradient-primary);
  color: #fff;
  font-family: var(--sika-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--sika-shadow-primary);
}
.sika-step-number::before { content: counter(sika-step); }
.sika-step-icon::before { content: none; }
.sika-step-icon svg, .sika-step-icon img { width: 1.375rem; height: 1.375rem; }
.sika-step h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.sika-step p { color: var(--sika-text-muted); font-size: .9375rem; margin: 0; line-height: 1.7; }

/* ============================================================
   BANDEAU CTA (dégradé premium)
   ============================================================ */
.sika-cta-banner {
  position: relative;
  border-radius: var(--sika-radius-lg);
  overflow: hidden;
  padding: 3.5rem 1.5rem;
  text-align: center;
  background: var(--sika-gradient-dark);
  isolation: isolate;
}
.sika-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(94,234,212,.18), transparent 55%),
              radial-gradient(circle at 85% 85%, rgba(245,158,11,.14), transparent 55%);
  z-index: -1;
}
.sika-cta-banner-inner { max-width: 38rem; margin: 0 auto; }
.sika-cta-banner .sika-eyebrow { color: #5EEAD4; justify-content: center; }
.sika-cta-banner h2 {
  font-family: var(--sika-font-display);
  font-weight: 600;
  color: #fff;
  font-size: 1.75rem;
  margin-bottom: .875rem;
  letter-spacing: -.01em;
}
@media (min-width: 768px) { .sika-cta-banner h2 { font-size: 2.25rem; } }
.sika-cta-banner p { color: rgba(255,255,255,.78); margin-bottom: 2rem; font-size: 1.0625rem; }
.sika-cta-banner-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.sika-cta-banner .sika-btn-primary {
  background: #fff;
  color: var(--sika-primary-dark);
  border-color: #fff;
}
.sika-cta-banner .sika-btn-primary:hover {
  background: var(--sika-accent);
  border-color: var(--sika-accent);
  color: #111827;
}
.sika-cta-banner .sika-btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.sika-cta-banner .sika-btn-outline:hover { background: rgba(255,255,255,.1); }

/* ============================================================
   CONTENU ÉDITORIAL (pages À propos / Mentions légales / Confidentialité)
   ============================================================ */
.sika-prose { max-width: 46rem; }
.sika-prose h2 {
  font-family: var(--sika-font-display);
  font-size: 1.375rem;
  margin: 2.5rem 0 1rem;
}
.sika-prose h2:first-child { margin-top: 0; }
.sika-prose h3 { font-size: 1.0625rem; margin: 1.75rem 0 .75rem; }
.sika-prose p { color: var(--sika-text-muted); line-height: 1.8; margin-bottom: 1.125rem; }
.sika-prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.125rem; }
.sika-prose li { color: var(--sika-text-muted); line-height: 1.8; margin-bottom: .5rem; }
.sika-prose a { text-decoration: underline; }
.sika-prose strong { color: var(--sika-text); }

/* Cartes valeurs / chiffres clés (page À propos) */
.sika-value-card {
  padding: 1.75rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  background: var(--sika-card);
  transition: box-shadow var(--sika-transition-lg), transform var(--sika-transition-lg);
}
.sika-value-card:hover { box-shadow: var(--sika-shadow-md); transform: translateY(-3px); }
.sika-value-card .sika-icon-badge {
  width: 3rem;
  height: 3rem;
  border-radius: var(--sika-radius);
  background: var(--sika-primary-light);
  color: var(--sika-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Bloc "chiffres clés" sur fond sombre (page À propos) */
.sika-kpi-band {
  background: var(--sika-gradient-dark);
  border-radius: var(--sika-radius-lg);
  padding: 2.5rem 1.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 768px) { .sika-kpi-band { grid-template-columns: repeat(4, 1fr); } }
.sika-kpi-band .sika-stat-number { color: #fff; }
.sika-kpi-band .sika-stat-label { color: rgba(255,255,255,.72); }

/* Cartes "service" (page Services) */
.sika-service-card {
  padding: 2rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  background: var(--sika-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--sika-transition-lg), transform var(--sika-transition-lg), border-color var(--sika-transition-lg);
}
.sika-service-card:hover { box-shadow: var(--sika-shadow-md); transform: translateY(-4px); border-color: transparent; }
.sika-service-card .sika-icon-badge {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--sika-radius);
  background: var(--sika-primary-light);
  color: var(--sika-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.sika-service-card h3 { font-size: 1.125rem; margin-bottom: .625rem; }
.sika-service-card p { color: var(--sika-text-muted); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.25rem; }
.sika-service-card ul { display: flex; flex-direction: column; gap: .5rem; }
.sika-service-card ul li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--sika-text-muted); }
.sika-service-card ul li svg { color: var(--sika-primary); flex-shrink: 0; }

/* ============================================================
   BOUTONS FLOTTANTS
   ============================================================ */
.sika-floating-btns {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.sika-float-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sika-float-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.sika-float-whatsapp { background: #25D366; color: #fff; }
.sika-float-phone    { background: var(--sika-primary); color: #fff; }
@media (min-width: 768px) { .sika-floating-btns { bottom: 2rem; right: 2rem; } }

/* ============================================================
   PAGINATION
   ============================================================ */
.sika-pagination { display: flex; justify-content: center; gap: .375rem; flex-wrap: wrap; margin-top: 2.5rem; }
.sika-pagination a, .sika-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .625rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius);
  font-size: .875rem;
  color: var(--sika-text-muted);
  text-decoration: none;
  transition: all var(--sika-transition);
}
.sika-pagination a:hover { border-color: var(--sika-primary); color: var(--sika-primary); }
.sika-pagination span.current { background: var(--sika-primary); color: #fff; border-color: var(--sika-primary); }

/* ============================================================
   ALERTS
   ============================================================ */
.sika-alert { padding: 1rem 1.25rem; border-radius: var(--sika-radius); margin-bottom: 1rem; font-size: .9375rem; }
.sika-alert-success { background: var(--sika-primary-light); color: var(--sika-primary-dark); border: 1px solid rgba(15,118,110,.2); }
.sika-alert-error   { background: #FEF2F2; color: #B91C1C; border: 1px solid rgba(185,28,28,.15); }
.sika-alert-info    { background: #EFF6FF; color: #1D4ED8; border: 1px solid rgba(29,78,216,.15); }

/* ============================================================
   DASHBOARD AGENT
   ============================================================ */
.sika-dashboard-layout {
  display: grid;
  gap: 2rem;
  /* minmax(0, 1fr) : voir le commentaire équivalent sur .sika-property-layout
     — sans ça, un tableau large (Mes annonces) ou un long texte force la
     piste à dépasser l'écran sur mobile. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1024px) { .sika-dashboard-layout { grid-template-columns: 260px minmax(0, 1fr); } }
.sika-dashboard-sidebar {
  background: var(--sika-card);
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  box-shadow: var(--sika-shadow-sm);
  padding: .75rem;
}
.sika-dashboard-nav a {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1rem;
  border-radius: var(--sika-radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--sika-text-muted);
  text-decoration: none;
  transition: all var(--sika-transition);
  margin-bottom: .25rem;
}
.sika-dashboard-nav a:hover, .sika-dashboard-nav a.active {
  background: var(--sika-primary-light);
  color: var(--sika-primary);
}
.sika-dashboard-stat-card {
  padding: 1.25rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  background: var(--sika-card);
  box-shadow: var(--sika-shadow-sm);
}
.sika-dashboard-stat-card .stat-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--sika-radius);
  background: var(--sika-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sika-primary);
  margin-bottom: .75rem;
}
.sika-dashboard-stat-card .stat-value { font-size: 1.625rem; font-weight: 700; }
.sika-dashboard-stat-card .stat-label { font-size: .875rem; color: var(--sika-text-muted); }

/* Table annonces dashboard */
.sika-table-wrap { overflow-x: auto; border: 1px solid var(--sika-border); border-radius: var(--sika-radius-md); box-shadow: var(--sika-shadow-sm); }
.sika-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sika-table th, .sika-table td {
  padding: .875rem 1rem;
  text-align: left;
  font-size: .875rem;
  border-bottom: 1px solid var(--sika-border);
  white-space: nowrap;
}
.sika-table th { font-weight: 600; color: var(--sika-text-muted); background: var(--sika-bg); }
.sika-table tbody tr:hover td { background: rgba(15,118,110,.03); }

/* ============================================================
   FOOTER
   ============================================================ */
.sika-footer {
  --sika-footer-bg:           var(--sika-text);
  --sika-footer-text:         rgba(255,255,255,.7);
  --sika-footer-heading:      #ffffff;
  --sika-footer-link:         rgba(255,255,255,.65);
  --sika-footer-link-hover:   #ffffff;
  --sika-footer-heading-size: .8125rem;
  --sika-footer-text-size:    .875rem;
  background: var(--sika-footer-bg);
  color: var(--sika-footer-text);
  padding: 3.5rem 0 1.5rem;
  margin-top: auto;
  position: relative;
  overflow: hidden;
}
.sika-footer > .sika-container { position: relative; z-index: 1; }
.sika-footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  margin-bottom: 3rem;
}
@media (min-width: 768px) { .sika-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
/* Un élément (long e-mail, texte de widget, etc.) ne doit jamais faire
   déborder sa colonne : la colonne peut rétrécir (min-width:0, sinon une
   grille garde la largeur de son contenu le plus long) et tout texte trop
   long se coupe proprement au lieu de sortir du cadre. */
.sika-footer-grid > div { min-width: 0; }
.sika-footer,
.sika-footer * { overflow-wrap: anywhere; word-break: break-word; }
.sika-footer-line { display: flex; align-items: flex-start; gap: .5rem; }
.sika-footer-line svg { flex-shrink: 0; margin-top: .1875rem; }
a.sika-footer-line { text-decoration: none; }
.sika-footer-widget { margin-bottom: 0; }
.sika-footer-widget ul { list-style: none; margin: 0; padding: 0; }
.sika-footer-logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sika-footer-heading);
  display: block;
  margin-bottom: .75rem;
}
.sika-footer-logo-text span { color: #5EEAD4; }
.sika-footer-logo img { max-height: 2.75rem; width: auto; margin-bottom: .75rem; }
.sika-footer-desc { font-size: var(--sika-footer-text-size); line-height: 1.7; }
.sika-footer h4 {
  font-size: var(--sika-footer-heading-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sika-footer-heading);
  margin-bottom: 1.25rem;
}
.sika-footer ul { display: flex; flex-direction: column; gap: .625rem; }
.sika-footer ul a { font-size: var(--sika-footer-text-size); color: var(--sika-footer-link); text-decoration: none; transition: color var(--sika-transition); }
.sika-footer ul a:hover { color: var(--sika-footer-link-hover); }
.sika-footer-bottom a { color: var(--sika-footer-link); text-decoration: none; transition: color var(--sika-transition); }
.sika-footer-bottom a:hover { color: var(--sika-footer-link-hover); }
.sika-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .8125rem;
}
.sika-footer-social { display: flex; gap: .75rem; }
.sika-footer-social a {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: all var(--sika-transition);
  text-decoration: none;
}
.sika-footer-social a:hover { background: var(--sika-primary); border-color: var(--sika-primary); color: #fff; }

/* ============================================================
   ANIMATION D'ARRIÈRE-PLAN (Personnaliser > Animation d'arrière-plan)
   Deux calques indépendants, injectés par sika_bg_animation_markup() :
   ".sika-bg-anim-site" (plein écran, fixe, derrière tout le contenu du
   site) et ".sika-bg-anim-footer" (limité au pied de page, qui a son
   propre fond opaque). Purement décoratif : aria-hidden + pointer-
   events:none, et coupé pour les visiteurs qui préfèrent moins de
   mouvement à l'écran.
   ============================================================ */
.sika-bg-anim { overflow: hidden; pointer-events: none; }
.sika-bg-anim-site { position: fixed; inset: 0; z-index: -1; }
.sika-bg-anim-footer { position: absolute; inset: 0; z-index: 0; }

.sika-bg-anim-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .28;
  will-change: transform;
}
.sika-bg-anim-orbs span:nth-child(1) {
  top: -14%; left: -10%;
  width: 26rem; height: 26rem;
  background: var(--sika-primary);
  animation: sika-orb-a 26s ease-in-out infinite alternate;
}
.sika-bg-anim-orbs span:nth-child(2) {
  bottom: -16%; right: -8%;
  width: 22rem; height: 22rem;
  background: var(--sika-accent);
  animation: sika-orb-b 32s ease-in-out infinite alternate;
}
.sika-bg-anim-footer.sika-bg-anim-orbs span { opacity: .16; }
@keyframes sika-orb-a { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(6%,10%) scale(1.15); } }
@keyframes sika-orb-b { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-8%,-8%) scale(1.1); } }

.sika-bg-anim-gradient {
  background: linear-gradient(120deg, var(--sika-primary) 0%, var(--sika-accent) 25%, transparent 55%, var(--sika-primary) 80%, var(--sika-accent) 100%);
  background-size: 300% 300%;
  opacity: .05;
  animation: sika-gradient-shift 18s ease infinite;
}
.sika-bg-anim-footer.sika-bg-anim-gradient { opacity: .1; }
@keyframes sika-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Particules flottantes : petites bulles qui montent lentement. */
.sika-bg-anim-particles span {
  position: absolute;
  bottom: -5%;
  border-radius: 50%;
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
.sika-bg-anim-site.sika-bg-anim-particles span { animation-name: sika-particle-rise-site; }
.sika-bg-anim-footer.sika-bg-anim-particles span { animation-name: sika-particle-rise-footer; }
.sika-bg-anim-particles span:nth-child(1) { left: 4%;  width: .4rem;  height: .4rem;  background: var(--sika-primary); animation-duration: 18s; animation-delay: 0s; }
.sika-bg-anim-particles span:nth-child(2) { left: 15%; width: .6rem;  height: .6rem;  background: var(--sika-accent);  animation-duration: 24s; animation-delay: 2s; }
.sika-bg-anim-particles span:nth-child(3) { left: 28%; width: .35rem; height: .35rem; background: var(--sika-primary); animation-duration: 20s; animation-delay: 5s; }
.sika-bg-anim-particles span:nth-child(4) { left: 42%; width: .5rem;  height: .5rem;  background: var(--sika-accent);  animation-duration: 26s; animation-delay: 1s; }
.sika-bg-anim-particles span:nth-child(5) { left: 58%; width: .45rem; height: .45rem; background: var(--sika-primary); animation-duration: 22s; animation-delay: 8s; }
.sika-bg-anim-particles span:nth-child(6) { left: 70%; width: .55rem; height: .55rem; background: var(--sika-accent);  animation-duration: 28s; animation-delay: 3s; }
.sika-bg-anim-particles span:nth-child(7) { left: 84%; width: .4rem;  height: .4rem;  background: var(--sika-primary); animation-duration: 21s; animation-delay: 6s; }
.sika-bg-anim-particles span:nth-child(8) { left: 93%; width: .6rem;  height: .6rem;  background: var(--sika-accent);  animation-duration: 25s; animation-delay: 4s; }
@keyframes sika-particle-rise-site {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .3; }
  90%  { opacity: .3; }
  100% { transform: translateY(-100vh) translateX(2rem); opacity: 0; }
}
@keyframes sika-particle-rise-footer {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .18; }
  90%  { opacity: .18; }
  100% { transform: translateY(-420px) translateX(1.5rem); opacity: 0; }
}

/* Vagues douces : larges nappes de couleur floues qui dérivent horizontalement en bas de l'écran. */
.sika-bg-anim-waves span {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 60%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .16;
  will-change: transform;
}
.sika-bg-anim-waves span:nth-child(1) { bottom: -30%; background: var(--sika-primary); animation: sika-wave-a 22s ease-in-out infinite alternate; }
.sika-bg-anim-waves span:nth-child(2) { bottom: -45%; background: var(--sika-accent);  animation: sika-wave-b 28s ease-in-out infinite alternate; }
.sika-bg-anim-footer.sika-bg-anim-waves span { opacity: .12; }
@keyframes sika-wave-a { 0% { transform: translateX(-4%); } 100% { transform: translateX(4%); } }
@keyframes sika-wave-b { 0% { transform: translateX(3%); } 100% { transform: translateX(-3%); } }

/* Grille animée : trame de points discrète dont l'intensité respire lentement. */
.sika-bg-anim-grid {
  --sika-grid-op: .12;
  background-image: radial-gradient(var(--sika-primary) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: var(--sika-grid-op);
  animation: sika-grid-pulse 8s ease-in-out infinite;
}
.sika-bg-anim-footer.sika-bg-anim-grid { --sika-grid-op: .1; background-image: radial-gradient(var(--sika-accent) 1px, transparent 1px); }
@keyframes sika-grid-pulse {
  0%, 100% { opacity: var(--sika-grid-op); }
  50%      { opacity: calc(var(--sika-grid-op) / 3); }
}

/* Reflet diagonal : bande de lumière discrète qui balaie l'écran. */
.sika-bg-anim-shimmer {
  background-image: linear-gradient(100deg, transparent 35%, var(--sika-primary) 50%, transparent 65%);
  background-size: 250% 100%;
  opacity: .06;
  animation: sika-shimmer-sweep 10s ease-in-out infinite;
}
.sika-bg-anim-footer.sika-bg-anim-shimmer { opacity: .14; background-image: linear-gradient(100deg, transparent 35%, var(--sika-accent) 50%, transparent 65%); }
@keyframes sika-shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sika-bg-anim-orbs span,
  .sika-bg-anim-gradient,
  .sika-bg-anim-particles span,
  .sika-bg-anim-waves span,
  .sika-bg-anim-grid,
  .sika-bg-anim-shimmer {
    animation: none;
  }
}

/* ============================================================
   MAP
   ============================================================ */
.sika-map-wrap { width: 100%; overflow: hidden; border-radius: var(--sika-radius-md); }
.sika-map-wrap iframe { display: block; border: 0; }
@media (max-width: 640px) {
  /* La hauteur (420px par défaut) est fixée en ligne depuis le PHP
     (sika_map_embed()) ; sur mobile, ça occupe plus de la moitié de
     l'écran pour une simple carte. !important nécessaire pour passer
     au-dessus du style en ligne sans devoir modifier tous les appels. */
  .sika-map-wrap { height: 260px !important; }
}

/* Property detail refined */
.sika-property-detail-page { padding-top: 2.25rem; }
.sika-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  color: var(--sika-text-muted);
}
.sika-breadcrumb a { color: inherit; }
.sika-property-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.sika-property-detail-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--sika-text);
}
.sika-property-detail-location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .65rem 0 0;
  color: var(--sika-text-muted);
}
.sika-property-detail-location span {
  padding-left: .65rem;
  border-left: 1px solid var(--sika-border);
}
.sika-property-detail-price {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--sika-primary);
  white-space: nowrap;
}
.sika-detail-panel {
  padding: 1.5rem;
  margin-top: 1.5rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  background: var(--sika-card);
  box-shadow: var(--sika-shadow-sm);
}
.sika-detail-panel h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.35;
}
.sika-property-detail-page .sika-gallery-main {
  /* height (pas min-height) : une image portrait (photo de titre foncier
     prise à la verticale, par ex.) a une hauteur intrinsèque énorme une
     fois ramenée à 100% de largeur. Avec seulement min-height et aspect-
     ratio:auto, cette boîte n'a alors AUCUNE hauteur définie (min-height
     ne compte pas comme "définie" pour la résolution des pourcentages) :
     img { height:100% } de la règle de base ne peut plus se calculer et
     retombe sur la taille naturelle de l'image, énorme pour un portrait.
     Une hauteur ferme redonne à height:100% une valeur à résoudre, donc
     object-fit:cover recadre bien l'image quel que soit son orientation.
     aspect-ratio:auto reste nécessaire pour l'autre bug déjà documenté :
     sans lui, la boîte s'élargit au lieu de garder 100% du conteneur. */
  height: 360px;
  aspect-ratio: auto;
}
.sika-property-detail-page .sika-filters-panel {
  border-radius: var(--sika-radius-md);
  box-shadow: var(--sika-shadow-sm);
}
.sika-property-detail-page .sika-filters-panel h3 {
  font-size: 1.05rem !important;
}
.sika-catalog-titlebar {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  background: var(--sika-card);
}
.sika-catalog-titlebar h1 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.2;
}
.sika-catalog-titlebar p {
  margin: .5rem 0 0;
  color: var(--sika-text-muted);
}

@media (max-width: 900px) {
  .sika-property-detail-head { flex-direction: column; }
  .sika-property-detail-price { font-size: 1.65rem; white-space: normal; }
  .sika-property-detail-title { font-size: 1.65rem; }
  .sika-property-detail-page .sika-gallery-main { height: 240px; }
}

/* Property detail layout like the reference screen */
.sika-property-detail-page .sika-container {
  max-width: 1320px;
}
.sika-property-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .5rem;
}
.sika-property-detail-page .sika-property-layout {
  gap: 2rem;
}
@media (min-width: 1100px) {
  .sika-property-detail-page .sika-property-layout {
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: start;
  }
}
.sika-property-detail-page .sika-gallery-main { border-radius: 8px; }
@media (min-width: 1100px) {
  /* Grande galerie plein format seulement à partir du point où la fiche
     bien passe en 2 colonnes ; en dessous, les valeurs mobile (240px/
     360px) définies plus haut s'appliquent — sans ce cantonnement, cette
     règle (sans media query) les écrasait sur tous les écrans, y compris
     mobile, forçant une galerie inutilement haute sur petit écran. */
  .sika-property-detail-page .sika-gallery-main { height: 460px; }
}
.sika-contact-card {
  padding: 1.5rem;
  border: 1px solid var(--sika-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(17,24,39,.08);
}
.sika-contact-card h3 {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 700;
}
.sika-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem 1rem;
}
@media (min-width: 520px) {
  .sika-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sika-contact-card .sika-form-group {
  margin-bottom: 1rem;
}
.sika-contact-grid .sika-form-group {
  margin-bottom: 0;
}
.sika-contact-card .sika-label {
  display: block;
  margin-bottom: .45rem;
  color: var(--sika-text);
  font-size: .875rem;
  font-weight: 500;
}
.sika-contact-card .sika-input,
.sika-contact-card .sika-textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--sika-border);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
}
.sika-contact-card .sika-textarea {
  min-height: 98px;
  resize: vertical;
}
.sika-contact-card .sika-btn-primary {
  background: #005BBB;
  border-color: #005BBB;
  min-height: 2.75rem;
  border-radius: 6px;
}
.sika-contact-quick-actions {
  display: grid;
  gap: .75rem;
}
.sika-prose-lite {
  color: var(--sika-text-muted);
  line-height: 1.75;
}

.sika-detail-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 520px;
  margin: 0 auto;
  border-radius: var(--sika-radius-md);
  background: #000;
}
/* max-height + width/height:auto suffisent à recadrer automatiquement selon
   le format d'origine (portrait façon TikTok en 9:16, paysage en 4:3...) :
   le navigateur calcule la taille affichée en respectant le ratio réel de
   la vidéo dans cette limite, sans jamais la déformer ni la laisser
   énorme sur les formats portrait (qui, en pleine largeur, donneraient
   sinon une hauteur démesurée). */
.sika-detail-video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.sika-gallery-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .75rem;
  margin-bottom: .75rem;
}
.sika-gallery-edit-item {
  display: block;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius);
  overflow: hidden;
  cursor: pointer;
}
.sika-gallery-edit-item img {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: cover;
}
.sika-gallery-edit-remove {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .5rem;
  font-size: .75rem;
  color: var(--sika-text-muted);
  background: var(--sika-card);
  border-top: 1px solid var(--sika-border);
}
.sika-gallery-edit-remove input[type="checkbox"] {
  accent-color: #DC2626;
}

.sika-video-edit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: .75rem;
}
.sika-video-edit-item { width: 100%; max-width: 320px; }
.sika-video-edit-preview {
  display: block;
  width: 100%;
  border-radius: var(--sika-radius);
  background: #000;
  margin-bottom: .75rem;
}

/* ============================================================
   Popup d'inscription (page d'accueil)
   ============================================================ */
.sika-signup-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.sika-signup-popup[hidden] { display: none; }
.sika-signup-popup.is-visible {
  opacity: 1;
  visibility: visible;
}
.sika-signup-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
}
.sika-signup-popup-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--sika-card);
  border-radius: var(--sika-radius-md);
  box-shadow: var(--sika-shadow-lg);
  padding: 2rem;
  text-align: center;
  transform: translateY(12px);
  transition: transform .25s ease;
}
.sika-signup-popup.is-visible .sika-signup-popup-card {
  transform: translateY(0);
}
.sika-signup-popup-card h2 {
  font-size: 1.25rem;
  margin: 0 0 .75rem;
  color: var(--sika-text);
}
.sika-signup-popup-card p {
  color: var(--sika-text-muted);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}
.sika-signup-popup-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--sika-text-muted);
}

/* ============================================================
   SPINNER / LOADING
   ============================================================ */
.sika-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--sika-border);
  border-top-color: var(--sika-primary);
  border-radius: 50%;
  animation: sika-spin .7s linear infinite;
}
@keyframes sika-spin { to { transform: rotate(360deg); } }
.sika-loading-overlay {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Popup plein écran affiché pendant l'envoi du formulaire de dépôt/
   modification d'annonce (photos + vidéo à téléverser peuvent prendre
   plusieurs secondes) — voir main.js. */
.sika-submit-loading {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.sika-submit-loading[hidden] { display: none; }
.sika-submit-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
}
.sika-submit-loading-card {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: var(--sika-card);
  border-radius: var(--sika-radius-md);
  box-shadow: var(--sika-shadow-lg);
  padding: 2rem;
  text-align: center;
}
.sika-submit-loading-card .sika-spinner { margin: 0 auto 1rem; }
.sika-submit-loading-title { margin: 0; font-weight: 600; color: var(--sika-text); }
.sika-submit-loading-seconds { margin: .5rem 0 0; font-size: .875rem; color: var(--sika-text-muted); }

/* ============================================================
   RESPONSIVE UTILITAIRES
   (.sika-hidden-mobile / .sika-hidden-desktop : définis plus bas, avec
   display:inline-flex — nécessaire pour les boutons .sika-btn qui portent
   cette classe dans header.php — pas redéfinis ici avec display:initial.)
   ============================================================ */
.sika-text-center { text-align: center; }
.sika-mt-0 { margin-top: 0; }
.sika-mt-2 { margin-top: .5rem; }
.sika-mt-4 { margin-top: 1rem; }
.sika-mt-6 { margin-top: 1.5rem; }
.sika-mt-8 { margin-top: 2rem; }
.sika-mb-0 { margin-bottom: 0; }
.sika-mb-4 { margin-bottom: 1rem; }
.sika-mb-6 { margin-bottom: 1.5rem; }
.sika-flex { display: flex; }
.sika-flex-center { display: flex; align-items: center; }
.sika-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sika-flex-col { display: flex; flex-direction: column; }
.sika-gap-2 { gap: .5rem; }
.sika-gap-3 { gap: .75rem; }
.sika-gap-4 { gap: 1rem; }
.sika-gap-6 { gap: 1.5rem; }
.sika-text-muted { color: var(--sika-text-muted); }
.sika-text-sm { font-size: .875rem; }
.sika-text-xs { font-size: .75rem; }
.sika-font-semibold { font-weight: 600; }
.sika-divider { height: 1px; background: var(--sika-border); margin: 1.5rem 0; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--sika-border) transparent; }

/* ============================================================
   ELEMENTOR OVERRIDES
   ============================================================ */
.elementor-location-header .sika-header,
.elementor-location-footer .sika-footer { /* prise en charge native Elementor */ }
/* Centre par défaut les sections "boxed" (largeur de contenu) d'Elementor.
   L'ancienne règle appliquait un max-width sans jamais centrer (margin auto
   manquant), ce qui collait le contenu à gauche avec un grand vide à droite.
   Pas de !important : un réglage de largeur personnalisé par section dans
   l'éditeur Elementor (CSS générée, plus spécifique) reste prioritaire. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Garde-fou : conserve le rendu natif des champs de formulaire même si des styles
   globaux (typographie/Kit Elementor) tentent de les réinitialiser. */
.sika-select-wrap select.sika-select,
select.sika-select {
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* ============================================================
   USER DASHBOARD — Niveau Houzez
   ============================================================ */

/* .sika-dashboard-layout / .sika-dashboard-sidebar / .sika-dashboard-stat-card :
   déjà définis plus haut (section "DASHBOARD AGENT"), pour le tableau de
   bord réellement utilisé aujourd'hui — pas redéfinis ici. Une redéfinition
   desktop-first (260px figé, ne repassait en 1 colonne qu'en dessous de
   768px) traînait à cet endroit ; comme elle venait après dans le fichier,
   elle l'emportait en cascade et cassait le seuil mobile-first voulu
   (1 colonne jusqu'à 1024px) sur toutes les pages du tableau de bord.
   .sika-dashboard-nav-item / .sika-dashboard-user-info / .sika-dashboard-avatar
   supprimés : aucun gabarit actuel ne les utilise (la barre latérale réelle,
   sika_dashboard_sidebar(), n'affiche que des liens simples stylés via
   .sika-dashboard-nav a). */
.sika-dash-section-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 1.5rem; }

/* Quick actions */
.sika-dash-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}

.sika-form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
@media (max-width: 640px) { .sika-form-row { grid-template-columns: minmax(0,1fr); } }
.sika-form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 640px) { .sika-form-row-3 { grid-template-columns: minmax(0,1fr); } }
@media (min-width: 641px) and (max-width: 900px) { .sika-form-row-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sika-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .5rem; }
@media (max-width: 640px) { .sika-features-grid { grid-template-columns: 1fr 1fr; } }
/* Cases à cocher "chip" — spécifique à la grille Équipements du formulaire
   de dépôt d'annonce. Scopé à .sika-features-grid : une version précédente,
   non cantonnée, s'appliquait par erreur à TOUT .sika-checkbox-item, y
   compris les filtres du catalogue (Statut/Type de bien), leur donnant à
   tort une bordure et un overflow-wrap:anywhere qui cassait les libellés
   longs ("Local commercial") au milieu d'un mot au lieu d'un retour à la
   ligne normal. */
.sika-features-grid .sika-checkbox-item {
  padding: .5rem .5rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius);
  transition: border-color var(--sika-transition), background var(--sika-transition);
  min-width: 0;
  overflow-wrap: anywhere;
}
.sika-features-grid .sika-checkbox-item:hover { border-color: var(--sika-primary); background: var(--sika-primary-light); }
.sika-features-grid .sika-checkbox-item input { accent-color: var(--sika-primary); width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---- Alerts ---- */
/* .sika-alert* et .sika-table* : déjà définis plus haut (couleurs sur le
   thème teal du site plutôt que le vert générique redéfini ici) — pas
   redupliqués. */

/* Listings dashboard */
.sika-listings-dashboard { min-width: 0; width: 100%; }
.sika-listings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.sika-listings-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.sika-listings-stat {
  display: flex !important;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  background: var(--sika-card);
  color: inherit;
  text-decoration: none;
}
.sika-listings-stat:visited { color: inherit; }
.sika-listings-stat:hover,
.sika-listings-stat.active {
  border-color: var(--sika-primary);
  background: var(--sika-primary-light);
  text-decoration: none;
}
.sika-listings-stat strong { font-size: 1.35rem; line-height: 1; color: var(--sika-primary); }
.sika-listings-stat span { font-size: .8rem; color: var(--sika-text-muted); }
.sika-listings-table-wrap { background: var(--sika-card); box-shadow: var(--sika-shadow-sm); width: 100%; }
.sika-listings-table th:first-child,
.sika-listings-table td:first-child { min-width: 320px; }
.sika-listing-cell {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-width: 0;
}
.sika-listing-thumb {
  width: 4.75rem;
  height: 3.5rem;
  border-radius: var(--sika-radius);
  background: var(--sika-muted-bg);
  color: var(--sika-text-muted);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.sika-listing-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sika-listing-main { min-width: 0; }
.sika-listing-title {
  display: block;
  font-weight: 600;
  color: var(--sika-primary-dark);
  line-height: 1.35;
}
.sika-listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--sika-text-muted);
}
.sika-listing-price {
  font-weight: 700;
  color: var(--sika-text);
  white-space: nowrap;
}
.sika-listing-actions {
  display: flex !important;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.sika-listing-actions .sika-btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
}
.sika-listings-empty {
  display: grid;
  justify-items: center;
  gap: .6rem;
  padding: 2.5rem 1rem;
  color: var(--sika-text-muted);
  text-align: center;
}
.sika-listings-empty strong { color: var(--sika-text); font-size: 1rem; }

@media (max-width: 768px) {
  .sika-listings-head { flex-direction: column; align-items: stretch; }
  .sika-listings-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sika-table tr:hover td { background: var(--sika-muted-bg); }

/* ---- Favorites heart button ---- */
.sika-favorite-btn {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sika-text-muted);
  transition: color var(--sika-transition), transform var(--sika-transition);
  z-index: 2;
}
.sika-favorite-btn:hover, .sika-favorite-btn.is-favorite { color: #E11D48; }
.sika-favorite-btn.is-favorite svg { fill: #E11D48; }
.sika-favorite-btn:active { transform: scale(1.2); }

/* Vues / j'aime affichés sur la carte, pour inciter à l'engagement */
.sika-property-card-stats {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  z-index: 2;
  display: flex;
  gap: .4rem;
}
.sika-property-card-stats span {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(17,24,39,.6);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
}
.sika-property-card-stats svg { flex-shrink: 0; }
.sika-property-detail-location [data-like-count-for] svg { position: relative; top: 1px; }

/* ---- Messages layout ---- */
/* Onglets pilules — ex : Demandes actives/archivées */
.sika-tab-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.sika-tab-pill {
  padding: .4rem .875rem;
  border: 1px solid var(--sika-border);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--sika-text-muted);
  text-decoration: none;
  transition: all var(--sika-transition);
}
.sika-tab-pill:hover { border-color: var(--sika-primary); color: var(--sika-primary); }
.sika-tab-pill.active { background: var(--sika-primary); border-color: var(--sika-primary); color: #fff; }

.sika-messages-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  overflow: hidden;
  min-height: 420px;
}
@media (max-width: 768px) { .sika-messages-layout { grid-template-columns: minmax(0, 1fr); } }

.sika-messages-list { border-right: 1px solid var(--sika-border); overflow-y: auto; max-height: 600px; }
.sika-message-thread {
  display: block;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--sika-border);
  text-decoration: none;
  color: var(--sika-text);
  transition: background var(--sika-transition);
}
.sika-message-thread:hover, .sika-message-thread.active { background: var(--sika-primary-light); }
.sika-message-thread-name { font-weight: 600; font-size: .875rem; }
.sika-message-thread-prop, .sika-message-thread-date { font-size: .75rem; margin-top: .125rem; }

.sika-message-detail { padding: 1.5rem; }
.sika-message-detail-header { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--sika-border); }
.sika-message-detail-from { font-size: 1rem; margin-bottom: .25rem; }
.sika-message-detail-body { font-size: .9375rem; line-height: 1.7; white-space: pre-wrap; margin-bottom: 1.5rem; }
.sika-message-reply-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---- Profile layout ---- */
.sika-profile-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 640px) { .sika-profile-layout { grid-template-columns: minmax(0, 1fr); } }
.sika-profile-avatar-block { text-align: center; }
.sika-profile-big-avatar { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; margin: 0 auto; border: 3px solid var(--sika-primary-light); }
.sika-profile-stats { margin-top: 1rem; font-size: .875rem; text-align: center; }
.sika-profile-form {}

/* ---- Agent public profile ---- */
.sika-agent-profile-header { display: flex; gap: 2rem; align-items: flex-start; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--sika-border); }
@media (max-width: 640px) { .sika-agent-profile-header { flex-direction: column; gap: 1rem; } }
.sika-agent-profile-avatar { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--sika-primary-light); flex-shrink: 0; }
.sika-agent-profile-name { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; }
.sika-agent-profile-meta { margin: .75rem 0; font-size: .875rem; color: var(--sika-text-muted); }
.sika-agent-profile-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }

/* ---- Reviews widget ---- */
.sika-review-card {
  background: var(--sika-card);
  border: 1px solid var(--sika-border);
  border-radius: var(--sika-radius-md);
  padding: 1.5rem;
}
.sika-review-stars { color: var(--sika-accent); font-size: .875rem; margin-bottom: .75rem; display: flex; gap: .125rem; }
.sika-review-body { font-size: .9375rem; line-height: 1.6; margin: 0 0 1rem; color: var(--sika-text); }
.sika-review-author { display: flex; align-items: center; gap: .75rem; }
.sika-review-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.sika-review-name { font-weight: 600; font-size: .875rem; }
.sika-review-date { font-size: .75rem; color: var(--sika-text-muted); }

/* ---- Utility ---- */
.sika-text-xs { font-size: .75rem; }
.sika-text-sm { font-size: .875rem; }
.sika-text-muted { color: var(--sika-text-muted); }
.sika-text-center { text-align: center; }
.sika-mb-0 { margin-bottom: 0 !important; }
.sika-mb-2 { margin-bottom: .5rem; }
.sika-mb-6 { margin-bottom: 1.5rem; }
.sika-mt-2 { margin-top: .5rem; }
.sika-mt-8 { margin-top: 2rem; }
.sika-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sika-hidden-mobile { display: none; }
@media (min-width: 768px) { .sika-hidden-mobile { display: inline-flex; } }
.sika-hidden-desktop { display: block; }
@media (min-width: 768px) { .sika-hidden-desktop { display: none; } }
.sika-danger { color: #DC2626; }
.sika-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.sika-btn-block { width: 100%; justify-content: center; display: flex; }

/* ---- Property card relative for favorite btn ---- */
.sika-property-card { position: relative; }