/* ============ PALETTE — blanc, bleu-gris, orange en touches ============ */
:root{
  --ground:#EDF0F5;      /* fond de l'application */
  --surface:#FFFFFF;     /* panneaux, cartes, tableaux */
  --surface-2:#F5F7FA;   /* survol, zones secondaires */
  --surface-3:#E8EDF3;   /* en-têtes de tableau, puces neutres */
  --nav:#1E2E48;         /* barre du haut, en bleu nuit */
  --line:#DEE4EC; --line-2:#C4CDDB;
  --text:#16243A; --text-2:#4C5D75; --text-3:#7F8799;
  --primary:#2B3C5B; --primary-hi:#3A5079; --primary-soft:#E7EBF2;
  --accent:#DD7A1C; --accent-hi:#C46A14; --accent-soft:#FDF2E6; --accent-line:#EFB278;
  --info:#3E6E9E; --info-soft:#E8F0F7;
  --good:#2E9367; --good-soft:#E4F2EB;
  --warn:#B9821C; --warn-soft:#FBF1DE;
  --bad:#C4474E;  --bad-soft:#FAE8E9;
  --shadow-1:0 1px 2px rgba(22,36,58,.07);
  --shadow-2:0 14px 34px rgba(22,36,58,.16);
  --r-s:7px; --r-m:10px; --r-l:14px;
  --h-ctl:34px; --h-ctl-sm:28px;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:var(--sans); --serif:var(--sans);
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--display);text-wrap:balance;letter-spacing:-.01em;color:var(--text);font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--info)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ BARRE DU HAUT (bleu nuit, jetons clairs) ============ */
.appbar{position:sticky;top:0;z-index:40;background:var(--nav);border-bottom:1px solid #16243A;
  display:flex;align-items:center;gap:16px;padding:10px 20px;flex-wrap:wrap;
  --text:#FFFFFF; --text-2:#C6D0DE; --text-3:#8FA0B8;
  --surface:#27395A; --surface-2:#27395A; --surface-3:#2F4364; --line:#31456A; --line-2:#3E5478}
.brand{display:flex;align-items:center;gap:11px;padding-right:16px;border-right:1px solid var(--line)}
.brand .mark{width:42px;height:42px;border-radius:10px;background:#FFFFFF;display:grid;place-items:center}
.brand .mark svg{width:27px;height:27px;fill:none;stroke-linejoin:round;stroke-linecap:round}
/* logo de l'agence, quand elle en a déposé un */
.brand .mark img{width:100%;height:100%;object-fit:contain;border-radius:8px}
/* Un logo d'agence se pose a nu sur la barre, plus grand, sans la tuile
   blanche : la tuile est faite pour le pictogramme du produit, pas pour un
   logo qui porte deja son propre fond. */
.brand .mark.logo{width:auto;height:46px;min-width:46px;max-width:150px;background:none;border-radius:0;padding:0;
  display:flex;align-items:center;overflow:hidden}
/* hauteur en dur : dans une grille, « 100 % » ne se resout pas et l'image
   restait a sa taille native, debordant sur la barre du dessous */
.brand .mark.logo img{width:auto;height:46px;max-height:46px;max-width:150px;object-fit:contain;border-radius:6px}
.brand b{font-size:14.5px;font-weight:700;display:block;line-height:1.1;color:#FFFFFF}
.brand span{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8FA0B8}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1}
.pill{height:var(--h-ctl);border:1px solid transparent;background:transparent;color:var(--text-2);padding:0 14px;border-radius:var(--r-s);
  font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .14s,color .14s,border-color .14s;
  display:inline-flex;align-items:center;gap:7px;position:relative}
.pill:hover{background:var(--surface-3);color:var(--text)}
.pill[aria-current="page"]{background:var(--surface-3);color:#FFFFFF;font-weight:700}
.pill[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--accent);border-radius:2px}
.pill.solid-ink{background:#FFFFFF;color:var(--nav);font-weight:700}
.pill.solid-ink:hover{background:#FFFFFF;color:var(--nav);box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.pill.tone-ghost{border-color:var(--line-2)}
.pill svg{width:13px;height:13px;fill:currentColor}
.who{display:flex;align-items:center;gap:10px;height:var(--h-ctl);padding:0 14px 0 6px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--surface);cursor:pointer}
.who .ava{width:26px;height:26px;border-radius:50%;background:#FFFFFF;border:0;color:var(--nav);
  display:grid;place-items:center;font-size:10.5px;font-weight:700}
.who small{display:block;color:var(--text-3);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.who b{font-size:12.5px;font-weight:600;line-height:1.2;color:#FFFFFF}
.ctxbar{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px 0;max-width:1760px;margin:0 auto}
.ctxbar:empty{padding:0}
.ctxbar .pill{height:28px;font-size:11.5px;background:var(--surface);border:1px solid var(--line);color:var(--text-3);cursor:default}
.ctxbar .pill:hover{background:var(--surface);color:var(--text-3)}
.ctxbar .pill b{color:var(--text);font-weight:600}

.burger{display:none;width:40px;height:40px;border-radius:var(--r-s);border:1px solid var(--line-2);
  background:transparent;color:#FFFFFF;cursor:pointer;place-items:center;flex:none}
.burger svg{width:18px;height:18px;fill:currentColor}
.burger[aria-expanded="true"]{background:var(--surface-3)}

/* ============ STRUCTURE ============ */
.shell{padding:18px 20px 70px;max-width:1760px;margin:0 auto}
.subbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.subbar h1{font-size:22px;font-weight:700}
.kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:5px}
.subbar p{margin:6px 0 0;color:var(--text-2);font-size:13px;max-width:68ch}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1)}
.pad{padding:18px}

/* --- contrôles : deux hauteurs, un rayon, aucun dégradé --- */
.btn{height:var(--h-ctl);border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);padding:0 14px;border-radius:var(--r-s);
  font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.14s;white-space:nowrap}
.btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#FFFFFF;font-weight:700}
.btn-primary:hover{background:var(--primary-hi);border-color:var(--primary-hi);color:#FFFFFF}
.btn-accent{background:var(--surface);border-color:var(--accent-line);color:var(--accent-hi);font-weight:700}
.btn-accent:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-hi)}
.btn-sm{height:var(--h-ctl-sm);padding:0 11px;font-size:11.5px}
.btn svg{width:13px;height:13px;fill:currentColor}
a.btn,a.chip{text-decoration:none}
.tools .filtre{height:var(--h-ctl);width:200px;padding:0 10px 0 30px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA0B8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 9px center/15px no-repeat;
  font:inherit;font-size:13px;color:var(--text)}
.tools .filtre:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft,rgba(221,122,28,.18))}
.seg{display:inline-flex;height:var(--h-ctl);background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-s);padding:3px;gap:3px}
.seg button{border:0;background:transparent;color:var(--text-3);font-size:12px;font-weight:600;padding:0 13px;border-radius:5px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}

/* ============ ACCUEIL : INDICATEURS ============ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;
  display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-1);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--k)}
.kpi .ic{width:40px;height:40px;border-radius:11px;background:var(--k-soft);color:var(--k);display:grid;place-items:center;flex:none}
.kpi .ic svg{width:19px;height:19px;fill:currentColor}
.kpi .ic svg[viewBox="0 0 24 24"]{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.kpi s{display:block;text-decoration:none;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.kpi b{display:block;font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.25}
.kpi em{font-style:normal;font-size:11.5px;color:var(--text-3)}

/* ============ INFOBULLE ============ */
.infobulle{position:fixed;z-index:1000;max-width:280px;padding:7px 10px;border-radius:8px;
  background:#16243A;color:#FFFFFF;font-size:12px;line-height:1.4;font-weight:500;
  box-shadow:0 6px 20px rgba(22,36,58,.25);pointer-events:none;white-space:normal}
.infobulle::after{content:"";position:absolute;left:var(--fleche,50%);bottom:-5px;margin-left:-5px;
  border:5px solid transparent;border-top-color:#16243A;border-bottom:0}
.infobulle.dessous::after{bottom:auto;top:-5px;border-top:0;border-bottom:5px solid #16243A}

/* Sur un ecran bas — un portable, la plupart du temps — l'en-tete et les
   indicateurs mangeaient assez de place pour que le tableau ne tienne plus.
   La page devenait defilante de quelques dizaines de pixels, et ce
   defilement-la etait impossible a attraper : la molette appartient a la
   colonne survolee. On resserre donc le haut plutot que de le subir. */
@media (max-height:820px){
  .board-page .subbar{margin-bottom:10px}
  .board-page .subbar p{display:none}
  .board-page .kpis{gap:8px;margin-bottom:10px}
  .board-page .kpi{padding:9px 12px;gap:10px}
  .board-page .kpi b{font-size:18px}
  .board-page .kpi em{display:none}
  .board-page .kpi .ic{width:30px;height:30px}
}

/* ---- stockage de l'agence : une barre qui se lit d'un coup d'oeil ---- */
/* ============ STOCKAGE ============ */
/* Le remplissage du disque est le seul écran du produit qui finira par
   coûter de l'argent à une agence. C'est donc aussi le seul endroit où l'on
   vend quelque chose : il est traité comme tel, chiffre lisible de loin,
   répartition qui explique où part la place, et l'offre posée à côté plutôt
   qu'un bouton perdu en bas. */
.stock{margin-top:16px}
.stock-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}

.stock-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.stock-chiffre{font-size:34px;font-weight:700;letter-spacing:-.025em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.stock-chiffre span{font-size:15px;font-weight:600;color:var(--text-3);margin-inline-start:7px;
  letter-spacing:0}
.stock-part{text-align:end;line-height:1.15}
.stock-part b{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stock-part span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.stock.tiede .stock-part b{color:var(--warn)}
.stock.chaud .stock-chiffre,.stock.chaud .stock-part b{color:var(--bad)}

/* La jauge empile les origines sur la largeur du quota : l'espace libre
   reste visible à droite, et c'est lui qu'on vend. */
.stock-jauge{display:flex;height:20px;border-radius:999px;background:var(--surface-3);
  overflow:hidden;margin-top:14px;box-shadow:inset 0 1px 3px rgba(22,36,58,.1)}
.stock-jauge i{display:block;height:100%;transition:width .4s}
.stock-jauge i+i{box-shadow:inset 1px 0 0 rgba(255,255,255,.6)}
.stock-jauge i:first-child{border-start-start-radius:999px;border-end-start-radius:999px}

.t-a{background:#2B3C5B} .t-b{background:#3E6E9E} .t-c{background:#2E9367}
.t-d{background:#DD7A1C} .t-e{background:#7F8799} .t-f{background:#C4CDDB}

.stock-reste{margin-top:11px;font-size:13px;color:var(--text-2)}
.stock-reste b{color:var(--text);font-variant-numeric:tabular-nums}

.stock-legende{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0}
.stock-legende li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 10px}
.stock-legende b{width:9px;height:9px;border-radius:3px;flex:none}
.stock-legende em{font-style:normal;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}

.stock-note{margin:14px 0 0;font-size:12.5px;color:var(--text-3);max-width:68ch}

/* L'offre. Orange en touche, comme partout ailleurs : elle attire l'oeil
   sans crier, et elle reste lisible quand la jauge passe au rouge. */
.stock-offre{background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-l);padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px}
.stock-offre-tete{display:flex;gap:11px;align-items:flex-start}
.stock-offre-tete b{display:block;font-size:14px;color:var(--text)}
.stock-offre-tete p{margin:3px 0 0;font-size:12.5px;color:var(--text-2)}
.stock-pastille{width:30px;height:30px;flex:none;border-radius:9px;background:var(--accent);
  display:grid;place-items:center}
.stock-pastille svg{width:16px;height:16px;stroke:#FFFFFF;fill:none}
.stock-atouts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.stock-atouts li{position:relative;padding-inline-start:20px;font-size:12.5px;color:var(--text-2)}
.stock-atouts li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:10px;
  height:6px;border-inline-start:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg)}
.stock-offre .btn{justify-content:center;width:100%;height:38px}

@media (max-width:900px){
  .stock-grille{grid-template-columns:minmax(0,1fr)}
}

/* Le choix du nombre de tranches, dans la fenêtre de demande. */
.tranches{display:flex;align-items:center;justify-content:center;gap:18px}
.tranches .btn{width:38px;height:38px;padding:0;justify-content:center;font-size:19px}
.tranches-nb{text-align:center;min-width:92px}
.tranches-nb b{display:block;font-size:30px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums}
.tranches-nb span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.tranches-total{text-align:center;margin:14px 0 0;font-size:13.5px;color:var(--text-2)}
.tranches-total b{color:var(--text);font-size:15px}

/* ============ KANBAN ============ */
/* Le tableau tient dans la fenetre : chaque colonne defile dans son propre
   cadre, l'en-tete reste en vue. Sans ca, une agence a 90 demandes se
   retrouvait avec une page de 14 000 px ou toutes les colonnes s'etiraient a
   la hauteur de la plus longue. La hauteur exacte est posee par la vue. */
.board{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;min-height:240px;align-items:stretch}
/* `min-width` explicite, sinon il vaut `auto` : une colonne ne peut alors
   pas devenir plus etroite que son contenu, et celles qui portent les titres
   ou les prix les plus longs s'elargissent toutes seules. Mesure faite sur le
   pipeline d'Eternity : 293 | 309 | 245 | 245 px au lieu de quatre fois 272. */
.col{flex:0 0 272px;width:272px;min-width:272px;max-width:272px;
  display:flex;flex-direction:column;min-height:0}
/* Et ce qui vit dedans doit accepter de se serrer, faute de quoi la
   contrainte du dessus se paierait en debordement. */
.col-body,.pcard{min-width:0}
.pcard .price,.pcard .puces,.pcard .pied{min-width:0;max-width:100%}
.col-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px 16px 0 0;
  background:var(--hue-soft);border:1px solid var(--hue-line);border-bottom:0;position:relative}
.col-head .bullet{width:26px;height:26px;border-radius:50%;background:var(--hue);color:#fff;flex:none;
  display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--mono)}
.col-head .lab{flex:1;min-width:0}
.col-head b{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--hue-ink);display:block;font-weight:700}
.col-head .cnt{font-size:11.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.col-body{display:flex;flex-direction:column;gap:10px;min-height:150px;background:var(--hue-bg);
  border:1px solid var(--hue-line);border-top:0;border-radius:0 0 16px 16px;padding:11px;transition:background .15s;
  /* Pas d'`overscroll-behavior:contain` : la molette doit passer la main a
     la page des qu'une colonne est au bout. Sinon elle reste prisonniere de
     la colonne survolee et l'on ne peut plus remonter l'ecran. */
  /* `scrollbar-gutter:stable` reserve la place de l'ascenseur dans TOUTES les
     colonnes, qu'elles defilent ou non. Sans lui, une colonne pleine rend ses
     cartes dix pixels plus etroites que sa voisine, et le tableau parait mal
     aligne — ce sont ces dix pixels-la que l'oeil accroche. */
  flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-gutter:stable}
.board .pcard[hidden]{display:none!important}
.col-head .bullet .f{opacity:.8;font-weight:400}
.col-body.over{background:var(--hue-soft);box-shadow:inset 0 0 0 2px var(--hue)}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;
  cursor:grab;transition:box-shadow .14s,border-color .14s,transform .14s;text-align:left;width:100%;display:block;
  font:inherit;color:inherit;position:relative;box-shadow:var(--shadow-1)}
.pcard::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--hue)}
.pcard:hover{box-shadow:var(--shadow-2);border-color:var(--hue-line);transform:translateY(-2px)}
.pcard:active{cursor:grabbing}
.pcard.dragging{opacity:.45;transform:rotate(-1deg)}
.pcard .ttl{font-size:16.5px;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:6px;letter-spacing:-.01em}
.pcard .sub2{font-size:12px;font-weight:700;color:var(--hue-ink);margin-bottom:9px}
.pcard .infos{font-size:12px;color:var(--text-3);line-height:1.75}
.pcard .infos span{color:var(--text-2);font-weight:600}
.pcard .infos span.rr{color:var(--accent-hi);font-family:var(--mono)}
.price{font-size:19px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pcard .price{display:block;margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid var(--line)}
/* un montant seul ne dit pas ce qu'il est : budget, prix, commission ? */
.pcard .price .etiq{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin-inline-end:6px;vertical-align:2px}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.dropzone{border:1px dashed var(--hue-line);border-radius:12px;padding:20px;text-align:center;color:var(--text-3);font-size:12px}
.tagrow{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--text-2);background:var(--surface-2)}
.t-achat{color:var(--info);border-color:#B9CFE2;background:var(--info-soft)}
.t-vente{color:#5B5A96;border-color:#C6C5E0;background:#EEEEF7}
.t-loc{color:var(--good);border-color:#B7DDC9;background:var(--good-soft)}
.t-sais{color:var(--warn);border-color:#E5CE9B;background:var(--warn-soft)}
.t-excl{color:var(--accent-hi);border-color:var(--accent-line);background:var(--accent-soft)}
.t-neutral{color:var(--text-3)}
.who-mini{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-3);min-width:0}
.who-mini .dot{width:20px;height:20px;border-radius:50%;background:var(--surface-3);color:var(--text-2);display:grid;place-items:center;
  font-size:9px;font-weight:700;flex:none}
.ref{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.badge-n{position:absolute;top:12px;right:12px;background:var(--bad);color:#fff;border:0;
  border-radius:999px;min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:700;font-family:var(--mono);
  display:grid;place-items:center}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--nav);color:#fff;
  padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:var(--shadow-2);z-index:70;
  display:flex;align-items:center;gap:9px;animation:toastin .18s ease-out}
.toast i{width:8px;height:8px;border-radius:50%;background:var(--t-color,var(--accent));display:block}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============ TABLEAUX ============ */
.tablewrap{overflow-x:auto;border-radius:var(--r-l)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
thead th{position:sticky;top:0;z-index:2;background:var(--surface-3);text-align:left;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td .strong{font-weight:700;color:var(--text)}
td .sub{display:block;color:var(--text-3);font-size:11px;font-family:var(--mono)}
.acts{display:flex;gap:5px;flex-wrap:wrap}
.chip{height:var(--h-ctl-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);border-radius:5px;padding:0 10px;
  font-size:11.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.14s;white-space:nowrap}
.chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.chip svg{width:11px;height:11px;fill:currentColor}
.chip.go{background:var(--primary);border-color:var(--primary);color:#FFFFFF;font-weight:700}
.chip.go:hover{background:var(--primary-hi);border-color:var(--primary-hi);color:#FFFFFF}
.chip.ok:hover{border-color:var(--good);color:var(--good);background:var(--good-soft)}
.chip.warn:hover{border-color:var(--accent);color:var(--accent-hi);background:var(--accent-soft)}
.chip.danger:hover{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.dot-state{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12px}
.dot-state i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}

/* ============ RECHERCHE ============ */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:0 11px;height:var(--h-ctl);font-size:13px;width:100%;transition:.14s;color:var(--text)}
.field textarea{padding:9px 11px;height:auto;resize:vertical;min-height:60px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field .hint{font-size:11.5px;color:var(--text-3)}
.result-line{display:flex;align-items:baseline;gap:9px;margin:16px 0 0}
.result-line b{font-size:26px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.result-line span{color:var(--text-3);font-size:13px}

/* ============ ONGLETS ============ */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:0;border-bottom:1px solid var(--line);padding:0 4px}
.tab{height:var(--h-ctl);border:1px solid transparent;border-bottom:0;background:transparent;color:var(--text-3);font-size:12.5px;
  font-weight:600;padding:0 15px;border-radius:var(--r-s) var(--r-s) 0 0;cursor:pointer;white-space:nowrap;position:relative;top:1px;
  transition:.14s;display:inline-flex;align-items:center}
.tab:hover{color:var(--text);background:var(--surface-2)}
.tab[aria-selected="true"]{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:inset 0 3px 0 var(--accent);font-weight:700}
.tab.add{color:var(--text-2);border:1px dashed var(--line-2);border-bottom:0}
.tab.add:hover{color:var(--accent-hi);border-color:var(--accent-line)}

/* ============ FORMULAIRES ============ */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.formgrid .span2{grid-column:span 2}
@media (max-width:700px){.formgrid .span2{grid-column:span 1}}
.switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-s);padding:0 12px;height:var(--h-ctl)}
.switchrow span{font-size:12.5px;font-weight:600;color:var(--text-2)}
.sw{width:42px;height:22px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);cursor:pointer;position:relative;transition:.16s;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-3);transition:.16s}
.sw[aria-checked="true"]{background:var(--primary-soft);border-color:var(--primary)}
.sw[aria-checked="true"]::after{left:22px;background:var(--primary)}
.multi{display:flex;flex-wrap:wrap;gap:6px}
.opt{height:var(--h-ctl-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);border-radius:5px;padding:0 11px;
  font-size:12px;font-weight:600;cursor:pointer;transition:.14s;display:inline-flex;align-items:center}
.opt:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.opt[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#FFFFFF;font-weight:700}
.sectitle{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.sectitle h3{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.sectitle .rule{flex:1;height:1px;background:var(--line)}
.locked input,.locked textarea{background:var(--surface-3);color:var(--text-3);cursor:not-allowed}
.avatar-up{display:flex;align-items:center;gap:16px}
.avatar-up .circle{width:76px;height:76px;border-radius:50%;background:var(--surface-2);border:1px dashed var(--line-2);
  display:grid;place-items:center;color:var(--text-3);flex:none;overflow:hidden}
.avatar-up .circle svg{width:38px;height:38px;fill:currentColor}

/* ============ PHOTOS / CARTES BIENS ============ */
/* La vignette ouvre la visionneuse au clic : elle ne se selectionne donc pas
   davantage que la grande photo. */
.photo{display:block;position:relative;border-radius:var(--r-s);overflow:hidden;background:var(--surface-3);aspect-ratio:4/3;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.photo::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 20% 5%, rgba(255,255,255,.28), transparent 60%),
  linear-gradient(165deg, var(--p1), var(--p2));}
.photo .glyph{position:absolute;inset:0;display:grid;place-items:center;z-index:1;opacity:.3}
.photo .glyph svg{width:42%;height:42%;fill:none;stroke:#fff;stroke-width:1;stroke-linejoin:round}
.photo .ov{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;
  gap:8px;padding:11px;background:linear-gradient(to top,rgba(16,26,42,.85),rgba(16,26,42,0))}
.photo .ov .pz{color:#fff;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.photo .ov .ct{color:#E4EAF2;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;
  background:transparent;border:0;cursor:pointer;padding:0}
.photo .ov .ct svg{width:11px;height:11px;fill:currentColor}
/* Pose sur une photo, un marqueur clair disparait des qu'elle l'est aussi.
   Fond plein et ombre portee : lisible sur un ciel comme sur un salon sombre. */
.photo .flag{position:absolute;z-index:2;top:10px;left:10px;background:var(--accent);
  border:0;color:#FFFFFF;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:5px;
  box-shadow:0 2px 8px rgba(22,36,58,.35)}
.grid-biens{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;transition:border-color .14s,transform .14s,box-shadow .14s}
.bcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.bcard .body{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard h4{font-size:16px;font-weight:700}
.bcard .meta{font-size:12px;color:var(--text-3)}
.thumb{width:36px;height:var(--h-ctl-sm);border-radius:5px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;
  display:grid;place-items:center;color:var(--text-3);transition:.14s}
.thumb svg{width:15px;height:15px;fill:currentColor}
.thumb:hover{border-color:var(--primary);color:var(--primary)}
.thumb[aria-pressed="true"].up{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.thumb[aria-pressed="true"].down{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.linkrow{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:11px;margin-top:auto}

/* ============ BIENS PROPOSÉS ============ */
.plist{display:flex;flex-direction:column;gap:10px}
.pitem{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.pitem>.head{display:flex;align-items:center;gap:13px;padding:11px 13px;cursor:pointer;background:transparent;width:100%;
  border:0;text-align:left;font:inherit;color:inherit}
.pitem>.head:hover{background:var(--surface-2)}
.pitem .mini{width:64px;height:48px;border-radius:5px;flex:none;position:relative;overflow:hidden}
.pitem .grow{flex:1;min-width:0}
.pitem .grow b{font-size:14px;font-weight:700;display:block;color:var(--text)}
.pitem .grow span{font-size:12px;color:var(--text-3)}
.pitem .caret{color:var(--text-3);transition:transform .2s}
.pitem[data-open="true"]{border-color:var(--accent-line)}
.pitem[data-open="true"]>.head{background:var(--accent-soft)}
.pitem[data-open="true"] .caret{transform:rotate(180deg)}
.pitem .detail{display:none;padding:16px;border-top:1px solid var(--line);background:var(--surface-2)}
.pitem[data-open="true"] .detail{display:block}
.actbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.static-chip{height:var(--h-ctl-sm);background:var(--surface);color:var(--text-3);border:1px solid var(--line);border-radius:5px;
  padding:0 11px;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:default;white-space:nowrap}
.static-chip.ok{color:var(--good);border-color:#B7DDC9;background:var(--good-soft)}
.static-chip.wait{color:var(--text-3)}
.static-chip.price{color:#FFFFFF;background:var(--primary);border-color:var(--primary);font-size:12.5px;font-weight:700}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kv .cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 13px;text-align:left}
.kv .cell s{display:block;text-decoration:none;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:4px}
.kv .cell b{font-weight:500;font-size:13px;color:var(--text)}

/* ============ CHAT ============ */
.chatbox{display:flex;flex-direction:column;height:430px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2)}
.chatlog{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.chatlog .qui{font-size:10.5px;font-weight:700;color:var(--text-3);margin:6px 2px -2px;letter-spacing:.02em}
.chatlog .qui.me{align-self:flex-end}
.chatlog .qui.them{align-self:flex-start}
.msg{max-width:76%;padding:9px 13px;border-radius:11px;font-size:13px;line-height:1.5}
.msg .t{display:block;font-size:10px;color:var(--text-3);margin-top:5px;font-family:var(--mono)}
.msg.them{background:var(--surface);border:1px solid var(--line);color:var(--text);border-bottom-left-radius:3px;align-self:flex-start}
.msg.me{background:var(--primary);color:#FFFFFF;border-bottom-right-radius:3px;align-self:flex-end}
.msg.me .t{color:rgba(255,255,255,.7)}
.chatform{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line);background:var(--surface)}
.chatform input{flex:1;height:var(--h-ctl);border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-s);padding:0 13px}
.chatform input:focus{outline:0;border-color:var(--accent)}
.people{display:flex;flex-direction:column;gap:5px}
.person{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-s);border:1px solid transparent;background:transparent;
  cursor:pointer;width:100%;text-align:left;font:inherit;color:inherit}
.person:hover{background:var(--surface-2)}
.person[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent-line)}
.person .ava{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#FFFFFF;
  display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none}
.person b{font-size:13px;display:block;color:var(--text)}
.person span{font-size:11px;color:var(--text-3)}

/* ============ DIVERS ============ */
.empty{text-align:center;padding:60px 20px;color:var(--text-3)}
.empty .ico{width:60px;height:60px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-line);
  display:grid;place-items:center;margin:0 auto 16px;color:var(--accent-hi)}
.empty .ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5}
.empty h3{color:var(--text);font-size:16px;margin-bottom:7px}
.empty p{margin:0 auto 20px;max-width:48ch;font-size:13px}
.overlay{position:fixed;inset:0;background:rgba(22,36,58,.42);z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
.overlay[data-open="true"]{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-2);
  width:min(580px,100%);max-height:88vh;overflow:auto}
.modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.modal header h3{font-size:15.5px;font-weight:700}
.modal .body{padding:18px;display:flex;flex-direction:column;gap:14px}
.modal .body p{color:var(--text-2)}
.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line);background:var(--surface-2)}
.x{border:0;background:transparent;color:var(--text-3);font-size:20px;cursor:pointer;line-height:1;padding:4px 8px;border-radius:5px}
.x:hover{background:var(--surface-3);color:var(--text)}
.pagefoot{display:flex;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap}
.note{font-size:11.5px;color:var(--text-3);text-align:center;margin:28px 20px 0}
.sharegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sharegrid button{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-s);padding:14px 6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--text-2);transition:.14s}
.sharegrid button:hover{border-color:var(--accent-line);color:var(--accent-hi);background:var(--accent-soft)}
.sharegrid svg{width:19px;height:19px;fill:currentColor}
.copyrow{display:flex;gap:8px}
.copyrow input{flex:1;height:var(--h-ctl);border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r-s);
  padding:0 11px;font-family:var(--mono);font-size:12px;color:var(--text-2)}
.two-col{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start}
@media (max-width:1080px){.two-col{grid-template-columns:1fr}}
.hidden{display:none!important}
.stack{display:flex;flex-direction:column;gap:14px}
.rowgap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.helpbox{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-m);padding:16px;box-shadow:var(--shadow-1)}
.helpbox h3{font-size:14px;margin-bottom:10px;color:var(--text)}
.helpbox p{margin:0 0 5px;font-size:12.5px;color:var(--text-2)}
.helpbox .green{color:var(--good);margin-top:10px}


/* ============ TABLETTE ET MOBILE ============ */
@media (max-width:1100px){
  .nav{gap:2px}
  .nav .pill{padding:0 11px;font-size:12px}
}
@media (max-width:900px){
  :root{--h-ctl:38px;--h-ctl-sm:32px}
  .appbar{flex-wrap:nowrap;gap:10px;padding:9px 12px}
  .brand{padding-right:0;border-right:0;gap:9px}
  .brand .mark{width:36px;height:36px}
  .brand .mark svg{width:23px;height:23px}
  .brand .wordmark b{font-size:13.5px}
  .brand .wordmark span{font-size:9px;letter-spacing:.22em}
  .burger{display:grid;order:3}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--nav);border-top:1px solid #16243A;
    flex-direction:column;align-items:stretch;gap:3px;padding:10px 12px 14px;display:none;
    box-shadow:0 16px 30px rgba(16,26,42,.35);max-height:76vh;overflow:auto}
  .nav[data-open="true"]{display:flex}
  .nav .pill{height:44px;justify-content:flex-start;padding:0 14px;font-size:14px;border-radius:var(--r-s)}
  .nav .pill[aria-current="page"]::after{left:auto;right:14px;bottom:auto;top:50%;width:7px;height:7px;
    border-radius:50%;transform:translateY(-50%)}
  .who{order:2;margin-left:auto;padding:0;border:0;background:transparent;height:auto}
  .who .ava{width:34px;height:34px;font-size:11.5px}
  .who>span:not(.ava){display:none}
  .shell{padding:14px 12px 64px}
  .ctxbar{padding:12px 12px 0;gap:6px}
  .subbar{align-items:flex-start;gap:12px;margin-bottom:14px}
  .subbar h1{font-size:19px}
  .subbar p{font-size:12.5px}
  .tools{width:100%}
  .tools .seg,.tools .btn{flex:1;justify-content:center}
  .kpis{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
  .kpi{padding:11px 12px;gap:10px}
  .kpi .ic{width:34px;height:34px;border-radius:9px}
  .kpi b{font-size:18px}
  .kpi em{display:none}
  .board{gap:10px;margin:0 -12px;padding:2px 12px 16px;scroll-snap-type:x mandatory}
  .col{flex:0 0 84vw;scroll-snap-align:center}
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:1px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .filters{grid-template-columns:repeat(2,1fr)}
  .formgrid{grid-template-columns:1fr}
  .formgrid .span2{grid-column:span 1}
  .two-col{grid-template-columns:1fr}
  .grid-biens{grid-template-columns:1fr}
  table{min-width:720px}
  .tablewrap{-webkit-overflow-scrolling:touch}
  .panel .tablewrap::after{content:""}
  .chatbox{height:60vh}
  .sharegrid{grid-template-columns:repeat(2,1fr)}
  .modal{max-height:92vh}
  .modal footer .btn{flex:1;justify-content:center}
  .pagefoot .btn{flex:1;justify-content:center}
  .actbar .btn,.actbar .static-chip{flex:1 1 auto;justify-content:center}
}
@media (max-width:560px){
  .filters{grid-template-columns:1fr}
  .col{flex:0 0 88vw}
  .kpis{grid-template-columns:1fr}
  .kpi em{display:block}
  .subbar h1{font-size:18px}
  .pcard .ttl{font-size:16px}
}

/* ============ CONNEXION ============ */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--ground)}
.login .box{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-2);padding:28px}
.login .mark{width:64px;height:64px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;margin:0 auto 16px}
.login .mark svg{width:38px;height:38px;fill:none;stroke-linejoin:round;stroke-linecap:round}
/* Le logo d'une agence remplit la tuile ; un logo sur fond sombre garde son fond. */
.login .mark img{width:100%;height:100%;object-fit:cover;border-radius:13px}
/* Sur la connexion, le logo d'une agence a la place de respirer : plus grand,
   sans la tuile grise — il porte son propre fond. */
.login .mark.logo{width:128px;height:128px;background:none;border:0;border-radius:18px;overflow:hidden}
.login h1{font-size:20px;text-align:center;margin-bottom:4px}
.login p.sub{text-align:center;color:var(--text-3);font-size:12.5px;margin:0 0 22px}
.login form{display:flex;flex-direction:column;gap:14px}
.login .btn-primary{justify-content:center;height:42px;font-size:14px}
.login .err{background:var(--bad-soft);border:1px solid var(--bad);color:var(--bad);border-radius:var(--r-s);
  padding:10px 12px;font-size:12.5px;font-weight:600}
.login .foot{margin-top:18px;text-align:center;font-size:11.5px;color:var(--text-3)}

/* ============ ÉTATS ============ */
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 20px;color:var(--text-3);font-size:13px}
.spin{width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.errbox{background:var(--bad-soft);border:1px solid var(--bad);color:var(--bad);border-radius:var(--r-m);
  padding:14px 16px;font-size:13px;font-weight:600}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gallery-grid figure{margin:0;position:relative}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-s);display:block;border:1px solid var(--line)}
.gallery-grid .del{position:absolute;top:6px;right:6px}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.photo.has-img::after{display:none}
.uploadzone{border:1px dashed var(--line-2);border-radius:var(--r-m);padding:18px;text-align:center;color:var(--text-3);font-size:12.5px}
.uploadzone input{display:none}
.autolist{position:relative}
.autolist .box{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-s);box-shadow:var(--shadow-2);max-height:260px;overflow:auto;margin-top:4px}
.autolist .box button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 12px;
  cursor:pointer;font-size:13px;border-bottom:1px solid var(--line)}
.autolist .box button:hover{background:var(--accent-soft);color:var(--accent-hi)}
.autolist .box button:last-child{border-bottom:0}
.autolist .box b{display:block;font-weight:600}
.autolist .box span{font-size:11.5px;color:var(--text-3)}

/* ============ ÉVOLUTIONS ============ */

/* aperçu chiffré d'un bien proposé */
@media (max-width:900px){
  .pitem>.head{flex-wrap:wrap}
  .pitem .fiche{width:100%;flex-wrap:wrap}
  .pitem .fiche .case{flex:1 1 60px;min-width:0}
}

/* barre de sélection multiple */
.selbar{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--accent-line);
  border-left:3px solid var(--accent);border-radius:var(--r-m);padding:10px 14px;margin-bottom:12px;
  box-shadow:var(--shadow-1);flex-wrap:wrap}
.selbar b{font-size:13px}
input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.opt.tri[data-etat="2"]{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);font-weight:700}

/* documents à signer */
/* la ligne porte le titre, le bien, l'etat, le paraphe et trois actions :
   sur une fenetre etroite elle se replie au lieu de pousser un ascenseur */
.docrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--surface-2);flex-wrap:wrap}
.docrow .ic{width:30px;height:30px;border-radius:var(--r-s);background:var(--surface-3);color:var(--text-3);
  display:grid;place-items:center;flex:none}
.docrow .ic svg{width:14px;height:14px;fill:currentColor}
.docrow .grow{flex:1;min-width:140px}
.docrow .grow b{display:block;font-size:13px}
.docrow .grow .dot-state{font-size:11.5px;font-weight:600}

/* logos de marque dans la fenêtre de partage */
.sharegrid a,.sharegrid button{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-m);
  padding:14px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;font-weight:700;color:var(--text-2);transition:.14s;text-decoration:none}
.sharegrid a:hover,.sharegrid button:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--text)}
.sharegrid svg{width:26px;height:26px}

/* page de signature */
.signature{max-width:780px;margin:0 auto;padding:28px 18px 70px}
.signature .apercu{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface-2);height:60vh}
.signature .apercu iframe{width:100%;height:100%;border:0;display:block}
.signature .accord{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);padding:14px}
.signature .accord input{margin-top:2px}
.signature .fait{background:var(--good-soft);border:1px solid var(--good);color:var(--good);border-radius:var(--r-m);
  padding:16px;font-weight:600}

/* ============ BANDEAU DE LA FICHE BIEN ============ */
.bandeau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow-1)}
.bandeau .nature{font-size:15px;font-weight:700;letter-spacing:.02em;padding:8px 16px;border-radius:var(--r-s);
  border:1px solid var(--line-2);cursor:default}
.bandeau .nature.t-vente{background:#EEEEF7;border-color:#C6C5E0;color:#5B5A96}
.bandeau .nature.t-loc{background:var(--good-soft);border-color:#B7DDC9;color:var(--good)}
.bandeau .nature.t-sais{background:var(--warn-soft);border-color:#E5CE9B;color:var(--warn)}
.bandeau .nature.t-excl{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-hi)}
.bandeau .nature.t-achat{background:var(--info-soft);border-color:#B9CFE2;color:var(--info)}
.bandeau .nature.t-neutral{background:var(--surface-2);color:var(--text-3)}
.bandeau .sep{flex:1;min-width:0}
.bandeau .chiffre{text-align:center;padding:4px 12px;border-left:1px solid var(--line)}
.bandeau .chiffre u{display:block;text-decoration:none;font-size:16px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bandeau .chiffre u .unite{font-size:11px;color:var(--text-3);font-weight:600}
.bandeau .chiffre s{display:block;text-decoration:none;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;margin-top:2px}
@media (max-width:900px){
  .bandeau{gap:8px;padding:12px}
  .bandeau .nature{font-size:13px;padding:6px 12px}
  .bandeau .sep{display:none}
  .bandeau .chiffre{flex:1 1 68px;border-left:0;border-top:1px solid var(--line);padding:8px 4px}
}

/* ============ PLAN ============ */
.plan{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;height:320px;background:var(--surface-2)}
.plan iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:900px){.plan{height:240px}}


/* ============ CORRESPONDANCES (onglet d'un projet) ============ */
.seuil{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-3);
  font-weight:600;letter-spacing:.02em}
.seuil select{height:var(--h-ctl-sm);font-size:12px}

.matchlist{display:flex;flex-direction:column;gap:10px}
.match{display:grid;grid-template-columns:112px minmax(0,1fr) 208px;gap:16px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--m-teinte);
  border-radius:var(--r-m);padding:13px 15px}
.match.fort  {--m-teinte:var(--good)}
.match.moyen {--m-teinte:var(--accent)}
.match.faible{--m-teinte:var(--line-2)}

.match .visuel{width:112px;height:80px}
.match .visuel .photo{width:112px;height:80px;border-radius:var(--r-s)}

/* Le score est posé dans le flux, en tête du titre : superposé à la photo il
   devenait illisible dès que la photo était claire, et il débordait sur la
   colonne voisine. */
.match .pct{display:inline-flex;align-items:baseline;background:var(--m-teinte);color:#fff;
  font-size:13.5px;font-weight:700;border-radius:var(--r-s);padding:2px 9px;line-height:1.35;
  font-variant-numeric:tabular-nums;flex:none}
.match .pct i{font-style:normal;font-size:9.5px;margin-inline-start:2px;opacity:.85}
.match.faible .pct{background:var(--surface-3);color:var(--text-2)}

.match .corps{min-width:0}
.match .ligne1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.match .ligne1 b{font-size:15px;font-weight:700}
.match .ligne1 .ref{font-size:11px;color:var(--text-3);font-family:var(--mono)}
.match .ligne2{font-size:12.5px;color:var(--text-2);margin-top:3px}

/* Six critères, six colonnes sur un écran large : la largeur maximale est
   calée pour qu'« Options » ne parte pas seul sur une deuxième rangée. */
.match .jauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:7px 14px;margin-top:11px;max-width:720px}
.match .jauge{display:block}
.match .jauge s{display:flex;justify-content:space-between;gap:6px;text-decoration:none;
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);
  font-weight:700;margin-bottom:4px;white-space:nowrap}
.match .jauge s em{font-style:normal;color:var(--text-2);font-variant-numeric:tabular-nums;
  letter-spacing:0}
.match .jauge i{display:block;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.match .jauge u{display:block;height:100%;border-radius:3px;background:var(--m-teinte);
  text-decoration:none}
.match .jauge.vide u{background:var(--line-2)}

.match .manques{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px}
.match .manques span{font-size:10.5px;color:var(--warn);background:var(--warn-soft);
  border:1px solid var(--accent-line);border-radius:4px;padding:1px 8px}

.match .actions{display:flex;flex-direction:column;align-items:stretch;gap:5px}
.match .actions .prix{font-size:16px;font-weight:700;text-align:end;margin-bottom:4px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.match .actions .btn{justify-content:flex-start}
.match .actions .btn svg{width:14px;height:14px;flex:none}

@media (max-width:1040px){
  .match{grid-template-columns:96px minmax(0,1fr)}
  .match .visuel,.match .visuel .photo{width:96px;height:70px}
  .match .visuel{align-self:start}
  .match .actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center}
  .match .actions .prix{width:100%;text-align:start;margin:0}
}

/* ============ LANGUES ============ */
.flags{display:flex;gap:3px;flex:none}
/* 36x26, moins 1px de bordure et 2px de marge, laisse exactement 30x20 :
   le rapport d'un drapeau. A un pixel pres, le dessin flotterait au milieu
   d'une bande blanche au lieu de remplir son cadre. */
.flag{width:36px;height:26px;padding:2px;border-radius:7px;border:1px solid transparent;
  background:transparent;cursor:pointer;display:grid;place-items:center;
  transition:border-color .14s,background .14s,transform .14s}
/* un liseré autour du dessin : le drapeau israélien est presque blanc et se
   perdrait sinon sur le fond clair de la page */
.flag svg{width:100%;height:100%;display:block;border-radius:2px;
  box-shadow:0 0 0 1px rgba(22,36,58,.22)}
.flag:hover{transform:translateY(-1px)}
/* les couleurs restent franches : c'est le cadre qui désigne la langue active,
   pas une décoloration des deux autres */
.flag[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.appbar .flag[aria-pressed="true"]{border-color:var(--accent);background:rgba(221,122,28,.22)}
.flag:hover{border-color:var(--line-2)}
.flag[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.appbar .flag[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-3)}

.langtabs{display:flex;gap:4px;margin:0 0 8px}
.langtab{height:var(--h-ctl-sm);padding:0 12px;border-radius:var(--r-s) var(--r-s) 0 0;cursor:pointer;
  border:1px solid var(--line);border-bottom-color:transparent;background:var(--surface-2);
  color:var(--text-3);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.langtab i{font-style:normal;display:inline-flex;width:18px;height:13px}
.langtab i svg{width:100%;height:100%;border-radius:2px;display:block}
.langtab[aria-pressed="true"]{background:var(--surface);color:var(--text);
  box-shadow:inset 0 2px 0 var(--accent)}

/* ============ NOTIFICATIONS ============ */
.cloche{position:relative;width:var(--h-ctl);height:var(--h-ctl);border-radius:var(--r-s);
  border:1px solid var(--line-2);background:transparent;color:#fff;cursor:pointer;
  display:grid;place-items:center;flex:none}
.cloche svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.cloche .bulle{position:absolute;top:-5px;inset-inline-end:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;line-height:1}
/* `display:grid` l'emporterait sur l'attribut hidden : la pastille resterait
   affichée avec un 0 quand il n'y a rien à lire. */
.cloche .bulle[hidden]{display:none}
.notifs{display:flex;flex-direction:column;gap:6px}
.notif{display:block;width:100%;text-align:start;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:9px 11px;cursor:pointer}
.notif[data-lu="false"]{background:var(--accent-soft);border-color:var(--accent-line)}
.notif b{display:block;font-size:13px}
.notif span{display:block;font-size:12px;color:var(--text-2);margin-top:1px}
.notif time{display:block;font-size:10.5px;color:var(--text-3);margin-top:3px}

/* ============ COMPTES DES AGENCES PARTENAIRES ============ */
.comptes{display:flex;flex-direction:column;gap:6px}
.compte{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:8px 11px}
.compte .ava{width:28px;height:28px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none}
.compte .grow{flex:1;min-width:0}
.compte b{display:block;font-size:13px}
.compte small{display:block;font-size:11.5px;color:var(--text-3)}

/* ============ ÉCRITURE DE DROITE À GAUCHE (hébreu) ============ */
html[dir="rtl"] .subbar,html[dir="rtl"] .tools,html[dir="rtl"] .nav{direction:rtl}
html[dir="rtl"] .pill[aria-current="page"]::after{left:12px;right:12px}
html[dir="rtl"] table th,html[dir="rtl"] table td{text-align:right}
html[dir="rtl"] .num{text-align:left}


/* ============ VISIONNEUSE DE PHOTOS (fiche d'un bien et page publique) ============ */
/* On y clique pour regarder, jamais pour selectionner : sans cela, le second
   clic surligne l'image en bleu et la photo disparait sous la teinte. */
.visio{position:fixed;inset:0;z-index:90;background:rgba(12,20,34,.94);display:none;
  align-items:center;justify-content:center;padding:16px;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.visio[data-open="true"]{display:flex}
.visio img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--r-m);
  -webkit-user-drag:none}
.visio .ferme,.visio .nav-photo{position:absolute;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;cursor:pointer;
  display:grid;place-items:center}
.visio .ferme{top:16px;inset-inline-end:16px;width:40px;height:40px;font-size:22px;line-height:1}
.visio .nav-photo{top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:24px;line-height:1}
.visio .nav-photo[hidden]{display:none}
.visio .prev{inset-inline-start:14px}
.visio .next{inset-inline-end:14px}
.visio .legende{position:absolute;bottom:64px;left:0;right:0;text-align:center;
  color:#E7ECF3;font-size:12.5px;padding:0 60px}
.visio .outils{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;
  gap:8px;flex-wrap:wrap;padding:0 16px}
.visio .outils:empty{display:none}
.visio .outils .btn{background:rgba(255,255,255,.94);border-color:transparent}
@media (max-width:620px){
  .visio .legende{bottom:96px;padding:0 16px}
  .visio .nav-photo{width:38px;height:38px}
}

/* la photo devient cliquable : un bouton, pas une image nue */
.photo-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.photo-btn[disabled]{cursor:default}
.photo-btn .compte{position:absolute;inset-inline-end:10px;top:10px;background:rgba(22,36,58,.78);
  color:#fff;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;pointer-events:none}
.photo-btn .compte svg{width:12px;height:12px;fill:currentColor}
.gallery-grid figure .principale{position:absolute;bottom:6px;inset-inline-start:6px;
  background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 7px;border-radius:4px;pointer-events:none}

/* Onglet « libellé + valeur » : la valeur est séparée par une marge, pas par
   un espace — en écriture de droite à gauche l'espace disparaît. */
.tab .tab-val{margin-inline-start:6px;font-weight:500;opacity:.75}


/* ============ CASE DE MONTANT ============ */
/* Le symbole de la devise est posé dans la case et y reste pendant la frappe.
   Dans l'intitulé il se lisait mal, en texte d'exemple il disparaissait. */
.montant{position:relative;display:block}
/* Style complet, sans dépendre de `.field` : le composant sert aussi dans les
   fourchettes, hors de tout formulaire classique. */
.montant input{width:100%;height:var(--h-ctl);padding-block:0;padding-inline:11px 32px;font-size:13px;
  color:var(--text);background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-s);transition:.14s}
.montant input::placeholder{color:var(--text-3)}
.montant input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* le glyphe du shekel est fin : il lui faut un peu de corps pour se lire */
.montant i{position:absolute;inset-inline-end:11px;top:50%;transform:translateY(-50%);
  font-style:normal;font-weight:700;font-size:15px;line-height:1;color:var(--text-2);
  pointer-events:none}
.montant input:focus + i{color:var(--accent-hi)}
/* Monter de 1 en 1 sur un budget à sept chiffres n'a aucun intérêt, et les
   flèches se cogneraient au symbole. */
.montant input::-webkit-outer-spin-button,
.montant input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.montant input[type=number]{-moz-appearance:textfield;appearance:textfield}


/* ============ CARACTÉRISTIQUE ENCADRÉE (page client et fiche d'une demande) ============ */
.fait{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:6px 10px}
.fait i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--ic-bg);color:var(--ic)}
.fait i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.fait u{display:block;text-decoration:none;font-size:13px;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fait s{display:block;text-decoration:none;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;white-space:nowrap}

/* une teinte par famille d'information */
.fait.surface  {--ic:#3E6E9E;--ic-bg:#E8F0F7}
.fait.pieces   {--ic:#6B5A9E;--ic-bg:#EDEAF6}
.fait.etage    {--ic:#3F8C93;--ic-bg:#E4F1F2}
.fait.terrasse {--ic:#2E9367;--ic-bg:#E4F2EB}
.fait.parking  {--ic:#DD7A1C;--ic-bg:#FDF2E6}
.fait.orient   {--ic:#B9821C;--ic-bg:#FBF1DE}
.fait.type     {--ic:#4C5F96;--ic-bg:#EAEDF6}
.fait.budget   {--ic:#2E7D58;--ic-bg:#E3F1EA}
.fait.charges  {--ic:#7F8799;--ic-bg:#EFF2F6}
.fait.entree   {--ic:#C4474E;--ic-bg:#FAE8E9}

/* ============ APERÇU D'UN BIEN PROPOSÉ ============ */
/* Six cases grises identiques ne disaient pas ce qui compte : le prix pesait
   autant que « avis ». On sépare les caractéristiques (encadrées, colorées)
   du prix (à droite, en gros) et des états (pastilles). */
.pitem>.head{align-items:flex-start;gap:14px}
.pitem .vue{flex:none}
.pitem .vue .mini{width:96px;height:72px;border-radius:var(--r-s)}
.pitem .corps{flex:1;min-width:0;text-align:start}
.pitem .ligne1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pitem .ligne1 b{font-size:15px;font-weight:700;color:var(--text)}
.pitem .ligne1 .ref{font-size:11px;color:var(--text-3);font-family:var(--mono)}
.pitem .ligne2{display:block;font-size:12.5px;color:var(--text-2);margin-top:2px}
.pitem .faits{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.pitem .bilan{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.pitem .bilan .prix{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--text)}
.pitem .bilan .prix .unite{font-size:12px;font-weight:600;color:var(--text-3)}
.pitem .etats{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.pitem .etat{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-3);
  background:var(--surface-2);white-space:nowrap}
.pitem .etat.ok{border-color:var(--good);color:var(--good);background:var(--good-soft)}
.pitem .etat.apprecie{border-color:var(--good);color:var(--good);background:var(--good-soft)}
.pitem .etat.ecarte{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.pitem .caret{align-self:center}

@media (max-width:900px){
  .pitem>.head{flex-wrap:wrap}
  .pitem .bilan{order:3;width:100%;align-items:flex-start;flex-direction:row;
    justify-content:space-between;align-self:stretch}
  .pitem .etats{justify-content:flex-start}
}


/* ============ FOURCHETTES DE RECHERCHE (budget, pièces, surface) ============ */
/* Six cases identiques alignées se lisaient comme six renseignements sans
   rapport. Ce sont trois fourchettes : on les montre comme telles. */
.fourchettes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:11px}
/* Un aplat arrondi plutôt qu'un cadre : le contour faisait une boîte de plus
   dans un panneau qui en est déjà une. */
.fourchette{background:var(--surface-2);border:0;border-radius:16px;padding:12px 14px 14px}
.fourchette .tete{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:10px}
.fourchette .tete i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  flex:none;background:var(--ic-bg);color:var(--ic)}
.fourchette .tete i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.fourchette .bornes{display:flex;align-items:center;gap:9px}
.fourchette .bornes .montant{flex:1;min-width:0}
/* les cases reprennent le rayon des cartes, pas celui des petits contrôles */
.fourchette .bornes input{border-radius:12px;border-color:var(--line);height:38px}
.fourchette .bornes s{text-decoration:none;font-size:11.5px;color:var(--text-3);flex:none;
  font-weight:600}

/* mêmes teintes que les caractéristiques d'un bien */
.fourchette.budget  {--ic:#2E7D58;--ic-bg:#E3F1EA}
.fourchette.charges {--ic:#7F8799;--ic-bg:#EFF2F6}
.fourchette.pieces  {--ic:#6B5A9E;--ic-bg:#EDEAF6}
.fourchette.surface {--ic:#3E6E9E;--ic-bg:#E8F0F7}

@media (max-width:520px){
  .fourchette .bornes{flex-wrap:wrap}
  .fourchette .bornes .montant{flex:1 1 100%}
  .fourchette .bornes s{display:none}
}


/* ============ PARC DES AGENCES (tableau de bord de la plateforme) ============ */
.parc{display:flex;flex-direction:column;gap:11px}
.agence{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  border-inline-start:3px solid var(--etat);box-shadow:var(--shadow-1);overflow:hidden}
.agence.active  {--etat:var(--good)}
.agence.endormie{--etat:var(--bad)}
.agence.neuve   {--etat:var(--warn)}
.agence.hote    {--etat:var(--info)}
/* une partenaire n'est ni un client actif ni un client qu'on perd */
.agence.partenaire{--etat:var(--line-2)}
.agence.partenaire .tete{opacity:.86}

.agence .tete{display:flex;align-items:center;gap:13px;padding:13px 15px}
.agence .logo{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.agence .logo img{width:100%;height:100%;object-fit:contain}
.agence .logo em{font-style:normal;font-weight:700;font-size:14px;color:var(--text-3)}
.agence .qui{flex:1;min-width:0}
.agence .nom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px;font-weight:700}
.agence .adr{font-size:12px;color:var(--text-3);margin-top:3px}
.agence .adr code{font-family:var(--mono);font-size:11.5px;color:var(--text-2)}
.agence .adr .manque{color:var(--bad);font-weight:600}
.agence .marque{display:flex;align-items:center;gap:5px;flex:none}
.agence .marque i{width:15px;height:15px;border-radius:50%;border:1px solid var(--line-2);display:block}

.agence .chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:1px;background:var(--line);border-block:1px solid var(--line)}
.agence .chiffres .c{background:var(--surface-2);padding:9px 12px}
.agence .chiffres u{display:block;text-decoration:none;font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.2}
.agence .chiffres s{display:block;text-decoration:none;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-3);font-weight:700;margin-top:1px}
.agence .chiffres i{display:block;font-style:normal;font-size:10.5px;color:var(--text-3);margin-top:2px}

.agence .pied{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:9px 15px;
  font-size:12px;color:var(--text-3)}
.agence .pied a{display:inline-flex;align-items:center;gap:5px}
.agence .pied a svg{width:12px;height:12px;fill:currentColor}

@media (max-width:720px){
  .agence .tete{flex-wrap:wrap}
  .agence .marque{width:100%}
}


/* ---- annuaire des agences : choisir un partenaire parmi celles qui existent ---- */
.annuaire{display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow-y:auto;padding-inline-end:3px}
.annu{display:flex;align-items:center;gap:11px;width:100%;text-align:start;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:9px 11px;
  font:inherit;color:inherit;transition:border-color .12s,background .12s}
.annu:hover{border-color:var(--accent);background:var(--surface)}
.annu .logo{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);overflow:hidden}
.annu .logo img{width:100%;height:100%;object-fit:contain}
.annu .logo em{font-style:normal;font-weight:700;font-size:12px;color:var(--text-3)}
.annu .qui{flex:1;min-width:0}
.annu .qui b{display:block;font-size:14px}
.annu .qui small{display:block;font-size:11.5px;color:var(--text-3);margin-top:1px}
.agence .pied .acts{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}

/* le choix du mode de calcul, juste au-dessus du champ qu'il commande */
.choixcalc{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  color:var(--text-2);font-size:13px}

/* dans l'espace client, ce qui attend une signature ne doit pas se confondre
   avec ce qui est déjà réglé */
.docrow.urgent{border-color:var(--accent-line);background:var(--accent-soft)}
.docrow.urgent .ic{background:var(--accent);color:#fff}
.accord{display:flex;gap:11px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);padding:11px 13px;margin-top:12px}
.accord input{margin-top:2px}

/* ============ PAD DE SIGNATURE ============ */
.padwrap{border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);
  overflow:hidden;transition:border-color .14s}
.padwrap.signe{border-color:var(--good)}
.padzone{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair;
  background:repeating-linear-gradient(transparent,transparent 168px,var(--line) 169px)}
.padbarre{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 10px;border-top:1px solid var(--line);background:var(--surface-2)}
.padaide{font-size:11.5px;color:var(--text-3)}
.padwrap.signe .padaide{color:var(--good);font-weight:600}
@media (max-width:560px){.padzone{height:140px;
  background:repeating-linear-gradient(transparent,transparent 138px,var(--line) 139px)}}

/* la trace des visites, dans la fiche d'un bien */
.visite{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--surface)}
.visite.signee{border-color:var(--good-soft);background:var(--good-soft)}
.visite .qui{flex:1;min-width:0}
.visite .qui b{display:block;font-size:13.5px}
.visite .qui small{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px}
/* Un paraphe : la signature manuscrite tenue dans un cadre a sa taille.
   La regle valait auparavant sous `.visite` seulement — ailleurs, le meme
   balisage laissait l'image sortir a sa taille reelle, celle du pad, et
   deborder de la fenetre. Elle vaut donc partout. */
.paraphe{display:inline-grid;place-items:center;width:96px;height:44px;flex:none;
  background:#FFFFFF;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  vertical-align:middle}
.paraphe img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* un menu déroulant à la taille d'une pastille, dans une ligne de document */
.chipsel{height:26px;font-size:11px;font-weight:600;color:var(--text-2);padding:0 6px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface);max-width:150px}
.chipsel:hover{border-color:var(--primary);color:var(--primary)}

/* ============ CARTE D'UNE DEMANDE (pipeline) ============ */
/* La carte reprend la teinte de sa colonne : le rail à gauche, l'avatar. Les
   pastilles d'information gardent, elles, la couleur de leur famille — une
   surface est bleue ici comme dans la fiche d'un bien. */
.pcard{padding:13px 14px 11px}
.pcard .tete{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pcard .ava{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--hue);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;overflow:hidden}
.pcard .ava img{width:100%;height:100%;object-fit:cover}
.pcard .qui{flex:1;min-width:0}
.pcard .qui b{display:block;font-size:15px;font-weight:700;line-height:1.22;letter-spacing:-.01em}
.pcard .qui small{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pcard .puces{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.puce{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px 3px 6px;white-space:nowrap}
.puce svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--pc,var(--text-3));
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.puce.surface{--pc:#3E6E9E}
.puce.pieces {--pc:#6B5A9E}

.pcard .lieu{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);
  margin-bottom:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .lieu svg{width:12px;height:12px;fill:currentColor;flex:none}

/* Cartes compactes : la meme information, condensee. Rien n'est retire — les
   pastilles perdent leurs mots et gardent icone et chiffre (le sens est dans
   l'infobulle), le lieu tient sur une ligne, l'agent reste. Moitie moins haut
   que la vue detaillee, et l'on sait toujours ou en est le dossier. */
.pastille .c,.puce .c{display:none}
.puce b{font-weight:inherit}
.board.compact .col-body{gap:6px}
/* la carte devient une grille souple : prix et puces se partagent une ligne */
.board.compact .pcard{padding:9px 11px 8px;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.board.compact .pcard .tete,.board.compact .pcard .lieu,.board.compact .pcard .pied,.board.compact .pcard .credit{flex-basis:100%}
.board.compact .pcard .tete{order:0}.board.compact .pcard .price{order:1}.board.compact .pcard .puces{order:2}
.board.compact .pcard .lieu{order:3}.board.compact .pcard .pied{order:4}.board.compact .pcard .credit{order:5}
.board.compact .puce .l{display:none}
.board.compact .puce .c{display:inline}
.board.compact .pcard .tete{margin-bottom:5px}
.board.compact .pcard .ava{width:26px;height:26px;border-radius:7px;font-size:10px}
.board.compact .pcard .qui b{font-size:13.5px}
.board.compact .pcard .qui small{font-size:11px}
.board.compact .pcard .puces{display:inline-flex;margin:0;gap:4px}
.board.compact .pcard .puces .tag{display:none}
.board.compact .pcard .puce{font-size:10px;padding:1px 6px 1px 4px}
.board.compact .pcard .puce svg{width:11px;height:11px}
.board.compact .pcard .price{display:inline-flex;align-items:baseline;gap:5px;margin:0;padding:0;border:0;font-size:14px}
.board.compact .pcard .price .etiq{display:none}
.board.compact .pcard .lieu{font-size:10.5px;margin:3px 0 4px}
.board.compact .pcard .pied{margin:0;gap:3px}
.board.compact .pastille{font-size:9.5px;padding:1px 5px;gap:3px}
.board.compact .pastille .l{display:none}
.board.compact .pastille .c{display:inline}
.board.compact .pcard .credit{font-size:10px;margin-top:5px;padding-top:4px}
.board.compact .pcard::before{top:9px;bottom:9px}

/* Le pied change de couleur tout seul : c'est lui qui fait lever les yeux. */
/* Au maximum six pastilles : anciennete, silence, signature, biens, aimes,
   ecartes. Elles doivent tenir sur deux rangs, pas quatre. */
.pcard .pied{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.pastille{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;
  border-radius:999px;padding:3px 7px;white-space:nowrap;border:1px solid transparent}
.pastille svg{width:11px;height:11px;fill:currentColor;flex:none}
.pastille.frais {color:var(--good);background:var(--good-soft);border-color:#B7DDC9}
.pastille.tiede {color:var(--warn);background:var(--warn-soft);border-color:#E5CE9B}
.pastille.chaud {color:var(--bad);background:#FBEDEE;border-color:#E8BFC2}
.pastille.vert  {color:var(--good);background:var(--good-soft);border-color:#B7DDC9}
.pastille.neutre{color:var(--text-2);background:var(--surface-2);border-color:var(--line)}
/* les refus se lisent sans crier : ce n'est pas une alerte, c'est un fait */
.pastille.rouge {color:#A2353C;background:#FBEDEE;border-color:#EFD6D8}
/* un message non lu se voit de loin : c'est le seul signal qui appelle
   une reponse, pas seulement une attention */
.pastille.alerte{color:#fff;background:var(--bad);border-color:var(--bad)}
.pastille.bleue {color:var(--info);background:var(--info-soft);border-color:#B9CFE2}

/* `.signature` appartient deja a la page de signature, avec 70px de padding :
   le pied de carte porte son propre nom. */
.pcard .credit{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.4;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .credit .rr{font-family:var(--mono);color:var(--accent-hi);font-weight:700}

/* la carte se soulève un peu plus franchement : elle se prend et se dépose */
.pcard:hover .ava{transform:scale(1.06)}
.pcard .ava{transition:transform .14s}
@media (prefers-reduced-motion:reduce){.pcard,.pcard .ava{transition:none}}

/* ============ FAMILLES DE CHOIX (fiche d'une demande) ============ */
/* La couleur dit a quelle famille appartient un type de bien ou une
   prestation. Non coche, elle reste un lisere ; coche, elle remplit. Rien de
   decoratif : ce qui n'est pas reconnu reste gris. */
.opt.f-habitation   {--f:#3E6E9E;--f-hi:#2E5A85;--f-soft:#E8F0F7;--f-line:#B9CFE2}
.opt.f-terrain      {--f:#2E9367;--f-hi:#217552;--f-soft:#E4F2EB;--f-line:#B7DDC9}
.opt.f-professionnel{--f:#6B5A9E;--f-hi:#564785;--f-soft:#EDEAF6;--f-line:#C6C5E0}
.opt.f-annexe       {--f:#7F8799;--f-hi:#616A7D;--f-soft:#EEF1F5;--f-line:#D5DAE2}
.opt.f-exterieur    {--f:#2E9367;--f-hi:#217552;--f-soft:#E4F2EB;--f-line:#B7DDC9}
.opt.f-collectif    {--f:#6B5A9E;--f-hi:#564785;--f-soft:#EDEAF6;--f-line:#C6C5E0}
.opt.f-etat         {--f:#DD7A1C;--f-hi:#B45F12;--f-soft:#FDF2E6;--f-line:#E5CE9B}
.opt.f-confort      {--f:#3F8C93;--f-hi:#2F6F76;--f-soft:#E4F1F2;--f-line:#B6D8DB}
.opt.f-neutre       {--f:#7F8799;--f-hi:#616A7D;--f-soft:#EEF1F5;--f-line:#D5DAE2}

.opt[class*="f-"]{border-color:var(--f-line);color:var(--f-hi);background:var(--surface)}
.opt[class*="f-"]:hover{background:var(--f-soft);border-color:var(--f)}
.opt[class*="f-"][aria-pressed="true"]{background:var(--f);border-color:var(--f);color:#fff}

/* Les trois transactions gardent la couleur qu'elles ont sur les cartes. */
.switchrow.sw-achat   {--t:#3E6E9E;--t-soft:#E8F0F7}
.switchrow.sw-location{--t:#2E9367;--t-soft:#E4F2EB}
.switchrow.sw-saison  {--t:#DD7A1C;--t-soft:#FDF2E6}
.switchrow[class*="sw-"]:has(.sw[aria-checked="true"]){background:var(--t-soft);border-color:var(--t)}
.switchrow[class*="sw-"]:has(.sw[aria-checked="true"]) span{color:var(--t);font-weight:700}
.switchrow[class*="sw-"] .sw[aria-checked="true"]{background:var(--t);border-color:var(--t)}

/* ============ ETAPES DU PIPELINE, DANS LA FICHE ============ */
/* Une etape garde la couleur de sa colonne : deplacer une demande, c'est la
   meme action vue de deux endroits. */
.opt.etape{border-color:var(--hue-line);color:var(--hue-ink);background:var(--surface)}
.opt.etape:hover{background:var(--hue-bg);border-color:var(--hue)}
.opt.etape[aria-pressed="true"]{background:var(--hue);border-color:var(--hue);color:#fff}
/* `.ctxbar .pill` a deux classes : la teinte doit peser autant pour passer. */
.ctxbar .pill.teintee{border-color:var(--hue-line);background:var(--hue-bg);color:var(--hue-ink)}
.ctxbar .pill.teintee b{color:var(--hue-ink);font-weight:700}

/* ============ SUGGESTIONS D'ADRESSE ============ */
/* La liste se pose sous le champ, au-dessus du reste du formulaire. */
.suggestions{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-m);
  box-shadow:var(--shadow-2);overflow:hidden;max-height:280px;overflow-y:auto}
.suggestions .sug{display:block;width:100%;text-align:start;border:0;background:transparent;
  font:inherit;color:var(--text);font-size:13px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid var(--line)}
.suggestions .sug:hover,.suggestions .sug.actif{background:var(--primary-soft);color:var(--primary)}
.suggestions .source{display:block;padding:6px 12px;font-size:10.5px;color:var(--text-3);
  background:var(--surface-2)}
html[dir="rtl"] .suggestions .sug{text-align:right}

/* un portrait remplit sa pastille ; des initiales restent du texte centre */
.who-mini .dot.portrait{overflow:hidden;padding:0;background:var(--surface-2)}
.who-mini .dot.portrait svg,.who-mini .dot.portrait img{width:100%;height:100%;display:block;object-fit:cover}
.pcard .ava svg{width:100%;height:100%;display:block}

/* ============ CHOISIR DES BIENS A AFFECTER ============ */
.choixbiens{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto;
  padding-inline-end:3px}
.choixbien{display:flex;align-items:center;gap:11px;padding:9px 11px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);
  transition:border-color .12s,background .12s}
.choixbien:hover{border-color:var(--primary);background:var(--surface)}
.choixbien.pris{border-color:var(--good);background:var(--good-soft)}
.choixbien input{flex:none;width:16px;height:16px;accent-color:var(--good)}
.choixbien .grow{flex:1;min-width:0}
.choixbien .grow b{display:block;font-size:13.5px}
.choixbien .grow small{display:block;font-size:11.5px;color:var(--text-3);margin-top:1px}

/* une correspondance deja retenue : presente, mais en retrait */
.match.place{background:var(--surface-2)}
/* un bien ecarte d'office : visible a 0 %, mais clairement hors jeu */
.match.ecarte{background:var(--surface-2);opacity:.82}
.match.ecarte .pct{background:var(--line-2);color:var(--text-3)}
.match.place .visuel{opacity:.75}

/* un bien de la demande qui n'est range dans aucune recherche */
.pitem.orphelin{border-color:var(--warn);background:var(--warn-soft)}

/* la note du rapprochement, conservee au rangement */
.pitem .notebien{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:var(--good);background:var(--good-soft);border:1px solid #B7DDC9;
  border-radius:999px;padding:2px 8px}

/* Le bien engage par le document a signer : adresse, prix, descriptif. */
.lebien{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2);
  padding:14px 16px;margin:-2px 0 16px}
.lebien .tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lebien .tete b{font-size:16px}
.lebien .tete span{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.lebien .adr{margin:4px 0 0;font-size:13.5px;color:var(--text-2)}
.lebien .chiffres{display:flex;flex-wrap:wrap;gap:8px 14px;margin:10px 0 0;font-size:13px;color:var(--text-2)}
.lebien .chiffres .prix{font-weight:700;color:var(--text-1);font-size:15px}
.lebien .accroche{margin:10px 0 0;font-weight:650;font-size:13.5px}
.lebien .desc{margin:6px 0 0;font-size:13px;color:var(--text-2);line-height:1.6}

/* ============ FICHE D'UN BIEN EN FENETRE (acces client) ============
   Reprend la presentation de la page publique. Tout est porte par
   `.fichebien` : plusieurs de ces noms servent deja ailleurs. */
.modal.large{width:min(760px,100%)}
.fichebien{display:flex;flex-direction:column;gap:14px}
.fichebien .entete{display:flex;align-items:center;gap:11px;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.fichebien .mark{width:38px;height:38px;border-radius:9px;background:var(--nav);color:#FFFFFF;
  display:grid;place-items:center;flex:none;overflow:hidden}
.fichebien .mark svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
.fichebien .who2 b{display:block;font-size:14px;line-height:1.2;color:var(--text-1)}
.fichebien .who2 small{color:var(--text-3);font-size:11.5px}
.fichebien .chapeau{display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.fichebien .chapeau h2{font-size:19px;line-height:1.25;margin:2px 0 4px;font-weight:700}
.fichebien .chapeau .lieu{color:var(--text-2);font-size:13px}
.fichebien .chapeau .prix{font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.fichebien .chapeau .prix .unite{font-size:13px;font-weight:600;color:var(--text-3)}
.fichebien .etiquettes{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.fichebien .faits{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.fichebien .faits .fait{padding:9px 11px;align-items:center}
.fichebien .faits .fait i{width:30px;height:30px}
.fichebien .faits .fait u{font-size:14px;white-space:normal;overflow-wrap:anywhere}
.fichebien .bloc{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2);
  padding:14px 16px}
.fichebien .bloc h3{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 8px}
.fichebien .bloc h3+h4{margin-top:-2px}
.fichebien .bloc h4{font-size:15px;margin:0 0 6px}
.fichebien .texte{margin:0;font-size:13.5px;line-height:1.65;color:var(--text-2);
  white-space:pre-line}
.fichebien .presta{display:flex;flex-wrap:wrap;gap:6px}
.fichebien .presta span{border:1px solid var(--line);border-radius:999px;padding:5px 11px;
  font-size:12.5px;background:var(--surface)}
.fichebien .plan{height:230px;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line)}
.fichebien .plan iframe{width:100%;height:100%;border:0;display:block}

/* ============ CHOISIR LE POINT VU PAR LE CLIENT ============
   Carte de tuiles OpenStreetMap. Le repere reste au centre : c'est la carte
   qui glisse dessous, geste plus sur au doigt qu'un marqueur a attraper. */
.carte-choix{position:relative;height:340px;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-3);cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none}
.carte-choix.glisse{cursor:grabbing}
.carte-choix .tuiles{position:absolute;inset:0}
.carte-choix .tuiles img{position:absolute;width:256px;height:256px;pointer-events:none;
  -webkit-user-drag:none}
/* Le point publie : au centre, toujours. */
.carte-choix .repere{position:absolute;left:50%;top:50%;width:26px;height:26px;
  margin:-26px 0 0 -13px;pointer-events:none;
  background:var(--accent);border:3px solid #FFFFFF;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);box-shadow:0 3px 10px rgba(22,36,58,.45)}
.carte-choix .repere::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;background:#FFFFFF;border-radius:50%}
/* L'adresse reelle, discrete : elle dit de combien on s'en ecarte. */
.carte-choix .reel{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;background:var(--info);border:2px solid #FFFFFF;pointer-events:none;
  box-shadow:0 1px 5px rgba(22,36,58,.4)}
.carte-choix .zoom{position:absolute;top:10px;inset-inline-end:10px;display:flex;
  flex-direction:column;gap:4px}
.carte-choix .zoom button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.94);font-size:17px;line-height:1;cursor:pointer;
  color:var(--text-1);display:grid;place-items:center}
.carte-choix .zoom button:hover{background:#FFFFFF}
.carte-choix .credit-osm{position:absolute;bottom:0;inset-inline-end:0;font-size:10px;
  background:rgba(255,255,255,.82);color:var(--text-3);padding:1px 6px;border-start-start-radius:6px}
/* La legende sous la carte : ce que voit le client, ce qu'on lui cache. */
.legende-carte{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;font-size:12.5px;color:var(--text-2)}
.legende-carte b{color:var(--text-1)}
.legende-carte .cle{display:inline-flex;align-items:center;gap:6px}
.legende-carte .cle i{width:11px;height:11px;border-radius:50%;flex:none}
.legende-carte .cle.publie i{background:var(--accent)}
.legende-carte .cle.reel i{background:var(--info)}

/* Les champs gardent leur ligne pointillee : sur papier on ecrit dessus. */
.bv-champ{display:flex;align-items:baseline;gap:10px;padding:5px 0;
  border-bottom:1px dotted #B9C2D0}
.bv-champ s{text-decoration:none;color:#5C6B82;font-size:11.5px;flex:none;min-width:130px}
.bv-champ b{font-weight:600;min-height:16px}
.bv-bien{border:1px solid #D5DBE5;border-radius:8px;padding:12px 14px;background:#F7F9FC;
  margin-bottom:10px}
.bv-bien-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.bv-bien-tete b{font-size:15px}
.bv-bien-tete span{font-family:var(--mono,monospace);font-size:11.5px;color:#5C6B82}
.bv-adr{margin:4px 0 0;font-size:13px}
.bv-carac{margin:4px 0 0;font-size:12px;color:#5C6B82}
.bv-prix{margin:8px 0 0;font-size:17px;font-weight:700}
.bv-desc{margin:8px 0 0;font-size:12px;color:#5C6B82;line-height:1.6}
.bv-texte{margin:0 0 8px;font-size:12.5px}
.bv-liste{margin:0 0 10px;padding-inline-start:20px;font-size:12.5px}
.bv-liste li{margin-bottom:5px}
.bv-signatures{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.bv-case{border:1px solid #16243A;border-radius:8px;padding:10px 12px;min-height:132px;
  display:flex;flex-direction:column}
.bv-case s{text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em}
.bv-case em{font-style:normal;font-size:10.5px;color:#5C6B82;margin-bottom:6px}
/* Le cadre ou la signature se pose : hauteur fixe, connue du composeur PDF. */
.bv-trace{flex:1;display:grid;place-items:center;min-height:62px}
.bv-trace img{max-width:100%;max-height:62px}
.bv-qui{font-size:11px;color:#5C6B82;border-top:1px dotted #B9C2D0;padding-top:5px}
.bv-pied{margin-top:16px;padding-top:10px;border-top:1px solid #D5DBE5;
  font-size:10.5px;color:#5C6B82;text-align:center}
@media print{
  .bonvisite{max-width:none;padding:0}
  .bv-bien{background:transparent}
}


/* ------------------------------------------------------------------ support
   La face agence du ticketing. Les échanges se déplient sous la carte plutôt
   que d'ouvrir un écran de plus : une agence n'a jamais dix tickets ouverts,
   et revenir en arrière pour lire la suite d'une conversation agace. */

.tickets { display: flex; flex-direction: column; gap: 12px; }

.carte-ticket {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.carte-ticket--neuf { border-color: var(--accent); }
.carte-ticket > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 16px 10px;
}
.carte-ticket > header b { display: block; font-size: 15px; font-weight: 650; }
.carte-ticket > header .hint { display: block; margin-top: 3px; }
.carte-ticket > footer {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px 14px; border-bottom: 1px solid transparent;
}
.carte-ticket > footer .btn { margin-left: auto; }

.pastille-neuf {
  font-size: 11.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent);
  padding: 3px 9px; border-radius: 6px;
}

.fil-ticket { border-top: 1px solid var(--line); padding: 14px 16px 16px; }
.fil-ticket__messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.bulle-ticket {
  max-width: 80%; padding: 10px 13px; border-radius: var(--r-l);
  background: var(--surface-2); border: 1px solid var(--line); align-self: flex-start;
}
.bulle-ticket--moi { align-self: flex-end; }
.bulle-ticket--eux { background: var(--nav); border-color: var(--nav); color: #FFF; }
.bulle-ticket--eux .hint { color: rgba(255, 255, 255, .6); }
.bulle-ticket b { display: block; font-size: 11.5px; font-weight: 700; opacity: .75; margin-bottom: 3px; }
/* Le corps garde les retours à la ligne de son auteur — et rien d'autre. */
.bulle-ticket__texte { display: block; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.bulle-ticket .hint { display: block; margin-top: 5px; font-size: 11px; }

.fil-ticket__actions { display: flex; gap: 10px; justify-content: flex-end; }

.mono { font-family: var(--mono); }

/* --------------------------------------------------------------- nouveautés
   Les cartes reprennent celles des biens : même grille, même cadre, même
   survol. Seuls l'image de démonstration et les deux paragraphes de texte
   s'ajoutent — une nouveauté se lit, elle ne se remplit pas de chiffres. */

.nv-media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: 1px solid var(--line); background: var(--surface-2); }
.nv-resume { margin: 0; font-size: 13px; color: var(--text-2); }
.nv-desc { margin: 0; font-size: 12.5px; color: var(--text-3);
  white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------------- second niveau
   La seconde ligne du menu : les enfants du groupe courant. Plus claire que
   la barre pour qu'on lise la hierarchie d'un coup d'oeil. */
.sousnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 18px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.sousnav .pill{color:var(--text-2)}
.sousnav .pill[aria-current="page"]{background:var(--primary-soft);color:var(--primary)}
.sousnav .pill[aria-current="page"]::after{display:none}