@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,400&display=swap');


:root {
    /* --- THEME PAR DÉFAUT (SOMBRE / DARK) --- */
    --bg-card-hover: #32363a;              /* Hover fond news */
    --bg-card: #2a2d30;           /* fond actuel des news */
    --text-title: #ffffff;        /* Titres en blanc */
    --text-title-hover: #edc13b;        /* Titres en or */
    --text-meta: #888888;         /* Dates en gris */
    --border-color: #333333;      /* Lignes de séparation */
    --gold: #edc13b;              /* L'or ne change pas */
	--rouge:#ef5e6c;
	--vert: #56b256;
	
	--rank-bg-global: #1a1a1a;       /* Fond du conteneur */
    --rank-bg-row: #212529;          /* Fond d'une ligne */
    --rank-bg-hover: #2c3034;        /* Fond au survol */
    --rank-text: #ffffff;            /* Couleur du texte (Noms) */
    --rank-border: #cccccc;          /* Bordure (tu avais #ccc) */
}



/* --- THEME CLAIR (LIGHT) --- */
body.light-mode {
    --bg-card-hover: #f6f6f6;           /* Hover news */
    --bg-card: #f2f2f2;           /* Cartes blanches */
    --text-title: #222222;        /* Titres presque noirs */
	--text-title-hover: #222222;        /* Titres en or */
    --text-meta: #666666;         /* Dates gris moyen */
    --border-color: #e0e0e0;      /* Lignes gris clair */
	
	--rank-bg-global: #ffffff;       /* Fond blanc */
    --rank-bg-row: #eee;          /* Ligne gris très clair #f8f9fa*/
    --rank-bg-hover: #e9ecef;        /* Survol gris un peu plus foncé */
    --rank-text: #212529;            /* Texte noir */
    --rank-border: #dee2e6;          /* Bordure grise légère */
}


.text-gold{color:var(--gold);}
.text-gold a:hover{color:#212529;}

.quick-red{background: var(--rouge) !important;color:#fff !important;}
.quick-green{background:var(--vert) !important;color:#fff !important;}
.quick-black{background: #fce599 !important;color:#000 !important;}
.quick-grey{background: #ccc !important;color:#343A40 !important; }
.quick-orange{background: #fd7e14 !important;color:#222 !important; }
.quick-blue{background: #2D89EF !important;color:#fff !important; }

body{
background-color: #1a1c1d;
background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
background-attachment: fixed;
}

body, .nav-link, h1, h2, h3, h4, h5, h6 {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}


/* Bootstrap 5 met les titres en gras par défaut. On force le retour à la normale (400) ou fin (300) */
h1, h2, h3, h4, h5, h6, .nav-link {
    font-weight: 400 !important; /* Mettez 300 ici si vous voulez encore plus fin */
}

/* On garde le gras uniquement là où c'est nécessaire (comme les badges ou les prix) */
strong, b, .fw-bold {
    font-weight: 700 !important;
}

/* --- STYLE FOND RETOURT RESULTAT VIDE OU ERREUR --- */

.bloc-defaut-main {
    background: linear-gradient(135deg, #282b2d 0%, #1a1c1d 100%);
    border: 1px solid #444;
    border-radius: 2px;
	margin-bottom: 10px;
	color:#eee;
}

body.light-mode .bloc-defaut-main {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-color: #dee2e6; /* Bordure grise claire */
}

/* --- STYLE DU BOUTON THEME --- */

/* ETAT 1 : Mode Sombre (Par défaut) */
.theme-toggle-btn {
    background-color: #000000 !important; /* Fond Noir */
    color: #edc13b !important;            /* Icônes Or */
    border: 1px solid #edc13b !important; /* Bordure Or */
    transition: all 0.3s ease;            /* Transition fluide */
}

/* ETAT 2 : Mode Clair (Quand body a la classe .light-mode) */
body.light-mode .theme-toggle-btn {
    background-color: #edc13b !important; /* Fond Or */
    color: #000000 !important;            /* Icônes Noires */
    border: 1px solid #edc13b !important;
}

/* Optionnel : Effet au survol */
.theme-toggle-btn:hover {
    opacity: 0.8;
}


/* =========================================================
   RUBRIQUES FLAMME NEWS
   ========================================================= */
.flame-icon {
  /*font-size: 0.9rem;      Taille de l'icône */
  color: #ff4500;        /* Orange de base (OrangeRed) */
  display: inline-block;
  margin-left:5px;
  animation: flicker 1.5s infinite alternate ease-in-out;
  filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.6));
}

@keyframes flicker {
  0% {
    transform: scale(1) rotate(-1deg);
    color: #ff4500;
    filter: drop-shadow(0 0 5px #ff4500);
  }
  25% {
    transform: scale(1.05) rotate(1deg);
    color: #ff8c00; /* DarkOrange */
  }
  50% {
    transform: scale(0.95) rotate(-2deg);
    filter: drop-shadow(0 0 15px #ff0000);
  }
  75% {
    transform: scale(1.1) rotate(2deg);
    color: #ffd700; /* Gold */
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 8px #ff4500);
  }
}


/* =========================================================
   TITRE DES RUBRIQUES (UNIVERSEL H1, H2, H3...)
   ========================================================= */

.header-rubrique-fixe {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #6c757d; 
    padding-bottom: 0.5rem; 
    margin-bottom: 0;       
}

/* On cible h1, h2, h3, h4, h5 à l'intérieur de la div */
.header-rubrique-fixe h1,
.header-rubrique-fixe h2,
.header-rubrique-fixe h3,
.header-rubrique-fixe h4,
.header-rubrique-fixe h5 {
    color: #ffffff !important;  
    font-weight: 700 !important;  
    margin-bottom: 0;      
    font-family: 'Oswald', sans-serif;
    font-size: 1.9rem; /* La taille visuelle reste celle que tu aimes */
    text-transform: uppercase;
    line-height: 1.2;
    
    /* --- GESTION DU TEXTE TROP LONG --- */
    white-space: nowrap;       
    overflow: hidden;          
    text-overflow: ellipsis;   
    
    max-width: 90%;            
    padding-right: 0;
}

/* --- GESTION DES LIENS --- */
.header-rubrique-fixe h1 a,
.header-rubrique-fixe h2 a,
.header-rubrique-fixe h3 a,
.header-rubrique-fixe h4 a,
.header-rubrique-fixe h5 a {
    color: #ffffff !important;   
    text-decoration: none;       
    transition: color 0.2s ease; 
}

.header-rubrique-fixe h1 a:hover,
.header-rubrique-fixe h2 a:hover,
.header-rubrique-fixe h3 a:hover,
.header-rubrique-fixe h4 a:hover,
.header-rubrique-fixe h5 a:hover {
    color: #edc13b !important;   
}


/* =========================================================
   PAGINATION
   ========================================================= */
   /* --- PAGINATION MODERNE --- */

.numero-page {
    text-align: center;
    margin: 0;
    padding: 10px;
    background: #202225; /* On enlève la grosse barre grise moche */
	
    
    /* On utilise Flexbox pour bien aligner les boutons */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; /* Espace entre chaque bouton */
    flex-wrap: wrap; /* Permet de passer à la ligne sur petit mobile */
}
/* 1. On applique la bordure à tout le monde */
.numero-page {
    border-bottom: 1px solid var(--rank-border) !important;
    padding-bottom: 15px;
}

/* 2. On ANNULE la bordure pour le deuxième bloc (celui du bas) */
/* Le sélecteur "~" cible l'élément qui arrive plus tard dans la page */
.numero-page ~ .numero-page,
.numero-page ~ * .numero-page {
    border-bottom: none !important;
	padding-bottom: 10px;
}


/* Adaptation Mode Clair */
body.light-mode .numero-page {
    background: #282B2E;
}

/* Les boutons (Liens) */
.numero-page a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; /* Largeur minimale pour pouvoir cliquer facile */
    height: 40px;
    padding: 0 10px;
    
    background-color: var(--bg-card); /* Fond variable (Noir ou Blanc) */
    border: 1px solid var(--border-color); /* Bordure variable */
    color: var(--text-title); /* Texte variable */
    
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px; /* Un tout petit peu arrondi */
    transition: all 0.2s ease;
    font-family: 'Oswald', sans-serif; /* Ta police titre */
}

/* La page active (Le SPAN) */
.numero-page span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    
    background-color: var(--gold); /* or --gold */
    border: 1px solid var(--gold);
    color: var(--bg-card);
    
    font-weight: 700;
    border-radius: 4px;
    cursor: default;
    font-family: 'Oswald', sans-serif;
}
body.light-mode .numero-page span {
     color: #2a2d30;
}

/* Effet au survol des liens */
.numero-page a:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--gold); /* Bordure orange au survol #fc7d01*/
    color: var(--gold); /* Texte orange au survol #fc7d01*/
    transform: translateY(-2px); /* Petit effet de "levée" */
}

.numero-page .pagination-separator {
	background-color: transparent; 
	border: none;
    color: #A1A1A1;
}

body.light-mode .pagination-separator {
     color: #A1A1A1 !important;
}

/* =========================================================
   TEMPLATE GENERALE
   ========================================================= */
/* --- CONTENEUR GLOBAL --- */
#template-fighter-fullranking {
    /*background-color: var(--rank-bg-global);  Variable */
    color: var(--rank-text);                 /* Variable */
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* --- TITRES & EN-TÊTES --- */
#template-fighter-fullranking .title-header {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #edc13b;
    background: #111; 
    font-size: 24px;
    padding: 20px;
    border-bottom: 2px solid #edc13b;
}

#template-fighter-fullranking .sous-titre {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #fff;
    background: #343A40;
    font-size: 16px;
    padding: 8px 15px;
    border-left: 4px solid #edc13b;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}

#template-fighter-fullranking .sous-titre a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

#template-fighter-fullranking .sous-titre a:hover {
    color: #edc13b;
}

/* --- MISE EN PAGE DU TABLEAU --- */
#template-fighter-fullranking .col-md-12 {
    padding: 0 15px; 
}
@media (min-width: 992px) {
    #template-fighter-fullranking .col-md-12 {
        padding: 0 40px; 
    }
}

#template-fighter-fullranking table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
}

/* --- LIGNES DU TABLEAU (ROWS) --- */
/* C'est ICI que le thème clair/sombre agit */
#template-fighter-fullranking .ranking-list {
    background-color: var(--rank-bg-row);    /* Variable */
    border-bottom: 1px solid var(--rank-border) !important;  
    transition: all 0.2s ease-in-out;
}

#template-fighter-fullranking th {
    font-size:0.7rem;
}

body.light-mode #template-fighter-fullranking th {
    background: #212529;
	color:#fff;
}

#template-fighter-fullranking .ranking-list:hover {
    background-color: var(--rank-bg-hover);  /* Variable */
	cursor:pointer;
}

#template-fighter-fullranking td {
    padding: 12px 10px;
    vertical-align: middle; 
}

/* --- ELEMENTS SPECIFIQUES --- */

/* 1. Le Rang (Chiffre) */
#template-fighter-fullranking .rank {
    width: 60px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    color: #edc13b; 
}

#template-fighter-fullranking .record-muted{
font-weight: 700;
color: #ccc;
font-size: 0.8rem;
}
body.light-mode #template-fighter-fullranking .record-muted {
	color:#555;
}
#template-fighter-fullranking .score {
    width: 60px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
	padding-right:15px;
    color: #edc13b; 
}

#template-fighter-fullranking .vs a {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
	color: #edc13b; 
	text-decoration:none;
}

/* 2. La Photo */
#template-fighter-fullranking .photo {
    width: 70px;height: auto;
    text-align: center;
}

#template-fighter-fullranking .image {
    width: 55px;
    height: 55px;
    border-radius: 50%; 
    object-fit: cover;
    border: 2px solid #edc13b;
	transition: transform 0.5s ease, border-color 0.3s ease;

}

#template-fighter-fullranking .ranking-list:hover .image {
    border-color: #fc7d01; 
	transform: scale(1.1); /* Zoom plus marqué */
	
}


/* 3. Le Nom */
#template-fighter-fullranking .nom {
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rank-text); /* Variable (Blanc ou Noir) */
}

#template-fighter-fullranking .nom-light {
    font-size: 1rem;
    font-weight: normal;
    color: var(--rank-text); /* Variable (Blanc ou Noir) */
}

#template-fighter-fullranking .nom a {
    color: var(--rank-text); /* Variable */
    text-decoration: none;
}

/* 4. Le Titre de catégorie 
#template-fighter-fullranking .titre {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    text-align: left;
    background: linear-gradient(90deg, #212529 0%, #1a1a1a 100%);
    color: #fff;
    font-size: 20px;
    padding: 10px 20px;
    border-left: 5px solid #edc13b;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
*/

	
/* 5. Drapeaux */
#template-fighter-fullranking .flag {
   /* text-align: right;
    padding-right: 20px;*/
}
#template-fighter-fullranking .flag img {
    border-radius: 3px;
}

/* --- NETTOYAGE --- */
#template-fighter-fullranking .reseaux-sociaux {
    display: none; 
}
#template-fighter-fullranking li {
    list-style: none;
}
#template-fighter-fullranking table {
    border-collapse: collapse;
}

#template-fighter-fullranking .badge-success {
    color: #fff;
    background-color: #28a745;
}
#template-fighter-fullranking .badge-danger {
    color: #fff;
    background-color: #dc3545;
}
/* --- Styles des Badges V5 (Unifiés) --- */

.short-badge-win, 
.short-badge-loss, 
.short-badge-draw, 
.short-badge-nc {
    /* Flexbox pour centrer le texte parfaitement */
    display: flex;       
    align-items: center;
    justify-content: center;
    
    /* Dimensions fixes (carrés) */
    width: 30px;         
    height: 30px;
    
    /* Typographie */
    font-weight: 700;
    font-size: 14px;
    color: #fff;         
    line-height: 1;      
    
    /* Espacement entre les carrés */
    margin-right: 4px;   
    border-radius: 3px;  /* Optionnel : coins légèrement arrondis */
}

/* --- Couleurs --- */
.short-badge-win  { background-color: var(--vert); } /* Vert */
.short-badge-loss { background-color: var(--rouge); } /* Rouge */
.short-badge-draw { background-color: #fd7e14; } /* Orange */
.short-badge-nc   { background-color: #6c757d; } /* Gris */

/* --- Si tes blocs ne s'alignent pas horizontalement --- */
/* Ajoute cette classe au conteneur parent si 'd-flex' ne suffit pas */
.combat-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}


/*
.quick-red-light{background: var(--rouge);color:#fff;border-radius:10px;}
.quick-green-light{background: var(--vert);color:#fff;border-radius:10px;}
.quick-orange{background: #fecc00 !important;color:#fff;border-radius:10px;}*/
/*
.badge-ranking {color:#666;background: #fff;padding:0px 5px;font-size:12px;border-radius:2px;font-weight:bold;}
.badge-ranking-fan {background:#999;color:#fff;font-size:13px;padding:1px 2px;font-weight:bold;border-radius:2px;}
*/
.badge-call-ranking-ufc {
    /* --- LE SECRET DU CENTRAGE --- */
    display: inline-flex;       /* Comportement inline (côte à côte) mais flex dedans */
    align-items: center;        /* Centre verticalement le texte */
    justify-content: center;    /* Centre horizontalement le texte */
    
    /* --- TON STYLE --- */
    background: var(--rouge);
    color: #eee;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 2px;
    
    /* --- AJUSTEMENTS --- */
    padding: 3px 6px;           /* Padding un peu réduit haut/bas car Flexbox gère l'espace */
    line-height: normal;        /* On reset le line-height pour éviter les conflits */
    vertical-align: middle;     /* Pour aligner le badge lui-même par rapport au nom */
    margin-left: 0;           /* Petit espace si collé au nom */
}
.badge-call-ranking-mma {
    /* --- LE SECRET DU CENTRAGE --- */
    display: inline-flex;       /* Comportement inline (côte à côte) mais flex dedans */
    align-items: center;        /* Centre verticalement le texte */
    justify-content: center;    /* Centre horizontalement le texte */
    
    /* --- TON STYLE --- */
    background: #FCE599;
    color: #343A40;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 2px;
    
    /* --- AJUSTEMENTS --- */
    padding: 3px 6px;           /* Padding un peu réduit haut/bas car Flexbox gère l'espace */
    line-height: normal;        /* On reset le line-height pour éviter les conflits */
    vertical-align: middle;     /* Pour aligner le badge lui-même par rapport au nom */
    margin-left: 0;           /* Petit espace si collé au nom */
}

.badge-call-ranking-alltime {
    /* --- LE SECRET DU CENTRAGE --- */
    display: inline-flex;       /* Comportement inline (côte à côte) mais flex dedans */
    align-items: center;        /* Centre verticalement le texte */
    justify-content: center;    /* Centre horizontalement le texte */
    
    /* --- TON STYLE --- */
    background: #98e779;
    color: #343A40;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 2px;
    
    /* --- AJUSTEMENTS --- */
    padding: 3px 6px;           /* Padding un peu réduit haut/bas car Flexbox gère l'espace */
    line-height: normal;        /* On reset le line-height pour éviter les conflits */
    vertical-align: middle;     /* Pour aligner le badge lui-même par rapport au nom */
    margin-left: 0;           /* Petit espace si collé au nom */
}

.badge-call-ranking-pts{
	    width: 60px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: right;
    color: #edc13b; 

}

/* Style des boîtes de stats en haut des arbitres */
#template-fighter-fullranking .stats-box {
    background: var(--bg-card); /* */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    text-transform: uppercase;
    transition: transform 0.2s;
}
#template-fighter-fullranking .stats-box:hover {
    background: var(--bg-card-hover); /* */
    transform: translateY(-3px);
}

/* Pourcentage stats dans les listes de stats */
/* Conteneur de la barre */
#template-fighter-fullranking .stat-bar-container {
    width: 100px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1); /* Fond sombre en dark mode */
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid var(--border-color);
}

/* La barre de remplissage */
#template-fighter-fullranking .stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #ffcc33);
    border-radius: 10px;
    transition: width 1s ease-in-out;
}

/* Le texte du pourcentage */
#template-fighter-fullranking .stat-percent {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-title);
    display: inline-block;
    min-width: 40px;
}

/* Adaptation Mode Clair */
body.light-mode #template-fighter-fullranking .stat-bar-container {
    background: #e9ecef;
}


body.light-mode .badge-call-ranking-pts {
    color: #333;
}

body.light-mode #template-fighter-fullranking .rank{
    color: #333;
}
body.light-mode .badge-call-ranking-ufc {
	box-shadow: 0 2px 2px rgba(0,0,0,0.1); 
}

body.light-mode #template-fighter-fullranking .ranking-list {
    background-color: var(--rank-bg-row);    /* Variable */
    border-bottom: 1px solid #ccc !important;  
    transition: all 0.2s ease-in-out;
}

body.light-mode #template-fighter-fullranking .ranking-list:hover {
    background-color: #dddddd;  /* Variable */
}
/*.badge-call-ranking-mma {background:#FCE599;color:#343A40 !important;font-size:0.7rem;padding:5px;font-weight: 700;border-radius:2px;}*/
/*.badge-call-ranking-alltime {background:#98e779;color:#343A40;font-size:0.7rem;padding:5px;font-weight:bold;border-radius:2px;}*/
/*.badge-call-ranking-pts {background:#343A40;color:#eee;font-size:0.7rem;padding:5px;font-weight:bold;border-radius:2px;}*/

/*
.badge-autre-evenement-warning {color:#000 !important;background:#98e779;padding:15px 15px !important;border-radius:2px;font-size:14px;font-family: 'Oswald', sans-serif;letter-spacing:1px;text-transform: uppercase;}
.badge-autre-evenement-next {color:#eee !important;background:#343A40;padding:15px 15px !important;border-radius:2px;font-size:14px;font-family: 'Oswald', sans-serif;letter-spacing:1px;text-transform: uppercase;}
.badge-autre-evenement-finish {color:#666 !important;background:#ccc;padding:15px 15px !important;border-radius:2px;font-size:14px;font-family: 'Oswald', sans-serif;letter-spacing:1px;text-transform: uppercase;}
.badge-autre-evenement-now {color:#666 !important;background:#FCE599;padding:15px 15px !important;border-radius:2px;font-size:14px;font-family: 'Oswald', sans-serif;letter-spacing:1px;text-transform: uppercase;}
*/

/* --- BARRE DE FILTRES STATS/CLASSEMENT --- */
.custom-stats-nav {
   /* border-bottom: 2px solid #edc13b;  Ligne grise sous la barre */
    padding: 0 15px 15px 15px; /* Un peu d'air sur les côtés */
	height:40px;
	/*background-color: #495057 !important;*/
	/* Un gris très sombre, plus profond que le #495057 */
    background-color: #000000 !important; 
   
    /* Une petite ombre pour donner du relief par rapport au contenu dessous */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}



/* Liens principaux (Statistiques / Classement) */
.custom-stats-nav .nav-link {
    text-transform: uppercase;
    font-size: 0.9rem;
	color: #eee !important;
    padding:8px 15px 8px 20px !important; /* Zone de clic confortable */
}

.custom-stats-nav .nav-link:hover {
    color: #eee !important; /* Couleur (Statistiques / Classement) au survol */
}

/* --- MENUS DÉROULANTS (DROPDOWNS) --- */
.custom-stats-nav .dropdown-menu {
    border-radius: 0 !important; /* Pas d'arrondis */
    border: 1px solid #e9ecef; /* Bordure très légère */
    padding: 0; /* On retire le padding global pour que les items collent aux bords */
    margin-top: -3px !important; /* Supprime l'espace du haut */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Ombre très discrète */
}

/* Les liens dans le menu déroulant */
.custom-stats-nav .dropdown-item {
    padding: 10px 20px; /* Espace interne pour respirer */
    border-bottom: 1px solid #eee !important; /* SÉPARATEUR LÉGER entre chaque item */
    font-size: 0.85rem;
    color: #555;
    background-color: #fff;
    transition: all 0.2s;
}

/* On enlève la bordure du tout dernier élément */
.custom-stats-nav .dropdown-item:last-child {
    border-bottom: none;
}

/* Effet au survol d'un item */
.custom-stats-nav .dropdown-item:hover {
    background-color: #f8f9fa; /* Gris très pâle */
    color: #000;
    /*padding-left: 25px;  Petit effet de glissement vers la droite */
}

/* Le séparateur <hr> (dropdown-divider) */
.custom-stats-nav .dropdown-divider {
    margin: 0;
   border-top: 2px solid #ccc; /* Séparateur un peu plus marqué (Or #edc13b) pour les sections */
}





/* =========================================================
   MENU UNIVERSEL "UFC LOCKED" (NOIR/OR - INSENSIBLE AU MODE CLAIR)
   ========================================================= */

.navbar-ufc-locked {
    background-color: #000000 !important; /* Toujours Noir pur */
    border-bottom: 1px solid #333;
    font-family: 'Oswald', sans-serif;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Liens du menu principal */
.navbar-ufc-locked .nav-link {
    color: #ffffff !important; /* Toujours Blanc */
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    transition: color 0.3s;
    padding: 10px 15px;
}

.navbar-ufc-locked .nav-link:hover {
    color: #edc13b !important; /* Toujours Or au survol */
}

/* La petite flèche animée */
.navbar-ufc-locked .menu-arrow {
    font-size: 0.7rem;
    color: #edc13b;
    margin-left: 6px;
    transition: transform 0.3s;
}

.navbar-ufc-locked .nav-item:hover .menu-arrow {
    transform: rotate(180deg);
}

/* --- DROPDOWNS (Menus déroulants) --- */
.navbar-ufc-locked .dropdown-menu {
    background-color: #212529 !important; /* Toujours Gris foncé */
    border: 1px solid #444;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}

.navbar-ufc-locked .dropdown-item {
    color: #ccc !important; /* Texte Gris clair */
    padding: 8px 15px;
    border-bottom: 1px solid #333;
    font-family: 'Roboto Condensed', sans-serif;
    transition: all 0.2s;
}

.navbar-ufc-locked .dropdown-item:hover {
    background-color: #edc13b !important; /* Fond Or */
    color: #000 !important; /* Texte Noir */
}
/* Force l'icône en noir quand on survole l'item du menu */
.navbar-ufc-locked .dropdown-item:hover i {
    color: #000 !important;
}

.navbar-ufc-locked .dropdown-divider {
    border-top: 1px solid #444;
}

/* --- MOBILE (Burger) --- */
.navbar-ufc-locked .navbar-toggler {
    border: 1px solid #edc13b;
    margin: 5px;
}
.navbar-ufc-locked .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(237, 193, 59, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-ufc-locked .dropdown-header {font-size: 1.5rem !important;color:var(--gold);}
/* =========================================================
   STYLE CLASSEMENT / POPULARITÉ (FLEXBOX)
   ========================================================= */

/* --- 1. MODE SOMBRE (Par défaut - utilise tes variables) --- */

#template-defaut .ranking-row {
    background-color: var(--bg-card);      /* Fond sombre */
    border-color: var(--border-color) !important; /* Ligne séparation */
    transition: background-color 0.2s, transform 0.2s;
}

#template-defaut .ranking-row:hover {
    background-color: var(--bg-card-hover); /* Eclaircit au survol */
   /* transform: translateX(5px);  Petit effet de mouvement sympa */
}

/* Le Badge Numéro (#1, #2...) */
#template-defaut .badge-rank {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    color: #666; /* Gris discret pour le numéro */
    font-weight: bold;
    width: 40px;
    display: inline-block;
    text-align: center;
}
/* Optionnel : Mettre les 3 premiers en Or */
/* #template-defaut .ranking-row:nth-child(-n+3) .badge-rank { color: #edc13b; } */

/* Le Titre */
#template-defaut .rank-title a {
    color: var(--text-title); /* Blanc */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    transition: color 0.2s;
}

#template-defaut .ranking-row:hover .rank-title a {
    color: #edc13b; /* Devient Or au survol */
}

/* La Date */
#template-defaut .rank-date {
    color: var(--text-meta); /* Gris */
    font-size: 0.85rem;
}

/* Les Points (Score) */
#template-defaut .rank-points .score-value {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 1.3rem;
    color: #edc13b; /* Or */
    line-height: 1;
}

#template-defaut .rank-points .score-unit {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
}


/* --- 2. MODE CLAIR (LIGHT MODE) --- */

body.light-mode #template-defaut .ranking-row {
    background-color: #ffffff; /* Fond Blanc */
    border-color: #eee !important;
}

body.light-mode #template-defaut .ranking-row:hover {
    background-color: #f8f9fa;
}

/* Titre en Noir */
body.light-mode #template-defaut .rank-title a {
    color: #212529;
}
body.light-mode #template-defaut .ranking-row:hover .rank-title a {
    color: #edc13b; /* Reste Or au survol */
}

/* Date en gris moyen */
body.light-mode #template-defaut .rank-date {
    color: #666 !important;
}

/* Points : Valeur reste Or (ou Noir si tu préfères) */
body.light-mode #template-defaut .rank-points .score-value {
    color: #edc13b; /* On garde l'Or pour le prestige */
}



/* =========================================================
   CSS REDACTEUR
   ========================================================= */
.author-container { background: ; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.author-header { background: linear-gradient(145deg, #1e2126, #2a2e35); color: #fff; padding: 30px; display: flex; align-items: center; gap: 25px; }
.author-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #FFD700; object-fit: cover; background-color: #1e2126; }
.author-info h2 { margin: 0; font-size: 28px; font-weight: 700 !important; }
.author-role { color: #FFD700; font-weight: bold; text-transform: uppercase; font-size: 14px; margin-top: 5px; display: block; letter-spacing: 1px; }
.author-bio { padding: 30px; line-height: 1.6; font-size: 16px; border-bottom: 1px solid #eee; background: #1e2126;}
.latest-articles { padding: 30px 20px; background: #1e2126; }
.latest-articles h3 { margin-top: 0; border-left: 4px solid #FFD700; padding-left: 10px; }
.btn-contact { display: inline-block; margin-top: 15px; padding: 8px 15px; background: #171819; color: white; text-decoration: none; border-radius: 4px; font-size: 14px; }
.latest-articles  .actu-lien-bloc{margin:0;padding:0;text-decoration:none;color:#ffff;border-radius:2px !important;}    
.latest-articles  .actu-bloc{border-radius:2px !important;background: #2a2d30;}   
.latest-articles  .text-muted{color:#FFD700 !important;}  
/* Version Mobile */
@media (max-width: 600px) {
.author-header { flex-direction: column; text-align: center; }
}
		
		
/* =========================================================
   FIX VIDÉOS POUR ANCIENS ARTICLES
   ========================================================= */
/* --- FIX VIDÉOS POUR ANCIENS ARTICLES (BOOTSTRAP 4) --- */

/* On cible les iframes dans le corps de tes articles */
/* Remplace '.content-article' par la classe qui entoure ton texte */
.video-container iframe,
.video-container video,
.video-container embed,
.video-container object {
    max-width: 100% !important; /* Ne dépasse jamais la largeur */
    width: 100% !important;     /* Prend toute la largeur dispo */
    height: auto !important;    /* Hauteur auto */
    aspect-ratio: 16 / 9;       /* Force le format 16:9 (Moderne & efficace) */
    border: none;
    
    /* Optionnel : Style visuel pour coller à ton site */
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* ==========================================================================
   MODERN LIST (Composant Réutilisable)
   ========================================================================== */

/* CONTENEUR PRINCIPAL */
.modern-list {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Espacement entre les lignes */
    width: 100%;
}

/* L'ÉLÉMENT (LA LIGNE) */
.modern-list .list-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 2px; /* Coins arrondis modernes */
    transition: all 0.2s ease-in-out;
    text-decoration: none; /* Si toute la div devient un lien */
    
    /* STYLE PAR DÉFAUT (DARK MODE) */
    background-color: var(--bg-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* EFFET AU SURVOL (HOVER) */
.modern-list .list-item:hover {
    background-color: var(--bg-card-hover);
    /*border-color: var(--gold, #FFD700);  Bordure Or au survol */
    /*transform: translateX(4px);  Petit mouvement vers la droite */
}

/* --- ZONES DE CONTENU --- */

/* 1. Zone Rang / Icône (Gauche) */
.modern-list .item-rank {
    min-width: 40px;
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
    margin-right: 15px;
}

/* 2. Zone Principale (Milieu - Prend toute la place) */
.modern-list .item-content {
    flex-grow: 1;
    overflow: hidden; /* Pour que le truncate fonctionne */
    line-height: 1.3;
}
.modern-list .item-title {
    display: block;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modern-list .item-meta {
    font-size: 0.75rem;
    color: #adb5bd; /* Gris clair */
    margin-top: 2px;
}

/* 3. Zone Valeur / Stats (Droite) */
.modern-list .item-value {
    text-align: right;
    white-space: nowrap;
    margin-left: 10px;
}
.modern-list .value-badge {
    display: inline-block;
    padding: 4px 8px;
    /*border-radius: 6px;*/
    /*background: rgba(0, 0, 0, 0.3);*/
    color: var(--gold, #FFD700);
    /*font-family: 'Roboto Mono', monospace;*/ /* Police chiffre */
    font-size: 1.1rem;
    font-weight: bold;
    /*border: 1px solid rgba(255, 255, 255, 0.1);*/
}

/* --- GESTION DU LIGHT MODE (Mode Clair) --- */
body.light-mode .modern-list .list-item {
    background-color: #fff;
    border-color: #dee2e6;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
body.light-mode .modern-list .list-item:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}
body.light-mode .modern-list .item-title {
    color: #212529; /* Noir */
}
body.light-mode .modern-list .item-title:hover {
    color: #0d6efd; /* Bleu */
}
body.light-mode .modern-list .value-badge {
    background: #e9ecef;
    color: #333; /* Vert argent ou Noir */
    border-color: #dee2e6;
}



/* =========================================================
   LIGHTBOX
   ========================================================= */
/* --- Lightbox Maison (Avec Animation Moderne) --- */
#custom-lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Fond noir */
    z-index: 9999;
    cursor: zoom-out;
    
    /* --- Paramètres pour l'animation --- */
    /* Flex pour centrer */
    display: flex; 
    align-items: center; 
    justify-content: center;
    
    /* État initial (Caché) */
    opacity: 0;
    visibility: hidden;
    /* Transition fluide de 0.3 secondes */
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* État actif (Quand on clique, le JS ajoute cette classe) */
#custom-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

/* --- L'image dans la Lightbox --- */
#custom-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    /* État initial de l'image (un peu plus petite et transparente) */
    transform: scale(0.95);
    opacity: 0;
    /* Petite animation "pop" élastique très moderne */
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1.3s ease;
}

/* État actif de l'image (Taille normale et visible) */
#custom-lightbox.is-active img {
    transform: scale(1);
    opacity: 1;
}


/* =========================================================
   Back to Top
   ========================================================= */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: var(--gold); /* Utilise ta variable dorée */
    color: #000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    
    /* Animation d'apparition */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* Effet au survol */
#backToTop:hover {
    transform: translateY(-5px);
    background-color: #fff; /* Blanchit au survol */
    box-shadow: 0 6px 5px rgba(237, 193, 59, 0.4);
}

/* Classe ajoutée par le JS pour l'afficher */
#backToTop.show {
    opacity: 1;
    visibility: visible;
}