/* ============================================================
   WEGAM — Hero / bande rouge
   Bande rouge flottante, logo Black Edition, icone menu epaisse.
   Fond grunge de la spirale (grain + encre + rouge signal).
   ============================================================ */

@font-face {
  font-family: 'Komper';
  src: url('/fonts/komper/Komper.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --wg-bar-h: 96px;   /* hauteur de la bande : +50% */
  --wg-bar-m: 28px;   /* marge gauche / droite / bas */
  --wg-bar: calc(var(--wg-bar-h) + 2 * var(--wg-bar-m));
}

/* ============================================================
   Fond grunge de la spirale
   Remplace le champ de particules (#wg-env) par une matiere
   noir basalte + grain + encre, avec des accents rouge signal.
   ============================================================ */
#wg-env {
  display: none !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #0D0D0D;
  background-image:
    radial-gradient(130% 100% at 78% 10%, rgba(251, 3, 1, 0.16), rgba(251, 3, 1, 0) 60%),
    radial-gradient(90% 80% at 10% 92%, rgba(251, 3, 1, 0.08), rgba(251, 3, 1, 0) 58%),
    url('/textures/grain.png'),
    url('/textures/ink.jpg');
  background-size: auto, auto, 300px 300px, cover;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-position: center, center, center, center;
  background-blend-mode: screen, screen, overlay, normal;
}

/* Accueil : meme fond grunge que le studio, en faible opacite,
   sous la video et la spirale. */
body:has([data-namespace="home"])::before {
  opacity: 0.22;
}

/* Detail projet : fond gris sombre propre, sans texture graffiti. */
body.pj-body {
  background: #1A1A1A;
}

body.pj-body::before {
  display: none;
}

/* ---- La video occupe tout l'ecran, la bande rouge flotte dessus ---- */
body:has([data-namespace="home"]) .c-wrapper,
body:has([data-namespace="home"]) .c-bg {
  bottom: 0;
}

.c-wrapper canvas {
  transform: none;
}

/* ---- On retire l'ancien header bas et ses annexes ---- */
.wegam-slogan,
.wegam-nav,
.wg-sound {
  display: none !important;
}

/* ---- La bande rouge : le bandeau noir devient cette bande ---- */
.wegam-scrim,
body.pg-light .wegam-scrim,
.wegam-scrim.is-hidden {
  position: fixed;
  top: auto;
  left: var(--wg-bar-m);
  right: var(--wg-bar-m);
  bottom: var(--wg-bar-m);
  height: var(--wg-bar-h);
  background: #fb0301;
  border-radius: 12px;
  opacity: 1 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 1300;
  pointer-events: none;
}

/* ---- Logo ivoire, presque 80% de la hauteur de la bande ---- */
.wegam-logo {
  position: fixed;
  left: calc(var(--wg-bar-m) + 24px);
  bottom: calc(var(--wg-bar-m) + var(--wg-bar-h) * 0.1);
  width: min(502px, 64vw);
  z-index: 1301;
  mix-blend-mode: normal;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.wegam-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Le logo reste visible en permanence, meme quand le footer arrive. */
body.wg-at-foot .wegam-logo {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Le balayage rouge n'a plus de sens sur fond rouge. */
.wegam-logo::before,
.wegam-logo::after {
  display: none !important;
}

/* ---- Icone menu : deux rectangles epais, a droite de la bande ---- */
.wegam-menu-btn,
body.pg-light .wegam-menu-btn:not(.is-open) {
  position: fixed;
  right: calc(var(--wg-bar-m) + 24px);
  bottom: calc(var(--wg-bar-m) + (var(--wg-bar-h) - 30px) / 2);
  width: 56px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #F2F0EB;
  z-index: 1301;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wegam-menu-btn:hover,
body.pg-light .wegam-menu-btn:not(.is-open):hover,
body.pg-light.pg-light-off .wegam-menu-btn:not(.is-open),
body.pg-light.pg-light-off .wegam-menu-btn:not(.is-open):hover {
  background: none !important;
  border: 0 !important;
}

.wegam-burger {
  position: relative;
  display: block;
  width: 56px;
  height: 30px;
}

.wegam-burger i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: block;
  width: 100%;
  height: 10px !important;
  margin-top: -5px;
  background: #F2F0EB;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.wegam-burger i:nth-child(1) { transform: translateY(-10px); }
.wegam-burger i:nth-child(2) { transform: translateY(10px); }

/* Les deux rectangles restent ivoire, meme sur les pages claires. */
body.pg-light .wegam-menu-btn:not(.is-open) .wegam-burger i,
body.pg-light.pg-light-off .wegam-menu-btn:not(.is-open) .wegam-burger i {
  background: #F2F0EB;
}

/* Securite : n'afficher que les deux rectangles. */
.wegam-burger i:nth-child(n + 3) {
  display: none !important;
}

/* Plus de pastille rouge : c'est le bouton lui-meme qui est rouge. */
.wegam-burger::after {
  display: none !important;
}

.wegam-menu-btn.is-open .wegam-burger i {
  opacity: 1;
}

.wegam-menu-btn.is-open .wegam-burger i:nth-child(1) {
  transform: rotate(45deg);
}

.wegam-menu-btn.is-open .wegam-burger i:nth-child(2) {
  transform: rotate(-45deg);
}

/* ============================================================
   "ON LES RÉINVENTE." — plus grand, avec Réinvente en Komper
   ============================================================ */
[class="p-3"] {
  font-size: clamp(2.8rem, 5.4vw, 6.2rem) !important;
  line-height: 0.95 !important;
}

[class="p-3"] .wg-script {
  font-family: 'Komper', 'Brush Script MT', cursive !important;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fb0301;
  font-size: 1.12em;
}

/* ---- Mobile ---- */
@media (max-width: 760px) {
  :root {
    --wg-bar-h: 81px;   /* +50% de 54px */
    --wg-bar-m: 14px;
  }

  .wegam-logo {
    left: calc(var(--wg-bar-m) + 16px);
    bottom: calc(var(--wg-bar-m) + var(--wg-bar-h) * 0.1);
    width: min(420px, 66vw);
  }

  .wegam-menu-btn,
  body.pg-light .wegam-menu-btn:not(.is-open) {
    right: calc(var(--wg-bar-m) + 16px);
    bottom: calc(var(--wg-bar-m) + (var(--wg-bar-h) - 24px) / 2);
    width: 46px;
    height: 24px;
  }

  .wegam-burger {
    width: 46px;
    height: 24px;
  }

  .wegam-burger i {
    height: 8px !important;
    margin-top: -4px;
  }

  .wegam-burger i:nth-child(1) { transform: translateY(-8px); }
  .wegam-burger i:nth-child(2) { transform: translateY(8px); }

  [class="p-3"] {
    font-size: clamp(2.4rem, 8.2vw, 4rem) !important;
  }
}