/* ============================================================
   SpiLi — Les lieux de la distillation
   Identité « Le Filet » · lot V-1
   ------------------------------------------------------------
   La page qui dessine le niveau N3 du corpus. Elle réemploie la
   scène de l'Atlas (`css/carte.css`) : même régime sombre, même
   fond, même graticule. Ce qui s'ajoute ici est le semis, et la
   manière d'en dire la mesure sans la faire passer pour un état
   du monde.
   ============================================================ */

.semis-scene { margin-bottom: 14px; }

/* Le semis. Les marques sont claires sur le fond sombre, mais un ton en
   dessous du blanc des repères de l'Atlas : ce ne sont pas des entrées du
   corpus, ce sont des points de relevé, et la hiérarchie doit se voir si les
   deux couches se croisent un jour sur la même carte. */
.semis {
  fill: var(--spili-texte-doux);
  stroke: none;
}

.semis-attribution {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--spili-texte-faible);
  border-top: 1px solid var(--spili-trait);
  padding-top: 10px; margin: 0;
}

.semis-hors {
  font-family: var(--spili-data); font-size: 11px;
  color: var(--spili-texte-faible); margin-top: 10px;
}

/* ---------- La répartition ----------
   Une barre, pas un camembert : on compare des longueurs, et l'ordre est déjà
   l'information. Le nombre reste écrit — une barre sans chiffre demande au
   lecteur d'estimer ce qu'on connaît exactement. */

.semis-pays { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.semis-pays li {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) 56px;
  align-items: center; gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--spili-trait-faible);
}
.semis-pays li:last-child { border-bottom: 0; }
.semis-pays-nom { font-size: 14.5px; }
.semis-pays-barre { display: block; height: 10px; background: var(--spili-trait-faible); }
.semis-pays-barre > span { display: block; height: 100%; background: var(--spili-texte); }
.semis-pays-nb {
  font-family: var(--spili-data); font-size: 12.5px;
  font-variant-numeric: tabular-nums; text-align: right;
  color: var(--spili-texte-doux);
}
.semis-reste {
  margin-top: 14px; font-size: 14px; color: var(--spili-texte-faible);
  max-width: 720px;
}

/* ---------- Les fondations datées ---------- */

.semis-datees {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* `min(300px, 100%)` et non `300px` : sous 320 px de fenêtre, une piste de
     300 px déborde du conteneur — mesuré à 5 px lors de la recette du 30 août.
     Le `min()` laisse la piste rétrécir quand la place manque. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 2px; background: var(--spili-trait);
  border: 1px solid var(--spili-trait);
}
.semis-datees li {
  background: var(--spili-fond-eleve);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.semis-datee-annee {
  font-family: var(--spili-data); font-size: 12px;
  letter-spacing: 0.08em; color: var(--spili-texte-faible);
  font-variant-numeric: tabular-nums;
}
.semis-datee-nom { font-size: 15px; color: var(--spili-texte); }
.semis-datee-lieu { font-size: 13px; color: var(--spili-texte-doux); }
/* La réserve est écrite, jamais suggérée : « fondation revendiquée » et
   « fondée en » ne disent pas la même chose, et l'histoire des spiritueux est
   saturée de la seconde formule employée à la place de la première. */
.semis-datee-reserve {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--spili-texte-faible);
  margin-top: 2px;
}

@media (max-width: 560px) {
  .semis-pays li { grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 10px; }
  .semis-pays-nom { font-size: 13.5px; }
}

/* ------------------------------------------------------------------
   Le relevé par pays — lot L-2
   Les fiches réutilisent la liste du répertoire (`.rep-liste`) : c'est
   le même objet de lecture — un nom, une ligne d'appareil — et deux
   mises en page pour le même objet finiraient par diverger.
   ------------------------------------------------------------------ */

.dist-liste { margin-top: 28px; }

.dist-sans-site {
  font-family: var(--spili-titre);
  font-size: 1.12rem; font-weight: 600;
  color: var(--spili-texte);
}

.dist-adresse { color: var(--spili-texte-doux); }

.dist-tel { color: var(--spili-accent); text-decoration: none; }
.dist-tel:hover, .dist-tel:focus-visible { text-decoration: underline; }

/* « Ouvert au public » est la seule mention mise en avant : c'est
   l'information qui, pour un musée, distingue l'outil industriel du
   lieu qui se visite. Elle est marquée par une trame, pas par une
   couleur — la charte réserve la couleur au sujet documenté. */
.dist-accueil {
  padding-left: 10px;
  border-left: var(--spili-notation) solid var(--spili-texte);
  color: var(--spili-texte-doux);
}

.dist-osm { color: var(--spili-texte-faible); }

/* Les portes par pays. Une grille dense de liens : c'est un index, pas une
   navigation principale — il doit tenir en un coup d'œil sous le décompte. */
.semis-portes {
  margin-top: 32px;
  border-top: var(--spili-filet) solid var(--spili-texte);
  padding-top: 18px;
}

.semis-portes-titre {
  font-family: var(--spili-data);
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0 0 12px;
}

.semis-portes ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 24px;
}

.semis-portes a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 5px 0;
  text-decoration: none;
  color: var(--spili-texte-doux);
  border-bottom: 1px solid var(--spili-trait-faible);
}

.semis-portes a:hover, .semis-portes a:focus-visible { color: var(--spili-accent-fort); }

.semis-portes-nb {
  font-family: var(--spili-data);
  font-size: 0.76rem;
  color: var(--spili-texte-faible);
  font-variant-numeric: tabular-nums;
}

.semis-pays-nom { color: inherit; }
a.semis-pays-nom:hover, a.semis-pays-nom:focus-visible { color: var(--spili-accent-fort); }