/* motifs.css — motifs de la §6 : puces, coupure de seuil, bandeau, ligne de ciel, cadran */

/* ── Puces ─────────────────────────────────────────────── */

/* disque : listes neutres */
.m-sun {
  display: inline-block;
  flex: none;
  inline-size: var(--bullet-sun);
  block-size: var(--bullet-sun);
  border-radius: 50%;
  background-color: var(--c-sun);
}

/* porte : preuves et termes définis */
.m-door {
  display: inline-block;
  flex: none;
  inline-size: var(--bullet-door-w);
  block-size: var(--bullet-door-h);
  border-start-start-radius: var(--r-door);
  border-start-end-radius: var(--r-door);
  background-color: var(--c-door);
}

/* assise : jumeau CSS du primitif courses — deux barres séparées par un intervalle */
.m-course,
.band__course {
  display: block;
  box-sizing: border-box;
  block-size: calc(2 * var(--course-bar) + var(--course-gap));
  border-block: var(--course-bar) solid var(--c-terra);
}

/* ── Coupure de seuil (typographie en ligne) ───────────── */
.split {
  display: inline-block;
  white-space: nowrap;
}

/* la porte s'assoit sur la ligne de base ; sa tête s'aligne sur la hauteur des ascendantes de b */
.split__door {
  display: inline-block;
  inline-size: var(--split-door-w);
  block-size: var(--split-door-h);
  margin-inline: var(--split-gap);
  vertical-align: baseline;
  color: var(--c-door);
}

/* ── Bandeau · entre deux mouvements, pleine largeur ───── */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  column-gap: var(--s-4);
  padding-block-start: var(--s-6);
  border-block-end: var(--stroke-ground) solid var(--c-ink);
}

/* les assises tombent à 22 % de la hauteur de la porte au-dessus de son pied */
.band__course {
  margin-block-end: calc(var(--door-h) * .22);
}

.band__door {
  display: grid;
  place-items: end center;
  box-sizing: border-box;
  inline-size: var(--door-w);
  block-size: var(--door-h);
  padding-block-end: var(--s-4);
  border-start-start-radius: var(--r-door);
  border-start-end-radius: var(--r-door);
  background-color: var(--c-door);
}

.band__num {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: var(--w-numeral);
  line-height: 1;
  color: var(--c-door-text);
  font-variant-numeric: lining-nums;
}

/* ── Ligne de ciel · séparateur interne à une section ──── */
.skyline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  color: var(--c-ink-3);
}

/* les deux tronçons de filet, de part et d'autre du profil */
.skyline::before,
.skyline::after {
  content: "";
  border-block-end: 1.5px solid currentColor;
}

.skyline__step {
  inline-size: 3.5rem;
  block-size: .625rem;
}

/* ── Cadran · heure de lecture → angle du soleil ───────── */
.dial {
  display: block;
  inline-size: var(--dial-w);
  aspect-ratio: 100 / 72;
  color: var(--c-ink);
}

.dial__sun {
  color: var(--hour-sun);
  transform-box: view-box;
  transform-origin: 50px 50px;
  transform: rotate(calc(var(--hour-angle) * var(--sun-dir)));
}