/**
 * GATARD Pro Pages 1.9.76
 * CMS 9 uniquement — finition visuelle responsive Événement / Privatisation.
 * Images contenues et intégrées en transparence, typographie Poppins adaptative,
 * projet centré et garanties conservées sur une seule ligne de trois éléments.
 */

/* Typographie CMS 9 uniquement. */
html body.cms-id-9 #gatard-events,
html body.cms-id-9 #gatard-events h1,
html body.cms-id-9 #gatard-events h2,
html body.cms-id-9 #gatard-events h3,
html body.cms-id-9 #gatard-events p,
html body.cms-id-9 #gatard-events a,
html body.cms-id-9 #gatard-events button,
html body.cms-id-9 #gatard-events strong,
html body.cms-id-9 #gatard-events span {
    font-family: "Poppins", Arial, Helvetica, sans-serif !important;
}

/* HERO : image plus légère, contenue, sans cadre opaque et toujours éloignée du menu. */
html body.cms-id-9 #gatard-events .gatard-events__hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
    gap: clamp(30px, 3.7vw, 66px) !important;
}

html body.cms-id-9 #gatard-events .gatard-events__hero-media {
    justify-self: center !important;
    width: min(100%, clamp(470px, 40vw, 720px)) !important;
    max-width: 720px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.cms-id-9 #gatard-events .gatard-events__hero-media > img {
    width: 100% !important;
    max-width: 720px !important;
    max-height: clamp(330px, 34vw, 590px) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: clamp(12px, 1vw, 18px) !important;
    opacity: .90 !important;
    filter: saturate(.94) contrast(.98) !important;
}

/* Toutes les photos restent proportionnées et ne prennent jamais une hauteur excessive. */
html body.cms-id-9 #gatard-events .gatard-event-card figure {
    height: clamp(170px, 12.5vw, 225px) !important;
    max-height: 225px !important;
    aspect-ratio: auto !important;
    background: transparent !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card figure > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: .92 !important;
    filter: saturate(.96) contrast(.99) !important;
}

html body.cms-id-9 #gatard-events .gatard-events__project figure {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 520px !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html body.cms-id-9 #gatard-events .gatard-events__project figure img {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    max-height: 390px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: clamp(12px, 1vw, 17px) !important;
    opacity: .90 !important;
    filter: saturate(.94) contrast(.98) !important;
}

html body.cms-id-9 #gatard-events .gatard-events__gallery-item img {
    opacity: .94 !important;
    filter: saturate(.96) contrast(.99) !important;
}

/* Textes réellement adaptatifs sur toute la page. */
html body.cms-id-9 #gatard-events .gatard-events__hero-copy p,
html body.cms-id-9 #gatard-events .gatard-event-card p,
html body.cms-id-9 #gatard-events .gatard-events__commitment-grid article p,
html body.cms-id-9 #gatard-events .gatard-events__project-copy p,
html body.cms-id-9 #gatard-events .gatard-events__section-title--gallery p {
    font-size: clamp(13px, .88vw, 16px) !important;
    line-height: clamp(1.52, 1.58, 1.64) !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card h3,
html body.cms-id-9 #gatard-events .gatard-events__commitment-grid article h3 {
    font-size: clamp(15px, 1vw, 19px) !important;
    line-height: 1.28 !important;
}

/* PROJET : titre centré dans la même famille graphique que le titre principal. */
html body.cms-id-9 #gatard-events .gatard-events__project {
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr) !important;
    grid-template-areas:
        "visual copy"
        "trust trust" !important;
    align-items: center !important;
    gap: clamp(24px, 3vw, 48px) !important;
    padding: clamp(24px, 3vw, 46px) !important;
}

html body.cms-id-9 #gatard-events .gatard-events__project > figure {
    grid-area: visual !important;
    justify-self: center !important;
}

html body.cms-id-9 #gatard-events .gatard-events__project-copy {
    grid-area: copy !important;
    width: 100% !important;
    text-align: center !important;
}

html body.cms-id-9 #gatard-events .gatard-events__project-copy h2,
html body.cms-id-9 #gatard-events .gatard-events__project-copy h2 * {
    width: min(100%, 900px) !important;
    margin: 0 auto !important;
    font-family: "Poppins", Arial, Helvetica, sans-serif !important;
    font-size: clamp(34px, 3.7vw, 66px) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-wrap: balance !important;
}

html body.cms-id-9 #gatard-events .gatard-events__project-copy p {
    width: min(100%, 760px) !important;
    margin: clamp(14px, 1.35vw, 21px) auto 0 !important;
    text-align: center !important;
    text-wrap: pretty !important;
}

html body.cms-id-9 #gatard-events .gatard-events__project-copy .gatard-events__small-btn {
    display: inline-flex !important;
    width: auto !important;
    margin: clamp(18px, 1.7vw, 26px) auto 0 !important;
}

/* Les trois garanties restent sur une seule rangée, centrées sous le projet. */
html body.cms-id-9 #gatard-events .gatard-events__project-list {
    grid-area: trust !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(10px, 1.5vw, 24px) !important;
    width: min(100%, 980px) !important;
    margin: 0 auto !important;
    padding: clamp(20px, 2.2vw, 32px) 0 0 !important;
    border: 0 !important;
    border-top: 1px dashed rgba(191, 135, 50, .46) !important;
}

html body.cms-id-9 #gatard-events .gatard-events__project-list p {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(7px, .75vw, 11px) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 clamp(4px, .7vw, 10px) !important;
    font-family: "Poppins", Arial, Helvetica, sans-serif !important;
    font-size: clamp(11px, .78vw, 14px) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    overflow-wrap: normal !important;
}

html body.cms-id-9 #gatard-events .gatard-events__project-list .gatard-events__round-ico {
    flex: 0 0 auto !important;
    width: clamp(38px, 3vw, 48px) !important;
    height: clamp(38px, 3vw, 48px) !important;
    margin: 0 auto !important;
}

/* TABLETTE : même logique centrée que le mobile, sans image surdimensionnée. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    html body.cms-id-9 #gatard-events .gatard-events__hero {
        padding-top: max(38px, calc(var(--gatard-mobile-menu-safe-offset, 0px) + 24px), calc(var(--ccm-quick-real-height, 0px) + 22px)) !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__hero-media {
        width: min(86%, 680px) !important;
        max-width: 680px !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__hero-media > img {
        max-width: 680px !important;
        max-height: clamp(340px, 49vw, 510px) !important;
    }

    html body.cms-id-9 #gatard-events .gatard-event-card figure {
        height: clamp(175px, 22vw, 220px) !important;
        max-height: 220px !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "visual"
            "copy"
            "trust" !important;
        width: min(100%, 960px) !important;
        gap: clamp(22px, 3.2vw, 34px) !important;
        padding: clamp(26px, 4vw, 44px) clamp(22px, 4.5vw, 52px) !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project figure {
        width: min(76%, 560px) !important;
        max-width: 560px !important;
        margin: 0 auto !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project figure img {
        width: 100% !important;
        max-width: 560px !important;
        max-height: 370px !important;
    }

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

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

    html body.cms-id-9 #gatard-events .gatard-events__project-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: min(100%, 820px) !important;
        padding: clamp(19px, 2.7vw, 27px) 0 0 !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project-list p {
        font-size: clamp(11.5px, 1.45vw, 13.5px) !important;
        text-align: center !important;
    }
}

/* MOBILE : image contenue, titre Poppins centré et trois garanties sur la même rangée. */
@media (max-width: 767.98px) {
    html body.cms-id-9 #gatard-events .gatard-events__hero {
        padding-top: max(30px, calc(var(--gatard-mobile-menu-safe-offset, 0px) + 20px), calc(var(--ccm-quick-real-height, 0px) + 18px)) !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__hero-media {
        width: min(100%, 520px) !important;
        max-width: 520px !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__hero-media > img {
        width: 100% !important;
        max-width: 520px !important;
        max-height: clamp(230px, 72vw, 390px) !important;
        border-radius: 12px !important;
    }

    html body.cms-id-9 #gatard-events .gatard-event-card figure {
        height: clamp(160px, 50vw, 195px) !important;
        max-height: 195px !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__hero-copy p,
    html body.cms-id-9 #gatard-events .gatard-event-card p,
    html body.cms-id-9 #gatard-events .gatard-events__commitment-grid article p,
    html body.cms-id-9 #gatard-events .gatard-events__project-copy p,
    html body.cms-id-9 #gatard-events .gatard-events__section-title--gallery p {
        font-size: clamp(13px, 3.65vw, 14.5px) !important;
    }

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

    html body.cms-id-9 #gatard-events .gatard-events__project figure {
        width: min(88%, 440px) !important;
        max-width: 440px !important;
        margin: 0 auto !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project figure img {
        width: 100% !important;
        max-width: 440px !important;
        max-height: 285px !important;
        border-radius: 12px !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project-copy {
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project-copy h2,
    html body.cms-id-9 #gatard-events .gatard-events__project-copy h2 * {
        width: 100% !important;
        font-size: clamp(28px, 8.6vw, 42px) !important;
        line-height: 1.04 !important;
        text-align: center !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project-copy p {
        width: min(100%, 520px) !important;
        margin: 12px auto 0 !important;
        text-align: center !important;
    }

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

    html body.cms-id-9 #gatard-events .gatard-events__project-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        padding: 17px 0 0 !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project-list p {
        gap: 6px !important;
        padding: 0 2px !important;
        font-size: clamp(9.8px, 2.9vw, 12px) !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project-list .gatard-events__round-ico {
        width: clamp(32px, 10vw, 40px) !important;
        height: clamp(32px, 10vw, 40px) !important;
    }
}

@media (max-width: 359px) {
    html body.cms-id-9 #gatard-events .gatard-events__project {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    html body.cms-id-9 #gatard-events .gatard-events__project-list p {
        font-size: 9.5px !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    html body.cms-id-9 #gatard-events .gatard-events__hero-media > img,
    html body.cms-id-9 #gatard-events .gatard-event-card figure > img,
    html body.cms-id-9 #gatard-events .gatard-events__project figure img,
    html body.cms-id-9 #gatard-events .gatard-events__gallery-item img {
        opacity: 1 !important;
    }
}