/*
 * Avant / après.
 *
 * Par défaut — sans JavaScript, ou en mouvement réduit — les deux colonnes sont
 * simplement côte à côte : la comparaison se lit. Ce n'est que si le contrôleur
 * s'installe qu'elles se superposent et que la seconde recouvre la première au
 * défilement. L'état de repli est donc l'état par défaut, jamais un rattrapage.
 */

.avant-apres__scene {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-block-start: clamp(2.5rem, 7vh, 5rem);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    overflow: hidden;
    isolation: isolate;
}

.avant-apres__couche {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.avant-apres__couche--avant {
    background-color: var(--fond-eleve);
}

/* « Après » : la même surface, tramée de points cyan et bordée d'un filet. */
.avant-apres__couche--apres {
    background:
        radial-gradient(circle at 1px 1px, rgb(46 163 242 / 0.22) 1px, transparent 1.5px) 0 0 / 18px 18px,
        var(--fond-eleve);
    box-shadow: inset 3px 0 0 var(--cyan);
}

/* — Mode animé : les couches se superposent et la seconde est révélée — */
.avant-apres__scene.avant-apres--anime {
    grid-template-columns: minmax(0, 1fr);
}

.avant-apres--anime .avant-apres__couche {
    grid-area: 1 / 1;
}

.avant-apres--anime .avant-apres__couche--apres {
    clip-path: inset(0% 100% 0% 0%);
}

.avant-apres__liste {
    display: grid;
    gap: 0.9rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.avant-apres__liste li {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding-block-end: 0.9rem;
    border-block-end: 1px solid var(--trait);
    color: var(--texte-doux);
}

.avant-apres__liste li:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.avant-apres__liste .mono {
    color: var(--texte-tres-doux);
}

.avant-apres__couche--apres .avant-apres__liste li {
    color: var(--texte);
}

.avant-apres__couche--apres .avant-apres__liste .mono {
    color: var(--accent-3);
}

/* La poignée matérialise la ligne de balayage : elle n'existe qu'animée. */
.avant-apres__poignee {
    display: none;
}

.avant-apres--anime .avant-apres__poignee {
    display: block;
    position: absolute;
    inset-block: 0;
    inline-size: 2px;
    margin-inline-start: -1px;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
    z-index: 2;
    pointer-events: none;
}

.avant-apres__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-block-start: clamp(2rem, 5vh, 3rem);
}

.avant-apres__pied .chapo {
    max-inline-size: 52ch;
}

@media (max-width: 40rem) {
    .avant-apres__liste li {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* — Forme « sombre » : côte à côte sur fond nuit, « après » en carte blanche — */
.avant-apres--sombre .avant-apres__scene {
    gap: 1rem;
    border: 0;
    overflow: visible;
}

.avant-apres--sombre .avant-apres__couche {
    border-radius: var(--rayon-lg);
}

.avant-apres--sombre .avant-apres__couche--avant {
    border: 1px solid rgb(255 255 255 / 0.14);
    background: transparent;
}

.avant-apres--sombre .avant-apres__couche--apres {
    background: #fff;
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
    color: var(--encre);
}

.avant-apres--sombre .avant-apres__couche--apres .avant-apres__liste li {
    color: var(--encre);
    border-color: rgb(15 8 65 / 0.08);
}

.avant-apres--sombre .avant-apres__couche--apres .avant-apres__liste .mono {
    color: var(--electrique);
}

.avant-apres--sombre .avant-apres__poignee {
    display: none;
}