.section-communaute {
    --communaute-bg: var(--couleur-21, #fcf5ea);
    --communaute-text: var(--couleur-9, #272621);
    --communaute-muted: #9d8c7b;
    --communaute-accent: #d19166;
    --communaute-border: #ead6c7;
    --communaute-card-bg: rgba(255, 255, 255, 1);

    padding:
        clamp(34px, 3vw, 58px) clamp(15px,
            calc(15px + ((200 - 15) * ((100vw - 400px) / (1900 - 400)))),
            200px) 10px !important;

    background: #fffbf2;
}


/* =========================================================
   INNER
   ========================================================= */

.section-communaute .communaute__inner {
    width: 100%;
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.section-communaute .communaute__header {
    margin-bottom: 22px;

    text-align: center;
}


.section-communaute .communaute__title {
    margin: 0;

    color: var(--communaute-text);

    font-size: clamp(25px,
            calc(25px + ((40 - 25) * ((100vw - 400px) / (1900 - 400)))),
            40px);

    text-transform: none;
}


.section-communaute .communaute__description {
    margin-top: 8px;

    color: var(--communaute-muted);
}


.section-communaute .communaute__description,
.section-communaute .communaute__description p {
    font-size: clamp(13px,
            calc(13px + ((16 - 13) * ((100vw - 400px) / (1900 - 400)))),
            16px);
    color: var(--communaute-muted);
}


.section-communaute .communaute__description p {
    margin: 0;
}


/* =========================================================
   GRID
   ========================================================= */

.section-communaute .communaute__grid {
    display: grid;

    grid-template-columns:
        repeat(3,
            minmax(0, 1fr));

    gap: clamp(14px,
            1.3vw,
            24px);
}


/* =========================================================
   CARD
   ========================================================= */

.section-communaute .communaute__card {
    display: flex;

    min-width: 0;

    flex-direction: column;

    box-sizing: border-box;

    padding:
        clamp(18px, 1.8vw, 28px) clamp(18px, 1.8vw, 28px) clamp(18px, 1.8vw, 26px);

    border: 1px solid var(--communaute-border);

    border-radius: 8px;

    background: var(--communaute-card-bg);
}


/* =========================================================
   TOP
   ========================================================= */

.section-communaute .communaute__top {
    display: flex;

    align-items: center;

    gap: 14px;
}


.section-communaute .communaute__icon {
    display: flex;

    width: clamp(42px,
            3vw,
            54px);

    height: clamp(42px,
            3vw,
            54px);

    flex: 0 0 clamp(42px,
            3vw,
            54px);

    align-items: center;
    justify-content: center;
}


.section-communaute .communaute__icon-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.section-communaute .communaute__texts {
    min-width: 0;
}

.section-communaute .communaute__texts {
    display: block;

    min-width: 0;

    color: inherit;

    text-decoration: none;
}

.section-communaute .communaute__texts:visited {
    color: inherit;
}

.section-communaute .communaute__texts:focus-visible {
    outline: 2px solid var(--communaute-accent);
    outline-offset: 3px;
}


/* =========================================================
   SURTITRE
   ========================================================= */

.section-communaute .communaute__eyebrow {
    margin: 0;

    color: #d39c89;

    font-size: clamp(14px,
            calc(14px + ((16 - 14) * ((100vw - 400px) / (1900 - 400)))),
            16px);

    font-weight: 700;

    text-transform: uppercase;
}


/* =========================================================
   H3
   ========================================================= */

.section-communaute .communaute__card-title {
    margin: 4px 0 0;

    color: var(--communaute-text);

    font-size: clamp(18px,
            calc(18px + ((24 - 18) * ((100vw - 400px) / (1900 - 400)))),
            24px);

    text-transform: none;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.section-communaute .communaute__card-description {
    margin-top: 12px;

    color: var(--communaute-muted);
}


.section-communaute .communaute__card-description,
.section-communaute .communaute__card-description p {
    font-size: clamp(13px,
            calc(13px + ((16 - 13) * ((100vw - 400px) / (1900 - 400)))),
            16px);
}


.section-communaute .communaute__card-description p {
    margin: 0;
    color: var(--communaute-muted);
}


/* =========================================================
   LINK
   ========================================================= */

.section-communaute .communaute__link {
    display: inline-flex;

    width: fit-content;

    align-items: center;

    gap: 9px;

    margin-top: 14px;


    text-decoration: none;

    text-transform: uppercase;
}



.section-communaute .communaute__link * {

    color: var(--communaute-accent);

    font-size: clamp(14px,
            calc(14px + ((16 - 14) * ((100vw - 400px) / (1900 - 400)))),
            16px);

    font-weight: 700;
}


.section-communaute .communaute__arrow {
    display: inline-flex;

    width: 17px;
    height: 13px;

    flex: 0 0 17px;

    align-items: center;
    justify-content: center;

    color: var(--communaute-accent);

    transition: transform .2s ease;
}


.section-communaute .communaute__arrow svg {
    display: block;

    width: 17px;
    height: 13px;
}


/* =========================================================
   FOCUS / HOVER
   ========================================================= */

.section-communaute .communaute__link:focus-visible {
    outline: 2px solid var(--communaute-accent);
    outline-offset: 3px;
}


@media (hover: hover) {

    .section-communaute .communaute__link:hover .communaute__arrow {
        transform: translateX(3px);
    }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media screen and (max-width: 1000px) {

    .section-communaute .communaute__grid {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 720px) {

    main .content .section-communaute {
        padding: 28px 18px 34px !important;
    }

    .section-communaute {
        padding-bottom: 35px !important;
    }

    .section-communaute .communaute__header {
        margin-bottom: 22px;
        text-align: center;
    }

    .section-communaute .communaute__title {
        font-size: clamp(24px, 6.6vw, 30px);
    }

    .section-communaute .communaute__description {
        margin-top: 8px;
    }

    .section-communaute .communaute__description,
    .section-communaute .communaute__description p {
        text-align: center;
    }

    .section-communaute .communaute__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .section-communaute .communaute__card {
        position: relative;

        display: grid;

        grid-template-columns: 48px minmax(0, 1fr) 46px;
        grid-template-areas:
            "icon texts arrow"
            "desc desc desc";

        align-items: center;

        gap: 8px 12px;

        min-height: 124px;

        padding: 20px 20px 18px;

        border-radius: 12px;

    }


    /* =====================================================
       TOP
       ===================================================== */

    .section-communaute .communaute__top {
        display: contents;
    }


    /* =====================================================
       ICONE
       ===================================================== */

    .section-communaute .communaute__icon {
        grid-area: icon;

        width: 46px;
        height: 46px;

        flex: none;

        align-self: center;
    }


    /* =====================================================
       TEXTES
       ===================================================== */

    .section-communaute .communaute__texts {
        grid-area: texts;

        min-width: 0;
    }


    .section-communaute .communaute__eyebrow {
        margin: 0;

        font-weight: 700;

        text-transform: uppercase;
    }


    .section-communaute .communaute__card-title {
        margin: 3px 0 0;

    }


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    .section-communaute .communaute__card-description {
        grid-area: desc;

        margin-top: 2px;

        padding-right: 48px;

        color: var(--communaute-muted);
    }




    /* =====================================================
       CTA
       ===================================================== */
    .section-communaute .communaute__card {
        position: relative;
    }

    .section-communaute .communaute__link {
        position: absolute;

        top: 50%;
        right: 20px;

        display: flex;

        width: 44px;
        height: 44px;

        margin: 0;
        padding: 0;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: var(--communaute-accent);
        color: #fff;

        transform: translateY(-50%);

        text-decoration: none;
    }

    .section-communaute .communaute__link * {

        color: white;
    }


    .section-communaute .communaute__arrow {
        display: flex;

        width: 17px;
        height: 13px;

        flex: 0 0 17px;

        align-items: center;
        justify-content: center;

        margin: 0;

        color: #fff;
    }

    .section-communaute .communaute__arrow svg {
        display: block;

        width: 17px;
        height: 13px;

        margin: 0;
    }

    /*
     * On cache le texte du CTA sur mobile.
     */
    .section-communaute .communaute__link>span:first-child {
        position: absolute;

        width: 1px;
        height: 1px;

        overflow: hidden;

        clip: rect(0 0 0 0);
        clip-path: inset(50%);

        white-space: nowrap;
    }


    .section-communaute .communaute__arrow {
        width: 17px;
        height: 13px;

        flex: 0 0 17px;

        color: #fff;

        transform: none;
    }


    .section-communaute .communaute__arrow svg {
        width: 17px;
        height: 13px;
    }

}

@media screen and (max-width: 500px) {
    .section-communaute .communaute__link {
        width: 34px;
        height: 34px;
    }
}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .section-communaute .communaute__arrow {
        transition: none;
    }

}