/* ═══════════════════════════════════════════════════════════════════════
   LISTE — passe v2 : affinage des cartes opportunité (desktop ≥721px).
   Chargée APRÈS liste.css ET dossier_theme_emeraude.css. Tout l'affinage
   structurel est scopé ≥721px : les passes mobiles 1→5 (fin de liste.css)
   restent intactes.

   L'essence Émeraude est respectée à la lettre — donc PAS d'élévation, PAS de
   pilule : angles à 2px, surfaces plates, hairlines chaudes, eyebrows laiton
   mono, émeraude réservée à la décision. L'affinage porte sur trois points :

     1. une seule boîte — la carte. À l'intérieur, des BANDES et des filets.
        Synthèse, KPI et « Enchère max » avaient chacun bordure + fond + rayon :
        trois cadres concentriques dans 340px de large.
     2. une seule grammaire d'eyebrow — laiton mono 9px / 0.08em capitales
        (avant : 8,5px/.06em dans les KPI, 9px/.08em dans l'enchère max,
        11px bas-de-casse dans « valorisation indisponible »).
     3. l'émeraude ne colore QUE la décision : la bande « Enchère max » en pied.
        Le filet gauche émeraude du bloc devient donc redondant → retiré.
   ═══════════════════════════════════════════════════════════════════════ */

.lst-card:focus-visible {
  outline: 2px solid var(--em-emerald, #0c6e4e);
  outline-offset: 2px;
}

/* Angles adoucis (demande 2026-08-10) : la carte s'écarte ici du 2px de
   l'essence Émeraude. Rayon porté par la carte ; overflow:hidden rogne déjà
   photo et bande de pied, donc rien à arrondir à l'intérieur. */
.lst-card { border-radius: 12px; }

@media (min-width: 721px) {
  /* ── Cadre : plat (essence), la réaction au survol se joue au filet ──── */
  .lst-card { transition: border-color 140ms ease; }
  .lst-card:hover .lst-card__title { color: var(--em-emerald-deep, #0a5840); }

  /* ── Photo ────────────────────────────────────────────────────────────
     Le placeholder rayé (repeating-linear-gradient par data-photo) vibrait
     plus fort que la donnée : lavis plat, variation conservée d'une carte à
     l'autre. Et plus de carte grisée à 55 % : un dossier sans photo n'est pas
     un dossier au rabais. */
  .lst-card__photo { border-bottom-color: var(--em-line, var(--c-border)); }
  .lst-card__photo img { transition: transform 500ms cubic-bezier(0.2, 0.6, 0.2, 1); }
  .lst-card:hover .lst-card__photo img { transform: scale(1.03); }
  .lst-card__photo::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 56px;
    background: linear-gradient(180deg, rgba(20, 24, 21, 0.18), rgba(20, 24, 21, 0));
    pointer-events: none;
  }
  .lst-card--no-photo .lst-card__photo { opacity: 1; }
  .lst-card--no-photo:hover .lst-card__photo { opacity: 1; }
  .lst-card--no-photo .lst-card__photo::after { display: none; }

  .lst-card__phbg,
  .lst-card__phbg[data-photo] { background: linear-gradient(160deg, #f2eee3, #e4dccb); }
  .lst-card__phbg[data-photo="2"] { background: linear-gradient(160deg, #f1eee2, #e2ddcb); }
  .lst-card__phbg[data-photo="3"] { background: linear-gradient(160deg, #edeade, #dcd6c3); }
  .lst-card__phbg[data-photo="4"] { background: linear-gradient(160deg, #ebe9e0, #d5d1c2); }
  .lst-card__phbg[data-photo="5"] { background: linear-gradient(160deg, #f3efe6, #e1dac8); }
  .lst-card__phbg[data-photo="6"] { background: linear-gradient(160deg, #e9e6da, #d2cdb8); }
  .lst-card__phbg[data-photo="7"] { background: linear-gradient(160deg, #f1eddf, #ddd7c0); }
  .lst-card__phbg[data-photo="8"] { background: linear-gradient(160deg, #ebe8dc, #d5d0bb); }
  .lst-card__phbg[data-photo="9"] { background: linear-gradient(160deg, #efebe0, #dbd5c2); }
  .lst-card__phbg[data-photo="10"] { background: linear-gradient(160deg, #e8e5d9, #d0cbb6); }
  .lst-card__phbg[data-photo="11"] { background: linear-gradient(160deg, #f2efe4, #dfdac6); }
  .lst-card__phbg[data-photo="12"] { background: linear-gradient(160deg, #eae7db, #d3ceb9); }
  .lst-card__phbg .ph-label {
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--em-muted-2, var(--c-muted-2));
  }

  /* Compteur d'audience : papier net par défaut ; à l'approche de l'audience,
     pastille PLEINE — le seul rouge de la grille, lisible sur toute photo. */
  .lst-card__day {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 6px;
    border-color: var(--em-line, var(--c-border));
    color: var(--em-ink-2, var(--c-ink-2));
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }
  .lst-card__day.is-danger {
    background: var(--c-danger);
    border-color: color-mix(in srgb, var(--c-danger) 72%, #000);
    color: #fdf3f1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .lst-card__day.is-warn {
    background: rgba(255, 255, 255, 0.94);
    border-color: color-mix(in srgb, var(--c-warn) 48%, var(--em-line, #d7ccb4));
    color: var(--c-warn);
  }
  .lst-card__day.is-past {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--em-line-soft, var(--c-border));
    color: var(--em-muted-2, var(--c-muted-2));
  }

  /* ── Corps : rythme resserré, triplet titre / lieu / tribunal soudé ─── */
  .lst-card__body { padding: 13px 15px 15px; gap: 10px; }
  .lst-card__head { min-height: 22px; }
  .lst-card__head-l { gap: 4px; }

  /* ── Trois chips, trois rôles ─────────────────────────────────────────
     Une seule métrique verticale (20px, même axe optique) et un seul objet
     PLEIN par carte : le verdict. Les descriptifs passent en filet, et le
     compteur d'urgence devient la seule pastille pleine de la photo. */
  .lst-card__chip,
  .lst-card .verdict-chip--sm,
  .lst-card__day {
    height: 20px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  /* Descriptifs (type de bien, état) : filet chaud, aucun fond — ils situent,
     ils ne décident pas. La teinte sémantique vit sur le texte et le filet. */
  .lst-card__chip {
    border-radius: 5px;
    border: 1px solid var(--em-line, var(--c-border));
    background: transparent;
    color: var(--em-ink-2, var(--c-ink-2));
    font-size: 10.5px;
    font-weight: 500;
  }
  .lst-card__chip.is-ok {
    background: transparent;
    color: var(--em-emerald, var(--c-ok));
    border-color: color-mix(in srgb, var(--em-emerald, #0c6e4e) 34%, var(--em-line, #d7ccb4));
  }
  .lst-card__chip.is-warn {
    background: transparent;
    color: var(--c-warn);
    border-color: color-mix(in srgb, var(--c-warn) 34%, var(--em-line, #d7ccb4));
  }
  .lst-card__chip.is-danger {
    background: transparent;
    color: var(--c-danger);
    border-color: color-mix(in srgb, var(--c-danger) 34%, var(--em-line, #d7ccb4));
  }
  .lst-card__chip.is-muted {
    border-color: var(--em-line-soft, var(--c-border));
    color: var(--em-muted, var(--c-muted));
  }

  /* Verdict : le seul objet plein. Émeraude d'un cran (dégradé de 6 %, pas une
     ombre : l'essence reste plate), liseré haut clair, pastille laiton gardée. */
  body.theme-emeraude-app .lst-card .verdict-chip {
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    gap: 5px;
  }
  body.theme-emeraude-app .lst-card .verdict-chip--ok {
    background: linear-gradient(180deg, #0e7a56, var(--em-emerald-deep, #0a5840));
    border-color: var(--em-emerald-deep, #0a5840);
    color: #fbf7ec;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  body.theme-emeraude-app .lst-card .verdict-chip--ok::before {
    width: 4px;
    height: 4px;
    background: var(--em-brass-bright, #cfa44e);
  }

  .lst-card__fav {
    border-color: transparent;
    background: transparent;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    transition: color 140ms ease, background-color 140ms ease;
  }
  /* Cible tactile portée à 32px sans grossir le dessin (24px visibles). */
  .lst-card__fav { position: relative; }
  .lst-card__fav::after { content: ""; position: absolute; inset: -4px; }
  .lst-card__fav:hover { background: var(--em-ivory-2, var(--c-bg-2)); border-color: transparent; }
  .lst-card__fav.is-on { border-color: transparent; }

  /* ── Typographie « feuille de banque » ───────────────────────────────
     Titre en Archivo display (la famille de titre du DS, jusqu'ici absente
     des cartes), tracking serré ; sous-ligne en chiffres tabulaires pour que
     surfaces et pièces s'alignent d'une carte à l'autre. */
  /* Titre — Archivo display, la voix « nom du bien ». Tracking serré, deux
     lignes réservées pour que toutes les cartes s'alignent, césures interdites
     (les adresses françaises se coupaient n'importe où). */
  .lst-card__title {
    font-family: var(--f-display, var(--f-sans));
    font-size: 17px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.024em;
    min-height: calc(1.22em * 2);
    color: var(--em-ink, var(--c-ink));
    text-wrap: pretty;
    hyphens: none;
    margin-bottom: -3px;
    transition: color 140ms ease;
  }

  /* Sous-ligne — deux voix dans une ligne : le LIEU en sans (nom propre),
     la MESURE en mono tabulaire (donnée). Les m² s'alignent donc en colonne
     d'une carte à l'autre. */
  .lst-card__sub {
    font-size: 12px;
    line-height: 1.35;
    color: var(--em-ink-2, var(--c-ink-2));
    letter-spacing: -0.004em;
  }
  .lst-card__sub-loc {
    font-weight: 500;
    color: var(--em-ink, var(--c-ink));
  }
  .lst-card__sub-surf {
    font-family: var(--f-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--em-muted, var(--c-muted));
  }
  /* Le « · » ajoutait ses 5px de marge AUX espaces du markup : ~13px de trou
     avant la surface. On compense pour retrouver un vrai point médian. */
  .lst-card__sub-loc:not(:empty) + .lst-card__sub-surf::before { margin: 0 1px; }

  /* Méta — tribunal (+ mise à prix sur carte verrouillée) : la voix la plus
     basse. Mono étroit, deux lignes maximum — « TJ Paris, Parvis Robert
     Badinter, à Paris 17ème » en faisait trois et cassait la grille. */
  .lst-card__meta {
    margin-top: -6px;
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 0.005em;
    color: var(--em-muted-2, var(--c-muted-2));
    font-variant-numeric: tabular-nums;
  }
  .lst-card__meta .lst-card__loc {
    color: var(--em-muted-2, var(--c-muted-2));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Synthèse : plus une boîte, un chapô sous filet ─────────────────── */
  .lst-card__synth,
  body.theme-emeraude-app .lst-card__synth {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--em-line-soft, var(--c-border));
    border-radius: 0;
    padding: 10px 0 0;
    gap: 4px;
  }
  /* Synthèse — le seul texte courant de la carte : interlignage ouvert,
     graisse réelle sur le gras (650 était synthétisé par le navigateur). */
  .lst-card__synth-text {
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--em-ink-2, var(--c-ink-2));
    letter-spacing: 0.002em;
    text-wrap: pretty;
  }
  .lst-card__synth-text strong { font-weight: 600; color: var(--em-ink, var(--c-ink)); }

  /* ── KPI : bande pleine largeur, cellules séparées par un filet ─────── */
  .lst-card__nums {
    /* top:auto (pas 0) — préserve le calage en pied de carte de liste.css
       (.lst-card__nums { margin-top:auto }) : maxbid doit toujours rester le
       dernier élément visuel de la carte, quelle que soit la hauteur du
       contenu au-dessus (retour 2026-08-11). */
    margin: auto -15px 0;
    border: 0;
    border-top: 1px solid var(--em-line, var(--c-border));
    /* Pas de border-bottom : le bloc « Enchère max » est soudé juste dessous
       et porte déjà son filet du haut (retour 2026-08-11). */
    border-radius: 0;
    background: var(--em-line-soft, var(--c-border));
  }
  /* Cellules en grille de 3 rangs fixes : eyebrow, valeur, second niveau.
     Les valeurs s'alignent donc d'une cellule à l'autre même quand une seule
     porte un sous-chiffre (avant : « Revente » décalait toute la ligne).
     justify-items:center — KPI centrés dans leur cellule (retour 2026-08-11). */
  .lst-card__nums > div,
  body.theme-emeraude-app .lst-card__nums > div {
    background: var(--em-paper, var(--c-panel));
    display: grid;
    grid-template-rows: 11px 18px auto;
    align-content: start;
    justify-items: center;
    text-align: center;
    padding: 9px 10px 8px;
    gap: 0;
  }
  /* Hiérarchie de lecture : mise à prix et revente portent la décision ;
     €/m² et travaux sont des appuis → encre secondaire, graisse moindre. */
  .lst-card__nums > div:nth-child(1) .v,
  .lst-card__nums > div:nth-child(3) .v {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--em-ink, var(--c-ink));
  }
  .lst-card__nums > div:nth-child(2) .v,
  .lst-card__nums > div:nth-child(4) .v {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--em-ink-2, var(--c-ink-2));
  }
  /* Unités et sous-chiffres : laiton retiré (4 dorures par bande, c'était le
     bruit le plus fort de la carte) → gris chaud, le nombre domine. */
  body.theme-emeraude-app .lst-card__nums .v .u,
  body.theme-emeraude-app .lst-card__nums .sub { color: var(--em-muted-2, var(--c-muted-2)); }
  .lst-card__nums .v { font-size: 13px; letter-spacing: -0.01em; color: var(--em-ink, var(--c-ink)); }
  .lst-card__nums .v { font-variant-numeric: tabular-nums; }
  .lst-card__nums .v .u { font-size: 9.5px; font-weight: 500; letter-spacing: 0; }
  .lst-card__nums .sub { font-size: 9.5px; letter-spacing: -0.005em; }

  /* ── Enchère max : la décision. Bande émeraude affleurante en pied ──── */
  .lst-card__maxbid,
  .lst-card__marge {
    /* Le padding bas du body est déjà annulé par la règle :has() plus bas —
       une marge négative en bas rognerait la bande de 15px de plus.
       margin-top:-10px annule le gap du body : soudé à la grille KPI
       au-dessus (retour 2026-08-11). */
    margin: -10px -15px 0;
    padding: 11px 15px 13px;
    border: 0;
    border-top: 1px solid var(--em-line, var(--c-border));
    border-radius: 0;
    background: var(--em-paper, var(--c-panel));
  }
  /* Bande de décision : AUCUN fond coloré (retour 2026-08-11 — même la teinte
     ivoire posée le 2026-08-10 est retirée). Fond panel plat et identique
     quel que soit le ton ; la hiérarchie vient uniquement de la taille de la
     valeur + le filet du haut + la couleur du chiffre. */
  .lst-card__maxbid.is-ok,
  .lst-card__marge.is-ok,
  body.theme-emeraude-app .lst-card__maxbid.is-ok {
    border: 0;
    border-top: 1px solid var(--em-line, var(--c-border));
  }
  .lst-card__maxbid .v.is-ok,
  .lst-card__marge .v.is-ok { color: var(--em-ink, var(--c-ink)); }
  .lst-card__maxbid.is-warn,
  .lst-card__marge.is-warn {
    border-top-color: color-mix(in srgb, var(--c-warn) 32%, var(--em-line, #d7ccb4));
  }
  .lst-card__maxbid.is-danger,
  .lst-card__marge.is-danger {
    border-top-color: color-mix(in srgb, var(--c-danger) 28%, var(--em-line, #d7ccb4));
  }
  .lst-card__maxbid .v,
  .lst-card__marge .v { font-size: 16.5px; letter-spacing: -0.015em; }
  .lst-card__maxbid .v,
  .lst-card__marge .v { font-variant-numeric: tabular-nums; }
  /* Scénario retenu : nom propre de stratégie → sans, pas mono. */
  .lst-card__maxbid .scn,
  .lst-card__marge .scn {
    font-family: var(--f-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.008em;
    color: var(--em-ink, var(--c-ink));
  }

  /* La bande de pied affleure : le body ne garde son padding bas que si un
     autre bloc suit (paywall, ventes liées…). */
  .lst-card__body:has(> .lst-card__valuation:last-child),
  .lst-card__body:has(> .lst-card__maxbid:last-child),
  .lst-card__body:has(> .lst-card__marge:last-child) { padding-bottom: 0; }

  /* ── Une seule grammaire d'eyebrow : laiton mono 9px / 0.08em ───────── */
  .lst-card__nums .l,
  .lst-card__maxbid .lbl,
  .lst-card__marge .lbl,
  .lst-card__missing-nums .l,
  .lst-card__adjuge .lbl,
  body.theme-emeraude-app .lst-card__nums .l,
  body.theme-emeraude-app .lst-card__maxbid .lbl,
  body.theme-emeraude-app .lst-card__missing-nums .l {
    font-family: var(--f-mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--em-brass, var(--c-muted));
  }
  .lst-card__synth-eyebrow,
  body.theme-emeraude-app .lst-card__synth-eyebrow {
    font-family: var(--f-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--em-brass, var(--c-muted));
  }

  /* ── Variantes sobres : « données insuffisantes » et « adjugé » ─────── */
  .lst-card__missing {
    border: 1px dashed var(--em-line, var(--c-border-2));
    background: var(--em-ivory, #fcfaf4);
    border-radius: 8px;
    padding: 11px 12px;
  }
  .lst-card__missing-ic { background: var(--em-muted-2, var(--c-muted-2)); }
  @media (prefers-reduced-motion: reduce) {
    .lst-card__photo img,
    .lst-card__title,
    .lst-card { transition: none; }
    .lst-card:hover .lst-card__photo img { transform: none; }
  }

  .lst-card__adjuge {
    border: 0;
    border-top: 1px solid var(--em-line-soft, var(--c-border));
    border-radius: 0;
    background: transparent;
    padding: 9px 0 0;
  }
}