.rc-services {
    --rc-services-h: 25rem;

    width: 100%;

    .rc-services__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-medium);
        margin: 0;
        padding: 0;
        list-style: none;

        @media (max-width: 700px) {
            grid-template-columns: 1fr;
        }
    }

    .rc-services__card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: var(--rc-services-h);
        overflow: hidden;
        /* Bandeau : couleur du métier (sous-champ ACF `couleur`). */
        background-color: var(--rc-service-color, var(--color-primary));
        color: var(--color-primary);
        text-decoration: none;

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

    .rc-services__image {
        flex: 1;
        min-height: 0;
        width: 100%;
        object-fit: cover;
        transition: filter 0.2s ease-in-out;
    }

    .rc-services__card:hover .rc-services__image {
        filter: brightness(0.55);
    }

    .rc-services__title {
        position: relative;
        z-index: 1;
        margin: 0;
        text-align: center;
        font-family: var(--font-heading);
        font-size: var(--fs-h5);
        font-weight: 700;
        line-height: 1.15;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--s-medium) var(--s-medium) var(--s-small);

        p {
            margin: 0;
            /* Échappe à la règle globale `p { font-size !important }` (style.css). */
            font-size: inherit !important;

            & + p {
                margin-top: 0.15em;
            }
        }
    }

    /* Bouton sous le titre : remplissage --color-primary de gauche à droite au survol. */
    .rc-services__cta {
        align-self: center;
        margin-bottom: var(--s-medium);
        padding: var(--s-xs) var(--s-medium);
        border: 1px solid var(--color-primary);
        background: linear-gradient(var(--color-primary), var(--color-primary)) no-repeat left / 0% 100%;
        color: inherit;
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-weight: 600;
        transition: background-size 300ms ease, color 300ms ease;
    }

    .rc-services__card:hover .rc-services__cta,
    .rc-services__card:focus-visible .rc-services__cta {
        background-size: 100% 100%;
        color: var(--rc-service-color, var(--color-primary));
    }
}