/* Reset et styles de base */
html,
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  height: -webkit-fill-available; /* Support iOS Safari */
  overflow: hidden; /* Empêche le scroll de page */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Améliore les interactions tactiles */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Polices Exposure */
@font-face {
  font-family: "ExposureTrial";
  src: url("../fonts/ExposureTrial[0].otf") format("opentype");
}
@font-face {
  font-family: "ExposureItalicTrial+100";
  src: url("../fonts/ExposureItalicTrial[+100].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial+90";
  src: url("../fonts/ExposureItalicTrial[+90].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial+80";
  src: url("../fonts/ExposureItalicTrial[+80].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial+70";
  src: url("../fonts/ExposureItalicTrial[+70].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial+50";
  src: url("../fonts/ExposureItalicTrial[+50].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial+30";
  src: url("../fonts/ExposureItalicTrial[+30].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial+20";
  src: url("../fonts/ExposureItalicTrial[+20].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial+10";
  src: url("../fonts/ExposureItalicTrial[+10].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial0";
  src: url("../fonts/ExposureItalicTrial[0].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial-10";
  src: url("../fonts/ExposureItalicTrial[-10].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial-20";
  src: url("../fonts/ExposureItalicTrial[-20].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial-30";
  src: url("../fonts/ExposureItalicTrial[-30].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial-40";
  src: url("../fonts/ExposureItalicTrial[-40].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial-50";
  src: url("../fonts/ExposureItalicTrial[-50].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial-60";
  src: url("../fonts/ExposureItalicTrial[-60].otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "ExposureItalicTrial-70";
  src: url("../fonts/ExposureItalicTrial[-70].otf") format("opentype");
  font-style: italic;
}

/* Canvas p5.js */
canvas {
  display: block;
  /* Place le canvas centré sous la barre de boutons */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 700;
  /* Améliore les performances sur mobile */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* White interstitial between phases */
.white-flash {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 400; /* below canvas so floating words never fade */
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.white-flash:not(.hidden) {
  opacity: 1;
}

/* Responsive pour mobile */
@media (max-width: 700px) {
  .pre-illu-content {
    padding: 0 4vw;
  }

  .intro-content {
    padding: 0 4vw;
  }
}