/* ============================================================================
   /carto-ventes — Cartographie publique des transactions (ventes & cessions).

   Page AUTONOME (pas d'app.js principal, pas d'auth). Carte plein cadre sous une
   topbar VNAV (identique aux 3 hosts), sélecteur de couches flottant. Thème SOMBRE
   côté carte (fond anthracite), tokens VNAV repris à l'identique du simulateur.
   ============================================================================ */

:root {
    --anthracite: #282828;
    --gold:       #C2A54F;
    --txt:        #F5F5F0;
    --soft:       #94a3b8;
    --line:       rgba(255, 255, 255, 0.1);
    /* Couleurs de couches — distinctes de Foncier #CD002B / Immo #C2A54F. */
    --c-resid:    #2563EB;  /* bleu — résidentiel */
    --c-commerc:  #0D9488;  /* teal — locaux commerciaux */
    --c-fonds:    #C13B6E;  /* rose — fonds de commerce */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
    margin: 0; padding: 0; height: 100%;
    background: var(--anthracite); color: var(--txt);
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body { position: relative; height: 100vh; overflow: hidden; }

/* ── Topbar VNAV (repris à l'identique du simulateur) ── */
.vnav-bar, .vnav-overlay, .vnav-scrim {
    --_bg: #282828; --_gold: #C2A54F; --_txt: #F5F5F0;
    --_soft: #94a3b8; --_line: rgba(255, 255, 255, 0.1);
}
.vnav-bar {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; gap: 12px; padding: 12px 24px;
    background: rgba(40, 40, 40, 0.85);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--_line); flex-shrink: 0;
}
/* app.valyo.fr : le topbar EST la search bar → pas de barre wordmark.
   Le logo V = bouton FLOTTANT déclencheur du menu, placé comme le menu du module
   foncier : coin haut-droit avec une marge de 10px (identique au .valyo-menu Leaflet
   `topright margin:10px`), MAIS descendu sous la ligne de la search bar. */
.vnav-bar--app {
    position: absolute; right: 10px; left: auto;   /* marge droite = celle du foncier */
    top: calc(10px + var(--cx-pill-h) + 8px);       /* sous la search bar (top 10 + hauteur + gap) */
    z-index: 1000; margin: 0; padding: 0; gap: 0; background: transparent; border: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    display: block;                                  /* pas de flex : évite tout décalage interne */
    width: var(--cx-pill-h); height: var(--cx-pill-h);
}
/* Le bouton + le logo remplissent EXACTEMENT le conteneur (aucun débordement). */
.vnav-bar--app .vnav-toggle {
    width: 100%; height: 100%; margin: 0; padding: 0; border-radius: 12px;
}
.vnav-bar--app .vnav-logo {
    width: 100%; height: 100%; border-radius: 12px;
    background: rgba(40, 40, 40, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(194, 165, 79, 0.45); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.vnav-bar--app .vnav-logo svg { width: 26px; height: 26px; }
.vnav-toggle {
    appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer;
    width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
}
.vnav-logo {
    width: 36px; height: 36px; border-radius: 8px; background: #1A1A1A;
    border: 1px solid rgba(194, 165, 79, 0.45); display: grid; place-items: center; transition: box-shadow 0.18s;
}
.vnav-logo svg { width: 22px; height: 22px; }
.vnav-toggle:hover .vnav-logo, .vnav-toggle:focus-visible .vnav-logo { box-shadow: 0 0 0 3px rgba(194, 165, 79, 0.18); }
.vnav-toggle[aria-expanded="true"] .vnav-logo { box-shadow: 0 0 0 3px rgba(194, 165, 79, 0.30); }
.vnav-wordmark {
    font-family: 'Space Grotesk', 'Manrope', sans-serif; font-weight: 500; font-size: 20px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--_txt); white-space: nowrap;
}
.vnav-suffix { color: var(--_soft); font-size: 0.62em; margin-left: 8px; letter-spacing: 0.12em; }
.vnav-scrim { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, 0.35); }
.vnav-scrim[hidden] { display: none; }
.vnav-overlay {
    position: fixed; left: 0; right: 0; top: 0; z-index: 999;
    background: var(--_bg); border-bottom: 1px solid var(--_line);
    max-height: min(70vh, 640px); overflow-y: auto; padding: 20px 24px 28px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s 0.22s;
}
.vnav-overlay[data-open="true"] {
    transform: translateY(0); opacity: 1; visibility: visible;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.vnav-sections { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; }
.vnav-section { padding: 6px 0; border-bottom: 1px solid var(--_line); }
.vnav-section:last-child { border-bottom: 0; }
.vnav-link { text-decoration: none; display: block; }
.vnav-link--top {
    font-family: 'Space Grotesk', 'Manrope', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.12em; font-size: 1.05rem; color: var(--_txt); padding: 10px 0;
    transition: color 0.15s; position: relative;
}
.vnav-link--top:hover { color: var(--_gold); }
.vnav-sub { list-style: none; margin: 2px 0 8px; padding: 0 0 0 4px; }
.vnav-link--sub { color: var(--_soft); font-size: 0.95rem; font-weight: 500; padding: 7px 0; transition: color 0.15s; }
.vnav-link--sub:hover { color: var(--_txt); }
body[data-current="application"] .vnav-section[data-nav="application"] .vnav-link--top { color: var(--_gold); }
body[data-current="application"] .vnav-section[data-nav="application"] .vnav-link--top::before {
    content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 60%; background: var(--_gold); border-radius: 2px;
}
.vnav-bar h1 {
    flex: 1; min-width: 0; margin: 0; font-family: 'Manrope', sans-serif; font-size: 0.95rem;
    font-weight: 700; line-height: 1.2; color: var(--_txt);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Carte plein cadre ── */
.tx-main { position: absolute; inset: 0; }
#map {
    position: absolute; inset: 0;
    /* Fond GRIS CLAIR (pas noir) : visible sous une tuile IGN en attente ou hors emprise.
       Aligné sur le rendu du Plan IGN désaturé → une tuile manquante se fond dans le fond
       au lieu de faire une « brique noire » (latent ici car on démarre zoomé sur Lyon,
       flagrant sur carto-social qui démarre en vue France entière). */
    background: #e4e3df;
}
/* Fond de carte en NIVEAUX DE GRIS (saturation -100 %) : rendu carte-données sobre,
   les points colorés (bleu/teal/rose) ressortent. Filtre appliqué UNIQUEMENT au
   pane des tuiles (`.leaflet-tile-pane`) → n'affecte PAS les marqueurs (overlay-pane).
   Ciblé sur la classe posée par app.js (using-osm-standard-tiles). */
.using-ign-plan-tiles .leaflet-tile-pane,
.using-osm-standard-tiles .leaflet-tile-pane,
.using-osm-fallback-tiles .leaflet-tile-pane { filter: grayscale(1) brightness(0.94) contrast(0.95); }
.leaflet-container { background: #e4e3df; font-family: 'Manrope', sans-serif; }

/* ══ SOCLE COMMUN CARTOS ══════════════════════════════════════════════════
   ZONE TOP (recherche) et ZONE BAS (légende) partagent des proportions
   symétriques : même hauteur de « pilule » (~44px), mêmes rayons, map au milieu.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --cx-pill-h: 44px;      /* hauteur commune top/bottom */
    --cx-inset: 14px;       /* marge aux bords */
    --cx-surface: rgba(40, 40, 40, 0.92);
}

/* ── ZONE TOP : barre de recherche adresse + géoloc ── */
.cx-search {
    position: absolute; top: var(--cx-inset); left: var(--cx-inset); z-index: 600;
    width: 340px; max-width: calc(100vw - 2 * var(--cx-inset));
}
.cx-search-input-wrap {
    display: flex; align-items: center; height: var(--cx-pill-h);
    background: var(--cx-surface); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); padding: 0 6px 0 12px;
}
.cx-search-icon { color: var(--soft); flex-shrink: 0; }
#cx-adresse {
    flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
    color: var(--txt); font-family: 'Manrope', sans-serif; font-size: 0.95rem; padding: 0 8px;
    outline: none;
}
#cx-adresse::placeholder { color: var(--soft); }
.cx-geoloc {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; border: 0;
    background: transparent; color: var(--soft); cursor: pointer; display: grid; place-items: center;
    transition: background 0.15s, color 0.15s;
}
.cx-geoloc:hover { background: rgba(255, 255, 255, 0.08); color: var(--gold); }
.cx-geoloc-loading { animation: cx-pulse 0.9s ease-in-out infinite; color: var(--gold); }
@keyframes cx-pulse { 50% { opacity: 0.4; } }
.cx-suggestions {
    display: none; margin-top: 6px; background: var(--cx-surface);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.cx-sug-item {
    padding: 10px 14px; font-size: 0.9rem; color: var(--txt); cursor: pointer;
    border-bottom: 1px solid var(--line);
}
.cx-sug-item:last-child { border-bottom: 0; }
.cx-sug-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--gold); }

/* ── ZONE BAS : rappel visuel des couches (NON cliquable, petit, discret) ── */
.cx-legend {
    position: absolute; left: var(--cx-inset); bottom: var(--cx-inset); z-index: 500;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    max-width: calc(100vw - 2 * var(--cx-inset) - 60px); /* laisse la place au zoom Leaflet à droite */
    padding: 6px 12px; pointer-events: none;
    background: rgba(40, 40, 40, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid var(--line); border-radius: 10px;
}
.cx-legend-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 500; color: var(--txt); white-space: nowrap;
}
.cx-legend-item[hidden] { display: none; }
.cx-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: 1px solid #fff; }
.cx-dot--resid   { background: var(--c-resid); }
.cx-dot--commerc { background: var(--c-commerc); }
.cx-dot--fonds   { background: var(--c-fonds); }

/* ── Layers dans le V NAV (activables) ── */
.vnav-heading { cursor: default; color: var(--_soft) !important; }
.vnav-layers { padding-left: 4px; }
.cx-nav-layer {
    display: inline-flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 0; border: 0; background: transparent; cursor: pointer;
    color: var(--_txt); font-family: 'Manrope', sans-serif; font-size: 0.95rem; font-weight: 500;
    transition: opacity 0.15s;
}
.cx-nav-layer .cx-dot { width: 12px; height: 12px; }
.cx-nav-layer .cx-count { color: var(--_soft); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; margin-left: auto; }
.cx-nav-layer-off { opacity: 0.4; }
.cx-nav-layer-off .cx-dot { filter: grayscale(1); }
.cx-nav-layer:focus-visible { outline: 2px solid var(--_gold); outline-offset: 2px; }

/* ── Popup (charte sombre) ── */
.tx-popup .leaflet-popup-content-wrapper {
    background: #282828; color: var(--txt); border-radius: 10px;
    border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.tx-popup .leaflet-popup-content { margin: 12px 14px; font-size: 0.9rem; line-height: 1.5; }
.tx-popup .leaflet-popup-content strong { font-weight: 700; }
.tx-popup .leaflet-popup-tip { background: #282828; border: 1px solid var(--line); }
.tx-popup a.leaflet-popup-close-button { color: var(--soft); }
.tx-pop-meta { color: var(--soft); font-size: 0.82rem; }

/* Contrôle de zoom Leaflet en thème sombre. */
.leaflet-bar a {
    background: rgba(40, 40, 40, 0.92); color: var(--txt);
    border-bottom-color: var(--line);
}
.leaflet-bar a:hover { background: #333; color: var(--gold); }
.leaflet-control-attribution {
    background: rgba(40, 40, 40, 0.7) !important; color: var(--soft) !important;
}
.leaflet-control-attribution a { color: var(--gold) !important; }

/* ── Fiche fonds de commerce (panneau latéral pleine hauteur) ── */
.tx-fiche {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 1200;
    width: 400px; max-width: 100%;
    background: #232323; border-left: 1px solid var(--line);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column;
    animation: txf-slide 0.22s ease;
}
@keyframes txf-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.tx-fiche-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.05); color: var(--txt);
    font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.15s;
}
.tx-fiche-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--gold); }
.tx-fiche-body { overflow-y: auto; padding: 22px 22px 32px; }

.txf-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.txf-kicker {
    margin: 0 0 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--c-fonds);
}
/* Vente multi-lots : kicker neutre (pas la couleur rose « fonds ») */
.txf-kicker--multi { color: var(--soft, #9aa); }
.txf-title { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--txt); }
.txf-price {
    margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 1.7rem; font-weight: 600; color: var(--gold);
}
.txf-sub { margin: 6px 0 0; font-size: 0.85rem; color: var(--soft); line-height: 1.4; }
.txf-flag {
    margin: 10px 0 0; padding: 6px 10px; border-radius: 6px;
    background: rgba(226, 200, 92, 0.14); border: 1px solid rgba(226, 200, 92, 0.4);
    font-size: 0.8rem; color: #e2c85c;
}

.txf-block { padding: 16px 0; border-bottom: 1px solid var(--line); }
.txf-block:last-child { border-bottom: 0; }
.txf-block-title {
    margin: 0 0 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--soft);
}
.txf-line { margin: 0 0 7px; font-size: 0.92rem; line-height: 1.45; color: var(--txt); }
.txf-line:last-child { margin-bottom: 0; }
.txf-line strong { font-weight: 700; }
.txf-fin { font-family: 'JetBrains Mono', monospace; font-size: 0.86rem; }
.txf-note { color: var(--soft); font-size: 0.85em; }
.txf-on { color: #4ade80; font-weight: 600; }
/* Accordéon « activité déclarée » : objet social BODACC brut, replié sous le titre FACT court. */
.txf-activite { margin-top: 0.6em; }
.txf-activite summary { cursor: pointer; color: var(--soft); font-size: 0.8em; list-style: none; user-select: none; }
.txf-activite summary::before { content: '▸ '; }
.txf-activite[open] summary::before { content: '▾ '; }
.txf-activite summary:hover { color: var(--fg, #fff); }
.txf-activite .txf-note { margin-top: 0.4em; line-height: 1.4; }
.txf-off { color: #f87171; font-weight: 600; }

@media (max-width: 560px) {
    .vnav-bar { padding: 10px 16px; }
    .vnav-bar h1 { font-size: 0.88rem; }
    .vnav-overlay { max-height: 82vh; padding: 16px 18px 24px; }
    .vnav-link--top { font-size: 1rem; }
    .cx-search { width: calc(100vw - 2 * var(--cx-inset)); top: 10px; left: 10px; }
    .cx-legend { left: 10px; bottom: 10px; }
    .tx-fiche { width: 100%; }   /* pleine largeur sur mobile */
}
@media (prefers-reduced-motion: reduce) {
    .vnav-overlay { transition: opacity 0.01s, visibility 0s; transform: none; }
}

/* ── Halo de ciblage après recherche d'adresse (pas de match fonds exact) ──
   Le point le plus proche de la couche active pulse ~4s pour attirer l'œil,
   sans ouvrir de fiche (l'utilisateur clique s'il veut le détail). */
.cx-halo {
    animation: cx-halo-pulse 1.1s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes cx-halo-pulse {
    0%   { transform: scale(0.7); stroke-opacity: 0.9; fill-opacity: 0.35; }
    70%  { transform: scale(3.2); stroke-opacity: 0;   fill-opacity: 0; }
    100% { transform: scale(3.2); stroke-opacity: 0;   fill-opacity: 0; }
}