/* ==========================================================================
   Bouton menu flottant bas-droite (d'après le Figma "Sans-titre")
   - État 1 (fermé)  : 3 barres HORIZONTALES  (☰)
   - État 2 (ouvert) : 3 barres VERTICALES    (|||)  + panneau de menu
   Le bouton = carré arrondi à dégradé rouge, barres blanches.
   ========================================================================== */

.pixel-fab {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  z-index: 1000;
  padding: 0;
  display: grid;
  place-items: center;
  /* Dégradé rouge repris de la scène Figma */
  background: linear-gradient(150deg, #e11d2a 0%, #a30f18 55%, #5f050b 100%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 22px rgba(220, 38, 38, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

/* pas d'effet de survol (demandé) */
.pixel-fab:active { transform: scale(0.97); }

.pixel-fab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Les 3 barres : horizontales par défaut, on pivote tout l'ensemble à 90°
   pour obtenir 3 barres verticales à l'ouverture (comme dans le Figma). */
.pixel-fab .bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pixel-fab .bars span {
  display: block;
  width: 34px;
  height: 7px;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.pixel-fab[aria-expanded="true"] .bars { transform: rotate(90deg); }

/* ---------- Panneau de menu ---------- */
.pixel-menu {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: calc(clamp(16px, 3vw, 40px) + 80px);
  z-index: 999;
  min-width: 240px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(12, 14, 20, 0.96);
  border: 1px solid var(--border-active, #dc2626);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 24px rgba(220, 38, 38, 0.2);
  backdrop-filter: blur(8px);
  /* caché par défaut */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.pixel-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.pixel-menu ul { list-style: none; margin: 0; padding: 0; }

.pixel-menu li + li { margin-top: 2px; }

.pixel-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-pixel, "Geist Pixel Square", sans-serif);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.pixel-menu a:hover {
  background: rgba(220, 38, 38, 0.14);
  color: var(--azarus-amber-light, #f59e0b);
  padding-left: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .pixel-fab, .pixel-fab .bars, .pixel-menu { transition: none; }
}

/* ==========================================================================
   HERO pixel (assets fournis) : 3 couches, texte DERRIÈRE le PC.
     1. fond rouge   -> assets/hero-bg.webp
     2. texte Azarus -> vraie typo "Ari Bold" (z-index 1)  [ENTRE fond et PC]
     3. PC + terrain -> assets/hero-computer.webp (transparent, z-index 2, DEVANT)
   Tout est verrouillé dans une "scène" à ratio fixe -> aligné à toute largeur.
   ========================================================================== */
.pixel-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  /* dégradé rouge par-dessus les BORDS pour boucher les coins sombres de l'image */
  background:
    radial-gradient(125% 98% at 50% 42%,
      rgba(255, 74, 38, 0) 46%, #d5161c 78%, #a90f18 100%),
    url('../assets/hero-bg.webp') center center / cover no-repeat,
    #c9121a;
}

.pixel-hero__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 2000 / 1125;                     /* ratio de l'image du PC (16:9) */
  width: max(100%, calc(100svh * 2000 / 1125));  /* couvre toujours le hero */
  container-type: inline-size;                    /* pour dimensionner le texte en cqw */
}

/* Texte "Azarus" en police Ari, DERRIÈRE le PC */
.pixel-hero__titleWrap {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.pixel-hero__title {
  margin: 0;
  font-family: 'Ari Bold', 'Ari', var(--font-pixel), sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 22vw, 18rem);   /* le mot entier tient dans l'écran */
  line-height: 0.9;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  user-select: none;
}

/* PC + terrain (transparent) DEVANT le texte */
.pixel-hero__scene {
  position: absolute;
  top: 14%;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;             /* même ratio que la scène -> pas de déformation */
  z-index: 2;
  pointer-events: none;
  /* agrandie : l'image 16:9 rentre en entier -> on zoome pour un PC imposant
     + terrain qui remplit le bas et déborde sur les côtés */
  transform: scale(1.75);
  transform-origin: 50% 66%;
}

/* Navbar retirée : la navigation passe par le bouton menu flottant (☰) */
.navbar { display: none !important; }

/* Défilement doux (ancres du menu) + confort de scroll global */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }