@import url("variables.css");
@import url("animation.css");
@import url("glow-card.css");

@font-face {
  font-family: 'ManaBurn';
  src:
    url('/fonts/ManaBurnFont.woff2') format('woff2'),
    url('/fonts/ManaBurnFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

header, main, footer{
  position: relative;
  z-index: 2;
}
body {
  position: relative;
  background: var(--mb-background);
  color: var(--mb-textColor);
}
/* Halo lumineux */
body::before{
  content: "";
  position: fixed;
  inset: -20%; /* déborde pour éviter les bords visibles */

  background:
    radial-gradient(
      circle at center,
      var(--mb-arto-2) 0%,   /* mb-arto-2 */
      var(--mb-arto) 28%,   /* mb-arto */
      rgba(143, 75, 71, 0.06) 48%,
      rgba(0, 0, 0, 0) 72%
    );

  filter: blur(60px);
  opacity: 0.15;

  pointer-events: none;
  z-index: 0;
}
body::after{
  content: "";
  position: fixed;
  inset: 0;

  background-image: url("/img/logoT.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(45vw, 420px);

  opacity: 0.6; /* très subtil */
  filter: blur(0.2px);

  pointer-events: none;
  z-index: 1;
}

.mb-font {
  font-family: 'ManaBurn', sans-serif;
  font-weight: normal;
  letter-spacing: 0.5px;
}

.mb-image-25
{
  width: auto;
  height: 25px;
}
.mb-image-35
{
  width: auto;
  height: 35px;
}

.mb-box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* Container de la page d’accueil */
.mb-hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem;
  overflow: hidden;
}

/* Container logo + texte */
.mb-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  /* espace entre le logo et le texte */
}

/* Logo – animation adaptée aux fonds opaques */
.mb-logo {
  max-height: 300px;
  height: auto;
  width: auto;
  opacity: 0;
  transform: scale(0.9) rotateX(15deg);
  animation: mb-logo-reveal 1s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: 200ms;
  filter: drop-shadow(0 0 0.75rem var(--mb-arto));
}

/* Bloc logo distinct pour gérer sa propre animation */
.mb-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Titres + texte : apparition en décalé (stagger) */
.mb-title {
  letter-spacing: .5px;
  line-height: 1.1;
  text-shadow: 0 0 16px rgba(255, 90, 47, .15);
  opacity: 0;
  transform: translateY(10px);
  animation: mb-fade-up 700ms cubic-bezier(.22, 1, .36, 1) 120ms forwards;
}

.mb-sub {
  color: var(--mb-fg);
  opacity: .8;
  margin-top: .75rem;
  opacity: 0;
  transform: translateY(10px);
  animation: mb-fade-up 700ms cubic-bezier(.22, 1, .36, 1) 240ms forwards;
}

/* Liseré animé sous le H1 (underline accent) */
.mb-underline {
  position: relative;
  display: inline-block;
}

.mb-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 90, 47, 0) 0%, var(--mb-arto) 40%, rgba(255, 90, 47, 0) 100%);
  transform: translateX(-50%);
}

/* Texte sous le logo */
.mb-text {
  text-align: center;
}

.mb-card {
  background: var(--mb-surface) !important;
  border-radius: var(--mb-radius);
  border: 1px solid var(--mb-border);
  transition: background 0.2s, transform 0.2s;
}

.mb-card:hover {
  background: var(--mb-surface-hover) !important;
  transform: translateY(-3px);
}

.card {
  border-radius: .75rem;
  overflow: hidden;
}

.card-img-top {
  object-fit: cover;
  max-height: 220px;
}

.goverlay {
  background: rgba(0, 0, 0, 0.85) !important;
}



.glow-btn {
  color: var(--mb-arto);
  box-shadow: 0 0 10px 0 var(--mb-arto) inset, 0 0 10px 1px var(--mb-arto);
  transition: all 150ms ease-in-out;
}

.glow-btn:hover {
  color: #fff;
  box-shadow: 0 0 40px 10px var(--mb-arto) inset, 0 0 0 0 var(--mb-arto);
}

.gslide-title {
  color: var(--mb-arto) !important;
  font-family: 'ManaBurn', sans-serif !important;
  font-size: 32px !important;
  position: relative;
  display: inline-block;
}

.gslide-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  /* ajuste la distance du souligné */
  width: 100%;
  /* largeur finale */
  height: 2px;
  /* même épaisseur qu'avant */
  transform: translateX(-50%);
  background: linear-gradient(90deg,
      rgba(255, 90, 47, 0) 0%,
      var(--mb-arto) 40%,
      rgba(255, 90, 47, 0) 100%);
}

.gslide-desc p {
  color: black !important;
}
/* Texte description slider en noir sur mobile */
@media (max-width: 768px) {
  .gslide-desc p {
    color: white !important;
  }
}


/* Soulignement animé pour la navigation */
.mb-underline-nav {
  position: relative;
  display: inline-block;
}
.mb-underline-nav::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 100%;
  height: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(90deg, rgba(255, 90, 47, 0) 0%, rgb(143, 75, 71) 40%, rgba(255, 90, 47, 0) 100%);
  transform: translateX(-50%);
}

.mb-underline-nav.active::after,
.mb-underline-nav:hover::after {
  opacity: 1;
}