body {
  background-color: black;
  margin: 0;
  padding: 0;
}

#conteneur {
  margin: 100px auto;
  width: 90vw;
  height: 90vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 15px;
}

/* Positionnement des cases */
#un     { grid-column: 1/2; grid-row: 1/3; }
#deux   { grid-column: 2/5; grid-row: 1/2; }
#trois  { grid-column: 5/6; grid-row: 1/2; }
#quatre { grid-column: 2/4; grid-row: 2/4; }
#cinq   { grid-column: 4/6; grid-row: 2/3; }
#six    { grid-column: 1/2; grid-row: 3/5; }
#sept   { grid-column: 2/4; grid-row: 4/5; }
#huit   { grid-column: 4/6; grid-row: 3/5; }

/* Chaque case peut contenir Lottie, image, vidéo */
.case {
  position: relative;
  overflow: hidden;
}

/* Canvas qui couvre chaque case */
.glpatch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 20;
  opacity: 1;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.35s ease;
  pointer-events: auto;
}

/* Quand on clique : le patch devient invisible et passe à travers */
.glpatch.revealed {
  opacity: 0;
  pointer-events: none;
}

/* Focus clavier (accessibilité) */
.glpatch:focus {
  outline: 2px solid rgba(255,255,255,0.2);
}

/* Les contenus dessous (Lottie, images, vidéos) */
.case img, .case video, .case svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}