/**
 * Calendanse Event Social — styles bloc, boutons, compteurs, avatars.
 * Fond explicite pour cohérence fiche single + popup MEC (lity-content).
 */

.ces-block {
    margin: 1em 0;
    padding: 1em 1.25em;
    border-top: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 8px;
}

.ces-block--single .ces-block__title {
    margin: 0 0 0.6em;
    font-size: 1.1em;
    font-weight: 600;
    color: #1d2327;
}

.ces-block--single .ces-buttons {
    margin-bottom: 0.5em;
}

.ces-block--single .ces-block__empty {
    margin: 0.5em 0 0;
    font-size: 0.9em;
    color: #646970;
    font-style: italic;
}

.ces-block__error {
    margin: 0.5em 0 0;
    padding: 0.4em 0.6em;
    font-size: 0.9em;
    color: #b32d2e;
    background: #fcf0f1;
    border-radius: 4px;
}

.ces-block__error[hidden] {
    display: none;
}

/* -------------------------------------------------------------------------
 * Bloc « Qui y va ? » en popup Featherlight : colonne méta (mec_single_virtual_badge)
 * ------------------------------------------------------------------------- */
.ces-block--single.ces-block--compact {
    margin: 0.65rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #e3e3e3;
    box-shadow: none;
    font-size: 0.92rem;
    line-height: 1.35;
}

.ces-block--single.ces-block--compact .ces-block__title {
    font-size: 0.98rem;
    margin: 0 0 0.45em;
}

.ces-block--single.ces-block--compact .ces-buttons {
    gap: 0.35rem;
    margin-bottom: 0.4em;
}

.ces-block--single.ces-block--compact .ces-btn {
    padding: 0.38em 0.65em;
    font-size: 0.86rem;
}

.ces-block--single.ces-block--compact .ces-block__counts {
    font-size: 0.88rem;
    margin: 0.35em 0;
}

.ces-block--single.ces-block--compact .ces-block__invite,
.ces-block--single.ces-block--compact .ces-block__forum {
    margin: 0.4em 0 0;
    font-size: 0.88rem;
}

.mec-frontbox .ces-block--popup-sidebar {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.featherlight .ces-block--popup-fallback {
    margin-top: 1rem;
}

/* Popup MEC (Lity) : fond si le bloc est rendu dans un conteneur type lity-content */
.lity-content .ces-block,
.lity-content .ces-block--single {
    background: #fff;
    padding: 1em 1.25em;
    margin: 0 0 1em;
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ces-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
}

/* Boutons : états explicites (normal, hover, focus, active, disabled) */
.ces-btn {
    display: inline-block;
    padding: 0.5em 1em;
    font-size: 0.95em;
    line-height: 1.4;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #f0f0f1;
    color: #1d2327;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ces-btn:hover {
    border-color: #8c8f94;
    background: #dcdcde;
    color: #1d2327;
}

.ces-btn:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.ces-btn:focus:not(:focus-visible) {
    outline: none;
}

.ces-btn:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.ces-btn:active {
    background: #c3c4c7;
    border-color: #8c8f94;
}

.ces-btn--active,
.ces-btn.ces-btn--active {
    border-color: #2271b1;
    background: #2271b1;
    color: #fff;
}

.ces-btn--active:hover {
    background: #135e96;
    border-color: #135e96;
    color: #fff;
}

.ces-btn--active:focus,
.ces-btn--active:focus-visible {
    outline: 2px solid #135e96;
    outline-offset: 2px;
}

.ces-btn--active:active {
    background: #0d4b73;
    border-color: #0d4b73;
    color: #fff;
}

.ces-btn--disabled {
    cursor: default;
    opacity: 0.85;
    background: #f0f0f1;
    color: #646970;
}

.ces-btn--disabled:hover {
    background: #f0f0f1;
    border-color: #c3c4c7;
}

.ces-btn--loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Proximité géographique (ville / secteur) */
.ces-proximity {
    margin: 0.5em 0;
    padding: 0.5em 0.75em;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #2271b1;
}

.ces-proximity__line {
    margin: 0.25em 0;
    font-size: 0.9em;
    color: #1d2327;
}

.ces-proximity__line:first-child {
    margin-top: 0;
}

.ces-proximity__line:last-child {
    margin-bottom: 0;
}

/* Compteurs fiche single : deux lignes distinctes (participants / intéressés) */
.ces-block__counts {
    margin: 0.5em 0;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    font-size: 0.95em;
    color: #1d2327;
    line-height: 1.4;
}

.ces-block__counts .ces-count {
    display: block;
    font-weight: 500;
}

.ces-block__counts .ces-count--going {
    color: #2271b1;
}

.ces-block__counts .ces-count--interested {
    color: #646970;
}

.ces-count--clickable {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ces-count--clickable:hover {
    opacity: 0.85;
}

.ces-count--clickable:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Rétrocompat liste (une ligne compacte) */
.ces-counts {
    display: inline;
}

.ces-block__avatars {
    margin-top: 0.5em;
}

.ces-block__forum {
    margin: 0.75em 0 0;
    padding-top: 0.5em;
    border-top: 1px solid #eee;
    font-size: 0.95em;
}

.ces-forum-link {
    color: #2271b1;
    text-decoration: none;
}

.ces-forum-link:hover {
    color: #135e96;
    text-decoration: underline;
}

.ces-forum-link:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.ces-forum-link:focus:not(:focus-visible) {
    outline: none;
}

.ces-forum-link:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Lien "Inviter un ami" dans le bloc */
.ces-block__invite {
    margin: 0.5em 0 0;
    font-size: 0.95em;
}

.ces-invite-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.35em 0;
    color: #2271b1;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1em;
    text-decoration: none;
}

.ces-invite-trigger:hover {
    color: #135e96;
    text-decoration: underline;
}

.ces-invite-trigger:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.ces-invite-trigger:focus:not(:focus-visible) {
    outline: none;
}

.ces-invite-trigger:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.ces-avatars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ces-avatar-wrap {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
}

.ces-avatar-wrap img {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.ces-avatars-more {
    font-size: 0.85em;
    color: #666;
    margin-left: 2px;
}

/* Compteurs en vue liste (cartes) */
.ces-list-counters {
    margin-top: 0.35em;
    font-size: 0.85em;
    color: #555;
}

.ces-list-counters .ces-counts {
    display: inline;
}

/* Lisibilité dans la popup MEC et sur mobile */
.ces-block--single .ces-block__counts {
    min-height: 2.8em;
}

@media (max-width: 480px) {
    .ces-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .ces-btn {
        text-align: center;
    }

    .ces-block__counts {
        font-size: 0.9em;
    }
}

/* ——— Modale liste des répondants ——— */
.ces-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ces-modal.ces-modal--closed {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.ces-modal:not(.ces-modal--closed) {
    display: flex;
}

.ces-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.ces-modal__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.ces-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.ces-modal__title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #1d2327;
}

.ces-modal__close {
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem 0 0;
    font-size: 1.5em;
    line-height: 1;
    border: 0;
    background: transparent;
    color: #646970;
    cursor: pointer;
}

.ces-modal__close:hover {
    color: #1d2327;
}

.ces-modal__tabs {
    display: flex;
    flex-shrink: 0;
    gap: 0;
    padding: 0 1rem;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.ces-modal__tab {
    padding: 0.6em 1em;
    font-size: 0.9em;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #646970;
    cursor: pointer;
}

.ces-modal__tab:hover {
    color: #1d2327;
}

.ces-modal__tab.ces-modal__tab--active {
    font-weight: 600;
    color: #2271b1;
    border-bottom-color: #2271b1;
}

.ces-modal__content {
    overflow-y: auto;
    padding: 1rem 1.25rem;
    min-height: 120px;
}

.ces-modal__toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.ces-modal__sort-label {
    font-size: 0.9em;
    color: #646970;
}

.ces-modal__sort {
    padding: 0.35em 0.5em;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.ces-modal__loading,
.ces-modal__empty {
    margin: 0;
    color: #646970;
    font-size: 0.95em;
}

.ces-modal__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ces-modal__user {
    margin: 0 0 0.5em;
    padding: 0;
}

.ces-modal__user:last-child {
    margin-bottom: 0;
}

.ces-modal__user-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4em 0;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
}

.ces-modal__user-link:hover {
    background: #f0f0f1;
}

.ces-modal__user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ces-modal__user-info {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    flex: 1;
    min-width: 0;
}

.ces-modal__user-name {
    font-weight: 500;
    color: #1d2327;
}

.ces-modal__user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ces-modal__badge {
    font-size: 0.85em;
    line-height: 1;
}

.ces-modal__user-status {
    margin-left: auto;
    font-size: 0.85em;
    color: #646970;
    flex-shrink: 0;
}

.ces-modal__more-wrap {
    margin-top: 0.75rem;
    text-align: center;
}

.ces-modal__more-wrap .ces-btn {
    min-width: 10rem;
}

body.ces-modal-open {
    overflow: hidden;
}

/* ——— Modale "Inviter un ami" ——— */
.ces-invite-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ces-invite-modal.ces-invite-modal--closed {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.ces-invite-modal:not(.ces-invite-modal--closed) {
    display: flex;
}

.ces-invite-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.ces-invite-modal__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.ces-invite-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
}

.ces-invite-modal__title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #1d2327;
}

.ces-invite-modal__close {
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem 0 0;
    font-size: 1.5em;
    line-height: 1;
    border: 0;
    background: transparent;
    color: #646970;
    cursor: pointer;
}

.ces-invite-modal__close:hover {
    color: #1d2327;
}

.ces-invite-modal__body {
    padding: 1rem 1.25rem;
}

.ces-invite-modal__row {
    margin-bottom: 1rem;
}

.ces-invite-modal__row:last-child {
    margin-bottom: 0;
}

.ces-invite-modal__label {
    display: block;
    margin-bottom: 0.35em;
    font-size: 0.9em;
    font-weight: 500;
    color: #1d2327;
}

.ces-invite-modal__input {
    width: 100%;
    padding: 0.5em 0.6em;
    font-size: 0.95em;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
}

.ces-invite-modal__textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.5em 0.6em;
    font-size: 0.95em;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    resize: vertical;
}

.ces-invite-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ces-invite-modal__actions .ces-btn {
    flex: 1 1 auto;
    min-width: 120px;
}

.ces-invite-modal__share-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ces-invite-modal__share-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.4em 0.75em;
    font-size: 0.9em;
    border-radius: 4px;
    text-decoration: none;
    color: #1d2327;
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
}

.ces-invite-modal__share-links a:hover {
    background: #dcdcde;
    border-color: #8c8f94;
}

@media (max-width: 480px) {
    .ces-modal__box {
        max-height: 90vh;
    }

    .ces-modal__tabs {
        flex-wrap: wrap;
    }

    .ces-modal__tab {
        flex: 1 1 auto;
    }

    .ces-modal__user-status {
        margin-left: 0;
        width: 100%;
        padding-left: 3.25rem;
    }
}

/* =============================================================================
 * Featherlight + fiche événement AJAX MEC — chaîne hauteur / scroll (v2 flex)
 *
 * DOM réel (Featherlight setup + setContent) :
 *   .featherlight
 *   ├── ::before (inline-block 100% height — centrage vertical d’origine)
 *   └── .featherlight-content (Featherlight: inline-block, max-height 95%, padding
 *       + border-bottom transparent ; MEC body .featherlight : overflow unset)
 *           ├── .featherlight-close-icon (position absolute)
 *           └── .featherlight-inner  ===  même nœud que  .mec-wrap.mec-modal-wrap
 *               (la racine HTML AJAX reçoit la classe .featherlight-inner ; ce n’est
 *               pas un wrapper autour de .mec-modal-wrap).
 *
 * Audit v2 — élément qui bloquait encore :
 *   - .featherlight-content restait le « vrai » plafond implicite (inline-block +
 *     max-height 95 % + padding) sans colonne flex : une max-height seule sur
 *     .mec-modal-wrap ne suffit pas si le parent ne transmet pas une hauteur bornée
 *     au bon descendant.
 *   - Le couple ::before + vertical-align:middle sur l’overlay rognait toujours
 *     quand la boîte dépassait le viewport.
 *
 * Correctif : overlay en flex (sans ::before), .featherlight-content en colonne
 * plafonnée au viewport avec overflow:hidden, enfant direct .featherlight-inner
 * en flex:1 min-height:0 overflow-y:auto. Annule le max-height MEC sur .mec-modal-wrap
 * dans ce contexte (max-height: none).
 *
 * Périmètre : body .featherlight:has(.mec-modal-wrap) uniquement.
 * ============================================================================= */

/* 1) Overlay : flex, pas de scroll ici (un seul ascenseur = .featherlight-inner). */
body .featherlight:has(.mec-modal-wrap) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: hidden;
    box-sizing: border-box;
    white-space: normal;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
}

body.admin-bar .featherlight:has(.mec-modal-wrap) {
    padding-top: max(40px, env(safe-area-inset-top, 0px));
}

body .featherlight:has(.mec-modal-wrap)::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
}

/* 2) Boîte modale : hauteur bornée au viewport, colonne flex, pas de débordement. */
body .featherlight:has(.mec-modal-wrap) .featherlight-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 auto;
    align-self: center;
    min-height: 0 !important;
    width: 100%;
    max-width: min(98vw, 1400px);
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    height: auto;
    overflow: hidden !important;
    vertical-align: top !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 12px 16px 16px !important;
    border-bottom: none !important;
    background: transparent !important;
    text-align: left;
}

body.admin-bar .featherlight:has(.mec-modal-wrap) .featherlight-content {
    max-height: calc(100vh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
}

/* 3) Racine MEC = .featherlight-inner (même élément que .mec-modal-wrap) : scroll ici. */
body .featherlight:has(.mec-modal-wrap) .featherlight-content > .featherlight-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box !important;
    /* Marge bas scrollable (dernier bloc lisible au-dessus du bord). */
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
}

/* 4) Éviter scrolls imbriqués : pas de 2e ascenseur sur les colonnes / blocs (l’inner garde le scroll). */
body .featherlight:has(.mec-modal-wrap) .featherlight-inner .mec-single-modal,
body .featherlight:has(.mec-modal-wrap) .featherlight-inner .mec-single-event,
body .featherlight:has(.mec-modal-wrap) .featherlight-inner .row,
body .featherlight:has(.mec-modal-wrap) .featherlight-inner .col-md-4,
body .featherlight:has(.mec-modal-wrap) .featherlight-inner .col-md-8 {
    overflow: visible !important;
    max-height: none !important;
}

body .featherlight:has(.mec-modal-wrap) .featherlight-inner .ces-block--single,
body .featherlight:has(.mec-modal-wrap) .featherlight-inner .cdl-live-box {
    overflow: visible !important;
    max-height: none !important;
}