/* ==========================================================================
   HISTOIRE : mise en page d'un long récit, pensée pour la lecture
   ========================================================================== */

.recit__retour {
    display: inline-block;
    margin-bottom: var(--esp-3);
    color: var(--color-gray-texte);
    font-size: var(--fs-petit);
    text-decoration: none;
}

.recit__retour:hover {
    color: var(--color-white);
}

.recit__source {
    margin-top: var(--esp-2);
    color: var(--color-gray-texte);
    font-size: var(--fs-petit);
    font-style: italic;
}

/* Colonne de lecture : ~68 caractères par ligne, bien plus confortable */
.recit__texte {
    max-width: var(--largeur-lecture);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.75;
}

.recit__texte p + p {
    margin-top: var(--esp-3);
}

.recit__texte h2 {
    margin-block: clamp(var(--esp-4), 4vw, var(--esp-6)) var(--esp-2);
    font-size: 1.5rem;
}

.recit__texte h2:first-child {
    margin-top: 0;
}

.recit__texte em {
    color: var(--color-white);
}

/* Citations mises en avant : elles coupent le texte et attirent l'œil */
.recit__citation {
    margin: clamp(var(--esp-4), 4vw, var(--esp-6)) 0;
    padding: var(--esp-1) 0 var(--esp-1) var(--esp-3);
    border-left: 4px solid var(--color-blue-light);
}

.recit__citation p {
    color: var(--color-white);
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
    font-weight: 700;
    line-height: 1.3;
}

.recit__fin {
    color: var(--color-white);
    font-weight: 700;
}