/* 1. IMPORTATION DE LA POLICE (Indépendance totale) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* FIX scrollbar Windows ET compensation de la Navbar Fixe */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
    /* ✨ AJOUT IMPORTANT : Pousse le contenu vers le bas pour qu'il ne se cache pas sous la barre flottante ✨ */
    padding-top: 76px;
}

/* ✨ FORCE LA TOPBAR À PRENDRE 100% DE L'ÉCRAN ET RESTER FIXE ✨ */
.ly-topbar-wrapper {
    position: fixed;
    /* La méthode infaillible qui remplace sticky */
    top: 0;
    left: 0;
    /* Ancrage absolu à gauche (remplace le calcul complexe margin-left) */
    width: 100vw;
    z-index: 9999;
    /* Z-index maximum pour passer au-dessus de tout (lecteurs vidéo, popups...) */
}

/* 2. SANCTUARISATION DU WRAPPER */
/* On force Poppins sur le wrapper et ses descendants, SAUF sur les icônes */
.ly-topbar-wrapper *:not(.material-icons) {
    font-family: 'Poppins', sans-serif !important;
}

/* On s'assure que les Material Icons conservent leur propre police */
.ly-topbar-wrapper .material-icons {
    font-family: 'Material Icons' !important;
    /* On en profite pour remettre les styles de base des icônes au cas où */
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* On force l'héritage de la police pour les éléments Bootstrap récalcitrants */
.ly-topbar-wrapper *,
.ly-topbar-wrapper .nav-link,
.ly-topbar-wrapper .navbar-brand,
.ly-topbar-wrapper .dropdown-item {
    font-family: 'Poppins', sans-serif !important;
}

/* 3. STYLE DE LA NAVBAR (Look Netflix) */
.ly-topbar-wrapper nav.navbar.bg-dark {
    background-color: rgba(20, 20, 20, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Support Safari */
    border: none !important;
    position: relative;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* 4. COULEURS DU TEXTE (Pour écraser les thèmes clairs) */
.ly-topbar-wrapper nav.navbar .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    /* Gris clair par défaut */
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: color 0.3s ease;
}

.ly-topbar-wrapper nav.navbar .nav-link:hover,
.ly-topbar-wrapper nav.navbar .nav-link.active {
    color: #ffffff !important;
    /* Blanc pur au hover ou actif */
}

/* Spécificité pour le texte warning (ex: LIVE) */
.ly-topbar-wrapper nav.navbar .nav-link.text-warning {
    color: #ffc107 !important;
}

/* 5. ALIGNEMENT ET ICÔNES */
.ly-topbar-wrapper nav.navbar .nav-link,
.ly-topbar-wrapper nav.navbar .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ly-topbar-wrapper nav.navbar .nav-link .material-icons {
    font-size: 1.3rem !important;
    line-height: 1 !important;
}

.ly-topbar-wrapper nav.navbar .nav-link .text-next-to-icon {
    line-height: 1 !important;
    padding-top: 1px;
    /* Ajustement optique Poppins */
}

/* 6. LIGNE DE SÉPARATION INFERIEURE */
.ly-topbar-wrapper nav.navbar.bg-dark::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2.5%;
    right: 2.5%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
}

/* 7. LOGO */
.ly-topbar-wrapper nav.navbar .navbar-brand img {
    max-height: 40px !important;
    width: auto !important;
    display: block;
}

/* ✨ EFFET GLOW VOD AU SURVOL ✨ */

/* 1. Animation fluide pour le texte et l'icône */
.ly-topbar-wrapper nav.navbar .nav-link {
    transition: all 0.3s ease-in-out !important;
}

/* 2. L'effet au survol du lien */
.ly-topbar-wrapper nav.navbar .nav-link:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    /* Léger halo sur le texte */
}

/* 3. Le Glow spécifique sur l'icône Material */
.ly-topbar-wrapper nav.navbar .nav-link:hover .material-icons {
    color: #ffffff !important;
    transform: scale(1.1);
    /* L'icône grossit très légèrement */
    transition: transform 0.2s ease-in-out;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
    /* Le "Glow" concentré */
}

/* 4. Cas particulier pour l'élément actif ou le Warning (Live) */
.ly-topbar-wrapper nav.navbar .nav-link.text-warning:hover .material-icons {
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6));
    /* Glow doré pour le Live */
}