/* Photo de machine à repères numérotés (accueil, « derrière la vitre ») et la liste qu'ils annoncent.
   Les repères sont en % de l'image (--x, --y) : une autre photo = d'autres coordonnées. */
.machine-spots__spot {
    position: absolute;
    top: var(--y);
    left: var(--x);
    display: grid;
    place-items: center;
    width: 2.875rem;
    height: 2.875rem;
    translate: -50% -50%;
    border-radius: 50%;
    background-color: var(--color-ink);
    box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--color-ink) 14%, transparent);
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--fw-display);
}

/* Liste numérotée comme les repères : 01, 02, 03 dans la marge, titre puis texte. */
.numbered-list {
    counter-reset: spot;
}

.numbered-list > li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-2);
    counter-increment: spot;
}

.numbered-list > li::before {
    content: counter(spot, decimal-leading-zero);
    grid-row: span 2;
    color: var(--text-link);
    font-family: var(--font-display);
    font-weight: var(--fw-display);
}

.numbered-list h3 {
    font-size: var(--text-xl);
}

.numbered-list p {
    color: var(--text-secondary);
}