/* =========================================================
   KATALDIVISION · Fond de la zone d'accueil (hero 3D)
   Se charge après kd-system.css et ne touche qu'au hero.
   Pour revenir à l'ancien fond : retirer la ligne
   <link rel="stylesheet" href="css/kd-hero-fond.css"> de index.html.
   ========================================================= */

.hero{
  background:
    /* lumière de studio derrière la maquette */
    radial-gradient(38% 46% at 68% 50%, rgba(241,90,36,.16), transparent 70%),
    /* reflet froid en haut à droite, comme un ciel d'acier */
    radial-gradient(45% 40% at 88% 8%, rgba(120,150,190,.12), transparent 70%),
    /* vignettage : les bords restent sombres, le texte reste lisible */
    radial-gradient(120% 90% at 60% 45%, transparent 55%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, #121519 0%, #0E1013 55%, #0B0D10 100%);
}

/* Trame de plan (blueprint) très discrète, concentrée autour de la maquette */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(238,235,229,.05) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, rgba(238,235,229,.05) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(rgba(238,235,229,.035) 1px, transparent 1px) 0 0/240px 240px,
    linear-gradient(90deg, rgba(238,235,229,.035) 1px, transparent 1px) 0 0/240px 240px;
  -webkit-mask-image:radial-gradient(48% 55% at 68% 50%, #000 15%, transparent 75%);
          mask-image:radial-gradient(48% 55% at 68% 50%, #000 15%, transparent 75%);
}

/* Sol : halo doux sous le bâtiment, à la place de la grille en perspective */
.hero::after{
  inset:auto 0 0 30%;height:60%;opacity:1;transform:none;
  background:
    radial-gradient(42% 38% at 55% 52%, rgba(238,235,229,.07), transparent 70%),
    radial-gradient(30% 20% at 55% 60%, rgba(241,90,36,.08), transparent 70%);
}

@media (max-width:1100px){
  .hero{
    background:
      radial-gradient(70% 40% at 50% 62%, rgba(241,90,36,.14), transparent 70%),
      linear-gradient(180deg, #121519 0%, #0E1013 60%, #0B0D10 100%);
  }
  .hero::before{
    -webkit-mask-image:radial-gradient(70% 35% at 50% 62%, #000 10%, transparent 75%);
            mask-image:radial-gradient(70% 35% at 50% 62%, #000 10%, transparent 75%);
  }
  .hero::after{inset:auto 0 0 0}
}

/* La dalle sous la maquette se fond dans le décor au lieu de finir en arête nette (ordinateur) */
@media (min-width:1101px){
  .hero-stage #viewer3d,.hero-stage .hero-poster{
    -webkit-mask-image:radial-gradient(34% 42% at 50% 52%, #000 55%, transparent 100%);
            mask-image:radial-gradient(34% 42% at 50% 52%, #000 55%, transparent 100%);
  }
}