:root{
  
  --mb-bg:#040404; /* Background*/
  --mb-fg:#fff; /* Foreground / Text */
  --mb-arto:rgb(143, 75, 71);  /* Accent color / Arto */
  --mb-muted:#b8b8b8; /* Muted text */

   /* Typo */
  --mb-font-title: 'ManaBurn', sans-serif;
  --mb-font-body: 'Inter', sans-serif;

  /* Radius */
  --mb-radius: 12px;

    /* Dégradés */
  --mb-grad: linear-gradient(135deg, #8f4b47, #5a2c29);
}
@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;
}

html, body {
    height: auto;
    min-height: 100%;
}

body{
  background: var(--mb-bg);
  color: var(--mb-fg);
}


.mb-font {
  font-family: 'ManaBurn', sans-serif;
  font-weight: normal;
  letter-spacing: 0.5px;
}
/* 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:0;
  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%);
  animation: mb-underline-grow 900ms 300ms cubic-bezier(.22,1,.36,1) forwards;
}

/* Texte sous le logo */
.mb-text {
  text-align: center;
}
.footer {
    position: static !important;
    bottom: auto !important;
}
body.d-flex {
    display: flex !important;
    flex-direction: column !important;
}

main.flex-grow-1 {
    flex: 1 0 auto !important;
}
/* Keyframes */
@keyframes mb-fade-up{
  from{ opacity:0; transform: translateY(12px) scale(.98); }
  to{   opacity:1; transform: translateY(0) scale(1); }
}

@keyframes mb-underline-grow{
  0%  { width:0 }
  100%{ width: 160px }
}

.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;
}
.lang-flags-form {
    margin-left: auto;
}

.lang-flag {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lang-flag img {
    width: 28px;
    height: 28px;
    transition: box-shadow 0.2s ease;
}

.lang-flag:hover,
.lang-flag.active {
    opacity: 1;
    transform: scale(1.1);
}