/* ---------------------------------------------------------------------------
   Feuille de style unique.
   Parti pris : fond gris très clair, cartes blanches franchement arrondies et
   sans bordure — c'est l'ombre et l'espace qui les détachent — et le noir
   plutôt qu'une couleur vive pour les actions. Les informations se présentent
   en pastilles, et les photos portent des boutons flottants.
   --------------------------------------------------------------------------- */

:root {
  --fond:        #f1f1f4;
  --surface:     #ffffff;
  --surface-2:   #f4f4f6;
  --surface-3:   #ebebef;
  --bord:        #e7e7ec;
  --texte:       #14151a;
  --doux:        #74757e;
  --encre:       #16171c;   /* le noir des actions */
  --encre-doux:  #2c2e36;
  --accent:      #1f6feb;   /* réservé au repérage sur la carte */
  --accent-doux: #e8f0fe;
  --vert:        #14794a;
  --vert-doux:   #e2f3e9;
  --ambre:       #8a5d00;
  --ambre-doux:  #fcf0d4;
  --rouge:       #b42318;
  --rouge-doux:  #fdecea;

  --r-carte:   24px;   /* cartes et blocs */
  --r-photo:   17px;   /* images à l'intérieur d'une carte */
  --r-champ:   14px;   /* champs de saisie */
  --r-pilule:  999px;

  --ombre:     0 1px 2px rgba(20,21,26,.04), 0 6px 20px rgba(20,21,26,.06);
  --ombre-nette: 0 2px 8px rgba(20,21,26,.10), 0 10px 30px rgba(20,21,26,.10);
  --ombre-flottant: 0 2px 6px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:        #121316;
    --surface:     #1c1d22;
    --surface-2:   #24262c;
    --surface-3:   #2c2f36;
    --bord:        #2e3138;
    --texte:       #ececed;
    --doux:        #9a9ba4;
    --encre:       #f2f2f4;
    --encre-doux:  #d8d8dc;
    --accent:      #6ea8fe;
    --accent-doux: #1b2b45;
    --vert:        #58d68d;
    --vert-doux:   #17301f;
    --ambre:       #e3b341;
    --ambre-doux:  #332a12;
    --rouge:       #f2837b;
    --rouge-doux:  #351d1c;
    --ombre:       0 1px 2px rgba(0,0,0,.4);
    --ombre-nette: 0 4px 18px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit l'emporter sur toute règle d'affichage. Sans cela
   un panneau « caché » qui a un display: grid reste étalé sur tout l'écran,
   invisible mais interceptant chaque clic. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }
a { color: var(--texte); text-decoration: none; }
a:hover { text-decoration: underline; }
.doux { color: var(--doux); font-size: .87rem; }
.erreur { color: var(--rouge); font-size: .87rem; }

/* --- Connexion ------------------------------------------------------------ */
.connexion { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.carte-connexion {
  background: var(--surface); padding: 2.2rem 1.8rem; border-radius: 30px;
  box-shadow: var(--ombre-nette); width: min(330px, 100%); display: grid; gap: .7rem;
  justify-items: center; text-align: center;
}
.carte-connexion h1 { font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; }
.carte-connexion #motdepasse {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); border: 0;
}

.points-code { display: flex; gap: .9rem; margin: .7rem 0 .2rem; }
.points-code span {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface-3); transition: background .15s, transform .15s;
}
.points-code span.plein { background: var(--encre); transform: scale(1.12); }
.points-code.refuse { animation: secousse .4s; }
@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}

.pave-numerique { display: grid; grid-template-columns: repeat(3, 74px); gap: .7rem; margin-top: .5rem; }
.pave-numerique button {
  height: 74px; border-radius: 50%; font-size: 1.35rem; font-weight: 500;
  background: var(--surface-2); border: none; display: grid; place-items: center;
  user-select: none; box-shadow: none;
}
.pave-numerique button:hover { background: var(--surface-3); }
.pave-numerique button:active { background: var(--encre); color: var(--surface); transform: scale(.94); }
.pave-numerique button.vide { visibility: hidden; }
.pave-numerique button.effacer { background: transparent; }
.pave-numerique button.effacer svg.lucide { width: 22px; height: 22px; margin: 0; }

/* --- Ossature ------------------------------------------------------------- */
.entete {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.1rem; background: var(--fond);
  position: sticky; top: 0; z-index: 500;
  padding-top: max(.8rem, env(safe-area-inset-top));
}
.marque { font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; }
.etat-robot { margin-left: auto; font-size: .79rem; color: var(--doux); text-align: right; }

.onglets {
  display: flex; gap: .3rem; padding: 0 1.1rem .7rem;
  background: var(--fond); position: sticky; top: 56px; z-index: 499;
  overflow-x: auto; scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }
.onglets a {
  display: flex; align-items: center;
  padding: .5rem .95rem; color: var(--doux); font-weight: 550; font-size: .89rem;
  border-radius: var(--r-pilule); white-space: nowrap; background: transparent;
  transition: background .14s, color .14s;
}
.onglets a:hover { background: var(--surface); text-decoration: none; }
.onglets a.actif { background: var(--encre); color: var(--surface); }
.onglets a.actif svg.lucide { color: currentColor; }
.pastille {
  display: inline-block; min-width: 19px; padding: 0 6px; margin-left: .35rem;
  background: var(--surface-3); color: var(--texte); border-radius: var(--r-pilule);
  font-size: .71rem; text-align: center; line-height: 19px; font-weight: 700;
}
.onglets a.actif .pastille { background: rgba(255,255,255,.22); color: var(--surface); }

main { padding: .4rem 1.1rem 2rem; max-width: 1320px; margin: 0 auto; }
main.pleine-largeur { max-width: none; padding: 0; }

/* --- Boutons et champs ---------------------------------------------------- */
button, .bouton {
  font: inherit; font-size: .88rem; font-weight: 550; cursor: pointer;
  border: none; background: var(--surface); color: var(--texte);
  padding: .55rem 1rem; border-radius: var(--r-pilule);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s, transform .1s, box-shadow .14s;
  box-shadow: 0 1px 2px rgba(20,21,26,.05);
}
button:hover { background: var(--surface-2); }
button:active { transform: scale(.97); }
button.principal { background: var(--encre); color: var(--surface); }
button.principal:hover { background: var(--encre-doux); }
button.danger { color: var(--rouge); }
button:disabled { opacity: .45; cursor: default; }
.bouton-fin { font-size: .84rem; padding: .45rem .85rem; }

input, select, textarea {
  font: inherit; font-size: .89rem; padding: .6rem .85rem;
  border: none; border-radius: var(--r-champ);
  background: var(--surface); color: var(--texte); width: 100%;
  box-shadow: 0 1px 2px rgba(20,21,26,.05);
}
input[type=search] { border-radius: var(--r-pilule); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--encre); outline-offset: -1px;
}
input[type=checkbox] { width: auto; box-shadow: none; accent-color: var(--encre); }
label { font-size: .82rem; color: var(--doux); display: block; margin-bottom: .3rem; }
.ligne-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.interrupteur { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--texte); margin: 0; }

.bloc {
  background: var(--surface); border-radius: var(--r-carte);
  padding: 1.2rem; margin-bottom: 1rem; box-shadow: var(--ombre);
}
.bloc > h2 { margin-bottom: .2rem; display: flex; align-items: center; }
.bloc > .doux:first-of-type { margin-top: 0; margin-bottom: 1rem; }

/* --- Barre d'outils de la liste ------------------------------------------- */
.barre-outils { display: grid; gap: .6rem; margin-bottom: 1.1rem; }

.rang-recherche { display: flex; gap: .5rem; align-items: center; }
.rang-recherche input { flex: 1; min-width: 0; }
button.carre {
  width: 44px; height: 44px; flex: none; padding: 0; border-radius: var(--r-champ);
  background: var(--encre); color: var(--surface);
}
button.carre:hover { background: var(--encre-doux); }
button.carre.actif { background: var(--accent); }
button.carre svg.lucide { margin: 0; width: 18px; height: 18px; }

/* Les états défilent horizontalement plutôt que de s'empiler sur quatre
   lignes quand l'écran est étroit. */
.rang-etats {
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  padding-bottom: .15rem;
}
.rang-etats::-webkit-scrollbar { display: none; }
.rang-etats button { white-space: nowrap; flex: none; }
.rang-etats button.actif { background: var(--encre); color: var(--surface); }

.tiroir-options {
  background: var(--surface); border-radius: var(--r-carte); padding: 1rem;
  box-shadow: var(--ombre);
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}
.tiroir-options .interrupteur { grid-column: 1 / -1; }

.filtres-rapides { display: flex; gap: .3rem; flex-wrap: wrap; }
.filtres-rapides button { background: var(--surface); }
.filtres-rapides button.actif { background: var(--encre); color: var(--surface); }

/* --- Vignette d'annonce ---------------------------------------------------- */
/* Carte blanche, photo arrondie à l'intérieur, et des pastilles flottantes
   posées sur la photo : le quartier d'un côté, les deux gestes du tri de
   l'autre. Le prix et la ligne de caractéristiques vivent en dessous, sur le
   blanc, où ils se lisent quelle que soit la photo. */
.grille-annonces {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
}
.annonce {
  background: var(--surface); border-radius: var(--r-carte); padding: .5rem;
  box-shadow: var(--ombre); cursor: pointer; display: block;
  transition: transform .16s, box-shadow .16s;
}
.annonce:hover { transform: translateY(-3px); box-shadow: var(--ombre-nette); }
.annonce.ecartee { opacity: .45; }

.annonce .visuel {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-photo);
  overflow: hidden; background: var(--surface-2) center / cover no-repeat;
}
.annonce.sans-photo .visuel { background: linear-gradient(140deg, #d9d9e0, #c6c6cf); }
.annonce .mention-sans-photo {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(0,0,0,.35); font-size: .82rem;
}

.annonce .quartier {
  position: absolute; top: .55rem; left: .55rem; max-width: calc(100% - 6.4rem);
  display: flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.94); color: #14151a;
  font-size: .76rem; font-weight: 600; padding: .35rem .7rem;
  border-radius: var(--r-pilule); box-shadow: var(--ombre-flottant);
  backdrop-filter: blur(8px);
}
.annonce .quartier .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.annonce .quartier svg.lucide { width: 13px; height: 13px; margin: 0; flex: none; }

.annonce .gestes { position: absolute; top: .55rem; right: .55rem; display: flex; gap: .35rem; }
.annonce .gestes .rond {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.94); color: #14151a;
  box-shadow: var(--ombre-flottant); backdrop-filter: blur(8px);
}
.annonce .gestes .rond:hover { background: #fff; }
.annonce .gestes .rond.actif { background: var(--encre); color: #fff; }
.annonce .gestes .rond.actif svg.lucide { fill: currentColor; }
.annonce .gestes .rond svg.lucide { margin: 0; width: 17px; height: 17px; }

.annonce .infos { padding: .75rem .6rem .4rem; display: grid; gap: .5rem; }
.annonce .details { font-size: .84rem; color: var(--doux); line-height: 1.45; }
.annonce .ligne-prix { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.annonce .prix { font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em; }
.annonce .prix .avant {
  font-size: .8rem; font-weight: 400; color: var(--doux);
  text-decoration: line-through; margin-right: .4rem;
}
.annonce .au-m2 {
  margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--doux);
  background: var(--surface-2); padding: .25rem .6rem; border-radius: var(--r-pilule);
  white-space: nowrap;
}

/* --- Étiquettes ------------------------------------------------------------ */
.etiquettes { display: flex; gap: .3rem; flex-wrap: wrap; }
.etiquette {
  font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: var(--r-pilule);
  background: var(--surface-2); color: var(--doux); white-space: nowrap;
}
.etiquette.dans      { background: var(--vert-doux);   color: var(--vert); }
.etiquette.peut-etre { background: var(--ambre-doux);  color: var(--ambre); }
.etiquette.baisse    { background: var(--vert-doux);   color: var(--vert); }
.etiquette.nouvelle  { background: var(--encre);       color: var(--surface); }
.etiquette.rejet     { background: var(--rouge-doux);  color: var(--rouge); }
.etiquette.renove    { background: var(--vert-doux);   color: var(--vert); }
.etiquette.travaux   { background: var(--ambre-doux);  color: var(--ambre); }

/* --- Carte ---------------------------------------------------------------- */
.page-carte { position: relative; height: calc(100dvh - 104px); }
#carte { position: absolute; inset: 0; }
#carte.fond-attenue .leaflet-tile-pane { filter: grayscale(.85) brightness(1.06) contrast(.92); }
.bascule-fond a { font-size: .78rem; padding: 0 .5rem; width: auto !important; }

.page-carte.en-edition::after {
  content: ''; position: absolute; inset: 0; z-index: 650; pointer-events: none;
  border: 3px solid var(--encre); border-radius: 2px;
}
.page-carte.en-edition::before {
  content: 'Édition des quartiers';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 651; pointer-events: none;
  background: var(--encre); color: var(--surface);
  font-size: .71rem; font-weight: 650; letter-spacing: .03em;
  padding: .3rem .9rem; border-radius: 0 0 12px 12px;
}

.panneau-zones {
  position: absolute; top: .8rem; right: .8rem; z-index: 600;
  width: min(300px, calc(100% - 1.6rem));
  background: var(--surface); border-radius: 20px; box-shadow: var(--ombre-nette);
  max-height: calc(100% - 1.6rem); overflow: auto;
}
.panneau-zones header {
  padding: .85rem 1rem; font-weight: 650; font-size: .92rem;
  display: flex; align-items: center; gap: .4rem;
}
.panneau-zones .contenu { padding: 0 1rem 1rem; display: grid; gap: .55rem; }
.panneau-zones.replie { width: auto; }
.panneau-zones.replie #titre-zones { display: none; }
.panneau-zones.replie #replier-zones svg.lucide { transform: rotate(180deg); }
.panneau-zones .contenu > details { border-top: 1px solid var(--bord); padding-top: .5rem; }
.panneau-zones .contenu > details:first-of-type { border-top: none; }
.panneau-zones .contenu button { font-size: .8rem; padding: .35rem .7rem; }
.panneau-zones input { background: var(--surface-2); box-shadow: none; }

.zone-ligne { display: flex; align-items: center; gap: .5rem; font-size: .87rem; }
.zone-ligne .puce { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.zone-ligne .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.icone-seule { padding: .35rem; width: 30px; height: 30px; border-radius: 50%; }
button.icone-seule svg.lucide { margin: 0; }

.legende-carte {
  background: var(--surface); border-radius: 14px;
  padding: .55rem .7rem; font-size: .77rem; color: var(--texte);
  box-shadow: var(--ombre-nette); line-height: 1.6;
}
.legende-carte .pt {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #fff; margin-right: .35rem; vertical-align: -1px;
}
.legende-carte .aide { color: var(--doux); margin-top: .3rem; border-top: 1px solid var(--bord); padding-top: .3rem; }
.leaflet-popup-content-wrapper, .leaflet-tooltip { border-radius: 12px; }

/* --- Panneau de détail ----------------------------------------------------- */
.panneau { position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,14,.5); display: grid; place-items: end center; }
.panneau .feuille {
  background: var(--fond); width: min(760px, 100%); max-height: 92dvh;
  border-radius: 28px 28px 0 0; overflow: auto; padding: 1.3rem;
  padding-bottom: max(1.3rem, env(safe-area-inset-bottom));
}
@media (min-width: 720px) { .panneau { place-items: center; } .panneau .feuille { border-radius: 28px; } }
.galerie { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.galerie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-photo); scroll-snap-align: start; }
@media (min-width: 720px) { .galerie { grid-auto-columns: 46%; } }
.tableau-details { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tableau-details td { padding: .45rem 0; border-bottom: 1px solid var(--bord); }
.tableau-details tr:last-child td { border-bottom: none; }
.tableau-details td:first-child { color: var(--doux); width: 45%; }

/* --- Messages éphémères ---------------------------------------------------- */
.messages { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 2000; display: grid; gap: .4rem; }
.message {
  background: var(--encre); color: var(--fond); padding: .6rem 1.1rem;
  border-radius: var(--r-pilule); font-size: .86rem; box-shadow: var(--ombre-nette);
  animation: apparait .2s ease;
}
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } }

.vide { text-align: center; padding: 3rem 1rem; color: var(--doux); }
.chargement { text-align: center; padding: 2rem; color: var(--doux); }

/* --- Icônes Lucide --------------------------------------------------------- */
svg.lucide { width: 16px; height: 16px; flex: none; vertical-align: -3px; stroke-width: 2; }
.marque svg.lucide { width: 19px; height: 19px; margin-right: .45rem; }
.onglets a svg.lucide { margin-right: .4rem; }
button svg.lucide, .bouton svg.lucide { margin-right: .4rem; }
button.icone-seule svg.lucide, .rond svg.lucide { margin-right: 0; }
h2 svg.lucide, h3 svg.lucide { margin-right: .45rem; color: var(--doux); }

/* --- Téléphone ------------------------------------------------------------- */
@media (max-width: 620px) {
  main { padding: .4rem .8rem 5.5rem; }
  .entete { padding: .7rem .9rem; }
  .marque { font-size: .95rem; }
  .etat-robot { display: none; }
  .grille-annonces { grid-template-columns: 1fr; }
  .page-carte { height: calc(100dvh - 56px); }

  /* Barre de navigation flottante, comme sur un téléphone : elle reste à
     portée du pouce et libère le haut de l'écran pour le contenu. */
  .onglets {
    position: fixed; bottom: max(.7rem, env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    top: auto; width: auto; max-width: calc(100% - 1.4rem);
    background: var(--surface); border-radius: var(--r-pilule);
    box-shadow: var(--ombre-nette); padding: .35rem;
    z-index: 900; gap: .15rem;
  }
  .onglets a { padding: .6rem .75rem; font-size: .82rem; }
  .onglets a svg.lucide { margin-right: 0; width: 19px; height: 19px; }
  /* Seul l'onglet actif porte son libellé : à quatre libellés, la barre
     déborderait de l'écran. */
  .onglets a .libelle { display: none; }
  .onglets a.actif { padding: .6rem 1rem; }
  .onglets a.actif .libelle { display: inline; margin-left: .4rem; }
  .onglets a:not(.actif) .pastille {
    position: absolute; transform: translate(9px, -11px);
    min-width: 16px; line-height: 16px; font-size: .64rem;
    background: var(--encre); color: var(--surface);
  }
  .onglets a { position: relative; }

  .entete .bouton-fin .libelle { display: none; }
  .entete .bouton-fin { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
  .entete .bouton-fin svg.lucide { margin: 0; }
}

/* --- Fil de découverte ------------------------------------------------------
   Une annonce par écran, qu'on fait défiler du pouce. Deux accrochages
   imbriqués : vertical d'une annonce à l'autre, horizontal d'une photo à
   l'autre. L'accrochage est confié au navigateur (scroll-snap) : réécrit à la
   main, il perdrait l'inertie du glissement natif.
   -------------------------------------------------------------------------- */
.feed {
  position: fixed; inset: 0; z-index: 800;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  background: #000; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Sans cela, le navigateur « ancre » le défilement sur la sentinelle de fin
     pendant qu'on insère les écrans au-dessus d'elle : le fil s'ouvre alors
     tout en bas, sur le vide, au lieu de la première annonce. */
  overflow-anchor: none;
}
.feed * { overflow-anchor: none; }
.feed::-webkit-scrollbar { display: none; }

/* Sur grand écran, le fil se tient dans une colonne de largeur de téléphone —
   une photo étirée sur 1400 px n'a plus rien d'un fil de découverte — et il se
   place sous l'en-tête, qui reste la seule navigation disponible ici. */


.feed-ecran {
  position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; background: #0b0b0f;
}
.feed-ecran.ecartee { opacity: .4; }

.feed-photos {
  position: absolute; inset: 0; display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.feed-photos::-webkit-scrollbar { display: none; }
.feed-photo { flex: 0 0 100%; height: 100%; scroll-snap-align: start; position: relative; }
.feed-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-photo.sans-photo { background: linear-gradient(140deg, #2a2d36, #16171c); }
.feed-photo .mention {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,.4); font-size: .9rem;
}

/* Voile sombre en bas, sans quoi un texte blanc disparaît sur une photo claire. */
.feed-voile {
  position: absolute; inset: auto 0 0; height: 62%; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.94) 10%, rgba(0,0,0,.68) 34%, rgba(0,0,0,.3) 62%, transparent);
}

.feed-points {
  position: absolute; top: max(4.2rem, calc(env(safe-area-inset-top) + 3.6rem));
  left: 0; right: 0; display: flex; justify-content: center; gap: .3rem;
  pointer-events: none;
}
.feed-points span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.4); transition: background .18s, width .18s;
}
.feed-points span.actif { background: #fff; width: 18px; border-radius: var(--r-pilule); }

.feed-gestes {
  position: absolute; right: .8rem; bottom: 13.5rem; z-index: 3;
  display: grid; gap: .7rem; justify-items: center;
}
.feed-rond {
  width: 48px; height: 48px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px); box-shadow: none;
  display: grid; place-items: center;
}
.feed-rond:hover { background: rgba(255,255,255,.28); }
.feed-rond.actif { background: #fff; color: #14151a; border-color: #fff; }
.feed-rond.actif svg.lucide { fill: currentColor; }
.feed-rond svg.lucide { margin: 0; width: 21px; height: 21px; }

/* Le bloc d'informations occupe toute la largeur : les boutons sont remontés
   au-dessus de lui, si bien que la ligne de caractéristiques n'a plus à se
   faufiler dans une colonne étroite et tient sur une seule ligne. */
.feed-infos {
  position: absolute; left: 0; right: 0;
  bottom: calc(5.2rem + env(safe-area-inset-bottom));
  padding: 0 1.1rem; z-index: 2; color: #fff; cursor: pointer;
  display: grid; gap: .45rem; justify-items: start;
}
.feed-quartier {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  font-size: .78rem; font-weight: 600; padding: .32rem .7rem; border-radius: var(--r-pilule);
}
.feed-quartier svg.lucide { width: 13px; height: 13px; margin: 0; }
.feed-prix {
  font-size: 1.85rem; font-weight: 700; letter-spacing: -.035em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5); display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.feed-prix .avant {
  font-size: .9rem; font-weight: 400; color: rgba(255,255,255,.65); text-decoration: line-through;
}
.feed-prix .au-m2 {
  font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.16); padding: .25rem .6rem; border-radius: var(--r-pilule);
}
.feed-details { font-size: .92rem; color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(0,0,0,.5); }

.feed-sentinelle {
  min-height: 22vh; padding: 2rem 1rem;
  display: grid; place-items: center; text-align: center;
  color: rgba(255,255,255,.5); font-size: .85rem;
}
.feed-vide { min-height: 100dvh; display: grid; place-content: center; text-align: center; color: #fff; padding: 2rem; }
.feed-vide .doux { color: rgba(255,255,255,.6); }

/* Barre flottante du fil : le tri par état, et la sortie vers la grille. */
.feed-barre {
  position: fixed; top: 0; left: 0; right: 0; z-index: 810;
  display: flex; gap: .5rem; align-items: center;
  padding: max(.7rem, env(safe-area-inset-top)) .8rem .7rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), transparent);
  pointer-events: none;
}
.feed-barre > * { pointer-events: auto; }
.feed-barre .rang-etats { flex: 1; min-width: 0; }
.feed-barre .rang-etats button {
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px);
  font-size: .8rem; padding: .4rem .8rem; box-shadow: none;
}
.feed-barre .rang-etats button.actif { background: #fff; color: #14151a; border-color: #fff; }
.feed-barre .sortie {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); box-shadow: none;
}
.feed-barre .sortie svg.lucide { margin: 0; }

/* Le fil recouvre la page ; l'en-tête n'a plus lieu d'être, mais la barre de
   navigation flottante reste accessible par-dessus. */
body.feed-actif main { padding: 0; }
/* Sur téléphone, le fil prend tout l'écran : l'en-tête n'a plus lieu d'être,
   et c'est la barre de navigation flottante qui reste accessible par-dessus. */
@media (max-width: 620px) {
  body.feed-actif .entete { display: none; }
  body.feed-actif .onglets { z-index: 900; }
}


/* Réglages du fil pour grand écran.
   Placés en fin de feuille à dessein : ils viennent après les règles de base
   du fil, sans quoi celles-ci, de même spécificité mais plus bas dans le
   fichier, reprendraient la main sur la position de la barre. */
@media (min-width: 621px) {
  .feed {
    top: 104px; inset-inline: 0; bottom: 0;
    background: rgba(10,10,14,.82);
  }
  .feed-ecran, .feed-sentinelle { margin: 0 auto; max-width: 430px; }
  .feed-ecran { height: calc(100dvh - 104px); }
  .feed-barre {
    top: 104px; left: 50%; right: auto; transform: translateX(-50%);
    width: 430px; max-width: 100%;
    border-radius: 0 0 18px 18px;
  }
  /* Pas de barre flottante en bas sur grand écran : le bloc d'informations
     peut donc descendre plus près du bord. */
  .feed-infos { bottom: 1.4rem; }
  .feed-gestes { bottom: 9.5rem; }
}