.banner-list {
    background-image: url("../../media/banners/liste-competitions-MLNcfUQ.png");
    background-size: cover;
    background-position: center;
    min-height: 280px;
}

.text-outline-white {
    -webkit-text-stroke: 1px white;
    font-weight: 700;
    font-size: 4rem;
}

/* Statut d'engagement (ouvert / pas encore ouvert / fermé) */
.status-pill {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35em 0.75em;
    border-radius: 999px;
    white-space: nowrap;
}

.status-pill-success {
    background-color: rgba(25, 135, 84, 0.12);
    color: #146c43;
}

.status-pill-warning {
    background-color: rgba(255, 193, 7, 0.18);
    color: #997404;
}

.status-pill-danger {
    background-color: rgba(220, 53, 69, 0.12);
    color: #b02a37;
}

@media (max-width: 991.98px) {
    .hero-highlight {
        font-size: 3.4rem !important;
    }
}

/* Colonne "Statut" : uniquement sur mobile, pas dans le tableau desktop */
@media (min-width: 768px) {
    .event-table th:nth-child(3),
    .event-table td:nth-child(3) {
        display: none;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .hero-highlight {
        font-size: 2.6rem !important;
    }

    .btn.btn-mobile {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }
}

/*
 * Tableau des compétitions : transformation en cartes sur mobile.
 * On garde le même <table> (généré par le composant Datatable partagé),
 * on le restyle en pur CSS pour ne pas impacter les autres tableaux du site.
 */
@media (max-width: 767.98px) {
    .event-table .rounded.border {
        border: none !important;
        border-radius: 0 !important;
    }

    .event-table .table-responsive {
        overflow: visible;
    }

    .event-table table {
        border: none;
    }

    .event-table thead {
        display: none;
    }

    .event-table tbody,
    .event-table tr,
    .event-table td {
        display: block;
        width: 100%;
    }

    .event-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.35rem;
        background-color: #fff !important;
        border: 1px solid var(--border-pantone-light, rgba(0, 70, 128, 0.1));
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0, 70, 128, 0.08);
        padding: 1rem 1.1rem;
        margin-bottom: 1rem;
    }

    .event-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .event-table td {
        padding: 0.15rem 0;
        border: none !important;
        grid-column: 1 / -1;
        /* Bootstrap 5.3's .table-striped/.table-hover don't paint via
           background-color but via an inset box-shadow on the <td> itself
           (box-shadow: inset 0 0 0 9999px var(--bs-table-bg-type, ...)),
           so background-color alone doesn't neutralize it — box-shadow must
           be cleared too. */
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Colonne "Date" -> badge à gauche, 1re ligne */
    .event-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background-color: rgba(0, 70, 128, 0.08) !important;
        color: var(--color-pantone);
        font-weight: 600;
        font-size: 0.8rem;
        padding: 0.25rem 0.65rem;
        border-radius: 999px;
        margin-bottom: 0.15rem;
    }

    .event-table td:nth-child(1)::before {
        font-family: "bootstrap-icons" !important;
        font-weight: normal;
        content: "\f1e8";
    }

    /* Colonne "Nom" -> titre de la carte, 2e ligne, pleine largeur */
    .event-table td:nth-child(2) {
        grid-row: 2;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-pantone);
        margin-bottom: 0.35rem;
    }

    /* Colonne "Statut" -> badge coloré à droite, 1re ligne (à côté de la date) */
    .event-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        width: auto;
        margin-bottom: 0.15rem;
    }

    .event-table td:nth-child(3) .status-pill {
        font-size: 0.75rem;
    }

    /* Colonnes "Ouv./Ferm. engagement" -> lignes d'info avec libellé */
    .event-table td:nth-child(4),
    .event-table td:nth-child(5) {
        font-size: 0.85rem;
        color: #495057;
    }

    .event-table td:nth-child(5) {
        margin-bottom: 0.75rem;
    }

    .event-table td:nth-child(4)::before {
        content: "Ouverture engagement : ";
        font-weight: 600;
        color: var(--color-pantone);
    }

    .event-table td:nth-child(5)::before {
        content: "Fermeture engagement : ";
        font-weight: 600;
        color: var(--color-pantone);
    }

    /* Colonne actions -> bouton pleine largeur en bas de carte */
    .event-table td:nth-child(6) .btn.btn-mobile {
        width: 100%;
        font-size: 0.95rem;
        padding: 0.55rem 1rem;
    }
}