/* --- MONTAGE LOGO FORCE (Méthode Absolute) --- */

.logo-stack {
    position: relative !important; /* Indispensable pour que le texte se cale par rapport au lien */
    display: inline-flex !important; /* Important pour écraser Bootstrap */
    align-items: center;
    justify-content: center;
    height: 60px; /* Hauteur de ta barre */
    width: auto; 
}

/* 1. LE GANT (Image de référence) */
/* Il reste "normal" pour définir la largeur du bloc */
.layer-gant {
    position: relative; 
    z-index: 1;
    height: 50px; /* Ajuste la taille du gant ici */
    width: auto;
    display: block;
}

/* 2. LE TEXTE (Image superposée) */
/* On le force à flotter au-dessus du gant */
.layer-text {
    position: absolute !important; /* Le mot magique */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* On le centre parfaitement au milieu du gant */
    
    z-index: 2; /* Au-dessus du gant */
    height: 50px; /* Ajuste la taille du texte ici si besoin */
    width: auto;
    pointer-events: none; /* Clic à travers */
}

/* --- L'ANIMATION VIBRATION --- */
/* On garde la même animation qu'avant */
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* DECLENCHEUR */
.logo-stack:hover .layer-gant {
    animation: shake 0.5s; 
    animation-iteration-count: 1;
}


/* --- NAVBAR FIXE 60px --- */
#NavBarTop {
    background-color: #212529 !important;
    height: 60px;
	min-height: 60px; /* Sécurité */
    padding: 0 20px !important;
    display: flex;
    align-items: center;

}

#NavBarTop .navbar-nav {
    height: 100%;
    align-items: center;
}

/* Alignement vertical du Logo */
.navbar-brand {
    display: flex;
    align-items: center;
    height: 60px;
    margin-right: 0;
    padding: 0;
}

.navbar-brand-logo {
    width: auto;
    height: 50px; 
}

/* Centrage horizontal du bloc menu */
#navUFC {
    justify-content: center;
    height: 100%;
}

/* Liens du menu */
#NavBarTop .nav-link {
    display: flex !important;       /* Active le mode Flexbox */
    align-items: center !important; /* CENTRE VERTICALEMENT */
    gap: 8px;
	font-family: 'Oswald', sans-serif;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
    line-height: 60px; /* Force le centrage vertical parfait du texte */
    padding: 0 15px !important;
    height: 60px;
}

#NavBarTop .nav-link:hover { color: #edc13b !important; }

/* --- CUSTOM FLÈCHE MENU --- */

/* 1. Le style de la flèche au repos */
#NavBarTop .menu-arrow {
    font-size: 10px; /* Assez petite et discrète */
    color: #edc13b;  /* COULEUR OR (Ta charte) */
    margin-left: 0px; /* Un peu d'espace après le texte */
	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 */
#NavBarTop .nav-item:hover .menu-arrow {
    transform: rotate(180deg); /* Demi-tour complet */
    opacity: 1; /* Devient bien brillante */
    color: #fff; /* Optionnel : Passe en blanc au survol ? (Sinon garde or) */
}


/* --- MEGA MENU --- */
#NavBarTop .dropdown-static { position: static !important; }

.mega-menu {
    width: 100%;
    left: 0;
    right: 0;
    background-color: #212529;
    border-top: 3px solid #edc13b !important; /* Bordure or demandée */
    border-radius: 0;
    padding: 30px 0;
    margin-top: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
	margin-top: -1px !important;
}

@media (min-width: 992px) {
    /* Affichage au survol pour Desktop */
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important;
        visibility: visible;
        opacity: 1;
    }

    .dropdown-menu {
        margin-top: 0;
    }
}

.mega-column h3 {
    font-family: 'Oswald', sans-serif;
    color: #edc13b;
    font-size: 0.9rem;
	background-color: #222629;
    text-transform: uppercase;
	letter-spacing: 0.8px;
    border-bottom:  1px solid #444;
    padding-bottom: 8px;
	padding-top: 8px;
    margin-bottom: 12px;
	margin-right: 25%;
	padding-left:10px;
	border-left:5px solid #edc13b;
}

.mega-column ul { list-style: none; padding: 0; }
.mega-column ul li a {
    font-family: 'Roboto Condensed', sans-serif;
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    padding: 4px 0 4px 6px;
}
.mega-column ul li a:hover { color: #fff; }

/* Cible spécifiquement les liens dans le bloc avec image */
.mega-column .d-flex a {
    color: #ccc !important;
    text-decoration: none;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    transition: color 0.2s;
}

.mega-column .d-flex a:hover {
    color: #fff !important;
}

/* Force la couleur de l'emphase (le nom des combattants) */
.mega-column .d-flex a em {
    color: #bbb !important;
    font-style: italic;
}

.mega-column .d-flex a:hover em {
    color: #fff !important;
}

/* --- POSTER UFC 325 (Style complet) --- */
.poster-hover {
    width: 85px; 
    height: auto; 
    border: 2px solid #fff; /* Bordure blanche demandée */
    border-radius: 12px; /* Arrondi prononcé demandé */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transition douce */
    cursor: pointer; /* Le doigt au survol */
}

.poster-hover:hover {
    opacity: 0.7 !important; /* Opacité au survol */
    transform: scale(1.05); /* Léger zoom */
}


/* =========================================================
   MOTEUR DE RECHERCHE
   ========================================================= */

/* Conteneur principal qui contient l'input et les résultats */
.search-box-result {
    position: relative; /* Très important pour le positionnement des résultats */
}

/* La fenêtre des résultats */
#livesearch {
    position: fixed;
    top: 60px; /* S'affiche juste en dessous du formulaire */
    right: 0;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 0 0 0 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 1000;
    max-height: 60vh; /*70% de la hauteur de la fenêtre*/
	width: 50vw;
    overflow-y: auto;
    display: none; /* Masqué par défaut */
}

/* Chaque ligne de résultat */
#livesearch .res-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

#livesearch .res-item:hover {
    background-color: #f8f9fa;
}

/* L'image (Combattant ou Actu) */
#livesearch .res-img {
    width: 50px;
    height: 50px;
    object-fit: cover; /* Évite de déformer l'image */
	object-position: top; /* Garde le haut de l'affiche (souvent là où est le logo) */
    border-radius: 4px;
    margin-right: 15px;
    border: 1px solid #eee;
}

/* Si pas d'image, on garde l'espace pour l'alignement */
#livesearch .res-img-empty {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    background: #eee;
    border-radius: 4px;
}

/* Texte et Titre */
#livesearch .res-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#livesearch .res-title {
    color: #222;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Badges (Combattant / Actualité) */
#livesearch .badge {
    align-self: flex-start;
    padding: 3px 8px;
    font-size: 10px;
    text-transform: uppercase;
}

#livesearch .text-bg-success {
    background-color: #28a745 !important; /* Vert pour différencier des combattants (bleu) et actus (jaune) */
    color: #fff;
}

#livesearch .res-item {
    transition: all 0.2s ease-in-out;
}

/* L'image est invisible au début */
#livesearch .res-img.lazy {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

/* Elle apparaît doucement quand elle est chargée */
#livesearch .res-img.loaded {
    opacity: 1;
}

/* Pour tes événements (grandes affiches) */
#livesearch .res-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    object-position: top; /* Important pour voir le haut de l'affiche */
    background: #f0f0f0;
}

/* --- BARRE DE RECHERCHE --- */
.search-container {
    display: flex;
    align-items: center;
    height: 60px;
}
.search-box {
    background: #212529;
    border: 1px solid #444;
    border-radius: 4px;
    display: flex;
    padding: 2px 8px;
}
.search-box input {
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    font-size: 13px;
    width: 160px;
}
.search-box span {
    display: flex;
    align-items: center;
    cursor: pointer;
}




/* 1. On cible le conteneur qui contient maintenant des LIENS (a) */
.mega-column .d-flex.flex-column:has(> a > .img-fighter-menu) {
    flex-direction: row !important; 
    flex-wrap: wrap !important;     
    gap: 10px;                      
    align-items: center; /* Aligne les liens verticalement si besoin */
}

/* 2. On s'assure que le lien ne casse pas le flux */
.mega-column .d-flex.flex-column:has(> a > .img-fighter-menu) a {
    display: inline-block; /* Permet au lien de se comporter comme un bloc pour l'image */
    text-decoration: none;
}

/* 3. On garde le style de l'image (identique à ton code) */
.mega-column .img-fighter-menu {
    width: 60px !important;  
    height: 60px !important; 
    object-fit: cover !important;
    border-radius: 8px;      
    border: 2px solid #edc13b;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 4. Effet au survol (mieux vaut l'appliquer sur le lien ou l'image) */
.mega-column a:hover .img-fighter-menu {
    border-color: #fc7d01; 
    transform: scale(1.1);   
}