/* Composition propre au chapitre « D'ou viennent les biais ».
   Chaque selecteur commence par .p-d-ou-viennent-les-biais, sans exception.
   Proprietes logiques seulement : l'arabe se sert en RTL. */

/* La liste des villes : des cases a cocher en grille, chacune avec son
   intitule relie. Le libelle est cliquable, la cible fait 44px de haut. */
.p-d-ou-viennent-les-biais .villes-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
@media (min-width: 34rem) {
  .p-d-ou-viennent-les-biais .villes-liste { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.p-d-ou-viennent-les-biais .villes-liste > li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  border: 1px solid var(--rule);
  padding-inline: var(--s-3);
}
.p-d-ou-viennent-les-biais .villes-liste input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  accent-color: var(--accent);
  flex: none;
}
/* L'intitule occupe toute la ligne : la case fait 18 px, la cible qu'on vise
   en fait 44. Sans cela un doigt ou une main qui tremble rate la case. */
.p-d-ou-viennent-les-biais .villes-liste label {
  font: 400 var(--t-s) var(--sans);
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  min-block-size: 44px;
  cursor: pointer;
}

/* Le tableau qui met le reglage pose en face du resultat mesure. C'est la
   piece maitresse de la page : les deux colonnes doivent tomber a l'oeil. */
.p-d-ou-viennent-les-biais .compare {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t-s);
}
.p-d-ou-viennent-les-biais .compare th,
.p-d-ou-viennent-les-biais .compare td {
  border-block-end: 1px solid var(--rule);
  padding: var(--s-2) var(--s-3);
  text-align: start;
}
.p-d-ou-viennent-les-biais .compare th { font: 600 var(--t-xs) var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mid); }
.p-d-ou-viennent-les-biais .compare .nombre { font-variant-numeric: tabular-nums; text-align: end; }

/* Le corpus rendu visible : une boite qui defile, jamais une boite qui cache. */
.p-d-ou-viennent-les-biais .corpus {
  max-block-size: 16rem;
  overflow: auto;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  padding: var(--s-4);
  font-size: var(--t-s);
}
.p-d-ou-viennent-les-biais .corpus p { margin-block: 0 var(--s-2); max-width: none; }

/* Une absence se dit en mots, pas par une case vide. */
.p-d-ou-viennent-les-biais .absentes { font-size: var(--t-s); color: var(--ink-mid); }

/* Le texte engendre, pour qu'on le distingue du texte de la page. */
.p-d-ou-viennent-les-biais .engendre {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: var(--s-4);
  font: 400 var(--t-m)/1.6 var(--serif);
}

.p-d-ou-viennent-les-biais .bloc { margin-block-start: var(--s-6); }
.p-d-ou-viennent-les-biais .bloc > h3 { margin-block-end: var(--s-3); }