/* =========================================================
   BLOC COMBAT GLOBAL
   ========================================================= */
   /* --- Bloc Combat Global --- */
.combat-event-bloc-combat {
    background-color: var(--rank-bg-global);
    color: var(--rank-text);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

body.light-mode .combat-event-bloc-combat{border:none;}


/* =========================================================
   --- EN-TÊTE : DATE & LIEU ---
   ========================================================= */
   
/* Container de l'en-tête */
.combat-header-update {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.1); /* Léger relief */
}

/* Date de l'événement */
.combat-date {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    color: var(--text-meta);
    margin-bottom: 4px;
}

/* Lieu de l'événement */
.combat-location {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-main); /* Ou blanc selon ton thème */
}

/* Titre doré (Main Event / Co-Main) */
.combat-title-gold {
    margin-top: 1.25rem;
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--gold);
    letter-spacing: 1px;
    /* Optionnel : petite lueur discrète pour le titre */
    text-shadow: 0 0 15px rgba(237, 193, 59, 0.2);
}
/* =========================================================
   PHOTO
   ========================================================= */

.fighter-image-wrapper {
    position: relative;
    display: inline-block;
    width: 140px; /* On fixe la largeur pour le centrage des badges */
    margin: 0 auto;
}

.combat-photo {
width: 100%;             /* S'adapte à la largeur du parent (140px sur PC) */
    max-width: 140px;        /* Limite la taille pour garder une netteté maximale */
    height: auto;
    aspect-ratio: 1 / 1;     /* Force un carré parfait, indispensable pour le design */
    object-fit: cover;       /* Coupe l'image proprement si elle n'est pas carrée d'origine */
    
    border-radius: 12px;     /* Coins arrondis style "Card" moderne */
    border: 2px solid var(--border-color);
    background-color: var(--rank-bg-row);
    
    /* Effet de profondeur pour détacher le combattant du fond */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    
    /* Animation fluide lors du survol ou du chargement */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: block;
    margin: 0 auto;
}


/* =========================================================
   TALE OF THE TAPE
   ========================================================= */
   
   	/* Empêche les images de déborder et de casser le centrage */
#BlocCombatTaleoftheTape .col-5 img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Force le VS à ne pas aller à la ligne */
#BlocCombatTaleoftheTape .col-2 {
    white-space: nowrap;
    z-index: 10;
}
	
/* --- Gestion des noms --- */
.combat-nom-new {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-title);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    margin: 0 auto 15px auto;
    transition: color 0.3s;
}


.combat-nom-new:hover {
    color: var(--gold);
}


/* --- VS Central --- 
.vs-divider{width:100px;text-align:center;}
*/
.vs-text {
    font-size: 3.2rem;
    font-weight: 900;
    font-style: italic;
    color: var(--gold);
    /*text-shadow: 0 0 15px rgba(237, 193, 59, 0.4);*/
    margin: 0 10px;
}
.vs-text img{
    /*filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));  Petit éclat doré */
}

body.light-mode .vs-text {text-shadow:none;letter-spacing: 2px;font-style: normal;}
.tott-separator span {
    /* 1. On lui donne la même couleur que le fond du bloc pour masquer la ligne */
    background-color: var(--rank-bg-row); 
    
    /* 2. On s'assure qu'il se comporte comme un bloc pour bien couvrir la zone */
    display: inline-block; 
}

/* --- Tale of the Tape (TOTT) --- */
.tott-container {
    background: var(--rank-bg-row);
    border-radius: 8px;
    margin: 15px;
    padding: 10px;
}

.tott-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.tott-row:last-child { border-bottom: none; }

.tott-label {
    color: var(--text-meta);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tott-val {
    color: var(--rank-text);
    font-weight: 700;
    flex: 1;
}
/* =========================================================
   RÉSULTAT & ARBITRE
   ========================================================= */
   
/* Container global du résultat */
.combat-result-box {
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid var(--border-color);
    background-color: #171717;
}

body.light-mode .combat-result-box {background-color: #272b30}
/* Label "Résultat Officiel" */
.result-label {
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--text-meta);
    letter-spacing: 2px;
}

/* Texte principal (KO, Décision, etc.) */
.result-main-text {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gold);
    font-style: italic;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    text-shadow: 0 0 15px rgba(237, 193, 59, 0.2);
}

/* Détails (Round, Temps) */
.result-sub-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

/* Zone Arbitre */
.result-arbitre-zone {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.arbitre-label {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-meta);
}

.arbitre-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold);
    text-decoration: none;
    transition: opacity 0.2s;
}

.arbitre-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}



/* =========================================================
   POINTS FORTS
   ========================================================= */

/* Container principal des points forts */
.combat-strengths-box {
    padding: 1rem;
    /*background-color: rgba(0, 0, 0, 0.2);*/
    border-top: 1px solid var(--border-color);
}

/* Colonne (gauche/droite) */
.strength-column {
    padding: 0 10px;
}

/* La bordure de séparation entre les deux colonnes */
.strength-column.border-end {
    border-color: var(--border-color) !important;
}

/* Titre "POINTS FORTS" */
.strength-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

/* Texte de la description */
.strength-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}
body.light-mode .strength-text
{
    color: rgba(0, 0, 0, 0.9);
}
/* Style de combat / Background (ex: Striker, BJJ) */
.strength-style {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-style: italic;
    color: #0dcaf0; /* Équivalent text-info, à remplacer par une variable si besoin */
}

/* Ajustement mobile */
@media (max-width: 576px) {
    .strength-title { font-size: 0.65rem; }
    .strength-text { font-size: 0.75rem; }
}

/* =========================================================
   --- Boutons de Vote --- 
   ========================================================= */

.vote-wrapper {
    position: absolute;
    bottom: -12px; /* Chevauche le bas de l'image */
    left: 50%;
    transform: translateX(-10%);
    width: 100%;
    z-index: 10;
}

.btn-vote-showdown {
    background: #007bff; /* Bleu */
    color: #fff;
    border: 1px solid #007bff;
    border-radius: 10px;
    padding: 4px 12px;
    font-size: 0.79rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.2s ease;
    /*min-width: 85px;*/
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    text-transform: uppercase;
}

.btn-vote-showdown:hover {
background: #0056b3;
}


/* =========================================================
   Badges Superposés
   ========================================================= */

/* --- Ranking (Haut Gauche) --- */
.fighter-rank-overlay {
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 15;
    
    background: var(--gold); /* Fond doré */
    color: #000;             /* Texte noir pour le contraste */
    font-weight: 900;
    font-size: 0.8rem;
    padding: 0px 8px;
    border-radius: 4px;
    border: 2px solid var(--gold);
    
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transform: rotate(-5deg);
	display: flex;
    align-items: center;    /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
}

/* --- Badge / Record (Bas gauche sur la photo) ex: 14-2-0 --- */
.fighter-record-badge {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 5;
    
    background: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent */
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(2px); /* Effet de flou derrière le texte */
}
.fighter-result-badge{
position: absolute;bottom: -16px;
left: 50%;
transform: translateX(-50%);
}
.fighter-result-badge .badge-right, .fighter-result-badge .badge-left{font-size: 1.1rem;}
/* =========================================================
   FOOTER UPDATE
   ========================================================= */
/* Container global du footer */
.combat-footer-update {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espace entre la date et les vues */
    padding: 0.75rem;
    background-color: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--border-color);
}



/* Style commun pour les blocs meta (Update & Views) */
.combat-footer-meta-update, 
.combat-footer-meta-views {
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre l'icône et le texte */
    font-size: 0.75rem;
    color: var(--text-meta);
    opacity: 0.8;
}

body.light-mode .combat-footer-update{background-color: #272b30;}
/* Ciblage spécifique pour le Light Mode */
body.light-mode .combat-footer-meta-update, 
body.light-mode .combat-footer-meta-views {
    color: #FFFFFF !important;
    opacity: 1 !important; /* On retire l'opacité pour que le blanc soit bien vif */
}

/* Style des icônes FontAwesome */
.combat-footer-update i {
    display: flex;          /* Force l'icône à se comporter comme un bloc flex */
    align-items: center;    /* Centre l'icône elle-même */
    justify-content: center;
    width: 14px;            /* Largeur fixe pour éviter les sauts de texte */
    font-size: 0.75rem;     /* On l'aligne sur la taille du texte */
    color: var(--gold);
    
    /* Le petit hack si c'est toujours un peu trop haut visuellement */
    transform: translateY(1px);
}

/* Hover pour rendre la zone interactive */
.combat-footer-update:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

/* Adaptation Mobile : On empile si l'écran est trop petit */
@media (max-width: 480px) {
    .combat-footer-update {
        flex-direction: column;
        gap: 5px;
        padding: 0.5rem;
    }
}



/* =========================================================
   POSTER COMBAT
   ========================================================= */
/* --- 1. La vignette sur la page --- */
.combat-poster-section { 
    text-align: center; 
    padding: 40px 20px; 
    background: var(--rank-bg-global); 
    border-top: 1px solid var(--border-color);
}

.combat-poster-img { 
    max-height: 400px; 
    border-radius: 8px; 
    border: 1px solid var(--border-color); 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

.combat-poster-img:hover { 
    border-color: var(--gold); 
    transform: scale(1.02); 
    box-shadow: 0 0 20px rgba(237, 193, 59, 0.2);
}


/* =========================================================
   VIDEO COMBAT
   ========================================================= */
/* Container externe pour gérer l'espacement et l'ombre */
.combat-video-wrapper {
    max-width: 900px; /* Optionnel : pour éviter que la vidéo soit trop immense sur très grand écran */
    margin: 0 auto;
    padding: 0 15px;
}

/* Le container de la vidéo (Ratio 16:9) */
.combat-video-container {
    border-radius: 12px;
    overflow: hidden; /* Important pour que la vidéo suive l'arrondi des coins */
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background-color: #000;
    transition: border-color 0.3s ease;
}



/* L'iframe à l'intérieur */
.combat-video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}