/* Base */


.fff-container {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #222;
    line-height: 1.4;
}

.fff-title {
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
}

.fff-subtitle {
    font-weight: 600;
    border: 0 !important;
}

.fw-black {
    font-weight: 900;
}

/* Headers Noirs */
.fff-separator-next {
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

/* Pastilles de Score */
.fff-score-container {
    display: inline-block;
    padding: 5px 20px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.fff-score-win {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754 !important;
}

.fff-score-loss {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545 !important;
}

.fff-score-neutral {
    background-color: rgba(33, 37, 41, 0.07);
    color: #212529 !important;
}

.fff-score {
    font-size: 2.2rem;
    font-weight: 900;
    display: inline-block;
    line-height: 1;
    letter-spacing: -1px;
}

/* Légendes et Icônes UTF-8 */
.fff-legend {
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Wrapper pour aligner date et lieu à gauche tout en restant centré dans la colonne */
.fff-info-wrapper {
    display: inline-block;
    text-align: left;
}

.fff-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 1rem;
    opacity: 0.9;
    width: 1.2rem;
    /* Largeur fixe pour alignement vertical parfait */
    text-align: center;
}

/* Alignement vertical forcé pour le tableau */
.align-items-center {
    align-items: center !important;
}

.modal-backdrop,
.fade,
.in {
    margin: 0 0;
    padding: 0 0;
}

.modal-dialog {
    max-width: 75% !important;
}

/* Si l'appareil a un écran tactile (pas de souris précise) */
@media (pointer: coarse) {
    .modal-dialog {
        max-width: 90% !important;
        font-size: 1.5rem;
    }

    /* On agrandit les boutons pour qu'ils soient "cliquables" au doigt */
    #myModal .btn-close {
        transform: scale(1.5);
    }

    #myModal .fs-5 {
        font-size: 1.5rem !important;
    }

    #myModal .fff-legend {
        font-size: 1.1rem !important;
    }

    #myModal .btn-secondary {
        padding: 20px 40px !important;
        font-size: 1.5rem !important;
    }
}