<style>

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
	
    body{
      font-family:"Lexend", sans-serif;
      background: transparent;
      color:white;
      min-height:100vh;
	  cursor: url("../images/ui/rawcursor.png") 0 0, auto;
	  margin: 0;
	  padding: 0;
	  overflow-x: hidden;
	  transition: background-color .2s ease;
}
  

	a, button, .card{
	  cursor: url("../images/ui/onlinkcursor.png") 0 0, pointer;
	}

    .container{
      width:min(1300px, 92%);
      margin:auto;
      padding:20px 0 60px;
    }
	
	body.index-page {
      background: transparent;
}

		/* HERO */

    .hero{
      text-align:center;
      margin-bottom:70px;
	  padding-top: 0;
	  margin-top: 0;
    }
	
	.class-hero{
	  margin-bottom: 50px;
	}
	
    .hero h1{
      font-size:clamp(2.5rem, 6vw, 4.5rem);
	  white-space: nowrap;
      letter-spacing:2px;
      text-transform:uppercase;
	  margin-top: 0;
      margin-bottom: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 20px;
	  line-height: 1;
    }
	
@media (max-width: 600px) {
  .hero h1 {
    flex-direction: column;
    white-space: normal;
    text-align: center;
    font-size: clamp(2rem, 10vw, 3rem);
    gap: 8px;
  }

  .hero-logo {
    width: 130px;
    height: 130px;
  }
}

    .hero p{
      color:#b9c0cf;
      max-width:700px;
      margin: 0 auto;
      line-height:1.6;
    }
	
	.hero-logo{
	  width: 180px;
	  height: 180px;
	  object-fit: contain;
	  display: block;
	}
	
	.hero-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
	  
	  margin-top: 50px;
	  padding: 8px 14px;
	  border-radius: 999px;

      background: rgba(42, 49, 68, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.08);

      color: rgba(255,255,255,0.78);

      text-decoration: none;
      font-size: 1rem;
      font-weight: 600;

      transition: 0.2s ease;
    }

    .hero-back:hover {
      color: #ffffff;
	  background: rgba(42, 49, 68, 0.85);
	  transform: translateY(-2px);
    }

    /* GRID */

    .grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:25px;
	  position: relative;
	  z-index: 1;
    }
	
	.main-grid{
	  grid-template-columns:repeat(6, 1fr);
	}
	.main-grid .card{
	  grid-column: span 2;
	}
	 
	.main-grid > *:last-child:nth-child(3n+1){
	  grid-column: 3 / span 2;
	}
	.main-grid > *:nth-last-child(2):nth-child(3n+1) {
      grid-column: 2 / span 2;
	}
	
	.class-grid {
	  grid-template-columns: repeat(2, minmax(320px, 420px));
	  justify-content: center;
	}
	
	@media (max-width: 760px) {
      .class-grid {
      grid-template-columns: 1fr;
    }
}
	
		/* CARD */

/* CARD BASE */
.card{
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  color: white;
  text-decoration: none;
  transition: 0.25s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  height: 260px;
}

/* IMAGE BACKGROUND */
.card-bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 0% !important;
  transition: 0.3s ease;
  filter: brightness(0.8);
}

/* OVERLAY */
.overlay{
  position: absolute;
  transition: 0.3s ease;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.08)
  );
  z-index: 1;
}

/* TAG (TOP LEFT) */
.tag{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  background: rgba(42,49,68,0.85);
  border-radius: 999px;
  font-size: 0.8rem;
  color: #cfd7ff;
  font-weight: 600;
  
  letter-spacing: 0.2px;
}
.tag-icon{
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.patch-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;

  padding: 6px 12px;
  background: rgba(255, 140, 60, 0.60);
  border-radius: 999px;
  font-size: 0.8rem;
  color: #fff4ea;
  font-weight: 600;

  letter-spacing: 0.2px;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* CONTENT (BOTTOM) */
.card-content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 20px;
}

/* TITLE */
.card h2{
  margin-bottom: 10px;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* TEXT */
.card p{
  color: #aab2c0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ARROW */
.arrow{ 
	position: absolute; 
	bottom: 18px; 
	right: 18px; 
	z-index: 5; 
	opacity: 0.7; 
	transition: 0.2s ease; 
}
.arrow img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: 0.2s ease;
}

/* HOVER EFFECT */
.card:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 45px rgba(0,0,0,0.5);
}

.card:hover .overlay{
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.1)
  );
}

.card:hover .card-bg{
  transform: scale(1.08);
  filter: brightness(1.05);
}

.card:hover .arrow{
  transform: translateX(4px) scale(1.5);
  opacity: 1;
}

.card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(120,140,255,0.15), transparent 60%);
  opacity: 0;
  transition: 0.3s ease;
}

.card:hover::before{
  opacity: 1;
}

.class-icon{
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* SOCIALS */

.socials{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;

  margin-bottom: 20px;
}

.socials a{
  transition: 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  color:#cfd7ff;
  text-decoration:none;
}

.socials img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;

  opacity: 0.75;
  transition: 0.25s ease;
}

.socials span{
  font-size:0.95rem;
}

.socials a:hover{
  transform: translateY(-3px);
}

.socials a:hover img{
  opacity: 1;
  filter:
    brightness(1.2)
    drop-shadow(0 0 8px rgba(120,140,255,0.35));
}

.x-icon{
  transform: scale(0.65);
}

.discord-icon{
  transform: translateY(1.5px);
}

@media (max-width: 900px){
  .grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px){
  #bg-video{
    object-fit: cover;
    height: 100vh;
  }
}

#bg-video{
  position: fixed;
  top: 0;
  left: 0;
  
  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: -2;
  
  filter: none;
  will-change: transform;
}

		/* BUILDS CLASSE */	
		
body.build-page {
  background: url("../images/backgrounds/builds_bg.jpg") center/cover no-repeat fixed;
}

.build-page .container {
  padding: 0;
}

.build-page .build-header {
  width: 100vw;
  margin-left: calc(-50vw + 50%);

  background: rgba(10, 12, 18, 0.88);

  padding: 30px 16px 30px;

  display: flex;
  flex-direction: column;
  align-items: center;
}
		

/* default desktop */

.build-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.build-title h1{
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing:2px; 
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

/* future mobile override */

@media (max-width: 600px) {
  .build-title {
    flex-direction: column;
    text-align: center;
	gap: 8px;
  }
}

/* default desktop */

.build-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

/* default desktop */

.build-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 30px 0 30px;

  padding: 8px 14px;
  border-radius: 10px;

  background: rgba(90, 110, 255, 0.18);
  border: 1px solid rgba(90, 110, 255, 0.35);

  color: #cfd7ff;
  font-size: 1rem;
  font-weight: 500;

  letter-spacing: 0.3px;
}

.build-meta img {
  width: 12px;
  height: 12px;
  object-fit: contain;
  display: block;
}

/* future mobile override */

@media (max-width: 600px) {
  .build-meta {
    font-size: 0.9rem;
    padding: 7px 12px;
  }
}

.build-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(42, 49, 68, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);

  color: rgba(255,255,255,0.78);

  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;

  transition: 0.2s ease;
}

.build-back:hover {
  background: rgba(42, 49, 68, 0.85);
  color: #ffffff;
  transform: translateY(-2px);
}

.build-nav {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;

  width: fit-content;
  margin: 30px auto 24px;
  
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 10px 14px;
  background: rgba(10, 12, 18, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

@media (max-width: 760px) {
  .build-nav {
    width: min(100%, 92vw);
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .build-nav::-webkit-scrollbar {
    display: none;
  }
}

.nav-item {
  padding: 10px 14px;
  border-radius: 999px;
  flex-shrink: 0;

  background: rgba(42, 49, 68, 0.6);
  color: #cfd7ff;

  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;

  transition: 0.2s ease;
  border: 1px solid rgba(255,255,255,0.05);
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* default desktop */

.nav-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  filter: brightness(1.1);
}

/* future mobile override */

@media (max-width: 600px) {
  .nav-item img {
    width: 26px;
    height: 26px;
  }
}

.nav-item:hover {
  background: rgba(90, 110, 255, 0.3);
  transform: translateY(-2px) scale(1.02);
  color: white;
}

.nav-item:focus-visible {
  outline: 2px solid #5a6eff;
}

html {
  scroll-behavior: smooth;
  background: #0a0c12;
}

.build-section {
	margin-bottom: 0;
	text-align: center;
	display: flex;
	align-items: center;
	gap: 25px;
	flex-direction: column;
}

/*CLASS BUTTONS FICHE PERSO BUILDS*/
.class-selector {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 10px;
}

.class-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(42,49,68,0.6);
  color: #cfd7ff;

  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;

  transition: 0.2s ease;
}

.class-btn img{
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.class-btn.active {
  background: rgba(255,140,60,0.18);
  color: #ffd2b0;
}

.class-btn:hover:not(.active) {
  background: rgba(52, 61, 84, 0.75);
  border-color: rgba(255,255,255,0.15);
}

.meta-badge{
  font-size: 0.9rem;
  color: #ffd2b0;
}

/* H2 catégories */
.build-section h2 {
	display: inline-block;
	align-items: center;
	justify-content: center;
	margin: 30px 0 0;
	font-size: 1.60rem;
	padding: 10px 15px;
	border-radius: 10px;
	background: rgba(255, 140, 60, 0.12);
	border: 1px solid rgba(255, 140, 60, 0.35);
	color: #ffd2b0;
	letter-spacing: 0.2px;
}

/* H3 Sections Trash & Boss */
.build-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 6px 12px;
  border-radius: 8px;

  background: rgba(90, 110, 255, 0.12);
  border: 1px solid rgba(90, 110, 255, 0.25);

  color: #d6dcff;

  font-size: 1.30rem;
  font-weight: 550;

  margin: 0;
}

/* Icônes d'armes H3 */
.build-subtitle img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  display: block;
  
}

/* Espacement Span Mythic */
.h3-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.build-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Mythic Color */
.set-mythic {
  font-weight: 600;
  color: #ff8200;
}

/*BUILDS BUTTONS TRASH BUILDS*/
.build-selector {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 10px;
}

.build-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  
  background: rgba(42,49,68,0.6);
  color: #cfd7ff;
  
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  
  transition: 0.2s ease;
}

.build-btn img{
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.build-btn.active {
  background: rgba(255,140,60,0.18);
  color: #ffd2b0;
}

.build-btn:hover:not(.active) {
  background: rgba(52, 61, 84, 0.75);
  border-color: rgba(255,255,255,0.15);
}

		/* CANVAS BUILDS */

.build-image {
  display: block;
  margin: 0px auto;
  border-radius: 12px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.4);

  max-width: 100%;
  height: auto;
}

/* 1920x1080 */
.image-wide {
  width: min(1550px, 95vw);
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

/* 1080x1920 */
.image-vertical {
  width: min(520px, 100%);
}
/* 2160x1920 */
.image-square {
  width: min(1050px, 100%);
}

		/* LIGHTBOX */

#lightbox {
  position: fixed;
  inset: 0;

  background: rgba(0,0,0,0.9);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.2s ease;

  z-index: 9999;
}

#lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

#lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;

  border-radius: 12px;
  animation: lightboxZoom 0.2s ease;
}

@media (max-width: 760px) {
  .image-wide {
    width: 100%;
    max-width: 100%;
    left: auto;
    transform: none;
  }

  #lightbox img {
    max-width: 88vw;
    max-height: 82vh;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }
}

.clickable-image {
  cursor: zoom-in;
}

.lightbox-hint {
  position: absolute;
  bottom: 8px;

  color: rgba(255,255,255,0.6);

  font-size: 0.95rem;
  font-weight: 500;

  letter-spacing: 0.3px;

  opacity: 0;

  transition: opacity 0.25s ease;
}
#lightbox.active .lightbox-hint {
  opacity: 1;
}

@keyframes lightboxZoom {
  from {
    transform: scale(0.96);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* NAV ARROW IMAGES */

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 64px;
  height: 64px;

  border: none;
  border-radius: 50%;

  background: rgba(20,20,20,0.65);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: 0.2s ease;
}

.lightbox-prev {
  left: 30px;
}

.lightbox-next {
  right: 30px;
}

.lightbox-prev img,
.lightbox-next img {
  display: block;

  width: 18px;
  height: 18px;

  min-width: 0;
  min-height: 0;

  object-fit: contain;

  opacity: 0.9;

  transition: 0.2s ease;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(90,110,255,0.35);
  transform: translateY(-50%) scale(1.08);
}

.lightbox-prev:hover img,
.lightbox-next:hover img {
  opacity: 1;
  transform: scale(1.10);
}

/* LIGHTBOX IMG COUNTER */

.lightbox-counter {
  position: absolute;

  top: calc(50% + 52px);
  left: 30px;

  width: 64px;

  text-align: center;

  color: rgba(255,255,255,0.7);

  font-size: 0.9rem;
  font-weight: 500;

  letter-spacing: 0.3px;

  pointer-events: none;
}

		/* FOOTER */

.build-page footer {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: rgba(10, 12, 18, 0.88);
  padding: 30px 16px 30px;
}

.footer {
  text-align:center;
  margin-top:70px;
  color:#6f7a8c;
  font-size:0.9rem;
}
	
.footer-text{
  text-align:center;
  line-height:1.6;
}

</style>