/* Immobilier : page dediee, sur le modele de fuites.html (une liste +
   un formulaire d'ajout) mais avec l'habillage visuel demande --
   en-tete illustree, plus proche d'une page de vente que d'un simple
   formulaire. Aucune verification reelle du titre de propriete n'existe
   encore (voir js/protections.js, principe 7) : chaque texte le dit,
   jamais de promesse deguisee en etat actif. */

.immo-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xxl);
  max-width: 1000px;
  margin: 0 auto var(--space-xxl);
  padding: var(--space-xl) 0;
}
.immo-hero__oeil {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-caption-size);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--action);
}
.immo-hero__titre {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: var(--titre-page-taille);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-lh);
  color: var(--brand-1);
  max-width: 22em;
}
.immo-hero__lede {
  margin: 0 0 var(--space-lg);
  max-width: 34em;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ink-muted-80);
}
.immo-hero__illustration { flex: 0 0 auto; }
.immo-cta { display: inline-flex; align-items: center; gap: var(--space-xs); }

/* ── Bandeau "en veille" : affiche uniquement quand au moins un bien est
   enregistre (voir rendreBiens() dans le HTML), a la place du hero de
   vente ci-dessus -- l'etat sans bien garde le hero d'origine intact,
   sur demande expresse.
   Fond bleu nuit, le meme degrade que la barre laterale (--brand-1 ->
   --brand-3) : la carte se detache de la page lavande comme le bandeau du
   tableau de bord. Le vert reste un VRAI signal, jamais une decoration :
   une lueur discrete derriere l'embleme, la coche et la pastille
   « En direct » -- voir js/protections.js, principe 7 : rien n'est dit de
   plus que ce qui est reellement fait. */
.immo-actif {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-xxl);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-xl);
  color: var(--on-dark);
  --lueur: 0% 50%;
  background:
    radial-gradient(62% 130% at var(--lueur), rgba(18,135,111,.26) 0%, transparent 66%),
    radial-gradient(70% 120% at 100% 0%, rgba(115,111,182,.42) 0%, transparent 62%),
    linear-gradient(150deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 24px 50px -26px rgba(25,20,62,.62);
}
/* Filigrane : le symbole de la marque, tres pale, dans le coin bas droit.
   Il donne de la profondeur au fond bleu sans jamais passer sous du
   texte utile (opacite .08, coin perdu, derriere tout le contenu). */
.immo-actif::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -130px;
  width: 360px;
  height: 360px;
  background: url("../assets/brand/icone-blanc.svg") center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
}
.immo-actif__scene {
  position: relative;
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
  display: grid;
  place-items: center;
}
/* L'embleme : une maison pleine dans un disque clair, avec la coche verte
   « sous protection » -- meme famille de gestes que le symbole de la marque
   (forme simple, un seul trait de couleur). Le disque est clair pour que la
   maison, en bleu de marque, se lise d'un coup d'oeil sur le fond nuit. */
.immo-actif__ecusson {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #fff 0%, var(--action-tint-strong) 100%);
  color: var(--brand-2);
  box-shadow:
    0 0 0 7px rgba(255,255,255,.10),
    0 16px 28px -12px rgba(8,5,30,.75),
    inset 0 1px 0 #fff;
}
.immo-maison { display: block; fill: currentColor; }
.immo-actif__maison { width: 38px; height: 38px; }
.immo-actif__coche {
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--signal-sur);
  color: var(--on-dark);
  box-shadow: 0 0 0 3px var(--brand-2), 0 6px 12px -4px rgba(0,0,0,.55);
}
/* Ondulations vers l'exterieur, meme trace que .solde-vide__onde : delai
   NEGATIF pour paraitre deja en cours des la premiere image. */
.immo-actif__onde {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  opacity: .55;
  animation: immoOnde 3.6s ease-out infinite;
  animation-delay: calc(var(--i) * -1.2s);
}
@keyframes immoOnde {
  from { width: 68px; height: 68px; opacity: .55; }
  to   { width: 124px; height: 124px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .immo-actif__onde { animation: none; display: none; }
}
.immo-actif__texte { flex: 1 1 auto; min-width: 0; }
/* Meme badge que « En direct » du tableau de bord (.veille-hero__direct) :
   lisere blanc, pastille verte pleine, allumee en permanence. */
.immo-actif__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-xs);
  padding: 3px 11px 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.45);
  color: var(--on-dark);
  font-size: var(--text-fine-size);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.immo-actif__puce {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ee0c4;
  box-shadow: 0 0 0 3px rgba(126,224,196,.22), 0 0 10px rgba(126,224,196,.7);
  opacity: 1;
}
.immo-actif__titre {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--titre-bandeau-taille);
  font-weight: 700;
  color: var(--on-dark);
  text-wrap: balance;
}
/* Le bien reellement enregistre, en evidence : une carte de verre a
   l'interieur de la carte bleue, pour que l'adresse se distingue du
   texte de statut plutot que de s'y fondre. */
.immo-actif__bien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.immo-actif__adresse { margin: 0; font-size: var(--text-body-strong-size); font-weight: var(--text-body-strong-weight); color: var(--on-dark); }
.immo-actif__ville { margin: 2px 0 0; font-size: var(--text-caption-size); color: rgba(255,255,255,.84); }
.immo-actif__statut {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(126,224,196,.16);
  border: 1px solid rgba(126,224,196,.34);
  color: #c4f7e7;
  font-size: var(--text-fine-size);
  font-weight: 700;
  white-space: nowrap;
}
.immo-actif__lede {
  margin: 0 0 var(--space-sm);
  max-width: 44em;
  font-size: var(--text-caption-size);
  line-height: var(--text-body-lh);
  color: rgba(255,255,255,.86);
  text-wrap: pretty;
}
.immo-actif__retirer {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  font-size: var(--text-caption-size);
  font-weight: 600;
  color: rgba(255,255,255,.78);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.immo-actif__retirer:hover { color: #ffb8c8; }
.immo-actif__retirer:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 720px) {
  /* En colonne, l'embleme passe en haut : la lueur verte le suit. */
  .immo-actif { --lueur: 50% 0%; flex-direction: column; text-align: center; padding: var(--space-lg); }
  .immo-actif__bien { flex-direction: column; text-align: center; }
}

/* ── Trois facettes du meme mecanisme (voir le commentaire du HTML) ── */
.immo-explication {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: 1000px;
  margin: 0 auto var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--divider-soft);
}
.immo-explication__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--action-tint);
  color: var(--brand-4);
}
.immo-explication__titre { margin: 0 0 6px; font-size: var(--text-body-strong-size); font-weight: var(--text-body-strong-weight); color: var(--brand-1); }
.immo-explication__tag {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  font-size: var(--text-fine-size);
  color: var(--ink-muted-80);
}
.immo-explication__texte { margin: 0; font-size: var(--text-caption-size); line-height: 1.55; color: var(--ink-muted-80); }

/* ============================================================================
   Panneau "Activer la surveillance du bien" : degrade bleu -> vert, sur
   demande expresse (le bleu de la marque qui se resout en vert "surete"
   au fil du formulaire, jusqu'au bouton d'activation). Memes mecaniques
   d'ouverture que verifier.css (voile + translateX, offsetHeight force
   le repaint avant --ouvert).
   IMPORTANT : le voile doit ignorer les clics tant qu'il n'est pas
   --ouvert -- sans pointer-events:none, un calque invisible en
   position:fixed/inset:0 reste au-dessus de toute la page et absorbe le
   clic sur le bouton "Activer la surveillance d'un bien" avant meme que
   le panneau ait pu s'ouvrir (bug constate : le panneau ne s'ouvrait
   jamais). ========================================================================== */
.immo-voile {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(25,20,62,.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.immo-voile--ouvert { opacity: 1; pointer-events: auto; }

.immo-panneau {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 71;
  width: clamp(420px, 42vw, 620px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(140% 70% at 50% 0%, rgba(183,174,201,.6) 0%, transparent 60%),
    radial-gradient(120% 65% at 50% 100%, rgba(233,246,243,.55) 0%, transparent 65%),
    linear-gradient(180deg, var(--brand-3) 0%, var(--brand-4) 32%, var(--brand-5) 58%, var(--signal-sur) 100%);
  box-shadow: -30px 0 70px -30px rgba(15,50,42,.45);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.immo-panneau--ouvert { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .immo-voile, .immo-panneau { transition: none; }
}

.immo-panneau__entete {
  flex: 0 0 auto;
  position: relative;
  padding: var(--space-lg) var(--space-xl) var(--space-lg);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
/* Meme mecanique que .immo-actif (ecusson + ondes qui s'estompent vers
   l'exterieur, delai NEGATIF pour paraitre deja en cours), mais en verre
   translucide et sans la coche verte : ce badge annonce la fonction, il
   ne pretend pas qu'elle est deja active (la coche est reservee a
   .immo-actif, une fois le bien reellement enregistre). */
.immo-panneau__scene {
  position: relative;
  width: 100%;
  height: 74px;
  margin: 0 auto var(--space-xs);
  display: grid;
  place-items: center;
}
.immo-panneau__ecusson {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--on-dark);
}
.immo-panneau__maison { width: 30px; height: 30px; }
.immo-panneau__onde {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  opacity: .6;
  animation: immoPanneauOnde 3.6s ease-out infinite;
  animation-delay: calc(var(--i) * -1.2s);
}
@keyframes immoPanneauOnde {
  from { width: 54px; height: 54px; opacity: .6; }
  to   { width: 140px; height: 140px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .immo-panneau__onde { animation: none; display: none; }
}
.immo-panneau__titre { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--on-dark); }
.immo-panneau__lede { margin: 0 auto; max-width: 34em; font-size: var(--text-caption-size); line-height: 1.5; color: var(--on-dark-muted); }
.immo-panneau__fermer {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  appearance: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: var(--on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard);
}
.immo-panneau__fermer:hover { background: rgba(255,255,255,.24); }

.immo-panneau__corps { flex: 1 1 auto; overflow-y: auto; padding: var(--space-lg) var(--space-xl) var(--space-xxl); }
/* Bouton final en reverse (blanc, texte fonce) plutot qu'en violet plein,
   meme traitement que verifier.css pour les panneaux sur fond degrade :
   c'est le geste qui termine le parcours, il doit se detacher le plus. */
.immo-panneau__corps .btn--action { background: var(--on-dark); color: var(--brand-1); }
.immo-panneau__corps .btn--action:hover { background: var(--on-dark-muted); }

.immo-section__titre { margin: var(--space-lg) 0 4px; font-size: var(--text-body-strong-size); font-weight: var(--text-body-strong-weight); color: var(--on-dark); }
.immo-section__titre:first-child { margin-top: 0; }
.immo-section__note { margin: 0 0 var(--space-md); font-size: var(--text-fine-size); line-height: 1.5; color: var(--on-dark-muted); }
.immo-separateur { margin: var(--space-lg) 0; border: 0; border-top: 1px solid rgba(255,255,255,.16); }

.immo-champ { margin-bottom: var(--space-md); }
.immo-champ .field__label { display: block; margin-bottom: 6px; font-size: var(--text-caption-strong-size); font-weight: var(--text-caption-strong-weight); color: var(--on-dark); }
.immo-champ .field__input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-body-size);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-sm);
  color: var(--on-dark);
}
.immo-champ .field__input::placeholder { color: var(--on-dark-muted); opacity: .8; }
.immo-champ .field__input:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 1px; }
.immo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.immo-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-md); }

.immo-segmente { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); }
.immo-segmente__opt {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-md);
  font-size: var(--text-caption-size);
  color: var(--on-dark-muted);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
/* Case active en vert plutot qu'en accent violet : ici, "choisi" et
   "en cours d'activation" sont la meme idee (voir le degrade du panneau). */
.immo-segmente__opt:has(input:checked) { border-color: var(--signal-sur); background: rgba(18,135,111,.28); color: var(--on-dark); font-weight: 600; }
.immo-segmente--petit .immo-segmente__opt { padding: 6px var(--space-sm); font-size: var(--text-fine-size); }

.immo-proprietaire {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.06);
}
.immo-proprietaire__entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.immo-proprietaire__numero { font-size: var(--text-caption-strong-size); font-weight: var(--text-caption-strong-weight); color: var(--on-dark); }
.immo-proprietaire__retirer {
  appearance: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: var(--on-dark-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.immo-proprietaire__retirer:hover { border-color: var(--signal-critique); color: var(--on-dark); background: var(--signal-critique); }

.immo-ajouter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--text-caption-size);
  font-weight: 600;
  color: var(--action);
}
.immo-ajouter:hover { border-color: var(--action); background: var(--action-tint); }
/* Meme bouton, reutilise hors du panneau (bandeau "en veille" sur fond
   clair) et dedans (fond degrade sombre) : seul l'habillage change. */
.immo-panneau__corps .immo-ajouter { border-color: rgba(255,255,255,.4); color: var(--on-dark); }
.immo-panneau__corps .immo-ajouter:hover { border-color: var(--on-dark); background: rgba(255,255,255,.14); }

.immo-consentement {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: var(--on-dark);
  cursor: pointer;
}
.immo-consentement input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--signal-sur); }
.immo-consentement__note { margin: 0 0 var(--space-lg); font-size: var(--text-fine-size); color: var(--on-dark-muted); }

.immo-erreur { margin: 0 0 var(--space-md); font-size: var(--text-caption-size); font-weight: 600; color: var(--signal-critique-tint); }

/* ── Confirmation : la promesse tenue, mais jamais plus que ce qui est
   vraiment fait (« demande enregistree », pas « surveillance active »). ── */
.immo-confirmation { padding: var(--space-xxl) var(--space-md); text-align: center; }
.immo-confirmation__coche {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-lg);
  border-radius: 50%;
  background: var(--on-dark);
  color: var(--signal-sur);
}
.immo-confirmation__titre { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--on-dark); }
.immo-confirmation__texte { margin: 0 auto var(--space-xl); max-width: 32em; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--on-dark-muted); }

/* ── Confirmation de retrait (.modale, partagee avec tableau-de-bord.css :
   voile + panneau centre, deja stylee la-bas). Seule la rangee de deux
   boutons est propre a cette boite. ── */
.modale-retirer__note { margin: 0 0 var(--space-md); font-size: var(--text-fine-size); line-height: 1.5; color: var(--ink-muted-80); }
.modale-retirer__note a { color: var(--action); font-weight: 600; }
.modale-retirer__actions { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.modale-retirer__actions .btn { flex: 1 1 0; }

@media (max-width: 720px) {
  .immo-hero { flex-direction: column; text-align: center; padding: var(--space-lg) 0; }
  .immo-hero__lede { margin-left: auto; margin-right: auto; }
  .immo-explication { grid-template-columns: 1fr; }
  .immo-panneau { width: 100%; }
  .immo-trio { grid-template-columns: 1fr; }
  .immo-duo { grid-template-columns: 1fr; }
}

/* Telephone : cibles tactiles de 44px (les liens et croix plus petits se
   manquaient au doigt). */
@media (max-width: 860px) {
  .immo-actif__retirer { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-xs); }
  .immo-panneau__fermer { width: 44px; height: 44px; top: var(--space-sm); right: var(--space-sm); }
  .immo-proprietaire__retirer { width: 40px; height: 40px; }
  .immo-ajouter { min-height: 44px; }
}