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

    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr 2fr;
    gap: var(--rc-avis-gap);
    align-items: center;
    padding: var(--s-xxl) var(--s-xl);
    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 {
        position: relative;
        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;

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

        &::before {
            content: "\201C";
            top: -0.5rem;
            left: var(--s-medium);
        }

        &::after {
            content: "\201D";
            bottom: -2rem;
            right: var(--s-medium);
        }
    }

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

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

    .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%;

            &::before { font-size: 3rem; }
            &::after  { font-size: 3rem; }
        }
    }
}