/* KërPay — extensions et mise en page au-dessus du système Nocturne (styles.css).
   Ne redéfinit jamais un token de styles.css ; n'ajoute que ce qui est propre au produit. */

:root {
  --status-ok: #6fbf8e;
  --status-ok-bg: color-mix(in srgb, #6fbf8e 16%, var(--color-surface));
  --status-late: #d9705f;
  --status-late-bg: color-mix(in srgb, #d9705f 16%, var(--color-surface));
  --status-vacant: #75798c;
  --status-vacant-bg: color-mix(in srgb, #75798c 16%, var(--color-surface));
  --whatsapp: #25d366;
}

body { -webkit-font-smoothing: antialiased; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* — logo / marque — */
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--color-text);
  font-family: var(--font-heading); font-weight: 600; font-size: 19px;
}
.brand .accent { color: var(--color-accent); }
.brand-icon { display: block; flex: none; }

/* — transitions douces (cartes, boutons, contrôles) — */
.btn, .icon-btn, .input, .tag, .card,
.listing-card, .building-card, .apartment-row, .hero-overlay-btn, .footer-social a {
  transition: transform .16s ease, box-shadow .16s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease, color .15s ease;
}

/* — en-tête — */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}
.topbar.on-section {
  background: color-mix(in srgb, var(--color-section) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-text) 12%, transparent);
}
.topbar-inner {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: 64px; padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.topbar-nav { display: none; align-items: center; gap: var(--space-6); margin-left: auto; }
.topbar-nav a { color: var(--color-text); opacity: 0.75; text-decoration: none; font-size: 14px; }
.topbar-nav a:hover, .topbar-nav a[aria-current="page"] { opacity: 1; color: var(--color-accent); }
.topbar-meta { margin-left: auto; font-size: 12px; opacity: 0.6; display: none; }
.icon-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--color-text); flex: none;
}
.icon-btn:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }

@media (min-width: 860px) {
  .topbar-nav { display: flex; }
  .topbar-meta { display: block; }
}

/* — nav basse (mobile uniquement) — */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; background: var(--color-bg);
  border-top: 1px solid var(--color-divider);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
.on-section ~ .bottom-nav,
.bottom-nav.on-section { background: var(--color-section); border-top-color: color-mix(in srgb, var(--color-text) 12%, transparent); }
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; color: var(--color-text); opacity: 0.55; text-decoration: none;
}
.bottom-nav-item.active { opacity: 1; color: var(--color-accent); }
.bottom-nav-item svg { display: block; }
@media (min-width: 860px) {
  .bottom-nav { display: none; }
}

/* espace pour ne pas passer sous la nav basse sur mobile */
.page-scroll-pad { padding-bottom: 88px; }
@media (min-width: 860px) {
  .page-scroll-pad { padding-bottom: 0; }
}

/* — page — */
.page-title-row {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 0 6px;
}
.page-title-row .back { color: var(--color-text); opacity: 0.8; flex: none; }
.page-title-row .back:hover { opacity: 1; }
.eyebrow {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin: 24px 0 10px;
}

/* — statuts — */
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-dot.ok { background: var(--status-ok); }
.status-dot.late { background: var(--status-late); }
.status-dot.vacant { background: var(--status-vacant); }
.tag-status { display: inline-flex; align-items: center; gap: 6px; }
.tag-status.ok { background: var(--status-ok-bg); color: var(--status-ok); }
.tag-status.late { background: var(--status-late-bg); color: var(--status-late); }
.tag-status.vacant { background: var(--status-vacant-bg); color: var(--status-vacant); }

/* — image placeholder (utilisé le temps qu'une vraie photo soit fournie) — */
.img-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)), var(--color-surface));
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 12px; padding: 8px; border-radius: var(--radius-md);
}

/* — photos — */
.photo {
  width: 100%; display: block; object-fit: cover;
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}

/* — icônes à côté d'une info clé (prix, quartier, type de bien...) — */
.meta-icon { display: inline-flex; align-items: center; gap: 5px; }
.meta-icon svg { flex: none; display: block; }

/* ══════════════ connexion ══════════════ */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px;
}
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.auth-card .brand { align-self: center; font-size: 24px; }
.auth-intro { text-align: center; font-size: 13px; opacity: 0.65; margin-top: -10px; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.auth-divider .line { flex: 1; height: 1px; background: var(--color-divider); }
.auth-divider span { font-size: 12px; opacity: 0.55; }
.auth-foot { text-align: center; font-size: 11px; opacity: 0.45; }

/* ══════════════ dashboard gérant ══════════════ */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 24px; }
@media (min-width: 860px) { .stat-row { grid-template-columns: repeat(4, 1fr); max-width: 720px; } }
.stat-card { gap: 4px; }
.stat-card .stat-label { font-size: 11px; }
.stat-card .stat-value { font-family: var(--font-heading); font-size: 21px; font-weight: 600; }
.stat-card .stat-sub { font-size: 11px; opacity: 0.6; }

.building-list { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.building-card {
  flex-direction: row; align-items: center; gap: 14px; text-decoration: none; color: inherit;
}
.building-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.building-icon {
  width: 46px; height: 46px; border-radius: 10px; background: var(--color-accent-800);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.fab {
  position: fixed; right: 24px; bottom: 96px; z-index: 21;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-bg); border: 1px solid var(--color-accent);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  text-decoration: none;
}
@media (min-width: 860px) { .fab { position: static; margin-top: 8px; width: auto; height: auto; border-radius: var(--radius-md); padding: 10px 18px; } }

/* ══════════════ fiche immeuble ══════════════ */
.apartment-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-top: 16px; }
.apartment-row { flex-direction: row; align-items: center; gap: 12px; }
.apartment-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ══════════════ formulaire ══════════════ */
.form-page { max-width: 480px; }
.form-fields { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.pay-mode { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-mode .tag { cursor: pointer; padding: 8px 14px; font-size: 13px; border: 1px solid var(--color-divider); }
.pay-mode input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-mode label:has(input:checked) .tag { background: var(--color-accent-800); color: var(--color-accent-100); border-color: transparent; }
.form-actions { display: flex; gap: 10px; margin-top: 4px; }
.form-actions .btn { height: 48px; }
.form-actions .btn-primary { flex: 2; }
.form-actions .btn-secondary { flex: 1; }

/* ══════════════ annonces publiques ══════════════ */
.locate-line { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.75; margin: 10px 0 16px; }
.filter-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.filter-row .tag { flex: none; padding: 7px 14px; font-size: 12px; cursor: pointer; border: 1px solid transparent; }
.filter-row .tag.is-active { background: var(--color-accent); color: var(--color-bg); }
.filter-row .tag.tag-outline { border-color: var(--color-accent); }

.listing-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px;
  margin: 20px 0 8px;
}
@media (min-width: 640px) { .listing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .listing-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.listing-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.listing-card .img-placeholder,
.listing-card .photo { width: 100%; height: 130px; }
.listing-card:hover .photo { box-shadow: var(--shadow-md); }
.listing-card:hover { transform: translateY(-3px); }
.listing-card:hover .title { color: var(--color-accent-300); }
.listing-card .price { font-size: 14px; font-weight: 600; }
.listing-card .price small { font-size: 11px; font-weight: 400; opacity: 0.6; }
.listing-card .title { font-size: 12.5px; opacity: 0.9; }
.listing-card .place { font-size: 11px; opacity: 0.55; display: inline-flex; align-items: center; gap: 4px; }
.listing-card .place svg { flex: none; }

/* — bannière hero (accueil) — */
.hero-banner { position: relative; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-banner .photo {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none;
}
.hero-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-section) 10%, transparent) 0%,
    color-mix(in srgb, var(--color-section) 55%, transparent) 55%,
    var(--color-section) 96%);
}
.hero-content { position: relative; z-index: 1; margin: 0; padding: 44px 0 30px; max-width: 480px; }
.hero-content h1 { font-size: 26px; margin-bottom: 8px; }
.hero-content p { font-size: 14px; opacity: 0.85; margin-bottom: 0; }
@media (min-width: 640px) {
  .hero-banner { min-height: 420px; }
  .hero-content h1 { font-size: 38px; }
  .hero-content p { font-size: 15.5px; }
}

/* ══════════════ détail annonce ══════════════ */
.listing-hero { position: relative; width: 100%; height: 320px; }
.listing-hero .img-placeholder,
.listing-hero .photo { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.hero-overlay-btn {
  position: absolute; top: 16px; width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  display: flex; align-items: center; justify-content: center; color: var(--color-text);
  text-decoration: none;
}
.hero-overlay-btn.back { left: 16px; }
.hero-overlay-btn.fav { right: 16px; }

.listing-detail-body { padding: 24px 0 120px; max-width: 720px; }
.listing-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.listing-head .price { text-align: right; font-family: var(--font-heading); font-size: 21px; font-weight: 600; color: var(--color-accent-300); }
.listing-head .price small { display: block; font-size: 11px; font-weight: 400; opacity: 0.6; color: var(--color-text); }
.listing-tags { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.amenities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 320px; margin-top: 10px; }
@media (min-width: 640px) { .amenities-grid { grid-template-columns: repeat(6, 1fr); max-width: none; } }
.amenity { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; opacity: 0.85; text-align: center; }

.contact-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 10px; padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  background: var(--color-section);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
@media (min-width: 860px) {
  .contact-bar { position: static; max-width: 720px; border-top: none; background: transparent; padding: 24px 0 0; }
}
.btn-whatsapp {
  flex: 1; height: 48px; font-size: 15px; font-weight: 600; gap: 8px;
  background: var(--whatsapp); border-color: var(--whatsapp); color: #0b2015;
}
.btn-whatsapp:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-call { width: 48px; height: 48px; flex: none; }

/* ══════════════ pied de page ══════════════ */
.site-footer {
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  margin-top: 8px; padding: 32px 0 96px;
}
@media (min-width: 860px) { .site-footer { padding-bottom: 32px; } }
.footer-grid { display: flex; flex-direction: column; gap: 26px; }
@media (min-width: 640px) {
  .footer-grid { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 20px; }
}
.footer-tagline { font-size: 12.5px; opacity: 0.6; max-width: 260px; margin: 8px 0 0; }
.footer-contact { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { color: var(--color-accent); }
.footer-contact .row { display: flex; align-items: center; gap: 8px; opacity: 0.85; }
.footer-contact .row svg { flex: none; color: var(--color-accent-300); }
.footer-social-block .eyebrow { margin-top: 0; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text);
}
.footer-social a:hover { background: var(--color-accent); color: var(--color-bg); transform: translateY(-2px); }
.footer-bottom {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  font-size: 11px; opacity: 0.5;
}