.rc-avis {
    --rc-avis-quote: #D4A82C;
    --rc-avis-rule:  var(--color-primary);
    --rc-avis-gap:   var(--s-xl);
    --rc-avis-lines: 8;

    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr 2fr;
    gap: var(--rc-avis-gap);
    align-items: center;
    font-family: var(--font-body);
    color: var(--color-body);

    .rc-avis__nav {
        display: flex;
        gap: var(--s-medium);
        align-items: center;
        justify-content: center;
    }

    .rc-avis__btn {
        background: transparent;
        border: none;
        color: var(--color-primary);
        cursor: pointer;
        padding: var(--s-xs);
        line-height: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;

        &:hover {
            transform: scale(1.1);
        }

        &:focus-visible {
            outline: 2px solid var(--color-tertiary);
            outline-offset: 2px;
        }

        &[disabled] {
            opacity: 0.3;
            cursor: default;
            pointer-events: none;
        }
    }

    .rc-avis__viewport {
        grid-column: 2 / span 2;
        overflow: hidden;
    }

    .rc-avis__track {
        display: flex;
        gap: var(--rc-avis-gap);
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .rc-avis__item {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        column-gap: var(--s-medium);
        flex: 0 0 calc((100% - var(--rc-avis-gap)) / 2);
        padding: var(--s-large) var(--s-xl) var(--s-large) var(--s-xl);
        border-left: 1px solid var(--rc-avis-rule);
        box-sizing: border-box;
        line-height: 1.5;
    }

    .rc-avis__quote {
        color: var(--rc-avis-quote);
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 4rem;
        line-height: 1;
        font-weight: 700;
        pointer-events: none;
    }

    /* Guillemet fermant : inline, collé au dernier mot de l'avis.
       line-height: 0 l'empêche d'écarter la ligne malgré sa taille. */
    .rc-avis__contenu > *:last-child::after {
        content: "”";
        margin-left: 0.1em;
        color: var(--rc-avis-quote);
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 4rem;
        font-weight: 700;
        line-height: 0;
        vertical-align: -30px;
    }

    .rc-avis__contenu {
        font-size: var(--fs-body);
        margin-bottom: var(--s-medium);

        /* Classe posée par avis.php quand le texte dépasse le budget de
           caractères : coupe à --rc-avis-lines lignes avec « … ». */
        &.rc-avis__contenu--clamp {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: var(--rc-avis-lines);
            line-clamp: var(--rc-avis-lines);
            overflow: hidden;
        }

        &.is-expanded {
            display: block;
            overflow: visible;
            -webkit-line-clamp: unset;
            line-clamp: unset;
        }

        p {
            margin: 0 0 var(--s-xs);

            /* Évite une marge basse en double avec celle du conteneur. */
            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .rc-avis__more {
        display: inline-block;
        width: auto;
        margin: calc(var(--s-xs) * -1) 0 var(--s-medium);
        padding: 0;
        background: none;
        border: none;
        border-bottom: 1px solid currentColor;
        border-radius: 0;
        color: var(--color-primary);
        cursor: pointer;
        font: inherit;
        font-size: 0.875rem;

        &:hover {
            color: var(--rc-avis-quote);
        }

        &:focus-visible {
            outline: 2px solid var(--color-tertiary);
            outline-offset: 2px;
        }
    }

    .rc-avis__auteur {
        font-size: 0.875rem;
        line-height: 1.4;
        color: var(--rc-avis-quote);

        p {
            margin: 0;
        }

        p:first-child {
            color: var(--color-tertiary);
            font-weight: 600;
        }
    }

    /* Responsive */
    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        gap: var(--s-large);
        padding: var(--s-xl) var(--s-medium);

        .rc-avis__nav {
            grid-column: 1;
            order: -1;
            justify-content: flex-start;
        }

        .rc-avis__viewport {
            grid-column: 1;
        }

        .rc-avis__item {
            flex: 0 0 calc((100% - var(--rc-avis-gap)) / 2);
        }
    }

    @media (max-width: 700px) {
        .rc-avis__item {
            flex: 0 0 100%;

            .rc-avis__quote { font-size: 3rem; }
        }
    }
}