@charset "UTF-8";

@font-face {
  font-family: "ABCDiatype";
  src: url("../fonts/ABCDiatype-Regular-Trial.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #ffffff;
  font-family: "ABCDiatype", sans-serif;
}

/* ─── Grille d'arrière-plan ─── */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  border-top: 1px solid #111;
  border-left: 1px solid #111;
}
.bg-cell {
  box-sizing: border-box;
  aspect-ratio: 1;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
}

/* ─── Scene ─── */
.scene {
  position: relative;
  z-index: 5;
  --s: min(40vmin, 500px);
  --bc: calc(var(--s) * 0.01);
  --ar: calc(var(--s) * 0.03);
  width: var(--s);
  height: var(--s);
}

/* ─── Cube ─── */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(var(--ry, 45deg));
  transition: transform 0.08s ease-out;
}

/* ─── Face commune ─── */
.face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  background: #111111;
  gap: var(--bc);
  padding: var(--bc);
  overflow: hidden;
}

/* ─── Colonne scrollable ─── */
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bc);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: none;
}
.column::-webkit-scrollbar {
  display: none;
}

.cell {
  width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: var(--ar);
  scroll-snap-align: start;
}

/* ─── Blocs de chiffres ─── */
.number-bloc {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: row;
  border-top: 1px solid #111;
  border-left: 1px solid #111;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.number-bloc.visible {
  opacity: 1;
}
.number-cell {
  box-sizing: border-box;
  width: calc(100vw / 16);
  height: calc(100vw / 16);
  background: #fff;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7.5vw; /* ← TAILLE DES CHIFFRES */
  line-height: 1;
  color: #2d50cd;
}

/* ─── Couleur des chiffres selon la couleur du bloc ─── */
.number-bloc[data-color="#1faf51"] .number-cell {
  color: #1faf51;
}
.number-bloc[data-color="#ff8f2b"] .number-cell {
  color: #ff8f2b;
}
.number-bloc[data-color="#f7384d"] .number-cell {
  color: #f7384d;
}
.number-bloc[data-color="#ffff26"] .number-cell {
  color: #ffff26;
}
.number-bloc[data-color="#ffffff"] .number-cell {
  color: #ffffff;
  -webkit-text-stroke: 2px #111; /* ← ÉPAISSEUR CONTOUR CHIFFRES BLANCS */
  paint-order: stroke fill;
}

/* ─── Positions desktop (grille 16 colonnes) ─── */

/* Bleus */
#nb-1 {
  top: calc(100vw / 16 * 2);
  left: calc(100vw / 16 * 6);
} /* "6"       1 cell  */
#nb-2 {
  top: calc(100vw / 16 * 1);
  left: calc(100vw / 16 * 12);
} /* "54"      2 cells */
#nb-3 {
  top: calc(100vw / 16 * 3);
  left: calc(100vw / 16 * 10);
} /* "3"       1 cell  */
#nb-4 {
  top: calc(100vw / 16 * 5);
  left: calc(100vw / 16 * 1);
} /* "6"       1 cell  */
#nb-5 {
  top: calc(100vw / 16 * 7);
  left: calc(100vw / 16 * 15);
} /* "8"       1 cell  */
#nb-6 {
  top: calc(100vw / 16 * 7);
  left: calc(100vw / 16 * 3);
} /* "12"      2 cells */
#nb-7 {
  top: calc(100vw / 16 * 4);
  left: calc(100vw / 16 * 14);
} /* "5"       1 cell  */
#nb-8 {
  top: calc(100vw / 16 * 7);
  left: calc(100vw / 16 * 11);
} /* "7"       1 cell  */
#nb-9 {
  top: calc(100vw / 16 * 5);
  left: calc(100vw / 16 * 8);
} /* "3×3×3"  5 cells */

/* Verts */
#nb-g1 {
  top: calc(100vw / 16 * 4);
  left: 0;
} /* "43 × 10¹⁸"      6 cells  */
#nb-g4 {
  top: calc(100vw / 16 * 2);
  left: calc(100vw / 16 * 3);
} /* "8!×12!×3⁸×2¹²"  12 cells */
#nb-g5 {
  top: calc(100vw / 16 * 7);
  left: calc(100vw / 16 * 12);
} /* "20"              2 cells  */

/* Oranges */
#nb-o1 {
  top: calc(100vw / 16 * 3);
  left: calc(100vw / 16 * 2);
} /* "100000000"   9 cells */
#nb-o2 {
  top: calc(100vw / 16 * 6);
  left: calc(100vw / 16 * 7);
} /* "50000000"    8 cells */
#nb-o3 {
  top: calc(100vw / 16 * 8);
  left: calc(100vw / 16 * 5);
} /* "350000000"   9 cells */
#nb-o4 {
  top: calc(100vw / 16 * 1);
  left: calc(100vw / 16 * 10);
} /* "1980"        4 cells */

/* Rouges */
#nb-r1 {
  top: calc(100vw / 16 * 1);
  left: calc(100vw / 16 * 7);
} /* "2,76"    4 cells */
#nb-r2 {
  top: calc(100vw / 16 * 4);
  left: 0;
} /* "22,95"   5 cells */
#nb-r3 {
  top: calc(100vw / 16 * 5);
  left: calc(100vw / 16 * 10);
} /* "3,84"    4 cells */
#nb-r4 {
  top: calc(100vw / 16 * 2);
  left: calc(100vw / 16 * 14);
} /* "9"       1 cell  */
#nb-r5 {
  top: calc(100vw / 16 * 7);
  left: calc(100vw / 16 * 8);
} /* "0,103"   5 cells */

/* Jaunes */
#nb-y1 {
  top: calc(100vw / 16 * 4);
  left: calc(100vw / 16 * 12);
} /* "50"      2 cells */
#nb-y2 {
  top: calc(100vw / 16 * 1);
  left: calc(100vw / 16 * 8);
} /* "64"      2 cells */
#nb-y3 {
  top: calc(100vw / 16 * 4);
  left: calc(100vw / 16 * 2);
} /* "1981"    4 cells */
#nb-y4 {
  top: calc(100vw / 16 * 2);
  left: calc(100vw / 16 * 15);
} /* "2"       1 cell  */
#nb-y5 {
  top: calc(100vw / 16 * 7);
  left: calc(100vw / 16 * 8);
} /* "1980"    4 cells */

/* Blancs */
#nb-w1 {
  top: calc(100vw / 16 * 5);
  left: calc(100vw / 16 * 12);
} /* "2"       1 cell  */
#nb-w2 {
  top: calc(100vw / 16 * 5);
  left: calc(100vw / 16 * 2);
} /* "100"     3 cells */
#nb-w3 {
  top: calc(100vw / 16 * 1);
  left: calc(100vw / 16 * 13);
} /* "50"      2 cells */
#nb-w4 {
  top: calc(100vw / 16 * 3);
  left: calc(100vw / 16 * 8);
} /* "FBUDLR"  6 cells */
#nb-w5 {
  top: calc(100vw / 16 * 7);
  left: calc(100vw / 16 * 13);
} /* "6"       1 cell  */

/* ─── Textes d'info ─── */
.color-info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 8;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.color-info::-webkit-scrollbar {
  display: none;
}
.color-info.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Titre : une lettre par carré ─── */
.info-title-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
}
.info-title-mobile {
  display: none;
}
.info-title-cell {
  box-sizing: border-box;
  width: calc(100vw / 16);
  height: calc(100vw / 16);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7.5vw;
  line-height: 1;
}

/* ─── Corps du texte ─── */
.info-body {
  width: 50vw;
  padding-left: calc(100vw / 16 * 0.2); /* ← MARGE GAUCHE */
  font-size: calc(100vw / 16 * 0.5); /* ← TAILLE TEXTE */
  line-height: calc(100vw / 16);
}

/* ─── Couleur du texte par panel ─── */
#info-yellow {
  color: #ffff26;
}
#info-white {
  color: #111;
}
#info-white .info-title-cell {
  color: #ffffff;
  -webkit-text-stroke: 2px #111; /* ← ÉPAISSEUR CONTOUR TITRE BLANC */
  paint-order: stroke fill;
}
#info-red {
  color: #f7384d;
}
#info-orange {
  color: #ff8f2b;
}
#info-blue {
  color: #2d50cd;
}
#info-green {
  color: #1faf51;
}

/* ─── Mobile (≤ 800px) ─── */
@media (max-width: 800px) {
  html {
    height: 300vh;
  }
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Cube fixe au centre pendant le scroll */
  .scene {
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
  }

  /* Grille titre 8 colonnes */
  .info-title-row {
    grid-template-columns: repeat(8, 1fr);
  }
  .info-title-desktop {
    display: none;
  }
  .info-title-mobile {
    display: grid;
  }
  .info-title-cell {
    width: calc(100vw / 8);
    height: calc(100vw / 8);
    font-size: 14vw;
  }

  /* Corps du texte */
  .info-body {
    width: 100vw;
    font-size: calc(100vw / 8 * 0.6);
    line-height: calc(100vw / 8);
  }

  /* Chiffres : grille 8 colonnes */
  .number-bloc {
    flex-wrap: wrap;
    max-width: 100vw; /* les blocs >8 cellules passent à la ligne */
  }
  .number-cell {
    width: calc(100vw / 8);
    height: calc(100vw / 8);
    font-size: 14vw; /* ← TAILLE CHIFFRES MOBILE */
  }

  /* Positions mobile (grille 8 colonnes) */

  /* Bleus */
  #nb-1 {
    top: calc(100vw / 8 * 2);
    left: calc(100vw / 8 * 6);
  } /* "6"       1 cell  */
  #nb-2 {
    top: calc(100vw / 8 * 4);
    left: calc(100vw / 8 * 1);
  } /* "54"      2 cells */
  #nb-3 {
    top: calc(100vw / 8 * 5);
    left: calc(100vw / 8 * 5);
  } /* "3"       1 cell  */
  #nb-4 {
    top: calc(100vw / 8 * 6);
    left: 0;
  } /* "6"       1 cell  */
  #nb-5 {
    top: calc(100vw / 8 * 7);
    left: calc(100vw / 8 * 7);
  } /* "8"       1 cell  */
  #nb-6 {
    top: calc(100vw / 8 * 7);
    left: calc(100vw / 8 * 3);
  } /* "12"      2 cells */
  #nb-7 {
    top: calc(100vw / 8 * 8);
    left: calc(100vw / 8 * 6);
  } /* "5"       1 cell  */
  #nb-8 {
    top: calc(100vw / 8 * 2);
    left: calc(100vw / 8 * 2);
  } /* "7"       1 cell  */
  #nb-9 {
    top: calc(100vw / 8 * 9);
    left: 0;
  } /* "3×3×3"  5 cells */

  /* Verts */
  #nb-g1 {
    top: calc(100vw / 8 * 3);
    left: calc(100vw / 8 * 1);
  } /* "43 × 10¹⁸"      6 cells  */
  #nb-g4 {
    top: calc(100vw / 8 * 9);
    left: 0;
  } /* "8!×12!×3⁸×2¹²"  12 cells */
  #nb-g5 {
    top: calc(100vw / 8 * 7);
    left: calc(100vw / 8 * 5);
  } /* "20"              2 cells  */

  /* Oranges */
  #nb-o1 {
    top: calc(100vw / 8 * 2);
    left: calc(100vw / 8);
  } /* "100000000"   9 cells */
  #nb-o2 {
    top: calc(100vw / 8 * 5);
    left: calc(100vw / 8 * 2);
  } /* "50000000"    8 cells */
  #nb-o3 {
    top: calc(100vw / 8 * 7);
    left: 0;
  } /* "350000000"   9 cells */
  #nb-o4 {
    top: calc(100vw / 8 * 9);
    left: calc(100vw / 8 * 3);
  } /* "1980"        4 cells */

  /* Rouges */
  #nb-r1 {
    top: calc(100vw / 8 * 2);
    left: calc(100vw / 8 * 3);
  } /* "2,76"    4 cells */
  #nb-r2 {
    top: calc(100vw / 8 * 4);
    left: 0;
  } /* "22,95"   5 cells */
  #nb-r3 {
    top: calc(100vw / 8 * 6);
    left: calc(100vw / 8 * 4);
  } /* "3,84"    4 cells */
  #nb-r4 {
    top: calc(100vw / 8 * 8);
    left: calc(100vw / 8 * 1);
  } /* "9"       1 cell  */
  #nb-r5 {
    top: calc(100vw / 8 * 9);
    left: calc(100vw / 8 * 3);
  } /* "0,103"   5 cells */

  /* Jaunes */
  #nb-y1 {
    top: calc(100vw / 8 * 1);
    left: calc(100vw / 8 * 5);
  } /* "50"      2 cells */
  #nb-y2 {
    top: calc(100vw / 8 * 3);
    left: calc(100vw / 8 * 1);
  } /* "64"      2 cells */
  #nb-y3 {
    top: calc(100vw / 8 * 5);
    left: calc(100vw / 8 * 4);
  } /* "1981"    4 cells */
  #nb-y4 {
    top: calc(100vw / 8 * 7);
    left: calc(100vw / 8 * 1);
  } /* "2"       1 cell  */
  #nb-y5 {
    top: calc(100vw / 8 * 8);
    left: calc(100vw / 8 * 2);
  } /* "1980"    4 cells */

  /* Blancs */
  #nb-w1 {
    top: calc(100vw / 8 * 2);
    left: calc(100vw / 8 * 6);
  } /* "2"       1 cell  */
  #nb-w2 {
    top: calc(100vw / 8 * 4);
    left: 0;
  } /* "100"     3 cells */
  #nb-w3 {
    top: calc(100vw / 8 * 5);
    left: calc(100vw / 8 * 4);
  } /* "50"      2 cells */
  #nb-w4 {
    top: calc(100vw / 8 * 7);
    left: calc(100vw / 8 * 1);
  } /* "FBUDLR"  6 cells */
  #nb-w5 {
    top: calc(100vw / 8 * 9);
    left: calc(100vw / 8 * 2);
  } /* "6"       1 cell  */
}

/* ─── Positionnement 3D des faces ─── */
.face-front {
  transform: translateZ(calc(var(--s) / 2));
}
.face-back {
  transform: rotateY(180deg) translateZ(calc(var(--s) / 2));
}
.face-right {
  transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
}
.face-left {
  transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
}
.face-top {
  transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
}
.face-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
}