/**
 * GATARD Pro Pages 1.9.78
 * CMS 9 uniquement — finition responsive ciblée : titre entre séparateurs,
 * bloc Projet réellement aéré, image décollée des bords et titre centré mobile.
 */

/* Portée stricte : aucune règle ne sort de la CMS 9. */
html body.cms-id-9 #gatard-events.gatard-events {
    --gatard-events-v1978-gutter: 15px;
    --gatard-events-v1978-section-gap: clamp(40px, 4.2vw, 72px);
    --gatard-events-v1978-block-padding: clamp(24px, 3vw, 48px);
    overflow-x: clip !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__inner {
    width: min(1800px, calc(100% - (var(--gatard-events-v1978-gutter) * 2))) !important;
    max-width: 1800px !important;
    margin-inline: auto !important;
}

/*
 * « Pour tous vos événements » : la ligne de gauche, le texte puis la ligne
 * de droite occupent trois colonnes stables. Le titre ne peut plus sortir
 * des séparateurs, même si une ancienne règle flex est encore en cache.
 */
html body.cms-id-9 #gatard-events.gatard-events .gatard-events__section-title:not(.gatard-events__section-title--gallery) {
    display: grid !important;
    grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: clamp(12px, 1.7vw, 28px) !important;
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin: var(--gatard-events-v1978-section-gap) auto clamp(20px, 2vw, 30px) !important;
    padding: 0 !important;
    text-align: center !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__section-title:not(.gatard-events__section-title--gallery) > i {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(133, 118, 80, .46) !important;
    transform: none !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__section-title:not(.gatard-events__section-title--gallery) > h2 {
    display: block !important;
    position: static !important;
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Poppins", Arial, Helvetica, sans-serif !important;
    font-size: clamp(23px, 2.25vw, 38px) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: .025em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    transform: none !important;
}

/* Rythme vertical homogène des grands blocs. */
html body.cms-id-9 #gatard-events.gatard-events .gatard-events__cards {
    gap: clamp(16px, 1.7vw, 28px) !important;
}

html body.cms-id-9 #gatard-events.gatard-events :is(
    .gatard-events__commitment,
    .gatard-events__project,
    .gatard-events__gallery
) {
    margin-top: var(--gatard-events-v1978-section-gap) !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__commitment {
    padding: clamp(24px, 2.8vw, 44px) clamp(18px, 3vw, 50px) !important;
}

/*
 * Bloc Projet : vraie marge interne sur les quatre côtés. L'image, le texte
 * et les garanties ne peuvent plus toucher la bordure du bloc.
 */
html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project {
    display: grid !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: var(--gatard-events-v1978-block-padding) !important;
    gap: clamp(24px, 2.8vw, 46px) !important;
    overflow: hidden !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project > figure {
    position: static !important;
    justify-self: center !important;
    align-self: center !important;
    width: min(92%, 470px) !important;
    max-width: 470px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project > figure > img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 780px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > h2,
html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > h2 * {
    display: block !important;
    position: static !important;
    float: none !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-family: "Poppins", Arial, Helvetica, sans-serif !important;
    font-size: clamp(27px, 2.55vw, 45px) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.015em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-indent: 0 !important;
    text-wrap: balance !important;
    transform: none !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > p {
    width: min(100%, 650px) !important;
    max-width: 650px !important;
    margin: clamp(11px, 1.2vw, 18px) auto 0 !important;
    padding: 0 !important;
    font-size: clamp(13px, .86vw, 15.5px) !important;
    line-height: 1.58 !important;
    text-align: center !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > .gatard-events__small-btn {
    align-self: center !important;
    margin: clamp(15px, 1.5vw, 22px) auto 0 !important;
}

html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-list {
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-top: clamp(17px, 2vw, 27px) !important;
}

/* TABLETTE : même logique verticale que le mobile, mais sans surdimensionner. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    html body.cms-id-9 #gatard-events.gatard-events {
        --gatard-events-v1978-section-gap: clamp(42px, 5.5vw, 62px);
        --gatard-events-v1978-block-padding: clamp(25px, 4vw, 42px) clamp(22px, 4.8vw, 48px);
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__section-title:not(.gatard-events__section-title--gallery) {
        grid-template-columns: minmax(26px, 1fr) auto minmax(26px, 1fr) !important;
        column-gap: clamp(11px, 2vw, 20px) !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__section-title:not(.gatard-events__section-title--gallery) > h2 {
        font-size: clamp(21px, 3.2vw, 31px) !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "visual" "copy" "trust" !important;
        gap: clamp(22px, 3.4vw, 34px) !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project > figure {
        grid-area: visual !important;
        width: min(70%, 500px) !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy {
        grid-area: copy !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > h2,
    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > h2 * {
        font-size: clamp(25px, 4vw, 37px) !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-list {
        grid-area: trust !important;
    }
}

/* MOBILE */
@media (max-width: 767.98px) {
    html body.cms-id-9 #gatard-events.gatard-events {
        --gatard-events-v1978-section-gap: 40px;
        --gatard-events-v1978-block-padding: 20px 15px 22px;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__inner {
        width: calc(100% - 30px) !important;
        margin-inline: 15px !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__section-title:not(.gatard-events__section-title--gallery) {
        grid-template-columns: minmax(14px, 1fr) auto minmax(14px, 1fr) !important;
        column-gap: clamp(7px, 2.4vw, 11px) !important;
        width: 100% !important;
        margin-top: 40px !important;
        margin-bottom: 20px !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__section-title:not(.gatard-events__section-title--gallery) > h2 {
        width: auto !important;
        max-width: none !important;
        font-size: clamp(15px, 4.45vw, 20px) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "visual" "copy" "trust" !important;
        width: 100% !important;
        gap: 20px !important;
        padding: 20px 15px 22px !important;
        border-radius: 14px !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project > figure {
        grid-area: visual !important;
        width: min(82%, 380px) !important;
        max-width: 380px !important;
        margin: 0 auto !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy {
        grid-area: copy !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 2px !important;
        text-align: center !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > h2,
    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > h2 * {
        display: block !important;
        align-self: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        font-size: clamp(20px, 5.65vw, 26px) !important;
        line-height: 1.12 !important;
        letter-spacing: -.01em !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > p {
        width: 100% !important;
        max-width: 500px !important;
        margin: 10px auto 0 !important;
        font-size: clamp(12.7px, 3.5vw, 14px) !important;
        line-height: 1.55 !important;
        text-align: center !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-copy > .gatard-events__small-btn {
        width: min(100%, 320px) !important;
        margin: 15px auto 0 !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project-list {
        grid-area: trust !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 16px 0 0 !important;
    }
}

@media (max-width: 359.98px) {
    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__section-title:not(.gatard-events__section-title--gallery) {
        grid-template-columns: minmax(8px, 1fr) auto minmax(8px, 1fr) !important;
        column-gap: 6px !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__section-title:not(.gatard-events__section-title--gallery) > h2 {
        font-size: clamp(13.4px, 4.15vw, 15px) !important;
    }

    html body.cms-id-9 #gatard-events.gatard-events .gatard-events__project {
        padding: 18px 12px 20px !important;
    }
}