/* ============================================================================
   ecran-chasse.css - complément de l'écran Chasse.
   Ne redéfinit AUCUN composant : uniquement l'en-tête d'écran et le bandeau
   de dédoublonnage. L'habillage du panneau « voir la fiche » appartient au
   produit et vit dans css/fiche.css.
   Aucune valeur en dur : tout vient de tokens.css.
   ========================================================================== */

/* --- 1. En-tête d'écran ----------------------------------------------------
   Le titre porte la date du jour : il mérite la taille titre plutôt que la
   méta majuscule des bandeaux courants. */

.ecran-chasse__barre {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.ecran-chasse__barre .sous-vue {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.ecran-chasse [data-carte] {
  scroll-margin-top: calc(var(--barre-haute) + var(--sp-3));
}

.ecran-chasse__entete .bandeau__titre {
  text-transform: none;
  letter-spacing: -.012em;
  font-size: var(--fs-titre);
  line-height: var(--lh-titre);
  color: var(--encre);
  margin-bottom: 2px;
}
.ecran-chasse__entete .bandeau__texte strong { font-weight: var(--gras-titre); }

/* --- 2. Bandeau de dédoublonnage -------------------------------------------
   Le statut dépend d'un tiers : le bandeau se lit comme une réserve, jamais
   comme un acquis. Il emprunte la paire sémantique « alerte ».
   Son LIBELLÉ vient de la configuration du client (`textes.dedup`) : le
   produit ne décide pas de la manière dont un client nomme sa base. */

.bandeau.ecran-chasse__dedup {
  background: var(--alerte-fond);
  border-color: var(--alerte-fond);
  border-left-color: var(--alerte-encre);
  color: var(--alerte-encre);
}
.ecran-chasse__dedup .bandeau__titre,
.ecran-chasse__dedup .bandeau__note,
.ecran-chasse__dedup .bandeau__chevron { color: var(--alerte-encre); }
.ecran-chasse__dedup .bandeau__note { opacity: .9; }

/* ===========================================================================
   BLOC-BIEN - la seule dérogation au composant Carte (spec §5 S6).

   Un bien se juge d'abord à l'œil : photo à gauche, détails à droite, CTA
   sous le bloc. La carte garde sa mécanique (report, mise à l'écart, undo,
   badge) ; seule sa mise en page change ici.

   Placement automatique, dans l'ordre du DOM :
     chips  (bandeaux « à qualifier », « reportée »)  → toute la largeur
     .carrousel                                        → colonne gauche
     .carte__tap  (titre, badges, pourquoi, détails)   → colonne droite
     .carte__actions                                   → toute la largeur
   ======================================================================== */

.ecran-chasse .carte--bien {
  display: grid;
  /* DEUX colonnes par défaut : photo + détails, actions en rangée dessous.
     La troisième colonne (celle des actions) n'apparaît qu'à partir de
     1240 px de fenêtre - voir plus bas. Avant ce seuil elle ne tenait pas :
     288 + 224 + gouttières laissaient 52 px au texte à 900 px, et TOUT était
     rogné, prix compris. Le seuil se déduit : menu 232 + gouttières 32 +
     padding 32 + photo 288 + actions 224 + deux gouttières internes 40, plus
     les ~360 px que réclament trois attributs sur une ligne. */
  grid-template-columns: 232px minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
}
/* PHOTO ÉLARGIE - mode fil seulement. Un bien se juge d'abord à l'œil, et
   ce client scanne un flux : la vignette doit se lire d'un coup. Le gabarit
   commun, lui, ne bouge pas - une configuration qui ne déclare pas le fil
   garde exactement la mise en page recettée. */
.ecran-chasse .carte--fil { grid-template-columns: 288px minmax(0, 1fr); }
@media (min-width: 720px) {
  /* Carrée dès que la photo est en colonne : en 4/3 elle laissait sous elle
     une bande vide sur toute la hauteur du bloc. */
  .ecran-chasse .carte--fil .carrousel__vue { aspect-ratio: 1 / 1; }
}

.ecran-chasse .carte--bien > .carte__actions {
  grid-column: 1 / -1;
  flex-direction: row; flex-wrap: wrap; align-items: center;
  border-left: 0; border-top: 1px solid var(--ligne);
  padding-left: 0; margin-top: var(--sp-3);
}
.ecran-chasse .carte--bien > .carte__actions .btn { width: auto; }
.ecran-chasse .carte--bien > .carte__chip { grid-column: 1 / -1; }
.ecran-chasse .carte--bien > .carte__tap  { grid-column: 2; min-width: 0; }

/* --- Grand écran : la troisième colonne, celle des actions ---------------- */
@media (min-width: 1240px) {
  .ecran-chasse .carte--bien { grid-template-columns: 288px minmax(0, 1fr) 252px; }
  .ecran-chasse .carte--fil  { grid-template-columns: 380px minmax(0, 1fr) 252px; }
  .ecran-chasse .carte--bien > .carte__actions {
    grid-column: 3;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    border-top: 0;
    border-left: 1px solid var(--ligne);
    padding-left: var(--sp-3);
    margin-top: 0;
  }
  /* Une colonne d'actions : chaque CTA prend la largeur, aucun n'est
     prioritaire par sa taille - c'est l'ordre qui hiérarchise. */
  .ecran-chasse .carte--bien > .carte__actions .btn { width: 100%; justify-content: flex-start; }
}

/* Secondaire, sous « Envoyer vers Immofacile » : même colonne, moins de poids. */
.ecran-chasse .carte--bien > .carte__actions > .btn-remettre {
  flex: 1 0 100%;
  width: 100%;
  justify-content: flex-start;
  min-height: 36px;
  padding: 6px var(--sp-3);
  font-size: var(--fs-meta);
  font-weight: var(--gras-corps);
  line-height: 1.25;
  white-space: normal;
  text-align: left;
  color: var(--encre-douce);
  background: transparent;
  border-color: var(--ligne);
}
.ecran-chasse .carte--bien > .carte__actions > .btn-remettre:hover {
  color: var(--encre);
  background: var(--surface-appui);
}

/* --- Carrousel ----------------------------------------------------------- */

.ecran-chasse .carrousel {
  grid-column: 1;
  position: relative;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--surface-creuse);
}
.ecran-chasse .carrousel:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}

/* Ratio stable : le bloc ne saute pas d'une photo à l'autre. */
.ecran-chasse .carrousel__vue {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-creuse);
  overflow: hidden;
}
.ecran-chasse .carrousel__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ecran-chasse .carrousel__vue .photo-placeholder {
  position: absolute;
  inset: 0;
}
@supports not (aspect-ratio: 4 / 3) {
  .ecran-chasse .carrousel__vue { height: 174px; }
}

/* Flèches : cibles pleines (44 px), visibles sur toute teinte. */
.ecran-chasse .carrousel__fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--cible); height: var(--cible);
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92); color: var(--encre);
  box-shadow: var(--ombre-1);
  cursor: pointer;
}
.ecran-chasse .carrousel__fleche:hover { background: #FFF; }
.ecran-chasse .carrousel__fleche--precedent { left: var(--sp-2); }
.ecran-chasse .carrousel__fleche--suivant   { right: var(--sp-2); }

/* Une seule vue : les flèches disparaissent. */
.ecran-chasse .carrousel--unique .carrousel__fleche { display: none; }

/* --- Mobile : le bloc passe en colonne ----------------------------------- */
/* La photo est plafonnée à 40 % de la hauteur d'écran pour que les détails
   ET les CTA restent visibles sans défiler (spec §5 S6). */

@media (max-width: 719px) {
  .ecran-chasse .carte--bien { grid-template-columns: minmax(0, 1fr); }
  .ecran-chasse .carte--bien > .carte__tap,
  .ecran-chasse .carrousel { grid-column: 1; }
  .ecran-chasse .carrousel { margin-bottom: var(--sp-2); }
  .ecran-chasse .carrousel__vue { aspect-ratio: 16 / 10; max-height: 40vh; }
  /* En mode fil, un format plus haut. Le plafond reste là pour que le prix et
     les CTA restent atteignables sans défiler (spec §5 S6). */
  .ecran-chasse .carte--fil .carrousel__vue { aspect-ratio: 4 / 3; max-height: 52vh; }
}

/* ===========================================================================
   LE FIL - sélecteur de jours et en-têtes de groupe.

   Le geste du matin est un BALAYAGE : ce qui est tombé aujourd'hui, puis ce
   qu'on n'a pas eu le temps de traiter hier. La barre de jours est donc posée
   juste au-dessus des annonces, elle défile horizontalement quand sept touches
   ne tiennent pas, et chaque touche porte son compteur - un jour vide se voit
   avant d'être ouvert.

   Les touches sont EXCLUSIVES : c'est une barre d'onglets (`tablist`), une
   journée à la fois. Aucune phrase d'explication ne la surmonte - sept dates
   comptées se lisent sans mode d'emploi.
   ======================================================================== */

/* Marge haute : les compteurs débordent de 8 px au-dessus de leur touche,
   et sans elle ils venaient toucher le sélecteur de sous-vue. */
.ecran-chasse .fil-jours { margin: var(--sp-3) 0; }

.ecran-chasse .fil-jours__piste {
  display: flex;
  gap: var(--sp-2);
  /* Sous 900 px la piste défile : sept touches ne tiennent pas à 375 px, et
     les tronquer masquerait les jours les plus anciens - ceux qu'on vient
     justement chercher. Le défilement est horizontal DANS la piste, jamais
     dans la page (contrainte « aucun scroll horizontal à 320 px »). */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Laisse respirer la rangée pour les pastilles qui dépassent en haut. */
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-1);
  scrollbar-width: thin;
}

.ecran-chasse .fil-jour {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 92px;
  min-height: var(--cible);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--encre-douce);
  font: inherit; font-size: var(--fs-meta); line-height: var(--lh-meta);
  cursor: pointer;
  position: relative;
  transition: border-color var(--duree-1) var(--courbe),
              background var(--duree-1) var(--courbe);
}
.ecran-chasse .fil-jour:hover { border-color: var(--ligne-forte); }
.ecran-chasse .fil-jour:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}

.ecran-chasse .fil-jour__quand {
  font-weight: var(--gras-appui);
  color: var(--encre);
  white-space: nowrap;
}
.ecran-chasse .fil-jour__date { white-space: nowrap; }

/* Le compteur est posé en pastille, comme celui des onglets : c'est le même
   objet - « ce qu'il reste à traiter ici ». */
.ecran-chasse .fil-jour__compte {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(35%, -35%);
  min-width: var(--pastille); height: var(--pastille);
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--neutre-fond); color: var(--neutre-encre);
  font-size: var(--fs-meta); font-variant-numeric: tabular-nums;
  border: 1px solid var(--surface);
}

/* Jour ouvert : le filet se marque, le fond se creuse. On n'emploie PAS
   l'accent client - il n'a que trois usages (bouton primaire, onglet actif,
   logo), et une barre de filtres n'en est pas un. */
.ecran-chasse .fil-jour.est-ouvert {
  border-color: var(--encre);
  background: var(--surface-appui);
  color: var(--encre);
}
.ecran-chasse .fil-jour.est-ouvert .fil-jour__compte {
  background: var(--encre); color: var(--surface);
}

/* Jour sans annonce : la touche reste cliquable - on peut vouloir vérifier
   qu'il n'y a rien -, mais elle ne prétend pas au regard. */
.ecran-chasse .fil-jour.est-vide { opacity: .62; }
.ecran-chasse .fil-jour.est-vide:hover,
.ecran-chasse .fil-jour.est-vide.est-ouvert { opacity: 1; }

/* --- En-tête d'un groupe (jour dans le fil, semaine dans Ma chasse) ------- */

.ecran-chasse .fil-groupe {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--ligne);
  font-size: var(--fs-titre); line-height: var(--lh-titre);
  font-weight: var(--gras-titre); color: var(--encre);
}
.ecran-chasse .fil-groupe:first-child { margin-top: 0; }
.ecran-chasse .fil-groupe__detail {
  font-size: var(--fs-meta); font-weight: var(--gras-corps); color: var(--encre-douce);
}
.ecran-chasse .fil-groupe__vide {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-meta); color: var(--encre-douce);
}

/* ===========================================================================
   PLATEFORMES D'ORIGINE - à la place du bouton « Voir l'annonce ».

   Un jeton = le logo de la plateforme. Sans logo, repli sur le monogramme
   (couleur de marque en inline). Le nom reste dans l'infobulle.
   ======================================================================== */

/* Les marques SEULES, côte à côte sur une ligne : c'est une rangée d'icônes,
   pas une liste de liens. Le nom de la plateforme reste dans l'infobulle et
   dans le nom accessible du bouton. */
.ecran-chasse .sources {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
}

/* La cible reste pleine (44 px) même si la marque, elle, est plus petite :
   un logo de 28 px ne se vise pas au doigt. */
.ecran-chasse .source {
  position: relative;
  width: var(--cible); height: var(--cible);
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  cursor: pointer;
  transition: border-color var(--duree-1) var(--courbe),
              background var(--duree-1) var(--courbe);
}
.ecran-chasse .source:hover { border-color: var(--ligne); background: var(--surface-appui); }
.ecran-chasse .source:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: calc(var(--focus-ecart) * -1);
}
.ecran-chasse .source:hover,
.ecran-chasse .source:focus-visible { z-index: 2; }

.ecran-chasse .source__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--sp-1));
  transform: translateX(-50%);
  padding: var(--sp-1) var(--sp-2);
  background: var(--encre);
  color: var(--surface);
  font-size: var(--fs-meta);
  font-weight: var(--gras-appui);
  line-height: var(--lh-meta);
  white-space: nowrap;
  border-radius: var(--r-1);
  box-shadow: var(--ombre-1);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duree-1) var(--courbe);
}
.ecran-chasse .source:hover .source__tip,
.ecran-chasse .source:focus-visible .source__tip { opacity: 1; }

.ecran-chasse .source__marque {
  width: var(--avatar); height: var(--avatar);
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-1);
  background: var(--neutre-fond); color: var(--neutre-encre);
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
  letter-spacing: -.02em;
  text-transform: lowercase;
  box-shadow: var(--ombre-1);
  overflow: hidden;
}
.ecran-chasse .source__marque--logo {
  background: var(--surface);
  box-shadow: none;
  border: 1px solid var(--ligne);
  padding: 2px;
}
.ecran-chasse .source__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --- Adresse et téléphone, saisis à la main sur un bien retenu ------------
   Ce sont les deux seuls endroits de l'écran où l'on ÉCRIT. L'adresse vient
   en premier : chez ce client on se déplace pour une adresse, on n'appelle
   que si l'on a trouvé un numéro. */

.ecran-chasse .champ-libre {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-1) 0;
  width: 100%;
}
.ecran-chasse .champ-libre__label {
  font-size: var(--fs-meta); color: var(--encre-douce);
}
.ecran-chasse .champ-libre__saisie {
  width: 100%; min-height: var(--cible);
  padding: 0 var(--sp-3);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--encre);
  font: inherit; font-size: var(--fs-corps);
}
.ecran-chasse .champ-libre__saisie::placeholder { color: var(--encre-douce); }
.ecran-chasse .champ-libre__saisie:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}

/* Voies possibles : un tap remplit le champ, qui reste modifiable. Aucune
   n'est choisie d'avance - l'écran ne tranche pas à la place de qui ira. */
.ecran-chasse .champ-libre__choix {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
}
.ecran-chasse .puce-choix {
  /* Raccourci posé à côté d'un champ de 44 px, pas une commande principale :
     32 px suffisent et gardent la rangée compacte. */
  min-height: var(--sp-8);
  display: inline-flex; align-items: center;
  padding: 0 var(--sp-2);
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--encre-douce);
  font: inherit; font-size: var(--fs-meta);
  cursor: pointer;
  transition: border-color var(--duree-1) var(--courbe),
              background var(--duree-1) var(--courbe),
              color var(--duree-1) var(--courbe);
}
.ecran-chasse .puce-choix:hover { color: var(--encre); border-color: var(--encre); }
.ecran-chasse .puce-choix.est-choisie {
  border-style: solid; border-color: var(--encre);
  background: var(--surface-appui); color: var(--encre);
}
.ecran-chasse .puce-choix:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}

/* ===========================================================================
   « MA CHASSE » - bascule Liste / Carte, et le plan de secteur.

   La liste répond à « qu'ai-je retenu », la carte à « par où je commence ».
   Le plan n'est PAS cartographique : aucune tuile, aucun service distant, des
   repères déclarés par la donnée. L'écran le dit sous le plan plutôt que de
   laisser croire à une localisation exacte.
   ======================================================================== */

.ecran-chasse .mode-vue {
  display: inline-flex; gap: var(--sp-serre);
  padding: var(--sp-serre);
  margin: 0;
  background: var(--surface-creuse);
  border: 1px solid var(--ligne);
  border-radius: var(--r-pill);
}
.ecran-chasse .mode-vue__choix {
  min-height: var(--cible);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--encre-douce);
  font: inherit; font-size: var(--fs-meta); font-weight: var(--gras-appui);
  cursor: pointer;
}
.ecran-chasse .mode-vue__choix.est-actif {
  background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1);
}
.ecran-chasse .mode-vue__choix:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: calc(var(--focus-ecart) * -1);
}
.ecran-chasse .mode-vue__icone { width: 17px; height: 17px; }

/* --- Le plan ------------------------------------------------------------- */

.ecran-chasse .plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
}
.ecran-chasse .plan__toile-hote {
  border-radius: var(--r-2);
  overflow: hidden;
  border: 1px solid var(--ligne);
}
.ecran-chasse .plan__toile { display: block; width: 100%; height: auto; }

/* Conteneur Mapbox */
.ecran-chasse .plan__mapbox {
  width: 100%;
  height: 320px;
}

/* Marqueur numéroté Mapbox */
.plan__marker {
  width: var(--pastille);
  height: var(--pastille);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--encre);
  color: var(--surface);
  font-size: var(--fs-meta);
  font-weight: var(--gras-titre);
  font-family: var(--police);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform var(--duree-1) var(--courbe);
}
.plan__marker:hover { transform: scale(1.2); }

.ecran-chasse .plan__pastille {
  fill: var(--encre);
  stroke: var(--surface);
  stroke-width: .9;
  transition: r var(--duree-1) var(--courbe);
}
.ecran-chasse .plan__numero {
  fill: var(--surface);
  font-size: 3.6px;
  font-weight: var(--gras-titre);
  font-family: var(--police);
}
.ecran-chasse .plan__repere { cursor: pointer; }
.ecran-chasse .plan__repere.est-vise .plan__pastille { r: 5; }
.ecran-chasse .plan__repere:focus-visible { outline: none; }
.ecran-chasse .plan__repere:focus-visible .plan__pastille {
  stroke: var(--focus); stroke-width: 1.6;
}

/* La légende EST la feuille de tournée : numérotée comme les repères, elle
   porte l'adresse avant le prix - c'est l'adresse qu'on lit en marchant. */
.ecran-chasse .plan__legende {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.ecran-chasse .plan__ligne { margin: 0; }
.ecran-chasse .plan__lien {
  width: 100%; min-height: var(--cible);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2);
  border: 0; border-radius: var(--r-1);
  background: none; text-align: left;
  font: inherit; color: var(--encre);
  cursor: pointer;
}
.ecran-chasse .plan__lien:hover,
.ecran-chasse .plan__ligne.est-visee .plan__lien { background: var(--surface-appui); }
.ecran-chasse .plan__lien:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: calc(var(--focus-ecart) * -1);
}
.ecran-chasse .plan__rang {
  flex: none;
  width: var(--pastille); height: var(--pastille);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--encre); color: var(--surface);
  font-size: var(--fs-meta); font-variant-numeric: tabular-nums;
}
.ecran-chasse .plan__texte { min-width: 0; display: flex; flex-direction: column; }
.ecran-chasse .plan__adresse {
  font-size: var(--fs-corps); font-weight: var(--gras-appui);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecran-chasse .plan__meta {
  font-size: var(--fs-meta); color: var(--encre-douce);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Côte à côte seulement quand la feuille de tournée a de quoi respirer : à
   900 px la colonne de droite tombait sous 300 px et la ligne « prix · type ·
   surface » s'y ellipsait. Même seuil que la carte-bien à trois colonnes. */
@media (min-width: 1240px) {
  .ecran-chasse .plan { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* --- Bien versé dans la base : la carte le porte ------------------------- */

.ecran-chasse .carte__chip[data-integre] {
  background: var(--succes-fond);
  color: var(--succes-encre);
}
.ecran-chasse .carte--integree .btn--primaire[disabled] {
  opacity: .55; cursor: default;
}

/* --- Note personnelle (feuille) ------------------------------------------ */

.note__champ {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--encre);
  font: inherit; font-size: var(--fs-corps);
  resize: vertical;
}
.note__champ:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}
.note__aide {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-meta);
  color: var(--encre-douce);
}

/* --- Tablette : photo à gauche, détails à droite, actions dessous ---------
   La borne BASSE est explicite. Sans elle, cette règle - déclarée après celle
   des 719 px - leur réimposait deux colonnes : la photo restait bloquée à
   232 px et laissait, à côté d'elle, une bande vide sur toute la hauteur du
   bloc. Sous 720 px, la pile d'une seule colonne reprend la main. */

/* --- Colonne d'actions : CTA en clair au-dessus de 900 px ----------------- */
/* Sous 900 px, on revient au « ⋯ » : une colonne de 5 boutons pleins largeur
   mangerait l'écran, et la règle des 2 actions visibles maximum tomberait. */

.ecran-chasse .carte__secondaires { display: none; }

@media (min-width: 1240px) {
  .ecran-chasse .carte--bien .carte__secondaires {
    display: flex; flex-direction: column; gap: var(--sp-1); width: 100%;
  }
  .ecran-chasse .carte--bien .carte__secondaires .btn {
    width: 100%; justify-content: flex-start;
    font-size: var(--fs-meta);
  }
  /* Le « ⋯ » n'a plus d'objet quand tout est visible. */
  .ecran-chasse .carte--bien .carte__actions > .btn-icone { display: none; }
}

/* ===========================================================================
   BLOC-BIEN, mise en page reprise de l'affichage Equimmox.

   Ordre de lecture d'une petite annonce : le PRIX, puis OÙ, puis QUOI, puis
   le texte. Les badges qualifient la photo et sont donc posés dessus.
   ======================================================================== */

.ecran-chasse .annonce__vendeur {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-meta);
  font-weight: var(--gras-titre);
  line-height: var(--lh-meta);
}
.ecran-chasse .annonce__vendeur--direct { color: var(--alerte-encre); }
.ecran-chasse .annonce__vendeur--pro { color: var(--accent); }

/* Le prix EST le titre. */
.ecran-chasse .carte--bien .carte__titre {
  font-size: 26px;
  line-height: 1.15;
  font-weight: var(--gras-titre);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* Le bloc s'appelait `.bien` - le même nom qu'un composant générique
   d'`app.css` (`display: flex`, fond creux), utilisé par Relances. Les trois
   zones se retrouvaient donc CÔTE À CÔTE : l'adresse repliée sur quatre
   lignes, et les valeurs des attributs rognées à zéro par leur
   `text-overflow: ellipsis`. Le bloc porte désormais son propre nom, et sa
   pile verticale est déclarée ici plutôt qu'héritée d'ailleurs. */
.ecran-chasse .annonce { display: block; min-width: 0; }

.ecran-chasse .annonce__adresse {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-corps); font-weight: var(--gras-appui); color: var(--encre);
}

/* Les cinq attributs s'ENCHAÎNENT et passent à la ligne ; ils ne sont pas
   rangés en colonnes fixes. Une grille imposait la même largeur à
   « 74 m² » et à « 14 730 €/m² » : la seconde valeur y était rognée par son
   `text-overflow`, et un attribut tronqué ne renseigne sur rien. Ici la ligne
   se replie, et rien ne disparaît - à aucune largeur de fenêtre. */
.ecran-chasse .annonce__attributs {
  list-style: none; margin: 0 0 var(--sp-3); padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.ecran-chasse .annonce__attribut {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
  font-size: var(--fs-corps); color: var(--encre-douce);
}
.ecran-chasse .annonce__attribut span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ecran-chasse .pictogramme {
  width: 17px; height: 17px; flex: none;
  color: var(--encre-douce);
}
.ecran-chasse .annonce__adresse .pictogramme { color: var(--accent); margin-top: 1px; }

.ecran-chasse .annonce__description {
  margin: 0;
  font-size: var(--fs-corps); line-height: 1.5; color: var(--encre-douce);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Étiquettes posées sur la photo -------------------------------------- */

.ecran-chasse .carrousel__badges {
  position: absolute; top: var(--sp-2); left: var(--sp-2); right: var(--sp-2);
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  pointer-events: none;
}
.ecran-chasse .etiquette {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px var(--sp-2);
  border-radius: var(--r-1);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--ombre-1);
  font-size: var(--fs-meta); font-weight: var(--gras-appui); color: var(--encre);
  white-space: nowrap;
}
.ecran-chasse .etiquette__marque { color: #E8A33D; }
.ecran-chasse .etiquette--direct {
  background: #E8A33D;
  color: #fff;
}
.ecran-chasse .etiquette--direct .etiquette__marque { color: #fff; }
.ecran-chasse .etiquette--pro {
  background: var(--accent);
  color: var(--accent-encre);
}
.ecran-chasse .etiquette--pro .etiquette__marque { color: var(--accent-encre); }

/* --- Favori -------------------------------------------------------------- */

.ecran-chasse .carte--bien { position: relative; overflow: visible; }
.ecran-chasse .favori {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: var(--cible); height: var(--cible);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent); border-radius: var(--r-2);
  background: var(--surface); color: var(--accent);
  font-size: 17px; cursor: pointer;
  transition: background var(--duree-1) var(--courbe), color var(--duree-1) var(--courbe);
}
.ecran-chasse .favori:hover { background: var(--accent-voile); }
.ecran-chasse .favori.est-actif { background: var(--accent); color: #FFF; }
.ecran-chasse .favori:focus-visible {
  outline: var(--focus-largeur) solid var(--focus); outline-offset: var(--focus-ecart);
}
/* La colonne d'actions laisse la place au cœur. */
.ecran-chasse .carte--bien > .carte__actions { padding-top: var(--sp-8); }
/* En mode fil il n'y a pas de cœur : la réserve de place n'a plus d'objet, et
   la garder pousserait le CTA loin sous le prix qu'il conclut. */
.ecran-chasse .carte--fil > .carte__actions { padding-top: 0; }

/* Sous 720 px la colonne est trop étroite pour deux attributs côte à côte :
   ils s'empilent, un par ligne. */
@media (max-width: 719px) {
  .ecran-chasse .annonce__attributs { flex-direction: column; flex-wrap: nowrap; }
}
@media (max-width: 1239px) {
  /* Actions en pleine largeur : sans retrait, le bouton et les champs
     (adresse, téléphone) touchent le bord gauche de la carte. */
  .ecran-chasse .carte--bien > .carte__actions {
    padding-top: var(--sp-3);
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
}

/* --- Respiration du bloc sur grand écran --------------------------------- */
/* La colonne large (1180 px) laisse ~620 px au texte : la photo peut grandir
   et la description s'étendre sans que la ligne devienne illisible. */

@media (min-width: 1240px) {
  /* Photo carrée sur 380 px : elle occupe la hauteur du bloc sans l'étirer,
     et c'est elle qui dicte désormais la hauteur de la carte. Une seule règle
     de ratio à ce palier - il y en avait deux, dont une morte (3/4). */
  .ecran-chasse .carrousel__vue { aspect-ratio: 1 / 1; }

  .ecran-chasse .carte--bien {
    column-gap: var(--sp-5);
    padding: var(--sp-4);
  }
  /* Le prix respire : c'est le point d'entrée du regard. */
  .ecran-chasse .carte--bien .carte__titre { font-size: 30px; }

  /* Sur grand écran, les attributs respirent davantage entre eux ; le
     repli à la ligne reste le même mécanisme. */
  .ecran-chasse .annonce__attributs { gap: var(--sp-2) var(--sp-5); }
  .ecran-chasse .annonce__description { -webkit-line-clamp: 4; }

  /* Deux blocs consécutifs ne se collent pas : la file reste lisible. */
  .ecran-chasse .liste { gap: var(--sp-4); }
}

/* ===========================================================================
   FILTRES - panneau repliable (prix + type d'annonceur).
   ======================================================================== */

.chasse-filtres {
  margin: 0 0 var(--sp-3);
  border: 1px solid var(--ligne);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}

.chasse-filtres__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--cible);
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--encre);
  font: inherit;
  cursor: pointer;
}
.chasse-filtres__tete:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: calc(-1 * var(--focus-ecart));
}
.chasse-filtres__titre {
  font-size: var(--fs-titre);
  font-weight: var(--gras-titre);
  line-height: var(--lh-titre);
}
.chasse-filtres__chevron {
  color: var(--encre-douce);
  transition: transform var(--duree-2) var(--courbe);
}
.chasse-filtres.est-ouvert .chasse-filtres__chevron {
  transform: rotate(180deg);
}

.chasse-filtres__corps {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duree-2) var(--courbe);
}
.chasse-filtres.est-ouvert .chasse-filtres__corps {
  grid-template-rows: 1fr;
}
.chasse-filtres__corps-inner {
  overflow: hidden;
  padding: 0 var(--sp-4);
}
.chasse-filtres.est-ouvert .chasse-filtres__corps-inner {
  padding-bottom: var(--sp-4);
}

.chasse-filtres__prix-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.chasse-filtres__prix-label {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}
.chasse-filtres__prix-valeur {
  font-size: var(--fs-corps);
  font-weight: var(--gras-titre);
  color: var(--encre);
}

.chasse-filtres__rail-wrap {
  position: relative;
  height: var(--cible);
  display: flex;
  align-items: center;
}
.chasse-filtres__rail,
.chasse-filtres__rempli {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--sp-serre);
  border-radius: var(--r-pill);
  pointer-events: none;
}
.chasse-filtres__rail { background: var(--ligne); }
.chasse-filtres__rempli {
  left: 0;
  right: 0;
  background: var(--accent);
}

.chasse-filtres__curseur {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--cible);
  margin: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}
.chasse-filtres__curseur:focus-visible {
  outline: none;
}
.chasse-filtres__curseur::-webkit-slider-runnable-track {
  height: var(--cible);
  background: transparent;
  border: none;
}
.chasse-filtres__curseur::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  width: var(--pastille);
  height: var(--pastille);
  margin-top: calc((var(--cible) - var(--pastille)) / 2);
  border: 2px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--ombre-1);
  cursor: grab;
}
.chasse-filtres__curseur::-moz-range-track {
  height: var(--sp-serre);
  background: transparent;
  border: none;
}
.chasse-filtres__curseur::-moz-range-progress { background: transparent; }
.chasse-filtres__curseur::-moz-range-thumb {
  pointer-events: auto;
  width: var(--pastille);
  height: var(--pastille);
  border: 2px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--ombre-1);
  cursor: grab;
}

.chasse-filtres__vendeurs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.chasse-filtres__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--cible);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  border: 1px solid var(--ligne);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: var(--fs-corps);
  cursor: pointer;
  transition: background var(--duree-1) var(--courbe),
              border-color var(--duree-1) var(--courbe);
}
.chasse-filtres__pill:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}
.chasse-filtres__pill.est-actif {
  border-color: var(--accent);
  background: var(--accent-voile);
  color: var(--accent);
  font-weight: var(--gras-appui);
}
.chasse-filtres__coche {
  width: var(--sp-5);
  height: var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--accent-encre);
  flex: none;
}
.chasse-filtres__pill.est-actif .chasse-filtres__coche {
  border-color: var(--accent);
  background: var(--accent);
}
.chasse-filtres__coche .icone {
  width: var(--sp-3);
  height: var(--sp-3);
}
.chasse-filtres__pill:not(.est-actif) .chasse-filtres__coche .icone {
  opacity: 0;
}
.chasse-filtres__pill-compte {
  min-width: var(--pastille);
  height: var(--pastille);
  padding: 0 var(--sp-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--surface-appui);
  color: var(--encre-douce);
  font-size: var(--fs-meta);
  font-weight: var(--gras-titre);
  line-height: 1;
}
.chasse-filtres__pill.est-actif .chasse-filtres__pill-compte {
  background: var(--accent);
  color: var(--accent-encre);
}

.chasse-filtres__compte {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}

/* --- Barre Liste / Carte + lien CRM -------------------------------------- */

.ecran-chasse .chasse-outils {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.ecran-chasse .chasse-crm-lien {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--cible);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: var(--gras-appui);
  cursor: pointer;
}
.ecran-chasse .chasse-crm-lien:hover {
  color: var(--accent-appui);
}
.ecran-chasse .chasse-crm-lien:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}
.ecran-chasse .chasse-crm-lien__libelle {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ecran-chasse .chasse-crm-lien__bulle {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-meta);
  font-weight: var(--gras-titre);
  line-height: 1;
}
.ecran-chasse .chasse-crm-lien__bulle.est-maj {
  animation: chasse-bulle-pop 0.45s var(--courbe);
}
@keyframes chasse-bulle-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.ecran-chasse .chasse-succes {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--succes-fond);
  color: var(--succes-encre);
  border: 1px solid var(--succes-encre);
  border-radius: var(--r-2);
}
.ecran-chasse .chasse-succes.est-sortie {
  opacity: 0;
  transition: opacity var(--duree-2) var(--courbe);
}
.ecran-chasse .chasse-succes svg {
  flex: none;
  width: 22px;
  height: 22px;
}
.ecran-chasse .chasse-succes__corps { flex: 1 1 auto; min-width: 0; }
.ecran-chasse .chasse-succes__titre {
  margin: 0;
  font-size: var(--fs-corps);
  font-weight: var(--gras-titre);
  line-height: var(--lh-corps);
}
.ecran-chasse .chasse-succes__detail {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}
.ecran-chasse .chasse-succes__annuler {
  flex: none;
  min-height: var(--cible);
  padding: 0 var(--sp-3);
  border: 0;
  background: none;
  color: var(--succes-encre);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: var(--gras-titre);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ecran-chasse .chasse-succes__annuler:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}

/* --- Tableau des biens envoyés vers le CRM ------------------------------- */

.ecran-chasse--crm {
  max-width: 960px;
}

.chasse-crm-carte {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  overflow: hidden;
}
.chasse-crm-table-wrap {
  overflow-x: auto;
}
.chasse-crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.chasse-crm-table th,
.chasse-crm-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ligne);
  text-align: left;
  vertical-align: top;
}
.chasse-crm-table thead th {
  font-weight: var(--gras-titre);
  color: var(--encre-douce);
  white-space: nowrap;
}
.chasse-crm-table tbody th {
  font-weight: var(--gras-titre);
  color: var(--encre);
}
.chasse-crm-table .chasse-crm__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chasse-crm-table tbody tr:last-child th,
.chasse-crm-table tbody tr:last-child td { border-bottom: 0; }

.chasse-crm-note {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--ligne);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}