/* ============================================================================
   PAGE D'ACCUEIL — éditorial sous la carte (chargé UNIQUEMENT sur la home).
   La carte reste le hero plein écran ; la page défile pour révéler l'éditorial.
   Aucune de ces règles n'est chargée sur les fiches adresses.
   Tailles de police : échelle réduite de 15 % (2026-08-01).
   ========================================================================== */

/* Libère le scroll de la home (le corps carte est sinon overflow:hidden) et
   fige la carte à une hauteur d'un écran (le bandeau de recherche flotte au-dessus). */
body.home, body.hub { overflow: visible; height: auto; -webkit-user-select: auto; user-select: auto; }
body.home .pd-app, body.hub .pd-app { flex: none; height: calc(100dvh - 76px); min-height: 460px; }
/* ≤760px : statsbar + bottomnav passent en position fixe (~112px) → la carte s'arrête au-dessus */
@media (max-width: 760px) {
  body.home .pd-app { height: calc(100svh - 112px); min-height: 380px; }
  /* Hubs (arrondissement) : le statsbar est masqué (panneau fiche rempli) → réserver la seule bottomnav (56px)
     et neutraliser la hauteur de statsbar réservée par la légende (--sb-h), sinon carte trop courte + légende trop haute. */
  body.hub .pd-app { height: calc(100svh - 56px); min-height: 380px; }
  body.hub { --sb-h: 0px; }
  /* La carte hub réserve DÉJÀ le menu bas (height: 100svh - 56px), contrairement aux fiches adresses
     (carte plein écran, menu bas superposé). Il ne faut donc PAS réajouter ces 56px sur la fiche et les
     contrôles, sinon ils remontent d'une hauteur de menu (fiche décollée du menu, légende/ⓘ/géoloc trop hauts).
     On remplace le 56px (menu) par un petit jeu de 4px et on garde le calage sur la statsbar (--sb-h). */
  body.hub .pd-info { bottom: 0; }                                                              /* fiche collée au menu bas */
  body.hub .maplibregl-ctrl-bottom-left { margin-bottom: calc(4px + var(--sb-h, 0px)); }        /* échelle */
  body.hub .maplibregl-ctrl-bottom-right { margin-bottom: calc(4px + var(--sb-h, 0px) + 52px); }/* contrôles carte au-dessus du ⓘ */
  body.hub .pd-info-btn { bottom: calc(4px + var(--sb-h, 0px) + 10px); }                          /* bouton ⓘ */
  body.hub .pd-legend { bottom: calc(4px + var(--sb-h, 0px) + 62px); }                            /* panneau légende déplié */
  body.hub .pd-legend-box { bottom: calc(4px + var(--sb-h, 0px) + 10px); }                        /* bouton Légende replié */
  /* La HOME réserve DÉJÀ le menu bas ET la statsbar (height: 100svh - 112px) : la carte se termine au-dessus
     des deux barres. Les contrôles ne doivent donc réajouter NI 56px NI --sb-h, sinon ils flottent au milieu
     de la carte (trop hauts). Simple jeu de 4px au-dessus du bas de la carte. */
  body.home .maplibregl-ctrl-bottom-left { margin-bottom: 4px; }                                  /* échelle */
  body.home .maplibregl-ctrl-bottom-right { margin-bottom: calc(4px + 52px); }                    /* contrôles carte au-dessus du ⓘ */
  body.home .pd-info-btn { bottom: calc(4px + 10px); }                                            /* bouton ⓘ */
  body.home .pd-legend { bottom: calc(4px + 62px); }                                              /* panneau légende déplié */
  body.home .pd-legend-box { bottom: calc(4px + 10px); }                                          /* bouton Légende replié */
}

/* ---- Conteneur éditorial ---- */
.home-editorial { background: var(--bg); color: var(--ink); border-top: 1px solid var(--line-warm);
  font-size: 13.6px; user-select: text; -webkit-user-select: text; }
.home-editorial section { max-width: 1080px; margin: 0 auto; padding: 42px 22px; }
.home-editorial [id] { scroll-margin-top: 18px; }
.home-editorial h1, .home-editorial h2, .home-editorial h3 { color: var(--navy); }
.home-editorial p { line-height: 1.62; }
.home-editorial a { color: var(--bronze-dk); }

/* ---- Hero éditorial ---- */
.he-hero { padding-top: 52px; }
.he-hero h1 { font-size: clamp(22px, 3.7vw, 36px); line-height: 1.08; max-width: 22ch; margin: 0 0 14px; }
.he-lead { font-size: clamp(14px, 1.45vw, 16px); line-height: 1.55; max-width: 64ch; color: var(--ink); }
.he-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.he-cta-primary { background: var(--navy); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.he-cta-primary:hover { background: var(--navy-deep, #1a2230); }
.he-cta-ghost { padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line-warm); background: #fff; color: var(--navy); font-weight: 600; text-decoration: none; }
.he-cta-ghost:hover { border-color: var(--bronze); }

/* ---- Sections ---- */
.he-sec > h2 { font-size: clamp(18px, 2.2vw, 24px); margin: 0 0 8px; }
.he-answer { font-size: 14px; color: var(--ink); max-width: 70ch; margin: 0 0 22px; font-weight: 500; }
.he-note { font-size: 11px; color: var(--muted); }

/* ---- Familles de données (cartes) ---- */
.he-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 14px; }
.he-card { display: flex; flex-direction: column; padding: 16px; background: #fff; border: 1px solid var(--line-warm); border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.he-card:hover { border-color: var(--bronze); transform: translateY(-2px); }
.he-card h3 { font-size: 13px; margin: 0 0 6px; }
.he-def { font-size: 11.5px; color: var(--ink); margin: 0 0 6px; }
.he-use { font-size: 11px; color: var(--muted); margin: 0 0 12px; flex: 1; }
.he-more { font-size: 10.5px; font-weight: 700; color: var(--bronze-dk); }

/* ---- Échelles ---- */
.he-scale { margin: 0 0 18px; padding-left: 20px; }
.he-scale li { margin: 0 0 7px; line-height: 1.55; }
.he-arr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 14px; }
.he-arr-k { font-weight: 700; color: var(--navy); font-size: 11px; }
.he-arr a, .he-qgrid a { font-size: 11px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-warm); background: #fff; text-decoration: none; color: var(--navy); }
.he-arr a:hover, .he-qgrid a:hover { border-color: var(--bronze); }
.he-quartiers summary { cursor: pointer; font-weight: 600; color: var(--bronze-dk); padding: 8px 0; }
.he-qgrid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

/* ---- Méthode : encadré ---- */
.he-callout { background: var(--ivory); border: 1px solid var(--bronze); border-left-width: 4px; border-radius: 12px; padding: 16px 18px; margin-top: 16px; }
.he-callout > b { color: var(--navy); display: block; margin-bottom: 6px; font-size: 13.5px; }
.he-callout p { font-size: 12px; margin: 0; }

/* ---- Sources ---- */
.he-sources { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 24px; }
.he-sources li { font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-warm); }
.he-sources a { font-weight: 700; }

/* ---- Profils ---- */
.he-profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.he-profile { background: #fff; border: 1px solid var(--line-warm); border-radius: 14px; padding: 16px; }
.he-profile h3 { font-size: 13px; margin: 0 0 6px; }
.he-profile p { font-size: 11.5px; color: var(--ink); margin: 0; }

/* ---- Lab ---- */
.he-lab { margin: 0 0 12px; padding-left: 20px; }
.he-lab li { margin: 0 0 6px; }
.he-lab a { font-weight: 600; }

/* ---- FAQ ---- */
.he-faq { border: 1px solid var(--line-warm); border-radius: 12px; background: #fff; margin: 0 0 8px; overflow: hidden; }
.he-faq summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--navy); font-size: 13px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.he-faq summary::-webkit-details-marker { display: none; }
.he-faq summary::after { content: "+"; color: var(--bronze-dk); font-weight: 800; flex: none; }
.he-faq[open] summary::after { content: "\2013"; }
.he-faq-a { padding: 0 16px 14px; }
.he-faq-a p { font-size: 12px; color: var(--ink); margin: 0; }

/* ---- Glossaire ---- */
.he-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 24px; margin: 0; }
.he-gloss { padding: 8px 0; border-bottom: 1px solid var(--line-warm); }
.he-gloss dt { font-weight: 700; color: var(--navy); font-size: 12px; }
.he-gloss dd { margin: 2px 0 0; font-size: 11.5px; color: var(--ink); }

/* ---- Chiffres clés (grille de stats, réutilise pd-hub-stat) ---- */
.he-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
.he-kpis .pd-hub-stat { background: #fff; border: 1px solid var(--line-warm); border-radius: 12px; padding: 12px 14px; }
.he-kpis .pd-hub-stat b { display: block; font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.he-kpis .pd-hub-stat .pd-k { font-size: 11.5px; color: var(--ink); }
.he-kpis .pd-hub-stat .lab-kpi-sub { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* ---- Tableau de comparaison ---- */
.he-tablewrap { overflow-x: auto; }
.he-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; border: 1px solid var(--line-warm); border-radius: 12px; overflow: hidden; }
.he-table th, .he-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-warm); }
.he-table thead th { background: var(--ivory); color: var(--navy); font-weight: 700; font-size: 12px; }
.he-table tbody th { font-weight: 600; color: var(--ink); }
.he-table tbody tr:last-child th, .he-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
  .home-editorial section { padding: 30px 16px; }
}

/* ============================================================================
   PIED DE PAGE (repris de la charte metrorealty.fr, adapté au service data)
   ========================================================================== */
.home-footer { background: var(--navy, #232c3f); color: #cdd6e4; padding: 48px 22px 26px; font-size: 13.6px; }
.home-footer a { color: #cdd6e4; text-decoration: none; }
.home-footer a:hover { color: #fff; }
.hf-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 30px; }
.hf-name { font-size: 17px; font-weight: 400; color: #fff; letter-spacing: -.02em; margin-bottom: 12px; }
.hf-name strong { font-weight: 800; }
.hf-desc { font-size: 11.5px; line-height: 1.55; color: #aab6c8; margin: 0 0 14px; max-width: 44ch; }
.hf-addr { font-style: normal; font-size: 11.5px; line-height: 1.7; color: #cdd6e4; margin-bottom: 14px; }
.hf-addr a:hover { color: #fff; }
.hf-socials { display: flex; gap: 10px; }
.hf-socials a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.hf-socials a:hover { border-color: var(--bronze); background: rgba(255,255,255,.06); }
.hf-socials svg { width: 17px; height: 17px; }
.hf-col-t { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bronze-lt, #c7a463); margin-bottom: 12px; }
.hf-col ul { list-style: none; padding: 0; margin: 0; }
.hf-col li { margin: 0 0 8px; font-size: 11.5px; }
.hf-arr { max-width: 1080px; margin: 34px auto 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.hf-arr-t { font-size: 11px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.hf-arr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px 18px; }
.hf-arr-grid a { font-size: 11px; color: #aab6c8; }
.hf-arr-grid a:hover { color: #fff; }
.hf-bottom { max-width: 1080px; margin: 30px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; align-items: center; }
.hf-copy { font-size: 10px; color: #8a97ab; }
.hf-legal { display: flex; flex-wrap: wrap; gap: 16px; }
.hf-legal a { font-size: 10px; color: #aab6c8; }
.hf-legal a:hover { color: #fff; }
@media (max-width: 760px) {
  .hf-grid { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
  .hf-brand { grid-column: 1 / -1; }
  .home-footer { padding-bottom: 128px; } /* dégage le statsbar + la bottomnav fixes */
}
@media (max-width: 440px) { .hf-grid { grid-template-columns: 1fr; } }