/* ==========================================================
   UGCS — AGENDA
   Markup du prototype validé + données réelles de The Events Calendar.

   Sommaire :
   1. Commun Agenda (variables, en-tête)
   2. Barre de recherche (partagée Liste + Mois)
   3. Vue Liste
   4. Vue Mois — desktop
   5. Vue Mois — mobile
   6. Cartes évènements mobile
   ========================================================== */

/* ==========================================================
   1. COMMUN AGENDA
   ========================================================== */

:root {
    --ugcs-violet: #5B2167;
    --ugcs-violet-light: #A35BB5;
    --ugcs-dark: #171934;
    --ugcs-white: #FFFFFF;

    --ugcs-grey-50: #FAF9FB;
    --ugcs-grey-100: #F5F3F6;
    --ugcs-grey-200: #E8E4EA;
    --ugcs-grey-400: #9A949D;
    --ugcs-grey-600: #68636D;

    --ugcs-container: 1200px;
}


/* ==========================================================
   ENTÊTE
   ========================================================== */

.ugcs-agenda-entete {
    position: relative;

    width: 100vw;
    max-width: none;

    min-height: 410px;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    overflow: hidden;

    background: var(--ugcs-white);
}

.ugcs-agenda-entete__visual {
    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;
    bottom: 0;

    width: 70%;

    overflow: hidden;
}

.ugcs-agenda-entete__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 40%;
}

.ugcs-agenda-entete__visual::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, .98) 9%,
            rgba(255, 255, 255, .90) 17%,
            rgba(255, 255, 255, .58) 27%,
            rgba(255, 255, 255, .20) 38%,
            rgba(255, 255, 255, 0) 50%
        );

    pointer-events: none;
}

.ugcs-agenda-entete__wave {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.ugcs-agenda-entete__wave--top {
    z-index: 5;
    top: -1px;
    height: 82px;
}

.ugcs-agenda-entete__wave--top .ugcs-agenda-entete__wave-fill {
    fill: var(--ugcs-white);
}

.ugcs-agenda-entete__wave--top .ugcs-agenda-entete__wave-line {
    fill: none;
    stroke: var(--ugcs-violet-light);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.ugcs-agenda-entete__wave--bottom {
    z-index: 5;
    bottom: -1px;
    height: 80px;
}

.ugcs-agenda-entete__wave--bottom .ugcs-agenda-entete__wave-fill {
    fill: var(--ugcs-white);
}

.ugcs-agenda-entete__container {
    position: relative;
    z-index: 3;

    width: min(1240px, calc(100% - 64px));
    min-height: 410px;

    margin: 0 auto;

    display: flex;
    align-items: center;
}

.ugcs-agenda-entete__content {
    width: 65%;
    max-width: 800px;

    padding: 65px 0 55px;
}

.ugcs-agenda-entete__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    margin: 0 0 24px;

    color: var(--ugcs-dark);
    font-size: 14px;
    line-height: 1.4;
}

.ugcs-agenda-entete__breadcrumb a {
    color: var(--ugcs-violet);
    text-decoration: none;
}

.ugcs-agenda-entete__breadcrumb a:hover,
.ugcs-agenda-entete__breadcrumb a:focus-visible {
    text-decoration: underline;
}

.ugcs-agenda-entete__breadcrumb-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ugcs-agenda-entete__breadcrumb-separator {
    color: var(--ugcs-violet-light);
    font-size: 17px;
    line-height: 1;
}

.ugcs-agenda-entete__breadcrumb-current {
    color: #646174;
}

.ugcs-agenda-entete__title {
    margin: 0;
    padding: 0;

    color: var(--ugcs-dark);
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: clamp(50px, 4.7vw, 70px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.ugcs-agenda-entete__separator {
    width: 55px;
    height: 3px;

    margin: 20px 0 0;

    background: var(--ugcs-violet);
}

.ugcs-agenda-entete__intro {
    margin-top: 20px;
    max-width: none;
}

.ugcs-agenda-entete__intro p {
    margin: 0 0 10px;

    color: var(--ugcs-dark);
    font-size: 16px;
    line-height: 1.55;
}

.ugcs-agenda-entete__intro p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   ESPACEMENT VERTICAL AVANT L'ENTÊTE
   ========================================================== */

body.ugcs-agenda-page .content-area {
    margin-top: 0;
}


/* ==========================================================
   CONTENU AGENDA
   ========================================================== */

.tribe-events-l-container .ugcs-agenda__content {
    width: min(var(--ugcs-container), calc(100% - 48px));

    margin: 0 auto;

    padding: 24px 0 90px;
}


/* ==========================================================
   2. BARRE DE RECHERCHE (partagée Liste + Mois)
   ========================================================== */

/* ==========================================================
   FILTRES
   ========================================================== */

.ugcs-agenda__content .ugcs-agenda-filtres {
    position: relative;
    z-index: 10;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    margin: 0 0 60px;

    padding: 14px;

    border: 1px solid #E3DFE5;
    border-radius: 10px;

    background: #fff;

    box-shadow: 0 10px 30px rgba(16, 22, 47, .06);
}

.ugcs-agenda__content .ugcs-agenda-filtres__main {
    flex: 1;

    display: grid;
    grid-template-columns: minmax(200px, 1fr) 240px 150px auto;
    align-items: stretch;
    gap: 12px;

    margin: 0;
}

.ugcs-agenda__content .ugcs-agenda-filtres__search,
.ugcs-agenda__content .ugcs-agenda-filtres__select {
    position: relative;

    min-height: 52px;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    border: 1px solid #DDD8E0;
    border-radius: 6px;

    background: #fff;

    transition: border-color .2s ease, box-shadow .2s ease;
}

.ugcs-agenda__content .ugcs-agenda-filtres__search svg {
    position: absolute;
    left: 16px;

    color: var(--ugcs-violet);

    pointer-events: none;
}

.ugcs-agenda__content .ugcs-agenda-filtres__icon {
    position: absolute;
    left: 15px;

    color: var(--ugcs-violet);
    font-size: 20px;
    line-height: 1;

    pointer-events: none;
}

.ugcs-agenda__content .ugcs-agenda-filtres input,
.ugcs-agenda__content .ugcs-agenda-filtres select {
    width: 100%;
    height: 100%;

    box-sizing: border-box;
    margin: 0;
    border: 0;
    outline: 0;

    background: transparent;
    color: var(--ugcs-dark);
    font-family: Aptos, Arial, sans-serif;
    font-size: 16px;
}

.ugcs-agenda__content .ugcs-agenda-filtres__search:focus-within,
.ugcs-agenda__content .ugcs-agenda-filtres__select:focus-within {
    border-color: var(--ugcs-violet);
    box-shadow: 0 0 0 3px rgba(91, 33, 103, .10);
}

.ugcs-agenda__content .ugcs-agenda-filtres input {
    padding: 0 16px 0 48px;
}

.ugcs-agenda__content .ugcs-agenda-filtres select {
    padding: 0 38px 0 45px;
    cursor: pointer;
}

.ugcs-agenda__content .ugcs-agenda-filtres select.ugcs-agenda-filtres__select-sans-icone {
    padding-left: 16px;
}

.ugcs-agenda__content .ugcs-agenda-filtres__submit {
    min-width: 135px;
    height: 52px;

    padding: 0 24px;

    border: 1px solid var(--ugcs-violet);
    border-radius: 6px;

    background: var(--ugcs-violet);
    color: #fff;

    font-family: Aptos, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition: background .2s ease, transform .2s ease;
}

.ugcs-agenda__content .ugcs-agenda-filtres__submit:hover,
.ugcs-agenda__content .ugcs-agenda-filtres__submit:focus-visible {
    background: #46194F;
    border-color: #46194F;
    color: #fff;
}


/* ==========================================================
   3. VUE LISTE
   ========================================================== */

/* ==========================================================
   VUES LISTE / MOIS
   ========================================================== */

.ugcs-agenda__content .ugcs-agenda-vues {
    display: flex;
    align-items: center;
    gap: 5px;

    flex-shrink: 0;

    padding: 4px;
    border-radius: 6px;

    background: var(--ugcs-grey-100);
}

.ugcs-agenda__content .ugcs-agenda-vues__button {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 0 15px;

    border: 0;
    border-radius: 5px;

    background: transparent;
    color: var(--ugcs-grey-600);

    font: inherit;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;
}

.ugcs-agenda__content .ugcs-agenda-vues__button.is-active {
    background: var(--ugcs-violet);
    color: #fff;
}


/* FILTRES ACTIFS */

.ugcs-agenda__content .ugcs-agenda-filtres:has(+ .ugcs-agenda-filtres-actifs) {
    margin-bottom: 20px;
}

.ugcs-agenda__content .ugcs-agenda-filtres-actifs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    width: 100%;

    margin: 14px 0 40px;
}

.ugcs-agenda__content .ugcs-agenda-filtres-actifs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 12px;

    background: var(--ugcs-grey-100);
    border: 1px solid var(--ugcs-grey-200);
    border-radius: 20px;

    color: var(--ugcs-violet);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    transition: background-color .2s ease, border-color .2s ease;
}

.ugcs-agenda__content .ugcs-agenda-filtres-actifs__item:hover {
    background: var(--ugcs-violet);
    border-color: var(--ugcs-violet);
    color: #fff;
}

.ugcs-agenda__content .ugcs-agenda-filtres-actifs__item span[aria-hidden] {
    font-size: 15px;
    line-height: 1;
}


/* ==========================================================
   MOIS
   ========================================================== */

.ugcs-agenda__content .ugcs-agenda-month {
    margin-bottom: 52px;
}

.ugcs-agenda__content .ugcs-agenda-month__heading {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-bottom: 20px;
}

.ugcs-agenda__content .ugcs-agenda-month__heading h2 {
    flex-shrink: 0;
    margin: 0;
    padding: 0;

    color: var(--ugcs-violet);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.ugcs-agenda__content .ugcs-agenda-month__heading > span {
    width: 100%;
    height: 1px;
    background: var(--ugcs-grey-200);
}


/* ==========================================================
   CARTE ÉVÈNEMENT

   IMPORTANT : ".ugcs-event-card" seul perd face à la règle native
   de The Events Calendar ".tribe-common article { display: block }"
   (une classe + une balise = spécificité supérieure, quel que soit
   l'ordre des fichiers CSS). On préfixe donc avec le parent
   ".ugcs-agenda-month" pour l'emporter de façon fiable.
   ========================================================== */

.ugcs-agenda__content .ugcs-agenda-month .ugcs-event-card {
    display: grid;
    grid-template-columns: 130px 240px minmax(0, 1fr);

    min-height: 180px;

    overflow: hidden;

    border: 1px solid #E5E2E7;
    border-radius: 7px;

    background: #fff;

    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ugcs-agenda__content .ugcs-agenda-month .ugcs-event-card:hover {
    border-color: rgba(91, 33, 103, .28);
    box-shadow: 0 8px 25px rgba(23, 25, 52, .07);
    transform: translateY(-1px);
}

.ugcs-agenda__content .ugcs-event-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: #F5EFF7;
    color: var(--ugcs-violet);
    text-align: center;
}

.ugcs-agenda__content .ugcs-event-card__day {
    font-size: 45px;
    font-weight: 700;
    line-height: .95;
}

.ugcs-agenda__content .ugcs-event-card__month {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.ugcs-agenda__content .ugcs-event-card__year {
    margin-top: 5px;
    color: #766D79;
    font-size: 13px;
    line-height: 1;
}

.ugcs-agenda__content .ugcs-event-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/*
 * TEC enveloppe l'image dans un <div class="tribe-events-event-image">
 * supplémentaire (généré par tribe_event_featured_image()) : on force
 * ce conteneur intermédiaire à occuper toute la case, pour que
 * l'aspect-ratio défini sur .ugcs-event-card__media reste effectif
 * jusqu'à l'image elle-même.
 */
.ugcs-agenda__content .ugcs-event-card__media > div {
    width: 100%;
    height: 100%;
}

.ugcs-agenda__content .ugcs-event-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ugcs-agenda__content .ugcs-event-card__placeholder {
    width: 100%;
    height: 100%;

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

    background: linear-gradient(135deg, #F3EDF5 0%, #E8DDEB 100%);
}

.ugcs-agenda__content .ugcs-event-card__placeholder span {
    color: rgba(91, 33, 103, .20);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .08em;
}

.ugcs-agenda__content .ugcs-event-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 25px 32px;
}

.ugcs-agenda__content .ugcs-event-card__category {
    margin: 0 0 8px;
    padding: 0;

    color: var(--ugcs-violet);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.ugcs-agenda__content .ugcs-event-card__title {
    margin: 0 0 18px;
    padding: 0;

    color: var(--ugcs-dark);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
}

.ugcs-agenda__content .ugcs-event-card__title a {
    color: inherit;
    text-decoration: none;
}

.ugcs-agenda__content .ugcs-event-card__title a:hover,
.ugcs-agenda__content .ugcs-event-card__title a:focus-visible {
    color: var(--ugcs-violet);
}

.ugcs-agenda__content .ugcs-event-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;

    color: #5F5B64;
    font-size: 14px;
    line-height: 1.4;
}

.ugcs-agenda__content .ugcs-event-card__meta p {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 0;
}

.ugcs-agenda__content .ugcs-event-card__meta-icon {
    color: var(--ugcs-violet);
    font-size: 17px;
    line-height: 1;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

.ugcs-agenda__content .ugcs-agenda-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin: 68px 0 30px;
}

.ugcs-agenda__content .ugcs-agenda-pagination a {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid #DED9E0;
    border-radius: 5px;

    background: #fff;
    color: var(--ugcs-dark);

    font-size: 20px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
}

.ugcs-agenda__content .ugcs-agenda-pagination a:hover,
.ugcs-agenda__content .ugcs-agenda-pagination a:focus-visible {
    border-color: var(--ugcs-violet);
    color: var(--ugcs-violet);
}


/* ==========================================================
   ABONNEMENT
   Composant natif de The Events Calendar, réhabillé.
   ========================================================== */

.ugcs-agenda__content .ugcs-agenda-subscribe {
    display: flex;
    justify-content: flex-end;
}

.ugcs-agenda__content .ugcs-agenda-subscribe .tribe-events-c-subscribe-dropdown__button {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 0 18px;

    border: 1px solid var(--ugcs-violet);
    border-radius: 5px;

    background: #fff;
    color: var(--ugcs-violet);

    font: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.ugcs-agenda__content .ugcs-agenda-subscribe .tribe-events-c-subscribe-dropdown__button:hover,
.ugcs-agenda__content .ugcs-agenda-subscribe .tribe-events-c-subscribe-dropdown__button:focus-visible {
    background: #F7F1F8;
}

.ugcs-agenda__content .ugcs-agenda-subscribe .tribe-events-c-ical__link {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 0 18px;

    border: 1px solid var(--ugcs-violet);
    border-radius: 5px;

    background: #fff;
    color: var(--ugcs-violet);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


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

.screen-reader-text {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


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

@media (max-width: 1024px) {

    .ugcs-agenda-entete {
        min-height: 370px;
    }

    .ugcs-agenda-entete__container {
        width: min(960px, calc(100% - 48px));
        min-height: 370px;
    }

    .ugcs-agenda-entete__content {
        width: 50%;
        padding: 55px 0 45px;
    }

    .ugcs-agenda-entete__visual {
        width: 68%;
    }

    .ugcs-agenda-entete__image {
        object-position: 60% center;
    }

    .ugcs-agenda-entete__wave--top {
        height: 70px;
    }

    .ugcs-agenda-entete__title {
        font-size: clamp(44px, 6vw, 58px);
    }

    .ugcs-agenda__content {
        width: calc(100% - 48px);
    }

    .ugcs-agenda__content .ugcs-agenda-filtres {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .ugcs-agenda__content .ugcs-agenda-filtres__main {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .ugcs-agenda__content .ugcs-agenda-filtres__search {
        grid-column: 1 / -1;
    }

    .ugcs-agenda__content .ugcs-agenda-vues {
        align-self: flex-end;
    }

    .ugcs-agenda__content .ugcs-agenda-month .ugcs-event-card {
        grid-template-columns: 120px 230px minmax(0, 1fr);
    }

    .ugcs-agenda__content .ugcs-event-card__day {
        font-size: 38px;
    }

    .ugcs-agenda__content .ugcs-event-card__content {
        padding: 22px 25px;
    }

    .ugcs-agenda__content .ugcs-event-card__title {
        font-size: 20px;
    }

    .ugcs-agenda__content .ugcs-event-card__meta {
        display: grid;
        gap: 8px;
    }

}


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

@media (max-width: 767px) {

    .ugcs-agenda-entete {
        min-height: auto;
        padding-top: 220px;
    }

    .ugcs-agenda-entete__visual {
        top: 0;
        right: 0;
        bottom: auto;

        width: 100%;
        height: 255px;
    }

    .ugcs-agenda-entete__image {
        object-position: 67% center;
    }

    .ugcs-agenda-entete__visual::after {
        background: linear-gradient(
            0deg,
            #ffffff 0%,
            rgba(255, 255, 255, .95) 9%,
            rgba(255, 255, 255, .45) 24%,
            rgba(255, 255, 255, 0) 44%
        );
    }

    .ugcs-agenda-entete__container {
        width: calc(100% - 40px);
        min-height: auto;
        display: block;
    }

    .ugcs-agenda-entete__content {
        width: 100%;
        max-width: none;
        padding: 20px 0 42px;
    }

    .ugcs-agenda-entete__breadcrumb {
        gap: 6px;
        margin-bottom: 15px;
        font-size: 12px;
    }

    .ugcs-agenda-entete__title {
        font-size: clamp(38px, 12vw, 48px);
    }

    .ugcs-agenda-entete__separator {
        margin-top: 17px;
    }

    .ugcs-agenda-entete__wave--top {
        height: 58px;
    }

    .ugcs-agenda-entete__wave--bottom {
        height: 50px;
    }

    .ugcs-agenda__content {
        width: calc(100% - 40px);
        padding: 15px 0 60px;
    }

    .ugcs-agenda__content .ugcs-agenda-filtres {
        margin: 0 0 45px;
        padding: 12px;
        border-radius: 8px;
    }

    .ugcs-agenda__content .ugcs-agenda-filtres__main {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ugcs-agenda__content .ugcs-agenda-filtres input,
    .ugcs-agenda__content .ugcs-agenda-filtres select,
    .ugcs-agenda__content .ugcs-agenda-filtres__submit {
        height: 50px;
        min-height: 50px;
    }

    .ugcs-agenda__content .ugcs-agenda-filtres__submit {
        width: 100%;
    }

    .ugcs-agenda__content .ugcs-agenda-vues {
        width: 100%;
        box-sizing: border-box;
    }

    .ugcs-agenda__content .ugcs-agenda-vues__button {
        flex: 1;
        justify-content: center;
    }

    .ugcs-agenda__content .ugcs-agenda-month {
        margin-bottom: 42px;
    }

    .ugcs-agenda__content .ugcs-agenda-month__heading {
        gap: 14px;
        margin-bottom: 15px;
    }

    .ugcs-agenda__content .ugcs-agenda-month__heading h2 {
        font-size: 18px;
    }

    .ugcs-agenda__content .ugcs-agenda-month .ugcs-event-card {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        min-height: auto;
    }

    .ugcs-agenda__content .ugcs-event-card__date {
        grid-column: 1;
        grid-row: 1;

        min-height: 120px;
        padding: 15px 10px;
    }

    .ugcs-agenda__content .ugcs-event-card__day {
        font-size: 34px;
    }

    .ugcs-agenda__content .ugcs-event-card__month {
        margin-top: 6px;
        font-size: 13px;
    }

    .ugcs-agenda__content .ugcs-event-card__year {
        font-size: 12px;
    }

    .ugcs-agenda__content .ugcs-event-card__media {
        grid-column: 2;
        grid-row: 1;
    }

    .ugcs-agenda__content .ugcs-event-card__content {
        grid-column: 1 / -1;
        grid-row: 2;

        padding: 20px;
    }

    .ugcs-agenda__content .ugcs-event-card__category {
        font-size: 11px;
    }

    .ugcs-agenda__content .ugcs-event-card__title {
        margin-bottom: 15px;
        font-size: 19px;
    }

    .ugcs-agenda__content .ugcs-event-card__meta {
        display: grid;
        gap: 8px;
        font-size: 13px;
    }

    .ugcs-agenda__content .ugcs-agenda-pagination {
        margin-top: 50px;
    }

    .ugcs-agenda__content .ugcs-agenda-subscribe {
        justify-content: stretch;
    }

    .ugcs-agenda__content .ugcs-agenda-subscribe a,
    .ugcs-agenda__content .ugcs-agenda-subscribe button {
        width: 100%;
        justify-content: center;
    }

}


/* ==========================================================
   4. VUE MOIS — DESKTOP

   IMPORTANT : comme pour la vue Liste, tout ce qui suit vit à
   l'intérieur du conteneur natif ".tribe-common" de The Events
   Calendar, qui réinitialise border/margin/padding (et force
   display:block sur section/header/article/etc.) via des règles
   du type ".tribe-common section { border:0; margin:0; padding:0 }"
   — une classe + une balise, plus spécifique qu'un sélecteur à
   une seule classe. Chaque règle est donc préfixée par
   ".ugcs-agenda__content" pour l'emporter de façon fiable.
   ========================================================== */

.ugcs-agenda__content .ugcs-calendar {
    background: #fff;

    border: 1px solid var(--ugcs-grey-200);
    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 8px 30px rgba(28, 20, 35, .045);
}

.ugcs-agenda__content .ugcs-calendar__navigation {
    min-height: 112px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 0 25px;

    border-bottom: 1px solid var(--ugcs-grey-200);
}

.ugcs-agenda__content .ugcs-calendar__navigation-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ugcs-agenda__content .ugcs-calendar-nav-button {
    width: 52px;
    height: 52px;

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

    padding: 0;

    border: 1px solid #D9CADD;
    border-radius: 7px;

    background: #fff;
    color: var(--ugcs-violet);

    text-decoration: none;
    cursor: pointer;

    transition: .2s ease;
}

.ugcs-agenda__content .ugcs-calendar-nav-button:hover {
    background: var(--ugcs-violet);
    border-color: var(--ugcs-violet);
    color: #fff;
}

.ugcs-agenda__content .ugcs-chevron {
    display: block;

    width: 8px;
    height: 8px;

    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.ugcs-agenda__content .ugcs-chevron--left {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.ugcs-agenda__content .ugcs-chevron--right {
    transform: rotate(45deg);
    margin-right: 3px;
}

.ugcs-agenda__content .ugcs-calendar-today {
    height: 52px;

    display: inline-flex;
    align-items: center;

    padding: 0 20px;

    border: 1px solid #D9CADD;
    border-radius: 7px;

    background: #fff;
    color: var(--ugcs-violet);

    font: inherit;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;

    transition: .2s ease;
}

.ugcs-agenda__content .ugcs-calendar-today:hover {
    background: var(--ugcs-violet);
    border-color: var(--ugcs-violet);
    color: #fff;
}

.ugcs-agenda__content .ugcs-calendar__month {
    margin: 0;

    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;

    color: var(--ugcs-violet);
    text-transform: uppercase;
}

.ugcs-agenda__content .ugcs-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    background: #F6F0F7;

    border-bottom: 1px solid var(--ugcs-grey-200);
}

.ugcs-agenda__content .ugcs-calendar__weekdays div {
    height: 58px;

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

    font-size: 14px;
    font-weight: 700;

    color: var(--ugcs-violet);
    text-transform: uppercase;
}

.ugcs-agenda__content .ugcs-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 1px;

    background: var(--ugcs-grey-200);
}

.ugcs-agenda__content .ugcs-calendar-day {
    position: relative;

    min-width: 0;
    min-height: 150px;

    box-sizing: border-box;
    padding: 15px;

    background: #fff;
}

.ugcs-agenda__content .ugcs-calendar-day__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 32px;
    height: 32px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: inherit;

    font: inherit;
    font-size: 17px;
    font-weight: 600;

    cursor: default;
}

/* Sur un jour avec évènement, le numéro est un vrai bouton (accordéon
   mobile natif) : on retire l'apparence de bouton pour qu'il reste
   visuellement identique à un simple numéro. */
.ugcs-agenda__content .ugcs-calendar-day.has-event .ugcs-calendar-day__number {
    cursor: pointer;
}

.ugcs-agenda__content .ugcs-calendar-day.is-outside {
    background: #FCFCFC;
}

.ugcs-agenda__content .ugcs-calendar-day.is-outside .ugcs-calendar-day__number {
    color: #AFAEB6;
}

.ugcs-agenda__content .ugcs-calendar-day.is-today .ugcs-calendar-day__number {
    background: #EAD9EE;
    color: var(--ugcs-violet);
    font-weight: 800;
}

.ugcs-agenda__content .ugcs-calendar-event {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-top: 7px;
    padding: 10px 10px 10px 14px;

    border-radius: 6px;

    background: #F0E5F3;
    color: var(--ugcs-dark);

    text-decoration: none;
}

.ugcs-agenda__content .ugcs-calendar-event::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    border-radius: 6px 0 0 6px;

    background: var(--ugcs-violet);
}

.ugcs-agenda__content .ugcs-calendar-event small {
    color: #686472;
}

.ugcs-agenda__content .ugcs-calendar-event strong {
    font-size: 14px;
    line-height: 1.25;
}

.ugcs-agenda__content .ugcs-calendar-event:hover {
    background: #E5D4E9;
}

.ugcs-agenda__content .ugcs-calendar-day__more {
    display: inline-block;

    margin-top: 6px;

    color: var(--ugcs-violet);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.ugcs-agenda__content .ugcs-calendar-day__more:hover {
    text-decoration: underline;
}

/* Masqués sur desktop, affichés uniquement en mobile */
.ugcs-agenda__content .ugcs-mobile-events,
.ugcs-agenda__content .ugcs-mobile-month-navigation {
    display: none;
}

.ugcs-agenda__content .ugcs-calendar-subscribe {
    display: flex;
    justify-content: flex-end;

    padding-top: 24px;
}

.ugcs-agenda__content .ugcs-calendar-subscribe .tribe-events-c-ical__link,
.ugcs-agenda__content .ugcs-calendar-subscribe .tribe-events-c-subscribe-dropdown__button {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 0 18px;

    border: 1px solid #A96AB7;
    border-radius: 6px;

    background: #fff;
    color: var(--ugcs-violet);

    font: inherit;
    font-weight: 600;
    text-decoration: none;

    cursor: pointer;

    transition: .2s ease;
}

.ugcs-agenda__content .ugcs-calendar-subscribe .tribe-events-c-ical__link:hover,
.ugcs-agenda__content .ugcs-calendar-subscribe .tribe-events-c-subscribe-dropdown__button:hover {
    background: var(--ugcs-violet);
    border-color: var(--ugcs-violet);
    color: #fff;
}


/* ==========================================================
   5. VUE MOIS — MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .ugcs-agenda__content .ugcs-calendar {
        border: 0;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
    }

    .ugcs-agenda__content .ugcs-calendar__navigation {
        display: none;
    }

    .ugcs-agenda__content .ugcs-calendar__weekdays {
        background: transparent;
        border: 0;
    }

    .ugcs-agenda__content .ugcs-calendar__weekdays div {
        height: 38px;

        color: #424354;

        font-size: 10px;
        font-weight: 500;

        text-transform: none;
    }

    .ugcs-agenda__content .ugcs-calendar__grid {
        gap: 0;
        background: transparent;
    }

    .ugcs-agenda__content .ugcs-calendar-day {
        min-height: 60px;

        display: flex;
        align-items: flex-start;
        justify-content: center;

        padding: 7px 2px;

        background: transparent !important;
    }

    .ugcs-agenda__content .ugcs-calendar-day__number {
        width: 38px;
        min-width: 38px;
        height: 38px;

        font-size: 15px;
        font-weight: 400;

        color: #646575;
    }

    .ugcs-agenda__content .ugcs-calendar-day.is-outside .ugcs-calendar-day__number {
        color: #92929C;
    }

    .ugcs-agenda__content .ugcs-calendar-day.is-today .ugcs-calendar-day__number {
        background: transparent;
        color: var(--ugcs-dark);
        font-weight: 800;
    }

    /* Les évènements complets ne s'affichent jamais dans les cases sur mobile */
    .ugcs-agenda__content .ugcs-calendar-event,
    .ugcs-agenda__content .ugcs-calendar-day__more {
        display: none;
    }

    .ugcs-agenda__content .ugcs-calendar-day.is-selected .ugcs-calendar-day__number {
        border-radius: 4px;

        background: var(--ugcs-violet);
        color: #fff;

        font-weight: 600;
    }

    /* Petit point signalant la présence d'un évènement */
    .ugcs-agenda__content .ugcs-calendar-day.has-event::after {
        content: "";

        position: absolute;
        top: 40px;
        left: 50%;

        width: 6px;
        height: 6px;

        border-radius: 50%;
        background: var(--ugcs-violet);

        transform: translateX(-50%);
    }

    .ugcs-agenda__content .ugcs-calendar-day.is-selected::after {
        background: #fff;
    }

    .ugcs-agenda__content .ugcs-mobile-events {
        display: block;
        margin-top: 28px;
    }

    .ugcs-agenda__content .ugcs-mobile-events__heading {
        display: flex;
        align-items: center;
        gap: 14px;

        margin-bottom: 12px;
    }

    .ugcs-agenda__content .ugcs-mobile-events__heading strong {
        flex: 0 0 auto;

        color: var(--ugcs-dark);
        font-size: 14px;
        font-weight: 700;
    }

    .ugcs-agenda__content .ugcs-mobile-events__heading span {
        flex: 1;
        height: 1px;
        background: #DAD5DC;
    }

    .ugcs-agenda__content .ugcs-mobile-month-navigation {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;

        margin-top: 18px;
        padding: 18px 0;

        border-top: 1px solid #DDDDE3;
    }

    .ugcs-agenda__content .ugcs-mobile-month-navigation a {
        display: inline-flex;
        align-items: center;
        gap: 8px;

        color: #444552;
        text-decoration: none;
        font-size: 12px;
    }

    .ugcs-agenda__content .ugcs-mobile-month-navigation a:last-child {
        justify-self: end;
    }

    .ugcs-agenda__content .ugcs-mobile-month-navigation .ugcs-chevron {
        width: 6px;
        height: 6px;
    }

    .ugcs-agenda__content .ugcs-calendar-subscribe {
        padding-top: 8px;
    }

    .ugcs-agenda__content .ugcs-calendar-subscribe .tribe-events-c-ical__link,
    .ugcs-agenda__content .ugcs-calendar-subscribe .tribe-events-c-subscribe-dropdown__button {
        width: 100%;
        justify-content: center;
        min-height: 50px;
    }

}


/* ==========================================================
   6. CARTES ÉVÈNEMENTS MOBILE (vue Mois)
   ========================================================== */

@media (max-width: 767px) {

    .ugcs-agenda__content .ugcs-mobile-event-card {
        position: relative;

        display: grid;
        grid-template-columns: 66px 1fr 22px;
        align-items: stretch;

        overflow: hidden;

        border: 1px solid var(--ugcs-grey-200);
        border-radius: 8px;

        background: #fff;
        color: var(--ugcs-dark);

        text-decoration: none;

        box-shadow: 0 5px 18px rgba(28, 20, 35, .055);

        transition: border-color .2s ease, box-shadow .2s ease;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card + .ugcs-mobile-event-card {
        margin-top: 10px;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card:hover {
        border-color: #CBAAD2;
        box-shadow: 0 7px 22px rgba(91, 33, 103, .10);
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__date {
        min-height: 94px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background: #F6F0F7;
        color: var(--ugcs-violet);
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__date strong {
        font-family: "Aptos Display", Aptos, Arial, sans-serif;
        font-size: 28px;
        line-height: .95;
        font-weight: 700;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__date span {
        margin-top: 5px;
        font-size: 10px;
        line-height: 1;
        font-weight: 700;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__date small {
        margin-top: 3px;
        color: #696473;
        font-size: 9px;
        line-height: 1;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__content {
        min-width: 0;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding: 13px 10px 13px 14px;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__category {
        margin-bottom: 5px;

        color: var(--ugcs-violet);
        font-size: 9px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card h3 {
        margin: 0 0 8px;

        color: var(--ugcs-dark);
        font-family: "Aptos Display", Aptos, Arial, sans-serif;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__meta span {
        display: flex;
        align-items: center;

        min-width: 0;

        color: #656574;
        font-size: 10px;
        line-height: 1.25;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__meta svg {
        flex: 0 0 auto;

        width: 12px;
        height: 12px;

        margin-right: 5px;
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__arrow {
        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--ugcs-violet);
    }

    .ugcs-agenda__content .ugcs-mobile-event-card__arrow .ugcs-chevron {
        width: 7px;
        height: 7px;
    }

}


/* ==========================================================
   7. FICHE ÉVÈNEMENT

   Réutilise les variables --ugcs-violet, --ugcs-dark, etc. déjà
   définies plus haut. Seules les variables réellement nouvelles à
   cette vue sont ajoutées ici, sur son propre conteneur.

   IMPORTANT : contrairement aux vues Liste/Mois, cette page n'est
   PAS enveloppée dans un conteneur ".tribe-common" — c'est l'ancien
   système classique de The Events Calendar (voir single-event.php).
   Le conflit de spécificité rencontré sur les autres vues ne
   s'applique donc pas ici : des sélecteurs à une seule classe
   suffisent, vérifié dans le CSS natif de cette vue.
   ========================================================== */

.ugcs-event {
    --ugcs-violet-pale: #F6EFF8;
    --ugcs-text: #25263B;
    --ugcs-grey: #707080;
    --ugcs-border: #E6E1E8;
    --ugcs-container: 1240px;

    color: var(--ugcs-text);
}

.ugcs-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}


/* ENTÊTE */

.ugcs-event-header {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    background: #fff;
}

.ugcs-event-header__image {
    position: absolute;
    inset: 0 0 0 35%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.ugcs-event-header__fade {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        #fff 0%,
        #fff 30%,
        rgba(255, 255, 255, .98) 36%,
        rgba(255, 255, 255, .90) 42%,
        rgba(255, 255, 255, .70) 48%,
        rgba(255, 255, 255, .40) 54%,
        rgba(255, 255, 255, .15) 60%,
        rgba(255, 255, 255, 0) 67%
    );
}

.ugcs-event-header__inner {
    position: relative;
    z-index: 3;

    width: min(calc(100% - 80px), var(--ugcs-container));
    margin-inline: auto;

    padding-top: 95px;
    padding-bottom: 70px;
}

.ugcs-event-header__wave-top {
    position: absolute;
    z-index: 5;
    top: -1px;
    left: 0;
    width: 100%;
    height: 82px;
    pointer-events: none;
}

.ugcs-event-header__wave-bottom {
    position: absolute;
    z-index: 5;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
}

.ugcs-event-header__wave-top svg,
.ugcs-event-header__wave-bottom svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* FIL D'ARIANE (dédié, 3 niveaux) */

.ugcs-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 55px;

    font-size: 15px;
}

.ugcs-breadcrumb a {
    color: var(--ugcs-violet);
    text-decoration: none;
}

.ugcs-breadcrumb a:hover {
    text-decoration: underline;
}

.ugcs-breadcrumb span {
    color: #777487;
}


/* CONTENU ENTÊTE */

.ugcs-event-header__content {
    width: 65%;
    max-width: 800px;
}

.ugcs-event-header__category {
    margin-bottom: 18px;

    color: var(--ugcs-violet);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.ugcs-event-header h1 {
    margin: 0;

    color: var(--ugcs-dark);
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: clamp(44px, 4vw, 68px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -1.5px;
}

.ugcs-title-line {
    width: 62px;
    height: 4px;
    margin: 28px 0;
    background: var(--ugcs-violet);
}

.ugcs-event-header__intro {
    max-width: none;
    margin: 0;

    font-size: 19px;
    line-height: 1.55;
}


/* RÉSUMÉ */

.ugcs-event-summary {
    position: relative;
    z-index: 10;

    display: grid;
    grid-template-columns: 160px 1fr 1.35fr auto;
    align-items: stretch;

    min-height: 180px;
    margin-top: -15px;
    margin-bottom: 70px;

    background: #fff;
    border: 1px solid var(--ugcs-border);
    border-radius: 10px;

    box-shadow: 0 10px 35px rgba(25, 10, 30, .07);
}

.ugcs-event-summary > div {
    padding: 30px 34px;
}

.ugcs-event-summary__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--ugcs-violet-pale);
    border-radius: 10px 0 0 10px;
}

.ugcs-event-summary__date strong {
    color: var(--ugcs-violet);
    font-size: 55px;
    line-height: .9;
}

.ugcs-event-summary__date span {
    margin-top: 14px;
    color: var(--ugcs-violet);
    font-size: 21px;
    font-weight: 700;
}

.ugcs-event-summary__date small {
    margin-top: 4px;
    color: var(--ugcs-dark);
    font-size: 17px;
    font-weight: 700;
}

.ugcs-event-summary__schedule,
.ugcs-event-summary__place {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--ugcs-border);
}

.ugcs-event-summary__schedule strong,
.ugcs-event-summary__place strong {
    margin-bottom: 18px;
    color: var(--ugcs-dark);
    font-size: 18px;
    line-height: 1.35;
}

.ugcs-event-summary__schedule span,
.ugcs-event-summary__place span {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

.ugcs-event-summary__price {
    margin-top: 15px;
    color: var(--ugcs-violet);
    font-weight: 700;
}

.ugcs-event-summary__place a {
    display: inline-block;
    margin-top: 15px;
    color: var(--ugcs-violet);
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.ugcs-event-summary__place a:hover,
.ugcs-event-summary__place a:focus-visible {
    color: var(--ugcs-violet-light);
    text-decoration: underline;
}

.ugcs-event-summary__action {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Le HTML natif imbrique plusieurs conteneurs entre notre wrapper et
 * le vrai bouton (.tribe-events.tribe-common > ...__container > ...
 * __dropdown > ...__button). On neutralise leur largeur pour que le
 * centrage fonctionne sur le bouton réel.
 */
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__container,
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown {
    display: inline-block;
    width: auto;
}

/* Bouton d'abonnement natif, capturé et réhabillé */
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    box-sizing: border-box;
    min-height: 50px;
    padding: 0 25px;
    margin: 0;

    /*
     * !important nécessaire : la classe native "tribe-common-c-btn-border"
     * (posée sur ce même élément) impose son propre fond blanc/texte,
     * qui l'emporte sur notre règle malgré une spécificité supérieure —
     * signe qu'elle est elle-même posée avec !important côté plugin.
     */
    background: var(--ugcs-violet) !important;
    color: #fff !important;

    border: 2px solid var(--ugcs-violet);
    border-radius: 5px;

    font-weight: 700;

    cursor: pointer;
}

.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button:hover,
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button:focus-visible {
    background: #fff !important;
    border-color: var(--ugcs-violet);
}

/*
 * Le texte est un <button> imbriqué, pas juste du texte dans le
 * conteneur : si le style natif fixe sa couleur directement dessus
 * (avec !important), "color: inherit" ne suffit pas à le faire
 * hériter du fond violet du conteneur. On force donc explicitement
 * ici aussi, dans les deux états.
 */
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button-text {
    color: #fff !important;
    font: inherit;
}

.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-text,
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button:focus-visible .tribe-events-c-subscribe-dropdown__button-text {
    color: var(--ugcs-violet) !important;
}

/*
 * IMPORTANT : ces deux icônes SVG natives n'ont aucune largeur/hauteur
 * définie (ni en HTML, ni dans le CSS natif du plugin) — sans
 * contrainte, un <svg> peut s'afficher à sa taille par défaut du
 * navigateur (environ 300×150px) et casser l'affichage du bouton.
 */
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__export-icon,
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button-icon {
    flex-shrink: 0;

    width: 16px;
    height: 16px;

    color: #fff !important;
    fill: currentColor !important;
}

.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__export-icon,
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-icon,
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button:focus-visible .tribe-events-c-subscribe-dropdown__export-icon,
.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button:focus-visible .tribe-events-c-subscribe-dropdown__button-icon {
    color: var(--ugcs-violet) !important;
}

.ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button-icon {
    width: 10px;
    height: 10px;
}


/* SECTIONS */

.ugcs-event-content {
    padding-bottom: 90px;
}

.ugcs-event-section {
    margin-bottom: 70px;
}

.ugcs-event-section h2 {
    margin: 0;

    color: var(--ugcs-dark);
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
}

.ugcs-section-line {
    width: 55px;
    height: 3px;
    margin: 12px 0 30px;
    background: var(--ugcs-violet-light);
}


/* DESCRIPTION */

.ugcs-event-description {
    max-width: 1100px;
    font-size: 17px;
    line-height: 1.65;
}

.ugcs-event-description p {
    margin: 0 0 15px;
}


/* ÉTIQUETTES */

.ugcs-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 30px;
    padding-top: 24px;

    border-top: 1px solid var(--ugcs-grey-200);
}

.ugcs-event-tag {
    padding: 6px 14px;

    background: var(--ugcs-grey-100);
    border-radius: 20px;

    color: var(--ugcs-violet);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.ugcs-event-tag:hover {
    background: var(--ugcs-violet);
    color: #fff;
}


/* INFORMATIONS PRATIQUES */

.ugcs-practical {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(280px, .9fr);
    gap: 25px;
    align-items: stretch;
}

.ugcs-location {
    min-width: 0;
}

/* Carte — ratio strict 4:3, y compris avec l'iframe native */
.ugcs-location__map {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eef0ed;
    border: 1px solid var(--ugcs-border);
    border-radius: 9px;
}

.ugcs-location__map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.ugcs-location__overlay {
    position: absolute;
    z-index: 5;
    top: 20px;
    left: 20px;

    display: flex;
    flex-direction: column;

    width: min(330px, calc(100% - 40px));
    padding: 22px;

    background: rgba(255, 255, 255, .96);
    border-radius: 7px;

    box-shadow: 0 6px 25px rgba(0, 0, 0, .08);
}

.ugcs-location__overlay strong {
    margin-bottom: 12px;
    color: var(--ugcs-dark);
}

.ugcs-location__overlay span {
    margin-bottom: 4px;
    font-size: 15px;
}

.ugcs-location__overlay a {
    display: inline-block;
    margin-top: 13px;
    color: var(--ugcs-violet);
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.ugcs-location__overlay a:hover,
.ugcs-location__overlay a:focus-visible {
    color: var(--ugcs-violet-light);
    text-decoration: underline;
}


/* ORGANISATEURS */

.ugcs-organizers {
    padding: 28px;

    background: #fff;
    border: 1px solid var(--ugcs-border);
    border-radius: 9px;
}

.ugcs-organizers h3 {
    margin: 0 0 18px;
    color: var(--ugcs-dark);
    font-size: 17px;
    text-transform: uppercase;
}

.ugcs-organizer {
    display: flex;
    flex-direction: column;

    padding: 18px 0;
    border-top: 1px solid var(--ugcs-border);
}

.ugcs-organizer:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.ugcs-organizer strong {
    margin-bottom: 8px;
    color: var(--ugcs-dark);
    line-height: 1.35;
}

.ugcs-organizer span {
    margin-bottom: 4px;
}

.ugcs-organizer a {
    color: var(--ugcs-violet);
    overflow-wrap: anywhere;
}


/* ==========================================================
   RÉSERVATIONS — structure propre, données réelles Event Tickets.

   Le conteneur de chaque carte est le VRAI wrapper natif
   (.tribe-tickets__rsvp-wrapper, avec data-rsvp-id), indispensable
   car le JS natif ("rsvp-manager.js") sélectionne ses conteneurs via
   $('.tribe-tickets__rsvp-wrapper') pour s'initialiser. On lui ajoute
   simplement notre classe .ugcs-reservation-card pour l'habiller.
   Le contenu (titre, description, statistiques, date limite) est
   entièrement le nôtre, construit à partir des vraies propriétés de
   Tribe__Tickets__Ticket_Object. Seuls les boutons/formulaire
   (.tribe-tickets__rsvp-actions-*) restent le vrai rendu natif.
   ========================================================== */

.ugcs-reservations__intro {
    margin: -10px 0 24px;
    color: var(--ugcs-grey);
    font-size: 16px;
    line-height: 1.55;
}

/*
 * Flexbox + sélecteurs :nth-child, comme demandé : la dernière ligne
 * se redistribue toujours pour occuper 100% de la largeur (1 carte =
 * 100%, 2 = 50/50, 3 = 33/33/33), sans jamais laisser une 4e carte
 * "orpheline" à 33% de large sur sa propre ligne. Nos cartes sont ici
 * de vrais enfants directs de la grille, donc :nth-child fonctionne
 * normalement (pas besoin de :has()/:only-of-type comme avant).
 */
.ugcs-reservations__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    align-items: flex-start;
}

.ugcs-reservation-card {
    flex: 0 0 calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3);
    min-width: 0;

    height: auto;
    min-height: 0;

    padding: 28px;
    box-sizing: border-box;

    background: #fff;
    border: 1px solid #DEDDE3;
    border-radius: 6px;
}

/* Une seule carte au total : pleine largeur. */
.ugcs-reservation-card:only-child {
    flex-basis: 100%;
    width: 100%;
}

/* Dernière carte seule sur sa ligne (ex: 4, 7 cartes...) : pleine largeur. */
.ugcs-reservation-card:last-child:nth-child(3n + 1) {
    flex-basis: 100%;
    width: 100%;
}

/* Deux cartes en fin de ligne (ex: 2, 5, 8 cartes...) : 50/50. */
.ugcs-reservation-card:nth-last-child(2):nth-child(3n + 1),
.ugcs-reservation-card:nth-last-child(2):nth-child(3n + 1) ~ .ugcs-reservation-card {
    flex-basis: calc((100% - 24px) / 2);
    width: calc((100% - 24px) / 2);
}

/* Cas particulier : exactement deux cartes au total. */
.ugcs-reservation-card:first-child:nth-last-child(2),
.ugcs-reservation-card:first-child:nth-last-child(2) ~ .ugcs-reservation-card {
    flex-basis: calc((100% - 24px) / 2);
    width: calc((100% - 24px) / 2);
}


/* ENTÊTE DE CARTE */

.ugcs-reservation-card__header {
    margin: 0;
}

.ugcs-reservation-card__title {
    margin: 0 0 8px;
    color: var(--ugcs-dark);
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.ugcs-reservation-card__description {
    margin: 0;
    color: #555866;
    font-size: 15px;
    line-height: 1.45;
}

.ugcs-reservation-card__description p {
    margin: 0;
}

.ugcs-reservation-card__description p + p {
    margin-top: 8px;
}


/* STATISTIQUES */

.ugcs-reservation-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin-top: 24px;
    padding: 20px 0;

    border-top: 1px solid #E2DFE5;
    border-bottom: 1px solid #E2DFE5;
}

.ugcs-reservation-stat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: 24px;
}

.ugcs-reservation-stat + .ugcs-reservation-stat {
    padding-right: 0;
    padding-left: 24px;
    border-left: 1px solid #DEDDE3;
}

.ugcs-reservation-stat__value {
    display: block;
    margin: 0 0 6px;

    color: var(--ugcs-violet);
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
}

.ugcs-reservation-stat__label {
    display: block;
    color: #505361;
    font-size: 14px;
    line-height: 1.35;
}


/* DATE LIMITE */

.ugcs-reservation-card__deadline {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 18px 0 0;

    color: #555866;
    font-size: 14px;
    line-height: 1.45;
}

.ugcs-reservation-card__deadline strong {
    color: var(--ugcs-dark);
    font-weight: 700;
}

.ugcs-reservation-card__calendar {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;

    fill: none;
    stroke: var(--ugcs-violet);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ACTIONS — conteneur nôtre, contenu natif (formulaire/boutons réels) */

.ugcs-reservation-card__actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #E2DFE5;
}

/* Neutralise la largeur en "colonnes" imposée nativement (g-col),
   puisqu'on n'a plus la colonne "détails" native à côté. */
.ugcs-reservation-card .tribe-tickets__rsvp-actions-wrapper {
    width: 100%;
    max-width: 100%;
}

.ugcs-reservation-card .tribe-tickets__rsvp-actions-rsvp > span {
    display: none;
}

.ugcs-reservation-card .tribe-tickets__rsvp-actions-rsvp {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ugcs-reservation-card .tribe-tickets__rsvp-actions-rsvp-going,
.ugcs-reservation-card .tribe-tickets__rsvp-actions-rsvp-not-going {
    flex: 1 1 140px;
}

.ugcs-reservation-card .tribe-tickets__rsvp-actions-button-going,
.ugcs-reservation-card .tribe-tickets__rsvp-actions-button-not-going {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 11px 20px;

    border-radius: 4px;

    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;

    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Bouton principal : violet avant tout survol — jamais blanc par défaut */
.ugcs-reservation-card .tribe-tickets__rsvp-actions-button-going {
    background: var(--ugcs-violet) !important;
    color: #fff !important;
    border: 2px solid var(--ugcs-violet) !important;
}

.ugcs-reservation-card .tribe-tickets__rsvp-actions-button-going:hover,
.ugcs-reservation-card .tribe-tickets__rsvp-actions-button-going:focus-visible {
    background: #46194F !important;
    color: #fff !important;
    border-color: #46194F !important;
}

/* Bouton secondaire */
.ugcs-reservation-card .tribe-tickets__rsvp-actions-button-not-going {
    background: #fff !important;
    color: var(--ugcs-violet) !important;
    border: 2px solid var(--ugcs-violet) !important;
}

.ugcs-reservation-card .tribe-tickets__rsvp-actions-button-not-going:hover,
.ugcs-reservation-card .tribe-tickets__rsvp-actions-button-not-going:focus-visible {
    background: var(--ugcs-violet) !important;
    color: #fff !important;
    border-color: var(--ugcs-violet) !important;
}


/*
 * CONTENU NATIF COMPLET (titre/description/statistiques)
 *
 * IMPORTANT : notre carte personnalisée (titre, description,
 * statistiques dans NOTRE structure) n'existe que lors du premier
 * chargement de la page, rendu par NOTRE PHP. Dès qu'un aller-retour
 * serveur se produit (clic sur "Annuler", changement d'état...), le JS
 * natif remplace tout le contenu de la carte par le gabarit natif
 * complet d'Event Tickets (v2/rsvp/content.php), avec ses propres
 * classes de titre/description/statistiques — jamais les nôtres.
 * On habille donc aussi CES classes natives, pour que cet état
 * "rafraîchi" reste cohérent avec la charte.
 */
.ugcs-reservation-card .tribe-tickets__rsvp-title {
    margin: 0 0 8px;
    color: var(--ugcs-dark);
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.ugcs-reservation-card .tribe-tickets__rsvp-description {
    margin: 0 0 18px;
    color: #555866;
    font-size: 15px;
    line-height: 1.45;
}

.ugcs-reservation-card .tribe-tickets__rsvp-attendance,
.ugcs-reservation-card .tribe-tickets__rsvp-availability {
    display: block;
    margin: 18px 0 0;
    padding-top: 18px;

    border-top: 1px solid #E2DFE5;

    color: #505361;
    font-size: 14px;
    line-height: 1.5;
}

.ugcs-reservation-card .tribe-tickets__rsvp-attendance-number,
.ugcs-reservation-card .tribe-tickets__rsvp-availability-quantity {
    color: var(--ugcs-violet);
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.ugcs-reservation-card .tribe-tickets__rsvp-attendance-going {
    margin-left: 6px;
}


/* TABLETTE — maximum 2 cartes par ligne */

@media (max-width: 1100px) {

    .ugcs-reservation-card,
    .ugcs-reservation-card:last-child:nth-child(3n + 1),
    .ugcs-reservation-card:nth-last-child(2):nth-child(3n + 1),
    .ugcs-reservation-card:nth-last-child(2):nth-child(3n + 1) ~ .ugcs-reservation-card,
    .ugcs-reservation-card:first-child:nth-last-child(2),
    .ugcs-reservation-card:first-child:nth-last-child(2) ~ .ugcs-reservation-card {
        flex-basis: calc((100% - 24px) / 2);
        width: calc((100% - 24px) / 2);
    }

    /* Dernière carte seule sur tablette : pleine largeur. */
    .ugcs-reservation-card:last-child:nth-child(odd) {
        flex-basis: 100%;
        width: 100%;
    }

    .ugcs-reservation-card:only-child {
        flex-basis: 100%;
        width: 100%;
    }

}


/* MOBILE — une seule carte par ligne */

@media (max-width: 700px) {

    .ugcs-reservations__grid {
        gap: 18px;
    }

    .ugcs-reservation-card,
    .ugcs-reservation-card:last-child:nth-child(3n + 1),
    .ugcs-reservation-card:nth-last-child(2):nth-child(3n + 1),
    .ugcs-reservation-card:nth-last-child(2):nth-child(3n + 1) ~ .ugcs-reservation-card,
    .ugcs-reservation-card:first-child:nth-last-child(2),
    .ugcs-reservation-card:first-child:nth-last-child(2) ~ .ugcs-reservation-card,
    .ugcs-reservation-card:last-child:nth-child(odd),
    .ugcs-reservation-card:only-child {
        flex-basis: 100%;
        width: 100%;
    }

    .ugcs-reservation-card {
        padding: 22px 20px;
    }

    .ugcs-reservation-card__title {
        font-size: 21px;
    }

    .ugcs-reservation-card__stats {
        margin-top: 20px;
        padding: 18px 0;
    }

    .ugcs-reservation-stat {
        padding-right: 16px;
    }

    .ugcs-reservation-stat + .ugcs-reservation-stat {
        padding-left: 16px;
    }

    .ugcs-reservation-stat__value {
        font-size: 25px;
    }

    .ugcs-reservation-card__deadline {
        align-items: flex-start;
    }

    .ugcs-reservation-card .tribe-tickets__rsvp-actions-rsvp {
        flex-direction: column;
    }

}


/*
 * LOADER NATIF (pendant la requête AJAX)
 *
 * Affiché/masqué par le JS natif via la classe "tribe-common-a11y-hidden"
 * (masqué quand présente). Sans dimensionnement explicite, les <svg>
 * ronds natifs s'affichent à leur taille par défaut du navigateur —
 * d'où le "gros rond noir" observé.
 */
.ugcs-reservation-card .tribe-common-a11y-hidden {
    display: none !important;
}

.ugcs-reservation-card .tribe-tickets-loader__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 30px 0;
}

.ugcs-reservation-card .tribe-common-c-loader__dot {
    width: 10px;
    height: 10px;

    fill: var(--ugcs-violet);
    opacity: .35;

    animation: ugcs-reservation-loader-pulse 1s ease-in-out infinite;
}

.ugcs-reservation-card .tribe-common-c-loader__dot--second {
    animation-delay: .15s;
}

.ugcs-reservation-card .tribe-common-c-loader__dot--third {
    animation-delay: .3s;
}

@keyframes ugcs-reservation-loader-pulse {
    0%, 100% { opacity: .35; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.25); }
}


/*
 * ÉTAPE SUIVANTE DU RSVP — formulaire nom/e-mail/nombre de personnes.
 *
 * Après un clic sur "Je participe" ou "Je ne participe pas", le JS
 * natif remplace tout le contenu de la carte par ce formulaire réel
 * (nom, e-mail, quantité) — jamais recréé, seulement habillé ici.
 */
.ugcs-reservation-card .tribe-tickets__rsvp-form-title h3 {
    margin: 0 0 20px;

    color: var(--ugcs-dark);
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.ugcs-reservation-card .tribe-tickets__form-field {
    margin-bottom: 18px;
}

.ugcs-reservation-card .tribe-tickets__form-field-label {
    display: block;
    margin-bottom: 6px;

    color: var(--ugcs-dark);
    font-size: 14px;
    font-weight: 700;
}

.ugcs-reservation-card .tribe-required {
    color: var(--ugcs-violet);
}

.ugcs-reservation-card .tribe-tickets__form-field-input {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 10px 14px;

    background: #fff;
    border: 1px solid #DEDDE3;
    border-radius: 4px;

    color: var(--ugcs-dark);
    font-size: 15px;
    font-family: "Aptos", Arial, sans-serif;

    transition: border-color .2s ease;
}

.ugcs-reservation-card .tribe-tickets__form-field-input:focus {
    outline: none;
    border-color: var(--ugcs-violet);
}

.ugcs-reservation-card .tribe-tickets__rsvp-form-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 20px;
}

.ugcs-reservation-card .tribe-tickets__rsvp-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 11px 20px;
    box-sizing: border-box;

    background: var(--ugcs-violet) !important;
    color: #fff !important;
    border: 2px solid var(--ugcs-violet) !important;
    border-radius: 4px;

    font-size: 15px;
    font-weight: 700;
    cursor: pointer;

    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ugcs-reservation-card .tribe-tickets__rsvp-form-button:hover,
.ugcs-reservation-card .tribe-tickets__rsvp-form-button:focus-visible {
    background: #46194F !important;
    border-color: #46194F !important;
}

.ugcs-reservation-card .tribe-tickets__rsvp-form-button--cancel {
    background: #fff !important;
    color: var(--ugcs-violet) !important;
    border: 2px solid var(--ugcs-violet) !important;
}

.ugcs-reservation-card .tribe-tickets__rsvp-form-button--cancel:hover,
.ugcs-reservation-card .tribe-tickets__rsvp-form-button--cancel:focus-visible {
    background: var(--ugcs-violet) !important;
    color: #fff !important;
}


/*
 * ÉTAPE FINALE — message de confirmation ("Vous participez" / "Vous
 * ne participez pas"), affiché après validation. Habillage uniquement.
 */
.ugcs-reservation-card .tribe-tickets__rsvp-actions-success-going {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 0;

    color: var(--ugcs-dark);
    font-weight: 700;
}

.ugcs-reservation-card .tribe-tickets__rsvp-actions-success-going-check-icon {
    flex-shrink: 0;

    width: 20px;
    height: 20px;

    background: var(--ugcs-violet);
    border-radius: 50%;
}


/*
 * MESSAGE DE CONFIRMATION ("Votre réservation a été reçue...")
 *
 * L'icône "avion en papier" native (.tribe-tickets-svgicon) n'a aucune
 * taille définie — sans contrainte, elle s'affiche à sa taille par
 * défaut du navigateur, d'où la grande flèche noire observée.
 */
.ugcs-reservation-card .tribe-tickets__rsvp-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 20px;
    padding-bottom: 20px;

    border-bottom: 1px solid #E2DFE5;
}

.ugcs-reservation-card .tribe-tickets__rsvp-message--success-icon {
    flex-shrink: 0;
    margin-top: 4px;

    width: 18px;
    height: 18px;
}

.ugcs-reservation-card .tribe-tickets__rsvp-message--success-icon path {
    stroke: var(--ugcs-violet);
}

.ugcs-reservation-card .tribe-tickets__rsvp-message-text {
    color: var(--ugcs-dark);
    font-size: 14px;
    line-height: 1.5;
}

.ugcs-reservation-card .tribe-tickets__rsvp-message-text strong {
    display: block;
    margin-bottom: 2px;
}


/*
 * LISTE "VOS RÉSERVATIONS" — noms des participants déjà inscrits.
 */
.ugcs-reservation-card .tribe-tickets__rsvp-attendees-wrapper {
    margin-top: 20px;
    padding-top: 20px;

    border-top: 1px solid #E2DFE5;
}

.ugcs-reservation-card .tec-tickets__attendees-list-wrapper h4 {
    margin: 0 0 10px;

    color: var(--ugcs-dark);
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.ugcs-reservation-card .tec-tickets__attendees-list-item {
    padding: 8px 0;
    color: var(--ugcs-dark);
    font-size: 14px;
}

.ugcs-reservation-card .tec-tickets__attendees-list-item-attendee-details-name {
    font-weight: 700;
}


/* NAVIGATION PRÉCÉDENT / SUIVANT — deux cartes compactes */

.ugcs-event-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;

    margin-top: 80px;
}

.ugcs-event-navigation a {
    display: flex;
    align-items: center;
    gap: 20px;

    flex: 1 1 320px;
    max-width: 48%;
    min-height: 84px;
    padding: 18px 24px;
    box-sizing: border-box;

    color: var(--ugcs-dark);
    text-decoration: none;

    border-radius: 6px;

    transition: color .2s ease;
}

.ugcs-event-navigation a:hover,
.ugcs-event-navigation a:focus-visible {
    color: var(--ugcs-violet);
}

.ugcs-event-navigation__next {
    justify-content: flex-end;
    text-align: right;

    /* Si seul le bloc "suivant" existe (pas de précédent), il reste aligné à droite. */
    margin-left: auto;
}

.ugcs-event-navigation small,
.ugcs-event-navigation strong {
    display: block;
}

.ugcs-event-navigation small {
    margin-bottom: 5px;
    color: var(--ugcs-grey);
    font-size: 12px;
    text-transform: uppercase;
}

.ugcs-event-navigation strong {
    font-size: 17px;
}

.ugcs-event-navigation__arrow {
    flex-shrink: 0;
    font-size: 28px;
    color: var(--ugcs-violet);
}


/* TABLETTE */

@media (max-width: 1024px) {

    .ugcs-container {
        width: min(1200px, calc(100% - 48px));
    }

    .ugcs-event-header__inner {
        width: min(calc(100% - 48px), var(--ugcs-container));
    }

    .ugcs-event-header {
        min-height: 590px;
    }

    .ugcs-event-header__content {
        width: 52%;
    }

    .ugcs-event-summary {
        grid-template-columns: 130px 1fr 1fr;
    }

    .ugcs-event-summary__action {
        grid-column: 1 / -1;
        border-top: 1px solid var(--ugcs-border);
    }

    .ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button {
        width: 100%;
        justify-content: center;
    }

    .ugcs-practical {
        grid-template-columns: 1fr;
    }

    .ugcs-organizers {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 30px;
    }

    .ugcs-organizers h3 {
        grid-column: 1 / -1;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    .ugcs-container,
    .ugcs-event-header__inner {
        width: calc(100% - 36px);
    }

    .ugcs-event-header {
        height: auto;
        min-height: 680px;
    }

    .ugcs-event-header__image {
        inset: 0;
        height: 300px;
        background-position: center top;
    }

    .ugcs-event-header__fade {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .05) 0,
            rgba(255, 255, 255, .15) 25%,
            #fff 46%,
            #fff 100%
        );
    }

    .ugcs-event-header__inner {
        padding-top: 290px;
    }

    .ugcs-breadcrumb {
        margin-bottom: 30px;
        font-size: 13px;
    }

    .ugcs-event-header__content {
        width: 100%;
        max-width: none;
    }

    .ugcs-event-header h1 {
        font-size: 39px;
        letter-spacing: -.8px;
    }

    .ugcs-event-header__intro {
        font-size: 16px;
    }

    .ugcs-event-summary {
        grid-template-columns: 105px 1fr;

        width: calc(100% - 36px);
        margin-top: 25px;
        margin-bottom: 55px;
    }

    .ugcs-event-summary > div {
        padding: 22px;
    }

    .ugcs-event-summary__date strong {
        font-size: 43px;
    }

    .ugcs-event-summary__schedule {
        border-right: 0;
    }

    .ugcs-event-summary__place {
        grid-column: 1 / -1;
        border-top: 1px solid var(--ugcs-border);
        border-right: 0;
    }

    .ugcs-event-summary__action {
        grid-column: 1 / -1;
    }

    .ugcs-event-summary__action .tribe-events-c-subscribe-dropdown__button {
        width: 100%;
        justify-content: center;
    }

    .ugcs-event-section {
        margin-bottom: 55px;
    }

    .ugcs-event-section h2 {
        font-size: 21px;
    }

    .ugcs-location__map {
        aspect-ratio: 4 / 3;
    }

    .ugcs-location__overlay {
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
        padding: 15px;
    }

    .ugcs-organizers {
        display: block;
        padding: 22px;
    }

    .ugcs-reservations__grid {
        grid-template-columns: 1fr;
    }

    .ugcs-reservations .tribe-tickets__rsvp-wrapper {
        padding: 22px;
    }

    .ugcs-event-navigation a {
        max-width: 100%;
        flex-basis: 100%;
    }

    .ugcs-event-navigation__next {
        margin-left: 0;
    }

}


/* TRÈS PETITS ÉCRANS */

@media (max-width: 420px) {

    .ugcs-event-header h1 {
        font-size: 34px;
    }

    .ugcs-event-summary {
        grid-template-columns: 90px 1fr;
    }

    .ugcs-event-summary > div {
        padding: 18px;
    }

    .ugcs-event-summary__date strong {
        font-size: 38px;
    }

    .ugcs-event-navigation a {
        padding: 20px;
    }

}


/* ==========================================================
   FENÊTRE DE CONFIRMATION RSVP (remplace le confirm() natif)
   Injectée en JS (ugcs-rsvp-confirmation.js), directement dans
   <body> — d'où des sélecteurs non préfixés par .ugcs-event-single.
   ========================================================== */

.ugcs-rsvp-confirm {
    position: fixed;
    inset: 0;
    z-index: 100000;

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

.ugcs-rsvp-confirm__overlay {
    position: absolute;
    inset: 0;

    background: rgba(23, 25, 52, .55);
}

.ugcs-rsvp-confirm__box {
    position: relative;
    z-index: 1;

    width: min(420px, calc(100% - 40px));
    box-sizing: border-box;
    padding: 30px;

    background: #fff;
    border-radius: 8px;

    box-shadow: 0 20px 60px rgba(15, 5, 20, .25);

    font-family: "Aptos", Arial, sans-serif;
}

.ugcs-rsvp-confirm__title {
    margin: 0 0 12px;

    color: #171934;
    font-family: "Aptos Display", Aptos, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.ugcs-rsvp-confirm__text {
    margin: 0 0 24px;

    color: #555866;
    font-size: 15px;
    line-height: 1.5;
}

.ugcs-rsvp-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ugcs-rsvp-confirm__button {
    flex: 1 1 140px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 11px 20px;
    box-sizing: border-box;

    border-radius: 4px;

    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;

    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ugcs-rsvp-confirm__button--primary {
    background: #5B2167;
    color: #fff;
    border: 2px solid #5B2167;
}

.ugcs-rsvp-confirm__button--primary:hover,
.ugcs-rsvp-confirm__button--primary:focus-visible {
    background: #46194F;
    border-color: #46194F;
}

.ugcs-rsvp-confirm__button--secondary {
    background: #fff;
    color: #5B2167;
    border: 2px solid #5B2167;
}

.ugcs-rsvp-confirm__button--secondary:hover,
.ugcs-rsvp-confirm__button--secondary:focus-visible {
    background: #5B2167;
    color: #fff;
}

@media (max-width: 480px) {

    .ugcs-rsvp-confirm__actions {
        flex-direction: column-reverse;
    }

}