/* ===================================================================
   SHORTCODE [prochains_bals] — Styles
   Design aligné sur le bloc "L'ASSOCIATION" du site Divi
   Palette : beige #e8dfd0, brun #6b3f1a, accent #c07a2a
   =================================================================== */

/* --- Conteneur principal : aucun fond, juste le wrapper --- */
.gbc-prochains-bals {
    font-family: inherit;
    display: flex;
    flex-direction: column;
}

/* --- En-tête : barre verticale + titre + lien (comme L'ASSOCIATION) --- */
.gbc-prochains-bals__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.gbc-prochains-bals__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #6b3f1a !important;
    line-height: 1.2 !important;
}

/* Barre verticale accent (remplace l'icône) */
.gbc-prochains-bals__title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background: #c07a2a;
    border-radius: 2px;
    flex-shrink: 0;
}

.gbc-prochains-bals__title-icon {
    font-size: 14px;
    line-height: 1;
}

.gbc-prochains-bals__link-all {
    color: #c07a2a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.gbc-prochains-bals__link-all:hover {
    opacity: 0.8;
    text-decoration: none !important;
}

/* --- Bloc liste : fond beige arrondi (comme le bloc asso) --- */
.gbc-prochains-bals__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #e8dfd0;
    border-radius: 8px;
    overflow: hidden;
}

/* --- Chaque ligne de bal --- */
.gbc-prochains-bals__item {
    padding: 0 !important;
    border-bottom: 1px solid #d9cfc2 !important;
    transition: background-color 0.15s ease;
}

.gbc-prochains-bals__item:last-child {
    border-bottom: none !important;
}

.gbc-prochains-bals__item:hover {
    background: rgba(192, 122, 42, 0.07);
}

/* Lien cliquable sur toute la ligne */
.gbc-prochains-bals__item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    width: 100%;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
}

.gbc-prochains-bals__item-link:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* --- Date --- */
.gbc-prochains-bals__date {
    flex-shrink: 0;
    min-width: 78px;
    font-size: 13px;
    font-weight: 700;
    color: #c07a2a;
    font-variant-numeric: tabular-nums;
}

/* --- Infos du bal (nom + ville) --- */
.gbc-prochains-bals__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.gbc-prochains-bals__name {
    font-size: 15px;
    font-weight: 600;
    color: #4a3520;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    transition: color 0.15s ease;
}

.gbc-prochains-bals__item:hover .gbc-prochains-bals__name {
    color: #c07a2a;
}

.gbc-prochains-bals__location {
    font-size: 11px;
    color: #7a6a58;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* --- Badges (Gratuit, anniversaire, etc.) --- */
.gbc-prochains-bals__badges {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    align-items: center;
}

.gbc-prochains-bals__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.4;
}

.gbc-prochains-bals__badge--gratuit {
    background: #c8e6c9;
    color: #2e7d32;
}

.gbc-prochains-bals__badge--anniversary {
    background: #bbdefb;
    color: #1565c0;
}

.gbc-prochains-bals__badge--complet {
    background: #ffcdd2;
    color: #c62828;
}

.gbc-prochains-bals__badge--special {
    background: #e1bee7;
    color: #7b1fa2;
}

/* --- Pied de page / note --- */
.gbc-prochains-bals__footer {
    margin-top: 10px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #7a6a58;
    line-height: 1.3;
}

.gbc-prochains-bals__footer-icon {
    flex-shrink: 0;
    font-size: 11px;
}

.gbc-prochains-bals__footer a {
    color: #c07a2a !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(192, 122, 42, 0.3) !important;
    text-underline-offset: 2px;
}

.gbc-prochains-bals__footer a:hover {
    text-decoration-color: #c07a2a !important;
}

/* --- Message "aucun bal" --- */
.gbc-prochains-bals__empty {
    padding: 16px 14px;
    text-align: center;
    background: #e8dfd0;
    border-radius: 8px;
    color: #7a6a58;
    font-size: 13px;
    font-style: italic;
}

/* --- Responsive mobile --- */
@media (max-width: 600px) {
    .gbc-prochains-bals__title {
        font-size: 15px !important;
        letter-spacing: 0.5px !important;
    }

    .gbc-prochains-bals__link-all {
        font-size: 13px !important;
    }

    .gbc-prochains-bals__item-link {
        padding: 10px 12px;
        gap: 10px;
    }

    .gbc-prochains-bals__date {
        min-width: 78px;
        font-size: 14px;
    }

    .gbc-prochains-bals__name {
        font-size: 15px;
    }

    .gbc-prochains-bals__location {
        font-size: 12px;
    }

    .gbc-prochains-bals__badge {
        font-size: 9px;
        padding: 2px 5px;
    }
}

/* --- Animation d'entrée --- */
@keyframes gbc-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gbc-prochains-bals__item {
    animation: gbc-fadeInUp 0.3s ease both;
}

.gbc-prochains-bals__item:nth-child(1) {
    animation-delay: 0.03s;
}

.gbc-prochains-bals__item:nth-child(2) {
    animation-delay: 0.06s;
}

.gbc-prochains-bals__item:nth-child(3) {
    animation-delay: 0.09s;
}

.gbc-prochains-bals__item:nth-child(4) {
    animation-delay: 0.12s;
}

.gbc-prochains-bals__item:nth-child(5) {
    animation-delay: 0.15s;
}

.gbc-prochains-bals__item:nth-child(6) {
    animation-delay: 0.18s;
}

.gbc-prochains-bals__item:nth-child(7) {
    animation-delay: 0.21s;
}

.gbc-prochains-bals__item:nth-child(8) {
    animation-delay: 0.24s;
}

.gbc-prochains-bals__item:nth-child(9) {
    animation-delay: 0.27s;
}

.gbc-prochains-bals__item:nth-child(10) {
    animation-delay: 0.30s;
}

.gbc-prochains-bals__item:nth-child(11) {
    animation-delay: 0.33s;
}

.gbc-prochains-bals__item:nth-child(12) {
    animation-delay: 0.36s;
}

.gbc-prochains-bals__item:nth-child(13) {
    animation-delay: 0.39s;
}

.gbc-prochains-bals__item:nth-child(14) {
    animation-delay: 0.42s;
}

/* --- Bouton global final --- */
html body #page-container .et_builder_inner_content .gbc-prochains-bals a.gbc-prochains-bals__final-btn,
.gbc-prochains-bals__final-btn {
    display: block !important;
    background-color: #2B4C7E !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 9px 14px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-top: auto !important;
    /* Pousse en bas dans un conteneur flex */
    transition: background 0.2s ease, opacity 0.2s ease !important;
    opacity: 1 !important;
}

html body #page-container .et_builder_inner_content .gbc-prochains-bals a.gbc-prochains-bals__final-btn:hover,
.gbc-prochains-bals__final-btn:hover {
    background-color: #1e395b !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

.gbc-prochains-bals__item:nth-child(15) {
    animation-delay: 0.45s;
}