/* --- CARTE ÉVÉNEMENT PRINCIPAL (MAIN EVENT) --- */
.card-event-main {
    background: linear-gradient(135deg, #282b2d 0%, #1a1c1d 100%);
    border: 1px solid #444;
    border-radius: 2px;
	margin-bottom: 10px;
    display: flex;
    overflow: hidden;
    position: relative;
}

.card-event-body {
    padding: 30px;
    flex: 1;
    z-index: 2; /* S'assure que le texte est au-dessus */
}

.event-main-title {
    font-family: 'Oswald', sans-serif;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 10px;
    line-height: 1.1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.event-countdown {
    margin-top: 15px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    color: #edc13b;
    font-weight: bold;
}

/* Boutons personnalisés */
.btn-ufc-gold {
    background-color: #edc13b;
    color: #111;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 1px;
    margin-right: 10px;
    margin-top: 10px;
    border: none;
    transition: 0.3s;
    padding: 8px 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-ufc-gold:hover {
    background-color: #fff;
    color: #111;
    /*transform: translateY(-2px);*/
}

.btn-ufc-outline {
    background: transparent;
    border: 1px solid #edc13b;
    color: #edc13b;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 2px;
    margin-right: 10px;
    margin-top: 10px;
    transition: 0.3s;
    padding: 8px 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-ufc-outline:hover {
    background: rgba(237, 193, 59, 0.1);
    color: #fff;
    border-color: #fff;
}

/* Poster et Images */
.card-event-poster {
    padding: 20px;
    display: flex;
    align-items: center;
/*background: linear-gradient(to bottom left, rgba(255,255,255,0.15) 0%, transparent 60%);*/
}

.poster-main {
    max-height: 320px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    border: 1px solid #555;
    transition: transform 0.3s;
}
.poster-main:hover {
    transform: scale(1.02);
}

/* Utilitaires Textes */
.event-text-gold { color:  var(--gold) !important; font-weight: bold; }
.event-text-muted-light { color: #aaa !important; font-size: 0.9rem; }

.badge-live-event {
    color: #fff;
    background: #dc3545;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
}
/* --- COUNTDOWN --- */
.clock {
    display: inline-block;       /* Permet de bien gérer la taille du bloc */
    background-color: #de520a;   /* Ta couleur orange */
    color: #fff;
    font-weight: 700;            /* Plus précis que 'bold' */
    font-size: 1.5rem;           /* Environ 24px (plus responsive que px) */
    
    padding: 4px 8px;            /* Un peu plus d'air pour la lisibilité */
    margin: 0 2px;               /* Espace entre les blocs uniquement */
    border-radius: 2px;          /* Coins légèrement arrondis (Standard actuel) */
    
    /* LE SECRET POUR LES COMPTEURS : */
    font-variant-numeric: tabular-nums; /* Empêche les chiffres de "danser" */
    
    /* Optionnel : Une toute petite ombre pour décoller du fond */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    
    /* Alignement vertical propre */
    vertical-align: middle;
    line-height: 1.2;
}

/* --- GESTION DU MODE CLAIR (LIGHT MODE) --- */

/* 1. On passe le fond de la carte en Blanc */
body.light-mode .card-event-main {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-color: #dee2e6; /* Bordure grise claire */
}

/* 2. On passe le Titre en Noir */
body.light-mode .event-main-title {
    color: #212529;
    text-shadow: none; /* On enlève l'ombre portée noire qui bave sur le blanc */
}

/* 3. On fonce le gris des infos (Date/Lieu) pour qu'on puisse lire sur du blanc */
body.light-mode .text-muted-light {
    color: #666 !important;
}

/* 4. Ajustement Bouton Outline au survol */
/* Sur fond blanc, le texte blanc au survol ne se voit pas, on le passe en noir */
body.light-mode .btn-ufc-outline {
    color: #fff;
    background-color: #202224;
}
body.light-mode .clock {border-radius: 2px;box-shadow: 0 0px 0px rgba(0,0,0,0.2);}
body.light-mode .poster-main {box-shadow: 0 2px 5px rgba(0,0,0,0.8);}
body.light-mode .event-text-gold { color:  #202224 !important;}
body.light-mode .event-text-muted-light { color: #202224 !important;}
body.light-mode .btn-ufc-gold:hover {border: 1px solid #202224;}

body.light-mode #evenement-liste .btn-ufc-outline:hover {background-color: #fff;border: 1px solid #202224;color: #202224;}
body.light-mode #evenement-liste .btn-ufc-outline {
    color: #fff;
    background-color: #202224;
	border: 0;
}

/* --- 2. EXCEPTION ACCUEIL : ON FORCE LE RESTE EN NOIR --- */
/* On remet le fond noir et la bordure sombre */
body.light-mode #template-evenement-direct .card-event-main {
    background: linear-gradient(135deg, #282b2d 0%, #1a1c1d 100%) !important;
    border-color: #444 !important;
}

/* On remet le titre en BLANC */
body.light-mode #template-evenement-direct .event-main-title {
    color: #fff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

/* On remet les infos en gris clair */
body.light-mode #template-evenement-direct .event-text-muted-light {
    color: #aaa !important;
}
body.light-mode #template-evenement-direct .event-text-gold { color:  var(--gold) !important; }

/* On remet le bouton outline en Doré (texte) */
body.light-mode #template-evenement-direct .btn-ufc-outline {
    color: #edc13b !important;
    border-color: #edc13b !important;
    background-color: transparent !important;
}

/* On remet le bouton outline en Blanc au survol */
body.light-mode #template-evenement-direct .btn-ufc-outline:hover {
    color: #fff !important;
    background-color: rgba(237, 193, 59, 0.1) !important;
}

/* ------------------------------------- */
/* Style pour l'animation de la flèche */
/* ------------------------------------- */
.btn[aria-expanded="false"] .transition-icon {
    transform: rotate(180deg);
}
.btn[aria-expanded="true"] .transition-icon {
    transform: rotate(0deg);
}

.transition-icon {
    font-size: 1rem; /* Assez petite et discrète */
    color: #edc13b;  /* COULEUR OR (Ta charte) */
	vertical-align: middle;  /*Bien alignée avec le texte */
    transition: transform 0.3s ease; /* Transition douce pour la rotation */
    opacity: 0.8;
}

/* 2. L'animation au survol */
/* Quand on passe la souris sur le bouton (li), la flèche tourne */
.transition-icon:hover  {
    opacity: 1; /* Devient bien brillante */
    color: #fff; /* Optionnel : Passe en blanc au survol ? (Sinon garde or) */
}


/* ------------------------------------- */
/* Style pour les horaires des evenements */
/* ------------------------------------- */