/* veillee.css — la veillée : le mur la nuit, une seule porte allumée dans son cadre, posée entre
   deux assises. Constante dans les deux thèmes : ne lit que des couleurs --c-veillee-*. */

.veillee {
  --c-focus: var(--c-veillee-door);
  --c-link-underline: var(--c-veillee-door);
  --c-selection: #5A4A2E;
  --veillee-door-w: clamp(4rem, 3rem + 3vw, 5.5rem);
  --veillee-bar: 0.625rem;
  --veillee-gap: 0.75rem;
  padding-block: var(--s-9) var(--s-9);
  background-color: var(--c-veillee-bg);
  color: var(--c-veillee-ink);
}

.veillee ::selection {
  color: var(--c-veillee-ink);
  background-color: var(--c-selection);
}

.veillee a {
  color: var(--c-veillee-ink);
}

/* ── Le mur la nuit : assise · porte allumée · assise, sur un sol ── */
.veillee__gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  column-gap: calc(0.875rem + 2px + var(--s-5));
  border-block-end: var(--stroke-ground) solid var(--c-veillee-line);
}

.veillee__course {
  box-sizing: border-box;
  block-size: calc(2 * var(--veillee-bar) + var(--veillee-gap));
  margin-block-end: calc(var(--veillee-door-w) * 34 / 16 * 0.22);
  border-block: var(--veillee-bar) solid var(--c-veillee-course);
}

.veillee__door {
  position: relative;
  display: block;
  inline-size: var(--veillee-door-w);
  aspect-ratio: 16 / 34;
  background-color: var(--c-veillee-door);
  border-start-start-radius: var(--r-door);
  border-start-end-radius: var(--r-door);
}

/* le cadre du châtelet : ouvert en bas, il touche le sol */
.veillee__door::before {
  content: "";
  position: absolute;
  inset-block: -0.875rem 0;
  inset-inline: -0.875rem;
  border: 2px solid var(--c-veillee-ink-2);
  border-block-end: 0;
  border-start-start-radius: var(--r-door);
  border-start-end-radius: var(--r-door);
}

/* ── Contenu centré : l'axe est réservé aux seuils ── */
.veillee__inner {
  display: grid;
  justify-items: center;
  row-gap: var(--s-5);
  padding-block-start: var(--s-8);
  text-align: center;
}

.veillee__title {
  font-family: var(--f-title);
  font-size: var(--t-3xl);
  font-weight: var(--w-display-light);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--c-veillee-ink);
}

.veillee__text {
  max-inline-size: var(--measure-narrow);
  color: var(--c-veillee-ink-2);
}