/* Outils Finances LIBRE - Recherche (outil immo).
   Tout ce qui est propre a cette page. Le tableau et la fiche gardent leurs
   regles de base dans libre.css (.tableau-immo, dialog.modale, .aide-bloc). */

/* --- le projet --- */
.recherche .bloc-projet .bloc-tete{margin-bottom:18px; align-items:center}
.recherche .bloc-projet .bloc-tete .title{margin:0}
.projet-valider{display:flex; justify-content:flex-end; margin-top:22px}
/* les menus du projet portent de longs libelles : des colonnes plus larges,
   et les cases alignees en bas quand une question passe sur deux lignes */
.recherche .projet-grille{grid-template-columns:repeat(6,1fr); align-items:end}
/* ligne 1 : type, lieu, gestion ; ligne 2 : exploitation et fiscalite, les longs */
.recherche .projet-grille .champ:nth-child(1){grid-area:1 / 1 / 2 / 3}
.recherche .projet-grille .champ:nth-child(2){grid-area:1 / 3 / 2 / 5}
.recherche .projet-grille .champ:nth-child(4){grid-area:1 / 5 / 2 / 7}
.recherche .projet-grille .champ:nth-child(3){grid-area:2 / 1 / 3 / 4}
.recherche .projet-grille .champ:nth-child(5){grid-area:2 / 4 / 3 / 7}
@media(max-width:900px){
  .recherche .projet-grille{grid-template-columns:1fr}
  .recherche .projet-grille .champ:nth-child(n){grid-area:auto}
}
/* les petits titres ecrits en <p> prennent le style des etiquettes */
.recherche p.lab,.modale.plein p.lab{font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--brown)}
.recherche .projet-argent{align-items:end}

.recap-chiffres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px;
}
.recap-chiffre{
  background:var(--white); border:1px solid rgba(130,62,0,.14); border-radius:14px;
  padding:14px 18px 16px;
}
.recap-chiffre .lab{margin:0 0 6px}
.recap-n{
  font-family:var(--font-s); font-size:1.6rem; line-height:1.05; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums; color:var(--brown); margin:0;
}
.recap-choix{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.recap-puce{
  display:inline-flex; align-items:baseline; gap:8px; padding:7px 14px;
  background:var(--white); border:1px solid rgba(130,62,0,.14); border-radius:100px;
  font-size:0.86rem;
}
.recap-l{font-size:0.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.recap-v{color:var(--ink); font-weight:500}
.recap-rien{color:var(--muted); margin:0}
.recherche .projet-hypo .hypo-champs .champ{width:150px}

/* --- les reperes --- */
.reperes-immo{margin-bottom:20px}

/* --- la barre des annonces : filtres, tri, affichage --- */
.bloc-annonces > .bloc-tete{align-items:center; margin-bottom:18px}
.bloc-annonces > .bloc-tete .title{margin:0}
.outils-annonces{
  display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line);
}
.filtres{display:flex; flex-wrap:wrap; gap:6px}
.filtre{
  font-family:var(--font-d); font-size:0.8rem; font-weight:500; letter-spacing:-0.01em;
  border:1px solid var(--line-2); background:var(--white); color:var(--muted);
  border-radius:100px; padding:6px 13px; cursor:pointer; transition:all .2s var(--ease);
}
.filtre span{opacity:.6; margin-left:2px; font-variant-numeric:tabular-nums}
.filtre:hover{border-color:var(--brown); color:var(--ink)}
.filtre.actif{background:var(--ink); border-color:var(--ink); color:var(--cream)}
.filtre.actif span{opacity:.75}
.vue-reglages{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.tri-annonces{display:flex; align-items:center; gap:10px}
.tri-annonces .lab{margin:0}
.tri-annonces select{width:auto; padding:7px 34px 7px 12px; font-size:0.84rem}
.bascule{display:inline-flex; background:var(--cream); border-radius:100px; padding:3px}
.bascule button{
  font-family:var(--font-d); font-size:0.8rem; font-weight:500; border:0; background:transparent;
  color:var(--muted); padding:6px 14px; border-radius:100px; cursor:pointer;
}
.bascule button[aria-pressed="true"]{background:var(--white); color:var(--ink); box-shadow:0 1px 4px rgba(45,28,28,.10)}

/* --- la liste des annonces : une ligne par bien --- */
/* nom, renta, ville (etroite : un nom de ville tient en quelques mots), prix, cash-flow, statut, actions */
.liste-annonces{--cols:minmax(200px,2.4fr) minmax(150px,1.2fr) minmax(100px,150px) minmax(110px,1fr) minmax(90px,.8fr) 150px 70px}
.la-tete,.la-rang{display:grid; grid-template-columns:var(--cols); gap:0 18px; align-items:center}
.la-tete{padding:0 16px 10px 20px}
.la-tete span{font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.la-tete .n{text-align:right}
.la-tete span:nth-child(3){padding-left:14px}
.la-rang{
  position:relative; padding:14px 16px 14px 20px; border-radius:14px;
  border:1px solid transparent; transition:background .2s var(--ease), border-color .2s;
}
/* une ligne sur deux en gris tres clair, pour suivre un bien d'un bout a
   l'autre. La premiere ligne est blanche (la tete est le 1er enfant). */
.liste-annonces .la-rang{background:var(--white)}
.liste-annonces .la-rang:nth-child(odd){background:rgba(45,28,28,.045)}
.liste-annonces .la-rang:hover{background:var(--cream)}
/* un trait a gauche, couleur du statut */
.la-rang::before{content:""; position:absolute; left:6px; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--line-2)}
.la-rang.st-interessant::before{background:var(--gold)}
.la-rang.st-visiter::before{background:var(--terra)}
.la-rang.st-alice::before{background:#A98BD8}
.la-rang.st-offre::before{background:var(--ok)}
.la-rang [data-a="ouvrir"]{cursor:pointer; min-width:0}
.la-nom{display:flex; flex-direction:column; outline-offset:3px}
.la-titre{font-family:var(--font-s); font-style:italic; font-weight:500; font-size:1.2rem; line-height:1.15; letter-spacing:-0.02em; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.la-sous{font-size:0.74rem; color:var(--muted); font-variant-numeric:tabular-nums}
.la-ville{font-size:0.9rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:14px}
.n{text-align:right; font-variant-numeric:tabular-nums}
.la-renta{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.la-v{font-family:var(--font-s); font-size:1.45rem; line-height:1; letter-spacing:-0.02em; color:var(--ink)}
.la-rang.atteint .la-v{color:var(--brown)}
.la-renta .jauge{width:100%; max-width:130px; height:4px; margin:0}
.la-renta .jauge-cible{top:-3px; bottom:-3px}
.la-prix{display:flex; flex-direction:column; align-items:flex-end}
.la-p{font-size:0.95rem; font-weight:500; color:var(--ink)}
.la-cash{font-size:0.95rem; font-weight:500}
.la-cash.pos{color:var(--ok)}
.la-cash.neg{color:var(--stop)}
.la-vide{font-family:var(--font-hand); font-size:1.2rem; color:var(--muted)}
.la-statut .statut-cell{min-width:0; width:100%}
.la-actions{display:flex; justify-content:flex-end; gap:2px}
.an-btn{
  display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px;
  border:0; border-radius:8px; background:transparent; color:var(--muted);
  font-size:0.9rem; text-decoration:none; cursor:pointer; padding:0 8px;
}
.an-btn:hover{background:var(--white); color:var(--ink)}
.an-btn.suppr.confirme{background:var(--stop-soft); color:var(--stop); font-size:0.76rem; font-weight:600}
.jauge{position:relative; height:6px; border-radius:100px; background:rgba(130,62,0,.12); margin:10px 0 16px}
.jauge-rempli{position:absolute; inset:0 auto 0 0; border-radius:100px; background:var(--terra); transition:width .3s var(--ease)}
.la-rang.atteint .jauge-rempli,.direct-v.atteint + .jauge .jauge-rempli{background:var(--gold)}
.jauge-cible{position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:var(--ink); border-radius:2px}
/* une annonce ecartee reste lisible mais sort du champ de decision */
.la-rang.ko > :not(.la-statut):not(.la-actions){opacity:.45}
.la-rang.ko .jauge-rempli{background:var(--muted)}
.annonce-ajout-ligne{
  display:block; width:100%; margin-top:10px; padding:14px; border:1.5px dashed rgba(130,62,0,.28);
  border-radius:14px; background:transparent; color:var(--brown); font-family:var(--font-d);
  font-size:0.9rem; font-weight:500; cursor:pointer; transition:background .2s var(--ease), border-color .2s;
}
.annonce-ajout-ligne:hover{background:var(--cream); border-color:var(--brown)}
@media(max-width:900px){
  .la-tete{display:none}
  .la-rang{grid-template-columns:1fr auto; gap:6px 14px}
  .la-nom{grid-column:1 / 2}
  .la-ville{grid-column:1 / 2; grid-row:2}
  .la-renta{grid-column:2; grid-row:1 / 3}
  .la-prix{grid-column:1; grid-row:3; align-items:flex-start}
  .la-cash{grid-column:2; grid-row:3}
  .la-statut{grid-column:1; grid-row:4}
  .la-actions{grid-column:2; grid-row:4}
}

/* --- la fiche du bien : une grande fenetre, pour remplir a l'aise --- */
dialog.modale.plein{width:min(1180px,96vw); height:94vh; max-height:94vh}
.modale.plein form{height:94vh; max-height:94vh}
dialog.modale.plein[open]{animation:fenetre .28s var(--ease)}
@keyframes fenetre{from{transform:translateY(16px); opacity:0} to{transform:none; opacity:1}}
.modale .fiche-champs.champs-4{grid-template-columns:repeat(4,1fr)}
.modale .fiche-champs.champs-2{grid-template-columns:repeat(2,1fr); align-items:start}
/* une case calculee se lit, elle ne se tape pas */
.champ-suffixe.calcule{background:rgba(45,28,28,.05) !important; border-color:transparent !important}
.champ-suffixe.calcule input{background:transparent !important; color:var(--muted); cursor:default}
@media(max-width:820px){
  .modale .fiche-champs.champs-4,.modale .fiche-champs.champs-2{grid-template-columns:1fr 1fr}
  dialog.modale.plein{width:100vw; height:100vh; max-height:100vh; border-radius:0}
  .modale.plein form{height:100vh; max-height:100vh}
}

/* les options de charges, a cocher */
.charges-options{margin-top:10px; padding-top:6px; border-top:1px solid var(--line-2)}
.charge-ligne.option .charge-case{display:flex; align-items:flex-start; gap:10px; margin:0; cursor:pointer}
.charge-ligne.option .charge-case input{margin-top:3px}
.charge-opt-nom{display:block; font-size:0.92rem; font-weight:500; color:var(--ink)}
.charge-ligne.option .charge-aide{display:block}
.charge-ligne.option:not(.cochee) .champ-cell,
.charge-ligne.option:not(.cochee) .repere-txt{opacity:.45}
.charge-aide a{color:var(--brown)}

/* les resultats en direct, colles en haut de la fiche */
.direct{
  position:sticky; top:-8px; z-index:3; margin:0 -28px; padding:20px 28px 18px;
  display:grid; grid-template-columns:minmax(220px,1.1fr) 2fr; gap:22px; align-items:center;
  background:var(--grad-bloc); color:var(--cream);
}
/* sur le fond sombre, les etiquettes restent creme (la regle des p.lab les passait en marron) */
.modale.plein .direct p.lab{color:var(--on-dark-3); margin:0 0 5px}
.direct-v{
  font-family:var(--font-s); font-size:2.6rem; line-height:1; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums; color:var(--cream); margin:0;
}
.direct-v.atteint{color:var(--gold)}
.direct .jauge{background:rgba(251,239,187,.18); margin:12px 0 8px}
.direct .jauge-rempli{background:var(--on-dark-3)}
.direct-v.atteint + .jauge .jauge-rempli{background:var(--gold)}
.direct .jauge-cible{background:var(--cream)}
.direct-d{font-size:0.76rem; color:var(--on-dark-5); margin:0; min-height:1.1em}
.direct-autres{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 18px}
.direct-p{
  font-family:var(--font-s); font-size:1.35rem; line-height:1.1; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums; color:var(--cream); margin:0;
}
.direct-p.pos{color:#B9E0A2}
.direct-p.neg{color:#F2A58F}
.direct-p.hors{color:var(--gold)}

/* le curseur de negociation */
.nego{background:var(--cream); border-radius:var(--rcard); padding:16px 20px 12px; margin:4px 0 6px}
.nego-tete{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.nego-tete .lab{margin:0}
.nego-v{margin:0; font-family:var(--font-s); font-size:1.35rem; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--brown)}
.nego-ecart{font-family:var(--font-d); font-size:0.8rem; font-weight:500; color:var(--muted); margin-left:10px}
.nego input[type=range]{
  --cible:-10%;
  -webkit-appearance:none; appearance:none; width:100%; height:6px; margin:16px 0 8px;
  border-radius:100px; cursor:pointer;
  background:
    linear-gradient(90deg, transparent calc(var(--cible) - 1px), var(--ink) calc(var(--cible) - 1px), var(--ink) calc(var(--cible) + 1px), transparent calc(var(--cible) + 1px)),
    rgba(130,62,0,.18);
}
.nego input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--gold); border:3px solid var(--white); box-shadow:0 2px 8px rgba(45,28,28,.25);
}
.nego input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--gold);
  border:3px solid var(--white); box-shadow:0 2px 8px rgba(45,28,28,.25);
}
.nego-bornes{display:flex; justify-content:space-between; font-size:0.74rem; color:var(--muted); font-variant-numeric:tabular-nums}

/* --- les calculettes --- */
details.calculettes > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between}
details.calculettes > summary::-webkit-details-marker{display:none}
details.calculettes > summary .title{margin:0}
details.calculettes > summary::after{
  content:""; width:9px; height:9px; margin-right:6px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(-45deg); transition:transform .2s var(--ease);
}
details.calculettes[open] > summary::after{transform:rotate(45deg)}
.calc-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:20px}
.calc{background:var(--cream); border-radius:var(--rcard); padding:16px 18px}
.calc-champs{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.calc .champ .lab{font-size:10.5px; letter-spacing:.07em}
.calc-res{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:14px 0 0; padding-top:12px; border-top:1px solid rgba(130,62,0,.16)}
.calc-res .lab{margin:0}
.calc-v{font-family:var(--font-s); font-size:1.45rem; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--brown)}

@media(max-width:720px){
  .direct{grid-template-columns:1fr; gap:16px; margin:0 -18px; padding:18px}
  .an-chiffres{grid-template-columns:1fr 1fr}
  dialog.modale.tiroir{border-radius:0}
  .outils-annonces{align-items:flex-start}
}

/* --- la liste des villes --- */
.villes-liste{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px); margin:0; padding:6px;
  list-style:none; background:var(--white); border:1px solid var(--line-2); border-radius:12px;
  box-shadow:var(--sh-img); max-height:300px; overflow-y:auto;
}
.villes-liste li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 12px; border-radius:8px; cursor:pointer}
.villes-liste li[aria-selected="true"],.villes-liste li:hover{background:var(--cream)}
.v-nom{font-weight:500; color:var(--ink)}
.v-info{font-size:0.76rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}

/* --- la vue tableau, remise a plat (19/09) ---
   Pas de teinte par colonne ni de case arrondie : une ligne sur deux en gris
   tres clair, comme la liste, et les groupes de colonnes signales par un trait
   de couleur sous leur titre. Les fonds sont opaques : la premiere colonne est
   collee a gauche et doit masquer ce qui defile dessous. */
.recherche .tableau-immo{border-collapse:collapse; border-spacing:0; font-size:0.84rem}
.recherche .tableau-immo col{background:none !important}
.recherche .tableau-immo th,.recherche .tableau-immo td{border-radius:0 !important; background:var(--white); border-bottom:0}
.recherche .tableau-immo tbody tr:nth-child(even) td{background:#F5F1EB}
.recherche .tableau-immo tbody tr:hover td{background:var(--cream)}
.recherche .tableau-immo td{padding:9px 12px; vertical-align:middle}

/* les titres de groupe : un trait de couleur, pas un aplat */
.recherche .tableau-immo .groupes th{
  background:var(--white) !important; padding:0 12px 8px; border-bottom:2px solid var(--line-2);
}
.recherche .tableau-immo .groupes th.g-cles{border-bottom-color:var(--gold)}
.recherche .tableau-immo .groupes th.g-acq{border-bottom-color:var(--terra)}
.recherche .tableau-immo .groupes th.g-expl{border-bottom-color:var(--cream-2)}
.recherche .tableau-immo thead tr:last-child th{
  background:var(--white); padding:12px 12px 10px; border-bottom:1px solid var(--line-2);
  font-size:10.5px; letter-spacing:.08em; line-height:1.35;
}

/* les cases de saisie : du texte dans la ligne, une bordure seulement au survol */
.recherche .tableau-immo .champ-cell{background:transparent !important; border:1px solid transparent; border-radius:6px; min-width:96px}
.recherche .tableau-immo .champ-cell:hover{border-color:var(--line-2)}
.recherche .tableau-immo .champ-cell:focus-within{background:var(--white) !important; border-color:var(--gold)}
.recherche .tableau-immo .champ-cell input{padding:6px 0 6px 8px; text-align:right; font-variant-numeric:tabular-nums}
.recherche .tableau-immo .c-nom input,.recherche .tableau-immo .c-loc input{border-radius:6px; padding:6px 8px}
.recherche .tableau-immo .c-nom input{font-family:var(--font-s); font-style:italic; font-size:1.02rem; letter-spacing:-0.02em}

/* les resultats : plus forts que la saisie, sans fond */
.recherche .tableau-immo td.calc{background-clip:padding-box}
.recherche .tableau-immo td.calc.atteint{color:var(--brown); font-weight:600}
.recherche .tableau-immo tbody tr.ko td:not(.c-nom):not(.c-actions){background:inherit}
.recherche .tableau-immo tbody tr.ko:nth-child(even) td{background:#F5F1EB}
.recherche .tableau-immo tbody tr.ko td,.recherche .tableau-immo tbody tr.ko input{color:rgba(107,74,43,.55)}
.recherche .tableau-immo .statut-cell{min-width:112px}
/* la zone qui defile commence au bord du tableau : sinon ce qui defile passe
   dans la marge, a gauche de la colonne collee */
.recherche .table-immo{margin:0; padding:0}
.recherche .tableau-immo tbody tr:nth-child(odd) td{background:var(--white) !important}
.recherche .tableau-immo tbody tr:nth-child(even) td{background:#F5F1EB !important}
.recherche .tableau-immo tbody tr:hover td{background:var(--cream) !important}
/* une ombre au bord de la colonne collee : ce qui passe dessous se lit comme
   recouvert, pas comme une colonne coupee */
.recherche .tableau-immo .c-nom{box-shadow:8px 0 10px -8px rgba(45,28,28,.18); clip-path:inset(0 -16px 0 0)}

/* les separations de groupe descendent dans toutes les lignes (19/09) :
   Le bien = 4 colonnes, Indicateurs cles = 3, Acquisition = 8, Exploitation = 4.
   Le trait se pose a gauche de la premiere colonne de chaque groupe. */
.recherche .tableau-immo thead tr:last-child th:nth-child(5),
.recherche .tableau-immo tbody td:nth-child(5){border-left:2px solid var(--gold)}
.recherche .tableau-immo thead tr:last-child th:nth-child(8),
.recherche .tableau-immo tbody td:nth-child(8){border-left:2px solid var(--terra)}
.recherche .tableau-immo thead tr:last-child th:nth-child(16),
.recherche .tableau-immo tbody td:nth-child(16){border-left:2px solid var(--cream-2)}
.recherche .tableau-immo .groupes th.g-cles,
.recherche .tableau-immo .groupes th.g-acq,
.recherche .tableau-immo .groupes th.g-expl{border-left:2px solid transparent}
.recherche .tableau-immo .groupes th.g-cles{border-left-color:var(--gold)}
.recherche .tableau-immo .groupes th.g-acq{border-left-color:var(--terra)}
.recherche .tableau-immo .groupes th.g-expl{border-left-color:var(--cream-2)}

/* l'ajout rapide : un champ lien sous la barre */
.recherche .ajout-rapide{display:flex; gap:10px; margin:0 0 16px}
.recherche .ajout-rapide input{flex:1; min-width:0}

/* la fleche pour ouvrir l'annonce, collee au nom (liste et tableau) */
.la-ligne-nom{display:flex; align-items:center; gap:6px; min-width:0}
.an-btn.lien-nom{flex-shrink:0; min-width:26px; height:26px; padding:0 6px; font-size:.82rem}
.nom-et-lien{display:flex; align-items:center; gap:4px}
.nom-et-lien input{min-width:0}

/* indicateurs cles figes a droite du nom (19/09) : position posee en JS */
.recherche .tableau-immo .fige{position:sticky; z-index:2}
.recherche .tableau-immo thead th.fige{z-index:3}
.recherche .tableau-immo .fige-bord{box-shadow:8px 0 10px -8px rgba(45,28,28,.18); clip-path:inset(0 -16px 0 0)}