/* =========================================================
   BKSI — HERO (bandeau) & NAV (menu)
   Version : 3.2.0 clean (layering unifié)
   Dernière modif : 2025-08-16
   Auteur : BKSI
   ========================================================= */

/* ========== Variables BKSI ========== */
:root{
  --bksi-bg:      #0a0d12;
  --bksi-text:    #cfd8e3;
  --bksi-border:  #24303a;
  --bksi-accent:  #ff9b40;             /* orange cuivre BKSI */

  /* Layering unifié */
  --bksi-nav-z:   12000;               /* barre de navigation */
  --bksi-dd-z:    12020;               /* panneaux dropdown */
  --bksi-dd-gap:  8px;                 /* “pont” anti-trou */
}

/* ========== HERO bandeau ========== */
.bksi-lore-banner{
  position:relative;
  width:100%;
  min-height: clamp(240px, 36vw, 460px);
  background-image:url('/squelettes/img/bksi-banner-home.jpg');
  background-size:cover;
  background-position:center 92%;
  background-repeat:no-repeat;
  border-top:1px solid var(--bksi-border);
  border-bottom:1px solid var(--bksi-border);
  --lore-offset: 169px; /* offset desktop */
}

/* Traits cuivre en haut et bas */
.bksi-lore-banner::before,
.bksi-lore-banner::after {
  content:"";
  position:absolute;
  left:0; right:0;
  height:3px;
  background:var(--bksi-accent);
}
.bksi-lore-banner::before { top:0; }
.bksi-lore-banner::after  { bottom:0; }

.bksi-lore-banner .overlay{
  position:relative;
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px 40px; /* + espace bas */
  gap:14px;
  background:linear-gradient(180deg, rgba(7,10,14,.45), rgba(7,10,14,.55));
}

/* Texte lore */
.bksi-lore-banner .lore-text{
  position:relative;
  top:var(--lore-offset);
  max-width:1100px;
  text-align:center;
  font-size:clamp(1.3rem,3vw,2rem);
  font-weight:800;
  letter-spacing:.3px;
  color:var(--bksi-accent);
  padding:14px 22px;
  border-radius:10px;
  backdrop-filter:blur(3px);
  background:
    radial-gradient(ellipse at center, rgba(26,19,16,.20) 0%, rgba(26,19,16,.20) 60%, rgba(26,19,16,0) 100%),
    linear-gradient(90deg, rgba(26,19,16,0) 0%, rgba(26,19,16,.70) 15%, rgba(26,19,16,.70) 85%, rgba(26,19,16,0) 100%);
  text-shadow:0 0 6px rgba(226,140,72,.75),
               0 0 14px rgba(226,140,72,.55),
               0 2px 18px rgba(0,0,0,.9);
  animation:bksi-float 8s infinite ease-in-out;
}

@keyframes bksi-float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-4px) }
}

/* ========== NAV — base ========== */
.bksi-hero-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
  padding:0 30px;
  position:relative;
  z-index:var(--bksi-nav-z);
  overflow:visible;
  isolation:isolate;
}
.bksi-lore-banner > nav.bksi-hero-nav.bksi-hero-nav--on-hero{
  position:absolute;
  left:0; right:0;
  bottom:6px;
  background:rgba(10,13,18,.62);
  backdrop-filter:saturate(120%) blur(6px);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:6px 0;
  z-index:var(--bksi-nav-z);
  overflow:visible;
}

.bksi-hero-nav .menu-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.bksi-hero-nav .menu-site,
.bksi-hero-nav .menu-reseaux{
  display:flex;
  align-items:center;
  gap:15px;
  list-style:none;
  margin:0;
  padding:0;
}
.bksi-hero-nav .menu-site{ flex-wrap:nowrap; }
.bksi-hero-nav .menu-site a{
  display:inline-block;
  padding:8px 14px;
  color:var(--bksi-text);
  font-weight:600;
  border-radius:6px;
  transition:all .2s ease-in-out;
}
/* Hover + Active menu principal */
.bksi-hero-nav .menu-site a:hover{
  color:#fff;
  background:rgba(255,155,64,.12);
  box-shadow:0 0 6px rgba(255,155,64,.35),
              0 0 12px rgba(255,155,64,.25);
}
.bksi-hero-nav .menu-site a.active{
  color:#fff;
  background:rgba(255,155,64,.20);
  box-shadow:0 0 6px rgba(255,155,64,.45),
              0 0 12px rgba(255,155,64,.30);
}

/* ========== Mode split ========== */
.bksi-hero-nav.nav-split{ position:relative }
.bksi-hero-nav.nav-split .menu-reseaux{
  position:relative; margin-left:auto; gap:14px;
}
.bksi-hero-nav.nav-split .menu-reseaux::before{
  content:""; position:absolute; left:-12px; top:6px; bottom:6px; width:1px;
  background:rgba(255,255,255,.2);
  transition: background .22s, box-shadow .25s, width .18s;
}
.bksi-hero-nav.nav-split .menu-reseaux:hover::before,
.bksi-hero-nav.nav-split .menu-reseaux:focus-within::before{
  background: color-mix(in oklab, var(--bksi-accent) 85%, white 15%);
  box-shadow: 0 0 8px rgba(255,155,64,.45),
              0 0 16px rgba(255,155,64,.30);
  width:2px;
}

/* ========== Dropdown ========== */
.has-dropdown{ position:relative; z-index:calc(var(--bksi-nav-z) + 5); }
.has-dropdown > a{
  position: relative;
  z-index: 2;
  padding-bottom: 12px; /* zone sensible élargie */
}
/* reset puces */
.has-dropdown .dropdown ul,
.has-dropdown .dropdown li{
  list-style:none;
  margin:0;
  padding:0;
}
.has-dropdown .dropdown{
  display:none;
  position:absolute;
  top:calc(100% + var(--bksi-dd-gap));
  left:0;
  z-index:var(--bksi-dd-z);
  margin-top:0;
  background:#1e1f24;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:6px 0;
  min-width:220px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  white-space:nowrap;
  overflow:visible;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown{
  display:block;
  animation: fadeIn .15s ease-out;
}
.has-dropdown .dropdown a{
  display:block;
  padding:8px 14px;
  color:var(--bksi-text);
  white-space:nowrap;
  border-radius:6px;
  transition:all .2s ease-in-out;
}
/* Hover + Active dropdown */
.has-dropdown .dropdown a:hover{
  color:#fff;
  background:rgba(255,155,64,.12);
  box-shadow:0 0 6px rgba(255,155,64,.35),
              0 0 12px rgba(255,155,64,.25);
}
.has-dropdown .dropdown a.active{
  color:#fff;
  background:rgba(255,155,64,.20);
  box-shadow:0 0 6px rgba(255,155,64,.45),
              0 0 12px rgba(255,155,64,.30);
}
@keyframes fadeIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

/* “Pont” anti-trou pour ne pas fermer le menu quand la souris descend */
.has-dropdown::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:var(--bksi-dd-gap);
  pointer-events:none;
}

/* ========== Réseaux ========== */
.menu-reseaux img{
  width:22px; height:22px; display:block;
  filter: brightness(0) saturate(100%)
          invert(73%) sepia(55%) saturate(559%)
          hue-rotate(338deg) brightness(101%) contrast(101%);
  transition: filter .2s ease, box-shadow .25s ease, transform .15s ease;
}
.menu-reseaux a:hover img{
  transform:scale(1.15);
  box-shadow:0 0 6px rgba(255,155,64,.65),
             0 0 12px rgba(255,155,64,.45),
             0 0 20px rgba(255,155,64,.25);
  border-radius:50%;
}
.menu-reseaux a.discord:hover img{
  filter: brightness(0) saturate(100%)
          invert(38%) sepia(89%) saturate(524%)
          hue-rotate(210deg) brightness(94%) contrast(94%);
}
.menu-reseaux a.twitch:hover img{
  filter: brightness(0) saturate(100%)
          invert(38%) sepia(89%) saturate(724%)
          hue-rotate(259deg) brightness(94%) contrast(101%);
}
.menu-reseaux a.youtube:hover img{
  filter: brightness(0) saturate(100%)
          invert(14%) sepia(96%) saturate(7478%)
          hue-rotate(357deg) brightness(95%) contrast(115%);
}

/* ========== Burger mobile ========== */
.nav-toggle, .burger, .hamburger{ display:none }

/* ========== Mobile / tablette ========== */
@media (max-width: 992px){
  .nav-toggle, .burger, .hamburger{
    display:block;
    background:none;
    border:0;
    font-size:28px;
    color:#fff;
    cursor:pointer;
  }
  .bksi-hero-nav{ padding:10px 16px; }
  .menu-container{
    position:fixed;
    inset:0;
    display:none;
    flex-direction:column;
    width:100%;
    height:100vh;
    background:rgba(10,13,18,.92);
    backdrop-filter:blur(8px);
    padding:80px 24px 24px;
    gap:16px;
    z-index:40;
  }
  .menu-container.open{ display:flex }
  .bksi-hero-nav .menu-site,
  .bksi-hero-nav .menu-reseaux{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .has-dropdown .dropdown{
    position:static;
    display:none;
    border:0;
    background:transparent;
    box-shadow:none;
    padding:0;
    min-width:0;
    margin-left:8px;
  }
  .has-dropdown.open .dropdown{ display:block }
  .bksi-hero-nav--on-hero .menu-site,
  .bksi-hero-nav--on-hero .menu-reseaux{
    justify-content:flex-start;
  }
  .bksi-hero-nav.nav-split .menu-reseaux::before{ display:none }
  /* offset lore plus bas en mobile */
  .bksi-lore-banner { --lore-offset: 90px; }
}

/* ========== Layering unifié (home vs pages sans hero) ========== */

/* HOME : nav “sur le hero” (absolue en bas du bandeau) */
.bksi-lore-banner > nav.bksi-hero-nav.bksi-hero-nav--on-hero{
  position:absolute;
  left:0; right:0; bottom:6px;
  z-index:var(--bksi-nav-z);
  overflow:visible;
  isolation:isolate;
}

/* PAGES SANS HERO (articles, contact, etc.) : nav relative au-dessus du contenu */
body:not(:has(.bksi-lore-banner)) .bksi-hero-nav{
  position:relative;
  z-index:var(--bksi-nav-z);
  overflow:visible;
  isolation:isolate;
}

/* Dropdowns devant la barre (toutes pages) */
.bksi-hero-nav li{ position:relative; }
.bksi-hero-nav .has-dropdown{ position:relative; z-index:calc(var(--bksi-nav-z) + 5); }
.bksi-hero-nav .has-dropdown > .dropdown{
  position:absolute; top:calc(100% + var(--bksi-dd-gap)); left:0;
  z-index:var(--bksi-dd-z);
}

/* Contenu : toujours sous la nav (y compris .page-article) */
main, #main, .main, #content, .content,
.article, .page, .bksi-article, .bksi-section,
.page-article main, .page-article #main, .page-article .wrap,
.page-article #content, .page-article .content, .page-article .article{
  position:relative;
  z-index:0;
  overflow:visible;
}
/* ===== BKSI — RESCUE minimal : layering + anti-trou (HOME + ARTICLES) ===== */
:root{ --bksi-nav-z: 12000; --bksi-dd-z: 12020; --bksi-gap: 8px; }

/* Nav au-dessus (2 cas : sur le hero vs hors-hero) */
.bksi-lore-banner > nav.bksi-hero-nav.bksi-hero-nav--on-hero{
  position:absolute !important; left:0; right:0; bottom:6px;
  z-index:var(--bksi-nav-z) !important; overflow:visible !important; isolation:isolate !important;
}
.bksi-hero-nav:not(.bksi-hero-nav--on-hero){
  position:relative !important; z-index:var(--bksi-nav-z) !important;
  overflow:visible !important; isolation:isolate !important;
}

/* Dropdown toujours devant + ouvertures */
.bksi-hero-nav li{ position:relative; }
.bksi-hero-nav .has-dropdown{ position:relative; z-index:calc(var(--bksi-nav-z) + 5) !important; }
.bksi-hero-nav .has-dropdown > a{ position:relative; padding-bottom:12px; } /* zone sensible élargie */
.bksi-hero-nav .has-dropdown > .dropdown{
  position:absolute !important; top:calc(100% + var(--bksi-gap)) !important; left:0 !important;
  z-index:var(--bksi-dd-z) !important; display:none; overflow:visible !important;
}
.bksi-hero-nav .has-dropdown:hover > .dropdown,
.bksi-hero-nav .has-dropdown:focus-within > .dropdown,
.bksi-hero-nav .has-dropdown.open > .dropdown{ display:block !important; }

/* Pont anti-trou entre le bouton et le panneau */
.bksi-hero-nav .has-dropdown::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:var(--bksi-gap); pointer-events:none;
}

/* Empêcher les couches derrière de recouvrir/couper */
.bksi-lore-banner, .bksi-lore-banner .overlay,
header, .site-header, #header{ overflow:visible !important; }
.bksi-lore-banner .overlay{ position:relative; z-index:0 !important; } /* HOME : la nav passe devant */

/* Le contenu reste sous la nav sur toutes les pages */
main, #main, .main, #content, .content, .article, .page, .bksi-article, .bksi-section{
  position:relative !important; z-index:0 !important; overflow:visible !important;
}
/* ===== BKSI — anti-trou robuste (le pont appartient AU menu) ===== */

/* 1) On neutralise l’ancien pont sur le parent (s’il existe) */
.bksi-hero-nav .has-dropdown::after{ content:none !important; }

/* 2) On aligne proprement le menu juste sous le bouton */
.bksi-hero-nav .has-dropdown > .dropdown{
  top: 100% !important;
  margin-top: var(--bksi-gap, 8px) !important; /* l’espace visible */
}

/* 3) Le vrai pont : une zone tampon qui FAIT partie du menu */
.bksi-hero-nav .has-dropdown > .dropdown::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--bksi-gap, 8px));
  height: var(--bksi-gap, 8px);
  /* important: on laisse pointer-events actifs pour que le :hover reste
     puisqu’on survole une “partie” du menu */
  pointer-events: auto;
  background: transparent; /* invisible */
  display: block;
  z-index: -1; /* derrière le contenu du menu, mais fait partie du menu */
}

/* 4) (optionnel) on agrandit aussi la zone du déclencheur */
.bksi-hero-nav .has-dropdown > a{
  position: relative;
  padding-bottom: 12px; /* confort */
}
/* Le menu reste au-dessus du contenu normal, mais sous la lightbox */
#header, .header, .nav, .bksi-header {
  position: relative;
  z-index: 100; /* pas énorme */
}

/* Mediabox doit dominer tout */
#box_overlay { z-index: 9998 !important; }
#box         { z-index: 9999 !important; }  /* conteneur de l’image */
.box_modal   { z-index: 9999 !important; }  /* selon versions Mediabox */
/* Fiche membre — les overlays passent AU-DESSUS de la nav */
.photo-zoom-overlay,
.status-zoom-overlay,
.grade-zoom-overlay {
  position: fixed;        /* plein écran */
  inset: 0;
  z-index: 14040 !important; /* > 12020 (dropdown) */
}

/* Si tu utilises Mediabox sur cette page, on la met aussi au-dessus */
#box_overlay { z-index: 14060 !important; }
#box, .box_modal { z-index: 14070 !important; }
.photo-zoom-overlay,
.status-zoom-overlay,
.grade-zoom-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}/* ===== Fiche membre — zoom robustes (hover) ===== */
/* 1) Overlays masqués par défaut, en plein écran et au-dessus du menu */
.bksi-member-grid .photo-zoom-overlay,
.bksi-member-grid .status-zoom-overlay,
.bksi-member-grid .grade-zoom-overlay{
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 14040 !important;           /* > nav 12020 */
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.86) !important;
  padding: 24px !important;
  cursor: zoom-out !important;
}
.bksi-member-grid .photo-zoom-overlay img,
.bksi-member-grid .status-zoom-overlay img,
.bksi-member-grid .grade-zoom-overlay img{
  max-width: min(95vw, 1600px) !important;
  max-height: 90vh !important;
  width: auto !important; height: auto !important;
}

/* 2) Déclencheurs : on montre l’overlay quand on survole la zone */
.bksi-member-grid .portrait:hover .photo-zoom-overlay{ display:flex !important; }
.bksi-member-grid .bksi-member-status-line:hover .status-zoom-overlay{ display:flex !important; }
.bksi-member-grid .bksi-member-grade-line:hover  .grade-zoom-overlay { display:flex !important; }

/* 3) Ne PAS faire disparaître complètement la photo au survol */
.bksi-member-grid .portrait .member-photo{ transition: opacity .15s ease; display:block; }
.bksi-member-grid .portrait:hover .member-photo{ opacity:.10 !important; } /* au lieu de 0 */

/* 4) S’assurer que rien derrière ne coupe l’overlay */
.bksi-member-grid, .bksi-member-grid *{ overflow: visible !important; }

/* === FIX: les photos passent DEVANT le menu === */

/* Images des articles (hero) */
.post-hero,
.post-hero .logo-article {
  position: relative;
  z-index: 5000; /* au-dessus du menu */
}

/* Portrait sur la fiche membre */
.bksi-member-grid .col.portrait,
.bksi-member-grid .member-photo {
  position: relative;
  z-index: 5000; /* au-dessus du menu */
}

/* Le menu reste bas (mais fonctionnel) */
.bksi-hero-nav,
.bksi-hero-nav .menu-container,
.bksi-hero-nav .dropdown {
  position: relative; /* crée un contexte propre */
  z-index: 1000;      /* en-dessous des images ci-dessus */
}

/* === NAV hybride — état ouvert piloté par JS === */
/* Garde le hover/focus pour secours CSS */
.bksi-hero-nav .has-dropdown:hover > .dropdown,
.bksi-hero-nav .has-dropdown:focus-within > .dropdown{
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ajoute l’état .is-open (JS) — prioritaire et stable */
.bksi-hero-nav .has-dropdown.is-open > .dropdown{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}

/* Petit pont anti-flicker intégré au menu (zéro trou) */
.bksi-hero-nav .has-dropdown > .dropdown{
  /* si tu utilises déjà top:100% + margin-top:var(--bksi-gap), garde-les */
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.bksi-hero-nav .has-dropdown > .dropdown::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: calc(-1 * var(--bksi-dd-gap, 8px));
  height: var(--bksi-dd-gap, 8px);
  pointer-events: auto;
  background: transparent;
}