/* Écran d'accueil (web/js/screens/home.js) : classes préfixées .home- uniquement, en plus des classes partagées
   de style.css (.card, .segmented, .search, .results, .list-row, .map-view, .map-selection, .legend-grid,
   .card-footer, .expander). Jetons de tokens.css seulement, aucune couleur en dur, aucun rayon au-delà de 12 px. */

/* titre et ligne calculée */
.home-hero { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 0 var(--s1); }
.home-hero .screen-title { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.home-stats { font-size: var(--fs-13); color: var(--muted); font-variant-numeric: tabular-nums; }

/* colonnes : une seule sous 1080 px */
.home-grid, .home-col { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }

/* carte « Territoire » */
.home-level { display: flex; flex-direction: column; gap: var(--s3); }
.home-facts { display: flex; flex-wrap: wrap; gap: 0 var(--s1); font-size: var(--fs-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.home-facts .num { white-space: nowrap; }
.home-facts-sep { color: var(--muted); }
.home-blurb { font-size: var(--fs-13); color: var(--ink-2); line-height: 1.5; }
.home-search .results { position: relative; z-index: 2; }

/* rangées défilables : récents et repères (ListRow compactes, radius 8) */
.home-row { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4) 4px; scroll-snap-type: x proximity; }
.home-row::-webkit-scrollbar { display: none; }
.home-row .list-row { flex: none; width: auto; min-width: 132px; max-width: 220px; padding: var(--s3) var(--s4); border: 0; border-radius: 18px; box-shadow: none; scroll-snap-align: start; transition: transform var(--d-fast) var(--ease), background-color var(--d-fast); }
.home-row .list-row::after { display: none; }
.home-row .list-row:active { transform: scale(.96); }
.home-row .list-row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-row .list-row-subtitle { white-space: nowrap; }

/* aperçu de la carte : 240 px (320 à 720) via .map-view.is-preview de style.css ; bord à bord dans la carte */
.home-map .home-map-view { margin: 0 calc(-1 * var(--s5)); }
.home-map .home-map-view .map-selection { border-bottom: 0; padding-left: var(--s5); padding-right: var(--s5); }
.home-map .home-map-view .skeleton { height: 240px; border-radius: 0; }
/* états vide et erreur : même hauteur que la carte, texte centré (EmptyState de style.css) */
.home-map .home-map-view .empty { min-height: 240px; justify-content: center; }
.home-map-actions { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--s1)); }
.home-map-note { font-size: var(--fs-13); color: var(--muted); }
.home-map-selection .den { white-space: nowrap; }
.home-map-selection .den small { display: inline; }   /* .map-selection small est en bloc dans style.css */

/* feuille plein écran : carte interactive complète, puis barre de sélection, légende, pied et lien vers l'onglet Carte */
.home-map-full { display: flex; flex-direction: column; min-height: 100%; }
.home-map-full .map-view { margin: 0; }
.home-map-full .map-wrap { height: 62dvh; min-height: 280px; }
.home-map-full-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4) var(--s7); }

/* outils (carte avec une ListRow bord à bord) et à propos */
.home-tools { padding-bottom: 0; }
.home-tools-list { margin: 0 calc(-1 * var(--s5)); border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-12) var(--r-12); box-shadow: none; }
/* le texte des lignes s'aligne sur le titre de la carte (20 px), pas sur le bord de la liste */
.home-tools-list .list-row { padding-left: var(--s5); padding-right: var(--s5); }
.home-tools-list .list-row:not(:last-child)::after { left: var(--s5); }
.home-about { font-size: var(--fs-15); color: var(--ink-2); line-height: 1.5; }

@media (min-width: 720px) {
  .home-row { margin: 0 calc(-1 * var(--s5)); padding: 2px var(--s5) 4px; }
  .home-map .home-map-view .skeleton { height: 320px; }
  .home-map .home-map-view .empty { min-height: 320px; }
  .home-map-full .map-wrap { height: 560px; }
}

/* 1080 px et plus (section 2.3) : deux colonnes, Territoire + récents + repères à gauche (400 px), aperçu de carte à
   droite, Outils et À propos en pleine largeur dessous. La colonne de contenu de style.css est limitée à 720 px :
   elle n'est élargie (main et en-tête) que lorsque l'accueil est l'écran affiché, via :has() ; sans :has(),
   l'accueil reste sur une colonne. */
@media (min-width: 1080px) {
  body:has(#home:not([hidden])) main, body:has(#home:not([hidden])) .app-header-inner { max-width: 1400px; }
  .home-grid { display: grid; grid-template-columns: minmax(400px, 2fr) minmax(0, 3fr); gap: var(--s6) var(--s5); align-items: start; }
  .home-col { gap: var(--s6); }
  .home-grid .section-title { margin-top: var(--s4); }
  .home-col .home-row { margin: 0; padding: 2px 0 4px; }
}

/* listes des niveaux Département et Région : liste déroulante bornée en hauteur, la page ne s'allonge pas */
.home-deplist { max-height: 420px; overflow-y: auto; border: 0; border-radius: 18px; background: var(--surface-2); }
.home-deplist .list-row { background: transparent; }
.home-deplist .list-row:last-child { border-bottom: 0; }
.home-deplist .list-row[disabled] { opacity: .55; }
.home-deplist .empty { padding: var(--s4); }

/* v5.2 : cinq niveaux (Commune, Circonscription, Département, Région, France) ; sur un écran étroit, le contrôle passe
   sur deux lignes au lieu de défiler et de cacher les derniers niveaux ; la copie des libellés suit le même repli */
.home-territoire .segmented.block { flex-wrap: wrap; overflow: visible; }
.home-territoire .segmented.block .segmented-clone { flex-wrap: wrap; min-width: 0; }