/* =========================================================
   VIVRE AU LUXEMBOURG — Charte graphique
   Noir & Or — sobre, chic
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --noir: #0A0A0A;
  --noir-doux: #141414;
  --noir-carte: #1B1B1B;
  --or: #C6A45C;
  --or-clair: #D9BE83;
  --or-fonce: #9C7F42;
  --creme: #F5F1E8;
  --blanc: #FFFFFF;
  --gris: #6B6B6B;
  --gris-clair: #E5E1D8;
  --succes: #4B7B57;
  --danger: #A5453D;

  --font-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-texte: 'Jost', Arial, sans-serif;

  --rayon: 4px;
  --ombre: 0 8px 30px rgba(0,0,0,0.08);
  --transition: 0.25s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-texte);
  color: var(--noir);
  background: var(--creme);
  line-height: 1.6;
  font-weight: 300;
}

h1, h2, h3, h4, .logo, .brand {
  font-family: var(--font-titre);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--noir);
}

h1 { font-size: 2.6rem; line-height: 1.15; }
h2 { font-size: 1.9rem; margin-bottom: 1rem; }
h3 { font-size: 1.3rem; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  section { padding: 60px 0; }
  h1 { font-size: 2rem; }
}

.eyebrow {
  font-family: var(--font-texte);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.75rem;
  color: var(--or-fonce);
  font-weight: 500;
  margin-bottom: 0.75rem;
  display: block;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--rayon);
  font-family: var(--font-texte);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.btn-or {
  background: var(--or);
  color: var(--noir);
  font-weight: 500;
}
.btn-or:hover { background: var(--or-clair); }
.btn-outline-noir {
  border-color: var(--noir);
  color: var(--noir);
  background: transparent;
}
.btn-outline-noir:hover { background: var(--noir); color: var(--or); }
.btn-outline-or {
  border-color: var(--or);
  color: var(--or);
  background: transparent;
}
.btn-outline-or:hover { background: var(--or); color: var(--noir); }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.72rem; }

/* ---------- Barre réseaux sociaux (sous le menu) ---------- */
.social-bar {
  background: var(--creme);
  border-bottom: 1px solid rgba(10,10,10,0.08);
  padding: 22px 0;
}
.social-bar .container { display: flex; justify-content: center; }
.social-bar .social-icons { margin-top: 0; gap: 22px; }
.social-bar .social-icons a { width: 52px; height: 52px; border-width: 1.5px; border-color: var(--noir); }
.social-bar .social-icons svg { width: 22px; height: 22px; fill: var(--noir); }
.social-bar .social-icons a:hover { background: var(--noir); border-color: var(--noir); }
.social-bar .social-icons a:hover svg { fill: var(--or); }

/* ---------- Bandeau nom de marque (au-dessus du header) ---------- */
.site-nameplate {
  background: var(--noir);
  text-align: center;
  padding: 12px 0;
}
.site-nameplate a {
  display: block;
  font-family: var(--font-titre);
  font-size: 1.7rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--or);
  text-decoration: none;
  transition: opacity var(--transition);
}
.site-nameplate a:hover { opacity: 0.8; }
@media (max-width: 640px) {
  .site-nameplate a { font-size: 1.1rem; letter-spacing: 3px; }
}

/* ---------- Header ---------- */
.site-header {
  background: var(--creme);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(10,10,10,0.08);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 118px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 88px; width: auto; }
.brand-text { color: var(--gris-clair); }
.brand-text span { display: block; font-size: 0.68rem; letter-spacing: 2px; color: var(--gris-clair); font-family: var(--font-texte); text-transform: uppercase; }

/* Marge horizontale ajoutée pour garantir un espacement minimum entre le
   logo et le premier lien ("Accueil"), et entre le dernier lien ("Contact")
   et les drapeaux de langue — sans cette marge, l'espace restant réparti par
   "justify-content: space-between" sur .site-header .container pouvait
   devenir quasi nul dès que la nav occupait presque toute la largeur. */
.nav-main { display: flex; align-items: center; gap: 34px; margin: 0 32px; }
.nav-main a {
  color: var(--noir);
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
  position: relative;
  padding: 6px 0;
  /* Certains libellés ("Nos Ventes", "Nos Réalisations", "Recherches
     Clients", "Vendre un Bien") passent sur deux lignes une fois le lien
     rétréci par le flex de la nav — centrer le texte évite l'effet
     "décalé à gauche" entre les deux lignes de longueur différente. */
  text-align: center;
}
.nav-main a:hover, .nav-main a.active { color: var(--or-fonce); }
/* "Nos Ventes" est un <a> à l'intérieur de ce div .dropdown, pas un enfant
   direct du flex .nav-main : le text-align:center posé plus haut sur
   ".nav-main a" ne s'applique pas à son propre retour à la ligne (un élément
   inline hérite du text-align de son conteneur bloc, ici .dropdown, pas du
   sien). Il faut donc centrer explicitement ce conteneur pour que "Nos" et
   "Ventes" soient bien alignés l'un sous l'autre comme les autres onglets. */
.nav-main .dropdown { position: relative; text-align: center; }
.nav-main .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--noir-carte);
  border: 1px solid rgba(198,164,92,0.2);
  min-width: 220px;
  padding: 10px 0;
  box-shadow: var(--ombre);
}
.nav-main .dropdown:hover .dropdown-menu { display: block; }
.nav-main .dropdown-menu a {
  display: block;
  padding: 10px 20px;
  text-transform: none;
  letter-spacing: 0.3px;
  font-size: 0.85rem;
  color: var(--or);
  /* Repasse en alignement à gauche : ce sous-menu ne doit pas hériter du
     centrage ajouté ci-dessus sur .nav-main a (pensé pour les libellés du
     premier niveau qui passent sur deux lignes, pas pour cette liste
     verticale à une ligne par élément). */
  text-align: left;
}
.nav-main .dropdown-menu a:hover { background: rgba(198,164,92,0.12); color: var(--or); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-actions .btn { padding: 10px 22px; }
/* "Espace Pro" passe aussi sur deux lignes ("ESPACE" / "PRO") dans son
   bouton bordé — sans text-align il s'alignait à gauche par défaut, ce qui
   décalait "PRO" sous le début de "ESPACE" au lieu de le centrer dessous. */
.espace-pro { color: var(--noir); font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--noir); padding: 9px 16px; border-radius: var(--rayon); transition: all var(--transition); text-align: center; }
.espace-pro:hover { background: var(--noir); color: var(--or); }

.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.burger span { width: 26px; height: 2px; background: var(--noir); }
.burger:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 4px; }

/* ---------- Sélecteur de langue (FR / EN / DE) — drapeaux ronds ---------- */
.lang-switcher { display: flex; align-items: center; gap: 8px; }
.lang-flag {
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 2px solid rgba(26,26,26,0.15);
  cursor: pointer; transition: all var(--transition); overflow: hidden;
  opacity: 0.6;
}
.lang-flag svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.lang-flag:hover { opacity: 0.85; border-color: rgba(26,26,26,0.35); }
.lang-flag:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; }
.lang-flag.active { opacity: 1; border-color: var(--noir); box-shadow: 0 0 0 1px var(--noir); }
@media (max-width: 960px) {
  .lang-flag { width: 34px; height: 34px; }
}

/* Resserre la nav sur tablette (avant le passage au menu burger) pour éviter tout débordement */
@media (max-width: 1180px) and (min-width: 961px) {
  .nav-main { gap: 20px; margin: 0 18px; }
  .nav-main a { font-size: 0.74rem; }
  .brand img { height: 72px; }
}

@media (max-width: 960px) {
  .nav-main, .header-actions .btn-outline-or { display: none; }
  .burger { display: flex; }
  .nav-main.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 118px; left: 0; right: 0;
    background: var(--noir);
    padding: 20px 32px 30px;
    margin: 0;
    gap: 18px;
    border-bottom: 1px solid rgba(198,164,92,0.25);
  }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.75)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  color: var(--blanc);
  padding: 130px 0 110px;
  text-align: center;
}
.hero .eyebrow { color: var(--or); }
.hero h1 { color: var(--blanc); max-width: 780px; margin: 0 auto 20px; }
.hero p { max-width: 560px; margin: 0 auto 36px; color: var(--gris-clair); font-size: 1.05rem; }

.search-box {
  background: var(--blanc);
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  border-radius: var(--rayon);
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap: 12px;
  box-shadow: var(--ombre);
}
@media (max-width: 900px) { .search-box { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .search-box button { grid-column: 1 / -1; } }
@media (max-width: 560px) { .search-box { grid-template-columns: 1fr; } .search-box button { grid-column: auto; } }
.search-box select, .search-box input {
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  padding: 12px 14px;
  font-family: var(--font-texte);
  font-size: 0.9rem;
  background: var(--blanc);
}

/* ---------- Filtre Budget (menu déroulant min/max + montants rapides) ---------- */
.budget-dropdown { position: relative; }
.budget-trigger {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  padding: 12px 14px;
  font-family: var(--font-texte);
  font-size: 0.9rem;
  background: var(--blanc);
  color: var(--gris);
  cursor: pointer;
  text-align: left;
}
.budget-trigger:hover { border-color: var(--or); }
.budget-trigger.has-value { color: var(--noir); }
.budget-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budget-trigger svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gris); transition: transform var(--transition); }
.budget-dropdown.open .budget-trigger svg { transform: rotate(180deg); }
.budget-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 64px);
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 18px;
  z-index: 60;
}
.budget-dropdown.open .budget-panel { display: block; }
.budget-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.budget-field label { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris); margin-bottom: 6px; }
.budget-field input {
  width: 100%; border: 1px solid var(--gris-clair); border-radius: 4px;
  padding: 9px 10px; font-size: 0.88rem; font-family: var(--font-texte);
}
.budget-field input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 2px rgba(198,164,92,0.18); }
.budget-presets {
  max-height: 190px; overflow-y: auto;
  border-top: 1px solid var(--gris-clair); border-bottom: 1px solid var(--gris-clair);
  margin-bottom: 14px;
}
.budget-preset-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 6px; font-size: 0.86rem; color: var(--noir); cursor: pointer; border-radius: 3px;
  font-family: var(--font-texte);
}
.budget-preset-item:hover { background: #FAF8F3; color: var(--or-fonce); }
.budget-actions { display: flex; justify-content: space-between; align-items: center; }
.budget-actions .budget-reset {
  background: none; border: none; font-size: 0.8rem; color: var(--gris); cursor: pointer; text-decoration: underline;
  font-family: var(--font-texte); padding: 0;
}
.budget-actions .budget-reset:hover { color: var(--noir); }
.budget-actions .btn-sm { padding: 9px 20px; font-size: 0.78rem; }
@media (max-width: 560px) {
  .budget-panel { left: auto; right: 0; width: 300px; max-width: calc(100vw - 40px); }
}

/* ---------- Sections ---------- */
section { padding: 64px 0; }
.section-noir { background: var(--noir); color: var(--creme); }
.section-noir h2, .section-noir .eyebrow { color: var(--or); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 34px; }

/* ---------- Categories ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 960px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card {
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform var(--transition);
}
.cat-card:hover { transform: translateY(-6px); }
.cat-card .img { height: 170px; position: relative; overflow: hidden; }
.cat-card .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card .body { padding: 22px; }
.cat-card h3 { margin-bottom: 6px; }
.cat-card p { font-size: 0.85rem; color: var(--gris); margin-bottom: 14px; }
.cat-card .count { font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--or-fonce); }

/* ---------- Cartes biens ---------- */
.biens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 960px) { .biens-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .biens-grid { grid-template-columns: 1fr; } }

.bien-card {
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform var(--transition);
  display: flex;
  flex-direction: column;
}
.bien-card:hover { transform: translateY(-6px); }
.bien-card .photo {
  height: 210px;
  background: var(--gris-clair);
  position: relative;
  overflow: hidden;
}
.bien-card .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bien-card .badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--noir); color: var(--or);
  font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 3px;
}
.bien-card .badge.vefa { background: var(--or); color: var(--noir); }
.bien-card .prix-tag {
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  max-width: calc(100% - 28px);
  background: rgba(10,10,10,0.85); color: var(--or);
  font-family: var(--font-titre); font-size: 1.05rem;
  padding: 6px 14px; border-radius: 3px;
}
.bien-card .prix-tag.range { font-size: 0.82rem; white-space: normal; text-align: right; line-height: 1.35; }
.bien-card .body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.bien-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.bien-card .lieu { font-size: 0.8rem; color: var(--gris); margin-bottom: 14px; }
.bien-card .specs { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--noir); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gris-clair); }
.bien-card .specs span { display: flex; align-items: center; gap: 5px; }

/* Actualités immobilières */
.actu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 960px) { .actu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .actu-grid { grid-template-columns: 1fr; } }
.actu-card { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 26px 24px; display: flex; flex-direction: column; transition: transform var(--transition); }
.actu-card:hover { transform: translateY(-6px); }
.actu-card .actu-source { font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--or-fonce); margin-bottom: 10px; }
.actu-card h3 { font-family: var(--font-titre); font-size: 1.12rem; line-height: 1.35; margin-bottom: 10px; }
.actu-card p { font-size: 0.88rem; color: var(--gris); line-height: 1.7; flex: 1; margin-bottom: 16px; }
.actu-card .actu-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--gris); border-top: 1px solid var(--gris-clair); padding-top: 14px; }
.actu-card .actu-meta a { color: var(--noir); font-weight: 500; text-decoration: none; }
.actu-card .actu-meta a:hover { color: var(--or-fonce); }
.actu-etat { text-align: center; color: var(--gris); padding: 60px 20px; grid-column: 1 / -1; }
.actu-disclaimer { font-size: 0.76rem; color: var(--gris); margin-top: 36px; text-align: center; }

/* Icônes de caractéristiques (surface, chambres, sdb, parkings) — partagées */
.specs { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 0.9rem; color: var(--noir); }
.specs span { display: flex; align-items: center; gap: 6px; }
.specs svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gris); }
.cpe-badge-fallback {
  border: 1px solid var(--gris-clair);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: var(--or-fonce);
}

/* Badge affiché quand aucune lettre CPE n'a encore été renseignée */
.cpe-badge-pending {
  display: inline-block;
  border: 1px dashed var(--gris-clair);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--gris);
  white-space: nowrap;
}

/* Puces CPE colorées — dégradé officiel vert (A+) → rouge (I) */
.cpe-group { display: inline-flex; align-items: center; gap: 4px; }
.cpe-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 6px;
  border-radius: 4px; font-weight: 700; font-size: 0.72rem;
  font-family: var(--font-texte); line-height: 1; letter-spacing: 0.2px;
}

/* ---------- Biens en bandeaux horizontaux (page listing) ---------- */
.biens-liste { display: flex; flex-direction: column; gap: 22px; }
.bien-row {
  display: flex;
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform var(--transition);
}
.bien-row:hover { transform: translateY(-4px); }
.bien-row .photo {
  width: 340px;
  flex-shrink: 0;
  background: var(--gris-clair);
  position: relative;
  overflow: hidden;
}
.bien-row .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bien-row .badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--noir); color: var(--or);
  font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 3px;
}
.bien-row .badge.vefa { background: var(--or); color: var(--noir); }
.bien-row .content {
  flex: 1;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.bien-row .row-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bien-row h3 { font-size: 1.2rem; margin-bottom: 6px; }
.bien-row .ville-tag {
  font-family: var(--font-titre); font-size: 0.95rem; color: var(--or-fonce);
  white-space: nowrap; letter-spacing: 0.3px;
}
.bien-row .lieu { font-size: 0.85rem; color: var(--gris); margin-bottom: 12px; }
.bien-row .desc-preview { font-size: 0.86rem; color: var(--gris); line-height: 1.6; max-width: 640px; }
.bien-row .row-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-clair);
}
.bien-row .specs { display: flex; gap: 22px; flex-wrap: wrap; row-gap: 8px; font-size: 0.85rem; color: var(--noir); }
.bien-row .specs span { display: flex; align-items: center; gap: 5px; }
.bien-row .prix { font-family: var(--font-titre); font-size: 1.4rem; color: var(--noir); white-space: nowrap; text-align: right; }
.bien-row .prix.range { font-size: 1.05rem; white-space: normal; }

@media (max-width: 760px) {
  .bien-row { flex-direction: column; }
  .bien-row .photo { width: 100%; height: 200px; }
}

/* ---------- Filtres listing ---------- */
.filters-bar {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px;
  margin-bottom: 40px;
}
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-tabs button {
  background: transparent;
  border: 1px solid var(--gris-clair);
  padding: 10px 20px;
  border-radius: 30px;
  font-family: var(--font-texte);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-tabs button.active, .filter-tabs button:hover { background: var(--noir); color: var(--or); border-color: var(--noir); }
.filter-row { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; }
@media (max-width: 860px) { .filter-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .filter-row { grid-template-columns: 1fr; } .filter-row button { width: 100%; } }
.filter-row select, .filter-row input {
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  padding: 11px 14px;
  font-family: var(--font-texte);
  font-size: 0.85rem;
}
.results-count { color: var(--gris); font-size: 0.85rem; margin-bottom: 24px; }

/* ---------- Carte interactive ---------- */
#mapBiens {
  height: 480px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}
/* Carte de localisation sur la fiche d'un bien — plus compacte que la carte
   d'ensemble du Luxembourg utilisée en page d'accueil. */
#mapBien {
  height: 320px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  margin-top: 8px;
}
.map-pin {
  background: var(--noir);
  color: var(--or);
  border: 2px solid var(--or);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.map-popup h4 { font-family: var(--font-titre); font-size: 1rem; margin-bottom: 4px; }
.map-popup p { font-size: 0.8rem; color: var(--gris); margin-bottom: 10px; }
.map-popup a { font-size: 0.78rem; color: var(--or-fonce); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }
.leaflet-popup-content-wrapper { border-radius: var(--rayon); }

/* ---------- Footer ---------- */
.site-footer { background: var(--noir); color: var(--gris-clair); padding: 70px 0 24px; }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap: 40px; margin-bottom: 50px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: minmax(0,1fr); gap: 30px; } }
.footer-grid h4 { color: var(--or); font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; font-family: var(--font-texte); font-weight: 500; }
.footer-grid ul { list-style: none; min-width: 0; }
.footer-grid li { margin-bottom: 10px; font-size: 0.88rem; overflow-wrap: anywhere; }
.footer-grid a:hover { color: var(--or); }
.footer-about { min-width: 0; }
.footer-about img { height: 80px; margin-bottom: 16px; }
.footer-about p { font-size: 0.85rem; color: var(--gris-clair); max-width: 280px; }

.social-icons { display: flex; gap: 12px; margin-top: 18px; }
.social-icons a {
  width: 38px; height: 38px;
  border: 1px solid rgba(198,164,92,0.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.social-icons a:hover { background: var(--or); border-color: var(--or); }
.social-icons svg { width: 16px; height: 16px; fill: var(--or); transition: fill var(--transition); }
.social-icons a:hover svg { fill: var(--noir); }

.footer-legal {
  border-top: 1px solid rgba(198,164,92,0.15);
  padding-top: 24px;
  margin-top: 40px;
  font-size: 0.72rem;
  color: var(--gris);
}

.footer-bottom {
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--gris);
}

/* ---------- Pages internes / bandeau ---------- */
.page-banner {
  background: var(--noir);
  color: var(--or);
  padding: 60px 0 40px;
  text-align: center;
}
.page-banner h1 { color: var(--blanc); font-size: 2.1rem; }
.breadcrumb { font-size: 0.78rem; color: var(--gris-clair); margin-top: 10px; letter-spacing: 0.5px; }
.breadcrumb a:hover { color: var(--or); }

/* ---------- Fiche bien détail ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.3px; color: var(--noir); margin-bottom: 24px; }
.back-link:hover { color: var(--or); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 46px; }
@media (max-width: 960px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
.gallery-main { height: 440px; background: var(--gris-clair); border-radius: var(--rayon); margin-bottom: 10px; position: relative; overflow: hidden; }
.gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gallery-thumbs div { height: 76px; background: var(--gris-clair); border-radius: 3px; cursor: pointer; opacity: 0.7; position: relative; overflow: hidden; }
.gallery-thumbs div img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs div:hover { opacity: 1; }
.gallery-thumbs div.active { opacity: 1; outline: 2px solid var(--or); outline-offset: -2px; }

.gallery-main img { cursor: zoom-in; }
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(10,10,10,0.45); color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--transition); z-index: 2;
}
.gallery-arrow:hover { background: rgba(10,10,10,0.75); }
.gallery-arrow-left { left: 14px; }
.gallery-arrow-right { right: 14px; }
.gallery-counter {
  position: absolute; bottom: 12px; right: 14px;
  background: rgba(10,10,10,0.55); color: #fff; font-size: 0.75rem;
  padding: 4px 10px; border-radius: 20px; z-index: 2;
}

.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(10,10,10,0.92);
  display: none; align-items: center; justify-content: center; z-index: 1000;
}
.lightbox-overlay.open { display: flex; }
.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--rayon); }
.lightbox-close {
  position: absolute; top: 20px; right: 24px; background: transparent;
  border: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer;
}
.lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--transition);
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.25); }
.lightbox-arrow-left { left: 24px; }
.lightbox-arrow-right { right: 24px; }
.lightbox-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 0.85rem; opacity: 0.8;
}
@media (max-width: 600px) {
  .lightbox-arrow { width: 42px; height: 42px; }
  .lightbox-arrow-left { left: 8px; }
  .lightbox-arrow-right { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; font-size: 1.8rem; }
  .gallery-arrow { width: 34px; height: 34px; }
}

.spec-table { width: 100%; border-collapse: collapse; margin: 28px 0; }
.spec-table td { padding: 12px 0; border-bottom: 1px solid var(--gris-clair); font-size: 0.9rem; }

/* Grille habituelle 2 colonnes, remplie par colonne (3 lignes max) plutôt
   que par ligne — le nombre de cartes est plafonné à 6 côté JS
   (renderProximites), donc toujours exactement 2 colonnes × 3 lignes : le
   bloc garde ses blocs larges et lisibles, et la section "Localisation"
   juste en dessous reste proche quel que soit le nombre de résultats trouvés. */
.proximites-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 14px;
  margin-bottom: 10px;
}
@media (max-width: 560px) { .proximites-grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } }
.proximite-item { display: flex; align-items: flex-start; gap: 12px; background: #FAF8F3; border-radius: var(--rayon); padding: 14px 16px; }
.proximite-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--or-fonce); }
.proximite-icon svg { width: 100%; height: 100%; }
.proximite-nom { font-size: 0.88rem; font-weight: 600; color: var(--noir); }
.proximite-meta { font-size: 0.78rem; color: var(--gris); margin-top: 2px; }

.proximites-admin-preview { margin-top: 12px; border: 1px solid var(--gris-clair); border-radius: var(--rayon); padding: 14px 16px; background: #FAF8F3; }
.proximite-preview-row { font-size: 0.84rem; color: var(--noir); padding: 5px 0; }
.proximite-preview-row strong { display: inline-block; min-width: 130px; color: var(--gris); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.5px; }
.spec-table td:first-child { color: var(--gris); width: 45%; }
.spec-table td:last-child { font-weight: 500; }

/* Tableau des typologies / lots d'un programme VEFA — Résidence */
.lots-table-wrap { overflow-x: auto; margin: 8px 0 20px; border: 1px solid var(--gris-clair); border-radius: var(--rayon); }
.lots-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.lots-table th {
  text-align: left; padding: 10px 12px; background: var(--creme); color: var(--noir);
  font-family: var(--font-titre); font-weight: 500; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
  border-bottom: 1px solid var(--gris-clair);
}
.lots-table td { padding: 12px 18px; border-bottom: 1px solid var(--gris-clair); white-space: nowrap; font-size: 0.85rem; }
.lots-table td:nth-child(2) { white-space: normal; min-width: 200px; }
.lots-table td:nth-child(3) { padding-left: 26px; }
.lots-table tr:last-child td { border-bottom: none; }
.lots-table .cell-icon { display: inline-flex; align-items: center; gap: 6px; }
.lots-table .cell-icon svg { width: 16px; height: 16px; color: var(--gris); }
.lots-table td.prix-cell { font-weight: 500; }
.lots-table .muted { color: var(--gris); }
.lot-doc-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--or-fonce); font-size: 0.76rem; border: 1px solid var(--gris-clair);
  padding: 5px 9px; border-radius: var(--rayon); transition: all var(--transition);
}
.lot-doc-btn svg { width: 13px; height: 13px; }
.lot-doc-btn:hover { border-color: var(--or); background: #FFFDF8; }
.lots-table tbody tr.lot-row { cursor: pointer; transition: background var(--transition); }
.lots-table tbody tr.lot-row:hover, .lots-table tbody tr.lot-row:focus-visible { background: #FFFDF8; outline: none; }
.lots-table td.lot-chevron { color: var(--gris); font-size: 1.1rem; text-align: right; padding-left: 4px; }

@media (max-width: 640px) {
  .lots-table th, .lots-table td { padding: 10px 12px; font-size: 0.8rem; }
}

.doc-list { list-style: none; margin-top: 10px; }
.doc-list li { margin-bottom: 10px; }
.doc-list a {
  display: flex; align-items: center; gap: 10px;
  background: var(--blanc); border: 1px solid var(--gris-clair);
  border-radius: var(--rayon); padding: 14px 16px;
  font-size: 0.85rem; transition: all var(--transition);
}
.doc-list a:hover { border-color: var(--or); background: #FFFDF8; }
.doc-list .muted {
  display: flex; align-items: center; gap: 10px;
  background: var(--gris-clair); border: 1px dashed var(--gris);
  border-radius: var(--rayon); padding: 14px 16px;
  font-size: 0.85rem; color: var(--gris); cursor: not-allowed;
}

.side-card { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 28px; margin-bottom: 22px; }
.side-card .prix { font-family: var(--font-titre); font-size: 2rem; color: var(--noir); margin-bottom: 4px; }
.side-card .prix span { font-size: 0.85rem; color: var(--gris); font-family: var(--font-texte); }
.side-card .prix.range { font-size: 1.3rem; line-height: 1.4; }
.side-card .charges-mensuelles { font-size: 0.85rem; color: var(--gris); margin-bottom: 16px; }
.agent-card { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.agent-card .agent-logo { width: 64px; height: 64px; flex-shrink: 0; }
.agent-card a { text-decoration: underline; text-decoration-color: rgba(198,164,92,0.4); }
.agent-card a:hover { color: var(--or-fonce); }

.sim-result { border-top: 1px solid var(--gris-clair); padding-top: 16px; }
.sim-result-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 0.85rem; color: var(--gris); }
.sim-result-row.sim-main { font-size: 1rem; color: var(--noir); padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--gris-clair); }
.sim-result-row.sim-main strong { font-family: var(--font-titre); font-size: 1.35rem; color: var(--or-fonce); }

/* ---------- Formulaires ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 18px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { display: block; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }

/* Champ "lien source" (étape Informations générales) : input + bouton coller */
.lien-source-row { display: flex; gap: 10px; }
.lien-source-row input { flex: 1; }
.lien-source-row .btn { flex-shrink: 0; }
@media (max-width: 480px) { .lien-source-row { flex-direction: column; } }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  font-family: var(--font-texte);
  font-size: 0.92rem;
  background: var(--blanc);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--or); }
.form-group textarea { resize: vertical; min-height: 110px; }

/* Cases numériques (surfaces en m², terrain en ares, prix, charges…) : on
   masque partout les flèches d'incrémentation/décrémentation natives du
   navigateur — peu lisibles et sans intérêt ici (une valeur se tape
   directement au clavier ; les compteurs comme "Chambres" ou "Garages" ont
   déjà leurs propres boutons +/- dans .counter-field, qui restent inchangés). */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.contact-card { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 40px; }

/* ---------- Admin ---------- */
.admin-body { background: #F0EEE8; min-height: 100vh; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 260px;
  background: var(--noir);
  color: var(--gris-clair);
  padding: 30px 24px;
  flex-shrink: 0;
}
.admin-sidebar .brand { margin-bottom: 44px; }
.admin-sidebar .brand img { height: 68px; }
.admin-sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--rayon);
  font-size: 0.85rem; margin-bottom: 6px; color: var(--gris-clair);
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: rgba(198,164,92,0.12); color: var(--or); }
.admin-main { flex: 1; padding: 40px 46px; max-width: 1200px; min-width: 0; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.admin-topbar h1 { font-size: 1.6rem; }
.admin-topbar p { color: var(--gris); font-size: 0.9rem; }

@media (max-width: 780px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; padding: 20px 24px; }
  .admin-sidebar .brand { margin-bottom: 20px; }
  .admin-sidebar nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .admin-sidebar nav a { margin-bottom: 0; }
  .admin-main { padding: 28px 20px; }
}

.stat-cards { display: grid; grid-template-columns: repeat(6,1fr); gap: 18px; margin-bottom: 40px; }
@media (max-width: 1250px) { .stat-cards { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px) { .stat-cards { grid-template-columns: repeat(2,1fr); } }
.stat-card { background: var(--blanc); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); }
.stat-card .num { font-family: var(--font-titre); font-size: 2rem; color: var(--noir); }
.stat-card .label { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); margin-top: 4px; }

.admin-table-wrap { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); overflow-x: auto; }
table.admin-table { min-width: 760px; }
table.admin-table { width: 100%; border-collapse: collapse; }
table.admin-table th {
  text-align: left; font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gris); background: #FAF8F3; padding: 16px 18px; border-bottom: 1px solid var(--gris-clair);
}
table.admin-table td { padding: 16px 18px; border-bottom: 1px solid var(--gris-clair); font-size: 0.88rem; vertical-align: middle; }
table.admin-table tr:last-child td { border-bottom: none; }
.mini-photo { width: 56px; height: 42px; border-radius: 3px; background: var(--gris-clair) center/cover no-repeat; }
.status-pill { font-size: 0.7rem; letter-spacing: 0.5px; padding: 5px 12px; border-radius: 20px; text-transform: uppercase; }
.status-publie { background: rgba(75,123,87,0.12); color: var(--succes); }
.status-attente { background: rgba(156,127,66,0.15); color: var(--or-fonce); }
.status-brouillon { background: rgba(107,107,107,0.12); color: var(--gris); }
.status-archive { background: rgba(30,30,30,0.08); color: var(--noir-doux); }
.row-actions a { font-size: 0.78rem; color: var(--gris); margin-right: 12px; }
.row-actions a:hover { color: var(--or-fonce); }
.row-actions a.del:hover { color: var(--danger); }
.row-actions a.publier { color: var(--or-fonce); font-weight: 600; }
.row-actions a.publier:hover { color: var(--noir); }
.admin-table td.col-check, .admin-table th.col-check { width: 40px; padding-right: 0; }
.admin-table input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--noir); }
.admin-table tr.row-selected { background: rgba(198,164,92,0.06); }

.bulk-actions-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--noir); color: var(--blanc); border-radius: var(--rayon);
  padding: 14px 20px; margin-bottom: 18px;
}
.bulk-actions-bar .bulk-count { font-size: 0.85rem; margin-right: auto; }
.bulk-actions-bar button {
  background: transparent; border: 1px solid rgba(255,255,255,0.35); color: var(--blanc);
  font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px 14px;
  border-radius: var(--rayon); cursor: pointer; transition: all var(--transition);
}
.bulk-actions-bar button:hover { background: var(--or); border-color: var(--or); color: var(--noir); }
.bulk-actions-bar button.bulk-del:hover { background: var(--danger); border-color: var(--danger); color: var(--blanc); }
.bulk-actions-bar button.bulk-annuler { border-color: transparent; opacity: 0.7; }
.bulk-actions-bar button.bulk-annuler:hover { background: transparent; color: var(--blanc); opacity: 1; }

.admin-card { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 34px; margin-bottom: 26px; }
.admin-card h3 { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--gris-clair); font-size: 1.05rem; }

.dropzone {
  border: 2px dashed var(--gris-clair);
  border-radius: var(--rayon);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: #FAF8F3;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--or); background: #FFFDF6; }
.dropzone .icon { font-size: 1.8rem; color: var(--or-fonce); margin-bottom: 10px; }
.dropzone p { font-size: 0.85rem; color: var(--gris); }
.dropzone small { font-size: 0.72rem; color: var(--gris); display: block; margin-top: 4px; }
.file-list { margin-top: 14px; list-style: none; }
.file-list li {
  display: flex; align-items: center; justify-content: space-between;
  background: #FAF8F3; border: 1px solid var(--gris-clair); border-radius: var(--rayon);
  padding: 10px 14px; margin-bottom: 8px; font-size: 0.82rem;
}
.file-list li button { border: none; background: none; color: var(--danger); cursor: pointer; font-size: 0.9rem; }

/* Grille de vignettes photos — aperçu + réordonnancement (glisser-déposer
   ou flèches ◀ ▶) dans l'étape "Photos" de l'espace pro. */
.photos-grid-help { font-size: 0.78rem; color: var(--gris); margin: 14px 0 6px; }
.photos-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.photo-card {
  position: relative;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--blanc);
  cursor: grab;
  transition: box-shadow var(--transition), opacity var(--transition);
}
.photo-card:active { cursor: grabbing; }
.photo-card.dragging { opacity: 0.4; }
.photo-card.drag-over { box-shadow: 0 0 0 2px var(--or); }
.photo-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.photo-card.is-cover { border-color: var(--or); }
.photo-cover-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--or); color: var(--noir);
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
}
.photo-card-footer { padding: 8px 10px; }
.photo-card-name {
  display: block; font-size: 0.72rem; color: var(--gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px;
}
.photo-card-actions { display: flex; align-items: center; gap: 4px; }
.photo-move-btn, .photo-remove-btn {
  border: 1px solid var(--gris-clair); background: var(--blanc); border-radius: 4px;
  cursor: pointer; font-size: 0.75rem; padding: 3px 7px; line-height: 1;
}
.photo-move-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.photo-move-btn:hover:not(:disabled) { border-color: var(--or-fonce); }
.photo-remove-btn { color: var(--danger); margin-left: auto; }
.photo-remove-btn:hover { border-color: var(--danger); }

/* Tableau d'encodage des typologies/lots — Espace pro */
.lots-admin-table-wrap { overflow-x: auto; border: 1px solid var(--gris-clair); border-radius: var(--rayon); }
.lots-admin-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 780px; }
.lots-admin-table th {
  text-align: left; padding: 10px 12px; background: #FAF8F3; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris); border-bottom: 1px solid var(--gris-clair); white-space: nowrap;
}
.lots-admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--gris-clair); vertical-align: middle; }
.lots-admin-table tr:last-child td { border-bottom: none; }
.lots-admin-table input[type="text"], .lots-admin-table input[type="number"], .lots-admin-table select {
  width: 100%; min-width: 100px; padding: 7px 9px; border: 1px solid var(--gris-clair);
  border-radius: 4px; font-size: 0.82rem; font-family: var(--font-texte); background: var(--blanc);
}
.lots-admin-table input[type="file"] { font-size: 0.7rem; max-width: 150px; }
.lots-admin-table .lot-file-name { font-size: 0.68rem; color: var(--gris); margin-top: 3px; word-break: break-all; }
.lots-admin-table .lot-actions-cell { white-space: nowrap; }
.lots-admin-table .lot-copy, .lots-admin-table .lot-remove {
  border: none; background: none; cursor: pointer; font-size: 1rem; padding: 4px 8px; border-radius: 4px;
}
.lots-admin-table .lot-copy { color: var(--or-fonce); }
.lots-admin-table .lot-copy:hover { background: rgba(198,164,92,0.16); }
.lots-admin-table .lot-remove { color: var(--danger); }
.lots-admin-table .lot-remove:hover { background: rgba(178,58,58,0.1); }
.lots-admin-table .lot-empty { color: var(--gris); font-style: italic; padding: 16px; }

.form-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 30px; }

/* =========================================================
   Espace pro — formulaire d'encodage en étapes (wizard)
   Inspiré du parcours de publication d'athome.lu : barre de
   progression fine en haut, barre latérale d'étapes avec
   puces numérotées reliées par une ligne, cartes de type de
   bien avec icônes, compteurs -/+ et sélecteur CPE en lettres.
   ========================================================= */
.wizard-progress-track { height: 4px; background: var(--gris-clair); border-radius: 2px; margin-bottom: 34px; overflow: hidden; }
.wizard-progress-fill { height: 100%; background: var(--or-fonce); border-radius: 2px; transition: width 0.35s ease; }

.wizard-shell { display: flex; align-items: flex-start; gap: 44px; }
.wizard-sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
.wizard-step-item { position: relative; display: flex; gap: 14px; padding-bottom: 30px; cursor: pointer; }
.wizard-step-item:last-child { padding-bottom: 0; }
.wizard-step-item::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: -2px; width: 2px; background: var(--gris-clair);
}
.wizard-step-item:last-child::before { display: none; }
.wizard-step-item.completed::before { background: var(--or-fonce); }
.wizard-step-dot {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--gris-clair); display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; color: var(--gris); background: var(--blanc); transition: all var(--transition);
}
.wizard-step-item.active .wizard-step-dot { border-color: var(--noir); color: var(--noir); }
.wizard-step-item.completed .wizard-step-dot { border-color: var(--or-fonce); background: var(--or-fonce); color: #fff; }
.wizard-step-title { display: block; font-family: var(--font-titre); font-size: 0.92rem; color: var(--gris); transition: color var(--transition); }
.wizard-step-item.active .wizard-step-title, .wizard-step-item.completed .wizard-step-title { color: var(--noir); }
.wizard-step-desc { display: block; font-size: 0.74rem; color: var(--gris); margin-top: 2px; line-height: 1.4; }
.wizard-step-item:hover .wizard-step-title { color: var(--or-fonce); }

.wizard-content { flex: 1; min-width: 0; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 38px; }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }
.wizard-panel-title { font-size: 1.35rem; margin-bottom: 8px; }
.wizard-panel-intro { color: var(--gris); font-size: 0.88rem; line-height: 1.6; margin-bottom: 30px; max-width: 640px; }
.wizard-section-title { font-size: 0.95rem; margin: 30px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--gris-clair); }
.wizard-section-title:first-of-type { margin-top: 0; }

.wizard-nav-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--gris-clair); }

.field-error { color: #B23A3A; font-size: 0.78rem; margin-top: 6px; display: none; }
.form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: #B23A3A; }
.form-group.has-error .field-error { display: block; }

/* Cartes de type de bien (étape 1) */
.cat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 8px; }
@media (max-width: 800px) { .cat-cards { grid-template-columns: repeat(2,1fr); } }
.cat-card-choice {
  border: 1px solid var(--gris-clair); border-radius: var(--rayon); padding: 24px 16px; text-align: center;
  cursor: pointer; transition: all var(--transition);
}
.cat-card-choice:hover { border-color: var(--or); background: #FFFDF6; }
.cat-card-choice.active { border-color: var(--noir); background: rgba(198,164,92,0.08); box-shadow: 0 0 0 1px var(--noir); }
.cat-card-choice .icon { color: var(--or-fonce); margin-bottom: 12px; }
.cat-card-choice .icon svg { width: 30px; height: 30px; }
.cat-card-choice strong { display: block; font-family: var(--font-titre); font-size: 0.95rem; margin-bottom: 4px; }
.cat-card-choice span { font-size: 0.74rem; color: var(--gris); }

/* Compteurs -/+ (chambres, salles de bain, parkings…) */
.counter-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 10px; }
@media (max-width: 700px) { .counter-grid { grid-template-columns: 1fr 1fr; } }
.counter-item label { display: block; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
.counter-hint { text-transform: none; letter-spacing: 0; font-size: 0.72rem; }
.counter-field { display: flex; align-items: center; border: 1px solid var(--gris-clair); border-radius: var(--rayon); overflow: hidden; max-width: 170px; }
.counter-field button {
  width: 40px; height: 44px; flex-shrink: 0; border: none; background: #FAF8F3; color: var(--noir);
  font-size: 1.1rem; cursor: pointer; transition: background var(--transition);
}
.counter-field button:hover { background: rgba(198,164,92,0.16); }
.counter-field input {
  flex: 1; min-width: 0; border: none; text-align: center; font-size: 0.92rem; padding: 0;
  font-family: var(--font-texte); background: var(--blanc);
}
.counter-field input:focus { outline: none; }

/* Sélecteur CPE en rangée de lettres */
.cpe-field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 700px) { .cpe-field-group { grid-template-columns: 1fr; } }
.cpe-field-label { display: block; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.letter-row { display: flex; gap: 6px; flex-wrap: wrap; }
.letter-btn {
  width: 38px; height: 38px; border: 1px solid var(--gris-clair); border-radius: 6px; background: var(--blanc);
  font-family: var(--font-titre); font-size: 0.8rem; font-weight: 600; color: var(--noir); cursor: pointer;
  transition: all var(--transition);
}
.letter-btn:hover { border-color: var(--or); }
.letter-btn.active { border-color: var(--noir); background: var(--noir); color: #fff; }

/* Choix d'affichage public de l'adresse (étape "Informations générales") */
.addr-visibility-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 700px) { .addr-visibility-row { grid-template-columns: 1fr; } }
.addr-visibility-btn {
  text-align: left; border: 1px solid var(--gris-clair); border-radius: var(--rayon); background: var(--blanc);
  padding: 14px 16px; cursor: pointer; transition: all var(--transition);
}
.addr-visibility-btn:hover { border-color: var(--or); background: #FFFDF6; }
.addr-visibility-btn.active { border-color: var(--noir); background: rgba(198,164,92,0.08); box-shadow: 0 0 0 1px var(--noir); }
.addr-visibility-btn strong { display: block; font-family: var(--font-titre); font-size: 0.85rem; margin-bottom: 4px; }
.addr-visibility-btn span { display: block; font-size: 0.72rem; color: var(--gris); }

/* Grilles de cases à cocher (statuts, commodités, extérieur…) */
.wizard-subtle-label { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); margin: 22px 0 10px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px 16px; margin-bottom: 8px; }
.checkbox-grid-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 800px) { .checkbox-grid { grid-template-columns: repeat(2,1fr); } .checkbox-grid-3 { grid-template-columns: repeat(2,1fr); } }
.checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }
.checkbox-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--noir); flex-shrink: 0; cursor: pointer; }

/* Onglets de traduction (étape Description) */
.translation-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.translation-tab-btn {
  border: 1px solid var(--gris-clair); border-radius: var(--rayon); background: var(--blanc);
  padding: 8px 18px; font-size: 0.82rem; cursor: pointer; transition: all var(--transition);
}
.translation-tab-btn:hover { border-color: var(--or); }
.translation-tab-btn.active { border-color: var(--noir); background: var(--noir); color: #fff; }

/* Récapitulatif (dernière étape) */
.wizard-recap { margin-top: 30px; }
.wizard-recap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 700px) { .wizard-recap-grid { grid-template-columns: 1fr 1fr; } }
.wizard-recap-grid > div { background: #FAF8F3; border-radius: var(--rayon); padding: 14px 16px; }
.wizard-recap-grid span { display: block; font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; }
.wizard-recap-grid strong { font-family: var(--font-titre); font-size: 0.95rem; }

@media (max-width: 900px) {
  .wizard-shell { flex-direction: column; }
  .wizard-sidebar { width: 100%; position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .wizard-step-item { flex-direction: column; align-items: center; padding-bottom: 0; width: 84px; flex-shrink: 0; gap: 6px; }
  .wizard-step-item::before { display: none; }
  .wizard-step-desc { display: none; }
  .wizard-step-title { font-size: 0.68rem; text-align: center; line-height: 1.3; }
  .wizard-content { padding: 24px 18px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 28px; right: 28px;
  background: var(--noir); color: var(--or);
  padding: 16px 24px; border-radius: var(--rayon);
  font-size: 0.85rem; box-shadow: var(--ombre);
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: all 0.3s ease;
  z-index: 999;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 70px 20px; color: var(--gris); }
.empty-state .icon { font-size: 2.4rem; margin-bottom: 14px; }

/* ---------- Utilitaires ---------- */
.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }

/* ---------- Bandeau de consentement cookies (RGPD) ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--noir-doux); color: var(--creme);
  padding: 18px 24px; box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-texte); font-size: 0.85rem;
}
.cookie-banner p { margin: 0; max-width: 640px; line-height: 1.5; }
.cookie-banner a { color: var(--or-clair); }
.cookie-banner .cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner button {
  cursor: pointer; border: none; font-family: var(--font-texte);
  font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 10px 20px; border-radius: var(--rayon); transition: var(--transition);
}
.cookie-banner .cookie-accept { background: var(--or); color: var(--noir); }
.cookie-banner .cookie-accept:hover { background: var(--or-clair); }
.cookie-banner .cookie-refuse { background: transparent; color: var(--creme); border: 1px solid var(--gris-clair); }
.cookie-banner .cookie-refuse:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-banner .cookie-actions { justify-content: stretch; }
  .cookie-banner button { flex: 1; }
}

/* ---------- Pages légales (mentions légales / confidentialité) ---------- */
.legal-content h2 { margin-top: 40px; margin-bottom: 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--gris); line-height: 1.7; }
.legal-content ul { padding-left: 20px; margin: 10px 0; }
.legal-content strong { color: var(--noir); }

/* =========================================================
   Recherches Clients — page publique + Espace pro
   Additif uniquement : aucune règle existante modifiée.
   ========================================================= */
.recherche-card {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recherche-card .type { font-weight: 600; font-size: 1.05rem; color: var(--noir); }
.recherche-card .criteres { color: var(--or-fonce); font-size: 0.88rem; font-weight: 500; }
.recherche-card .details { color: var(--gris); font-size: 0.88rem; line-height: 1.6; }
.recherche-card .date { color: var(--gris); font-size: 0.75rem; margin-top: auto; padding-top: 8px; }

.rc-empty-state { text-align: center; color: var(--gris); padding: 46px 18px; }

/* Champ honeypot anti-spam : invisible pour un vrai visiteur, mais présent
   dans le DOM et le tabulation-order neutralisé — la plupart des robots de
   spam remplissent tout de même les champs de formulaire qu'ils détectent. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-alert {
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 0.88rem;
  margin-bottom: 18px;
  display: none;
}
.form-alert.show { display: block; }
.form-alert.success { background: rgba(75,123,87,0.12); color: var(--succes); }
.form-alert.error { background: rgba(178,58,58,0.1); color: var(--danger); }

/* Modales de l'Espace pro (ajout/modification d'une recherche, texte
   réseaux sociaux) — même esprit que .lightbox-overlay (galerie photo)
   mais centré, fond clair, pour un formulaire plutôt qu'une image. */
.rc-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,20,20,0.55);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rc-modal-overlay.open { display: flex; }
.rc-modal {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 32px;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
@media (max-width: 600px) {
  .rc-modal { padding: 22px; }
}