/* =========================================================
   ELAN Immobilier
   Palette : noir + or du logo, gris très clair de la référence
   ========================================================= */

:root {
  --encre: #000000;
  --or: #cd9e4e;
  --or-clair: #e8c583;
  --fond: #f7f7f7;
  --carte: #ffffff;
  --gris: #6b6b6b;
  --trait: #e3e1dd;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

/* ---------- Barre du haut ---------- */

.barre {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}

.barre img.logo { height: 38px; display: block; }

.barre nav ul {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.barre nav a {
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.barre nav a:hover { color: var(--encre); border-bottom-color: var(--or); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--encre);
  color: #fff;
  padding: 64px 22px 84px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://picsum.photos/seed/elan-hero/1200/900');
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}

.hero > * { position: relative; }

.hero h1 {
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  max-width: 14ch;
  margin-bottom: 18px;
}

.hero p {
  color: rgba(255,255,255,0.78);
  max-width: 44ch;
  margin: 0 0 28px;
}

.hero-trait {
  width: 54px;
  height: 2px;
  background: var(--or);
  margin-bottom: 26px;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--encre);
  color: #fff;
  border: 1px solid var(--encre);
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* Le "hidden" du HTML doit gagner sur le "display: inline-block" juste
 * au-dessus. Sans cette regle, un bouton marque hidden reste visible
 * quand meme : c'est ce qui faisait apparaitre "+ Ajouter un bien" a
 * des personnes qui n'ont pas ce droit. */
.btn[hidden] {
  display: none;
}

.btn:hover { background: var(--or); border-color: var(--or); color: var(--encre); }

.btn-or {
  background: var(--or);
  border-color: var(--or);
  color: var(--encre);
}

.btn-or:hover { background: var(--or-clair); border-color: var(--or-clair); }

.btn-vide {
  background: transparent;
  color: var(--gris);
  border-color: var(--trait);
}

.btn-vide:hover { background: transparent; color: var(--encre); border-color: var(--encre); }

/* ---------- Sections ---------- */

.zone {
  padding: 54px 22px;
  scroll-margin-top: 64px;
}

.zone-titre {
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  margin-bottom: 8px;
}

.zone-intro {
  color: var(--gris);
  margin: 0 0 30px;
  max-width: 52ch;
}

/* ---------- Panneau de recherche ---------- */

.recherche {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--or);
  border-radius: 3px;
  padding: 22px 18px;
  margin-bottom: 26px;
}

.segments {
  display: flex;
  border: 1px solid var(--trait);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
}

.segments input { position: absolute; opacity: 0; pointer-events: none; }

.segments label {
  flex: 1;
  text-align: center;
  padding: 11px 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gris);
  cursor: pointer;
  border-right: 1px solid var(--trait);
}

.segments label:last-of-type { border-right: none; }

.segments input:checked + label {
  background: var(--encre);
  color: #fff;
}

.champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.champ { display: flex; flex-direction: column; gap: 5px; }

.champ-large { grid-column: 1 / -1; }

.champ label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gris);
}

.champ select,
.champ input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--trait);
  border-radius: 2px;
  background: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--encre);
}

.champ select:focus,
.champ input:focus { border-color: var(--or); outline: none; }

.actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.actions .btn { flex: 1; text-align: center; }

/* ---------- Ligne de résultats ---------- */

.ligne-resultats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--trait);
}

#resultCount {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.tri { display: flex; align-items: center; gap: 8px; }

.tri label { font-size: 0.78rem; color: var(--gris); }

.tri select {
  padding: 7px 10px;
  border: 1px solid var(--trait);
  border-radius: 2px;
  background: #fff;
  font-family: inherit;
  font-size: 0.85rem;
}

#noResults {
  padding: 26px 18px;
  background: var(--carte);
  border: 1px dashed var(--trait);
  color: var(--gris);
  text-align: center;
}

/* ---------- Grille et cartes ---------- */

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.propriete-card {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.carte-image {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #ebe9e5;
}

.carte-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carte-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #a5a19a;
  font-size: 0.85rem;
}

.carte-corps { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.carte-meta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--or);
}

.propriete-card h3 { font-size: 1.35rem; }

.carte-desc {
  color: var(--gris);
  font-size: 0.9rem;
  margin: 0;
}

.carte-prix {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.5rem;
  margin: 6px 0 14px;
}

.carte-corps .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Badges ---------- */

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.75);
}

.badge-available { background: #1f7a3d; }
.badge-unavailable { background: #a92b2b; }
.badge-hold { background: #d8a114; color: #1a1a1a; }

/* le badge de la page détail n'est pas posé sur une photo */
.badge-fixe { position: static; display: inline-block; margin-bottom: 14px; }

/* ---------- Bande contact (noire) ---------- */

.bande-noire {
  background: var(--encre);
  color: #fff;
}

.bande-noire .zone-titre { color: #fff; }
.bande-noire .zone-intro { color: rgba(255,255,255,0.72); }

.bande-noire .champ label { color: rgba(255,255,255,0.65); }

.bande-noire .champ input {
  background: transparent;
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}

.formulaire-contact { max-width: 460px; }

#contactMessage { color: var(--or-clair); }

/* ---------- Pied de page ---------- */

footer {
  background: var(--encre);
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 26px 20px;
  font-size: 0.82rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* =========================================================
   Page détail
   ========================================================= */

.retour {
  display: inline-block;
  padding: 18px 22px 0;
  font-size: 0.85rem;
  color: var(--gris);
  text-decoration: none;
}

.retour:hover { color: var(--encre); }

.fiche { padding: 20px 22px 54px; }

.fiche h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); margin-bottom: 14px; }

.fiche-prix {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 2rem;
  margin: 4px 0 18px;
}

.galerie { display: grid; gap: 12px; margin: 18px 0 26px; }

.galerie img,
.galerie video {
  width: 100%;
  border-radius: 3px;
  display: block;
  background: #ebe9e5;
}

.photo-placeholder {
  background: var(--carte);
  border: 1px dashed var(--trait);
  color: #a5a19a;
  padding: 52px 20px;
  text-align: center;
  border-radius: 3px;
  font-size: 0.9rem;
}

.faits {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  border-top: 1px solid var(--trait);
}

.faits li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--trait);
  font-size: 0.92rem;
}

.faits span:first-child { color: var(--gris); }
.faits span:last-child { font-weight: 600; }

.fiche-desc { color: #3b3b3b; margin-bottom: 30px; }

/* ---------- Bloc d'intérêt ---------- */

.interet-form {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--or);
  border-radius: 3px;
  padding: 22px 18px;
}

.interet-form h3 { font-size: 1.4rem; margin-bottom: 6px; }

.interet-intro { color: var(--gris); font-size: 0.9rem; margin: 0 0 18px; }

.interet-form .champ { margin-bottom: 14px; }

.questions label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--trait);
  border-radius: 2px;
  font-size: 0.92rem;
  cursor: pointer;
}

.questions label:hover { border-color: var(--or); }

.questions input { margin-top: 4px; accent-color: var(--or); }

.note-frais {
  background: #faf6ee;
  border-left: 3px solid var(--or);
  padding: 12px 14px;
  margin: 18px 0;
  font-size: 0.86rem;
  color: #5a5245;
}

.contact-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
}

.contact-option strong { flex: 1; font-size: 0.92rem; }

.contact-option .btn { padding: 9px 16px; font-size: 0.82rem; }

.petit { font-size: 0.8rem; color: var(--gris); }

/* =========================================================
   Écrans larges
   ========================================================= */

@media (min-width: 700px) {
  .barre { padding: 12px 40px; }
  .barre img.logo { height: 46px; }
  .hero { padding: 110px 40px 130px; }
  .zone { padding: 76px 40px; }
  .recherche { padding: 28px; }
  .champs { grid-template-columns: repeat(4, 1fr); }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .fiche, .retour { padding-left: 40px; padding-right: 40px; }
  .fiche { max-width: 900px; }
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie > *:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* =========================================================
   Ajouts : référence, créneaux de visite, messagerie
   ========================================================= */

/* Référence du bien, discrète sur la carte et la fiche */
.ref {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gris);
  letter-spacing: 0.04em;
}

/* Petites étiquettes pièces / surface sur la carte */
.attributs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 2px;
}

.attribut {
  padding: 3px 9px;
  border: 1px solid var(--trait);
  border-radius: 2px;
  font-size: 0.75rem;
  color: var(--gris);
}

/* ---------- Créneaux de visite ---------- */

.creneaux {
  border: 1px solid var(--trait);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 14px;
}

.creneaux-entete,
.creneau-ligne {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  align-items: center;
  gap: 4px;
}

.creneaux-entete {
  background: #f3f1ed;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gris);
  text-align: center;
  padding: 8px 6px;
}

.creneaux-entete span:first-child { text-align: left; padding-left: 10px; }

.creneau-ligne {
  border-top: 1px solid var(--trait);
  padding: 6px;
}

.creneau-jour { font-size: 0.82rem; padding-left: 6px; }

.creneau-case {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  cursor: pointer;
}

.creneau-case input { accent-color: var(--or); width: 17px; height: 17px; }

/* ---------- Messagerie : choix du chemin ---------- */

.chemins {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
  max-width: 560px;
}

.chemin {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 2px;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}

.chemin:hover { border-color: var(--or); }

.chemin[aria-pressed="true"] {
  border-color: var(--or);
  background: rgba(205,158,78,0.14);
}

.chemin strong { display: block; font-size: 1rem; margin-bottom: 3px; }

.chemin span { font-size: 0.84rem; color: rgba(255,255,255,0.66); }

/* Champs sur fond noir */
.bande-noire .champ select,
.bande-noire .champ textarea {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 2px;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 11px 12px;
  width: 100%;
}

.bande-noire .champ select option { color: #111; }

.bande-noire .champ input::placeholder,
.bande-noire .champ textarea::placeholder { color: rgba(255,255,255,0.38); }

.bande-noire .contact-option { border-bottom-color: rgba(255,255,255,0.16); }

.bande-noire .petit { color: rgba(255,255,255,0.6); }

.formulaire-messagerie { max-width: 560px; }

.formulaire-messagerie .champ { margin-bottom: 14px; }

.formulaire-messagerie textarea { resize: vertical; min-height: 90px; }

.champ-aide { font-size: 0.76rem; color: rgba(255,255,255,0.5); margin: -2px 0 0; }

@media (min-width: 700px) {
  .chemins { grid-template-columns: 1fr 1fr; max-width: 720px; }
}

/* --------------------------------------------------------------------------
   ETATS DE CHARGEMENT
   Les biens viennent maintenant du serveur, donc il existe un court moment
   ou la page est vide. Sans ces messages, le visiteur croirait que l'agence
   n'a aucun bien a proposer.
   -------------------------------------------------------------------------- */

.chargement {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-size: 1rem;
}

.chargement-erreur {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
}

.chargement-erreur p {
  color: #a33;
  margin-bottom: 16px;
}

/* ==========================================================================
   SELECTEUR DE LANGUE
   ========================================================================== */

.zone-langue { margin-left: auto; padding-left: 12px; }

.select-langue {
  font-family: inherit;
  font-size: 16px;              /* 16px minimum : en dessous, l'iPhone
                                   zoome tout seul quand on touche le champ */
  padding: 8px 10px;
  min-height: 44px;             /* taille minimale confortable au pouce */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;     /* Safari met un style natif tres different */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 30px;
}

/* Sur iPhone, le menu deroulant s'affiche par-dessus : le texte des
   options doit rester lisible sur fond clair du systeme. */
.select-langue option { color: #111; background: #fff; }

/* ==========================================================================
   RETOUR : TOUJOURS VISIBLE
   La boss s'est perdue dans une fiche. Sur iPhone, Safari cache sa propre
   fleche de retour des qu'on fait defiler la page. Le site fournit donc
   la sienne, collee en haut, avec une vraie fleche.
   ========================================================================== */

.retour-barre {
  position: -webkit-sticky;     /* Safari a besoin du prefixe */
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #eee;
}

.retour-barre .retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;             /* cible tactile confortable */
  padding: 8px 16px;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  background: #fff;
  color: #222;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.retour-barre .retour:hover,
.retour-barre .retour:active { background: #f4f0e8; border-color: #c9a227; }

.retour-fleche { font-size: 20px; line-height: 1; }
.retour-maison { font-size: 18px; line-height: 1; }

/* ==========================================================================
   CARTES FANTOMES PENDANT LE CHARGEMENT
   Une page vide sur un reseau lent donne l'impression que l'agence n'a
   rien a proposer. Ces formes grises montrent que quelque chose arrive.
   ========================================================================== */

.squelette {
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.squelette-image {
  height: 190px;
  background: #eee;
}

.squelette-image.grande { height: 260px; }

.squelette-corps { padding: 16px; }

.squelette-ligne {
  height: 12px;
  border-radius: 6px;
  background: #eee;
  margin-bottom: 10px;
}

.squelette-ligne.courte  { width: 35%; }
.squelette-ligne.longue  { width: 85%; height: 16px; }
.squelette-ligne.moyenne { width: 60%; }
.squelette-ligne.prix    { width: 45%; height: 18px; margin-top: 16px; }

/* Reflet qui traverse les formes : signale que ca travaille */
.squelette-image,
.squelette-ligne {
  background-image: linear-gradient(90deg, #eee 0%, #f7f7f7 50%, #eee 100%);
  background-size: 200% 100%;
  -webkit-animation: reflet 1.4s ease-in-out infinite;
  animation: reflet 1.4s ease-in-out infinite;
}

@-webkit-keyframes reflet {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes reflet {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Certaines personnes sont genees par les animations, et le systeme
   permet de le signaler. On respecte ce reglage. */
@media (prefers-reduced-motion: reduce) {
  .squelette-image,
  .squelette-ligne {
    -webkit-animation: none;
    animation: none;
    background-image: none;
  }
}

.squelette-annonce {
  grid-column: 1 / -1;
  text-align: center;
  color: #777;
  padding: 16px 20px 0;
  font-size: 15px;
}

/* Message qui apparait quand l'attente se prolonge */
.squelette-annonce.lent {
  color: #8a6d1f;
  font-weight: 600;
}

.squelette-fiche { max-width: 900px; margin: 0 auto; }

/* ==========================================================================
   CONFORT SUR IPHONE
   ========================================================================== */

/* En dessous de 16px, Safari zoome automatiquement des qu'on touche un
   champ, et la page part de travers. */
input, select, textarea { font-size: 16px; }

/* Enleve le rectangle gris qui clignote au toucher sur iPhone */
a, button, label, input, select { -webkit-tap-highlight-color: rgba(201, 162, 39, 0.15); }

/* Defilement fluide dans les zones qui debordent */
body { -webkit-overflow-scrolling: touch; }

/* Safari applique un style natif aux boutons qui ecrase le notre */
button, .btn { -webkit-appearance: none; appearance: none; }

/* Aperçu du message avant envoi, sur la fiche d'un bien.
   Le visiteur doit voir ce qui partira en son nom avant de cliquer. */
.apercu-message {
  background: #f7f5f0;
  border-left: 3px solid #c9a227;
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;      /* respecte les retours à la ligne du message */
  word-break: break-word;     /* un mot très long ne déborde pas de l'écran */
  margin: 0 0 20px;
  color: #333;
}

/* ==========================================================================
   RÉSEAUX SOCIAUX, EN PIED DE PAGE
   ========================================================================== */

.reseaux {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
}

.reseaux[hidden] { display: none; }

.reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px : la taille minimale pour qu'un doigt touche sans se tromper
     de lien sur un téléphone. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--or);
  border: 1px solid rgba(205, 158, 78, 0.45);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.reseaux a:hover,
.reseaux a:focus-visible {
  color: var(--encre);
  background: var(--or);
  border-color: var(--or);
}