/* =========================================
   INFO GUIDE SYSTEM
========================================= */

/* =========================================
   NAV BUTTON
========================================= */

.nav-guide-btn{

  margin-left:auto;

  padding:12px 24px;

  border:none;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #c1121f,
      #ff3b30
    );

  color:#ffe082;

  font-size:15px;

  font-weight:700;

  letter-spacing:1px;

  cursor:pointer;

  box-shadow:
    0 0 20px rgba(255,0,0,0.35),
    0 10px 30px rgba(0,0,0,0.35);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;

  animation:guidePulse 2s infinite;
	
display:flex;

align-items:center;

justify-content:center;

gap:8px;
	
}

/* Hover */

.nav-guide-btn:hover{

  transform:
    translateY(-2px)
    scale(1.05);

  box-shadow:
    0 0 35px rgba(255,60,60,0.75),
    0 20px 50px rgba(0,0,0,0.45);
}

/* Pulse */

@keyframes guidePulse{

  0%{

    box-shadow:
      0 0 10px rgba(255,0,0,0.30),
      0 0 0 rgba(255,0,0,0);
  }

  50%{

    box-shadow:
      0 0 28px rgba(255,0,0,0.85),
      0 0 45px rgba(255,0,0,0.35);
  }

  100%{

    box-shadow:
      0 0 10px rgba(255,0,0,0.30),
      0 0 0 rgba(255,0,0,0);
  }
}

/* =========================================
   OVERLAY
========================================= */

.info-guide-overlay{

  position:fixed;

  inset:0;

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

  backdrop-filter:blur(6px);

  display:flex;

  justify-content:center;

  align-items:center;

  padding:25px;

  opacity:0;

  visibility:hidden;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;

  z-index:99999;
}

/* ACTIVE */

.info-guide-overlay.active{

  opacity:1;

  visibility:visible;
}

/* =========================================
   MODAL
========================================= */

.info-guide-modal{

  width:min(920px,100%);

  max-height:88vh;

  overflow-y:auto;

  padding:45px;

  border-radius:30px;

  background:
    linear-gradient(
      180deg,
      rgba(20,25,20,0.98),
      rgba(10,15,10,0.96)
    );

  border:
    1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 35px 90px rgba(0,0,0,0.75),
    0 0 40px rgba(255,255,255,0.04);

  position:relative;

  animation:guideOpen 0.35s ease;
}

/* =========================================
   OPEN ANIMATION
========================================= */

@keyframes guideOpen{

  from{

    opacity:0;

    transform:
      translateY(20px)
      scale(0.96);
  }

  to{

    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}

/* =========================================
   CLOSE BUTTON
========================================= */

.info-guide-close{

  position:absolute;

  top:18px;
  right:22px;

  width:42px;
  height:42px;

  display:flex;

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

  border-radius:50%;

  background:
    rgba(255,255,255,0.08);

  color:#fff;

  font-size:22px;

  cursor:pointer;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

/* Hover */

.info-guide-close:hover{

  transform:rotate(90deg);

  background:
    rgba(255,80,80,0.25);
}

/* =========================================
   TITLE
========================================= */

.info-guide-modal h3{

  margin-bottom:30px;

  padding-right:60px;

  font-size:32px;

  letter-spacing:2px;

  color:#f5d061;
}

/* =========================================
   CONTENT
========================================= */

#infoGuideContent{

  line-height:1.9;

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

  font-size:16px;
}

/* Paragraphes */

#infoGuideContent p{

  margin-bottom:22px;
}

/* Listes */

#infoGuideContent ul{

  margin:
    20px 0 30px 24px;
}

#infoGuideContent li{

  margin-bottom:12px;
}

/* =========================================
   SCROLLBAR
========================================= */

.info-guide-modal::-webkit-scrollbar{

  width:10px;
}

.info-guide-modal::-webkit-scrollbar-thumb{

  background:
    rgba(255,255,255,0.18);

  border-radius:999px;
}

/* =========================================
   MOBILE
========================================= */

@media screen and (max-width:768px){

  .nav-guide-btn{

    padding:10px 18px;

    font-size:13px;

    letter-spacing:0.5px;
  }

  .info-guide-modal{

    padding:30px 22px;

    border-radius:22px;
  }

  .info-guide-modal h3{

    font-size:24px;

    margin-bottom:24px;
  }

  #infoGuideContent{

    font-size:15px;

    line-height:1.75;
  }

  .info-guide-close{

    width:38px;
    height:38px;

    font-size:20px;
  }
}