.citations {
    padding-block: 0;
    min-block-size: var(--vh);
    display: grid;
    align-content: center;
    overflow: clip;
}

.citations__scene {
    display: grid;
    gap: clamp(2rem, 6vh, 4rem);
    align-content: center;
    min-block-size: 60vh;
}

.citations__pile {
    display: grid;
    min-block-size: clamp(12rem, 32vh, 20rem);
}

.citations__item {
    grid-area: 1 / 1;
    display: grid;
    gap: 1.5rem;
    align-content: center;
    margin: 0;
}

.citations__texte {
    font-family: var(--police-titre);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.14;
    max-inline-size: 22ch;
    text-wrap: balance;
}

/* Les guillemets français, dessinés et non typographiés : ils font motif. */
.citations__texte::before {
    content: "«";
    color: var(--accent);
    margin-inline-end: 0.2em;
}

.citations__texte::after {
    content: "»";
    color: var(--accent);
    margin-inline-start: 0.2em;
}

.citations__auteur {
    display: grid;
    gap: 0.2rem;
}

.citations__nom {
    font-family: var(--police-texte);
    font-weight: 700;
    font-size: var(--t-md);
}

.citations__puces {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

.citations__puce {
    inline-size: 2.5rem;
    block-size: 2px;
    background: var(--trait-fort);
    transition: background-color 0.4s var(--ease-sortie);
}

.citations__puce--active {
    background: var(--flux);
}

/* Sans JavaScript : les citations s'empilent normalement, les unes sous les autres. */
.citations--statiques .citations__pile {
    display: grid;
    gap: 3rem;
}

.citations--statiques .citations__item {
    grid-area: auto;
    opacity: 1;
}

.citations--statiques .citations__puces {
    display: none;
}