/* Fond fixe en full‑screen pour la page d'accueil */
body#app {
  background: url('https://onejail.fr/storage/app/public/img/background_accueil.png') no-repeat center center fixed;
  background-size: cover;
}

body {
  margin: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1a1a1a 0%, #0d0d0d 100%);
  height: 100vh;
}

.cube {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(45deg) rotateY(45deg);
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
  z-index: -1;
}

.cube div {
  position: absolute;
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.6), 0 0 20px rgba(255, 140, 0, 0.2);
}

.cube .front  { transform: translateZ(50px); background-image: url('textures/front.png'); }
.cube .back   { transform: rotateY(180deg) translateZ(50px); background-image: url('textures/back.png'); }
.cube .right  { transform: rotateY(90deg) translateZ(50px); background-image: url('textures/right.png'); }
.cube .left   { transform: rotateY(-90deg) translateZ(50px); background-image: url('textures/left.png'); }
.cube .top    { transform: rotateX(90deg) translateZ(50px); background-image: url('textures/top.png'); }
.cube .bottom { transform: rotateX(-90deg) translateZ(50px); background-image: url('textures/bottom.png'); }

@keyframes rotate {
  from { transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg); }
  to { transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg); }
}

/* Ce div couvre tout l'écran, au‑dessous de votre header / contenu */
#particle-container {
  position: fixed;
  inset: 0;              /* top:0; left:0; right:0; bottom:0 */
  pointer-events: none;  /* click-through */
  z-index: 1;            /* ajustez si besoin pour qu'il soit derrière votre contenu */
}

/* Style des particules, positionnées RELATIVEMENT au container */
#particle-container .particle {
  position: absolute;
  bottom: 0;
  background: rgba(236,125,26,0.9);
  border-radius: 50%;
  pointer-events: none;
  animation: rise 6s linear;
}

/* Animation : monte et disparaît */
@keyframes rise {
  0%   { transform: translateY(0);   opacity: 1; }
  100% { transform: translateY(-100vh); opacity: 0; }
}